Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update social icons #4872

Merged
merged 10 commits into from
Jul 27, 2022
Merged

Update social icons #4872

merged 10 commits into from
Jul 27, 2022

Conversation

thisisdano
Copy link
Member

@thisisdano thisisdano commented Jul 20, 2022

Add LinkedIn icon. We now have a LinkedIn icon included in our default icon sprite as linkedin.

⚠️ Use unmodified social media icons. We now provide simpler social media icons, and removed any decoration not in the original icon. This means that the new icons are not in an enclosing circle unless the original icon is enclosed in a circle.

Problem statement

Our social media icon set was missing the LinkedIn icon. Additionally, the social media icons we delivered were optimized for consistent presentation in our footer, inside a circular button. Since our footer is not the only place social media icons might be used, we should remove the circular outline around the images, since we do not want to imply that the circle is part of the icon itself.

How to test

  • Open the Icons component of our Storybook site and look for the linkedin icon
  • In the Icons component of our Storybook site, check the following icons to assure that they do not have a circular button shape. Note that the Facebook and GitHub are circular and have not changed.
    • Flickr
    • Instagram
    • Twitter
    • YouTube

Examples

New Instagram icon in our Icons component

Screen Shot 2022-07-20 at 10 43 36 AM

All social icons in the footer

Note that this a is just an example. This PR does not add social media icons to the footer.

Screen Shot 2022-07-20 at 10 34 21 AM

@@ -67,7 +67,7 @@
"test:unit": "gulp unitTests",
"version": "gulp release",
"watch": "gulp watch",
"fix:icons": "npx svgo --folder ./packages/usa-icon/src/img/uswds-icons -q && npx svgo --folder ./packages/usa-icon/src/img/material-icons -q && npx svgo --folder ./packages/usa-icon/src/img/usa-icons-bg -q && npx svgo --folder ./packages/usa-icon/src/img/usa-icons -q",
"fix:icons": "npx svgo --folder ./packages/usa-icon/src/img/uswds-icons -q && npx svgo --folder ./packages/usa-icon/src/img/usa-icons-bg -q",
Copy link
Member Author

@thisisdano thisisdano Jul 20, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also updated this script so it points to the proper directories. We no longer keep material icons in our package

Copy link
Contributor

@mejiaj mejiaj left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No issues with code, but the display on preview looks a jagged on OSX - Edge

image

Looks good in Firefox.

image

@brunerae brunerae linked an issue Jul 22, 2022 that may be closed by this pull request
Copy link
Contributor

@amyleadem amyleadem left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me!

I checked the display of the new icons on the following browsers and all are presenting with a quality similar to previous versions:

  • iOS safari
  • Chrome
  • Firefox
  • Safari

@thisisdano thisisdano merged commit 6dfc468 into develop Jul 27, 2022
@thisisdano thisisdano deleted the dw-update-social-icons branch July 27, 2022 17:07
@thisisdano thisisdano mentioned this pull request Aug 5, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Create a LinkedIn icon
3 participants