fix(v6): Introduce component nav categories

README.md

@@ -86,8 +86,8 @@ export const MyComponent: React.FunctionComponent<MyComponentProps> = ({ customL
 #### Markdown file example:
 ```
 ---
-section: extensions
-subsection: Component groups
+section: Component groups
+subsection: My component's category
 id: MyComponent
 propComponents: ['MyComponent']
 ---

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(<AnsibleSupport />)
+    cy.get('i').should('have.class', 'ansibleSupported-0-2-2');
+  });
+  it('renders unsupported Ansible', () => {
+    cy.mount(<AnsibleSupport isSupported={false}/>)
+    cy.get('i').should('have.class', 'ansibleUnsupported-0-2-3');
+  });
+});

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(<InvalidObject />)
-    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(<MissingPage />)
+    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');
   });
 })

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(<PageHeader title='My title' subtitle='This is a subtitle for your page header' />);
+    cy.get('title').should('exist')
+    cy.get('[data-ouia-component-id="PageHeader-title"]').should('have.text', 'My title')
+    cy.get('[data-ouia-component-id="PageHeader-subtitle"]').should('have.text', 'This is a subtitle for your page header')
+  })
+});

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={<img src="/" alt="content-header-icon" />}
+        icon={<img src="/" alt="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={<img src="/" alt="content-header-icon" />}
+        icon={<img src="/" alt="page-header-icon" />}
         helperText='Here is helper text'
         ouiaId='Example'
         footer={<>

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();

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"
   }
 }

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

packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/Ansible.md → packages/module/patternfly-docs/content/extensions/component-groups/examples/AnsibleSupport/AnsibleSupport.md

@@ -1,22 +1,22 @@
 ---
 # Sidenav top-level section
 # should be the same for all markdown files
-section: extensions
-subsection: Component groups
+section: Component groups
+subsection: Status and state indicators
 # Sidenav secondary level section
 # should be the same for all markdown files
-id: Ansible
+id: Ansible support
 # Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
 source: react
 # If you use typescript, the name of the interface to display props for
 # These are found through the sourceProps function provided in patternfly-docs.source.js
-propComponents: ['Ansible']
-sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/Ansible.md
+propComponents: ['AnsibleSupport']
+sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/AnsibleSupport/AnsibleSupport.md
 ---
 
-import Ansible from '@patternfly/react-component-groups/dist/dynamic/Ansible';
+import AnsibleSupport from '@patternfly/react-component-groups/dist/dynamic/AnsibleSupport';
 
-The **Ansible** component displays the Ansible project logo, with a support status style.
+The **Ansible support** component displays the Ansible project logo, with a support status style.
 
 ### Ansible supported
 
@@ -28,7 +28,7 @@ By default, the Ansible logo displays as normal and in full color, meaning that
 
 ### Ansible unsupported
 
-To specify that Ansible is not supported, add the `unsupported` property to the `<Ansible>` component.
+To specify that Ansible is not supported, set the `isSupported` property to `false`.
 
 ```js file="./AnsibleUnsupportedExample.tsx"
 

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 = () => <AnsibleSupport />;

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 = () => <AnsibleSupport isSupported={false} />;

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

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

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

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