docs: demo page updates

[kmcfaul]

What: Draft for https://github.com/patternfly/patternfly-org/issues/2935

First pass for how an updated demo page with templated content may function. Adds a generic blurb at the top of the demo page, and boilerplate structure for component lists.

"Card view" and "Composable menu" demo pages are updated currently to test and showcase changes.

Open questions:

• Should subcomponents of components be included in the overall component list or should the list only correlate to docs pages?
• How should component lists be shown? Currently it is using LabelGroup/Label to create a visual list, which allows the differentiation between components and layouts.
• Should components and layouts be separate or should they be in the same list? (See "Card view" demo page for layout example)
• Does using LabelGroup to denote components make the sentence blurb indicating a list of components redundant? Should the boilerplate sentence be removed?
• Should PF icons that are imported be called out?

[patternfly-build]

Preview: https://patternfly-react-pr-7415.surge.sh

A11y report: https://patternfly-react-pr-7415-a11y.surge.sh

[mmenestr]

Thanks for doing this @kmcfaul, looks good!

To answer your questions:

Should subcomponents of components be included in the overall component list or should the list only correlate to docs pages?

I think doc pages is enough? But just to make sure I understand - when you say subcomponents, do you mean the actual very specific example within a component page?

How should component lists be shown? Currently it is using LabelGroup/Label to create a visual list, which allows the differentiation between components and layouts.

I like how you have it! I don't think it necessarily needs different label styling? Not sure what different color we could use for layouts if we went that route

Should components and layouts be separate or should they be in the same list? (See "Card view" demo page for layout example)

And I think it makes sense to separate components and layouts, since they're two different things.

Does using LabelGroup to denote components make the sentence blurb indicating a list of components redundant? Should the boilerplate sentence be removed?

I almost wonder if we should just have one component list at the top of the demo page, that lists out all components used across all the demos, instead of having a component list per individual demo.

Should PF icons that are imported be called out?

I want to say no (?)

As for Matt's comments, I agree that the headings look a bit weird - would probably remove the "Demo" heading, and not repeat the "Card view" twice! If we wanted to still mention that it's a demo on the page itself, maybe we could put a little label next to the page header that says "Demo" ? But IMO don't really think the demo distinction is necessary since they can see where they are using the navigation.

Lastly, a random idea - I wonder if we could play around with the styling of this text "This page contains demo(s) that utilize multiple PatternFly components to showcase various use cases not covered under a single component, as well as how components may be used together to achieve a specific purpose in application-style content." Maybe make it a grey, and italicize it, almost like a disclaimer, so that it doesn't compete as much with the demo specific text on each page, especially if we're going to repeat it on every single demo page.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[github-actions[bot]]

This PR has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[github-actions[bot]]

This PR has been closed because it has not had activity since being marked as stale.