@madgex/design-system 1.45.0 → 1.46.1

package/src/layout/forms/forms.config.js

@@ -0,0 +1,74 @@
+module.exports = {
+  title: 'Forms',
+  status: 'wip',
+  context: {
+    input: {
+      labelText: 'Email address',
+      id: 'email',
+      type: 'email',
+    },
+    multiselect: {
+      labelText: 'Role',
+      name: 'Role',
+      terms: [
+        { id: 7, label: 'Academic Pharmacist', terms: [] },
+        { id: 1, label: 'Community Pharmacist', terms: [] },
+        { id: 10, label: 'Dispensing Assistant', terms: [] },
+        { id: 4, label: 'Hospital Pharmacist', selected: true, terms: [] },
+        { id: 6, label: 'Industrial Pharmacist', terms: [] },
+        { id: 3, label: 'Locum Pharmacist', terms: [] },
+        { id: 11, label: 'Medicines Counter Assistant', terms: [] },
+        { id: 2, label: 'Pharmacy Manager', terms: [] },
+        { id: 12, label: 'Pharmacy Student', terms: [] },
+        { id: 9, label: 'Pharmacy Technician', terms: [] },
+        { id: 8, label: 'Pre-reg Pharmacist', selected: true, terms: [] },
+        { id: 513016, label: 'Primary Care Pharmacist', terms: [] },
+        { id: 513015, label: 'Region/Area Manager', terms: [] },
+        { id: 5, label: 'Senior Management', terms: [] },
+        { id: 513014, label: 'Superintendent Pharmacist', terms: [] },
+        { id: 13, label: 'Other Pharmacy roles', terms: [] },
+      ],
+    },
+    combobox: {
+      id: 'distance-selection',
+      labelText: 'How far are you willing to travel?',
+      options: { 5: 'Within 5 miles', 10: 'Within 10 miles', 15: 'Within 15 miles', 20: 'Within 20 miles' },
+      fallbackTo: 'select',
+      optional: true,
+    },
+    checkbox: {
+      id: 'checkbox-input',
+      labelText: 'Hours',
+      optional: true,
+      options: [
+        {
+          labelText: 'Full time',
+          value: '1-1',
+          id: 'checkbox-1-1',
+        },
+        {
+          labelText: 'Part time',
+          value: '1-2',
+          id: 'checkbox-1-2',
+        },
+      ],
+    },
+    radio: {
+      id: 'radio-input',
+      labelText: 'Frequency',
+      tooltipMessage: 'This is a tool tip message to help describe a bit better what you should do with this field.',
+      options: [
+        {
+          labelText: 'Daily',
+          value: '1-1',
+          id: 'radio-1-1',
+        },
+        {
+          labelText: 'Weekly',
+          value: '1-2',
+          id: 'radio-1-2',
+        },
+      ],
+    },
+  },
+};

package/src/layout/forms/forms.njk

