✨ feat(segmeted-control): new component (#1460)

* feat(segment): add new component

* chore(): fix focus

* chore(): add docs and first tests

* chore(): fix a11y issues

* update base images

* chore(): add changesets

* Revert "chore(): add changesets"

This reverts commit 37f7803.

* chore: add changeset

* chore: format files

* chore: fix invalid style

* chore: fix spelling

* chore: fix spelling

* update base images

---------

Co-authored-by: hirsch88 <hirsch88@users.noreply.github.com>

.changeset/swift-lamps-itch.md

@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': minor
+---
+
+**segment**: new component

docs/stories/components/bal-icon/theming.md

@@ -16,6 +16,7 @@ The component can be customization by changing the CSS variables.
 | --------------------------------- |
 | `--bal-icon-color-grey`           |
 | `--bal-icon-color-grey-light`     |
+| `--bal-icon-color-grey-dark`      |
 | `--bal-icon-color-success`        |
 | `--bal-icon-color-success-dark`   |
 | `--bal-icon-color-success-darker` |

docs/stories/components/bal-segment/bal-segment.mdx

@@ -0,0 +1,62 @@
+import { Canvas, Meta, Markdown } from '@storybook/blocks'
+import { Banner, Lead, PlaygroundBar, StoryHeading, Footer } from '../../../.storybook/blocks'
+import * as SegmentStories from './bal-segment.stories'
+
+<Meta of={SegmentStories} />
+
+<StoryHeading of={SegmentStories.Basic} hidden></StoryHeading>
+
+<Banner of={SegmentStories} />
+
+<Lead>
+  **Segment** offers a list of options. The user can only select one option from a number of choices. It automatically
+  detects if it has enough space and changes to Vertical.
+</Lead>
+
+<Canvas of={SegmentStories.Basic} sourceState="shown" />
+
+<PlaygroundBar of={SegmentStories.Basic}></PlaygroundBar>
+
+{/* STORIES */}
+{/* ------------------------------------------------------ */}
+
+<StoryHeading of={SegmentStories.Vertical}></StoryHeading>
+
+The segment items can be displayed as a list just set `vertical`.
+
+<Canvas of={SegmentStories.Vertical} sourceState="shown" />
+
+{/* ------------------------------------------------------ */}
+
+<StoryHeading of={SegmentStories.Expanded}></StoryHeading>
+
+Set `expanded` to stretch the component over the full width.
+
+<Canvas of={SegmentStories.Expanded} sourceState="shown" />
+
+{/* ------------------------------------------------------ */}
+
+## Component API
+
+import api from './api.md?raw'
+import apiItem from './bal-segment-item/api.md?raw'
+
+<Markdown>{api}</Markdown>
+
+<Markdown>{apiItem}</Markdown>
+
+## Integration
+
+import integration from '../../snippets/integration.md?raw'
+
+<Markdown>{integration}</Markdown>
+
+import theming from './theming.md?raw'
+
+<Markdown>{theming}</Markdown>
+
+import testing from './testing.md?raw'
+
+<Markdown>{testing}</Markdown>
+
+<Footer />

docs/stories/components/bal-segment/bal-segment.stories.ts

@@ -0,0 +1,53 @@
+import type { JSX } from '@baloise/ds-core'
+import type { Meta } from '@storybook/html'
+import { props, withRender, withComponentControls, StoryFactory } from '../../utils'
+
+type Args = JSX.BalSegment
+
+const meta: Meta<Args> = {
+  title: 'Components/Form/Segment',
+  args: {
+    value: 'yes',
+  },
+  argTypes: {
+    ...withComponentControls({ tag: 'bal-segment' }),
+  },
+  ...withRender(
+    ({ ...args }) => `<bal-segment ${props(args)}>
+  <bal-segment-item value="yes" label="Yes"></bal-segment-item>
+  <bal-segment-item value="no" label="No"></bal-segment-item>
+</bal-segment>`,
+  ),
+}
+
+export default meta
+
+/**
+ * STORIES
+ * ------------------------------------------------------
+ */
+
+const Story = StoryFactory<Args>(meta)
+
+export const Basic = Story()
+
+export const Vertical = Story({
+  ...withRender(
+    () => `
+<bal-segment vertical value="10000">
+  <bal-segment-item value="7000" label="max. 7’000 km">entspricht rund 186 km pro Woche</bal-segment-item>
+  <bal-segment-item value="10000" label="max. 10’000 km">entspricht rund 186 km pro Woche</bal-segment-item>
+  <bal-segment-item value="15000" label="max. 15’000 km">entspricht rund 186 km pro Woche</bal-segment-item>
+  <bal-segment-item value="20000" label="max. 20’000 km">entspricht rund 186 km pro Woche</bal-segment-item>
+  <bal-segment-item value="21000" label="mehr als 20’000 km"
+    >entspricht rund 186 km pro Woche</bal-segment-item
+  >
+</bal-segment>`,
+  ),
+})
+
+export const Expanded = Story({
+  args: {
+    expanded: true,
+  },
+})

docs/stories/components/bal-segment/testing.md

@@ -0,0 +1,12 @@
+## Testing
+
+The Baloise Design System provides a collection of custom cypress commands for the components. Moreover, some basic cypress commands like `should` or `click` have been overridden to work with the components.
+
+<a class="sb-unstyled button is-primary" href="../?path=/docs/development-testing--documentation">Go to testing guide</a>
+
+<!-- START: human documentation -->
+
+
+
+<!-- END: human documentation -->
+

docs/stories/components/bal-segment/theming.md

@@ -0,0 +1,34 @@
+## Theming
+
+The component can be customization by changing the CSS variables.
+
+<a class="sb-unstyled button is-primary" href="../?path=/docs/development-theming--page">Go to theming guide</a>
+
+<!-- START: human documentation -->
+
+
+
+<!-- END: human documentation -->
+
+### Variables​
+
+| Variable                                           |
+| -------------------------------------------------- |
+| `--bal-badge-background`                           |
+| `--bal-segment-background`                         |
+| `--bal-segment-background-invalid`                 |
+| `--bal-segment-item-focus-border`                  |
+| `--bal-segment-item-text-color`                    |
+| `--bal-segment-item-text-color-checked`            |
+| `--bal-segment-item-text-color-checked-hovered`    |
+| `--bal-segment-item-text-color-checked-pressed`    |
+| `--bal-segment-item-text-color-invalid`            |
+| `--bal-segment-item-text-color-invalid-hovered`    |
+| `--bal-segment-item-text-color-invalid-pressed`    |
+| `--bal-segment-item-text-color-disabled`           |
+| `--bal-segment-item-text-color-disabled-checked`   |
+| `--bal-segment-item-divider-background`            |
+| `--bal-segment-item-divider-background-invalid`    |
+| `--bal-segment-item-indicator-background`          |
+| `--bal-segment-item-indicator-background-invalid`  |
+| `--bal-segment-item-indicator-background-disabled` |

e2e/cypress/component/bal-segment.cy.ts

@@ -0,0 +1,46 @@
+import { Components } from '../support/utils'
+
+describe('bal-segment', () => {
+  it('should fire change event', () => {
+    const onBalChangeSpy = cy.spy().as('balChange')
+
+    cy.mount<Components.BalSegment, HTMLBalSegmentElementEventMap>(
+      `<bal-segment>
+        <bal-segment-item value="yes" label="Yes"></bal-segment-item>
+        <bal-segment-item value="no" label="No"></bal-segment-item>
+      </bal-segment>`,
+      {
+        props: {},
+        events: {
+          balChange: onBalChangeSpy,
+        },
+      },
+    )
+
+    cy.get('bal-segment-item').contains('Yes').closest('bal-segment-item').click()
+    cy.get('@balChange').should('have.been.calledOnce')
+    cy.get('@balChange').shouldHaveEventDetail('yes')
+  })
+
+  it('should not fire change event', () => {
+    const onBalChangeSpy = cy.spy().as('balChange')
+
+    cy.mount<Components.BalSegment, HTMLBalSegmentElementEventMap>(
+      `<bal-segment>
+        <bal-segment-item value="yes" label="Yes"></bal-segment-item>
+        <bal-segment-item value="no" label="No"></bal-segment-item>
+      </bal-segment>`,
+      {
+        props: {
+          value: 'yes',
+        },
+        events: {
+          balChange: onBalChangeSpy,
+        },
+      },
+    )
+
+    cy.get('bal-segment-item').contains('Yes').closest('bal-segment-item').click()
+    cy.get('@balChange').should('not.have.been.called')
+  })
+})

e2e/cypress/e2e/a11y/bal-segment.a11y.cy.ts

@@ -0,0 +1,11 @@
+describe('bal-segment', () => {
+  context('a11y', () => {
+    beforeEach(() => cy.platform('desktop').pageA11y('/components/bal-segment/test/bal-segment.a11y.html'))
+
+    describe('have the AA standard', () => {
+      it('basic', () => {
+        cy.getByTestId('basic').testA11y()
+      })
+    })
+  })
+})

e2e/cypress/e2e/visual/bal-segment.visual.cy.ts

@@ -0,0 +1,27 @@
+describe('bal-segment', () => {
+  beforeEach(() => cy.visit('/components/bal-segment/test/bal-segment.visual.html').waitForDesignSystem())
+
+  it('basic component', () => {
+    cy.platform('desktop')
+    cy.getByTestId('basic').testVisual('icon-desktop')
+
+    cy.platform('mobile')
+    cy.getByTestId('basic').testVisual('icon-mobile')
+  })
+
+  it('component horizontal', () => {
+    cy.platform('desktop')
+    cy.getByTestId('horizontal').testVisual('horizontal-desktop')
+
+    cy.platform('mobile')
+    cy.getByTestId('horizontal').testVisual('horizontal-mobile')
+  })
+
+  it('component vertical', () => {
+    cy.platform('desktop')
+    cy.getByTestId('vertical').testVisual('vertical-desktop')
+
+    cy.platform('mobile')
+    cy.getByTestId('vertical').testVisual('vertical-mobile')
+  })
+})

e2e/package.json

@@ -9,7 +9,7 @@
   "dependencies": {
     "@baloise/ds-core": "16.4.0",
     "@baloise/ds-testing": "16.4.0",
-    "@baloise/web-app-utils": "~3.11.2",
+    "@baloise/web-app-utils": "3.15.0",
     "@cypress/mount-utils": "^4.1.0",
     "axe-core": "~4.8.4",
     "compression": "~1.7.4",

package.json

@@ -140,5 +140,6 @@
     "vue": "~3.4.15",
     "vue-tsc": "~1.8.8",
     "zone.js": "~0.11.4"
-  }
+  },
+  "packageManager": "pnpm@8.5.0+sha1.83c41fe4ebdb61e08446f8bb68a75fb48756b330"
 }

