@patternfly/react-core 4.199.0 → 4.199.3

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

@@ -1,86 +1,82 @@
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { shallow } from 'enzyme';
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+
 import { Checkbox } from '../Checkbox';
 
-const props = {
-  onChange: jest.fn(),
-  isChecked: false
-};
+describe('Checkbox', () => {
+  test('controlled', () => {
+    render(<Checkbox isChecked id="check" aria-label="check" />);
+    expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot();
+  });
 
-test('controlled', () => {
-  const view = render(<Checkbox isChecked id="check" aria-label="check" />);
-  expect(view.container).toMatchSnapshot();
-});
+  test('controlled - 3rd state', () => {
+    render(<Checkbox isChecked={null} id="check" aria-label="check" />);
+    expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot();
+  });
 
-test('controlled - 3rd state', () => {
-  const view = render(<Checkbox isChecked={null} id="check" aria-label="check" />);
-  expect(view.container).toMatchSnapshot();
-});
+  test('uncontrolled', () => {
+    render(<Checkbox id="check" aria-label="check" />);
+    expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot();
+  });
 
-test('uncontrolled', () => {
-  const view = render(<Checkbox id="check" aria-label="check" />);
-  expect(view.container).toMatchSnapshot();
-});
+  test('isDisabled', () => {
+    render(<Checkbox id="check" isDisabled aria-label="check" />);
+    expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot();
+  });
 
-test('isDisabled', () => {
-  const view = render(<Checkbox id="check" isDisabled aria-label="check" />);
-  expect(view.container).toMatchSnapshot();
-});
+  test('label is string', () => {
+    render(<Checkbox label="Label" id="check" isChecked aria-label="check" />);
+    expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot();
+  });
 
-test('label is string', () => {
-  const view = render(<Checkbox label="Label" id="check" isChecked aria-label="check" />);
-  expect(view.container).toMatchSnapshot();
-});
+  test('label is function', () => {
+    const functionLabel = () => <h1>Header</h1>;
+    render(<Checkbox label={functionLabel()} id="check" isChecked aria-label="check" />);
+    expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot();
+  });
 
-test('label is function', () => {
-  const functionLabel = () => <h1>Header</h1>;
-  const view = render(<Checkbox label={functionLabel()} id="check" isChecked aria-label="check" />);
-  expect(view.container).toMatchSnapshot();
-});
+  test('label is node', () => {
+    render(<Checkbox label={<h1>Header</h1>} id="check" isChecked aria-label="check" />);
+    expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot();
+  });
 
-test('label is node', () => {
-  const view = render(<Checkbox label={<h1>Header</h1>} id="check" isChecked aria-label="check" />);
-  expect(view.container).toMatchSnapshot();
-});
+  test('passing class', () => {
+    render(<Checkbox label="label" className="class-123" id="check" isChecked aria-label="check" />);
+    expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot();
+  });
 
-test('passing class', () => {
-  const view = render(<Checkbox label="label" className="class-123" id="check" isChecked aria-label="check" />);
-  expect(view.container).toMatchSnapshot();
-});
+  test('passing HTML attribute', () => {
+    render(<Checkbox label="label" aria-labelledby="labelId" id="check" isChecked aria-label="check" />);
+    expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot();
+  });
 
-test('passing HTML attribute', () => {
-  const view = render(<Checkbox label="label" aria-labelledby="labelId" id="check" isChecked aria-label="check" />);
-  expect(view.container).toMatchSnapshot();
-});
+  test('passing description', () => {
+    render(<Checkbox id="check" label="checkbox" description="Text description..." />);
+    expect(screen.getByText('Text description...')).toBeInTheDocument();
+  });
 
-test('passing description', () => {
-  const view = shallow(<Checkbox id="check" label="checkbox" description="Text description..." />);
-  const descriptionEl = view.find('span[className="pf-c-check__description"]');
-  expect(descriptionEl.length).toBe(1);
-  expect(descriptionEl.text()).toBe('Text description...');
-});
+  test('passing body', () => {
+    render(<Checkbox id="check" label="checkbox" body="This is where custom content goes." />);
 
-test('passing body', () => {
-  const view = shallow(<Checkbox id="check" label="checkbox" body="This is where custom content goes." />);
-  const bodyEl = view.find('span[className="pf-c-check__body"]');
-  expect(bodyEl.length).toBe(1);
-  expect(bodyEl.text()).toBe('This is where custom content goes.');
-});
+    expect(screen.getByText('This is where custom content goes.')).toBeInTheDocument();
+  });
 
-test('checkbox passes value and event to onChange handler', () => {
-  const newValue = true;
-  const event = {
-    currentTarget: { checked: newValue }
-  };
-  const view = shallow(<Checkbox id="check" {...props} aria-label="check" />);
-  view.find('input').simulate('change', event);
-  expect(props.onChange).toBeCalledWith(newValue, event);
-});
+  test('checkbox onChange handler called when component is clicked', () => {
+    const onChangeHandler = jest.fn();
+    render(<Checkbox id="check" onChange={onChangeHandler} aria-label="check" isChecked={false} />);
+
+    userEvent.click(screen.getByLabelText('check'));
+    expect(onChangeHandler).toBeCalled();
+  });
+
+  test('should throw console error when no id is given', () => {
+    const myMock = jest.fn();
+    global.console = { ...global.console, error: myMock };
 
-test('should throw console error when no id is given', () => {
-  const myMock = jest.fn();
-  global.console = { ...global.console, error: myMock };
-  render(<Checkbox {...props} />);
-  expect(myMock).toBeCalled();
+    render(<Checkbox id={undefined} />);
+    expect(myMock).toBeCalled();
+  });
 });

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

@@ -1,214 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`controlled - 3rd state 1`] = `
-<div>
-  <div
-    class="pf-c-check pf-m-standalone"
-  >
-    <input
-      aria-invalid="false"
-      aria-label="check"
-      class="pf-c-check__input"
-      data-ouia-component-id="OUIA-Generated-Checkbox-2"
-      data-ouia-component-type="PF4/Checkbox"
-      data-ouia-safe="true"
-      id="check"
-      type="checkbox"
-    />
-  </div>
-</div>
-`;
+exports[`Checkbox controlled - 3rd state 1`] = `"<input id=\\"check\\" class=\\"pf-c-check__input\\" type=\\"checkbox\\" aria-invalid=\\"false\\" aria-label=\\"check\\" data-ouia-component-type=\\"PF4/Checkbox\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Checkbox-2\\">"`;
 
-exports[`controlled 1`] = `
-<div>
-  <div
-    class="pf-c-check pf-m-standalone"
-  >
-    <input
-      aria-invalid="false"
-      aria-label="check"
-      checked=""
-      class="pf-c-check__input"
-      data-ouia-component-id="OUIA-Generated-Checkbox-1"
-      data-ouia-component-type="PF4/Checkbox"
-      data-ouia-safe="true"
-      id="check"
-      type="checkbox"
-    />
-  </div>
-</div>
-`;
+exports[`Checkbox controlled 1`] = `"<input id=\\"check\\" class=\\"pf-c-check__input\\" type=\\"checkbox\\" aria-invalid=\\"false\\" aria-label=\\"check\\" data-ouia-component-type=\\"PF4/Checkbox\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Checkbox-1\\" checked=\\"\\">"`;
 
-exports[`isDisabled 1`] = `
-<div>
-  <div
-    class="pf-c-check pf-m-standalone"
-  >
-    <input
-      aria-invalid="false"
-      aria-label="check"
-      class="pf-c-check__input"
-      data-ouia-component-id="OUIA-Generated-Checkbox-4"
-      data-ouia-component-type="PF4/Checkbox"
-      data-ouia-safe="true"
-      disabled=""
-      id="check"
-      type="checkbox"
-    />
-  </div>
-</div>
-`;
+exports[`Checkbox isDisabled 1`] = `"<input id=\\"check\\" class=\\"pf-c-check__input\\" type=\\"checkbox\\" aria-invalid=\\"false\\" aria-label=\\"check\\" disabled=\\"\\" data-ouia-component-type=\\"PF4/Checkbox\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Checkbox-4\\">"`;
 
-exports[`label is function 1`] = `
-<div>
-  <div
-    class="pf-c-check"
-  >
-    <input
-      aria-invalid="false"
-      aria-label="check"
-      checked=""
-      class="pf-c-check__input"
-      data-ouia-component-id="OUIA-Generated-Checkbox-6"
-      data-ouia-component-type="PF4/Checkbox"
-      data-ouia-safe="true"
-      id="check"
-      type="checkbox"
-    />
-    <label
-      class="pf-c-check__label"
-      for="check"
-    >
-      <h1>
-        Header
-      </h1>
-    </label>
-  </div>
-</div>
-`;
+exports[`Checkbox label is function 1`] = `"<input id=\\"check\\" class=\\"pf-c-check__input\\" type=\\"checkbox\\" aria-invalid=\\"false\\" aria-label=\\"check\\" data-ouia-component-type=\\"PF4/Checkbox\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Checkbox-6\\" checked=\\"\\">"`;
 
-exports[`label is node 1`] = `
-<div>
-  <div
-    class="pf-c-check"
-  >
-    <input
-      aria-invalid="false"
-      aria-label="check"
-      checked=""
-      class="pf-c-check__input"
-      data-ouia-component-id="OUIA-Generated-Checkbox-7"
-      data-ouia-component-type="PF4/Checkbox"
-      data-ouia-safe="true"
-      id="check"
-      type="checkbox"
-    />
-    <label
-      class="pf-c-check__label"
-      for="check"
-    >
-      <h1>
-        Header
-      </h1>
-    </label>
-  </div>
-</div>
-`;
+exports[`Checkbox label is node 1`] = `"<input id=\\"check\\" class=\\"pf-c-check__input\\" type=\\"checkbox\\" aria-invalid=\\"false\\" aria-label=\\"check\\" data-ouia-component-type=\\"PF4/Checkbox\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Checkbox-7\\" checked=\\"\\">"`;
 
-exports[`label is string 1`] = `
-<div>
-  <div
-    class="pf-c-check"
-  >
-    <input
-      aria-invalid="false"
-      aria-label="check"
-      checked=""
-      class="pf-c-check__input"
-      data-ouia-component-id="OUIA-Generated-Checkbox-5"
-      data-ouia-component-type="PF4/Checkbox"
-      data-ouia-safe="true"
-      id="check"
-      type="checkbox"
-    />
-    <label
-      class="pf-c-check__label"
-      for="check"
-    >
-      Label
-    </label>
-  </div>
-</div>
-`;
+exports[`Checkbox label is string 1`] = `"<input id=\\"check\\" class=\\"pf-c-check__input\\" type=\\"checkbox\\" aria-invalid=\\"false\\" aria-label=\\"check\\" data-ouia-component-type=\\"PF4/Checkbox\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Checkbox-5\\" checked=\\"\\">"`;
 
-exports[`passing HTML attribute 1`] = `
-<div>
-  <div
-    class="pf-c-check"
-  >
-    <input
-      aria-invalid="false"
-      aria-label="check"
-      aria-labelledby="labelId"
-      checked=""
-      class="pf-c-check__input"
-      data-ouia-component-id="OUIA-Generated-Checkbox-9"
-      data-ouia-component-type="PF4/Checkbox"
-      data-ouia-safe="true"
-      id="check"
-      type="checkbox"
-    />
-    <label
-      class="pf-c-check__label"
-      for="check"
-    >
-      label
-    </label>
-  </div>
-</div>
-`;
+exports[`Checkbox passing HTML attribute 1`] = `"<input aria-labelledby=\\"labelId\\" id=\\"check\\" class=\\"pf-c-check__input\\" type=\\"checkbox\\" aria-invalid=\\"false\\" aria-label=\\"check\\" data-ouia-component-type=\\"PF4/Checkbox\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Checkbox-9\\" checked=\\"\\">"`;
 
-exports[`passing class 1`] = `
-<div>
-  <div
-    class="pf-c-check class-123"
-  >
-    <input
-      aria-invalid="false"
-      aria-label="check"
-      checked=""
-      class="pf-c-check__input"
-      data-ouia-component-id="OUIA-Generated-Checkbox-8"
-      data-ouia-component-type="PF4/Checkbox"
-      data-ouia-safe="true"
-      id="check"
-      type="checkbox"
-    />
-    <label
-      class="pf-c-check__label"
-      for="check"
-    >
-      label
-    </label>
-  </div>
-</div>
-`;
+exports[`Checkbox passing class 1`] = `"<input id=\\"check\\" class=\\"pf-c-check__input\\" type=\\"checkbox\\" aria-invalid=\\"false\\" aria-label=\\"check\\" data-ouia-component-type=\\"PF4/Checkbox\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Checkbox-8\\" checked=\\"\\">"`;
 
-exports[`uncontrolled 1`] = `
-<div>
-  <div
-    class="pf-c-check pf-m-standalone"
-  >
-    <input
-      aria-invalid="false"
-      aria-label="check"
-      class="pf-c-check__input"
-      data-ouia-component-id="OUIA-Generated-Checkbox-3"
-      data-ouia-component-type="PF4/Checkbox"
-      data-ouia-safe="true"
-      id="check"
-      type="checkbox"
-    />
-  </div>
-</div>
-`;
+exports[`Checkbox uncontrolled 1`] = `"<input id=\\"check\\" class=\\"pf-c-check__input\\" type=\\"checkbox\\" aria-invalid=\\"false\\" aria-label=\\"check\\" data-ouia-component-type=\\"PF4/Checkbox\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Checkbox-3\\">"`;

package/src/components/Checkbox/examples/Checkbox.md

@@ -8,142 +8,38 @@ propComponents: ['Checkbox']
 import './checkbox.css';
 
 ## Examples
+
 ### Controlled
-```js
-import React from 'react';
-import { Checkbox } from '@patternfly/react-core';
-
-class ControlledCheckbox extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      check1: false,
-      check2: false,
-      check3: false,
-      check4: false
-    };
-    this.handleChange = (checked, event) => {
-      const target = event.target;
-      const value = target.type === 'checkbox' ? target.checked : target.value;
-      const name = target.name;
-      this.setState({ [name]: value });
-    };
-  }
-
-  componentDidUpdate(_prevProps, prevState) {
-    if (prevState.check1 !== this.state.check1 && this.state.check1 !== null) {
-      this.setState({
-        check2: this.state.check1,
-        check3: this.state.check1,
-      })
-    }
-
-    if (prevState.check2 !== this.state.check2 || prevState.check3 !== this.state.check3) {
-      this.setState({
-        check1: (this.state.check2 && this.state.check3) || (this.state.check2 || this.state.check3 ? null : false)
-      })
-    }
-  }
-
-  render() {
-    return (
-      <React.Fragment>
-        <Checkbox
-          label="Parent CheckBox"
-          isChecked={this.state.check1}
-          onChange={this.handleChange}
-          aria-label="controlled checkbox example"
-          id="check-1"
-          name="check1"
-        />
-        <Checkbox
-          className="nested"
-          label="Child CheckBox 1"
-          isChecked={this.state.check2}
-          onChange={this.handleChange}
-          aria-label="controlled checkbox example"
-          id="check-2"
-          name="check2"
-        />
-        <Checkbox
-          className="nested"
-          label="Child CheckBox 2"
-          isChecked={this.state.check3}
-          onChange={this.handleChange}
-          aria-label="controlled checkbox example"
-          id="check-3"
-          name="check3"
-        />
-        <Checkbox
-          label="Controlled CheckBox"
-          isChecked={this.state.check4}
-          onChange={this.handleChange}
-          aria-label="controlled checkbox example"
-          id="check-4"
-          name="check4"
-        />
-      </React.Fragment>
-    );
-  }
-}
+
+```ts file='./CheckboxControlled.tsx'
 ```
 
 ### Uncontrolled
-```js
-import React from 'react';
-import { Checkbox } from '@patternfly/react-core';
-
-<React.Fragment>
-  <Checkbox label="Uncontrolled CheckBox" aria-label="uncontrolled checkbox example" id="check-5" />
-  <Checkbox label="Uncontrolled CheckBox" aria-label="uncontrolled checkbox example" id="check-6" />
-</React.Fragment>
+
+```ts file='./CheckboxUncontrolled.tsx'
 ```
 
 ### Disabled
-```js
-import React from 'react';
-import { Checkbox } from '@patternfly/react-core';
-
-<React.Fragment>
-  <Checkbox
-    id="check-7"
-    label="Disabled CheckBox"
-    aria-label="disabled checked checkbox example"
-    defaultChecked
-    isDisabled
-  />{' '}
-  <Checkbox id="check-8" label="Disabled CheckBox" aria-label="disabled checkbox example" isDisabled />
-</React.Fragment>
+
+```ts file='./CheckboxDisabled.tsx'
 ```
 
 ### Checkbox with description
-```js
-import React from 'react';
-import { Checkbox } from '@patternfly/react-core';
 
-<Checkbox id="check-9" label="Checkbox with description" aria-label="Checkbox with description example" description="Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS or GCP."/>
+```ts file='./CheckboxWithDescription.tsx'
 ```
 
 ### Checkbox with body
-```js
-import React from 'react';
-import { Checkbox } from '@patternfly/react-core';
 
-<Checkbox id="check-10" label="Checkbox with body" aria-label="Checkbox with body example" body="This is where custom content goes."/>
+```ts file='./CheckboxWithBody.tsx'
 ```
 
 ### Checkbox with description and body
-```js
-import React from 'react';
-import { Checkbox } from '@patternfly/react-core';
 
-<Checkbox id="check-11" label="Checkbox with description and body" aria-label="Checkbox with body example" description="Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS or GCP." body="This is where custom content goes."/>
+```ts file='./CheckboxWithDescriptionBody.tsx'
 ```
 
 ### Standalone input
-```js
-import React from 'react';
-import { Checkbox } from '@patternfly/react-core';
 
-<Checkbox id="check-standalone-input" name="check-standalone-input" aria-label="Standalone input"/>
+```ts file='./CheckboxStandaloneInput.tsx'
 ```

package/src/components/Checkbox/examples/CheckboxControlled.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { Checkbox } from '@patternfly/react-core';
+
+export const CheckboxControlled: React.FunctionComponent = () => {
+  const [isChecked1, setIsChecked1] = React.useState<boolean>(false);
+  const [isChecked2, setIsChecked2] = React.useState<boolean>(false);
+  const [isChecked3, setIsChecked3] = React.useState<boolean>(false);
+  const [isChecked4, setIsChecked4] = React.useState<boolean>(false);
+
+  const handleChange = (checked: boolean, event: React.FormEvent<HTMLInputElement>) => {
+    const target = event.currentTarget;
+    const name = target.name;
+
+    switch (name) {
+      case 'check1':
+        setIsChecked1(checked);
+        break;
+      case 'check2':
+        setIsChecked2(checked);
+        break;
+      case 'check3':
+        setIsChecked3(checked);
+        break;
+      case 'check4':
+        setIsChecked4(checked);
+        break;
+      default:
+        // eslint-disable-next-line no-console
+        console.log(name);
+    }
+  };
+
+  React.useEffect(() => {
+    if (isChecked1 !== null) {
+      setIsChecked2(isChecked1);
+      setIsChecked3(isChecked1);
+    }
+  }, [isChecked1]);
+
+  React.useEffect(() => {
+    setIsChecked1((isChecked2 && isChecked3) || (isChecked2 || isChecked3 ? null : false));
+  }, [isChecked2, isChecked3]);
+
+  return (
+    <React.Fragment>
+      <Checkbox
+        label="Parent CheckBox"
+        isChecked={isChecked1}
+        onChange={handleChange}
+        id="controlled-check-1"
+        name="check1"
+      />
+      <Checkbox
+        className="nested"
+        label="Child CheckBox 1"
+        isChecked={isChecked2}
+        onChange={handleChange}
+        id="controlled-check-2"
+        name="check2"
+      />
+      <Checkbox
+        className="nested"
+        label="Child CheckBox 2"
+        isChecked={isChecked3}
+        onChange={handleChange}
+        id="controlled-check-3"
+        name="check3"
+      />
+      <Checkbox
+        label="Controlled CheckBox"
+        isChecked={isChecked4}
+        onChange={handleChange}
+        id="controlled-check-4"
+        name="check4"
+      />
+    </React.Fragment>
+  );
+};

package/src/components/Checkbox/examples/CheckboxDisabled.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Checkbox } from '@patternfly/react-core';
+
+export const CheckboxDisabled: React.FunctionComponent = () => (
+  <React.Fragment>
+    <Checkbox id="disabled-check-1" label="Disabled CheckBox 1" defaultChecked isDisabled />
+    <Checkbox id="disabled-check-2" label="Disabled CheckBox 2" isDisabled />
+  </React.Fragment>
+);

package/src/components/Checkbox/examples/CheckboxStandaloneInput.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Checkbox } from '@patternfly/react-core';
+
+export const CheckboxStandaloneInput: React.FunctionComponent = () => (
+  <Checkbox id="standalone-check" name="standlone-check" aria-label="Standalone input" />
+);

package/src/components/Checkbox/examples/CheckboxUncontrolled.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Checkbox } from '@patternfly/react-core';
+
+export const CheckboxUncontrolled: React.FunctionComponent = () => (
+  <React.Fragment>
+    <Checkbox label="Uncontrolled CheckBox 1" id="uncontrolled-check-1" />
+    <Checkbox label="Uncontrolled CheckBox 2" id="uncontrolled-check-2" />
+  </React.Fragment>
+);

package/src/components/Checkbox/examples/CheckboxWithBody.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Checkbox } from '@patternfly/react-core';
+
+export const CheckboxWithBody: React.FunctionComponent = () => (
+  <Checkbox id="body-check-1" label="Checkbox with body" body="This is where custom content goes." />
+);

package/src/components/Checkbox/examples/CheckboxWithDescription.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Checkbox } from '@patternfly/react-core';
+
+export const CheckboxWithDescription: React.FunctionComponent = () => (
+  <Checkbox
+    id="description-check-1"
+    label="Checkbox with description"
+    description="Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS or GCP."
+  />
+);

package/src/components/Checkbox/examples/CheckboxWithDescriptionBody.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Checkbox } from '@patternfly/react-core';
+
+export const CheckboxWithDescriptionBody: React.FunctionComponent = () => (
+  <Checkbox
+    id="description-body-check"
+    label="Checkbox with description and body"
+    description="Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS or GCP."
+    body="This is where custom content goes."
+  />
+);