From 1a79997cc967a084a452ee55648c2ca1e4338164 Mon Sep 17 00:00:00 2001
From: Matt Nolting <matthew.nolting@gmail.com>
Date: Tue, 14 Oct 2025 13:46:02 -0400
Subject: [PATCH] feat(CC-page): page init

---
 .../DesktopPageWithHorizontalNav.figma.tsx    | 59 +++++++++++++++
 .../Page/DesktopPageWithLeftNav.figma.tsx     | 73 +++++++++++++++++++
 packages/code-connect/figma.config.json       | 14 +---
 3 files changed, 136 insertions(+), 10 deletions(-)
 create mode 100644 packages/code-connect/components/Page/DesktopPageWithHorizontalNav.figma.tsx
 create mode 100644 packages/code-connect/components/Page/DesktopPageWithLeftNav.figma.tsx

diff --git a/packages/code-connect/components/Page/DesktopPageWithHorizontalNav.figma.tsx b/packages/code-connect/components/Page/DesktopPageWithHorizontalNav.figma.tsx
new file mode 100644
index 00000000000..3afdf4bcaad
--- /dev/null
+++ b/packages/code-connect/components/Page/DesktopPageWithHorizontalNav.figma.tsx
@@ -0,0 +1,59 @@
+import figma from '@figma/code-connect';
+import {
+  Masthead,
+  MastheadMain,
+  MastheadBrand,
+  MastheadLogo,
+  MastheadContent,
+  Page,
+  PageSection,
+  PageSidebar,
+  PageSidebarBody,
+  Toolbar,
+  ToolbarContent,
+  ToolbarItem
+} from '@patternfly/react-core';
+
+// Documentation for Page can be found at https://www.patternfly.org/components/page
+
+figma.connect(Page, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=7620-35193', {
+  props: {
+    masthead: (
+      <Masthead inset={{ default: 'insetXs' }}>
+        <MastheadMain>
+          <MastheadBrand>
+            <MastheadLogo href="https://patternfly.org" target="_blank">
+              Logo
+            </MastheadLogo>
+          </MastheadBrand>
+        </MastheadMain>
+        <MastheadContent>
+          <Toolbar id="horizontal-toolbar">
+            <ToolbarContent>
+              <ToolbarItem>Navigation</ToolbarItem>
+              <ToolbarItem>header-tools</ToolbarItem>
+            </ToolbarContent>
+          </Toolbar>
+        </MastheadContent>
+      </Masthead>
+    ),
+    sidebar: (
+      <PageSidebar isSidebarOpen={false} id="vertical-sidebar">
+        <PageSidebarBody>Navigation</PageSidebarBody>
+      </PageSidebar>
+    )
+  },
+  example: (props) => (
+    <Page masthead={props.masthead}>
+      <PageSection aria-labelledby="section-1">
+        <h2 id="section-1">Horizontal nav example section 1</h2>
+      </PageSection>
+      <PageSection variant="secondary" aria-labelledby="section-2">
+        <h2 id="section-2">Horizontal nav example section 2 with secondary variant styling</h2>
+      </PageSection>
+      <PageSection aria-labelledby="section-3">
+        <h2 id="section-3">Horizontal nav example section 3</h2>
+      </PageSection>
+    </Page>
+  )
+});
diff --git a/packages/code-connect/components/Page/DesktopPageWithLeftNav.figma.tsx b/packages/code-connect/components/Page/DesktopPageWithLeftNav.figma.tsx
new file mode 100644
index 00000000000..829edef17ea
--- /dev/null
+++ b/packages/code-connect/components/Page/DesktopPageWithLeftNav.figma.tsx
@@ -0,0 +1,73 @@
+import figma from '@figma/code-connect';
+import {
+  Masthead,
+  MastheadBrand,
+  MastheadContent,
+  MastheadLogo,
+  MastheadMain,
+  MastheadToggle,
+  Page,
+  PageSection,
+  PageSidebar,
+  PageSidebarBody,
+  PageToggleButton,
+  Toolbar,
+  ToolbarContent,
+  ToolbarItem
+} from '@patternfly/react-core';
+
+// Documentation for Page can be found at https://www.patternfly.org/components/page
+
+figma.connect(
+  Page,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=25656-311374',
+  {
+    props: {
+      masthead: (
+        <Masthead>
+          <MastheadMain>
+            <MastheadToggle>
+              <PageToggleButton
+                isHamburgerButton
+                aria-label="Global navigation"
+                isSidebarOpen={true}
+                onSidebarToggle={() => {}}
+                id="vertical-nav-toggle"
+              />
+            </MastheadToggle>
+            <MastheadBrand>
+              <MastheadLogo href="https://patternfly.org" target="_blank">
+                Logo
+              </MastheadLogo>
+            </MastheadBrand>
+          </MastheadMain>
+          <MastheadContent>
+            <Toolbar id="vertical-toolbar">
+              <ToolbarContent>
+                <ToolbarItem>header-tools</ToolbarItem>
+              </ToolbarContent>
+            </Toolbar>
+          </MastheadContent>
+        </Masthead>
+      ),
+      sidebar: (
+        <PageSidebar isSidebarOpen={true} id="vertical-sidebar">
+          <PageSidebarBody>Navigation</PageSidebarBody>
+        </PageSidebar>
+      )
+    },
+    example: (props) => (
+      <Page masthead={props.masthead} sidebar={props.sidebar}>
+        <PageSection aria-labelledby="section-1">
+          <h2 id="section-1">Vertical nav example section 1</h2>
+        </PageSection>
+        <PageSection variant="secondary" aria-labelledby="section-2">
+          <h2 id="section-2">Vertical nav example section 2 with secondary variant styling</h2>
+        </PageSection>
+        <PageSection aria-labelledby="section-3">
+          <h2 id="section-3">Vertical nav example section 3</h2>
+        </PageSection>
+      </Page>
+    )
+  }
+);
diff --git a/packages/code-connect/figma.config.json b/packages/code-connect/figma.config.json
index 2537e14be2b..82625586524 100644
--- a/packages/code-connect/figma.config.json
+++ b/packages/code-connect/figma.config.json
@@ -1,15 +1,9 @@
 {
   "codeConnect": {
     "parser": "react",
-    "include": [
-      "components/DatePicker/*.tsx",
-      "components/EmptyState/*.tsx",
-      "components/FileUpload/*.tsx",
-      "components/Hint/*.tsx",
-      "components/InlineEdit/*.tsx"
-    ],
-    "paths": {
-      "src/components": "src/components"
+    "include": ["components/Page/*.figma.tsx"],
+    "documentUrlSubstitutions": {
+      "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components": "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/9HiAevBhEc2iYY9rxZtovA/PatternFly-6--Components"
     },
     "aliases": {
       "@patternfly/react-core": "."
@@ -30,4 +24,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}