@madgex/design-system 13.4.0 → 13.5.1

package/src/components/inputs/category-picker/category-picker.njk

@@ -0,0 +1,81 @@
+{% from "./inputs/checkbox-list/_macro.njk" import MdsCheckboxList %}
+{% from "./inputs/label/_macro.njk" import MdsInputLabel %}
+{% from "./inputs/_message/_macro.njk" import MdsInputMessages %}
+{% from "./icons/_macro.njk" import MdsIcon %}
+
+{%- set pickerId = checkboxList.id | default('category-picker') -%}
+{%- set dropdownId = pickerId ~ '-dropdown' -%}
+{%- set searchId = pickerId ~ '-search' -%}
+
+{% if checkboxList.helpText %}
+  {% set helpTextId = [pickerId, '-help-text'] | join %}
+{% endif %}
+{% if checkboxList.validationError %}
+  {% set validationErrorId = [pickerId, '-validation-error'] | join %}
+{% endif %}
+{% if helpTextId or validationErrorId or checkboxList.describedBy %}
+  {% set ariaDescribedBy = [validationErrorId, helpTextId, checkboxList.describedBy] | join(' ') | trim %}
+{% endif %}
+
+{{ sectionTitle | safe }}
+<div class="mds-border mds-padding-b3 mds-margin-bottom-b12">
+  <div class="mds-form-element{% if checkboxList.state %} mds-form-element--{{ checkboxList.state }}{% endif %}">
+    {{ MdsInputLabel({
+      labelText: checkboxList.labelText,
+      hideLabel: checkboxList.hideLabel,
+      inputId: searchId,
+      optional: checkboxList.optional,
+      i18n: checkboxList.i18n
+    }) }}
+    {{ MdsInputMessages({
+      id: pickerId,
+      helpTextId: helpTextId,
+      helpText: checkboxList.helpText,
+      validationErrorId: validationErrorId,
+      validationError: checkboxList.validationError
+    }) }}
+
+    <mds-category-picker i18n="{{ (i18n or {}) | dump }}">
+      <span class="mds-category-picker__templates">{# Removed with JS on load #}
+        <ul><li class="mds-category-picker__pill mds-border"></li></ul>
+        <button class="mds-category-picker__clear-pill" type="button" aria-label="{{ removeButtonAria | default('remove category') }}">{{- MdsIcon({ iconName: 'close' }) -}}</button>
+      </span>
+
+      <div class="mds-category-picker__input-wrapper">
+        <span class="mds-visually-hidden">{{ (i18n or {}).selectedTermsLabel | default('Selected terms:') }}</span>
+        <ul class="mds-category-picker__pillbox" role="list">{# Pills added with JS #}</ul>
+        <input
+          class="mds-category-picker__search"
+          id="{{ searchId }}"
+          type="text"
+          role="combobox"
+          autocomplete="off"
+          aria-expanded="false"
+          aria-controls="{{ dropdownId }}"
+          aria-autocomplete="list"
+          aria-haspopup="dialog"
+          placeholder="{{ searchPlaceholder | default('Search or select…') }}"
+          {% if ariaDescribedBy %}aria-describedby="{{ ariaDescribedBy }}"{% endif %}
+        />
+      </div>
+
+      <div id="{{ dropdownId }}" class="mds-category-picker__dropdown" role="dialog" aria-label="{{ checkboxList.labelText | default('Options') }}">
+        {{ MdsCheckboxList({
+          labelText: checkboxList.labelText,
+          hideLabel: true,
+          id: checkboxList.id,
+          name: checkboxList.name,
+          options: checkboxList.options,
+          selectedOptions: checkboxList.selectedOptions,
+          disabled: checkboxList.disabled,
+          containerClasses: checkboxList.containerClasses,
+          i18n: checkboxList.i18n,
+          describedBy: checkboxList.describedBy
+        }) }}
+        <div class="mds-category-picker__no-results">{{ (i18n or {}).noResults | default('No matching options') }}</div>
+      </div>
+
+      <div class="mds-category-picker__live-region mds-visually-hidden" aria-live="polite" aria-atomic="true"></div>
+    </mds-category-picker>
+  </div>
+</div>

package/src/components/inputs/category-picker/category-picker.scss

@@ -0,0 +1,148 @@
+mds-category-picker {
+  display: block;
+  position: relative;
+
+  // Author styles on .mds-form-check override the UA [hidden] rule.
+  // Force display:none so filtering works inside the checkbox-list.
+  [hidden] {
+    display: none !important;
+  }
+
+  .mds-category-picker__templates {
+    display: none;
+  }
+
+  // --- Input wrapper (looks like a text input) ---
+  .mds-category-picker__input-wrapper {
+    @extend .mds-form-control;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: $constant-size-baseline;
+    padding: $constant-size-baseline ($constant-size-baseline * 2);
+    cursor: text;
+    min-height: $constant-size-baseline * 12; // match standard input height
+  }
+
+  // Pillbox becomes transparent to flex layout — pills are direct flex items
+  .mds-category-picker__pillbox {
+    display: contents;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  // --- Search input inside wrapper ---
+  .mds-category-picker__search {
+    flex: 1;
+    min-width: 80px;
+    border: 0;
+    outline: 0;
+    padding: $constant-size-baseline ($constant-size-baseline * 2);
+    font-size: inherit;
+    line-height: inherit;
+    background: transparent;
+    appearance: none;
+  }
+
+  // --- Pill tags inside input ---
+  .mds-category-picker__pill {
+    font-size: var(--mds-font-type-s-1-size);
+    display: inline-flex;
+    align-items: center;
+    gap: 0;
+    border-radius: $border-radius;
+    padding: $constant-size-baseline ($constant-size-baseline * 2);
+    max-width: 100%;
+    min-width: 0;
+    background-color: $constant-color-neutral-lightest;
+  }
+
+  .mds-category-picker__pill-text {
+    flex: 1 1 0;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .mds-category-picker__clear-pill {
+    background: none;
+    border: none;
+    padding: 0 0 0 ($constant-size-baseline);
+    margin: 0;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+
+    .mds-icon {
+      top: 0;
+    }
+
+    &:focus {
+      @include inputFocusStyle();
+      border-radius: $border-radius;
+    }
+  }
+
+  // --- Dropdown panel ---
+  .mds-category-picker__dropdown {
+    display: none;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 100%;
+    max-height: 300px;
+    overflow-y: auto;
+    border: $input-border;
+    border-top: none;
+    border-radius: 0 0 $border-radius $border-radius;
+    background-color: #fff;
+    @include z-index();
+  }
+
+  &.mds-category-picker--open .mds-category-picker__dropdown {
+    display: block;
+  }
+
+  // Remove fixed height constraint from checkbox container when inside dropdown
+  .mds-category-picker__dropdown .mds-form-check-container--border {
+    border: 0;
+    border-radius: 0;
+    max-height: none;
+    min-height: 0;
+    overflow: visible;
+  }
+
+  // Bold selected items and parent labels with checked children
+  .mds-form-check--has-selection > .mds-form-check__label,
+  .mds-form-check__input:checked + .mds-form-check__label {
+    font-weight: bold;
+  }
+
+  // --- No results message ---
+  .mds-category-picker__no-results {
+    display: none;
+    padding: ($constant-size-baseline * 3);
+    text-align: center;
+    color: $constant-color-neutral-base;
+
+    &--visible {
+      display: block;
+      @extend .mds-font-s-1;
+    }
+  }
+
+  // --- No-JS fallback: show checkbox list normally ---
+  html:not(.js) & .mds-category-picker__input-wrapper {
+    display: none;
+  }
+
+  html:not(.js) & .mds-category-picker__dropdown {
+    display: block;
+    position: static;
+    border: 0;
+    max-height: none;
+  }
+}

package/src/components/inputs/checkbox-list/README.md

@@ -12,6 +12,7 @@
 - `describedBy`: adding aria-describeby to the fieldset (if multiple checkboxes) or the input field if only one checkbox - **optional**
 - `options`: This is an array of objects containing the parameters for each option: `labelText`, `value`, `id`, `classes`
 - `selectedOptions`: Preselected checkboxes - Array or comma-separated string **optional**
+- `containerClasses`: Extra classes to add to the scrollable checkbox container (e.g. `mds-form-check-container--border--tall` for a taller list) **optional**
 - `i18n`: Text to translate/customise (object) **optional**
 
 ```

package/src/components/inputs/checkbox-list/_template.njk

@@ -130,7 +130,8 @@
       validationErrorId: validationErrorId,
       validationError: params.validationError
     }) }}
-    <div class="mds-form-check-container{% if hasBorder %} mds-form-check-container--border{% endif %}">
+
+    <div class="mds-form-check-container{% if hasBorder %} mds-form-check-container--border{% endif %}{% if params.containerClasses %} {{ params.containerClasses }}{% endif %}">
       {{ createCheckboxes({
         options: params.options,
         selectedOptions: params.selectedOptions,

package/src/js/index-fractal.js

@@ -5,4 +5,5 @@ document.addEventListener('DOMContentLoaded', async () => {
   switchStateScript.init();
   notificationScript.init();
   await import('../components/timeout-dialog/mds-timeout-dialog-standalone.js');
+  await import('../components/image-cropper/mds-image-cropper-standalone.js');
 });

package/src/js/index.js

@@ -13,6 +13,8 @@ import { MdsDropdownNav } from '../components/dropdown-nav/dropdown-nav';
 import { MdsTimeoutDialog } from '../components/timeout-dialog/timeout-dialog';
 import { MdsCardLink } from '../components/card/card-link';
 import { MdsConditionalSection } from '../components/conditional-section/conditional-section';
+import { MdsImageCropper } from '../components/image-cropper/image-cropper';
+import { MdsCategoryPicker } from '../components/inputs/category-picker/category-picker';
 
 if (!window.customElements.get('mds-dropdown-nav')) {
   window.customElements.define('mds-dropdown-nav', MdsDropdownNav);
@@ -26,6 +28,12 @@ if (!window.customElements.get('mds-card-link')) {
 if (!window.customElements.get('mds-conditional-section')) {
   window.customElements.define('mds-conditional-section', MdsConditionalSection);
 }
+if (!window.customElements.get('mds-image-cropper')) {
+  window.customElements.define('mds-image-cropper', MdsImageCropper);
+}
+if (!window.customElements.get('mds-category-picker')) {
+  window.customElements.define('mds-category-picker', MdsCategoryPicker);
+}
 
 const initAll = () => {
   tabs.init();

package/src/scss/components/__index.scss

@@ -9,6 +9,7 @@
 @import '../../components/popover/popover';
 @import '../../components/notification/notification';
 @import '../../components/inputs/form-elements';
+@import '../../components/inputs/category-picker/category-picker';
 @import '../../components/inputs/combobox/combobox';
 @import '../../components/inputs/file-upload/file-upload';
 @import '../../components/inputs/textarea/textarea';
@@ -17,3 +18,4 @@
 @import '../../components/skip-link/skip-link';
 @import '../../components/media-block/media-block';
 @import '../../components/timeout-dialog/timeout-dialog';
+@import '../../components/image-cropper/image-cropper';