feat: add checkbox buttons component

src/wmnds/components/button/_button.scss

@@ -117,6 +117,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);

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

@@ -28,6 +28,7 @@
 
 @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";

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,43 @@
+&.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);
+    }
+  }
+}

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 %}

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

@@ -0,0 +1,115 @@
+{
+  "wmndsCheckboxButtonsProps": [
+    {
+      "name": "items",
+      "type": "array",
+      "description": "<strong>Required.</strong> Array of checkbox items objects. See <code class='wmnds-website-inline-code'>items</code> below.",
+      "arrayOptions": [
+        {
+          "name": "id",
+          "type": "string",
+          "description": "Specific id attribute for the checkbox item. If omitted, then component global <code class='wmnds-website-inline-code'>idPrefix</code> option will be applied."
+        },
+        {
+          "name": "contentText",
+          "type": "string",
+          "description": "<strong>Required.</strong> If <code class='wmnds-website-inline-code'>contentHTML</code> is set, this is not required. Text to use within each checkbox item label. If <code class='wmnds-website-inline-code'>contentHTML</code> is provided, the <code class='wmnds-website-inline-code'>contentText</code> argument will be ignored."
+        },
+        {
+          "name": "contentHTML",
+          "type": "string",
+          "description": "<strong>Required.</strong> If <code class='wmnds-website-inline-code'>contentText</code> is set, this is not required. HTML to use within each checkbox item label. If <code class='wmnds-website-inline-code'>contentHTML</code> is provided, the <code class='wmnds-website-inline-code'>contentText</code> argument will be ignored."
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "description": "<strong>Required.</strong> Value for the checkbox input."
+        },
+        {
+          "name": "checked",
+          "type": "boolean",
+          "description": "If true, checkbox will be checked."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "description": "If true, checkbox will be disabled."
+        }
+      ]
+    },
+    {
+      "name": "hint",
+      "type": "object",
+      "description": "Options for the hint component (e.g. text). See <code class='wmnds-website-inline-code'>hint</code> options below.",
+      "arrayOptions": [
+        {
+          "name": "id",
+          "type": "string",
+          "description": "Optional id attribute to add to the hint span tag."
+        },
+        {
+          "name": "contentText",
+          "type": "string",
+          "description": "<strong>Required.</strong> If <code class='wmnds-website-inline-code'>contentHTML</code> is set, this is not required. Text to use within the hint. If <code class='wmnds-website-inline-code'>contentHTML</code> is provided, the <code class='wmnds-website-inline-code'>contentText</code> argument will be ignored."
+        },
+        {
+          "name": "contentHTML",
+          "type": "string",
+          "description": "<strong>Required.</strong> If <code class='wmnds-website-inline-code'>contentText</code> is set, this is not required. HTML to use within the hint. If <code class='wmnds-website-inline-code'>contentHTML</code> is provided, the <code class='wmnds-website-inline-code'>contentText</code> argument will be ignored."
+        },
+        {
+          "name": "classes",
+          "type": "string",
+          "description": "Classes to add to the hint span tag."
+        }
+      ]
+    },
+    {
+      "name": "idPrefix",
+      "type": "string",
+      "description": "String to prefix id for each checkbox item if no id is specified on each item. If not passed, fall back to using the name option instead."
+    },
+    {
+      "name": "name",
+      "type": "string",
+      "description": "<strong>Required.</strong> Name attribute for all checkbox items."
+    },
+    {
+      "name": "classes",
+      "type": "string",
+      "description": "Classes to add to the checkboxes container."
+    },
+    {
+      "name": "error",
+      "type": "boolean",
+      "description": "If true, errorMessage will show. Defaults to <code class='wmnds-website-inline-code'>false</code>."
+    },
+    {
+      "name": "errorMessage",
+      "type": "object",
+      "description": "Options for the error message component. See <code class='wmnds-website-inline-code'>errorMessage</code> options below.",
+      "arrayOptions": [
+        {
+          "name": "id",
+          "type": "string",
+          "description": "Id attribute to add to the error message span tag."
+        },
+        {
+          "name": "contentText",
+          "type": "string",
+          "description": "<strong>Required.</strong> Text to use within the error message. If <code class='wmnds-website-inline-code'>contentHTML</code> is supplied, this is ignored."
+        },
+        {
+          "name": "contentHTML",
+          "type": "string",
+          "description": "<strong>Required.</strong> HTML to use within the error message"
+        },
+        {
+          "name": "classes",
+          "type": "string",
+          "description": "Classes to add to the error message span tag."
+        }
+      ]
+    }
+  ]
+}

src/www/pages/components/checkboxes/index.njk.md

@@ -73,6 +73,69 @@
     iframe: false
   })
 }}
+
+{% markdown %}
+
+## Checkboxes as secondary button
+
+<h3>What does it do?</h3>
+
+- Allows users select one or more options by clicking the [button](/components/button)
+
+<h3>When to use it?</h3>
+
+- When there is limited vertical space
+
+{% endmarkdown %}
+{% from "wmnds/components/form-elements/checkboxes/checkbox-buttons/_checkbox-buttons.njk" import wmndsCheckboxButtons %}
+{{
+  compExample([
+    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
+        }
+      ]
+    })
+  ],
+  {
+    componentPath: "wmnds/components/form-elements/checkboxes/checkbox-buttons/",
+    njk: true,
+    njkProps: wmndsCheckboxButtonsProps,
+    js: false,
+    iframe: true
+  })
+}}
+
 {# End Checkboxes #}
 
 {% endblock %}