From 5d1380c4d28a0b6c715884ca1ce18d6f03ad0a11 Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Wed, 16 Nov 2022 19:34:53 +1000
Subject: [PATCH] Add controls

---
 src/PageHeader/PageHeader.stories.tsx | 297 ++++++++++++++++++++++++--
 src/PageHeader/PageHeader.tsx         | 170 +++++++++------
 2 files changed, 383 insertions(+), 84 deletions(-)

diff --git a/src/PageHeader/PageHeader.stories.tsx b/src/PageHeader/PageHeader.stories.tsx
index 98ada389548..5f6cfa67f4e 100644
--- a/src/PageHeader/PageHeader.stories.tsx
+++ b/src/PageHeader/PageHeader.stories.tsx
@@ -1,11 +1,26 @@
 import React from 'react'
 import {Meta, Story} from '@storybook/react'
-import {Button, IconButton, Breadcrumbs} from '..'
+import {Button, IconButton, Breadcrumbs, Link, Text, StateLabel, BranchName} from '..'
+import {UnderlineNav} from '../UnderlineNav2'
 import Label from '../Label'
-import {PencilIcon, KebabHorizontalIcon, GitBranchIcon} from '@primer/octicons-react'
+import {
+  KebabHorizontalIcon,
+  GitBranchIcon,
+  CodeIcon,
+  GitPullRequestIcon,
+  PeopleIcon,
+  PencilIcon,
+  CommentDiscussionIcon,
+  CommitIcon,
+  ChecklistIcon,
+  FileDiffIcon,
+  ArrowRightIcon
+} from '@primer/octicons-react'
+import {OcticonArgType} from '../utils/story-helpers'
 
 import {PageHeader} from './PageHeader'
 import Hidden from '../Hidden'
+import {Actions} from '../drafts/MarkdownEditor/Actions'
 
 const meta: Meta = {
   title: 'Drafts/Components/PageHeader',
@@ -13,15 +28,201 @@ const meta: Meta = {
     layout: 'fullscreen',
     controls: {expanded: true}
   },
-  args: {}
+  args: {
+    isContextAreaVisible: true,
+    ParentLink: 'Previous Page',
+    'ParentLink.hidden': false,
+    'ContextBar.hidden': true,
+    'ContextAreaAction.hidden': true,
+    'BackButton.hidden': true,
+    Title: 'Branches',
+    'Title.as': 'h2',
+    'Title.variant': 'medium',
+    LeadingVisual: GitBranchIcon,
+    'LeadingVisual.hidden': false,
+    'TrailingVisual.hidden': false,
+    'TrailingAction.hidden': false,
+    'Description.hidden': false,
+    'Navigation.hidden': false
+  },
+  argTypes: {
+    isContextAreaVisible: {
+      type: 'boolean',
+      table: {
+        category: 'ContextArea Slot'
+      }
+    },
+    ParentLink: {
+      type: 'string',
+      if: {arg: 'isContextAreaVisible'},
+      table: {
+        category: 'ContextArea Slot'
+      },
+      description: 'The default way to let users navigate up in the hierarchy on Narrow viewports.'
+    },
+    'ParentLink.hidden': {
+      type: 'boolean',
+      if: {arg: 'isContextAreaVisible'},
+      table: {
+        category: 'ContextArea Slot'
+      },
+      description: 'Parent '
+    },
+    'ContextBar.hidden': {
+      type: 'boolean',
+      if: {arg: 'isContextAreaVisible'},
+      table: {
+        category: 'ContextArea Slot'
+      },
+      description:
+        'ContextBar is generic slot for any component above the title region. Use it for custom breadcrumbs and other navigation elements instead of ParentLink.'
+    },
+    'ContextAreaAction.hidden': {
+      type: 'boolean',
+      if: {arg: 'isContextAreaVisible'},
+      table: {
+        category: 'ContextArea Slot'
+      }
+    },
+    'BackButton.hidden': {
+      type: 'boolean',
+      table: {
+        category: 'TitleArea Slot'
+      },
+      description:
+        'A back button can be used as a leading action for local navigation. On Narrow viewports, use parentLink instead.'
+    },
+    Title: {
+      type: 'string',
+      table: {
+        category: 'TitleArea Slot'
+      }
+    },
+    'Title.as': {
+      control: {
+        type: 'select'
+      },
+      options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+      table: {
+        category: 'TitleArea Slot'
+      }
+    },
+    'Title.variant': {
+      control: {
+        type: 'radio'
+      },
+      options: ['large', 'medium', 'subtitle'],
+      table: {
+        category: 'TitleArea Slot'
+      },
+      description:
+        '`medium` is the most common page title size. Use for static titles in most situations. `large` for for user-generated content such as issues, pull requests, or discussions. `subtitle` when a PageHeader.Title is already present in the page, such as in a SplitPageLayout.'
+    },
+    LeadingVisual: {
+      ...OcticonArgType([CodeIcon, GitPullRequestIcon, PeopleIcon]),
+      table: {category: 'TitleArea Slot'},
+      description:
+        'Leading visualLeading visuals are optional and appear at the start of the title. They can be octicons, avatars, and other custom visuals that fit a small area.'
+    },
+    'LeadingVisual.hidden': {
+      type: 'boolean',
+      table: {
+        category: 'TitleArea Slot'
+      }
+    },
+    'TrailingVisual.hidden': {
+      type: 'boolean',
+      table: {
+        category: 'TitleArea Slot'
+      },
+      description:
+        'Trailing visualTrailing visual and trailing text can display auxiliary information. They are placed at the right of the item, and can denote status, privacy details, etc.'
+    },
+    'TrailingAction.hidden': {
+      type: 'boolean',
+      table: {
+        category: 'TitleArea Slot'
+      }
+    },
+    'Actions.hidden': {
+      type: 'boolean',
+      table: {
+        category: 'TitleArea Slot'
+      },
+      description: 'Description region/slot'
+    },
+    Description: {
+      table: {
+        category: 'Other Slots'
+      },
+      description: 'Description Slots'
+    },
+    'Description.hidden': {
+      type: 'boolean',
+      table: {
+        category: 'Other Slots'
+      },
+      description: 'Description region/slot'
+    },
+    Navigation: {
+      table: {
+        category: 'Other Slots'
+      },
+      description: 'Navigation Slots'
+    },
+    'Navigation.hidden': {
+      type: 'boolean',
+      table: {
+        category: 'Other Slots'
+      },
+      description: 'Description region/slot'
+    }
+  }
 }
 
