Implement PageLayout component (#1820)

* Scaffold pagelayout component * Apply base styles to storybook stories * Create subcomponents * Implement stacking behavior * Implement containerWidth prop * Implement outerSpacing prop * Implement rowGap and columnGap props * Implement sx prop * Updated control panel * Use tshirt sizes for spacing * Implement position and positionWhenNarrow props * Update spacing names * Implement header divider * Implement pane width prop * Implement contentWidth prop * Add comment about 'none' * Implement header divider (messy) * Implement divider component * Make dividers full width on narrow viewports * Implement row and column gap * Clean up * Add render subcomponent option to story * Export PageLayout from drafts * Update PageLayout docs * Create pink-flowers-raise.md * Add seperator role to horizontal divider * Add pull request page example * Update src/PageLayout/PageLayout.tsx * Implement sx prop * Update docs/content/drafts/PageLayout.mdx * Update docs/content/drafts/PageLayout.mdx * Fix merge conflict * Re-enable storybook html addon * Rename "outerSpacing" prop to "padding" * Add 'none' as a spacing option * Update drafts exports
primer · Feb 7, 2022 · 50c7bfa · 50c7bfa
1 parent 11011f5
commit 50c7bfa
Show file tree

Hide file tree

Showing 9 changed files with 848 additions and 66 deletions.
diff --git a/.changeset/pink-flowers-raise.md b/.changeset/pink-flowers-raise.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Add draft `PageLayout` component
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,5 +1,5 @@
 import {addons} from '@storybook/addons'
-import {ThemeProvider, themeGet, theme} from '../src'
+import {ThemeProvider, themeGet, theme, BaseStyles} from '../src'
 import styled, {createGlobalStyle} from 'styled-components'
 import {addDecorator} from '@storybook/react'
 import {withPerformance} from 'storybook-addon-performance'
@@ -86,9 +86,11 @@ const withThemeProvider = (Story, context) => {
           nightScheme={context.globals.nightScheme}
         >
           <ThemedSectionStyle>
-            <div id="html-addon-root">
-              <Story {...context} />
-            </div>
+            <BaseStyles>
+              <div id="html-addon-root">
+                <Story {...context} />
+              </div>
+            </BaseStyles>
           </ThemedSectionStyle>
         </ThemeProvider>
       </Wrapper>
@@ -102,9 +104,11 @@ const withThemeProvider = (Story, context) => {
       nightScheme={context.globals.nightScheme}
     >
       <GlobalStyle />
-      <div id="html-addon-root">
-        <Story {...context} />
-      </div>
+      <BaseStyles>
+        <div id="html-addon-root">
+          <Story {...context} />
+        </div>
+      </BaseStyles>
     </ThemeProvider>
   )
 }

diff --git a/docs/content/drafts/PageLayout.mdx b/docs/content/drafts/PageLayout.mdx
@@ -1,43 +1,109 @@
 ---
 title: PageLayout
 status: Draft
-description: TODO
+# description: TODO
+source: https://github.com/primer/react/tree/main/src/PageLayout
+storybook: https://primer.style/react/storybook?path=/story/layout-pagelayout--playground
 ---
 
-<Note variant="warning">Not implemented yet</Note>
+```js
+import {PageLayout} from '@primer/react/drafts'
+```
 
 ## Examples
 
+<Note>
+
+See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayout--playground) for fullscreen examples.
+
+</Note>
+
 ### Default
 
-```jsx
+```jsx live drafts
 <PageLayout>
