Skip to content

Commit dba2ad8

Browse files
timwright12timwright12
authored
Merge pull request #182 from newjersey/chore/0402-migrate-components
Migrate: Footer, Identifier, Search, and GraphicList
2 parents 8942dfb + d055df0 commit dba2ad8

File tree

34 files changed

+789
-1
lines changed

34 files changed

+789
-1
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ npm-debug.log*
55
yarn-debug.log*
66
yarn-error.log*
77
lerna-debug.log*
8+
docs
89

910
# Diagnostic reports (https://nodejs.org/api/report.html)
1011
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

‎src/stories/components/Footer/Footer.stories.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import type { Meta, StoryObj } from "@storybook/web-components-vite";
2+
3+
import { Footer, type FooterProps } from "./Footer";
4+
5+
const meta = {
6+
title: "Components/Footer",
7+
tags: ["autodocs"],
8+
render: (args) => Footer(args),
9+
argTypes: {
10+
variant: {
11+
control: { type: "select" },
12+
options: ["Default", "Big", "Slim"],
13+
},
14+
},
15+
} satisfies Meta<FooterProps>;
16+
17+
export default meta;
18+
type Story = StoryObj<FooterProps>;
19+
20+
export const Default: Story = {
21+
args: {
22+
variant: "Default",
23+
},
24+
};

‎src/stories/components/Footer/Footer.ts‎

