Sync with v5 branch

.github/workflows/check-pr.yml

@@ -3,7 +3,6 @@ on:
   pull_request:
     branches:
       - main
-      - v4
       - v5
 jobs:
   call-build-lint-test-workflow:

.github/workflows/release.yml

@@ -3,7 +3,6 @@ on:
   push:
     branches:
       - main
-      - v4
       - v5
 jobs:
   call-build-lint-test-workflow:

README.md

@@ -1,11 +1,11 @@
 # PatternFly React Component Groups
 
-This repo contains a set of opinionated react component groups used to standardize functionality and look and feel across products.  The components are based on PatternFly with some additional functionality. 
+This repo contains a set of opinionated react component groups used to standardize functionality and look and feel across products. The components are based on PatternFly with some additional functionality.
 
 ### Migration from [RedHatInsights/frontend-components](https://github.com/RedHatInsights/frontend-components) to [patternfly/react-component-groups](https://github.com/patternfly/react-component-groups)
 Please see the [migration guide](./migration.md)
 
----
+--- 
 ## Contribution guide
 
 ### Before adding a new component:
@@ -68,7 +68,7 @@ src
 ### Component's API rules:
 - prop names comply with PatternFly components naming standards (`variant`, `onClick`, `position`, etc.)
 - the API is maximally simplified and all props are provided with a description
-- it is built on the top of existing PatternFly types without prop omitting
+- it is built on top of existing PatternFly types without prop omitting
 - it is well documented using the PatternFly documentation (`/packages/module/patternfly-docs/content/extensions/component-groups/examples/MyComponent/MyComponent.md`) with examples of all possible use cases (`packages/module/patternfly-docs/content/extensions/component-groups/examples/MyComponent/MyComponent[...]Example.tsx`)
 - do not unnecessarily use external libraries in your component - rather, delegate the necessary logic to the component's user using the component's API
 

cypress/component/MultiContentCard.cy.tsx