-  <PageLayout.Header>Header</PageLayout.Header>
-  <PageLayout.Content>Content</PageLayout.Content>
-  <PageLayout.Pane>Pane</PageLayout.Pane>
-  <PageLayout.Footer>Footer</PageLayout.Footer>
+  <PageLayout.Header>
+    <Placeholder label="Header" height={64} />
+  </PageLayout.Header>
+  <PageLayout.Content>
+    <Placeholder label="Content" height={240} />
+  </PageLayout.Content>
+  <PageLayout.Pane>
+    <Placeholder label="Pane" height={120} />
+  </PageLayout.Pane>
+  <PageLayout.Footer>
+    <Placeholder label="Footer" height={64} />
+  </PageLayout.Footer>
 </PageLayout>
 ```
 
 ### With dividers
 
-```jsx
+```jsx live drafts
+<PageLayout>
+  <PageLayout.Header divider="line">
+    <Placeholder label="Header" height={64} />
+  </PageLayout.Header>
+  <PageLayout.Content>
+    <Placeholder label="Content" height={240} />
+  </PageLayout.Content>
+  <PageLayout.Pane divider="line">
+    <Placeholder label="Pane" height={120} />
+  </PageLayout.Pane>
+  <PageLayout.Footer divider="line">
+    <Placeholder label="Footer" height={64} />
+  </PageLayout.Footer>
+</PageLayout>
+```
+
+### With pane on left
+
+```jsx live drafts
 <PageLayout>
-  <PageLayout.Header divider="line">Header</PageLayout.Header>
-  <PageLayout.Content>Content</PageLayout.Content>
-  <PageLayout.Pane divider="line">Pane</PageLayout.Pane>
-  <PageLayout.Footer divider="line">Footer</PageLayout.Footer>
+  <PageLayout.Header>
+    <Placeholder label="Header" height={64} />
+  </PageLayout.Header>
+  <PageLayout.Content>
+    <Placeholder label="Content" height={240} />
+  </PageLayout.Content>
+  <PageLayout.Pane position="start">
+    <Placeholder label="Pane" height={120} />
+  </PageLayout.Pane>
+  <PageLayout.Footer>
+    <Placeholder label="Footer" height={64} />
+  </PageLayout.Footer>
+</PageLayout>
+```
+
+### With condensed spacing
+
+```jsx live drafts
+<PageLayout padding="condensed" rowGap="condensed" columnGap="condensed">
+  <PageLayout.Header>
+    <Placeholder label="Header" height={64} />
+  </PageLayout.Header>
+  <PageLayout.Content>
+    <Placeholder label="Content" height={240} />
+  </PageLayout.Content>
+  <PageLayout.Pane>
+    <Placeholder label="Pane" height={120} />
+  </PageLayout.Pane>
+  <PageLayout.Footer>
+    <Placeholder label="Footer" height={64} />
+  </PageLayout.Footer>
 </PageLayout>
 ```
 
-### Condensed
+### Without header or footer
 
-```jsx
-<PageLayout columnGap="condensed" rowGap="condensed">
-  <PageLayout.Header>Header</PageLayout.Header>
-  <PageLayout.Content>Content</PageLayout.Content>
-  <PageLayout.Pane>Pane</PageLayout.Pane>
-  <PageLayout.Footer>Footer</PageLayout.Footer>
+```jsx live drafts
+<PageLayout>
+  <PageLayout.Content>
+    <Placeholder label="Content" height={240} />
+  </PageLayout.Content>
+  <PageLayout.Pane>
+    <Placeholder label="Pane" height={120} />
+  </PageLayout.Pane>
 </PageLayout>
 ```
 
@@ -58,21 +124,24 @@ description: TODO
     description="The maximum width of the page container."
   />
   <PropsTableRow
-    name="outerSpacing"
-    type={`| 'normal'
+    name="padding"
+    type={`| 'none'
+| 'normal'
 | 'condensed'`}
     defaultValue="'normal'"
     description="The spacing between the outer edges of the page container and the viewport"
   />
   <PropsTableRow
     name="columnGap"
