feat: Add new InformationHighlight component to Preview

[niftea]

Summary

Fixes: #1175, #2483

Resolves: The need for an Information Highlight component. Moves the existing Information Highlight out of modules/docs and into modules/preview-react. Updates the existing design of Information Highlight to match the most recent specs and adding a high and low emphasis options.

Updates Hyperlink to use new CSS Styling Utilities and tokens.

Release Category

Components

Release Note

Added new component InformationHighlight, to the preview package.
Refactored Hyperlink to use new CSS Utilities and tokens.

---

Checklist

• MDX documentation adheres to Canvas Kit's Documentation Guidelines
• Label ready for review has been added to PR

For the Reviewer

• PR title is short and descriptive
• PR summary describes the change (Fixes/Resolves linked correctly)
• PR Release Notes describes additional information useful to call out in a release message or removed if not applicable
• Breaking Changes provides useful information to upgrade to this code or removed if not applicable

Where Should the Reviewer Start?

/modules/react-preview/information-highlight/

Areas for Feedback? (optional)

• Code
• Documentation
• Testing
• Codemods

Testing Manually

yarn start to verify story book builds correctly, check out the new information highlight sections under preview, and testing preview

look at https://workday.github.io/canvas-kit/?path=/docs/tokens-tokens--docs in the local story book built by yarn start and verify the information highlight for tokens still builds and matches desired specs

Screenshots or GIFs (if applicable)

There are 6 style options for information highlight that come from a combination of two emphases and three variants. all six options have a colored side bar for the variant

High Emphasis Variants

Information Highlights also accept custom icons and properly tailor them for the variant and emphasis

They can also be built in a variety of ways with or without certain fields, the full extent of this can be seen in the visual testing

Thank You Gif (optional)

[cypress]

Workday/canvas-kit    Run #8177

Run Properties:   Passed #8177  •  630bf6fb0b ℹ️: Merge 9b78d2e6ea6e1f0aab607646911de3c56726cff1 into 43600098f5347d9100d07a866372...

Project	Workday/canvas-kit
Branch Review	info_highlight_creation
Run status	Passed #8177
Run duration	02m 46s
Commit	630bf6fb0b ℹ️: Merge 9b78d2e6ea6e1f0aab607646911de3c56726cff1 into 43600098f5347d9100d07a866372...
Committer	niftea
View all properties for this run ↗︎

---

Test results
Failures	0
Flaky	0
Pending	21
Skipped	0
Passing	929
View all changes introduced in this branch ↗︎

UI Coverage  21.19%
Untested elements	1527
Tested elements	408

Accessibility  99.17%
Failed rules	6 critical   5 serious   0 moderate   2 minor
Failed elements	162

[josh-bagwell]

Lets consolidate some of these examples:

• Attention
• Caution
• Custom

These examples can be in one file, for example, AttentionLow and AttentionHigh can be consolidated to one file and export each if you wanted. This just cleans up the examples a bit.

[josh-bagwell]

We will also need to add some more information to each example and when to use each. When should a user use low emphasis vs. high emphasis.

[williamjstanton]

This component is looking really good! Thanks for the contribution!

[josh-bagwell]

Nice work on this contribution!