@patternfly/react-core 6.5.0-prerelease.6 → 6.5.0-prerelease.61

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

@@ -2,6 +2,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { Wizard, WizardFooterProps, WizardStep, WizardNavProps, WizardStepChangeScope } from '../';
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 
 test('renders step when child is of type WizardStep', () => {
   render(
@@ -627,3 +628,62 @@ test('onStepChange skips over disabled or hidden steps and substeps', async () =
     WizardStepChangeScope.Back
   );
 });
+
+test('clicking parent step navigates to first visible sub-step when first sub-step is hidden', async () => {
+  const user = userEvent.setup();
+  const onStepChange = jest.fn();
+
+  render(
+    <Wizard onStepChange={onStepChange}>
+      <WizardStep id="step-1" name="Test step 1" />
+      <WizardStep
+        id="step-2"
+        name="Test step 2"
+        steps={[
+          <WizardStep id="step2-sub1" name="Hidden sub step" isHidden />,
+          <WizardStep id="step2-sub2" name="Visible sub step 1" />,
+          <WizardStep id="step2-sub3" name="Visible sub step 2" />
+        ]}
+      />
+      <WizardStep id="step-3" name="Test step 3" />
+    </Wizard>
+  );
+
+  // Navigate to step 3 first
+  await user.click(screen.getByRole('button', { name: 'Test step 3' }));
+  expect(onStepChange).toHaveBeenCalledWith(
+    null,
+    expect.objectContaining({ id: 'step-3' }),
+    expect.objectContaining({ id: 'step-1' }),
+    WizardStepChangeScope.Nav
+  );
+
+  // Click on parent step 2 - should navigate to the first VISIBLE sub-step (step2-sub2), not crash
+  await user.click(screen.getByRole('button', { name: 'Test step 2' }));
+  expect(onStepChange).toHaveBeenCalledWith(
+    null,
+    expect.objectContaining({ id: 'step2-sub2' }),
+    expect.objectContaining({ id: 'step-3' }),
+    WizardStepChangeScope.Nav
+  );
+});
+
+test(`Renders with ${styles.modifiers.plain} class when isPlain is true`, () => {
+  render(
+    <Wizard isPlain data-testid="wizard-plain">
+      <WizardStep id="test-step" name="Test step" />
+    </Wizard>
+  );
+
+  expect(screen.getByTestId('wizard-plain')).toHaveClass(styles.modifiers.plain);
+});
+
+test(`Renders with ${styles.modifiers.noPlainOnGlass} class when isNoPlainOnGlass is true`, () => {
+  render(
+    <Wizard isNoPlainOnGlass data-testid="wizard-no-plain">
+      <WizardStep id="test-step" name="Test step" />
+    </Wizard>
+  );
+
+  expect(screen.getByTestId('wizard-no-plain')).toHaveClass(styles.modifiers.noPlainOnGlass);
+});

package/src/components/Wizard/examples/Wizard.md

@@ -63,6 +63,12 @@ import layout from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
 
 ```
 
+### Plain
+
+```ts file="./WizardPlain.tsx"
+
+```
+
 ### Focus content on next/back
 
 To focus the main content element of the `Wizard`, pass in the `shouldFocusContent` property. It is recommended that this is passed in so that users can navigate through a `WizardStep` content in order.

package/src/components/Wizard/examples/WizardPlain.tsx

@@ -0,0 +1,15 @@
+import { Wizard, WizardStep } from '@patternfly/react-core';
+
+export const WizardPlain: React.FunctionComponent = () => (
+  <Wizard height={400} title="Plain wizard" isPlain>
+    <WizardStep name="Step 1" id="plain-first-step">
+      <p>Step 1 content</p>
+    </WizardStep>
+    <WizardStep name="Step 2" id="plain-second-step">
+      <p>Step 2 content</p>
+    </WizardStep>
+    <WizardStep name="Review" id="plain-review-step" footer={{ nextButtonText: 'Finish' }}>
+      <p>Review step content</p>
+    </WizardStep>
+  </Wizard>
+);

package/src/components/index.ts

@@ -32,6 +32,7 @@ export * from './FileUpload';
 export * from './Form';
 export * from './FormSelect';
 export * from './HelperText';
+export * from './Hero';
 export * from './Hint';
 export * from './Icon';
 export * from './InputGroup';

package/src/demos/Banner.md

@@ -11,148 +11,11 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 
 ### Basic sticky banner
 
-```js isFullscreen
-import { Fragment } from 'react';
-import { Banner, Card, CardBody, Flex, Gallery, GalleryItem, PageSection, Content } from '@patternfly/react-core';
-
-import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
-import { css } from '@patternfly/react-styles';
-import display from '@patternfly/react-styles/css/utilities/Display/display';
-
-class BannerDemo extends React.Component {
-  render() {
-    const banner = (
-      <Banner isSticky>
-        <Flex
-          justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
-          flexWrap={{ default: 'nowrap' }}
-        >
-          <div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>
-          <div className={css(display.displayNone, display.displayBlockOnLg)}>
-            This message is sticky to the top of the page.
-          </div>
-          <div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
-          <div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>
-        </Flex>
-      </Banner>
-    );
-    return (
-      <Fragment>
-        <DashboardWrapper banner={banner} breadcrumb={null}>
-          <PageSection aria-labelledby="main-title">
-            <Content>
-              <h1 id="main-title">Main title</h1>
-              <p>
-                Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
-                of it’s relative line height of 1.5.
-              </p>
-            </Content>
-          </PageSection>
-          <PageSection aria-label='Cards gallery'>
-            <Gallery hasGutter>
-              {Array.from({ length: 30 }).map((_value, index) => (
-                <GalleryItem key={index}>
-                  <Card key={index}>
-                    <CardBody>This is a card</CardBody>
-                  </Card>
-                </GalleryItem>
-              ))}
-            </Gallery>
-          </PageSection>
-        </DashboardWrapper>
-      </Fragment>
-    );
-  }
-}
+```ts file="examples/Banner/BannerBasicSticky.tsx" isFullscreen
 ```
 
 ### Top and bottom banner
 
-```js isFullscreen
-import { Fragment } from 'react';
-import {
-  Banner,
-  Card,
-  CardBody,
-  Flex,
-  FlexItem,
-  Gallery,
-  GalleryItem,
-  PageSection,
-  Content
-} from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
-import { css } from '@patternfly/react-styles';
-import display from '@patternfly/react-styles/css/utilities/Display/display';
+```ts file="examples/Banner/BannerTopBottom.tsx" isFullscreen
 
-class BannerDemo extends React.Component {
-  render() {
-    return (
-      <Fragment>
-        <Flex
-          direction={{ default: 'column' }}
-          flexWrap={{ default: 'nowrap' }}
-          spaceItems={{ default: 'spaceItemsNone' }}
-          style={{ height: '100%' }}
-        >
-          <FlexItem>
-            <Banner isSticky>
-              <Flex
-                justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
-                flexWrap={{ default: 'nowrap' }}
-              >
-                <div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>
-                <div className={css(display.displayNone, display.displayBlockOnLg)}>
-                  This message is sticky to the top of the page.
-                </div>
-                <div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
-                <div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>
-              </Flex>
-            </Banner>
-          </FlexItem>
-          <FlexItem grow={{ default: 'grow' }} style={{ minHeight: 0 }}>
-            <DashboardWrapper breadcrumb={null}>
-              <PageSection aria-labelledby="main-title">
-                <Content>
-                  <h1 id='main-title'>Main title</h1>
-                  <p>
-                    Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because{' '}
-                    <br />
-                    of it’s relative line height of 1.5.
-                  </p>
-                </Content>
-              </PageSection>
-              <PageSection aria-label='Cards gallery'>
-                <Gallery hasGutter>
-                  {Array.from({ length: 30 }).map((_value, index) => (
-                    <GalleryItem key={index}>
-                      <Card key={index}>
-                        <CardBody>This is a card</CardBody>
-                      </Card>
-                    </GalleryItem>
-                  ))}
-                </Gallery>
-              </PageSection>
-            </DashboardWrapper>
-          </FlexItem>
-          <FlexItem>
-            <Banner isSticky>
-              <Flex
-                justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
-                flexWrap={{ default: 'nowrap' }}
-              >
-                <div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>
-                <div className={css(display.displayNone, display.displayBlockOnLg)}>
-                  This message is sticky to the bottom of the page.
-                </div>
-                <div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
-                <div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>
-              </Flex>
-            </Banner>
-          </FlexItem>
-        </Flex>
-      </Fragment>
-    );
-  }
-}
 ```

package/src/demos/Button/Button.md

@@ -4,7 +4,7 @@ section: components
 ---
 
 import { useState } from 'react';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
 
 ## Demos 
 

package/src/demos/Button/examples/ButtonProgress.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Form, FormGroup, ActionGroup, TextInput, Button } from '@patternfly/react-core';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
 
 export const ButtonProgress: React.FunctionComponent = () => {
   const [loginState, setLoginState] = useState<'notLoggedIn' | 'loading' | 'loggedIn'>('notLoggedIn');
@@ -41,7 +41,7 @@ export const ButtonProgress: React.FunctionComponent = () => {
               : null
           }
           isLoading={loginState === 'loading'}
-          icon={loginState === 'loggedIn' ? <CheckCircleIcon /> : null}
+          icon={loginState === 'loggedIn' ? <RhUiCheckCircleFillIcon /> : null}
           spinnerAriaValueText="Loading..."
         >
           {loginState === 'notLoggedIn' && 'Link account and log in'}

package/src/demos/CardDemos.md

@@ -2,12 +2,13 @@
 id: Card
 section: components
 ---
+
 import { Fragment, useState } from 'react';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
+import RhUiInformationFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-information-fill-icon';
 import ArrowRightIcon from '@patternfly/react-icons/dist/js/icons/arrow-right-icon';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
-import { CheckCircleIcon, ExclamationCircleIcon, ExclamationTriangleIcon, BellIcon } from '@patternfly/react-icons';
+import { RhUiCheckCircleFillIcon, RhUiErrorFillIcon, RhUiWarningFillIcon, RhUiNotificationFillIcon } from '@patternfly/react-icons';
 import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
 import { Chart, ChartAxis, ChartGroup, ChartVoronoiContainer, ChartStack, ChartBar, ChartTooltip, ChartDonutThreshold, ChartDonutUtilization, ChartArea, ChartContainer, ChartLabel } from '@patternfly/react-charts/victory';
 import chart_color_yellow_100 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_100';

package/src/demos/Compass/Compass.md

@@ -0,0 +1,40 @@
+---
+id: Compass
+section: AI
+subsection: Generative UIs
+---
+
+import { useRef, useState } from 'react';
+import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
+import OutlinedPlusSquare from '@patternfly/react-icons/dist/esm/icons/outlined-plus-square-icon';
+import OutlinedCopy from '@patternfly/react-icons/dist/esm/icons/outlined-copy-icon';
+import OutlinedQuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon';
+import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
+import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon';
+import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
+import imgAvatar from '../assets/avatarImg.svg';
+import pfLogo from '../assets/PF-IconLogo-color.svg';
+
+## Demos
+
+### Compass layout
+
+This demo showcases an implementation of the following Compass features:
+
+- Middle navigation in the `header`, featuring top-level primary tabs and a secondary container for sub-tabs.
+- Vertical sidebars utilizing `<ActionList>` groups with buttons that use the `isCircle` prop.
+- A custom gradient background in the `<Hero>`, visible in dark mode.
+- Background images that automatically adapt to both light and dark modes.
+- A `footer` section containing the `<CompassMessageBar>`, that could be used for AI text input.
+
+```ts isFullscreen file="./examples/CompassDemo.tsx"
+
+```
+
+### Docked nav demo
+
+```ts isFullscreen file="./examples/CompassDockDemo.tsx"
+
+```

package/src/demos/Compass/examples/CompassDemo.tsx

@@ -0,0 +1,186 @@
+/* eslint-disable no-console */
+
+import { useRef, useState } from 'react';
+import {
+  Compass,
+  CompassHeader,
+  CompassHero,
+  CompassContent,
+  CompassMainHeader,
+  Panel,
+  PanelMain,
+  PanelMainBody,
+  CompassMessageBar,
+  CompassNavContent,
+  CompassNavHome,
+  CompassNavMain,
+  CompassNavSearch,
+  Hero,
+  Tabs,
+  TabsComponent,
+  Tab,
+  TabContent,
+  TabTitleText,
+  ActionList,
+  ActionListGroup,
+  ActionListItem,
+  Button,
+  Title,
+  Tooltip
+} from '@patternfly/react-core';
+import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
+import OutlinedPlusSquare from '@patternfly/react-icons/dist/esm/icons/outlined-plus-square-icon';
+import OutlinedCopy from '@patternfly/react-icons/dist/esm/icons/outlined-copy-icon';
+import OutlinedQuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon';
+
+export const CompassBasic: React.FunctionComponent = () => {
+  const [activeTab, setActiveTab] = useState<number>(0);
+  const [activeSubtab, setActiveSubtab] = useState<number>(0);
+  const subTabsRef = useRef<HTMLDivElement>(null);
+
+  const navContent = (
+    <>
+      <Panel isPill>
+        <PanelMain>
+          <PanelMainBody>
+            <CompassNavContent>
+              <CompassNavHome onClick={() => console.log('Home')} />
+              <CompassNavMain>
+                <Tabs
+                  activeKey={activeTab}
+                  isNav
+                  onSelect={(_event, tabIndex) => setActiveTab(tabIndex as number)}
+                  component={TabsComponent.nav}
+                  aria-label="Compass navigation tabs"
+                >
+                  <Tab
+                    tabContentId="subtabs"
+                    tabContentRef={subTabsRef}
+                    eventKey={0}
+                    title={<TabTitleText>Tab 1</TabTitleText>}
+                    aria-label="Compass tab with subtabs"
+                  />
+                  <Tab eventKey={1} title={<TabTitleText>Tab 2</TabTitleText>} />
+                  <Tab eventKey={2} title={<TabTitleText>Tab 3</TabTitleText>} />
+                  <Tab eventKey={3} title={<TabTitleText>Disabled Tab 4</TabTitleText>} isDisabled />
+                </Tabs>
+              </CompassNavMain>
+              <CompassNavSearch onClick={() => console.log('Search')} />
+            </CompassNavContent>
+          </PanelMainBody>
+        </PanelMain>
+      </Panel>
+      <Panel isPill>
+        <PanelMain>
+          <PanelMainBody style={{ padding: 0 }}>
+            <TabContent id="subtabs" ref={subTabsRef}>
+              <CompassNavContent>
+                <CompassNavMain>
+                  <Tabs
+                    activeKey={activeSubtab}
+                    isSubtab
+                    isNav
+                    onSelect={(_event, tabIndex) => setActiveSubtab(tabIndex as number)}
+                    aria-label="Compass navigation subtabs"
+                  >
+                    <Tab
+                      tabContentId="subtab-1"
+                      eventKey={0}
+                      title={
+                        <TabTitleText>
+                          <div id="subtab-1">Subtab 1</div>
+                        </TabTitleText>
+                      }
+                    />
+                    <Tab eventKey={1} title={<TabTitleText>Subtab 2</TabTitleText>} />
+                    <Tab eventKey={2} title={<TabTitleText>Disabled Subtab 3</TabTitleText>} isDisabled />
+                  </Tabs>
+                </CompassNavMain>
+              </CompassNavContent>
+            </TabContent>
+          </PanelMainBody>
+        </PanelMain>
+      </Panel>
+    </>
+  );
+
+  const sidebarContent = (
+    <Panel isPill>
+      <PanelMain>
+        <PanelMainBody>
+          <ActionList isIconList isVertical>
+            <ActionListGroup>
+              <ActionListItem>
+                <Tooltip content="Play">
+                  <Button isCircle variant="plain" icon={<PlayIcon />} aria-label="Play" />
+                </Tooltip>
+              </ActionListItem>
+              <ActionListItem>
+                <Tooltip content="Add">
+                  <Button isCircle variant="plain" icon={<OutlinedPlusSquare />} aria-label="Add" />
+                </Tooltip>
+              </ActionListItem>
+            </ActionListGroup>
+            <ActionListItem>
+              <Tooltip content="Copy">
+                <Button isCircle variant="plain" icon={<OutlinedCopy />} aria-label="Copy" />
+              </Tooltip>
+            </ActionListItem>
+            <ActionListGroup>
+              <ActionListItem>
+                <Tooltip content="Help">
+                  <Button isCircle variant="plain" icon={<OutlinedQuestionCircleIcon />} aria-label="Help" />
+                </Tooltip>
+              </ActionListItem>
+              <ActionListItem>
+                <Tooltip content="Second copy">
+                  <Button isCircle variant="plain" icon={<OutlinedCopy />} aria-label="Copy2" />
+                </Tooltip>
+              </ActionListItem>
+            </ActionListGroup>
+          </ActionList>
+        </PanelMainBody>
+      </PanelMain>
+    </Panel>
+  );
+
+  const headerContent = <CompassHeader logo={<div>logo</div>} nav={navContent} profile={<div>Profile</div>} />;
+  const sidebarStartContent = sidebarContent;
+  const mainContent = (
+    <>
+      <CompassHero>
+        <Hero gradientDark={{ stop1: '#000', stop2: '#1b0d33', stop3: '#3d2785' }}>Hero</Hero>
+      </CompassHero>
+      <CompassMainHeader title={<Title headingLevel="h1">Content title</Title>} />
+      <CompassContent>
+        <Panel>
+          <PanelMain>
+            <PanelMainBody>Content</PanelMainBody>
+          </PanelMain>
+        </Panel>
+      </CompassContent>
+    </>
+  );
+  const sidebarEndContent = sidebarContent;
+  const footerContent = (
+    <CompassMessageBar>
+      <Panel isPill>
+        <PanelMain>
+          <PanelMainBody style={{ padding: 0 }}>Message bar</PanelMainBody>
+        </PanelMain>
+      </Panel>
+    </CompassMessageBar>
+  );
+
+  return (
+    <Compass
+      header={headerContent}
+      sidebarStart={sidebarStartContent}
+      main={mainContent}
+      sidebarEnd={sidebarEndContent}
+      footer={footerContent}
+      backgroundSrcDark="/assets/images/pf-background.svg"
+      backgroundSrcLight="/assets/images/pf-background.svg"
+    />
+  );
+};