[WNMGDS-2864] Add utility actions pattern guidance page (#3198)

* Initial file creation and addition of copy * Punctuation updates. * Updating snapshots * Revert "Updating snapshots" This reverts commit fd0f3bc. * [WNMGDS-2861] Adds PrintIcon component (#3196) * Add PrintIcon component. * Removed fillColor attribute from PrintIcon componet and removed lint from incons.stories.tsx * [WNMGDS-2878] Render Doc Site stories for Modal Dialog and Drawer (#3203) Copy changes and add ability to handle control arguments * Added print icon * [WNMGDS-2861] Adds Email, Link, RSS & What's New Icon components (#3202) * Adds Email and RSS icons. * Adds Link and What's New Icons * Exchange (') for curly (’) * Adding all icons and text * Making left icon boolean text explicitly relate to Figma * Ghost buttons and two columns * Addressed much feedback * Revise examples box * [NO-TICKET] Automatically format json files (#3206) * Run prettier on json files * Update lint-staged config to format json files * [WNMGDS-2875] Fix Release script take 2 (#3205) * Export vars and function needed in release script * Reorder imports and add new reviewers * Add new utility functions used by bumpVersions * Handle staging files properly * Export correct function from versions * export readJson so maybe we capture new line with read file' ' * big refactor add comments break up inline for loop and associated functions * Wrap removal of top level package json in try catch and uncomment woopsie * Add maybe more helpful comment * Further refactoring * Looks like a big refactor but basically moved all code to a new file * Adding functionality so we don't lose newline at end of json files * [NO-TICKET] Automatically format json files (#3206) * Run prettier on json files * Update lint-staged config to format json files * Undo new line addition when writing json * Fix typo * Move version number into our main function to make usage clearer --------- Co-authored-by: Patrick Wolfert <patrick.wolfert@adhocteam.us> * [RELEASE] 8/12 Version bump main (#3200) * Publish - @cmsgov/design-system@11.0.0-beta.0 - @cmsgov/ds-cms-gov@11.0.0-beta.0 - @cmsgov/ds-healthcare-gov@15.0.0-beta.0 - @cmsgov/ds-medicare-gov@13.0.0-beta.0 * [NO-TICKET] Manually updates "@cmsgov/design-system" version in package dependencies (#3201) manually updates dependency of "@cmsgov/design-system" version * Reverts design-system-tokens version back to 0.0.1 --------- Co-authored-by: Kim Niedermaier <kimniedermaier+cmsds@navapbc.com> Co-authored-by: Patrick Wolfert <patrick.wolfert@adhocteam.us> * [WNMGDS-2884] Add `cmsds-migrate` script for v11 CSS changes (#3208) * Basic migration script for v11 variable/class changes * These two variables weren't removed! We need to update our release notes, because that was a mistake * Fix syntax error (stray single quote) * Fix regex group not getting printed in the replacement text * Mention the migration script in the blog post and explain how to use it * [WNMGDS-2890] Fix `onAnalyticsEvent` attribute rendering to DOM through `HelpDrawer` (#3210) Fix `onAnalyticsEvent` prop bleeding into `dialog` DOM elements through `HelpDrawer` Without this fix, the unit test I added will print errors to the console like this: ``` console.error Warning: Unknown event handler property `onAnalyticsEvent`. It will be ignored. at dialog at NativeDialog (/Users/patrickwolfert/Projects/design-system/packages/design-system/src/components/NativeDialog/NativeDialog.tsx:38:3) at Drawer (/Users/patrickwolfert/Projects/design-system/packages/design-system/src/components/Drawer/Drawer.tsx:73:5) at HelpDrawer (/Users/patrickwolfert/Projects/design-system/packages/design-system/src/components/HelpDrawer/HelpDrawer.tsx:13:11) ``` * [NO-TICKET] Define a better return type for `defaultMenuLinks` (#3211) Be more informative about what `defaultMenuLinks` returns in the types Previously the return type was `{}`, which is useless to teams trying to use that functions themselves * [NO-TICKET] Revises release v11 blog post (#3213) update v11 blog post to remove reference to removing the privacy settings dialog * [NO-TICKET] Exclude core design system from dependency update (#3217) * filter out the core design system * Add comment and make conditional more readable * make conditional more readable * [WNMGDS-2713] Add default value overrides to Storybook (#3216) * Initial set of default values added to props tables * Updated storybook snaps * [WNMGDS-2838] Update all themes to make inline tool tips black (#3199) * Update all themes to make inline tool tips black * Udpate playwright vrt snapshots * Updating css snapshots * Updated css themes and custom tooltip scss styling to maybe no avail * setting tooltip color to match base color of surrounding text * Restore weirdly changed snapshots curious if CI browser tests pass * [WNMGDS-2875] Fix Release script take 2 (#3205) * Export vars and function needed in release script * Reorder imports and add new reviewers * Add new utility functions used by bumpVersions * Handle staging files properly * Export correct function from versions * export readJson so maybe we capture new line with read file' ' * big refactor add comments break up inline for loop and associated functions * Wrap removal of top level package json in try catch and uncomment woopsie * Add maybe more helpful comment * Further refactoring * Looks like a big refactor but basically moved all code to a new file * Adding functionality so we don't lose newline at end of json files * [NO-TICKET] Automatically format json files (#3206) * Run prettier on json files * Update lint-staged config to format json files * Undo new line addition when writing json * Fix typo * Move version number into our main function to make usage clearer --------- Co-authored-by: Patrick Wolfert <patrick.wolfert@adhocteam.us> * Undoing accidental hover styling change --------- Co-authored-by: Patrick Wolfert <patrick.wolfert@adhocteam.us> * Revert "Updating snapshots" This reverts commit fd0f3bc. * Addition of tabble and new content * Added content and table * Fixed table and aria labels --------- Co-authored-by: Tamara deMent (Corbalt) <tamara@corbalt.com> Co-authored-by: Patrick Wolfert <patrick.wolfert@adhocteam.us> Co-authored-by: Kim Niedermaier <kimniedermaier+cmsds@navapbc.com>
CMSgov · Sep 10, 2024 · c4e3aa0 · c4e3aa0
1 parent c0e3416
commit c4e3aa0
Showing 1 changed file with 163 additions and 0 deletions.
diff --git a/packages/docs/content/patterns/utility-actions.mdx b/packages/docs/content/patterns/utility-actions.mdx
@@ -0,0 +1,163 @@
+---
+title: Utility Actions
+intro: Utility actions for a webpage including print, email, RSS and more.
+core:
+ figmaNodeId: 4744-4695
+---
+
+import {
+ Button,
+ DownloadIcon,
+ EmailIcon,
+ LinkIcon,
+ PrintIcon,
+ RssIcon,
+ Table,
+ TableBody,
+ TableCaption,
+ TableCell,
+ TableHead,
+ TableRow,
+ WhatsNewIcon,
+} from '@cmsgov/design-system';
+
+## Example
+
+The example below shows utility actions for Print, Email and RSS.
+
+<EmbeddedExample>
+ <div className="ds-l-row ds-u-justify-content--end">
+ <div className="ds-l-col--2">
+ <Button variation="ghost" size="small">
+ <PrintIcon ariaHidden={false} className="ds-u-margin-right--1" />
+ Print
+ </Button>
+ </div>
+ <div className="ds-l-col--2">
+ <Button variation="ghost" size="small">
+ <EmailIcon ariaHidden={false} className="ds-u-margin-right--1" />
+ Email
+ </Button>
+ </div>
+ <div className="ds-l-col--2">
+ <Button variation="ghost" size="small">
+ <RssIcon ariaHidden={false} className="ds-u-margin-right--1" />
+ RSS
+ </Button>
+ </div>
+ </div>
+</EmbeddedExample>
+
+### Available Actions
+
+In Figma, use the toggle feature to select different utility actions.
+
+<Table>
+ <TableCaption>Available utility actions include:</TableCaption>
+ <TableHead>
+ <TableRow>
+ <TableCell key="utility" id="utility">
+ Utility
+ </TableCell>
+ <TableCell key="action" id="action">
+ Action
+ </TableCell>
+ </TableRow>
+ </TableHead>
+ <TableBody>
+ <TableRow key="Print">
+ <TableCell key="Utility" headers="utility" stackedTitle="Print Icon">
+ <Button variation="ghost" size="medium">
+ <PrintIcon ariaHidden={false} className="ds-u-margin-right--1" />
+ Print
+ </Button>
+ </TableCell>
+ <TableCell key="Action" headers="action" stackedTitle="Print description.">
+ Opens print terminal
+ </TableCell>
+ </TableRow>
+ <TableRow key="Email">
+ <TableCell key="Utility" headers="utility" stackedTitle="Email Icon">
+ <Button variation="ghost" size="medium">
+ <EmailIcon ariaHidden={false} className="ds-u-margin-right--1" />
+ Email
+ </Button>
+ </TableCell>
+ <TableCell key="Action" headers="action" stackedTitle="Email description.">
+ Opens default desktop email app
+ </TableCell>
+ </TableRow>
+ <TableRow key="RSS">
+ <TableCell key="Utility" headers="utility" stackedTitle="RSS Icon">
+ <Button variation="ghost" size="medium">
+ <RssIcon ariaHidden={false} className="ds-u-margin-right--1" />
+ RSS
+ </Button>
+ </TableCell>
+ <TableCell key="Action" headers="action" stackedTitle="RSS description.">
+ Opens an XML feed in a different tab
+ </TableCell>
+ </TableRow>
+ <TableRow key="Link">
+ <TableCell key="Utility" headers="utility" stackedTitle="Link Icon">
+ <Button variation="ghost" size="medium">
+ <LinkIcon ariaHidden={false} className="ds-u-margin-right--1" />
+ Link
+ </Button>
+ </TableCell>
+ <TableCell key="Action" headers="action" stackedTitle="Link description.">
+ Copies link for current page to clipboard
+ </TableCell>
+ </TableRow>
+ <TableRow key="Download">
+ <TableCell key="Utility" headers="utility" stackedTitle="Download Icon">
+ <Button variation="ghost" size="medium">
+ <DownloadIcon ariaHidden={false} className="ds-u-margin-right--1" />
+ Download
+ </Button>
+ </TableCell>
+ <TableCell key="Action" headers="action" stackedTitle="Download description.">
+ Initiates download
+ </TableCell>
+ </TableRow>
+ <TableRow key="What's New">
+ <TableCell key="Utility" headers="utility" stackedTitle="What's New Icon">
+ <Button variation="ghost" size="medium">
+ <WhatsNewIcon ariaHidden={false} className="ds-u-margin-right--1" />
+ What's New
+ </Button>
+ </TableCell>
+ <TableCell key="Action" headers="action" stackedTitle="What's New description.">
+ Opens sidebar with updates
+ </TableCell>
+ </TableRow>
+ </TableBody>
+</Table>
+
+## When to use
+
+- Content on a webpage or a document is something a user would want to be able to refer back to - provide options to print, email, or download.
+- If you would like to give the user the option to:
+ - Open an XML feed in a different tab
+ - Copy a link to a webpage
+ - Open a popup with new updates or new website capabilities
+
+### Usage
+
+- Utility actions are ghost buttons for available actions that do not take priority over primary or secondary call-to-actions (CTAs).
+- Placement should be in the page header and top, right aligned.
+- Include no more than 3 utility actions on a page to prevent cluttering the user interface (UI) and distracting the user.
+- When pairing 2 or more utility action buttons, the preferred action goes on the left.
+- Be consistent with the inclusion of utility actions and their order across pages and products.
+- Follow any additional governance established by your UX and content lead for which utility actions to include.
+
+### When to consider alternatives
+
+- If an action (e.g. printing or emailing) is a critical call-to-action on a webpage, consider using a solid or outlined main button.
+- If the utility action is opening a link in a new webpage versus triggering an action, refer to [guidance on links](/foundation/typography/links).
+- Carefully consider which utility actions are used on mobile (since space is a premium.)
+
+## Accessibility
+
+- Always include both the icon and label in utility actions to meet accessibility standards.
+- Don't create CTAs that duplicate utility actions on a page. Having multiple "print" actions on a page can hinder accessibility for screen reader users.