@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.
- package/.storybook/UswdsTheme.js +11 -0
- package/.storybook/blocks/SiteNote.jsx +5 -0
- package/.storybook/main.js +38 -0
- package/.storybook/manager.js +6 -0
- package/.storybook/preview.js +37 -0
- package/.storybook/test-runner.js +23 -0
- package/README.md +201 -0
- package/build/css/breakpoints.css +15 -0
- package/build/css/colors.css +490 -0
- package/build/css/spacing.css +16 -0
- package/build/scss/_breakpoints.scss +12 -0
- package/build/scss/_colors.scss +487 -0
- package/build/scss/_spacing.scss +13 -0
- package/dist/components/frameworks/react/OgdsAccordion.d.ts +69 -0
- package/dist/components/frameworks/react/OgdsAccordion.js +22 -0
- package/dist/components/frameworks/react/OgdsAccordionToggle.d.ts +60 -0
- package/dist/components/frameworks/react/OgdsAccordionToggle.js +23 -0
- package/dist/components/frameworks/react/UsaBanner.d.ts +82 -0
- package/dist/components/frameworks/react/UsaBanner.js +25 -0
- package/dist/components/frameworks/react/UsaLink.d.ts +60 -0
- package/dist/components/frameworks/react/UsaLink.js +21 -0
- package/dist/components/frameworks/react/index.d.ts +4 -0
- package/dist/components/frameworks/react/index.js +4 -0
- package/dist/components/frameworks/react/react-utils.js +34 -0
- package/dist/components/index.cjs +1 -0
- package/dist/components/index.cjs.map +1 -0
- package/dist/components/index.d.ts +3 -0
- package/dist/components/index.js +6 -0
- package/dist/components/index.js.map +1 -0
- package/dist/components/usa-banner/index.d.ts +82 -0
- package/dist/components/usa-banner/usa-banner.spec.d.ts +0 -0
- package/dist/components/usa-banner/usa-banner.stories.d.ts +95 -0
- package/dist/components/usa-banner.cjs +95 -0
- package/dist/components/usa-banner.cjs.map +1 -0
- package/dist/components/usa-banner.js +189 -0
- package/dist/components/usa-banner.js.map +1 -0
- package/dist/components/usa-header/index.d.ts +6 -0
- package/dist/components/usa-link/index.d.ts +30 -0
- package/dist/components/usa-link/usa-link.spec.d.ts +0 -0
- package/dist/components/usa-link.cjs +5 -0
- package/dist/components/usa-link.cjs.map +1 -0
- package/dist/components/usa-link.js +32 -0
- package/dist/components/usa-link.js.map +1 -0
- package/dist/core/OgdsElement.d.ts +3 -0
- package/dist/index-7kIMQwBw.cjs +1 -0
- package/dist/index-7kIMQwBw.cjs.map +1 -0
- package/dist/index-BrHk1-6T.js +10 -0
- package/dist/index-BrHk1-6T.js.map +1 -0
- package/dist/types/custom-element-jsx.d.ts +175 -0
- package/dist/types/custom-element-solidjs.d.ts +185 -0
- package/dist/types/custom-element-svelte.d.ts +157 -0
- package/dist/types/custom-element-vuejs.d.ts +127 -0
- package/dist/utils/index.d.ts +1 -0
- package/dist/utils/index.test.d.ts +1 -0
- package/package.json +119 -0
- package/src/components/index.ts +5 -0
- package/src/components/ogds-accordion/.claude/settings.local.json +7 -0
- package/src/components/ogds-accordion/docs.mdx +90 -0
- package/src/components/ogds-accordion/index.ts +132 -0
- package/src/components/ogds-accordion/ogds-accordion.css +99 -0
- package/src/components/ogds-accordion/ogds-accordion.spec.ts +175 -0
- package/src/components/ogds-accordion/ogds-accordion.stories.ts +77 -0
- package/src/components/ogds-accordion-toggle/index.ts +80 -0
- package/src/components/usa-banner/docs.mdx +108 -0
- package/src/components/usa-banner/index.ts +290 -0
- package/src/components/usa-banner/usa-banner.css +511 -0
- package/src/components/usa-banner/usa-banner.spec.ts +76 -0
- package/src/components/usa-banner/usa-banner.stories.ts +136 -0
- package/src/components/usa-header/index.ts +50 -0
- package/src/components/usa-header/usa-header.css +1 -0
- package/src/components/usa-link/index.ts +66 -0
- package/src/components/usa-link/usa-link.css +24 -0
- package/src/components/usa-link/usa-link.spec.ts +50 -0
- package/src/core/colors.css +8 -0
- package/src/core/fonts.css +213 -0
- package/src/core/index.css +2 -0
- package/src/core/token-styles.ts +26 -0
- package/src/declaration.d.ts +75 -0
- package/src/shared/icons/accessibility_new.svg +1 -0
- package/src/shared/icons/accessible_forward.svg +1 -0
- package/src/shared/icons/account_balance.svg +1 -0
- package/src/shared/icons/account_box.svg +1 -0
- package/src/shared/icons/account_circle.svg +1 -0
- package/src/shared/icons/add.svg +1 -0
- package/src/shared/icons/add_circle.svg +1 -0
- package/src/shared/icons/add_circle_outline.svg +1 -0
- package/src/shared/icons/alarm.svg +1 -0
- package/src/shared/icons/alternate_email.svg +1 -0
- package/src/shared/icons/announcement.svg +1 -0
- package/src/shared/icons/api.svg +1 -0
- package/src/shared/icons/arrow_back.svg +1 -0
- package/src/shared/icons/arrow_downward.svg +1 -0
- package/src/shared/icons/arrow_drop_down.svg +1 -0
- package/src/shared/icons/arrow_drop_up.svg +1 -0
- package/src/shared/icons/arrow_forward.svg +1 -0
- package/src/shared/icons/arrow_upward.svg +1 -0
- package/src/shared/icons/assessment.svg +1 -0
- package/src/shared/icons/attach_file.svg +1 -0
- package/src/shared/icons/attach_money.svg +1 -0
- package/src/shared/icons/autorenew.svg +1 -0
- package/src/shared/icons/backpack.svg +1 -0
- package/src/shared/icons/bathtub.svg +1 -0
- package/src/shared/icons/bedding.svg +1 -0
- package/src/shared/icons/bookmark.svg +1 -0
- package/src/shared/icons/bug_report.svg +1 -0
- package/src/shared/icons/build.svg +1 -0
- package/src/shared/icons/calendar_today.svg +1 -0
- package/src/shared/icons/campaign.svg +1 -0
- package/src/shared/icons/camping.svg +1 -0
- package/src/shared/icons/cancel.svg +1 -0
- package/src/shared/icons/chat.svg +1 -0
- package/src/shared/icons/check.svg +1 -0
- package/src/shared/icons/check_box_outline_blank.svg +1 -0
- package/src/shared/icons/check_circle.svg +1 -0
- package/src/shared/icons/check_circle_outline.svg +1 -0
- package/src/shared/icons/checkroom.svg +1 -0
- package/src/shared/icons/chevron_left.svg +1 -0
- package/src/shared/icons/chevron_right.svg +1 -0
- package/src/shared/icons/clean_hands.svg +1 -0
- package/src/shared/icons/close.svg +1 -0
- package/src/shared/icons/closed_caption.svg +1 -0
- package/src/shared/icons/clothes.svg +1 -0
- package/src/shared/icons/cloud.svg +1 -0
- package/src/shared/icons/code.svg +1 -0
- package/src/shared/icons/comment.svg +1 -0
- package/src/shared/icons/connect_without_contact.svg +1 -0
- package/src/shared/icons/construction.svg +1 -0
- package/src/shared/icons/construction_worker.svg +1 -0
- package/src/shared/icons/contact_page.svg +1 -0
- package/src/shared/icons/content_copy.svg +1 -0
- package/src/shared/icons/coronavirus.svg +1 -0
- package/src/shared/icons/credit_card.svg +1 -0
- package/src/shared/icons/deck.svg +1 -0
- package/src/shared/icons/delete.svg +1 -0
- package/src/shared/icons/device_thermostat.svg +1 -0
- package/src/shared/icons/directions.svg +1 -0
- package/src/shared/icons/directions_bike.svg +1 -0
- package/src/shared/icons/directions_bus.svg +1 -0
- package/src/shared/icons/directions_car.svg +1 -0
- package/src/shared/icons/directions_walk.svg +1 -0
- package/src/shared/icons/do_not_disturb.svg +1 -0
- package/src/shared/icons/do_not_touch.svg +1 -0
- package/src/shared/icons/drag_handle.svg +1 -0
- package/src/shared/icons/eco.svg +1 -0
- package/src/shared/icons/edit.svg +1 -0
- package/src/shared/icons/electrical_services.svg +1 -0
- package/src/shared/icons/emoji_events.svg +1 -0
- package/src/shared/icons/error.svg +1 -0
- package/src/shared/icons/error_outline.svg +1 -0
- package/src/shared/icons/event.svg +1 -0
- package/src/shared/icons/expand_less.svg +1 -0
- package/src/shared/icons/expand_more.svg +1 -0
- package/src/shared/icons/facebook.svg +1 -0
- package/src/shared/icons/fast_forward.svg +1 -0
- package/src/shared/icons/fast_rewind.svg +1 -0
- package/src/shared/icons/favorite.svg +1 -0
- package/src/shared/icons/favorite_border.svg +1 -0
- package/src/shared/icons/fax.svg +1 -0
- package/src/shared/icons/file_download.svg +1 -0
- package/src/shared/icons/file_present.svg +1 -0
- package/src/shared/icons/file_upload.svg +1 -0
- package/src/shared/icons/filter_alt.svg +1 -0
- package/src/shared/icons/filter_list.svg +1 -0
- package/src/shared/icons/fingerprint.svg +1 -0
- package/src/shared/icons/first_page.svg +1 -0
- package/src/shared/icons/flag.svg +1 -0
- package/src/shared/icons/flickr.svg +1 -0
- package/src/shared/icons/flight.svg +1 -0
- package/src/shared/icons/flooding.svg +1 -0
- package/src/shared/icons/folder.svg +1 -0
- package/src/shared/icons/folder_open.svg +1 -0
- package/src/shared/icons/format_quote.svg +1 -0
- package/src/shared/icons/format_size.svg +1 -0
- package/src/shared/icons/forum.svg +1 -0
- package/src/shared/icons/github.svg +1 -0
- package/src/shared/icons/grid_view.svg +1 -0
- package/src/shared/icons/group_add.svg +1 -0
- package/src/shared/icons/groups.svg +1 -0
- package/src/shared/icons/hearing.svg +1 -0
- package/src/shared/icons/help.svg +1 -0
- package/src/shared/icons/help_outline.svg +1 -0
- package/src/shared/icons/highlight_off.svg +1 -0
- package/src/shared/icons/history.svg +1 -0
- package/src/shared/icons/home.svg +1 -0
- package/src/shared/icons/hospital.svg +1 -0
- package/src/shared/icons/hotel.svg +1 -0
- package/src/shared/icons/hourglass_empty.svg +1 -0
- package/src/shared/icons/hurricane.svg +1 -0
- package/src/shared/icons/identification.svg +1 -0
- package/src/shared/icons/image.svg +1 -0
- package/src/shared/icons/info.svg +1 -0
- package/src/shared/icons/info_outline.svg +1 -0
- package/src/shared/icons/insights.svg +1 -0
- package/src/shared/icons/instagram.svg +1 -0
- package/src/shared/icons/keyboard.svg +1 -0
- package/src/shared/icons/label.svg +1 -0
- package/src/shared/icons/language.svg +1 -0
- package/src/shared/icons/last_page.svg +1 -0
- package/src/shared/icons/launch.svg +1 -0
- package/src/shared/icons/lightbulb.svg +1 -0
- package/src/shared/icons/lightbulb_outline.svg +1 -0
- package/src/shared/icons/link.svg +1 -0
- package/src/shared/icons/link_off.svg +1 -0
- package/src/shared/icons/linkedin.svg +1 -0
- package/src/shared/icons/list.svg +1 -0
- package/src/shared/icons/local_cafe.svg +1 -0
- package/src/shared/icons/local_fire_department.svg +1 -0
- package/src/shared/icons/local_gas_station.svg +1 -0
- package/src/shared/icons/local_grocery_store.svg +1 -0
- package/src/shared/icons/local_hospital.svg +1 -0
- package/src/shared/icons/local_laundry_service.svg +1 -0
- package/src/shared/icons/local_library.svg +1 -0
- package/src/shared/icons/local_offer.svg +1 -0
- package/src/shared/icons/local_parking.svg +1 -0
- package/src/shared/icons/local_pharmacy.svg +1 -0
- package/src/shared/icons/local_police.svg +1 -0
- package/src/shared/icons/local_taxi.svg +1 -0
- package/src/shared/icons/location_city.svg +1 -0
- package/src/shared/icons/location_on.svg +1 -0
- package/src/shared/icons/lock.svg +1 -0
- package/src/shared/icons/lock_open.svg +1 -0
- package/src/shared/icons/lock_outline.svg +1 -0
- package/src/shared/icons/login.svg +1 -0
- package/src/shared/icons/logout.svg +1 -0
- package/src/shared/icons/loop.svg +1 -0
- package/src/shared/icons/mail.svg +1 -0
- package/src/shared/icons/mail_outline.svg +1 -0
- package/src/shared/icons/map.svg +1 -0
- package/src/shared/icons/masks.svg +1 -0
- package/src/shared/icons/medical_services.svg +1 -0
- package/src/shared/icons/menu.svg +1 -0
- package/src/shared/icons/military_tech.svg +1 -0
- package/src/shared/icons/more_horiz.svg +1 -0
- package/src/shared/icons/more_vert.svg +1 -0
- package/src/shared/icons/my_location.svg +1 -0
- package/src/shared/icons/navigate_before.svg +1 -0
- package/src/shared/icons/navigate_far_before.svg +1 -0
- package/src/shared/icons/navigate_far_next.svg +1 -0
- package/src/shared/icons/navigate_next.svg +1 -0
- package/src/shared/icons/near_me.svg +1 -0
- package/src/shared/icons/notifications.svg +1 -0
- package/src/shared/icons/notifications_active.svg +1 -0
- package/src/shared/icons/notifications_none.svg +1 -0
- package/src/shared/icons/notifications_off.svg +1 -0
- package/src/shared/icons/park.svg +1 -0
- package/src/shared/icons/people.svg +1 -0
- package/src/shared/icons/person.svg +1 -0
- package/src/shared/icons/pets.svg +1 -0
- package/src/shared/icons/phone.svg +1 -0
- package/src/shared/icons/photo_camera.svg +1 -0
- package/src/shared/icons/print.svg +1 -0
- package/src/shared/icons/priority_high.svg +1 -0
- package/src/shared/icons/public.svg +1 -0
- package/src/shared/icons/push_pin.svg +1 -0
- package/src/shared/icons/radio_button_unchecked.svg +1 -0
- package/src/shared/icons/rain.svg +1 -0
- package/src/shared/icons/reduce_capacity.svg +1 -0
- package/src/shared/icons/remove.svg +1 -0
- package/src/shared/icons/remove_circle.svg +1 -0
- package/src/shared/icons/report.svg +1 -0
- package/src/shared/icons/restaurant.svg +1 -0
- package/src/shared/icons/rss_feed.svg +1 -0
- package/src/shared/icons/safety_divider.svg +1 -0
- package/src/shared/icons/sanitizer.svg +1 -0
- package/src/shared/icons/save_alt.svg +1 -0
- package/src/shared/icons/schedule.svg +1 -0
- package/src/shared/icons/school.svg +1 -0
- package/src/shared/icons/science.svg +1 -0
- package/src/shared/icons/search.svg +1 -0
- package/src/shared/icons/security.svg +1 -0
- package/src/shared/icons/send.svg +1 -0
- package/src/shared/icons/sentiment_dissatisfied.svg +1 -0
- package/src/shared/icons/sentiment_neutral.svg +1 -0
- package/src/shared/icons/sentiment_satisfied.svg +1 -0
- package/src/shared/icons/sentiment_satisfied_alt.svg +1 -0
- package/src/shared/icons/sentiment_very_dissatisfied.svg +1 -0
- package/src/shared/icons/settings.svg +1 -0
- package/src/shared/icons/severe_weather.svg +1 -0
- package/src/shared/icons/share.svg +1 -0
- package/src/shared/icons/shield.svg +1 -0
- package/src/shared/icons/shopping_basket.svg +1 -0
- package/src/shared/icons/snow.svg +1 -0
- package/src/shared/icons/soap.svg +1 -0
- package/src/shared/icons/social_distance.svg +1 -0
- package/src/shared/icons/sort_arrow.svg +1 -0
- package/src/shared/icons/spellcheck.svg +1 -0
- package/src/shared/icons/star.svg +1 -0
- package/src/shared/icons/star_half.svg +1 -0
- package/src/shared/icons/star_outline.svg +1 -0
- package/src/shared/icons/store.svg +1 -0
- package/src/shared/icons/support.svg +1 -0
- package/src/shared/icons/support_agent.svg +1 -0
- package/src/shared/icons/text_fields.svg +1 -0
- package/src/shared/icons/thumb_down_alt.svg +1 -0
- package/src/shared/icons/thumb_up_alt.svg +1 -0
- package/src/shared/icons/timer.svg +1 -0
- package/src/shared/icons/toggle_off.svg +1 -0
- package/src/shared/icons/toggle_on.svg +1 -0
- package/src/shared/icons/topic.svg +1 -0
- package/src/shared/icons/tornado.svg +1 -0
- package/src/shared/icons/translate.svg +1 -0
- package/src/shared/icons/trending_down.svg +1 -0
- package/src/shared/icons/trending_up.svg +1 -0
- package/src/shared/icons/twitter.svg +1 -0
- package/src/shared/icons/undo.svg +1 -0
- package/src/shared/icons/unfold_less.svg +1 -0
- package/src/shared/icons/unfold_more.svg +1 -0
- package/src/shared/icons/update.svg +1 -0
- package/src/shared/icons/upload_file.svg +1 -0
- package/src/shared/icons/verified.svg +1 -0
- package/src/shared/icons/verified_user.svg +1 -0
- package/src/shared/icons/visibility.svg +1 -0
- package/src/shared/icons/visibility_off.svg +1 -0
- package/src/shared/icons/volume_off.svg +1 -0
- package/src/shared/icons/warning.svg +1 -0
- package/src/shared/icons/wash.svg +1 -0
- package/src/shared/icons/wifi.svg +1 -0
- package/src/shared/icons/work.svg +1 -0
- package/src/shared/icons/x.svg +1 -0
- package/src/shared/icons/youtube.svg +1 -0
- package/src/shared/icons/zoom_in.svg +1 -0
- package/src/shared/icons/zoom_out.svg +1 -0
- package/src/shared/icons/zoom_out_map.svg +1 -0
- package/src/utils/index.test.ts +34 -0
- package/src/utils/index.ts +8 -0
- package/src/vite-env.d.ts +17 -0
- package/storybook/contributing.mdx +115 -0
- package/storybook/framework-guidance.mdx +96 -0
- package/storybook/index.css +70 -0
- package/storybook/readme.mdx +6 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3.2"/><path d="M9 2 7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="19" r="2"/><path d="M10 3h4v12h-4z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M16 9V4h1c.55 0 1-.45 1-1s-.45-1-1-1H7c-.55 0-1 .45-1 1s.45 1 1 1h1v5c0 1.66-1.34 3-3 3v2h5.97v7l1 1 1-1v-7H19v-2c-1.66 0-3-1.34-3-3z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M17.51 7A5.62 5.62 0 0 0 7 5.51a4.5 4.5 0 0 0 .49 9h9.75A3.74 3.74 0 0 0 17.51 7ZM4.076 20.774 6.08 15.77l1.857.743-2.003 5.004zm4.998-.002 2.003-5.004 1.856.743-2.002 5.004zm4.998.008 2.002-5.004 1.857.743-2.002 5.004z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16 4c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm4.78 3.58A6.95 6.95 0 0 0 18 7c-.67 0-1.31.1-1.92.28.58.55.92 1.32.92 2.15V10h5v-.57c0-.81-.48-1.53-1.22-1.85zM6 6c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm1.92 1.28C7.31 7.1 6.67 7 6 7c-.99 0-1.93.21-2.78.58A2.01 2.01 0 0 0 2 9.43V10h5v-.57c0-.83.34-1.6.92-2.15zM10 4c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm6 6H8v-.57c0-.81.48-1.53 1.22-1.85a6.95 6.95 0 0 1 5.56 0A2.01 2.01 0 0 1 16 9.43V10zm-1 6c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm6 6h-8v-.57c0-.81.48-1.53 1.22-1.85a6.95 6.95 0 0 1 5.56 0A2.01 2.01 0 0 1 21 21.43V22zM5 16c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm6 6H3v-.57c0-.81.48-1.53 1.22-1.85a6.95 6.95 0 0 1 5.56 0A2.01 2.01 0 0 1 11 21.43V22zm1.75-9v-2h-1.5v2H9l3 3 3-3h-2.25z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13H5v-2h14v2z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11H7v-2h10v2z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.73 3H8.27L3 8.27v7.46L8.27 21h7.46L21 15.73V8.27L15.73 3zM12 17.3c-.72 0-1.3-.58-1.3-1.3 0-.72.58-1.3 1.3-1.3.72 0 1.3.58 1.3 1.3 0 .72-.58 1.3-1.3 1.3zm1-4.3h-2V7h2v6z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 9H9V2H7v7H5V2H3v7c0 2.12 1.66 3.84 3.75 3.97V22h2.5v-9.03C11.34 12.84 13 11.12 13 9V2h-2v7zm5-3v8h2.5v8H21V2c-2.76 0-5 2.24-5 4z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="6.18" cy="17.82" r="2.18"/><path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 5h2v14h-2V5zm-6 7c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm2.78 1.58a6.95 6.95 0 0 0-5.56 0A2.01 2.01 0 0 0 1 15.43V16h8v-.57c0-.81-.48-1.53-1.22-1.85zM19 12c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm2.78 1.58a6.95 6.95 0 0 0-5.56 0A2.01 2.01 0 0 0 15 15.43V16h8v-.57c0-.81-.48-1.53-1.22-1.85z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 6.5C15.5 5.66 17 4 17 4s1.5 1.66 1.5 2.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5zm4 8.5a2.5 2.5 0 0 0 2.5-2.5c0-1.67-2.5-4.5-2.5-4.5S17 10.83 17 12.5a2.5 2.5 0 0 0 2.5 2.5zM13 14h-2v-2H9v2H7v2h2v2h2v-2h2v-2zm3-2v10H4V12c0-2.97 2.16-5.43 5-5.91V4H7V2h6c1.13 0 2.15.39 2.99 1.01l-1.43 1.43C14.1 4.17 13.57 4 13 4h-2v2.09c2.84.48 5 2.94 5 5.91z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67 2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/><path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3 1 9l11 6 9-4.91V17h2V9L12 3z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19.8 18.4 14 10.67V6.5l1.35-1.69c.26-.33.03-.81-.39-.81H9.04c-.42 0-.65.48-.39.81L10 6.5v4.17L4.2 18.4c-.49.66-.02 1.6.8 1.6h14c.82 0 1.29-.94.8-1.6z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 1 3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M2.01 21 23 12 2.01 3 2 10l15 2-15 2z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="15.5" cy="9.5" r="1.5"/><circle cx="8.5" cy="9.5" r="1.5"/><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm0-3.5c.73 0 1.39.19 1.97.53.12-.14.86-.98 1.01-1.14A5.39 5.39 0 0 0 12 15c-1.11 0-2.13.33-2.99.88.97 1.09.01.02 1.01 1.14.59-.33 1.25-.52 1.98-.52z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9 15.5h6v1H9v-1z"/><circle cx="15.5" cy="9.5" r="1.5"/><circle cx="8.5" cy="9.5" r="1.5"/><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="15.5" cy="9.5" r="1.5"/><circle cx="8.5" cy="9.5" r="1.5"/><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm0-4c-.73 0-1.38-.18-1.96-.52-.12.14-.86.98-1.01 1.15a5.49 5.49 0 0 0 5.95-.01c-.97-1.09-.01-.02-1.01-1.15-.59.35-1.24.53-1.97.53z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="15.5" cy="9.5" r="1.5"/><circle cx="8.5" cy="9.5" r="1.5"/><circle cx="15.5" cy="9.5" r="1.5"/><circle cx="8.5" cy="9.5" r="1.5"/><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm0-2.5c2.33 0 4.32-1.45 5.12-3.5h-1.67c-.69 1.19-1.97 2-3.45 2s-2.75-.81-3.45-2H6.88c.8 2.05 2.79 3.5 5.12 3.5z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="15.5" cy="9.5" r="1.5"/><circle cx="8.5" cy="9.5" r="1.5"/><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm0-6c-2.33 0-4.32 1.45-5.12 3.5h1.67c.69-1.19 1.97-2 3.45-2s2.75.81 3.45 2h1.67c-.8-2.05-2.79-3.5-5.12-3.5z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.488.488 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><g data-name="Severe Weather"><path d="M4.05 17.73 12 4l8 13.85A5 5 0 0 0 19.2 8a7.49 7.49 0 0 0-14-2 6 6 0 0 0-1.15 11.73Z"/><path d="M12 7 3.34 22h17.32Zm0 13.4a1 1 0 1 1 1-1 1 1 0 0 1-1 1ZM11 17v-4.6h2V17Z"/></g></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 1 3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m17.21 9-4.38-6.56a.993.993 0 0 0-.83-.42c-.32 0-.64.14-.83.43L6.79 9H2c-.55 0-1 .45-1 1 0 .09.01.18.04.27l2.54 9.27c.23.84 1 1.46 1.92 1.46h13c.92 0 1.69-.62 1.93-1.46l2.54-9.27L23 10c0-.55-.45-1-1-1h-4.79zM9 9l3-4.4L15 9H9zm3 8c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="m20.76 14.07-.66-1.34-2.88 1.42L13.5 12l3.72-2.15 2.88 1.42.66-1.34-1.97-.98 2.25-1.3-.75-1.3-2.25 1.3.14-2.2-1.5-.1-.21 3.2-3.72 2.15V6.4l2.67-1.78-.84-1.24-1.83 1.22V2h-1.5v2.6L9.42 3.38l-.84 1.24 2.67 1.78v4.3L7.53 8.55l-.21-3.2-1.5.1.14 2.2-2.25-1.3-.75 1.3 2.25 1.3-1.97.98.66 1.34 2.88-1.42L10.5 12l-3.72 2.15-2.88-1.42-.66 1.34 1.97.98-2.25 1.3.75 1.3 2.25-1.3-.14 2.2 1.5.1.21-3.2 3.72-2.15v4.3l-2.67 1.78.84 1.24 1.83-1.22V22h1.5v-2.6l1.83 1.22.84-1.24-2.67-1.78v-4.3l3.72 2.15.21 3.2 1.5-.1-.14-2.2 2.25 1.3.75-1.3-2.25-1.3 1.97-.98z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m9.12 5-7.18 6.79c-.6.56-.94 1.35-.94 2.18V20c0 1.66 1.34 3 3 3h13.75a1.25 1.25 0 0 0 0-2.5H12v-1h7.75a1.25 1.25 0 0 0 0-2.5H12v-1h8.75a1.25 1.25 0 0 0 0-2.5H12v-1h6.75a1.25 1.25 0 0 0 0-2.5H8.86c.64-1.11 1.48-2.58 1.49-2.61a1.065 1.065 0 0 0-.12-1.23C10.22 6.12 9.12 5 9.12 5zM14 6.25c.41 0 .75.34.75.75s-.34.75-.75.75-.75-.34-.75-.75.34-.75.75-.75m0-1.5c-1.24 0-2.25 1.01-2.25 2.25S12.76 9.25 14 9.25 16.25 8.24 16.25 7 15.24 4.75 14 4.75zm5.75.75c.28 0 .5.22.5.5s-.22.5-.5.5-.5-.22-.5-.5.22-.5.5-.5m0-1.5c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM16.5 1c-.83 0-1.5.67-1.5 1.5S15.67 4 16.5 4 18 3.33 18 2.5 17.33 1 16.5 1z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4 5c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm4.78 3.58a6.95 6.95 0 0 0-5.56 0A2.01 2.01 0 0 0 2 10.43V11h8v-.57c0-.81-.48-1.53-1.22-1.85zM18 7c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm2.78 1.58a6.95 6.95 0 0 0-5.56 0A2.01 2.01 0 0 0 14 10.43V11h8v-.57c0-.81-.48-1.53-1.22-1.85zM22 17l-4-4v3H6v-3l-4 4 4 4v-3h12v3l4-4z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M15.17 15 13 17.17V6.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 11 6.83v10.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12.45 16h2.09L9.43 3H7.57L2.46 16h2.09l1.12-3h5.64l1.14 3zm-6.02-5L8.5 5.48 10.57 11H6.43zm15.16.59-8.09 8.09L9.83 16l-1.41 1.41 5.09 5.09L23 13l-1.41-1.41z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m22 9.24-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4V6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m22 9.24-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 4H4v2h16V4zm1 10v-2l-1-5H4l-1 5v2h1v6h10v-6h4v6h2v-6h1zm-9 4H6v-4h6v4z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm7.46 7.12-2.78 1.15a4.982 4.982 0 0 0-2.95-2.94l1.15-2.78c2.1.8 3.77 2.47 4.58 4.57zM12 15c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zM9.13 4.54l1.17 2.78a5 5 0 0 0-2.98 2.97L4.54 9.13a7.984 7.984 0 0 1 4.59-4.59zM4.54 14.87l2.78-1.15a4.968 4.968 0 0 0 2.97 2.96l-1.17 2.78a7.996 7.996 0 0 1-4.58-4.59zm10.34 4.59-1.15-2.78a4.978 4.978 0 0 0 2.95-2.97l2.78 1.17a8.007 8.007 0 0 1-4.58 4.58z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M21 12.22C21 6.73 16.74 3 12 3c-4.69 0-9 3.65-9 9.28-.6.34-1 .98-1 1.72v2c0 1.1.9 2 2 2h1v-6.1c0-3.87 3.13-7 7-7s7 3.13 7 7V19h-8v2h8c1.1 0 2-.9 2-2v-1.22c.59-.31 1-.92 1-1.64v-2.3c0-.7-.41-1.31-1-1.62z"/><circle cx="9" cy="13" r="1"/><circle cx="15" cy="13" r="1"/><path d="M18 11.03A6.04 6.04 0 0 0 12.05 6c-3.03 0-6.29 2.51-6.03 6.45a8.075 8.075 0 0 0 4.86-5.89c1.31 2.63 4 4.44 7.12 4.47z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M2.5 4v3h5v12h3V7h5V4h-13zm19 5h-9v3h3v7h3v-7h3V9z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M22 4h-2c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h2V4zM2.17 11.12c-.11.25-.17.52-.17.8V13c0 1.1.9 2 2 2h5.5l-.92 4.65c-.05.22-.02.46.08.66.23.45.52.86.88 1.22L10 22l6.41-6.41c.38-.38.59-.89.59-1.42V6.34C17 5.05 15.95 4 14.66 4h-8.1c-.71 0-1.36.37-1.72.97l-2.67 6.15z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M2 20h2c.55 0 1-.45 1-1v-9c0-.55-.45-1-1-1H2v11zm19.83-7.12c.11-.25.17-.52.17-.8V11c0-1.1-.9-2-2-2h-5.5l.92-4.65c.05-.22.02-.46-.08-.66a4.8 4.8 0 0 0-.88-1.22L14 2 7.59 8.41C7.21 8.79 7 9.3 7 9.83v7.84A2.34 2.34 0 0 0 9.34 20h8.11c.7 0 1.36-.37 1.72-.97l2.66-6.15z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9 1h6v2H9zm10.03 6.39 1.42-1.42c-.43-.51-.9-.99-1.41-1.41l-1.42 1.42A8.962 8.962 0 0 0 12 4a9 9 0 0 0-9 9c0 4.97 4.02 9 9 9a8.994 8.994 0 0 0 7.03-14.61zM13 14h-2V8h2v6z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M17 7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h10c2.76 0 5-2.24 5-5s-2.24-5-5-5zM7 15c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M17 7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h10c2.76 0 5-2.24 5-5s-2.24-5-5-5zm0 8c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-6 10H6v-2h8v2zm4-4H6v-2h12v2z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M13 16v-2h2.77c.08-.32.16-.65.23-1 1.19-5.95 4-6 4-10H4a10.35 10.35 0 0 0 .48 3H8v2H5.26c.32.69.68 1.36 1 2H10v2H7.51A13.86 13.86 0 0 1 9 15a6.24 6.24 0 0 1-1 6l1 1c2.82-1.54 4.85-3.09 6.1-6Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m12.87 15.07-2.54-2.51.03-.03A17.52 17.52 0 0 0 14.07 6H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7 1.62-4.33L19.12 17h-3.24z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m16 18 2.29-2.29-4.88-4.88-4 4L2 7.41 3.41 6l6 6 4-4 6.3 6.29L22 12v6z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m16 6 2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19.912 7.925v.527A11.562 11.562 0 0 1 8.265 20.098 11.443 11.443 0 0 1 2 18.265c.328.017.657.017.985 0a8.132 8.132 0 0 0 5.093-1.698 4.092 4.092 0 0 1-3.786-2.852c.255.062.518.091.781.085.36-.002.72-.047 1.07-.136a4.109 4.109 0 0 1-3.21-4.024c.566.32 1.202.494 1.851.51a4.126 4.126 0 0 1-1.34-5.518 11.613 11.613 0 0 0 8.488 4.295 4.397 4.397 0 0 1-.119-.934 4.092 4.092 0 0 1 4.092-4.092 4.04 4.04 0 0 1 3.005 1.29 7.929 7.929 0 0 0 2.53-1c-.3.953-.94 1.763-1.8 2.274A7.725 7.725 0 0 0 22 5.803a8.489 8.489 0 0 1-2.088 2.122Z" fill-rule="evenodd"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 18.59 8.83 20 12 16.83 15.17 20l1.41-1.41L12 14l-4.59 4.59zm9.18-13.18L15.17 4 12 7.17 8.83 4 7.41 5.41 12 10l4.59-4.59z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 5.83 15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M21 10.12h-6.78l2.74-2.82c-2.73-2.7-7.15-2.8-9.88-.1-2.73 2.71-2.73 7.08 0 9.79s7.15 2.71 9.88 0C18.32 15.65 19 14.08 19 12.1h2c0 1.98-.88 4.55-2.64 6.29-3.51 3.48-9.21 3.48-12.72 0-3.5-3.47-3.53-9.11-.02-12.58s9.14-3.47 12.65 0L21 3v7.12zM12.5 8v4.25l3.5 2.08-.72 1.21L11 13V8h1.5z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11zM8 15.01l1.41 1.41L11 14.84V19h2v-4.16l1.59 1.59L16 15.01 12.01 11z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m23 12-2.44-2.79.34-3.69-3.61-.82-1.89-3.2L12 2.96 8.6 1.5 6.71 4.69 3.1 5.5l.34 3.7L1 12l2.44 2.79-.34 3.7 3.61.82L8.6 22.5l3.4-1.47 3.4 1.46 1.89-3.19 3.61-.82-.34-3.69L23 12zm-12.91 4.72-3.8-3.81 1.48-1.48 2.32 2.33 5.85-5.87 1.48 1.48-7.33 7.35z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 1 3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46A11.804 11.804 0 0 0 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78 3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16.5 12A4.5 4.5 0 0 0 14 7.97v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51A8.796 8.796 0 0 0 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3 3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06a8.99 8.99 0 0 0 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4 9.91 6.09 12 8.18V4z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M18.5 8A2.5 2.5 0 0 0 21 5.5C21 3.83 18.5 1 18.5 1S16 3.83 16 5.5A2.5 2.5 0 0 0 18.5 8zm-5 1c.83 0 1.5-.67 1.5-1.5 0-.84-1.5-2.5-1.5-2.5S12 6.66 12 7.5c0 .83.67 1.5 1.5 1.5zM9.12 5l-7.18 6.79c-.6.56-.94 1.35-.94 2.18V20c0 1.66 1.34 3 3 3h13.75a1.25 1.25 0 0 0 0-2.5H12v-1h7.75a1.25 1.25 0 0 0 0-2.5H12v-1h8.75a1.25 1.25 0 0 0 0-2.5H12v-1h6.75a1.25 1.25 0 0 0 0-2.5H8.86c.64-1.11 1.48-2.58 1.49-2.61a1.065 1.065 0 0 0-.12-1.23C10.22 6.12 9.12 5 9.12 5z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m1 9 2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8 3 3 3-3a4.237 4.237 0 0 0-6 0zm-4-4 2 2a7.074 7.074 0 0 1 10 0l2-2C15.14 9.14 8.87 9.14 5 13z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M13.522 10.775 19.48 4h-1.412l-5.172 5.883L8.765 4H4l6.247 8.895L4 20h1.412l5.461-6.212L15.236 20H20l-6.478-9.225Zm-1.933 2.199-.633-.886L5.92 5.04h2.168l4.064 5.688.633.886 5.283 7.394H15.9l-4.311-6.034Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19.816 5.389a2.469 2.469 0 0 1 1.766 1.746c.291 1.598.43 3.22.417 4.843a25.867 25.867 0 0 1-.417 4.794 2.468 2.468 0 0 1-1.766 1.795c-2.593.318-5.204.46-7.816.429a58.411 58.411 0 0 1-7.816-.429 2.469 2.469 0 0 1-1.766-1.746 25.879 25.879 0 0 1-.417-4.843 25.85 25.85 0 0 1 .417-4.793 2.468 2.468 0 0 1 1.766-1.796c2.594-.3 5.205-.427 7.816-.379a58.413 58.413 0 0 1 7.816.379ZM9.95 9.046v5.864l5.233-2.932L9.95 9.046Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/><path d="M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m15 3 2.3 2.3-2.89 2.87 1.42 1.42L18.7 6.7 21 9V3h-6zM3 9l2.3-2.3 2.87 2.89 1.42-1.42L6.7 5.3 9 3H3v6zm6 12-2.3-2.3 2.89-2.87-1.42-1.42L5.3 17.3 3 15v6h6zm12-6-2.3 2.3-2.87-2.89-1.42 1.42 2.89 2.87L15 21h6v-6z"/></svg>
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { describe, it, expect, vi, beforeEach } from "vitest";
|
|
2
|
+
import { defineCustomElement } from "./index";
|
|
3
|
+
|
|
4
|
+
describe("defineCustomElement", () => {
|
|
5
|
+
let customElementsDefineSpy: ReturnType<typeof vi.spyOn>;
|
|
6
|
+
let customElementsGetSpy: ReturnType<typeof vi.spyOn>;
|
|
7
|
+
let Component: CustomElementConstructor;
|
|
8
|
+
let tagName: string;
|
|
9
|
+
|
|
10
|
+
beforeEach(() => {
|
|
11
|
+
Component = class extends HTMLElement {};
|
|
12
|
+
tagName = "usa-test-element";
|
|
13
|
+
|
|
14
|
+
customElementsDefineSpy = vi.spyOn(customElements, "define");
|
|
15
|
+
customElementsGetSpy = vi.spyOn(customElements, "get");
|
|
16
|
+
});
|
|
17
|
+
|
|
18
|
+
it("should define a custom element if it does not already exist", () => {
|
|
19
|
+
defineCustomElement(tagName, Component);
|
|
20
|
+
|
|
21
|
+
expect(customElementsGetSpy).toHaveBeenCalledWith(tagName);
|
|
22
|
+
expect(customElementsDefineSpy).toHaveBeenCalledTimes(1);
|
|
23
|
+
expect(customElementsDefineSpy).toHaveBeenCalledWith(tagName, Component);
|
|
24
|
+
});
|
|
25
|
+
|
|
26
|
+
it("should not define a custom element if it already exists", () => {
|
|
27
|
+
defineCustomElement(tagName, Component);
|
|
28
|
+
defineCustomElement(tagName, Component);
|
|
29
|
+
|
|
30
|
+
expect(customElementsGetSpy).toHaveBeenCalledWith(tagName);
|
|
31
|
+
// we still expect this to be called once because of the conditional check in our function
|
|
32
|
+
expect(customElementsDefineSpy).toHaveBeenCalledTimes(1);
|
|
33
|
+
});
|
|
34
|
+
});
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/// <reference types="vite/client" />
|
|
2
|
+
|
|
3
|
+
declare module "*.css?raw" {
|
|
4
|
+
const content: string;
|
|
5
|
+
export default content;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
declare module "*.css?inline" {
|
|
9
|
+
const content: string;
|
|
10
|
+
export default content;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
declare module '*.css' {
|
|
14
|
+
import { CSSResult } from 'lit';
|
|
15
|
+
const styles: CSSResult;
|
|
16
|
+
export default styles;
|
|
17
|
+
}
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
import { Meta, Markdown } from "@storybook/addon-docs/blocks";
|
|
2
|
+
import Contributing from "../CONTRIBUTING.md?raw";
|
|
3
|
+
|
|
4
|
+
<Meta title="Documentation/Contributing" />
|
|
5
|
+
|
|
6
|
+
<Markdown>{Contributing}</Markdown>
|
|
7
|
+
|
|
8
|
+
## Overview
|
|
9
|
+
|
|
10
|
+
This information is for USWDS Core team members contribute to the USWDS Elements project.
|
|
11
|
+
|
|
12
|
+
## Project setup
|
|
13
|
+
|
|
14
|
+
It is helpful to have [nvm installed](https://github.com/nvm-sh/nvm) and use the correct version of Node.js. From the project root, run the following command:
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
npm install
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
### Installing Playwright (for E2E testing)
|
|
21
|
+
|
|
22
|
+
If you plan to run or write end-to-end tests, please see the [Playwright documentation](https://playwright.dev/docs/intro) for installation instructions and the [README.md file in the `e2e` directory](https://github.com/uswds/uswds-elements/tree/develop/e2e).
|
|
23
|
+
|
|
24
|
+
## Development Workflow
|
|
25
|
+
|
|
26
|
+
The development workflow uses [Storybook](https://storybook.js.org/) and [custom elements manifest](https://github.com/webcomponents/custom-elements-manifest) to generate a custom elements manifest and watch for changes to the custom elements manifest. Storybook handles documentation of component usage, styling, and properties.
|
|
27
|
+
|
|
28
|
+
### Running StorybookJS
|
|
29
|
+
|
|
30
|
+
Start the development server with Storybook and custom elements manifest watch process:
|
|
31
|
+
|
|
32
|
+
```bash
|
|
33
|
+
npm run start
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
This runs Storybook on port 8008 at `http://localhost:8008`.
|
|
37
|
+
|
|
38
|
+
---
|
|
39
|
+
|
|
40
|
+
### Creating stories
|
|
41
|
+
|
|
42
|
+
Stories should document the following component features:
|
|
43
|
+
|
|
44
|
+
- Variants (e.g. default, primary, secondary, etc.)
|
|
45
|
+
- Properties
|
|
46
|
+
- CSS Custom Properties
|
|
47
|
+
|
|
48
|
+
### Story File Structure
|
|
49
|
+
|
|
50
|
+
Stories and functional tests should be created alongside components:
|
|
51
|
+
|
|
52
|
+
```
|
|
53
|
+
src/components/usa-example/
|
|
54
|
+
├── docs.mdx
|
|
55
|
+
├── index.ts
|
|
56
|
+
├── usa-example.css
|
|
57
|
+
├── usa-example.spec.ts
|
|
58
|
+
└── usa-example.stories.ts
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
## Project Structure
|
|
62
|
+
|
|
63
|
+
- **`src/components/`** - Web Component implementations
|
|
64
|
+
- **`src/core/`** - Core utilities and base classes
|
|
65
|
+
- **`src/shared/`** - Static asset files like fonts and icons
|
|
66
|
+
- **`e2e/`** - Playwright end-to-end tests
|
|
67
|
+
- **`storybook/`** - Storybook documentation files
|
|
68
|
+
- **`.storybook/`** - Storybook configuration
|
|
69
|
+
- **`tokens/`** - Design token definitions (Style Dictionary)
|
|
70
|
+
- **`internals/`** - Internal build scripts and utilities
|
|
71
|
+
- **`config/`** - Config files for project tooling and testing
|
|
72
|
+
|
|
73
|
+
## Component Development Checklist
|
|
74
|
+
|
|
75
|
+
When creating a new component:
|
|
76
|
+
|
|
77
|
+
- Create component files in `src/components/[component-name]/`
|
|
78
|
+
- Add JSDoc comments to component files documenting the component's API
|
|
79
|
+
- Write component implementation (TypeScript + Lit)
|
|
80
|
+
- Create component styles in an external CSS file and import it into the component
|
|
81
|
+
- Export component from `index.ts`
|
|
82
|
+
- Add component to for package exports `src/components/index.js`
|
|
83
|
+
- Create Storybook stories documenting all variants and props
|
|
84
|
+
- Write unit tests with Vitest
|
|
85
|
+
- Write E2E tests with Playwright (including visual regression tests)
|
|
86
|
+
- Build the custom elements manifest to keep it synced with JSDoc comments
|
|
87
|
+
- Test accessibility with Storybook's a11y addon
|
|
88
|
+
|
|
89
|
+
---
|
|
90
|
+
|
|
91
|
+
## Pre-commit Hooks
|
|
92
|
+
|
|
93
|
+
This project uses [Husky](https://typicode.github.io/husky/) for Git hooks. Hooks are automatically set up when you run `npm install` via the `prepare` script.
|
|
94
|
+
|
|
95
|
+
## Publishing and Releases
|
|
96
|
+
|
|
97
|
+
The package is published as `@uswds/elements` on npm. The current version can be found in `package.json`
|
|
98
|
+
|
|
99
|
+
Component maturity levels:
|
|
100
|
+
|
|
101
|
+
- **Pre-alpha**: Experimental, API may change significantly
|
|
102
|
+
- **Alpha**: Core functionality stable, refinements expected
|
|
103
|
+
- **Beta**: Feature complete, undergoing final testing
|
|
104
|
+
- **Stable**: Production ready
|
|
105
|
+
|
|
106
|
+
Check the README for current component status.
|
|
107
|
+
|
|
108
|
+
## Additional Resources
|
|
109
|
+
|
|
110
|
+
- [USWDS Design System](https://designsystem.digital.gov)
|
|
111
|
+
- [Web Components MDN Guide](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)
|
|
112
|
+
- [Lit Documentation](https://lit.dev)
|
|
113
|
+
- [Storybook Documentation](https://storybook.js.org)
|
|
114
|
+
- [Playwright Documentation](https://playwright.dev)
|
|
115
|
+
- [E2E Testing Guide](https://github.com/uswds/uswds-elements/tree/develop/e2e) (detailed testing documentation)
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
import { Meta, Markdown, Source } from "@storybook/addon-docs/blocks";
|
|
2
|
+
import AstroExample from "../examples/with-astro/src/pages/index.astro?raw";
|
|
3
|
+
import ReactExample from "../examples/with-react/src/App.tsx?raw";
|
|
4
|
+
import SolidExample from "../examples/with-solid/src/App.tsx?raw";
|
|
5
|
+
import SolidTsconfigExample from "../examples/with-solid/tsconfig.app.json?raw";
|
|
6
|
+
import SolidDTsExample from "../examples/with-solid/src/custom-elements.d.ts?raw";
|
|
7
|
+
import SvelteKitExample from "../examples/with-sveltekit/src/routes/+page.svelte?raw";
|
|
8
|
+
import VueExample from "../examples/with-vue/src/App.vue?raw";
|
|
9
|
+
|
|
10
|
+
<Meta title="Documentation/Framework Specific Guidance" />
|
|
11
|
+
|
|
12
|
+
# Framework-specific Guidance
|
|
13
|
+
|
|
14
|
+
We've made every effort to make using USWDS Elements in your project as easy as possible. Since many projects use modern front-end libraries and frameworks, we've included an [examples directory](https://github.com/uswds/uswds-elements/tree/develop/examples) in this repository that shows how to import and use USWDS Elements with a variety of popular front-end technologies. The goal is to provide an experience that involves minimal configuration to get up and running with your framework or library of choice.
|
|
15
|
+
|
|
16
|
+
In all cases, install the project from the npm package registry.
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
$ npm install @uswds/elements
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Examples
|
|
23
|
+
|
|
24
|
+
### HTML
|
|
25
|
+
|
|
26
|
+
To use a specific element directly in an HTML page, use the code snippet below. This example also applies if you're using USWDS Elements in a CMS that has its own templating engine (e.g. Drupal, WordPress, etc.).
|
|
27
|
+
|
|
28
|
+
```html
|
|
29
|
+
<!-- importing directly into an HTML page -->
|
|
30
|
+
<script type="module">
|
|
31
|
+
import { UsaBanner } from "@uswds/elements";
|
|
32
|
+
</script>
|
|
33
|
+
<usa-banner></usa-banner>
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
### Astro
|
|
37
|
+
|
|
38
|
+
This is a minimal example of implementation in [Astro](https://astro.build/). The process is similar to the HTML example above
|
|
39
|
+
|
|
40
|
+
<Source code={AstroExample} language="astro" />
|
|
41
|
+
|
|
42
|
+
### React
|
|
43
|
+
|
|
44
|
+
This is a minimal example of implementation in [React](https://react.dev/). Do note that USWDS Elements includes a wrapper for React components, and the `import` path is different from the other frameworks in this document.
|
|
45
|
+
|
|
46
|
+
<Source code={ReactExample} language="jsx" />
|
|
47
|
+
|
|
48
|
+
### SolidJS
|
|
49
|
+
|
|
50
|
+
This is a minimal example of implementation in [SolidJS](https://www.solidjs.com/).
|
|
51
|
+
|
|
52
|
+
<Source code={SolidExample} language="jsx" />
|
|
53
|
+
|
|
54
|
+
#### TypeScript support
|
|
55
|
+
|
|
56
|
+
If you're using TypeScript for your SolidJS project, add a `custom-elements.d.ts` file to `src/` directory.
|
|
57
|
+
|
|
58
|
+
<Source code={SolidDTsExample} language="ts" />
|
|
59
|
+
|
|
60
|
+
Once you do that, ensure that your `tsconfig.json` file contains`"include": ["src"]` like the example below:
|
|
61
|
+
|
|
62
|
+
<Source code={SolidTsconfigExample} language="ts" />
|
|
63
|
+
|
|
64
|
+
### SvelteKit
|
|
65
|
+
|
|
66
|
+
This is a minimal example of implementation in [SvelteKit](https://svelte.dev/docs/kit/introduction).
|
|
67
|
+
|
|
68
|
+
<Source code={SvelteKitExample} language="svelte" />
|
|
69
|
+
|
|
70
|
+
### Vue
|
|
71
|
+
|
|
72
|
+
This is a minimal example of implementation in [Vue](https://vuejs.org/).
|
|
73
|
+
|
|
74
|
+
<Source code={VueExample} language="vue" />
|
|
75
|
+
|
|
76
|
+
Additionally, your build tool needs to know about the custom elements so they aren't parsed at build time. This is how you do it in Vite:
|
|
77
|
+
|
|
78
|
+
```
|
|
79
|
+
// vite.config.ts
|
|
80
|
+
import { defineConfig } from "vite";
|
|
81
|
+
import vue from "@vitejs/plugin-vue";
|
|
82
|
+
|
|
83
|
+
export default defineConfig({
|
|
84
|
+
plugins: [
|
|
85
|
+
vue({
|
|
86
|
+
template: {
|
|
87
|
+
compilerOptions: {
|
|
88
|
+
// Treat all tags starting with 'usa-' as custom elements
|
|
89
|
+
isCustomElement: (tag) => tag.startsWith("usa-"),
|
|
90
|
+
},
|
|
91
|
+
},
|
|
92
|
+
}),
|
|
93
|
+
],
|
|
94
|
+
});
|
|
95
|
+
|
|
96
|
+
```
|