[WNMGDS-2713] Add default value overrides to Storybook (#3216)

* Initial set of default values added to props tables

* Updated storybook snaps

packages/design-system/src/components/Autocomplete/Autocomplete.stories.tsx

@@ -11,11 +11,34 @@ const meta: Meta<typeof Autocomplete> = {
  component: Autocomplete,
  args: {
  // setting some defaults so controls turn on by default
+ ariaClearLabel: 'Clear search',
  clearInputText: 'Clear search',
  clearSearchButton: true,
  loadingMessage: 'Loading...',
  noResultsMessage: 'No results',
  } as any,
+ argTypes: {
+ ariaClearLabel: {
+ table: {
+ defaultValue: { summary: 'Clear search to try again' },
+ },
+ },
+ clearInputText: {
+ table: {
+ defaultValue: { summary: 'Clear Search' },
+ },
+ },
+ loadingMessage: {
+ table: {
+ defaultValue: { summary: 'Loading...' },
+ },
+ },
+ noResultsMessage: {
+ table: {
+ defaultValue: { summary: 'No results' },
+ },
+ },
+ },
 };
 export default meta;
 

packages/design-system/src/components/DateField/MultiInputDateField.stories.tsx

@@ -9,6 +9,21 @@ const meta: Meta<typeof MultiInputDateField> = {
  errorMessage: { control: 'text' },
  hint: { control: 'text' },
  requirementLabel: { control: 'text' },
+ dayLabel: {
+ table: {
+ defaultValue: { summary: 'Day' },
+ },
+ },
+ monthLabel: {
+ table: {
+ defaultValue: { summary: 'Month' },
+ },
+ },
+ yearLabel: {
+ table: {
+ defaultValue: { summary: 'Year' },
+ },
+ },
  },
  args: {
  label: 'Enter your date of birth.',

packages/design-system/src/components/Dialog/Dialog.stories.tsx

@@ -18,6 +18,13 @@ const meta: Meta<typeof Dialog> = {
  ),
  heading: 'Dialog Heading',
  },
+ argTypes: {
+ ariaCloseLabel: {
+ table: {
+ defaultValue: { summary: 'Close modal dialog' },
+ },
+ },
+ },
  parameters: {
  docs: {
  source: {

packages/design-system/src/components/Drawer/Drawer.stories.tsx

@@ -15,6 +15,27 @@ const meta: Meta<typeof Drawer> = {
  disable: true,
  },
  },
+ ariaLabel: {
+ table: {
+ defaultValue: {
+ summary: 'Close help drawer',
+ },
+ },
+ },
+ closeButtonText: {
+ table: {
+ defaultValue: {
+ summary: 'Close',
+ },
+ },
+ },
+ headingLevel: {
+ table: {
+ defaultValue: {
+ summary: '3',
+ },
+ },
+ },
  },
  args: {
  footerTitle: 'Footer Title',

packages/design-system/src/components/FilterChip/FilterChip.stories.tsx

@@ -8,6 +8,15 @@ const meta: Meta<typeof FilterChip> = {
  args: {
  label: 'Example Filter Chip',
  },
+ argTypes: {
+ ariaClearLabel: {
+ table: {
+ defaultValue: {
+ summary: 'Remove',
+ },
+ },
+ },
+ },
 };
 export default meta;
 

packages/design-system/src/components/Pagination/Pagination.stories.tsx

@@ -10,6 +10,43 @@ const meta: Meta<typeof Pagination> = {
  currentPage: 1,
  totalPages: 15,
  },
+ argTypes: {
+ ariaLabel: {
+ table: {
+ defaultValue: {
+ summary: 'Pagination results',
+ },
+ },
+ },
+ endAriaLabel: {
+ table: {
+ defaultValue: {
+ summary: 'Next Page',
+ },
+ },
+ },
+ endLabelText: {
+ table: {
+ defaultValue: {
+ summary: 'Next',
+ },
+ },
+ },
+ startAriaLabel: {
+ table: {
+ defaultValue: {
+ summary: 'Previous Page',
+ },
+ },
+ },
+ startLabelText: {
+ table: {
+ defaultValue: {
+ summary: 'Previous',
+ },
+ },
+ },
+ },
  render: function Component(args) {
  const [{ currentPage }, updateArgs] = useArgs();
  const handleSetPage = (evt, page) => {

packages/design-system/src/components/Review/Review.stories.tsx

@@ -7,6 +7,15 @@ const meta: Meta<typeof Review> = {
  args: {
  headingLevel: '3',
  },
+ argTypes: {
+ editText: {
+ table: {
+ defaultValue: {
+ summary: 'Edit',
+ },
+ },
+ },
+ },
 };
 export default meta;
 

packages/design-system/src/components/SkipNav/SkipNav.stories.tsx

@@ -7,6 +7,15 @@ const meta: Meta<typeof SkipNav> = {
  args: {
  href: '#main',
  },
+ argTypes: {
+ children: {
+ table: {
+ defaultValue: {
+ summary: 'Skip to main content',
+ },
+ },
+ },
+ },
 };
 export default meta;
 

tests/browser/snapshots/storybook-docs/Docs-Components-Autocomplete-Docs-prop-table-matches-snapshot-1.txt

@@ -11,7 +11,7 @@
  [
  "ariaClearLabel",
  "Screen reader-specific label for the Clear search <button>. Intended to provide a longer, more descriptive explanation of the button's behavior.\nstring",
- "-"
+ "Clear search to try again"
  ],
  [
  "autoCompleteLabel",
@@ -36,7 +36,7 @@
  [
  "clearInputText",
  "Text rendered on the page if clearInput prop is passed. Default is \"Clear search\".\nReactNode",
- "-"
+ "Clear Search"
  ],
  [
  "clearSearchButton",
@@ -91,12 +91,12 @@
  [
  "loadingMessage",
  "Message users will see when the loading prop is passed to Autocomplete.\nReactNode",
- "-"
+ "Loading..."
  ],
  [
  "noResultsMessage",
  "Message users will see when the items array returns empty and the loading prop is passed to <Autocomplete />.\nReactNode",
- "-"
+ "No results"
  ],
  [
  "onChange",

tests/browser/snapshots/storybook-docs/Docs-Components-Dialog-Docs-prop-table-matches-snapshot-1.txt

@@ -27,7 +27,7 @@
  [
  "ariaCloseLabel",
  "Aria label for the close button\nstring",
- "-"
+ "Close modal dialog"
  ],
  [
  "backdropClickExits",

tests/browser/snapshots/storybook-docs/Docs-Components-Drawer-Docs-prop-table-matches-snapshot-1.txt

@@ -2,7 +2,7 @@
  [
  "ariaLabel",
  "Gives more context to screen readers on the Drawer close button.\nstring",
- "-"
+ "Close help drawer"
  ],
  [
  "className",
@@ -12,7 +12,7 @@
  [
  "closeButtonText",
  "ReactNode",
- "-"
+ "Close"
  ],
  [
  "closeButtonVariation",
@@ -47,7 +47,7 @@
  [
  "headingLevel",
  "Heading type to override default <h3>\n\"1\"\n\"2\"\n\"3\"\n\"4\"\n\"5\"",
- "\"'3' as const\""
+ "3"
  ],
  [
  "headingRef",

tests/browser/snapshots/storybook-docs/Docs-Components-FilterChip-Docs-prop-table-matches-snapshot-1.txt

@@ -2,7 +2,7 @@
  [
  "ariaClearLabel",
  "Labels filter action, i.e., \"Remove.\" For screenreader support.\nstring",
- "-"
+ "Remove"
  ],
  [
  "className",

tests/browser/snapshots/storybook-docs/Docs-Components-MultiInputDateField-Docs-prop-table-matches-snapshot-1.txt

@@ -32,7 +32,7 @@
  [
  "dayLabel",
  "Label for the day field\nReactNode",
- "-"
+ "Day"
  ],
  [
  "dayName",
@@ -117,7 +117,7 @@
  [
  "monthLabel",
  "Label for the month field\nReactNode",
- "-"
+ "Month"
  ],
  [
  "monthName",
@@ -167,7 +167,7 @@
  [
  "yearLabel",
  "Label for the year input field\nReactNode",
- "-"
+ "Year"
  ],
  [
  "yearName",

tests/browser/snapshots/storybook-docs/Docs-Components-Pagination-Docs-prop-table-matches-snapshot-1.txt

@@ -2,7 +2,7 @@
  [
  "ariaLabel",
  "Defines aria-label on the screen-reader heading for this element, which precedes the page count readout. Since this exists on a <nav> element, the word \"navigation\" should be omitted from this label. Optional.\nstring",
- "-"
+ "Pagination results"
  ],
  [
  "className",
@@ -22,12 +22,12 @@
  [
  "endAriaLabel",
  "Sets custom ARIA label on end navigation. Added for language support. Label structure should be the equivalent of: Next Page. Optional.\nstring",
- "-"
+ "Next Page"
  ],
  [
  "endLabelText",
  "Sets custom label on end navigation. Added for language support. Optional.\nstring",
- "-"
+ "Next"
  ],
  [
  "headingLevel",
@@ -57,12 +57,12 @@
  [
  "startAriaLabel",
  "Sets custom ARIA label on start navigation. Added for language support. Label structure should be the equivalent of: Previous Page. Optional.\nstring",
- "-"
+ "Previous Page"
  ],
  [
  "startLabelText",
  "Sets custom label on start navigation. Added for language support. Optional.\nstring",
- "-"
+ "Previous"
  ],
  [
  "totalPages*",

tests/browser/snapshots/storybook-docs/Docs-Components-Review-Docs-prop-table-matches-snapshot-1.txt

@@ -27,7 +27,7 @@
  [
  "editText",
  "ReactNode",
- "-"
+ "Edit"
  ],
  [
  "heading",

tests/browser/snapshots/storybook-docs/Docs-Components-SkipNav-Docs-prop-table-matches-snapshot-1.txt

@@ -2,7 +2,7 @@
  [
  "children",
  "Skip nav label\nReactNode",
- "-"
+ "Skip to main content"
  ],
  [
  "href*",