From 0219c0576cfb4a2869e4492aa1459f8a807e7adc Mon Sep 17 00:00:00 2001 From: Filip Hlavac Date: Thu, 12 Sep 2024 16:53:56 +0200 Subject: [PATCH] fix(nav): Rename ContentHeader to PageHeader --- cypress/component/ContentHeader.cy.tsx | 11 ---- cypress/component/PageHeader.cy.tsx | 11 ++++ cypress/component/ServiceCard.cy.tsx | 4 +- ...t-header-icon.svg => page-header-icon.svg} | 0 .../examples/ContentHeader/ContentHeader.md | 56 ------------------- .../ContentHeader/ContentHeaderExample.tsx | 9 --- .../ContentHeaderIconExample.tsx | 12 ---- .../examples/PageHeader/PageHeader.md | 56 +++++++++++++++++++ .../PageHeaderActionsExample.tsx} | 6 +- .../PageHeaderBreadcrumbExample.tsx} | 8 +-- .../examples/PageHeader/PageHeaderExample.tsx | 9 +++ .../PageHeader/PageHeaderIconExample.tsx | 12 ++++ .../PageHeaderLabelLinkExample.tsx} | 6 +- .../examples/ServiceCard/ServiceCard.md | 2 +- .../ServiceCard/ServiceCardExample.tsx | 4 +- .../ServiceCard/ServiceCardGalleryExample.tsx | 6 +- .../ServiceCard/ServiceCardStackedExample.tsx | 4 +- .../src/ContentHeader/ContentHeader.test.tsx | 9 --- packages/module/src/ContentHeader/index.ts | 2 - .../module/src/PageHeader/PageHeader.test.tsx | 9 +++ .../PageHeader.tsx} | 18 +++--- .../__snapshots__/PageHeader.test.tsx.snap} | 14 ++--- packages/module/src/PageHeader/index.ts | 2 + packages/module/src/index.ts | 4 +- 24 files changed, 137 insertions(+), 137 deletions(-) delete mode 100644 cypress/component/ContentHeader.cy.tsx create mode 100644 cypress/component/PageHeader.cy.tsx rename packages/module/patternfly-docs/content/extensions/component-groups/assets/icons/{content-header-icon.svg => page-header-icon.svg} (100%) delete mode 100644 packages/module/patternfly-docs/content/extensions/component-groups/examples/ContentHeader/ContentHeader.md delete mode 100644 packages/module/patternfly-docs/content/extensions/component-groups/examples/ContentHeader/ContentHeaderExample.tsx delete mode 100644 packages/module/patternfly-docs/content/extensions/component-groups/examples/ContentHeader/ContentHeaderIconExample.tsx create mode 100644 packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeader.md rename packages/module/patternfly-docs/content/extensions/component-groups/examples/{ContentHeader/ContentHeaderActionsExample.tsx => PageHeader/PageHeaderActionsExample.tsx} (91%) rename packages/module/patternfly-docs/content/extensions/component-groups/examples/{ContentHeader/ContentHeaderBreadCrumbExample.tsx => PageHeader/PageHeaderBreadcrumbExample.tsx} (74%) create mode 100644 packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeaderExample.tsx create mode 100644 packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeaderIconExample.tsx rename packages/module/patternfly-docs/content/extensions/component-groups/examples/{ContentHeader/ContentHeaderLabelLinkExample.tsx => PageHeader/PageHeaderLabelLinkExample.tsx} (66%) delete mode 100644 packages/module/src/ContentHeader/ContentHeader.test.tsx delete mode 100644 packages/module/src/ContentHeader/index.ts create mode 100644 packages/module/src/PageHeader/PageHeader.test.tsx rename packages/module/src/{ContentHeader/ContentHeader.tsx => PageHeader/PageHeader.tsx} (83%) rename packages/module/src/{ContentHeader/__snapshots__/ContentHeader.test.tsx.snap => PageHeader/__snapshots__/PageHeader.test.tsx.snap} (90%) create mode 100644 packages/module/src/PageHeader/index.ts diff --git a/cypress/component/ContentHeader.cy.tsx b/cypress/component/ContentHeader.cy.tsx deleted file mode 100644 index b38d8bc0..00000000 --- a/cypress/component/ContentHeader.cy.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import ContentHeader from '../../packages/module/dist/dynamic/ContentHeader'; - -describe('ContentHeader', () => { - it('should render ContentHeader title and subtitle', () => { - cy.mount(); - cy.get('title').should('exist') - cy.get('[data-ouia-component-id="ContentHeader-title"]').should('have.text', 'My title') - cy.get('[data-ouia-component-id="ContentHeader-subtitle"]').should('have.text', 'This is a subtitle for your content header') - }) -}); \ No newline at end of file diff --git a/cypress/component/PageHeader.cy.tsx b/cypress/component/PageHeader.cy.tsx new file mode 100644 index 00000000..6a67526c --- /dev/null +++ b/cypress/component/PageHeader.cy.tsx @@ -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(); + 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') + }) +}); \ No newline at end of file diff --git a/cypress/component/ServiceCard.cy.tsx b/cypress/component/ServiceCard.cy.tsx index 300b4eea..27423108 100644 --- a/cypress/component/ServiceCard.cy.tsx +++ b/cypress/component/ServiceCard.cy.tsx @@ -9,7 +9,7 @@ describe('ServiceCard', () => { title='Example' subtitle='A basic example' description='This is a basic ServiceCard Example' - icon={content-header-icon} + icon={page-header-icon} helperText='Here is helper text' ouiaId='Example' />) @@ -21,7 +21,7 @@ describe('ServiceCard', () => { title='Example' subtitle='A basic example' description='This is a basic ServiceCard Example' - icon={content-header-icon} + icon={page-header-icon} helperText='Here is helper text' ouiaId='Example' footer={<> diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/assets/icons/content-header-icon.svg b/packages/module/patternfly-docs/content/extensions/component-groups/assets/icons/page-header-icon.svg similarity index 100% rename from packages/module/patternfly-docs/content/extensions/component-groups/assets/icons/content-header-icon.svg rename to packages/module/patternfly-docs/content/extensions/component-groups/assets/icons/page-header-icon.svg diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ContentHeader/ContentHeader.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ContentHeader/ContentHeader.md deleted file mode 100644 index 97e031fe..00000000 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ContentHeader/ContentHeader.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -section: Component groups -subsection: Content containers -id: Content header -source: react -propComponents: ['ContentHeader'] -sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/ContentHeader/ContentHeader.md ---- - -import ContentHeader from "@patternfly/react-component-groups/dist/dynamic/ContentHeader" -import { EllipsisVIcon } from '@patternfly/react-icons'; -import contentHeaderIcon from '../../assets/icons/content-header-icon.svg' - -The **content header** component displays a page header section with a title, subtitle and other optional content. - -## Examples - -### Basic content header - -In order to display a basic content header, pass the `title` and `subtitle`. - -```js file="./ContentHeaderExample.tsx" - -``` - -### Content header with breadcrumbs - -You can display breadcrumbs above the title using the `breadcrumbs` property. - -```js file="./ContentHeaderBreadCrumbExample.tsx" - -``` - -### Content header with icon - -Use the `icon` property to display your custom page icon separated with a [divider](/components/divider). - -```js file="./ContentHeaderIconExample.tsx" - -``` - -### Content 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="./ContentHeaderLabelLinkExample.tsx" - -``` - -### Content header with actions menu - -In case you want to display actions in your header, you can use the `actionsMenu` property. - -```js file="./ContentHeaderActionsExample.tsx" - -``` \ No newline at end of file diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ContentHeader/ContentHeaderExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ContentHeader/ContentHeaderExample.tsx deleted file mode 100644 index e5c584ba..00000000 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ContentHeader/ContentHeaderExample.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import ContentHeader from '@patternfly/react-component-groups/dist/dynamic/ContentHeader'; - -export const BasicExample: React.FunctionComponent = () => ( - -); diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ContentHeader/ContentHeaderIconExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ContentHeader/ContentHeaderIconExample.tsx deleted file mode 100644 index e55a12ee..00000000 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ContentHeader/ContentHeaderIconExample.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; -import ContentHeader from '@patternfly/react-component-groups/dist/dynamic/ContentHeader'; -import contentHeaderIcon from '../../assets/icons/content-header-icon.svg'; - - -export const IconExample: React.FunctionComponent = () => ( - } - /> -); diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeader.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeader.md new file mode 100644 index 00000000..8dc60713 --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeader.md @@ -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" + +``` \ No newline at end of file diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ContentHeader/ContentHeaderActionsExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeaderActionsExample.tsx similarity index 91% rename from packages/module/patternfly-docs/content/extensions/component-groups/examples/ContentHeader/ContentHeaderActionsExample.tsx rename to packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeaderActionsExample.tsx index 40048de9..ae27f3df 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ContentHeader/ContentHeaderActionsExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeaderActionsExample.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import ContentHeader from '@patternfly/react-component-groups/dist/dynamic/ContentHeader'; +import PageHeader from '@patternfly/react-component-groups/dist/dynamic/PageHeader'; import { ActionList, ActionListItem, Dropdown, DropdownItem, DropdownList, MenuToggle, MenuToggleElement } from '@patternfly/react-core'; import { EllipsisVIcon } from '@patternfly/react-icons'; @@ -29,9 +29,9 @@ export const ActionsExample: React.FunctionComponent = () => { return ( - diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ContentHeader/ContentHeaderBreadCrumbExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeaderBreadcrumbExample.tsx similarity index 74% rename from packages/module/patternfly-docs/content/extensions/component-groups/examples/ContentHeader/ContentHeaderBreadCrumbExample.tsx rename to packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeaderBreadcrumbExample.tsx index 7c273259..4aa557cb 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ContentHeader/ContentHeaderBreadCrumbExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeaderBreadcrumbExample.tsx @@ -1,9 +1,9 @@ import React from 'react'; -import ContentHeader from '@patternfly/react-component-groups/dist/dynamic/ContentHeader'; +import PageHeader from '@patternfly/react-component-groups/dist/dynamic/PageHeader'; import { Breadcrumb, BreadcrumbItem } from '@patternfly/react-core'; -export const BreadCrumbExample: React.FunctionComponent = () => ( - ( + ( } title='My Title' - subtitle='This is a subtitle for your content header' + subtitle='This is a subtitle for your page header' /> ); diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeaderExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeaderExample.tsx new file mode 100644 index 00000000..8e8b57a0 --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeaderExample.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import PageHeader from '@patternfly/react-component-groups/dist/dynamic/PageHeader'; + +export const BasicExample: React.FunctionComponent = () => ( + +); diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeaderIconExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeaderIconExample.tsx new file mode 100644 index 00000000..b9512d9d --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeaderIconExample.tsx @@ -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 = () => ( + } + /> +); diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ContentHeader/ContentHeaderLabelLinkExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeaderLabelLinkExample.tsx similarity index 66% rename from packages/module/patternfly-docs/content/extensions/component-groups/examples/ContentHeader/ContentHeaderLabelLinkExample.tsx rename to packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeaderLabelLinkExample.tsx index c7c140ca..12146973 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ContentHeader/ContentHeaderLabelLinkExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeaderLabelLinkExample.tsx @@ -1,11 +1,11 @@ import React from 'react'; -import ContentHeader from '@patternfly/react-component-groups/dist/dynamic/ContentHeader'; +import PageHeader from '@patternfly/react-component-groups/dist/dynamic/PageHeader'; import { Label } from '@patternfly/react-core'; export const BasicExample: React.FunctionComponent = () => ( - Org. Administrator} linkProps={{ label: 'Go to this link', diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCard.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCard.md index 3f637fcd..1ebef07b 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCard.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCard.md @@ -9,7 +9,7 @@ sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packa import ServiceCard from "@patternfly/react-component-groups/dist/dynamic/ServiceCard"; import { EllipsisVIcon } from '@patternfly/react-icons'; -import contentHeaderIcon from '../../assets/icons/content-header-icon.svg' +import pageHeaderIcon from '../../assets/icons/page-header-icon.svg' The **service card** component displays a card representing a service with an icon, title, description, and an optional customized footer diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardExample.tsx index 5dedee21..839cb459 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardExample.tsx @@ -1,6 +1,6 @@ import React from 'react'; import ServiceCard from "@patternfly/react-component-groups/dist/dynamic/ServiceCard"; -import contentHeaderIcon from '../../assets/icons/content-header-icon.svg'; +import pageHeaderIcon from '../../assets/icons/page-header-icon.svg'; import { Button, ButtonVariant } from '@patternfly/react-core'; export const BasicExample: React.FunctionComponent = () => ( @@ -8,7 +8,7 @@ export const BasicExample: React.FunctionComponent = () => ( title='PatternFly' subtitle='Component groups' description='This is a sample service description' - icon={content-header-icon} + icon={page-header-icon} helperText='Here is helper text' footer={<>