feat(dropdown): add dropdown (#1078)

packages/styles/components/_c.dropdown.scss

@@ -0,0 +1,44 @@
+.mc-dropdown {
+  $parent: get-parent-selector(&);
+
+  position: relative;
+
+  &__trigger {
+    @include unstyle-button();
+    @include set-select-size($select-default-size);
+    @include set-font-face();
+
+    display: flex;
+    width: 18rem;
+    color: $color-grey-900;
+    border: get-border("s") solid $color-grey-600;
+    border-radius: get-border-radius("m");
+    padding-left: $mu075;
+
+    &:disabled {
+      @include add-demo-state-class {
+        border-color: transparent;
+        background-color: $color-grey-100;
+        color: $color-grey-600;
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+    }
+  }
+
+  &__tag {
+    position: absolute;
+    z-index: 2;
+    top: 50%;
+    left: $mu075;
+    transform: translateY(-50%);
+  }
+
+  &--multi {
+    #{$parent} {
+      &__trigger {
+        padding-left: 4.375rem;
+      }
+    }
+  }
+}

src/docs/Components/Form/Dropdown/accessibility.mdx

@@ -0,0 +1,41 @@
+---
+title: "Accessibility"
+order: 3
+---
+
+## Accessibility
+
+The Dropdown component has been designed to best meet current accessibility criteria.
+
+Therefore, in order to guarantee the accessibility of the component, please make sure to respect the following rules when integrating the component into your pages:
+
+<HintItem>
+  Always use an <strong>aria-expanded</strong> attribute on the{" "}
+  <strong>.mc-dropdown__trigger</strong>
+  element.
+</HintItem>
+
+<HintItem>
+  Always use an <strong>aria-activedescendant</strong> attribute on the{" "}
+  <strong>.mc-dropdown__trigger</strong>
+  element.
+</HintItem>
+
+## Keyboard navigation
+The following guidelines are issued by W3C:
+
+[Complete guidelines](https://www.w3.org/TR/wai-aria-practices/examples/combobox/combobox-autocomplete-both.html)
+
+`Enter`: Open or close the listbox component 
+
+`Down Arrow`: 
+- If the text-input is not empty and the listbox is displayed, moves visual focus to the first suggested value.
+- If the textbox is empty and the listbox is not displayed, opens the listbox and moves visual focus to the first option.
+- In both cases DOM focus remains on the text-input
+
+
+`Up Arrow`:
+- If the text-input is not empty and the listbox is displayed, moves visual focus to the last suggested value.
+- If the text-input is empty, first opens the listbox if it is not already displayed and then moves visual focus to the last option.
+- In both cases DOM focus remains on the text-input.
+

src/docs/Components/Form/Dropdown/code.mdx

@@ -0,0 +1,61 @@
+---
+title: 'Code'
+order: 2
+---
+
+## Import
+
+Import the settings and the dropdown `scss` files.
+
+```scss
+@import 'settings-tools/all-settings';
+
+@import 'components/c.listbox';
+@import 'components/c.dropdown';
+```
+
+## Usage
+
+The creation of a dropdown component in your code is done using the following HTML structure:
+
+```HTML
+<div class="mc-dropdown">
+    <button 
+      type="button" 
+      id="trigger" 
+      class="mc-dropdown__trigger" 
+      aria-haspopup="listbox" 
+      title="Dropdown menu options" 
+      aria-expanded="false"
+    >
+      Placeholder
+    </button>
+    <ul
+      tabindex="-1"
+      role="listbox"
+      aria-labelledby="lisbox"
+      class="mc-listbox"
+    >
+      <li class="mc-listbox__item" role="option">
+        <span class="mc-listbox__label">Option label</span>
+      </li>
+      ...
+    </ul>
+  </div>
+```
+
+### Single select
+
+<Preview path="default" />
+
+### Multi select
+
+<Preview path="multi" />
+
+## Behaviour
+
+### Disabled
+
+To disable an item you have to add `disabled` attribut to the `mc-dropdown__trigger` element.
+
+<Preview path="disabled" />

src/docs/Components/Form/Dropdown/index.mdx

@@ -0,0 +1,17 @@
+---
+title: 'Dropdown'
+order: 1
+description: 'The definition will be added soon.'
+status:
+  scss: 'ready'
+  figma: 'ready'
+---
+
+> The definition will be added soon.
+
+<Highlight theme="warning" title="Work in progress">
+  Please, note that the Dropdown is a beta component and it will be improved
+  through the following sprints.
+</Highlight>
+
+<Preview path="default" nude />

src/docs/Components/Form/Dropdown/previews/default.preview.html

@@ -0,0 +1,43 @@
+<div class="example">
+  <div class="mc-dropdown">
+    <button type="button" id="trigger" class="mc-dropdown__trigger" aria-haspopup="listbox" title="Dropdown menu options" aria-expanded="false">Placeholder</button>
+    <ul
+			id="listbox"
+      tabindex="-1"
+      role="listbox"
+      aria-labelledby="lisbox"
+      class="mc-listbox"
+    >
+      <li class="mc-listbox__item is-checked" role="option">
+        <span class="mc-listbox__label">Option label</span>
+      </li>
+      <li class="mc-listbox__item" role="option">
+        <span class="mc-listbox__label">Option label</span>
+      </li>
+      <li class="mc-listbox__item" role="option">
+        <span class="mc-listbox__label">Option label</span>
+      </li>
+      <li class="mc-listbox__item" role="option">
+        <span class="mc-listbox__label">Option label</span>
+      </li>
+      <li class="mc-listbox__item" role="option">
+        <span class="mc-listbox__label">Option label</span>
+      </li>
+      <li class="mc-listbox__item" role="option">
+        <span class="mc-listbox__label">Option label</span>
+      </li>
+    </ul>
+  </div>
+</div>
+
+  <!-- scripts -->
+  <script>
+    const action = document.getElementById('trigger')
+
+    action.addEventListener('click', function (e) {
+			const list = document.getElementById('listbox')
+			list.classList.toggle('is-open')
+		})
+
+  </script>
+</div>

src/docs/Components/Form/Dropdown/previews/default.preview.scss

@@ -0,0 +1,14 @@
+@import "settings-tools/all-settings";
+@include import-font-families();
+@import "components/c.listbox";
+@import "components/c.dropdown";
+
+.example {
+  @include set-font-family();
+
+  height: 250px;
+  margin: $mu200 0;
+  padding: 0 $mu200;
+  display: flex;
+  justify-content: center;
+}

src/docs/Components/Form/Dropdown/previews/disabled.preview.html

@@ -0,0 +1,43 @@
+<div class="example">
+  <div class="mc-dropdown">
+    <button type="button" id="trigger" class="mc-dropdown__trigger" aria-haspopup="listbox" title="Dropdown menu options" aria-expanded="false" disabled>Placeholder</button>
+    <ul
+	  id="listbox"
+      tabindex="-1"
+      role="listbox"
+      aria-labelledby="lisbox"
+      class="mc-listbox"
+    >
+      <li class="mc-listbox__item is-checked" role="option">
+        <span class="mc-listbox__label">Option label</span>
+      </li>
+      <li class="mc-listbox__item" role="option">
+        <span class="mc-listbox__label">Option label</span>
+      </li>
+      <li class="mc-listbox__item" role="option">
+        <span class="mc-listbox__label">Option label</span>
+      </li>
+      <li class="mc-listbox__item" role="option">
+        <span class="mc-listbox__label">Option label</span>
+      </li>
+      <li class="mc-listbox__item" role="option">
+        <span class="mc-listbox__label">Option label</span>
+      </li>
+      <li class="mc-listbox__item" role="option">
+        <span class="mc-listbox__label">Option label</span>
+      </li>
+    </ul>
+  </div>
+</div>
+
+  <!-- scripts -->
+  <script>
+    const action = document.getElementById('trigger')
+
+    action.addEventListener('click', function (e) {
+			const list = document.getElementById('listbox')
+			list.classList.toggle('is-open')
+		})
+
+  </script>
+</div>

src/docs/Components/Form/Dropdown/previews/disabled.preview.scss

@@ -0,0 +1,11 @@
+@import "settings-tools/all-settings";
+@include import-font-families();
+@import "components/c.listbox";
+@import "components/c.dropdown";
+
+.example {
+  @include set-font-family();
+
+  margin: $mu200 0;
+  padding: 0 $mu200;
+}

src/docs/Components/Form/Dropdown/previews/multi.preview.scss

@@ -0,0 +1,13 @@
+@import "settings-tools/all-settings";
+@include import-font-families();
+@import "components/c.tag";
+@import "components/c.listbox";
+@import "components/c.dropdown";
+
+.example {
+  @include set-font-family();
+
+  height: 250px;
+  margin: $mu200 0;
+  padding: 0 $mu200;
+}