packages/angular/src/bundles.ts

@@ -13,6 +13,8 @@ import {
   BalSelect,
   BalTextarea,
   BalTimeInput,
+  BalSegment,
+  BalFileUpload,
 } from './components'
 import { BalNgErrorComponent } from './directives/error.component'
 import {
@@ -72,6 +74,7 @@ import {
   BalNavbarMenuStart,
   BalRadio,
   BalRadioButton,
+  BalSegmentItem,
   BalSelectOption,
   BalShape,
   BalStack,
@@ -160,6 +163,8 @@ export const BalFieldBundle = [
 
 export const BalDropdownBundle = [BalDropdown, BalOptionList, BalOption] as const
 
+export const BalSegmentBundle = [BalSegment, BalSegmentItem] as const
+
 /* Component Sections */
 
 export const BalFormBundle = [
@@ -184,6 +189,8 @@ export const BalFormBundle = [
   BalNumberInput,
   ...BalRadioBundle,
   ...BalSelectBundle,
+  ...BalSegmentBundle,
+  BalFileUpload,
   BalTextarea,
   BalTimeInput,
 ] as const
@@ -263,6 +270,9 @@ export const BalComponentBundle = [
   BalStageImage,
   BalStepItem,
   BalSteps,
+  BalSegment,
+  BalSegmentItem,
+  BalFileUpload,
   BalTabItem,
   BalTabs,
   BalTag,