@patternfly/react-core 5.0.0-alpha.70 → 5.0.0-alpha.72

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

@@ -1,46 +0,0 @@
-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 navigation element */
-  'aria-label'?: string;
-  /** Sets the aria-labelledby attribute on the navigation element */
-  'aria-labelledby'?: string;
-  /** Whether the navigation is expanded */
-  isExpanded?: boolean;
-  /** True to return the inner list without the wrapping navigation element */
-  isInnerList?: boolean;
-}
-
-export const WizardNav: React.FunctionComponent<WizardNavProps> = ({
-  children,
-  'aria-label': ariaLabel,
-  'aria-labelledby': ariaLabelledBy,
-  isExpanded = false,
-  isInnerList = false
-}: WizardNavProps) => {
-  if (isInnerList) {
-    return (
-      <ol className={css(styles.wizardNavList)} role="list">
-        {children}
-      </ol>
-    );
-  }
-
-  return (
-    <nav
-      className={css(styles.wizardNav, isExpanded && styles.modifiers.expanded)}
-      aria-label={ariaLabel}
-      aria-labelledby={ariaLabelledBy}
-    >
-      <ol className={css(styles.wizardNavList)} role="list">
-        {children}
-      </ol>
-    </nav>
-  );
-};
-
-WizardNav.displayName = 'WizardNav';

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

@@ -1,140 +0,0 @@
-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';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
-
-import { OUIAProps, useOUIAProps } from '../../../helpers';
-import { WizardNavItemStatus } from './types';
-
-export interface WizardNavItemProps extends OUIAProps {
-  /** Can nest a WizardNav component for substeps */
-  children?: React.ReactNode;
-  /** The content to display in the navigation item */
-  content?: React.ReactNode;
-  /** Whether the navigation item is the currently active item */
-  isCurrent?: boolean;
-  /** Whether the navigation item is disabled */
-  isDisabled?: boolean;
-  /** Whether the navigation item has been visited */
-  isVisited?: boolean;
-  /** The step index passed into the onNavItemClick callback */
-  stepIndex: number;
-  /** Callback for when the navigation item is clicked */
-  onClick?: (event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<HTMLAnchorElement>, index: number) => any;
-  /** Component used to render WizardNavItem */
-  component?: 'button' | 'a';
-  /** An optional url to use for when using an anchor component */
-  href?: string;
-  /** Where to display the linked URL when using an anchor component */
-  target?: React.HTMLAttributeAnchorTarget;
-  /** Flag indicating that this NavItem has child steps and is expandable */
-  isExpandable?: boolean;
-  /** The id for the navigation item */
-  id?: string | number;
-  /** Used to determine the icon displayed next to content. Default has no icon. */
-  status?: 'default' | 'error';
-}
-
-export const WizardNavItem = ({
-  children = null,
-  content = '',
-  isCurrent = false,
-  isDisabled = false,
-  isVisited = false,
-  stepIndex,
-  onClick,
-  component: NavItemComponent = 'button',
-  href,
-  isExpandable = false,
-  id,
-  status = 'default',
-  target,
-  ouiaId,
-  ouiaSafe = true
-}: WizardNavItemProps) => {
-  const [isExpanded, setIsExpanded] = React.useState(false);
-  const ouiaProps = useOUIAProps(WizardNavItem.displayName, ouiaId, ouiaSafe);
-
-  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 ariaLabel = React.useMemo(() => {
-    if (status === WizardNavItemStatus.Error || (isVisited && !isCurrent)) {
-      let label = content.toString();
-
-      if (status === WizardNavItemStatus.Error) {
-        label += `, ${status}`;
-      }
-
-      // No need to signify step is visited if current
-      if (isVisited && !isCurrent) {
-        label += ', visited';
-      }
-
-      return label;
-    }
-  }, [content, isCurrent, isVisited, status]);
-
-  return (
-    <li
-      className={css(
-        styles.wizardNavItem,
-        isExpandable && styles.modifiers.expandable,
-        isExpandable && isExpanded && styles.modifiers.expanded
-      )}
-    >
-      <NavItemComponent
-        {...(NavItemComponent === 'a'
-          ? { tabIndex: isDisabled ? -1 : undefined, href, target }
-          : { disabled: isDisabled })}
-        {...(id && { id: id.toString() })}
-        onClick={e => {
-          e.stopPropagation();
-          isExpandable ? setIsExpanded(!isExpanded || isCurrent) : onClick?.(e, stepIndex);
-        }}
-        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 })}
-        {...(ariaLabel && { 'aria-label': ariaLabel })}
-        {...ouiaProps}
-      >
-        {isExpandable ? (
-          <>
-            <span className={css(styles.wizardNavLinkText)}>{content}</span>
-            <span className={css(styles.wizardNavLinkToggle)}>
-              <span className={css(styles.wizardNavLinkToggleIcon)}>
-                <AngleRightIcon aria-label={`${isCurrent ? 'Collapse' : 'Expand'} step icon`} />
-              </span>
-            </span>
-          </>
-        ) : (
-          <>
-            {content}
-            {/* TODO, patternfly/patternfly#5142 */}
-            {status === WizardNavItemStatus.Error && (
-              <span style={{ marginLeft: 'var(--pf-global--spacer--sm)' }}>
-                <ExclamationCircleIcon color="var(--pf-global--danger-color--100)" />
-              </span>
-            )}
-          </>
-        )}
-      </NavItemComponent>
-      {children}
-    </li>
-  );
-};
-
-WizardNavItem.displayName = 'WizardNavItem';

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

