mp-design-system 1.2.5 → 1.2.7

package/src/_includes/components/input/combobox.njk

@@ -1,17 +0,0 @@
-{# <div class="c-combobox">
-  <input type="text" class="c-combobox__input" id="combobox-input" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="combobox-label" autocomplete="off" placeholder="Select an option" role="combobox" aria-owns="combobox-options">
-  <ul class="c-combobox__dropdown" id="combobox-options" role="listbox" aria-labelledby="combobox-input">
-    <li data-value="option1" role="option">Option 1</li>
-    <li data-value="option2" role="option">Option 2</li>
-    <li data-value="option3" role="option">Option 3</li>
-  </ul>
-<div> #}
-
-<div class="c-combobox">
-  <input type="text" id="combobox-input" class="c-combobox__input" placeholder="Type to search..." autocomplete="off" aria-controls="combobox-list" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-owns="combobox-select">
-  <ul id="combobox-select" class="c-combobox__select" role="listbox" aria-label="Options" tabindex="-1">
-    <li role="option" aria-selected="false">Option 1</li>
-    <li role="option" aria-selected="false">Option 2</li>
-    <li role="option" aria-selected="false">Option 3</li>
-  </ul>
-</div>

package/src/_includes/components/input/combobox.scss

@@ -1,31 +0,0 @@
-.c-combobox {
-  position: relative;
-  display: inline-block;
-  
-  &__input {
-    width: 200px;
-    padding: 5px;
-  }
-  
-  &__select {
-    position: absolute;
-    z-index: 1;
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
-    background-color: #f9f9f9;
-    border: 1px solid #ccc;
-    border-top: none;
-    display: none;
-    
-    li {
-      padding: 10px;
-      cursor: pointer;
-      
-      &[aria-selected="true"] {
-        background-color: #e6e6e6;
-      }
-    }
-  }
-  
-}

package/src/_includes/components/input/combox.config.js

@@ -1,49 +0,0 @@
-const categories = require('../component/categories');
-
-module.exports = {
-  title: 'Combobox',
-  category: categories.form,
-  component: {
-    name: 'combobox',
-    folder: 'input'
-  },
-  figma: 'https://www.figma.com/file/rUQ6aPQAfBX55o3hH0Lqb3/Design-exploration?node-id=213%3A918',
-  preview: 'form',
-  context: {
-    label: 'Label',
-    name: 'name',
-    id: 'id',
-    type: 'text',
-    placeholder: 'Placeholder',
-    required: true
-  },
-  variants: [
-    {
-      title: 'With error',
-      context: {
-        error: true
-      }
-    },
-    {
-      title: 'With error message',
-      context: {
-        error: 'This field is required'
-      }
-    },
-    {
-      title: 'Disabled',
-      context: {
-        disabled: true
-      }
-    }
-  ],
-  props: [
-    {
-      table: [
-        ['label', 'string'],
-        ['id', 'string', 'ID attribute'],
-        ['name', 'string', 'Name attribute (falls back to ID)'],
-      ]
-    }
-  ]
-}

package/src/assets/js/imports/combobox.js

@@ -1,66 +0,0 @@
-function Combobox() {
-  const comboboxes = Array.from(document.querySelectorAll('.c-combobox'));
-
-  comboboxes.forEach(function (combobox) {
-    const input = combobox.querySelector('.c-combobox__input');
-    const select = combobox.querySelector('.c-combobox__select');
-    const options = Array.from(select.querySelectorAll('li[role="option"]'));
-
-    // Set initial state
-    input.setAttribute('aria-expanded', 'false');
-    input.setAttribute('aria-owns', select.id);
-    input.setAttribute('aria-controls', select.id);
-
-    // Event listeners
-    input.addEventListener('focus', function () {
-      input.setAttribute('aria-expanded', 'true');
-      select.setAttribute('aria-expanded', 'true');
-    });
-
-    input.addEventListener('blur', function () {
-      input.setAttribute('aria-expanded', 'false');
-      select.setAttribute('aria-expanded', 'false');
-    });
-
-    input.addEventListener('input', function () {
-      const inputValue = input.value.toLowerCase();
-
-      options.forEach(function (option) {
-        const optionText = option.textContent.toLowerCase();
-
-        if (optionText.includes(inputValue)) {
-          option.style.display = '';
-          option.setAttribute('aria-hidden', 'false');
-        } else {
-          option.style.display = 'none';
-          option.setAttribute('aria-hidden', 'true');
-        }
-      });
-    });
-
-    select.addEventListener('click', function (event) {
-      const target = event.target;
-      const isOption = target.getAttribute('role') === 'option';
-
-      if (isOption) {
-        const selectedOption = select.querySelector('[aria-selected="true"]');
-        if (selectedOption) {
-          selectedOption.setAttribute('aria-selected', 'false');
-        }
-
-        target.setAttribute('aria-selected', 'true');
-        input.value = target.textContent;
-
-        input.focus();
-      }
-    });
-
-    // Display options initially
-    options.forEach(function (option) {
-      option.style.display = '';
-      option.setAttribute('aria-hidden', 'false');
-    });
-  });
-}
-
-export default Combobox;