Next release

package.json

@@ -116,6 +116,7 @@
   },
   "dependencies": {
     "@sentry/browser": "^6.2.5",
+    "array-flat-polyfill": "^1.0.1",
     "axios": "^0.21.1",
     "findandreplacedomtext": "^0.4.6",
     "gulp-sass": "^4.1.0",

src/wmnds/assets/sass/styles/wmnds-grid/_wmnds-grid.scss

@@ -21,13 +21,16 @@
     -ms-flex-line-pack: start;
     align-content: flex-start;
 
-    [class*="wmnds-col-"] {
-      display: inline-block;
+    & > [class*="wmnds-col-"] {
       zoom: 1;
       letter-spacing: normal;
       word-spacing: normal;
       text-rendering: auto;
       vertical-align: top;
+
+      &:not(.wmnds-btn) {
+        display: inline-block;
+      }
     }
   }
 }

src/wmnds/components/button/_button.njk

@@ -23,7 +23,7 @@
       {{
         wmndsIcon({
           icon: iconLeft,
-          class: ('wmnds-btn__icon '+iconClasses)
+          class: ('wmnds-btn__icon wmnds-btn__icon--left '+iconClasses)
         })
       }}
 

src/wmnds/components/button/_button.scss

@@ -5,19 +5,22 @@ $btn-transition: ease-in-out background-color 0.2s, ease-in-out border 0.2s;
 // default button styles aka cta btn
 &.wmnds-btn {
   box-sizing: border-box;
-  display: inline-block;
+  display: inline-flex;
   position: relative;
-  padding: $size-sm;
+  min-height: 50px;
+  padding: $size-xs $size-xsm;
   transition: $btn-transition;
   border: 1px solid transparent;
   border-radius: $btn-border-radius;
   color: $white;
   background-color: get-color(cta);
   font-size: 1rem;
   font-weight: bold;
-  text-align: center;
+  line-height: 1.3rem;
   text-decoration: none;
   cursor: pointer;
+  align-items: center;
+  justify-content: space-between;
 
   &:hover {
     background-color: get-color(cta, 30, dark);
@@ -37,7 +40,12 @@ $btn-transition: ease-in-out background-color 0.2s, ease-in-out border 0.2s;
     width: 22px;
     height: 22px;
     fill: $white;
-    vertical-align: top;
+    flex: 0 0 22px;
+  }
+
+  // button icon left style
+  &__icon--left {
+    margin-right: $size-xs;
   }
 
   .wmnds-swift-logo-inline {
@@ -47,7 +55,6 @@ $btn-transition: ease-in-out background-color 0.2s, ease-in-out border 0.2s;
   // button icon right style
   &__icon--right {
     margin-left: $size-sm;
-    float: right;
   }
 
   // Dark background variant
@@ -117,6 +124,7 @@ $btn-transition: ease-in-out background-color 0.2s, ease-in-out border 0.2s;
     }
 
     // Secondary (disabled)
+    &.wmnds-btn--disabled,
     &.wmnds-btn--disabled:disabled {
       border-color: get-color(disable);
       color: get-color(disable);
@@ -204,6 +212,16 @@ $btn-transition: ease-in-out background-color 0.2s, ease-in-out border 0.2s;
       fill: get-color(primary);
     }
 
+    &:not(.wmnds-text-align-left),
+    &:not(.wmnds-text-align-center),
+    &:not(.wmnds-text-align-right) {
+      justify-content: flex-start;
+
+      .wmnds-btn__icon--right {
+        margin-left: auto;
+      }
+    }
+
     .wmnds-btn__coloured-icon {
       &--bus {
         fill: get-color(bus);
@@ -271,12 +289,15 @@ $btn-transition: ease-in-out background-color 0.2s, ease-in-out border 0.2s;
   }
 
   &--favourite {
+    min-height: 0;
     padding: 0;
     border-radius: 0;
     color: get-color(text);
     background: none;
     font-weight: normal;
+    line-height: 1;
     cursor: pointer;
+    align-items: center;
 
     .wmnds-btn__icon {
       margin-right: $size-xsm;
@@ -294,7 +315,6 @@ $btn-transition: ease-in-out background-color 0.2s, ease-in-out border 0.2s;
 
   // block modifier for full width buttons
   &--block {
-    display: block;
     width: 100%;
   }
 
@@ -303,9 +323,23 @@ $btn-transition: ease-in-out background-color 0.2s, ease-in-out border 0.2s;
     text-align: left;
   }
 
+  // include helpers for button alignment
+  &.wmnds-text-align-left {
+    justify-content: flex-start;
+  }
+
+  &.wmnds-text-align-center {
+    justify-content: center;
+  }
+
+  &.wmnds-text-align-right {
+    justify-content: flex-end;
+  }
+
   // Show button like a normal link modifier
   &--link {
     display: inline;
+    min-height: 0;
     padding: 0;
     border-radius: 0;
     color: get-color(cta, 10, dark);

src/wmnds/components/form-elements/_form-elements.scss

@@ -28,10 +28,12 @@
 
 @import "form-label/form-label";
 @import "checkboxes/checkboxes";
+@import "checkboxes/checkbox-buttons/checkbox-buttons";
 @import "date-input/date-input";
 @import "dropdown/dropdown";
 @import "error-message/error-message";
 @import "file-upload/file-upload";
+@import "number-input/number-input";
 @import "text-input/text-input";
 @import "question/question";
 @import "radios/radios";

src/wmnds/components/form-elements/checkboxes/checkbox-buttons/_checkbox-buttons.njk

@@ -0,0 +1,92 @@
+{% macro wmndsCheckboxButtons(params) %}
+
+{# Imports #}
+{% from "wmnds/components/form-elements/form-label/_form-label.njk" import wmndsFormLabel %}
+{% from "wmnds/components/icon/_icon.njk" import wmndsIcon %}
+{% from "wmnds/components/form-elements/error-message/_error-message.njk" import wmndsFeErrorMessage %}
+
+{% set items = params.items if params.items %}
+{% set groupClass = " " + params.classes if params.classes %}
+{% set name = params.name if params.name else "checkbox-example" %}
+{% set hintContentText = params.hint.contentText if params.hint.contentText else "Select all options that apply" %}
+{% set hintContentHTML = params.hint.contentHTML if params.hint.contentHTML else null %}
+{% set _hintContent = hintContentHTML | safe if hintContentHTML else hintContentText %} {# change content based on what user has input #}
+{% set hasDescription = false if _hintContent === "" else true %}
+{% set idPrefix = params.idPrefix if params.idPrefix else name %}
+{# Error Message Params #}
+{% set groupErrorClass = " wmnds-fe-group--error" if params.error %}
+{% set errorContentText = params.errorMessage.contentText if params.errorMessage.contentText else "Please select at least one option" %}
+{% set errorContentHTML = params.errorMessage.contentHTML if params.errorMessage.contentHTML else null %}
+{% set errorClasses = " " + params.errorMessage.classes if params.errorMessage.classes else null %}
+{% set errorId = params.errorMessage.id if params.errorMessage.id else null %}
+
+<div class="wmnds-fe-group{{groupClass}}{{groupErrorClass}}">
+    <div class="wmnds-fe-checkbox-buttons">
+      {% if params.error %}
+        {{
+          wmndsFeErrorMessage(
+            {
+              contentText: errorContentText,
+              contentHTML: errorContentHTML,
+              classes: errorClasses,
+              id: errorId
+            }
+          )
+        }}
+      {% endif %}
+      {% if hasDescription %}
+      <span class="wmnds-fe-checkbox-buttons__desc{{params.hint.classes}}" {% if params.hint.id %}id="{{params.hint.id}}"{% endif %}>
+      {{ _hintContent }}
+      </span>
+      {% endif %}
+      {% if items %}
+        <div class="wmnds-fe-checkbox-buttons__container">
+        {%- for item in items %}
+          {% set isChecked = (' checked="checked"' | safe) if item.checked === true  else "" %}
+          {% set inputValue = item.value if item.value else null %}
+          {% set inputId = item.id if item.id else idPrefix + "_" + inputValue %}
+          {% set inputName = item.name if item.name else idPrefix + "_" + inputValue %}
+          {% set isRequired = (' required="true"' | safe) if item.required else null %}
+          {% set isNotEditable = (' disabled="disabled"' | safe) if item.disabled === true else "" %}
+          {% set disabledClass = (' wmnds-btn--disabled' | safe) if item.disabled === true else "" %}
+          {% set itemContentText = item.contentText if item.contentText else "Select all options that apply" %}
+          {% set itemContentHTML = item.contentHTML if item.contentHTML else null %}
+          {% set _itemContent = itemContentHTML | safe if itemContentHTML else itemContentText %} {# change content based on what user has input #}
+            <input
+              id="{{inputId}}"
+              class="wmnds-screenreaders-only wmnds-fe-checkbox-buttons__input"
+              value="{{inputValue}}"
+              name="{{inputName}}"
+              type="checkbox"
+              {{isChecked}}
+              {{isRequired}}
+              {{isNotEditable}}
+            />
+            <label for="{{inputId}}" class="wmnds-fe-checkbox-button wmnds-btn wmnds-btn--secondary{{disabledClass}}">
+              {{_itemContent}}
+            </label>
+        {% endfor %}
+        </div>
+      {% else %} 
+        {% for i in range(1,4) %}
+        {# Set checked state on first item in loop #}
+        {% set isChecked = (' checked="checked"' | safe) if i === 1 %}
+        {% set inputId = idPrefix + "_option" + i | string %}
+          <input
+            id="{{inputId}}"
+            class="wmnds-screenreaders-only wmnds-fe-checkbox-buttons__input"
+            value="{{inputValue}}"
+            name="{{inputName}}"
+            type="checkbox"
+            {{isChecked}}
+            {{isRequired}}
+            {{isNotEditable}}
+          />
+          <label for="{{inputId}}" class="wmnds-fe-checkbox-button wmnds-btn wmnds-btn--secondary{{disabledClass}}">
+            Option {{i}}
+          </label>
+        {% endfor %}
+      {% endif %}
+    </div>
+</div>
+{% endmacro %}

src/wmnds/components/form-elements/checkboxes/checkbox-buttons/_checkbox-buttons.scss

@@ -0,0 +1,48 @@
+&.wmnds-fe-checkbox-buttons {
+  &__desc {
+    display: block;
+    margin-bottom: $size-sm;
+  }
+
+  &__container {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  &__input {
+    & + label {
+      @media (max-width: $breakpoint-sm - 1) {
+        margin-bottom: $size-sm;
+        flex-basis: calc(100% / 3 - ((#{$size-sm}* 2) / 3));
+
+        &:not(:nth-of-type(3n + 1)) {
+          margin-left: $size-sm;
+        }
+      }
+
+      @media (min-width: $breakpoint-sm) {
+        margin-right: $size-sm;
+        flex-basis: calc((100% / 7) - ((#{$size-sm}* 6) / 7));
+        flex-grow: 1;
+
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+
+    &:checked + label {
+      background-color: get-color(secondary, 50);
+    }
+
+    &:focus + label {
+      outline: none;
+      box-shadow: 0 0 0 2px $white, 0 0 0 4px get-color(secondary);
+    }
+  }
+}
+
+&.wmnds-fe-checkbox-button {
+  text-align: center;
+  justify-content: center;
+}

src/wmnds/components/form-elements/checkboxes/checkbox-buttons/_example.njk

@@ -0,0 +1,42 @@
+{% raw %}
+{% from "wmnds/components/form-elements/checkboxes/checkbox-buttons/_checkbox-buttons.njk" import wmndsCheckboxButtons %}
+
+{{
+   wmndsCheckboxButtons({
+      idPrefix: "checkboxButtons",
+      items: [
+        {
+          contentText: "Mon",
+          value: "Mon"
+        },
+        {
+          contentText: "Tue",
+          value: "Tue"
+        },
+        {
+          contentText: "Wed",
+          value: "Wed"
+        },
+        {
+          contentText: "Thu",
+          value: "Thu"
+        },
+        {
+          contentText: "Fri",
+          value: "Fri",
+          checked: true
+        },
+        {
+          contentText: "Sat",
+          value: "Sat",
+          checked: true
+        },
+        {
+          contentText:  "Sun",
+          value: "Sun",
+          checked: true
+        }
+      ]
+    })
+}}
+{% endraw %}