Lines changed: 224 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,224 @@
1+
import { html } from "lit";
2+
3+
export interface FooterProps {
4+
variant: "Default" | "Big" | "Slim";
5+
}
6+
7+
export const Footer = ({ variant }: FooterProps) => {
8+
const footerClass =
9+
variant === "Big"
10+
? "usa-footer usa-footer--big"
11+
: variant === "Slim"
12+
? "usa-footer usa-footer--slim"
13+
: "usa-footer";
14+
15+
// Return to top section (shared by all variants)
16+
const returnToTop = html`
17+
<div class="grid-container usa-footer__return-to-top">
18+
<a href="#">Return to top</a>
19+
</div>
20+
`;
21+
22+
// Primary section - varies by variant
23+
let primarySection;
24+
25+
if (variant === "Default") {
26+
primarySection = html`
27+
<div class="usa-footer__primary-section">
28+
<nav class="usa-footer__nav" aria-label="Footer navigation">
29+
<ul class="grid-row grid-gap">
30+
<li class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content">
31+
<a class="usa-footer__primary-link" href="#!">Primary link</a>
32+
</li>
33+
<li class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content">
34+
<a class="usa-footer__primary-link" href="#!">Primary link</a>
35+
</li>
36+
</ul>
37+
</nav>
38+
</div>
39+
`;
40+
} else if (variant === "Big") {
41+
primarySection = html`
42+
<div class="usa-footer__primary-section">
43+
<div class="grid-container">
44+
<div class="grid-row grid-gap">
45+
<div class="tablet:grid-col-8">
46+
<nav class="usa-footer__nav" aria-label="Footer navigation">
47+
<div class="grid-row grid-gap-4">
48+
<div class="mobile-lg:grid-col-6 desktop:grid-col-3">
49+
<section
50+
class="usa-footer__primary-content usa-footer__primary-content--collapsible"
51+
>
52+
<h4 class="usa-footer__primary-link">Topic</h4>
53+
<ul class="usa-list usa-list--unstyled">
54+
<li class="usa-footer__secondary-link"><a href="#!">Secondary link</a></li>
55+
<li class="usa-footer__secondary-link"><a href="#!">Secondary link</a></li>
56+
</ul>
57+
</section>
58+
</div>
59+
<div class="mobile-lg:grid-col-6 desktop:grid-col-3">
60+
<section
61+
class="usa-footer__primary-content usa-footer__primary-content--collapsible"
62+
>
63+
<h4 class="usa-footer__primary-link">Topic</h4>
64+
<ul class="usa-list usa-list--unstyled">
65+
<li class="usa-footer__secondary-link"><a href="#!">Secondary link</a></li>
66+
<li class="usa-footer__secondary-link">
67+
<a href="#!">Secondary link that's pretty long</a>
68+
</li>
69+
</ul>
70+
</section>
71+
</div>
72+
<div class="mobile-lg:grid-col-6 desktop:grid-col-3">
73+
<section
74+
class="usa-footer__primary-content usa-footer__primary-content--collapsible"
75+
>
76+
<h4 class="usa-footer__primary-link">Topic</h4>
77+
<ul class="usa-list usa-list--unstyled">
78+
<li class="usa-footer__secondary-link"><a href="#!">Secondary link</a></li>
79+
<li class="usa-footer__secondary-link"><a href="#!">Secondary link</a></li>
80+
</ul>
81+
</section>
82+
</div>
83+
<div class="mobile-lg:grid-col-6 desktop:grid-col-3">
84+
<section
85+
class="usa-footer__primary-content usa-footer__primary-content--collapsible"
86+
>
87+
<h4 class="usa-footer__primary-link">Topic</h4>
88+
<ul class="usa-list usa-list--unstyled">
89+
<li class="usa-footer__secondary-link"><a href="#!">Secondary link</a></li>
90+
<li class="usa-footer__secondary-link"><a href="#!">Secondary link</a></li>
91+
</ul>
92+
</section>
93+
</div>
94+
</div>
95+
</nav>
96+
</div>
97+
<div class="tablet:grid-col-4">
98+
<div class="usa-sign-up">
99+
<h3 class="usa-sign-up__heading">Sign up</h3>
100+
<form class="usa-form" action="POST">
101+
<label class="usa-label" for="sb-email" id="">Your email address</label>
102+
<input class="usa-input" id="sb-email" name="email" type="email" />
103+
<button class="usa-button" type="submit">Sign up</button>
104+
</form>
105+
</div>
106+
</div>
107+
</div>
108+
</div>
109+
</div>
110+
`;
111+
} else {
112+
// Slim variant
113+
primarySection = html`
114+
<div class="usa-footer__primary-section">
115+
<div class="usa-footer__primary-container grid-row">
116+
<div class="mobile-lg:grid-col-8">
117+
<nav class="usa-footer__nav" aria-label="Footer navigation">
118+
<ul class="grid-row grid-gap">
119+
<li class="mobile-lg:grid-col-6 desktop:grid-col-auto usa-footer__primary-content">
120+
<a class="usa-footer__primary-link" href="#!">Primary link</a>
121+
</li>
122+
<li class="mobile-lg:grid-col-6 desktop:grid-col-auto usa-footer__primary-content">
123+
<a class="usa-footer__primary-link" href="#!">Primary link</a>
124+
</li>
125+
</ul>
126+
</nav>
127+
</div>
128+
<div class="mobile-lg:grid-col-4">
129+
<address class="usa-footer__address">
130+
<div class="grid-row grid-gap">
131+
<div class="grid-col-auto mobile-lg:grid-col-12 desktop:grid-col-auto">
132+
<div class="usa-footer__contact-info">
133+
<a href="tel:1-800-555-5555">(800) CALL-GOVT</a>
134+
</div>
135+
</div>
136+
<div class="grid-col-auto mobile-lg:grid-col-12 desktop:grid-col-auto">
137+
<div class="usa-footer__contact-info">
138+
<a href="#!">info@agency.gov</a>
139+
</div>
140+
</div>
141+
</div>
142+
</address>
143+
</div>
144+
</div>
145+
</div>
146+
`;
147+
}
148+
149+
// Secondary section - varies slightly by variant
150+
let secondarySection;
151+
152+
if (variant === "Slim") {
153+
// Slim variant has simplified secondary section (no social links, no contact)
154+
secondarySection = html`
155+
<div class="usa-footer__secondary-section">
156+
<div class="grid-container">
157+
<div class="usa-footer__logo grid-row grid-gap-2">
158+
<div class="grid-col-auto">
159+
<img class="usa-footer__logo-img" src="./img/logo-img.png" alt="" />
160+
</div>
161+
<div class="grid-col-auto">
162+
<h3 class="usa-footer__logo-heading">Name of Agency</h3>
163+
</div>
164+
</div>
165+
</div>
166+
</div>
167+
`;
168+
} else {
169+
// Default and Big variants have full secondary section
170+
secondarySection = html`
171+
<div class="usa-footer__secondary-section">
172+
<div class="grid-container">
173+
<div class="grid-row grid-gap">
174+
<div class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2">
175+
<div class="mobile-lg:grid-col-auto">
176+
<img class="usa-footer__logo-img" src="./img/logo-img.png" alt="" />
177+
</div>
178+
<div class="mobile-lg:grid-col-auto">
179+
<h3 class="usa-footer__logo-heading">Name of Agency</h3>
180+
</div>
181+
</div>
182+
<div class="usa-footer__contact-links mobile-lg:grid-col-6">
183+
<div class="usa-footer__social-links grid-row grid-gap-1">
184+
<div class="grid-col-auto">
185+
<a class="usa-social-link usa-social-link--facebook" href="#!">
186+
<img
187+
class="usa-social-link__icon"
188+
src="./img/usa-icons/facebook.svg"
189+
alt="Facebook"
190+
/>
191+
</a>
192+
</div>
193+
<div class="grid-col-auto">
194+
<a class="usa-social-link usa-social-link--rss" href="#!">
195+
<img
196+
class="usa-social-link__icon"
197+
src="./img/usa-icons/rss_feed.svg"
198+
alt="RSS"
199+
/>
200+
</a>
201+
</div>
202+
</div>
203+
<h3 class="usa-footer__contact-heading">Agency Contact Center</h3>
204+
<address class="usa-footer__address">
205+
<div class="usa-footer__contact-info grid-row grid-gap">
206+
<div class="grid-col-auto">
207+
<a href="tel:1-800-555-5555">(800) CALL-GOVT</a>
208+
</div>
209+
<div class="grid-col-auto">
210+
<a href="mailto:info@agency.gov">info@agency.gov</a>
211+
</div>
212+
</div>
213+
</address>
214+
</div>
215+
</div>
216+
</div>
217+
</div>
218+
`;
219+
}
220+
221+
return html`
222+
<footer class="${footerClass}">${returnToTop} ${primarySection} ${secondarySection}</footer>
223+
`;
224+
};

‎src/stories/components/Identifier/Identifier.stories.ts‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import type { Meta, StoryObj } from "@storybook/web-components-vite";
2+
3+
import { Identifier, type IdentifierProps } from "./Identifier";
4+
5+
const meta = {
6+
title: "Components/Identifier",
7+
tags: ["autodocs"],
8+
render: (args) => Identifier(args),
9+
argTypes: {
10+
language: {
11+
control: { type: "select" },
12+
options: ["English", "Spanish"],
13+
},
14+
logos: {
15+
control: { type: "select" },
16+
options: ["None", "Single", "Multiple"],
17+
},
18+
showTaxpayerDisclaimer: {
19+
control: { type: "boolean" },
20+
},
21+
},
22+
} satisfies Meta<IdentifierProps>;
23+
24+
export default meta;
25+
type Story = StoryObj<IdentifierProps>;
26+
27+
export const Default: Story = {
28+
args: {
29+
language: "English",
30+
logos: "Single",
31+
showTaxpayerDisclaimer: false,
32+
},
33+
};

0 commit comments

Comments
 (0)