diff --git a/.circleci/config.yml b/.circleci/config.yml index 80a4ab6dda..65413d2075 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -53,6 +53,18 @@ jobs: root: ~/project paths: - "node_modules" + lint_and_format: + executor: my-executor + steps: + - checkout + - attach_workspace: + at: ~/project + - run: + name: lint + command: npm run lint + - run: + name: format + command: npm run prettier build: executor: my-executor steps: @@ -131,6 +143,9 @@ workflows: jobs: - install_ruby_deps - install_node_deps + - lint_and_format: + requires: + - install_node_deps - build: requires: - install_ruby_deps diff --git a/.prettierignore b/.prettierignore index 670d8ffbe9..b2345cff50 100644 --- a/.prettierignore +++ b/.prettierignore @@ -19,4 +19,5 @@ Gemfile.lock *.csv *.html *.md -*.min.js \ No newline at end of file +!/**/accessibility-tests.md +*.min.js diff --git a/README.md b/README.md index b7409f714f..c0eaf7d1ec 100644 --- a/README.md +++ b/README.md @@ -56,6 +56,8 @@ Here are a few other utility commands you may find useful: - `npm run lint`: Runs `eslint` and `sass-lint` against JavaScript and Sass files. +- `npm run prettier`: Runs prettier against SCSS, accessibility tests markdown, and YML in `_data`. + - `npm test`: Runs all tests and linters. - `npm run watch`: Runs a series of commands that watches for any changes in both USWDS node module and the root level asset folders in this repo. diff --git a/_components/accordion/accessibility-tests.md b/_components/accordion/accessibility-tests.md index 65dd52e2e5..2ae64a35e1 100644 --- a/_components/accordion/accessibility-tests.md +++ b/_components/accordion/accessibility-tests.md @@ -7,5 +7,5 @@ title: Accordion accessibility tests category: Components lead: Any USWDS accordion should pass these manual accessibility tests. changelog: - key: 'component-accordion-accessibility' + key: "component-accordion-accessibility" --- diff --git a/_components/alert/accessibility-tests.md b/_components/alert/accessibility-tests.md index de5d39a6de..6050792c57 100644 --- a/_components/alert/accessibility-tests.md +++ b/_components/alert/accessibility-tests.md @@ -2,10 +2,10 @@ permalink: /components/alert/accessibility-tests/ layout: accessibility-test component: - name: Alert + name: Alert title: Alert accessibility tests category: Components lead: Any USWDS alert component should pass these manual accessibility tests. changelog: - key: 'component-alert-accessibility' ---- \ No newline at end of file + key: "component-alert-accessibility" +--- diff --git a/_components/banner/accessibility-tests.md b/_components/banner/accessibility-tests.md index dccac54e60..39e0bfa7b2 100644 --- a/_components/banner/accessibility-tests.md +++ b/_components/banner/accessibility-tests.md @@ -7,5 +7,5 @@ title: Banner accessibility tests category: Components lead: Any USWDS banner component should pass these manual accessibility tests. changelog: - key: 'component-banner-accessibility' + key: "component-banner-accessibility" --- diff --git a/_components/breadcrumb/accessibility-tests.md b/_components/breadcrumb/accessibility-tests.md index f1ef5a3d8e..8d60443a8d 100644 --- a/_components/breadcrumb/accessibility-tests.md +++ b/_components/breadcrumb/accessibility-tests.md @@ -7,5 +7,5 @@ title: Breadcrumb accessibility tests category: Components lead: Any USWDS breadcrumb should pass these manual accessibility tests. changelog: - key: 'component-breadcrumb-accessibility' + key: "component-breadcrumb-accessibility" --- diff --git a/_components/button-group/accessibility-tests.md b/_components/button-group/accessibility-tests.md index 30766e2941..3f1f8139aa 100644 --- a/_components/button-group/accessibility-tests.md +++ b/_components/button-group/accessibility-tests.md @@ -2,10 +2,10 @@ permalink: /components/button-group/accessibility-tests/ layout: accessibility-test component: - name: button group + name: button group title: Button group accessibility tests category: Components lead: Any USWDS button group component should pass these manual accessibility tests. changelog: - key: 'component-button-group-accessibility' + key: "component-button-group-accessibility" --- diff --git a/_components/button/accessibility-tests.md b/_components/button/accessibility-tests.md index 214387f8cf..6074cb49d5 100644 --- a/_components/button/accessibility-tests.md +++ b/_components/button/accessibility-tests.md @@ -7,5 +7,5 @@ title: Button accessibility tests category: Components lead: Any USWDS button should pass these manual accessibility tests. changelog: - key: 'component-button-accessibility' + key: "component-button-accessibility" --- diff --git a/_components/card/accessibility-tests.md b/_components/card/accessibility-tests.md index 5f530f94ef..7958b03862 100644 --- a/_components/card/accessibility-tests.md +++ b/_components/card/accessibility-tests.md @@ -2,10 +2,10 @@ permalink: /components/card/accessibility-tests/ layout: accessibility-test component: - name: card + name: card title: Card accessibility tests category: Components lead: Any USWDS card component should pass these manual accessibility tests. changelog: - key: 'component-card-accessibility' ---- \ No newline at end of file + key: "component-card-accessibility" +--- diff --git a/_components/character-count/accessibility-tests.md b/_components/character-count/accessibility-tests.md index f79388853d..59d0695274 100644 --- a/_components/character-count/accessibility-tests.md +++ b/_components/character-count/accessibility-tests.md @@ -7,5 +7,5 @@ title: Character count accessibility tests category: Components lead: Any USWDS character count component should pass these manual accessibility tests. changelog: - key: 'component-character-count-accessibility' + key: "component-character-count-accessibility" --- diff --git a/_components/checkbox/guidance/accessibility-tests.md b/_components/checkbox/guidance/accessibility-tests.md index a0df9e4b8f..96781773e4 100644 --- a/_components/checkbox/guidance/accessibility-tests.md +++ b/_components/checkbox/guidance/accessibility-tests.md @@ -2,10 +2,10 @@ permalink: /components/checkbox/accessibility-tests/ layout: accessibility-test component: - name: checkbox + name: checkbox title: Checkbox accessibility tests category: Components lead: Any USWDS checkbox component should pass these manual accessibility tests. changelog: - key: 'component-checkbox-accessibility' + key: "component-checkbox-accessibility" --- diff --git a/_components/collection/accessibility-tests.md b/_components/collection/accessibility-tests.md index 0fa01f3dd7..3a0894e109 100644 --- a/_components/collection/accessibility-tests.md +++ b/_components/collection/accessibility-tests.md @@ -7,5 +7,5 @@ title: Collection accessibility tests category: Components lead: Any USWDS collection component should pass these manual accessibility tests. changelog: - key: 'component-collection-accessibility' + key: "component-collection-accessibility" --- diff --git a/_components/combo-box/accessibility-tests.md b/_components/combo-box/accessibility-tests.md index 47b4be6dae..0ae3958616 100644 --- a/_components/combo-box/accessibility-tests.md +++ b/_components/combo-box/accessibility-tests.md @@ -2,10 +2,10 @@ permalink: /components/combo-box/accessibility-tests/ layout: accessibility-test component: - name: combo-box + name: combo-box title: Combo box accessibility tests category: Components lead: Any USWDS combo box component should pass these manual accessibility tests. changelog: - key: 'component-combo-box-accessibility' + key: "component-combo-box-accessibility" --- diff --git a/_components/date-picker/accessibility-tests.md b/_components/date-picker/accessibility-tests.md index bbbb4f9b54..8a6c7c93d0 100644 --- a/_components/date-picker/accessibility-tests.md +++ b/_components/date-picker/accessibility-tests.md @@ -2,10 +2,10 @@ permalink: /components/date-picker/accessibility-tests/ layout: accessibility-test component: - name: date-picker + name: date-picker title: Date picker accessibility tests category: Components lead: Any USWDS date picker component should pass these manual accessibility tests. changelog: - key: 'component-date-picker-accessibility' + key: "component-date-picker-accessibility" --- diff --git a/_components/date-range-picker/accessibility-tests.md b/_components/date-range-picker/accessibility-tests.md index 040fe5e5ac..4fabcd8a04 100644 --- a/_components/date-range-picker/accessibility-tests.md +++ b/_components/date-range-picker/accessibility-tests.md @@ -2,10 +2,10 @@ permalink: /components/date-range-picker/accessibility-tests/ layout: accessibility-test component: - name: date-range-picker + name: date-range-picker title: Date range picker accessibility tests category: Components lead: Any USWDS date range picker component should pass these manual accessibility tests. changelog: - key: 'component-date-range-picker-accessibility' ---- \ No newline at end of file + key: "component-date-range-picker-accessibility" +--- diff --git a/_components/footer/accessibility-tests.md b/_components/footer/accessibility-tests.md index aa9bc110fd..ffd8a67e01 100644 --- a/_components/footer/accessibility-tests.md +++ b/_components/footer/accessibility-tests.md @@ -7,5 +7,5 @@ title: Footer accessibility tests category: Components lead: Any USWDS footer component should pass these manual accessibility tests. changelog: - key: 'component-footer-accessibility' + key: "component-footer-accessibility" --- diff --git a/_components/header/accessibility-tests.md b/_components/header/accessibility-tests.md index ab9d2c8d3c..e18d083762 100644 --- a/_components/header/accessibility-tests.md +++ b/_components/header/accessibility-tests.md @@ -2,10 +2,10 @@ permalink: /components/header/accessibility-tests/ layout: accessibility-test component: - name: header + name: header title: Header accessibility tests category: Components lead: Any USWDS header component should pass these manual accessibility tests. changelog: - key: 'component-header-accessibility' + key: "component-header-accessibility" --- diff --git a/_components/icon-list/accessibility-tests.md b/_components/icon-list/accessibility-tests.md index 432dd4ba02..a7b21b2648 100644 --- a/_components/icon-list/accessibility-tests.md +++ b/_components/icon-list/accessibility-tests.md @@ -2,10 +2,10 @@ permalink: /components/icon-list/accessibility-tests/ layout: accessibility-test component: - name: icon list + name: icon list title: Icon list accessibility tests category: Components lead: Any USWDS icon list component should pass these manual accessibility tests. changelog: - key: 'component-icon-list-accessibility' + key: "component-icon-list-accessibility" --- diff --git a/_components/icon/accessibility-tests.md b/_components/icon/accessibility-tests.md index 52e8c93dfa..f4870f8f39 100644 --- a/_components/icon/accessibility-tests.md +++ b/_components/icon/accessibility-tests.md @@ -7,5 +7,5 @@ title: Icon accessibility tests category: Components lead: Any USWDS icon should pass these manual accessibility tests. changelog: - key: 'component-icon-accessibility' + key: "component-icon-accessibility" --- diff --git a/_components/identifier/accessibility-tests.md b/_components/identifier/accessibility-tests.md index 9f0c567e17..0785b8f1e4 100644 --- a/_components/identifier/accessibility-tests.md +++ b/_components/identifier/accessibility-tests.md @@ -7,5 +7,5 @@ title: Identifier accessibility tests category: Components lead: Any USWDS identifier component should pass these manual accessibility tests. changelog: - key: 'component-identifier-accessibility' ---- \ No newline at end of file + key: "component-identifier-accessibility" +--- diff --git a/_components/in-page-navigation/accessibility-tests.md b/_components/in-page-navigation/accessibility-tests.md index 172f57f8eb..60ab26e940 100644 --- a/_components/in-page-navigation/accessibility-tests.md +++ b/_components/in-page-navigation/accessibility-tests.md @@ -7,5 +7,5 @@ title: In-page navigation accessibility tests category: Components lead: Any USWDS in-page navigation component should pass these manual accessibility tests. changelog: - key: 'component-in-page-navigation-accessibility' + key: "component-in-page-navigation-accessibility" --- diff --git a/_components/link/accessibility-tests.md b/_components/link/accessibility-tests.md index 99325104ab..48a1794ddf 100644 --- a/_components/link/accessibility-tests.md +++ b/_components/link/accessibility-tests.md @@ -7,5 +7,5 @@ title: Link accessibility tests category: Components lead: Any USWDS link should pass these manual accessibility tests. changelog: - key: 'component-link-accessibility' + key: "component-link-accessibility" --- diff --git a/_components/list/accessibility-tests.md b/_components/list/accessibility-tests.md index 36b810b5b3..ba06cf2290 100644 --- a/_components/list/accessibility-tests.md +++ b/_components/list/accessibility-tests.md @@ -2,10 +2,10 @@ permalink: /components/list/accessibility-tests/ layout: accessibility-test component: - name: list + name: list title: List accessibility tests category: Components lead: Any USWDS list component should pass these manual accessibility tests. changelog: - key: 'component-list-accessibility' + key: "component-list-accessibility" --- diff --git a/_components/memorable-date/accessibility-tests.md b/_components/memorable-date/accessibility-tests.md index 991d57aecb..2a982d4d3c 100644 --- a/_components/memorable-date/accessibility-tests.md +++ b/_components/memorable-date/accessibility-tests.md @@ -2,10 +2,10 @@ permalink: /components/memorable-date/accessibility-tests/ layout: accessibility-test component: - name: memorable date + name: memorable date title: Memorable date accessibility tests category: Components lead: Any USWDS memorable date component should pass these manual accessibility tests. changelog: - key: 'component-memorable-date-accessibility' + key: "component-memorable-date-accessibility" --- diff --git a/_components/modal/accessibility-tests.md b/_components/modal/accessibility-tests.md index 350cdc6e7e..2efc41daa5 100644 --- a/_components/modal/accessibility-tests.md +++ b/_components/modal/accessibility-tests.md @@ -2,10 +2,10 @@ permalink: /components/modal/accessibility-tests/ layout: accessibility-test component: - name: modal + name: modal title: Modal accessibility tests category: Components lead: Any USWDS modal component should pass these manual accessibility tests. changelog: - key: 'component-modal-accessibility' + key: "component-modal-accessibility" --- diff --git a/_components/process-list/accessibility-tests.md b/_components/process-list/accessibility-tests.md index da34ab4d7d..f43183972c 100644 --- a/_components/process-list/accessibility-tests.md +++ b/_components/process-list/accessibility-tests.md @@ -2,10 +2,10 @@ permalink: /components/process-list/accessibility-tests/ layout: accessibility-test component: - name: process list + name: process list title: Process list accessibility tests category: Components lead: Any USWDS process list component should pass these manual accessibility tests. changelog: - key: 'component-process-list-accessibility' + key: "component-process-list-accessibility" --- diff --git a/_components/prose/accessibility-tests.md b/_components/prose/accessibility-tests.md index 2d57325377..58b1a9cadb 100644 --- a/_components/prose/accessibility-tests.md +++ b/_components/prose/accessibility-tests.md @@ -2,10 +2,10 @@ permalink: /components/prose/accessibility-tests/ layout: accessibility-test component: - name: prose + name: prose title: Prose accessibility tests category: Components lead: Any USWDS prose component should pass these manual accessibility tests. changelog: - key: 'component-prose-accessibility' + key: "component-prose-accessibility" --- diff --git a/_components/radio-buttons/accessibility-tests.md b/_components/radio-buttons/accessibility-tests.md index b274cc2d6d..90e1a9d51c 100644 --- a/_components/radio-buttons/accessibility-tests.md +++ b/_components/radio-buttons/accessibility-tests.md @@ -2,10 +2,10 @@ permalink: /components/radio-buttons/accessibility-tests/ layout: accessibility-test component: - name: radio buttons + name: radio buttons title: Radio buttons accessibility tests category: Components lead: Any USWDS radio button should pass these manual accessibility tests. changelog: - key: 'component-radio-buttons-accessibility' + key: "component-radio-buttons-accessibility" --- diff --git a/_components/search/accessibility-tests.md b/_components/search/accessibility-tests.md index 5ea62b314a..0f813cdd5f 100644 --- a/_components/search/accessibility-tests.md +++ b/_components/search/accessibility-tests.md @@ -2,10 +2,10 @@ permalink: /components/search/accessibility-tests/ layout: accessibility-test component: - name: search + name: search title: Search accessibility tests category: Components lead: Any USWDS search component should pass these manual accessibility tests. changelog: - key: 'component-search-accessibility' + key: "component-search-accessibility" --- diff --git a/_components/select/accessibility-tests.md b/_components/select/accessibility-tests.md index f5c53caea5..cc52adf474 100644 --- a/_components/select/accessibility-tests.md +++ b/_components/select/accessibility-tests.md @@ -7,5 +7,5 @@ title: Select accessibility tests category: Components lead: Any USWDS select component should pass these manual accessibility tests. changelog: - key: 'component-select-accessibility' ---- \ No newline at end of file + key: "component-select-accessibility" +--- diff --git a/_components/site-alert/accessibility-tests.md b/_components/site-alert/accessibility-tests.md index 2467b0f70e..c8504a8ca8 100644 --- a/_components/site-alert/accessibility-tests.md +++ b/_components/site-alert/accessibility-tests.md @@ -2,10 +2,10 @@ permalink: /components/site-alert/accessibility-tests/ layout: accessibility-test component: - name: site alert + name: site alert title: Site alert accessibility tests category: Components lead: Any USWDS site alert component should pass these manual accessibility tests. changelog: - key: 'component-site-alert-accessibility' + key: "component-site-alert-accessibility" --- diff --git a/_components/step-indicator/accessibility-tests.md b/_components/step-indicator/accessibility-tests.md index 2f17ddf246..434b797e9c 100644 --- a/_components/step-indicator/accessibility-tests.md +++ b/_components/step-indicator/accessibility-tests.md @@ -2,10 +2,10 @@ permalink: /components/step-indicator/accessibility-tests/ layout: accessibility-test component: - name: step indicator + name: step indicator title: Step indicator accessibility tests category: Components lead: Any USWDS step indicator component should pass these manual accessibility tests. changelog: - key: 'component-step-indicator-accessibility' + key: "component-step-indicator-accessibility" --- diff --git a/_components/summary-box/accessibility-tests.md b/_components/summary-box/accessibility-tests.md index 9a36abeedd..8024159de9 100644 --- a/_components/summary-box/accessibility-tests.md +++ b/_components/summary-box/accessibility-tests.md @@ -2,10 +2,10 @@ permalink: /components/summary-box/accessibility-tests/ layout: accessibility-test component: - name: Summary box + name: Summary box title: Summary box accessibility tests category: Components lead: Any USWDS summary box component should pass these manual accessibility tests. changelog: - key: 'component-summary-box-accessibility' + key: "component-summary-box-accessibility" --- diff --git a/_components/table/accessibility-tests.md b/_components/table/accessibility-tests.md index e169004abe..7f287ce497 100644 --- a/_components/table/accessibility-tests.md +++ b/_components/table/accessibility-tests.md @@ -7,5 +7,5 @@ title: Table accessibility tests category: Components lead: Any USWDS table should pass these manual accessibility tests. changelog: - key: 'component-table-accessibility' + key: "component-table-accessibility" --- diff --git a/_components/tag/accessibility-tests.md b/_components/tag/accessibility-tests.md index 66a67a6631..658235c5c6 100644 --- a/_components/tag/accessibility-tests.md +++ b/_components/tag/accessibility-tests.md @@ -7,5 +7,5 @@ title: Tag accessibility tests category: Components lead: Any non-interactive USWDS tag component should pass these manual accessibility tests. changelog: - key: 'component-tag-accessibility' + key: "component-tag-accessibility" --- diff --git a/_components/text-input/accessibility-tests.md b/_components/text-input/accessibility-tests.md index 5ebe4ac0f6..3113aba183 100644 --- a/_components/text-input/accessibility-tests.md +++ b/_components/text-input/accessibility-tests.md @@ -2,10 +2,10 @@ permalink: /components/text-input/accessibility-tests/ layout: accessibility-test component: - name: Text input + name: Text input title: Text input accessibility tests category: Components lead: Any USWDS text input component should pass these manual accessibility tests. changelog: - key: 'component-text-input-accessibility' + key: "component-text-input-accessibility" --- diff --git a/_components/time-picker/accessibility-tests.md b/_components/time-picker/accessibility-tests.md index 457236f9af..2a79a427a1 100644 --- a/_components/time-picker/accessibility-tests.md +++ b/_components/time-picker/accessibility-tests.md @@ -2,10 +2,10 @@ permalink: /components/time-picker/accessibility-tests/ layout: accessibility-test component: - name: time picker + name: time picker title: Time picker accessibility tests category: Components lead: Any USWDS time picker component should pass these manual accessibility tests. changelog: - key: 'component-time-picker-accessibility' + key: "component-time-picker-accessibility" --- diff --git a/_components/tooltip/accessibility-tests.md b/_components/tooltip/accessibility-tests.md index 14d15efb30..20014f7474 100644 --- a/_components/tooltip/accessibility-tests.md +++ b/_components/tooltip/accessibility-tests.md @@ -7,5 +7,5 @@ title: Tooltip accessibility tests category: Components lead: Any USWDS tooltip component should pass these manual accessibility tests. changelog: - key: 'component-tooltip-accessibility' + key: "component-tooltip-accessibility" --- diff --git a/_components/typography/accessibility-tests.md b/_components/typography/accessibility-tests.md index 6eb115dae2..af3258ec8f 100644 --- a/_components/typography/accessibility-tests.md +++ b/_components/typography/accessibility-tests.md @@ -7,5 +7,5 @@ title: Typography accessibility tests category: Components lead: USWDS typography should pass these manual accessibility tests. changelog: - key: 'component-typography-accessibility' + key: "component-typography-accessibility" --- diff --git a/_data/accessibility-tests/accordion.yml b/_data/accessibility-tests/accordion.yml index 79bb7366a6..7bc5f01892 100644 --- a/_data/accessibility-tests/accordion.yml +++ b/_data/accessibility-tests/accordion.yml @@ -1,7 +1,7 @@ title: Accordion component_status: pass test_items: -# Zoom/screen magnification items + # Zoom/screen magnification items - summary: No need to scroll horizontally when screen is magnified. summary_additional: | When you zoom to 200%, @@ -42,7 +42,7 @@ test_items: test_type: zoom version_tested: 3.5.0 wcag_criterion: 1.4.4 -# Keyboard navigation items + # Keyboard navigation items - summary: Interactive elements work after tabbing. summary_additional: | When you use the `tab` key to navigate into an open accordion panel, @@ -124,7 +124,7 @@ test_items: test_type: keyboard version_tested: 3.5.0 wcag_criterion: 2.4.7 -# Screen reader items + # Screen reader items - summary: Focus moves in a logical order when using a screen reader. summary_additional: | When you use a screen reader and navigate between accordion panels, diff --git a/_data/accessibility-tests/alert.yml b/_data/accessibility-tests/alert.yml index e99d81ed8b..203c5abb8d 100644 --- a/_data/accessibility-tests/alert.yml +++ b/_data/accessibility-tests/alert.yml @@ -1,7 +1,7 @@ title: Alert component_status: pass test_items: -# General tests + # General tests - summary: Color alone is not used to convey meaning. summary_additional: When viewing an alert, you never have to rely on color alone to determine part of its meaning. test_status: pass @@ -32,7 +32,7 @@ test_items: test_type: general version_tested: 3.8.2 wcag_criterion: 3.2.4 -# Zoom/screen magnification tests + # Zoom/screen magnification tests - summary: Alert remains visible and functional when screen is magnified. summary_additional: | When you zoom to 400%, you can still read content in the alert and surrounding area easily. @@ -40,7 +40,7 @@ test_items: test_type: zoom version_tested: 3.8.2 wcag_criterion: 1.4.10 -# Screen reader tests + # Screen reader tests - summary: Screen reader announces the alert in logical order. summary_additional: | When you use a screen reader and navigate to the alert, diff --git a/_data/accessibility-tests/banner.yml b/_data/accessibility-tests/banner.yml index 518b2930cd..e1aeb1786d 100644 --- a/_data/accessibility-tests/banner.yml +++ b/_data/accessibility-tests/banner.yml @@ -1,7 +1,7 @@ title: Banner component_status: pass test_items: -# General tests + # General tests - summary: Color is not the only method used to convey meaning in the banner. summary_additional: When viewing the banner, you never have to rely on color alone to understand meaning. test_status: pass @@ -30,7 +30,7 @@ test_items: test_type: general version_tested: 3.8.0 wcag_criterion: 3.2.4 -# Zoom/screen magnification tests + # Zoom/screen magnification tests - summary: Text remains visible when screen is magnified. summary_additional: | When you zoom in to 200%, @@ -47,7 +47,7 @@ test_items: test_type: zoom version_tested: 3.8.0 wcag_criterion: 1.4.10 -# Keyboard navigation tests + # Keyboard navigation tests - summary: Banner can be accessed, opened, and closed with only a keyboard. summary_additional: | When you navigate your site with a keyboard, @@ -83,7 +83,7 @@ test_items: test_type: keyboard version_tested: 3.8.0 wcag_criterion: 2.4.7 -# Screen reader tests + # Screen reader tests - summary: Screen reader announces button. summary_additional: | When you use a screen reader and access the banner, @@ -94,9 +94,9 @@ test_items: wcag_criterion: 2.4.6 - summary: Screen reader announces collapsed and expanded states. summary_additional: | - When you first access the "Here's how you know" button while using a screen reader, - the screen reader announces that it is "collapsed." - When activated, the screen reader announces "expanded." + When you first access the "Here's how you know" button while using a screen reader, + the screen reader announces that it is "collapsed." + When activated, the screen reader announces "expanded." test_status: pass test_type: screen_reader version_tested: 3.8.0 @@ -118,4 +118,4 @@ test_items: test_status: pass test_type: screen_reader version_tested: 3.8.0 - wcag_criterion: 1.1.1 \ No newline at end of file + wcag_criterion: 1.1.1 diff --git a/_data/accessibility-tests/button.yml b/_data/accessibility-tests/button.yml index f195709032..5485df60aa 100644 --- a/_data/accessibility-tests/button.yml +++ b/_data/accessibility-tests/button.yml @@ -1,7 +1,7 @@ title: Button component_status: pass test_items: -# General items + # General items - summary: Button text conveys its meaning. summary_additional: | When you view the button on a page and determine the button's purpose, @@ -26,7 +26,7 @@ test_items: test_type: general version_tested: 3.7.1 wcag_criterion: 2.5.5 -# Zoom/screen magnification items + # Zoom/screen magnification items - summary: Buttons are visible and functional when screen is magnified. summary_additional: | When you zoom the screen to 200%, @@ -37,7 +37,7 @@ test_items: test_type: zoom version_tested: 3.7.1 wcag_criterion: 1.4.10 -# Keyboard navigation items + # Keyboard navigation items - summary: Buttons do not trap focus. summary_additional: | When you use a keyboard to tab into a button and click `tab` again, @@ -61,7 +61,7 @@ test_items: test_type: keyboard version_tested: 3.7.1 wcag_criterion: 2.4.13 -# Screen reader items + # Screen reader items - summary: Screen reader announces buttons in the same order that they appear on the page. summary_additional: | When you use a screen reader and navigate from button to button on a page (using the `B` shortcut key or `tab` key), @@ -79,4 +79,3 @@ test_items: test_type: screen_reader version_tested: 3.7.1 wcag_criterion: 4.1.2 - diff --git a/_data/accessibility-tests/card.yml b/_data/accessibility-tests/card.yml index 8283e3e666..c6a95c6acc 100644 --- a/_data/accessibility-tests/card.yml +++ b/_data/accessibility-tests/card.yml @@ -1,7 +1,7 @@ title: Card component_status: pass test_items: -# General tests + # General tests - summary: Color is not the only method used to convey meaning. summary_additional: | When you view the elements in a card, @@ -39,7 +39,7 @@ test_items: test_type: general version_tested: 3.8.2 wcag_criterion: 2.5.8 -# Zoom/screen magnification tests + # Zoom/screen magnification tests - summary: Using zoom does not obstruct the card elements. summary_additional: | When you zoom in at 400%, you can see the card content and scroll up and down. @@ -48,7 +48,7 @@ test_items: test_type: zoom version_tested: 3.8.2 wcag_criterion: 1.4.10 -# Keyboard navigation tests + # Keyboard navigation tests - summary: Content is accessible through keyboard alone. summary_additional: | When you use only a keyboard, all links and buttons in the card are accessible. @@ -80,7 +80,7 @@ test_items: test_type: keyboard version_tested: 3.8.2 wcag_criterion: 2.4.7 -# Screen reader tests + # Screen reader tests - summary: Screen reader announces groups of cards as an unordered list. summary_additional: | When you use a screen reader to navigate through a card component, diff --git a/_data/accessibility-tests/character-count.yml b/_data/accessibility-tests/character-count.yml index 6cf4a88c86..c71e4863e0 100644 --- a/_data/accessibility-tests/character-count.yml +++ b/_data/accessibility-tests/character-count.yml @@ -1,7 +1,7 @@ title: Character count component_status: pass test_items: -# General tests + # General tests - summary: Visible instructions explain the field's input requirements. summary_additional: | The text field has a visible label above it to indicate its purpose. @@ -17,7 +17,7 @@ test_items: test_type: general version_tested: 3.7.1 wcag_criterion: 3.3.2 -# Zoom/screen magnification tests + # Zoom/screen magnification tests - summary: Content remains visible and functional when screen is magnified. summary_additional: | When you zoom in to 200%, @@ -34,14 +34,14 @@ test_items: test_type: zoom version_tested: 3.7.1 wcag_criterion: 1.4.12 -# Keyboard navigation tests + # Keyboard navigation tests - summary: Field can be accessed with keyboard navigation. summary_additional: Using only a keyboard, you are able to tab into and out of the test input field associated with the character count. test_status: pass test_type: keyboard version_tested: 3.7.1 wcag_criterion: 2.1.1 -# Screen reader tests + # Screen reader tests - summary: Screen reader announces remaining character count. summary_additional: | When you use a screen reader and tab to the text field, diff --git a/_data/accessibility-tests/checkbox.yml b/_data/accessibility-tests/checkbox.yml index f5c8df1d3e..19753b1ad7 100644 --- a/_data/accessibility-tests/checkbox.yml +++ b/_data/accessibility-tests/checkbox.yml @@ -1,41 +1,41 @@ title: Checkbox component_status: pass test_items: -# General tests - - summary: Visible instructions explain checkbox requirements. + # General tests + - summary: Visible instructions explain checkbox requirements. summary_additional: The checkbox has a visible label above it to indicate its purpose. For example, "Select your state." test_status: pass test_type: general version_tested: 3.8.0 wcag_criterion: 3.3.2 - summary: Checkbox labels are descriptive, brief and clear. - summary_additional: When you view or interact with the checkbox component on your page, all labels have short descriptions that are easy to understand and act on. + summary_additional: When you view or interact with the checkbox component on your page, all labels have short descriptions that are easy to understand and act on. test_status: pass test_type: general version_tested: 3.8.0 wcag_criterion: 2.4.6 -# Keyboard navigation tests + # Keyboard navigation tests - summary: Focus indicator on checkbox is clearly visible. - summary_additional: When you use a keyboard to focus on a checkbox group, you will see a visible outline or other clear indication of focus. + summary_additional: When you use a keyboard to focus on a checkbox group, you will see a visible outline or other clear indication of focus. test_status: pass test_type: keyboard version_tested: 3.8.0 wcag_criterion: 2.4.7 - summary: Checkbox focus follows logical content order. - summary_additional: When you tab through the checkbox with a keyboard, the focus stays in order of the content as intended. + summary_additional: When you tab through the checkbox with a keyboard, the focus stays in order of the content as intended. test_status: pass test_type: keyboard version_tested: 3.8.0 wcag_criterion: 2.4.3 - - summary: Users can access and select checkbox items using only a keyboard. + - summary: Users can access and select checkbox items using only a keyboard. summary_additional: When you use a keyboard to navigate to the checkbox, you are able to move focus using `tab` and can select options with `spacebar`. test_status: pass test_type: keyboard version_tested: 3.8.0 wcag_criterion: 2.1.1 -# Screen reader tests + # Screen reader tests - summary: Screen reader announces the checkbox group label and then announces each checkbox. - summary_additional: When listening to the checkbox button using a screen reader, you hear the question related to the checkbox read first. Then you will hear the checkbox group and labels within the checkbox and their checked state. + summary_additional: When listening to the checkbox button using a screen reader, you hear the question related to the checkbox read first. Then you will hear the checkbox group and labels within the checkbox and their checked state. test_status: pass test_type: screen_reader version_tested: 3.8.0 @@ -46,9 +46,9 @@ test_items: test_type: screen_reader version_tested: 3.8.0 wcag_criterion: 2.5.3 - - summary: Screen reader announces all labels. + - summary: Screen reader announces all labels. summary_additional: When you use a screen reader and navigate to a checkbox you hear every label or title associated with that check box. test_status: conditional test_type: screen_reader version_tested: 3.8.0 - wcag_criterion: 1.3.1 \ No newline at end of file + wcag_criterion: 1.3.1 diff --git a/_data/accessibility-tests/combo-box.yml b/_data/accessibility-tests/combo-box.yml index 22c534e426..ba395d7685 100644 --- a/_data/accessibility-tests/combo-box.yml +++ b/_data/accessibility-tests/combo-box.yml @@ -1,14 +1,14 @@ title: Combo box component_status: pass test_items: -# General tests - - summary: Combo box works on mobile devices. + # General tests + - summary: Combo box works on mobile devices. summary_additional: On mobile devices and tablets, combo box should work in both portrait and landscape orientation with no loss of functionality. test_status: pass test_type: general version_tested: 3.8.0 wcag_criterion: 1.3.4 - - summary: Color is not the only method used to convey meaning. + - summary: Color is not the only method used to convey meaning. summary_additional: When viewing a combo box, you never have to rely only on color to understand content. test_status: pass test_type: general @@ -38,14 +38,14 @@ test_items: test_type: general version_tested: 3.8.1 wcag_criterion: 3.2.2 -# Zoom/screen magnification tests - - summary: Using zoom does not obstruct the combo box. + # Zoom/screen magnification tests + - summary: Using zoom does not obstruct the combo box. summary_additional: When you zoom to 400%, you can see the combo box input and initial dropdown options. It does not overlap with other content and no scrolling is needed to see the dropdown has opened. test_status: pass test_type: zoom version_tested: 3.8.0 wcag_criterion: 1.4.10 -# Keyboard navigation tests + # Keyboard navigation tests - summary: Focus indicator is clearly visible around combo box. summary_additional: When you tab into a combo box, a visible outline or other clear indication of focus appears around the combo box and options within. test_status: pass @@ -64,14 +64,14 @@ test_items: test_type: keyboard version_tested: 3.8.0 wcag_criterion: 2.1.1 -# Screen reader tests + # Screen reader tests - summary: Screen reader announces type and number of options. summary_additional: When interacting with the combo box with a screen reader, you hear the component's label, the option names, and how many options there are. test_status: pass test_type: screen_reader version_tested: 3.8.0 wcag_criterion: 1.3.1 - - summary: Screen reader announces "combo box" upon initial interaction. + - summary: Screen reader announces "combo box" upon initial interaction. summary_additional: When you tab onto a combo box with a screen reader, you hear "combo box" along with instructions needed to complete the combo box. test_status: pass test_type: screen_reader @@ -89,8 +89,8 @@ test_items: test_type: screen_reader version_tested: 3.8.0 wcag_criterion: 3.3.2 - - summary: Screen reader announces label, role, value, and controls for combo box. - summary_additional: When using a screen reader with a combo box, you hear the label of the combo box, the role and the state. For example, the label is announced as "Select an option", the role is announced as "combo box", and the value is announced as "expanded". + - summary: Screen reader announces label, role, value, and controls for combo box. + summary_additional: When using a screen reader with a combo box, you hear the label of the combo box, the role and the state. For example, the label is announced as "Select an option", the role is announced as "combo box", and the value is announced as "expanded". test_status: conditional test_type: screen_reader version_tested: 3.8.0 diff --git a/_data/accessibility-tests/date-picker.yml b/_data/accessibility-tests/date-picker.yml index ba9d4914b3..d5a8e0e909 100644 --- a/_data/accessibility-tests/date-picker.yml +++ b/_data/accessibility-tests/date-picker.yml @@ -1,7 +1,7 @@ title: Date picker component_status: pass test_items: -# General tests + # General tests - summary: Touch target size for all clickable elements meets height and width requirements. summary_additional: | When you select any date picker element to inspect and review component code, @@ -38,7 +38,7 @@ test_items: test_type: general version_tested: 3.7.1 wcag_criterion: 3.3.2 -# Zoom/screen magnification tests + # Zoom/screen magnification tests - summary: Date picker elements are visible and functional when screen is magnified. summary_additional: | When you zoom in to 200%, you can use the date picker components with no loss of information. @@ -54,7 +54,7 @@ test_items: test_type: zoom version_tested: 3.7.1 wcag_criterion: 1.4.10 -# Keyboard navigation tests + # Keyboard navigation tests - summary: Date picker elements are accessible using only keyboard. summary_additional: | When you use a keyboard, you can navigate in and out of all the date picker elements using only the keyboard @@ -102,7 +102,7 @@ test_items: test_type: keyboard version_tested: 3.8.2 wcag_criterion: 3.2.1 -# Screen reader tests + # Screen reader tests - summary: Screen reader announces date picker elements. summary_additional: | When you use a screen reader and navigate through a date picker, @@ -121,7 +121,7 @@ test_items: wcag_criterion: 1.3.2 - summary: Screen reader announces date picker fields and their purpose. summary_additional: | - When you navigate to the date entry field, you hear that the input expects the day, month and year. + When you navigate to the date entry field, you hear that the input expects the day, month and year. test_status: pass test_type: screen_reader version_tested: 3.7.1 diff --git a/_data/accessibility-tests/date-range-picker.yml b/_data/accessibility-tests/date-range-picker.yml index 45d3288327..6a502aed4a 100644 --- a/_data/accessibility-tests/date-range-picker.yml +++ b/_data/accessibility-tests/date-range-picker.yml @@ -1,7 +1,7 @@ title: Date range picker component_status: pass test_items: -# General tests + # General tests - summary: Touch target size for all clickable elements meets height and width requirements. summary_additional: | When you select any date range picker element to inspect and review component code, @@ -38,7 +38,7 @@ test_items: test_type: general version_tested: 3.7.1 wcag_criterion: 3.3.2 -# Zoom/screen magnification tests + # Zoom/screen magnification tests - summary: Date range picker elements are visible and functional when screen is magnified. summary_additional: | When you zoom in to 200%, you can use the date range picker components with no loss of information. @@ -54,7 +54,7 @@ test_items: test_type: zoom version_tested: 3.7.1 wcag_criterion: 1.4.10 -# Keyboard navigation tests + # Keyboard navigation tests - summary: Date range picker elements are accessible using only keyboard. summary_additional: | When you use a keyboard, you can navigate in and out of all the date range picker elements using only the keyboard @@ -102,7 +102,7 @@ test_items: test_type: keyboard version_tested: 3.7.1 wcag_criterion: 3.2.1 -# Screen reader tests + # Screen reader tests - summary: Screen reader announces date range picker elements. summary_additional: | When you use a screen reader and navigate through a date range picker, @@ -121,7 +121,7 @@ test_items: wcag_criterion: 1.3.2 - summary: Screen reader announces date range picker fields and their purpose. summary_additional: | - When you navigate to the date entry field, you hear that the input expects the day, month and year. + When you navigate to the date entry field, you hear that the input expects the day, month and year. test_status: pass test_type: screen_reader version_tested: 3.7.1 diff --git a/_data/accessibility-tests/footer.yml b/_data/accessibility-tests/footer.yml index c8583dd680..4d84189eb8 100644 --- a/_data/accessibility-tests/footer.yml +++ b/_data/accessibility-tests/footer.yml @@ -1,7 +1,7 @@ title: Footer component_status: pass test_items: -# General tests + # General tests - summary: In the big footer variant, the email input field announces its purpose. summary_additional: When you navigate to the email address input field in the big footer variant, you hear that the input expects the user's email address. Additionally, the input field has the `autocomplete="email"` attribute. test_status: pass @@ -32,7 +32,7 @@ test_items: test_type: general version_tested: 3.8.1 wcag_criterion: 3.3.2 -# Zoom/screen magnification tests + # Zoom/screen magnification tests - summary: Footer remains visible and functional when screen is magnified. summary_additional: When you zoom in to 200%, you can still see footer text and it doesn't overlap with or get cut off by any other content. test_status: pass @@ -45,7 +45,7 @@ test_items: test_type: zoom version_tested: 3.8.1 wcag_criterion: 1.4.10 -# Keyboard navigation tests + # Keyboard navigation tests - summary: Keyboard navigates through all elements in the footer. summary_additional: When you navigate through the footer with a keyboard, you can interact with every element inside the footer. test_status: pass @@ -64,7 +64,7 @@ test_items: test_type: keyboard version_tested: 3.8.1 wcag_criterion: 2.4.7 -# Screen reader tests + # Screen reader tests - summary: Screen reader announces image alt text. summary_additional: When you navigate through the footer using a screen reader, you hear descriptions for the logos and other meaningful images. test_status: conditional diff --git a/_data/accessibility-tests/header.yml b/_data/accessibility-tests/header.yml index 12ca9985d2..dd00eb7bba 100644 --- a/_data/accessibility-tests/header.yml +++ b/_data/accessibility-tests/header.yml @@ -1,7 +1,7 @@ title: Header component_status: pass test_items: -# General tests + # General tests - summary: Header content is consistent in mobile views. summary_additional: | When you view the page on a mobile device, @@ -79,7 +79,7 @@ test_items: test_type: general version_tested: 3.8.1 wcag_criterion: 1.4.13 -# Zoom/screen magnification tests + # Zoom/screen magnification tests - summary: Header links are visible and functional when screen is magnified. summary_additional: | When you zoom in to 200%, @@ -97,7 +97,7 @@ test_items: test_type: zoom version_tested: 3.8.1 wcag_criterion: 1.4.10 -# Keyboard navigation tests + # Keyboard navigation tests - summary: Keyboard can access all elements in the header. summary_additional: | When you navigate through the header with a keyboard, @@ -166,7 +166,7 @@ test_items: test_type: keyboard version_tested: 3.8.1 wcag_criterion: 2.4.13 -# Screen reader tests + # Screen reader tests - summary: Screen reader announces header as a navigation landmark. summary_additional: | When you use a screen reader and access the header, diff --git a/_data/accessibility-tests/icon-list.yml b/_data/accessibility-tests/icon-list.yml index 7c81d9f603..c2c1304aa5 100644 --- a/_data/accessibility-tests/icon-list.yml +++ b/_data/accessibility-tests/icon-list.yml @@ -1,7 +1,7 @@ title: Icon list component_status: pass test_items: -# General tests + # General tests - summary: Descriptive alt text identifies icon purpose. summary_additional: When you view icons in an icon list component, you can mouse over an icon to see its meaning or purpose. Decorative icons will have no alt text. test_status: conditional @@ -32,14 +32,14 @@ test_items: test_type: general version_tested: 3.8.2 wcag_criterion: 3.2.4 -# Zoom/screen magnification tests + # Zoom/screen magnification tests - summary: Text and icons retain functionality when screen is magnified. summary_additional: When you zoom in to 200%, icons and text are readable and retain all of their functionality. test_status: pass test_type: zoom version_tested: 3.8.2 wcag_criterion: 1.4.4 -# Screen reader tests + # Screen reader tests - summary: Screen reader announces icon meaning and purpose when needed. summary_additional: When you listen to icon descriptions in a list using a screen reader, you can understand their meaning. Alt text descriptions indicate purpose. test_status: conditional diff --git a/_data/accessibility-tests/icon.yml b/_data/accessibility-tests/icon.yml index 9f091ac985..b69b3743c7 100644 --- a/_data/accessibility-tests/icon.yml +++ b/_data/accessibility-tests/icon.yml @@ -1,7 +1,7 @@ title: Icon component_status: pass test_items: -# General items + # General items - summary: Color is not the only method used to convey icon information. summary_additional: | When you view an icon paired with text, @@ -27,8 +27,8 @@ test_items: test_type: general version_tested: wcag_criterion: 3.2.4 -# Zoom/screen magnification items -# Keyboard navigation items + # Zoom/screen magnification items + # Keyboard navigation items - summary: Focus indicators are clearly visible on interactive icons. summary_additional: | When you use a keyboard to tab into an interactive icon, @@ -37,7 +37,7 @@ test_items: test_type: keyboard version_tested: wcag_criterion: 2.4.7 -# Screen reader items + # Screen reader items - summary: Icons provide a text alternative for screen readers when needed. summary_additional: | When you use a screen reader and navigate to a non-decorative icon, diff --git a/_data/accessibility-tests/identifier.yml b/_data/accessibility-tests/identifier.yml index 07db2a4de5..23b1ea7742 100644 --- a/_data/accessibility-tests/identifier.yml +++ b/_data/accessibility-tests/identifier.yml @@ -1,7 +1,7 @@ title: Identifier component_status: pass test_items: -# General tests + # General tests - summary: Color alone is not used to convey information. summary_additional: When viewing the identifier, you never have to rely on color alone to understand information. test_status: pass @@ -38,7 +38,7 @@ test_items: test_type: general version_tested: 3.8.1 wcag_criterion: 3.2.4 -# Zoom/screen magnification tests + # Zoom/screen magnification tests - summary: Text can be resized without loss of information. summary_additional: When you zoom in to 200%, text remains readable and visible within the identifier. test_status: pass @@ -51,7 +51,7 @@ test_items: test_type: zoom version_tested: 3.8.1 wcag_criterion: 1.4.10 -# Keyboard navigation tests + # Keyboard navigation tests - summary: Keyboard navigates through links in logical order. summary_additional: When tabbing through the identifier, you can access the links in a logical reading order. test_status: pass @@ -88,7 +88,7 @@ test_items: test_type: keyboard version_tested: 3.8.1 wcag_criterion: 3.2.1 -# Screen reader tests + # Screen reader tests - summary: Screen reader announces descriptive text for logos. summary_additional: When you use a screen reader on an identifier, the screen reader announces descriptive text for logos present in the identifier. test_status: conditional @@ -100,4 +100,4 @@ test_items: test_status: pass test_type: screen_reader version_tested: 3.8.1 - wcag_criterion: 1.3.1 \ No newline at end of file + wcag_criterion: 1.3.1 diff --git a/_data/accessibility-tests/link.yml b/_data/accessibility-tests/link.yml index e0d8dff68c..3dbff5a57d 100644 --- a/_data/accessibility-tests/link.yml +++ b/_data/accessibility-tests/link.yml @@ -1,7 +1,7 @@ title: Link component_status: pass test_items: -# General items + # General items - summary: Color is not the only method used to indicate links. summary_additional: | When you view the link and determine what your link's location is, @@ -18,8 +18,8 @@ test_items: test_type: general version_tested: 3.5.0 wcag_criterion: 1.3.1 -# Zoom/screen magnification items -# Keyboard navigation items + # Zoom/screen magnification items + # Keyboard navigation items - summary: The link is operable using the enter and spacebar keys. summary_additional: | When you use your tab key for navigation and press `enter` or `spacebar` for interaction, diff --git a/_data/accessibility-tests/list.yml b/_data/accessibility-tests/list.yml index 21399366c8..8a20f53085 100644 --- a/_data/accessibility-tests/list.yml +++ b/_data/accessibility-tests/list.yml @@ -1,7 +1,7 @@ title: List component_status: pass test_items: -# Zoom/screen magnification items + # Zoom/screen magnification items - summary: Text retains functionality when screen is magnified. summary_additional: | When you zoom into 200%, @@ -10,7 +10,7 @@ test_items: test_type: zoom version_tested: 3.8.0 wcag_criterion: 1.4.4 -# Screen reader items + # Screen reader items - summary: Screen reader announces list. summary_additional: | When you listen to a list with a screen reader, diff --git a/_data/accessibility-tests/memorable-date.yml b/_data/accessibility-tests/memorable-date.yml index cf30f2f6b7..3ef2f96cdc 100644 --- a/_data/accessibility-tests/memorable-date.yml +++ b/_data/accessibility-tests/memorable-date.yml @@ -1,7 +1,7 @@ title: Memorable date component_status: pass test_items: -# General tests + # General tests - summary: Memorable date display is consistent on mobile devices. summary_additional: When you view the memorable date component on mobile devices and tablets, it displays in both portrait and landscape orientation with no loss of functionality. test_status: pass @@ -32,14 +32,14 @@ test_items: test_type: general version_tested: 3.8.2 wcag_criterion: 2.5.8 -# Zoom/screen magnification tests + # Zoom/screen magnification tests - summary: Using zoom does not obstruct memorable date elements. summary_additional: When you zoom in to 400%, the content is still visible on the page. There is also no need for horizontal scrolling. test_status: pass test_type: zoom version_tested: 3.8.2 wcag_criterion: 1.4.10 -# Keyboard navigation tests + # Keyboard navigation tests - summary: Keyboard actions can access all memorable date functionality. summary_additional: You can change month, day and year and perform all other functions in a memorable date element using only your keyboard. test_status: pass @@ -53,18 +53,18 @@ test_items: version_tested: 3.8.2 wcag_criterion: 2.1.2 - summary: Focus indicator is clearly visible around memorable date elements. - summary_additional: When tabbing through the memorable date, a visible indicator shows where the user is. + summary_additional: When tabbing through the memorable date, a visible indicator shows where the user is. test_status: pass test_type: keyboard version_tested: 3.8.2 wcag_criterion: 2.4.7 - - summary: Tabbing into the memorable date doesn't trigger a change of context. + - summary: Tabbing into the memorable date doesn't trigger a change of context. summary_additional: When using a keyboard to select elements in the memorable date, there is no change until you activate the component with the enter key or spacebar. test_status: pass test_type: keyboard version_tested: 3.8.2 wcag_criterion: 3.2.1 -# Screen reader tests + # Screen reader tests - summary: Screen reader announces example text, label or supportive text. summary_additional: When interacting with the memorable date with a screen reader, you hear the field labels, text related to the field, and whether or not the field is required. test_status: pass @@ -77,4 +77,3 @@ test_items: test_type: screen_reader version_tested: 3.8.2 wcag_criterion: 4.1.2 - \ No newline at end of file diff --git a/_data/accessibility-tests/modal.yml b/_data/accessibility-tests/modal.yml index df5bfba881..aba899012a 100644 --- a/_data/accessibility-tests/modal.yml +++ b/_data/accessibility-tests/modal.yml @@ -1,7 +1,7 @@ title: Modal component_status: pass test_items: -# General tests + # General tests - summary: Modal is visible in multiple screen orientations. summary_additional: | When you view a modal on mobile, @@ -34,15 +34,15 @@ test_items: test_type: general version_tested: 3.8.2 wcag_criterion: 2.4.6 -# Zoom/screen magnification tests + # Zoom/screen magnification tests - summary: Modal content is visible at 400% zoom. summary_additional: | - When you zoom in at 400%, modal content is still visible. + When you zoom in at 400%, modal content is still visible. test_status: pass test_type: zoom version_tested: 3.8.2 wcag_criterion: 1.4.10 -# Keyboard navigation tests + # Keyboard navigation tests - summary: Active modals can be dismissed without using the mouse. summary_additional: | When a modal is open, you can close it by pressing the escape key @@ -100,7 +100,7 @@ test_items: test_type: keyboard version_tested: 3.8.2 wcag_criterion: 2.4.11 -# Screen reader tests + # Screen reader tests - summary: Screen reader announces modal headings. summary_additional: | When you use a screen reader and navigate through a modal, @@ -117,4 +117,3 @@ test_items: test_type: screen_reader version_tested: 3.8.2 wcag_criterion: 1.3.2 - diff --git a/_data/accessibility-tests/prose.yml b/_data/accessibility-tests/prose.yml index 52b78799fa..ddda1cad27 100644 --- a/_data/accessibility-tests/prose.yml +++ b/_data/accessibility-tests/prose.yml @@ -1,28 +1,28 @@ title: Prose component_status: pass test_items: -# General tests + # General tests - summary: Content is written in plain language. summary_additional: Content is easy to understand. It is written at the appropriate [grade level](https://www.w3.org/TR/WCAG21/#reading-level). Complex words are defined by a glossary or other method. test_status: conditional test_type: general version_tested: 3.7.1 wcag_criterion: 3.1.5 -# Zoom/screen magnification tests + # Zoom/screen magnification tests - summary: Text retains functionality when screen is magnified. summary_additional: When you zoom in to 200%, text and tables with text retain all of their functionality. test_status: pass test_type: zoom version_tested: 3.7.1 wcag_criterion: 1.4.4 -# Keyboard navigation tests + # Keyboard navigation tests - summary: Users can navigate between sections using only a keyboard. - summary_additional: You can navigate easily among headings, text sections, and links, even without a mouse. + summary_additional: You can navigate easily among headings, text sections, and links, even without a mouse. test_status: pass test_type: keyboard version_tested: 3.7.1 wcag_criterion: 2.1.1 -# Screen reader tests + # Screen reader tests - summary: Heading levels are logical. summary_additional: All header tags contain appropriate heading text that describes the content nested below it. Headings are nested appropriately. For example, there is only one `h1` per page, and no heading levels get skipped (e.g., no `h4`s nested directly under `h2`s without an `h3` between them). test_status: conditional diff --git a/_data/accessibility-tests/radio-buttons.yml b/_data/accessibility-tests/radio-buttons.yml index 56d6370bc0..dbc6da1b82 100644 --- a/_data/accessibility-tests/radio-buttons.yml +++ b/_data/accessibility-tests/radio-buttons.yml @@ -1,7 +1,7 @@ title: Radio buttons component_status: pass test_items: -# General tests + # General tests - summary: Radio button labels are descriptive, brief and clear. summary_additional: When you view radio buttons, all labels have short descriptions that are easy to understand and act on. test_status: pass @@ -20,7 +20,7 @@ test_items: test_type: general version_tested: 3.8.0 wcag_criterion: 3.3.2 -# Keyboard navigation tests + # Keyboard navigation tests - summary: Radio button focus can be moved and selection can be selected or deselected. summary_additional: When you use the spacebar and arrow keys on a keyboard, you can toggle between selections and clearly see when the choice is selected or not. test_status: pass @@ -45,7 +45,7 @@ test_items: test_type: keyboard version_tested: 3.8.0 wcag_criterion: 2.4.7 -# Screen reader tests + # Screen reader tests - summary: Screen reader announces question before any radio button and then related elements. summary_additional: When listening to the radio button using a screen reader, you hear the question related to the radio button read first. Then you will hear the radio button and label and its checked state. test_status: pass @@ -63,4 +63,4 @@ test_items: test_status: pass test_type: screen_reader version_tested: 3.8.0 - wcag_criterion: 1.3.1 \ No newline at end of file + wcag_criterion: 1.3.1 diff --git a/_data/accessibility-tests/search.yml b/_data/accessibility-tests/search.yml index 1f977d251d..ed4d1c718c 100644 --- a/_data/accessibility-tests/search.yml +++ b/_data/accessibility-tests/search.yml @@ -1,7 +1,7 @@ title: Search component_status: pass test_items: -# General tests + # General tests - summary: Search component matches device orientation. summary_additional: | On mobile devices and tablets, the search component should work in both portrait and landscape orientation with no loss of functionality. @@ -15,7 +15,7 @@ test_items: test_type: general version_tested: 3.8.0 wcag_criterion: 1.4.1 - - summary: Search button background and text meet color contrast requirements. + - summary: Search button background and text meet color contrast requirements. summary_additional: | When you use ANDI color contrast analyzer on the search button text, the contrast between background and lettering is at least 4.5:1. test_status: pass @@ -91,7 +91,7 @@ test_items: test_type: general version_tested: 3.8.0 wcag_criterion: 3.3.2 -# Zoom/screen magnification tests + # Zoom/screen magnification tests - summary: Using zoom does not obstruct the text field or search button. summary_additional: | When you zoom to 200%, you can see the text field and button. They do not overlap with other content, and no scrolling is needed. @@ -99,13 +99,13 @@ test_items: test_type: zoom version_tested: 3.8.0 wcag_criterion: 1.4.10 -# Keyboard navigation tests - - summary: A mouse is not required to perform actions in the search component. + # Keyboard navigation tests + - summary: A mouse is not required to perform actions in the search component. summary_additional: | When you use a keyboard to tab into the search component, you can type, delete, select and deselect the search button, and perform the search. test_status: exception - status_details: | + status_details: | Some browsers show an "x" that lets users delete text in the search field. This is not a result of USWDS; it is built-in browser behavior. Keyboard tabbing will not focus on the "x," but users can use the backspace key to delete text from the search field. github_issue_number: 5834 @@ -134,8 +134,8 @@ test_items: test_type: keyboard version_tested: 3.8.0 wcag_criterion: 2.4.13 -# Screen reader tests - - summary: Screen reader announces elements to match visual order on screen. + # Screen reader tests + - summary: Screen reader announces elements to match visual order on screen. summary_additional: | When using a screen reader, the search field and button are announced in the same order that they appear on the page. test_status: conditional diff --git a/_data/accessibility-tests/select.yml b/_data/accessibility-tests/select.yml index 05c84bf328..4ab924bc6d 100644 --- a/_data/accessibility-tests/select.yml +++ b/_data/accessibility-tests/select.yml @@ -1,7 +1,7 @@ title: Select component_status: pass test_items: -# General tests + # General tests - summary: Select component works on mobile devices. summary_additional: | On mobile devices and tablets, @@ -35,7 +35,7 @@ test_items: test_type: general version_tested: 3.8.0 wcag_criterion: 3.3.2 -# Zoom/screen magnification tests + # Zoom/screen magnification tests - summary: Select component remains functional when screen is magnified. summary_additional: | When you view the select and zoom to 400%, @@ -44,7 +44,7 @@ test_items: test_type: zoom version_tested: 3.8.0 wcag_criterion: 1.4.10 -# Keyboard navigation tests + # Keyboard navigation tests - summary: All features of the select element are keyboard operable. summary_additional: | When using a keyboard, @@ -70,7 +70,7 @@ test_items: test_type: keyboard version_tested: 3.8.0 wcag_criterion: 3.2.1 -# Screen reader tests + # Screen reader tests - summary: Screen reader announces select dropdown items in a list. summary_additional: | When you navigate with arrow keys, diff --git a/_data/accessibility-tests/site-alert.yml b/_data/accessibility-tests/site-alert.yml index bf2effaf5c..b9da0765ea 100644 --- a/_data/accessibility-tests/site-alert.yml +++ b/_data/accessibility-tests/site-alert.yml @@ -1,7 +1,7 @@ title: Site alert component_status: pass test_items: -# General tests + # General tests - summary: Color alone is not used to convey meaning. summary_additional: When viewing a site alert, you never have to rely on color alone to determine part of its meaning. test_status: pass @@ -29,7 +29,7 @@ test_items: test_type: general version_tested: 3.8.1 wcag_criterion: 3.2.4 -# Zoom/screen magnification tests + # Zoom/screen magnification tests - summary: Site alert remains visible and functional when screen is magnified. summary_additional: | When you zoom to 400%, you can still read content in the alert and surrounding area easily. @@ -37,7 +37,7 @@ test_items: test_type: zoom version_tested: 3.8.1 wcag_criterion: 1.4.10 -# Screen reader tests + # Screen reader tests - summary: Screen reader announces the site alert in logical order. summary_additional: | When you use a screen reader and reach the site alert, diff --git a/_data/accessibility-tests/table.yml b/_data/accessibility-tests/table.yml index af7f9e119b..5038821a7c 100644 --- a/_data/accessibility-tests/table.yml +++ b/_data/accessibility-tests/table.yml @@ -1,7 +1,7 @@ title: Table component_status: pass test_items: -# General tests + # General tests - summary: Color is not the only method used to convey meaning in a table. summary_additional: | When viewing the table, @@ -18,7 +18,7 @@ test_items: test_type: general version_tested: 3.7.1 wcag_criterion: 1.4.3 -# Zoom/screen magnification tests + # Zoom/screen magnification tests - summary: Table content is visible and functional when screen is magnified. summary_additional: | When you zoom to 200%, @@ -27,7 +27,7 @@ test_items: test_type: zoom version_tested: 3.7.1 wcag_criterion: 1.4.10 -# Keyboard navigation tests + # Keyboard navigation tests - summary: Table elements can be navigated by keyboard without special cues. summary_additional: | When using a keyboard to navigate a table, @@ -57,7 +57,7 @@ test_items: test_type: keyboard version_tested: 3.7.1 wcag_criterion: 2.4.7 -# Screen reader tests + # Screen reader tests - summary: Table cells are read one at a time and provide context for each cell. summary_additional: | When using a screen reader to navigate a table, diff --git a/_data/accessibility-tests/tag.yml b/_data/accessibility-tests/tag.yml index 20da0ec1c6..9197377ada 100644 --- a/_data/accessibility-tests/tag.yml +++ b/_data/accessibility-tests/tag.yml @@ -1,7 +1,7 @@ title: Tag component_status: pass test_items: -# General tests + # General tests - summary: Color alone is not used to convey meaning. summary_additional: When viewing a tag, you never have to rely on color alone to determine part of its meaning. test_status: pass @@ -20,7 +20,7 @@ test_items: test_type: general version_tested: 3.8.0 wcag_criterion: 1.4.11 -# Zoom/screen magnification tests + # Zoom/screen magnification tests - summary: Tags are visible and functional when screen is magnified. summary_additional: When you zoom in to 200%, you can use the tag components with no loss of information. test_status: pass diff --git a/_data/accessibility-tests/text-input.yml b/_data/accessibility-tests/text-input.yml index 9d78a4942f..1016a3ccd6 100644 --- a/_data/accessibility-tests/text-input.yml +++ b/_data/accessibility-tests/text-input.yml @@ -1,15 +1,15 @@ title: Text input component_status: pass test_items: -# General tests + # General tests - summary: Instructions that use visual cues also provide non-visual instruction. summary_additional: | - If you use visual cues like shapes or locations to describe controls (e.g., "input below"), also provide extra instructions. This way, users who can't see shapes or locations can still understand how to use the controls. + If you use visual cues like shapes or locations to describe controls (e.g., "input below"), also provide extra instructions. This way, users who can't see shapes or locations can still understand how to use the controls. test_status: conditional test_type: general version_tested: 3.8.0 wcag_criterion: 1.3.3 - - summary: Text inputs work on mobile devices. + - summary: Text inputs work on mobile devices. summary_additional: | On mobile devices and tablets, text inputs should work in both portrait and landscape orientation with no loss of functionality. @@ -23,14 +23,14 @@ test_items: test_type: general version_tested: 3.8.0 wcag_criterion: 1.4.1 -# Zoom/screen magnification tests + # Zoom/screen magnification tests - summary: Text inputs remain functional when screen is magnified. summary_additional: When you zoom to 200%, the text area remains visible and functional. test_status: pass test_type: zoom version_tested: 3.8.0 wcag_criterion: 1.4.4 -# Keyboard navigation tests + # Keyboard navigation tests - summary: Text field is accesible via keyboard navigation. summary_additional: Using only a keyboard, you can navigate to the text field, type in it, and navigate away from it. test_status: pass @@ -43,8 +43,8 @@ test_items: test_type: keyboard version_tested: 3.8.0 wcag_criterion: 2.4.7 -# Screen reader tests - - summary: Fields and labels are read in the same order that they appear on the page. + # Screen reader tests + - summary: Fields and labels are read in the same order that they appear on the page. summary_additional: | When you use a screen reader and navigate through input fields, you hear each text field and label announced in the same order in which they appear on the page (e.g., left to right and @@ -59,7 +59,7 @@ test_items: of the input is to type in text. For example, "Edit, blank. Type in text." test_status: pass test_type: screen_reader - version_tested: 3.8.0 + version_tested: 3.8.0 wcag_criterion: 1.3.5 - summary: Screen reader announces field labels and instructions. summary_additional: | diff --git a/_data/accessibility-tests/time-picker.yml b/_data/accessibility-tests/time-picker.yml index 0985a7dc1d..97304d7be0 100644 --- a/_data/accessibility-tests/time-picker.yml +++ b/_data/accessibility-tests/time-picker.yml @@ -1,7 +1,7 @@ title: Time picker component_status: pass test_items: -# General tests + # General tests - summary: Time picker display is consistent in mobile views. summary_additional: When you view the time picker component on mobile devices and tablets, it displays in both portrait and landscape orientation with no loss of functionality. test_status: pass @@ -20,9 +20,9 @@ test_items: test_type: general version_tested: 3.8.2 wcag_criterion: 3.3.2 -# Zoom/screen magnification tests + # Zoom/screen magnification tests - summary: Time picker elements are visible and functional when screen is magnified. - summary_additional: When you zoom in to 200%, the time picker is still readable, legible and properly sized. + summary_additional: When you zoom in to 200%, the time picker is still readable, legible and properly sized. test_status: pass test_type: zoom version_tested: 3.8.1 @@ -33,7 +33,7 @@ test_items: test_type: zoom version_tested: 3.8.1 wcag_criterion: 1.4.10 -# Keyboard navigation tests + # Keyboard navigation tests - summary: Keyboard can operate the time picker. summary_additional: When you navigate through the time picker with a keyboard, you can interact with every element inside it. test_status: pass @@ -52,7 +52,7 @@ test_items: test_type: keyboard version_tested: 3.8.1 wcag_criterion: 3.2.1 -# Screen reader tests + # Screen reader tests - summary: Screen reader announces all instructions. summary_additional: When you use a screen reader and navigate through a time picker, you hear every instruction for how to select a time and for any options available. test_status: pass @@ -70,4 +70,4 @@ test_items: test_status: pass test_type: screen_reader version_tested: 3.8.2 - wcag_criterion: 4.1.2 \ No newline at end of file + wcag_criterion: 4.1.2 diff --git a/_data/accessibility-tests/tooltip.yml b/_data/accessibility-tests/tooltip.yml index a974abb081..b25a7ae501 100644 --- a/_data/accessibility-tests/tooltip.yml +++ b/_data/accessibility-tests/tooltip.yml @@ -1,7 +1,7 @@ title: Tooltip component_status: pass test_items: -# General tests + # General tests - summary: Color is not the only method used to communicate the purpose of the tooltip. summary_additional: | When you view the tooltip, the text, and never color alone, convey its purpose. @@ -45,7 +45,7 @@ test_items: test_type: general version_tested: 3.8.1 wcag_criterion: 1.4.13 -# Zoom/screen magnification tests + # Zoom/screen magnification tests - summary: Using zoom does not obstruct the tooltip or other content. summary_additional: When you zoom to 200%, the tooltip content remains visible and does not overlap with other content. test_status: pass @@ -58,7 +58,7 @@ test_items: test_type: zoom version_tested: 3.8.0 wcag_criterion: 1.4.10 -# Keyboard navigation tests + # Keyboard navigation tests - summary: Tooltips can be accessed with only a keyboard. summary_additional: When you tab to an element that has a tooltip, the tooltip activates. test_status: pass @@ -77,7 +77,7 @@ test_items: test_type: keyboard version_tested: 3.8.0 wcag_criterion: 2.4.7 -# Screen reader tests + # Screen reader tests - summary: Screen reader announces tooltip content. summary_additional: | When you focus on the tooltip trigger, diff --git a/_data/accessibility-tests/typography.yml b/_data/accessibility-tests/typography.yml index 41fd911613..3674b1b6e0 100644 --- a/_data/accessibility-tests/typography.yml +++ b/_data/accessibility-tests/typography.yml @@ -1,7 +1,7 @@ title: Typography component_status: pass test_items: -# General tests + # General tests - summary: Text meets color contrast requirements. summary_additional: | When you view text on a page and use ANDI or a color contrast analyzer to look at the hex colors, @@ -20,7 +20,7 @@ test_items: test_type: general version_tested: 3.6.1 wcag_criterion: 2.4.6 -# Zoom/screen magnification tests + # Zoom/screen magnification tests - summary: Text can be resized without loss of information. summary_additional: | When you zoom to 200%, diff --git a/_data/changelogs/component-card-accessibility.yml b/_data/changelogs/component-card-accessibility.yml index cb1f00e01d..532cf5e251 100644 --- a/_data/changelogs/component-card-accessibility.yml +++ b/_data/changelogs/component-card-accessibility.yml @@ -1,8 +1,8 @@ title: Card accessibility tests type: component items: - - date: 2025-02-14 - summary: Added accessibility tests page. - affectsGuidance: true - githubPr: 3101 - githubRepo: uswds-site + - date: 2025-02-14 + summary: Added accessibility tests page. + affectsGuidance: true + githubPr: 3101 + githubRepo: uswds-site diff --git a/_data/changelogs/component-character-count-accessibility.yml b/_data/changelogs/component-character-count-accessibility.yml index b01606e44e..64a3f9a49b 100644 --- a/_data/changelogs/component-character-count-accessibility.yml +++ b/_data/changelogs/component-character-count-accessibility.yml @@ -1,8 +1,8 @@ title: Character count accessibility tests type: component items: - - date: 2024-05-15 - summary: Added accessibility tests page. - affectsGuidance: true - githubPr: 2607 - githubRepo: uswds-site + - date: 2024-05-15 + summary: Added accessibility tests page. + affectsGuidance: true + githubPr: 2607 + githubRepo: uswds-site diff --git a/_data/changelogs/component-character-count.yml b/_data/changelogs/component-character-count.yml index 13498c5c79..c4f96bf99b 100644 --- a/_data/changelogs/component-character-count.yml +++ b/_data/changelogs/component-character-count.yml @@ -4,7 +4,7 @@ changelogURL: items: - date: 2024-10-04 summary: Enhanced visual cue when `maxlength` is exceeded. - summaryAdditional: Now, the component uses standard USWDS error styles to visually enhance the error state. + summaryAdditional: Now, the component uses standard USWDS error styles to visually enhance the error state. affectsJavascript: true affectsStyles: true githubPr: 5908 diff --git a/_data/changelogs/component-checkbox-accessibility.yml b/_data/changelogs/component-checkbox-accessibility.yml index 0bf00f3422..d5d8219c5c 100644 --- a/_data/changelogs/component-checkbox-accessibility.yml +++ b/_data/changelogs/component-checkbox-accessibility.yml @@ -1,8 +1,8 @@ title: Checkbox type: component items: - - date: 2024-09-18 - summary: Added accessibility tests page. - affectsGuidance: true - githubPr: 2803 - githubRepo: uswds-site \ No newline at end of file + - date: 2024-09-18 + summary: Added accessibility tests page. + affectsGuidance: true + githubPr: 2803 + githubRepo: uswds-site diff --git a/_data/changelogs/component-combo-box-accessibility.yml b/_data/changelogs/component-combo-box-accessibility.yml index e3253a704d..95001b8e88 100644 --- a/_data/changelogs/component-combo-box-accessibility.yml +++ b/_data/changelogs/component-combo-box-accessibility.yml @@ -1,8 +1,8 @@ title: Combo box accessibility tests type: component items: - - date: 2024-09-18 - summary: Added accessibility tests page. - affectsGuidance: true - githubPr: 2811 - githubRepo: uswds-site \ No newline at end of file + - date: 2024-09-18 + summary: Added accessibility tests page. + affectsGuidance: true + githubPr: 2811 + githubRepo: uswds-site diff --git a/_data/changelogs/component-combo-box.yml b/_data/changelogs/component-combo-box.yml index 983663fa8c..a97d07816c 100644 --- a/_data/changelogs/component-combo-box.yml +++ b/_data/changelogs/component-combo-box.yml @@ -4,7 +4,7 @@ changelogURL: items: - date: 2024-11-13 summary: Updated the order of combo box search results. - summaryAdditional: The component now displays options that start with the query at the top of the list, followed by options that contain the query. This behavior more closely aligns with user expectations. + summaryAdditional: The component now displays options that start with the query at the top of the list, followed by options that contain the query. This behavior more closely aligns with user expectations. isBreaking: false affectsJavascript: true githubPr: 6122 diff --git a/_data/changelogs/component-date-picker.yml b/_data/changelogs/component-date-picker.yml index 234e92fa05..bcd749dc7d 100644 --- a/_data/changelogs/component-date-picker.yml +++ b/_data/changelogs/component-date-picker.yml @@ -14,7 +14,7 @@ items: githubRepo: uswds-site - date: 2024-10-04 summary: Fixed a bug that caused `mouseover` events to prevent keyboard navigation. - summaryAdditional: Now when you hover your mouse over the date picker buttons, only the hover state will be triggered. + summaryAdditional: Now when you hover your mouse over the date picker buttons, only the hover state will be triggered. affectsAccessibility: true affectsJavascript: true githubPr: 5774 diff --git a/_data/changelogs/component-date-range-picker.yml b/_data/changelogs/component-date-range-picker.yml index 959e4c65a4..84bd76a3d2 100644 --- a/_data/changelogs/component-date-range-picker.yml +++ b/_data/changelogs/component-date-range-picker.yml @@ -14,7 +14,7 @@ items: githubRepo: uswds-site - date: 2024-10-04 summary: Fixed a bug that caused `mouseover` events to prevent keyboard navigation. - summaryAdditional: Now when you hover your mouse over the date picker buttons, only the hover state will be triggered. + summaryAdditional: Now when you hover your mouse over the date picker buttons, only the hover state will be triggered. affectsAccessibility: true affectsJavascript: true githubPr: 5774 diff --git a/_data/changelogs/component-footer.yml b/_data/changelogs/component-footer.yml index 9b97e23bb0..d3e8420b66 100644 --- a/_data/changelogs/component-footer.yml +++ b/_data/changelogs/component-footer.yml @@ -3,7 +3,7 @@ type: component changelogURL: items: - date: 2024-12-18 - summary: 'Removed `overflow: hidden` from `usa-footer` to allow the full focus outline to show.' + summary: "Removed `overflow: hidden` from `usa-footer` to allow the full focus outline to show." summaryAdditional: This fix also improves horizontal alignment in the slim footer variant. affectsStyles: true affectsAccessibility: true @@ -25,7 +25,7 @@ items: githubRepo: uswds-site - date: 2024-05-31 summary: Restored the `usa-layout-grid` dependency in the footer package and removed layout grid styles from the footer stylesheet. - summaryAdditional: This update prevents visual regressions in footer and other components with layout grid utility classes in their markup. + summaryAdditional: This update prevents visual regressions in footer and other components with layout grid utility classes in their markup. affectsStyles: true githubPr: 5930 githubRepo: uswds diff --git a/_data/changelogs/component-form.yml b/_data/changelogs/component-form.yml index 6ac21ae887..7497d5304e 100644 --- a/_data/changelogs/component-form.yml +++ b/_data/changelogs/component-form.yml @@ -20,7 +20,7 @@ items: githubRepo: uswds-site - date: 2024-03-11 summary: Added color contrast checks for disabled tokens. - summaryAdditional: On compilation, USWDS will test disabled element color contrast and provide a fallback color if minimum contrast is not met. If the fallback does not meet minimum requirements, USWDS will provide a warning in the terminal. + summaryAdditional: On compilation, USWDS will test disabled element color contrast and provide a fallback color if minimum contrast is not met. If the fallback does not meet minimum requirements, USWDS will provide a warning in the terminal. affectsAccessibility: true affectsStyles: true githubPr: 5455 diff --git a/_data/changelogs/component-header-accessibility.yml b/_data/changelogs/component-header-accessibility.yml index a43604be5b..ea083b11d2 100644 --- a/_data/changelogs/component-header-accessibility.yml +++ b/_data/changelogs/component-header-accessibility.yml @@ -1,8 +1,8 @@ title: Header accessibility tests type: component items: - - date: 2024-08-13 - summary: Added accessibility tests page. - affectsGuidance: true - githubPr: 2761 - githubRepo: uswds-site \ No newline at end of file + - date: 2024-08-13 + summary: Added accessibility tests page. + affectsGuidance: true + githubPr: 2761 + githubRepo: uswds-site diff --git a/_data/changelogs/component-icon-list-accessibility.yml b/_data/changelogs/component-icon-list-accessibility.yml index c38aa4f741..a04c985872 100644 --- a/_data/changelogs/component-icon-list-accessibility.yml +++ b/_data/changelogs/component-icon-list-accessibility.yml @@ -1,8 +1,8 @@ title: Icon list accessibility tests type: component items: - - date: 2024-12-13 - summary: Added accessibility tests page. - affectsGuidance: true - githubPr: 3008 - githubRepo: uswds-site + - date: 2024-12-13 + summary: Added accessibility tests page. + affectsGuidance: true + githubPr: 3008 + githubRepo: uswds-site diff --git a/_data/changelogs/component-identifier-accessibility.yml b/_data/changelogs/component-identifier-accessibility.yml index 055e98b112..b13e1d948d 100644 --- a/_data/changelogs/component-identifier-accessibility.yml +++ b/_data/changelogs/component-identifier-accessibility.yml @@ -6,4 +6,4 @@ items: summary: Added accessibility tests page. affectsGuidance: true githubPr: 2754 - githubRepo: uswds-site \ No newline at end of file + githubRepo: uswds-site diff --git a/_data/changelogs/component-link-accessibility.yml b/_data/changelogs/component-link-accessibility.yml index 03f2a19b2f..8e59817e3a 100644 --- a/_data/changelogs/component-link-accessibility.yml +++ b/_data/changelogs/component-link-accessibility.yml @@ -7,4 +7,3 @@ items: affectsGuidance: true githubPr: 2138 githubRepo: uswds-site - \ No newline at end of file diff --git a/_data/changelogs/component-list-accessibility.yml b/_data/changelogs/component-list-accessibility.yml index 5146915808..d2cf6fb2ea 100644 --- a/_data/changelogs/component-list-accessibility.yml +++ b/_data/changelogs/component-list-accessibility.yml @@ -1,9 +1,8 @@ title: List accessibility tests type: component items: - - date: 2024-08-13 - summary: Added accessibility tests page. - affectsGuidance: true - githubPr: 2746 - githubRepo: uswds-site - \ No newline at end of file + - date: 2024-08-13 + summary: Added accessibility tests page. + affectsGuidance: true + githubPr: 2746 + githubRepo: uswds-site diff --git a/_data/changelogs/component-list.yml b/_data/changelogs/component-list.yml index 55603fde4f..c6bb54a5b1 100644 --- a/_data/changelogs/component-list.yml +++ b/_data/changelogs/component-list.yml @@ -2,22 +2,22 @@ title: List type: component changelogURL: items: -- date: 2024-08-13 - summary: Added WCAG compliance tag and accessibility test status section. - affectsGuidance: true - githubPr: 2746 - githubRepo: uswds-site -- date: 2023-11-20 - summary: Added documentation for `usa-list--unstyled` variant. - affectsGuidance: true - githubPr: 2162 - githubRepo: uswds-site -- date: 2022-04-28 - summary: Updated to Sass module syntax and new package structure. - isBreaking: true - affectsAssets: true - affectsJavascript: true - affectsStyles: true - githubPr: 4656 - githubRepo: uswds - versionUswds: 3.0.0 + - date: 2024-08-13 + summary: Added WCAG compliance tag and accessibility test status section. + affectsGuidance: true + githubPr: 2746 + githubRepo: uswds-site + - date: 2023-11-20 + summary: Added documentation for `usa-list--unstyled` variant. + affectsGuidance: true + githubPr: 2162 + githubRepo: uswds-site + - date: 2022-04-28 + summary: Updated to Sass module syntax and new package structure. + isBreaking: true + affectsAssets: true + affectsJavascript: true + affectsStyles: true + githubPr: 4656 + githubRepo: uswds + versionUswds: 3.0.0 diff --git a/_data/changelogs/component-memorable-date-accessibility.yml b/_data/changelogs/component-memorable-date-accessibility.yml index 00f4cc80c4..e2095fdb25 100644 --- a/_data/changelogs/component-memorable-date-accessibility.yml +++ b/_data/changelogs/component-memorable-date-accessibility.yml @@ -1,9 +1,8 @@ title: Memorable date accessibility tests type: component items: - - date: 2024-11-19 - summary: Added accessibility tests page. - affectsGuidance: true - githubPr: 2919 - githubRepo: uswds-site - \ No newline at end of file + - date: 2024-11-19 + summary: Added accessibility tests page. + affectsGuidance: true + githubPr: 2919 + githubRepo: uswds-site diff --git a/_data/changelogs/component-memorable-date.yml b/_data/changelogs/component-memorable-date.yml index f8209ee8e7..04451d8b92 100644 --- a/_data/changelogs/component-memorable-date.yml +++ b/_data/changelogs/component-memorable-date.yml @@ -2,69 +2,69 @@ title: Memorable date type: component changelogURL: items: -- date: 2024-11-19 - summary: Added WCAG compliance tag and accessibility test status section. - affectsGuidance: true - githubPr: 2919 - githubRepo: uswds-site -- date: 2024-11-06 - summary: Added known issues section. - summaryAdditional: - affectsGuidance: true - githubPr: 2716 - githubRepo: uswds-site -- date: 2024-10-04 - summary: Removed numeric representation of months from the `select` element. - summaryAdditional: Recent usability testing indicated that having both numbers and names to represent months was confusing for screen reader users. - affectsAccessibility: true - affectsContent: true - affectsMarkup: true - githubRepo: uswds - githubPr: 6028 - versionUswds: 3.9.0 -- date: 2023-08-23 - summary: Updated styles to allow the component to wrap to multiple lines at narrow widths. - summaryAdditional: - affectsAccessibility: true - affectsStyles: true - githubRepo: uswds - githubPr: 5372 - versionUswds: 3.6.0 -- date: 2022-11-14 - summary: Updated the month entry to a `select` from an `input`. - summaryAdditional: Recent usability testing indicated that using a `select` for month entry was more clear and reduced mistakes. - affectsMarkup: true - affectsStyles: true - affectsGuidance: true - githubRepo: uswds - githubPr: 4937 - versionUswds: 3.3.0 -- date: 2022-04-28 - summary: Added guidance for adding labels and using text boxes in place of select elements. - affectsGuidance: true - githubPr: 1538 - githubRepo: uswds-site -- date: 2022-04-28 - summary: Updated package name to `usa-memorable-date`. - affectsGuidance: true - githubPr: 1538 - githubRepo: uswds-site -- date: 2022-04-28 - summary: Renamed component from "date input" to "memorable date". - affectsGuidance: true - githubPr: 1538 - githubRepo: uswds-site -- date: 2022-04-28 - summary: Updated to Sass module syntax and new package structure. - isBreaking: true - affectsAssets: true - affectsJavascript: true - affectsStyles: true - githubPr: 4656 - githubRepo: uswds - versionUswds: 3.0.0 -- date: 2022-04-13 - summary: Updated package name to `form-controls`. - affectsGuidance: true - githubPr: 1497 - githubRepo: uswds-site + - date: 2024-11-19 + summary: Added WCAG compliance tag and accessibility test status section. + affectsGuidance: true + githubPr: 2919 + githubRepo: uswds-site + - date: 2024-11-06 + summary: Added known issues section. + summaryAdditional: + affectsGuidance: true + githubPr: 2716 + githubRepo: uswds-site + - date: 2024-10-04 + summary: Removed numeric representation of months from the `select` element. + summaryAdditional: Recent usability testing indicated that having both numbers and names to represent months was confusing for screen reader users. + affectsAccessibility: true + affectsContent: true + affectsMarkup: true + githubRepo: uswds + githubPr: 6028 + versionUswds: 3.9.0 + - date: 2023-08-23 + summary: Updated styles to allow the component to wrap to multiple lines at narrow widths. + summaryAdditional: + affectsAccessibility: true + affectsStyles: true + githubRepo: uswds + githubPr: 5372 + versionUswds: 3.6.0 + - date: 2022-11-14 + summary: Updated the month entry to a `select` from an `input`. + summaryAdditional: Recent usability testing indicated that using a `select` for month entry was more clear and reduced mistakes. + affectsMarkup: true + affectsStyles: true + affectsGuidance: true + githubRepo: uswds + githubPr: 4937 + versionUswds: 3.3.0 + - date: 2022-04-28 + summary: Added guidance for adding labels and using text boxes in place of select elements. + affectsGuidance: true + githubPr: 1538 + githubRepo: uswds-site + - date: 2022-04-28 + summary: Updated package name to `usa-memorable-date`. + affectsGuidance: true + githubPr: 1538 + githubRepo: uswds-site + - date: 2022-04-28 + summary: Renamed component from "date input" to "memorable date". + affectsGuidance: true + githubPr: 1538 + githubRepo: uswds-site + - date: 2022-04-28 + summary: Updated to Sass module syntax and new package structure. + isBreaking: true + affectsAssets: true + affectsJavascript: true + affectsStyles: true + githubPr: 4656 + githubRepo: uswds + versionUswds: 3.0.0 + - date: 2022-04-13 + summary: Updated package name to `form-controls`. + affectsGuidance: true + githubPr: 1497 + githubRepo: uswds-site diff --git a/_data/changelogs/component-modal-accessibility.yml b/_data/changelogs/component-modal-accessibility.yml index 8dc5479346..664d1b45da 100644 --- a/_data/changelogs/component-modal-accessibility.yml +++ b/_data/changelogs/component-modal-accessibility.yml @@ -1,8 +1,8 @@ title: Modal accessibility tests type: component items: - - date: 2025-02-14 - summary: Added accessibility tests page. - affectsGuidance: true - githubPr: 3103 - githubRepo: uswds-site + - date: 2025-02-14 + summary: Added accessibility tests page. + affectsGuidance: true + githubPr: 3103 + githubRepo: uswds-site diff --git a/_data/changelogs/component-prose-accessibility.yml b/_data/changelogs/component-prose-accessibility.yml index f0b9bb18ac..a6903cf1df 100644 --- a/_data/changelogs/component-prose-accessibility.yml +++ b/_data/changelogs/component-prose-accessibility.yml @@ -1,8 +1,8 @@ title: Prose accessibility tests type: component items: -- date: 2024-04-18 - summary: Added accessibility tests page. - affectsGuidance: true - githubPr: 2613 - githubRepo: uswds-site + - date: 2024-04-18 + summary: Added accessibility tests page. + affectsGuidance: true + githubPr: 2613 + githubRepo: uswds-site diff --git a/_data/changelogs/component-prose.yml b/_data/changelogs/component-prose.yml index 24566b043d..73cad6045f 100644 --- a/_data/changelogs/component-prose.yml +++ b/_data/changelogs/component-prose.yml @@ -2,33 +2,33 @@ title: Prose type: component changelogURL: items: -- date: 2024-05-15 - summary: Added WCAG compliance tag and accessibility test status section. - affectsGuidance: true - githubPr: 2613 - githubRepo: uswds-site -- date: 2023-06-09 - summary: Added `$theme-heading-margin-top` and `$theme-paragraph-margin-top` system variables. - affectsStyles: true - affectsSettings: true - githubPr: 5158 - githubRepo: uswds - versionUswds: 3.5.0 -- date: 2023-06-09 - summary: Removed `usa-prose-` mixins and placeholders from Sass. - summaryAdditional: Users should instead use `typeset-` mixins in their place. This is a breaking change only if your project Sass uses `usa-prose-` mixins and placeholders. It does not affect the look of any `usa-prose`–styled element. - isBreaking: true - affectsStyles: true - affectsSettings: true - githubPr: 5158 - githubRepo: uswds - versionUswds: 3.5.0 -- date: 2022-04-28 - summary: Updated to Sass module syntax and new package structure. - isBreaking: true - affectsAssets: true - affectsJavascript: true - affectsStyles: true - githubPr: 4656 - githubRepo: uswds - versionUswds: 3.0.0 + - date: 2024-05-15 + summary: Added WCAG compliance tag and accessibility test status section. + affectsGuidance: true + githubPr: 2613 + githubRepo: uswds-site + - date: 2023-06-09 + summary: Added `$theme-heading-margin-top` and `$theme-paragraph-margin-top` system variables. + affectsStyles: true + affectsSettings: true + githubPr: 5158 + githubRepo: uswds + versionUswds: 3.5.0 + - date: 2023-06-09 + summary: Removed `usa-prose-` mixins and placeholders from Sass. + summaryAdditional: Users should instead use `typeset-` mixins in their place. This is a breaking change only if your project Sass uses `usa-prose-` mixins and placeholders. It does not affect the look of any `usa-prose`–styled element. + isBreaking: true + affectsStyles: true + affectsSettings: true + githubPr: 5158 + githubRepo: uswds + versionUswds: 3.5.0 + - date: 2022-04-28 + summary: Updated to Sass module syntax and new package structure. + isBreaking: true + affectsAssets: true + affectsJavascript: true + affectsStyles: true + githubPr: 4656 + githubRepo: uswds + versionUswds: 3.0.0 diff --git a/_data/changelogs/component-radio-buttons-accessibility.yml b/_data/changelogs/component-radio-buttons-accessibility.yml index 0d045527ea..ca4241c948 100644 --- a/_data/changelogs/component-radio-buttons-accessibility.yml +++ b/_data/changelogs/component-radio-buttons-accessibility.yml @@ -1,8 +1,8 @@ title: Radio button accessibility tests type: component items: - - date: 2024-09-18 - summary: Added accessibility tests page. - affectsGuidance: true - githubPr: 2821 - githubRepo: uswds-site \ No newline at end of file + - date: 2024-09-18 + summary: Added accessibility tests page. + affectsGuidance: true + githubPr: 2821 + githubRepo: uswds-site diff --git a/_data/changelogs/component-radio-buttons.yml b/_data/changelogs/component-radio-buttons.yml index ccaac3a129..c1936af747 100644 --- a/_data/changelogs/component-radio-buttons.yml +++ b/_data/changelogs/component-radio-buttons.yml @@ -2,157 +2,157 @@ title: Radio buttons type: component changelogURL: items: -- date: 2024-09-18 - summary: Added WCAG compliance tag and accessibility test status section. - affectsGuidance: true - githubPr: 2821 - githubRepo: uswds-site -- date: 2023-09-29 - summary: Updated radio and checkbox tile styling to have lighter borders. - summaryAdditional: - affectsAccessibility: true - affectsStyles: true - githubPr: 5494 - githubRepo: uswds - versionUswds: 3.6.1 -- date: 2023-06-09 - summary: Improved legibility in forced colors mode. - summaryAdditional: Adds a consistent border in forced colors mode. - affectsAccessibility: true - affectsStyles: true - githubPr: 5147 - githubRepo: uswds - versionUswds: 3.5.0 -- date: 2023-06-09 - summary: Improved consistency and visibility of disabled styles. - summaryAdditional: Form elements with the `disabled` or `aria-disabled` attribute now get consistent styling and have proper color contrast. - affectsAccessibility: true - affectsStyles: true - githubPr: 5063 - githubRepo: uswds - versionUswds: 3.5.0 -- date: 2023-06-09 - summary: Improved consistency of disabled styles in forced colors mode. - summaryAdditional: - affectsAccessibility: true - affectsStyles: true - githubPr: 5295 - githubRepo: uswds - versionUswds: 3.5.0 -- date: 2022-08-05 - summary: Styled aria-disabled to match disabled. - summaryAdditional: Now disabled styling is applied whether you use `disabled` (disabled and hidden from screen readers) or `aria-disabled` (disabled and visible to screen readers). - isBreaking: - affectsAccessibility: - affectsAssets: - affectsGuidance: - affectsJavascript: - affectsMarkup: - affectsStyles: - githubPr: 4783 - githubRepo: uswds - versionUswds: 3.1.0 -- date: 2022-04-28 - summary: Updated package name to `usa-radio`. - affectsGuidance: true - githubPr: 1538 - githubRepo: uswds-site -- date: 2022-04-28 - summary: Updated to Sass module syntax and new package structure. - isBreaking: true - affectsAssets: true - affectsJavascript: true - affectsStyles: true - githubPr: 4656 - githubRepo: uswds - versionUswds: 3.0.0 -- date: 2022-04-13 - summary: Updated package name to `form-controls`. - affectsGuidance: true - githubPr: 1497 - githubRepo: uswds-site -- date: 2022-04-11 - summary: Added support for forced colors mode. - summaryAdditional: All our components now support proper display when users have a forced colors mode set in their operating system. - isBreaking: false - affectsAccessibility: true - affectsAssets: false - affectsGuidance: false - affectsJavascript: false - affectsMarkup: false - affectsStyles: true - githubPr: 4610 - githubRepo: uswds - versionUswds: 2.13.3 -- date: 2021-08-18 - summary: Improved whitespace sensitivity of radio and checkbox tiles. - summaryAdditional: Now radio and checkbox tiles will display consistently whether or not there's extra whitespace in the markup. - isBreaking: false - affectsAccessibility: false - affectsAssets: false - affectsGuidance: false - affectsJavascript: false - affectsMarkup: false - affectsStyles: true - githubPr: 4286 - githubRepo: uswds - versionUswds: 2.12.1 -- date: 2021-08-18 - summary: Improved class order sensitivity for checkbox and radio. - summaryAdditional: Now checkbox and radio components display properly regardless of the order of the class and modifier names. - isBreaking: false - affectsAccessibility: false - affectsAssets: false - affectsGuidance: false - affectsJavascript: false - affectsMarkup: false - affectsStyles: true - githubPr: 4262 - githubRepo: uswds - versionUswds: 2.12.1 -- date: 2021-06-16 - summary: Updated checkbox and radio buttons to include automatic accessible color. - summaryAdditional: Now checkbox and radio buttons will display in the proper accessible color, and adapt to the text, link, and background colors you set in your projects's settings. - isBreaking: false - affectsAccessibility: true - affectsAssets: false - affectsGuidance: false - affectsJavascript: false - affectsMarkup: false - affectsStyles: true - githubPr: 4199 - githubRepo: uswds - versionUswds: 2.12.0 -- date: 2021-06-16 - summary: Updated margins in radio tiles. - summaryAdditional: Now radio tiles have cleaner, more reliable styling for their margin. - affectsStyles: true - githubPr: 4181 - githubRepo: uswds - versionUswds: 2.12.0 -- date: 2021-04-28 - summary: Updated checked radio buttons to remain checked in disabled state. - summaryAdditional: Now the visual checked state of a checked checkbox does not change if that element is later disabled. - isBreaking: false - affectsAccessibility: false - affectsAssets: false - affectsGuidance: false - affectsJavascript: false - affectsMarkup: false - affectsStyles: true - githubPr: 4160 - githubRepo: uswds - versionUswds: 2.11.2 -- date: 2021-03-17 - summary: Fixed character display in checkboxes and radio buttons. - summaryAdditional: Allowed checkboxes and radio buttons to display properly regardless of character encoding. - isBreaking: false - affectsAccessibility: false - affectsAssets: false - affectsGuidance: false - affectsJavascript: true - affectsMarkup: false - affectsStyles: true - githubPr: 4080 - githubRepo: uswds - versionUswds: 2.11.0 + - date: 2024-09-18 + summary: Added WCAG compliance tag and accessibility test status section. + affectsGuidance: true + githubPr: 2821 + githubRepo: uswds-site + - date: 2023-09-29 + summary: Updated radio and checkbox tile styling to have lighter borders. + summaryAdditional: + affectsAccessibility: true + affectsStyles: true + githubPr: 5494 + githubRepo: uswds + versionUswds: 3.6.1 + - date: 2023-06-09 + summary: Improved legibility in forced colors mode. + summaryAdditional: Adds a consistent border in forced colors mode. + affectsAccessibility: true + affectsStyles: true + githubPr: 5147 + githubRepo: uswds + versionUswds: 3.5.0 + - date: 2023-06-09 + summary: Improved consistency and visibility of disabled styles. + summaryAdditional: Form elements with the `disabled` or `aria-disabled` attribute now get consistent styling and have proper color contrast. + affectsAccessibility: true + affectsStyles: true + githubPr: 5063 + githubRepo: uswds + versionUswds: 3.5.0 + - date: 2023-06-09 + summary: Improved consistency of disabled styles in forced colors mode. + summaryAdditional: + affectsAccessibility: true + affectsStyles: true + githubPr: 5295 + githubRepo: uswds + versionUswds: 3.5.0 + - date: 2022-08-05 + summary: Styled aria-disabled to match disabled. + summaryAdditional: Now disabled styling is applied whether you use `disabled` (disabled and hidden from screen readers) or `aria-disabled` (disabled and visible to screen readers). + isBreaking: + affectsAccessibility: + affectsAssets: + affectsGuidance: + affectsJavascript: + affectsMarkup: + affectsStyles: + githubPr: 4783 + githubRepo: uswds + versionUswds: 3.1.0 + - date: 2022-04-28 + summary: Updated package name to `usa-radio`. + affectsGuidance: true + githubPr: 1538 + githubRepo: uswds-site + - date: 2022-04-28 + summary: Updated to Sass module syntax and new package structure. + isBreaking: true + affectsAssets: true + affectsJavascript: true + affectsStyles: true + githubPr: 4656 + githubRepo: uswds + versionUswds: 3.0.0 + - date: 2022-04-13 + summary: Updated package name to `form-controls`. + affectsGuidance: true + githubPr: 1497 + githubRepo: uswds-site + - date: 2022-04-11 + summary: Added support for forced colors mode. + summaryAdditional: All our components now support proper display when users have a forced colors mode set in their operating system. + isBreaking: false + affectsAccessibility: true + affectsAssets: false + affectsGuidance: false + affectsJavascript: false + affectsMarkup: false + affectsStyles: true + githubPr: 4610 + githubRepo: uswds + versionUswds: 2.13.3 + - date: 2021-08-18 + summary: Improved whitespace sensitivity of radio and checkbox tiles. + summaryAdditional: Now radio and checkbox tiles will display consistently whether or not there's extra whitespace in the markup. + isBreaking: false + affectsAccessibility: false + affectsAssets: false + affectsGuidance: false + affectsJavascript: false + affectsMarkup: false + affectsStyles: true + githubPr: 4286 + githubRepo: uswds + versionUswds: 2.12.1 + - date: 2021-08-18 + summary: Improved class order sensitivity for checkbox and radio. + summaryAdditional: Now checkbox and radio components display properly regardless of the order of the class and modifier names. + isBreaking: false + affectsAccessibility: false + affectsAssets: false + affectsGuidance: false + affectsJavascript: false + affectsMarkup: false + affectsStyles: true + githubPr: 4262 + githubRepo: uswds + versionUswds: 2.12.1 + - date: 2021-06-16 + summary: Updated checkbox and radio buttons to include automatic accessible color. + summaryAdditional: Now checkbox and radio buttons will display in the proper accessible color, and adapt to the text, link, and background colors you set in your projects's settings. + isBreaking: false + affectsAccessibility: true + affectsAssets: false + affectsGuidance: false + affectsJavascript: false + affectsMarkup: false + affectsStyles: true + githubPr: 4199 + githubRepo: uswds + versionUswds: 2.12.0 + - date: 2021-06-16 + summary: Updated margins in radio tiles. + summaryAdditional: Now radio tiles have cleaner, more reliable styling for their margin. + affectsStyles: true + githubPr: 4181 + githubRepo: uswds + versionUswds: 2.12.0 + - date: 2021-04-28 + summary: Updated checked radio buttons to remain checked in disabled state. + summaryAdditional: Now the visual checked state of a checked checkbox does not change if that element is later disabled. + isBreaking: false + affectsAccessibility: false + affectsAssets: false + affectsGuidance: false + affectsJavascript: false + affectsMarkup: false + affectsStyles: true + githubPr: 4160 + githubRepo: uswds + versionUswds: 2.11.2 + - date: 2021-03-17 + summary: Fixed character display in checkboxes and radio buttons. + summaryAdditional: Allowed checkboxes and radio buttons to display properly regardless of character encoding. + isBreaking: false + affectsAccessibility: false + affectsAssets: false + affectsGuidance: false + affectsJavascript: true + affectsMarkup: false + affectsStyles: true + githubPr: 4080 + githubRepo: uswds + versionUswds: 2.11.0 diff --git a/_data/changelogs/component-range-slider.yml b/_data/changelogs/component-range-slider.yml index 5a1a87d313..3ccc35cc90 100644 --- a/_data/changelogs/component-range-slider.yml +++ b/_data/changelogs/component-range-slider.yml @@ -2,64 +2,64 @@ title: Range slider type: component changelogURL: items: -- date: 2023-11-09 - summary: Added optional data attributes to customize text for screen readers. - summaryAdditional: The `data-text-unit` attribute provides additional context to screen reader users, and `data-text-preposition` allows for proper preposition translations on non-English pages. - isBreaking: false - affectsAccessibility: true - affectsGuidance: true - affectsJavascript: true - affectsMarkup: true - githubPr: 5472 - githubRepo: USWDS - versionUswds: 3.7.0 -- date: 2023-11-09 - summary: Removed redundant ARIA attributes to improve the screen reader experience. - summaryAdditional: To incorporate these changes, update your range component markup. - affectsAccessibility: true - affectsMarkup: true - githubPr: 5413 - githubRepo: uswds - versionUswds: 3.7.0 -- date: 2023-06-09 - summary: Improved legibility in forced colors mode. - summaryAdditional: Adds a consistent border in forced colors mode. - affectsAccessibility: true - affectsStyles: true - githubPr: 5147 - githubRepo: uswds - versionUswds: 3.5.0 -- date: 2022-04-28 - summary: Updated to Sass module syntax and new package structure. - isBreaking: true - affectsAssets: true - affectsJavascript: true - affectsStyles: true - githubPr: 4656 - githubRepo: uswds - versionUswds: 3.0.0 -- date: 2022-04-11 - summary: Added support for forced colors mode. - summaryAdditional: All our components now support proper display when users have a forced colors mode set in their operating system. - isBreaking: false - affectsAccessibility: true - affectsAssets: false - affectsGuidance: false - affectsJavascript: false - affectsMarkup: false - affectsStyles: true - githubPr: 4610 - githubRepo: uswds - versionUswds: 2.13.3 -- date: 2021-08-18 - summary: Added appropriate ARIA attributes to the `input` element. - isBreaking: false - affectsAccessibility: true - affectsAssets: false - affectsGuidance: false - affectsJavascript: false - affectsMarkup: true - affectsStyles: false - githubPr: 4270 - githubRepo: uswds - versionUswds: 2.12.1 + - date: 2023-11-09 + summary: Added optional data attributes to customize text for screen readers. + summaryAdditional: The `data-text-unit` attribute provides additional context to screen reader users, and `data-text-preposition` allows for proper preposition translations on non-English pages. + isBreaking: false + affectsAccessibility: true + affectsGuidance: true + affectsJavascript: true + affectsMarkup: true + githubPr: 5472 + githubRepo: USWDS + versionUswds: 3.7.0 + - date: 2023-11-09 + summary: Removed redundant ARIA attributes to improve the screen reader experience. + summaryAdditional: To incorporate these changes, update your range component markup. + affectsAccessibility: true + affectsMarkup: true + githubPr: 5413 + githubRepo: uswds + versionUswds: 3.7.0 + - date: 2023-06-09 + summary: Improved legibility in forced colors mode. + summaryAdditional: Adds a consistent border in forced colors mode. + affectsAccessibility: true + affectsStyles: true + githubPr: 5147 + githubRepo: uswds + versionUswds: 3.5.0 + - date: 2022-04-28 + summary: Updated to Sass module syntax and new package structure. + isBreaking: true + affectsAssets: true + affectsJavascript: true + affectsStyles: true + githubPr: 4656 + githubRepo: uswds + versionUswds: 3.0.0 + - date: 2022-04-11 + summary: Added support for forced colors mode. + summaryAdditional: All our components now support proper display when users have a forced colors mode set in their operating system. + isBreaking: false + affectsAccessibility: true + affectsAssets: false + affectsGuidance: false + affectsJavascript: false + affectsMarkup: false + affectsStyles: true + githubPr: 4610 + githubRepo: uswds + versionUswds: 2.13.3 + - date: 2021-08-18 + summary: Added appropriate ARIA attributes to the `input` element. + isBreaking: false + affectsAccessibility: true + affectsAssets: false + affectsGuidance: false + affectsJavascript: false + affectsMarkup: true + affectsStyles: false + githubPr: 4270 + githubRepo: uswds + versionUswds: 2.12.1 diff --git a/_data/changelogs/component-search-accessibility.yml b/_data/changelogs/component-search-accessibility.yml index 07b7c3ad6b..ddf417e6d4 100644 --- a/_data/changelogs/component-search-accessibility.yml +++ b/_data/changelogs/component-search-accessibility.yml @@ -1,8 +1,8 @@ title: Search accessibility tests type: component items: -- date: 2024-06-19 - summary: Added accessibility tests page. - affectsGuidance: true - githubPr: 2694 - githubRepo: uswds-site + - date: 2024-06-19 + summary: Added accessibility tests page. + affectsGuidance: true + githubPr: 2694 + githubRepo: uswds-site diff --git a/_data/changelogs/component-search.yml b/_data/changelogs/component-search.yml index dd7017038e..0cc59fd22d 100644 --- a/_data/changelogs/component-search.yml +++ b/_data/changelogs/component-search.yml @@ -2,38 +2,38 @@ title: Search type: component changelogURL: items: -- date: 2024-06-19 - summary: Added WCAG compliance tag and accessibility test status section. - affectsGuidance: true - githubPr: 2694 - githubRepo: uswds-site -- date: 2023-06-09 - summary: Improved legibility in forced colors mode. - summaryAdditional: Adds a consistent border in forced colors mode. - affectsAccessibility: true - affectsStyles: true - githubPr: 5147 - githubRepo: uswds - versionUswds: 3.5.0 -- date: 2022-04-28 - summary: Updated to Sass module syntax and new package structure. - isBreaking: true - affectsAssets: true - affectsJavascript: true - affectsStyles: true - githubPr: 4656 - githubRepo: uswds - versionUswds: 3.0.0 -- date: 2021-12-14 - summary: Improved resilience of icon-only functionality. - summaryAdditional: Updated to add a text equivalent if the image path is broken and does not load. - isBreaking: true - affectsAccessibility: true - affectsAssets: false - affectsGuidance: false - affectsJavascript: false - affectsMarkup: true - affectsStyles: true - githubPr: 4274 - githubRepo: uswds - versionUswds: 2.13.0 + - date: 2024-06-19 + summary: Added WCAG compliance tag and accessibility test status section. + affectsGuidance: true + githubPr: 2694 + githubRepo: uswds-site + - date: 2023-06-09 + summary: Improved legibility in forced colors mode. + summaryAdditional: Adds a consistent border in forced colors mode. + affectsAccessibility: true + affectsStyles: true + githubPr: 5147 + githubRepo: uswds + versionUswds: 3.5.0 + - date: 2022-04-28 + summary: Updated to Sass module syntax and new package structure. + isBreaking: true + affectsAssets: true + affectsJavascript: true + affectsStyles: true + githubPr: 4656 + githubRepo: uswds + versionUswds: 3.0.0 + - date: 2021-12-14 + summary: Improved resilience of icon-only functionality. + summaryAdditional: Updated to add a text equivalent if the image path is broken and does not load. + isBreaking: true + affectsAccessibility: true + affectsAssets: false + affectsGuidance: false + affectsJavascript: false + affectsMarkup: true + affectsStyles: true + githubPr: 4274 + githubRepo: uswds + versionUswds: 2.13.0 diff --git a/_data/changelogs/component-select.yml b/_data/changelogs/component-select.yml index e2957b3711..970ebae74e 100644 --- a/_data/changelogs/component-select.yml +++ b/_data/changelogs/component-select.yml @@ -2,63 +2,63 @@ title: Select type: component changelogURL: items: -- date: 2024-06-19 - summary: Added WCAG compliance tag and accessibility test status section. - affectsGuidance: true - githubPr: 2702 - githubRepo: uswds-site -- date: 2023-08-23 - summary: Added ellipses to overflow text in the multiple select variant. - summaryAdditional: This provides a clear indication to users that there is text that extends beyond the select width. - isBreaking: false - affectsAccessibility: false - affectsGuidance: false - affectsJavascript: false - affectsMarkup: false - affectsStyles: true - githubPr: 5268 - githubRepo: uswds - versionUswds: 3.6.0 -- date: 2023-06-09 - summary: Improved consistency and visibility of disabled styles. - summaryAdditional: Form elements with the `disabled` or `aria-disabled` attribute now get consistent styling and have proper color contrast. - affectsAccessibility: true - affectsStyles: true - githubPr: 5063 - githubRepo: uswds - versionUswds: 3.5.0 -- date: 2023-06-09 - summary: Improved consistency of disabled styles in forced colors mode. - summaryAdditional: - affectsAccessibility: true - affectsStyles: true - githubPr: 5295 - githubRepo: uswds - versionUswds: 3.5.0 -- date: 2022-08-05 - summary: Improved styling for select when the `multiple` attribute is present. - summaryAdditional: According to the HTML5 standard, a select element whose `multiple` attribute is present is "expected to render as an inline-block box whose height is the height necessary to contain as many rows for items as given by the element's display size, or four rows if the [size] attribute is absent." Our select now conforms to this guidance. - isBreaking: false - affectsAccessibility: false - affectsAssets: false - affectsGuidance: false - affectsJavascript: false - affectsMarkup: false - affectsStyles: true - githubPr: 4766 - githubRepo: uswds - versionUswds: 3.1.0 -- date: 2022-04-28 - summary: Updated to Sass module syntax and new package structure. - isBreaking: true - affectsAssets: true - affectsJavascript: true - affectsStyles: true - githubPr: 4656 - githubRepo: uswds - versionUswds: 3.0.0 -- date: 2022-04-28 - summary: Renamed component from "dropdown" to "select". - affectsGuidance: true - githubPr: 1538 - githubRepo: uswds-site + - date: 2024-06-19 + summary: Added WCAG compliance tag and accessibility test status section. + affectsGuidance: true + githubPr: 2702 + githubRepo: uswds-site + - date: 2023-08-23 + summary: Added ellipses to overflow text in the multiple select variant. + summaryAdditional: This provides a clear indication to users that there is text that extends beyond the select width. + isBreaking: false + affectsAccessibility: false + affectsGuidance: false + affectsJavascript: false + affectsMarkup: false + affectsStyles: true + githubPr: 5268 + githubRepo: uswds + versionUswds: 3.6.0 + - date: 2023-06-09 + summary: Improved consistency and visibility of disabled styles. + summaryAdditional: Form elements with the `disabled` or `aria-disabled` attribute now get consistent styling and have proper color contrast. + affectsAccessibility: true + affectsStyles: true + githubPr: 5063 + githubRepo: uswds + versionUswds: 3.5.0 + - date: 2023-06-09 + summary: Improved consistency of disabled styles in forced colors mode. + summaryAdditional: + affectsAccessibility: true + affectsStyles: true + githubPr: 5295 + githubRepo: uswds + versionUswds: 3.5.0 + - date: 2022-08-05 + summary: Improved styling for select when the `multiple` attribute is present. + summaryAdditional: According to the HTML5 standard, a select element whose `multiple` attribute is present is "expected to render as an inline-block box whose height is the height necessary to contain as many rows for items as given by the element's display size, or four rows if the [size] attribute is absent." Our select now conforms to this guidance. + isBreaking: false + affectsAccessibility: false + affectsAssets: false + affectsGuidance: false + affectsJavascript: false + affectsMarkup: false + affectsStyles: true + githubPr: 4766 + githubRepo: uswds + versionUswds: 3.1.0 + - date: 2022-04-28 + summary: Updated to Sass module syntax and new package structure. + isBreaking: true + affectsAssets: true + affectsJavascript: true + affectsStyles: true + githubPr: 4656 + githubRepo: uswds + versionUswds: 3.0.0 + - date: 2022-04-28 + summary: Renamed component from "dropdown" to "select". + affectsGuidance: true + githubPr: 1538 + githubRepo: uswds-site diff --git a/_data/changelogs/component-table.yml b/_data/changelogs/component-table.yml index 5bf27ae02f..b08d0406e2 100644 --- a/_data/changelogs/component-table.yml +++ b/_data/changelogs/component-table.yml @@ -35,7 +35,7 @@ items: versionUswds: 3.8.0 - date: 2024-03-11 summary: Simplified the structure of the scrollable table component example. - summaryAdditional: Empty headers in the complex table example were causing accessibility issues. + summaryAdditional: Empty headers in the complex table example were causing accessibility issues. isBreaking: false affectsContent: true githubPr: 5783 diff --git a/_data/changelogs/component-time-picker-accessibility.yml b/_data/changelogs/component-time-picker-accessibility.yml index ec6d93b54d..9cbbff85c8 100644 --- a/_data/changelogs/component-time-picker-accessibility.yml +++ b/_data/changelogs/component-time-picker-accessibility.yml @@ -1,8 +1,8 @@ title: Time picker accessibility tests type: component items: - - date: 2024-11-07 - summary: Added accessibility tests page. - affectsGuidance: true - githubPr: 2921 - githubRepo: uswds-site + - date: 2024-11-07 + summary: Added accessibility tests page. + affectsGuidance: true + githubPr: 2921 + githubRepo: uswds-site diff --git a/_data/changelogs/component-typography-accessibility.yml b/_data/changelogs/component-typography-accessibility.yml index d5f10d0523..ca2a488685 100644 --- a/_data/changelogs/component-typography-accessibility.yml +++ b/_data/changelogs/component-typography-accessibility.yml @@ -6,4 +6,4 @@ items: summary: Added accessibility tests page. affectsGuidance: true githubPr: 2540 - githubRepo: uswds-site \ No newline at end of file + githubRepo: uswds-site diff --git a/_data/changelogs/component-validation.yml b/_data/changelogs/component-validation.yml index f14b8744c6..88cde0b72e 100644 --- a/_data/changelogs/component-validation.yml +++ b/_data/changelogs/component-validation.yml @@ -4,7 +4,7 @@ changelogURL: items: - date: 2024-05-31 summary: Fixed a bug which caused non-interactive checklist items to receive focus on tab. - summaryAdditional: Now, only the interactive input will receive focus. + summaryAdditional: Now, only the interactive input will receive focus. isBreaking: false affectsAccessibility: true affectsJavascript: true diff --git a/_data/changelogs/docs-getting-started-devs-phase-2.yml b/_data/changelogs/docs-getting-started-devs-phase-2.yml index 76c271cf82..b8acc3e225 100644 --- a/_data/changelogs/docs-getting-started-devs-phase-2.yml +++ b/_data/changelogs/docs-getting-started-devs-phase-2.yml @@ -1,7 +1,7 @@ title: "Phase 2: Compile" type: documentation changelogURL: -items: +items: - date: 2024-12-18 summary: Added documentation for `settings.compile.sassDeprecationWarnings`. affectsGuidance: true diff --git a/_data/changelogs/docs-settings.yml b/_data/changelogs/docs-settings.yml index 7d270f4268..cb00c8bb4d 100644 --- a/_data/changelogs/docs-settings.yml +++ b/_data/changelogs/docs-settings.yml @@ -4,7 +4,7 @@ changelogURL: items: - date: 2024-10-04 summary: Added new `$theme-utility-breakpoints-custom` setting. - summaryAdditional: Users can now set custom breakpoints which will generate utilities alongside the default system breakpoints. + summaryAdditional: Users can now set custom breakpoints which will generate utilities alongside the default system breakpoints. affectsSettings: true affectsStyles: true githubPr: 6048 @@ -12,7 +12,7 @@ items: versionUswds: 3.9.0 - date: 2024-03-11 summary: Added new sidenav setting to temporarily address visual regression in new markup guidance. - summaryAdditional: The new setting `$theme-sidenav-reorder` allows users to temporarily reorder the sidenav with CSS. Users should follow new markup recommendation in code example to avoid accessibility issues. + summaryAdditional: The new setting `$theme-sidenav-reorder` allows users to temporarily reorder the sidenav with CSS. Users should follow new markup recommendation in code example to avoid accessibility issues. isBreaking: false affectsAccessibility: true affectsAssets: @@ -35,7 +35,7 @@ items: versionUswds: 3.8.0 - date: 2024-03-11 summary: Added color contrast checks for disabled tokens. - summaryAdditional: On compilation, USWDS will test disabled element color contrast and provide a fallback color if minimum contrast is not met. If the fallback does not meet minimum requirements, USWDS will provide a warning in the terminal. + summaryAdditional: On compilation, USWDS will test disabled element color contrast and provide a fallback color if minimum contrast is not met. If the fallback does not meet minimum requirements, USWDS will provide a warning in the terminal. affectsAccessibility: true affectsStyles: true githubPr: 5455 diff --git a/_data/changelogs/template-404.yml b/_data/changelogs/template-404.yml index 446ebf6596..124c7be6a2 100644 --- a/_data/changelogs/template-404.yml +++ b/_data/changelogs/template-404.yml @@ -38,4 +38,4 @@ items: affectsMarkup: true affectsStyles: githubPr: 4003 - githubRepo: uswds \ No newline at end of file + githubRepo: uswds diff --git a/_data/changelogs/tokens-spacing.yml b/_data/changelogs/tokens-spacing.yml index aa4e2b09d2..620a71a2a7 100644 --- a/_data/changelogs/tokens-spacing.yml +++ b/_data/changelogs/tokens-spacing.yml @@ -3,12 +3,12 @@ type: token changelogURL: items: - date: 2023-08-23 - summary: Updated `0` token values to include units when needed. - summaryAdditional: Now, `units(0)` can be used in `calc()` functions. + summary: Updated `0` token values to include units when needed. + summaryAdditional: Now, `units(0)` can be used in `calc()` functions. isBreaking: affectsAccessibility: affectsAssets: - affectsGuidance: + affectsGuidance: affectsJavascript: affectsMarkup: affectsStyles: true diff --git a/_data/changelogs/utilities-margin-padding.yml b/_data/changelogs/utilities-margin-padding.yml index c906743f8e..a8ff7f79ae 100644 --- a/_data/changelogs/utilities-margin-padding.yml +++ b/_data/changelogs/utilities-margin-padding.yml @@ -41,4 +41,3 @@ items: githubPr: 4212 githubRepo: uswds versionUswds: 2.12.0 - diff --git a/_data/issues/character-count.yml b/_data/issues/character-count.yml index 9a3d5f8dec..4e25417b16 100644 --- a/_data/issues/character-count.yml +++ b/_data/issues/character-count.yml @@ -1,8 +1,8 @@ title: Character count alert_type: info items: -- date: 2023-10-23 - summary: Screen reader and screen magnifier users had trouble recognizing when they exceeded the character count limit. - summary_additional: - issue_repo: uswds - issue_number: 5574 + - date: 2023-10-23 + summary: Screen reader and screen magnifier users had trouble recognizing when they exceeded the character count limit. + summary_additional: + issue_repo: uswds + issue_number: 5574 diff --git a/_data/issues/date-picker.yml b/_data/issues/date-picker.yml index 057cba9bd5..44b42cd327 100644 --- a/_data/issues/date-picker.yml +++ b/_data/issues/date-picker.yml @@ -3,8 +3,8 @@ title: Date picker alert_type: info items: -- date: 2023-09-29 - summary: Users had trouble correctly typing dates in the input field. - summary_additional: - issue_repo: uswds - issue_number: 5534 + - date: 2023-09-29 + summary: Users had trouble correctly typing dates in the input field. + summary_additional: + issue_repo: uswds + issue_number: 5534 diff --git a/_data/issues/file-input.yml b/_data/issues/file-input.yml index dabca1fb12..8c09d38c35 100644 --- a/_data/issues/file-input.yml +++ b/_data/issues/file-input.yml @@ -1,8 +1,8 @@ title: File input alert_type: info items: -- date: 2023-10-23 - summary: Screen reader users found it confusing to have both "Drag file here" and "Choose from folder" actions described in a single button. - summary_additional: - issue_repo: uswds - issue_number: 5616 + - date: 2023-10-23 + summary: Screen reader users found it confusing to have both "Drag file here" and "Choose from folder" actions described in a single button. + summary_additional: + issue_repo: uswds + issue_number: 5616 diff --git a/_data/issues/input-mask.yml b/_data/issues/input-mask.yml index 12e1a40a3d..b9d085725d 100644 --- a/_data/issues/input-mask.yml +++ b/_data/issues/input-mask.yml @@ -1,8 +1,8 @@ title: Input mask alert_type: info items: -- date: 2023-09-29 - summary: Recovering from an error is difficult due to lack of feedback. - summary_additional: - issue_repo: uswds - issue_number: 5481 + - date: 2023-09-29 + summary: Recovering from an error is difficult due to lack of feedback. + summary_additional: + issue_repo: uswds + issue_number: 5481 diff --git a/_data/issues/memorable-date.yml b/_data/issues/memorable-date.yml index 29ec0286e5..4140c3700c 100644 --- a/_data/issues/memorable-date.yml +++ b/_data/issues/memorable-date.yml @@ -1,8 +1,8 @@ title: Memorable date alert_type: info items: -- date: 2024-04-29 - summary: Screen reader users experienced friction understanding formatting requirements for each input. - summary_additional: - issue_repo: uswds - issue_number: 5902 \ No newline at end of file + - date: 2024-04-29 + summary: Screen reader users experienced friction understanding formatting requirements for each input. + summary_additional: + issue_repo: uswds + issue_number: 5902 diff --git a/_data/issues/validation.yml b/_data/issues/validation.yml index ed1dfe3386..d7ac80e324 100644 --- a/_data/issues/validation.yml +++ b/_data/issues/validation.yml @@ -1,13 +1,13 @@ title: Validation alert_type: info items: -- date: 2023-11-28 - summary: Screen reader and screen magnification users did not notice when the validation status changed. - summary_additional: - issue_repo: uswds - issue_number: 5642 -- date: 2023-10-25 - summary: Some users are confused about the purpose of the validation component. - summary_additional: The component does not match user expectations of how their information should be validated in a form input. - issue_repo: uswds - issue_number: 5750 + - date: 2023-11-28 + summary: Screen reader and screen magnification users did not notice when the validation status changed. + summary_additional: + issue_repo: uswds + issue_number: 5642 + - date: 2023-10-25 + summary: Some users are confused about the purpose of the validation component. + summary_additional: The component does not match user expectations of how their information should be validated in a form input. + issue_repo: uswds + issue_number: 5750 diff --git a/_data/lifecycle-status.yml b/_data/lifecycle-status.yml index 286ead7c41..18e590cdb3 100644 --- a/_data/lifecycle-status.yml +++ b/_data/lifecycle-status.yml @@ -1,222 +1,221 @@ components: -- name: Accordion - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/accordion/ -- name: Alert - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/alert/ -- name: Banner - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/banner/ -- name: Breadcrumb - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/breadcrumb/ -- name: Button - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/button/ -- name: Button group - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/button-group/ -- name: Card - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/card/ -- name: CUI Banner - status_major: proposal - status_minor: Proposal in progress - url: https://github.com/uswds/uswds/discussions/5767 -- name: Character count - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/character-count/ -- name: Checkbox - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/checkbox/ -- name: Collection - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/collection -- name: Combo box - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/combo-box/ -- name: Data visualizations - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/data-visualizations/ -- name: Date picker - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/date-picker/ -- name: Date range picker - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/date-range-picker/ -- name: Feedback - status_major: proposal - status_minor: Discussion started - url: https://github.com/uswds/uswds/discussions/5773 -- name: File input - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/file-input/ -- name: Footer - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/footer/ -- name: Form - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/form/ -- name: Glossary - status_major: proposal - status_minor: Discussion started - url: https://github.com/uswds/uswds/discussions/5771 -- name: Header - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/header/ -- name: Icon - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/icon/ -- name: Icon list - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/icon-list/ -- name: Identifier - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/identifier/ -- name: In-page navigation - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/in-page-navigation/ -- name: Input mask - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/input-mask/ -- name: Input prefix or suffix - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/input-prefix-suffix/ -- name: Language selector - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/language-selector/ -- name: Link - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/link/ -- name: List - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/list/ -- name: Memorable date - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/memorable-date/ -- name: Modal - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/modal/ -- name: Pagination - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/pagination/ -- name: Process list - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/process-list/ -- name: Prose - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/prose/ -- name: Quote with attribution - status_major: proposal - status_minor: Discussion started - url: https://github.com/uswds/uswds/discussions/5766 -- name: Radio buttons - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/radio-buttons/ -- name: Range slider - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/range-slider/ -- name: Search - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/search/ -- name: Select - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/select/ -- name: Side navigation - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/side-navigation/ -- name: Site alert - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/site-alert/ -- name: Skipto - status_major: proposal - status_minor: Discussion started - url: https://github.com/uswds/uswds/discussions/5769 -- name: Spinner - status_major: proposal - status_minor: Discussion started - url: https://github.com/uswds/uswds/discussions/5768 -- name: Toast - status_major: proposal - status_minor: Discussion started - url: https://github.com/uswds/uswds/discussions/5770 -- name: Step indicator - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/step-indicator/ -- name: Summary box - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/summary-box/ -- name: Table - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/table/ -- name: Tabs - status_major: proposal - status_minor: Proposal in progress - url: https://github.com/uswds/uswds/discussions/5765 -- name: Tag - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/tag -- name: Text input - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/text-input/ -- name: Time picker - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/time-picker/ -- name: Tooltip - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/tooltip -- name: Typography - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/typography -- name: Validation - status_major: released - status_minor: stable - url: https://designsystem.digital.gov/components/validation - + - name: Accordion + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/accordion/ + - name: Alert + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/alert/ + - name: Banner + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/banner/ + - name: Breadcrumb + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/breadcrumb/ + - name: Button + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/button/ + - name: Button group + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/button-group/ + - name: Card + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/card/ + - name: CUI Banner + status_major: proposal + status_minor: Proposal in progress + url: https://github.com/uswds/uswds/discussions/5767 + - name: Character count + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/character-count/ + - name: Checkbox + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/checkbox/ + - name: Collection + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/collection + - name: Combo box + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/combo-box/ + - name: Data visualizations + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/data-visualizations/ + - name: Date picker + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/date-picker/ + - name: Date range picker + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/date-range-picker/ + - name: Feedback + status_major: proposal + status_minor: Discussion started + url: https://github.com/uswds/uswds/discussions/5773 + - name: File input + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/file-input/ + - name: Footer + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/footer/ + - name: Form + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/form/ + - name: Glossary + status_major: proposal + status_minor: Discussion started + url: https://github.com/uswds/uswds/discussions/5771 + - name: Header + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/header/ + - name: Icon + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/icon/ + - name: Icon list + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/icon-list/ + - name: Identifier + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/identifier/ + - name: In-page navigation + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/in-page-navigation/ + - name: Input mask + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/input-mask/ + - name: Input prefix or suffix + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/input-prefix-suffix/ + - name: Language selector + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/language-selector/ + - name: Link + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/link/ + - name: List + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/list/ + - name: Memorable date + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/memorable-date/ + - name: Modal + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/modal/ + - name: Pagination + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/pagination/ + - name: Process list + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/process-list/ + - name: Prose + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/prose/ + - name: Quote with attribution + status_major: proposal + status_minor: Discussion started + url: https://github.com/uswds/uswds/discussions/5766 + - name: Radio buttons + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/radio-buttons/ + - name: Range slider + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/range-slider/ + - name: Search + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/search/ + - name: Select + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/select/ + - name: Side navigation + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/side-navigation/ + - name: Site alert + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/site-alert/ + - name: Skipto + status_major: proposal + status_minor: Discussion started + url: https://github.com/uswds/uswds/discussions/5769 + - name: Spinner + status_major: proposal + status_minor: Discussion started + url: https://github.com/uswds/uswds/discussions/5768 + - name: Toast + status_major: proposal + status_minor: Discussion started + url: https://github.com/uswds/uswds/discussions/5770 + - name: Step indicator + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/step-indicator/ + - name: Summary box + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/summary-box/ + - name: Table + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/table/ + - name: Tabs + status_major: proposal + status_minor: Proposal in progress + url: https://github.com/uswds/uswds/discussions/5765 + - name: Tag + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/tag + - name: Text input + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/text-input/ + - name: Time picker + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/time-picker/ + - name: Tooltip + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/tooltip + - name: Typography + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/typography + - name: Validation + status_major: released + status_minor: stable + url: https://designsystem.digital.gov/components/validation diff --git a/_data/migration.yml b/_data/migration.yml index 2485d56c51..b6320a36a3 100644 --- a/_data/migration.yml +++ b/_data/migration.yml @@ -2,23 +2,23 @@ mixins: - v1: All Bourbon functions and mixins v2: deprecated deprecated: true - - v1: '@include media()' - v2: '@include at-media' + - v1: "@include media()" + v2: "@include at-media" token: spacing-units - - v1: '@include focus' + - v1: "@include focus" v2: deprecated deprecated: true - - v1: '@include font-smoothing' - v2: '@mixin add-knockout-font-smoothing' - - v1: '@include allow-layout-classes' + - v1: "@include font-smoothing" + v2: "@mixin add-knockout-font-smoothing" + - v1: "@include allow-layout-classes" v2: deprecated deprecated: true - - v1: '@include display-icon()' + - v1: "@include display-icon()" v2: now uses tokens for spacing units - - v1: '@include usa-sidenav-list' - v2: '@include nav-list' - - v1: '@include usa-sidenav-sublist' - v2: '@include nav-sublist' + - v1: "@include usa-sidenav-list" + v2: "@include nav-list" + - v1: "@include usa-sidenav-sublist" + v2: "@include nav-sublist" layout-grid: - v1: .usa-grid @@ -71,1228 +71,1228 @@ layout-grid: v2: .grid-offset-11 typography: - - v1: 'a' - v2: '.usa-link' - - v1: 'p' - v2: '.usa-paragraph' - - v1: 'h1' - v2: '.usa-prose > h1' - - v1: 'h2' - v2: '.usa-prose > h2' - - v1: 'h3' - v2: '.usa-prose > h3' - - v1: 'h4' - v2: '.usa-prose > h4' - - v1: 'h5' - v2: '.usa-prose > h6' - - v1: 'h6' - v2: '.usa-prose > h6' - - v1: 'ol' - v2: 'ol.usa-list' - - v1: 'ul' - v2: 'ul.usa-list' - - v1: '.usa-background-dark' - v2: '.usa-dark-background' - - v1: '.usa-content' - v2: '.usa-content' - - v1: '.usa-content-list' - v2: '.usa-content-list' - - v1: '.usa-display' - v2: '.usa-display' - - v1: '.usa-external_link' - v2: '.usa-external-link' - - v1: '.usa-external_link-alt' - v2: '.usa-external-link-alt' - - v1: '.usa-font-lead' - v2: '.usa-intro' - - v1: '.usa-heading-alt' - v2: 'deprecated: use utilities' + - v1: "a" + v2: ".usa-link" + - v1: "p" + v2: ".usa-paragraph" + - v1: "h1" + v2: ".usa-prose > h1" + - v1: "h2" + v2: ".usa-prose > h2" + - v1: "h3" + v2: ".usa-prose > h3" + - v1: "h4" + v2: ".usa-prose > h4" + - v1: "h5" + v2: ".usa-prose > h6" + - v1: "h6" + v2: ".usa-prose > h6" + - v1: "ol" + v2: "ol.usa-list" + - v1: "ul" + v2: "ul.usa-list" + - v1: ".usa-background-dark" + v2: ".usa-dark-background" + - v1: ".usa-content" + v2: ".usa-content" + - v1: ".usa-content-list" + v2: ".usa-content-list" + - v1: ".usa-display" + v2: ".usa-display" + - v1: ".usa-external_link" + v2: ".usa-external-link" + - v1: ".usa-external_link-alt" + v2: ".usa-external-link-alt" + - v1: ".usa-font-lead" + v2: ".usa-intro" + - v1: ".usa-heading-alt" + v2: "deprecated: use utilities" deprecated: true - - v1: '.usa-sans' - v2: 'deprecated: use utilities' + - v1: ".usa-sans" + v2: "deprecated: use utilities" deprecated: true - - v1: '.usa-serif' - v2: 'deprecated: use utilities' + - v1: ".usa-serif" + v2: "deprecated: use utilities" deprecated: true - - v1: '.usa-text-small' - v2: 'deprecated: use utilities' + - v1: ".usa-text-small" + v2: "deprecated: use utilities" deprecated: true button: - - v1: '.usa-button' - v2: '.usa-button' - - v1: '.usa-button-active' - v2: '.usa-button--active' - - v1: '.usa-button-big' - v2: '.usa-button--big' - - v1: '.usa-button-disabled' - v2: '.usa-button--disabled' - - v1: '.usa-button-gray' - v2: '.usa-button--base' - - v1: '.usa-button-hover' - v2: '.usa-button--hover' - - v1: '.usa-button-primary' - v2: '.usa-button' - - v1: '.usa-button-primary-alt' - v2: '.usa-button--accent-cool' - - v1: '.usa-button-secondary' - v2: '.usa-button--outline' - - v1: '.usa-button-secondary-disabled' - v2: '.usa-button--outline.usa-button--disabled' - - v1: '.usa-button-secondary-inverse' - v2: '.usa-button--outline.usa-button--inverse' - - v1: '.usa-button-secondary-inverse-disabled' - v2: '.usa-button--outline.usa-button--inverse.usa-button--disabled' - - v1: '.usa-button-red' - v2: '.usa-button--secondary' - - v1: '.usa-button-unstyled' - v2: '.usa-button--unstyled' - - v1: '.usa-focus' - v2: '.usa-focus' + - v1: ".usa-button" + v2: ".usa-button" + - v1: ".usa-button-active" + v2: ".usa-button--active" + - v1: ".usa-button-big" + v2: ".usa-button--big" + - v1: ".usa-button-disabled" + v2: ".usa-button--disabled" + - v1: ".usa-button-gray" + v2: ".usa-button--base" + - v1: ".usa-button-hover" + v2: ".usa-button--hover" + - v1: ".usa-button-primary" + v2: ".usa-button" + - v1: ".usa-button-primary-alt" + v2: ".usa-button--accent-cool" + - v1: ".usa-button-secondary" + v2: ".usa-button--outline" + - v1: ".usa-button-secondary-disabled" + v2: ".usa-button--outline.usa-button--disabled" + - v1: ".usa-button-secondary-inverse" + v2: ".usa-button--outline.usa-button--inverse" + - v1: ".usa-button-secondary-inverse-disabled" + v2: ".usa-button--outline.usa-button--inverse.usa-button--disabled" + - v1: ".usa-button-red" + v2: ".usa-button--secondary" + - v1: ".usa-button-unstyled" + v2: ".usa-button--unstyled" + - v1: ".usa-focus" + v2: ".usa-focus" embed: - - v1: '.usa-embed-container' - v2: '.usa-embed-container' + - v1: ".usa-embed-container" + v2: ".usa-embed-container" figure: - - v1: 'media-link' - v2: '.usa-media-link' + - v1: "media-link" + v2: ".usa-media-link" inputs: - - v1: '[type=checkbox]' - v2: '.usa-checkbox__input' - - v1: '[type=checkbox] + label' - v2: '.usa-checkbox__label' - - v1: '[type=radio]' - v2: '.usa-radio__input' - - v1: '[type=radio] label' - v2: '.usa-radio__label' - - v1: '[type=range]' - v2: '.usa-range' - - v1: 'fieldset' - v2: '.usa-fieldset' - - v1: 'input' - v2: '.usa-input' - - v1: 'label' - v2: '.usa-label' - - v1: 'legend' - v2: '.usa-legend' - - v1: 'select' - v2: '.usa-select' - - v1: 'textarea' - v2: '.usa-textarea' - - v1: '.usa-date-of-birth' - v2: '.usa-memorable-date' - - v1: '.usa-fieldset-inputs' - v2: 'deprecated: see new checkbox and radio markup' + - v1: "[type=checkbox]" + v2: ".usa-checkbox__input" + - v1: "[type=checkbox] + label" + v2: ".usa-checkbox__label" + - v1: "[type=radio]" + v2: ".usa-radio__input" + - v1: "[type=radio] label" + v2: ".usa-radio__label" + - v1: "[type=range]" + v2: ".usa-range" + - v1: "fieldset" + v2: ".usa-fieldset" + - v1: "input" + v2: ".usa-input" + - v1: "label" + v2: ".usa-label" + - v1: "legend" + v2: ".usa-legend" + - v1: "select" + v2: ".usa-select" + - v1: "textarea" + v2: ".usa-textarea" + - v1: ".usa-date-of-birth" + v2: ".usa-memorable-date" + - v1: ".usa-fieldset-inputs" + v2: "deprecated: see new checkbox and radio markup" deprecated: true - - v1: '.usa-form-group' - v2: '.usa-form-group' - - v1: '.usa-form-group-day' - v2: '.usa-form-group--day' - - v1: '.usa-form-group-month' - v2: '.usa-form-group--month' - - v1: '.usa-form-group-year' - v2: '.usa-form-group--year' - - v1: '.usa-form-hint' - v2: '.usa-hint' - - v1: '.usa-input-error' - v2: '.usa-form-group--error' - - v1: '.usa-input-inline' - v2: '.usa-input--inline' - - v1: '.usa-input-medium' - v2: '.usa-input--medium' - - v1: '.usa-input-error' - v2: '.usa-input--error' - - v1: '.usa-input-error-label' - v2: '.usa-label--error' - - v1: '.usa-input-error-message' - v2: '.usa-error-message' - - v1: '.usa-input-inline-error' - v2: '.usa-input--error' - - v1: '.usa-input-label-helper' - v2: '.usa-hint' - - v1: '.usa-input-label-required' - v2: '.usa-label--required' - - v1: '.usa-input-optional' - v2: 'deprecated: use .usa-hint for option text in a .usa-label' + - v1: ".usa-form-group" + v2: ".usa-form-group" + - v1: ".usa-form-group-day" + v2: ".usa-form-group--day" + - v1: ".usa-form-group-month" + v2: ".usa-form-group--month" + - v1: ".usa-form-group-year" + v2: ".usa-form-group--year" + - v1: ".usa-form-hint" + v2: ".usa-hint" + - v1: ".usa-input-error" + v2: ".usa-form-group--error" + - v1: ".usa-input-inline" + v2: ".usa-input--inline" + - v1: ".usa-input-medium" + v2: ".usa-input--medium" + - v1: ".usa-input-error" + v2: ".usa-input--error" + - v1: ".usa-input-error-label" + v2: ".usa-label--error" + - v1: ".usa-input-error-message" + v2: ".usa-error-message" + - v1: ".usa-input-inline-error" + v2: ".usa-input--error" + - v1: ".usa-input-label-helper" + v2: ".usa-hint" + - v1: ".usa-input-label-required" + v2: ".usa-label--required" + - v1: ".usa-input-optional" + v2: "deprecated: use .usa-hint for option text in a .usa-label" deprecated: true - - v1: '.usa-input-required' - v2: 'deprecated: no longer recommended' + - v1: ".usa-input-required" + v2: "deprecated: no longer recommended" deprecated: true - - v1: '.usa-input-success' - v2: '.usa-input--success' - - v1: '.usa-input-tiny' - v2: '.usa-input--small' - - v1: '.usa-unstyled-list (for checkboxes)' - v2: 'div.usa-checkbox' - - v1: '.usa-unstyled-list (for radio buttons)' - v2: 'div.usa-radio' + - v1: ".usa-input-success" + v2: ".usa-input--success" + - v1: ".usa-input-tiny" + v2: ".usa-input--small" + - v1: ".usa-unstyled-list (for checkboxes)" + v2: "div.usa-checkbox" + - v1: ".usa-unstyled-list (for radio buttons)" + v2: "div.usa-radio" list: - - v1: 'li' - v2: '.usa-list li' - - v1: 'ol' - v2: 'ol.usa-list' - - v1: 'ul' - v2: 'ul.usa-list' - - v1: '.usa-unstyled-list' - v2: '.usa-list--unstyled' + - v1: "li" + v2: ".usa-list li" + - v1: "ol" + v2: "ol.usa-list" + - v1: "ul" + v2: "ul.usa-list" + - v1: ".usa-unstyled-list" + v2: ".usa-list--unstyled" table: - - v1: 'caption' - v2: '.usa-table caption' - - v1: 'thead' - v2: '.usa-table thead' - - v1: 'th' - v2: '.usa-table th' - - v1: 'td' - v2: '.usa-table td' - - v1: 'table' - v2: '.usa-table' - - v1: '.usa-table-borderless' - v2: '.usa-table--borderless' + - v1: "caption" + v2: ".usa-table caption" + - v1: "thead" + v2: ".usa-table thead" + - v1: "th" + v2: ".usa-table th" + - v1: "td" + v2: ".usa-table td" + - v1: "table" + v2: ".usa-table" + - v1: ".usa-table-borderless" + v2: ".usa-table--borderless" tag: - - v1: '.usa-label' - v2: '.usa-tag' - - v1: '.usa-label-big' - v2: '.usa-tag--big' + - v1: ".usa-label" + v2: ".usa-tag" + - v1: ".usa-label-big" + v2: ".usa-tag--big" accordion: - - v1: '.usa-accordion' - v2: '.usa-accordion' - - v1: '.usa-accordion-bordered' - v2: '.usa-accordion--bordered' - - v1: '.usa-accordion-button' - v2: '.usa-accordion__button' - - v1: '.usa-accordion-content' - v2: '.usa-accordion__content' - - v1: '—' - v2: '.usa-accordion__heading' + - v1: ".usa-accordion" + v2: ".usa-accordion" + - v1: ".usa-accordion-bordered" + v2: ".usa-accordion--bordered" + - v1: ".usa-accordion-button" + v2: ".usa-accordion__button" + - v1: ".usa-accordion-content" + v2: ".usa-accordion__content" + - v1: "—" + v2: ".usa-accordion__heading" alert: - - v1: '.usa-alert' - v2: '.usa-alert' - - v1: '.usa-alert-error' - v2: '.usa-alert--error' - - v1: '.usa-alert-no_icon' - v2: '.usa-alert--no-icon' - - v1: '.usa-alert-slim' - v2: '.usa-alert--slim' - - v1: '.usa-alert-success' - v2: '.usa-alert--success' - - v1: '.usa-alert-warning' - v2: '.usa-alert--warning' - - v1: '.usa-alert-body' - v2: '.usa-alert__body' - - v1: '.usa-alert-heading' - v2: '.usa-alert__heading' - - v1: '.usa-alert-icon' - v2: '.usa-alert__icon' - - v1: '.usa-alert-info' - v2: '.usa-alert--info' - - v1: '.usa-alert-paragraph' - v2: '.usa-alert__paragraph' - - v1: '.usa-alert-text' - v2: '.usa-alert__text' + - v1: ".usa-alert" + v2: ".usa-alert" + - v1: ".usa-alert-error" + v2: ".usa-alert--error" + - v1: ".usa-alert-no_icon" + v2: ".usa-alert--no-icon" + - v1: ".usa-alert-slim" + v2: ".usa-alert--slim" + - v1: ".usa-alert-success" + v2: ".usa-alert--success" + - v1: ".usa-alert-warning" + v2: ".usa-alert--warning" + - v1: ".usa-alert-body" + v2: ".usa-alert__body" + - v1: ".usa-alert-heading" + v2: ".usa-alert__heading" + - v1: ".usa-alert-icon" + v2: ".usa-alert__icon" + - v1: ".usa-alert-info" + v2: ".usa-alert--info" + - v1: ".usa-alert-paragraph" + v2: ".usa-alert__paragraph" + - v1: ".usa-alert-text" + v2: ".usa-alert__text" banner: - - v1: '.usa-banner' - v2: '.usa-banner' - - v1: '.usa-banner-button' - v2: '.usa-banner__button' - - v1: '.usa-banner-button-text' - v2: '.usa-banner__button-text' - - v1: '.usa-banner-content' - v2: '.usa-banner__content' - - v1: '.usa-banner-guidance-gov' - v2: '.usa-banner__guidance' - - v1: '.usa-banner-guidance-ssl' - v2: '.usa-banner__guidance' - - v1: '.usa-banner-header' - v2: '.usa-banner__header' - - v1: '.usa-banner-header-expanded' - v2: '.usa-banner__header--expanded' - - v1: '.usa-banner-icon' - v2: '.usa-banner__icon' - - v1: '.usa-banner-inner' - v2: '.usa-banner__inner' - - v1: '—' - v2: '.usa-banner__header-action' - - v1: '—' - v2: '.usa-banner__header-close-text' - - v1: '—' - v2: '.usa-banner__header-flag' - - v1: '—' - v2: '.usa-banner__header-text' + - v1: ".usa-banner" + v2: ".usa-banner" + - v1: ".usa-banner-button" + v2: ".usa-banner__button" + - v1: ".usa-banner-button-text" + v2: ".usa-banner__button-text" + - v1: ".usa-banner-content" + v2: ".usa-banner__content" + - v1: ".usa-banner-guidance-gov" + v2: ".usa-banner__guidance" + - v1: ".usa-banner-guidance-ssl" + v2: ".usa-banner__guidance" + - v1: ".usa-banner-header" + v2: ".usa-banner__header" + - v1: ".usa-banner-header-expanded" + v2: ".usa-banner__header--expanded" + - v1: ".usa-banner-icon" + v2: ".usa-banner__icon" + - v1: ".usa-banner-inner" + v2: ".usa-banner__inner" + - v1: "—" + v2: ".usa-banner__header-action" + - v1: "—" + v2: ".usa-banner__header-close-text" + - v1: "—" + v2: ".usa-banner__header-flag" + - v1: "—" + v2: ".usa-banner__header-text" checklist: - - v1: '.usa-checklist' - v2: '.usa-checklist' - - v1: '.usa-checklist li' - v2: '.usa-checklist__item' - - v1: '.usa-checklist-checked' - v2: '.usa-checklist__item--checked' + - v1: ".usa-checklist" + v2: ".usa-checklist" + - v1: ".usa-checklist li" + v2: ".usa-checklist__item" + - v1: ".usa-checklist-checked" + v2: ".usa-checklist__item--checked" footer: - - v1: 'address' - v2: '.usa-footer__address' - - v1: '.usa-footer' - v2: '.usa-footer' - - v1: '.usa-footer-big' - v2: '.usa-footer--big' - - v1: '.usa-footer-big' - v2: '.usa-footer--big' - - v1: '.usa-footer-big-secondary-section' - v2: '.usa-footer__secondary-section' - - v1: '.usa-footer-big-logo-heading' - v2: '.usa-footer__logo-heading' - - v1: '.usa-footer-big-logo-img' - v2: '.usa-footer__logo-img' - - v1: '.usa-footer-contact-heading' - v2: '.usa-footer__contact-heading' - - v1: '.usa-footer-contact-links' - v2: '.usa-footer__contact-links' - - v1: '.usa-footer-contact_info' - v2: '.usa-footer__contact-info' - - v1: '.usa-footer-logo' - v2: '.usa-footer__logo' - - v1: '.usa-footer-logo-heading' - v2: '.usa-footer__logo-heading' - - v1: '.usa-footer-logo-img' - v2: '.usa-footer__logo-img' - - v1: '.usa-footer-medium' - v2: '.usa-footer' - - v1: '.usa-footer-nav' - v2: '.usa-footer__nav' - - v1: '.usa-footer-slim' - v2: '.usa-footer--slim' - - v1: '.usa-footer-slim-logo-heading' - v2: '.usa-footer__logo-heading' - - v1: '.usa-footer-slim-logo-img' - v2: '.usa-footer__logo-img' - - v1: '.usa-footer-primary-content' - v2: '.usa-footer__primary-content' - - v1: '.usa-footer-primary-content (collapsible)' - v2: '.usa-footer__primary-content--collapsible' - - v1: '.usa-footer-primary-link' - v2: '.usa-footer__primary-link' - - v1: '.usa-footer-primary-section' - v2: '.usa-footer__primary-section' - - v1: '.usa-footer-return-to-top' - v2: '.usa-footer__return-to-top' - - v1: '.usa-footer-secondary-link' - v2: '.usa-footer__secondary-link' - - v1: '.usa-footer-secondary_section' - v2: '.usa-footer__secondary-section' - - v1: '.usa-footer-topic' - v2: 'deprecated' + - v1: "address" + v2: ".usa-footer__address" + - v1: ".usa-footer" + v2: ".usa-footer" + - v1: ".usa-footer-big" + v2: ".usa-footer--big" + - v1: ".usa-footer-big" + v2: ".usa-footer--big" + - v1: ".usa-footer-big-secondary-section" + v2: ".usa-footer__secondary-section" + - v1: ".usa-footer-big-logo-heading" + v2: ".usa-footer__logo-heading" + - v1: ".usa-footer-big-logo-img" + v2: ".usa-footer__logo-img" + - v1: ".usa-footer-contact-heading" + v2: ".usa-footer__contact-heading" + - v1: ".usa-footer-contact-links" + v2: ".usa-footer__contact-links" + - v1: ".usa-footer-contact_info" + v2: ".usa-footer__contact-info" + - v1: ".usa-footer-logo" + v2: ".usa-footer__logo" + - v1: ".usa-footer-logo-heading" + v2: ".usa-footer__logo-heading" + - v1: ".usa-footer-logo-img" + v2: ".usa-footer__logo-img" + - v1: ".usa-footer-medium" + v2: ".usa-footer" + - v1: ".usa-footer-nav" + v2: ".usa-footer__nav" + - v1: ".usa-footer-slim" + v2: ".usa-footer--slim" + - v1: ".usa-footer-slim-logo-heading" + v2: ".usa-footer__logo-heading" + - v1: ".usa-footer-slim-logo-img" + v2: ".usa-footer__logo-img" + - v1: ".usa-footer-primary-content" + v2: ".usa-footer__primary-content" + - v1: ".usa-footer-primary-content (collapsible)" + v2: ".usa-footer__primary-content--collapsible" + - v1: ".usa-footer-primary-link" + v2: ".usa-footer__primary-link" + - v1: ".usa-footer-primary-section" + v2: ".usa-footer__primary-section" + - v1: ".usa-footer-return-to-top" + v2: ".usa-footer__return-to-top" + - v1: ".usa-footer-secondary-link" + v2: ".usa-footer__secondary-link" + - v1: ".usa-footer-secondary_section" + v2: ".usa-footer__secondary-section" + - v1: ".usa-footer-topic" + v2: "deprecated" deprecated: true - - v1: '.usa-link-facebook' - v2: '.usa-social-link--facebook' - - v1: '.usa-link-rss' - v2: '.usa-social-link--rss' - - v1: '.usa-link-twitter' - v2: '.usa-social-link--twitter' - - v1: '.usa-link-youtube' - v2: '.usa-social-link--youtube' - - v1: '.usa-sign_up-block' - v2: '.usa-sign-up' - - v1: '.usa-sign_up-header' - v2: '.usa-sign-up__heading' - - v1: '.usa-social-links' - v2: '.usa-footer__social-links' - - v1: '.usa-social_link' - v2: '.usa-social-link' + - v1: ".usa-link-facebook" + v2: ".usa-social-link--facebook" + - v1: ".usa-link-rss" + v2: ".usa-social-link--rss" + - v1: ".usa-link-twitter" + v2: ".usa-social-link--twitter" + - v1: ".usa-link-youtube" + v2: ".usa-social-link--youtube" + - v1: ".usa-sign_up-block" + v2: ".usa-sign-up" + - v1: ".usa-sign_up-header" + v2: ".usa-sign-up__heading" + - v1: ".usa-social-links" + v2: ".usa-footer__social-links" + - v1: ".usa-social_link" + v2: ".usa-social-link" form: - - v1: '.usa-additional_text' - v2: 'deprecated: not used' + - v1: ".usa-additional_text" + v2: "deprecated: not used" deprecated: true - - v1: '.usa-checklist' - v2: '.usa-checklist' - - v1: '.usa-checklist li' - v2: '.usa-checklist__item' - - v1: '.usa-checklist-checked' - v2: '.usa-checklist__item--checked' - - v1: '.usa-form' - v2: '.usa-form' - - v1: '.usa-form-large' - v2: '.usa-form--large' - - v1: '.usa-form-note' - v2: '.usa-form__note' - - v1: '.usa-input-medium' - v2: '.usa-input--medium' - - v1: '.usa-input-tiny' - v2: '.usa-input--small' - - v1: '.usa-input-grid' - v2: 'deprecated: use grid utilities' + - v1: ".usa-checklist" + v2: ".usa-checklist" + - v1: ".usa-checklist li" + v2: ".usa-checklist__item" + - v1: ".usa-checklist-checked" + v2: ".usa-checklist__item--checked" + - v1: ".usa-form" + v2: ".usa-form" + - v1: ".usa-form-large" + v2: ".usa-form--large" + - v1: ".usa-form-note" + v2: ".usa-form__note" + - v1: ".usa-input-medium" + v2: ".usa-input--medium" + - v1: ".usa-input-tiny" + v2: ".usa-input--small" + - v1: ".usa-input-grid" + v2: "deprecated: use grid utilities" deprecated: true - - v1: '.usa-input-grid-small' - v2: 'deprecated: use grid utilities' + - v1: ".usa-input-grid-small" + v2: "deprecated: use grid utilities" deprecated: true - - v1: '.usa-input-grid-medium' - v2: 'deprecated: use grid utilities' + - v1: ".usa-input-grid-medium" + v2: "deprecated: use grid utilities" deprecated: true - - v1: '.usa-input-grid-large' - v2: 'deprecated: use grid utilities' + - v1: ".usa-input-grid-large" + v2: "deprecated: use grid utilities" deprecated: true graphic-list: - - v1: '.usa-graphic_list' - v2: '.usa-graphic-list' - - v1: '.usa-graphic_list h3' - v2: '.usa-graphic-list__heading' - - v1: '.usa-graphic_list-row' - v2: '.usa-graphic-list__row' + - v1: ".usa-graphic_list" + v2: ".usa-graphic-list" + - v1: ".usa-graphic_list h3" + v2: ".usa-graphic-list__heading" + - v1: ".usa-graphic_list-row" + v2: ".usa-graphic-list__row" header: - - v1: '.usa-header' - v2: '.usa-header' - - v1: '.usa-logo' - v2: '.usa-logo' - - v1: '.usa-logo-text' - v2: '.usa-logo__text' - - v1: '.usa-menu-btn' - v2: '.usa-menu-btn' - - v1: '.usa-overlay' - v2: '.usa-overlay' - - v1: '.usa-overlay.is-visible' - v2: '.usa-overlay.is-visible' - - v1: '.usa-header-basic' - v2: '.usa-header--basic' - - v1: '.usa-navbar' - v2: '.usa-navbar' - - v1: '.usa-header-extended' - v2: '.usa-header--extended' - - v1: '.usa-current' - v2: '.usa-current' + - v1: ".usa-header" + v2: ".usa-header" + - v1: ".usa-logo" + v2: ".usa-logo" + - v1: ".usa-logo-text" + v2: ".usa-logo__text" + - v1: ".usa-menu-btn" + v2: ".usa-menu-btn" + - v1: ".usa-overlay" + v2: ".usa-overlay" + - v1: ".usa-overlay.is-visible" + v2: ".usa-overlay.is-visible" + - v1: ".usa-header-basic" + v2: ".usa-header--basic" + - v1: ".usa-navbar" + v2: ".usa-navbar" + - v1: ".usa-header-extended" + v2: ".usa-header--extended" + - v1: ".usa-current" + v2: ".usa-current" hero: - - v1: '.usa-hero' - v2: '.usa-hero' - - v1: '.usa-hero h2' - v2: '.usa-hero__heading' - - v1: '.usa-hero-callout' - v2: '.usa-hero__callout' - - v1: '.usa-hero-callout-alt' - v2: '.usa-hero__callout-alt' - - v1: '.usa-hero-link' - v2: 'deprecated: use utilities' + - v1: ".usa-hero" + v2: ".usa-hero" + - v1: ".usa-hero h2" + v2: ".usa-hero__heading" + - v1: ".usa-hero-callout" + v2: ".usa-hero__callout" + - v1: ".usa-hero-callout-alt" + v2: ".usa-hero__callout-alt" + - v1: ".usa-hero-link" + v2: "deprecated: use utilities" deprecated: true layout: - - v1: '.usa-layout-docs-main_content' - v2: '.usa-layout-docs__main' - - v1: '.usa-layout-docs-sidenav' - v2: '.usa-layout-docs__sidenav' - - v1: '.usa-layout-docs' - v2: '.usa-layout-docs' + - v1: ".usa-layout-docs-main_content" + v2: ".usa-layout-docs__main" + - v1: ".usa-layout-docs-sidenav" + v2: ".usa-layout-docs__sidenav" + - v1: ".usa-layout-docs" + v2: ".usa-layout-docs" media-block: - - v1: '.usa-media_block' - v2: '.usa-media-block' - - v1: '.usa-media_block-body' - v2: '.usa-media-block__body' - - v1: '.usa-media_block-img' - v2: '.usa-media-block__img' + - v1: ".usa-media_block" + v2: ".usa-media-block" + - v1: ".usa-media_block-body" + v2: ".usa-media-block__body" + - v1: ".usa-media_block-img" + v2: ".usa-media-block__img" navigation: - - v1: '.usa-accordion-button' - v2: '.usa-accordion__button' - - v1: '.usa-current' - v2: '.usa-current' - - v1: '.usa-header-basic-megamenu' - v2: '.usa-header--megamenu' - - v1: '.usa-header-extended' - v2: '.usa-header--extended' - - v1: '.usa-header-search-button' - v2: 'deprecated: not used' + - v1: ".usa-accordion-button" + v2: ".usa-accordion__button" + - v1: ".usa-current" + v2: ".usa-current" + - v1: ".usa-header-basic-megamenu" + v2: ".usa-header--megamenu" + - v1: ".usa-header-extended" + v2: ".usa-header--extended" + - v1: ".usa-header-search-button" + v2: "deprecated: not used" deprecated: true - - v1: '.usa-megamenu' - v2: '.usa-megamenu' - - v1: '.usa-megamenu-col' - v2: 'deprecated: use utilities' + - v1: ".usa-megamenu" + v2: ".usa-megamenu" + - v1: ".usa-megamenu-col" + v2: "deprecated: use utilities" deprecated: true - - v1: '.usa-mobile_nav-active' - v2: '.usa-mobile-nav--active' - - v1: '.usa-nav' - v2: '.usa-nav' - - v1: '.usa-nav-close' - v2: '.usa-nav__close' - - v1: '.usa-nav-container' - v2: '.usa-nav-container' - - v1: '.usa-nav-inner' - v2: '.usa-nav__inner' - - v1: '.usa-nav-link' - v2: '.usa-nav__link' - - v1: '.usa-nav-primary' - v2: '.usa-nav__primary' - - v1: '.usa-nav-primary li' - v2: '.usa-nav__primary-item' - - v1: '.usa-nav-secondary' - v2: '.usa-nav__secondary' - - v1: '.usa-nav-secondary li' - v2: '.usa-nav__secondary-item' - - v1: '.usa-nav-secondary-links' - v2: '.usa-nav__secondary-links' - - v1: '.usa-nav-submenu' - v2: '.usa-nav__submenu' - - v1: '.usa-nav-submenu li' - v2: '.usa-nav__submenu-item' - - v1: '.usa-nav-submenu ul' - v2: '.usa-nav__submenu-list' - - v1: '.usa-navbar' - v2: '.usa-navbar' - - v1: '.usa-search' - v2: '.usa-search' + - v1: ".usa-mobile_nav-active" + v2: ".usa-mobile-nav--active" + - v1: ".usa-nav" + v2: ".usa-nav" + - v1: ".usa-nav-close" + v2: ".usa-nav__close" + - v1: ".usa-nav-container" + v2: ".usa-nav-container" + - v1: ".usa-nav-inner" + v2: ".usa-nav__inner" + - v1: ".usa-nav-link" + v2: ".usa-nav__link" + - v1: ".usa-nav-primary" + v2: ".usa-nav__primary" + - v1: ".usa-nav-primary li" + v2: ".usa-nav__primary-item" + - v1: ".usa-nav-secondary" + v2: ".usa-nav__secondary" + - v1: ".usa-nav-secondary li" + v2: ".usa-nav__secondary-item" + - v1: ".usa-nav-secondary-links" + v2: ".usa-nav__secondary-links" + - v1: ".usa-nav-submenu" + v2: ".usa-nav__submenu" + - v1: ".usa-nav-submenu li" + v2: ".usa-nav__submenu-item" + - v1: ".usa-nav-submenu ul" + v2: ".usa-nav__submenu-list" + - v1: ".usa-navbar" + v2: ".usa-navbar" + - v1: ".usa-search" + v2: ".usa-search" search: - - v1: '.usa-search' - v2: '.usa-search' - - v1: '.usa-search-big' - v2: '.usa-search--big' - - v1: '.usa-search-input' - v2: '.usa-search__input' - - v1: '.usa-search-small' - v2: '.usa-search--small' - - v1: '.usa-search-submit' - v2: '.usa-search__submit' - - v1: '.usa-search-submit-text' - v2: '.usa-search__submit-text' + - v1: ".usa-search" + v2: ".usa-search" + - v1: ".usa-search-big" + v2: ".usa-search--big" + - v1: ".usa-search-input" + v2: ".usa-search__input" + - v1: ".usa-search-small" + v2: ".usa-search--small" + - v1: ".usa-search-submit" + v2: ".usa-search__submit" + - v1: ".usa-search-submit-text" + v2: ".usa-search__submit-text" section: - - v1: '.usa-section-dark' - v2: '.usa-section--dark' - - v1: '.usa-section-light' - v2: '.usa-section--light' + - v1: ".usa-section-dark" + v2: ".usa-section--dark" + - v1: ".usa-section-light" + v2: ".usa-section--light" sidenav: - - v1: '.usa-layout-docs-sidenav' - v2: '.usa-layout-docs__sidenav' - - v1: '.usa-sidenav-list' - v2: '.usa-sidenav' - - v1: '.usa-sidenav-sub_list' - v2: '.usa-sidenav__sublist' - - v1: '.usa-sidenav li' - v2: '.usa-sidenav__item' + - v1: ".usa-layout-docs-sidenav" + v2: ".usa-layout-docs__sidenav" + - v1: ".usa-sidenav-list" + v2: ".usa-sidenav" + - v1: ".usa-sidenav-sub_list" + v2: ".usa-sidenav__sublist" + - v1: ".usa-sidenav li" + v2: ".usa-sidenav__item" skipnav: - - v1: '.usa-skipnav' - v2: '.usa-skipnav' + - v1: ".usa-skipnav" + v2: ".usa-skipnav" variables: - - v1: '$em-base' - v1_value: '10px' - v2: '$theme-root-font-size' - v2_value: '16px' - kind: 'px' - location: 'typography' - notes: 'only applies when `$theme-respect-user-font-size` is set to `false`' - - v1: '$base-font-size' - v1_value: '1.7rem' - v2: '$theme-body-font-size' - v2_value: 'sm' - kind: 'size' - location: 'typography' + - v1: "$em-base" + v1_value: "10px" + v2: "$theme-root-font-size" + v2_value: "16px" + kind: "px" + location: "typography" + notes: "only applies when `$theme-respect-user-font-size` is set to `false`" + - v1: "$base-font-size" + v1_value: "1.7rem" + v2: "$theme-body-font-size" + v2_value: "sm" + kind: "size" + location: "typography" notes: - - v1: '$small-font-size' - v1_value: '1.4rem' - v2: '$theme-small-font-size' - v2_value: '2xs' - kind: 'size' - location: 'typography' + - v1: "$small-font-size" + v1_value: "1.4rem" + v2: "$theme-small-font-size" + v2_value: "2xs" + kind: "size" + location: "typography" notes: - - v1: '$lead-font-size' - v1_value: '2rem' - v2: '$theme-lead-font-size' - v2_value: 'lg' - kind: 'size' - location: 'typography' + - v1: "$lead-font-size" + v1_value: "2rem" + v2: "$theme-lead-font-size" + v2_value: "lg" + kind: "size" + location: "typography" notes: - - v1: '$title-font-size' - v1_value: '5.2rem' - v2: '$theme-display-font-size' - v2_value: '3xl' - kind: 'size' - location: 'typography' + - v1: "$title-font-size" + v1_value: "5.2rem" + v2: "$theme-display-font-size" + v2_value: "3xl" + kind: "size" + location: "typography" notes: - - v1: '$h1-font-size' - v1_value: '4rem' - v2: '$theme-h1-font-size' - v2_value: '2xl' - kind: 'size' - location: 'typography' + - v1: "$h1-font-size" + v1_value: "4rem" + v2: "$theme-h1-font-size" + v2_value: "2xl" + kind: "size" + location: "typography" notes: - - v1: '$h2-font-size' - v1_value: '3rem' - v2: '$theme-h2-font-size' - v2_value: 'xl' - kind: 'size' - location: 'typography' + - v1: "$h2-font-size" + v1_value: "3rem" + v2: "$theme-h2-font-size" + v2_value: "xl" + kind: "size" + location: "typography" notes: - - v1: '$h3-font-size' - v1_value: '2rem' - v2: '$theme-h3-font-size' - v2_value: 'lg' - kind: 'size' - location: 'typography' + - v1: "$h3-font-size" + v1_value: "2rem" + v2: "$theme-h3-font-size" + v2_value: "lg" + kind: "size" + location: "typography" notes: - - v1: '$h4-font-size' - v1_value: '1.7rem' - v2: '$theme-h4-font-size' - v2_value: 'sm' - kind: 'size' - location: 'typography' + - v1: "$h4-font-size" + v1_value: "1.7rem" + v2: "$theme-h4-font-size" + v2_value: "sm" + kind: "size" + location: "typography" notes: - - v1: '$h5-font-size' - v1_value: '1.5rem' - v2: '$theme-h5-font-size' - v2_value: 'xs' - kind: 'size' - location: 'typography' + - v1: "$h5-font-size" + v1_value: "1.5rem" + v2: "$theme-h5-font-size" + v2_value: "xs" + kind: "size" + location: "typography" notes: - - v1: '$h6-font-size' - v1_value: '1.3rem' - v2: '$theme-h6-font-size' - v2_value: '3xs' - kind: 'size' - location: 'typography' + - v1: "$h6-font-size" + v1_value: "1.3rem" + v2: "$theme-h6-font-size" + v2_value: "3xs" + kind: "size" + location: "typography" notes: - - v1: '$base-line-height' - v1_value: '1.5' - v2: '$theme-body-line-height' - v2_value: '5' - kind: 'line-height' - location: 'typography' + - v1: "$base-line-height" + v1_value: "1.5" + v2: "$theme-body-line-height" + v2_value: "5" + kind: "line-height" + location: "typography" notes: - - v1: '$heading-line-height' - v1_value: '1.3' - v2: '$theme-heading-line-height' - v2_value: '2' - kind: 'line-height' - location: 'typography' + - v1: "$heading-line-height" + v1_value: "1.3" + v2: "$theme-heading-line-height" + v2_value: "2" + kind: "line-height" + location: "typography" notes: - - v1: '$lead-line-height' - v1_value: '1.7' - v2: '$theme-lead-line-height' - v2_value: '6' - kind: 'line-height' - location: 'typography' + - v1: "$lead-line-height" + v1_value: "1.7" + v2: "$theme-lead-line-height" + v2_value: "6" + kind: "line-height" + location: "typography" notes: - - v1: '$font-sans' - v1_value: 'Source Sans Pro, $helvetica' - v2: '$theme-font-type-sans' - v2_value: 'source-sans-pro' - kind: 'family' - location: 'typography' + - v1: "$font-sans" + v1_value: "Source Sans Pro, $helvetica" + v2: "$theme-font-type-sans" + v2_value: "source-sans-pro" + kind: "family" + location: "typography" notes: - - v1: '$font-serif' - v1_value: 'Merriweather, $georgia' - v2: '$theme-font-type-serif' - v2_value: 'merriweather' - kind: 'family' - location: 'typography' + - v1: "$font-serif" + v1_value: "Merriweather, $georgia" + v2: "$theme-font-type-serif" + v2_value: "merriweather" + kind: "family" + location: "typography" notes: - - v1: '$font-normal' - v1_value: '400' - v2: '$theme-font-weight-normal' - v2_value: '400' - kind: 'weight' - location: 'typography' + - v1: "$font-normal" + v1_value: "400" + v2: "$theme-font-weight-normal" + v2_value: "400" + kind: "weight" + location: "typography" notes: - - v1: '$font-bold' - v1_value: '700' - v2: '$theme-font-weight-bold' - v2_value: '700' - kind: 'weight' - location: 'typography' + - v1: "$font-bold" + v1_value: "700" + v2: "$theme-font-weight-bold" + v2_value: "700" + kind: "weight" + location: "typography" notes: - - v1: '$color-blue' - v1_value: '#0071bc' - v2: 'n/a' - v2_value: 'blue-60v' - kind: '—' - notes: 'use color token' - - v1: '$color-blue-darker' - v1_value: '#205493' - v2: 'n/a' - v2_value: 'blue-warm-70v' - kind: '—' - notes: 'use color token' - - v1: '$color-blue-darkest' - v1_value: '#112e51' - v2: 'n/a' - v2_value: 'blue-warm-80v' - kind: '—' - notes: 'use color token' - - v1: '$color-aqua' - v1_value: '#02bfe7' - v2: 'n/a' - v2_value: 'cyan-30v' - kind: '—' - notes: 'use color token' - - v1: '$color-aqua-dark' - v1_value: '#00a6d2' - v2: 'n/a' - v2_value: 'cyan-40v' - kind: '—' - notes: 'use color token' - - v1: '$color-aqua-darkest' - v1_value: '#046b99' - v2: 'n/a' - v2_value: 'blue-cool-60v' - kind: '—' - notes: 'use color token' - - v1: '$color-aqua-light' - v1_value: '#9bdaf1' - v2: 'n/a' - v2_value: 'blue-cool-20v' - kind: '—' - notes: 'use color token' - - v1: '$color-aqua-lightest' - v1_value: '#e1f3f8' - v2: 'n/a' - v2_value: 'blue-cool-5v' - kind: '—' - notes: 'use color token' - - v1: '$color-red' - v1_value: '#e31c3d' - v2: 'n/a' - v2_value: 'red-cool-50v' - kind: '—' - notes: 'use color token' - - v1: '$color-red-dark' - v1_value: '#cd2026' - v2: 'n/a' - v2_value: 'red-60v' - kind: '—' - notes: 'use color token' - - v1: '$color-red-darkest' - v1_value: '#981b1e' - v2: 'n/a' - v2_value: 'red-70v' - kind: '—' - notes: 'use color token' - - v1: '$color-red-light' - v1_value: '#e59393' - v2: 'n/a' - v2_value: 'red-30' - kind: '—' - notes: 'use color token' - - v1: '$color-red-lightest' - v1_value: '#f9dede' - v2: 'n/a' - v2_value: 'red-cool-10v' - kind: '—' - notes: 'use color token' - - v1: '$color-white' - v1_value: '#ffffff' - v2: 'n/a' - v2_value: 'white' - kind: '—' - notes: 'use color token' - - v1: '$color-black' - v1_value: '#000000' - v2: 'n/a' - v2_value: 'black' - kind: '—' - notes: 'use color token' - - v1: '$color-black-light' - v1_value: '#212121' - v2: 'n/a' - v2_value: 'gray-90' - kind: '—' - notes: 'use color token' - - v1: '$color-gray-dark' - v1_value: '#323a45' - v2: 'n/a' - v2_value: 'gray-cool-70' - kind: '—' - notes: 'use color token' - - v1: '$color-gray' - v1_value: '#5b616b' - v2: 'n/a' - v2_value: 'gray-cool-60' - kind: '—' - notes: 'use color token' - - v1: '$color-gray-medium' - v1_value: '#757575' - v2: 'n/a' - v2_value: 'gray-50' - kind: '—' - notes: 'use color token' - - v1: '$color-gray-light' - v1_value: '#aeb0b5' - v2: 'n/a' - v2_value: 'gray-cool-30' - kind: '—' - notes: 'use color token' - - v1: '$color-gray-lighter' - v1_value: '#d6d7d9' - v2: 'n/a' - v2_value: 'gray-cool-10' - kind: '—' - notes: 'use color token' - - v1: '$color-gray-lightest' - v1_value: '#f1f1f1' - v2: 'n/a' - v2_value: 'gray-cool-5' - kind: '—' - notes: 'use color token' - - v1: '$color-gray-warm-dark' - v1_value: '#494440' - v2: 'n/a' - v2_value: 'gray-warm-70' - kind: '—' - notes: 'use color token' - - v1: '$color-gray-warm-light' - v1_value: '#e4e2e0' - v2: 'n/a' - v2_value: 'gray-warm-10' - kind: '—' - notes: 'use color token' - - v1: '$color-gray-cool-light' - v1_value: '#dce4ef' - v2: 'n/a' - v2_value: 'blue-warm-10' - kind: '—' - notes: 'use color token' - - v1: '$color-gold' - v1_value: '#fdb81e' - v2: 'n/a' - v2_value: 'gold-20v' - kind: '—' - notes: 'use color token' - - v1: '$color-gold-light' - v1_value: '#f9c642' - v2: 'n/a' - v2_value: 'yellow-20v' - kind: '—' - notes: 'use color token' - - v1: '$color-gold-lighter' - v1_value: '#fad980' - v2: 'n/a' - v2_value: 'gold-10v' - kind: '—' - notes: 'use color token' - - v1: '$color-gold-lightest' - v1_value: '#fff1d2' - v2: 'n/a' - v2_value: 'gold-5v' - kind: '—' - notes: 'use color token' - - v1: '$color-green' - v1_value: '#2e8540' - v2: 'n/a' - v2_value: 'green-cool-50v' - kind: '—' - notes: 'use color token' - - v1: '$color-green-light' - v1_value: '#4aa564' - v2: 'n/a' - v2_value: 'green-cool-40' - kind: '—' - notes: 'use color token' - - v1: '$color-green-lighter' - v1_value: '#94bfa2' - v2: 'n/a' - v2_value: 'green-cool-20' - kind: '—' - notes: 'use color token' - - v1: '$color-green-lightest' - v1_value: '#e7f4e4' - v2: 'n/a' - v2_value: 'green-cool-5' - kind: '—' - notes: 'use color token' - - v1: '$color-cool-blue' - v1_value: '#205493' - v2: 'n/a' - v2_value: 'blue-warm-60' - kind: '—' - notes: 'use color token' - - v1: '$color-cool-blue-light' - v1_value: '#4773aa' - v2: 'n/a' - v2_value: 'blue-warm-50' - kind: '—' - notes: 'use color token' - - v1: '$color-cool-blue-lighter' - v1_value: '#8ba6ca' - v2: 'n/a' - v2_value: 'blue-warm-30' - kind: '—' - notes: 'use color token' - - v1: '$color-cool-blue-lightest' - v1_value: '#dce4ef' - v2: 'n/a' - v2_value: 'blue-warm-10' - kind: '—' - notes: 'use color token' - - v1: '$color-purple' - v1_value: '#4c2c92' - v2: 'n/a' - v2_value: 'violet-70v' - kind: '—' - notes: 'use color token' - - v1: '$color-primary' - v1_value: '$color-blue' - v2: '$theme-color-primary' - v2_value: 'blue-60v' - kind: 'color' - location: 'color' + - v1: "$color-blue" + v1_value: "#0071bc" + v2: "n/a" + v2_value: "blue-60v" + kind: "—" + notes: "use color token" + - v1: "$color-blue-darker" + v1_value: "#205493" + v2: "n/a" + v2_value: "blue-warm-70v" + kind: "—" + notes: "use color token" + - v1: "$color-blue-darkest" + v1_value: "#112e51" + v2: "n/a" + v2_value: "blue-warm-80v" + kind: "—" + notes: "use color token" + - v1: "$color-aqua" + v1_value: "#02bfe7" + v2: "n/a" + v2_value: "cyan-30v" + kind: "—" + notes: "use color token" + - v1: "$color-aqua-dark" + v1_value: "#00a6d2" + v2: "n/a" + v2_value: "cyan-40v" + kind: "—" + notes: "use color token" + - v1: "$color-aqua-darkest" + v1_value: "#046b99" + v2: "n/a" + v2_value: "blue-cool-60v" + kind: "—" + notes: "use color token" + - v1: "$color-aqua-light" + v1_value: "#9bdaf1" + v2: "n/a" + v2_value: "blue-cool-20v" + kind: "—" + notes: "use color token" + - v1: "$color-aqua-lightest" + v1_value: "#e1f3f8" + v2: "n/a" + v2_value: "blue-cool-5v" + kind: "—" + notes: "use color token" + - v1: "$color-red" + v1_value: "#e31c3d" + v2: "n/a" + v2_value: "red-cool-50v" + kind: "—" + notes: "use color token" + - v1: "$color-red-dark" + v1_value: "#cd2026" + v2: "n/a" + v2_value: "red-60v" + kind: "—" + notes: "use color token" + - v1: "$color-red-darkest" + v1_value: "#981b1e" + v2: "n/a" + v2_value: "red-70v" + kind: "—" + notes: "use color token" + - v1: "$color-red-light" + v1_value: "#e59393" + v2: "n/a" + v2_value: "red-30" + kind: "—" + notes: "use color token" + - v1: "$color-red-lightest" + v1_value: "#f9dede" + v2: "n/a" + v2_value: "red-cool-10v" + kind: "—" + notes: "use color token" + - v1: "$color-white" + v1_value: "#ffffff" + v2: "n/a" + v2_value: "white" + kind: "—" + notes: "use color token" + - v1: "$color-black" + v1_value: "#000000" + v2: "n/a" + v2_value: "black" + kind: "—" + notes: "use color token" + - v1: "$color-black-light" + v1_value: "#212121" + v2: "n/a" + v2_value: "gray-90" + kind: "—" + notes: "use color token" + - v1: "$color-gray-dark" + v1_value: "#323a45" + v2: "n/a" + v2_value: "gray-cool-70" + kind: "—" + notes: "use color token" + - v1: "$color-gray" + v1_value: "#5b616b" + v2: "n/a" + v2_value: "gray-cool-60" + kind: "—" + notes: "use color token" + - v1: "$color-gray-medium" + v1_value: "#757575" + v2: "n/a" + v2_value: "gray-50" + kind: "—" + notes: "use color token" + - v1: "$color-gray-light" + v1_value: "#aeb0b5" + v2: "n/a" + v2_value: "gray-cool-30" + kind: "—" + notes: "use color token" + - v1: "$color-gray-lighter" + v1_value: "#d6d7d9" + v2: "n/a" + v2_value: "gray-cool-10" + kind: "—" + notes: "use color token" + - v1: "$color-gray-lightest" + v1_value: "#f1f1f1" + v2: "n/a" + v2_value: "gray-cool-5" + kind: "—" + notes: "use color token" + - v1: "$color-gray-warm-dark" + v1_value: "#494440" + v2: "n/a" + v2_value: "gray-warm-70" + kind: "—" + notes: "use color token" + - v1: "$color-gray-warm-light" + v1_value: "#e4e2e0" + v2: "n/a" + v2_value: "gray-warm-10" + kind: "—" + notes: "use color token" + - v1: "$color-gray-cool-light" + v1_value: "#dce4ef" + v2: "n/a" + v2_value: "blue-warm-10" + kind: "—" + notes: "use color token" + - v1: "$color-gold" + v1_value: "#fdb81e" + v2: "n/a" + v2_value: "gold-20v" + kind: "—" + notes: "use color token" + - v1: "$color-gold-light" + v1_value: "#f9c642" + v2: "n/a" + v2_value: "yellow-20v" + kind: "—" + notes: "use color token" + - v1: "$color-gold-lighter" + v1_value: "#fad980" + v2: "n/a" + v2_value: "gold-10v" + kind: "—" + notes: "use color token" + - v1: "$color-gold-lightest" + v1_value: "#fff1d2" + v2: "n/a" + v2_value: "gold-5v" + kind: "—" + notes: "use color token" + - v1: "$color-green" + v1_value: "#2e8540" + v2: "n/a" + v2_value: "green-cool-50v" + kind: "—" + notes: "use color token" + - v1: "$color-green-light" + v1_value: "#4aa564" + v2: "n/a" + v2_value: "green-cool-40" + kind: "—" + notes: "use color token" + - v1: "$color-green-lighter" + v1_value: "#94bfa2" + v2: "n/a" + v2_value: "green-cool-20" + kind: "—" + notes: "use color token" + - v1: "$color-green-lightest" + v1_value: "#e7f4e4" + v2: "n/a" + v2_value: "green-cool-5" + kind: "—" + notes: "use color token" + - v1: "$color-cool-blue" + v1_value: "#205493" + v2: "n/a" + v2_value: "blue-warm-60" + kind: "—" + notes: "use color token" + - v1: "$color-cool-blue-light" + v1_value: "#4773aa" + v2: "n/a" + v2_value: "blue-warm-50" + kind: "—" + notes: "use color token" + - v1: "$color-cool-blue-lighter" + v1_value: "#8ba6ca" + v2: "n/a" + v2_value: "blue-warm-30" + kind: "—" + notes: "use color token" + - v1: "$color-cool-blue-lightest" + v1_value: "#dce4ef" + v2: "n/a" + v2_value: "blue-warm-10" + kind: "—" + notes: "use color token" + - v1: "$color-purple" + v1_value: "#4c2c92" + v2: "n/a" + v2_value: "violet-70v" + kind: "—" + notes: "use color token" + - v1: "$color-primary" + v1_value: "$color-blue" + v2: "$theme-color-primary" + v2_value: "blue-60v" + kind: "color" + location: "color" notes: - - v1: '$color-primary-darker' - v1_value: '$color-blue-darker' - v2: '$theme-color-primary-dark' - v2_value: 'blue-warm-70v' - kind: 'color' - location: 'color' + - v1: "$color-primary-darker" + v1_value: "$color-blue-darker" + v2: "$theme-color-primary-dark" + v2_value: "blue-warm-70v" + kind: "color" + location: "color" notes: - - v1: '$color-primary-darkest' - v1_value: '$color-blue-darkest' - v2: '$theme-color-primary-darker' - v2_value: 'blue-warm-80v' - kind: 'color' - location: 'color' + - v1: "$color-primary-darkest" + v1_value: "$color-blue-darkest" + v2: "$theme-color-primary-darker" + v2_value: "blue-warm-80v" + kind: "color" + location: "color" notes: - - v1: '$color-primary-alt' - v1_value: '$color-aqua' - v2: '$theme-color-accent-cool' - v2_value: 'cyan-30v' - kind: 'color' - location: 'color' + - v1: "$color-primary-alt" + v1_value: "$color-aqua" + v2: "$theme-color-accent-cool" + v2_value: "cyan-30v" + kind: "color" + location: "color" notes: - - v1: '$color-primary-alt-dark' - v1_value: '$color-aqua-dark' - v2: '$theme-color-accent-cool-dark' - v2_value: 'blue-cool-40v' - kind: 'color' - location: 'color' + - v1: "$color-primary-alt-dark" + v1_value: "$color-aqua-dark" + v2: "$theme-color-accent-cool-dark" + v2_value: "blue-cool-40v" + kind: "color" + location: "color" notes: - - v1: '$color-primary-alt-darkest' - v1_value: '$color-aqua-darkest' - v2: '$theme-color-accent-cool-darker' - v2_value: 'blue-cool-60v' - kind: 'color' - location: 'color' + - v1: "$color-primary-alt-darkest" + v1_value: "$color-aqua-darkest" + v2: "$theme-color-accent-cool-darker" + v2_value: "blue-cool-60v" + kind: "color" + location: "color" notes: - - v1: '$color-primary-alt-light' - v1_value: '$color-aqua-light' - v2: '$theme-color-accent-cool-light' - v2_value: 'blue-cool-20v' - kind: 'color' - location: 'color' + - v1: "$color-primary-alt-light" + v1_value: "$color-aqua-light" + v2: "$theme-color-accent-cool-light" + v2_value: "blue-cool-20v" + kind: "color" + location: "color" notes: - - v1: '$color-primary-alt-lightest' - v1_value: '$color-aqua-lightest' - v2: '$theme-color-accent-cool-lighter' - v2_value: 'blue-cool-5v' - kind: 'color' - location: 'color' + - v1: "$color-primary-alt-lightest" + v1_value: "$color-aqua-lightest" + v2: "$theme-color-accent-cool-lighter" + v2_value: "blue-cool-5v" + kind: "color" + location: "color" notes: - - v1: '$color-secondary' - v1_value: '$color-red' - v2: '$theme-color-secondary-vivid' - v2_value: 'red-cool-50v' - kind: 'color' - location: 'color' + - v1: "$color-secondary" + v1_value: "$color-red" + v2: "$theme-color-secondary-vivid" + v2_value: "red-cool-50v" + kind: "color" + location: "color" notes: - - v1: '$color-secondary-dark' - v1_value: '$color-red-dark' - v2: '$theme-color-secondary-dark' - v2_value: 'red-60v' - kind: 'color' - location: 'color' + - v1: "$color-secondary-dark" + v1_value: "$color-red-dark" + v2: "$theme-color-secondary-dark" + v2_value: "red-60v" + kind: "color" + location: "color" notes: - - v1: '$color-secondary-darkest' - v1_value: '$color-red-darkest' - v2: '$theme-color-secondary-darker' - v2_value: 'red-70v' - kind: 'color' - location: 'color' + - v1: "$color-secondary-darkest" + v1_value: "$color-red-darkest" + v2: "$theme-color-secondary-darker" + v2_value: "red-70v" + kind: "color" + location: "color" notes: - - v1: '$color-secondary-light' - v1_value: '$color-red-light' - v2: '$theme-color-secondary-light' - v2_value: 'red-30' - kind: 'color' - location: 'color' + - v1: "$color-secondary-light" + v1_value: "$color-red-light" + v2: "$theme-color-secondary-light" + v2_value: "red-30" + kind: "color" + location: "color" notes: - - v1: '$color-secondary-lightest' - v1_value: '$color-red-lightest' - v2: '$theme-color-secondary-lighter' - v2_value: 'red-cool-10v' - kind: 'color' - location: 'color' + - v1: "$color-secondary-lightest" + v1_value: "$color-red-lightest" + v2: "$theme-color-secondary-lighter" + v2_value: "red-cool-10v" + kind: "color" + location: "color" notes: - - v1: '$color-base' - v1_value: '$color-black-light' - v2: '$theme-color-base-darkest' - v2_value: 'black-90' - kind: 'color' - location: 'color' + - v1: "$color-base" + v1_value: "$color-black-light" + v2: "$theme-color-base-darkest" + v2_value: "black-90" + kind: "color" + location: "color" notes: - - v1: '$color-focus' - v1_value: '$color-gray-light' - v2: '$theme-focus-color' - v2_value: 'blue-40v' - kind: 'color' - location: 'general' + - v1: "$color-focus" + v1_value: "$color-gray-light" + v2: "$theme-focus-color" + v2_value: "blue-40v" + kind: "color" + location: "general" notes: - - v1: '$color-visited' - v1_value: '$color-purple' - v2: '$theme-link-visited-color' - v2_value: 'violet-70v' - kind: 'color' - location: 'color' + - v1: "$color-visited" + v1_value: "$color-purple" + v2: "$theme-link-visited-color" + v2_value: "violet-70v" + kind: "color" + location: "color" notes: - - v1: '$color-shadow' - v1_value: 'rgba(#000, 0.3)' - v2: 'n/a' - v2_value: '—' - kind: '—' - notes: 'use shadow tokens' - - v1: '$color-transparent' - v1_value: 'rgba(#000, 0)' - v2: 'n/a' - v2_value: 'transparent' - kind: '—' - notes: 'use color token' - - v1: '$small-screen' - v1_value: '481px' - v2: 'n/a' - v2_value: 'mobile-lg' - kind: '—' - notes: 'use width token' - - v1: '$medium-screen' - v1_value: '600px' - v2: 'n/a' - v2_value: 'tablet' - kind: '—' - notes: 'use width token' - - v1: '$large-screen' - v1_value: '1201px' - v2: 'n/a' - v2_value: 'desktop-lg' - kind: '—' - notes: 'use width token' - - v1: '$grid-columns-small' - v1_value: '1' - v2: 'n/a' - v2_value: '—' - kind: '—' - notes: 'use layout grid' - - v1: '$grid-columns-medium' - v1_value: '6' - v2: 'n/a' - v2_value: '—' - kind: '—' - notes: 'use layout grid' - - v1: '$grid-columns-large' - v1_value: '12' - v2: 'n/a' - v2_value: '—' - kind: '—' - notes: 'use layout grid' - - v1: '$small' - v1_value: 'new-breakpoint(min-width $small-screen $grid-columns-small)' - v2: 'n/a' - v2_value: '—' - kind: '—' - notes: 'use `at-media()` mixin and width tokens' - - v1: '$medium' - v1_value: 'new-breakpoint(min-width $medium-screen $grid-columns-medium)' - v2: 'n/a' - v2_value: '—' - kind: '—' - notes: 'use `at-media()` mixin and width tokens' - - v1: '$large' - v1_value: 'new-breakpoint(min-width $large-screen $grid-columns-large)' - v2: 'n/a' - v2_value: '—' - kind: '—' - notes: 'use `at-media()` mixin and width tokens' - - v1: '$asset-path' - v1_value: '../' - v2: 'n/a' - v2_value: '—' - kind: '—' - notes: 'use `$theme-font-path` and `$theme-image-path`' - - v1: '$font-path' - v1_value: '#{$asset-path}fonts' - v2: '$theme-font-path' - v2_value: '../fonts' - kind: 'path' - location: 'typography' - notes: 'relative to the compiled css' - - v1: '$image-path' - v1_value: '#{$asset-path}img' - v2: '$theme-image-path' - v2_value: '../img' - kind: 'path' - location: 'general' - notes: 'relative to the compiled css' - - v1: '$asset-pipeline' - v1_value: 'FALSE' - v2: 'n/a' - v2_value: '—' - kind: '—' - notes: 'this functionality is not implemented in v2' - - v1: '$text-max-width' - v1_value: '66ch' - v2: '$theme-text-measure' - v2_value: '4' - kind: 'measure' - location: 'typography' + - v1: "$color-shadow" + v1_value: "rgba(#000, 0.3)" + v2: "n/a" + v2_value: "—" + kind: "—" + notes: "use shadow tokens" + - v1: "$color-transparent" + v1_value: "rgba(#000, 0)" + v2: "n/a" + v2_value: "transparent" + kind: "—" + notes: "use color token" + - v1: "$small-screen" + v1_value: "481px" + v2: "n/a" + v2_value: "mobile-lg" + kind: "—" + notes: "use width token" + - v1: "$medium-screen" + v1_value: "600px" + v2: "n/a" + v2_value: "tablet" + kind: "—" + notes: "use width token" + - v1: "$large-screen" + v1_value: "1201px" + v2: "n/a" + v2_value: "desktop-lg" + kind: "—" + notes: "use width token" + - v1: "$grid-columns-small" + v1_value: "1" + v2: "n/a" + v2_value: "—" + kind: "—" + notes: "use layout grid" + - v1: "$grid-columns-medium" + v1_value: "6" + v2: "n/a" + v2_value: "—" + kind: "—" + notes: "use layout grid" + - v1: "$grid-columns-large" + v1_value: "12" + v2: "n/a" + v2_value: "—" + kind: "—" + notes: "use layout grid" + - v1: "$small" + v1_value: "new-breakpoint(min-width $small-screen $grid-columns-small)" + v2: "n/a" + v2_value: "—" + kind: "—" + notes: "use `at-media()` mixin and width tokens" + - v1: "$medium" + v1_value: "new-breakpoint(min-width $medium-screen $grid-columns-medium)" + v2: "n/a" + v2_value: "—" + kind: "—" + notes: "use `at-media()` mixin and width tokens" + - v1: "$large" + v1_value: "new-breakpoint(min-width $large-screen $grid-columns-large)" + v2: "n/a" + v2_value: "—" + kind: "—" + notes: "use `at-media()` mixin and width tokens" + - v1: "$asset-path" + v1_value: "../" + v2: "n/a" + v2_value: "—" + kind: "—" + notes: "use `$theme-font-path` and `$theme-image-path`" + - v1: "$font-path" + v1_value: "#{$asset-path}fonts" + v2: "$theme-font-path" + v2_value: "../fonts" + kind: "path" + location: "typography" + notes: "relative to the compiled css" + - v1: "$image-path" + v1_value: "#{$asset-path}img" + v2: "$theme-image-path" + v2_value: "../img" + kind: "path" + location: "general" + notes: "relative to the compiled css" + - v1: "$asset-pipeline" + v1_value: "FALSE" + v2: "n/a" + v2_value: "—" + kind: "—" + notes: "this functionality is not implemented in v2" + - v1: "$text-max-width" + v1_value: "66ch" + v2: "$theme-text-measure" + v2_value: "4" + kind: "measure" + location: "typography" notes: - - v1: '$lead-max-width' - v1_value: '77rem' - v2: '$theme-lead-measure' - v2_value: '6' - kind: 'measure' - location: 'typography' + - v1: "$lead-max-width" + v1_value: "77rem" + v2: "$theme-lead-measure" + v2_value: "6" + kind: "measure" + location: "typography" notes: - - v1: '$site-max-width' - v1_value: '1040px' - v2: '$theme-grid-container-max-width' - v2_value: 'desktop' - kind: 'units' - location: 'spacing' + - v1: "$site-max-width" + v1_value: "1040px" + v2: "$theme-grid-container-max-width" + v2_value: "desktop" + kind: "units" + location: "spacing" notes: - - v1: '$site-margins' - v1_value: '3rem' - v2: '$theme-site-margins-width' - v2_value: '4' - kind: 'units' - location: 'spacing' + - v1: "$site-margins" + v1_value: "3rem" + v2: "$theme-site-margins-width" + v2_value: "4" + kind: "units" + location: "spacing" notes: - - v1: '$site-margins-mobile' - v1_value: '1.5rem' - v2: '$theme-site-margins-mobile-width' - v2_value: '2' - kind: 'units' - location: 'spacing' + - v1: "$site-margins-mobile" + v1_value: "1.5rem" + v2: "$theme-site-margins-mobile-width" + v2_value: "2" + kind: "units" + location: "spacing" notes: - - v1: '$article-max-width' - v1_value: '600px' - v2: 'n/a' - v2_value: '—' - kind: '—' + - v1: "$article-max-width" + v1_value: "600px" + v2: "n/a" + v2_value: "—" + kind: "—" notes: - - v1: '$input-max-width' - v1_value: '46rem' - v2: '$theme-input-max-width' - v2_value: 'mobile-lg' - kind: 'units' - location: 'component' + - v1: "$input-max-width" + v1_value: "46rem" + v2: "$theme-input-max-width" + v2_value: "mobile-lg" + kind: "units" + location: "component" notes: - - v1: '$label-border-radius' - v1_value: '2px' - v2: 'n/a' - v2_value: '—' - kind: '—' - notes: 'not used in v2 — currently `sm`' - - v1: '$checkbox-border-radius' - v1_value: '2px' - v2: '$theme-checkbox-border-radius' - v2_value: 'sm' - kind: 'border-radius|units' - location: 'component' + - v1: "$label-border-radius" + v1_value: "2px" + v2: "n/a" + v2_value: "—" + kind: "—" + notes: "not used in v2 — currently `sm`" + - v1: "$checkbox-border-radius" + v1_value: "2px" + v2: "$theme-checkbox-border-radius" + v2_value: "sm" + kind: "border-radius|units" + location: "component" notes: - - v1: '$border-radius' - v1_value: '3px' - v2: '$theme-border-radius-md' - v2_value: '0.5' - kind: 'units' - location: 'spacing' - notes: 'use alongside `$theme-border-radius-sm` and `$theme-border-radius-lg`. sets value of `sm`, `md`, and `lg` border-radius theme tokens' - - v1: '$button-border-radius' - v1_value: '5px' - v2: '$theme-button-border-radius' - v2_value: 'md' - kind: 'border-radius|units' - location: 'component' + - v1: "$border-radius" + v1_value: "3px" + v2: "$theme-border-radius-md" + v2_value: "0.5" + kind: "units" + location: "spacing" + notes: "use alongside `$theme-border-radius-sm` and `$theme-border-radius-lg`. sets value of `sm`, `md`, and `lg` border-radius theme tokens" + - v1: "$button-border-radius" + v1_value: "5px" + v2: "$theme-button-border-radius" + v2_value: "md" + kind: "border-radius|units" + location: "component" notes: - - v1: '$box-shadow' - v1_value: '0 0 2px $color-shadow' - v2: 'n/a' - v2_value: '—' - kind: '—' - notes: 'use shadow tokens' - - v1: '$focus-outline' - v1_value: '2px dotted $color-gray-light' - v2: '$theme-focus-width' - v2_value: '0.5' - kind: 'units' - location: 'general' + - v1: "$box-shadow" + v1_value: "0 0 2px $color-shadow" + v2: "n/a" + v2_value: "—" + kind: "—" + notes: "use shadow tokens" + - v1: "$focus-outline" + v1_value: "2px dotted $color-gray-light" + v2: "$theme-focus-width" + v2_value: "0.5" + kind: "units" + location: "general" notes: - - v1: '$focus-spacing' - v1_value: '3px' - v2: '$theme-focus-offset' - v2_value: '0' - kind: 'units' - location: 'general' + - v1: "$focus-spacing" + v1_value: "3px" + v2: "$theme-focus-offset" + v2_value: "0" + kind: "units" + location: "general" notes: - - v1: '$nav-width' - v1_value: '951px' - v2: '$theme-header-max-width' - v2_value: 'desktop' - kind: 'units' - location: 'component' - notes: 'The maximum width of header and nav.' - - v1: '$nav-width' - v1_value: '951px' - v2: '$theme-header-min-width' - v2_value: 'desktop' - kind: 'units' - location: 'component' - notes: 'The minimum width of the header and nav. In practice, this is the breakpoint at which the mobile nav becomes the desktop nav. Used in media queries.' - - v1: '$sidenav-current-border-width' - v1_value: '0.4rem' - v2: '$theme-sidenav-current-border-width' - v2_value: '0.5' - kind: 'units' - location: 'component' + - v1: "$nav-width" + v1_value: "951px" + v2: "$theme-header-max-width" + v2_value: "desktop" + kind: "units" + location: "component" + notes: "The maximum width of header and nav." + - v1: "$nav-width" + v1_value: "951px" + v2: "$theme-header-min-width" + v2_value: "desktop" + kind: "units" + location: "component" + notes: "The minimum width of the header and nav. In practice, this is the breakpoint at which the mobile nav becomes the desktop nav. Used in media queries." + - v1: "$sidenav-current-border-width" + v1_value: "0.4rem" + v2: "$theme-sidenav-current-border-width" + v2_value: "0.5" + kind: "units" + location: "component" notes: - - v1: '$hit-area' - v1_value: '4.4rem' - v2: 'n/a' - v2_value: '—' - kind: '—' - notes: 'no longer a user-settable variable (now `$size-touch-target`)' - - v1: '$spacing-x-small' - v1_value: '0.5rem' - v2: 'n/a' - v2_value: '—' - kind: '—' - notes: 'use spacing tokens' - - v1: '$spacing-small' - v1_value: '1rem' - v2: 'n/a' - v2_value: '—' - kind: '—' - notes: 'use spacing tokens' - - v1: '$spacing-md-small' - v1_value: '1.5rem' - v2: 'n/a' - v2_value: '—' - kind: '—' - notes: 'use spacing tokens' - - v1: '$spacing-medium' - v1_value: '2rem' - v2: 'n/a' - v2_value: '—' - kind: '—' - notes: 'use spacing tokens' - - v1: '$spacing-large' - v1_value: '3rem' - v2: 'n/a' - v2_value: '—' - kind: '—' - notes: 'use spacing tokens' + - v1: "$hit-area" + v1_value: "4.4rem" + v2: "n/a" + v2_value: "—" + kind: "—" + notes: "no longer a user-settable variable (now `$size-touch-target`)" + - v1: "$spacing-x-small" + v1_value: "0.5rem" + v2: "n/a" + v2_value: "—" + kind: "—" + notes: "use spacing tokens" + - v1: "$spacing-small" + v1_value: "1rem" + v2: "n/a" + v2_value: "—" + kind: "—" + notes: "use spacing tokens" + - v1: "$spacing-md-small" + v1_value: "1.5rem" + v2: "n/a" + v2_value: "—" + kind: "—" + notes: "use spacing tokens" + - v1: "$spacing-medium" + v1_value: "2rem" + v2: "n/a" + v2_value: "—" + kind: "—" + notes: "use spacing tokens" + - v1: "$spacing-large" + v1_value: "3rem" + v2: "n/a" + v2_value: "—" + kind: "—" + notes: "use spacing tokens" units: - v1: 1px diff --git a/_data/monthly-calls.yml b/_data/monthly-calls.yml index 083dfab30b..a719638089 100644 --- a/_data/monthly-calls.yml +++ b/_data/monthly-calls.yml @@ -7,59 +7,59 @@ videos: id: Aa0gqEcK2G4 event_link: https://digital.gov/event/2024/12/19/uswds-monthly-call-december-2024/ slides: - link: https://s3.amazonaws.com/digitalgov/static/uswds-monthly-call-december-2024.pptx - size: 2.5 - pages: 39 - questions_link: + link: https://s3.amazonaws.com/digitalgov/static/uswds-monthly-call-december-2024.pptx + size: 2.5 + pages: 39 + questions_link: - title: The next generation of the design system subtitle: The new, modular USWDS we'll deliver in 2025 description: | - At the November monthly call, we laid out our vision for the direction of the design system. USWDS Product Lead Dan Williams shared exciting news about the beta for our new [USWDS Figma design kit](https://www.figma.com/community/file/1440921849343185329/uswds-design-kit-beta). USWDS Experience Design Lead Anne Petersen and USWDS Engineering Lead Matt Henry joined Dan to explain the design system’s shift toward modularity, and the relationship between the existing codebase (which we'll rename USWDS Core) and the Web Components–based version (which we're calling USWDS Elements), as well as with design tokens, utilities, and new design kit. + At the November monthly call, we laid out our vision for the direction of the design system. USWDS Product Lead Dan Williams shared exciting news about the beta for our new [USWDS Figma design kit](https://www.figma.com/community/file/1440921849343185329/uswds-design-kit-beta). USWDS Experience Design Lead Anne Petersen and USWDS Engineering Lead Matt Henry joined Dan to explain the design system’s shift toward modularity, and the relationship between the existing codebase (which we'll rename USWDS Core) and the Web Components–based version (which we're calling USWDS Elements), as well as with design tokens, utilities, and new design kit. date: November 2024 id: kFLPOKKEKRE event_link: https://digital.gov/event/2024/11/21/uswds-monthly-call-november-2024/ slides: - link: https://s3.amazonaws.com/digitalgov/static/uswds-monthly-call-november-2024.pptx - size: 5 - pages: 108 + link: https://s3.amazonaws.com/digitalgov/static/uswds-monthly-call-november-2024.pptx + size: 5 + pages: 108 questions_link: https://github.com/uswds/uswds/discussions/6252 - title: Engineering values subtitle: description: | - The October monthly call centered on U.S. Web Design System (USWDS) product and engineering values. To frame the discussion, USWDS Experience Design Lead Anne Petersen examined how the design system’s product and design principles have evolved over the nine year history of USWDS. USWDS Product Lead Dan Williams and USWDS Engineering Lead Matt Henry then presented a set of new product and engineering values and discussed how they will guide decision-making about USWDS Web Components and the broader development of the design system. + The October monthly call centered on U.S. Web Design System (USWDS) product and engineering values. To frame the discussion, USWDS Experience Design Lead Anne Petersen examined how the design system’s product and design principles have evolved over the nine year history of USWDS. USWDS Product Lead Dan Williams and USWDS Engineering Lead Matt Henry then presented a set of new product and engineering values and discussed how they will guide decision-making about USWDS Web Components and the broader development of the design system. date: October 2024 id: H8XUPJxiUEc event_link: https://digital.gov/event/2024/10/17/uswds-monthly-call-october-2024/ slides: - link: https://s3.amazonaws.com/digitalgov/static/uswds-monthly-call-october-2024.pptx - size: 2.5 - pages: 109 + link: https://s3.amazonaws.com/digitalgov/static/uswds-monthly-call-october-2024.pptx + size: 2.5 + pages: 109 questions_link: https://github.com/uswds/uswds/discussions/6207 - title: The landscape of Web Components subtitle: What we've learned from other design systems description: | - At the September 2024 monthly call, UX Researcher (USWDS contractor) Jacline Contrino shared results of the team’s recent landscape analysis of Web Components–based design systems. The research focused on four core areas of current design systems and areas for development: documentation, code structure, code size and performance, and distribution. - - USWDS Product Lead Dan Williams and USWDS Engineering Lead Matt Henry expanded on the research to discuss how USWDS currently fits into that landscape and how the design system is positioned for future innovations. The research findings will be foundational to developing engineering principles that will guide the team’s future decision-making about USWDS Web Components and the design system overall. + At the September 2024 monthly call, UX Researcher (USWDS contractor) Jacline Contrino shared results of the team’s recent landscape analysis of Web Components–based design systems. The research focused on four core areas of current design systems and areas for development: documentation, code structure, code size and performance, and distribution. + + USWDS Product Lead Dan Williams and USWDS Engineering Lead Matt Henry expanded on the research to discuss how USWDS currently fits into that landscape and how the design system is positioned for future innovations. The research findings will be foundational to developing engineering principles that will guide the team’s future decision-making about USWDS Web Components and the design system overall. date: September 2024 id: E826mR1B6_Y event_link: https://digital.gov/event/2024/09/19/uswds-monthly-call-september-2024/ slides: - link: https://s3.amazonaws.com/digitalgov/static/uswds-monthly-call-september-2024.pptx - size: 6.7 - pages: 75 + link: https://s3.amazonaws.com/digitalgov/static/uswds-monthly-call-september-2024.pptx + size: 6.7 + pages: 75 questions_link: https://github.com/uswds/uswds/discussions/6106 - title: A look at beta Web Components subtitle: Progress toward the next version of USWDS description: | - At the August 2024 monthly call, USWDS Experience Design Lead Anne Petersen answered community-submitted questions including an update on the submission and review process for component proposals. USWDS Product Lead Dan Williams shared updates on new and upcoming releases and demoed a preview of our new USWDS Figma Design Kit. USWDS Engineering Lead Matt Henry and USWDS contractor developer Amy Leadem also demoed early working prototypes of a few components. + At the August 2024 monthly call, USWDS Experience Design Lead Anne Petersen answered community-submitted questions including an update on the submission and review process for component proposals. USWDS Product Lead Dan Williams shared updates on new and upcoming releases and demoed a preview of our new USWDS Figma Design Kit. USWDS Engineering Lead Matt Henry and USWDS contractor developer Amy Leadem also demoed early working prototypes of a few components. date: August 2024 id: duomgOmMwro event_link: https://digital.gov/event/2024/08/15/uswds-monthly-call-august-2024/ slides: - link: https://s3.amazonaws.com/digitalgov/static/uswds-monthly-call-august-2024.pptx - size: 3.6 - pages: 48 + link: https://s3.amazonaws.com/digitalgov/static/uswds-monthly-call-august-2024.pptx + size: 3.6 + pages: 48 questions_link: https://github.com/uswds/uswds/discussions/6060 - title: A first look at U.S. Web Design System Web Components subtitle: See new Web Components in action @@ -88,7 +88,7 @@ videos: - title: Introduction to Web Components subtitle: Learn the basics about Web Components and what this technology means for USWDS description: | - Dan Williams and James Mejia from USWDS described the basics of Web Components: what they are, how this technology works, and how Web Components can simplify how teams implement and stay up-to-date with the design system. + Dan Williams and James Mejia from USWDS described the basics of Web Components: what they are, how this technology works, and how Web Components can simplify how teams implement and stay up-to-date with the design system. date: April 2024 id: GHomUbYTgwQ event_link: https://digital.gov/event/2024/04/18/uswds-monthly-call-april-2024/ @@ -100,7 +100,7 @@ videos: - title: Building with USWDS tools subtitle: Learn how to build new components that look and feel consistent with existing components description: | - Our USWDS team did a live [tutorial on customizing and extending USWDS](https://github.com/uswds/uswds-tutorial). We covered working with settings, applying tokens, handling style conflicts, and ensuring good color contrast. + Our USWDS team did a live [tutorial on customizing and extending USWDS](https://github.com/uswds/uswds-tutorial). We covered working with settings, applying tokens, handling style conflicts, and ensuring good color contrast. date: March 2024 id: M2_SVDc_eCM event_link: https://digital.gov/event/2024/03/21/uswds-monthly-call-march-2024/ diff --git a/_data/settings/components/checkbox.yml b/_data/settings/components/checkbox.yml index d8943e50fc..2834adb623 100644 --- a/_data/settings/components/checkbox.yml +++ b/_data/settings/components/checkbox.yml @@ -7,7 +7,7 @@ contents: description: Checkbox border radius for rounded corners. - name: Background color var: $theme-input-background-color - default: 'default' + default: "default" type: color description: "Background color for radio and checkbox inputs." - name: Tile border radius @@ -20,4 +20,3 @@ contents: default: '"2px"' type: units description: "Tile border thickness" - diff --git a/_data/settings/components/radio-buttons.yml b/_data/settings/components/radio-buttons.yml index e3f567a638..d5e617369e 100644 --- a/_data/settings/components/radio-buttons.yml +++ b/_data/settings/components/radio-buttons.yml @@ -2,7 +2,7 @@ name: Radio buttons contents: - name: Background color var: $theme-input-background-color - default: 'default' + default: "default" type: color description: "Background color for radio and checkbox inputs." - name: Tile border radius diff --git a/_data/settings/components/table.yml b/_data/settings/components/table.yml index b709a63f01..404f9e26d7 100644 --- a/_data/settings/components/table.yml +++ b/_data/settings/components/table.yml @@ -3,7 +3,7 @@ contents: - name: Background color description: Defines the table background color. A value of `default` uses the body background color. var: $theme-table-background-color - default: 'default' + default: "default" type: color - name: Border color description: Defines a border color for table cells. A value of `default` uses either the default text or reverse text color depending on the site background color. @@ -43,7 +43,7 @@ contents: - name: Sticky header top offset description: Defines the top offset for sticky headers. This setting value must include the CSS unit type, for example `10px` or `2rem`. var: $theme-table-sticky-top-offset - default: '-1px' + default: "-1px" type: CSS length - name: Stripe background color description: Defines a background color for alternating horizontal stripes in the striped table variant. diff --git a/_data/settings/components/tooltip.yml b/_data/settings/components/tooltip.yml index 205bf09e27..d8874c9aa1 100644 --- a/_data/settings/components/tooltip.yml +++ b/_data/settings/components/tooltip.yml @@ -14,4 +14,4 @@ contents: description: Font size of tooltip. var: $theme-tooltip-font-size default: '"xs"' - type: size \ No newline at end of file + type: size diff --git a/_data/tokens/conversion.yml b/_data/tokens/conversion.yml index 0d5ec1e1ea..afb9328cad 100644 --- a/_data/tokens/conversion.yml +++ b/_data/tokens/conversion.yml @@ -32,9 +32,9 @@ number: -2px - token: neg-1px number: -1px -- token: '05' +- token: "05" number: 0.5 -- token: '105' +- token: "105" number: 1.5 -- token: '205' +- token: "205" number: 2.5 diff --git a/_data/tokens/flex.yml b/_data/tokens/flex.yml index d3589b9ba1..2f13a8fb72 100644 --- a/_data/tokens/flex.yml +++ b/_data/tokens/flex.yml @@ -1,28 +1,28 @@ - token: 1 - value: '1 0 0' + value: "1 0 0" - token: 2 - value: '2 0 0' + value: "2 0 0" - token: 3 - value: '3 0 0' + value: "3 0 0" - token: 4 - value: '4 0 0' + value: "4 0 0" - token: 5 - value: '5 0 0' + value: "5 0 0" - token: 6 - value: '6 0 0' + value: "6 0 0" - token: 7 - value: '7 0 0' + value: "7 0 0" - token: 8 - value: '8 0 0' + value: "8 0 0" - token: 9 - value: '9 0 0' + value: "9 0 0" - token: 10 - value: '10 0 0' + value: "10 0 0" - token: 11 - value: '11 0 0' + value: "11 0 0" - token: 12 - value: '12 0 0' + value: "12 0 0" - token: auto value: auto - token: fill - value: '1 0 0' + value: "1 0 0" diff --git a/_data/tokens/meta.yml b/_data/tokens/meta.yml index c893b8fd9c..95b1019a1a 100644 --- a/_data/tokens/meta.yml +++ b/_data/tokens/meta.yml @@ -16,4 +16,4 @@ general: - order - shadow - spacing - - z-index \ No newline at end of file + - z-index diff --git a/_data/tokens/opacity.yml b/_data/tokens/opacity.yml index faa6786dac..659b354cb5 100644 --- a/_data/tokens/opacity.yml +++ b/_data/tokens/opacity.yml @@ -1,22 +1,22 @@ - token: 0 - value: '0' + value: "0" - token: 10 - value: '0.1' + value: "0.1" - token: 20 - value: '0.2' + value: "0.2" - token: 30 - value: '0.3' + value: "0.3" - token: 40 - value: '0.4' + value: "0.4" - token: 50 - value: '0.5' + value: "0.5" - token: 60 - value: '0.6' + value: "0.6" - token: 70 - value: '0.7' + value: "0.7" - token: 80 - value: '0.8' + value: "0.8" - token: 90 - value: '0.9' + value: "0.9" - token: 100 - value: '1' + value: "1" diff --git a/_data/tokens/spacing.yml b/_data/tokens/spacing.yml index 93e7a53af1..86ae75848a 100644 --- a/_data/tokens/spacing.yml +++ b/_data/tokens/spacing.yml @@ -1,94 +1,94 @@ positive: smaller: - - token: '1px' + - token: "1px" value: 1px - - token: '2px' + - token: "2px" value: 2px small: - - token: '05' + - token: "05" value: 4px conversion: 0.5 - - token: '1' + - token: "1" value: 8px - - token: '105' + - token: "105" value: 12px - - token: '2' + - token: "2" value: 16px - - token: '205' + - token: "205" value: 20px - - token: '3' + - token: "3" value: 24px medium: - - token: '4' + - token: "4" value: 32px - - token: '5' + - token: "5" value: 40px - - token: '6' + - token: "6" value: 48px - - token: '7' + - token: "7" value: 56px - - token: '8' + - token: "8" value: 64px - - token: '9' + - token: "9" value: 72px - - token: '10' + - token: "10" value: 80px - - token: '15' + - token: "15" value: 120px large: - - token: 'card' + - token: "card" value: 160px - - token: 'card-lg' + - token: "card-lg" value: 240px - - token: 'mobile' + - token: "mobile" value: 320px larger: - - token: 'mobile-lg' + - token: "mobile-lg" value: 480px - - token: 'tablet' + - token: "tablet" value: 640px - - token: 'tablet-lg' + - token: "tablet-lg" value: 880px largest: - - token: 'desktop' + - token: "desktop" value: 1024px - - token: 'desktop-lg' + - token: "desktop-lg" value: 1200px - - token: 'widescreen' + - token: "widescreen" value: 1400px negative: smaller: - - token: 'neg-1px' + - token: "neg-1px" value: -1px - - token: 'neg-2px' + - token: "neg-2px" value: -2px small: - - token: 'neg-05' + - token: "neg-05" value: -4px - - token: 'neg-1' + - token: "neg-1" value: -8px - - token: 'neg-105' + - token: "neg-105" value: -12px - - token: 'neg-2' + - token: "neg-2" value: -16px - - token: 'neg-205' + - token: "neg-205" value: -20px - - token: 'neg-3' + - token: "neg-3" value: -24px medium: - - token: 'neg-4' + - token: "neg-4" value: -32px - - token: 'neg-5' + - token: "neg-5" value: -40px - - token: 'neg-6' + - token: "neg-6" value: -48px - - token: 'neg-7' + - token: "neg-7" value: -56px - - token: 'neg-8' + - token: "neg-8" value: -64px - - token: 'neg-9' + - token: "neg-9" value: -72px - - token: 'neg-10' + - token: "neg-10" value: -80px - - token: 'neg-15' + - token: "neg-15" value: -120px diff --git a/_data/tokens/special.yml b/_data/tokens/special.yml index 336ca2f911..c79bcc78db 100644 --- a/_data/tokens/special.yml +++ b/_data/tokens/special.yml @@ -1,27 +1,27 @@ noValue: - - token: 'noValue' + - token: "noValue" auto_auto: - - token: 'auto' + - token: "auto" value: auto zero_zero: - token: 0 value: 0 none_zero: - - token: 'none' + - token: "none" value: 0 none_none: - - token: 'none' + - token: "none" value: none full_percent: - - token: 'full' + - token: "full" value: 100% full_viewport_height: - - token: 'viewport' + - token: "viewport" value: 100vh full_viewport_width: - - token: 'viewport' + - token: "viewport" value: 100vw spacing_05: - - token: '05' + - token: "05" value: 4px scss: units(0.5) diff --git a/_data/tokens/typesetting/family.yml b/_data/tokens/typesetting/family.yml index 69b3f9039c..41c4ba0b0b 100644 --- a/_data/tokens/typesetting/family.yml +++ b/_data/tokens/typesetting/family.yml @@ -1,50 +1,50 @@ font: - token: georgia name: Georgia - stack: 'georgia' + stack: "georgia" normal: 346 - token: helvetica name: Helvetica - stack: 'helvetica' + stack: "helvetica" normal: 357 - token: merriweather name: Merriweather stack-name: Merriweather Web - stack: 'georgia' + stack: "georgia" normal: 371 - token: open-sans name: Open Sans stack-name: Open Sans - stack: 'system' + stack: "system" normal: 357 - token: public-sans name: Public Sans stack-name: Public Sans Web - stack: 'system' + stack: "system" normal: 362 - token: roboto-mono name: Roboto Mono stack-name: Roboto Mono Web - stack: 'mono' + stack: "mono" normal: 380 - token: source-sans-pro name: Source Sans Pro stack-name: Source Sans Pro - stack: 'helvetica' + stack: "helvetica" normal: 340 - token: system name: System fonts - stack: 'system' + stack: "system" normal: 362 - token: tahoma name: Tahoma stack-name: Tahoma - stack: 'system' + stack: "system" normal: 363 - token: verdana name: Verdana stack-name: Verdana - stack: 'system' + stack: "system" normal: 364 type: - token: cond @@ -54,19 +54,19 @@ type: - token: lang default: false - token: mono - default: 'roboto-mono' + default: "roboto-mono" - token: sans - default: 'source-sans-pro' + default: "source-sans-pro" - token: serif - default: 'merriweather' + default: "merriweather" role: - token: alt - default: 'serif' + default: "serif" - token: body - default: 'sans' + default: "sans" - token: code - default: 'mono' + default: "mono" - token: heading - default: 'serif' + default: "serif" - token: ui - default: 'sans' + default: "sans" diff --git a/_data/tokens/typesetting/line-height.yml b/_data/tokens/typesetting/line-height.yml index 4798dfd0a9..f3d4e1ce45 100644 --- a/_data/tokens/typesetting/line-height.yml +++ b/_data/tokens/typesetting/line-height.yml @@ -1,18 +1,18 @@ - token: 1 value: 1 - usage: 'buttons, navigation, and text not meant to break over a line' + usage: "buttons, navigation, and text not meant to break over a line" - token: 2 value: 1.15 - usage: 'headings, introductory (lead or dek) text, no more than 1-2 sentences' + usage: "headings, introductory (lead or dek) text, no more than 1-2 sentences" - token: 3 value: 1.35 - usage: 'short text (under 1 paragraph), captions, text with a very short or very long measure' + usage: "short text (under 1 paragraph), captions, text with a very short or very long measure" - token: 4 value: 1.5 - usage: 'short (1-2 paragraphs) of running text, especially with a short measure' + usage: "short (1-2 paragraphs) of running text, especially with a short measure" - token: 5 value: 1.62 - usage: 'a good choice for most reading text, especially text meant for extended reading' + usage: "a good choice for most reading text, especially text meant for extended reading" - token: 6 value: 1.75 - usage: 'shorter text (1-2 paragraphs) meant to be distinguished from other page text, pullquotes' + usage: "shorter text (1-2 paragraphs) meant to be distinguished from other page text, pullquotes" diff --git a/_data/tokens/typesetting/measure.yml b/_data/tokens/typesetting/measure.yml index cfcb544627..da54c2d3c9 100644 --- a/_data/tokens/typesetting/measure.yml +++ b/_data/tokens/typesetting/measure.yml @@ -1,20 +1,20 @@ - token: 1 value: 44ex - usage: 'shorter text (1-2 paragraphs) meant to be distinguished from other page text, pullquotes' + usage: "shorter text (1-2 paragraphs) meant to be distinguished from other page text, pullquotes" - token: 2 value: 60ex - usage: 'a snappy reading line for quick-reading text' + usage: "a snappy reading line for quick-reading text" - token: 3 value: 64ex - usage: 'an all-purpose reading line for most longform text' + usage: "an all-purpose reading line for most longform text" - token: 4 value: 68ex - usage: 'a longer line for longform text, particularly in larger sizes' + usage: "a longer line for longform text, particularly in larger sizes" - token: 5 value: 72ex - usage: 'a long, slower reading line' + usage: "a long, slower reading line" - token: 6 value: 88ex - usage: 'an extra-long line sometimes useful for short text (less than 1 paragaph) or captions' + usage: "an extra-long line sometimes useful for short text (less than 1 paragraph) or captions" - token: none value: none diff --git a/package.json b/package.json index d6c8a2be8e..bc5819231e 100644 --- a/package.json +++ b/package.json @@ -39,14 +39,14 @@ "clean": "npx gulp cleanAssets", "crawl": "node config/crawl.js", "federalist": "npx gulp build", - "lint": "npx gulp lintJS lintSass && npm run prettier:scss", + "lint": "npx gulp lintJS lintSass", "prestart": "npx gulp build", "proof": "bundle exec htmlproofer --enforce-https=false --allow-missing-href=true --only_4xx --ignore-status-codes 403,429 --swap-urls 'https\\://designsystem.digital.gov/:/' --ignore-files '/whats-new/updates/(2017|2018|2019|2020|2021)/,/documentation/code-guidelines/' ./_site", "proof:all": "bundle exec htmlproofer --enforce-https=false --allow-missing-href=true --ignore-status-codes 0 --swap-urls 'https\\://designsystem.digital.gov/:/' --ignore-files '/whats-new/updates/(2017|2018|2019|2020|2021)/,/documentation/code-guidelines/' ./_site", "serve": "npm run build:all-assets && bundle exec jekyll serve --drafts --future --incremental --livereload --host=localhost", "serve:package": "npm run build:uswds && npm run serve", "serve:local": "export LIBRARY_BASE_URL=\"http://localhost:3000\" && npm run serve", - "start": "concurrently 'bundle exec jekyll serve --drafts --future --livereload --incremental --host=localhost' 'npx gulp watch'", + "start": "concurrently 'bundle exec jekyll serve --drafts --future --livereload --incremental --host=localhost' 'npx gulp watch' 'npm run prettier'", "test": "npx snyk test && npm run test:core", "test:detached": "npm run start-detached && npm run test:core", "test:core": "bundle exec rspec && npm run lint && npm run proof && npm run pa11y-ci:sitemap && npm run pa11y-ci:sitemap-mobile", @@ -58,7 +58,16 @@ "pa11y-ci:sitemap": "pa11y-ci --sitemap http://localhost:4000/sitemap.xml --sitemap-exclude '/*.pdf|next/'", "pa11y-ci:sitemap-mobile": "pa11y-ci --config .pa11yci--mobile --sitemap http://localhost:4000/sitemap.xml --sitemap-exclude '/*.pdf|next/'", "pa11y-ci:sitemap-json": "pa11y-ci --json > pa11y-results.json --sitemap http://localhost:4000/sitemap.xml --sitemap-exclude '/*.pdf|next/'", - "prettier:scss": "npx prettier --write './css/**/*.scss'" + "prettier:scss": "npx prettier --check './css/**/*.scss'", + "prettier:js": "npx prettier --check './**/*.js'", + "prettier:md": "npx prettier --check './**/accessibility-tests.md'", + "prettier:yml": "npx prettier --check './**/*.yml'", + "prettier:fix:scss": "npx prettier --write './css/**/*.scss'", + "prettier:fix:js": "npx prettier --write './**/*.js'", + "prettier:fix:md": "npx prettier --write './**/accessibility-tests.md'", + "prettier:fix:yml": "npx prettier --write './**/*.yml'", + "prettier:fix": "concurrently 'npm run prettier:fix:scss' 'npm run prettier:fix:md' 'npm run prettier:fix:yml'", + "prettier": "concurrently --maxProcesses 1 'npm run prettier:scss' 'npm run prettier:md' 'npm run prettier:yml'" }, "devDependencies": { "@18f/identity-stylelint-config": "^2.0.0",