From c4e3aa0a1541a4500d872fee465c70287bb973df Mon Sep 17 00:00:00 2001 From: Jack Ryan Date: Tue, 10 Sep 2024 09:27:27 -0400 Subject: [PATCH] [WNMGDS-2864] Add utility actions pattern guidance page (#3198) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Initial file creation and addition of copy * Punctuation updates. * Updating snapshots * Revert "Updating snapshots" This reverts commit fd0f3bce9b4ec7668290fc44beb828a5602fc181. * [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 * [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 Co-authored-by: Patrick Wolfert * [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 * Undoing accidental hover styling change --------- Co-authored-by: Patrick Wolfert * Revert "Updating snapshots" This reverts commit fd0f3bce9b4ec7668290fc44beb828a5602fc181. * Addition of tabble and new content * Added content and table * Fixed table and aria labels --------- Co-authored-by: Tamara deMent (Corbalt) Co-authored-by: Patrick Wolfert Co-authored-by: Kim Niedermaier --- .../docs/content/patterns/utility-actions.mdx | 163 ++++++++++++++++++ 1 file changed, 163 insertions(+) create mode 100644 packages/docs/content/patterns/utility-actions.mdx diff --git a/packages/docs/content/patterns/utility-actions.mdx b/packages/docs/content/patterns/utility-actions.mdx new file mode 100644 index 0000000000..bc56201096 --- /dev/null +++ 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. + + +
+
+ +
+
+ +
+
+ +
+
+ + +### Available Actions + +In Figma, use the toggle feature to select different utility actions. + + + Available utility actions include: + + + + Utility + + + Action + + + + + + + + + + Opens print terminal + + + + + + + + Opens default desktop email app + + + + + + + + Opens an XML feed in a different tab + + + + + + + + Copies link for current page to clipboard + + + + + + + + Initiates download + + + + + + + + Opens sidebar with updates + + + +
+ +## 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.