@newjersey/njwds 2.2.0 → 2.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/dist/css/button.css +1 -1
- package/dist/css/button.css.map +1 -1
- package/dist/css/icon.css +1 -1
- package/dist/css/icon.css.map +1 -1
- package/dist/css/styles.css +1 -1
- package/dist/css/styles.css.map +1 -1
- package/package.json +1 -1
- package/src/components/07-form/controls/checkboxes/checkboxes--single.njk +4 -0
- package/src/components/07-form/controls/checkboxes/checkboxes--tile.njk +58 -0
- package/src/components/07-form/controls/{checkboxes.njk → checkboxes/checkboxes.njk} +1 -1
- package/src/components/07-form/controls/combo-box.config.yml +4 -12
- package/src/components/07-form/controls/radio-buttons/radio-buttons--tile.njk +58 -0
- package/src/components/07-form/controls/{radio-buttons.njk → radio-buttons/radio-buttons.njk} +4 -6
- package/src/components/07-form/controls/select.config.yml +16 -0
- package/src/components/07-form/controls/select.njk +13 -0
- package/src/sass/_uswds-theme-custom-styles.scss +7 -4
- package/src/components/07-form/controls/dropdown.njk +0 -9
- package/src/components/07-form/controls/radio-buttons.config.yml +0 -14
package/package.json
CHANGED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
<form class="usa-form">
|
|
2
|
+
<fieldset class="usa-fieldset">
|
|
3
|
+
<legend class="usa-legend">Select any historical figure</legend>
|
|
4
|
+
<div class="usa-checkbox">
|
|
5
|
+
<input
|
|
6
|
+
class="usa-checkbox__input usa-checkbox__input--tile"
|
|
7
|
+
id="check-historical-truth-2"
|
|
8
|
+
type="checkbox"
|
|
9
|
+
name="historical-figures-2"
|
|
10
|
+
value="sojourner-truth"
|
|
11
|
+
checked="checked"
|
|
12
|
+
/>
|
|
13
|
+
<label class="usa-checkbox__label" for="check-historical-truth-2"
|
|
14
|
+
>Sojourner Truth
|
|
15
|
+
<span class="usa-checkbox__label-description"
|
|
16
|
+
>This is optional text that can be used to describe the label in more
|
|
17
|
+
detail.</span
|
|
18
|
+
></label
|
|
19
|
+
>
|
|
20
|
+
</div>
|
|
21
|
+
<div class="usa-checkbox">
|
|
22
|
+
<input
|
|
23
|
+
class="usa-checkbox__input usa-checkbox__input--tile"
|
|
24
|
+
id="check-historical-douglass-2"
|
|
25
|
+
type="checkbox"
|
|
26
|
+
name="historical-figures-2"
|
|
27
|
+
value="frederick-douglass"
|
|
28
|
+
/>
|
|
29
|
+
<label class="usa-checkbox__label" for="check-historical-douglass-2"
|
|
30
|
+
>Frederick Douglass</label
|
|
31
|
+
>
|
|
32
|
+
</div>
|
|
33
|
+
<div class="usa-checkbox">
|
|
34
|
+
<input
|
|
35
|
+
class="usa-checkbox__input usa-checkbox__input--tile"
|
|
36
|
+
id="check-historical-washington-2"
|
|
37
|
+
type="checkbox"
|
|
38
|
+
name="historical-figures-2"
|
|
39
|
+
value="booker-t-washington"
|
|
40
|
+
/>
|
|
41
|
+
<label class="usa-checkbox__label" for="check-historical-washington-2"
|
|
42
|
+
>Booker T. Washington</label
|
|
43
|
+
>
|
|
44
|
+
</div>
|
|
45
|
+
<div class="usa-checkbox">
|
|
46
|
+
<input
|
|
47
|
+
class="usa-checkbox__input usa-checkbox__input--tile"
|
|
48
|
+
id="check-historical-carver-2"
|
|
49
|
+
type="checkbox"
|
|
50
|
+
name="historical-figures-2"
|
|
51
|
+
value="george-washington-carver"
|
|
52
|
+
/>
|
|
53
|
+
<label class="usa-checkbox__label" for="check-historical-carver-2"
|
|
54
|
+
>George Washington Carver</label
|
|
55
|
+
>
|
|
56
|
+
</div>
|
|
57
|
+
</fieldset>
|
|
58
|
+
</form>
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
<label class="usa-checkbox__label" for="check-historical-washington">Booker T. Washington</label>
|
|
15
15
|
</div>
|
|
16
16
|
<div class="usa-checkbox">
|
|
17
|
-
<input class="usa-checkbox__input" id="check-historical-carver" type="checkbox" name="historical-figures" value="george-washington-carver"
|
|
17
|
+
<input class="usa-checkbox__input" id="check-historical-carver" type="checkbox" name="historical-figures" value="george-washington-carver">
|
|
18
18
|
<label class="usa-checkbox__label" for="check-historical-carver">George Washington Carver</label>
|
|
19
19
|
</div>
|
|
20
20
|
</fieldset>
|
|
@@ -15,21 +15,13 @@ variants:
|
|
|
15
15
|
context:
|
|
16
16
|
comboBox:
|
|
17
17
|
defaultValue: "blackberry"
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
label: Disabled
|
|
21
|
-
context:
|
|
22
|
-
comboBox:
|
|
23
|
-
disabled: true
|
|
24
|
-
|
|
25
|
-
- name: placeholder
|
|
26
|
-
label: Placeholder
|
|
27
|
-
context:
|
|
28
|
-
comboBox:
|
|
29
|
-
placeholder: "Select one..."
|
|
18
|
+
label: "Select a fruit"
|
|
19
|
+
name: "fruit"
|
|
30
20
|
|
|
31
21
|
- name: required
|
|
32
22
|
label: Required
|
|
33
23
|
context:
|
|
34
24
|
comboBox:
|
|
25
|
+
label: "Select a fruit"
|
|
26
|
+
name: "fruit"
|
|
35
27
|
required: true
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
<form class="usa-form">
|
|
2
|
+
<fieldset class="usa-fieldset">
|
|
3
|
+
<legend class="usa-legend">Select one historical figure</legend>
|
|
4
|
+
<div class="usa-radio">
|
|
5
|
+
<input
|
|
6
|
+
class="usa-radio__input usa-radio__input--tile"
|
|
7
|
+
id="historical-truth-2"
|
|
8
|
+
type="radio"
|
|
9
|
+
name="historical-figures-2"
|
|
10
|
+
value="sojourner-truth"
|
|
11
|
+
checked="checked"
|
|
12
|
+
/>
|
|
13
|
+
<label class="usa-radio__label" for="historical-truth-2"
|
|
14
|
+
>Sojourner Truth</label
|
|
15
|
+
>
|
|
16
|
+
</div>
|
|
17
|
+
<div class="usa-radio">
|
|
18
|
+
<input
|
|
19
|
+
class="usa-radio__input usa-radio__input--tile"
|
|
20
|
+
id="historical-douglass-2"
|
|
21
|
+
type="radio"
|
|
22
|
+
name="historical-figures-2"
|
|
23
|
+
value="frederick-douglass"
|
|
24
|
+
/>
|
|
25
|
+
<label class="usa-radio__label" for="historical-douglass-2"
|
|
26
|
+
>Frederick Douglass
|
|
27
|
+
<span class="usa-checkbox__label-description"
|
|
28
|
+
>This is optional text that can be used to describe the label in more
|
|
29
|
+
detail.</span
|
|
30
|
+
></label
|
|
31
|
+
>
|
|
32
|
+
</div>
|
|
33
|
+
<div class="usa-radio">
|
|
34
|
+
<input
|
|
35
|
+
class="usa-radio__input usa-radio__input--tile"
|
|
36
|
+
id="historical-washington-2"
|
|
37
|
+
type="radio"
|
|
38
|
+
name="historical-figures-2"
|
|
39
|
+
value="booker-t-washington"
|
|
40
|
+
/>
|
|
41
|
+
<label class="usa-radio__label" for="historical-washington-2"
|
|
42
|
+
>Booker T. Washington</label
|
|
43
|
+
>
|
|
44
|
+
</div>
|
|
45
|
+
<div class="usa-radio">
|
|
46
|
+
<input
|
|
47
|
+
class="usa-radio__input usa-radio__input--tile"
|
|
48
|
+
id="historical-carver-2"
|
|
49
|
+
type="radio"
|
|
50
|
+
name="historical-figures-2"
|
|
51
|
+
value="george-washington-carver"
|
|
52
|
+
/>
|
|
53
|
+
<label class="usa-radio__label" for="historical-carver-2"
|
|
54
|
+
>George Washington Carver</label
|
|
55
|
+
>
|
|
56
|
+
</div>
|
|
57
|
+
</fieldset>
|
|
58
|
+
</form>
|
package/src/components/07-form/controls/{radio-buttons.njk → radio-buttons/radio-buttons.njk}
RENAMED
|
@@ -1,22 +1,20 @@
|
|
|
1
|
-
{%- set inputClasses = 'usa-radio__input ' + classes -%}
|
|
2
|
-
|
|
3
1
|
<form class="usa-form">
|
|
4
2
|
<fieldset class="usa-fieldset">
|
|
5
3
|
<legend class="usa-legend usa-legend">Select one historical figure</legend>
|
|
6
4
|
<div class="usa-radio">
|
|
7
|
-
<input class="
|
|
5
|
+
<input class="usa-radio__input" id="historical-truth" type="radio" name="historical-figures" value="sojourner-truth">
|
|
8
6
|
<label class="usa-radio__label" for="historical-truth">Sojourner Truth</label>
|
|
9
7
|
</div>
|
|
10
8
|
<div class="usa-radio">
|
|
11
|
-
<input class="
|
|
9
|
+
<input class="usa-radio__input" id="historical-douglass" type="radio" name="historical-figures" value="frederick-douglass">
|
|
12
10
|
<label class="usa-radio__label" for="historical-douglass">Frederick Douglass</label>
|
|
13
11
|
</div>
|
|
14
12
|
<div class="usa-radio">
|
|
15
|
-
<input class="
|
|
13
|
+
<input class="usa-radio__input" id="historical-washington" type="radio" name="historical-figures" value="booker-t-washington">
|
|
16
14
|
<label class="usa-radio__label" for="historical-washington">Booker T. Washington</label>
|
|
17
15
|
</div>
|
|
18
16
|
<div class="usa-radio">
|
|
19
|
-
<input class="
|
|
17
|
+
<input class="usa-radio__input" id="historical-carver" type="radio" name="historical-figures" value="george-washington-carver">
|
|
20
18
|
<label class="usa-radio__label" for="historical-carver">George Washington Carver</label>
|
|
21
19
|
</div>
|
|
22
20
|
</fieldset>
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
label: Select
|
|
2
|
+
status: ready
|
|
3
|
+
preview: "@uswds-framed"
|
|
4
|
+
|
|
5
|
+
variants:
|
|
6
|
+
- name: default
|
|
7
|
+
label: Default
|
|
8
|
+
context:
|
|
9
|
+
select:
|
|
10
|
+
label: "Dropdown label"
|
|
11
|
+
- name: default-value
|
|
12
|
+
label: Default Value
|
|
13
|
+
context:
|
|
14
|
+
select:
|
|
15
|
+
defaultValue: "value1"
|
|
16
|
+
label: "Dropdown label"
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<form class="usa-form">
|
|
2
|
+
<label class="usa-label" for="options">{{ select.label }}</label>
|
|
3
|
+
<select
|
|
4
|
+
class="usa-select"
|
|
5
|
+
name="options"
|
|
6
|
+
id="options"
|
|
7
|
+
>
|
|
8
|
+
<option value>- Select -</option>
|
|
9
|
+
<option {% if select.defaultValue =="value1" %} selected="selected"{% endif %} value="value1">Option A</option>
|
|
10
|
+
<option value="value2">Option B</option>
|
|
11
|
+
<option value="value3">Option C</option>
|
|
12
|
+
</select>
|
|
13
|
+
</form>
|
|
@@ -279,15 +279,18 @@ i.e.
|
|
|
279
279
|
box-shadow: 0 0 0 2px color($theme-color-base);
|
|
280
280
|
}
|
|
281
281
|
|
|
282
|
-
// Radio
|
|
283
|
-
.usa-radio__input--tile:checked + [class*="__label"]
|
|
282
|
+
// Radio & Checkbox tile variants
|
|
283
|
+
.usa-radio__input--tile:checked + [class*="__label"],
|
|
284
|
+
.usa-checkbox__input--tile:checked + [class*="__label"] {
|
|
284
285
|
background-color: color($theme-color-primary-lighter);
|
|
285
286
|
}
|
|
286
287
|
|
|
287
|
-
.usa-radio__input--tile + [class*="__label"]
|
|
288
|
+
.usa-radio__input--tile + [class*="__label"],
|
|
289
|
+
.usa-checkbox__input--tile + [class*="__label"] {
|
|
288
290
|
border-color: color($theme-color-base-light);
|
|
289
291
|
}
|
|
290
|
-
.usa-radio__input.usa-radio__input--tile:checked + [class*="__label"]::before
|
|
292
|
+
.usa-radio__input.usa-radio__input--tile:checked + [class*="__label"]::before,
|
|
293
|
+
.usa-checkbox__input.usa-checkbox__input--tile:checked + [class*="__label"]::before{
|
|
291
294
|
box-shadow: 0 0 0 2px #005ea2, inset 0 0 0 2px #cfe8ff;
|
|
292
295
|
}
|
|
293
296
|
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
<form class="usa-form">
|
|
2
|
-
<label class="usa-label" for="options">Dropdown label</label>
|
|
3
|
-
<select class="usa-select" name="options" id="options">
|
|
4
|
-
<option value>- Select -</option>
|
|
5
|
-
<option value="value1">Option A</option>
|
|
6
|
-
<option value="value2">Option B</option>
|
|
7
|
-
<option value="value3">Option C</option>
|
|
8
|
-
</select>
|
|
9
|
-
</form>
|