Skip to content

Commit b1567ff

Browse files
samanthabakersamanthabaker
authored
Merge pull request #25 from GSA/filter
Update 0.0.23
2 parents 2a2721a + 3f3b20f commit b1567ff

6 files changed

Lines changed: 271 additions & 41 deletions

File tree

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@gsa-sam/sam-styles",
3-
"version": "0.0.22",
3+
"version": "0.0.23",
44
"description": "",
55
"main": "index.js",
66
"scripts": {

‎src/components/05-form/checkboxes.njk‎

Lines changed: 78 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,80 @@
1-
<form class="usa-form">
2-
<fieldset class="usa-fieldset">
3-
<legend class="usa-sr-only">Historical figures 1</legend>
4-
<div class="usa-checkbox">
5-
<input class="usa-checkbox__input" id="truth" type="checkbox" name="historical-figures-1" value="truth" checked>
6-
<label class="usa-checkbox__label" for="truth">Sojourner Truth</label>
1+
<div class="usa-grid">
2+
<div class="grid-row">
3+
<div class="grid-col-fill tablet:grid-col">
4+
<form class="usa-form">
5+
<fieldset class="usa-fieldset">
6+
<legend class="usa-sr-only">Historical figures 1</legend>
7+
<div class="usa-checkbox">
8+
<input class="usa-checkbox__input" id="truth" type="checkbox" name="historical-figures-1" value="truth" checked="checked">
9+
<label class="usa-checkbox__label" for="truth">Sojourner Truth</label>
10+
</div>
11+
<div class="usa-checkbox">
12+
<input class="usa-checkbox__input" id="douglass" type="checkbox" name="historical-figures-1" value="douglass">
13+
<label class="usa-checkbox__label" for="douglass">Frederick Douglass</label>
14+
</div>
15+
<div class="usa-checkbox">
16+
<input class="usa-checkbox__input" id="washington" type="checkbox" name="historical-figures-1" value="washington">
17+
<label class="usa-checkbox__label" for="washington">Booker T. Washington</label>
18+
</div>
19+
<div class="usa-checkbox">
20+
<input class="usa-checkbox__input" id="carver" type="checkbox" name="historical-figures-1" disabled="disabled">
21+
<label class="usa-checkbox__label" for="carver">George Washington Carver</label>
22+
</div>
23+
</fieldset>
24+
</form>
725
</div>
8-
<div class="usa-checkbox">
9-
<input class="usa-checkbox__input" id="douglass" type="checkbox" name="historical-figures-1" value="douglass">
10-
<label class="usa-checkbox__label" for="douglass">Frederick Douglass</label>
26+
<div class="grid-col-fill tablet:grid-col">
27+
<form class="usa-form">
28+
<fieldset class="usa-fieldset">
29+
<legend class="usa-sr-only">Historical figures 1</legend>
30+
<ul class="usa-list--unstyled">
31+
<li>
32+
<div class="usa-checkbox">
33+
<input class="usa-checkbox__input" id="lincoln" type="checkbox" name="historical-figures-1" value="lincoln" checked="checked">
34+
<label class="usa-checkbox__label" for="lincoln">Abraham Lincoln</label>
35+
</div>
36+
</li>
37+
<ul class="margin-left-3 usa-list--unstyled">
38+
<li>
39+
<div class="usa-checkbox">
40+
<input class="usa-checkbox__input" id="smith" type="checkbox" name="historical-figures-1" value="smith">
41+
<label class="usa-checkbox__label" for="smith">John Smith</label>
42+
</div>
43+
</li>
44+
<li>
45+
<div class="usa-checkbox">
46+
<input class="usa-checkbox__input" id="pellegrino" type="checkbox" name="historical-figures-1" value="pellegrino">
47+
<label class="usa-checkbox__label" for="pellegrino">San Pellegrino</label>
48+
</div>
49+
</li>
50+
<li>
51+
<div class="usa-checkbox">
52+
<input class="usa-checkbox__input" id="adams" type="checkbox" name="historical-figures-1" value="adams">
53+
<label class="usa-checkbox__label" for="adams">John Adams</label>
54+
</div>
55+
</li>
56+
</ul>
57+
<li>
58+
<div class="usa-checkbox">
59+
<input class="usa-checkbox__input" id="beamer" type="checkbox" name="historical-figures-1" value="beamer">
60+
<label class="usa-checkbox__label" for="beamer">Frank Beamer</label>
61+
</div>
62+
</li>
63+
<li>
64+
<div class="usa-checkbox">
65+
<input class="usa-checkbox__input" id="rashington" type="checkbox" name="historical-figures-1" value="roosevelt">
66+
<label class="usa-checkbox__label" for="roosevelt">Franklin D. Roosevelt</label>
67+
</div>
68+
</li>
69+
<li>
70+
<div class="usa-checkbox">
71+
<input class="usa-checkbox__input" id="franklin" type="checkbox" name="historical-figures-1" disabled="disabled">
72+
<label class="usa-checkbox__label" for="franklin">Ben Franklin</label>
73+
</div>
74+
</li>
75+
</ul>
76+
</fieldset>
77+
</form>
1178
</div>
12-
<div class="usa-checkbox">
13-
<input class="usa-checkbox__input" id="washington" type="checkbox" name="historical-figures-1" value="washington">
14-
<label class="usa-checkbox__label" for="washington">Booker T. Washington</label>
15-
</div>
16-
<div class="usa-checkbox">
17-
<input class="usa-checkbox__input" id="carver" type="checkbox" name="historical-figures-1" disabled>
18-
<label class="usa-checkbox__label" for="carver">George Washington Carver</label>
19-
</div>
20-
</fieldset>
21-
</form>
79+
</div>
80+
</div>

‎src/components/05-form/radio-buttons.njk‎

Lines changed: 78 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,80 @@
1-
<form class="usa-form">
2-
<fieldset class="usa-fieldset">
3-
<legend class="usa-sr-only">Historical figures 2</legend>
4-
<div class="usa-radio">
5-
<input class="usa-radio__input" id="stanton" type="radio" checked name="historical-figures-2" value="stanton">
6-
<label class="usa-radio__label" for="stanton">Elizabeth Cady Stanton</label>
1+
<div class="usa-grid">
2+
<div class="grid-row">
3+
<div class="grid-col-fill tablet:grid-col">
4+
<form class="usa-form">
5+
<fieldset class="usa-fieldset">
6+
<legend class="usa-sr-only">Historical figures 2</legend>
7+
<div class="usa-radio">
8+
<input class="usa-radio__input" id="stanton" type="radio" checked="checked" name="historical-figures-2" value="stanton">
9+
<label class="usa-radio__label" for="stanton">Elizabeth Cady Stanton</label>
10+
</div>
11+
<div class="usa-radio">
12+
<input class="usa-radio__input" id="anthony" type="radio" name="historical-figures-2" value="anthony">
13+
<label class="usa-radio__label" for="anthony">Susan B. Anthony</label>
14+
</div>
15+
<div class="usa-radio">
16+
<input class="usa-radio__input" id="tubman" type="radio" name="historical-figures-2" value="tubman">
17+
<label class="usa-radio__label" for="tubman">Harriet Tubman</label>
18+
</div>
19+
<div class="usa-radio">
20+
<input class="usa-radio__input" id="earhart" type="radio" name="historical-figures-2" disabled="disabled">
21+
<label class="usa-radio__label" for="earhart">Amelia Earhart</label>
22+
</div>
23+
</fieldset>
24+
</form>
725
</div>
8-
<div class="usa-radio">
9-
<input class="usa-radio__input" id="anthony" type="radio" name="historical-figures-2" value="anthony">
10-
<label class="usa-radio__label" for="anthony">Susan B. Anthony</label>
26+
<div class="grid-col-fill tablet:grid-col">
27+
<form class="usa-form">
28+
<fieldset class="usa-fieldset">
29+
<legend class="usa-sr-only">Historical figures 1</legend>
30+
<ul class="usa-list--unstyled">
31+
<li>
32+
<div class="usa-radio">
33+
<input class="usa-radio__input" id="lincoln" type="checkbox" name="historical-figures-1" value="lincoln" checked="checked">
34+
<label class="usa-radio__label" for="lincoln">Abraham Lincoln</label>
35+
</div>
36+
</li>
37+
<ul class="margin-left-3 usa-list--unstyled">
38+
<li>
39+
<div class="usa-radio">
40+
<input class="usa-radio__input" id="smith" type="checkbox" name="historical-figures-1" value="smith">
41+
<label class="usa-radio__label" for="smith">John Smith</label>
42+
</div>
43+
</li>
44+
<li>
45+
<div class="usa-radio">
46+
<input class="usa-radio__input" id="pellegrino" type="checkbox" name="historical-figures-1" value="pellegrino">
47+
<label class="usa-radio__label" for="pellegrino">San Pellegrino</label>
48+
</div>
49+
</li>
50+
<li>
51+
<div class="usa-radio">
52+
<input class="usa-radio__input" id="adams" type="checkbox" name="historical-figures-1" value="adams">
53+
<label class="usa-radio__label" for="adams">John Adams</label>
54+
</div>
55+
</li>
56+
</ul>
57+
<li>
58+
<div class="usa-radio">
59+
<input class="usa-radio__input" id="beamer" type="checkbox" name="historical-figures-1" value="beamer">
60+
<label class="usa-radio__label" for="beamer">Frank Beamer</label>
61+
</div>
62+
</li>
63+
<li>
64+
<div class="usa-radio">
65+
<input class="usa-radio__input" id="rashington" type="checkbox" name="historical-figures-1" value="roosevelt">
66+
<label class="usa-radio__label" for="roosevelt">Franklin D. Roosevelt</label>
67+
</div>
68+
</li>
69+
<li>
70+
<div class="usa-radio">
71+
<input class="usa-radio__input" id="franklin" type="checkbox" name="historical-figures-1" disabled="disabled">
72+
<label class="usa-radio__label" for="franklin">Ben Franklin</label>
73+
</div>
74+
</li>
75+
</ul>
76+
</fieldset>
77+
</form>
1178
</div>
12-
<div class="usa-radio">
13-
<input class="usa-radio__input" id="tubman" type="radio" name="historical-figures-2" value="tubman">
14-
<label class="usa-radio__label" for="tubman">Harriet Tubman</label>
15-
</div>
16-
<div class="usa-radio">
17-
<input class="usa-radio__input" id="earhart" type="radio" name="historical-figures-2" disabled>
18-
<label class="usa-radio__label" for="earhart">Amelia Earhart</label>
19-
</div>
20-
</fieldset>
21-
</form>
79+
</div>
80+
</div>

‎src/components/08-footer/footer--alt.njk‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<footer class="usa-footer usa-footer--big" role="contentinfo">
2+
<div class="grid-container usa-footer__return-to-top">
3+
<a href="#">Return to top</a>
4+
</div>
5+
<div class="usa-footer__primary-section">
6+
<div class="grid-container">
7+
<div class="grid-row grid-gap">
8+
<div class="mobile-lg:grid-col-12 tablet:grid-col-4">
9+
<div class="usa-footer__logo grid-row mobile-lg:grid-gap-1 margin-top-3">
10+
<div class="mobile-lg:grid-col-3 mobile-lg:grid-offset-3 tablet:grid-offset-none tablet:grid-col-auto">
11+
<a class="usa-footer__logo-text" href="#">
12+
YouLinkHere
13+
</a>
14+
</div>
15+
<div class="mobile-lg:grid-col-4 tablet:grid-col-auto">
16+
<h3 class="usa-footer__logo-heading">
17+
Logo Header
18+
</h3>
19+
</div>
20+
</div>
21+
</div>
22+
<div class="mobile-lg:grid-col-12 tablet:grid-col-8">
23+
<nav class="usa-footer__nav">
24+
<div class="grid-row grid-gap-4">
25+
<div class="mobile-lg:grid-col-12 desktop:grid-col-4">
26+
<section
27+
class="usa-footer__primary-content usa-footer__primary-content--collapsible"
28+
>
29+
<span class="usa-footer__primary-link"
30+
>Primary Link</span
31+
>
32+
<ul class="usa-list usa-list--unstyled">
33+
<li class="usa-footer__secondary-link">
34+
<a href="javascript:void(0);">Secondary Link</a>
35+
</li>
36+
<li class="usa-footer__secondary-link">
37+
<a href="javascript:void(0);">Secondary Link</a>
38+
</li>
39+
</ul>
40+
</section>
41+
</div>
42+
<div class="mobile-lg:grid-col-12 desktop:grid-col-4">
43+
<section
44+
class="usa-footer__primary-content usa-footer__primary-content--collapsible"
45+
>
46+
<span class="usa-footer__primary-link">Primary Link</span>
47+
<ul class="usa-list usa-list--unstyled">
48+
<li class="usa-footer__secondary-link">
49+
<a href="javascript:void(0);">Secondary Link</a>
50+
</li>
51+
<li class="usa-footer__secondary-link">
52+
<a href="javascript:void(0);">Secondary Link</a>
53+
</li>
54+
<li class="usa-footer__secondary-link">
55+
<a href="javascript:void(0);">Secondary Link</a>
56+
</li>
57+
<li class="usa-footer__secondary-link">
58+
<a href="javascript:void(0);">Secondary Link</a>
59+
</li>
60+
</ul>
61+
</section>
62+
</div>
63+
<div class="mobile-lg:grid-col-12 desktop:grid-col-4">
64+
<section
65+
class="usa-footer__primary-content usa-footer__primary-content--collapsible"
66+
>
67+
<span class="usa-footer__primary-link">Primary Link</span>
68+
<ul class="usa-list usa-list--unstyled">
69+
<li class="usa-footer__secondary-link">
70+
<a href="javascript:void(0);">Secondary Link</a>
71+
</li>
72+
<li class="usa-footer__secondary-link">
73+
<a href="javascript:void(0);"
74+
>Secondary Link</a
75+
>
76+
</li>
77+
<li class="usa-footer__secondary-link">
78+
<a href="javascript:void(0);">Secondary Link</a>
79+
</li>
80+
<li class="usa-footer__secondary-link">
81+
<a href="javascript:void(0);"
82+
>Secondary Link</a
83+
>
84+
</li>
85+
</ul>
86+
</section>
87+
</div>
88+
</div>
89+
</nav>
90+
</div>
91+
</div>
92+
</div>
93+
</div>
94+
<div class="usa-footer__secondary-section">
95+
<div class="grid-container">
96+
<div class="grid-row">
97+
<div class="grid-col-12">
98+
<p class="font-body-2xs line-height-sans-4 margin-top-0">
99+
This is a U.S. General Services Administration Federal Government
100+
computer system that is
101+
<strong>"FOR OFFICIAL USE ONLY."</strong> This system is subject to
102+
monitoring. Individuals found performing unauthorized activities are
103+
subject to disciplinary action including criminal prosecution.
104+
</p>
105+
</div>
106+
</div>
107+
</div>
108+
</div>
109+
</footer>

‎src/components/08-footer/footer.config.yml‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@ status: wip
33

44
variants:
55
- name: default
6-
label: Medium
6+
label: Default
7+
8+
- name: alt
9+
label: Compare
710

811
context: {}

0 commit comments

Comments
 (0)