@@ -0,0 +1,80 @@
+{% from "../components/inputs/checkbox/_macro.njk" import MdsCheckbox %}
+{% from "../components/inputs/combobox/_macro.njk" import MdsCombobox %}
+{% from "../components/inputs/input/_macro.njk" import MdsInput %}
+{% from "../components/inputs/multi-select/_macro.njk" import MdsMultiSelect %}
+{% from "../components/inputs/radio/_macro.njk" import MdsRadio %}
+{% from "../components/button/_macro.njk" import MdsButton %}
+
+<form class="mds-form mds-margin-bottom-b7">
+  <div class="mds-form-field">
+    {{ MdsInput({
+      labelText: input.labelText,
+      id: input.id,
+      type: input.type,
+      optional: input.optional,
+      tooltipMessage: input.tooltipMessage
+    }) }}
+  </div>
+  <div class="mds-form-field">
+    {{ MdsMultiSelect({
+      labelText: multiselect.labelText,
+      name: multiselect.name,
+      terms: multiselect.terms,
+      optional: multiselect.optional,
+      tooltipMessage: multiselect.tooltipMessage
+    }) }}
+  </div>
+  <div class="mds-form-field">
+    {{ MdsCombobox({
+      id: combobox.id,
+      labelText: combobox.labelText,
+      options: combobox.options,
+      fallbackTo: combobox.fallbackTo,
+      optional: combobox.optional,
+      tooltipMessage: combobox.tooltipMessage
+    }) }}
+  </div>
+  <div class="mds-form-field">
+    {{ MdsCheckbox({
+      labelText: checkbox.labelText,
+      id: checkbox.id,
+      options: checkbox.options,
+      optional: checkbox.optional,
+      tooltipMessage: checkbox.tooltipMessage
+    }) }}
+  </div>
+  <div class="mds-form-field">
+    {{ MdsRadio({
+      labelText: radio.labelText,
+      id: radio.id,
+      options: radio.options,
+      optional: radio.optional,
+      tooltipMessage: radio.tooltipMessage
+    }) }}
+  </div>
+  <div class="mds-clearfix">
+    {{ MdsButton({
+      text: 'Submit',
+      classes: 'mds-width-full mds-width-md-auto mds-float-md-right'
+    }) }}
+  </div>
+</form>
+
+<form class="mds-highlighted-container mds-padding-b4">
+  <div class="mds-grid-row mds-grid-bottom">
+    <div class="mds-grid-col-12 mds-grid-col-md-8 mds-grid-col-lg-10 mds-margin-bottom-b3 mds-margin-bottom-md-b0">
+      {{ MdsInput({
+        labelText: input.labelText,
+        id: input.id,
+        type: input.type,
+        optional: input.optional,
+        tooltipMessage: input.tooltipMessage
+      }) }}
+    </div>
+    <div class="mds-grid-col-12 mds-grid-col-md-4 mds-grid-col-lg-2">
+      {{ MdsButton({
+        text: 'Submit',
+        classes: 'mds-width-full mds-width-md-auto'
+      }) }}
+    </div>
+</form>

package/src/scss/components/__index.scss

@@ -3,15 +3,13 @@
 @import '../../components/card/card';
 @import '../../components/section-title/section-title';
 @import '../../components/tabs/tabs';
-@import '../../components/inputs/input/input';
 @import '../../components/textarea/textarea';
 @import '../../components/accordion/accordion';
 @import '../../components/pagination/pagination';
 @import '../../components/switch-state/switch-state';
 @import '../../components/popover/popover';
 @import '../../components/notification/notification';
+@import '../../components/inputs/form-elements';
 @import '../../components/inputs/combobox/combobox';
-@import '../../components/inputs/radio/radio';
 @import '../../components/inputs/multi-select/multi-select';
-@import '../../components/modal/modal';
-@import '../../components/inputs/checkbox/checkbox';
+@import '../../components/modal/modal';

package/src/scss/core/_containers.scss

@@ -94,3 +94,8 @@ $mds-half-gutter-width: $mds-size-gutter-width * 0.5;
     background: $mds-color-ad-container-leaderboard-background;
   }
 }
+
+.mds-highlighted-container {
+  @extend .mds-border-radius;
+  background: $mds-color-neutral-lightest;
+}

package/src/scss/helpers/__index.scss

@@ -7,4 +7,4 @@
 @import 'edited-text';
 @import 'width';
 @import 'fluid-video';
-@import 'animation';
+@import 'animation';

package/src/scss/import.scss

@@ -1,5 +1,5 @@
-@import 'resets/_index';
 @import 'vendor/normalize';
+@import 'resets/_index';
 @import 'functions/_index';
 @import 'utilities/_index';
 @import 'core/_index';

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

@@ -1,69 +0,0 @@
-.mds-checkbox__group legend {
-  margin-bottom: $mds-size-baseline * 2;
-  font-weight: bold;
-}
-
-.mds-checkbox {
-  display: block;
-  margin-right: 0;
-  margin-bottom: $mds-size-baseline * 2;
-}
-
-.mds-checkbox__group .mds-checkbox__input {
-  opacity: 0;
-  margin-top: $mds-size-baseline * 2;
-}
-
-.mds-checkbox__input {
-  position: absolute;
-  opacity: 0;
-
-  & + .mds-checkbox__label {
-    position: relative;
-    cursor: pointer;
-    margin-right: $mds-size-baseline * 4;
-  }
-
-  // Box.
-  & + .mds-checkbox__label:before {
-    content: '';
-    margin-right: $mds-size-baseline * 2;
-    display: inline-block;
-    vertical-align:  middle;
-    width: $mds-size-baseline * 6;
-    height: $mds-size-baseline * 6;
-    background: white;
-    border: $mds-color-input-border;
-    border-radius: $mds-size-border-radius;
-    position: relative;
-  }
-
-  // Box hover
-  &:hover + .mds-checkbox__label:before, &:focus + .mds-checkbox__label:before  {
-    box-shadow: $mds-color-input-shadow-focus;
-  }
-  
-  // Disabled state label.
-  &:disabled + .mds-checkbox__label {
-    color: $mds-color-input-disabled-label;
-    cursor: auto;
-  }
-
-  // Disabled box
-  &:disabled + .mds-checkbox__label:before {
-    box-shadow: none;
-    background: $mds-color-input-disabled-field;
-  }
-
-  // Checkmark
-  &:checked + .mds-checkbox__label:after {
-    content: '\2713';
-    position: absolute;
-    left: $mds-size-baseline * 1.5;
-    top: 0;
-    height: $mds-size-baseline;
-    width: $mds-size-baseline;
-    color: $mds-color-input-checked;
-  }
-  
-}

