From fb4a0b50c0e90aeb64153e38fa806f5de96eb92a Mon Sep 17 00:00:00 2001 From: Filip Hlavac Date: Tue, 10 Sep 2024 16:21:24 +0200 Subject: [PATCH 01/10] fix(v6): Introduce component nav categories --- README.md | 4 ++-- cypress/e2e/CloseButton.spec.cy.ts | 4 +--- .../extensions/component-groups/about-component-groups.md | 3 +-- .../extensions/component-groups/examples/Ansible/Ansible.md | 4 ++-- .../extensions/component-groups/examples/Battery/Battery.md | 4 ++-- .../component-groups/examples/BulkSelect/BulkSelect.md | 4 ++-- .../component-groups/examples/CloseButton/CloseButton.md | 4 ++-- .../examples/ColumnManagementModal/ColumnManagementModal.md | 4 ++-- .../component-groups/examples/ContentHeader/ContentHeader.md | 4 ++-- .../component-groups/examples/DetailsPage/DetailsPage.md | 4 ++-- .../component-groups/examples/ErrorBoundary/ErrorBoundary.md | 4 ++-- .../component-groups/examples/ErrorState/ErrorState.md | 4 ++-- .../component-groups/examples/InvalidObject/InvalidObject.md | 4 ++-- .../component-groups/examples/LogSnippet/LogSnippet.md | 4 ++-- .../examples/MultiContentCard/MultiContentCard.md | 4 ++-- .../component-groups/examples/NotAuthorized/NotAuthorized.md | 4 ++-- .../component-groups/examples/ServiceCard/ServiceCard.md | 4 ++-- .../component-groups/examples/ShortcutGrid/ShortcutGrid.md | 4 ++-- .../component-groups/examples/SkeletonTable/SkeletonTable.md | 4 ++-- .../extensions/component-groups/examples/Status/Status.md | 4 ++-- .../extensions/component-groups/examples/TagCount/TagCount.md | 4 ++-- .../examples/Unavailable/UnavailableContent.md | 4 ++-- .../component-groups/examples/WarningModal/WarningModal.md | 4 ++-- packages/module/patternfly-docs/patternfly-docs.config.js | 2 +- 24 files changed, 45 insertions(+), 48 deletions(-) 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/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/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/examples/Ansible/Ansible.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/Ansible.md index 3e5911e6..88c7d318 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/Ansible.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/Ansible.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: Ansible 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 index 0b9bdd89..97e031fe 100644 --- 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 @@ -1,6 +1,6 @@ --- -section: extensions -subsection: Component groups +section: Component groups +subsection: Content containers id: Content header source: react propComponents: ['ContentHeader'] 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..7a0c160f 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 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..1157b7c1 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 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 index 8d663586..42a4b055 100644 --- 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 @@ -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: Invalid object 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/MultiContentCard/MultiContentCard.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCard.md index 016ce2bb..5ae03f15 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,6 +1,6 @@ --- -section: extensions -subsection: Component groups +section: Component groups +subsection: Content containers id: Multi content card source: react propComponents: ['MultiContentCard'] diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/NotAuthorized/NotAuthorized.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/NotAuthorized/NotAuthorized.md index 6a45ee03..7d40a96d 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/NotAuthorized/NotAuthorized.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/NotAuthorized/NotAuthorized.md @@ -1,6 +1,6 @@ --- -section: extensions -subsection: Component groups +section: Component groups +subsection: Error communication id: Not authorized source: react propComponents: ['NotAuthorized'] 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..3f637fcd 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'] diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ShortcutGrid/ShortcutGrid.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ShortcutGrid/ShortcutGrid.md index ffcb7b65..4f052061 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ShortcutGrid/ShortcutGrid.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ShortcutGrid/ShortcutGrid.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: Shortcut grid diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTable.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTable.md index 9add39ee..1a77b84d 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTable.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTable.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: Skeleton table diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Status/Status.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Status/Status.md index 5245f5ea..8a586c9f 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Status/Status.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Status/Status.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: Status diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCount.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCount.md index 142100bd..e15a6694 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCount.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCount.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: Tag count 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 }; From 01932dc4dbc610edd9b8e1ebc9c36d826299cf34 Mon Sep 17 00:00:00 2001 From: Filip Hlavac Date: Wed, 11 Sep 2024 15:29:43 +0200 Subject: [PATCH 02/10] Rename Ansible color token --- packages/module/src/Ansible/Ansible.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/module/src/Ansible/Ansible.tsx b/packages/module/src/Ansible/Ansible.tsx index c666a61c..5fe7dd1b 100644 --- a/packages/module/src/Ansible/Ansible.tsx +++ b/packages/module/src/Ansible/Ansible.tsx @@ -26,7 +26,7 @@ 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', } } From f14d31ae6435eae418629288e6b93ae2e9392310 Mon Sep 17 00:00:00 2001 From: Filip Hlavac Date: Wed, 11 Sep 2024 16:24:25 +0200 Subject: [PATCH 03/10] Fix ContentHeader link props not to cause build errors --- packages/module/src/ContentHeader/ContentHeader.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/module/src/ContentHeader/ContentHeader.tsx b/packages/module/src/ContentHeader/ContentHeader.tsx index 8f06aae4..05ec43ce 100644 --- a/packages/module/src/ContentHeader/ContentHeader.tsx +++ b/packages/module/src/ContentHeader/ContentHeader.tsx @@ -57,6 +57,7 @@ export const ContentHeader: React.FunctionComponent { const classes = useStyles(); + const { isExternal = false, ...linkRestProps } = linkProps ?? {}; return ( @@ -99,7 +100,7 @@ export const ContentHeader: React.FunctionComponent {linkProps && ( - )} From 84d43f582160229690a1a0132817fdb16bb2721a Mon Sep 17 00:00:00 2001 From: Filip Hlavac Date: Thu, 12 Sep 2024 11:52:42 +0200 Subject: [PATCH 04/10] fix(nav): Resolve build warnings --- package-lock.json | 72 - packages/module/package.json | 3 - .../examples/DetailsPage/DetailsPage.md | 1 - .../DetailsPage/DetailsPageExample.tsx | 101 +- .../DetailsPage/DetailsPageHeaderExample.tsx | 93 +- .../DetailsPageHeader.test.tsx | 16 +- .../src/MultiContentCard/MultiContentCard.tsx | 4 +- .../MultiContentCard.test.tsx.snap | 2320 +++++++++-------- yarn.lock | 46 +- 9 files changed, 1273 insertions(+), 1383 deletions(-) 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/examples/DetailsPage/DetailsPage.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/DetailsPage/DetailsPage.md index 7a0c160f..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 @@ -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/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/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..2170a6d8 100644 --- a/packages/module/src/MultiContentCard/__snapshots__/MultiContentCard.test.tsx.snap +++ b/packages/module/src/MultiContentCard/__snapshots__/MultiContentCard.test.tsx.snap @@ -11,366 +11,372 @@ 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. +
-
-
- + +
@@ -520,367 +526,373 @@ exports[`MultiContentCard component should render expandable multi content card >
-
-
-
-
-

- 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. +
-
-
- + +
@@ -998,369 +1010,375 @@ exports[`MultiContentCard component should render multi content card with a sing
-
+
-

- 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. +
-
-
- + +
@@ -1380,372 +1398,378 @@ exports[`MultiContentCard component should render multi content card with divide
-
+
-

- 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/yarn.lock b/yarn.lock index 54d2777b..ce365598 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1843,11 +1843,6 @@ prop-types "^15.6.1" react-lifecycles-compat "^3.0.4" -"@remix-run/router@1.17.0": - version "1.17.0" - resolved "https://registry.npmjs.org/@remix-run/router/-/router-1.17.0.tgz" - integrity sha512-2D6XaHEVvkCn682XBnipbJjgZUU7xjLtA4dGJRBVUKpEaDYOZMENZoZjAOSb7qirxt5RupjzZxz4fK2FO+EFPw== - "@sideway/address@^4.1.5": version "4.1.5" resolved "https://registry.npmjs.org/@sideway/address/-/address-4.1.5.tgz" @@ -2094,11 +2089,6 @@ dependencies: "@types/node" "*" -"@types/history@^4.7.11": - version "4.7.11" - resolved "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz" - integrity sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA== - "@types/html-minifier-terser@^6.0.0": version "6.1.0" resolved "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz" @@ -2208,23 +2198,6 @@ dependencies: "@types/react" "*" -"@types/react-router-dom@^5.3.3": - version "5.3.3" - resolved "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz" - integrity sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw== - dependencies: - "@types/history" "^4.7.11" - "@types/react" "*" - "@types/react-router" "*" - -"@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== - dependencies: - "@types/history" "^4.7.11" - "@types/react" "*" - "@types/react@*", "@types/react@^18.0.0", "@types/react@^18.2.33": version "18.3.3" resolved "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz" @@ -9857,7 +9830,7 @@ react-docgen@5.3.1: node-dir "^0.1.10" strip-indent "^3.0.0" -"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@>=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== From a530eda511b83b7712570934576e2ef61988ae0c Mon Sep 17 00:00:00 2001 From: Filip Hlavac Date: Thu, 12 Sep 2024 12:09:17 +0200 Subject: [PATCH 05/10] fix(rename): Rename Ansible to AnsibleSupport --- cypress/component/Ansible.cy.tsx | 13 -- cypress/component/AnsibleSupport.cy.tsx | 13 ++ .../Ansible/AnsibleSupportedExample.tsx | 6 - .../Ansible/AnsibleUnsupportedExample.tsx | 6 - .../AnsibleSupport.md} | 12 +- .../AnsibleSupportedExample.tsx | 4 + .../AnsibleUnsupportedExample.tsx | 4 + packages/module/src/Ansible/Ansible.test.tsx | 27 ---- .../__snapshots__/Ansible.test.tsx.snap | 153 ------------------ packages/module/src/Ansible/index.ts | 2 - .../AnsibleSupport/AnsibleSupport.test.tsx | 17 ++ .../AnsibleSupport.tsx} | 16 +- .../AnsibleSupport.test.tsx.snap | 77 +++++++++ packages/module/src/AnsibleSupport/index.ts | 2 + packages/module/src/Battery/Battery.tsx | 2 +- .../module/src/CloseButton/CloseButton.tsx | 2 +- packages/module/src/index.ts | 4 +- 17 files changed, 135 insertions(+), 225 deletions(-) delete mode 100644 cypress/component/Ansible.cy.tsx create mode 100644 cypress/component/AnsibleSupport.cy.tsx delete mode 100644 packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/AnsibleSupportedExample.tsx delete mode 100644 packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/AnsibleUnsupportedExample.tsx rename packages/module/patternfly-docs/content/extensions/component-groups/examples/{Ansible/Ansible.md => AnsibleSupport/AnsibleSupport.md} (68%) create mode 100644 packages/module/patternfly-docs/content/extensions/component-groups/examples/AnsibleSupport/AnsibleSupportedExample.tsx create mode 100644 packages/module/patternfly-docs/content/extensions/component-groups/examples/AnsibleSupport/AnsibleUnsupportedExample.tsx delete mode 100644 packages/module/src/Ansible/Ansible.test.tsx delete mode 100644 packages/module/src/Ansible/__snapshots__/Ansible.test.tsx.snap delete mode 100644 packages/module/src/Ansible/index.ts create mode 100644 packages/module/src/AnsibleSupport/AnsibleSupport.test.tsx rename packages/module/src/{Ansible/Ansible.tsx => AnsibleSupport/AnsibleSupport.tsx} (78%) create mode 100644 packages/module/src/AnsibleSupport/__snapshots__/AnsibleSupport.test.tsx.snap create mode 100644 packages/module/src/AnsibleSupport/index.ts 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/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 68% 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 88c7d318..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 @@ -5,18 +5,18 @@ 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/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 78% rename from packages/module/src/Ansible/Ansible.tsx rename to packages/module/src/AnsibleSupport/AnsibleSupport.tsx index 5fe7dd1b..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 */ @@ -32,12 +32,12 @@ const useStyles = createUseStyles({ } }) -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/index.ts b/packages/module/src/index.ts index 2f8003bb..7c5c5cf4 100644 --- a/packages/module/src/index.ts +++ b/packages/module/src/index.ts @@ -69,8 +69,8 @@ export * from './BulkSelect'; export { default as Battery } from './Battery'; export * from './Battery'; -export { default as Ansible } from './Ansible'; -export * from './Ansible'; +export { default as Ansible } from './AnsibleSupport'; +export * from './AnsibleSupport'; export { default as ActionMenu } from './ActionMenu'; export * from './ActionMenu'; From bb96840365926dcbee043faa439781fc32243c82 Mon Sep 17 00:00:00 2001 From: Filip Hlavac Date: Thu, 12 Sep 2024 12:19:39 +0200 Subject: [PATCH 06/10] fix(rename): Rename NotAuthorized to UnauthorizedAccess --- .../UnauthorizedAccess.md} | 16 ++--- .../UnauthorizedAccessActionsExample.tsx} | 4 +- .../UnauthorizedAccessExample.tsx} | 4 +- packages/module/src/NotAuthorized/index.ts | 2 - .../UnauthorizedAccess.test.tsx} | 18 ++--- .../UnauthorizedAccess.tsx} | 10 +-- .../UnauthorizedAccess.test.tsx.snap} | 66 +++++++++---------- .../module/src/UnauthorizedAccess/index.ts | 2 + packages/module/src/index.ts | 4 +- 9 files changed, 63 insertions(+), 63 deletions(-) rename packages/module/patternfly-docs/content/extensions/component-groups/examples/{NotAuthorized/NotAuthorized.md => UnauthorizedAccess/UnauthorizedAccess.md} (63%) rename packages/module/patternfly-docs/content/extensions/component-groups/examples/{NotAuthorized/NotAuthorizedCustomExample.tsx => UnauthorizedAccess/UnauthorizedAccessActionsExample.tsx} (83%) rename packages/module/patternfly-docs/content/extensions/component-groups/examples/{NotAuthorized/NotAuthorizedDefaultExample.tsx => UnauthorizedAccess/UnauthorizedAccessExample.tsx} (56%) delete mode 100644 packages/module/src/NotAuthorized/index.ts rename packages/module/src/{NotAuthorized/NotAuthorized.test.tsx => UnauthorizedAccess/UnauthorizedAccess.test.tsx} (58%) rename packages/module/src/{NotAuthorized/NotAuthorized.tsx => UnauthorizedAccess/UnauthorizedAccess.tsx} (90%) rename packages/module/src/{NotAuthorized/__snapshots__/NotAuthorized.test.tsx.snap => UnauthorizedAccess/__snapshots__/UnauthorizedAccess.test.tsx.snap} (84%) create mode 100644 packages/module/src/UnauthorizedAccess/index.ts diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/NotAuthorized/NotAuthorized.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/UnauthorizedAccess/UnauthorizedAccess.md similarity index 63% rename from packages/module/patternfly-docs/content/extensions/component-groups/examples/NotAuthorized/NotAuthorized.md rename to packages/module/patternfly-docs/content/extensions/component-groups/examples/UnauthorizedAccess/UnauthorizedAccess.md index 7d40a96d..9d6946e2 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/NotAuthorized/NotAuthorized.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/UnauthorizedAccess/UnauthorizedAccess.md @@ -1,30 +1,30 @@ --- section: Component groups subsection: Error communication -id: Not authorized +id: Unauthorized access source: react -propComponents: ['NotAuthorized'] -sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/NotAuthorized/NotAuthorized.md +propComponents: ['UnauthorizedAccess'] +sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/UnauthorizedAccess/UnauthorizedAccess.md --- -import NotAuthorized from "@patternfly/react-component-groups/dist/dynamic/NotAuthorized"; +import UnauthorizedAccess from "@patternfly/react-component-groups/dist/dynamic/UnauthorizedAccess"; A **not authorized** component displays an error screen to users when they attempt to view a page that they don't have permission to access. ## Examples -### Basic not authorized +### Basic unauthorized access A basic not authorized component displays a title, body text, and custom actions. -```js file="./NotAuthorizedDefaultExample.tsx" +```js file="./UnauthorizedAccessExample.tsx" ``` -### Not authorized with custom actions +### Unauthorized access with custom actions You can customize the not authorized component to fit your use case by specifying the `serviceName` to appear in the title, a `bodyText` of appropriate context for the error, and the `actions` that a user can take instead. -```js file="./NotAuthorizedCustomExample.tsx" +```js file="./UnauthorizedAccessActionsExample.tsx" ``` diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/NotAuthorized/NotAuthorizedCustomExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/UnauthorizedAccess/UnauthorizedAccessActionsExample.tsx similarity index 83% rename from packages/module/patternfly-docs/content/extensions/component-groups/examples/NotAuthorized/NotAuthorizedCustomExample.tsx rename to packages/module/patternfly-docs/content/extensions/component-groups/examples/UnauthorizedAccess/UnauthorizedAccessActionsExample.tsx index 40a6fa64..50b0d1ae 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/NotAuthorized/NotAuthorizedCustomExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/UnauthorizedAccess/UnauthorizedAccessActionsExample.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Button } from '@patternfly/react-core'; -import NotAuthorized from "@patternfly/react-component-groups/dist/dynamic/NotAuthorized"; +import UnauthorizedAccess from "@patternfly/react-component-groups/dist/dynamic/UnauthorizedAccess"; export const BasicExample: React.FunctionComponent = () => { const primaryAction = @@ -16,7 +16,7 @@ export const BasicExample: React.FunctionComponent = () => { ]; return ( - ( - 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/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.
    Date: Thu, 12 Sep 2024 14:33:29 +0200 Subject: [PATCH 07/10] fix(build): Fix ErrorBoundary example --- .../examples/ErrorBoundary/ErrorBoundary.md | 18 +++----- .../ErrorBoundary/ErrorBoundaryExample.tsx | 41 ++++++++++++++++--- .../ErrorBoundary/ErrorBoundaryNoExample.tsx | 7 ---- .../src/ErrorBoundary/ErrorBoundary.tsx | 4 +- 4 files changed, 43 insertions(+), 27 deletions(-) delete mode 100644 packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorBoundary/ErrorBoundaryNoExample.tsx 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 1157b7c1..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 @@ -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/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}} Date: Thu, 12 Sep 2024 16:37:59 +0200 Subject: [PATCH 08/10] fix(nav): Rename InvalidObject to MissingPage --- cypress/component/InvalidObject.cy.tsx | 16 ++++++++-------- .../InvalidObject/InvalidObjectExample.tsx | 4 ---- .../MissingPage.md} | 16 ++++++++-------- .../MissingPage/MissingPageExample.tsx | 4 ++++ .../src/InvalidObject/InvalidObject.test.tsx | 9 --------- packages/module/src/InvalidObject/index.ts | 2 -- .../src/MissingPage/MissingPage.test.tsx | 9 +++++++++ .../MissingPage.tsx} | 10 +++++----- .../__snapshots__/MissingPage.test.tsx.snap} | 18 +++++++++--------- packages/module/src/MissingPage/index.ts | 2 ++ packages/module/src/index.ts | 4 ++-- 11 files changed, 47 insertions(+), 47 deletions(-) delete mode 100644 packages/module/patternfly-docs/content/extensions/component-groups/examples/InvalidObject/InvalidObjectExample.tsx rename packages/module/patternfly-docs/content/extensions/component-groups/examples/{InvalidObject/InvalidObject.md => MissingPage/MissingPage.md} (52%) create mode 100644 packages/module/patternfly-docs/content/extensions/component-groups/examples/MissingPage/MissingPageExample.tsx delete mode 100644 packages/module/src/InvalidObject/InvalidObject.test.tsx delete mode 100644 packages/module/src/InvalidObject/index.ts create mode 100644 packages/module/src/MissingPage/MissingPage.test.tsx rename packages/module/src/{InvalidObject/InvalidObject.tsx => MissingPage/MissingPage.tsx} (83%) rename packages/module/src/{InvalidObject/__snapshots__/InvalidObject.test.tsx.snap => MissingPage/__snapshots__/MissingPage.test.tsx.snap} (98%) create mode 100644 packages/module/src/MissingPage/index.ts 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/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/InvalidObject/InvalidObject.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MissingPage/MissingPage.md similarity index 52% rename from packages/module/patternfly-docs/content/extensions/component-groups/examples/InvalidObject/InvalidObject.md rename to packages/module/patternfly-docs/content/extensions/component-groups/examples/MissingPage/MissingPage.md index 42a4b055..498ad8ee 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/InvalidObject/InvalidObject.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MissingPage/MissingPage.md @@ -5,25 +5,25 @@ section: Component groups subsection: Error communication # Sidenav secondary level section # should be the same for all markdown files -id: Invalid object +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: ['InvalidObject'] -sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/InvalidObject/InvalidObject.md +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 InvalidObject from '@patternfly/react-component-groups/dist/dynamic/InvalidObject'; +import MissingPage from '@patternfly/react-component-groups/dist/dynamic/MissingPage'; -The **invalid object** component can be used to display an error message and "return to homepage" button when an error occurs. +The **missing page** component can be used to display an error message and "return to homepage" button when an error occurs. ## Examples -### Basic invalid object +### Basic missing page -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. +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="./InvalidObjectExample.tsx" +```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/src/InvalidObject/InvalidObject.test.tsx b/packages/module/src/InvalidObject/InvalidObject.test.tsx deleted file mode 100644 index a15b3bbc..00000000 --- a/packages/module/src/InvalidObject/InvalidObject.test.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import InvalidObject from './InvalidObject'; -import React from 'react'; -import { render } from '@testing-library/react'; - -describe('InvalidObject component', () => { - 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.
    Date: Thu, 12 Sep 2024 16:40:32 +0200 Subject: [PATCH 09/10] fix(nav): Rename to multi-content card --- .../MultiContentCard/MultiContentCard.md | 20 +++++++++---------- .../MultiContentCard.test.tsx | 12 +++++------ .../MultiContentCard.test.tsx.snap | 12 +++++------ 3 files changed, 22 insertions(+), 22 deletions(-) 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 5ae03f15..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: Component groups subsection: Content containers -id: Multi content card +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/src/MultiContentCard/MultiContentCard.test.tsx b/packages/module/src/MultiContentCard/MultiContentCard.test.tsx index cc3baa34..b3304f90 100644 --- a/packages/module/src/MultiContentCard/MultiContentCard.test.tsx +++ b/packages/module/src/MultiContentCard/MultiContentCard.test.tsx @@ -86,7 +86,7 @@ const cards = [ ]; describe('MultiContentCard component', () => { - 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/__snapshots__/MultiContentCard.test.tsx.snap b/packages/module/src/MultiContentCard/__snapshots__/MultiContentCard.test.tsx.snap index 2170a6d8..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`] = `
    `; -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`] = `
    `; -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`] = `
    `; -exports[`MultiContentCard component should render multi content card with dividers 1`] = ` +exports[`MultiContentCard component should render multi-content card with dividers 1`] = `
    Date: Thu, 12 Sep 2024 16:53:56 +0200 Subject: [PATCH 10/10] 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={<>
    @@ -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/index.ts b/packages/module/src/index.ts index 19a3d8ee..f1e33032 100644 --- a/packages/module/src/index.ts +++ b/packages/module/src/index.ts @@ -54,8 +54,8 @@ export * from './DetailsPageHeader'; export { default as DetailsPage } from './DetailsPage'; export * from './DetailsPage'; -export { default as ContentHeader } from './ContentHeader'; -export * from './ContentHeader'; +export { default as PageHeader } from './PageHeader'; +export * from './PageHeader'; export { default as ColumnManagementModal } from './ColumnManagementModal'; export * from './ColumnManagementModal';