@patternfly/react-core 5.4.0-prerelease.9 → 5.4.1

package/src/components/Wizard/WizardNavItem.tsx

@@ -10,7 +10,11 @@ import { WizardNavItemStatus } from './types';
 import globalSpacerSm from '@patternfly/react-tokens/dist/esm/global_spacer_sm';
 import globalDangerColor100 from '@patternfly/react-tokens/dist/esm/global_danger_color_100';
 
-export interface WizardNavItemProps extends OUIAProps {
+export interface WizardNavItemProps
+  extends Omit<React.HTMLProps<HTMLLIElement>, 'onClick' | 'id' | 'content' | 'type'>,
+    OUIAProps {
+  /** Additional classes spread to the wizard nav item */
+  className?: string;
   /** Can nest a WizardNav component for substeps */
   children?: React.ReactNode;
   /** The content to display in the navigation item */
@@ -55,7 +59,9 @@ export const WizardNavItem = ({
   status = 'default',
   target,
   ouiaId,
-  ouiaSafe = true
+  ouiaSafe = true,
+  className,
+  ...props
 }: WizardNavItemProps) => {
   const [isExpanded, setIsExpanded] = React.useState(false);
   const ouiaProps = useOUIAProps(WizardNavItem.displayName, ouiaId, ouiaSafe);
@@ -74,8 +80,10 @@ export const WizardNavItem = ({
       className={css(
         styles.wizardNavItem,
         isExpandable && styles.modifiers.expandable,
-        isExpandable && isExpanded && styles.modifiers.expanded
+        isExpandable && isExpanded && styles.modifiers.expanded,
+        className
       )}
+      {...props}
     >
       <NavItemComponent
         {...(NavItemComponent === 'a'

package/src/components/Wizard/__tests__/WizardBody.test.tsx

@@ -3,11 +3,20 @@ import { render, screen } from '@testing-library/react';
 import { WizardBody } from '../WizardBody';
 
 test('renders children without additional props', () => {
-  const { container } = render(<WizardBody>content</WizardBody>);
+  render(<WizardBody data-testid="test-id">content</WizardBody>);
 
-  expect(container).toHaveTextContent('content');
-  expect(container).not.toHaveAttribute('aria-label');
-  expect(container).not.toHaveAttribute('aria-labelledby');
+  expect(screen.getByTestId('test-id')).toHaveTextContent('content');
+  expect(screen.getByTestId('test-id')).not.toHaveAttribute('aria-label');
+  expect(screen.getByTestId('test-id')).not.toHaveAttribute('aria-labelledby');
+});
+
+test(`Renders with additional classes when className is passed`, () => {
+  render(
+    <WizardBody className="custom-class" data-testid="test-id">
+      Test
+    </WizardBody>
+  );
+  expect(screen.getByTestId('test-id')).toHaveClass('custom-class');
 });
 
 test('has no padding className when hasNoPadding is not specified', () => {
@@ -21,11 +30,19 @@ test('has padding className when hasNoPadding is specified', () => {
 });
 
 test('wrapper element is of type div when component is not specified', () => {
-  const { container } = render(<WizardBody aria-label="Wizard body">content</WizardBody>);
-  expect(container.firstElementChild?.tagName).toEqual('DIV');
+  render(
+    <WizardBody data-testid="test-id" aria-label="Wizard body">
+      content
+    </WizardBody>
+  );
+  expect(screen.getByTestId('test-id').tagName).toEqual('DIV');
 });
 
 test('renders with custom component', () => {
-  const { container } = render(<WizardBody component="main">content</WizardBody>);
-  expect(container.firstElementChild?.tagName).toEqual('MAIN');
+  render(
+    <WizardBody component="main" data-testid="test-id">
+      content
+    </WizardBody>
+  );
+  expect(screen.getByTestId('test-id').tagName).toEqual('MAIN');
 });

package/src/components/Wizard/__tests__/WizardFooter.test.tsx

@@ -20,6 +20,15 @@ test('has button names of "Next", "Back", and "Cancel" by default', () => {
   expect(screen.getByRole('button', { name: 'Cancel' })).toBeVisible();
 });
 
+test(`Renders with additional classes when className is passed`, () => {
+  render(
+    <WizardFooter {...defaultProps} className="custom-class" data-testid="test-id">
+      Test
+    </WizardFooter>
+  );
+  expect(screen.getByTestId('test-id')).toHaveClass('custom-class');
+});
+
 test('calls onNext when the next button is clicked', async () => {
   const onNext = jest.fn();
   const user = userEvent.setup();

package/src/components/Wizard/__tests__/WizardHeader.test.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import { WizardHeader } from '../WizardHeader';
+import userEvent from '@testing-library/user-event';
+
+// close button related tests
+test(`Renders close button by default`, () => {
+  render(<WizardHeader data-testid="header-component" />);
+  expect(screen.getByRole('button')).toBeInTheDocument();
+});
+
+test(`Close button is hidden when isCloseHidden is passed`, () => {
+  render(<WizardHeader isCloseHidden />);
+  expect(screen.queryByRole('button')).toBeNull();
+});
+
+test(`Close button renders passed aria label`, () => {
+  render(<WizardHeader closeButtonAriaLabel="test aria label" />);
+  expect(screen.getByRole('button', { name: 'test aria label' })).toBeInTheDocument();
+});
+
+test(`Callback function fires when onClose passed`, async () => {
+  const onClose = jest.fn();
+  const user = userEvent.setup();
+  render(<WizardHeader onClose={onClose} />);
+  await user.click(screen.getByRole('button'));
+  expect(onClose).toHaveBeenCalled();
+});
+
+// description related tests
+test(`Renders a description when passed description`, () => {
+  render(<WizardHeader description="test description" />);
+  expect(screen.getByText('test description')).toBeVisible();
+});
+
+test(`Renders the id passed via descriptionId`, () => {
+  render(<WizardHeader description="test description" descriptionId="test-id" />);
+  expect(screen.queryByText('test description')).toHaveAttribute('id', 'test-id');
+});
+
+// other prop tests
+test(`Renders title when prop is passed`, () => {
+  render(<WizardHeader title="Test" />);
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test(`Renders with additional classes when className is passed`, () => {
+  render(<WizardHeader className="custom-class" data-testid="header-component" />);
+  expect(screen.getByTestId('header-component')).toHaveClass('custom-class');
+});

package/src/components/Wizard/__tests__/WizardNav.test.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import { WizardNav } from '../WizardNav';
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
+
+test(`Renders with additional classes when className is passed`, () => {
+  render(
+    <WizardNav className="custom-class" data-testid="test-id">
+      Test
+    </WizardNav>
+  );
+  expect(screen.getByTestId('test-id')).toHaveClass('custom-class');
+});
+
+test(`Renders with accessible aria-label when passed`, () => {
+  render(
+    <WizardNav aria-label="test aria label" data-testid="test-id">
+      Test
+    </WizardNav>
+  );
+  expect(screen.getByTestId('test-id')).toHaveAccessibleName('test aria label');
+});
+
+test(`Renders with accessible aria-labelledby when passed`, () => {
+  render(
+    <WizardNav aria-labelledby="test-labelledby" data-testid="test-id">
+      Test
+    </WizardNav>
+  );
+  expect(screen.getByTestId('test-id')).toHaveAttribute('aria-labelledby');
+});
+
+test(`Renders with expanded styles when prop passed`, () => {
+  render(
+    <WizardNav isExpanded data-testid="test-id">
+      Test
+    </WizardNav>
+  );
+  expect(screen.getByTestId('test-id')).toHaveClass(styles.modifiers.expanded);
+});
+
+test(`Renders with expanded styles when prop passed`, () => {
+  render(<WizardNav isInnerList>Test</WizardNav>);
+  expect(screen.getByRole('list')).toBeInTheDocument();
+});

package/src/components/Wizard/__tests__/WizardNavItem.test.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import { WizardNavItem } from '../WizardNavItem';
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
+import userEvent from '@testing-library/user-event';
+
+test(`Renders with additional classes when className is passed`, () => {
+  render(<WizardNavItem className="custom-class" />);
+  expect(screen.getByRole('listitem')).toHaveClass('custom-class');
+});
+
+test(`Renders content passed to content prop`, () => {
+  render(<WizardNavItem content="test content" />);
+  expect(screen.getByText('test content')).toBeVisible();
+});
+
+test(`Renders ${styles.modifiers.disabled} class when isDisabled is true`, () => {
+  render(<WizardNavItem isDisabled />);
+  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.disabled);
+});
+
+test(`Renders ${styles.modifiers.current} class when isCurrent is true`, () => {
+  render(<WizardNavItem isCurrent />);
+  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.current);
+});
+
+test(`Callback function fires when onClick passed`, async () => {
+  const onClick = jest.fn();
+  const user = userEvent.setup();
+  render(<WizardNavItem onClick={onClick} />);
+  await user.click(screen.getByRole('button'));
+  expect(onClick).toHaveBeenCalled();
+});
+
+test(`Renders a link element with an href when the props are passed`, () => {
+  render(<WizardNavItem component="a" href="test-href" />);
+  expect(screen.getByRole('link')).toHaveAttribute('href', 'test-href');
+});
+
+test(`Renders a link element with a target when the props are passed`, () => {
+  render(<WizardNavItem component="a" href="test-href" target="test-target" />);
+  expect(screen.getByRole('link')).toHaveAttribute('target', 'test-target');
+});
+
+test(`Renders an expandable li when isExapandable is passed`, () => {
+  render(<WizardNavItem isExpandable />);
+  expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'false');
+  expect(screen.getByRole('listitem')).toHaveClass(styles.modifiers.expandable);
+});
+
+test(`Renders id to nav item button when passed`, () => {
+  render(<WizardNavItem id="test-id" />);
+  expect(screen.getByRole('button')).toHaveAttribute('id', 'test-id');
+});

package/src/demos/CustomMenus/examples/ApplicationLauncherDemo.tsx

@@ -203,7 +203,6 @@ export const ApplicationLauncherDemo: React.FunctionComponent = () => {
   }
 
   return (
-    // eslint-disable-next-line no-console
     <Dropdown
       isOpen={isOpen}
       onOpenChange={(isOpen) => setIsOpen(isOpen)}

package/src/demos/CustomMenus/examples/ComposableDateSelect.tsx

@@ -98,7 +98,6 @@ export const ComposableSimpleDropdown: React.FunctionComponent = () => {
     </MenuToggle>
   );
   const menu = (
-    // eslint-disable-next-line no-console
     <Menu ref={menuRef} onSelect={(_ev, itemId) => setSelected(itemId as number)} selected={selected}>
       <MenuContent>
         <MenuList>

package/src/demos/CustomMenus/examples/DateSelectDemo.tsx

@@ -57,7 +57,6 @@ export const DateSelectDemo: React.FunctionComponent = () => {
   };
 
   return (
-    // eslint-disable-next-line no-console
     <Select
       isOpen={isOpen}
       onOpenChange={(isOpen) => setIsOpen(isOpen)}

package/src/demos/CustomMenus/examples/FavoritesDemo.tsx

@@ -92,7 +92,6 @@ export const FavoritesDemo: React.FunctionComponent = () => {
   };
 
   return (
-    // eslint-disable-next-line no-console
     <Dropdown
       isOpen={isOpen}
       onOpenChange={(isOpen) => setIsOpen(isOpen)}

package/src/demos/DescriptionList/DescriptionList.md

@@ -0,0 +1,14 @@
+---
+id: Description list
+section: components
+---
+
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+
+## Demos
+
+### Basic
+
+```js file='./examples/DescriptionListBasic.tsx' isFullscreen
+```

package/src/demos/DescriptionList/examples/DescriptionListBasic.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import {
+  DescriptionList,
+  DescriptionListTerm,
+  DescriptionListGroup,
+  DescriptionListDescription,
+  PageSection,
+  PageSectionVariants,
+  Card,
+  CardBody,
+  CardHeader,
+  TextContent,
+  Text,
+  Title,
+  Divider,
+  Flex,
+  FlexItem
+} from '@patternfly/react-core';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+
+export const DescriptionListBasic: React.FunctionComponent = () => (
+  <DashboardWrapper>
+    <PageSection variant={PageSectionVariants.light}>
+      <TextContent>
+        <Title headingLevel="h1">Projects</Title>
+        <Text component="p">This is a full page demo</Text>
+      </TextContent>
+    </PageSection>
+    <PageSection>
+      <Card>
+        <CardHeader>
+          <Title headingLevel="h2" size="lg">
+            Details
+          </Title>
+        </CardHeader>
+        <Divider />
+        <CardBody>
+          <DescriptionList isAutoFit>
+            <DescriptionListGroup>
+              <DescriptionListTerm>Name</DescriptionListTerm>
+              <DescriptionListDescription>mary-test</DescriptionListDescription>
+            </DescriptionListGroup>
+            <DescriptionListGroup>
+              <DescriptionListTerm>Status</DescriptionListTerm>
+              <DescriptionListDescription>
+                <Flex>
+                  <FlexItem spacer={{ lg: 'spacerSm' }}>
+                    <CheckCircleIcon color="green" />
+                  </FlexItem>
+                  <FlexItem>Active</FlexItem>
+                </Flex>
+              </DescriptionListDescription>
+            </DescriptionListGroup>
+            <DescriptionListGroup>
+              <DescriptionListTerm>Default pull secret</DescriptionListTerm>
+              <DescriptionListDescription>Not configured</DescriptionListDescription>
+            </DescriptionListGroup>
+            <DescriptionListGroup>
+              <DescriptionListTerm>Tolerations</DescriptionListTerm>
+              <DescriptionListDescription>6 Tolerations</DescriptionListDescription>
+            </DescriptionListGroup>
+            <DescriptionListGroup>
+              <DescriptionListTerm>Network Policies</DescriptionListTerm>
+              <DescriptionListDescription>
+                <a href="#">Network Policies</a>
+              </DescriptionListDescription>
+            </DescriptionListGroup>
+            <DescriptionListGroup>
+              <DescriptionListTerm>Display name</DescriptionListTerm>
+              <DescriptionListDescription>mary</DescriptionListDescription>
+            </DescriptionListGroup>
+            <DescriptionListGroup>
+              <DescriptionListTerm>Requester</DescriptionListTerm>
+              <DescriptionListDescription>kube:admin</DescriptionListDescription>
+            </DescriptionListGroup>
+            <DescriptionListGroup>
+              <DescriptionListTerm>Created at:</DescriptionListTerm>
+              <DescriptionListDescription>3 minutes ago</DescriptionListDescription>
+            </DescriptionListGroup>
+          </DescriptionList>
+        </CardBody>
+      </Card>
+    </PageSection>
+  </DashboardWrapper>
+);

package/src/demos/Filters/examples/FilterAttributeSearch.tsx

@@ -533,7 +533,6 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
     </MenuToggle>
   );
   const attributeMenu = (
-    // eslint-disable-next-line no-console
     <Menu
       ref={attributeMenuRef}
       onSelect={(_ev, itemId) => {

package/src/demos/Masthead.md

@@ -3,24 +3,24 @@ id: Masthead
 section: components
 ---
 
-import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
-import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
-import pfIcon from './assets/pf-logo-small.svg';
 import pfLogo from './assets/pf-logo.svg';
-import { Link } from '@reach/router';
 
 ## Demos
 
-### Masthead with utilities and user dropdown menu
+### Utilities and user dropdown menu
 
 Many mastheads contain utilities which collapse into a dropdown at smaller viewport widths. These utilities could include a notification badge to open and close a notification drawer, a link to app or user settings, a help icon which could launch quick starts or link to other resources, and many other utilities. In this demo, the notification badge does not collapse down into the mobile menu so that it is always visible even at narrower viewport widths.
 
 ```ts file='./examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx' isFullscreen
 
 ```
+### Horizontal nav
+```ts file='./examples/Masthead/MastheadWithHorizontalNav.tsx' isFullscreen
+
+```