@nationaldesignstudio/react 0.5.2 → 0.5.3

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.
Files changed (160) hide show
  1. package/package.json +10 -2
  2. package/src/App.css +0 -0
  3. package/src/App.tsx +0 -7
  4. package/src/assets/fonts/PPNeueMontreal-Variable.woff2 +0 -0
  5. package/src/assets/react.svg +0 -1
  6. package/src/components/atoms/accordion/accordion.stories.tsx +0 -228
  7. package/src/components/atoms/accordion/accordion.test.tsx +0 -231
  8. package/src/components/atoms/accordion/index.ts +0 -6
  9. package/src/components/atoms/background/background.test.tsx +0 -213
  10. package/src/components/atoms/background/index.ts +0 -22
  11. package/src/components/atoms/button/__screenshots__/button.visual.test.tsx/button-charcoal-chromium-darwin.png +0 -0
  12. package/src/components/atoms/button/__screenshots__/button.visual.test.tsx/button-charcoal-chromium-linux.png +0 -0
  13. package/src/components/atoms/button/__screenshots__/button.visual.test.tsx/button-charcoal-outline-chromium-darwin.png +0 -0
  14. package/src/components/atoms/button/__screenshots__/button.visual.test.tsx/button-charcoal-outline-chromium-linux.png +0 -0
  15. package/src/components/atoms/button/__screenshots__/button.visual.test.tsx/button-charcoal-outline-quiet-chromium-darwin.png +0 -0
  16. package/src/components/atoms/button/__screenshots__/button.visual.test.tsx/button-charcoal-outline-quiet-chromium-linux.png +0 -0
  17. package/src/components/atoms/button/__screenshots__/button.visual.test.tsx/button-disabled-chromium-darwin.png +0 -0
  18. package/src/components/atoms/button/__screenshots__/button.visual.test.tsx/button-disabled-chromium-linux.png +0 -0
  19. package/src/components/atoms/button/__screenshots__/button.visual.test.tsx/button-ivory-chromium-darwin.png +0 -0
  20. package/src/components/atoms/button/__screenshots__/button.visual.test.tsx/button-ivory-chromium-linux.png +0 -0
  21. package/src/components/atoms/button/__screenshots__/button.visual.test.tsx/button-ivory-outline-chromium-darwin.png +0 -0
  22. package/src/components/atoms/button/__screenshots__/button.visual.test.tsx/button-ivory-outline-chromium-linux.png +0 -0
  23. package/src/components/atoms/button/__screenshots__/button.visual.test.tsx/button-ivory-outline-quiet-chromium-darwin.png +0 -0
  24. package/src/components/atoms/button/__screenshots__/button.visual.test.tsx/button-ivory-outline-quiet-chromium-linux.png +0 -0
  25. package/src/components/atoms/button/__screenshots__/button.visual.test.tsx/button-size-large-chromium-darwin.png +0 -0
  26. package/src/components/atoms/button/__screenshots__/button.visual.test.tsx/button-size-large-chromium-linux.png +0 -0
  27. package/src/components/atoms/button/__screenshots__/button.visual.test.tsx/button-size-medium-chromium-darwin.png +0 -0
  28. package/src/components/atoms/button/__screenshots__/button.visual.test.tsx/button-size-medium-chromium-linux.png +0 -0
  29. package/src/components/atoms/button/__screenshots__/button.visual.test.tsx/button-size-small-chromium-darwin.png +0 -0
  30. package/src/components/atoms/button/__screenshots__/button.visual.test.tsx/button-size-small-chromium-linux.png +0 -0
  31. package/src/components/atoms/button/button.stories.tsx +0 -289
  32. package/src/components/atoms/button/button.test.tsx +0 -419
  33. package/src/components/atoms/button/button.visual.test.tsx +0 -98
  34. package/src/components/atoms/button/icon-button.stories.tsx +0 -260
  35. package/src/components/atoms/button/icon-button.test.tsx +0 -186
  36. package/src/components/atoms/button/index.ts +0 -6
  37. package/src/components/atoms/input/index.ts +0 -17
  38. package/src/components/atoms/input/input-group.stories.tsx +0 -646
  39. package/src/components/atoms/input/input-group.test.tsx +0 -362
  40. package/src/components/atoms/input/input.stories.tsx +0 -228
  41. package/src/components/atoms/input/input.test.tsx +0 -167
  42. package/src/components/atoms/ndstudio-footer/index.ts +0 -1
  43. package/src/components/atoms/pager-control/index.ts +0 -5
  44. package/src/components/atoms/pager-control/pager-control.stories.tsx +0 -207
  45. package/src/components/atoms/pager-control/pager-control.test.tsx +0 -130
  46. package/src/components/atoms/popover/index.ts +0 -30
  47. package/src/components/atoms/popover/popover.stories.tsx +0 -531
  48. package/src/components/atoms/popover/popover.test.tsx +0 -486
  49. package/src/components/atoms/select/index.ts +0 -18
  50. package/src/components/atoms/select/select.stories.tsx +0 -455
  51. package/src/components/atoms/tooltip/index.ts +0 -24
  52. package/src/components/atoms/tooltip/tooltip.stories.tsx +0 -348
  53. package/src/components/atoms/tooltip/tooltip.test.tsx +0 -363
  54. package/src/components/dev-tools/dev-toolbar/dev-toolbar.stories.tsx +0 -73
  55. package/src/components/dev-tools/dev-toolbar/index.ts +0 -1
  56. package/src/components/dev-tools/grid-overlay/index.ts +0 -1
  57. package/src/components/dev-tools/index.ts +0 -2
  58. package/src/components/foundation/typography/typography.stories.tsx +0 -401
  59. package/src/components/organisms/card/__screenshots__/card.visual.test.tsx/card-default-vertical-chromium-darwin.png +0 -0
  60. package/src/components/organisms/card/__screenshots__/card.visual.test.tsx/card-default-vertical-chromium-linux.png +0 -0
  61. package/src/components/organisms/card/__screenshots__/card.visual.test.tsx/card-horizontal-chromium-darwin.png +0 -0
  62. package/src/components/organisms/card/__screenshots__/card.visual.test.tsx/card-horizontal-chromium-linux.png +0 -0
  63. package/src/components/organisms/card/__screenshots__/card.visual.test.tsx/card-minimal-chromium-darwin.png +0 -0
  64. package/src/components/organisms/card/__screenshots__/card.visual.test.tsx/card-minimal-chromium-linux.png +0 -0
  65. package/src/components/organisms/card/__screenshots__/card.visual.test.tsx/card-without-actions-chromium-darwin.png +0 -0
  66. package/src/components/organisms/card/__screenshots__/card.visual.test.tsx/card-without-actions-chromium-linux.png +0 -0
  67. package/src/components/organisms/card/__screenshots__/card.visual.test.tsx/card-without-eyebrow-chromium-darwin.png +0 -0
  68. package/src/components/organisms/card/__screenshots__/card.visual.test.tsx/card-without-eyebrow-chromium-linux.png +0 -0
  69. package/src/components/organisms/card/__screenshots__/card.visual.test.tsx/card-without-image-chromium-darwin.png +0 -0
  70. package/src/components/organisms/card/__screenshots__/card.visual.test.tsx/card-without-image-chromium-linux.png +0 -0
  71. package/src/components/organisms/card/card.stories.tsx +0 -293
  72. package/src/components/organisms/card/card.test.tsx +0 -247
  73. package/src/components/organisms/card/card.visual.test.tsx +0 -197
  74. package/src/components/organisms/card/index.ts +0 -26
  75. package/src/components/organisms/navbar/__screenshots__/navbar.visual.test.tsx/navbar-active-link-chromium-darwin.png +0 -0
  76. package/src/components/organisms/navbar/__screenshots__/navbar.visual.test.tsx/navbar-active-link-chromium-linux.png +0 -0
  77. package/src/components/organisms/navbar/__screenshots__/navbar.visual.test.tsx/navbar-brand-only-chromium-darwin.png +0 -0
  78. package/src/components/organisms/navbar/__screenshots__/navbar.visual.test.tsx/navbar-brand-only-chromium-linux.png +0 -0
  79. package/src/components/organisms/navbar/__screenshots__/navbar.visual.test.tsx/navbar-default-chromium-darwin.png +0 -0
  80. package/src/components/organisms/navbar/__screenshots__/navbar.visual.test.tsx/navbar-default-chromium-linux.png +0 -0
  81. package/src/components/organisms/navbar/index.ts +0 -18
  82. package/src/components/organisms/navbar/navbar.stories.tsx +0 -313
  83. package/src/components/organisms/navbar/navbar.test.tsx +0 -190
  84. package/src/components/organisms/navbar/navbar.visual.test.tsx +0 -85
  85. package/src/components/organisms/us-gov-banner/__screenshots__/us-gov-banner.visual.test.tsx/us-gov-banner-custom-icon-chromium-darwin.png +0 -0
  86. package/src/components/organisms/us-gov-banner/__screenshots__/us-gov-banner.visual.test.tsx/us-gov-banner-custom-icon-chromium-linux.png +0 -0
  87. package/src/components/organisms/us-gov-banner/__screenshots__/us-gov-banner.visual.test.tsx/us-gov-banner-custom-text-chromium-darwin.png +0 -0
  88. package/src/components/organisms/us-gov-banner/__screenshots__/us-gov-banner.visual.test.tsx/us-gov-banner-custom-text-chromium-linux.png +0 -0
  89. package/src/components/organisms/us-gov-banner/__screenshots__/us-gov-banner.visual.test.tsx/us-gov-banner-default-chromium-darwin.png +0 -0
  90. package/src/components/organisms/us-gov-banner/__screenshots__/us-gov-banner.visual.test.tsx/us-gov-banner-default-chromium-linux.png +0 -0
  91. package/src/components/organisms/us-gov-banner/index.ts +0 -5
  92. package/src/components/organisms/us-gov-banner/us-gov-banner.stories.tsx +0 -35
  93. package/src/components/organisms/us-gov-banner/us-gov-banner.test.tsx +0 -107
  94. package/src/components/organisms/us-gov-banner/us-gov-banner.visual.test.tsx +0 -46
  95. package/src/components/sections/banner/banner.stories.tsx +0 -150
  96. package/src/components/sections/banner/banner.test.tsx +0 -185
  97. package/src/components/sections/banner/index.ts +0 -2
  98. package/src/components/sections/card-grid/card-grid.stories.tsx +0 -351
  99. package/src/components/sections/card-grid/index.ts +0 -1
  100. package/src/components/sections/faq-section/faq-section.stories.tsx +0 -453
  101. package/src/components/sections/faq-section/index.ts +0 -2
  102. package/src/components/sections/hero/__screenshots__/hero.visual.test.tsx/hero-a1-desktop-chromium-darwin.png +0 -0
  103. package/src/components/sections/hero/__screenshots__/hero.visual.test.tsx/hero-a1-desktop-chromium-linux.png +0 -0
  104. package/src/components/sections/hero/__screenshots__/hero.visual.test.tsx/hero-a1-mobile-chromium-darwin.png +0 -0
  105. package/src/components/sections/hero/__screenshots__/hero.visual.test.tsx/hero-a1-mobile-chromium-linux.png +0 -0
  106. package/src/components/sections/hero/__screenshots__/hero.visual.test.tsx/hero-a1-tablet-chromium-darwin.png +0 -0
  107. package/src/components/sections/hero/__screenshots__/hero.visual.test.tsx/hero-a1-tablet-chromium-linux.png +0 -0
  108. package/src/components/sections/hero/__screenshots__/hero.visual.test.tsx/hero-a2-desktop-chromium-darwin.png +0 -0
  109. package/src/components/sections/hero/__screenshots__/hero.visual.test.tsx/hero-a2-desktop-chromium-linux.png +0 -0
  110. package/src/components/sections/hero/__screenshots__/hero.visual.test.tsx/hero-a2-mobile-chromium-darwin.png +0 -0
  111. package/src/components/sections/hero/__screenshots__/hero.visual.test.tsx/hero-a2-mobile-chromium-linux.png +0 -0
  112. package/src/components/sections/hero/__screenshots__/hero.visual.test.tsx/hero-a2-tablet-chromium-darwin.png +0 -0
  113. package/src/components/sections/hero/__screenshots__/hero.visual.test.tsx/hero-a2-tablet-chromium-linux.png +0 -0
  114. package/src/components/sections/hero/__screenshots__/hero.visual.test.tsx/hero-a3-desktop-chromium-darwin.png +0 -0
  115. package/src/components/sections/hero/__screenshots__/hero.visual.test.tsx/hero-a3-desktop-chromium-linux.png +0 -0
  116. package/src/components/sections/hero/__screenshots__/hero.visual.test.tsx/hero-a3-mobile-chromium-darwin.png +0 -0
  117. package/src/components/sections/hero/__screenshots__/hero.visual.test.tsx/hero-a3-mobile-chromium-linux.png +0 -0
  118. package/src/components/sections/hero/__screenshots__/hero.visual.test.tsx/hero-a3-tablet-chromium-darwin.png +0 -0
  119. package/src/components/sections/hero/__screenshots__/hero.visual.test.tsx/hero-a3-tablet-chromium-linux.png +0 -0
  120. package/src/components/sections/hero/__screenshots__/hero.visual.test.tsx/hero-custom-class-chromium-darwin.png +0 -0
  121. package/src/components/sections/hero/__screenshots__/hero.visual.test.tsx/hero-custom-class-chromium-linux.png +0 -0
  122. package/src/components/sections/hero/__screenshots__/hero.visual.test.tsx/hero-default-chromium-linux.png +0 -0
  123. package/src/components/sections/hero/__screenshots__/hero.visual.test.tsx/hero-long-title-chromium-darwin.png +0 -0
  124. package/src/components/sections/hero/__screenshots__/hero.visual.test.tsx/hero-long-title-chromium-linux.png +0 -0
  125. package/src/components/sections/hero/hero.stories.tsx +0 -397
  126. package/src/components/sections/hero/hero.test.tsx +0 -138
  127. package/src/components/sections/hero/hero.visual.test.tsx +0 -140
  128. package/src/components/sections/hero/index.ts +0 -23
  129. package/src/components/sections/prose/__screenshots__/prose.visual.test.tsx/prose-h3-heading-chromium-darwin.png +0 -0
  130. package/src/components/sections/prose/__screenshots__/prose.visual.test.tsx/prose-h3-heading-chromium-linux.png +0 -0
  131. package/src/components/sections/prose/__screenshots__/prose.visual.test.tsx/prose-multiple-paragraphs-chromium-darwin.png +0 -0
  132. package/src/components/sections/prose/__screenshots__/prose.visual.test.tsx/prose-multiple-paragraphs-chromium-linux.png +0 -0
  133. package/src/components/sections/prose/__screenshots__/prose.visual.test.tsx/prose-multiple-sections-chromium-darwin.png +0 -0
  134. package/src/components/sections/prose/__screenshots__/prose.visual.test.tsx/prose-multiple-sections-chromium-linux.png +0 -0
  135. package/src/components/sections/prose/__screenshots__/prose.visual.test.tsx/prose-single-section-chromium-darwin.png +0 -0
  136. package/src/components/sections/prose/__screenshots__/prose.visual.test.tsx/prose-single-section-chromium-linux.png +0 -0
  137. package/src/components/sections/prose/index.ts +0 -6
  138. package/src/components/sections/prose/prose.stories.tsx +0 -144
  139. package/src/components/sections/prose/prose.test.tsx +0 -178
  140. package/src/components/sections/prose/prose.visual.test.tsx +0 -105
  141. package/src/components/sections/quote-block/index.ts +0 -5
  142. package/src/components/sections/river/index.ts +0 -1
  143. package/src/components/sections/river/river.stories.tsx +0 -237
  144. package/src/components/sections/river/river.test.tsx +0 -268
  145. package/src/components/sections/tout/index.ts +0 -1
  146. package/src/components/sections/tout/tout.stories.tsx +0 -171
  147. package/src/components/sections/tout/tout.test.tsx +0 -242
  148. package/src/components/sections/two-column-section/index.ts +0 -5
  149. package/src/components/sections/two-column-section/two-column-section.stories.tsx +0 -285
  150. package/src/components/shared/index.ts +0 -5
  151. package/src/index.ts +0 -293
  152. package/src/main.tsx +0 -13
  153. package/src/stories/grid-system.stories.tsx +0 -309
  154. package/src/stories/introduction.mdx +0 -128
  155. package/src/stories/theme-provider.stories.tsx +0 -349
  156. package/src/stories/token-showcase.stories.tsx +0 -73
  157. package/src/stories/token-showcase.tsx +0 -777
  158. package/src/styles.css +0 -14
  159. package/src/tests/token-resolution.test.tsx +0 -298
  160. package/src/theme/theme-provider.test.tsx +0 -270