@@ -62,11 +62,11 @@ export const MultiContentCardExample: React.FunctionComponent = () => {
       </CardBody>
       <CardFooter>
         <Content>
-          <Button variant="link" isInline>
+          <Button icon={<Icon className="pf-v6-u-ml-sm" isInline>
+            <ArrowRightIcon />
+          </Icon>} variant="link" isInline>
               Learn more  
-            <Icon className="pf-v6-u-ml-sm" isInline>
-              <ArrowRightIcon />
-            </Icon>
+
           </Button>
         </Content>
       </CardFooter>
@@ -88,11 +88,11 @@ export const MultiContentCardExample: React.FunctionComponent = () => {
       </CardBody>
       <CardFooter>
         <Content>
-          <Button variant="link" isInline>
+          <Button icon={<Icon className="pf-v6-u-ml-sm" isInline>
+            <ArrowRightIcon />
+          </Icon>} variant="link" isInline>
               Learn more  
-            <Icon className="pf-v6-u-ml-sm" isInline>
-              <ArrowRightIcon />
-            </Icon>
+
           </Button>
         </Content>
       </CardFooter>

cypress/component/ResponsiveActions.cy.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { ResponsiveActions } from '@patternfly/react-component-groups/dist/dynamic/ResponsiveActions';
+import { ResponsiveAction } from '@patternfly/react-component-groups/dist/dynamic/ResponsiveAction';
+
+describe('ResponsiveActions', () => {
+  beforeEach(() => {
+    cy.viewport(1280, 2000);
+  })
+
+  it('renders persistent, pinned, and overflow actions', () => {
+    cy.mount(
+      <ResponsiveActions breakpoint="lg">
+        <ResponsiveAction isPersistent>
+          Persistent action
+        </ResponsiveAction>
+        <ResponsiveAction isPinned variant='secondary'>
+          Pinned action
+        </ResponsiveAction>
+        <ResponsiveAction>
+          Overflow action
+        </ResponsiveAction>
+      </ResponsiveActions>
+    );
+
+    cy.get('[data-ouia-component-id="ResponsiveActions-action-0"]').should('be.visible');
+    cy.get('[data-ouia-component-id="ResponsiveActions-action-1"]').should('be.visible');
+    cy.get('[data-ouia-component-id="ResponsiveActions-action-2"]').should('not.exist');
+
+    cy.get('[data-ouia-component-id="ResponsiveActions-menu-dropdown-toggle"]').click();
+    cy.get('[data-ouia-component-id="ResponsiveActions-action-2"]').should('be.visible');
+  });
+
+  it('handles click events on actions', () => {
+    const onClickSpy = cy.spy().as('actionClickSpy');
+
+    cy.mount(
+      <ResponsiveActions breakpoint="lg">
+        <ResponsiveAction isPersistent onClick={onClickSpy}>
+          Persistent action
+        </ResponsiveAction>
+        <ResponsiveAction isPinned variant='secondary' onClick={onClickSpy}>
+          Pinned action
+        </ResponsiveAction>
+        <ResponsiveAction onClick={onClickSpy}>
+          Overflow action
+        </ResponsiveAction>
+      </ResponsiveActions>
+    );
+
+    cy.get('[data-ouia-component-id="ResponsiveActions-action-0"]').click();
+    cy.get('@actionClickSpy').should('have.been.calledOnce');
+
+    cy.get('[data-ouia-component-id="ResponsiveActions-action-1"]').click();
+    cy.get('@actionClickSpy').should('have.been.calledTwice');
+
+    cy.get('[data-ouia-component-id="ResponsiveActions-menu-dropdown-toggle"]').click();
+    cy.get('[data-ouia-component-id="ResponsiveActions-action-2"]').click();
+    cy.get('@actionClickSpy').should('have.been.calledThrice');
+  });
+
+  it('renders no persistent or pinned actions without flags', () => {
+    cy.mount(
+      <ResponsiveActions breakpoint="lg">
+        <ResponsiveAction>
+          Overflow action
+        </ResponsiveAction>
+      </ResponsiveActions>
+    );
+
+    cy.get('[data-ouia-component-id="menu-persistent-content"]').should('not.exist');
+    cy.get('[data-ouia-component-id="menu-pinned-content"]').should('not.exist');
+
+    cy.get('[data-ouia-component-id="ResponsiveActions-menu-dropdown-toggle"]').click();
+    cy.contains('Overflow action').should('be.visible');
+  });
+});

cypress/component/SkeletonTable.cy.tsx

@@ -1,66 +1,73 @@
 import React from 'react';
-import { RowSelectVariant, Th } from '@patternfly/react-table';
-import SkeletonTable from '../../packages/module/dist/dynamic/SkeletonTable';
+import { RowSelectVariant } from '@patternfly/react-table';
+import SkeletonTable from '@patternfly/react-component-groups/dist/dynamic/SkeletonTable';
 
 describe('SkeletonTable', () => {
   beforeEach(() => {
     cy.viewport(1600, 800);
   });
 
   it('renders SkeletonTable', () => {
-    const SkeletonTableExample = <SkeletonTable rows={10} columns={[ 'first', 'second' ]} />;
+    const SkeletonTableExample = <SkeletonTable rowsCount={10} columns={[ 'First', 'Second' ]} />;
     cy.mount(SkeletonTableExample);
     cy.get('table').should('exist');
-    cy.get('table thead tr').should('have.text', 'firstsecond');
+    cy.get('table thead tr th').eq(0).should('have.text', 'First');
+    cy.get('table thead tr th').eq(1).should('have.text', 'Second');
   });
 
   it ('can be used without passing columns', () => {
-    const SkeletonTableExample = <SkeletonTable rows={10} numberOfColumns={2} />;
+    const SkeletonTableExample = <SkeletonTable rowsCount={10} columnsCount={2} />;
     cy.mount(SkeletonTableExample);
     cy.get('table').should('exist');
     cy.get('table thead tr').should('have.text', '');
   });
 
   it('contains checkboxes when passed isSelectable', () => {
-    const SkeletonTableExample = <SkeletonTable rows={10} columns={[ 'first', 'second' ]} isSelectable />;
+    const SkeletonTableExample = <SkeletonTable rowsCount={10} columns={[ 'First', 'Second' ]} isSelectable />;
     cy.mount(SkeletonTableExample);
     cy.get('table').should('exist');
-    cy.get('table thead tr').should('have.text', 'firstsecond');
+    cy.get('table thead tr th').eq(0).should('have.text', 'Data selection table header cell');
+    cy.get('table thead tr th').eq(1).should('have.text', 'First');
+    cy.get('table thead tr th').eq(2).should('have.text', 'Second');
     cy.get('input[type="checkbox"]').should('have.length', 10);
   });
 
   it('is expandable when passed isExpandable', () => {
-    const SkeletonTableExample = <SkeletonTable rows={10} columns={[ 'first', 'second' ]} isExpandable />;
+    const SkeletonTableExample = <SkeletonTable rowsCount={10} columns={[ 'First', 'Second' ]} isExpandable />;
     cy.mount(SkeletonTableExample);
     cy.get('table').should('exist');
-    cy.get('table thead tr').should('have.text', 'firstsecond');
+    cy.get('table thead tr th').eq(0).should('have.text', 'Data expansion table header cell');
+    cy.get('table thead tr th').eq(1).should('have.text', 'First');
+    cy.get('table thead tr th').eq(2).should('have.text', 'Second');
     cy.get('.pf-v6-c-table__toggle-icon').should('have.length', 10);
   });
 
   it('can be passed a selectVariant to render radio buttons', () => {
-    const SkeletonTableExample = <SkeletonTable rows={10} columns={[ 'first', 'second' ]} isSelectable selectVariant={RowSelectVariant.radio} />;
+    const SkeletonTableExample = <SkeletonTable rowsCount={10} columns={[ 'First', 'Second' ]} isSelectable selectVariant={RowSelectVariant.radio} />;
     cy.mount(SkeletonTableExample);
     cy.get('table').should('exist');
-    cy.get('table thead tr').should('have.text', 'firstsecond');
+    cy.get('table thead tr th').eq(0).should('have.text', 'Data selection table header cell');
+    cy.get('table thead tr th').eq(1).should('have.text', 'First');
+    cy.get('table thead tr th').eq(2).should('have.text', 'Second');
     cy.get('input[type="radio"]').should('have.length', 10);
   });
 
-  it('can be passed custom columns', () => {
+  it('can be passed custom columns props', () => {
     const SkeletonTableExample = (
       <SkeletonTable
         rows={10}
-        columns={[
-          <Th key="1" sort={{ columnIndex: 0, sortBy: { index: 0, direction: 'asc' } }}>
-            first
-          </Th>,
-          <Th key="2">second</Th>,
-          <Th key="3">third</Th>
+        columns={[ 
+          { cell: 'first', props: { sort: { columnIndex: 0, sortBy: { index: 0, direction: 'asc' } } } },
+          { cell: 'second' },
+          { cell: 'third' }
         ]}
       />
     );
     cy.mount(SkeletonTableExample);
     cy.get('table').should('exist');
-    cy.get('table thead tr').should('have.text', 'firstsecondthird');
+    cy.get('table thead tr th').eq(0).should('have.text', 'first');
+    cy.get('table thead tr th').eq(1).should('have.text', 'second');
+    cy.get('table thead tr th').eq(2).should('have.text', 'third');
     cy.get('.pf-v6-c-table__sort-indicator').eq(0).find('path').should(
       'have.attr',
       'd',

cypress/component/SkeletonTableBody.cy.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { RowSelectVariant } from '@patternfly/react-table';
+import SkeletonTableBody from '@patternfly/react-component-groups/dist/dynamic/SkeletonTableBody';
+
+describe('SkeletonTableBody', () => {
+  beforeEach(() => {
+    cy.viewport(1600, 800);
+  });
+
+  it('renders SkeletonTableBody', () => {
+    const SkeletonTableExample = <SkeletonTableBody rowsCount={10} columnsCount={2} />;
+    cy.mount(SkeletonTableExample);
+    cy.get('div[class="pf-v5-c-skeleton"]').should('have.length', 20);
+  });
+
+  it('contains checkboxes when passed isSelectable', () => {
+    cy.mount(<SkeletonTableBody rowsCount={10} columnsCount={2} isSelectable />);
+    cy.get('input[type="checkbox"]').should('have.length', 10);
+  });
+
+  it('is expandable when passed isExpandable', () => {
+    cy.mount(<SkeletonTableBody rowsCount={10} columnsCount={2} isExpandable />);
+    cy.get('.pf-v5-c-table__toggle-icon').should('have.length', 10);
+  });
+
+  it('can be passed a selectVariant to render radio buttons', () => {
+    cy.mount(<SkeletonTableBody rowsCount={10} columnsCount={2} isSelectable selectVariant={RowSelectVariant.radio} />);
+    cy.get('input[type="radio"]').should('have.length', 10);
+  });
+});

cypress/component/SkeletonTableHead.cy.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { Table } from '@patternfly/react-table';
+import { SkeletonTableHead } from '@patternfly/react-component-groups/dist/dynamic/SkeletonTableHead';
+
+describe('SkeletonTableHead', () => {
+  beforeEach(() => {
+    cy.viewport(1600, 800);
+  });
+
+  it('renders SkeletonTable with custom columns', () => {
+    const SkeletonTableExample = (
+      <Table>
+        <SkeletonTableHead columns={[ 'First', 'Second' ]} />
+      </Table>
+    );
+    cy.mount(SkeletonTableExample);
+    cy.get('table thead tr th').eq(0).should('have.text', 'First');
+    cy.get('table thead tr th').eq(1).should('have.text', 'Second');
+  });
+
+  it('renders SkeletonTable with column count but no custom columns', () => {
+    const SkeletonTableExample = (
+      <Table>
+        <SkeletonTableHead columnsCount={2} />
+      </Table>
+    );
+    cy.mount(SkeletonTableExample);
+    cy.get('table thead tr th').should('have.length', 2);
+    cy.get('table thead tr th').each((th) => {
+      cy.wrap(th).find('.pf-v5-c-skeleton').should('exist');
+    });
+  });
+
+  it('renders SkeletonTable with selectable column', () => {
+    const SkeletonTableExample = (
+      <Table>
+        <SkeletonTableHead columns={[ 'First' ]} isSelectable />
+      </Table>
+    );
+    cy.mount(SkeletonTableExample);
+    cy.get('table thead tr th').should('have.length', 2);
+    cy.get('table thead tr th').eq(0).should('have.text', 'Data selection table header cell');
+  });
+
+  it('renders SkeletonTable with expandable column', () => {
+    const SkeletonTableExample = (
+      <Table>
+        <SkeletonTableHead columns={[ 'First' ]} isExpandable />
+      </Table>
+    );
+    cy.mount(SkeletonTableExample);
+    cy.get('table thead tr th').should('have.length', 2);
+    cy.get('table thead tr th').eq(0).should('have.text', 'Data expansion table header cell');
+  });
+
+  it('renders SkeletonTable with selectable and expandable columns', () => {
+    const SkeletonTableExample = (
+      <Table>
+        <SkeletonTableHead columns={[ 'First', 'Second' ]} isSelectable isExpandable />
+      </Table>
+    );
+    cy.mount(SkeletonTableExample);
+    cy.get('table thead tr th').should('have.length', 4);
+  });
+
+  it('renders SkeletonTable with custom ouiaId', () => {
+    const customOuiaId = 'CustomOuia';
+    const SkeletonTableExample = (
+      <Table>
+        <SkeletonTableHead columns={[ 'First', 'Second' ]} ouiaId={customOuiaId} />
+      </Table>
+    );
+    cy.mount(SkeletonTableExample);
+    cy.get('thead').should('have.attr', 'data-ouia-component-id', `${customOuiaId}-thead`);
+    cy.get('th').each((th, index) => {
+      cy.wrap(th).should('have.attr', 'data-ouia-component-id', `${customOuiaId}-th-${index}`);
+    });
+  });
+
+  it('handles no columns and no columnsCount', () => {
+    const SkeletonTableExample = (
+      <Table>
+        <SkeletonTableHead />
+      </Table>
+    );
+    cy.mount(SkeletonTableExample);
+    cy.get('table thead tr th').should('have.length', 1);
+  });
+});