@madgex/design-system 5.4.0 → 5.5.0

package/src/components/accordion/accordion.config.js

@@ -100,5 +100,18 @@ module.exports = {
         id: 'mobile',
       },
     },
+    {
+      name: 'Starts expanded',
+      context: {
+        name: 'Starts expanded',
+        triggerLabel: 'View more categories',
+        triggerLabelActive: 'View less categories',
+        triggerNoJsHidden: true,
+        isExpanded: true,
+        content:
+          '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ligula erat, dignissim non sollicitudin ut, sagittis a sapien. Quisque eget arcu sed nulla tincidunt eleifend. Maecenas sit amet velit elit. Maecenas elementum venenatis sapien sit amet elementum. Pellentesque id mauris quis tortor suscipit posuere. Donec eu consectetur tortor. Mauris id scelerisque quam. Sed scelerisque ut est quis sollicitudin. <a href="#">Etiam semper tempor erat</a>, sed rhoncus ex malesuada non. Donec eu pellentesque odio. Vestibulum et suscipit risus, luctus semper nunc. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam eu est ac libero blandit egestas ac id tellus. Suspendisse pulvinar viverra ex, a varius ligula commodo at. Vivamus dignissim neque vitae est ultrices lobortis. Cras vel pulvinar erat.</p>',
+        id: 'expanded',
+      },
+    },
   ],
 };

package/src/components/accordion/accordion.js

@@ -99,7 +99,7 @@ const accordion = {
 
     const toggleEvent = (e) => {
       e.preventDefault();
-      accordion.toggleExpand(accordionProperties, e, toggleEvent);
+      accordion.toggleExpand(accordionProperties, toggleEvent, e);
     };
 
     triggerButton.addEventListener('click', toggleEvent);
@@ -169,8 +169,15 @@ const accordion = {
     }
   },
 
-  toggleExpand: ({ triggerContainer, accordionContent, isNonClosing, isContentFirst }, event, toggleEvent) => {
-    const triggerButton = event.target.closest(`.${accordionTriggerButtonClass}`);
+  toggleExpand: ({ triggerContainer, accordionContent, isNonClosing, isContentFirst }, toggleEvent, event) => {
+    let triggerButton;
+
+    if (event) {
+      triggerButton = event.target.closest(`.${accordionTriggerButtonClass}`);
+    } else {
+      triggerButton = triggerContainer.querySelector(`.${accordionTriggerButtonClass}`);
+    }
+
     const triggerButtonLabel = triggerButton.querySelector(`.${accordionTriggerLabelClass}`);
 
     // If closed

package/src/components/card/card.scss

@@ -43,7 +43,6 @@ $validCardProperties: background, border, box-shadow;
     @each $property in $validCardProperties {
       $value: map-get($obj, $property);
       #{$property}: $value;
-      @debug "value: #{$value}";
     }
   }
 }

package/src/components/inputs/text-editor/README.md

@@ -0,0 +1,67 @@
+## Parameters - Nunjucks
+
+- `id`: the id of the editor **required**
+- `menuButtons`: Array of objects to customise the toolbar of the editor. The objects should contain the id of the button and its label. If no array is passed, the editor will get all the buttons by default with their label in english **optional**,
+Example:
+```
+menuButtons: [
+  {
+    id: 'bold',
+    label: 'Bold',
+  },
+  {
+    id: 'italic',
+    label: 'Italic',
+  },
+],
+```
+Buttons currently available:
+- `bold`
+- `italic`
+- `strike`
+- `bulletList`
+- `orderedList`
+- `undo`
+- `redo`
+
+
+- `value`: default value for the editor **optional**
+- `i18n`: Text to translate/customise (object) **optional**
+```
+i18n: {
+  requiredIcon: 'required', // visually hidden text for the required icon
+  toolbarLabel: 'Text formatting', // label for the toolbar explaining what the toolbar is about (default: Text formatting)
+}
+```
+
+Parameters used for `MdsInputLabel` and `MdsInputMessages` macros: 
+- `labelText`: the text used in the label **required**
+- `tooltipMessage`: Toggles a tooltip with this message to appear alongside the label **optional**
+- `optional`: Is the input optional, otherwise required **optional**,
+- `hideLabel`: true/false - Add this parameter if you need to visually hide the label **optional**
+  **(please see accessibility notes below regarding the use of this parameter)**
+- `helpText`: Helper text to display under the label **optional**,
+- `validationError`: The error message provided by validation **optional**,
+
+## Notes
+
+The editor has a textarea as a fallback that gets removed from the DOM when the custom element is loaded.
+
+A hidden input has been added to the custom element so it can be used to retrieved the data in a form.
+
+## Accessibility
+
+Avoid using `hideLabel`. Only hide the label when there can be no mistake as to what the input is for, probably when there is only one input in the form.
+
+The editor is using a `toolbar` role for its menu.
+The keyboard interation is as followed:
+* Tab and Shift + Tab: Move focus into and out of the toolbar. When focus moves into a toolbar:
+- If focus is moving into the toolbar for the first time, focus is set on the first control that is not disabled.
+- If the toolbar has previously contained focus, focus is optionally set on the control that last had focus. Otherwise, it is set on the first control that is not disabled.
+
+* Left Arrow and Up Arrow: Moves focus to the previous control.
+* Right Arrow and Down Arrow: Moves focus to the next control.
+
+Reference: https://w3c.github.io/aria-practices/#toolbar
+
+The editable part of the editor has an `aria-labelledby` referencing the label.

