Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(PageHeader): story previews show correctly again in docs #414

Merged
merged 2 commits into from
Mar 8, 2021
Merged

fix(PageHeader): story previews show correctly again in docs #414

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eff2f1e
fix(PageHeader): story previews show correctly again in docs
matthewgallo Mar 5, 2021
72a5db3
Merge branch 'master' into 413-page-header-storybook-docs-fix
kodiakhq[bot] Mar 8, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions packages/experimental/src/components/PageHeader/PageHeader.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ be used if only the breadcrumb, title, actions, and/or simple status are
required.

<Preview>
<Story id="experimental-pageheader--without-background-breadcrumbitems-title-pageactions" />
<Story id="cloud-cognitive-canary-pageheader--without-background-breadcrumbitems-title-pageactions" />
</Preview>

### Page header with background
Expand All @@ -51,7 +51,7 @@ items. The page header with a background should be used if tabs, subtitles,
and/or more global items are required.

<Preview>
<Story id="experimental-pageheader--with-background-breadcrumbitems-title-pageactions-tabs" />
<Story id="cloud-cognitive-canary-pageheader--with-background-breadcrumbitems-title-pageactions-tabs" />
</Preview>

### Page header with background (breadcrumb + actions toolbar included)
Expand All @@ -60,7 +60,7 @@ If the page header contains action icons, the default state includes a toolbar
designated for the breadcrumbs and action icons.

<Preview>
<Story id="experimental-pageheader--with-background-breadcrumbitems-actionbar-title-pageactions-tabs-tags" />
<Story id="cloud-cognitive-canary-pageheader--with-background-breadcrumbitems-actionbar-title-pageactions-tabs-tags" />
</Preview>

### Page header with background (breadcrumb + actions toolbar ONLY)
Expand All @@ -69,7 +69,7 @@ On occasion, a condensed page header is required. This version accommodates this
by just displaying the breadcrumb bar only.

<Preview>
<Story id="experimental-pageheader--with-background-breadcrumbitems-actionbar" />
<Story id="cloud-cognitive-canary-pageheader--with-background-breadcrumbitems-actionbar" />
</Preview>

## Examples
Expand All @@ -87,7 +87,7 @@ accommodate simple requirements, including page title only, or page title +
buttons.

<Preview>
<Story id="experimental-pageheader--without-background-title-only" />
<Story id="cloud-cognitive-canary-pageheader--without-background-title" />
</Preview>

#### With breadcrumbs
Expand All @@ -96,7 +96,7 @@ This variant of the page header accounts for page title, buttons, breadcrumbs,
and occasionally icons and metadata.

<Preview>
<Story id="experimental-pageheader--without-background-breadcrumbitems-title" />
<Story id="cloud-cognitive-canary-pageheader--without-background-breadcrumbitems-title" />
</Preview>

#### With status indicator
Expand All @@ -105,7 +105,7 @@ Structured similarly to the examples above, this variant is for the inclusion of
a page level status indicator.

<Preview>
<Story id="experimental-pageheader--without-background-breadcrumbitems-title-status" />
<Story id="cloud-cognitive-canary-pageheader--without-background-breadcrumbitems-title-status" />
</Preview>

### Examples with background
Expand All @@ -116,7 +116,7 @@ Tabs are positioned underneath the page title and sit flush at the base of the
page header background.

<Preview>
<Story id="experimental-pageheader--with-background-breadcrumbitems-title-tabs" />
<Story id="cloud-cognitive-canary-pageheader--with-background-breadcrumbitems-title-tabs" />
</Preview>

#### With tags
Expand All @@ -125,7 +125,7 @@ Tags are positioned underneath the page title and sit above the base of the page
header background.

<Preview>
<Story id="experimental-pageheader--with-background-breadcrumbitems-title-pageactions-tags" />
<Story id="cloud-cognitive-canary-pageheader--with-background-breadcrumbitems-title-pageactions-tags" />
</Preview>

#### With tabs & tags
Expand All @@ -134,7 +134,7 @@ If both tabs & tags need to be present, tabs should be remain left aligned with
the page and tags reposition over to the right side of the screen.

<Preview>
<Story id="experimental-pageheader--with-background-breadcrumbitems-title-tabs-tags" />
<Story id="cloud-cognitive-canary-pageheader--with-background-breadcrumbitems-title-tabs-tags" />
</Preview>

#### With subtitle
Expand All @@ -144,7 +144,7 @@ with subtitles use the background to create hierarchy and to separate it from
type placed within the page.

<Preview>
<Story id="experimental-pageheader--with-background-breadcrumbitems-title-pageactions-subtitle" />
<Story id="cloud-cognitive-canary-pageheader--with-background-breadcrumbitems-title-pageactions-subtitle" />
</Preview>

#### With summary details
Expand All @@ -153,7 +153,7 @@ Page content with global page hierarchy can be placed above tabs within the page
header. **This is just an example of an allowable zone for content.**

<Preview>
<Story id="experimental-pageheader--with-background-breadcrumbitems-title-pageactions-summarydetails-tabs" />
<Story id="cloud-cognitive-canary-pageheader--with-background-breadcrumbitems-title-pageactions-summarydetails-tabs" />
</Preview>

## Component API
Expand Down