@patternfly/react-core 4.234.3 → 4.235.1

package/src/next/components/Wizard/WizardHeader.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
+import { css } from '@patternfly/react-styles';
+import { Button } from '../../../components/Button';
+import { Title } from '../../../components/Title';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+
+export interface WizardHeaderProps {
+  /** Callback function called when the X (Close) button is clicked */
+  onClose?: () => void;
+  /** Title of the wizard */
+  title: string;
+  /** Description of the wizard */
+  description?: React.ReactNode;
+  /** Component type of the description */
+  descriptionComponent?: 'div' | 'p';
+  /** Flag indicating whether the close button should be in the header */
+  hideClose?: boolean;
+  /** Aria-label applied to the X (Close) button */
+  closeButtonAriaLabel?: string;
+  /** id for the title */
+  titleId?: string;
+  /** id for the description */
+  descriptionId?: string;
+}
+
+export const WizardHeader: React.FunctionComponent<WizardHeaderProps> = ({
+  onClose = () => undefined,
+  title,
+  description,
+  hideClose,
+  closeButtonAriaLabel,
+  titleId,
+  descriptionComponent: Component = 'p',
+  descriptionId
+}: WizardHeaderProps) => (
+  <div className={css(styles.wizardHeader)}>
+    {!hideClose && (
+      <Button variant="plain" className={css(styles.wizardClose)} aria-label={closeButtonAriaLabel} onClick={onClose}>
+        <TimesIcon aria-hidden="true" />
+      </Button>
+    )}
+    <Title headingLevel="h2" size="3xl" className={css(styles.wizardTitle)} aria-label={title} id={titleId}>
+      {title || <>&nbsp;</>}
+    </Title>
+    {description && (
+      <Component className={css(styles.wizardDescription)} id={descriptionId}>
+        {description}
+      </Component>
+    )}
+  </div>
+);
+WizardHeader.displayName = 'WizardHeader';

package/src/next/components/Wizard/WizardNav.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
+import { css } from '@patternfly/react-styles';
+
+export interface WizardNavProps {
+  /** children should be WizardNavItem components */
+  children?: any;
+  /** Aria-label applied to the nav element */
+  'aria-label'?: string;
+  /** Sets the aria-labelledby attribute on the nav element */
+  'aria-labelledby'?: string;
+  /** Whether the nav is expanded */
+  isOpen?: boolean;
+  /** True to return the inner list without the wrapping nav element */
+  returnList?: boolean;
+}
+
+export const WizardNav: React.FunctionComponent<WizardNavProps> = ({
+  children,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  isOpen = false,
+  returnList = false
+}: WizardNavProps) => {
+  const innerList = <ol className={css(styles.wizardNavList)}>{children}</ol>;
+
+  if (returnList) {
+    return innerList;
+  }
+
+  return (
+    <nav
+      className={css(styles.wizardNav, isOpen && styles.modifiers.expanded)}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy}
+    >
+      <ol className={css(styles.wizardNavList)}>{children}</ol>
+    </nav>
+  );
+};
+WizardNav.displayName = 'WizardNav';

package/src/next/components/Wizard/WizardNavItem.tsx

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
+import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+
+export interface WizardNavItemProps {
+  /** Can nest a WizardNav component for substeps */
+  children?: React.ReactNode;
+  /** The content to display in the nav item */
+  content?: React.ReactNode;
+  /** Whether the nav item is the currently active item */
+  isCurrent?: boolean;
+  /** Whether the nav item is disabled */
+  isDisabled?: boolean;
+  /** The step passed into the onNavItemClick callback */
+  step: number;
+  /** Callback for when the nav item is clicked */
+  onNavItemClick?: (step: number) => any;
+  /** Component used to render WizardNavItem */
+  navItemComponent?: 'button' | 'a';
+  /** An optional url to use for when using an anchor component */
+  href?: string;
+  /** Flag indicating that this NavItem has child steps and is expandable */
+  isExpandable?: boolean;
+  /** The id for the nav item */
+  id?: string | number;
+}
+
+export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
+  children = null,
+  content = '',
+  isCurrent = false,
+  isDisabled = false,
+  step,
+  onNavItemClick = () => undefined,
+  navItemComponent = 'button',
+  href = null,
+  isExpandable = false,
+  id,
+  ...rest
+}: WizardNavItemProps) => {
+  const NavItemComponent = navItemComponent;
+
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  React.useEffect(() => {
+    setIsExpanded(isCurrent);
+  }, [isCurrent]);
+
+  if (navItemComponent === 'a' && !href && process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line no-console
+    console.error('WizardNavItem: When using an anchor, please provide an href');
+  }
+
+  const btnProps = {
+    disabled: isDisabled
+  };
+
+  const linkProps = {
+    tabIndex: isDisabled ? -1 : undefined,
+    href
+  };
+
+  return (
+    <li
+      className={css(
+        styles.wizardNavItem,
+        isExpandable && styles.modifiers.expandable,
+        isExpandable && isExpanded && styles.modifiers.expanded
+      )}
+    >
+      <NavItemComponent
+        {...rest}
+        {...(navItemComponent === 'a' ? { ...linkProps } : { ...btnProps })}
+        {...(id && { id: id.toString() })}
+        onClick={() => (isExpandable ? setIsExpanded(!isExpanded || isCurrent) : onNavItemClick(step))}
+        className={css(
+          styles.wizardNavLink,
+          isCurrent && styles.modifiers.current,
+          isDisabled && styles.modifiers.disabled
+        )}
+        aria-disabled={isDisabled ? true : null}
+        aria-current={isCurrent && !children ? 'step' : false}
+        {...(isExpandable && { 'aria-expanded': isExpanded })}
+      >
+        {isExpandable ? (
+          <>
+            <span className={css(styles.wizardNavLinkText)}>{content}</span>
+            <span className={css(styles.wizardNavLinkToggle)}>
+              <span className={css(styles.wizardNavLinkToggleIcon)}>
+                <AngleRightIcon />
+              </span>
+            </span>
+          </>
+        ) : (
+          content
+        )}
+      </NavItemComponent>
+      {children}
+    </li>
+  );
+};
+WizardNavItem.displayName = 'WizardNavItem';

