Skip to content
New issue

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

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

Already on GitHub? # to your account

V5 Add X and Bluesky icons, Fix bugs with BU-Hub icons, and change how FontAwesome Brand icons are handled #286

Merged
merged 5 commits into from
Feb 6, 2025

Conversation

acketon
Copy link
Member

@acketon acketon commented Feb 6, 2025

This PR makes the following changes:

  • Adds Yalc since NPM Link no longer works the same in Node 16+. This is needed to link these packages locally to a theme for testing/dev of Responsive Foundation.
  • Add X and Bluesky icons. These are added in BU Default Icons since we can't add to FontAwesome v5.
  • Move all of the FontAwesome icons in the "brands" font to a separate Sass-Map. This list can now be checked in the Icon mixin to see if a specific icon "name" is part of the Brands list. If so the font-family is output in the Mixin to set it to the FontAwesome Brands font-face. This eliminates an issue where you had to use and @extend to add the font-awesome brands font-face to the psuedo element for some icons. (such as social icons)
  • Removes the @extend %icon-family-brands from _footer.scss for the social menus since this is now handled automagically
  • Do the same for BU Default icons for our handful of icons that only exist in the BU Default Icons font. Now the Icons mixin will check if the icon name is in the BU Default Icons sass-map and automatically output the correct font-family. This fixes an issue where Designers had to patch this for the BU Hub icon in their child themes. Fixes: https://github.com/bu-ist/responsive-framework-3x/issues/60
  • Always load the BU Default Icons @font-face declaration so those icons that only exist in BU Default Icons will work without a theme developer having to add the @font-face declaration manually to their stylesheet.

…ific fonts that don’t exist in FontAwesome
- Move all FontAwesome Brand icons to a separate sass-map.
- Add a $icons-budefaulticons sass-map with a list of icons only found in BU Default Icons font.
- Merge all of these separate sass-maps together so $icons-responsive still has the full list of all icons

These separate sass-maps let us check in the Icon mixin if an icon name exists in FontAwesome Brands or BU Default Icons maps so that we can change the font-family for those specfic icons when the Icon mixin runs.
…ons sass-maps so we can set a different font-family and weight
…omatically for certain icons makes these @extends unnecessary
@acketon acketon self-assigned this Feb 6, 2025
Copy link
Contributor

@saucyrooster saucyrooster left a comment

Choose a reason for hiding this comment

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

Looks great!

Copy link
Contributor

@tspears1 tspears1 left a comment

Choose a reason for hiding this comment

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

This looks fantastic!!

@acketon acketon merged commit 54825a4 into v5 Feb 6, 2025
@acketon acketon deleted the v5-add-x-bluesky-icons branch February 6, 2025 21:37
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants