♻️ refactor(select): create option component (#1356)

* Create PR for #1354

* add new component option

* add new component option

* fix a11y issues

* add interface of the component

* add output for visuals

* adjust ci

* update gitignore

* update base images

* adjust colors and sass vars

* update base images

* merge

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Gery Hirschfeld <[email protected]>
Co-authored-by: hirsch88 <[email protected]>

.changeset/ten-teachers-appear.md

@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': minor
+---
+
+**option**: new child component of option-list. Option list component will be used by drop-down, combobox and autocomplete.

.gitignore

@@ -68,8 +68,8 @@ libs/output-targets-vue/CHANGELOG.md
 e2e/generated
 e2e/downloads
 e2e/reg.json
-e2e/cypress/snapshots
-!e2e/cypress/snapshots/base
+e2e/cypress/snapshots/actual
+e2e/cypress/snapshots/diff
 
 resources/data
 !resources/data/tags.json

docs/stories/components/bal-option/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-option/theming.md

@@ -0,0 +1,32 @@
+## 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-option-padding-x`                   |
+| `--bal-option-min-height`                  |
+| `--bal-option-background`                  |
+| `--bal-option-background-hovered`          |
+| `--bal-option-background-selected`         |
+| `--bal-option-background-selected-hovered` |
+| `--bal-option-background-invalid`          |
+| `--bal-option-background-invalid-hovered`  |
+| `--bal-option-border-width`                |
+| `--bal-option-border-color`                |
+| `--bal-option-font-family`                 |
+| `--bal-option-font-weight`                 |
+| `--bal-option-line-height`                 |
+| `--bal-option-text-hovered`                |
+| `--bal-option-text-pressed`                |
+| `--bal-option-text-disabled`               |

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

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

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

@@ -0,0 +1,17 @@
+describe('bal-option', () => {
+  describe('basic', () => {
+    beforeEach(() => cy.visit('/components/bal-option/test/bal-option.visual.html').waitForDesignSystem())
+
+    it('basic component', () => {
+      cy.getByTestId('basic').testVisual('option-basic')
+    })
+
+    it('listbox', () => {
+      cy.getByTestId('listbox').testVisual('option-listbox')
+    })
+
+    it('listbox-with-checkboxes', () => {
+      cy.getByTestId('listbox-checkbox').testVisual('option-listbox-checkbox')
+    })
+  })
+})

e2e/cypress/support/lib/visuals/command.ts

@@ -35,6 +35,10 @@ export type CypressConfigEnv = {
 
 /** Add custom cypress command to compare image snapshots of an element or the window. */
 function addCompareSnapshotCommand(screenshotOptions?: ScreenshotOptions): void {
+  console.log('')
+  console.log('visualRegressionType => ', Cypress.env('visualRegressionType'))
+  console.log('')
+
   Cypress.Commands.add(
     'testVisual',
     { prevSubject: 'optional' },

packages/core/src/components.d.ts

@@ -2080,6 +2080,48 @@ export namespace Components {
          */
         "value"?: number;
     }
+    interface BalOption {
+        /**
+          * If `true`, the user cannot interact with the option.
+         */
+        "checkbox": boolean;
+        /**
+          * If `true`, the user cannot interact with the option.
+         */
+        "disabled": boolean;
+        /**
+          * If `true`, the user cannot interact with the option.
+         */
+        "focused": boolean;
+        /**
+          * If `true`, the option is hidden.
+         */
+        "hidden": boolean;
+        /**
+          * If `true`, the user cannot interact with the option.
+         */
+        "invalid": boolean;
+        /**
+          * Label will be shown in the input element when it got selected
+         */
+        "label": string;
+        /**
+          * If `true`, the user cannot interact with the option.
+         */
+        "multiline": boolean;
+        /**
+          * Selects or deselects the option and informs other components
+         */
+        "select": (selected?: boolean) => Promise<void>;
+        /**
+          * If `true`, the user cannot interact with the option.
+         */
+        "selected": boolean;
+        /**
+          * The value of the select option. This value will be returned by the parent `<bal-select>` element.
+         */
+        "value": string;
+    }
     interface BalPagination {
         /**
           * Align the buttons to start, center or end
@@ -3332,6 +3374,10 @@ export interface BalNumberInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBalNumberInputElement;
 }
+export interface BalOptionCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBalOptionElement;
+}
 export interface BalPaginationCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBalPaginationElement;
@@ -4208,6 +4254,24 @@ declare global {
         prototype: HTMLBalNumberInputElement;
         new (): HTMLBalNumberInputElement;
     };
+    interface HTMLBalOptionElementEventMap {
+        "balOptionChange": BalEvents.BalOptionChangeDetail;
+        "balOptionFocus": BalEvents.BalOptionFocusDetail;
+    }
+    interface HTMLBalOptionElement extends Components.BalOption, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBalOptionElementEventMap>(type: K, listener: (this: HTMLBalOptionElement, ev: BalOptionCustomEvent<HTMLBalOptionElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLBalOptionElementEventMap>(type: K, listener: (this: HTMLBalOptionElement, ev: BalOptionCustomEvent<HTMLBalOptionElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLBalOptionElement: {
+        prototype: HTMLBalOptionElement;
+        new (): HTMLBalOptionElement;
+    };
     interface HTMLBalPaginationElementEventMap {
         "balChange": BalEvents.BalPaginationChangeDetail;
     }
@@ -4704,6 +4768,7 @@ declare global {
         "bal-notices": HTMLBalNoticesElement;
         "bal-notification": HTMLBalNotificationElement;
         "bal-number-input": HTMLBalNumberInputElement;
+        "bal-option": HTMLBalOptionElement;
         "bal-pagination": HTMLBalPaginationElement;
         "bal-popover": HTMLBalPopoverElement;
         "bal-popover-content": HTMLBalPopoverContentElement;
@@ -6902,6 +6967,49 @@ declare namespace LocalJSX {
          */
         "value"?: number;
     }
+    interface BalOption {
+        /**
+          * If `true`, the user cannot interact with the option.
+         */
+        "checkbox"?: boolean;
+        /**
+          * If `true`, the user cannot interact with the option.
+         */
+        "disabled"?: boolean;
+        /**
+          * If `true`, the user cannot interact with the option.
+         */
+        "focused"?: boolean;
+        /**
+          * If `true`, the option is hidden.
+         */
+        "hidden"?: boolean;
+        /**
+          * If `true`, the user cannot interact with the option.
+         */
+        "invalid"?: boolean;
+        /**
+          * Label will be shown in the input element when it got selected
+         */
+        "label"?: string;
+        /**
+          * If `true`, the user cannot interact with the option.
+         */
+        "multiline"?: boolean;
+        /**
+          * Emitted when the option gets selected or unselected
+         */
+        "onBalOptionChange"?: (event: BalOptionCustomEvent<BalEvents.BalOptionChangeDetail>) => void;
+        "onBalOptionFocus"?: (event: BalOptionCustomEvent<BalEvents.BalOptionFocusDetail>) => void;
+        /**
+          * If `true`, the user cannot interact with the option.
+         */
+        "selected"?: boolean;
+        /**
+          * The value of the select option. This value will be returned by the parent `<bal-select>` element.
+         */
+        "value"?: string;
+    }
     interface BalPagination {
         /**
           * Align the buttons to start, center or end
@@ -8156,6 +8264,7 @@ declare namespace LocalJSX {
         "bal-notices": BalNotices;
         "bal-notification": BalNotification;
         "bal-number-input": BalNumberInput;
+        "bal-option": BalOption;
         "bal-pagination": BalPagination;
         "bal-popover": BalPopover;
         "bal-popover-content": BalPopoverContent;
@@ -8275,6 +8384,7 @@ declare module "@stencil/core" {
             "bal-notices": LocalJSX.BalNotices & JSXBase.HTMLAttributes<HTMLBalNoticesElement>;
             "bal-notification": LocalJSX.BalNotification & JSXBase.HTMLAttributes<HTMLBalNotificationElement>;
             "bal-number-input": LocalJSX.BalNumberInput & JSXBase.HTMLAttributes<HTMLBalNumberInputElement>;
+            "bal-option": LocalJSX.BalOption & JSXBase.HTMLAttributes<HTMLBalOptionElement>;
             "bal-pagination": LocalJSX.BalPagination & JSXBase.HTMLAttributes<HTMLBalPaginationElement>;
             "bal-popover": LocalJSX.BalPopover & JSXBase.HTMLAttributes<HTMLBalPopoverElement>;
             "bal-popover-content": LocalJSX.BalPopoverContent & JSXBase.HTMLAttributes<HTMLBalPopoverContentElement>;

packages/core/src/components/bal-option/bal-option.interfaces.ts

@@ -0,0 +1,28 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../../interfaces.d.ts" />
+
+namespace BalProps {}
+
+namespace BalEvents {
+  export interface BalOptionCustomEvent<T> extends CustomEvent<T> {
+    detail: T
+    target: HTMLBalOptionElement
+  }
+
+  export interface BalOption {
+    value: string
+    label: string
+    selected: boolean
+  }
+
+  export type BalOptionFocusDetail = BalOption
+  export type BalOptionFocus = BalOptionCustomEvent<BalOptionFocusDetail>
+
+  export type BalOptionBlurDetail = FocusEvent
+  export type BalOptionBlur = BalOptionCustomEvent<BalOptionBlurDetail>
+
+  export type BalOptionChangeDetail = BalOption
+  export type BalOptionChange = BalOptionCustomEvent<BalOptionChangeDetail>
+}