feat(Compass): add handbook doc page

[kmcfaul]

Closes #4838.

[patternfly-build]

Preview: https://pf-org--pr-4877-site.surge.sh

[edonehoo]

some rearranging, syntax, and phrasing things. Lmk if I can clarify anything and feel free to make additional adjustments based on your own expertise/familiarity here!

[edonehoo]

Suggested change

	source: guide
	source: Development-guide

just aligning with the motion docs - not sure if the hyphen is needed or not

[edonehoo]

Suggested change

	When building a layout for generative UIs using the Compass components, there are several common patterns that may be implemented using Patternfly components and component variants.
	When building generative UI layouts using the Compass components, there are several common patterns to considering during your development.

[edonehoo]

Suggested change

	### Compass structure
	## Structural patterns

unless you've specifically chosen these heading levels on purpose, just moving everything up a level

[edonehoo]

Suggested change

	#### Containers & glass theme
	### Transparent containers

[edonehoo]

Suggested change

	The glass look and feel is an opt-in global styling applied when `pf-v6-theme-glass` is present on the `html` element class list, similar to dark theme. For compass layouts, content that has the glass background and rounded borders should be wrapped in a `CompassPanel` (and some compass components will do this automatically). This component has various options to customize its own padding and behavior to fit the context of its usage, and so is present in nearly every area of a compass page. `CompassPanels` should not be directly nested if the glass theme is applied to prevent styling issues.
	Transparent containers create a modern glass look and feel. To enable transparency on a container, apply `pf-v6-theme-glass` to the `html` element class list, similar to the approach for enabling the dark mode theme.
	Within Compass layouts, elements with a transparent glass background and rounded borders should be wrapped in a `<CompassPanel>` (some Compass components do this automatically). You can adjust various options of the `<CompassPanel>` to adapt its padding and behavior to fit the context of your use case.
	To prevent styling issues, do not nest`<CompassPanel>` components while using the glass effects.

wasn't sure what was meant by "and so is present in nearly every area of a compass page", so I just removed mention of it, but we can reintegrate it. What does this mean? That CompassPanels will be used a bunch on a page?

[edonehoo]

Suggested change

	There are two methods of adding a footer to a compass layout. In either case, a footer's content will remain the same and will usually consist of a `@patternfly/chatbot` `MessageBar`, wrapped by a `CompassPanel` and `CompassMessageBar` component, as shown below:
	There are 2 methods of adding a footer to a compass layout.
	In both methods, the footer content will remain the same, typically containing a [ChatBot `<MessageBar>`](/extensions/chatbot/messages/), wrapped in a `<CompassPanel>` and `<CompassMessageBar>` component:

[edonehoo]

Suggested change

	In the first method of adding a footer, pass this content to the `footer` prop of the `Compass` component. This type of footer will extend the entire width of the viewport. However, if the footer content is expected to change in height (such as when MessageBar content expands), the sidebars will adjust their positioning. If this behavior is not desired, please use the second method and forego passing the `footer` prop.
	For the second method of adding a footer, wrap the content in `CompassMainFooter` and pass it as part of the `main` content of the `Compass`. This will allow the sidebars to extend through to the bottom of the viewport and prevents them from resizing based on changing footer content height.
	1. Via the `footer` prop.
	To create a footer that will span the entire viewport width, pass content to the `footer` prop of the `<Compass>` component. If your footer content is expected to change in height (like `<MessageBar>` content that expands), the sidebars will adjust their positioning to align. If this behavior is not desired, don't use the `footer` prop and follow the second method.
	2. Via the `<CompassMainFooter>` components.
	To allow the sidebars to extend through the bottom of the viewport, preventing them from resizing based on changes to the footer container height, wrap footer content in `<CompassMainFooter>` and pass it to the `<Compass>` component as part of the `main` content.

the sub-content needs to be indented, which may need tweaking beyond what I can leave as a suggestion here

[edonehoo]

Suggested change

	#### Main content
	### Main content

[edonehoo]

Suggested change

	The main content, taking up the center of viewport, will typically consist of a `Hero` or `CompassMainHeader`, a `CompassContent`, and an optional `CompassMainFooter`.
	A typical compass page will consist of a `CompassMainHeader` and `CompassContent` with a `CompassPanel` child, and content of the page should go inside of this `CompassPanel`.
	When making a dashboard view, use a `Hero` instead of a `CompassMainHeader`. And instead of having a single `CompassPanel` within a `CompassContent`, each individual dashbaord item should be wrapped in a `CompassPanel`. For example, in a dashboard that has many content cards, each `Card` (with `isPlain` flag) is wrapped by a `CompassPanel` inside of a `Grid`.
	The main content in a Compass layout includes the generated information displays. Main content fills the center of the viewport and typically consists of a `<Hero>` or `<CompassMainHeader>`, a `<CompassContent>`, and an optional `<CompassMainFooter>`.
	Often, the main section will contain a `<CompassMainHeader>` and `<CompassContent>` with a `<CompassPanel>` child containing the primary page content.
	When making [a dashboard view](/patterns/dashboard), use a `<Hero>` instead of a `<CompassMainHeader>`. Instead of having a single `<CompassPanel>` within a `<CompassContent>`, each individual dashboard item should be wrapped in a `<CompassPanel>`. For example, in a dashboard with many content cards, each `<Card>` (with `isPlain` flag) should be wrapped by a `<CompassPanel>` inside of a [`<Grid>`](/foundations-and-styles/layouts/grid).

[edonehoo]

Suggested change

	### CSS
	PatternFly's token system allows additional customization of the look and feel of a compass layout.
	For example, the following css mixin utilizes several global token overrides to better match the Red Hat Design System look and feel.
	## CSS customization
	Our [design token system](/foundations-and-styles/design-tokens/overview) allows you to further customize the look and feel of a Compass layout.
	For example, the following CSS mixin utilizes several global token overrides to better match the Red Hat Design System look and feel.