@patternfly/react-core 4.224.12 → 4.224.13

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 4.224.13 (2022-07-11)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
 ## 4.224.12 (2022-07-08)
 
 **Note:** Version bump only for package @patternfly/react-core

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.224.12",
+  "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.12",
-    "@patternfly/react-styles": "^4.74.12",
-    "@patternfly/react-tokens": "^4.76.12",
+    "@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": "c2616a25c297f5810239191a6414b9d4218bd7e0"
+  "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();
+});

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

@@ -1,115 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Accordion Accordion bordered 1`] = `
-<DocumentFragment>
-  <dl
-    aria-label=""
-    class="pf-c-accordion pf-m-bordered"
-  >
-    <dt>
-      <button
-        aria-expanded="false"
-        class="pf-c-accordion__toggle"
-        id="item-1"
-        type="button"
-      >
-        <span
-          class="pf-c-accordion__toggle-text"
-        >
-          Item One
-        </span>
-        <span
-          class="pf-c-accordion__toggle-icon"
-        >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style="vertical-align: -0.125em;"
-            viewBox="0 0 256 512"
-            width="1em"
-          >
-            <path
-              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-            />
-          </svg>
-        </span>
-      </button>
-    </dt>
-    <dd
-      aria-label=""
-      class="pf-c-accordion__expanded-content pf-m-expanded"
-      id=""
-    >
-      <div
-        class="pf-c-accordion__expanded-content-body"
-      >
-        Item One Content
-      </div>
-    </dd>
-  </dl>
-</DocumentFragment>
-`;
-
-exports[`Accordion Accordion custom content 1`] = `
-<DocumentFragment>
-  <dl
-    aria-label=""
-    class="pf-c-accordion"
-  >
-    <dt>
-      <button
-        aria-expanded="false"
-        class="pf-c-accordion__toggle"
-        id="item-1"
-        type="button"
-      >
-        <span
-          class="pf-c-accordion__toggle-text"
-        >
-          Item One
-        </span>
-        <span
-          class="pf-c-accordion__toggle-icon"
-        >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style="vertical-align: -0.125em;"
-            viewBox="0 0 256 512"
-            width="1em"
-          >
-            <path
-              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-            />
-          </svg>
-        </span>
-      </button>
-    </dt>
-    <dd
-      aria-label=""
-      class="pf-c-accordion__expanded-content pf-m-expanded"
-      id=""
-    >
-      <div
-        class="pf-c-accordion__expanded-content-body"
-      >
-        Item one content body 1
-      </div>
-      <div
-        class="pf-c-accordion__expanded-content-body"
-      >
-        Item one Content body 2
-      </div>
-    </dd>
-  </dl>
-</DocumentFragment>
-`;
-
-exports[`Accordion Accordion default 1`] = `
+exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <dl
     aria-label="this is a simple accordion"
@@ -117,107 +8,3 @@ exports[`Accordion Accordion default 1`] = `
   />
 </DocumentFragment>
 `;
