-
Notifications
You must be signed in to change notification settings - Fork 22
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(nav): Rename ContentHeader to PageHeader
- Loading branch information
Showing
23 changed files
with
137 additions
and
137 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import React from 'react'; | ||
import PageHeader from '@patternfly/react-component-groups/dist/dynamic/PageHeader'; | ||
|
||
describe('PageHeader', () => { | ||
it('should render PageHeader title and subtitle', () => { | ||
cy.mount(<PageHeader title='My title' subtitle='This is a subtitle for your page header' />); | ||
cy.get('title').should('exist') | ||
cy.get('[data-ouia-component-id="PageHeader-title"]').should('have.text', 'My title') | ||
cy.get('[data-ouia-component-id="PageHeader-subtitle"]').should('have.text', 'This is a subtitle for your page header') | ||
}) | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
56 changes: 0 additions & 56 deletions
56
...ocs/content/extensions/component-groups/examples/ContentHeader/ContentHeader.md
This file was deleted.
Oops, something went wrong.
9 changes: 0 additions & 9 deletions
9
...-docs/content/extensions/component-groups/examples/ContentHeader/ContentHeaderExample.tsx
This file was deleted.
Oops, something went wrong.
12 changes: 0 additions & 12 deletions
12
...s/content/extensions/component-groups/examples/ContentHeader/ContentHeaderIconExample.tsx
This file was deleted.
Oops, something went wrong.
56 changes: 56 additions & 0 deletions
56
...nfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeader.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,56 @@ | ||
--- | ||
section: Component groups | ||
subsection: Content containers | ||
id: Page header | ||
source: react | ||
propComponents: ['PageHeader'] | ||
sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeader.md | ||
--- | ||
|
||
import PageHeader from "@patternfly/react-component-groups/dist/dynamic/PageHeader" | ||
import { EllipsisVIcon } from '@patternfly/react-icons'; | ||
import pageHeaderIcon from '../../assets/icons/page-header-icon.svg' | ||
|
||
The **page header** component displays a page header section with a title, subtitle and other optional content. | ||
|
||
## Examples | ||
|
||
### Basic page header | ||
|
||
In order to display a basic page header, pass the `title` and `subtitle`. | ||
|
||
```js file="./PageHeaderExample.tsx" | ||
|
||
``` | ||
|
||
### Page header with breadcrumbs | ||
|
||
You can display breadcrumbs above the title using the `breadcrumbs` property. | ||
|
||
```js file="./PageHeaderBreadcrumbExample.tsx" | ||
|
||
``` | ||
|
||
### Page header with icon | ||
|
||
Use the `icon` property to display your custom page icon separated with a [divider](/components/divider). | ||
|
||
```js file="./PageHeaderIconExample.tsx" | ||
|
||
``` | ||
|
||
### Page header with label and link | ||
|
||
To add specific element captions for user clarity and convenience, you can use the `label` property together with [label](/components/label) or your custom component. The `linkProps` can be used to define a link displayed under the subtitle. | ||
|
||
```js file="./PageHeaderLabelLinkExample.tsx" | ||
|
||
``` | ||
|
||
### Page header with actions menu | ||
|
||
In case you want to display actions in your header, you can use the `actionsMenu` property. | ||
|
||
```js file="./PageHeaderActionsExample.tsx" | ||
|
||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
9 changes: 9 additions & 0 deletions
9
...ernfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeaderExample.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
import React from 'react'; | ||
import PageHeader from '@patternfly/react-component-groups/dist/dynamic/PageHeader'; | ||
|
||
export const BasicExample: React.FunctionComponent = () => ( | ||
<PageHeader | ||
title='My Title' | ||
subtitle='This is a subtitle for your page header' | ||
/> | ||
); |
12 changes: 12 additions & 0 deletions
12
...ly-docs/content/extensions/component-groups/examples/PageHeader/PageHeaderIconExample.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import React from 'react'; | ||
import PageHeader from '@patternfly/react-component-groups/dist/dynamic/PageHeader'; | ||
import pageHeaderIcon from '../../assets/icons/page-header-icon.svg'; | ||
|
||
|
||
export const IconExample: React.FunctionComponent = () => ( | ||
<PageHeader | ||
title='My Title' | ||
subtitle='This is a subtitle for your page header' | ||
icon={<img src={pageHeaderIcon} alt="page-header-icon" />} | ||
/> | ||
); |
6 changes: 3 additions & 3 deletions
6
...tHeader/ContentHeaderLabelLinkExample.tsx → ...PageHeader/PageHeaderLabelLinkExample.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
4 changes: 2 additions & 2 deletions
4
...nfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardExample.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
import React from 'react'; | ||
import { render } from '@testing-library/react'; | ||
import PageHeader from './PageHeader'; | ||
|
||
describe('PageHeader component', () => { | ||
test('should render', () => { | ||
expect(render(<PageHeader title='My title' subtitle='This is a subtitle for your page header' />)).toMatchSnapshot(); | ||
}); | ||
}); |
Oops, something went wrong.