@ogds/elements 1.0.0-alpha.6

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 (330) hide show
  1. package/.storybook/UswdsTheme.js +11 -0
  2. package/.storybook/blocks/SiteNote.jsx +5 -0
  3. package/.storybook/main.js +38 -0
  4. package/.storybook/manager.js +6 -0
  5. package/.storybook/preview.js +37 -0
  6. package/.storybook/test-runner.js +23 -0
  7. package/README.md +201 -0
  8. package/build/css/breakpoints.css +15 -0
  9. package/build/css/colors.css +490 -0
  10. package/build/css/spacing.css +16 -0
  11. package/build/scss/_breakpoints.scss +12 -0
  12. package/build/scss/_colors.scss +487 -0
  13. package/build/scss/_spacing.scss +13 -0
  14. package/dist/components/frameworks/react/OgdsAccordion.d.ts +69 -0
  15. package/dist/components/frameworks/react/OgdsAccordion.js +22 -0
  16. package/dist/components/frameworks/react/OgdsAccordionToggle.d.ts +60 -0
  17. package/dist/components/frameworks/react/OgdsAccordionToggle.js +23 -0
  18. package/dist/components/frameworks/react/UsaBanner.d.ts +82 -0
  19. package/dist/components/frameworks/react/UsaBanner.js +25 -0
  20. package/dist/components/frameworks/react/UsaLink.d.ts +60 -0
  21. package/dist/components/frameworks/react/UsaLink.js +21 -0
  22. package/dist/components/frameworks/react/index.d.ts +4 -0
  23. package/dist/components/frameworks/react/index.js +4 -0
  24. package/dist/components/frameworks/react/react-utils.js +34 -0
  25. package/dist/components/index.cjs +1 -0
  26. package/dist/components/index.cjs.map +1 -0
  27. package/dist/components/index.d.ts +3 -0
  28. package/dist/components/index.js +6 -0
  29. package/dist/components/index.js.map +1 -0
  30. package/dist/components/usa-banner/index.d.ts +82 -0
  31. package/dist/components/usa-banner/usa-banner.spec.d.ts +0 -0
  32. package/dist/components/usa-banner/usa-banner.stories.d.ts +95 -0
  33. package/dist/components/usa-banner.cjs +95 -0
  34. package/dist/components/usa-banner.cjs.map +1 -0
  35. package/dist/components/usa-banner.js +189 -0
  36. package/dist/components/usa-banner.js.map +1 -0
  37. package/dist/components/usa-header/index.d.ts +6 -0
  38. package/dist/components/usa-link/index.d.ts +30 -0
  39. package/dist/components/usa-link/usa-link.spec.d.ts +0 -0
  40. package/dist/components/usa-link.cjs +5 -0
  41. package/dist/components/usa-link.cjs.map +1 -0
  42. package/dist/components/usa-link.js +32 -0
  43. package/dist/components/usa-link.js.map +1 -0
  44. package/dist/core/OgdsElement.d.ts +3 -0
  45. package/dist/index-7kIMQwBw.cjs +1 -0
  46. package/dist/index-7kIMQwBw.cjs.map +1 -0
  47. package/dist/index-BrHk1-6T.js +10 -0
  48. package/dist/index-BrHk1-6T.js.map +1 -0
  49. package/dist/types/custom-element-jsx.d.ts +175 -0
  50. package/dist/types/custom-element-solidjs.d.ts +185 -0
  51. package/dist/types/custom-element-svelte.d.ts +157 -0
  52. package/dist/types/custom-element-vuejs.d.ts +127 -0
  53. package/dist/utils/index.d.ts +1 -0
  54. package/dist/utils/index.test.d.ts +1 -0
  55. package/package.json +119 -0
  56. package/src/components/index.ts +5 -0
  57. package/src/components/ogds-accordion/.claude/settings.local.json +7 -0
  58. package/src/components/ogds-accordion/docs.mdx +90 -0
  59. package/src/components/ogds-accordion/index.ts +132 -0
  60. package/src/components/ogds-accordion/ogds-accordion.css +99 -0
  61. package/src/components/ogds-accordion/ogds-accordion.spec.ts +175 -0
  62. package/src/components/ogds-accordion/ogds-accordion.stories.ts +77 -0
  63. package/src/components/ogds-accordion-toggle/index.ts +80 -0
  64. package/src/components/usa-banner/docs.mdx +108 -0
  65. package/src/components/usa-banner/index.ts +290 -0
  66. package/src/components/usa-banner/usa-banner.css +511 -0
  67. package/src/components/usa-banner/usa-banner.spec.ts +76 -0
  68. package/src/components/usa-banner/usa-banner.stories.ts +136 -0
  69. package/src/components/usa-header/index.ts +50 -0
  70. package/src/components/usa-header/usa-header.css +1 -0
  71. package/src/components/usa-link/index.ts +66 -0
  72. package/src/components/usa-link/usa-link.css +24 -0
  73. package/src/components/usa-link/usa-link.spec.ts +50 -0
  74. package/src/core/colors.css +8 -0
  75. package/src/core/fonts.css +213 -0
  76. package/src/core/index.css +2 -0
  77. package/src/core/token-styles.ts +26 -0
  78. package/src/declaration.d.ts +75 -0
  79. package/src/shared/icons/accessibility_new.svg +1 -0
  80. package/src/shared/icons/accessible_forward.svg +1 -0
  81. package/src/shared/icons/account_balance.svg +1 -0
  82. package/src/shared/icons/account_box.svg +1 -0
  83. package/src/shared/icons/account_circle.svg +1 -0
  84. package/src/shared/icons/add.svg +1 -0
  85. package/src/shared/icons/add_circle.svg +1 -0
  86. package/src/shared/icons/add_circle_outline.svg +1 -0
  87. package/src/shared/icons/alarm.svg +1 -0
  88. package/src/shared/icons/alternate_email.svg +1 -0
  89. package/src/shared/icons/announcement.svg +1 -0
  90. package/src/shared/icons/api.svg +1 -0
  91. package/src/shared/icons/arrow_back.svg +1 -0
  92. package/src/shared/icons/arrow_downward.svg +1 -0
  93. package/src/shared/icons/arrow_drop_down.svg +1 -0
  94. package/src/shared/icons/arrow_drop_up.svg +1 -0
  95. package/src/shared/icons/arrow_forward.svg +1 -0
  96. package/src/shared/icons/arrow_upward.svg +1 -0
  97. package/src/shared/icons/assessment.svg +1 -0
  98. package/src/shared/icons/attach_file.svg +1 -0
  99. package/src/shared/icons/attach_money.svg +1 -0
  100. package/src/shared/icons/autorenew.svg +1 -0
  101. package/src/shared/icons/backpack.svg +1 -0
  102. package/src/shared/icons/bathtub.svg +1 -0
  103. package/src/shared/icons/bedding.svg +1 -0
  104. package/src/shared/icons/bookmark.svg +1 -0
  105. package/src/shared/icons/bug_report.svg +1 -0
  106. package/src/shared/icons/build.svg +1 -0
  107. package/src/shared/icons/calendar_today.svg +1 -0
  108. package/src/shared/icons/campaign.svg +1 -0
  109. package/src/shared/icons/camping.svg +1 -0
  110. package/src/shared/icons/cancel.svg +1 -0
  111. package/src/shared/icons/chat.svg +1 -0
  112. package/src/shared/icons/check.svg +1 -0
  113. package/src/shared/icons/check_box_outline_blank.svg +1 -0
  114. package/src/shared/icons/check_circle.svg +1 -0
  115. package/src/shared/icons/check_circle_outline.svg +1 -0
  116. package/src/shared/icons/checkroom.svg +1 -0
  117. package/src/shared/icons/chevron_left.svg +1 -0
  118. package/src/shared/icons/chevron_right.svg +1 -0
  119. package/src/shared/icons/clean_hands.svg +1 -0
  120. package/src/shared/icons/close.svg +1 -0
  121. package/src/shared/icons/closed_caption.svg +1 -0
  122. package/src/shared/icons/clothes.svg +1 -0
  123. package/src/shared/icons/cloud.svg +1 -0
  124. package/src/shared/icons/code.svg +1 -0
  125. package/src/shared/icons/comment.svg +1 -0
  126. package/src/shared/icons/connect_without_contact.svg +1 -0
  127. package/src/shared/icons/construction.svg +1 -0
  128. package/src/shared/icons/construction_worker.svg +1 -0
  129. package/src/shared/icons/contact_page.svg +1 -0
  130. package/src/shared/icons/content_copy.svg +1 -0
  131. package/src/shared/icons/coronavirus.svg +1 -0
  132. package/src/shared/icons/credit_card.svg +1 -0
  133. package/src/shared/icons/deck.svg +1 -0
  134. package/src/shared/icons/delete.svg +1 -0
  135. package/src/shared/icons/device_thermostat.svg +1 -0
  136. package/src/shared/icons/directions.svg +1 -0
  137. package/src/shared/icons/directions_bike.svg +1 -0
  138. package/src/shared/icons/directions_bus.svg +1 -0
  139. package/src/shared/icons/directions_car.svg +1 -0
  140. package/src/shared/icons/directions_walk.svg +1 -0
  141. package/src/shared/icons/do_not_disturb.svg +1 -0
  142. package/src/shared/icons/do_not_touch.svg +1 -0
  143. package/src/shared/icons/drag_handle.svg +1 -0
  144. package/src/shared/icons/eco.svg +1 -0
  145. package/src/shared/icons/edit.svg +1 -0
  146. package/src/shared/icons/electrical_services.svg +1 -0
  147. package/src/shared/icons/emoji_events.svg +1 -0
  148. package/src/shared/icons/error.svg +1 -0
  149. package/src/shared/icons/error_outline.svg +1 -0
  150. package/src/shared/icons/event.svg +1 -0
  151. package/src/shared/icons/expand_less.svg +1 -0
  152. package/src/shared/icons/expand_more.svg +1 -0
  153. package/src/shared/icons/facebook.svg +1 -0
  154. package/src/shared/icons/fast_forward.svg +1 -0
  155. package/src/shared/icons/fast_rewind.svg +1 -0
  156. package/src/shared/icons/favorite.svg +1 -0
  157. package/src/shared/icons/favorite_border.svg +1 -0
  158. package/src/shared/icons/fax.svg +1 -0
  159. package/src/shared/icons/file_download.svg +1 -0
  160. package/src/shared/icons/file_present.svg +1 -0
  161. package/src/shared/icons/file_upload.svg +1 -0
  162. package/src/shared/icons/filter_alt.svg +1 -0
  163. package/src/shared/icons/filter_list.svg +1 -0
  164. package/src/shared/icons/fingerprint.svg +1 -0
  165. package/src/shared/icons/first_page.svg +1 -0
  166. package/src/shared/icons/flag.svg +1 -0
  167. package/src/shared/icons/flickr.svg +1 -0
  168. package/src/shared/icons/flight.svg +1 -0
  169. package/src/shared/icons/flooding.svg +1 -0
  170. package/src/shared/icons/folder.svg +1 -0
  171. package/src/shared/icons/folder_open.svg +1 -0
  172. package/src/shared/icons/format_quote.svg +1 -0
  173. package/src/shared/icons/format_size.svg +1 -0
  174. package/src/shared/icons/forum.svg +1 -0
  175. package/src/shared/icons/github.svg +1 -0
  176. package/src/shared/icons/grid_view.svg +1 -0
  177. package/src/shared/icons/group_add.svg +1 -0
  178. package/src/shared/icons/groups.svg +1 -0
  179. package/src/shared/icons/hearing.svg +1 -0
  180. package/src/shared/icons/help.svg +1 -0
  181. package/src/shared/icons/help_outline.svg +1 -0
  182. package/src/shared/icons/highlight_off.svg +1 -0
  183. package/src/shared/icons/history.svg +1 -0
  184. package/src/shared/icons/home.svg +1 -0
  185. package/src/shared/icons/hospital.svg +1 -0
  186. package/src/shared/icons/hotel.svg +1 -0
  187. package/src/shared/icons/hourglass_empty.svg +1 -0
  188. package/src/shared/icons/hurricane.svg +1 -0
  189. package/src/shared/icons/identification.svg +1 -0
  190. package/src/shared/icons/image.svg +1 -0
  191. package/src/shared/icons/info.svg +1 -0
  192. package/src/shared/icons/info_outline.svg +1 -0
  193. package/src/shared/icons/insights.svg +1 -0
  194. package/src/shared/icons/instagram.svg +1 -0
  195. package/src/shared/icons/keyboard.svg +1 -0
  196. package/src/shared/icons/label.svg +1 -0
  197. package/src/shared/icons/language.svg +1 -0
  198. package/src/shared/icons/last_page.svg +1 -0
  199. package/src/shared/icons/launch.svg +1 -0
  200. package/src/shared/icons/lightbulb.svg +1 -0
  201. package/src/shared/icons/lightbulb_outline.svg +1 -0
  202. package/src/shared/icons/link.svg +1 -0
  203. package/src/shared/icons/link_off.svg +1 -0
  204. package/src/shared/icons/linkedin.svg +1 -0
  205. package/src/shared/icons/list.svg +1 -0
  206. package/src/shared/icons/local_cafe.svg +1 -0
  207. package/src/shared/icons/local_fire_department.svg +1 -0
  208. package/src/shared/icons/local_gas_station.svg +1 -0
  209. package/src/shared/icons/local_grocery_store.svg +1 -0
  210. package/src/shared/icons/local_hospital.svg +1 -0
  211. package/src/shared/icons/local_laundry_service.svg +1 -0
  212. package/src/shared/icons/local_library.svg +1 -0
  213. package/src/shared/icons/local_offer.svg +1 -0
  214. package/src/shared/icons/local_parking.svg +1 -0
  215. package/src/shared/icons/local_pharmacy.svg +1 -0
  216. package/src/shared/icons/local_police.svg +1 -0
  217. package/src/shared/icons/local_taxi.svg +1 -0
  218. package/src/shared/icons/location_city.svg +1 -0
  219. package/src/shared/icons/location_on.svg +1 -0
  220. package/src/shared/icons/lock.svg +1 -0
  221. package/src/shared/icons/lock_open.svg +1 -0
  222. package/src/shared/icons/lock_outline.svg +1 -0
  223. package/src/shared/icons/login.svg +1 -0
  224. package/src/shared/icons/logout.svg +1 -0
  225. package/src/shared/icons/loop.svg +1 -0
  226. package/src/shared/icons/mail.svg +1 -0
  227. package/src/shared/icons/mail_outline.svg +1 -0
  228. package/src/shared/icons/map.svg +1 -0
  229. package/src/shared/icons/masks.svg +1 -0
  230. package/src/shared/icons/medical_services.svg +1 -0
  231. package/src/shared/icons/menu.svg +1 -0
  232. package/src/shared/icons/military_tech.svg +1 -0
  233. package/src/shared/icons/more_horiz.svg +1 -0
  234. package/src/shared/icons/more_vert.svg +1 -0
  235. package/src/shared/icons/my_location.svg +1 -0
  236. package/src/shared/icons/navigate_before.svg +1 -0
  237. package/src/shared/icons/navigate_far_before.svg +1 -0
  238. package/src/shared/icons/navigate_far_next.svg +1 -0
  239. package/src/shared/icons/navigate_next.svg +1 -0
  240. package/src/shared/icons/near_me.svg +1 -0
  241. package/src/shared/icons/notifications.svg +1 -0
  242. package/src/shared/icons/notifications_active.svg +1 -0
  243. package/src/shared/icons/notifications_none.svg +1 -0
  244. package/src/shared/icons/notifications_off.svg +1 -0
  245. package/src/shared/icons/park.svg +1 -0
  246. package/src/shared/icons/people.svg +1 -0
  247. package/src/shared/icons/person.svg +1 -0
  248. package/src/shared/icons/pets.svg +1 -0
  249. package/src/shared/icons/phone.svg +1 -0
  250. package/src/shared/icons/photo_camera.svg +1 -0
  251. package/src/shared/icons/print.svg +1 -0
  252. package/src/shared/icons/priority_high.svg +1 -0
  253. package/src/shared/icons/public.svg +1 -0
  254. package/src/shared/icons/push_pin.svg +1 -0
  255. package/src/shared/icons/radio_button_unchecked.svg +1 -0
  256. package/src/shared/icons/rain.svg +1 -0
  257. package/src/shared/icons/reduce_capacity.svg +1 -0
  258. package/src/shared/icons/remove.svg +1 -0
  259. package/src/shared/icons/remove_circle.svg +1 -0
  260. package/src/shared/icons/report.svg +1 -0
  261. package/src/shared/icons/restaurant.svg +1 -0
  262. package/src/shared/icons/rss_feed.svg +1 -0
  263. package/src/shared/icons/safety_divider.svg +1 -0
  264. package/src/shared/icons/sanitizer.svg +1 -0
  265. package/src/shared/icons/save_alt.svg +1 -0
  266. package/src/shared/icons/schedule.svg +1 -0
  267. package/src/shared/icons/school.svg +1 -0
  268. package/src/shared/icons/science.svg +1 -0
  269. package/src/shared/icons/search.svg +1 -0
  270. package/src/shared/icons/security.svg +1 -0
  271. package/src/shared/icons/send.svg +1 -0
  272. package/src/shared/icons/sentiment_dissatisfied.svg +1 -0
  273. package/src/shared/icons/sentiment_neutral.svg +1 -0
  274. package/src/shared/icons/sentiment_satisfied.svg +1 -0
  275. package/src/shared/icons/sentiment_satisfied_alt.svg +1 -0
  276. package/src/shared/icons/sentiment_very_dissatisfied.svg +1 -0
  277. package/src/shared/icons/settings.svg +1 -0
  278. package/src/shared/icons/severe_weather.svg +1 -0
  279. package/src/shared/icons/share.svg +1 -0
  280. package/src/shared/icons/shield.svg +1 -0
  281. package/src/shared/icons/shopping_basket.svg +1 -0
  282. package/src/shared/icons/snow.svg +1 -0
  283. package/src/shared/icons/soap.svg +1 -0
  284. package/src/shared/icons/social_distance.svg +1 -0
  285. package/src/shared/icons/sort_arrow.svg +1 -0
  286. package/src/shared/icons/spellcheck.svg +1 -0
  287. package/src/shared/icons/star.svg +1 -0
  288. package/src/shared/icons/star_half.svg +1 -0
  289. package/src/shared/icons/star_outline.svg +1 -0
  290. package/src/shared/icons/store.svg +1 -0
  291. package/src/shared/icons/support.svg +1 -0
  292. package/src/shared/icons/support_agent.svg +1 -0
  293. package/src/shared/icons/text_fields.svg +1 -0
  294. package/src/shared/icons/thumb_down_alt.svg +1 -0
  295. package/src/shared/icons/thumb_up_alt.svg +1 -0
  296. package/src/shared/icons/timer.svg +1 -0
  297. package/src/shared/icons/toggle_off.svg +1 -0
  298. package/src/shared/icons/toggle_on.svg +1 -0
  299. package/src/shared/icons/topic.svg +1 -0
  300. package/src/shared/icons/tornado.svg +1 -0
  301. package/src/shared/icons/translate.svg +1 -0
  302. package/src/shared/icons/trending_down.svg +1 -0
  303. package/src/shared/icons/trending_up.svg +1 -0
  304. package/src/shared/icons/twitter.svg +1 -0
  305. package/src/shared/icons/undo.svg +1 -0
  306. package/src/shared/icons/unfold_less.svg +1 -0
  307. package/src/shared/icons/unfold_more.svg +1 -0
  308. package/src/shared/icons/update.svg +1 -0
  309. package/src/shared/icons/upload_file.svg +1 -0
  310. package/src/shared/icons/verified.svg +1 -0
  311. package/src/shared/icons/verified_user.svg +1 -0
  312. package/src/shared/icons/visibility.svg +1 -0
  313. package/src/shared/icons/visibility_off.svg +1 -0
  314. package/src/shared/icons/volume_off.svg +1 -0
  315. package/src/shared/icons/warning.svg +1 -0
  316. package/src/shared/icons/wash.svg +1 -0
  317. package/src/shared/icons/wifi.svg +1 -0
  318. package/src/shared/icons/work.svg +1 -0
  319. package/src/shared/icons/x.svg +1 -0
  320. package/src/shared/icons/youtube.svg +1 -0
  321. package/src/shared/icons/zoom_in.svg +1 -0
  322. package/src/shared/icons/zoom_out.svg +1 -0
  323. package/src/shared/icons/zoom_out_map.svg +1 -0
  324. package/src/utils/index.test.ts +34 -0
  325. package/src/utils/index.ts +8 -0
  326. package/src/vite-env.d.ts +17 -0
  327. package/storybook/contributing.mdx +115 -0
  328. package/storybook/framework-guidance.mdx +96 -0
  329. package/storybook/index.css +70 -0
  330. package/storybook/readme.mdx +6 -0
