♻️ refactor(select): create new component option-list

.changeset/modern-bags-worry.md

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

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

@@ -0,0 +1,17 @@
+## 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-list-padding-x` |

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

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

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

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

packages/core/src/components.d.ts

@@ -2122,6 +2122,79 @@ export namespace Components {
          */
         "value": string;
     }
+    interface BalOptionList {
+        /**
+          * Defines the max height of the list element
+         */
+        "contentHeight"?: number;
+        /**
+          * Defines the filter logic of the list
+         */
+        "filter": BalProps.BalOptionListFilter;
+        /**
+          * Filter the options by the given filter property and hides options
+          * @returns focusIndex
+         */
+        "filterByContent": (search: string) => Promise<number>;
+        /**
+          * Focus the option with the label that starts with the search property
+          * @returns focusIndex
+         */
+        "focusByLabel": (search: string) => Promise<number>;
+        /**
+          * Focus the first visible option in the list
+          * @returns focusIndex
+         */
+        "focusFirst": () => Promise<number>;
+        /**
+          * Defines the focused option with his index value
+         */
+        "focusIndex": number;
+        /**
+          * Focus the last visible option in the list
+          * @returns focusIndex
+         */
+        "focusLast": () => Promise<number>;
+        /**
+          * Focus the next visible option in the list
+          * @returns focusIndex
+         */
+        "focusNext": () => Promise<number>;
+        /**
+          * Focus the previous visible option in the list
+          * @returns focusIndex
+         */
+        "focusPrevious": () => Promise<number>;
+        /**
+          * Returns a list of option values
+         */
+        "getSelectedOptions": () => Promise<string[]>;
+        /**
+          * Id of the label element to describe this option list
+         */
+        "labelledby"?: string;
+        /**
+          * If `true` the list supports multiple selections
+         */
+        "multiple": boolean;
+        /**
+          * Resets the focus index to pristine and scrolls to the top of the list
+         */
+        "resetFocus": () => Promise<number>;
+        /**
+          * Shows or hides all options
+         */
+        "resetHidden": (hidden?: boolean) => Promise<void>;
+        /**
+          * Selects or deselects all options
+         */
+        "resetSelected": (selected?: boolean) => Promise<void>;
+        /**
+          * Selects the option with the current focus
+         */
+        "selectByFocus": () => Promise<void>;
+        "setAriaForm": (ariaForm: BalAriaForm) => Promise<void>;
+    }
     interface BalPagination {
         /**
           * Align the buttons to start, center or end
@@ -4272,6 +4345,12 @@ declare global {
         prototype: HTMLBalOptionElement;
         new (): HTMLBalOptionElement;
     };
+    interface HTMLBalOptionListElement extends Components.BalOptionList, HTMLStencilElement {
+    }
+    var HTMLBalOptionListElement: {
+        prototype: HTMLBalOptionListElement;
+        new (): HTMLBalOptionListElement;
+    };
     interface HTMLBalPaginationElementEventMap {
         "balChange": BalEvents.BalPaginationChangeDetail;
     }
@@ -4769,6 +4848,7 @@ declare global {
         "bal-notification": HTMLBalNotificationElement;
         "bal-number-input": HTMLBalNumberInputElement;
         "bal-option": HTMLBalOptionElement;
+        "bal-option-list": HTMLBalOptionListElement;
         "bal-pagination": HTMLBalPaginationElement;
         "bal-popover": HTMLBalPopoverElement;
         "bal-popover-content": HTMLBalPopoverContentElement;
@@ -7010,6 +7090,28 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    interface BalOptionList {
+        /**
+          * Defines the max height of the list element
+         */
+        "contentHeight"?: number;
+        /**
+          * Defines the filter logic of the list
+         */
+        "filter"?: BalProps.BalOptionListFilter;
+        /**
+          * Defines the focused option with his index value
+         */
+        "focusIndex"?: number;
+        /**
+          * Id of the label element to describe this option list
+         */
+        "labelledby"?: string;
+        /**
+          * If `true` the list supports multiple selections
+         */
+        "multiple"?: boolean;
+    }
     interface BalPagination {
         /**
           * Align the buttons to start, center or end
@@ -8265,6 +8367,7 @@ declare namespace LocalJSX {
         "bal-notification": BalNotification;
         "bal-number-input": BalNumberInput;
         "bal-option": BalOption;
+        "bal-option-list": BalOptionList;
         "bal-pagination": BalPagination;
         "bal-popover": BalPopover;
         "bal-popover-content": BalPopoverContent;
@@ -8385,6 +8488,7 @@ declare module "@stencil/core" {
             "bal-notification": LocalJSX.BalNotification & JSXBase.HTMLAttributes<HTMLBalNotificationElement>;
             "bal-number-input": LocalJSX.BalNumberInput & JSXBase.HTMLAttributes<HTMLBalNumberInputElement>;
             "bal-option": LocalJSX.BalOption & JSXBase.HTMLAttributes<HTMLBalOptionElement>;
+            "bal-option-list": LocalJSX.BalOptionList & JSXBase.HTMLAttributes<HTMLBalOptionListElement>;
             "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-list/bal-option-list.interfaces.ts

@@ -0,0 +1,10 @@
+/* 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 {
+  export type BalOptionListFilter = 'includes' | 'starts-with'
+}
+
+namespace BalEvents {}

packages/core/src/components/bal-option-list/bal-option-list.sass

@@ -0,0 +1,15 @@
+@import '@baloise/ds-styles/sass/mixins'
+@import './bal-option-list.vars'
+
+// Option List
+// --------------------------------------------------
+.bal-option-list
+  display: block
+  position: relative
+  width: 100%
+  list-style: none
+  margin: 0
+  padding: .5rem 0
+  outline: 0
+  max-height: var(--bal-option-list-max-height)
+  overflow: hidden auto