@madgex/design-system 13.6.1 → 13.6.3

package/package.json

@@ -2,7 +2,7 @@
   "name": "@madgex/design-system",
   "author": "Madgex",
   "license": "UNLICENSED",
-  "version": "13.6.1",
+  "version": "13.6.3",
   "main": "dist/js/index.js",
   "exports": {
     ".": "./dist/js/index.js",

package/src/components/_macro-index.njk

@@ -8,6 +8,7 @@
 {% from 'src/components/image-cropper/_macro.njk' import MdsImageCropper %}
 {% from 'src/components/inputs/_checkbox-elem/_macro.njk' import MdsCheckboxElem %}
 {% from 'src/components/inputs/_message/_macro.njk' import MdsInputMessages %}
+{% from 'src/components/inputs/button-checkbox/_macro.njk' import MdsButtonCheckbox %}
 {% from 'src/components/inputs/category-picker/_macro.njk' import MdsCategoryPicker %}
 {% from 'src/components/inputs/checkbox-list/_macro.njk' import MdsCheckboxList %}
 {% from 'src/components/inputs/combobox/_macro.njk' import MdsCombobox %}

package/src/components/inputs/_checkbox-elem/_template.njk

@@ -1,15 +1,17 @@
 {% from "../../icons/_macro.njk" import MdsIcon %}
 <input
   type="checkbox"
-  class="mds-form-check__input"
+  class="{{ params.inputClass | default('mds-form-check__input') }}"
   name="{{ params.name }}"
   id="{{ params.id }}"
   {% if params.disabled %}disabled="disabled"{% endif %}
   {% if params.describedBy %}aria-describedby="{{params.describedBy}}"{% endif %}
+  {% if params.labelledBy %}aria-labelledby="{{params.labelledBy}}"{% endif %}
   {% if params.isSelected == true %}checked="checked"{% endif %}
   value="{{ params.value }}"
   {% if params.dataPath %}data-path="{{ params.dataPath }}"{% endif %}
-/>{#
+  {% if params.controls %}aria-controls="{{ params.controls }}"{% endif %}
+/>{%- if not params.inputOnly -%}{#
 #}<label class="mds-form-check__label" for="{{ params.id }}">{#
   #}{{- params.labelText | safe -}}{#
   #}{%- if not params.optional -%}
@@ -19,4 +21,5 @@
         visuallyHiddenLabel: params.i18n.requiredIcon | default('required')
       }) -}}
   {%- endif -%}{#
-#}</label>
+#}</label>
+{%- endif -%}

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

@@ -0,0 +1,38 @@
+## Parameters
+
+- `id`: The id attribute of the field. Uses `name` if not specified. **optional**
+- `name`: The name attribute of the input field. Uses `id` if not specified. **optional**
+  - NOTE: id or name are optional but one must be included
+- `value`: The value of the checkbox input. **required**
+- `isSelected`: Whether the checkbox is pre-checked. **optional**
+- `disabled`: Should the input be disabled. **optional**
+- `controls`: The `id` of the element this checkbox controls. Rendered as `aria-controls` on the input. **optional**
+- `helpText`: Helper text to display above the checkbox button. **optional**
+- `validationError`: The error message provided by validation. **optional**
+- `i18n`: Text to translate/customise (object). **required**
+
+```
+i18n: {
+  title: 'Featured Job',
+  description: 'Highlight your job in search results and reach up to twice as many candidates.',
+  price: '£500',
+}
+```
+
+## Example
+
+```
+{
+  name: 'job-boost',
+  value: 'job-boost',
+  i18n: {
+    title: 'Job boost',
+    description: 'Boost your job the best way with job boost. 100% more boosts',
+    price: '£300',
+  },
+}
+```
+
+## Accessibility
+
+The checkbox input uses `aria-labelledby` to associate the title and price elements as its label, and `aria-describedby` to associate any validation error, help text, and description elements. When `controls` is provided it is rendered as an `aria-controls` attribute on the input.

package/src/components/inputs/button-checkbox/_macro.njk

@@ -0,0 +1,3 @@
+{% macro MdsButtonCheckbox(params) %}
+    {%- include "./_template.njk" -%}
+{% endmacro %}

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

@@ -0,0 +1,51 @@
+{% from "../_message/_macro.njk" import MdsInputMessages %}
+{% from "../_checkbox-elem/_macro.njk" import MdsCheckboxElem %}
+{% from "../../icons/_macro.njk" import MdsIcon %}
+
+{%- set name = params.name or params.id -%}
+{%- set id = params.id or params.name -%}
+{%- set descriptionId = id + '-description' -%}
+{%- set titleId = id + '-title' -%}
+{%- set priceId = id + '-price' -%}
+
+{%- if params.helpText -%}
+  {%- set helpTextId = id + '-help-text' -%}
+{%- endif -%}
+
+{%- if params.validationError -%}
+  {%- set validationErrorId = id + '-validation-error' -%}
+{%- endif -%}
+
+{%- set ariaDescribedBy = [validationErrorId, helpTextId, descriptionId] | select | join(' ') | trim -%}
+
+<div class="mds-button-checkbox{% if params.validationError %} mds-button-checkbox--error{% endif %}">
+  {{- MdsInputMessages({
+    id: id,
+    helpTextId: helpTextId,
+    helpText: params.helpText,
+    validationErrorId: validationErrorId,
+    validationError: params.validationError
+  }) -}}
+  <label class="mds-button-checkbox__label">
+    {{- MdsCheckboxElem({
+      inputOnly: true,
+      inputClass: 'mds-visually-hidden',
+      name: name,
+      id: id,
+      disabled: params.disabled,
+      isSelected: params.isSelected,
+      value: params.value,
+      labelledBy: titleId + ' ' + priceId,
+      describedBy: ariaDescribedBy,
+      controls: params.controls
+    }) -}}
+    <span class="mds-button-checkbox__icon--add">{{- MdsIcon({ iconName: "add", classes: "mds-font-s2" }) -}}</span>
+    <span class="mds-button-checkbox__icon--remove">{{- MdsIcon({ iconName: "remove", classes: "mds-font-s2" }) -}}</span>
+    <span>
+      <span class="mds-button-checkbox__title mds-font-s2" id="{{ titleId }}">{{ params.i18n.title }}</span>
+      <span class="mds-button-checkbox__description" id="{{ descriptionId }}">{{ params.i18n.description }}</span>
+    </span>
+    <span class="mds-button-checkbox__price mds-font-s2" id="{{ priceId }}">{{ params.i18n.price }}</span>
+  </label>
+</div>
+

package/src/components/inputs/button-checkbox/button-checkbox.config.js

@@ -0,0 +1,41 @@
+module.exports = {
+  title: 'Button checkbox',
+  name: 'Button checkbox',
+  status: 'ready',
+  context: {
+    name: 'job-boost',
+    value: 'job-boost',
+    i18n: {
+      title: 'Job Boost',
+      description: "Increase your job's visibility to be seen by more relevant candidates.",
+      price: '£300',
+    },
+  },
+  variants: [
+    {
+      name: 'Featured Job',
+      context: {
+        name: 'featured-job',
+        value: 'featured-job',
+        i18n: {
+          title: 'Featured Job',
+          description: 'Highlight your job in search results and reach up to twice as many candidates.',
+          price: '£500',
+        },
+      },
+    },
+    {
+      name: 'Something wrong',
+      context: {
+        name: 'something-wrong',
+        value: 'something-wrong',
+        validationError: 'There was an error',
+        i18n: {
+          title: 'Unable to add upgrade',
+          description: "We couldn't apply this upgrade right now. Please try again or contact support.",
+          price: '£0',
+        },
+      },
+    },
+  ],
+};

package/src/components/inputs/button-checkbox/button-checkbox.njk

@@ -0,0 +1,15 @@
+{% from "./inputs/button-checkbox/_macro.njk" import MdsButtonCheckbox %}
+
+<div class="mds-form-field">
+  {{- MdsButtonCheckbox({
+    id: id,
+    name: name,
+    controls: controls,
+    isSelected: isSelected,
+    validationError: validationError,
+    helpText: helpText,
+    value: value,
+    i18n: i18n,
+    disabled: disabled
+  }) -}}
+</div>

package/src/components/inputs/button-checkbox/button-checkbox.scss

@@ -0,0 +1,86 @@
+.mds-button-checkbox {
+  .mds-button-checkbox__label {
+    display: flex;
+    max-width: 500px;
+    gap: ($constant-size-baseline * 4);
+    cursor: pointer;
+    border: #{$regular-border};
+    border-radius: $border-radius;
+    justify-content: space-around;
+    padding-left: ($constant-size-baseline * 4);
+
+    & > * {
+      display: block;
+      padding: ($constant-size-baseline * 6) 0;
+    }
+
+    .mds-button-checkbox__icon--remove {
+      display: none;
+    }
+  }
+
+  .mds-button-checkbox__title {
+    display: block;
+    font-weight: bold;
+    margin-bottom: ($constant-size-baseline * 2);
+  }
+
+  .mds-button-checkbox__price {
+    align-content: center;
+    background: $constant-color-neutral-lightest;
+    padding-left: ($constant-size-baseline * 4);
+    flex: 0 0 auto;
+    width: 100px;
+    max-width: 30%;
+    white-space: nowrap;
+  }
+
+  // Selected (checked) state
+  .mds-button-checkbox__label:has(:checked) {
+    outline: 2.5px solid $constant-color-neutral-darker;
+
+    .mds-button-checkbox__price {
+      background: none;
+    }
+
+    .mds-button-checkbox__icon--remove {
+      display: inline;
+    }
+    .mds-button-checkbox__icon--add {
+      display: none;
+    }
+  }
+
+  // Focus state
+  .mds-button-checkbox__label:has(:focus-visible) {
+    outline: 2px solid var(--mds-color-link-base, #1b75bb);
+    outline-offset: 2px;
+
+    .mds-button-checkbox__price {
+      background: none;
+    }
+  }
+
+  // Hover
+  .mds-button-checkbox__label:hover .mds-button-checkbox__price {
+    background: none;
+  }
+
+  // Error
+  &.mds-button-checkbox--error {
+    .mds-button-checkbox__label {
+      border-color: $constant-color-status-error-dark;
+    }
+  }
+
+  // Mobile
+  @media only screen and (max-width: $constant-size-breakpoint-sm) {
+    .mds-button-checkbox__label:has(:checked),
+    .mds-button-checkbox__label {
+      .mds-button-checkbox__icon--remove,
+      .mds-button-checkbox__icon--add {
+        display: none;
+      }
+    }
+  }
+}

package/src/components/inputs/file-upload/README.md

@@ -18,7 +18,7 @@
 - `noImageCropper`: don't show image cropper when an image file is detected
 - `noAutoOpenImageCropper`: don't automatically open image cropper modal on file change
 - `siteContainerId`: see MdsModal for `siteContainerId`
-- `cropper`: see MdsImageCropper [here](/components/detail/image-cropper)
+- `cropper`: see MdsImageCropper [here](/components/detail/image-cropper/index.html)
 
 ```
 i18n: {

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

@@ -36,7 +36,7 @@
 {% endif %}
 
 <div class="mds-form-element mds-form-element--checkbox{% if params.state %} mds-form-element--{{params.state}}{% endif %}{% if params.classes %} {{params.classes}}{% endif %}" data-test="checkbox{% if params.id %}-{{params.id}}{% endif %}">
-{{- MdsInputMessages({
+  {{- MdsInputMessages({
     id: params.id,
     helpTextId: helpTextId,
     helpText: params.helpText,

package/src/icons/add.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <g clip-path="url(#clip0_7441_4029)">
+    <path
+      d="M12 0C9.62663 0 7.30655 0.703788 5.33316 2.02236C3.35977 3.34094 1.8217 5.21509 0.913451 7.4078C0.00519943 9.60051 -0.232441 12.0133 0.230582 14.3411C0.693605 16.6689 1.83649 18.8071 3.51472 20.4853C5.19295 22.1635 7.33115 23.3064 9.65892 23.7694C11.9867 24.2324 14.3995 23.9948 16.5922 23.0866C18.7849 22.1783 20.6591 20.6402 21.9776 18.6668C23.2962 16.6935 24 14.3734 24 12C24 8.8174 22.7357 5.76515 20.4853 3.51472C18.2348 1.26428 15.1826 0 12 0ZM12 21C10.22 21 8.47992 20.4722 6.99987 19.4832C5.51983 18.4943 4.36628 17.0887 3.68509 15.4442C3.0039 13.7996 2.82567 11.99 3.17294 10.2442C3.5202 8.49836 4.37737 6.89471 5.63604 5.63604C6.89472 4.37737 8.49836 3.5202 10.2442 3.17293C11.99 2.82567 13.7996 3.0039 15.4442 3.68508C17.0887 4.36627 18.4943 5.51983 19.4832 6.99987C20.4722 8.47991 21 10.22 21 12C21 14.3869 20.0518 16.6761 18.364 18.364C16.6761 20.0518 14.387 21 12 21Z"
+      fill="currentColor" />
+    <path
+      d="M17.25 10.57H13.68C13.6137 10.57 13.5501 10.5437 13.5032 10.4968C13.4563 10.4499 13.43 10.3863 13.43 10.32V6.75C13.4303 6.49322 13.3319 6.24616 13.155 6.06C12.9781 5.87384 12.7365 5.76284 12.48 5.75H11.48C11.2235 5.76284 10.9819 5.87384 10.805 6.06C10.6281 6.24616 10.5297 6.49322 10.53 6.75V10.32C10.53 10.3863 10.5037 10.4499 10.4568 10.4968C10.4099 10.5437 10.3463 10.57 10.28 10.57H6.75C6.49322 10.5697 6.24616 10.6681 6.06 10.845C5.87384 11.0219 5.76284 11.2635 5.75 11.52V12.52C5.76284 12.7765 5.87384 13.0181 6.06 13.195C6.24616 13.3719 6.49322 13.4703 6.75 13.47H10.32C10.3863 13.47 10.4499 13.4963 10.4968 13.5432C10.5437 13.5901 10.57 13.6537 10.57 13.72V17.29C10.5821 17.538 10.6861 17.7727 10.8617 17.9483C11.0373 18.1239 11.272 18.2279 11.52 18.24H12.52C12.768 18.2279 13.0027 18.1239 13.1783 17.9483C13.3539 17.7727 13.4579 17.538 13.47 17.29V13.68C13.47 13.6137 13.4963 13.5501 13.5432 13.5032C13.5901 13.4563 13.6537 13.43 13.72 13.43H17.29C17.538 13.4179 17.7727 13.3139 17.9483 13.1383C18.1239 12.9627 18.2279 12.728 18.24 12.48V11.48C18.2176 11.2324 18.1038 11.002 17.9208 10.8338C17.7378 10.6655 17.4986 10.5715 17.25 10.57Z"
+      fill="currentColor" />
+  </g>
+  <defs>
+    <clipPath id="clip0_7441_4029">
+      <rect width="24" height="24" fill="white" />
+    </clipPath>
+  </defs>
+</svg>

package/src/icons/remove.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <g clip-path="url(#clip0_7448_4095)">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M12.0001 0C15.1827 0 18.235 1.26421 20.4854 3.51465C22.7359 5.76509 24.0001 8.8174 24.0001 12C24.0001 14.3734 23.2962 16.6936 21.9776 18.667C20.6591 20.6403 18.7845 22.1787 16.5919 23.0869C14.3994 23.995 11.9868 24.2324 9.65927 23.7695C7.33149 23.3065 5.19297 22.1636 3.51474 20.4854C1.83651 18.8071 0.693578 16.6686 0.230556 14.3408C-0.23236 12.0133 0.00511932 9.6007 0.913173 7.4082C1.8214 5.21555 3.35978 3.34103 5.3331 2.02246C7.30648 0.703885 9.62671 1.13119e-06 12.0001 0ZM6.75009 10.5703C5.81161 10.5703 5.80003 11.497 5.79989 11.5195V12.4795C5.79989 13.4295 6.75009 13.4297 6.75009 13.4297H17.2599C18.2099 13.4297 18.21 12.4795 18.21 12.4795V11.5195C18.2098 10.5699 17.2599 10.5703 17.2599 10.5703H6.75009Z"
+      fill="currentColor" />
+  </g>
+  <defs>
+    <clipPath id="clip0_7448_4095">
+      <rect width="24" height="24" fill="white" />
+    </clipPath>
+  </defs>
+</svg>

package/src/scss/components/__index.scss

@@ -14,6 +14,7 @@
 @import '../../components/inputs/file-upload/file-upload';
 @import '../../components/inputs/textarea/textarea';
 @import '../../components/inputs/text-editor/text-editor';
+@import '../../components/inputs/button-checkbox/button-checkbox';
 @import '../../components/modal/modal';
 @import '../../components/skip-link/skip-link';
 @import '../../components/media-block/media-block';

package/src/scss/core/_lists.scss

@@ -72,3 +72,59 @@
     margin-left: 0;
   }
 }
+
+.mds-step-list {
+  list-style-type: none;
+  counter-reset: item;
+
+  .mds-step-list__item {
+    position: relative;
+    counter-increment: item;
+
+    a {
+      --text-decoration: none;
+    }
+
+    &:before {
+      content: counter(item);
+      width: 2.5em;
+      height: 2.5em;
+      margin-right: 0.5em;
+      margin-bottom: 1em;
+      border-radius: 50%;
+      border: solid 1px $constant-color-neutral-light;
+      display: inline-flex;
+      justify-content: center;
+      line-height: 2.5em;
+    }
+
+    & + .mds-step-list__item:after {
+      content: '';
+      position: absolute;
+      top: -1em;
+      left: 1.25em;
+      height: 1em;
+      border-right: 1px solid $constant-color-neutral-light;
+    }
+
+    &.mds-step-list__item--current {
+      font-weight: bold;
+
+      &:before {
+        border-width: 2px;
+        font-weight: bold;
+        background-color: $constant-color-neutral-lightest;
+        border-color: $constant-color-neutral-darker;
+      }
+    }
+
+    &.mds-step-list__item--future {
+      color: $constant-color-neutral-light;
+
+      &:before {
+        border-style: dashed;
+        color: $constant-color-neutral-light;
+      }
+    }
+  }
+}

package/src/typography/lists.njk

@@ -81,4 +81,18 @@
   <li class="mds-list__item">
     <a href="#three">three</a>
   </li>
-</ul>
+</ul>
+
+<h2>Step List</h2>
+<ol class="mds-step-list">
+  <li class="mds-step-list__item">Step 1</li>
+  <li class="mds-step-list__item">Step 2</li>
+  <li class="mds-step-list__item">Step 3</li>
+</ol>
+
+<h2>Step List with page progress</h2>
+<ol class="mds-step-list">
+  <li class="mds-step-list__item"><a href="https://www.google.com">Past page with link</a></li>
+  <li class="mds-step-list__item mds-step-list__item--current" aria-current="page">Current page</li>
+  <li class="mds-step-list__item mds-step-list__item--future">Ghost of pages future</li>
+</ol>