Update to PatternFly 6

README.md

@@ -33,7 +33,7 @@ export interface MyComponentProps {
 const useStyles = createUseStyles({
   myText: {
     fontFamily: 'monospace',
-    fontSize: 'var(--pf-v5-global--icon--FontSize--md)',
+    fontSize: 'var(--pf-v6-global--icon--FontSize--md)',
   },
 })
 
@@ -134,7 +134,7 @@ When adding/making changes to a component, always make sure your code is tested:
 ### Styling:
 - for styling always use JSS
 - new classNames should be named in camelCase starting with the name of a given component and following with more details clarifying its purpose/component's subsection to which the class is applied (`actionMenu`, `actionMenuDropdown`, `actionMenuDropdownToggle`, etc.)
-- do not use `pf-v5-u-XXX` classes, use CSS variables in a custom class instead (styles for the utility classes are not bundled with the standard patternfly.css - it would require the consumer to import also addons.css)
+- do not use `pf-v6-u-XXX` classes, use CSS variables in a custom class instead (styles for the utility classes are not bundled with the standard patternfly.css - it would require the consumer to import also addons.css)
 
 ## Building for production
 

cypress/component/BulkSelect.cy.tsx

@@ -0,0 +1,97 @@
+import React, { useState } from 'react';
+import BulkSelect, { BulkSelectProps, BulkSelectValue } from '../../packages/module/dist/dynamic/BulkSelect';
+
+interface DataItem {
+  name: string
+};
+
+const BulkSelectTestComponent = ({ canSelectAll, isDataPaginated }: Omit<BulkSelectProps, 'onSelect' | 'selectedCount' >) => {
+  const [ selected, setSelected ] = useState<DataItem[]>([]);
+
+  const allData = [ { name: '1' }, { name: '2' }, { name: '3' }, { name: '4' }, { name: '5' }, { name: '6' } ];
+  const pageData = [ { name: '1' }, { name: '2' }, { name: '3' }, { name: '4' }, { name: '5' } ];
+  const pageDataNames = pageData.map((item) => item.name);
+  const pageSelected = pageDataNames.every(item => selected.find(selectedItem => selectedItem.name === item));
+
+  const handleBulkSelect = (value: BulkSelectValue) => {
+    value === BulkSelectValue.none && setSelected([]);
+    value === BulkSelectValue.page && setSelected(pageData);
+    value === BulkSelectValue.all && setSelected(allData);
+    value === BulkSelectValue.nonePage && setSelected(selected.filter(item => !pageDataNames.includes(item.name)))};
+
+  return (
+    <BulkSelect
+      isDataPaginated={isDataPaginated}
+      canSelectAll={canSelectAll}
+      pageCount={pageData.length}
+      totalCount={allData.length}
+      selectedCount={selected.length}
+      pageSelected={pageSelected}
+      pagePartiallySelected={pageDataNames.some(item => selected.find(selectedItem => selectedItem.name === item)) && !pageSelected}
+      onSelect={handleBulkSelect}
+    />
+  );
+};
+
+describe('BulkSelect', () => {
+  it('renders the bulk select without all', () => {
+    cy.mount(
+      <BulkSelectTestComponent />
+    );
+    cy.get('[data-ouia-component-id="BulkSelect-checkbox"]').should('exist');
+    cy.get('[data-ouia-component-id="BulkSelect-toggle"]').click();
+    cy.get('[data-ouia-component-id="BulkSelect-select-all"]').should('not.exist');
+    cy.get('[data-ouia-component-id="BulkSelect-select-page"]').should('exist');
+    cy.get('[data-ouia-component-id="BulkSelect-select-none"]').should('exist');
+
+    cy.contains('0 selected').should('not.exist');
+  });
+
+  it('renders the bulk select with all and without page', () => {
+    cy.mount(
+      <BulkSelectTestComponent canSelectAll isDataPaginated={false} />
+    );
+    cy.get('[data-ouia-component-id="BulkSelect-checkbox"]').should('exist');
+    cy.get('[data-ouia-component-id="BulkSelect-toggle"]').click();
+    cy.get('[data-ouia-component-id="BulkSelect-select-all"]').should('exist');
+    cy.get('[data-ouia-component-id="BulkSelect-select-page"]').should('not.exist');
+    cy.get('[data-ouia-component-id="BulkSelect-select-none"]').should('exist');
+
+    cy.contains('0 selected').should('not.exist');
+  });
+
+  it('renders the bulk select with data', () => {
+    cy.mount(
+      <BulkSelectTestComponent canSelectAll />
+    );
+
+    // Initial state
+    cy.get('input[type="checkbox"]').each(($checkbox) => {
+      cy.wrap($checkbox).should('not.be.checked');
+    });
+
+    // Checkbox select
+    cy.get('[data-ouia-component-id="BulkSelect-checkbox"]').first().click();
+    cy.get('input[type="checkbox"]').should('be.checked');
+    cy.contains('5 selected').should('exist');
+
+    // Select none
+    cy.get('[data-ouia-component-id="BulkSelect-toggle"]').first().click({ force: true });
+    cy.get('[data-ouia-component-id="BulkSelect-select-none"]').first().click();
+    cy.get('input[type="checkbox"]').should('not.be.checked');
+
+    // Select all
+    cy.get('[data-ouia-component-id="BulkSelect-toggle"]').first().click({ force: true });
+    cy.get('[data-ouia-component-id="BulkSelect-select-all"]').first().click();
+    cy.contains('6 selected').should('exist');
+
+    // Checkbox deselect
+    cy.get('[data-ouia-component-id="BulkSelect-checkbox"]').first().click({ force: true });
+    cy.contains('1 selected').should('exist');
+
+    // Select page
+    cy.get('[data-ouia-component-id="BulkSelect-toggle"]').first().click({ force: true });
+    cy.get('[data-ouia-component-id="BulkSelect-select-page"]').first().click();
+    cy.contains('5 selected').should('exist');
+  });
+});

cypress/component/ContentHeader.cy.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import ContentHeader from '../../packages/module/dist/dynamic/ContentHeader';
+
+describe('ContentHeader', () => {
+  it('should render ContentHeader title and subtitle', () => {
+    cy.mount(<ContentHeader title='My title' subtitle='This is a subtitle for your content header' />);
+    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')
+  })
+});

cypress/component/ErrorBoundary.cy.tsx

@@ -1,9 +1,13 @@
 import React from 'react';
+import { Button } from '@patternfly/react-core';
 import ErrorBoundary from '../../packages/module/dist/dynamic/ErrorBoundary';
 
 describe('ErrorBoundary', () => {
   it('renders the ErrorBoundary ', () => {
-    cy.mount(<ErrorBoundary headerTitle="My app header" errorTitle="Something wrong happened"/>)
-    cy.get('div h1').should('have.text', 'Something wrong happened');
+    cy.mount(<ErrorBoundary headerTitle="My app header" errorTitle="Something wrong happened">
+      <Button ouiaId="test-content">Test</Button>
+    </ErrorBoundary>);
+    cy.get('[data-ouia-component-id="test-content"]').contains('Test');
+    cy.get('[data-ouia-component-id="ErrorState"]').should('not.exist');
   });
 })

cypress/component/ErrorState.cy.tsx

@@ -4,17 +4,17 @@ import { ActionButton } from '../../packages/module/dist/dynamic/ActionButton'
 
 describe('ErrorState', () => {
   it('renders the Close button', () => {
-    cy.mount(<ErrorState errorTitle='Sample error title' errorDescription='Sample error description' />);
-    cy.get('h4').should('have.text', 'Sample error title');
-    cy.get('div div div div div div').should('have.text', 'Sample error description');
+    cy.mount(<ErrorState titleText='Sample error title' bodyText='Sample error description' />);
+    cy.get('[data-ouia-component-id="ErrorState"]').contains('Sample error title');
+    cy.get('[data-ouia-component-id="ErrorState-body"]').should('have.text', 'Sample error description');
   });
 
   it('render with a custom footer', () => {
     const onClickSpy = cy.spy().as('onClickSpy');
-    cy.mount(<ErrorState errorTitle='Sample error title' errorDescription='Sample error description' customFooter={<ActionButton variant="secondary" onClick={onClickSpy}>
+    cy.mount(<ErrorState titleText='Sample error title' bodyText='Sample error description' customFooter={<ActionButton variant="secondary" onClick={onClickSpy}>
     Custom action
     </ActionButton>}/>);
-    cy.get('button').should('exist');
+    cy.get('button').should('have.text', "Custom action");
     cy.get('button').click();
     cy.get('@onClickSpy').should('have.been.called');
   })

cypress/component/InvalidObject.cy.tsx

@@ -4,7 +4,9 @@ import InvalidObject from '../../packages/module/dist/dynamic/InvalidObject';
 describe('InvalidObject', () => {
   it('renders InvalidObject', () => {
     cy.mount(<InvalidObject />)
-    cy.get('[class="pf-v5-c-empty-state"]').should('exist')
-    cy.get('h1').should('have.text', 'We lost that page');
+    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');
   });
 })

cypress/component/LogSnippet.cy.tsx

@@ -4,7 +4,7 @@ import LogSnippet from '../../packages/module/dist/dynamic/LogSnippet';
 describe('LogSnippet', () => {
   it('renders LogSnippet', () => {
     cy.mount(<LogSnippet logSnippet='test test code' message='A test message'/>)
-    cy.get('div div p').should('have.text', 'A test message');
-    cy.get('div div div div pre').should('have.text', 'test test code');
+    cy.get('[data-ouia-component-id="LogSnippet-message"]').contains('A test message');
+    cy.get('[data-ouia-component-id="LogSnippet-code-content"]').contains('test code');
   });
 });