@patternfly/react-core 6.0.0-alpha.3 → 6.0.0-alpha.30

package/src/components/Checkbox/Checkbox.tsx

@@ -8,10 +8,16 @@ import { ASTERISK } from '../../helpers/htmlConstants';
 export interface CheckboxProps
   extends Omit<React.HTMLProps<HTMLInputElement>, 'type' | 'onChange' | 'disabled' | 'label'>,
     OUIAProps {
-  /** Additional classes added to the checkbox. */
+  /** Additional classes added to the checkbox wrapper. This wrapper will be div element by default. It will be a label element if
+   * isLabelWrapped is true, or it can be overridden by any element specified in the component prop.
+   */
   className?: string;
-  /** Additional classed added to the radio input */
+  /** Additional classes added to the checkbox input. */
   inputClassName?: string;
+  /** Flag to indicate whether the checkbox wrapper element is a <label> element for the checkbox input. Will not apply if a component prop (with a value other than a "label") is specified. */
+  isLabelWrapped?: boolean;
+  /** Flag to show if the checkbox label is shown before the checkbox input. */
+  isLabelBeforeButton?: boolean;
   /** Flag to show if the checkbox selection is valid or invalid. */
   isValid?: boolean;
   /** Flag to show if the checkbox is disabled. */
@@ -33,7 +39,7 @@ export interface CheckboxProps
   description?: React.ReactNode;
   /** Body text of the checkbox */
   body?: React.ReactNode;
-  /** Sets the input wrapper component to render. Defaults to <div> */
+  /** Sets the checkbox wrapper component to render. Defaults to "div". If set to "label", behaves the same as if isLabelWrapped prop was specified. */
   component?: React.ElementType;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
@@ -52,13 +58,13 @@ class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
   static displayName = 'Checkbox';
   static defaultProps: PickOptional<CheckboxProps> = {
     className: '',
+    isLabelWrapped: false,
     isValid: true,
     isDisabled: false,
     isRequired: false,
     isChecked: false,
     onChange: defaultOnChange,
-    ouiaSafe: true,
-    component: 'div'
+    ouiaSafe: true
   };
 
   constructor(props: any) {
@@ -78,6 +84,8 @@ class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
       className,
       inputClassName,
       onChange,
+      isLabelWrapped,
+      isLabelBeforeButton,
       isValid,
       isDisabled,
       isRequired,
@@ -89,7 +97,7 @@ class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
       body,
       ouiaId,
       ouiaSafe,
-      component: Component,
+      component,
       ...props
     } = this.props;
     if (!props.id) {
@@ -107,31 +115,57 @@ class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
       checkedProps.defaultChecked = defaultChecked;
     }
 
+    const inputRendered = (
+      <input
+        {...props}
+        className={css(styles.checkInput, inputClassName)}
+        type="checkbox"
+        onChange={this.handleChange}
+        aria-invalid={!isValid}
+        aria-label={ariaLabel}
+        disabled={isDisabled}
+        required={isRequired}
+        ref={(elem) => elem && (elem.indeterminate = isChecked === null)}
+        {...checkedProps}
+        {...getOUIAProps(Checkbox.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
+      />
+    );
+
+    const wrapWithLabel = (isLabelWrapped && !component) || component === 'label';
+
+    const Label = wrapWithLabel ? 'span' : 'label';
+    const labelRendered = label ? (
+      <Label
+        className={css(styles.checkLabel, isDisabled && styles.modifiers.disabled)}
+        htmlFor={!wrapWithLabel && props.id}
+      >
+        {label}
+        {isRequired && (
+          <span className={css(styles.checkLabelRequired)} aria-hidden="true">
+            {ASTERISK}
+          </span>
+        )}
+      </Label>
+    ) : null;
+
+    const Component = component ?? (wrapWithLabel ? 'label' : 'div');
+
     checkedProps.checked = checkedProps.checked === null ? false : checkedProps.checked;
     return (
-      <Component className={css(styles.check, !label && styles.modifiers.standalone, className)}>
-        <input
-          {...props}
-          className={css(styles.checkInput, inputClassName)}
-          type="checkbox"
-          onChange={this.handleChange}
-          aria-invalid={!isValid}
-          aria-label={ariaLabel}
-          disabled={isDisabled}
-          required={isRequired}
-          ref={(elem) => elem && (elem.indeterminate = isChecked === null)}
-          {...checkedProps}
-          {...getOUIAProps(Checkbox.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
-        />
-        {label && (
-          <label className={css(styles.checkLabel, isDisabled && styles.modifiers.disabled)} htmlFor={props.id}>
-            {label}
-            {isRequired && (
-              <span className={css(styles.checkLabelRequired)} aria-hidden="true">
-                {ASTERISK}
-              </span>
-            )}
-          </label>
+      <Component
+        className={css(styles.check, !label && styles.modifiers.standalone, className)}
+        htmlFor={wrapWithLabel && props.id}
+      >
+        {isLabelBeforeButton ? (
+          <>
+            {labelRendered}
+            {inputRendered}
+          </>
+        ) : (
+          <>
+            {inputRendered}
+            {labelRendered}
+          </>
         )}
         {description && <span className={css(styles.checkDescription)}>{description}</span>}
         {body && <span className={css(styles.checkBody)}>{body}</span>}

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

@@ -231,6 +231,47 @@ test('Renders with the provided component', () => {
   expect(screen.getByRole('checkbox').parentElement?.tagName).toBe('SPAN');
 });
 
+test('Renders with the label wrapper if isLabelWrapped is provided', () => {
+  render(<Checkbox id="test-id" isLabelWrapped />);
+
+  expect(screen.getByRole('checkbox').parentElement?.tagName).toBe('LABEL');
+});
+
+test('Renders with span element around the inner label text if isLabelWrapped is provided', () => {
+  const labelText = 'test checkbox label';
+  render(<Checkbox id="test-id" isLabelWrapped label={labelText} />);
+
+  expect(screen.getByText(labelText).tagName).toBe('SPAN');
+});
+
+test('Renders with the provided component although isLabelWrapped is provided', () => {
+  render(<Checkbox id="test-id" isLabelWrapped component="h3" />);
+
+  expect(screen.getByRole('checkbox').parentElement?.tagName).toBe('H3');
+});
+
+test('Renders with the label wrapper if component is set to label', () => {
+  render(<Checkbox id="test-id" component="label" />);
+
+  expect(screen.getByRole('checkbox').parentElement?.tagName).toBe('LABEL');
+});
+
+test('Renders with span element around the inner label text if component is set to label', () => {
+  const labelText = 'test checkbox label';
+  render(<Checkbox id="test-id" component="label" label={labelText} />);
+
+  expect(screen.getByText(labelText).tagName).toBe('SPAN');
+});
+
+test('Renders label before checkbox input if isLabelBeforeButton is provided', () => {
+  render(<Checkbox id="test-id" isLabelBeforeButton label={'test checkbox label'} />);
+
+  const wrapper = screen.getByRole('checkbox').parentElement!;
+
+  expect(wrapper.children[0].tagName).toBe('LABEL');
+  expect(wrapper.children[1].tagName).toBe('INPUT');
+});
+
 test(`Spreads additional props`, () => {
   render(<Checkbox id="test-id" data-testid="test-id" />);
 

package/src/components/Chip/Chip.tsx

@@ -149,6 +149,8 @@ class Chip extends React.Component<ChipProps, ChipState> {
       isOverflowChip,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       tooltipPosition,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      id: idProp,
       component,
       ouiaId,
       textMaxWidth,

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

@@ -7,7 +7,6 @@ exports[`Matches snapshot 1`] = `
     data-ouia-component-id="snapshot-test"
     data-ouia-component-type="PF5/Chip"
     data-ouia-safe="true"
-    id="snapshot-test"
   >
     <span
       class="pf-v5-c-chip__content"

package/src/components/ClipboardCopy/ClipboardCopy.tsx

@@ -120,7 +120,8 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   componentDidUpdate = (prevProps: ClipboardCopyProps, prevState: ClipboardCopyState) => {
     if (prevProps.children !== this.props.children) {
-      this.setState({ text: this.props.children as string });
+      const newText = this.props.children as string;
+      this.setState({ text: newText, textWhenExpanded: newText });
     }
   };
 

package/src/components/DataList/__tests__/__snapshots__/DataListAction.test.tsx.snap~HEAD

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renders to match snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-data-list__item-action"
+  >
+    test
+  </div>
+</DocumentFragment>
+`;

package/src/components/DataList/__tests__/__snapshots__/DataListAction.test.tsx.snap~main

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renders to match snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-data-list__item-action"
+  >
+    test
+  </div>
+</DocumentFragment>
+`;

package/src/components/DataList/__tests__/__snapshots__/DataListItemCells.test.tsx.snap~HEAD

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Cells renders to match snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-data-list__item-content"
+  />
+</DocumentFragment>
+`;

package/src/components/DataList/__tests__/__snapshots__/DataListItemCells.test.tsx.snap~main

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Cells renders to match snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-data-list__item-content"
+  />
+</DocumentFragment>
+`;

package/src/components/DataList/__tests__/__snapshots__/DataListItemRow.test.tsx.snap~HEAD

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Item row renders to match snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-data-list__item-row"
+  />
+</DocumentFragment>
+`;

package/src/components/DataList/__tests__/__snapshots__/DataListItemRow.test.tsx.snap~main

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Item row renders to match snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-data-list__item-row"
+  />
+</DocumentFragment>
+`;

package/src/components/DataList/examples/DataList.md

@@ -86,9 +86,9 @@ import global_BorderWidth_sm from '@patternfly/react-tokens/dist/esm/global_Bord
 
 ### Draggable
 
-Draggable data lists used to have their own HTML5-based API for drag and drop, which wasn't able to fulfill requirements such as custom styling on items being dragged. So we wrote generic `DragDrop`, `Draggable`, and `Droppable` components for this purpose. Use those new components instead of the deprecated (and buggy!) HTML5-based API.
+Note: There is a new recommended drag and drop implementation with full keyboard functionality, which replaces this implementation. To adhere to our new recommendations, refer to the [drag and drop demos](/components/drag-and-drop/react-next-demos).
 
-Note: Keyboard accessibility and screen reader accessibility for the `DragDrop` component are still in development.
+Previously, draggable data lists had their own API for the [drag and drop component](/components/drag-and-drop), which wasn't flexible enough to allow custom styling for items as they are dragged. To address this disparity, `<DragDrop>`, `<Draggable>`, and `<Droppable>` components were added to replace our now deprecated HTML5-based API. Keyboard and screen reader accessibility for the `<DragDrop>` component is still in development.
 
 ```ts isBeta file="./DataListDraggable.tsx"
 

package/src/components/DragDrop/examples/DragDrop.md

@@ -2,10 +2,10 @@
 id: Drag and drop
 section: components
 propComponents: [DragDrop, Draggable, Droppable, DraggableItemPosition]
-beta: true
+title: Drag and drop
 ---
 
-You can use the `DragDrop` component to move items in or between lists. The `DragDrop` component should contain `Droppable` components which contain `Draggable` components.
+You can use the `<DragDrop>` component to move items in or between lists. The `<DragDrop>` component should contain `<Droppable>` components which contain `<Draggable>` components.
 
 ```ts noLive
 import React from 'react';
@@ -35,9 +35,11 @@ Note: Keyboard accessibility and screen reader accessibility are still in develo
 ### Basic
 
 ```ts file="./DragDropBasic.tsx"
+
 ```
 
 ### Multiple lists
 
 ```ts file="./DragDropMultipleLists.tsx"
+
 ```

package/src/components/DragDrop/examples/DragDropBasic.tsx

@@ -20,14 +20,14 @@ const getItems = (count: number) =>
   }));
 
 const reorder = (list: ItemType[], startIndex: number, endIndex: number) => {
-  const result = list;
+  const result = [...list];
   const [removed] = result.splice(startIndex, 1);
   result.splice(endIndex, 0, removed);
   return result;
 };
 
 export const DragDropBasic: React.FunctionComponent = () => {
-  const [items, setItems] = React.useState(getItems(10));
+  const [items, setItems] = React.useState<ItemType[]>(getItems(10));
 
   function onDrop(source: SourceType, dest: DestinationType) {
     if (dest) {
@@ -42,8 +42,8 @@ export const DragDropBasic: React.FunctionComponent = () => {
   return (
     <DragDrop onDrop={onDrop}>
       <Droppable>
-        {items.map(({ content }, i) => (
-          <Draggable key={i} style={{ padding: '8px' }}>
+        {items.map(({ id, content }) => (
+          <Draggable key={id} style={{ padding: '8px' }}>
             {content}
           </Draggable>
         ))}

package/src/components/DragDrop/examples/DragDropMultipleLists.tsx

@@ -11,6 +11,11 @@ interface SourceType {
   index: number;
 }
 
+interface MultipleListState {
+  items1: ItemType[];
+  items2: ItemType[];
+}
+
 interface DestinationType extends SourceType {}
 
 const getItems = (count: number, startIndex: number) =>
@@ -35,7 +40,7 @@ const move = (source: ItemType[], destination: ItemType[], sourceIndex: number,
 };
 
 export const DragDropMultipleLists: React.FunctionComponent = () => {
-  const [items, setItems] = React.useState({
+  const [items, setItems] = React.useState<MultipleListState>({
     items1: getItems(10, 0),
     items2: getItems(5, 10)
   });
@@ -84,7 +89,7 @@ export const DragDropMultipleLists: React.FunctionComponent = () => {
         {Object.entries(items).map(([key, subitems]) => (
           <SplitItem key={key} style={{ flex: 1 }}>
             <Droppable zone="multizone" droppableId={key}>
-              {subitems.map(({ id, content }) => (
+              {(subitems as ItemType[]).map(({ id, content }) => (
                 <Draggable key={id} style={{ padding: '8px' }}>
                   {content}
                 </Draggable>

package/src/components/DragDrop/index.ts

@@ -1,3 +1,4 @@
 export * from './DragDrop';
 export * from './Draggable';
 export * from './Droppable';
+export * from './DroppableContext';

package/src/components/Drawer/Drawer.tsx

@@ -4,7 +4,7 @@ import { css } from '@patternfly/react-styles';
 
 export enum DrawerColorVariant {
   default = 'default',
-  light200 = 'light-200',
+  secondary = 'secondary',
   noBackground = 'no-background'
 }
 

package/src/components/Drawer/DrawerContent.tsx

@@ -12,12 +12,11 @@ export interface DrawerContentProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered in the drawer panel. */
   panelContent: React.ReactNode;
   /** Color variant of the background of the drawer panel */
-  colorVariant?: DrawerColorVariant | 'light-200' | 'no-background' | 'default';
+  colorVariant?: DrawerColorVariant | 'no-background' | 'default' | 'secondary';
 }
 
 export const DrawerContent: React.FunctionComponent<DrawerContentProps> = ({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  className = '',
+  className,
   children,
   panelContent,
   colorVariant = DrawerColorVariant.default,
@@ -30,8 +29,8 @@ export const DrawerContent: React.FunctionComponent<DrawerContentProps> = ({
       <div
         className={css(
           styles.drawerContent,
-          colorVariant === DrawerColorVariant.light200 && styles.modifiers.light_200,
           colorVariant === DrawerColorVariant.noBackground && styles.modifiers.noBackground,
+          colorVariant === DrawerColorVariant.secondary && styles.modifiers.secondary,
           className
         )}
         ref={drawerContentRef}

package/src/components/Drawer/DrawerHead.tsx

@@ -1,28 +1,22 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
 import { css } from '@patternfly/react-styles';
-import { DrawerPanelBody } from './DrawerPanelBody';
 
 export interface DrawerHeadProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the drawer head. */
   className?: string;
   /** Content to be rendered in the drawer head */
   children?: React.ReactNode;
-  /** Indicates if there should be no padding around the drawer panel body of the head*/
-  hasNoPadding?: boolean;
 }
 
 export const DrawerHead: React.FunctionComponent<DrawerHeadProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   children,
-  hasNoPadding = false,
   ...props
 }: DrawerHeadProps) => (
-  <DrawerPanelBody hasNoPadding={hasNoPadding}>
-    <div className={css(styles.drawerHead, className)} {...props}>
-      {children}
-    </div>
-  </DrawerPanelBody>
+  <div className={css(styles.drawerHead, className)} {...props}>
+    {children}
+  </div>
 );
 DrawerHead.displayName = 'DrawerHead';

package/src/components/Drawer/DrawerPanelContent.tsx

@@ -55,7 +55,7 @@ export interface DrawerPanelContentProps extends Omit<React.HTMLProps<HTMLDivEle
     '2xl'?: 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100';
   };
   /** Color variant of the background of the drawer panel */
-  colorVariant?: DrawerColorVariant | 'light-200' | 'no-background' | 'default';
+  colorVariant?: DrawerColorVariant | 'no-background' | 'default' | 'secondary';
   /** Adds and customizes a focus trap on the drawer panel content. */
   focusTrap?: DrawerPanelFocusTrapObject;
 }
@@ -63,7 +63,7 @@ let isResizing: boolean = null;
 let newSize: number = 0;
 
 export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps> = ({
-  className = '',
+  className,
   id,
   children,
   hasNoBorder = false,
@@ -366,8 +366,8 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
               isResizable && styles.modifiers.resizable,
               hasNoBorder && styles.modifiers.noBorder,
               formatBreakpointMods(widths, styles),
-              colorVariant === DrawerColorVariant.light200 && styles.modifiers.light_200,
               colorVariant === DrawerColorVariant.noBackground && styles.modifiers.noBackground,
+              colorVariant === DrawerColorVariant.secondary && styles.modifiers.secondary,
               className
             )}
             onTransitionEnd={(ev) => {

package/src/components/Drawer/DrawerPanelDescription.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
+import { css } from '@patternfly/react-styles';
+
+/** Provides a description within the drawer panel. This should typically follow the drawer head. */
+
+export interface DrawerPanelDescriptionProps extends React.HTMLProps<HTMLDivElement> {
+  /** Additional classes added to the drawer description. */
+  className?: string;
+  /** Content to be rendered in the drawer description */
+  children: React.ReactNode;
+}
+
+export const DrawerPanelDescription: React.FunctionComponent<DrawerPanelDescriptionProps> = ({
+  className,
+  children,
+  ...props
+}: DrawerPanelDescriptionProps) => (
+  <div className={css(styles.drawerDescription, className)} {...props}>
+    {children}
+  </div>
+);
+DrawerPanelDescription.displayName = 'DrawerPanelDescription';

package/src/components/Drawer/DrawerSection.tsx

@@ -9,7 +9,7 @@ export interface DrawerSectionProps extends React.HTMLProps<HTMLDivElement> {
   /** Content to be rendered in the drawer section. */
   children?: React.ReactNode;
   /** Color variant of the background of the drawer Section */
-  colorVariant?: DrawerColorVariant | 'light-200' | 'no-background' | 'default';
+  colorVariant?: DrawerColorVariant | 'no-background' | 'default' | 'secondary';
 }
 
 export const DrawerSection: React.FunctionComponent<DrawerSectionProps> = ({
@@ -22,8 +22,8 @@ export const DrawerSection: React.FunctionComponent<DrawerSectionProps> = ({
   <div
     className={css(
       styles.drawerSection,
-      colorVariant === DrawerColorVariant.light200 && styles.modifiers.light_200,
       colorVariant === DrawerColorVariant.noBackground && styles.modifiers.noBackground,
+      colorVariant === DrawerColorVariant.secondary && styles.modifiers.secondary,
       className
     )}
     {...props}

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

@@ -6,8 +6,8 @@ import {
   DrawerContentBody,
   DrawerHead,
   DrawerPanelBody,
-  DrawerColorVariant,
-  DrawerPanelContent
+  DrawerPanelContent,
+  DrawerColorVariant
 } from '../';
 import React from 'react';
 import { render } from '@testing-library/react';
@@ -78,7 +78,7 @@ test(`Drawer has resizable css and color variants`, () => {
       minSize={'200px'}
       defaultSize={'300px'}
       maxSize={'400px'}
-      colorVariant={DrawerColorVariant.light200}
+      colorVariant={DrawerColorVariant.secondary}
     >
       <DrawerHead>
         <span>drawer-panel</span>

package/src/components/Drawer/__tests__/DrawerPanelContent.test.tsx

@@ -2,6 +2,37 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { DrawerPanelContent } from '../DrawerPanelContent';
 import { Drawer } from '../Drawer';
+import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
+
+test(`Renders with only class ${styles.drawerPanel} by default`, () => {
+  render(
+    <Drawer isExpanded>
+      <DrawerPanelContent>Drawer panel content</DrawerPanelContent>
+    </Drawer>
+  );
+
+  expect(screen.getByText('Drawer panel content')).toHaveClass(styles.drawerPanel, { exact: true });
+});
+
+test(`Renders with class ${styles.modifiers.noBackground} when colorVariant="no-background"`, () => {
+  render(
+    <Drawer isExpanded>
+      <DrawerPanelContent colorVariant="no-background">Drawer panel content</DrawerPanelContent>
+    </Drawer>
+  );
+
+  expect(screen.getByText('Drawer panel content')).toHaveClass(styles.modifiers.noBackground);
+});
+
+test(`Renders with class ${styles.modifiers.secondary} when colorVariant="secondary"`, () => {
+  render(
+    <Drawer isExpanded>
+      <DrawerPanelContent colorVariant="secondary">Drawer panel content</DrawerPanelContent>
+    </Drawer>
+  );
+
+  expect(screen.getByText('Drawer panel content')).toHaveClass(styles.modifiers.secondary);
+});
 
 test('Does not render with aria-labelledby by default', () => {
   render(

package/src/components/Drawer/__tests__/DrawerPanelDescription.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { DrawerPanelDescription } from '../DrawerPanelDescription';
+import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
+
+test(`Renders with only class ${styles.drawerDescription} by default`, () => {
+  render(<DrawerPanelDescription>description content</DrawerPanelDescription>);
+
+  expect(screen.getByText('description content')).toHaveClass(styles.drawerDescription, { exact: true });
+});
+
+test(`Renders with custom class when className is passed`, () => {
+  render(<DrawerPanelDescription className="test-class">description content</DrawerPanelDescription>);
+
+  expect(screen.getByText('description content')).toHaveClass('test-class');
+});
+
+test(`Spreads props`, () => {
+  render(<DrawerPanelDescription id="test-id">description content</DrawerPanelDescription>);
+
+  expect(screen.getByText('description content')).toHaveAttribute('id', 'test-id');
+});
+
+test(`Matches snapshot`, () => {
+  const { asFragment } = render(<DrawerPanelDescription>description content</DrawerPanelDescription>);
+
+  expect(asFragment()).toMatchSnapshot();
+});