@@ -1,453 +0,0 @@
1
- import type { Meta, StoryObj } from "@storybook/react-vite";
2
- import { Accordion, AccordionItem } from "../../atoms/accordion";
3
- import { FaqSection } from ".";
4
-
5
- const meta = {
6
- title: "Sections/FaqSection",
7
- component: FaqSection,
8
- parameters: {
9
- layout: "fullscreen",
10
- },
11
- argTypes: {
12
- colorScheme: {
13
- control: "select",
14
- options: ["dark", "light"],
15
- description: "Color scheme",
16
- },
17
- title: {
18
- control: "text",
19
- description: "The title text displayed in the left column",
20
- },
21
- },
22
- } satisfies Meta<typeof FaqSection>;
23
-
24
- export default meta;
25
- type Story = StoryObj<typeof FaqSection>;
26
-
27
- // =============================================================================
28
- // Playground
29
- // =============================================================================
30
-
31
- export const Playground: Story = {
32
- render: (args) => (
33
- <FaqSection {...args}>
34
- <Accordion defaultExpanded="faq-1">
35
- <AccordionItem
36
- id="faq-1"
37
- title="What is the US Tech Force (Tech Force)?"
38
- >
39
- Tech Force will be an elite group of ~1,000 technology specialists
40
- hired by agencies to accelerate artificial intelligence (AI)
41
- implementation and solve the federal government's most critical
42
- technological challenges.
43
- </AccordionItem>
44
- <AccordionItem
45
- id="faq-2"
46
- title="What are the key steps in the recruiting process?"
47
- >
48
- The recruiting process includes an initial application, technical
49
- assessment, interviews with agency leadership, and a background check.
50
- Selected candidates will receive an offer within 4-6 weeks of
51
- completing all steps.
52
- </AccordionItem>
53
- <AccordionItem id="faq-3" title="What skills are required?">
54
- We're looking for expertise in software engineering, artificial
55
- intelligence, cybersecurity, data analytics, or technical project
56
- management. Strong problem-solving abilities and a passion for public
57
- service are essential.
58
- </AccordionItem>
59
- </Accordion>
60
- </FaqSection>
61
- ),
62
- };
63
- Playground.args = {
64
- colorScheme: "light",
65
- title: "Frequently Asked Questions",
66
- };
67
-
68
- // =============================================================================
69
- // Default
70
- // =============================================================================
71
-
72
- export const Default: Story = {
73
- render: () => (
74
- <FaqSection>
75
- <Accordion defaultExpanded="faq-1">
76
- <AccordionItem
77
- id="faq-1"
78
- title="What is the US Tech Force (Tech Force)?"
79
- >
80
- Tech Force will be an elite group of ~1,000 technology specialists
81
- hired by agencies to accelerate artificial intelligence (AI)
82
- implementation and solve the federal government's most critical
83
- technological challenges. Tech Force will primarily recruit
84
- early-career technologists from traditional recruiting channels, along
85
- with experienced engineering managers from private sector partners, to
86
- serve two-year employment terms in the federal government.
87
- </AccordionItem>
88
- <AccordionItem
89
- id="faq-2"
90
- title="What are the key steps in the recruiting process?"
91
- >
92
- The recruiting process includes an initial application, technical
93
- assessment, interviews with agency leadership, and a background check.
94
- Selected candidates will receive an offer within 4-6 weeks of
95
- completing all steps.
96
- </AccordionItem>
97
- <AccordionItem id="faq-3" title="What skills are required?">
98
- We're looking for expertise in software engineering, artificial
99
- intelligence, cybersecurity, data analytics, or technical project
100
- management. Strong problem-solving abilities and a passion for public
101
- service are essential.
102
- </AccordionItem>
103
- </Accordion>
104
- </FaqSection>
105
- ),
106
- };
107
-
108
- // =============================================================================
109
- // Variants
110
- // =============================================================================
111
-
112
- /**
113
- * Dark variant - dark background with light text
114
- */
115
- export const DarkVariant: Story = {
116
- render: () => (
117
- <FaqSection colorScheme="dark">
118
- <Accordion colorScheme="dark" defaultExpanded="faq-1">
119
- <AccordionItem
120
- id="faq-1"
121
- title="What is the US Tech Force (Tech Force)?"
122
- >
123
- Tech Force will be an elite group of ~1,000 technology specialists
124
- hired by agencies to accelerate artificial intelligence (AI)
125
- implementation and solve the federal government's most critical
126
- technological challenges.
127
- </AccordionItem>
128
- <AccordionItem
129
- id="faq-2"
130
- title="What are the key steps in the recruiting process?"
131
- >
132
- The recruiting process includes an initial application, technical
133
- assessment, interviews with agency leadership, and a background check.
134
- </AccordionItem>
135
- <AccordionItem id="faq-3" title="What skills are required?">
136
- We're looking for expertise in software engineering, artificial
137
- intelligence, cybersecurity, data analytics, or technical project
138
- management.
139
- </AccordionItem>
140
- </Accordion>
141
- </FaqSection>
142
- ),
143
- };
144
-
145
- /**
146
- * Light variant - light background with dark text
147
- */
148
- export const LightVariant: Story = {
149
- render: () => (
150
- <FaqSection colorScheme="light">
151
- <Accordion defaultExpanded="faq-1">
152
- <AccordionItem
153
- id="faq-1"
154
- title="What is the US Tech Force (Tech Force)?"
155
- >
156
- Tech Force will be an elite group of ~1,000 technology specialists
157
- hired by agencies to accelerate artificial intelligence (AI)
158
- implementation and solve the federal government's most critical
159
- technological challenges.
160
- </AccordionItem>
161
- <AccordionItem
162
- id="faq-2"
163
- title="What are the key steps in the recruiting process?"
164
- >
165
- The recruiting process includes an initial application, technical
166
- assessment, interviews with agency leadership, and a background check.
167
- </AccordionItem>
168
- <AccordionItem id="faq-3" title="What skills are required?">
169
- We're looking for expertise in software engineering, artificial
170
- intelligence, cybersecurity, data analytics, or technical project
171
- management.
172
- </AccordionItem>
173
- </Accordion>
174
- </FaqSection>
175
- ),
176
- };
177
-
178
- // =============================================================================
179
- // Responsive Variants
180
- // =============================================================================
181
-
182
- export const Desktop: Story = {
183
- render: () => (
184
- <FaqSection>
185
- <Accordion defaultExpanded="faq-1">
186
- <AccordionItem
187
- id="faq-1"
188
- title="What is the US Tech Force (Tech Force)?"
189
- >
190
- Tech Force will be an elite group of ~1,000 technology specialists
191
- hired by agencies to accelerate artificial intelligence (AI)
192
- implementation and solve the federal government's most critical
193
- technological challenges. Tech Force will primarily recruit
194
- early-career technologists from traditional recruiting channels, along
195
- with experienced engineering managers from private sector partners, to
196
- serve two-year employment terms in the federal government.
197
- </AccordionItem>
198
- <AccordionItem
199
- id="faq-2"
200
- title="What are the key steps in the recruiting process?"
201
- >
202
- The recruiting process includes an initial application, technical
203
- assessment, interviews with agency leadership, and a background check.
204
- Selected candidates will receive an offer within 4-6 weeks of
205
- completing all steps.
206
- </AccordionItem>
207
- <AccordionItem id="faq-3" title="What skills are required?">
208
- We're looking for expertise in software engineering, artificial
209
- intelligence, cybersecurity, data analytics, or technical project
210
- management. Strong problem-solving abilities and a passion for public
211
- service are essential.
212
- </AccordionItem>
213
- </Accordion>
214
- </FaqSection>
215
- ),
216
- globals: {
217
- viewport: { value: "lg", isRotated: false },
218
- },
219
- };
220
-
221
- export const Tablet: Story = {
222
- render: () => (
223
- <FaqSection>
224
- <Accordion defaultExpanded="faq-1">
225
- <AccordionItem
226
- id="faq-1"
227
- title="What is the US Tech Force (Tech Force)?"
228
- >
229
- Tech Force will be an elite group of ~1,000 technology specialists
230
- hired by agencies to accelerate artificial intelligence (AI)
231
- implementation and solve the federal government's most critical
232
- technological challenges.
233
- </AccordionItem>
234
- <AccordionItem
235
- id="faq-2"
236
- title="What are the key steps in the recruiting process?"
237
- >
238
- The recruiting process includes an initial application, technical
239
- assessment, interviews with agency leadership, and a background check.
240
- </AccordionItem>
241
- <AccordionItem id="faq-3" title="What skills are required?">
242
- We're looking for expertise in software engineering, artificial
243
- intelligence, cybersecurity, data analytics, or technical project
244
- management.
245
- </AccordionItem>
246
- </Accordion>
247
- </FaqSection>
248
- ),
249
- globals: {
250
- viewport: { value: "md", isRotated: false },
251
- },
252
- };
253
-
254
- export const Mobile: Story = {
255
- render: () => (
256
- <FaqSection>
257
- <Accordion defaultExpanded="faq-1">
258
- <AccordionItem
259
- id="faq-1"
260
- title="What is the US Tech Force (Tech Force)?"
261
- >
262
- Tech Force will be an elite group of ~1,000 technology specialists
263
- hired by agencies to accelerate artificial intelligence (AI)
264
- implementation and solve the federal government's most critical
265
- technological challenges.
266
- </AccordionItem>
267
- <AccordionItem
268
- id="faq-2"
269
- title="What are the key steps in the recruiting process?"
270
- >
271
- The recruiting process includes an initial application, technical
272
- assessment, interviews with agency leadership, and a background check.
273
- </AccordionItem>
274
- <AccordionItem id="faq-3" title="What skills are required?">
275
- We're looking for expertise in software engineering, artificial
276
- intelligence, cybersecurity, data analytics, or technical project
277
- management.
278
- </AccordionItem>
279
- </Accordion>
280
- </FaqSection>
281
- ),
282
- globals: {
283
- viewport: { value: "sm", isRotated: false },
284
- },
285
- };
286
-
287
- // =============================================================================
288
- // Content Variations
289
- // =============================================================================
290
-
291
- /**
292
- * With custom title
293
- */
294
- export const CustomTitle: Story = {
295
- render: () => (
296
- <FaqSection title="Common Questions">
297
- <Accordion defaultExpanded="faq-1">
298
- <AccordionItem
299
- id="faq-1"
300
- title="What is the US Tech Force (Tech Force)?"
301
- >
302
- Tech Force will be an elite group of ~1,000 technology specialists
303
- hired by agencies to accelerate artificial intelligence (AI)
304
- implementation and solve the federal government's most critical
305
- technological challenges.
306
- </AccordionItem>
307
- <AccordionItem
308
- id="faq-2"
309
- title="What are the key steps in the recruiting process?"
310
- >
311
- The recruiting process includes an initial application, technical
312
- assessment, interviews with agency leadership, and a background check.
313
- </AccordionItem>
314
- </Accordion>
315
- </FaqSection>
316
- ),
317
- };
318
-
319
- /**
320
- * Full FAQ example with all questions
321
- */
322
- export const FullFAQ: Story = {
323
- render: () => (
324
- <FaqSection>
325
- <Accordion defaultExpanded="faq-1">
326
- <AccordionItem
327
- id="faq-1"
328
- title="What is the US Tech Force (Tech Force)?"
329
- >
330
- Tech Force will be an elite group of ~1,000 technology specialists
331
- hired by agencies to accelerate artificial intelligence (AI)
332
- implementation and solve the federal government's most critical
333
- technological challenges. Tech Force will primarily recruit
334
- early-career technologists from traditional recruiting channels, along
335
- with experienced engineering managers from private sector partners, to
336
- serve two-year employment terms in the federal government. Tech Force
337
- will include centralized organization and programming and serve as a
338
- recruiting platform post-employment.
339
- </AccordionItem>
340
- <AccordionItem
341
- id="faq-2"
342
- title="What are the key steps in the recruiting process?"
343
- >
344
- The recruiting process includes an initial application, technical
345
- assessment, interviews with agency leadership, and a background check.
346
- Selected candidates will receive an offer within 4-6 weeks of
347
- completing all steps.
348
- </AccordionItem>
349
- <AccordionItem id="faq-3" title="What skills are required?">
350
- We're looking for expertise in software engineering, artificial
351
- intelligence, cybersecurity, data analytics, or technical project
352
- management. Strong problem-solving abilities and a passion for public
353
- service are essential.
354
- </AccordionItem>
355
- <AccordionItem
356
- id="faq-4"
357
- title="Are specific educational credentials required to participate?"
358
- >
359
- While we value diverse educational backgrounds, candidates should
360
- demonstrate strong technical skills through their work experience,
361
- projects, or certifications. A traditional degree is not strictly
362
- required.
363
- </AccordionItem>
364
- <AccordionItem
365
- id="faq-5"
366
- title="Is there a minimum experience level required to apply?"
367
- >
368
- We welcome applications from early-career technologists with 1-3 years
369
- of experience as well as experienced professionals. What matters most
370
- is your ability to contribute to critical government technology
371
- challenges.
372
- </AccordionItem>
373
- <AccordionItem id="faq-6" title="Is this a political appointment?">
374
- No, Tech Force positions are not political appointments. Participants
375
- are hired as federal employees based on their technical qualifications
376
- and serve in non-partisan roles focused on technology implementation.
377
- </AccordionItem>
378
- <AccordionItem id="faq-7" title="When am I expected to start?">
379
- Start dates vary by cohort. Most participants begin within 2-3 months
380
- of receiving their offer, pending completion of background checks and
381
- onboarding requirements.
382
- </AccordionItem>
383
- <AccordionItem id="faq-8" title="Where will the employment be located?">
384
- Positions are primarily based in Washington, D.C., though some roles
385
- may be available at agency locations across the country. Remote work
386
- options vary by agency and role.
387
- </AccordionItem>
388
- </Accordion>
389
- </FaqSection>
390
- ),
391
- };
392
-
393
- /**
394
- * Short FAQ example with minimal questions
395
- */
396
- export const ShortFAQ: Story = {
397
- render: () => (
398
- <FaqSection>
399
- <Accordion>
400
- <AccordionItem
401
- id="faq-1"
402
- title="What is the US Tech Force (Tech Force)?"
403
- >
404
- Tech Force will be an elite group of ~1,000 technology specialists
405
- hired by agencies to accelerate artificial intelligence (AI)
406
- implementation and solve the federal government's most critical
407
- technological challenges.
408
- </AccordionItem>
409
- <AccordionItem id="faq-2" title="What skills are required?">
410
- We're looking for expertise in software engineering, artificial
411
- intelligence, cybersecurity, data analytics, or technical project
412
- management.
413
- </AccordionItem>
414
- </Accordion>
415
- </FaqSection>
416
- ),
417
- };
418
-
419
- /**
420
- * With allowMultiple accordion - allows multiple items to be expanded at once
421
- */
422
- export const AllowMultiple: Story = {
423
- render: () => (
424
- <FaqSection>
425
- <Accordion allowMultiple defaultExpanded={["faq-1", "faq-2"]}>
426
- <AccordionItem
427
- id="faq-1"
428
- title="What is the US Tech Force (Tech Force)?"
429
- >
430
- Tech Force will be an elite group of ~1,000 technology specialists
431
- hired by agencies to accelerate artificial intelligence (AI)
432
- implementation and solve the federal government's most critical
433
- technological challenges.
434
- </AccordionItem>
435
- <AccordionItem
436
- id="faq-2"
437
- title="What are the key steps in the recruiting process?"
438
- >
439
- The recruiting process includes an initial application, technical
440
- assessment, interviews with agency leadership, and a background check.
441
- Selected candidates will receive an offer within 4-6 weeks of
442
- completing all steps.
443
- </AccordionItem>
444
- <AccordionItem id="faq-3" title="What skills are required?">
445
- We're looking for expertise in software engineering, artificial
446
- intelligence, cybersecurity, data analytics, or technical project
447
- management. Strong problem-solving abilities and a passion for public
448
- service are essential.
449
- </AccordionItem>
450
- </Accordion>
451
- </FaqSection>
452
- ),
453
- };
@@ -1,2 +0,0 @@
1
- export type { FaqSectionProps } from "./faq-section";
2
- export { FaqSection } from "./faq-section";