-
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.
* add jp sidebar widget (#894) * update copy (#895) * fix: button alignment (#897) * update other files * Child select col elements * remove commented text * fix: Live departures styling fixes (#893) * departure time alignment * add focus state to live dep tabs * feat: add banner documentation (#899) * fix button alignment * add banner documentation * feat: add checkbox buttons component (#896) * add copy * add checkbox button styling * feat: add number input component (#898) * add number input component * remove search radius text * feat: add search function (#900) * update other files * Child select col elements * remove commented text * fix button alignment * add banner documentation * add autocomplete search to header * add search feature to ds header * fix component urls * add tag matching * add page tags for search * add button alignment text * center widget buttons * add flat polyfill * fix: add number input id (#902) * add number input component * remove search radius text * add id * feat: show matched tags in search suggestion (#903) * update other files * Child select col elements * remove commented text * fix button alignment * add banner documentation * add autocomplete search to header * add search feature to ds header * fix component urls * add tag matching * add page tags for search * add button alignment text * center widget buttons * add flat polyfill * show matched tags in suggestion * center align checkbox buttons
- Loading branch information
Showing
42 changed files
with
46,295 additions
and
648 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
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
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
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 %} |
48 changes: 48 additions & 0 deletions
48
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,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; | ||
| } |
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 %} |
Oops, something went wrong.