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 => (
-
- Code
-
+
+
+ {args.ParentLink}
+
+
+
+
+ ...
+ primer
+ react
+ src
+ PageHeader
+ PageHeader.tsx
+
+
+
+
@@ -29,18 +230,51 @@ const Template: Story = args => (
-
-
-
+
+
+ {}
- Branches
-
+
+ {args.Title}
+
+
-
-
+
+
-
+
@@ -51,6 +285,41 @@ const Template: Story = args => (
+
+ Open
+
+
+
+ broccolinisoup
+ {' '}
+ wants to merge 3 commits into main from{' '}
+ broccolinisoup/switch-to-new-underlineNav
+
+
+
+
+ main
+
+ page-header-initial
+
+
+
+
+
+
+ Conversation
+
+
+ Commits
+
+
+ Checks
+
+
+ Files Changes
+
+
+
)
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
} & 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> = ({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 (rootStyles, sx)}>{children}
}
@@ -48,17 +54,10 @@ const Root: React.FC> = ({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
-} & SxProp
-const ContextArea: React.FC> = ({
+const ContextArea: React.FC> = ({
children,
- hidden = {
- narrow: false,
- regular: true,
- wide: true
- },
+ hidden = onlyVisibleOnNarrowView,
sx = {}
}) => {
const isHidden = useResponsiveValue(hidden, false)
@@ -78,26 +77,21 @@ const ContextArea: React.FC> = ({
export type ParentLinkProps = {
href?: string
- hidden?: boolean | ResponsiveValue
-} & SxProp
+} & PageHeaderProps
const ParentLink: React.FC> = ({
children,
sx = {},
href,
- hidden = {
- narrow: false,
- regular: true,
- wide: true
- }
+ hidden = onlyVisibleOnNarrowView
}) => {
const isHidden = useResponsiveValue(hidden, false)
+ // console.log('is hidden', isHidden)
return (
<>
({display: 'flex', alignItems: 'center'}, sx)}
+ sx={merge({display: isHidden ? ' none' : 'flex', alignItems: 'center'}, sx)}
href={href}
>
@@ -111,18 +105,10 @@ const ParentLink: React.FC> = ({
// 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
-} & SxProp
-
const ContextBar: React.FC> = ({
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> = ({
// ContextAreaActions
// ---------------------------------------------------------------------
-export type ContextAreaActionsProps = {
- hidden?: boolean | ResponsiveValue
-} & SxProp
-const ContextAreaActions: React.FC> = ({
+const ContextAreaActions: React.FC> = ({
children,
sx = {},
- hidden = {
- narrow: false,
- regular: true,
- wide: true
- }
+ hidden = onlyVisibleOnNarrowView
}) => {
const isHidden = useResponsiveValue(hidden, false)
+ console.log({hidden}, {isHidden})
return (
(
{
- display: 'flex',
+ display: isHidden ? 'none' : 'flex',
flexDirection: 'row',
alignItems: 'center',
gap: '8px',
@@ -172,7 +152,6 @@ const ContextAreaActions: React.FC> = ({children, sx = {}}) => {
- console.log({children})
return (
({display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '8px'}, sx)}
@@ -182,10 +161,7 @@ const TitleArea: React.FC> = ({children
)
}
-export type BackButtonProps = {
- hidden?: boolean | ResponsiveValue
-} & SxProp
-const BackButton: React.FC> = ({
+const BackButton: React.FC> = ({
sx = {},
hidden = {
narrow: true,
@@ -210,15 +186,36 @@ const BackButton: React.FC> = ({
/>
)
}
-const LeadingVisual: React.FC> = ({children, sx = {}}) => {
- return {children}
+const LeadingVisual: React.FC> = ({
+ children,
+ sx = {},
+ hidden = {
+ narrow: false,
+ regular: true,
+ wide: true
+ }
+}) => {
+ const isHidden = useResponsiveValue(hidden, false)
+ return (
+ (
+ {
+ display: isHidden ? 'none' : 'flex'
+ },
+ sx
+ )}
+ >
+ {children}
+
+ )
}
export type TitleProps = {
variant?: 'subtitle' | 'medium' | 'large' | ResponsiveValue<'subtitle' | 'medium' | 'large'>
as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
-}
-const Title: React.FC> = ({
+} & PageHeaderProps
+
+const Title: React.FC> = ({
children,
sx = {},
variant = {
@@ -259,14 +256,30 @@ const Title: React.FC> = (
)
}
-const TrailingVisual: React.FC> = ({children, sx = {}}) => {
- return {children}
+const TrailingVisual: React.FC> = ({
+ children,
+ sx = {},
+ hidden = {
+ narrow: false,
+ regular: true,
+ wide: true
+ }
+}) => {
+ const isHidden = useResponsiveValue(hidden, false)
+ return (
+ (
+ {
+ display: isHidden ? 'none' : 'flex'
+ },
+ sx
+ )}
+ >
+ {children}
+
+ )
}
-export type TrailingActionsProps = {
- hidden?: boolean | ResponsiveValue
-} & SxProp
-
const TrailingAction: React.FC> = ({
children,
sx = {},
@@ -284,11 +297,12 @@ const TrailingAction: React.FC> = ({
)
}
-const Actions: React.FC> = ({children, sx = {}}) => {
+const Actions: React.FC> = ({children, sx = {}, hidden = false}) => {
+ const isHidden = useResponsiveValue(hidden, false)
return (
(
- {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> = ({children,
)
}
-const Description: React.FC> = ({children, sx = {}}) => {
+
+// PageHeader.Description: The description area of the header. Visible on all viewports
+const Description: React.FC> = ({children, sx = {}, hidden = false}) => {
+ const isHidden = useResponsiveValue(hidden, false)
return (
(
{
- display: 'flex',
+ display: isHidden ? 'none' : 'flex',
flexDirection: 'row',
alignItems: 'center',
gap: '8px'
@@ -314,8 +331,21 @@ const Description: React.FC> = ({childr
)
}
-const Navigation: React.FC> = ({children, sx = {}}) => {
- return {children}
+// PageHeader.Navigation: The local navigation area of the header. Visible on all viewports
+const Navigation: React.FC> = ({children, sx = {}, hidden = false}) => {
+ const isHidden = useResponsiveValue(hidden, false)
+ return (
+ (
+ {
+ display: isHidden ? 'none' : 'block'
+ },
+ sx
+ )}
+ >
+ {children}
+
+ )
}
export const PageHeader = Object.assign(Root, {