feat(examples): compile & use scss in examples

[evwilkin]

Closes #72

This PR removes the custom stylesheets for each example and instead compiles the SASS locally to CSS, passes that to docs framework to be used in the examples, and then copies the compiled CSS to the dist directory.

Note: this will require design review - the shipped styles have not changed but the examples now differ in substantial ways such as blue borders at the top of Catalog Tiles.

Also Closes #58
Preview to the new demo: https://catalog-view-pr-catalog-view-73.surge.sh/extensions/catalog-view/catalog-view-demo/react/catalog-view-demo/

AI-assisted implementation using Cursor with human review and modifications

[patternfly-build]

Preview: https://catalog-view-pr-catalog-view-73.surge.sh

A11y report: https://catalog-view-pr-catalog-view-73-a11y.surge.sh

[christianvogt]

The preview loses the hover treatment background. Is this intentional that the vertical tabs don't get this treatment?

[evwilkin]

@mcoker & @andrew-ronaldson we should likely tag team this one, as the example styles being removed differ from the remaining styles shipped with the code.

See @christianvogt comment above about background color on hover, this was hard-coded into the example styles but does not exist in the sass styles.

[nicolethoen]

I am seeing something misaligned and extra blue in some of the tiles

[nicolethoen]

I cleaned up this PR and took the time to build out the designed catalog-view demo which had never been implemented. It turned into a good use case to make sure the styles are looking okay.

Preview to the new demo: https://catalog-view-pr-catalog-view-73.surge.sh/extensions/catalog-view/catalog-view-demo/react/catalog-view-demo/

[andrew-ronaldson]

The demo looks good, thanks for making that.
I noticed the vertical tabs look different from our Figma file and I need to add a selected + hover variant since it is missing right now.

[nicolethoen]

@andrew-ronaldson in the demo - the sidebar panel appears to be more like advanced filtering with checkboxes - not tabs. What is the intended relationship between the sidebar items/tabs and the catalog tiles? Would i be applying this selected state when teh checkbox is selected?

[andrew-ronaldson]

Sorry I was looking at the individual elements in the nav and saw the vertical tabs. They are not in the demo page you created so if this issue is just for the purpose of the demo we can focus on that for now

[andrew-ronaldson]

Demo looks good

[github-actions]

🎉 This PR is included in version 6.2.0-prerelease.1 🎉

The release is available on:

• GitHub release
• npm package (@prerelease dist-tag)

Your semantic-release bot 📦🚀