@@ -1,117 +0,0 @@
-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 { WizardStepType, isWizardSubStep } from './types';
-import { WizardNavProps } from './WizardNav';
-import { WizardStep, WizardStepProps } from './WizardStep';
-import { WizardBody } from './WizardBody';
-
-/**
- * Used to toggle between step content, including the body and footer. This is also where the navigation and its expandability is controlled.
- */
-
-export interface WizardToggleProps {
-  /** List of steps and/or sub-steps */
-  steps: WizardStepType[];
-  /** The current step */
-  activeStep: WizardStepType;
-  /** Wizard footer */
-  footer: React.ReactElement;
-  /** Wizard navigation */
-  nav: React.ReactElement<WizardNavProps>;
-  /** The expandable dropdown button's aria-label */
-  'aria-label'?: string;
-  /** Flag to determine whether the dropdown navigation is expanded */
-  isNavExpanded?: boolean;
-  /** Callback to expand or collapse the dropdown navigation */
-  toggleNavExpanded?: (event: React.MouseEvent<HTMLButtonElement> | KeyboardEvent) => void;
-}
-
-export const WizardToggle = ({
-  steps,
-  activeStep,
-  footer,
-  nav,
-  isNavExpanded,
-  toggleNavExpanded,
-  'aria-label': ariaLabel = 'Wizard toggle'
-}: WizardToggleProps) => {
-  const isActiveSubStep = isWizardSubStep(activeStep);
-  const parentStep = isActiveSubStep && steps.find(step => step.id === activeStep.parentId);
-  const nonSubSteps = steps.filter(step => !isWizardSubStep(step));
-  const wizardToggleIndex = nonSubSteps.indexOf(parentStep || activeStep) + 1;
-
-  const handleKeyClicks = React.useCallback(
-    (event: KeyboardEvent): void => {
-      if (isNavExpanded && event.key === KeyTypes.Escape) {
-        toggleNavExpanded?.(event);
-      }
-    },
-    [isNavExpanded, toggleNavExpanded]
-  );
-
-  // Open/close collapsable navigation 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]);
-
-  const bodyContent = steps.map(step => {
-    const props: WizardStepProps = step.component?.props || {};
-    const { children, body, ...propsWithoutChildren } = props;
-
-    return (
-      <React.Fragment key={step.id}>
-        {activeStep?.name === step.name &&
-          (body || body === undefined ? <WizardBody {...body}>{children}</WizardBody> : children)}
-
-        <div key={step.id} style={{ display: 'none' }}>
-          <WizardStep {...propsWithoutChildren} />
-        </div>
-      </React.Fragment>
-    );
-  });
-
-  return (
-    <>
-      <button
-        onClick={toggleNavExpanded}
-        className={css(styles.wizardToggle, isNavExpanded && 'pf-m-expanded')}
-        aria-label={ariaLabel}
-        aria-expanded={isNavExpanded}
-      >
-        <span className={css(styles.wizardToggleList)}>
-          <span className={css(styles.wizardToggleListItem)}>
-            <span className={css(styles.wizardToggleNum)}>{wizardToggleIndex}</span>{' '}
-            {parentStep?.name || 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)}>
-          {nav}
-          {bodyContent}
-        </div>
-
-        {footer}
-      </div>
-    </>
-  );
-};
-
-WizardToggle.displayName = 'WizardToggle';