-
-exports[`Accordion Accordion display large 1`] = `
-<DocumentFragment>
-  <dl
-    aria-label=""
-    class="pf-c-accordion pf-m-display-lg"
-  >
-    <dt>
-      <button
-        aria-expanded="false"
-        class="pf-c-accordion__toggle"
-        id="item-1"
-        type="button"
-      >
-        <span
-          class="pf-c-accordion__toggle-text"
-        >
-          Item One
-        </span>
-        <span
-          class="pf-c-accordion__toggle-icon"
-        >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style="vertical-align: -0.125em;"
-            viewBox="0 0 256 512"
-            width="1em"
-          >
-            <path
-              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-            />
-          </svg>
-        </span>
-      </button>
-    </dt>
-    <dd
-      aria-label=""
-      class="pf-c-accordion__expanded-content pf-m-expanded"
-      id=""
-    >
-      <div
-        class="pf-c-accordion__expanded-content-body"
-      >
-        Item One Content
-      </div>
-    </dd>
-  </dl>
-</DocumentFragment>
-`;
-
-exports[`Accordion Accordion with non-default headingLevel 1`] = `
-<DocumentFragment>
-  <div
-    aria-label=""
-    class="pf-c-accordion"
-  >
-    <h2>
-      <button
-        aria-expanded="false"
-        class="pf-c-accordion__toggle"
-        id="item-1"
-        type="button"
-      >
-        <span
-          class="pf-c-accordion__toggle-text"
-        >
-          Item One
-        </span>
-        <span
-          class="pf-c-accordion__toggle-icon"
-        >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style="vertical-align: -0.125em;"
-            viewBox="0 0 256 512"
-            width="1em"
-          >
-            <path
-              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-            />
-          </svg>
-        </span>
-      </button>
-    </h2>
-    <div
-      aria-label=""
-      class="pf-c-accordion__expanded-content pf-m-expanded"
-      id=""
-    >
-      <div
-        class="pf-c-accordion__expanded-content-body"
-      >
-        Item One Content
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;

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

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <h3
+    aria-label="this is a simple accordion"
+    class="pf-c-accordion__expanded-content pf-m-expanded"
+    id=""
+  >
+    <div
+      aria-label="Expanded content body mock"
+    >
+      Test
+    </div>
+  </h3>
+</DocumentFragment>
+`;

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

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-accordion__expanded-content-body"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Renders without children 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-accordion__expanded-content-body"
+  />
+</DocumentFragment>
+`;

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

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  Test
+</DocumentFragment>
+`;

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

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <h3>
+    <button
+      aria-expanded="false"
+      class="pf-c-accordion__toggle"
+      id="accordion-toggle"
+      type="button"
+    >
+      <span
+        class="pf-c-accordion__toggle-text"
+      >
+        Test
+      </span>
+      <span
+        class="pf-c-accordion__toggle-icon"
+      >
+        Icon mock
+      </span>
+    </button>
+  </h3>
+</DocumentFragment>
+`;

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

@@ -1,17 +1,70 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { Hint } from '../Hint';
-import { HintBody } from '../HintBody';
-import { HintTitle } from '../HintTitle';
-import { HintFooter } from '../HintFooter';
 
-test('simple hint', () => {
+test('renders without children', () => {
+  render(<Hint data-testid='Hint' />);
+
+  expect(screen.getByTestId('Hint')).toBeVisible();
+});
+
+test('renders children', () => {
+  render(<Hint>Test</Hint>);
+
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('renders with class pf-c-hint', () => {
+  render(<Hint>Test</Hint>);
+
+  const hint = screen.getByText('Test');
+
+  expect(hint).toHaveClass('pf-c-hint');
+});
+
+test('renders with custom class names provided via prop', () => {
+  render(<Hint className='custom-classname'>Test</Hint>);
+
+  const hint = screen.getByText('Test');
+
+  expect(hint).toHaveClass('custom-classname');
+});
+
+test('does not render actions options when not passed', () => {
+  render(<Hint>Test</Hint>);
+
+  const actions = screen.queryByText('actions');
+
+  expect(actions).not.toBeInTheDocument();
+});
+
+test('renders actions options', () => {
+  render(<Hint actions="actions">Test</Hint>);
+
+  const actions = screen.getByText("actions");
+
+  expect(actions).toBeVisible();
+});
+
+test('renders with class pf-c-hint__actions if there is an action prop', () => {
+  render(<Hint actions="actions">Test</Hint>);
+
+  const hint = screen.getByText('actions');
+
+  expect(hint).toHaveClass('pf-c-hint__actions');
+});
+
+test('renders with inherited element props spread to the component', () => {
+  render(
+    <Hint aria-label="labelling-id">Test</Hint>
+  );
+
+  expect(screen.getByText('Test')).toHaveAccessibleName('labelling-id');
+});
+
+test('matches hint snapshot', () => {
   const { asFragment } = render(
-    <Hint>
-      <HintTitle>Title</HintTitle>
-      <HintBody>Body</HintBody>
-      <HintFooter>Footer</HintFooter>
-    </Hint>
+    <Hint />
   );
   expect(asFragment()).toMatchSnapshot();
 });

package/src/components/Hint/__tests__/HintBody.test.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { HintBody } from "../HintBody";
+
+test('renders without children', () => {
+  render(<HintBody data-testid="HintBody"></HintBody>);
+  
+  expect(screen.getByTestId('HintBody')).toBeVisible();
+});
+
+test('renders children', () => {
+  render(<HintBody>{<button>Test Me</button>}</HintBody>);
+
+  expect(screen.getByRole('button', { name: 'Test Me' })).toBeVisible();
+});
+
+test('renders with class pf-c-hint__body', () => {
+  render(<HintBody>Hint Body Test</HintBody>);
+
+  const body = screen.getByText('Hint Body Test');
+
+  expect(body).toHaveClass('pf-c-hint__body');
+});
+
+test('renders with custom class names provided via prop', () => {
+  render(<HintBody className="custom-classname">Hint Body Test</HintBody>);
+
+  const body = screen.getByText('Hint Body Test');
+
+  expect(body).toHaveClass('custom-classname');
+});
+
+test('renders with inherited element props spread to the component', () => {
+  render(
+    <HintBody aria-label="labelling-id">Test</HintBody>
+  );
+
+  expect(screen.getByText('Test')).toHaveAccessibleName('labelling-id');
+});
+
+test('matches snapshot', () => {
+  const { asFragment } = render(<HintBody>{<button>Test</button>}</HintBody>);
+
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Hint/__tests__/HintFooter.test.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { HintFooter } from "../HintFooter";
+
+test('renders without children', () => {
+  render(<HintFooter data-testid="HintFooter"></HintFooter>);
+  
+  expect(screen.getByTestId('HintFooter')).toBeVisible();
+});
+
+test('renders children', () => {
+  render(<HintFooter>{<button>Test Me</button>}</HintFooter>);
+
+  expect(screen.getByRole('button', { name: 'Test Me' })).toBeVisible();
+});
+
+test('renders with class pf-c-hint__footer', () => {
+  render(<HintFooter>Hint Body Test</HintFooter>);
+
+  const body = screen.getByText('Hint Body Test');
+
+  expect(body).toHaveClass('pf-c-hint__footer');
+});
+
+test('renders with custom class names provided via prop', () => {
+  render(<HintFooter className="custom-classname">Hint Body Test</HintFooter>);
+
+  const body = screen.getByText('Hint Body Test');
+
+  expect(body).toHaveClass('custom-classname');
+});
+
+test('renders with inherited element props spread to the component', () => {
+  render(
+    <HintFooter aria-label="labelling-id">Test</HintFooter>
+  );
+
+  expect(screen.getByText('Test')).toHaveAccessibleName('labelling-id');
+});
+
+test('matches snapshot', () => {
+  const { asFragment } = render(<HintFooter>{<button>Test</button>}</HintFooter>);
+
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Hint/__tests__/HintTitle.test.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { HintTitle } from "../HintTitle";
+
+test('renders without children', () => {
+  render(<HintTitle data-testid="HintTitle"></HintTitle>);
+  
+  expect(screen.getByTestId('HintTitle')).toBeVisible();
+});
+
+test('renders children', () => {
+  render(<HintTitle>{<button>Test Me</button>}</HintTitle>);
+
+  expect(screen.getByRole('button', { name: 'Test Me' })).toBeVisible();
+});
+
+test('renders with class pf-c-hint__title', () => {
+  render(<HintTitle>Hint Body Test</HintTitle>);
+
+  const body = screen.getByText('Hint Body Test');
+
+  expect(body).toHaveClass('pf-c-hint__title');
+});
+
+test('renders with custom class names provided via prop', () => {
+  render(<HintTitle className="custom-classname">Hint Body Test</HintTitle>);
+
+  const body = screen.getByText('Hint Body Test');
+
+  expect(body).toHaveClass('custom-classname');
+});
+
+test('renders with inherited element props spread to the component', () => {
+  render(
+    <HintTitle aria-label="labelling-id">Test</HintTitle>
+  );
+
+  expect(screen.getByText('Test')).toHaveAccessibleName('labelling-id');
+});
+
+test('matches snapshot', () => {
+  const { asFragment } = render(<HintTitle>{<button>Test</button>}</HintTitle>);
+
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Hint/__tests__/__snapshots__/Hint.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`simple hint 1`] = `
+exports[`matches hint snapshot 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-hint"
@@ -8,21 +8,6 @@ exports[`simple hint 1`] = `
     <div
       class="pf-c-hint__actions"
     />
-    <div
-      class="pf-c-hint__title"
-    >
-      Title
-    </div>
-    <div
-      class="pf-c-hint__body"
-    >
-      Body
-    </div>
-    <div
-      class="pf-c-hint__footer"
-    >
-      Footer
-    </div>
   </div>
 </DocumentFragment>
 `;

package/src/components/Hint/__tests__/__snapshots__/HintBody.test.tsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`matches snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-hint__body"
+  >
+    <button>
+      Test
+    </button>
+  </div>
+</DocumentFragment>
+`;

package/src/components/Hint/__tests__/__snapshots__/HintFooter.test.tsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`matches snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-hint__footer"
+  >
+    <button>
+      Test
+    </button>
+  </div>
+</DocumentFragment>
+`;

package/src/components/Hint/__tests__/__snapshots__/HintTitle.test.tsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`matches snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-hint__title"
+  >
+    <button>
+      Test
+    </button>
+  </div>
+</DocumentFragment>
+`;