package/src/next/components/Wizard/WizardStep.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { WizardControlStep } from './types';
+import { WizardBody, WizardBodyProps } from './WizardBody';
+
+/**
+ * Used as a passthrough of step properties for Wizard and all supporting child components.
+ * Also acts as a wrapper for content, with an optional inclusion of WizardBody.
+ */
+
+export interface WizardStepProps extends Omit<WizardControlStep, 'parentId' | 'subStepIds' | 'visited'> {
+  /** Optional for when the step is used as a parent to sub-steps */
+  children?: React.ReactNode;
+  /** Props for WizardBody that wraps content by default. Can be set to null for exclusion of WizardBody. */
+  body?: WizardBodyProps | null;
+  /** Optional list of sub-steps */
+  steps?: React.ReactElement<WizardStepProps>[];
+}
+
+export const WizardStep = ({ body, children }: WizardStepProps) =>
+  body === undefined ? <WizardBody {...body}>{children}</WizardBody> : <>{children}</>;
+
+WizardStep.displayName = 'WizardStep';

package/src/next/components/Wizard/WizardToggle.tsx

@@ -0,0 +1,209 @@
+import React from 'react';
+
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
+import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
+
+import { KeyTypes } from '../../../helpers/constants';
+import { WizardNav, WizardNavItem } from '../Wizard';
+import {
+  WizardControlStep,
+  CustomWizardNavFunction,
+  DefaultWizardNavProps,
+  isWizardBasicStep,
+  isWizardParentStep,
+  isWizardSubStep,
+  isCustomWizardNav
+} from './types';
+
+/**
+ * Used to toggle between step content, including the body and footer. This is also where the nav and its expandability is controlled.
+ */
+
+export interface WizardToggleProps {
+  /** List of steps and/or sub-steps */
+  steps: WizardControlStep[];
+  /** The currently active WizardStep */
+  activeStep: WizardControlStep;
+  /** The WizardFooter */
+  footer: React.ReactElement;
+  /** Custom WizardNav or callback used to create a default WizardNav */
+  nav: DefaultWizardNavProps | CustomWizardNavFunction;
+  /** Navigate using the step index */
+  goToStepByIndex: (index: number) => void;
+  /** The button's aria-label */
+  'aria-label'?: string;
+  /** Flag to unmount inactive steps instead of hiding. Defaults to true */
+  unmountInactiveSteps?: boolean;
+}
+
+export const WizardToggle = ({
+  steps,
+  activeStep,
+  footer,
+  nav,
+  goToStepByIndex,
+  unmountInactiveSteps = true,
+  'aria-label': ariaLabel = 'Wizard toggle'
+}: WizardToggleProps) => {
+  const [isNavOpen, setIsNavOpen] = React.useState(false);
+  const isActiveSubStep = isWizardSubStep(activeStep);
+
+  const handleKeyClicks = React.useCallback(
+    (event: KeyboardEvent): void => {
+      if (isNavOpen && event.key === KeyTypes.Escape) {
+        setIsNavOpen(!isNavOpen);
+      }
+    },
+    [isNavOpen]
+  );
+
+  // Open/close collapsable nav on keydown event
+  React.useEffect(() => {
+    const target = typeof document !== 'undefined' ? document.body : null;
+    target?.addEventListener('keydown', handleKeyClicks, false);
+
+    return () => {
+      target?.removeEventListener('keydown', handleKeyClicks, false);
+    };
+  }, [handleKeyClicks]);
+
+  // Only render the active step when unmountInactiveSteps is true
+  const bodyContent = unmountInactiveSteps
+    ? activeStep?.component
+    : steps.map(step => {
+        if (activeStep?.name === step.name) {
+          return step.component;
+        }
+
+        return (
+          <div key={step.id} style={{ display: 'none' }}>
+            {step.component}
+          </div>
+        );
+      });
+
+  const wizardNav = isCustomWizardNav(nav)
+    ? nav(isNavOpen, steps, activeStep, goToStepByIndex)
+    : React.useMemo(() => {
+        const props = {
+          isOpen: isNavOpen,
+          'aria-label': nav?.ariaLabel || 'Wizard nav',
+          ...(nav?.ariaLabelledBy && { 'aria-labelledby': nav?.ariaLabelledBy })
+        };
+
+        return (
+          <WizardNav {...props}>
+            {steps.map((step, index) => {
+              const stepIndex = index + 1;
+              const stepNavItem = step.navItem && <React.Fragment key={step.id}>{step.navItem}</React.Fragment>;
+
+              if (isWizardParentStep(step)) {
+                let firstSubStepIndex;
+                let hasActiveChild = false;
+
+                const subNavItems = step.subStepIds?.map((subStepId, index) => {
+                  const subStep = steps.find(step => step.id === subStepId);
+                  const subStepIndex = steps.indexOf(subStep) + 1;
+
+                  if (index === 0) {
+                    firstSubStepIndex = subStepIndex;
+                  }
+
+                  if (activeStep?.id === subStep.id) {
+                    hasActiveChild = true;
+                  }
+
+                  return subStep.navItem ? (
+                    <React.Fragment key={subStep.id}>{subStep.navItem}</React.Fragment>
+                  ) : (
+                    <WizardNavItem
+                      key={subStep.id}
+                      id={subStep.id}
+                      content={subStep.name}
+                      isCurrent={activeStep?.id === subStep.id}
+                      isDisabled={subStep.isDisabled || (nav?.forceStepVisit && !subStep.visited)}
+                      step={subStepIndex}
+                      onNavItemClick={goToStepByIndex}
+                    />
+                  );
+                });
+
+                const hasEnabledChildren = React.Children.toArray(subNavItems).some(
+                  child => React.isValidElement(child) && !child.props.isDisabled
+                );
+
+                return (
+                  stepNavItem || (
+                    <WizardNavItem
+                      key={step.id}
+                      id={step.id}
+                      content={step.name}
+                      isExpandable={nav?.isExpandable}
+                      isCurrent={hasActiveChild}
+                      isDisabled={!hasEnabledChildren}
+                      step={firstSubStepIndex}
+                      onNavItemClick={goToStepByIndex}
+                    >
+                      <WizardNav {...props} returnList>
+                        {subNavItems}
+                      </WizardNav>
+                    </WizardNavItem>
+                  )
+                );
+              }
+
+              if (isWizardBasicStep(step)) {
+                return (
+                  stepNavItem || (
+                    <WizardNavItem
+                      key={step.id}
+                      id={step.id}
+                      content={step.name}
+                      isCurrent={activeStep?.id === step.id}
+                      isDisabled={step.isDisabled || (nav?.forceStepVisit && !step.visited)}
+                      step={stepIndex}
+                      onNavItemClick={goToStepByIndex}
+                    />
+                  )
+                );
+              }
+            })}
+          </WizardNav>
+        );
+      }, [activeStep?.id, goToStepByIndex, isNavOpen, nav, steps]);
+
+  return (
+    <>
+      <button
+        onClick={() => setIsNavOpen(prevIsOpen => !prevIsOpen)}
+        className={css(styles.wizardToggle, isNavOpen && 'pf-m-expanded')}
+        aria-label={ariaLabel}
+        aria-expanded={isNavOpen}
+      >
+        <span className={css(styles.wizardToggleList)}>
+          <span className={css(styles.wizardToggleListItem)}>
+            {activeStep?.name}
+            {isActiveSubStep && <AngleRightIcon className={css(styles.wizardToggleSeparator)} aria-hidden="true" />}
+          </span>
+          {isActiveSubStep && <span className={css(styles.wizardToggleListItem)}>{activeStep?.name}</span>}
+        </span>
+
+        <span className={css(styles.wizardToggleIcon)}>
+          <CaretDownIcon aria-hidden="true" />
+        </span>
+      </button>
+      <div className={css(styles.wizardOuterWrap)}>
+        <div className={css(styles.wizardInnerWrap)}>
+          {wizardNav}
+          {bodyContent}
+        </div>
+
+        {footer}
+      </div>
+    </>
+  );
+};
+
+WizardToggle.displayName = 'WizardToggle';