@patternfly/react-core 4.224.10 → 4.224.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.224.10",
+  "version": "4.224.13",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -34,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.75.10",
-    "@patternfly/react-styles": "^4.74.10",
-    "@patternfly/react-tokens": "^4.76.10",
+    "@patternfly/react-icons": "^4.75.13",
+    "@patternfly/react-styles": "^4.74.13",
+    "@patternfly/react-tokens": "^4.76.13",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "5242f54a3eeae9d5ca2958620454a8d67b7926e8"
+  "gitHead": "3da666f00f7e848913704c049a51c4085c4044a0"
 }

package/src/components/Accordion/__tests__/Accordion.test.tsx

@@ -3,108 +3,138 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 
 import { Accordion } from '../Accordion';
-import { AccordionToggle } from '../AccordionToggle';
-import { AccordionContent } from '../AccordionContent';
-import { AccordionItem } from '../AccordionItem';
-import { AccordionExpandedContentBody } from '../AccordionExpandedContentBody';
-
-describe('Accordion', () => {
-  test('Accordion default', () => {
-    const { asFragment } = render(<Accordion aria-label="this is a simple accordion" />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('Accordion with non-default headingLevel', () => {
-    const { asFragment } = render(
-      <Accordion asDefinitionList={false} headingLevel="h2">
-        <AccordionItem>
-          <AccordionToggle id="item-1">Item One</AccordionToggle>
-          <AccordionContent>Item One Content</AccordionContent>
-        </AccordionItem>
-      </Accordion>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('It should pass optional aria props', () => {
-    render(
-      <Accordion asDefinitionList>
-        <AccordionToggle aria-label="Toggle details for" aria-labelledby="ex-toggle2 ex-item2" id="ex-toggle2" />
-      </Accordion>
-    );
-    const button = screen.getByRole('button');
-
-    expect(button).toHaveAttribute('aria-label', 'Toggle details for');
-    expect(button).toHaveAttribute('aria-labelledby', 'ex-toggle2 ex-item2');
-    expect(button).toHaveAttribute('aria-expanded', 'false');
-  });
-
-  test('Toggle expanded', () => {
-    render(
-      <Accordion asDefinitionList>
-        <AccordionToggle aria-label="Toggle details for" id="ex-toggle2" isExpanded />
-      </Accordion>
-    );
-    const button = screen.getByRole('button');
-
-    expect(button).toHaveAttribute('aria-expanded', 'true');
-    expect(button).toHaveClass('pf-m-expanded');
-  });
-
-  test('renders content with custom Toggle and Content containers', () => {
-    const container = 'a';
-
-    const { asFragment } = render(
-      <Accordion headingLevel="h2">
-        <AccordionItem>
-          <AccordionToggle id="item-1" component={container}>
-            Item One
-          </AccordionToggle>
-          <AccordionContent component={container}>Item One Content</AccordionContent>
-        </AccordionItem>
-      </Accordion>
-    );
-
-    expect(screen.getByText('Item One')).toBeInTheDocument();
-    expect(screen.getByText('Item One Content')).toBeInTheDocument();
-  });
-
-  test('Accordion bordered', () => {
-    const { asFragment } = render(
-      <Accordion isBordered>
-        <AccordionItem>
-          <AccordionToggle id="item-1">Item One</AccordionToggle>
-          <AccordionContent>Item One Content</AccordionContent>
-        </AccordionItem>
-      </Accordion>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('Accordion display large', () => {
-    const { asFragment } = render(
-      <Accordion displaySize="large">
-        <AccordionItem>
-          <AccordionToggle id="item-1">Item One</AccordionToggle>
-          <AccordionContent>Item One Content</AccordionContent>
-        </AccordionItem>
-      </Accordion>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('Accordion custom content', () => {
-    const { asFragment } = render(
-      <Accordion>
-        <AccordionItem>
-          <AccordionToggle id="item-1">Item One</AccordionToggle>
-          <AccordionContent isCustomContent>
-            <AccordionExpandedContentBody>Item one content body 1</AccordionExpandedContentBody>
-            <AccordionExpandedContentBody>Item one Content body 2</AccordionExpandedContentBody>
-          </AccordionContent>
-        </AccordionItem>
-      </Accordion>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
+import { AccordionContext } from '../AccordionContext';
+
+test('Renders without children', () => {
+  render(<Accordion data-testid="accordion" />);
+
+  expect(screen.getByTestId('accordion')).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<Accordion>Test</Accordion>);
+
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with the passed aria label', () => {
+  render(<Accordion aria-label="Accordion test">Test</Accordion>);
+
+  expect(screen.getByText('Test')).toHaveAccessibleName('Accordion test');
+});
+
+test('Renders with inherited element props spread to the component', () => {
+  render(
+    <>
+      <Accordion aria-labelledby="labelling-id">Test</Accordion>
+      <p id="labelling-id">Label</p>
+    </>
+  );
+
+  expect(screen.getByText('Test')).toHaveAccessibleName('Label');
+});
+
+test('Renders with class name pf-c-accordion', () => {
+  render(<Accordion>Test</Accordion>);
+
+  expect(screen.getByText('Test')).toHaveClass('pf-c-accordion');
+});
+
+test('Renders with custom class names provided via prop', () => {
+  render(<Accordion className="test-class">Test</Accordion>);
+
+  expect(screen.getByText('Test')).toHaveClass('test-class');
+});
+
+test('Renders Accordion as a "dl" by default', () => {
+  render(<Accordion>Test</Accordion>);
+
+  /* these tests asserting a nodeName property aren't my favorite, but dl and div elements don't have implicit aria
+  roles for us to select/assert against with something more directly meaningful to user experience */
+  expect(screen.getByText('Test')).toHaveProperty('nodeName', 'DL');
+});
+
+test('Renders Accordion as a "div" when asDefinitionList is false', () => {
+  render(<Accordion asDefinitionList={false}>Test</Accordion>);
+
+  expect(screen.getByText('Test')).toHaveProperty('nodeName', 'DIV');
+});
+
+test('Provides a ContentContainer of "dd" in a context by default', () => {
+  render(
+    <Accordion>
+      <AccordionContext.Consumer>{({ ContentContainer }) => ContentContainer}</AccordionContext.Consumer>
+    </Accordion>
+  );
+
+  expect(screen.getByText('dd')).toBeVisible();
+});
+
+test('Provides a ContentContainer of "div" in a context when asDefinitionList is false', () => {
+  render(
+    <Accordion asDefinitionList={false}>
+      <AccordionContext.Consumer>{({ ContentContainer }) => ContentContainer}</AccordionContext.Consumer>
+    </Accordion>
+  );
+
+  expect(screen.getByText('div')).toBeVisible();
+});
+
+test('Provides a ToggleContainer of "dt" in a context by default', () => {
+  render(
+    <Accordion>
+      <AccordionContext.Consumer>{({ ToggleContainer }) => ToggleContainer}</AccordionContext.Consumer>
+    </Accordion>
+  );
+
+  expect(screen.getByText('dt')).toBeVisible();
+});
+
+test('Provides a ToggleContainer of "h3" in a context when asDefinitionList is false', () => {
+  render(
+    <Accordion asDefinitionList={false}>
+      <AccordionContext.Consumer>{({ ToggleContainer }) => ToggleContainer}</AccordionContext.Consumer>
+    </Accordion>
+  );
+
+  expect(screen.getByText('h3')).toBeVisible();
+});
+
+test('Provides a ToggleContainer of "h2" in a context when asDefinitionList is false and headingLevel is "h2"', () => {
+  render(
+    <Accordion asDefinitionList={false} headingLevel="h2">
+      <AccordionContext.Consumer>{({ ToggleContainer }) => ToggleContainer}</AccordionContext.Consumer>
+    </Accordion>
+  );
+
+  expect(screen.getByText('h2')).toBeVisible();
+});
+
+test('Renders without pf-m-bordered by default', () => {
+  render(<Accordion>Test</Accordion>);
+
+  expect(screen.getByText('Test')).not.toHaveClass('pf-m-bordered');
+});
+
+test('Renders with pf-m-bordered when isBordered=true', () => {
+  render(<Accordion isBordered>Test</Accordion>);
+
+  expect(screen.getByText('Test')).toHaveClass('pf-m-bordered');
+});
+
+test('Renders without pf-m-display-lg by default', () => {
+  render(<Accordion>Test</Accordion>);
+
+  expect(screen.getByText('Test')).not.toHaveClass('pf-m-display-lg');
+});
+
+test('Renders with pf-m-display-lg when displaySize=large', () => {
+  render(<Accordion displaySize="large">Test</Accordion>);
+
+  expect(screen.getByText('Test')).toHaveClass('pf-m-display-lg');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<Accordion aria-label="this is a simple accordion" />);
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/Accordion/__tests__/AccordionContent.test.tsx

@@ -0,0 +1,180 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+
+import { AccordionContent } from '../AccordionContent';
+import { AccordionContext } from '../AccordionContext';
+
+jest.mock('../AccordionExpandedContentBody', () => ({
+  AccordionExpandedContentBody: ({ children }) => <div aria-label="Expanded content body mock">{children}</div>
+}));
+
+test('Renders without children', () => {
+  render(
+    <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
+      <AccordionContent data-testid="accordion-content" />
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.getByTestId('accordion-content')).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(
+    <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
+      <AccordionContent>Test</AccordionContent>
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with children wrapped in AccordionExpandedContentBody by default', () => {
+  render(
+    <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
+      <AccordionContent>Test</AccordionContent>
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.getByText('Test')).toHaveAccessibleName('Expanded content body mock');
+});
+
+test('Does not render children wrapped in AccordionExpandedContentBody when isCustomContent=true', () => {
+  render(
+    <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
+      <AccordionContent isCustomContent>Test</AccordionContent>
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.getByText('Test')).not.toHaveAccessibleName('Expanded content body mock');
+});
+
+test('Renders with the passed aria label', () => {
+  render(
+    <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
+      <AccordionContent aria-label="Accordion content">Test</AccordionContent>
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.getByRole('heading')).toHaveAccessibleName('Accordion content');
+});
+
+test('Renders with inherited element props spread to the component', () => {
+  render(
+    <>
+      <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
+        <AccordionContent aria-labelledby="labelling-id">Test</AccordionContent>
+        <p id="labelling-id">Label</p>
+      </AccordionContext.Provider>
+    </>
+  );
+
+  expect(screen.getByRole('heading')).toHaveAccessibleName('Label');
+});
+
+test('Renders with class name pf-c-accordion__expanded-content', () => {
+  render(
+    <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
+      <AccordionContent>Test</AccordionContent>
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.getByRole('heading')).toHaveClass('pf-c-accordion__expanded-content');
+});
+
+test('Renders with custom class names provided via prop', () => {
+  render(
+    <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
+      <AccordionContent className="test-class">Test</AccordionContent>
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.getByRole('heading')).toHaveClass('test-class');
+});
+
+test('Renders with the id prop passed to the container', () => {
+  render(
+    <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
+      <AccordionContent id="test-id">Test</AccordionContent>
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.getByRole('heading')).toHaveProperty('id', 'test-id');
+});
+
+test('Renders the container as the element provided in ContentContainer from a context by default', () => {
+  render(
+    <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
+      <AccordionContent>Test</AccordionContent>
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.queryByRole('heading', { level: 1 })).not.toBeInTheDocument();
+  expect(screen.getByRole('heading', { level: 3 })).toBeVisible();
+});
+
+test('Renders as the element provided via the component prop when one is provided', () => {
+  render(
+    <AccordionContext.Provider value={{ ContentContainer: 'button' }}>
+      <AccordionContent component="h1">Test</AccordionContent>
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.queryByRole('heading', { level: 3 })).not.toBeInTheDocument();
+  expect(screen.getByRole('heading', { level: 1 })).toBeVisible();
+});
+
+test('Renders without pf-m-fixed by default', () => {
+  render(
+    <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
+      <AccordionContent>Test</AccordionContent>
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.getByRole('heading')).not.toHaveClass('pf-m-fixed');
+});
+
+test('Renders with pf-m-fixed when isFixed is true', () => {
+  render(
+    <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
+      <AccordionContent isFixed>Test</AccordionContent>
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.getByRole('heading')).toHaveClass('pf-m-fixed');
+});
+
+test('Renders unhidden and with pf-m-expanded by default', () => {
+  render(
+    <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
+      <AccordionContent>Test</AccordionContent>
+    </AccordionContext.Provider>
+  );
+
+  const contentContainer = screen.getByRole('heading')
+
+  expect(contentContainer).not.toHaveAttribute('hidden');
+  expect(contentContainer).toHaveClass('pf-m-expanded');
+});
+
+test('Renders aria-hidden and without pf-m-expanded when isHidden is true', () => {
+  render(
+    <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
+      <AccordionContent isHidden>Test</AccordionContent>
+    </AccordionContext.Provider>
+  );
+
+  const contentContainer = screen.getByRole('heading', { hidden: true })
+
+  expect(contentContainer).toHaveAttribute('hidden');
+  expect(contentContainer).not.toHaveClass('pf-m-expanded');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(
+    <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
+      <AccordionContent aria-label="this is a simple accordion">Test</AccordionContent>
+    </AccordionContext.Provider>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Accordion/__tests__/AccordionExpandedContentBody.test.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+
+import { AccordionExpandedContentBody } from '../AccordionExpandedContentBody';
+
+test('Renders without children', () => {
+    const { asFragment } = render(<AccordionExpandedContentBody />);
+
+    /* a snapshot test is used here because this component isn't selectable via better screen queries without children 
+    as it doesn't spread other props to its container
+    */
+    expect(asFragment()).toMatchSnapshot();
+});
+
+test('Renders children', () => {
+  render(<AccordionExpandedContentBody>Test</AccordionExpandedContentBody>);
+
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with class name pf-c-accordion__expanded-content-body', () => {
+  render(<AccordionExpandedContentBody>Test</AccordionExpandedContentBody>);
+
+  expect(screen.getByText('Test')).toHaveClass('pf-c-accordion__expanded-content-body');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(
+    <AccordionExpandedContentBody>Test</AccordionExpandedContentBody>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Accordion/__tests__/AccordionItem.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+
+import { AccordionItem } from '../AccordionItem';
+
+test('Renders children', () => {
+  render(<AccordionItem>Test</AccordionItem>);
+
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(
+    <AccordionItem>Test</AccordionItem>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Accordion/__tests__/AccordionToggle.test.tsx

@@ -0,0 +1,164 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+
+import { AccordionToggle } from '../AccordionToggle';
+import { AccordionContext } from '../AccordionContext';
+
+jest.mock('@patternfly/react-icons/dist/esm/icons/angle-right-icon', () => () => 'Icon mock');
+
+test('Renders without children', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+      <AccordionToggle id="accordion-toggle" data-testid="accordion-toggle-test-id" />
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.getByTestId('accordion-toggle-test-id')).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+      <AccordionToggle id="accordion-toggle">Test</AccordionToggle>
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with inherited element props spread to the component', () => {
+  render(
+    <>
+      <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+        <AccordionToggle id="accordion-toggle" aria-labelledby="labelling-id">
+          Test
+        </AccordionToggle>
+        <p id="labelling-id">Label</p>
+      </AccordionContext.Provider>
+    </>
+  );
+
+  expect(screen.getByRole('button')).toHaveAccessibleName('Label');
+});
+
+test('Renders the accordion toggle with class pf-c-accordion__toggle', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+      <AccordionToggle id="accordion-toggle" aria-label="Accordion test">
+        Test
+      </AccordionToggle>
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.getByRole('button')).toHaveClass('pf-c-accordion__toggle');
+});
+
+test('Renders the accordion toggle with custom class names provided via prop', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+      <AccordionToggle id="accordion-toggle" aria-label="Accordion test" className="test-class">
+        Test
+      </AccordionToggle>
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.getByRole('button')).toHaveClass('test-class');
+});
+
+test('Renders with children inside class pf-c-accordion__toggle-text', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+      <AccordionToggle id="accordion-toggle" aria-label="Accordion test">
+        Test
+      </AccordionToggle>
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.getByText('Test')).toHaveClass('pf-c-accordion__toggle-text');
+});
+
+test('Renders with the toggle icon inside class pf-c-accordion__toggle-icon', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+      <AccordionToggle id="accordion-toggle" aria-label="Accordion test">
+        Test
+      </AccordionToggle>
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.getByText('Icon mock')).toHaveClass('pf-c-accordion__toggle-icon');
+});
+
+test('Renders with the id prop passed to the toggle', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+      <AccordionToggle id="accordion-toggle" aria-label="Accordion test">
+        Test
+      </AccordionToggle>
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.getByRole('button')).toHaveProperty('id', 'accordion-toggle');
+});
+
+test('Renders the container as the element provided in ToggleContainer from a context by default', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+      <AccordionToggle id="accordion-toggle">Test</AccordionToggle>
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.queryByRole('heading', { level: 1 })).not.toBeInTheDocument();
+  expect(screen.getByRole('heading', { level: 3 })).toBeVisible();
+});
+
+test('Renders the container as the element provided via the component prop when one is provided', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+      <AccordionToggle id="accordion-toggle" component="h1">
+        Test
+      </AccordionToggle>
+    </AccordionContext.Provider>
+  );
+
+  expect(screen.queryByRole('heading', { level: 3 })).not.toBeInTheDocument();
+  expect(screen.getByRole('heading', { level: 1 })).toBeVisible();
+});
+
+test('Renders the toggle without pf-m-expanded and aria-expanded=false by default', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+      <AccordionToggle id="accordion-toggle">Test</AccordionToggle>
+    </AccordionContext.Provider>
+  );
+
+  const toggle = screen.getByRole('button');
+
+  expect(toggle).not.toHaveClass('pf-m-expanded');
+  expect(toggle).toHaveAttribute('aria-expanded', 'false');
+});
+
+test('Renders the toggle with pf-m-expanded and aria-expanded=true when isExpanded=true', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+      <AccordionToggle id="accordion-toggle" isExpanded>
+        Test
+      </AccordionToggle>
+    </AccordionContext.Provider>
+  );
+
+  const toggle = screen.getByRole('button');
+
+  expect(toggle).toHaveClass('pf-m-expanded');
+  expect(toggle).toHaveAttribute('aria-expanded', 'true');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+      <AccordionToggle id="accordion-toggle">Test</AccordionToggle>
+    </AccordionContext.Provider>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});