package/src/components/inputs/text-editor/_macro.njk

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

package/src/components/inputs/text-editor/_template.njk

@@ -0,0 +1,35 @@
+{% from "../label/_macro.njk" import MdsInputLabel %}
+{% from "../_message/_macro.njk" import MdsInputMessages %}
+{% from "../../icons/_macro.njk" import MdsIcon %}
+
+<div class="mds-form-element mds-form-element--text-editor{% if params.state %} mds-form-element--{{params.state}}{% endif %}{% if params.classes %} {{params.classes}}{% endif %}" id="{{ params.id }}-container" data-test="text-editor{% if params.id %}-{{params.id}}{% endif %}">
+  {{ MdsInputLabel({
+    id: "text-editor-label-" + params.id,
+    labelText: params.labelText,
+    hideLabel: params.hideLabel,
+    inputId: params.id,
+    optional: params.optional,
+    tooltipMessage: params.tooltipMessage,
+    i18n: params.i18n
+  }) }}
+  {{ MdsInputMessages({
+    id: params.id,
+    helpText: params.helpText,
+    validationError: params.validationError
+  }) }}
+  <textarea
+      class="mds-form-control"
+      name="{{ params.id }}"
+      id="text-editor-fallback-{{ params.id }}"
+    >{#
+      #}{% if params.value %}{{params.value}}{% endif %}{#
+    #}</textarea>
+
+    <mds-text-editor 
+      editorid="{{ params.id }}" 
+      iconpath="{{ defaultIconPath }}"
+      {%- if params.menuButtons %} menu-buttons="{{ params.menuButtons | dump }}"{% endif -%}
+      {%- if params.i18n %} i18n="{{ params.i18n | dump }}"{% endif -%}
+      {%- if params.value %} value="{{ params.value }}"{% endif -%}>
+    </mds-text-editor>
+</div>

package/src/components/inputs/text-editor/text-editor.config.js

@@ -0,0 +1,46 @@
+module.exports = {
+  title: 'Text Editor',
+  meta: { status: { njk: 'wip' } },
+  context: {
+    variantTitle: 'Default editor',
+    id: 'default-editor',
+    labelText: 'Write your job description',
+    i18n: {
+      requiredIcon: 'required',
+    },
+  },
+  variants: [
+    {
+      name: 'Custom toolbar and translated editor',
+      context: {
+        variantTitle: 'Custom toolbar and translated editor',
+        id: 'custom-toolbar',
+        labelText: 'Ajouter un commentaire',
+        menuButtons: [
+          {
+            id: 'bold',
+            label: 'Gras',
+          },
+          {
+            id: 'italic',
+            label: 'Italique',
+          },
+        ],
+        i18n: {
+          requiredIcon: 'obligatoire',
+          toolbarLabel: 'Mise en forme du texte',
+        },
+      },
+    },
+    {
+      name: 'Prefilled editor',
+      context: {
+        variantTitle: 'Prefilled editor',
+        id: 'prefilled-editor',
+        labelText: 'Add a job description',
+        value:
+          '<p>Lorem ipsum dolor sit amet, <strong>consectetur adipiscing</strong> elit.<br>Phasellus malesuada dui elit, at congue risus varius in.</p><p>Duis mollis <em>"lorem lectus"</em>, eget tincidunt dui dictum non.',
+      },
+    },
+  ],
+};

package/src/components/inputs/text-editor/text-editor.njk

@@ -0,0 +1,13 @@
+{% from "./inputs/text-editor/_macro.njk" import MdsTextEditor %}
+
+<h2>{{ variantTitle }}</h2>
+
+{{ MdsTextEditor({
+  id: id,
+  labelText: labelText,
+  menuButtons: menuButtons,
+  i18n: i18n,
+  value: value
+}) }}
+
+<div class="mds-margin-top-b10"></div>

package/src/components/inputs/text-editor/text-editor.scss

@@ -0,0 +1,52 @@
+.mds-text-editor {
+  width: 100%;
+  border-radius: $mds-size-border-radius-base;
+  border: $mds-size-border-width-base solid $mds-color-input-border;
+  @extend .mds-font-body-copy;
+}
+
+.mds-text-editor__menu {
+  border-bottom: $mds-size-border-width-base solid $mds-color-input-border;
+  padding: $mds-size-baseline;
+}
+
+.mds-text-editor__button {
+    cursor: pointer;
+    user-select: none;
+    -webkit-appearance: none;
+    width: auto;
+    border: $mds-size-border-width-base solid transparent;
+    @extend .mds-border-radius;
+    background: $mds-color-neutral-white;
+    padding: $mds-size-baseline ($mds-size-baseline * 2);
+    margin-right: $mds-size-baseline;
+    display: inline-block;
+    text-align: center;
+    color: $mds-color-neutral-black;
+  
+    &:hover,
+    &:focus,
+    &--active {
+      background: $mds-color-neutral-lighter;
+    }
+
+    &--active {
+      border-color: $mds-color-neutral-black;
+    }
+
+    &[aria-disabled="true"],
+    &[aria-disabled="true"]:hover {
+      color: $mds-color-input-disabled-label;
+      background: none;
+      cursor: not-allowed;
+    }
+}
+
+.mds-text-editor__content {
+  padding: $mds-size-baseline * 3;
+  min-height: 150px;
+}
+
+.ProseMirror:focus {
+  outline: 0;
+}

package/src/icons/list-bullets.SVG

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="48" width="48"><g><circle cx="2.5" cy="4" r="2.5" fill="#000000"></circle><path d="M8.5,5H23a1,1,0,0,0,0-2H8.5a1,1,0,0,0,0,2Z" fill="#000000"></path><circle cx="2.5" cy="12" r="2.5" fill="#000000"></circle><path d="M23,11H8.5a1,1,0,0,0,0,2H23a1,1,0,0,0,0-2Z" fill="#000000"></path><circle cx="2.5" cy="20" r="2.5" fill="#000000"></circle><path d="M23,19H8.5a1,1,0,0,0,0,2H23a1,1,0,0,0,0-2Z" fill="#000000"></path></g></svg>

package/src/icons/list-numbers.SVG

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="48" width="48"><g><path d="M7.75,4.5h15a1,1,0,0,0,0-2h-15a1,1,0,0,0,0,2Z" fill="#000000"></path><path d="M22.75,11h-15a1,1,0,0,0,0,2h15a1,1,0,0,0,0-2Z" fill="#000000"></path><path d="M22.75,19.5h-15a1,1,0,0,0,0,2h15a1,1,0,0,0,0-2Z" fill="#000000"></path><path d="M2.21,17.25A2,2,0,0,0,.28,18.73a.75.75,0,0,0,1.45.39.5.5,0,0,1,.48-.37.5.5,0,0,1,.5.5.5.5,0,0,1-.5.5.75.75,0,0,0,0,1.5.5.5,0,0,1,.5.5.5.5,0,0,1-1,.13.75.75,0,1,0-1.44.41,2,2,0,0,0,3.92-.54,1.94,1.94,0,0,0-.34-1.11.28.28,0,0,1,0-.28,1.94,1.94,0,0,0,.34-1.11A2,2,0,0,0,2.21,17.25Z" fill="#000000"></path><path d="M4.25,10.75a2,2,0,0,0-4,0A.76.76,0,0,0,1,11.5a.76.76,0,0,0,.75-.75.5.5,0,0,1,1,0,1,1,0,0,1-.23.64L.41,14a.76.76,0,0,0-.09.79.76.76,0,0,0,.68.43H3.5a.75.75,0,0,0,0-1.5H3.08a.25.25,0,0,1-.22-.14.24.24,0,0,1,0-.27l.81-1A2.59,2.59,0,0,0,4.25,10.75Z" fill="#000000"></path><path d="M4,5.25H3.75A.25.25,0,0,1,3.5,5V1.62A1.38,1.38,0,0,0,2.12.25H1.5a.75.75,0,0,0,0,1.5h.25A.25.25,0,0,1,2,2V5a.25.25,0,0,1-.25.25H1.5a.75.75,0,0,0,0,1.5H4a.75.75,0,0,0,0-1.5Z" fill="#000000"></path></g></svg>

package/src/icons/redo.SVG

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="48" width="48"><path d="M22.61.16a.51.51,0,0,0-.55.11L19.47,2.86a.24.24,0,0,1-.29.05,12.54,12.54,0,0,0-13,.86A12.25,12.25,0,0,0,6.1,23.63a1.25,1.25,0,0,0,.73.24,1.22,1.22,0,0,0,1-.51,1.25,1.25,0,0,0-.27-1.75,9.74,9.74,0,0,1,.1-15.8,10,10,0,0,1,9.46-1.1.26.26,0,0,1,.16.18.25.25,0,0,1-.07.22L15.37,7a.49.49,0,0,0-.11.55.5.5,0,0,0,.46.31h6.7a.51.51,0,0,0,.5-.5V.62A.51.51,0,0,0,22.61.16Z" fill="#000000"></path></svg>

package/src/icons/text-bold.SVG

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="48" width="48"><path d="M17.19,11A6.27,6.27,0,0,0,12.84.25H4.3a1.25,1.25,0,0,0,0,2.5h1A.25.25,0,0,1,5.56,3V21a.25.25,0,0,1-.25.25h-1a1.25,1.25,0,0,0,0,2.5h10A6.74,6.74,0,0,0,17.19,11ZM12.84,2.75a3.76,3.76,0,0,1,0,7.52H8.31A.25.25,0,0,1,8.06,10V3a.25.25,0,0,1,.25-.25Zm1.42,18.5H8.31A.25.25,0,0,1,8.06,21V13a.25.25,0,0,1,.25-.25h5.95a4.24,4.24,0,0,1,0,8.48Z" fill="#000000"></path></svg>

package/src/icons/text-italic.SVG

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="48" width="48"><path d="M22.5.25H14.86a1.25,1.25,0,0,0,0,2.5H16a.26.26,0,0,1,.22.13.25.25,0,0,1,0,.25L4.78,21a.5.5,0,0,1-.42.23H1.5a1.25,1.25,0,0,0,0,2.5H9.14a1.25,1.25,0,0,0,0-2.5H8.05a.26.26,0,0,1-.22-.13.27.27,0,0,1,0-.26L19.22,3a.5.5,0,0,1,.42-.23H22.5a1.25,1.25,0,0,0,0-2.5Z" fill="#000000"></path></svg>

package/src/icons/text-strike-through.SVG

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="48" width="48"><path d="M23.75,13A1.25,1.25,0,0,0,22.5,11.7H13.56a.49.49,0,0,1-.28-.09c-.72-.51-1.48-1-2.22-1.43C8.27,8.46,6.57,7.28,6.57,5.32c0-2.24,2.21-2.57,3.52-2.57a4.53,4.53,0,0,1,3.08.76,2.69,2.69,0,0,1,.45,2v.29a1.25,1.25,0,0,0,2.5,0V5.53A4.89,4.89,0,0,0,15,1.76C14,.74,12.36.25,10.09.25c-3.66,0-6,2-6,5.07,0,2.77,1.89,4.51,4,5.92a.26.26,0,0,1,.1.28.25.25,0,0,1-.24.18H1.5a1.25,1.25,0,0,0,0,2.5h11a.27.27,0,0,1,.16.06,4.36,4.36,0,0,1,1.93,3.47c0,3.26-3.43,3.52-4.48,3.52-1.81,0-3.14-.41-3.83-1.17a3.4,3.4,0,0,1-.65-2.71,1.25,1.25,0,1,0-2.49-.24A5.75,5.75,0,0,0,4.4,21.75c1.2,1.33,3.12,2,5.69,2,4.17,0,7-2.42,7-6a6,6,0,0,0-.85-3.15.23.23,0,0,1,0-.25.23.23,0,0,1,.21-.13H22.5A1.25,1.25,0,0,0,23.75,13Z" fill="#000000"></path></svg>

package/src/icons/text-underline.SVG

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="48" width="48"><g><path d="M22.5,21.25H1.5a1.25,1.25,0,0,0,0,2.5h21a1.25,1.25,0,0,0,0-2.5Z" fill="#000000"></path><path d="M2,2.75H3.34A.25.25,0,0,1,3.59,3v8.52a8.41,8.41,0,0,0,16.82,0V3a.25.25,0,0,1,.25-.25H22a1.25,1.25,0,0,0,0-2.5H16.3a1.25,1.25,0,0,0,0,2.5h1.36a.25.25,0,0,1,.25.25v8.52a5.91,5.91,0,0,1-11.82,0V3a.25.25,0,0,1,.25-.25H7.7a1.25,1.25,0,0,0,0-2.5H2a1.25,1.25,0,0,0,0,2.5Z" fill="#000000"></path></g></svg>

package/src/icons/undo.SVG

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="48" width="48"><path d="M17.79,3.77a12.54,12.54,0,0,0-13-.86.24.24,0,0,1-.29-.05L1.94.27A.53.53,0,0,0,1.39.16a.51.51,0,0,0-.31.46v6.7a.51.51,0,0,0,.5.5h6.7a.5.5,0,0,0,.46-.31A.49.49,0,0,0,8.63,7L6.78,5.11a.22.22,0,0,1-.06-.22.23.23,0,0,1,.15-.18,9.94,9.94,0,0,1,9.46,1.1,9.74,9.74,0,0,1,.1,15.8,1.25,1.25,0,0,0-.27,1.75,1.22,1.22,0,0,0,1,.51,1.25,1.25,0,0,0,.73-.24,12.25,12.25,0,0,0-.11-19.86Z" fill="#000000"></path></svg>

package/src/js/fractal-scripts/combobox.js

@@ -28,20 +28,24 @@ function setSalaryHiddenField() {
   const comboBoxEl = document.querySelector(`[data-combobox-id="salary-selection"] mds-combobox`);
   const hiddenInputEl = document.querySelector('#salary-selection-hidden-input');
 
-  comboBoxEl.addEventListener('select-option', () => {
-    console.log('Setting #salary-selection-hidden-input..');
-    hiddenInputEl.value = hiddenInputEl.value === 'flip' ? 'flop' : 'flip';
-  });
+  if (comboBoxEl && hiddenInputEl) {
+    comboBoxEl.addEventListener('select-option', () => {
+      console.log('Setting #salary-selection-hidden-input..');
+      hiddenInputEl.value = hiddenInputEl.value === 'flip' ? 'flop' : 'flip';
+    });
+  }
 }
 
 function clearSalaryHiddenField() {
   const comboBoxEl = document.querySelector(`[data-combobox-id="salary-selection"] mds-combobox`);
   const hiddenInputEl = document.querySelector('#salary-selection-hidden-input');
 
-  comboBoxEl.addEventListener('clear-all', () => {
-    console.log('Clearing #salary-selection-hidden-input..');
-    hiddenInputEl.value = '';
-  });
+  if (comboBoxEl && hiddenInputEl) {
+    comboBoxEl.addEventListener('clear-all', () => {
+      console.log('Clearing #salary-selection-hidden-input..');
+      hiddenInputEl.value = '';
+    });
+  }
 }
 
 function bindToApi() {

package/src/scss/components/__index.scss

@@ -13,6 +13,7 @@
 @import '../../components/inputs/file-upload/file-upload';
 @import '../../components/inputs/textarea/textarea';
 @import '../../components/inputs/checkbox-pill/checkbox-pill';
+@import '../../components/inputs/text-editor/text-editor';
 @import '../../components/modal/modal';
 @import '../../components/skip-link/skip-link';
 @import '../../components/inputs/input-number/input-number';