fix: Icon spacing in jump link stories

[meissadia]

Closes #99

Based on my investigation, it feels more logical to utilize css for icon spacing as opposed to relying on devs inserting an   between elements. I hope this saves someone else's sanity in the future.

This PR got a bit large but it:

• Implements icon spacing via css
• Creates a shared stylesheet that applies CSS styles that seem to exist in the Design System but are missing from the npm version (i.e. -webkit-font-smoothing: antialiased)
• Applies the shared styles to the library via the index.ts entry point so that they apply globally. Also exports all components via index.ts so that they are easily accessible from Design Stories library\
• Adjusts imports to pull via the library entry point index.ts where possible to help ensure all components that should be externally accessible are made available.

Happy to chat about this approach or walk through changes if need.

[netlify]

✅ Deploy Preview for cfpb-design-stories ready!

Name	Link
🔨 Latest commit	8da83d7
🔍 Latest deploy log	https://app.netlify.com/sites/cfpb-design-stories/deploys/649f42a66c3e4d000858fea5
😎 Deploy Preview	https://deploy-preview-100--cfpb-design-stories.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[contolini]

After hours of comparing and contrasting, I've established that the source of the gap between the icon and the text in the design system example was....a space character.

😮 🏆

...they appear to have different font weights (though the setting is 500 in both) and text spacings.

See if -webkit-font-smoothing: antialiased; adjusts the visual weight.

[meissadia]

Moving investigation notes to a comment for posterity

Spacing fix

After hours of comparing and contrasting, I've established that the source of the gap between the icon and the text in the design system example was....a space character. It was hard to see because it was between the <span.a-link_text> and the icon <svg>.

Other issue (Chrome)

There is still an issue with vertical alignment due to a gap between the text and bottom border (noticeable on the "j" and "p"). This gap seems to come from the font face. The font-family for both instances shown below is 'Avenir Next', Arial, sans-serif, inherited from the body element as defined in the CFPB DS, yet they appear to have different font weights (though the setting is 500 in both) and text spacings.

Storybook	Design System docs

Deleting 'Avenir Next' from the font-family stack in both apps seems to better align the styles, though the Storybook text still looks slightly heavier (I also used macOS Digital Color Meter to verify that they are the same color).

Storybook	Design System docs

I really don't know what to make of these findings. Could the `Avenir Next` in the DS docs be different than the one in Storybook???...though both should be using the Design System so it doesn't seem a logical explanation.

Cross Browser checks

The Design System doc links are consistent across Chrome, Safari, and Firefox.

The Storybook links match the Design System docs in Firefox but not in Chrome or Safari (though the mismatch is consistent in both browsers).

Rendered Font Name

Browser	Storybook	DS Docs
Chrome	Avenir Next Medium	no font name displayed but I think Avenir Next because when I delete it from the font-family the UI changes and the Arial font name is displayed.
Safari	Avenir Next	Same as above
Firefox	Arial	Avenir Next (Avenir Next LT W01 Medium)

[contolini]

Turns out to fix the antialiasing we just had to install the latest version of the design system. I also added a typescript alias that points ~ to the project's root so we can avoid lots of ../../ import statements.

[contolini]

Nice work!