@madgex/design-system 1.55.1 → 1.56.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@madgex/design-system",
   "author": "Madgex",
   "license": "UNLICENSED",
-  "version": "1.55.1",
+  "version": "1.56.1",
   "scripts": {
     "clean": "rimraf dist public tokens/build",
     "commit": "commit",

package/src/components/inputs/_form-elements.scss

@@ -31,11 +31,29 @@
 .mds-form-message {
   @extend .mds-font-brevier;
   margin-bottom: $mds-size-baseline * 4;
+  display: flex;
+  align-items: center;
 
   &--error {
+    color: $mds-color-status-error-dark;
+  }
+}
+
+.mds-form-message--character-count {
+  display: none;
+  margin-top: $mds-size-baseline;
+
+  .js & {
     display: flex;
     align-items: center;
-    color: $mds-color-status-error-dark;
+    justify-content: flex-end;
+  }
+
+  & .mds-icon {
+    display: none;
+  }
+  &.mds-form-message--error .mds-icon {
+    display: inline-block;
   }
 }
 

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

@@ -15,6 +15,7 @@
 - `state`: The current state of the input, currently the only allowed value is `error` **optional**,
 - `tooltipMessage`: Toggles a tooltip with this message to appear on the input **optional**
 - `classes`: add extra classes to the trigger - **optional**
+- `fileTypes`: comma separated list of the different types of file you want to allow. It will add the `accept` attribute on the input - **optional ** (see notes on validation) 
 
 ## Accessibility
 
@@ -31,6 +32,14 @@ For keyboard users as the file input itself remains visually hidden, when it rec
 
 The styling falls back completely to a native file input with default design system form field styling if Javascript is not available.
 
+## Validation
+
+The `accept` attribute doesn't validate the types of the selected files; it simply provides hints for browsers to guide users towards selecting the correct file types. It is possible (in most cases) for users to toggle an option in the file chooser that makes it possible to override this and select any file they wish, which could have the incorrect type.
+
+When using the drag and drop functionality, the user can also choose any file.
+
+Because of this, you should make sure that expected requirements are validated server-side.
+
 ## Note
 
 When a file is selected, the drag & drop/file selection area is disabled. When using cloud services such as Dropbox or Google Drive, the buttons to access those services will disappear as well. The user will need to click on the "remove file" button to be able to select a file again, either using the file input or the cloud services.

package/src/components/inputs/textarea/README.md

@@ -0,0 +1,39 @@
+## Parameters
+
+- `labelText`: The label for the textarea **required**,
+- `hideLabel`: true/false - Add this parameter if you need to visually hide the label. The text of the label will the used by default as a placeholder, unless overridden by the placeholder parameter **optional**
+**(please see accessibility notes below regarding the use of this parameter)**
+- `name`: The name of the textarea field, uses ID unless specified **optional**,
+- `id`: The id attribute of the field, **required**
+- `optional`: Is the textarea optional, otherwise required **optional**,
+- `disabled`: Should the textarea be disabled **optional**,
+- `helpText`: Helper text to display under the label **optional**,
+- `validationError`: The error message provided by validation **optional**,
+- `state`: The current state of the textarea, currently the only allowed value is `error` **optional**,
+- `tooltipMessage`: Toggles a tooltip with this message to appear on the textarea **optional**
+- `classes`: add extra classes to the trigger - **optional**
+- `placeholder`: add a placeholder to the textarea **optional**
+**(please see accessibility notes below regarding the use of this parameter)**
+- `maxlength`: specify the maximum length (in characters) allowed in the textarea. Adding this attribute will automatically add a "character counter" at the bottom right of the textarea (see notes below) - **optional**
+
+
+## Accessibility
+
+This textarea relies entirely on the browser standard textarea and applies the accessibility provided by that.
+Additional accessibility aria attributes are applied to the label `aria-live=polite` to inform users of help text or error messages attributed to a form
+
+Avoid using `hideLabel` and `placeholder` if you can. Only hide the label when there can be no mistake as to what the textarea is for,  probably when there is only one textarea in the form.
+The placeholder can also be a problem given its lower contrast so don't rely on it to give important information. Use the `helpText` or the `tooltipMessage` instead, for example.
+
+Useful article: https://www.nngroup.com/articles/form-design-placeholders/
+
+
+## Character counter
+Adding the `maxlength` attribute will add a "character counter" automatically if javascript is enabled. Please note that the attribute will be removed with javascript to allow for a negative count. This is to ensure that the text entered by the user is not cut off without warning. The negative count's message will look like an error to prompt the user to edit the text entered. The maximum length of the text should obviously be checked server side.
+Note: Line breaks are counted as 2 characters as forms will encode them as such (`\r\n`)
+
+`aria-live="polite"` and `aria-atomic="true"` has been added to the counter container so the updates can be read to the user after he has finished entering the text.
+We are also using `aria-describedby` to get the number of characters left when a user enter the textarea. 
+
+Please note that, at the date of writing (28/07/20), `aria-describedby` doesn't work if it references a `role="alert/status"` (https://a11ysupport.io/tech/aria/aria-describedby_attribute) which is why we're only using the `aria-live` and `aria-atomic` on the live region.
+

package/src/components/inputs/textarea/_macro.njk

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

package/src/components/inputs/textarea/_template.njk

@@ -0,0 +1,55 @@
+{% from "../label/_macro.njk" import MdsInputLabel %}
+{% from "../_message/_macro.njk" import MdsInputMessages %}
+{% from "../../icons/_macro.njk" import MdsIcon %}
+
+{% if params.name %}
+  {% set name = params.name %}
+{% else %}
+  {% set name = params.id %}
+{% endif %}
+
+<div class="mds-form-element mds-form-element--textarea{% if params.state %} mds-form-element--{{params.state}}{% endif %}{% if params.classes %} {{params.classes}}{% endif %}{% if params.maxlength %} mds-form-element--character-count{% endif %}" id="{{ params.id }}-container" data-test="textarea">
+  {{ MdsInputLabel({
+    labelText: params.labelText,
+    hideLabel: params.hideLabel,
+    id: params.id,
+    optional: params.optional,
+    tooltipMessage: params.tooltipMessage
+  }) }}
+  {{ MdsInputMessages({
+    id: params.id,
+    helpText: params.helpText,
+    validationError: params.validationError
+  }) }}
+    <textarea
+      class="mds-form-control"
+      name="{{ name }}"
+      id="{{ params.id }}"
+      {% if not params.optional %}
+        required="required"
+      {% endif %}
+      {% if params.disabled %}
+        disabled="disabled"
+      {% endif %}
+      {% if params.hideLabel or params.placeholder %}
+        placeholder="{% if params.placeholder %}{{ params.placeholder }}{% else %}{{ params.labelText }}{% endif %}"
+      {% endif %}
+      {% if params.maxlength %}
+        maxlength="{{ params.maxlength }}" aria-describedby="{{ params.id }}-character-count-text"
+      {% endif %}
+    >{#
+      #}{% if params.value %}{{params.value}}{% endif %}{#
+    #}</textarea>
+    {% if params.maxlength %}
+    <div class="mds-form-message mds-form-message--character-count" id="{{ params.id }}-character-count-text" aria-live="polite" aria-atomic="true">
+      {{- MdsIcon({ 
+        iconName: 'cross',
+        classes: 'mds-icon--sm',
+        hasContainer: true,
+        containerClasses: 'mds-icon-container--circle mds-icon-container--error mds-icon-container--before' 
+        }) 
+      -}}
+      <span><span class="js-character-count-number">{{ params.maxlength }}</span> characters remaining</span>
+    </div>
+    {% endif %}
+</div>

package/src/components/inputs/textarea/character-count.js

@@ -0,0 +1,37 @@
+/* eslint-disable no-param-reassign */
+const characterCountClass = '.mds-form-element--character-count';
+const messageClass = '.mds-form-message--character-count';
+const characterCountNumberClass = '.js-character-count-number';
+const formControlClass = '.mds-form-control';
+
+const characterCount = {
+  init: () => {
+    const elementsWithCharacterCount = Array.from(document.querySelectorAll(characterCountClass));
+    elementsWithCharacterCount.forEach((element) => {
+      const formControl = element.querySelector(formControlClass);
+      const maxLength = formControl.getAttribute('maxlength');
+      const message = element.querySelector(messageClass);
+      const characterCountNumber = element.querySelector(characterCountNumberClass);
+      formControl.removeAttribute('maxlength');
+      characterCount.updateCounter(formControl, maxLength, characterCountNumber, message);
+      formControl.addEventListener('keyup', (e) => {
+        e.stopPropagation();
+        characterCount.updateCounter(formControl, maxLength, characterCountNumber, message);
+      });
+    });
+  },
+  updateCounter: (formControl, maxLength, characterCountNumber, message) => {
+    // Counting new lines as 2 characters to plan for \r\n encoding
+    const newLines = formControl.value.match(/(\r\n|\n|\r)/g);
+    const currentCount = formControl.value.length + (newLines ? newLines.length : 0);
+    const remainingCount = maxLength - currentCount;
+    characterCountNumber.textContent = remainingCount;
+    if (remainingCount < 0) {
+      message.classList.add('mds-form-message--error');
+    } else {
+      message.classList.remove('mds-form-message--error');
+    }
+  },
+};
+
+export default characterCount;

package/src/components/inputs/textarea/textarea.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  title: 'Textarea',
+  status: 'wip',
+  context: {
+    labelText: 'Textarea',
+    name: 'Example Textarea',
+    id: 'example-textarea',
+    maxlength: 20,
+  },
+};

package/src/components/inputs/textarea/textarea.njk

@@ -0,0 +1,24 @@
+{% from "./inputs/textarea/_macro.njk" import MdsTextarea %}
+
+<div class="mds-grid-row">
+  <div class="mds-grid-col-12 mds-grid-col-md-6">
+    <div class="mds-form-field">
+      {{ MdsTextarea({
+        labelText: labelText,
+        hideLabel: hideLabel,
+        name: name,
+        id: id,
+        value:value,
+        optional: optional,
+        disabled: disabled,
+        placeholder: placeholder,
+        helpText: helpText,
+        validationError: validationError,
+        state: state,
+        classes: classes,
+        tooltipMessage: tooltipMessage,
+        maxlength: maxlength
+      }) }}
+    </div>
+  </div>
+</div>

package/src/components/inputs/textarea/textarea.scss

@@ -0,0 +1,4 @@
+.mds-form-element--textarea .mds-form-control {
+  resize: vertical;
+  min-height: 150px;
+}

package/src/js/index.js

@@ -13,6 +13,7 @@ import accordion from '../components/accordion/accordion';
 import popovers from '../components/popover/popover';
 import modals from '../components/modal/modal';
 import fileUpload from '../components/inputs/file-upload/file-upload';
+import characterCount from '../components/inputs/textarea/character-count';
 
 document.addEventListener('DOMContentLoaded', () => {
   tabs.init();
@@ -20,4 +21,5 @@ document.addEventListener('DOMContentLoaded', () => {
   popovers.init();
   modals.init();
   fileUpload.init();
+  characterCount.init();
 });

package/src/scss/components/__index.scss

@@ -3,7 +3,6 @@
 @import '../../components/card/card';
 @import '../../components/section-title/section-title';
 @import '../../components/tabs/tabs';
-@import '../../components/textarea/textarea';
 @import '../../components/accordion/accordion';
 @import '../../components/pagination/pagination';
 @import '../../components/switch-state/switch-state';
@@ -13,5 +12,6 @@
 @import '../../components/inputs/combobox/combobox';
 @import '../../components/inputs/multi-select/multi-select';
 @import '../../components/inputs/file-upload/file-upload';
+@import '../../components/inputs/textarea/textarea';
 @import '../../components/modal/modal';
 @import '../../components/skip-link/skip-link';

package/src/components/textarea/_macro.njk

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

package/src/components/textarea/_template.njk

@@ -1,41 +0,0 @@
-<div data-test="textarea">
-    <label class="mds-display-block mds-input__label mds-font-long-primer mds-margin-bottom-b1" for="{{ params.id }}">
-      {{ params.labelText }}
-      {% if params.required %}
-        <span>*</span>
-      {% endif %}
-    </label>
-    {% if params.labelHint %}
-      <span
-        class="mds-display-block mds-input__label--hint mds-font-long-primer mds-margin-bottom-b1"
-        id="{{ params.id }}-hint"
-      >
-        {{ params.labelHint }}
-      </span>
-    {% endif %}
-    <textarea
-      class="mds-textarea mds-border mds-border-radius"
-      name="{{ params.name }}"
-      id="{{ params.id }}"
-      cols="{{ params.cols | default(30) }}"
-      rows="{{ params.rows | default(10) }}"
-      {% if params.labelHint or params.validationMessage %}
-        aria-describedby="{% if params.labelHint %}{{ params.id }}-hint {% endif %}{% if params.validationMessage %}{{ params.id }}-validation-message{% endif %}"
-      {% endif %}
-      {% if params.disabled %}
-        disabled="disabled"
-      {% endif %}
-      {% if params.required %}
-        required="required"
-      {% endif %}
-    ></textarea>
-    {% if params.validationMessage %}
-      <span
-        aria-live="polite"
-        id="{{ params.id }}-validation-message"
-        class="mds-input__validation-message mds-font-brevier"
-      >
-        {{ params.validationMessage }}
-      </span>
-    {% endif %}
-  </div>

package/src/components/textarea/textarea.config.js

@@ -1,31 +0,0 @@
-module.exports = {
-  title: 'Text Area',
-  status: 'prototype',
-  context: {
-    labelText: 'Text area',
-    name: 'Example text area',
-    id: 'exampleTextArea',
-  },
-  variants: [
-    {
-      name: 'With label hint',
-      context: {
-        labelText: 'Hint input',
-        name: 'Hint input',
-        id: 'hintInput',
-        type: 'text',
-        labelHint: 'This is a text area',
-      },
-    },
-    {
-      name: 'With validation message',
-      context: {
-        labelText: 'Validated input',
-        name: 'Validated input',
-        id: 'validatedInput',
-        type: 'text',
-        validationMessage: '100 characters remaining',
-      },
-    },
-  ],
-};

package/src/components/textarea/textarea.njk

@@ -1,11 +0,0 @@
-{% from "./textarea/_macro.njk" import MdsTextArea %}
-
-{{ MdsTextArea({
-  labelText: labelText,
-  labelHint: labelHint,
-  name: name,
-  id: id,
-  required: required,
-  disabled: disabled,
-  validationMessage: validationMessage
-}) }}

package/src/components/textarea/textarea.scss

@@ -1,7 +0,0 @@
-.mds-textarea {
-  resize: none;
-  width: 100%;
-  background-color: $mds-color-neutral-lightest;
-  margin: $mds-size-baseline 0;
-  padding: $mds-size-baseline * 2;
-}