[WNMGDS-1738] Doc site component theming options (#1910)

* adding configuration options widget for doc site components from themes * added relevant customization options to bottom of all component pages * not sure how this got in there
CMSgov · Jun 17, 2022 · ee9c35c · ee9c35c
1 parent 14a53b5
commit ee9c35c
Show file tree

Hide file tree

Showing 31 changed files with 402 additions and 69 deletions.
diff --git a/packages/design-system-tokens/src/themes/index.ts b/packages/design-system-tokens/src/themes/index.ts
@@ -0,0 +1,6 @@
+export { default as CoreTheme } from './core'
+export { default as CoreComponentTheme } from './core-components'
+export { default as HealthcareTheme } from './healthcare'
+export { default as HealthcareComponentTheme } from './healthcare-components'
+export { default as MedicareTheme } from './medicare'
+export { default as MedicareComponentTheme } from './medicare-components'
diff --git a/packages/docs/content/5_components/accordion.mdx b/packages/docs/content/5_components/accordion.mdx
@@ -60,7 +60,9 @@ Keyboard support for the Accordion header includes:
 
 ## Customization
 
-- `$accordion-border-color` - Border color of the accordion
-- `$accordion-header-bg-color` - Background color of the accordion header
-- `$accordion-header-bg-hover-color` - Background color of the accordion header when hovered
-- `$accordion-header-font-family` - Font used for the accordion header
+The following Sass variables can be overridden to customize Accordion components:
+
+<ComponentThemeOptions
+  theme="core"
+  componentname="accordion"
+/>
diff --git a/packages/docs/content/5_components/alert.mdx b/packages/docs/content/5_components/alert.mdx
@@ -91,15 +91,12 @@ Alerts keep users informed of important and sometimes time-sensitive changes.
 
 ## Customization
 
-The following Sass variables can be overridden to theme alerts:
-
-- `$alert-padding` - Used to provide padding for the alert element
-- `$alert-bar-size` - Used to control the width of the left bar on the alert
-- `$alert-icon-size` - Used to control the size of the alert icon
-- `$alert-link-color` - Used to control the alert link text color
-- `$alert-link-color-hover` - Used to control the alert link text color when hovered
-- `$alert-link-color-active` - Used to control the alert link text color when active
-- `$alert-link-color-focus` - Used to control the alert link text color when focused
+The following Sass variables can be overridden to customize Alert components:
+
+<ComponentThemeOptions
+  theme="core"
+  componentname="alert"
+/>
 
 ## Google Analytics
 

diff --git a/packages/docs/content/5_components/autocomplete.mdx b/packages/docs/content/5_components/autocomplete.mdx
@@ -60,3 +60,19 @@ The `Autocomplete` component is a parent component that adds autocomplete functi
 - `<Autocomplete>` has a new Boolean prop called `focusTrigger`. Adding this prop will set keyboard focus on the internal `<Textfield>`. Focus is set immediately when the `componentDidMount()` lifecycle method fires.
 - In most cases, this isn't needed. It's useful when components are added dynamically, after the application has been rendered. All major screen readers (JAWS, NVDA, VoiceOver) have been tested with this feature, and announce the new input correctly.
 - Instances that contain the `focusTrigger` prop may fire Downshift's [onInputValueChange](https://github.com/paypal/downshift#oninputvaluechange) method, causing the `inputValue` to be set back to an empty string. In these cases, you may want to access Downshift's [state reducer](https://github.com/paypal/downshift#statereducer) and manage your component's local state for `blur` and `click` events.
+
+## Customization
+
+The following Sass variables can be overridden to customize Autocomplete components:
+
+<ComponentThemeOptions
+  theme="core"
+  componentname="autocomplete"
+/>
+
+## Text Input Options
+
+<ComponentThemeOptions
+  theme="core"
+  componentname="text-input"
+/>
diff --git a/packages/docs/content/5_components/badge.mdx b/packages/docs/content/5_components/badge.mdx
@@ -41,6 +41,15 @@ Badges hold small amounts of information and draw attention to new or important
 
 - When badges are used to call out new content that is dynamically loaded onto a page, be sure to use [ARIA live regions](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) to alert screen readers of the change.
 
+## Customization
+
+The following Sass variables can be overridden to customize Badge components:
+
+<ComponentThemeOptions
+  theme="core"
+  componentname="badge"
+/>
+
 ### Future research
 
 - Further usability testing should be done to ensure badges aren't being confused with buttons. Further iteration can be done with sizing and colors if there is confusion.
diff --git a/packages/docs/content/5_components/button.mdx b/packages/docs/content/5_components/button.mdx
@@ -264,6 +264,15 @@ you could pass in a `target` prop to pass to the rendered anchor element.
 - When styling links to look like buttons, remember that screen readers handle links slightly differently than they do buttons. Pressing the `Space` key triggers a button, but pressing the `Enter` key triggers a link.
 - Dimmed or unavailable buttons should have the `disabled` attribute applied. This removes native click and keypress events from the button. It also prevents automated scanners from logging a low contrast error. Finally, it announces the button as "dimmed" or "disabled" to screen readers, offering users additional context.
 
+## Customization
+
+The following Sass variables can be overridden to customize Button components:
+
+<ComponentThemeOptions
+  theme="core"
+  componentname="button"
+/>
+
 ### Learn more
 
 - [Beyond Blue Links: Making Clickable Elements Recognizable](https://www.nngroup.com/articles/clickable-elements/)

diff --git a/packages/docs/content/5_components/checkbox-and-radio.mdx b/packages/docs/content/5_components/checkbox-and-radio.mdx
@@ -95,18 +95,21 @@ Any _undocumented_ props that you pass to this component will be passed to the `
     - NVDA reads out the `<select>` label and every `<option>` value
   - MacOS Mojave + Safari + VoiceOver
 
-### Customization
-
-The following Sass variables can be overridden to theme choice fields:
-
-- `$choice-size`
-- `$choice-border-width`
-- `$choice-border-radius`
-- `$choice-background-color`
-- `$choice-border-color`
-- `$choice-checked-background-color`
-- `$choice-checked-border-color`
-- See [form variables](https://github.com/CMSgov/design-system/blob/master/packages/design-system/src/styles/settings/variables/_forms.scss) for the full list of choice variables.
+## Customization
+
+The following Sass variables can be overridden to customize choice fields:
+
+<ComponentThemeOptions
+  theme="core"
+  componentname="choice"
+/>
+
+### Form components
+
+<ComponentThemeOptions
+  theme="core"
+  componentname="form"
+/>
 
 ### Related patterns
 

diff --git a/packages/docs/content/5_components/date-picker.mdx b/packages/docs/content/5_components/date-picker.mdx
@@ -42,6 +42,22 @@ Allow users to have flexibility in entering the date, such as allowing one-digit
 - Users will be able to enter a variety of date formats that automatically format to the correct date format of MM/DD/YYYY. This change happens once the form field loses focus. For example, a user enters a date as "4122020" and it changes to "04/01/2020" once focus leaves the date input.
 - Instructions are available make this more usable/accessible for assistive technology.
 
+## Customization
+
+The following Sass variables can be overridden to customize Input/Form components:
+
+<ComponentThemeOptions
+  theme="core"
+  componentname="text-input"
+/>
+
+### Form components
+
+<ComponentThemeOptions
+  theme="core"
+  componentname="form"
+/>
+
 ### Related patterns
 
 - [Date field (multi-input)](/components/multi-input-date-field/)

diff --git a/packages/docs/content/5_components/drawer.mdx b/packages/docs/content/5_components/drawer.mdx
@@ -99,6 +99,15 @@ A focus trap should _not_ be used when it's anticipated that the user will rely
 
 However, there are times when it makes sense to trap focus within the Drawer. One occassion where it can benefit the user is when the Drawer is anticipated to fill the viewport of a screen, i.e., mobile layout.
 
+## Customization
+
+The following Sass variables can be overridden to customize Drawer components:
+
+<ComponentThemeOptions
+  theme="core"
+  componentname="drawer"
+/>
+
 ### Future Work
 
 Future design iterations and possible user research to ensure the enhanced help drawer link design isn't confused or mistaken for transitional hyperlinks, glossary terms, or tooltips.

diff --git a/packages/docs/content/5_components/dropdown.mdx b/packages/docs/content/5_components/dropdown.mdx
@@ -50,6 +50,22 @@ Class-based component gives flexibility for active focus management by allowing
 - **Always use a label.** Make sure your dropdown has a label. Don’t replace it with the default menu option (for example, removing the “State” label and just having the dropdown read “Select a state” by default).
 - **Avoid auto-submission.** Don’t use JavaScript to automatically submit the form (or do anything else) when an option is selected. Auto-submission disrupts screen readers because they select each option as they read them.
 
+## Customization
+
+The following Sass variables can be overridden to customize Dropdown components:
+
+<ComponentThemeOptions
+  theme="core"
+  componentname="dropdown"
+/>
+
+## Text Input Options
+
+<ComponentThemeOptions
+  theme="core"
+  componentname="text-input"
+/>
+
 ### Related patterns
 
 - [Checkbox and Radio](/components/choice/)

diff --git a/packages/docs/content/5_components/filter-chip.mdx b/packages/docs/content/5_components/filter-chip.mdx
@@ -40,16 +40,11 @@ Filter Chips are used to display dismissible filter chips
 
 - `Enter`, `Backspace`, `Delete`, and `Spacebar` will remove the tag when it is in focus
 
-### Customization
-
-The following Sass variables can be overridden to the filter chip:
-
-- `$filter-chip-icon-container-size` - Height / Width for the close icon container
-- `$filter-chip-icon-size` - Height / Width for the close icon in the filter chip
-- `$filter-chip-border-radius` - Border radius for the filter chip
-- `$filter-chip-text-color` - Text color for the filter chip
-- `$filter-chip-background-color` - Background color for the filter chip
-- `$filter-chip-border-color` - Border color for the filter chip
-- `$filter-chip-text-color-hover` - Text color for the filter chip on hover
-- `$filter-chip-background-color-hover` - Background color for the filter chip on hover
-- `$filter-chip-border-color-hover` - Border color for the filter chip on hover
+## Customization
+
+The following Sass variables can be overridden to customize FilterChip components:
+
+<ComponentThemeOptions
+  theme="core"
+  componentname="filter-chip"
+/>
diff --git a/packages/docs/content/5_components/form-label.mdx b/packages/docs/content/5_components/form-label.mdx
@@ -62,6 +62,16 @@ The `FormLabel` component provides the `label` (or `legend`) for a field, along
 - The error message should be wrapped in an `role="alert"` so that screen readers users receive the message, and can act on it.
   If the page is fully refreshed, add ‘Error: ’ to the beginning of the page `<title>` so screen readers read it out as soon as possible.
 
+## Customization
+
+The following Sass variables can be overridden to customize Form components:
+
+<ComponentThemeOptions
+  theme="core"
+  componentname="form"
+/>
+
+
 ### Learn More
 
 - [Form Guidelines](/guidelines/forms/)
diff --git a/packages/docs/content/5_components/icon.mdx b/packages/docs/content/5_components/icon.mdx
@@ -74,3 +74,12 @@ The `<SvgIcon>` component has built-in accessibility features including:
 - `role="img"` which tells assistive technologies that the icon's purpose is as an image
 - optional `description` attribute which can be used for a more detailed explanation of the icon's contents. Meant to be used to provide more detail than just the `title`
 - an available`ariaHidden` attribute which can be used if the icon's context is described elsewhere. For example, if the icon is part of a button with text, the text may provide the text description instead of the icon component.
+
+## Customization
+
+The following Sass variables can be overridden to customize Icon components:
+
+<ComponentThemeOptions
+  theme="core"
+  componentname="icon"
+/>
diff --git a/packages/docs/content/5_components/idle-timeout.mdx b/packages/docs/content/5_components/idle-timeout.mdx
@@ -23,6 +23,15 @@ A component that counts down to the end of a session (behind the scenes) and sho
 
 - Use the IdleTimeout for authenticated sessions to force logout after a set amount of time on inactivity
 
+## Customization
+
+The following Sass variables can be overridden to customize Dialog components:
+
+<ComponentThemeOptions
+  theme="core"
+  componentname="dialog"
+/>
+
 ### Related patterns
 
 - [Dialog](/components/dialog/)
diff --git a/packages/docs/content/5_components/masked-field.mdx b/packages/docs/content/5_components/masked-field.mdx
@@ -61,3 +61,19 @@ value, you can import and call the `unmaskValue` method.
 ### Props
 
 <PropTable componentName="TextField" />
+
+## Customization
+
+The following Sass variables can be overridden to customize Input/Form components:
+
+<ComponentThemeOptions
+  theme="core"
+  componentname="text-input"
+/>
+
+### Form components
+
+<ComponentThemeOptions
+  theme="core"
+  componentname="form"
+/>
diff --git a/packages/docs/content/5_components/modal-dialog.mdx b/packages/docs/content/5_components/modal-dialog.mdx
@@ -56,6 +56,15 @@ Apply one of the size modifier classes to the `ds-c-dialog` element to change th
 - [Overuse of Overlays: How to Avoid Misusing Lightboxes](https://www.nngroup.com/articles/overuse-of-overlays/)
 - [Using ARIA role=dialog to implement a modal dialog box](https://www.w3.org/WAI/GL/wiki/Using_ARIA_role%3Ddialog_to_implement_a_modal_dialog_box)
 
+## Customization
+
+The following Sass variables can be overridden to customize Dialog components:
+
+<ComponentThemeOptions
+  theme="core"
+  componentname="dialog"
+/>
+
 ### Related patterns
 
 - [Alert](/components/alert/)

diff --git a/packages/docs/content/5_components/month-picker.mdx b/packages/docs/content/5_components/month-picker.mdx
@@ -15,3 +15,19 @@ The `MonthPicker` component renders a grid of checkboxes with shortened month na
 ### Props
 
 <PropTable componentName="MonthPicker" />
+
+## Customization
+
+The following Sass variables can be overridden to customize MonthPicker fields:
+
+<ComponentThemeOptions
+  theme="core"
+  componentname="choice"
+/>
+
+### Form components
+
+<ComponentThemeOptions
+  theme="core"
+  componentname="form"
+/>
diff --git a/packages/docs/content/5_components/multi-input-date-field.mdx b/packages/docs/content/5_components/multi-input-date-field.mdx
@@ -40,6 +40,22 @@ Generally used for more memorable dates like date of birth, marriage date, or in
 - These text fields should follow the [accessibility guidelines for all text inputs](/components/text-field/#guidance).
 - Do not use JavaScript to auto advance the focus from one field to the next. This makes it difficult for keyboard-only users to navigate and correct mistakes.
 
+## Customization
+
+The following Sass variables can be overridden to customize Input/Form components:
+
+<ComponentThemeOptions
+  theme="core"
+  componentname="text-input"
+/>
+
+### Form components
+
+<ComponentThemeOptions
+  theme="core"
+  componentname="form"
+/>
+
 ### Related patterns
 - [Date field (single-input)](/components/single-input-date-field/)
 - [Date field (with calendar)](/components/date-picker/)
diff --git a/packages/docs/content/5_components/pagination.mdx b/packages/docs/content/5_components/pagination.mdx
@@ -49,18 +49,14 @@ Pagination also comes in two styles: default, which is compact on mobile viewpor
 - Do not use buttons for URL-based pagination. Because the URL is updated, the browser history stack updates and a link is the correct tag to use.
 - Consider page load, performance, and the user's scrolling preferences when determining how many items are displayed on each page.
 
-### Style customization
+## Customization
 
-The following Sass variables can be overridden to theme alerts:
+The following Sass variables can be overridden to customize Pagination components:
 
-- `$pagination-nav-link-color` - Used to set color of next/previous and page number links.
-- `$pagination-nav-link-color-hover` - Used to set color of next/previous and page number links on hover.
-- `$pagination-nav-link-color-active` - Used to set color of next/previous and page number links when active.
-- `$pagination-nav-link-color-focus` - Used to set color of next/previous and page number links on focus.
-
-- `$pagination-current-page-color` - Used to set the current page element text color.
-- `$pagination-overflow-color` - Used to set the overflow element text color.
-- `$pagination-page-count-color` - Used to set the page count element text color.
+<ComponentThemeOptions
+  theme="core"
+  componentname="pagination"
+/>
 
 ### Accessibility
 

diff --git a/packages/docs/content/5_components/single-input-date-field.mdx b/packages/docs/content/5_components/single-input-date-field.mdx
@@ -39,6 +39,22 @@ Allow users to have flexibility in entering the date, such as allowing one-digit
 - These text fields should follow the [accessibility guidelines for all text inputs](/components/text-field/#guidance).
 - Users will be able to enter a variety of date formats that automatically format to the correct date format of MM/DD/YYYY. This change happens once the form field loses focus. For example, a user enters a date as "4122020" and it changes to "04/01/2020" once focus leaves the date input.
 
+## Customization
+
+The following Sass variables can be overridden to customize Input/Form components:
+
+<ComponentThemeOptions
+  theme="core"
+  componentname="text-input"
+/>
+
+### Form components
+
+<ComponentThemeOptions
+  theme="core"
+  componentname="form"
+/>
+
 ### Related components
 
 - [Date field (multi-input)](/components/multi-input-date-field/)