@patternfly/react-core 6.5.0-prerelease.49 → 6.5.0-prerelease.50

package/src/components/Page/examples/PagePlainSections.tsx

@@ -0,0 +1,93 @@
+import { useState } from 'react';
+import {
+  Page,
+  Masthead,
+  MastheadMain,
+  MastheadToggle,
+  MastheadBrand,
+  MastheadLogo,
+  MastheadContent,
+  PageSidebar,
+  PageSidebarBody,
+  PageSection,
+  PageGroup,
+  PageToggleButton,
+  Toolbar,
+  ToolbarContent,
+  ToolbarItem
+} from '@patternfly/react-core';
+
+export const PagePlainSections: React.FunctionComponent = () => {
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+
+  const onSidebarToggle = () => {
+    setIsSidebarOpen(!isSidebarOpen);
+  };
+
+  const headerToolbar = (
+    <Toolbar id="plain-sections-toolbar">
+      <ToolbarContent>
+        <ToolbarItem>header-tools</ToolbarItem>
+      </ToolbarContent>
+    </Toolbar>
+  );
+
+  const masthead = (
+    <Masthead>
+      <MastheadMain>
+        <MastheadToggle>
+          <PageToggleButton
+            aria-label="Plain sections example navigation"
+            isSidebarOpen={isSidebarOpen}
+            onSidebarToggle={onSidebarToggle}
+            id="plain-sections-nav-toggle"
+            isHamburgerButton
+          />
+        </MastheadToggle>
+        <MastheadBrand>
+          <MastheadLogo href="https://patternfly.org" target="_blank">
+            Logo
+          </MastheadLogo>
+        </MastheadBrand>
+      </MastheadMain>
+      <MastheadContent>{headerToolbar}</MastheadContent>
+    </Masthead>
+  );
+
+  const sidebar = (
+    <PageSidebar isSidebarOpen={isSidebarOpen} id="plain-sections-sidebar">
+      <PageSidebarBody>Navigation</PageSidebarBody>
+    </PageSidebar>
+  );
+
+  return (
+    <Page masthead={masthead} sidebar={sidebar}>
+      <PageSection isPlain aria-label="Plain section example">
+        <h2>Plain PageSection</h2>
+        <p>
+          This section uses <code>isPlain</code> to apply plain styling with no background color.
+        </p>
+      </PageSection>
+      <PageSection aria-label="Default section example">
+        <h2>Default PageSection</h2>
+        <p>This section has the default styling with a background color.</p>
+      </PageSection>
+      <PageGroup isPlain>
+        <PageSection aria-label="Section in plain group">
+          <h2>PageSection inside Plain PageGroup</h2>
+          <p>
+            This section is inside a PageGroup with <code>isPlain</code> applied.
+          </p>
+        </PageSection>
+        <PageSection aria-label="Another section in plain group">
+          <h2>Another Section in Plain Group</h2>
+          <p>Both sections are grouped with plain styling.</p>
+        </PageSection>
+      </PageGroup>
+      <PageSection variant="secondary" aria-label="Secondary variant section">
+        <h2>Secondary Variant Section</h2>
+        <p>This section uses the secondary variant for contrast.</p>
+      </PageSection>
+    </Page>
+  );
+};