diff --git a/README.md b/README.md index dcb59ec7..f2532082 100644 --- a/README.md +++ b/README.md @@ -86,8 +86,8 @@ export const MyComponent: React.FunctionComponent = ({ customL #### Markdown file example: ``` --- -section: extensions -subsection: Component groups +section: Component groups +subsection: My component's category id: MyComponent propComponents: ['MyComponent'] --- diff --git a/cypress/component/Ansible.cy.tsx b/cypress/component/Ansible.cy.tsx deleted file mode 100644 index 997e5666..00000000 --- a/cypress/component/Ansible.cy.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import Ansible from '../../packages/module/dist/dynamic/Ansible'; - -describe('Ansible', () => { - it('renders supported Ansible', () => { - cy.mount() - cy.get('i').should('have.class', 'ansibleSupported-0-2-2'); - }); - it('renders unsupported Ansible', () => { - cy.mount() - cy.get('i').should('have.class', 'ansibleUnsupported-0-2-3'); - }); -}); \ No newline at end of file diff --git a/cypress/component/AnsibleSupport.cy.tsx b/cypress/component/AnsibleSupport.cy.tsx new file mode 100644 index 00000000..d44e52ce --- /dev/null +++ b/cypress/component/AnsibleSupport.cy.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { AnsibleSupport } from '@patternfly/react-component-groups/dist/dynamic/AnsibleSupport'; + +describe('AnsibleSupport', () => { + it('renders supported AnsibleSupport', () => { + cy.mount() + cy.get('i').should('have.class', 'ansibleSupported-0-2-2'); + }); + it('renders unsupported Ansible', () => { + cy.mount() + cy.get('i').should('have.class', 'ansibleUnsupported-0-2-3'); + }); +}); \ No newline at end of file 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/InvalidObject.cy.tsx b/cypress/component/InvalidObject.cy.tsx index 61224edf..ace3b09a 100644 --- a/cypress/component/InvalidObject.cy.tsx +++ b/cypress/component/InvalidObject.cy.tsx @@ -1,12 +1,12 @@ import React from 'react'; -import InvalidObject from '../../packages/module/dist/dynamic/InvalidObject'; +import MissingPage from '../../packages/module/dist/dynamic/MissingPage'; -describe('InvalidObject', () => { - it('renders InvalidObject', () => { - cy.mount() - cy.get('[data-ouia-component-id="InvalidObject"]').should('exist') - cy.get('[data-ouia-component-id="InvalidObject"]').contains('We lost that page'); - cy.get('[data-ouia-component-id="InvalidObject-body"]').contains("Let's find you a new one. Try a new search or return home."); - cy.get('[data-ouia-component-id="InvalidObject-home-button"]').contains('Return to homepage'); +describe('MissingPage', () => { + it('renders MissingPage', () => { + cy.mount() + cy.get('[data-ouia-component-id="MissingPage"]').should('exist') + cy.get('[data-ouia-component-id="MissingPage"]').contains('We lost that page'); + cy.get('[data-ouia-component-id="MissingPage-body"]').contains("Let's find you a new one. Try a new search or return home."); + cy.get('[data-ouia-component-id="MissingPage-home-button"]').contains('Return to homepage'); }); }) \ 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/cypress/e2e/CloseButton.spec.cy.ts b/cypress/e2e/CloseButton.spec.cy.ts index 827f7572..2ca8116b 100644 --- a/cypress/e2e/CloseButton.spec.cy.ts +++ b/cypress/e2e/CloseButton.spec.cy.ts @@ -1,8 +1,6 @@ describe('Test the close button', () => { it('passes', () => { - cy.visit('http://localhost:8006/extensions/component-groups/about-component-groups', { onBeforeLoad: (win) => {cy.stub(win.console, 'log').as('consoleLog');}, }); - cy.wait(1000); - cy.get('a[href="/extensions/component-groups/close-button"]').click(); + cy.visit('http://localhost:8006/component-groups/controls/close-button', { onBeforeLoad: (win) => {cy.stub(win.console, 'log').as('consoleLog');}, }); cy.wait(1000); cy.get('[data-test-id="close-button-example"]').click(); diff --git a/package-lock.json b/package-lock.json index 540a2778..8781b9d0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4534,15 +4534,6 @@ "react-dom": "15.x || 16.x || 17.x || 18.x" } }, - "node_modules/@remix-run/router": { - "version": "1.17.0", - "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.17.0.tgz", - "integrity": "sha512-2D6XaHEVvkCn682XBnipbJjgZUU7xjLtA4dGJRBVUKpEaDYOZMENZoZjAOSb7qirxt5RupjzZxz4fK2FO+EFPw==", - "dev": true, - "engines": { - "node": ">=14.0.0" - } - }, "node_modules/@sideway/address": { "version": "4.1.5", "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.5.tgz", @@ -5199,13 +5190,6 @@ "@types/node": "*" } }, - "node_modules/@types/history": { - "version": "4.7.11", - "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz", - "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==", - "dev": true, - "license": "MIT" - }, "node_modules/@types/html-minifier-terser": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz", @@ -5383,27 +5367,6 @@ "@types/react": "*" } }, - "node_modules/@types/react-router": { - "version": "5.1.20", - "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz", - "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==", - "dev": true, - "dependencies": { - "@types/history": "^4.7.11", - "@types/react": "*" - } - }, - "node_modules/@types/react-router-dom": { - "version": "5.3.3", - "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz", - "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==", - "dev": true, - "dependencies": { - "@types/history": "^4.7.11", - "@types/react": "*", - "@types/react-router": "*" - } - }, "node_modules/@types/retry": { "version": "0.12.0", "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz", @@ -20674,38 +20637,6 @@ "dev": true, "license": "MIT" }, - "node_modules/react-router": { - "version": "6.24.0", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.24.0.tgz", - "integrity": "sha512-sQrgJ5bXk7vbcC4BxQxeNa5UmboFm35we1AFK0VvQaz9g0LzxEIuLOhHIoZ8rnu9BO21ishGeL9no1WB76W/eg==", - "dev": true, - "dependencies": { - "@remix-run/router": "1.17.0" - }, - "engines": { - "node": ">=14.0.0" - }, - "peerDependencies": { - "react": ">=16.8" - } - }, - "node_modules/react-router-dom": { - "version": "6.24.0", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.24.0.tgz", - "integrity": "sha512-960sKuau6/yEwS8e+NVEidYQb1hNjAYM327gjEyXlc6r3Skf2vtwuJ2l7lssdegD2YjoKG5l8MsVyeTDlVeY8g==", - "dev": true, - "dependencies": { - "@remix-run/router": "1.17.0", - "react-router": "6.24.0" - }, - "engines": { - "node": ">=14.0.0" - }, - "peerDependencies": { - "react": ">=16.8", - "react-dom": ">=16.8" - } - }, "node_modules/react-ssr-prepass": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/react-ssr-prepass/-/react-ssr-prepass-1.5.0.tgz", @@ -26150,11 +26081,8 @@ "@patternfly/patternfly-a11y": "^4.3.1", "@types/react": "^18.2.33", "@types/react-dom": "^18.2.14", - "@types/react-router-dom": "^5.3.3", "react": "^18.3.1", "react-dom": "^18.3.1", - "react-router": "^6.24.0", - "react-router-dom": "^6.24.0", "typescript": "^5.5.2" }, "peerDependencies": { diff --git a/packages/module/package.json b/packages/module/package.json index 33a770c8..c5109e2d 100644 --- a/packages/module/package.json +++ b/packages/module/package.json @@ -47,11 +47,8 @@ "@patternfly/patternfly": "6.0.0-alpha.210", "@types/react": "^18.2.33", "@types/react-dom": "^18.2.14", - "@types/react-router-dom": "^5.3.3", "react": "^18.3.1", "react-dom": "^18.3.1", - "react-router": "^6.24.0", - "react-router-dom": "^6.24.0", "typescript": "^5.5.2" } } diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/about-component-groups.md b/packages/module/patternfly-docs/content/extensions/component-groups/about-component-groups.md index db60d773..f1050f64 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/about-component-groups.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/about-component-groups.md @@ -1,6 +1,5 @@ --- -section: extensions -subsection: Component groups +section: Component groups id: About component groups sortValue: 1 sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/about-component-groups.md 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/Ansible/AnsibleSupportedExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/AnsibleSupportedExample.tsx deleted file mode 100644 index f45a80b5..00000000 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/AnsibleSupportedExample.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import React from 'react'; -import Ansible from '@patternfly/react-component-groups/dist/dynamic/Ansible'; - -export const BasicExample: React.FunctionComponent = () => ( - -); diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/AnsibleUnsupportedExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/AnsibleUnsupportedExample.tsx deleted file mode 100644 index 425e84dd..00000000 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/AnsibleUnsupportedExample.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import React from 'react'; -import Ansible from '@patternfly/react-component-groups/dist/dynamic/Ansible'; - -export const BasicExample: React.FunctionComponent = () => ( - -); diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/Ansible.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/AnsibleSupport/AnsibleSupport.md similarity index 63% rename from packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/Ansible.md rename to packages/module/patternfly-docs/content/extensions/component-groups/examples/AnsibleSupport/AnsibleSupport.md index 3e5911e6..5ba1408b 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/Ansible.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/AnsibleSupport/AnsibleSupport.md @@ -1,22 +1,22 @@ --- # Sidenav top-level section # should be the same for all markdown files -section: extensions -subsection: Component groups +section: Component groups +subsection: Status and state indicators # Sidenav secondary level section # should be the same for all markdown files -id: Ansible +id: Ansible support # Tab (react | react-demos | html | html-demos | design-guidelines | accessibility) source: react # If you use typescript, the name of the interface to display props for # These are found through the sourceProps function provided in patternfly-docs.source.js -propComponents: ['Ansible'] -sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/Ansible.md +propComponents: ['AnsibleSupport'] +sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/AnsibleSupport/AnsibleSupport.md --- -import Ansible from '@patternfly/react-component-groups/dist/dynamic/Ansible'; +import AnsibleSupport from '@patternfly/react-component-groups/dist/dynamic/AnsibleSupport'; -The **Ansible** component displays the Ansible project logo, with a support status style. +The **Ansible support** component displays the Ansible project logo, with a support status style. ### Ansible supported @@ -28,7 +28,7 @@ By default, the Ansible logo displays as normal and in full color, meaning that ### Ansible unsupported -To specify that Ansible is not supported, add the `unsupported` property to the `` component. +To specify that Ansible is not supported, set the `isSupported` property to `false`. ```js file="./AnsibleUnsupportedExample.tsx" diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/AnsibleSupport/AnsibleSupportedExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/AnsibleSupport/AnsibleSupportedExample.tsx new file mode 100644 index 00000000..c7b361c7 --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/AnsibleSupport/AnsibleSupportedExample.tsx @@ -0,0 +1,4 @@ +import React from 'react'; +import AnsibleSupport from '@patternfly/react-component-groups/dist/dynamic/AnsibleSupport'; + +export const BasicExample: React.FunctionComponent = () => ; diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/AnsibleSupport/AnsibleUnsupportedExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/AnsibleSupport/AnsibleUnsupportedExample.tsx new file mode 100644 index 00000000..3b1d4757 --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/AnsibleSupport/AnsibleUnsupportedExample.tsx @@ -0,0 +1,4 @@ +import React from 'react'; +import AnsibleSupport from '@patternfly/react-component-groups/dist/dynamic/AnsibleSupport'; + +export const BasicExample: React.FunctionComponent = () => ; diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/Battery.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/Battery.md index e81a16cc..3f32c447 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/Battery.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/Battery.md @@ -1,8 +1,8 @@ --- # Sidenav top-level section # should be the same for all markdown files -section: extensions -subsection: Component groups +section: Component groups +subsection: Status and state indicators # Sidenav secondary level section # should be the same for all markdown files id: Battery diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/BulkSelect/BulkSelect.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/BulkSelect/BulkSelect.md index 6281f23f..81100934 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/BulkSelect/BulkSelect.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/BulkSelect/BulkSelect.md @@ -1,8 +1,8 @@ --- # Sidenav top-level section # should be the same for all markdown files -section: extensions -subsection: Component groups +section: Component groups +subsection: Controls # Sidenav secondary level section # should be the same for all markdown files id: Bulk select diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/CloseButton/CloseButton.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/CloseButton/CloseButton.md index f6faac23..2f625290 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/CloseButton/CloseButton.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/CloseButton/CloseButton.md @@ -1,8 +1,8 @@ --- # Sidenav top-level section # should be the same for all markdown files -section: extensions -subsection: Component groups +section: Component groups +subsection: Controls # Sidenav secondary level section # should be the same for all markdown files id: Close button diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ColumnManagementModal/ColumnManagementModal.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ColumnManagementModal/ColumnManagementModal.md index 5b13aeeb..668f5d10 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ColumnManagementModal/ColumnManagementModal.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ColumnManagementModal/ColumnManagementModal.md @@ -1,8 +1,8 @@ --- # Sidenav top-level section # should be the same for all markdown files -section: extensions -subsection: Component groups +section: Component groups +subsection: Helpers # Sidenav secondary level section # should be the same for all markdown files id: Column management modal 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 0b9bdd89..00000000 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ContentHeader/ContentHeader.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -section: extensions -subsection: Component groups -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/DetailsPage/DetailsPage.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/DetailsPage/DetailsPage.md index 3cb35c5d..4e015ac9 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/DetailsPage/DetailsPage.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/DetailsPage/DetailsPage.md @@ -1,8 +1,8 @@ --- # Sidenav top-level section # should be the same for all markdown files -section: extensions -subsection: Component groups +section: Component groups +subsection: Content containers # Sidenav secondary level section # should be the same for all markdown files id: Details page @@ -28,7 +28,6 @@ sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packa --- import { ActionMenu } from '@patternfly/react-component-groups'; -import { BrowserRouter as Router } from 'react-router-dom'; import { CheckCircleIcon } from '@patternfly/react-icons'; import HorizontalNav from '@patternfly/react-component-groups/dist/dynamic/HorizontalNav'; import DetailsPage from '@patternfly/react-component-groups/dist/dynamic/DetailsPage'; diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/DetailsPage/DetailsPageExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/DetailsPage/DetailsPageExample.tsx index ec1c0c4c..4d3770ab 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/DetailsPage/DetailsPageExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/DetailsPage/DetailsPageExample.tsx @@ -1,65 +1,62 @@ /* eslint-disable no-console */ import React from 'react'; -import { BrowserRouter as Router } from 'react-router-dom'; import { CheckCircleIcon } from '@patternfly/react-icons'; import { Breadcrumb, BreadcrumbItem } from '@patternfly/react-core'; import DetailsPage from '@patternfly/react-component-groups/dist/dynamic/DetailsPage'; export const BasicExample: React.FunctionComponent = () => ( - - - + + Resources - - + + Resource details - - - } - pageHeading={{ - title: 'example-resource', - label: { - children: 'Ready', - icon: + + + } + pageHeading={{ + title: 'example-resource', + label: { + children: 'Ready', + icon: + }, + }} + actionButtons={[ + { + children: 'Primary action', + // eslint-disable-next-line no-console + onClick: () => console.log('Primary action clicked'), + tooltip: 'Click me!', + }, + ]} + actionMenu={{ + actions: [ + { + children: 'Edit resource', + itemId: 'details-page-action-menu-example-1', + onClick: () => console.log('Edit resource clicked') }, - }} - actionButtons={[ { - children: 'Primary action', - // eslint-disable-next-line no-console - onClick: () => console.log('Primary action clicked'), - tooltip: 'Click me!', + children: 'Delete resource', + itemId: 'details-page-action-menu-example-2', + onClick: () => console.log('Delete resource clicked'), + isDisabled: true, }, - ]} - actionMenu={{ - actions: [ - { - children: 'Edit resource', - itemId: 'details-page-action-menu-example-1', - onClick: () => console.log('Edit resource clicked') - }, - { - children: 'Delete resource', - itemId: 'details-page-action-menu-example-2', - onClick: () => console.log('Delete resource clicked'), - isDisabled: true, - }, - ], - id: 'details-page-action-menu-example' - }} - tabs={[ - { eventKey: 'details', title: 'Details', children:
Details content
}, - { eventKey: 'other', title: 'Other', children:
Other content
} - ]} - /> - + ], + id: 'details-page-action-menu-example' + }} + tabs={[ + { eventKey: 'details', title: 'Details', children:
Details content
}, + { eventKey: 'other', title: 'Other', children:
Other content
} + ]} + /> ); diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/DetailsPage/DetailsPageHeaderExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/DetailsPage/DetailsPageHeaderExample.tsx index 87d22ae4..71187c8b 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/DetailsPage/DetailsPageHeaderExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/DetailsPage/DetailsPageHeaderExample.tsx @@ -1,61 +1,58 @@ /* eslint-disable no-console */ import React from 'react'; -import { BrowserRouter as Router } from 'react-router-dom'; import { CheckCircleIcon } from '@patternfly/react-icons'; import DetailsPageHeader from '@patternfly/react-component-groups/dist/dynamic/DetailsPageHeader'; import { Breadcrumb, BreadcrumbItem } from '@patternfly/react-core'; export const BasicExample: React.FunctionComponent = () => ( - - - + + Resources - - + + Resource details - - - } - pageHeading={{ - title: 'example-resource', - label: { - children: 'Ready', - icon: + + + } + pageHeading={{ + title: 'example-resource', + label: { + children: 'Ready', + icon: + }, + }} + actionButtons={[ + { + children: 'Primary action', + // eslint-disable-next-line no-console + onClick: () => console.log('Primary action clicked'), + tooltip: 'Click me!', + }, + ]} + actionMenu={{ + actions: [ + { + children: 'Edit resource', + itemId: 'details-page-header-action-menu-example-1', + onClick: () => console.log('Edit resource clicked'), }, - }} - actionButtons={[ { - children: 'Primary action', - // eslint-disable-next-line no-console - onClick: () => console.log('Primary action clicked'), - tooltip: 'Click me!', + children: 'Delete resource', + itemId: 'details-page-header-action-menu-example-2', + onClick: () => console.log('Delete resource clicked'), + isDisabled: true, }, - ]} - actionMenu={{ - actions: [ - { - children: 'Edit resource', - itemId: 'details-page-header-action-menu-example-1', - onClick: () => console.log('Edit resource clicked'), - }, - { - children: 'Delete resource', - itemId: 'details-page-header-action-menu-example-2', - onClick: () => console.log('Delete resource clicked'), - isDisabled: true, - }, - ], - id: 'details-page-header-action-menu-example', - }} - /> - + ], + id: 'details-page-header-action-menu-example', + }} + /> ); diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorBoundary/ErrorBoundary.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorBoundary/ErrorBoundary.md index b3ce191b..0561d41d 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorBoundary/ErrorBoundary.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorBoundary/ErrorBoundary.md @@ -1,8 +1,8 @@ --- # Sidenav top-level section # should be the same for all markdown files -section: extensions -subsection: Component groups +section: Component groups +subsection: Error communication # Sidenav secondary level section # should be the same for all markdown files id: Error boundary @@ -13,26 +13,20 @@ source: react propComponents: ['ErrorBoundary'] sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorBoundary/ErrorBoundary.md --- - +import { useState } from 'react'; +import { Button, Card, CardBody, CardFooter, CardHeader } from '@patternfly/react-core'; import ErrorBoundary from "@patternfly/react-component-groups/dist/dynamic/ErrorBoundary"; The **error boundary** component repurposes the `` component for an application error boundary. ## Examples -### Basic error boundary - -A basic error boundary has a `headerTitle`, an `errorTitle`, and lists error details when a user takes action (like selecting a link). - -```js file="./ErrorBoundaryExample.tsx" - -``` - -### Error boundary without error +### Error boundary usage example -If you do not wish to share error details, you can remove `throw new Error("");` and share other content instead. +A basic error boundary appears when an error is thrown inside of the wrapped content. +The component itself has a `headerTitle`, an `errorTitle`, and shows an en error stack with details. -```js file="./ErrorBoundaryNoExample.tsx" +```js file="./ErrorBoundaryExample.tsx" ``` diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorBoundary/ErrorBoundaryExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorBoundary/ErrorBoundaryExample.tsx index 1fa21955..5a71d4d4 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorBoundary/ErrorBoundaryExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorBoundary/ErrorBoundaryExample.tsx @@ -1,12 +1,41 @@ -import React from 'react'; +import React, { useState } from 'react'; +import { Title, Button, Card, CardBody, CardFooter, CardHeader } from '@patternfly/react-core'; import ErrorBoundary from '@patternfly/react-component-groups/dist/dynamic/ErrorBoundary'; export const BasicExample: React.FunctionComponent = () => { + const [ hasError, setHasError ] = useState(false); + const Surprise = () => { - throw new Error('but a welcome one'); + if (hasError) { + throw new Error('but a welcome one'); + } + return ( + + + Demo content wrapped in error boundary + + This is a demo content that may throw an error: + + + + + ) }; - return ( - - ); -} + return ( + <> + + + + { + hasError && ( + + ) + } + + ); +}; diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorBoundary/ErrorBoundaryNoExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorBoundary/ErrorBoundaryNoExample.tsx deleted file mode 100644 index 1ae71504..00000000 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorBoundary/ErrorBoundaryNoExample.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; -import ErrorBoundary from '@patternfly/react-component-groups/dist/dynamic/ErrorBoundary'; - -export const BasicExample: React.FunctionComponent = () => ( -
My app content
-); - diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorState/ErrorState.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorState/ErrorState.md index 076dd6c4..e4bb9b27 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorState/ErrorState.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorState/ErrorState.md @@ -1,8 +1,8 @@ --- # Sidenav top-level section # should be the same for all markdown files -section: extensions -subsection: Component groups +section: Component groups +subsection: Error communication # Sidenav secondary level section # should be the same for all markdown files id: Error state diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/InvalidObject/InvalidObject.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/InvalidObject/InvalidObject.md deleted file mode 100644 index 8d663586..00000000 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/InvalidObject/InvalidObject.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -# Sidenav top-level section -# should be the same for all markdown files -section: extensions -subsection: Component groups -# Sidenav secondary level section -# should be the same for all markdown files -id: Invalid object -# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility) -source: react -# If you use typescript, the name of the interface to display props for -# These are found through the sourceProps function provided in patternfly-docs.source.js -propComponents: ['InvalidObject'] -sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/InvalidObject/InvalidObject.md ---- - -import InvalidObject from '@patternfly/react-component-groups/dist/dynamic/InvalidObject'; - -The **invalid object** component can be used to display an error message and "return to homepage" button when an error occurs. - -## Examples - -### Basic invalid object - -A basic invalid object throws an error and informs users that an error has occurred. It also includes a button link, which users can select to return to the homepage. - -```js file="./InvalidObjectExample.tsx" - -``` \ No newline at end of file diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/InvalidObject/InvalidObjectExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/InvalidObject/InvalidObjectExample.tsx deleted file mode 100644 index 8ab12f6f..00000000 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/InvalidObject/InvalidObjectExample.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import InvalidObject from '@patternfly/react-component-groups/dist/dynamic/InvalidObject'; -import React from 'react'; - -export const BasicExample: React.FunctionComponent = () => ; diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/LogSnippet/LogSnippet.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/LogSnippet/LogSnippet.md index 418f473f..f51d6211 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/LogSnippet/LogSnippet.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/LogSnippet/LogSnippet.md @@ -1,8 +1,8 @@ --- # Sidenav top-level section # should be the same for all markdown files -section: extensions -subsection: Component groups +section: Component groups +subsection: Helpers # Sidenav secondary level section # should be the same for all markdown files id: Log snippet diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/MissingPage/MissingPage.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MissingPage/MissingPage.md new file mode 100644 index 00000000..498ad8ee --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MissingPage/MissingPage.md @@ -0,0 +1,29 @@ +--- +# Sidenav top-level section +# should be the same for all markdown files +section: Component groups +subsection: Error communication +# Sidenav secondary level section +# should be the same for all markdown files +id: Missing page +# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility) +source: react +# If you use typescript, the name of the interface to display props for +# These are found through the sourceProps function provided in patternfly-docs.source.js +propComponents: ['MissingPage'] +sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/MissingPage/MissingPage.md +--- + +import MissingPage from '@patternfly/react-component-groups/dist/dynamic/MissingPage'; + +The **missing page** component can be used to display an error message and "return to homepage" button when an error occurs. + +## Examples + +### Basic missing page + +A basic missing page component informs users that an error has occurred. It also includes a button link, which users can select to return to the homepage. + +```js file="./MissingPageExample.tsx" + +``` \ No newline at end of file diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/MissingPage/MissingPageExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MissingPage/MissingPageExample.tsx new file mode 100644 index 00000000..964cb573 --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MissingPage/MissingPageExample.tsx @@ -0,0 +1,4 @@ +import MissingPage from '@patternfly/react-component-groups/dist/dynamic/MissingPage'; +import React from 'react'; + +export const BasicExample: React.FunctionComponent = () => ; diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCard.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCard.md index 016ce2bb..01543095 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCard.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCard.md @@ -1,7 +1,7 @@ --- -section: extensions -subsection: Component groups -id: Multi content card +section: Component groups +subsection: Content containers +id: Multi-content card source: react propComponents: ['MultiContentCard'] sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCard.md @@ -12,35 +12,35 @@ import { ArrowRightIcon, BellIcon, CogIcon, EllipsisVIcon, LockIcon } from '@pat import { createUseStyles } from 'react-jss'; import clsx from 'clsx'; -A **multi content card** component allows to display multiple card components in a single layout. To further customize this layout, you can also utilize all properties of the [card component](/components/card), with the exception of `children` and `title`. +A **multi-content card** component allows to display multiple card components in a single layout. To further customize this layout, you can also utilize all properties of the [card component](/components/card), with the exception of `children` and `title`. ## Examples -### Basic multi content card +### Basic multi-content card -To display a basic multi content an array of content cards has to be passed using the `cards` property. It is recommended to use regular [card components](/components/card) in the content. +To display a basic multi-content an array of content cards has to be passed using the `cards` property. It is recommended to use regular [card components](/components/card) in the content. ```js file="./MultiContentCardExample.tsx" ``` -### Expandable multi content card +### Expandable multi-content card -To make the multi content card expandable, pass `isExpandable` flag together with `toggleText` or `toggleContent` property. Default expansion state can be adjusted using `defaultExpanded` property. +To make the multi-content card expandable, pass `isExpandable` flag together with `toggleText` or `toggleContent` property. Default expansion state can be adjusted using `defaultExpanded` property. ```js file="./MultiContentCardExpandableExample.tsx" ``` -### Expandable multi content card with actions and labels +### Expandable multi-content card with actions and labels -Actions can be displayed in the multi content card heading using `actions` property. Also, you can make use of [label components](/components/label) for your card content. +Actions can be displayed in the multi-content card heading using `actions` property. Also, you can make use of [label components](/components/label) for your card content. ```js file="./MultiContentCardExpandableActionsExample.tsx" ``` -### Expandable multi content card with dividers +### Expandable multi-content card with dividers Dividers between all cards in the content can be shown using `withDividers` flag. @@ -48,7 +48,7 @@ Dividers between all cards in the content can be shown using `withDividers` flag ``` -### Expandable multi content card with single dividers +### Expandable multi-content card with single dividers To enable a divider just for a single card, use `dividerVariant` property passed to the `cards` array. 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 59f20f82..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 @@ -1,6 +1,6 @@ --- -section: extensions -subsection: Component groups +section: Component groups +subsection: Content containers id: Service card source: react propComponents: ['ServiceCard'] @@ -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={<> ]; return ( - ( - diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/UnavailableContent.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/UnavailableContent.md index db951ecb..63b2c6a0 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/UnavailableContent.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/UnavailableContent.md @@ -1,8 +1,8 @@ --- # Sidenav top-level section # should be the same for all markdown files -section: extensions -subsection: Component groups +section: Component groups +subsection: Error communication # Sidenav secondary level section # should be the same for all markdown files id: Unavailable content diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModal.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModal.md index d90cb88e..e15868c8 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModal.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModal.md @@ -1,8 +1,8 @@ --- # Sidenav top-level section # should be the same for all markdown files -section: extensions -subsection: Component groups +section: Component groups +subsection: Error communication # Sidenav secondary level section # should be the same for all markdown files id: Warning modal diff --git a/packages/module/patternfly-docs/patternfly-docs.config.js b/packages/module/patternfly-docs/patternfly-docs.config.js index 65a58e83..5dea65b7 100644 --- a/packages/module/patternfly-docs/patternfly-docs.config.js +++ b/packages/module/patternfly-docs/patternfly-docs.config.js @@ -1,6 +1,6 @@ // This module is shared between NodeJS and babelled ES5 module.exports = { - sideNavItems: [ { section: 'extensions' } ], + sideNavItems: [ { section: 'Component groups' } ], topNavItems: [], port: 8006 }; diff --git a/packages/module/src/Ansible/Ansible.test.tsx b/packages/module/src/Ansible/Ansible.test.tsx deleted file mode 100644 index 915212cb..00000000 --- a/packages/module/src/Ansible/Ansible.test.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import { render } from '@testing-library/react'; -import Ansible from './Ansible'; - -describe('Ansible component', () => { - - it('should render unsupported - boolean', () => { - const { container } = render(); - expect(container).toMatchSnapshot(); - }); - - it('should render unsupported - number', () => { - const { container } = render(); - expect(container).toMatchSnapshot(); - }); - - it('should render supported - boolean', () => { - const { container } = render(); - expect(container).toMatchSnapshot(); - }); - - it('should render supported - number', () => { - const { container } = render(); - expect(container).toMatchSnapshot(); - }); - -}); diff --git a/packages/module/src/Ansible/__snapshots__/Ansible.test.tsx.snap b/packages/module/src/Ansible/__snapshots__/Ansible.test.tsx.snap deleted file mode 100644 index 22603c4a..00000000 --- a/packages/module/src/Ansible/__snapshots__/Ansible.test.tsx.snap +++ /dev/null @@ -1,153 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Ansible component should render supported - boolean 1`] = ` -
- - - - - -
-`; - -exports[`Ansible component should render supported - number 1`] = ` -
- - - - - -
-`; - -exports[`Ansible component should render unsupported - boolean 1`] = ` -
- - - - - - - - -
-`; - -exports[`Ansible component should render unsupported - number 1`] = ` -
- - - - - - - - -
-`; diff --git a/packages/module/src/Ansible/index.ts b/packages/module/src/Ansible/index.ts deleted file mode 100644 index acaeda80..00000000 --- a/packages/module/src/Ansible/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './Ansible'; -export * from './Ansible'; diff --git a/packages/module/src/AnsibleSupport/AnsibleSupport.test.tsx b/packages/module/src/AnsibleSupport/AnsibleSupport.test.tsx new file mode 100644 index 00000000..1894a8e2 --- /dev/null +++ b/packages/module/src/AnsibleSupport/AnsibleSupport.test.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import AnsibleSupport from './AnsibleSupport'; + +describe('AnsibleSupport component', () => { + + it('should render unsupported', () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); + + it('should render supported', () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); + +}); diff --git a/packages/module/src/Ansible/Ansible.tsx b/packages/module/src/AnsibleSupport/AnsibleSupport.tsx similarity index 76% rename from packages/module/src/Ansible/Ansible.tsx rename to packages/module/src/AnsibleSupport/AnsibleSupport.tsx index c666a61c..d0fdef5b 100644 --- a/packages/module/src/Ansible/Ansible.tsx +++ b/packages/module/src/AnsibleSupport/AnsibleSupport.tsx @@ -2,9 +2,9 @@ import React from 'react'; import clsx from 'clsx'; import { createUseStyles } from 'react-jss'; -export interface AnsibleProps extends React.DetailedHTMLProps, HTMLElement> { +export interface AnsibleSupportProps extends React.DetailedHTMLProps, HTMLElement> { /** Supported/unsupported variant flag */ - unsupported?: boolean | number; + isSupported?: boolean; /** Ansible icon className */ className?: string; /** Custom OUIA ID */ @@ -26,18 +26,18 @@ const useStyles = createUseStyles({ }, ansibleUnsupported: { '& .st0, .st1, .st2': { - fill: 'var(--pf-t--color--gray--50)', + fill: 'var(--pf-t--global--color--disabled--200)', cursor: 'not-allowed', } } }) -const Ansible: React.FunctionComponent = ({ unsupported, className, ouiaId = "Ansible-icon", ...props }: AnsibleProps) => { +export const AnsibleSupport: React.FunctionComponent = ({ isSupported = true, className, ouiaId = "AnsibleSupport-icon", ...props }: AnsibleSupportProps) => { const classes = useStyles(); const ansibleLogoClass = clsx( classes.ansible, - { [classes.ansibleSupported]: !unsupported || unsupported === 0 }, - { [classes.ansibleUnsupported]: unsupported || unsupported === 1 }, + { [classes.ansibleSupported]: isSupported }, + { [classes.ansibleUnsupported]: !isSupported }, className ); @@ -73,7 +73,7 @@ const Ansible: React.FunctionComponent = ({ unsupported, className ); return ( - + = ({ unsupported, className L1035.4,620.9z M1500.8,1416.5l-403-969.9c-11.5-28-34.5-42.8-62.4-42.8c-28,0-52.7,14.8-64.2,42.8L528.9,1510.4h151.3l175.1-438.6 l522.5,422.1c21,17,36.2,24.7,55.9,24.7c39.5,0,74-29.6,74-72.3C1507.7,1439.4,1505.3,1428.3,1500.8,1416.5L1500.8,1416.5z" /> - {unsupported ? unsupportedSlash : null} + {isSupported ? null : unsupportedSlash} ); }; -export default Ansible; +export default AnsibleSupport; diff --git a/packages/module/src/AnsibleSupport/__snapshots__/AnsibleSupport.test.tsx.snap b/packages/module/src/AnsibleSupport/__snapshots__/AnsibleSupport.test.tsx.snap new file mode 100644 index 00000000..4c90864c --- /dev/null +++ b/packages/module/src/AnsibleSupport/__snapshots__/AnsibleSupport.test.tsx.snap @@ -0,0 +1,77 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`AnsibleSupport component should render supported 1`] = ` +
+ + + + + +
+`; + +exports[`AnsibleSupport component should render unsupported 1`] = ` +
+ + + + + + + + +
+`; diff --git a/packages/module/src/AnsibleSupport/index.ts b/packages/module/src/AnsibleSupport/index.ts new file mode 100644 index 00000000..01fd91d8 --- /dev/null +++ b/packages/module/src/AnsibleSupport/index.ts @@ -0,0 +1,2 @@ +export { default } from './AnsibleSupport'; +export * from './AnsibleSupport'; diff --git a/packages/module/src/Battery/Battery.tsx b/packages/module/src/Battery/Battery.tsx index 26bcd024..89967ccb 100644 --- a/packages/module/src/Battery/Battery.tsx +++ b/packages/module/src/Battery/Battery.tsx @@ -94,7 +94,7 @@ export interface BatteryProps extends React.DetailedHTMLProps = ({ severity, label, labelHidden, className, ouiaId = 'Battery-icon', ...props }: BatteryProps) => { +export const Battery: React.FunctionComponent = ({ severity, label, labelHidden, className, ouiaId = 'Battery-icon', ...props }: BatteryProps) => { const classes = useStyles(); const batteryClasses = clsx(classes.battery, classes[String(batteryLevels(severity, true))], className); diff --git a/packages/module/src/CloseButton/CloseButton.tsx b/packages/module/src/CloseButton/CloseButton.tsx index 2921dc38..a916a72f 100644 --- a/packages/module/src/CloseButton/CloseButton.tsx +++ b/packages/module/src/CloseButton/CloseButton.tsx @@ -16,7 +16,7 @@ export interface CloseButtonProps extends ButtonProps { dataTestID?: string; }; -const CloseButton: React.FunctionComponent = ({ +export const CloseButton: React.FunctionComponent = ({ className, dataTestID, onClick, diff --git a/packages/module/src/ContentHeader/ContentHeader.test.tsx b/packages/module/src/ContentHeader/ContentHeader.test.tsx deleted file mode 100644 index 0b05339e..00000000 --- a/packages/module/src/ContentHeader/ContentHeader.test.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import { render } from '@testing-library/react'; -import ContentHeader from './ContentHeader'; - -describe('Contentheader component', () => { - test('should render', () => { - expect(render()).toMatchSnapshot(); - }); -}); \ No newline at end of file diff --git a/packages/module/src/ContentHeader/index.ts b/packages/module/src/ContentHeader/index.ts deleted file mode 100644 index 98181e78..00000000 --- a/packages/module/src/ContentHeader/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './ContentHeader' -export * from './ContentHeader' \ No newline at end of file diff --git a/packages/module/src/DetailsPageHeader/DetailsPageHeader.test.tsx b/packages/module/src/DetailsPageHeader/DetailsPageHeader.test.tsx index d999a7f6..6023d745 100644 --- a/packages/module/src/DetailsPageHeader/DetailsPageHeader.test.tsx +++ b/packages/module/src/DetailsPageHeader/DetailsPageHeader.test.tsx @@ -1,6 +1,5 @@ import { render, screen, fireEvent } from '@testing-library/react'; import React from 'react'; -import { MemoryRouter, Routes, Route } from 'react-router-dom'; import DetailsPageHeader, { DetailsPageHeaderProps } from './DetailsPageHeader'; const mockCallback = jest.fn(); @@ -35,18 +34,9 @@ const mockProps: DetailsPageHeaderProps = { }, }; -const detailsPageHeaderJSX = (args: DetailsPageHeaderProps) => ( - - - } path="/resources/example-resource" /> - Resource list page} path="/resources" /> - - -); - describe('DetailsPageHeader', () => { test('DetailsPageHeader is rendered with breadcrumbs, heading, action buttons and action menu', () => { - render(detailsPageHeaderJSX(mockProps)); + render(); // Breadcrumbs expect(screen.getByText('Some breadcrumbs')).toBeVisible(); @@ -58,14 +48,14 @@ describe('DetailsPageHeader', () => { expect(screen.getByText('Actions')).toBeVisible(); }); test('Clicking on actions menu reveals menu options', () => { - render(detailsPageHeaderJSX(mockProps)); + render(); fireEvent.click(screen.getByText('Actions')); expect(screen.getByText('Edit resource')).toBeInTheDocument(); expect(screen.getByText('Delete resource')).toBeInTheDocument(); }); test('Action button triggers callback', () => { - render(detailsPageHeaderJSX(mockProps)); + render(); fireEvent.click(screen.getByText('Primary action')); expect(mockCallback).toHaveBeenCalled(); diff --git a/packages/module/src/ErrorBoundary/ErrorBoundary.tsx b/packages/module/src/ErrorBoundary/ErrorBoundary.tsx index 78eecd84..5ba24f7c 100644 --- a/packages/module/src/ErrorBoundary/ErrorBoundary.tsx +++ b/packages/module/src/ErrorBoundary/ErrorBoundary.tsx @@ -14,7 +14,7 @@ const useStyles = createUseStyles({ export interface ErrorBoundaryProps { /** The title text to display on the error page */ - headerTitle: string; + headerTitle?: string; /** Indicates if the error is silent */ silent?: boolean; /** The title text to display with the error */ @@ -91,7 +91,7 @@ class ErrorBoundaryContent extends React.Component - {props.headerTitle} + {props?.headerTitle && {props.headerTitle}} { - test('should render', () => { - expect(render()).toMatchSnapshot(); - }); -}); \ No newline at end of file diff --git a/packages/module/src/InvalidObject/index.ts b/packages/module/src/InvalidObject/index.ts deleted file mode 100644 index 7406eabd..00000000 --- a/packages/module/src/InvalidObject/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './InvalidObject'; -export * from './InvalidObject'; \ No newline at end of file diff --git a/packages/module/src/MissingPage/MissingPage.test.tsx b/packages/module/src/MissingPage/MissingPage.test.tsx new file mode 100644 index 00000000..ce1c4907 --- /dev/null +++ b/packages/module/src/MissingPage/MissingPage.test.tsx @@ -0,0 +1,9 @@ +import MissingPage from './MissingPage'; +import React from 'react'; +import { render } from '@testing-library/react'; + +describe('MissingPage component', () => { + test('should render', () => { + expect(render()).toMatchSnapshot(); + }); +}); \ No newline at end of file diff --git a/packages/module/src/InvalidObject/InvalidObject.tsx b/packages/module/src/MissingPage/MissingPage.tsx similarity index 83% rename from packages/module/src/InvalidObject/InvalidObject.tsx rename to packages/module/src/MissingPage/MissingPage.tsx index 00398dd5..7e5caa80 100644 --- a/packages/module/src/InvalidObject/InvalidObject.tsx +++ b/packages/module/src/MissingPage/MissingPage.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { Button, EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateProps, EmptyStateVariant } from '@patternfly/react-core'; import NotFoundIcon from '../NotFoundIcon'; -export interface InvalidObjectProps extends Omit { +export interface MissingPageProps extends Omit { /** The URL that the home page link points to */ toHomePageUrl?: string; /** The text label for the link that points back to the home page */ @@ -15,14 +15,14 @@ export interface InvalidObjectProps extends Omit = ({ +export const MissingPage: React.FunctionComponent = ({ toHomePageUrl = window.location.origin, toHomePageText = 'Return to homepage', titleText = 'We lost that page', bodyText = "Let's find you a new one. Try a new search or return home.", - ouiaId = "InvalidObject", + ouiaId = "MissingPage", ...props -}: InvalidObjectProps) => ( +}: MissingPageProps) => ( {bodyText} @@ -33,4 +33,4 @@ const InvalidObject: React.FunctionComponent = ({ ); -export default InvalidObject; \ No newline at end of file +export default MissingPage; \ No newline at end of file diff --git a/packages/module/src/InvalidObject/__snapshots__/InvalidObject.test.tsx.snap b/packages/module/src/MissingPage/__snapshots__/MissingPage.test.tsx.snap similarity index 98% rename from packages/module/src/InvalidObject/__snapshots__/InvalidObject.test.tsx.snap rename to packages/module/src/MissingPage/__snapshots__/MissingPage.test.tsx.snap index 65caf748..27842522 100644 --- a/packages/module/src/InvalidObject/__snapshots__/InvalidObject.test.tsx.snap +++ b/packages/module/src/MissingPage/__snapshots__/MissingPage.test.tsx.snap @@ -1,13 +1,13 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`InvalidObject component should render 1`] = ` +exports[`MissingPage component should render 1`] = ` { "asFragment": [Function], "baseElement":
Let's find you a new one. Try a new search or return home.
Let's find you a new one. Try a new search or return home.
{ - it('should render basic multi content card', () => { + it('should render basic multi-content card', () => { const { container } = render(); expect(screen.getByText('Getting Started')).toBeInTheDocument(); expect(screen.getByText('Next Steps')).toBeInTheDocument(); @@ -103,7 +103,7 @@ describe('MultiContentCard component', () => { expect(container.firstChild).toMatchSnapshot(); }); - it('should render expandable multi content card - expanded', () => { + it('should render expandable multi-content card - expanded', () => { const { container } = render( { expect(container.firstChild).toMatchSnapshot(); }); - it('should render expandable multi content card - collapsed', () => { + it('should render expandable multi-content card - collapsed', () => { const { container } = render( { expect(container.firstChild).toMatchSnapshot(); }); - it('should render expandable multi content card - with actions', () => { + it('should render expandable multi-content card - with actions', () => { const { container } = render( { expect(container.firstChild).toMatchSnapshot(); }); - it('should render multi content card with dividers', () => { + it('should render multi-content card with dividers', () => { const { container } = render(); expect(screen.getAllByRole('separator')).toHaveLength(2); @@ -179,7 +179,7 @@ describe('MultiContentCard component', () => { expect(container.firstChild).toMatchSnapshot(); }); - it('should render multi content card with a single divider', () => { + it('should render multi-content card with a single divider', () => { const { container } = render(); expect(screen.getAllByRole('separator')).toHaveLength(1); diff --git a/packages/module/src/MultiContentCard/MultiContentCard.tsx b/packages/module/src/MultiContentCard/MultiContentCard.tsx index 628d9464..562903cc 100644 --- a/packages/module/src/MultiContentCard/MultiContentCard.tsx +++ b/packages/module/src/MultiContentCard/MultiContentCard.tsx @@ -77,7 +77,7 @@ const MultiContentCard: React.FunctionComponent = ({ const renderCards = (cards: (React.ReactElement | MutliContentCardProps)[], withDividers?: boolean) => ( {cards.map((card, index) => ( - <> +
{index > 0 && isCardWithProps(card) && card.dividerVariant === MultiContentCardDividerVariant.left && ( = ({ inset={{ default: 'inset3xl' }} /> )} - +
))} ); diff --git a/packages/module/src/MultiContentCard/__snapshots__/MultiContentCard.test.tsx.snap b/packages/module/src/MultiContentCard/__snapshots__/MultiContentCard.test.tsx.snap index bc6de051..2ecd79bc 100644 --- a/packages/module/src/MultiContentCard/__snapshots__/MultiContentCard.test.tsx.snap +++ b/packages/module/src/MultiContentCard/__snapshots__/MultiContentCard.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`MultiContentCard component should render basic multi content card 1`] = ` +exports[`MultiContentCard component should render basic multi-content card 1`] = `
-
+
-

- Getting Started -

+

+ Getting Started +

+
-
-
- - + + - - Configure application + Configure application +
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. -
-
-
-
    -
  • - - - -
    • -
  • - - + +
    • +
  • + + - -
    • -
  • - - + +
    • +
  • + + - -
    • -
+ + Another link + + + + + +
-
+
- - + + - - Configure access -
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Configure access +
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +
-
-
- + +
-
+
-

- Next Steps -

+

+ Next Steps +

+
-
-
- - + + - - Configure notifications -
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Configure notifications +
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
-
-
- + +
@@ -379,7 +385,7 @@ exports[`MultiContentCard component should render basic multi content card 1`] =
`; -exports[`MultiContentCard component should render expandable multi content card - collapsed 1`] = ` +exports[`MultiContentCard component should render expandable multi-content card - collapsed 1`] = `
`; -exports[`MultiContentCard component should render expandable multi content card - expanded 1`] = ` +exports[`MultiContentCard component should render expandable multi-content card - expanded 1`] = `
-
-
-
-
-

- Getting Started -

-
-
-
-
- - - - - - Configure application -
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. -
-
-
-
    -
  • - - - -
    • -
  • - - - -
    • -
  • - - - -
    • -
-
-
-
-
+ > +
- +

+ Getting Started +

+
+
+
+
- + + - - Configure access + Configure application +
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +
    +
  • + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
+
+
+
+
-
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +
+
+
+
+ + +
-
+
-

- Next Steps -

+

+ Next Steps +

+
-
-
- - + + - - Configure notifications -
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Configure notifications +
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
-
-
- + +
@@ -890,7 +902,7 @@ exports[`MultiContentCard component should render expandable multi content card
`; -exports[`MultiContentCard component should render expandable multi content card - with actions 1`] = ` +exports[`MultiContentCard component should render expandable multi-content card - with actions 1`] = `
`; -exports[`MultiContentCard component should render multi content card with a single divider 1`] = ` +exports[`MultiContentCard component should render multi-content card with a single divider 1`] = `
-
+
-

- Getting Started -

+

+ Getting Started +

+
-
-
- - + + - - Configure application + Configure application +
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. -
-
-
-
    -
  • - - - -
    • -
  • - - + +
    • +
  • + + - -
    • -
  • - - + +
    • +
  • + + - -
    • -
+ + Another link + + + + + +
-
+
- - + + - - Configure access -
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Configure access +
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +
-
-
- + +
-
-
+
+
-

- Next Steps -

+

+ Next Steps +

+
-
-
- - + + - - Configure notifications -
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Configure notifications +
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
-
-
- + +
@@ -1369,7 +1387,7 @@ exports[`MultiContentCard component should render multi content card with a sing
`; -exports[`MultiContentCard component should render multi content card with dividers 1`] = ` +exports[`MultiContentCard component should render multi-content card with dividers 1`] = `
-
+
-

- Getting Started -

+

+ Getting Started +

+
-
-
- - + + - - Configure application + Configure application +
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. -
-
-
-
    -
  • - - - -
    • -
  • - - - -
    • -
  • - - + +
    • +
  • + + - -
    • -
+ + Second link + + + + +
  • + + + +
    • + +
    +
    -
    -
    +
    - - + + - - Configure access -
    -
    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Configure access +
    +
    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +
    -
    -
    - + +
    +
    -
    -
    +
    -

    - Next Steps -

    +

    + Next Steps +

    +
    -
    -
    - - + + - - Configure notifications -
    -
    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Configure notifications +
    +
    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
    -
    -
    - + +
    diff --git a/packages/module/src/NotAuthorized/index.ts b/packages/module/src/NotAuthorized/index.ts deleted file mode 100644 index d5864724..00000000 --- a/packages/module/src/NotAuthorized/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './NotAuthorized' -export * from './NotAuthorized' diff --git a/packages/module/src/PageHeader/PageHeader.test.tsx b/packages/module/src/PageHeader/PageHeader.test.tsx new file mode 100644 index 00000000..a64ce22b --- /dev/null +++ b/packages/module/src/PageHeader/PageHeader.test.tsx @@ -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()).toMatchSnapshot(); + }); +}); \ No newline at end of file diff --git a/packages/module/src/ContentHeader/ContentHeader.tsx b/packages/module/src/PageHeader/PageHeader.tsx similarity index 78% rename from packages/module/src/ContentHeader/ContentHeader.tsx rename to packages/module/src/PageHeader/PageHeader.tsx index 8f06aae4..dc97b59e 100644 --- a/packages/module/src/ContentHeader/ContentHeader.tsx +++ b/packages/module/src/PageHeader/PageHeader.tsx @@ -21,16 +21,16 @@ export interface PageHeaderLinkProps extends ButtonProps { isExternal?: boolean; } -export interface ContentHeaderProps { - /** Title for content header */ +export interface PageHeaderProps { + /** Title for page header */ title: string; - /** Subtitle for content header */ + /** Subtitle for page header */ subtitle: string; /** Optional link below subtitle */ linkProps?: PageHeaderLinkProps; - /** Optional icon for content header (appears to the left of the content header's title with a divider) */ + /** Optional icon for page header (appears to the left of the page header's title with a divider) */ icon?: React.ReactNode; - /** Optional label for content header (appears to the right of the content header's title) */ + /** Optional label for page header (appears to the right of the page header's title) */ label?: React.ReactNode; /** Breadcrumbs component */ breadcrumbs?: React.ReactNode; @@ -46,7 +46,7 @@ const useStyles = createUseStyles({ } }); -export const ContentHeader: React.FunctionComponent> = ({ +export const PageHeader: React.FunctionComponent> = ({ title, subtitle, linkProps, @@ -54,9 +54,10 @@ export const ContentHeader: React.FunctionComponent { + ouiaId = 'PageHeader', +}: PageHeaderProps) => { const classes = useStyles(); + const { isExternal = false, ...linkRestProps } = linkProps ?? {}; return ( @@ -99,7 +100,7 @@ export const ContentHeader: React.FunctionComponent {linkProps && ( - )} @@ -108,4 +109,4 @@ export const ContentHeader: React.FunctionComponent )}; -export default ContentHeader; +export default PageHeader; diff --git a/packages/module/src/ContentHeader/__snapshots__/ContentHeader.test.tsx.snap b/packages/module/src/PageHeader/__snapshots__/PageHeader.test.tsx.snap similarity index 90% rename from packages/module/src/ContentHeader/__snapshots__/ContentHeader.test.tsx.snap rename to packages/module/src/PageHeader/__snapshots__/PageHeader.test.tsx.snap index 9cbc1b7f..83af27b0 100644 --- a/packages/module/src/ContentHeader/__snapshots__/ContentHeader.test.tsx.snap +++ b/packages/module/src/PageHeader/__snapshots__/PageHeader.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Contentheader component should render 1`] = ` +exports[`PageHeader component should render 1`] = ` { "asFragment": [Function], "baseElement": @@ -22,7 +22,7 @@ exports[`Contentheader component should render 1`] = ` >

    - This is a subtitle for your content header + This is a subtitle for your page header

    @@ -66,7 +66,7 @@ exports[`Contentheader component should render 1`] = ` >

    - This is a subtitle for your content header + This is a subtitle for your page header

    diff --git a/packages/module/src/PageHeader/index.ts b/packages/module/src/PageHeader/index.ts new file mode 100644 index 00000000..a8a2f742 --- /dev/null +++ b/packages/module/src/PageHeader/index.ts @@ -0,0 +1,2 @@ +export { default } from './PageHeader' +export * from './PageHeader' \ No newline at end of file diff --git a/packages/module/src/NotAuthorized/NotAuthorized.test.tsx b/packages/module/src/UnauthorizedAccess/UnauthorizedAccess.test.tsx similarity index 58% rename from packages/module/src/NotAuthorized/NotAuthorized.test.tsx rename to packages/module/src/UnauthorizedAccess/UnauthorizedAccess.test.tsx index e2852cbf..e447a29d 100644 --- a/packages/module/src/NotAuthorized/NotAuthorized.test.tsx +++ b/packages/module/src/UnauthorizedAccess/UnauthorizedAccess.test.tsx @@ -1,39 +1,39 @@ import React from 'react'; import { render } from '@testing-library/react'; import { QuestionCircleIcon } from '@patternfly/react-icons'; -import NotAuthorized from './NotAuthorized'; +import UnauthorizedAccess from './UnauthorizedAccess'; -describe('NotAuthorized component', () => { +describe('UnauthorizedAccess component', () => { const initialProps = { serviceName: 'Foo', }; it('should render', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toMatchSnapshot(); }); it('should apply custom styles', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toMatchSnapshot(); }); it('should use custom icon', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toMatchSnapshot(); }); it('should not show buttons', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toMatchSnapshot(); }); it('should show custom body text', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toMatchSnapshot(); }); it('should show custom title', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toMatchSnapshot(); }); @@ -50,7 +50,7 @@ describe('NotAuthorized component', () => { 3 ]; - const { container } = render(); + const { container } = render(); expect(container.firstChild).toMatchSnapshot(); }); }); \ No newline at end of file diff --git a/packages/module/src/NotAuthorized/NotAuthorized.tsx b/packages/module/src/UnauthorizedAccess/UnauthorizedAccess.tsx similarity index 90% rename from packages/module/src/NotAuthorized/NotAuthorized.tsx rename to packages/module/src/UnauthorizedAccess/UnauthorizedAccess.tsx index 4743a9ef..c78d0199 100644 --- a/packages/module/src/NotAuthorized/NotAuthorized.tsx +++ b/packages/module/src/UnauthorizedAccess/UnauthorizedAccess.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { Button, EmptyState, EmptyStateBody, EmptyStateProps, EmptyStateVariant, EmptyStateFooter, EmptyStateActions, ButtonVariant, } from '@patternfly/react-core'; import { LockIcon } from '@patternfly/react-icons'; -export interface NotAuthorizedProps extends Omit { +export interface UnauthorizedAccessProps extends Omit { /** Service name displayed in the title */ serviceName?: string; /** Icon displayed above the title */ @@ -29,7 +29,7 @@ export interface NotAuthorizedProps extends Omit = ({ +const UnauthorizedAccess: React.FunctionComponent = ({ prevPageButtonText = 'Return to previous page', toLandingPageText = 'Go to landing page', toLandingPageUrl = ".", @@ -41,9 +41,9 @@ const NotAuthorized: React.FunctionComponent = ({ bodyText = 'Contact your system administrator(s) for more information.', showReturnButton = true, className, - ouiaId = 'NotAuthorized', + ouiaId = 'UnauthorizedAccess', ...props -}: NotAuthorizedProps) => ( +}: UnauthorizedAccessProps) => ( {bodyText} @@ -66,4 +66,4 @@ const NotAuthorized: React.FunctionComponent = ({ ); -export default NotAuthorized; +export default UnauthorizedAccess; diff --git a/packages/module/src/NotAuthorized/__snapshots__/NotAuthorized.test.tsx.snap b/packages/module/src/UnauthorizedAccess/__snapshots__/UnauthorizedAccess.test.tsx.snap similarity index 84% rename from packages/module/src/NotAuthorized/__snapshots__/NotAuthorized.test.tsx.snap rename to packages/module/src/UnauthorizedAccess/__snapshots__/UnauthorizedAccess.test.tsx.snap index 65be5059..49823c23 100644 --- a/packages/module/src/NotAuthorized/__snapshots__/NotAuthorized.test.tsx.snap +++ b/packages/module/src/UnauthorizedAccess/__snapshots__/UnauthorizedAccess.test.tsx.snap @@ -1,9 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`NotAuthorized component should apply custom styles 1`] = ` +exports[`UnauthorizedAccess component should apply custom styles 1`] = `
    Contact your system administrator(s) for more information.
    `; -exports[`NotAuthorized component should not show buttons 1`] = ` +exports[`UnauthorizedAccess component should not show buttons 1`] = `
    Contact your system administrator(s) for more information.
    `; -exports[`NotAuthorized component should render 1`] = ` +exports[`UnauthorizedAccess component should render 1`] = `
    Contact your system administrator(s) for more information.
    `; -exports[`NotAuthorized component should show custom actions 1`] = ` +exports[`UnauthorizedAccess component should show custom actions 1`] = `
    Contact your system administrator(s) for more information.
    `; -exports[`NotAuthorized component should show custom body text 1`] = ` +exports[`UnauthorizedAccess component should show custom body text 1`] = `
    Some text
    `; -exports[`NotAuthorized component should show custom title 1`] = ` +exports[`UnauthorizedAccess component should show custom title 1`] = `
    Contact your system administrator(s) for more information.
    `; -exports[`NotAuthorized component should use custom icon 1`] = ` +exports[`UnauthorizedAccess component should use custom icon 1`] = `
    Contact your system administrator(s) for more information.
    =16.8, "react-dom@15.x || 16.x || 17.x || 18.x": +"react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom@^17 || ^18", "react-dom@^17.0.0 || ^18.0.0", react-dom@^18, react-dom@^18.0.0, react-dom@^18.3.1, "react-dom@15.x || 16.x || 17.x || 18.x": version "18.3.1" resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz" integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw== @@ -9911,27 +9884,12 @@ react-lifecycles-compat@^3.0.4: resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz" integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== -react-router-dom@^6.24.0: - version "6.24.0" - resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.24.0.tgz" - integrity sha512-960sKuau6/yEwS8e+NVEidYQb1hNjAYM327gjEyXlc6r3Skf2vtwuJ2l7lssdegD2YjoKG5l8MsVyeTDlVeY8g== - dependencies: - "@remix-run/router" "1.17.0" - react-router "6.24.0" - -react-router@^6.24.0, react-router@6.24.0: - version "6.24.0" - resolved "https://registry.npmjs.org/react-router/-/react-router-6.24.0.tgz" - integrity sha512-sQrgJ5bXk7vbcC4BxQxeNa5UmboFm35we1AFK0VvQaz9g0LzxEIuLOhHIoZ8rnu9BO21ishGeL9no1WB76W/eg== - dependencies: - "@remix-run/router" "1.17.0" - react-ssr-prepass@1.5.0: version "1.5.0" resolved "https://registry.npmjs.org/react-ssr-prepass/-/react-ssr-prepass-1.5.0.tgz" integrity sha512-yFNHrlVEReVYKsLI5lF05tZoHveA5pGzjFbFJY/3pOqqjGOmMmqx83N4hIjN2n6E1AOa+eQEUxs3CgRnPmT0RQ== -"react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^17 || ^18", "react@^17.0.0 || ^18.0.0", react@^18, react@^18.0.0, react@^18.3.1, "react@>= 16.8 || 18.0.0", react@>=16.3, react@>=16.8, react@>=16.8.6, "react@15.x || 16.x || 17.x || 18.x": +"react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^17 || ^18", "react@^17.0.0 || ^18.0.0", react@^18, react@^18.0.0, react@^18.3.1, "react@>= 16.8 || 18.0.0", react@>=16.3, react@>=16.8.6, "react@15.x || 16.x || 17.x || 18.x": version "18.3.1" resolved "https://registry.npmjs.org/react/-/react-18.3.1.tgz" integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==