docs(Page): add example showing different type prop variants (pattern…

…fly#10352)

* docs(Page): add example showing different type prop variants

* docs(Page): make text color white in "subnav" section

* docs(Page): rename IDs in example

packages/react-core/src/components/Page/examples/Page.md

@@ -95,6 +95,14 @@ To remove padding at specific breakpoints, pass in 'noPadding' at those breakpoi
 
 ```
 
+### Main section variations
+
+This example shows all types of page sections.
+
+```ts file="./PageMainSectionVariations.tsx"
+
+```
+
 ### Group section
 
 To group page content sections, add 1 or more `<PageGroup>` components to a `<Page>`.

packages/react-core/src/components/Page/examples/PageMainSectionVariations.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import {
+  Page,
+  Masthead,
+  MastheadToggle,
+  MastheadMain,
+  MastheadBrand,
+  MastheadContent,
+  PageSidebar,
+  PageSidebarBody,
+  PageSection,
+  PageToggleButton,
+  Toolbar,
+  ToolbarContent,
+  ToolbarItem
+} from '@patternfly/react-core';
+import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
+
+export const PageMainSectionPadding: React.FunctionComponent = () => {
+  const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
+
+  const onSidebarToggle = () => {
+    setIsSidebarOpen(!isSidebarOpen);
+  };
+
+  const headerToolbar = (
+    <Toolbar id="main-variations-toolbar">
+      <ToolbarContent>
+        <ToolbarItem>header-tools</ToolbarItem>
+      </ToolbarContent>
+    </Toolbar>
+  );
+
+  const header = (
+    <Masthead>
+      <MastheadToggle>
+        <PageToggleButton
+          variant="plain"
+          aria-label="Global navigation"
+          isSidebarOpen={isSidebarOpen}
+          onSidebarToggle={onSidebarToggle}
+          id="main-variations-nav-toggle"
+        >
+          <BarsIcon />
+        </PageToggleButton>
+      </MastheadToggle>
+      <MastheadMain>
+        <MastheadBrand href="https://patternfly.org" target="_blank">
+          Logo
+        </MastheadBrand>
+      </MastheadMain>
+      <MastheadContent>{headerToolbar}</MastheadContent>
+    </Masthead>
+  );
+
+  const sidebar = (
+    <PageSidebar isSidebarOpen={isSidebarOpen} id="main-variations-sidebar">
+      <PageSidebarBody>Navigation</PageSidebarBody>
+    </PageSidebar>
+  );
+
+  return (
+    <Page header={header} sidebar={sidebar}>
+      <PageSection type="subnav">
+        Section with <code>type="subnav"</code> for horizontal subnav navigation
+      </PageSection>
+      <PageSection type="nav">
+        Section with <code>type="nav"</code> for tertiary navigation
+      </PageSection>
+      <PageSection type="tabs">
+        Section with <code>type="tabs"</code> for tabs
+      </PageSection>
+      <PageSection type="breadcrumb">
+        Section with <code>type="breadcrumb"</code> for breadcrumbs
+      </PageSection>
+      <PageSection>
+        Section without <code>type</code> prop or <code>type="default"</code> for main sections
+      </PageSection>
+      <PageSection type="wizard">
+        Section with <code>type="wizard"</code> for wizards
+      </PageSection>
+    </Page>
+  );
+};