Skip to content

Commit

Permalink
Merge 14a272c into 77f8d98
Browse files Browse the repository at this point in the history
  • Loading branch information
@broccolinisoup
broccolinisoup authored Oct 19, 2023
2 parents 77f8d98 + 14a272c commit ddbe329
Show file tree
Hide file tree
Showing 4 changed files with 250 additions and 218 deletions.
249 changes: 136 additions & 113 deletions src/PageHeader/PageHeader.examples.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,14 @@ import {
ArrowRightIcon,
TriangleDownIcon,
CheckIcon,
CopyIcon,
} from '@primer/octicons-react'

import {PageHeader} from './PageHeader'
import {Hidden} from '../Hidden'
import {UnderlineNav} from '../UnderlineNav2'
import {ActionMenu} from '../ActionMenu'
import {ActionList} from '../ActionList'
import VisuallyHidden from '../_VisuallyHidden'

const meta: Meta = {
title: 'Drafts/Components/PageHeader/Examples',
Expand All @@ -38,22 +38,36 @@ const setViewportParamToNarrow = {
export const Webhooks = () => (
<Box sx={{padding: 3}}>
<PageHeader>
<PageHeader.ContextArea>
<PageHeader.ParentLink href="http://github.com">Repository settings</PageHeader.ParentLink>
</PageHeader.ContextArea>
<PageHeader.TitleArea>
<PageHeader.LeadingVisual>
<GitBranchIcon />
</PageHeader.LeadingVisual>
<PageHeader.Title as="h2">Webhooks</PageHeader.Title>

<PageHeader.Actions>
<Hidden when={['narrow']}>
<Button variant="primary">New webhook</Button>
</Hidden>

<Hidden when={['regular', 'wide']}>
<Button variant="primary">New</Button>
</Hidden>
</PageHeader.Actions>
<PageHeader.TrailingVisual>
<GitBranchIcon />
</PageHeader.TrailingVisual>
</PageHeader.TitleArea>
<PageHeader.ContextArea>
<PageHeader.ParentLink href="http://github.com">Repository settings</PageHeader.ParentLink>
<PageHeader.ContextBar>context bar</PageHeader.ContextBar>
<PageHeader.ContextAreaActions>
<Button>Context action</Button>
</PageHeader.ContextAreaActions>
</PageHeader.ContextArea>
<PageHeader.LeadingAction>
<IconButton aria-label="More webhooks actions" icon={KebabHorizontalIcon} />
</PageHeader.LeadingAction>
<PageHeader.TrailingAction>
<IconButton aria-label="More webhooks actions" icon={KebabHorizontalIcon} />
</PageHeader.TrailingAction>
<PageHeader.Actions>
<Hidden when={['narrow']}>
<Button variant="primary">New webhook</Button>
</Hidden>
<Hidden when={['regular', 'wide']}>
<Button variant="primary">New</Button>
</Hidden>
</PageHeader.Actions>
</PageHeader>
</Box>
)
Expand All @@ -67,36 +81,37 @@ WebhooksOnNarrowViewport.parameters = setViewportParamToNarrow
export const PullRequestPage = () => (
<Box sx={{padding: 3}}>
<PageHeader>
<PageHeader.TitleArea>
<PageHeader.Title as="h1" sx={{fontSize: 5}}>
PageHeader: Address dom order issues (screen reader experience feedback from sign-off) longer longer longer
longer
</PageHeader.Title>
</PageHeader.TitleArea>
<PageHeader.ContextArea>
<PageHeader.ParentLink href="http://github.com">Pull requests</PageHeader.ParentLink>
</PageHeader.ContextArea>
<PageHeader.TitleArea>
<PageHeader.Title as="h1">
PageHeader component initial layout explorations extra long pull request title
</PageHeader.Title>
<PageHeader.Actions>
<Hidden when={['regular', 'wide']}>
<ActionMenu>
<ActionMenu.Anchor>
<IconButton aria-label="More pull request actions" icon={KebabHorizontalIcon} />
</ActionMenu.Anchor>
<ActionMenu.Overlay width="small">
<ActionList>
<ActionList.Item onSelect={() => alert('Edit button action')}>Edit</ActionList.Item>
<ActionList.Item onSelect={() => alert('Code button action')}>Code</ActionList.Item>
</ActionList>
</ActionMenu.Overlay>
</ActionMenu>
</Hidden>
<PageHeader.Actions>
<Hidden when={['regular', 'wide']}>
<ActionMenu>
<ActionMenu.Anchor>
<IconButton aria-label="More pull request actions" icon={KebabHorizontalIcon} />
</ActionMenu.Anchor>
<ActionMenu.Overlay width="small">
<ActionList>
<ActionList.Item onSelect={() => alert('Edit button action')}>Edit</ActionList.Item>
<ActionList.Item onSelect={() => alert('Code button action')}>Code</ActionList.Item>
</ActionList>
</ActionMenu.Overlay>
</ActionMenu>
</Hidden>

<Hidden when={['narrow']}>
<Box sx={{display: 'flex'}}>
<Button>Edit</Button>
<Button leadingIcon={CodeIcon}>Code</Button>
</Box>
</Hidden>
</PageHeader.Actions>
</PageHeader.TitleArea>
<Hidden when={['narrow']}>
<Box sx={{display: 'flex'}}>
<Button>Edit</Button>
<Button leadingIcon={CodeIcon}>Code</Button>
</Box>
</Hidden>
</PageHeader.Actions>
<PageHeader.Description>
<StateLabel status="pullOpened">Open</StateLabel>
<Hidden when={['narrow']}>
Expand Down Expand Up @@ -145,8 +160,15 @@ PullRequestPageOnNarrowViewport.parameters = setViewportParamToNarrow
export const FilesPage = () => (
<Box sx={{padding: 3}}>
<PageHeader>
<PageHeader.TitleArea>
<Text sx={{color: 'rgb(101, 109, 118)'}}>/</Text>
<PageHeader.Title as="h1" sx={{fontSize: 1}}>
PageHeader.tsx
</PageHeader.Title>
</PageHeader.TitleArea>

<PageHeader.ContextArea>
<PageHeader.ParentLink>Files</PageHeader.ParentLink>
<PageHeader.ParentLink href="/">Files</PageHeader.ParentLink>
<PageHeader.ContextAreaActions>
<ActionMenu>
<ActionMenu.Anchor>
Expand Down Expand Up @@ -209,60 +231,60 @@ export const FilesPage = () => (
</ActionMenu>
</PageHeader.ContextAreaActions>
</PageHeader.ContextArea>
<PageHeader.TitleArea>
<PageHeader.LeadingAction hidden={false}>
<Breadcrumbs>
<Breadcrumbs.Item href="https://github.com/primer/react/tree/main">react</Breadcrumbs.Item>
<Breadcrumbs.Item href="https://github.com/primer/react/tree/main/src">src</Breadcrumbs.Item>
<Breadcrumbs.Item href="https://github.com/primer/react/tree/main/src/PageHeader">
PageHeader
</Breadcrumbs.Item>
<Breadcrumbs.Item href="https://github.com/primer/react/blob/main/src/PageHeader/PageHeader.tsx">
PageHeader.tsx
</Breadcrumbs.Item>
</Breadcrumbs>
<VisuallyHidden as="h2">PageHeader.tsx</VisuallyHidden>
<PageHeader.Actions hidden={{narrow: true}}>
<ActionMenu>
<ActionMenu.Anchor>
<IconButton size="small" aria-label="More file actions" icon={KebabHorizontalIcon} />
</ActionMenu.Anchor>
<ActionMenu.Overlay width="medium">
<ActionList>
<ActionList.Group title="Raw file content">
<ActionList.Item onSelect={() => alert('Download')}>Download</ActionList.Item>
</ActionList.Group>
<ActionList.Divider />
<ActionList.Item onSelect={() => alert('Jump to line')}>
Jump to line
<ActionList.TrailingVisual>L</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Divider />
<ActionList.Item onSelect={() => alert('Copy path')}>
Copy path
<ActionList.TrailingVisual>⌘⇧.</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Item onSelect={() => alert('Copy permalink')}>
Copy permalink
<ActionList.TrailingVisual>⌘⇧,</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Divider />
<ActionList.Group title="View Options">
<ActionList.Item onSelect={() => alert('Show code folding buttons')}>
Show code folding buttons
</ActionList.Item>
<ActionList.Item onSelect={() => alert('Wrap lines')}>Wrap lines</ActionList.Item>
<ActionList.Item onSelect={() => alert('Center content')}>Center content</ActionList.Item>
</ActionList.Group>
<ActionList.Divider />
<ActionList.Item variant="danger" onSelect={() => alert('Delete file clicked')}>
Delete file
<ActionList.TrailingVisual>⌘D</ActionList.TrailingVisual>
</PageHeader.LeadingAction>
<PageHeader.TrailingAction hidden={false}>
<IconButton size="small" variant="invisible" aria-label="Copy to clipboard" icon={CopyIcon} />
</PageHeader.TrailingAction>

<PageHeader.Actions hidden={false}>
<ActionMenu>
<ActionMenu.Anchor>
<IconButton size="small" aria-label="More file actions" icon={KebabHorizontalIcon} />
</ActionMenu.Anchor>
<ActionMenu.Overlay width="medium">
<ActionList>
<ActionList.Group title="Raw file content">
<ActionList.Item onSelect={() => alert('Download')}>Download</ActionList.Item>
</ActionList.Group>
<ActionList.Divider />
<ActionList.Item onSelect={() => alert('Jump to line')}>
Jump to line
<ActionList.TrailingVisual>L</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Divider />
<ActionList.Item onSelect={() => alert('Copy path')}>
Copy path
<ActionList.TrailingVisual>⌘⇧.</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Item onSelect={() => alert('Copy permalink')}>
Copy permalink
<ActionList.TrailingVisual>⌘⇧,</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Divider />
<ActionList.Group title="View Options">
<ActionList.Item onSelect={() => alert('Show code folding buttons')}>
Show code folding buttons
</ActionList.Item>
</ActionList>
</ActionMenu.Overlay>
</ActionMenu>
</PageHeader.Actions>
</PageHeader.TitleArea>
<ActionList.Item onSelect={() => alert('Wrap lines')}>Wrap lines</ActionList.Item>
<ActionList.Item onSelect={() => alert('Center content')}>Center content</ActionList.Item>
</ActionList.Group>
<ActionList.Divider />
<ActionList.Item variant="danger" onSelect={() => alert('Delete file clicked')}>
Delete file
<ActionList.TrailingVisual>⌘D</ActionList.TrailingVisual>
</ActionList.Item>
</ActionList>
</ActionMenu.Overlay>
</ActionMenu>
</PageHeader.Actions>
</PageHeader>
</Box>
)
Expand All @@ -276,38 +298,38 @@ export const WithPageLayout = () => {
<PageLayout>
<PageLayout.Header>
<PageHeader>
<PageHeader.ContextArea>
<PageHeader.ParentLink href="http://github.com">Pull requests</PageHeader.ParentLink>
</PageHeader.ContextArea>
<PageHeader.TitleArea>
<PageHeader.Title as="h1">
PageHeader component initial layout explorations extra long pull request title &nbsp;
<Text sx={{color: 'fg.muted', fontWeight: 'light'}}>#1831</Text>
</PageHeader.Title>
<PageHeader.Actions>
<Hidden when={['regular', 'wide']}>
{/* Pop up actions */}
<ActionMenu>
<ActionMenu.Anchor>
<IconButton aria-label="More pull request actions" icon={KebabHorizontalIcon} />
</ActionMenu.Anchor>
<ActionMenu.Overlay width="small">
<ActionList>
<ActionList.Item onSelect={() => alert('Edit button action')}>Edit</ActionList.Item>
<ActionList.Item onSelect={() => alert('Code button action')}>Code</ActionList.Item>
</ActionList>
</ActionMenu.Overlay>
</ActionMenu>
</Hidden>

<Hidden when={['narrow']}>
<Box sx={{display: 'flex'}}>
<Button>Edit</Button>
<Button leadingIcon={CodeIcon}>Code</Button>
</Box>
</Hidden>
</PageHeader.Actions>
</PageHeader.TitleArea>
<PageHeader.ContextArea>
<PageHeader.ParentLink href="http://github.com">Pull requests</PageHeader.ParentLink>
</PageHeader.ContextArea>
<PageHeader.Actions>
<Hidden when={['regular', 'wide']}>
{/* Pop up actions */}
<ActionMenu>
<ActionMenu.Anchor>
<IconButton aria-label="More pull request actions" icon={KebabHorizontalIcon} />
</ActionMenu.Anchor>
<ActionMenu.Overlay width="small">
<ActionList>
<ActionList.Item onSelect={() => alert('Edit button action')}>Edit</ActionList.Item>
<ActionList.Item onSelect={() => alert('Code button action')}>Code</ActionList.Item>
</ActionList>
</ActionMenu.Overlay>
</ActionMenu>
</Hidden>

<Hidden when={['narrow']}>
<Box sx={{display: 'flex'}}>
<Button>Edit</Button>
<Button leadingIcon={CodeIcon}>Code</Button>
</Box>
</Hidden>
</PageHeader.Actions>
<PageHeader.Description>
<StateLabel status="pullOpened">Open</StateLabel>
<Hidden when={['narrow']}>
Expand Down Expand Up @@ -354,6 +376,7 @@ export const WithPageLayout = () => {
<Box sx={{display: 'flex', flexDirection: 'column', gap: 3}}>
<Box>
<Text sx={{fontSize: 0, fontWeight: 'bold', display: 'block', color: 'fg.muted'}}>Assignees</Text>

<Text sx={{fontSize: 0, color: 'fg.muted', lineHeight: 'condensed', display: 'flex', alignItems: 'center'}}>
No one —
<Button
Expand Down
Loading

0 comments on commit ddbe329

Please sign in to comment.