package/src/components/inputs/input/input.scss

@@ -1,89 +0,0 @@
-.mds-input {
-  margin-bottom: $mds-size-baseline * 4
-}
-
-.mds-input__wrapper {
-  width: 100%;
-  margin-bottom: $mds-size-baseline * 9;
-}
-
-.mds-input__wrapper-label {
-  display: flex;
-  & .mds-input__tooltip {
-    right: 0;
-    position: relative;
-  }
-}
-
-
-.mds-input__label {
-  flex: 1;
-  font-weight: bold;
-  margin-bottom: $mds-size-baseline * 4;
-  display: block;
-
-  &-optional {
-    font-weight: normal;
-  }
-}
-
-.mds-input__wrapper-input {
-  display: flex;
-  align-items: center;
-  & .mds-input__input {
-    width: 100%;
-    padding: $mds-size-baseline * 3;
-    border-radius: $mds-size-border-radius;
-    border: $mds-size-border-width solid $mds-color-border;
-    display: inline-block;
-    &: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-icon-container--circle {
-    display: none;
-  }
-}
-
-.mds-input__msg {
-  padding-bottom: $mds-size-baseline * 4;
-  @extend .mds-font-brevier;
-}
-
-.mds-input--has-msg {
-  & .mds-input__label {
-    margin-bottom: $mds-size-baseline * 2;
-  }
-}
-
-.mds-input--error {
-  & .mds-input__input {
-    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-input__label {
-    margin-bottom: $mds-size-baseline * 2;
-  }
-
-  & .mds-icon--error  {
-    margin-right: $mds-size-baseline;
-  }
-
-  & .mds-input__msg--error {
-    display: flex;
-    align-items: center;
-    color: $mds-color-status-error-dark;
-  }
-}

package/src/components/inputs/radio/radio.scss

@@ -1,53 +0,0 @@
-.mds-radio__group {
-  padding: 0;
-  margin-bottom: $mds-size-baseline * 4
-}
-
-.mds-radio__group legend {
-  font-weight: bold;
-  margin-bottom: $mds-size-baseline * 4;
-}
-
-.mds-radio {
-  display: block;
-  margin-right: $mds-size-baseline * 7;
-  margin-bottom: $mds-size-baseline * 2;
-}
-
-.mds-radio__group .mds-radio__input {
-  height: calc(#{$mds-size-baseline}*6 - #{$mds-size-baseline});
-  width: calc(#{$mds-size-baseline}*6 - #{$mds-size-baseline});
-  appearance: none;
-  display: inline-block;
-  padding: $mds-size-baseline;
-  background-clip: content-box;
-  border: $mds-color-input-border;
-  background-color: transparent;
-  border-radius: 50%;
-  outline: 0;
-  margin-right: $mds-size-baseline * 2;
-  cursor: pointer;
-
-  &:checked {
-    background-color: $mds-color-input-checked;
-  }
-  &:focus, &:hover {
-    box-shadow: $mds-color-input-shadow-focus;
-  }
-  &[disabled="disabled"] {
-    cursor: default;
-    border-color: $mds-color-input-disabled-field;
-    box-shadow: none;
-    &:checked {
-      background-color: $mds-color-input-disabled-field;
-    }
-  }
-}
-
-.mds-radio__input:disabled + .mds-radio__label {
-  color: $mds-color-input-disabled-label;
-}
-
-.mds-radio__label {
-  vertical-align: super;
-}