-    type={`| 'normal'
+    type={`| 'none'
+| 'normal'
 | 'condensed'`}
     defaultValue="'normal'"
   />
   <PropsTableRow
     name="rowGap"
-    type={`| 'normal'
+    type={`| 'none'
+| 'normal'
 | 'condensed'`}
     defaultValue="'normal'"
   />
@@ -82,7 +151,12 @@ description: TODO
 ### PageLayout.Header
 
 <PropsTable>
-  <PropsTableRow name="divider" type="'none' | 'line'" defaultValue="'none'" />
+  <PropsTableRow
+    name="divider"
+    type={`| 'none'
+| 'line'`}
+    defaultValue="'none'"
+  />
   <PropsTableRow
     name="dividerWhenNarrow"
     type={`| 'inherit'
@@ -104,7 +178,7 @@ description: TODO
 | 'large'
 | 'xlarge'`}
     defaultValue="'full'"
-    description="Define the maximum width of the content region."
+    description="The maximum width of the content region."
   />
   <PropsTableSxRow />
 </PropsTable>
@@ -131,9 +205,14 @@ description: TODO
 | 'medium'
 | 'large'`}
     defaultValue="'medium'"
-    description="Define the width of the pane."
+    description="The width of the pane."
+  />
+  <PropsTableRow
+    name="divider"
+    type={`| 'none'
+| 'line'`}
+    defaultValue="'none'"
   />
-  <PropsTableRow name="divider" type="'none' | 'line'" defaultValue="'none'" />
   <PropsTableRow
     name="dividerWhenNarrow"
     type={`| 'inherit'
@@ -148,7 +227,12 @@ description: TODO
 ### PageLayout.Footer
 
 <PropsTable>
-  <PropsTableRow name="divider" type="'none' | 'line'" defaultValue="'none'" />
+  <PropsTableRow
+    name="divider"
+    type={`| 'none'
+| 'line'`}
+    defaultValue="'none'"
+  />
   <PropsTableRow
     name="dividerWhenNarrow"
     type={`| 'inherit'
@@ -165,9 +249,9 @@ description: TODO
 <ComponentChecklist
   items={{
     propsDocumented: true,
-    noUnnecessaryDeps: false,
-    adaptsToThemes: false,
-    adaptsToScreenSizes: false,
+    noUnnecessaryDeps: true,
+    adaptsToThemes: true,
+    adaptsToScreenSizes: true,
     fullTestCoverage: false,
     usedInProduction: false,
     usageExamplesDocumented: true,

diff --git a/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js b/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js
@@ -1,44 +1,45 @@
-import React from 'react'
-import * as primerComponents from '@primer/react'
-import * as drafts from '@primer/react/drafts'
 import * as doctocatComponents from '@primer/gatsby-theme-doctocat'
 import {
+  AlertIcon,
+  ArchiveIcon,
+  ArrowRightIcon,
+  CalendarIcon,
   CheckIcon,
-  ZapIcon,
-  XIcon,
-  SearchIcon,
   DotIcon,
-  OctofaceIcon,
-  PersonIcon,
-  MailIcon,
-  GitCommitIcon,
+  FilterIcon,
   FlameIcon,
+  GearIcon,
+  GitCommitIcon,
+  IterationsIcon,
+  KebabHorizontalIcon,
+  LawIcon,
+  LinkIcon,
+  MailIcon,
   MarkGithubIcon,
   NoteIcon,
+  NumberIcon,
+  OctofaceIcon,
+  PencilIcon,
+  PersonIcon,
   ProjectIcon,
-  FilterIcon,
-  GearIcon,
-  TypographyIcon,
-  VersionsIcon,
-  LinkIcon,
-  LawIcon,
+  SearchIcon,
+  SingleSelectIcon,
   StarIcon,
-  AlertIcon,
-  ArrowRightIcon,
-  KebabHorizontalIcon,
-  PencilIcon,
-  ArchiveIcon,
   TrashIcon,
-  CalendarIcon,
-  IterationsIcon,
-  NumberIcon,
-  SingleSelectIcon
+  TypographyIcon,
+  VersionsIcon,
+  XIcon,
+  ZapIcon
 } from '@primer/octicons-react'
-import State from '../../../components/State'
-import {Dialog as Dialog2} from '../../../../src/Dialog/Dialog'
+import * as primerComponents from '@primer/react'
+import * as drafts from '@primer/react/drafts'
+import {Placeholder} from '@primer/react/Placeholder'
+import React from 'react'
 import {AnchoredOverlay} from '../../../../src/AnchoredOverlay'
 import {ConfirmationDialog, useConfirm} from '../../../../src/Dialog/ConfirmationDialog'
+import {Dialog as Dialog2} from '../../../../src/Dialog/Dialog'
 import {SelectPanel} from '../../../../src/SelectPanel/SelectPanel'
+import State from '../../../components/State'
 
 const ReactRouterLink = ({to, ...props}) => {
   // eslint-disable-next-line jsx-a11y/anchor-has-content
@@ -86,6 +87,7 @@ export default function resolveScope(metastring) {
     ConfirmationDialog,
     useConfirm,
     AnchoredOverlay,
-    SelectPanel
+    SelectPanel,
+    Placeholder
   }
 }