@madgex/design-system 1.45.0 → 1.46.1

package/gulpfile.js

@@ -14,7 +14,7 @@ async function clean() {
 }
 
 function watchFiles() {
-  gulp.watch(['src/scss/core/**/*.scss', 'src/components/**/*.scss'], { awaitWriteFinish: true }, gulp.series(css));
+  gulp.watch(['src/scss/**/*.scss', 'src/components/**/*.scss'], { awaitWriteFinish: true }, gulp.series(css));
   gulp.watch('src/tokens/**/*.json', gulp.series(tokens, css));
   gulp.watch('src/icons/**/*.svg', gulp.series(svgsprite, fractalBuild));
   gulp.watch(['src/js/**/*', 'src/components/**/*.js', 'src/components/**/*.vue'], gulp.series(jsbundle));

package/package.json

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

package/src/components/button/button.scss

@@ -14,10 +14,6 @@
   @extend .mds-font-body-copy;
   font-family: $mds-font-family-button-base;
 
-  @include mq($from: md) {
-    padding: ($mds-size-baseline * 2) ($mds-size-baseline * 5);
-  }
-
   &:hover,
   &:focus {
     background-color: $mds-color-button-bg-hover;
@@ -28,10 +24,6 @@
 
 .mds-button--small {
   padding: ($mds-size-baseline * 2) ($mds-size-baseline * 3);
-
-  @include mq($from: md) {
-    padding: ($mds-size-baseline * 1) ($mds-size-baseline * 3);
-  }
 }
 
 .mds-button--large {

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

@@ -0,0 +1,129 @@
+.mds-form-field {
+  margin-bottom: $mds-size-baseline * 7;
+}
+
+.mds-form-label {
+  display: flex;
+  margin-bottom: $mds-size-baseline * 3;
+}
+.mds-form-label__label {
+  font-weight: bold;
+  flex: 1;
+}
+.mds-form-label__optional {
+  @extend .mds-font-brevier;
+  font-weight: normal;
+}
+.mds-form-label__tooltip {
+  padding: 0;
+}
+
+.mds-form-message {
+  @extend .mds-font-brevier;
+  margin-bottom: $mds-size-baseline * 4;
+
+  &--error {
+    display: flex;
+    align-items: center;
+    color: $mds-color-status-error-dark;
+
+    & .mds-icon-container {
+      margin-right: $mds-size-baseline;
+    }
+  }
+}
+
+.mds-form-control {
+  width: 100%;
+  padding: $mds-size-baseline * 3;
+  border-radius: $mds-size-border-radius;
+  border: $mds-size-border-width solid $mds-color-border;
+  @extend .mds-font-body-copy;
+
+  &:focus {
+    border: 1px solid $mds-color-input-focus;
+    outline-color: $mds-color-input-focus;
+    box-shadow: 0 0 4px 2px $mds-color-input-focus;
+  }
+
+  .mds-form-element--error & {
+    border-color: $mds-color-status-error-dark;
+    background-color: $mds-color-status-error-lightest;
+    border-left-width: $mds-size-baseline;
+    padding-left: $mds-size-baseline * 2;
+    &:focus {
+      outline-color: $mds-color-status-error-dark;
+      box-shadow: 0 0 4px 2px $mds-color-status-error-dark;
+      border-color: $mds-color-status-error-dark;
+      border-left-width: $mds-size-baseline;
+    }
+  }
+}
+
+.mds-form-check {
+  margin-bottom: $mds-size-baseline * 2;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+.mds-form-check__input {
+  display: inline-block;
+  position: relative;
+  vertical-align: text-bottom;
+  appearance: none;
+  height: $mds-size-baseline * 5;
+  width: $mds-size-baseline * 5;
+  padding: $mds-size-baseline;
+  border: $mds-color-input-border;
+  background-color: $mds-color-neutral-white;
+  outline: 0;
+  margin-right: $mds-size-baseline * 2;
+  cursor: pointer;
+
+  &:hover,
+  &:focus {
+    box-shadow: $mds-color-input-shadow-focus;
+  }
+
+  &:disabled {
+    border-color: $mds-color-input-disabled-field;
+    background: $mds-color-input-disabled-field;
+    box-shadow: none;
+    cursor: auto;
+
+    & + .mds-form-check__label {
+      color: $mds-color-input-disabled-label;
+    }
+  }
+
+  .mds-form-element--checkbox & {
+    border-radius: $mds-size-border-radius;
+
+    &:checked:before {
+      content: '\2713';
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+      color: $mds-color-input-checked;
+    }
+  }
+  .mds-form-element--radio & {
+    border-radius: 50%;
+
+    &:checked:before {
+      content: '';
+      display: block;
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      background-color: $mds-color-input-checked;
+    }
+  }
+}
+
+.js .mds-form-element__fallback {
+  display: none;
+}

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

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

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

@@ -0,0 +1,37 @@
+{% from "../../icons/_macro.njk" import MdsIcon %}
+{% from "../../popover/_macro.njk" import MdsPopover %}
+
+{%- set classes -%}{#
+#}mds-form-label__label{% if params.hideLabel %} mds-visually-hidden{% endif -%}
+{%- endset -%}
+
+<div class="mds-form-label">
+    {%- if params.element == 'legend' -%}
+      <legend class="{{ classes }}">
+    {%- else -%}
+      <label class="{{ classes }}" for="{{ params.id }}">
+    {%- endif -%}
+      {{ params.labelText }}
+      {%- if params.optional -%}
+        <span class="mds-form-label__optional"> (optional)</span>
+      {%- endif -%}
+    {%- if params.element == 'legend' -%}
+      </legend>
+    {%- else -%}
+      </label>
+    {%- endif -%}
+
+    {%- if params.tooltipMessage -%}
+      {{- MdsPopover({
+        id: params.id + '-tooltip',
+        text: MdsIcon({
+          iconName: 'question-mark',
+          classes: 'mds-icon--info',
+          visuallyHiddenLabel: 'More info'
+        }),
+        placement: 'right',
+        classes: 'mds-button mds-button--plain mds-form-label__tooltip',
+        content: params.tooltipMessage
+      }) -}}
+    {%- endif -%}
+</div>

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

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

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

@@ -0,0 +1,24 @@
+{% from "../../icons/_macro.njk" import MdsIcon %}
+
+{% if params.helpText %}
+    <div
+      class="mds-form-message"
+      id="{{ params.id }}-help-text">
+      {{ params.helpText }}
+    </div>
+  {% endif %}
+  {% if params.validationError %}
+    <div 
+      aria-live="polite" 
+      class="mds-form-message mds-form-message--error"
+      id="{{ params.id }}-validation-error">
+      {{- MdsIcon({ 
+        iconName: 'cross',
+        classes: 'mds-icon--sm',
+        hasContainer: true,
+        containerClasses: 'mds-icon-container--circle mds-icon-container--error' 
+        }) 
+      -}}
+      {{- params.validationError -}}
+    </div>
+  {% endif %}

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

@@ -4,6 +4,10 @@
 - `name`: The name of the input field, uses ID unless specified **optional**,
 - `id`: The id attribute of the field, **required**
 - `disabled`: Should the input be disabled **optional**,
+- `helpText`: Helper text to display under the label **optional**,
+- `tooltipMessage`: Toggles a tooltip with this message to appear on the input **optional**
+- `validationError`: The error message provided by validation **optional**,
+- `state`: The current state of the input, currently the only allowed value is `error` **optional**
 - `classes`: add extra classes to the fieldgroup - **optional**
 - `options`: This is an object of all options, See an example option below
 ```

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

@@ -1,25 +1,43 @@
+{% from "../_label/_macro.njk" import MdsInputLabel %}
+{% from "../_message/_macro.njk" import MdsInputMessages %}
+
 {%- if params.name -%}
   {%- set name = params.name -%}
 {%- else -%}
   {%- set name = params.id -%}
 {%- endif -%}
 
-<div class="mds-checkbox__group{% if params.classes %} {{params.classes}}{% endif %}" id="{{params.id}}"  data-test="checkbox">
-  <legend>{{params.labelText}}</legend>
-  {%- for checkbox in params.options -%}
-    <div class="mds-checkbox{% if checkbox.classes %} {{checkbox.classes}}{% endif %}">
-      <input 
-        type="checkbox" 
-        class="mds-checkbox__input" 
-        name="{{name}}" 
-        id="{{checkbox.id}}" 
-        {% if params.disabled %}disabled="disabled"{% endif %} 
-        {% if checkbox.selected %}checked="checked"{% endif %}
-         value="{{checkbox.value}}" 
-      />
-      <label class="mds-checkbox__label" for="{{checkbox.id}}">
-        {{checkbox.labelText}}
-      </label>
-    </div>
-  {% endfor %}
-</fieldset>
+<div class="mds-form-element mds-form-element--checkbox{% if params.classes %} {{params.classes}}{% endif %}" id="{{params.id}}"  data-test="checkbox">
+  <fieldset>
+    {{ MdsInputLabel({
+      element: 'legend',
+      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
+    }) }}
+    {%- for checkbox in params.options -%}
+      <div class="mds-form-check{% if checkbox.classes %} {{checkbox.classes}}{% endif %}">
+        <input 
+          type="checkbox" 
+          class="mds-form-check__input" 
+          name="{{name}}" 
+          id="{{checkbox.id}}" 
+          {% if params.disabled %}disabled="disabled"{% endif %} 
+          {% if checkbox.selected %}checked="checked"{% endif %}
+          value="{{checkbox.value}}" 
+        />{#
+        # Avoid extra space created by line breaks #
+        #}<label class="mds-form-check__label" for="{{checkbox.id}}">{#
+          #}{{checkbox.labelText}}{#
+        #}</label>
+      </div>
+    {% endfor %}
+  </fieldset>
+</div>

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

@@ -3,7 +3,7 @@ module.exports = {
   status: 'wip',
   context: {
     id: 'checkbox-input',
-    labelText: 'Standard checkbox Group',
+    labelText: 'Standard checkbox group',
     options: [
       {
         labelText: 'Checkbox Input 1',
@@ -23,13 +23,12 @@ module.exports = {
       context: {
         id: 'inline-checkbox-using-class',
         labelText: 'Inline checkbox using class',
-        classes: 'mds-display-inline-block',
         options: [
           {
             labelText: 'Checkbox Input 1',
             value: '2-1',
             id: 'checkbox-2-1',
-            classes: 'mds-display-inline-block',
+            classes: 'mds-display-inline-block mds-margin-right-b2',
           },
           {
             labelText: 'Checkbox Input 2',

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

@@ -1,10 +1,12 @@
 {% from "./inputs/checkbox/_macro.njk" import MdsCheckbox %}
 
-{{ MdsCheckbox({
-  labelText: labelText,
-  name: name,
-  id: id,
-  disabled: disabled,
-  options: options,
-  classes: classes
-}) }}
+<div class="mds-form-field">
+  {{ MdsCheckbox({
+    labelText: labelText,
+    name: name,
+    id: id,
+    disabled: disabled,
+    options: options,
+    classes: classes
+  }) }}
+</div>

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

@@ -1,13 +1,17 @@
 ## Parameters - Nunjucks
 
 - `id`: the id of your combobox
-- `name`: the name of the input for form submission
+- `name`: the name of the input for form submission. Uses ID unless specified - _optional_
 - `resultMessage`: to be used as a prop for the Vue component below, will not be used if Javascript is not available
 - `labelText`: the text used in the label
 - `options`: a json object of key, value pairs e.g { 45: 'Orange' }. To be used when falling back to a native select if Javascript is not available
 - `fallbackTo`: the form element to use as a fallback. Should be either 'select' or 'input'
 - `placeholder`: the placeholder for your input (defaults to 'Please select')
 - `classes`: add extra classes to the trigger - _optional_
+- `helpText`: Helper text to display under the label _optional_,
+- `tooltipMessage`: Toggles a tooltip with this message to appear on the input _optional_
+- `validationError`: The error message provided by validation _optional_,
+- `state`: The current state of the input, currently the only allowed value is `error` _optional_
 
 ## Props - Vue component
 

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

@@ -1,4 +1,5 @@
-{% from "../../icons/_macro.njk" import MdsIcon %}
+{% from "../_label/_macro.njk" import MdsInputLabel %}
+{% from "../_message/_macro.njk" import MdsInputMessages %}
 
 {%- set comboboxId %}
   {%- if params.id -%}
@@ -14,6 +15,12 @@
   {%- endif -%}
 {% endset -%}
 
+{% if params.name %}
+  {% set comboboxName = params.name %}
+{% else %}
+  {% set comboboxName = comboboxId %}
+{% endif %}
+
 {%- set placeholder %}
   {%- if params.placeholder -%}
     {{ params.placeholder }}
@@ -23,23 +30,35 @@
 {% endset -%}
 
 {%- if comboboxId -%}  
-  <div class="mds-combobox js-mds-combobox {% if params.classes %} {{params.classes}}{% endif %}" data-combobox-id="{{ comboboxId }}" data-test="combobox">
-    <label class="mds-combobox__label mds-font-pica mds-combobox--fallback" id="{{ comboboxId }}-label" for="{{ comboboxId }}">{{ params.labelText }}</label>
-    {% if params.fallbackTo === 'select' and params.options %}
-      <select class="mds-combobox__select mds-combobox--fallback" id="select-{{ comboboxId }}" name="{{ params.name }}" aria-labelledby="{{ comboboxId }}-label" value="{{ params.defaultValue|default('') }}">
-        <option>{{ placeholder }}</option>
-        {%- if params.options -%}
-          {%- for value, option in params.options -%}
-            <option value="{{ value }}">{{ option }}</option>
-          {%- endfor -%}
-        {%- endif -%}
-      </select>
-    {% elseif params.fallbackTo === 'input' %}
-      <input class="mds-combobox__input mds-border mds-border-radius mds-combobox--fallback" autocomplete="off" name="{{ params.name }}" type="text"
-        id="{{ comboboxId }}" aria-labelledby="{{ comboboxId }}-label" value="{{ params.defaultValue|default('') }}" placeholder="{{ placeholder }}">
-    {% endif %}
+  <div class="mds-form-element mds-form-element--combobox js-mds-combobox{% if params.classes %} {{params.classes}}{% endif %}{% if params.state %} mds-form-element--{{params.state}}{% endif %}" data-combobox-id="{{ comboboxId }}" data-test="combobox">
+    {{ MdsInputLabel({
+      labelText: params.labelText,
+      hideLabel: params.hideLabel,
+      id: comboboxId,
+      optional: params.optional,
+      tooltipMessage: params.tooltipMessage
+    }) }}
+    {{ MdsInputMessages({
+      id: comboboxId,
+      helpText: params.helpText,
+      validationError: params.validationError
+    }) }}
+    <div class="mds-form-element__fallback">
+      {% if params.fallbackTo === 'select' and params.options %}
+        <select class="mds-form-control" id="select-{{ comboboxId }}" name="{{ comboboxName }}" aria-labelledby="{{ comboboxId }}-label" value="{{ params.defaultValue|default('') }}">
+          <option>{{ placeholder }}</option>
+          {%- if params.options -%}
+            {%- for value, option in params.options -%}
+              <option value="{{ value }}">{{ option }}</option>
+            {%- endfor -%}
+          {%- endif -%}
+        </select>
+      {% elseif params.fallbackTo === 'input' %}
+          <input class="mds-form-control" type="text" name="{{ comboboxName }}" autocomplete="off" id="{{ comboboxId }}" value="{{ params.defaultValue|default('') }}" placeholder="{{ placeholder }}" />
+      {% endif %}
+    </div>
     {# Leave the custom element at the bottom so it has access to the above elements on render #}
-    <mds-combobox comboboxid="{{ comboboxId }}" labeltext="{{ params.labelText }}" placeholder="{{ placeholder }}"
-      {% if params.fallbackTo === 'input' %}name="{{ params.name }}"{% endif %} {% if params.resultMessage %}resultmessage="{{ params.resultMessage }}"{% endif %}></mds-combobox>
+    <mds-combobox comboboxid="{{ comboboxId }}" placeholder="{{ placeholder }}"
+      {% if params.fallbackTo === 'input' %}name="{{ comboboxName }}"{% endif %} {% if params.resultMessage %}resultmessage="{{ params.resultMessage }}"{% endif %}></mds-combobox>
   </div>
 {%- endif -%}

package/src/components/inputs/combobox/combobox.scss

@@ -2,24 +2,6 @@
   display: block;
   position: relative;
 }
-
-.mds-combobox__input,
-.mds-combobox__select {
-  width: 100%;
-  padding: $mds-size-baseline * 3;
-  border-radius: $mds-size-border-radius;
-  border: $mds-size-border-width solid $mds-color-border;
-  margin-right: $mds-size-baseline * 4;
-  display: inline-block;
-  &:focus {
-    border-color: $mds-color-neutral-base;
-  }
-}
-
-.mds-combobox__input-wrapper {
-  position: relative;
-}
-
 .mds-combobox__listbox {
   border: $mds-size-border-width solid $mds-color-border;
   border-top: none;
@@ -30,10 +12,12 @@
   max-height: 250px;
   overflow-y: scroll;
   @include z-index();
-  .mds-combobox__option {
+
+  & .mds-combobox__option {
     @extend .mds-font-pica;
     padding: $mds-size-baseline;
     background-color: $mds-color-neutral-white;
+
     &.mds-combobox__option--focused,
     &:hover {
       cursor: pointer;
@@ -41,15 +25,3 @@
     }
   }
 }
-
-.mds-combobox--active .mds-combobox__listbox {
-  border-color: $mds-color-neutral-base;
-}
-.mds-combobox--active .mds-combobox__input {
-  border-radius: $mds-size-border-radius $mds-size-border-radius 0 0;
-  border-bottom-color: $mds-color-border;
-}
-
-.js .mds-combobox .mds-combobox--fallback {
-  display: none;
-}

package/src/components/inputs/combobox/vue-components/Combobox.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="mds-combobox js-mds-combobox"
+    class="mds-combobox"
     :class="{ 'mds-combobox--active': !listBoxHidden }"
     @keydown.down="hiddenGuard(onKeyDown)"
     @keydown.up="hiddenGuard(onKeyUp)"
@@ -9,7 +9,6 @@
     @keydown.esc="makeInactive"
     @keydown.enter="chooseOption"
   >
-    <label class="mds-combobox__label" :id="labelId" :for="comboboxid">{{ labeltext }}</label>
     <ComboboxInput
       @focus="makeActive"
       @blur="onInputBlur"
@@ -57,10 +56,6 @@ export default {
       type: String,
       required: true,
     },
-    labeltext: {
-      type: String,
-      required: true,
-    },
     placeholder: {
       type: String,
       default: 'Please combobox',

package/src/components/inputs/combobox/vue-components/ComboboxInput.vue

@@ -1,8 +1,8 @@
 <template>
-  <div role="presentation" class="mds-combobox__input-wrapper">
+  <div role="presentation">
     <input
       v-bind="$attrs"
-      class="mds-combobox__input"
+      class="mds-form-control"
       autocomplete="off"
       type="text"
       :value="value"

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

@@ -1,5 +1,5 @@
-{% from "../../icons/_macro.njk" import MdsIcon %}
-{% from "../../popover/_macro.njk" import MdsPopover %}
+{% from "../_label/_macro.njk" import MdsInputLabel %}
+{% from "../_message/_macro.njk" import MdsInputMessages %}
 
 {% if params.name %}
   {% set name = params.name %}
@@ -7,53 +7,21 @@
   {% set name = params.id %}
 {% endif %}
 
-<div class="mds-input{% if params.validationMessage %} mds-input--has-msg{% endif %}{% if params.state %} mds-input--{{params.state}}{% endif %}{% if params.classes %} {{params.classes}}{% endif %}" id="{{ params.id }}-container" data-test="input">
-  <div class="mds-input__wrapper-label">
-    <label class="mds-input__label{% if params.hideLabel %} mds-visually-hidden{% endif %}" for="{{ params.id }}">
-      {{ params.labelText }}
-      {% if params.optional %}
-        <span class="mds-input__label-optional mds-font-minion">(optional)</span>
-      {% endif %}
-    </label>
-    {% if params.tooltipMessage %}
-      {{- MdsPopover({
-        id: params.id + '-tooltip',
-        text: MdsIcon({
-          iconName: 'question-mark',
-          classes: 'mds-icon--info',
-          visuallyHiddenLabel: 'More info'
-        }),
-        placement: 'right',
-        classes: 'mds-button mds-button--plain mds-input__tooltip',
-        content: params.tooltipMessage
-      }) -}}
-    {% endif %}
-  </div>
-  {% if params.helpText %}
-    <div
-      class="mds-input__msg"
-      id="{{ params.id }}-help-text">
-      {{ params.helpText }}
-    </div>
-  {% endif %}
-  {% if params.validationError %}
-    <div 
-      aria-live="polite" 
-      class="mds-input__msg mds-input__msg--error"
-      id="{{ params.id }}-validation-error">
-      {{- MdsIcon({ 
-        iconName: 'cross',
-        classes: 'mds-icon--sm',
-        hasContainer: true,
-        containerClasses: 'mds-icon--error mds-icon-container--circle mds-icon-container--error' 
-        }) 
-      -}}
-      {{ params.validationError }}
-    </div>
-  {% endif %}
-  <div class="mds-input__wrapper-input">
+<div class="mds-form-element mds-form-element--input{% if params.state %} mds-form-element--{{params.state}}{% endif %}{% if params.classes %} {{params.classes}}{% endif %}" id="{{ params.id }}-container" data-test="input">
+  {{ 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
+  }) }}
     <input
-      class="mds-input__input"
+      class="mds-form-control"
       type="{{ params.type }}"
       name="{{ name }}"
       id="{{ params.id }}"
@@ -70,5 +38,4 @@
         value="{{params.value}}"
       {% endif %}
     />
-  </div>
 </div>