+// TODO: THink about it after lunch.
+// context bar action visiblity doesn't work because the context bar has upper layer visibility.
+// You might want to set conditional visibility on the context bar itself.
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const Template: Story = args => (
   <PageHeader sx={{padding: 2}}>
-    <PageHeader.ContextArea>
-      <PageHeader.ParentLink href="http://github.com">Code</PageHeader.ParentLink>
-      <PageHeader.ContextAreaActions>
+    <PageHeader.ContextArea
+      hidden={{
+        narrow: !args.isContextAreaVisible,
+        regular: !args.isContextAreaVisible,
+        wide: !args.isContextAreaVisible
+      }}
+    >
+      <PageHeader.ParentLink
+        href="http://github.com"
+        hidden={{
+          narrow: args['ParentLink.hidden'],
+          regular: args['ParentLink.hidden'],
+          wide: args['ParentLink.hidden']
+        }}
+      >
+        {args.ParentLink}
+      </PageHeader.ParentLink>
+
+      <PageHeader.ContextBar hidden={args['ContextBar.hidden']}>
+        <Breadcrumbs>
+          <Breadcrumbs.Item href="#">...</Breadcrumbs.Item>
+          <Breadcrumbs.Item href="#">primer</Breadcrumbs.Item>
+          <Breadcrumbs.Item href="#">react</Breadcrumbs.Item>
+          <Breadcrumbs.Item href="#">src</Breadcrumbs.Item>
+          <Breadcrumbs.Item href="#">PageHeader</Breadcrumbs.Item>
+          <Breadcrumbs.Item href="#">PageHeader.tsx</Breadcrumbs.Item>
+        </Breadcrumbs>
+      </PageHeader.ContextBar>
+
+      <PageHeader.ContextAreaActions
+        hidden={{
+          narrow: args['ContextAreaAction.hidden'],
+          regular: args['ContextAreaAction.hidden'],
+          wide: args['ContextAreaAction.hidden']
+        }}
+      >
         <Button size="small" leadingIcon={GitBranchIcon}>
           Main
         </Button>
@@ -29,18 +230,51 @@ const Template: Story = args => (
       </PageHeader.ContextAreaActions>
     </PageHeader.ContextArea>
     <PageHeader.TitleArea sx={{paddingTop: 3}}>
-      <PageHeader.BackButton />
-      <PageHeader.LeadingVisual>
-        <GitBranchIcon />
+      <PageHeader.BackButton
+        hidden={{
+          narrow: args['BackButton.hidden'],
+          regular: args['BackButton.hidden'],
+          wide: args['BackButton.hidden']
+        }}
+      />
+      <PageHeader.LeadingVisual
+        hidden={{
+          narrow: args['LeadingVisual.hidden'],
+          regular: args['LeadingVisual.hidden'],
+          wide: args['LeadingVisual.hidden']
+        }}
+      >
+        {<args.LeadingVisual />}
       </PageHeader.LeadingVisual>
-      <PageHeader.Title as="h2">Branches</PageHeader.Title>
-      <PageHeader.TrailingVisual>
+      <PageHeader.Title
+        as={args['Title.as']}
+        variant={{
+          narrow: args['Title.variant'],
+          regular: args['Title.variant'],
+          wide: args['Title.variant']
+        }}
+      >
+        {args.Title}
+      </PageHeader.Title>
+      <PageHeader.TrailingVisual
+        hidden={{
+          narrow: args['TrailingVisual.hidden'],
+          regular: args['TrailingVisual.hidden'],
+          wide: args['TrailingVisual.hidden']
+        }}
+      >
         <Label>Beta</Label>
       </PageHeader.TrailingVisual>
-      <PageHeader.TrailingAction>
-        <IconButton icon={PencilIcon} />
+      <PageHeader.TrailingAction
+        hidden={{
+          narrow: args['TrailingAction.hidden'],
+          regular: args['TrailingAction.hidden'],
+          wide: args['TrailingAction.hidden']
+        }}
+      >
+        <IconButton icon={PencilIcon} variant="invisible" />
       </PageHeader.TrailingAction>
-      <PageHeader.Actions>
+      <PageHeader.Actions hidden={args['Actions.hidden']}>
         <Hidden on={['narrow']}>
           <Button variant="primary">New Branch</Button>
         </Hidden>
@@ -51,6 +285,41 @@ const Template: Story = args => (
         <IconButton aria-label="More" icon={KebabHorizontalIcon} />
       </PageHeader.Actions>
     </PageHeader.TitleArea>
+    <PageHeader.Description sx={{padding: 2}} hidden={args['Description.hidden']}>
+      <StateLabel status="pullOpened">Open</StateLabel>
+      <Hidden on={['narrow']}>
+        <Text sx={{fontSize: 1, color: 'fg.muted'}}>
+          <Link href="#" muted sx={{fontWeight: 'bold'}}>
+            broccolinisoup
+          </Link>{' '}
+          wants to merge 3 commits into <BranchName href="#">main</BranchName> from{' '}
+          <BranchName href="#">broccolinisoup/switch-to-new-underlineNav</BranchName>
+        </Text>
+      </Hidden>
+      <Hidden on={['regular', 'wide']}>
+        <Text sx={{fontSize: 1, color: 'fg.muted'}}>
+          <BranchName href="#">main</BranchName>
+          <ArrowRightIcon />
+          <BranchName href="#">page-header-initial</BranchName>
+        </Text>
+      </Hidden>
+    </PageHeader.Description>
+    <PageHeader.Navigation sx={{paddingTop: 2}} hidden={args['Navigation.hidden']}>
+      <UnderlineNav aria-label="Pull Request">
+        <UnderlineNav.Item icon={CommentDiscussionIcon} counter="12" selected>
+          Conversation
+        </UnderlineNav.Item>
+        <UnderlineNav.Item counter={3} icon={CommitIcon}>
+          Commits
+        </UnderlineNav.Item>
+        <UnderlineNav.Item counter={7} icon={ChecklistIcon}>
+          Checks
+        </UnderlineNav.Item>
+        <UnderlineNav.Item counter={4} icon={FileDiffIcon}>
+          Files Changes
+        </UnderlineNav.Item>
+      </UnderlineNav>
+    </PageHeader.Navigation>
   </PageHeader>
 )
 
diff --git a/src/PageHeader/PageHeader.tsx b/src/PageHeader/PageHeader.tsx
index 1496465190c..d67cbd440a3 100644
--- a/src/PageHeader/PageHeader.tsx
+++ b/src/PageHeader/PageHeader.tsx
@@ -20,26 +20,32 @@ Reference figma - https://www.figma.com/file/Ee0OrXuOLXMDqUW83EnDHP/PageHeader-(
 
 const REGION_ORDER = {
   ContextArea: 0,
-  titleArea: 1,
-  description: 2,
+  TitleArea: 1,
+  Description: 2,
   Navigation: 3
 }
-// Root
-// -----------------------------------------------------------------------------
-export type PageHeaderProps = {
+
+// Types that are shared between sub components
+export type sharedPropTypes = {
   hidden?: boolean | ResponsiveValue<boolean>
 } & SxProp
 
+// Default state for the `hidden` prop when a sub component is only visible on narrow viewport
+const onlyVisibleOnNarrowView = {
+  narrow: false,
+  regular: true,
+  wide: true
+}
+
+// Root
+// -----------------------------------------------------------------------------
+export type PageHeaderProps = sharedPropTypes
+
 const Root: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({children, sx = {}}) => {
   const rootStyles = {
-    marginX: 'auto',
     display: 'flex',
-    flexDirection: 'column',
-    flexWrap: 'wrap',
-    flexBasis: 0,
-    flexGrow: 1,
-    flexShrink: 1,
-    minWidth: 1
+    flexDirection: 'column'
+    // flexWrap: 'wrap'
   }
   return <Box sx={merge<BetterSystemStyleObject>(rootStyles, sx)}>{children}</Box>
 }
@@ -48,17 +54,10 @@ const Root: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({children, sx
 // to manage their custom visibility but consumers should be careful to hide this on narrow viewports.
 // PageHeader.ContexArea Sub Components: PageHeader.ParentLink, PageHeader.ContextBar, PageHeader.ContextNavActions
 // ---------------------------------------------------------------------
-export type ContextAreaProps = {
-  hidden?: boolean | ResponsiveValue<boolean>
-} & SxProp
 
-const ContextArea: React.FC<React.PropsWithChildren<ContextAreaProps>> = ({
+const ContextArea: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({
   children,
-  hidden = {
-    narrow: false,
-    regular: true,
-    wide: true
-  },
+  hidden = onlyVisibleOnNarrowView,
   sx = {}
 }) => {
   const isHidden = useResponsiveValue(hidden, false)
@@ -78,26 +77,21 @@ const ContextArea: React.FC<React.PropsWithChildren<ContextAreaProps>> = ({
 
 export type ParentLinkProps = {
   href?: string
-  hidden?: boolean | ResponsiveValue<boolean>
-} & SxProp
+} & PageHeaderProps
 
 const ParentLink: React.FC<React.PropsWithChildren<ParentLinkProps>> = ({
   children,
   sx = {},
   href,
-  hidden = {
-    narrow: false,
-    regular: true,
-    wide: true
-  }
+  hidden = onlyVisibleOnNarrowView
 }) => {
   const isHidden = useResponsiveValue(hidden, false)
+  // console.log('is hidden', isHidden)
   return (
     <>
       <Link
-        hidden={isHidden}
         muted
-        sx={merge<BetterSystemStyleObject>({display: 'flex', alignItems: 'center'}, sx)}
+        sx={merge<BetterSystemStyleObject>({display: isHidden ? ' none' : 'flex', alignItems: 'center'}, sx)}
         href={href}
       >
         <ArrowLeftIcon />
@@ -111,18 +105,10 @@ const ParentLink: React.FC<React.PropsWithChildren<ParentLinkProps>> = ({
 // Generic slot for any component above the title region. Use it for custom breadcrumbs and other navigation elements instead of ParentLink.
 // ---------------------------------------------------------------------
 
-export type ContextBarProps = {
-  hidden?: boolean | ResponsiveValue<boolean>
-} & SxProp
-
 const ContextBar: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({
   children,
   sx = {},
-  hidden = {
-    narrow: false,
-    regular: true,
-    wide: true
-  }
+  hidden = onlyVisibleOnNarrowView
 }) => {
   const isHidden = useResponsiveValue(hidden, false)
   return (
@@ -134,25 +120,19 @@ const ContextBar: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({
 
 // ContextAreaActions
 // ---------------------------------------------------------------------
-export type ContextAreaActionsProps = {
-  hidden?: boolean | ResponsiveValue<boolean>
-} & SxProp
-const ContextAreaActions: React.FC<React.PropsWithChildren<ContextAreaActionsProps>> = ({
+const ContextAreaActions: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({
   children,
   sx = {},
-  hidden = {
-    narrow: false,
-    regular: true,
-    wide: true
-  }
+  hidden = onlyVisibleOnNarrowView
 }) => {
   const isHidden = useResponsiveValue(hidden, false)
+  console.log({hidden}, {isHidden})
   return (
     <Box
       hidden={isHidden}
       sx={merge<BetterSystemStyleObject>(
         {
-          display: 'flex',
+          display: isHidden ? 'none' : 'flex',
           flexDirection: 'row',
           alignItems: 'center',
           gap: '8px',
@@ -172,7 +152,6 @@ const ContextAreaActions: React.FC<React.PropsWithChildren<ContextAreaActionsPro
 // PageHeader.BackButton and PageHeader.TrailingAction are only visible on regular viewports therefore they come as hidden on narrow viewports and their visibility can be managed by their exposed `hidden` prop
 // ---------------------------------------------------------------------
 const TitleArea: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({children, sx = {}}) => {
-  console.log({children})
   return (
     <Box
       sx={merge<BetterSystemStyleObject>({display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '8px'}, sx)}
@@ -182,10 +161,7 @@ const TitleArea: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({children
   )
 }
 
-export type BackButtonProps = {
-  hidden?: boolean | ResponsiveValue<boolean>
-} & SxProp
-const BackButton: React.FC<React.PropsWithChildren<BackButtonProps>> = ({
+const BackButton: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({
   sx = {},
   hidden = {
     narrow: true,
@@ -210,15 +186,36 @@ const BackButton: React.FC<React.PropsWithChildren<BackButtonProps>> = ({
     />
   )
 }
-const LeadingVisual: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({children, sx = {}}) => {
-  return <Box sx={sx}>{children}</Box>
+const LeadingVisual: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({
+  children,
+  sx = {},
+  hidden = {
+    narrow: false,
+    regular: true,
+    wide: true
+  }
+}) => {
+  const isHidden = useResponsiveValue(hidden, false)
+  return (
+    <Box
+      sx={merge<BetterSystemStyleObject>(
+        {
+          display: isHidden ? 'none' : 'flex'
+        },
+        sx
+      )}
+    >
+      {children}
+    </Box>
+  )
 }
 
 export type TitleProps = {
   variant?: 'subtitle' | 'medium' | 'large' | ResponsiveValue<'subtitle' | 'medium' | 'large'>
   as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
-}
-const Title: React.FC<React.PropsWithChildren<PageHeaderProps & TitleProps>> = ({
+} & PageHeaderProps
+
+const Title: React.FC<React.PropsWithChildren<TitleProps>> = ({
   children,
   sx = {},
   variant = {
@@ -259,14 +256,30 @@ const Title: React.FC<React.PropsWithChildren<PageHeaderProps & TitleProps>> = (
     </Heading>
   )
 }
-const TrailingVisual: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({children, sx = {}}) => {
-  return <Box sx={sx}>{children}</Box>
+const TrailingVisual: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({
+  children,
+  sx = {},
+  hidden = {
+    narrow: false,
+    regular: true,
+    wide: true
+  }
+}) => {
+  const isHidden = useResponsiveValue(hidden, false)
+  return (
+    <Box
+      sx={merge<BetterSystemStyleObject>(
+        {
+          display: isHidden ? 'none' : 'flex'
+        },
+        sx
+      )}
+    >
+      {children}
+    </Box>
+  )
 }
 
-export type TrailingActionsProps = {
-  hidden?: boolean | ResponsiveValue<boolean>
-} & SxProp
-
 const TrailingAction: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({
   children,
   sx = {},
@@ -284,11 +297,12 @@ const TrailingAction: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({
   )
 }
 
-const Actions: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({children, sx = {}}) => {
+const Actions: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({children, sx = {}, hidden = false}) => {
+  const isHidden = useResponsiveValue(hidden, false)
   return (
     <Box
       sx={merge<BetterSystemStyleObject>(
-        {display: 'flex', flexDirection: 'row', gap: '8px', flexGrow: '1', justifyContent: 'right'},
+        {display: isHidden ? 'none' : 'flex', flexDirection: 'row', gap: '8px', flexGrow: '1', justifyContent: 'right'},
         sx
       )}
     >
@@ -296,12 +310,15 @@ const Actions: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({children,
     </Box>
   )
 }
-const Description: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({children, sx = {}}) => {
+
+// PageHeader.Description: The description area of the header. Visible on all viewports
+const Description: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({children, sx = {}, hidden = false}) => {
+  const isHidden = useResponsiveValue(hidden, false)
   return (
     <Box
       sx={merge<BetterSystemStyleObject>(
         {
-          display: 'flex',
+          display: isHidden ? 'none' : 'flex',
           flexDirection: 'row',
           alignItems: 'center',
           gap: '8px'
@@ -314,8 +331,21 @@ const Description: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({childr
   )
 }
 
-const Navigation: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({children, sx = {}}) => {
-  return <Box sx={sx}>{children}</Box>
+// PageHeader.Navigation: The local navigation area of the header. Visible on all viewports
+const Navigation: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({children, sx = {}, hidden = false}) => {
+  const isHidden = useResponsiveValue(hidden, false)
+  return (
+    <Box
+      sx={merge<BetterSystemStyleObject>(
+        {
+          display: isHidden ? 'none' : 'block'
+        },
+        sx
+      )}
+    >
+      {children}
+    </Box>
+  )
 }
 
 export const PageHeader = Object.assign(Root, {