feat: Info Highlight Creation

Workday / canvas-kit

Development kits to implement UI following the Workday Canvas Design System (https://canvas.workday.com/). See our Component Storybook -

https://workday.github.io/canvas-kit/

Apache License 2.0

301 stars 221 forks source link

feat: Info Highlight Creation #3015

Open niftea opened 3 weeks ago

niftea commented 3 weeks ago

Summary

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

Release Category

Components

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/lib/InformationHighlight.tsx

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)

0bd211e1e4f1f5900cdb1b5f6ae02342

cypress[bot] commented 2 weeks ago

Workday/canvas-kit Run #8053

Run Properties: Passed #8053 • 99b3202437 ℹ️: Merge 73a16a2a2e10d75fc58118da6e7137b1d9bda07a into 2ceb174f303a8e0c462440cf1f79...

Project	`Workday/canvas-kit`
Branch Review	`info_highlight_creation`
Run status	`Passed #8053`
Run duration	`03m 44s`
Commit	`99b3202437 ℹ️: Merge 73a16a2a2e10d75fc58118da6e7137b1d9bda07a into 2ceb174f303a8e0c462440cf1f79...`
Committer	`niftea`
View all properties for this run ↗︎

Test results
Failures	`0`
Flaky	`29`
Pending	`24`
Skipped	`0`
Passing	`1093`
View all changes introduced in this branch ↗︎

[!WARNING]

Partial Report: The results for the Application Quality reports may be incomplete.

UI Coverage `21.84%`
Untested elements	`1627`
Tested elements	`452`

Accessibility `99.15%`
Failed rules	`5 critical` `5 serious` `0 moderate` `2 minor`
Failed elements	`181`