package/storybook/index.css ADDED
@@ -0,0 +1,70 @@
1
+ :root {
2
+ background-color: var(--usa-color-white);
3
+ color: var(--usa-color-gray-90);
4
+ color-scheme: light dark;
5
+ font-family:
6
+ "Public Sans Web",
7
+ -apple-system,
8
+ BlinkMacSystemFont,
9
+ "Segoe UI",
10
+ Roboto,
11
+ Helvetica,
12
+ Arial,
13
+ sans-serif,
14
+ "Apple Color Emoji",
15
+ "Segoe UI Emoji",
16
+ "Segoe UI Symbol";
17
+ -webkit-font-smoothing: antialiased;
18
+ -moz-osx-font-smoothing: grayscale;
19
+ font-synthesis: none;
20
+ font-weight: 400;
21
+ line-height: 1.5;
22
+ text-rendering: optimizeLegibility;
23
+ }
24
+
25
+ @media (prefers-color-scheme: light) {
26
+ :root {
27
+ background-color: var(--usa-color-white);
28
+ color: var(--usa-color-gray-90);
29
+ }
30
+ }
31
+
32
+ #storybook-docs {
33
+ .toc-list-item {
34
+ font-size: 0.875rem;
35
+ margin-block-end: 0.5rem;
36
+ margin-inline-start: 0.75rem;
37
+ padding-inline: 0.5rem;
38
+
39
+ &::before {
40
+ transform: translateX(calc(-0.875rem));
41
+ }
42
+ }
43
+
44
+ pre,
45
+ code {
46
+ font-size: initial;
47
+ }
48
+
49
+ :where(p:not(.sb-anchor, .sb-unstyled, .sb-unstyled p)),
50
+ :where(li:not(.sb-anchor, .sb-unstyled, .sb-unstyled li)) {
51
+ font-size: 1rem;
52
+ line-height: 1.5;
53
+ max-width: 80ch;
54
+ }
55
+
56
+ :where(a:not(.sb-anchor, .sb-unstyled, .sb-unstyled a, .toc-link)) {
57
+ text-decoration: underline;
58
+ }
59
+
60
+ .site-note {
61
+ background-color: var(--usa-color-blue-10);
62
+ margin-block-end: 1rem;
63
+ max-width: 80ch;
64
+ padding: 0.75rem;
65
+ }
66
+
67
+ .site-note p {
68
+ margin: 0;
69
+ }
70
+ }
package/storybook/readme.mdx ADDED
@@ -0,0 +1,6 @@
1
+ import { Meta, Markdown } from "@storybook/addon-docs/blocks";
2
+ import Readme from "../README.md?raw";
3
+
4
+ <Meta title="README" />
5
+
6
+ <Markdown>{Readme}</Markdown>