darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-24 00:07:02 -04:00
Code Issues Packages Projects Releases Wiki Activity

Update radio-select to use govuk-frontend buttons

Browse Source
This commit is contained in:
Katie Smith
2020-02-06 14:49:07 +00:00
parent 0d0b71af63
commit e53a97423b
3 changed files with 48 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
app/assets/javascripts/radioSelect.js
View File

@@ -7,43 +7,43 @@
let states = {
'initial': Hogan.compile(`
<div class="radio-select-column">
<div class="radio-select__column">
<div class="multiple-choice js-multiple-choice">
<input checked="checked" id="{{name}}-0" name="{{name}}" type="radio" value="">
<label class="block-label js-block-label" for="{{name}}-0">Now</label>
</div>
</div>
<div class="radio-select-column">
<div class="radio-select__column">
{{#categories}}
<input type='button' class='js-category-button' value='{{.}}' />
<input type='button' class='govuk-button govuk-button--secondary radio-select__button--category' value='{{.}}' />
{{/categories}}
</div>
`),
'choose': Hogan.compile(`
<div class="radio-select-column">
<div class="radio-select__column">
<div class="multiple-choice js-multiple-choice js-initial-option">
<input checked="checked" id="{{name}}-0" name="{{name}}" type="radio" value="">
<label for="{{name}}-0">Now</label>
</div>
</div>
<div class="radio-select-column">
<div class="radio-select__column">
{{#choices}}
<div class="multiple-choice js-multiple-choice js-option">
<input type="radio" value="{{value}}" id="{{id}}" name="{{name}}" />
<label for="{{id}}">{{label}}</label>
</div>
{{/choices}}
<input type='button' class='js-done-button js-done-button-block' value='Done' />
<input type='button' class='govuk-button govuk-button--secondary radio-select__button--done' value='Done' />
</div>
`),
'chosen': Hogan.compile(`
<div class="radio-select-column">
<div class="radio-select__column">
<div class="multiple-choice js-multiple-choice js-initial-option">
<input id="{{name}}-0" name="{{name}}" type="radio" value="">
<label for="{{name}}-0">Now</label>
</div>
</div>
<div class="radio-select-column">
<div class="radio-select__column">
{{#choices}}
<div class="multiple-choice js-multiple-choice">
<input checked="checked" type="radio" value="{{value}}" id="{{id}}" name="{{name}}" />
@@ -51,8 +51,8 @@
</div>
{{/choices}}
</div>
<div class="radio-select-column">
<input type='button' class='category-link js-reset-button' value='Choose a different time' />
<div class="radio-select__column">
<input type='button' class='govuk-button govuk-button--secondary radio-select__button--reset' value='Choose a different time' />
</div>
`)
};
@@ -110,7 +110,7 @@
};
$component
.on('click', '.js-category-button', function(event) {
.on('click', '.radio-select__button--category', function(event) {
event.preventDefault();
let wordsInDay = $(this).attr('value').split(' ');
@@ -143,7 +143,7 @@
selectOption(value);
})
.on('click', '.js-done-button', function(event) {
.on('click', '.radio-select__button--done', function(event) {
event.preventDefault();
let $selection = $('input[type=radio]:checked', this.parentNode);
@@ -164,7 +164,7 @@
focusSelected(component);
})
.on('click', '.js-reset-button', function(event) {
.on('click', '.radio-select__button--reset', function(event) {
event.preventDefault();
reset();

18
app/assets/stylesheets/components/radios.scss
View File

@@ -2,7 +2,7 @@
min-height: 39px;
&-column {
&__column {
display: inline-block;
vertical-align: top;
@@ -14,25 +14,23 @@
}
.js-done-button,
.js-category-button,
.js-reset-button {
&__button--category {
@include button($grey-3);
margin-right: $gutter-half;
margin-right: govuk-spacing(3);
width: auto;
}
.js-done-button-block {
&__button--done {
display: block;
clear: both;
margin: 0 0 $gutter 0;
margin: 0 0 govuk-spacing(6) 0;
position: relative;
top: $gutter-half;
top: govuk-spacing(3);
&:active {
top: $gutter-half + 2px;
top: govuk-spacing(3) + 2px;
}
}