-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add checkbox buttons component (#896)
* add copy * add checkbox button styling
- Loading branch information
Showing
7 changed files
with
357 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
92 changes: 92 additions & 0 deletions
92
src/wmnds/components/form-elements/checkboxes/checkbox-buttons/_checkbox-buttons.njk
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 %} |
43 changes: 43 additions & 0 deletions
43
src/wmnds/components/form-elements/checkboxes/checkbox-buttons/_checkbox-buttons.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); | ||
| } | ||
| } | ||
| } |
42 changes: 42 additions & 0 deletions
42
src/wmnds/components/form-elements/checkboxes/checkbox-buttons/_example.njk
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 %} |
115 changes: 115 additions & 0 deletions
115
src/wmnds/components/form-elements/checkboxes/checkbox-buttons/_properties.njk.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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." | ||
| } | ||
| ] | ||
| } | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters