[WNMGDS-2861] Adds Email, Link, RSS & What's New Icon components #3202

tamara-corbalt · 2024-08-13T21:30:24Z

Summary

Adds four new icon components:

EmailIcon
LinkIcon
RssIcon
WhatsNewIcon

See Jira ticket for details: WNMGDS-2861. Please note that a Download icon has already been added to the codebase.

How to test

Run yarn storybook.
Navigate to the Icons section and verify the presence and appearance of the new icons.

Checklist

Prefixed the PR title with the Jira ticket number as [WNMGDS-####] Title or [NO-TICKET] if this is unticketed work.
Selected appropriate Type (only one) label for this PR, if it is a breaking change, label should only be Type: Breaking
Selected appropriate Impacts, multiple can be selected.
Selected appropriate release milestone

malloryiden

🎉

jack-ryan-nava-pbc

LGTM! Question about the viewBox control/params: we don't have any controls set up in Storybook, should we?

tamara-corbalt · 2024-08-14T15:00:26Z

@jack-ryan-nava-pbc I like the idea of supporting viewBox controls because it gives Storybook users the flexibility to customize the icons. However, I'm concerned about the added complexity to our Storybook configuration and the potential for misuse. Could changing the proportions of the icons potentially distort the layout of the icon table?

zarahzachz · 2024-08-14T16:02:29Z

packages/design-system/src/components/Icons/EmailIcon.tsx

+
+const defaultProps = {
+  className: '',
+  viewBox: '0 0 32 32',


Nothing wrong here, just a callout that it's interesting the viewBox is the same for all new icons. I wonder if there's an opportunity to standardize our icons in the future?

kim-cmsds · 2024-08-14T16:35:33Z

packages/design-system/src/components/locale/en.json

    "star": "Star",
    "starEmpty": "Empty Star",
    "starFilled": "Filled Star",
    "starHalf": "Half Star",
    "usaLogo": "USA.gov - Government Made Easy",
-    "warning": "Warning"
+    "warning": "Warning",
+    "whatsNew": "What's New"


nit: replace this quote with one that sparks joy for typography enthusiasts

Suggested change

"whatsNew": "What's New"

"whatsNew": "What’s New"

@kim-cmsds I love the idea of sparking joy for typography enthusiasts. Will make the change.

@kim-cmsds, I made the change to use a curly apostrophe (’), but I'm noticing a tiny box appearing around it in vs code. I'm not sure what this signifies or if it indicates a potential issue with the character encoding?

That same curly apostrophe is used here:

design-system/packages/design-system/src/components/locale/en.json

Line 108 in 0fb69bc

"introText": "We take your privacy seriously. You can change the settings for each category to choose how we collect and use information while you’re on {{domain}}.",

@kim-cmsds: updated to a curly apostrophe in this json file, as well as icons.stories.tsx

* Adds Email and RSS icons. * Adds Link and What's New Icons * Exchange (') for curly (’)

* 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 <[email protected]> * [RELEASE] 8/12 Version bump main (#3200) * Publish - @cmsgov/[email protected] - @cmsgov/[email protected] - @cmsgov/[email protected] - @cmsgov/[email protected] * [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 <[email protected]> Co-authored-by: Patrick Wolfert <[email protected]> * [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 <[email protected]> * Undoing accidental hover styling change --------- Co-authored-by: Patrick Wolfert <[email protected]> * 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) <[email protected]> Co-authored-by: Patrick Wolfert <[email protected]> Co-authored-by: Kim Niedermaier <[email protected]>

* Adds Email and RSS icons. * Adds Link and What's New Icons * Exchange (') for curly (’)

* 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 <[email protected]> * [RELEASE] 8/12 Version bump main (#3200) * Publish - @cmsgov/[email protected] - @cmsgov/[email protected] - @cmsgov/[email protected] - @cmsgov/[email protected] * [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 <[email protected]> Co-authored-by: Patrick Wolfert <[email protected]> * [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 <[email protected]> * Undoing accidental hover styling change --------- Co-authored-by: Patrick Wolfert <[email protected]> * 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) <[email protected]> Co-authored-by: Patrick Wolfert <[email protected]> Co-authored-by: Kim Niedermaier <[email protected]>

tamara-corbalt added 2 commits August 13, 2024 15:57

Adds Email and RSS icons.

4212f3e

Adds Link and What's New Icons

0fb69bc

tamara-corbalt added Impacts: Core Impacts the core DS primarily, changes may occur in other themes as well. Type: Added Indicates a new feature. labels Aug 13, 2024

tamara-corbalt added this to the 12.0.0-beta.0 milestone Aug 13, 2024

tamara-corbalt requested review from zarahzachz, pwolfert, kim-cmsds, jack-ryan-nava-pbc and malloryiden August 13, 2024 21:30

tamara-corbalt self-assigned this Aug 13, 2024

malloryiden approved these changes Aug 14, 2024

View reviewed changes

jack-ryan-nava-pbc approved these changes Aug 14, 2024

View reviewed changes

zarahzachz reviewed Aug 14, 2024

View reviewed changes

zarahzachz approved these changes Aug 14, 2024

View reviewed changes

kim-cmsds reviewed Aug 14, 2024

View reviewed changes

kim-cmsds approved these changes Aug 14, 2024

View reviewed changes

Exchange (') for curly (’)

d0d55d6

tamara-corbalt requested a review from kim-cmsds August 14, 2024 19:21

Merge branch 'main' into tamara/wnmgds-2861-add-utility-icons-2

b868bb1

kim-cmsds approved these changes Aug 15, 2024

View reviewed changes

tamara-corbalt merged commit 498c86f into main Aug 15, 2024
1 check passed

tamara-corbalt deleted the tamara/wnmgds-2861-add-utility-icons-2 branch August 15, 2024 17:01

jack-ryan-nava-pbc pushed a commit that referenced this pull request Aug 15, 2024

[WNMGDS-2861] Adds Email, Link, RSS & What's New Icon components (#3202)

805ed8b

* Adds Email and RSS icons. * Adds Link and What's New Icons * Exchange (') for curly (’)

kim-cmsds modified the milestones: 12.0.0-beta.0, 11.1.0 Oct 9, 2024

kim-cmsds pushed a commit that referenced this pull request Oct 17, 2024

[WNMGDS-2861] Adds Email, Link, RSS & What's New Icon components (#3202)

787f2bf

* Adds Email and RSS icons. * Adds Link and What's New Icons * Exchange (') for curly (’)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WNMGDS-2861] Adds Email, Link, RSS & What's New Icon components #3202

[WNMGDS-2861] Adds Email, Link, RSS & What's New Icon components #3202

tamara-corbalt commented Aug 13, 2024 •

edited

Loading

malloryiden left a comment

jack-ryan-nava-pbc left a comment

tamara-corbalt commented Aug 14, 2024

zarahzachz Aug 14, 2024

kim-cmsds Aug 14, 2024

tamara-corbalt Aug 14, 2024

tamara-corbalt Aug 14, 2024

kim-cmsds Aug 14, 2024

tamara-corbalt Aug 14, 2024

[WNMGDS-2861] Adds Email, Link, RSS & What's New Icon components #3202

[WNMGDS-2861] Adds Email, Link, RSS & What's New Icon components #3202

Conversation

tamara-corbalt commented Aug 13, 2024 • edited Loading

Summary

How to test

Checklist

malloryiden left a comment

Choose a reason for hiding this comment

jack-ryan-nava-pbc left a comment

Choose a reason for hiding this comment

tamara-corbalt commented Aug 14, 2024

zarahzachz Aug 14, 2024

Choose a reason for hiding this comment

kim-cmsds Aug 14, 2024

Choose a reason for hiding this comment

tamara-corbalt Aug 14, 2024

Choose a reason for hiding this comment

tamara-corbalt Aug 14, 2024

Choose a reason for hiding this comment

kim-cmsds Aug 14, 2024

Choose a reason for hiding this comment

tamara-corbalt Aug 14, 2024

Choose a reason for hiding this comment

tamara-corbalt commented Aug 13, 2024 •

edited

Loading