@progressiveui/react 1.22.0

package/src/components/Tab/Tab-oldClass.js

@@ -0,0 +1,209 @@
+import PropTypes from "prop-types";
+import React from "react";
+import classNames from "classnames";
+import { withWFPCoreSettings } from "../WFPCoreSettings";
+
+class Tab extends React.Component {
+  static propTypes = {
+    prefix: PropTypes.string.isRequired,
+    /**
+     * Specify an optional className to be added to your Tab
+     */
+    className: PropTypes.string,
+
+    /**
+     * A handler that is invoked when a user clicks on the control.
+     * Reserved for usage in Tabs
+     */
+    handleTabClick: PropTypes.func,
+
+    /**
+     * A handler that is invoked when a user presses left/right key.
+     * Reserved for usage in Tabs
+     */
+    handleTabAnchorFocus: PropTypes.func,
+
+    /**
+     * A handler that is invoked on the key down event for the control.
+     * Reserved for usage in Tabs
+     */
+    handleTabKeyDown: PropTypes.func,
+
+    /**
+     * Whether your Tab is disabled.
+     */
+    disabled: PropTypes.bool,
+
+    /**
+     * Provide a string that represents the `href` of the Tab
+     */
+    href: PropTypes.string.isRequired,
+
+    /**
+     * The index of your Tab in your Tabs. Reserved for usage in Tabs
+     */
+    index: PropTypes.number,
+
+    /**
+     * Provide the contents of your Tab
+     */
+    label: PropTypes.node,
+
+    /**
+     * Provide an accessibility role for your Tab
+     */
+    role: PropTypes.string.isRequired,
+
+    /**
+     * Provide a handler that is invoked when a user clicks on the control
+     */
+    onClick: PropTypes.func.isRequired,
+
+    /**
+     * Provide a handler that is invoked on the key down event for the control
+     */
+    onKeyDown: PropTypes.func.isRequired,
+
+    /**
+     * Whether your Tab is selected.
+     * Reserved for usage in Tabs
+     */
+    selected: PropTypes.bool.isRequired,
+
+    /**
+     * Specify the tab index of the <a> node
+     */
+    tabIndex: PropTypes.number.isRequired,
+
+    /*
+     * An optional parameter to allow overriding the anchor rendering.
+     * Useful for using Tab along with react-router or other client
+     * side router libraries.
+     **/
+    renderAnchor: PropTypes.func,
+
+    /*
+     * An optional parameter to allow overriding the content rendering.
+     **/
+    renderContent: PropTypes.func,
+    /*
+     * An optional parameter to allow overriding the list element rendering.
+     **/
+    renderListElement: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  };
+
+  static defaultProps = {
+    role: "presentation",
+    label: "provide a label",
+    tabIndex: 0,
+    href: "#",
+    selected: false,
+    onClick: () => {},
+    onKeyDown: () => {},
+  };
+
+  setTabFocus(evt) {
+    const leftKey = 37;
+    const rightKey = 39;
+    if (evt.which === leftKey) {
+      this.props.handleTabAnchorFocus(this.props.index - 1);
+    } else if (evt.which === rightKey) {
+      this.props.handleTabAnchorFocus(this.props.index + 1);
+    } else {
+      return;
+    }
+  }
+
+  render() {
+    const {
+      prefix,
+      className,
+      disabled,
+      handleTabClick,
+      handleTabAnchorFocus, // eslint-disable-line
+      handleTabKeyDown,
+      href,
+      index,
+      label,
+      selected,
+      tabIndex,
+      onClick,
+      onKeyDown,
+      renderAnchor,
+      renderListElement,
+      ...other
+    } = this.props;
+
+    const classes = classNames(
+      `${prefix}--tabs__nav-item`,
+      { [`${prefix}--tabs__nav-item--disabled`]: disabled },
+      { [`${prefix}--tabs__nav-item--selected`]: selected },
+      className
+    );
+
+    const selectedClasses = classNames(
+      `${prefix}--tabs__nav-item`,
+      `${prefix}--tabs__nav-item--selected`,
+      className
+    );
+
+    const anchorProps = {
+      className: "wfp--tabs__nav-link",
+      href: disabled ? undefined : href,
+      label,
+      role: "tab",
+      tabIndex,
+      "aria-selected": selected,
+      ref: (e) => {
+        this.tabAnchor = e;
+      },
+    };
+
+    //  {...other}
+    const liProps = {
+      tabIndex: -1,
+      className: classes,
+      onClick: (evt) => {
+        if (!disabled) {
+          handleTabClick(index, label, evt);
+          onClick(evt);
+        }
+      },
+      onKeyDown: (evt) => {
+        if (!disabled) {
+          this.setTabFocus(evt);
+          handleTabKeyDown(index, label, evt);
+          onKeyDown(evt);
+        }
+      },
+      role: "presentation",
+      selected: selected,
+      ...other,
+    };
+
+    return (
+      <React.Fragment>
+        {renderListElement ? (
+          renderListElement({
+            ...this.props,
+            ...liProps,
+            anchor: anchorProps,
+            selectedClasses: selectedClasses,
+          })
+        ) : (
+          <li {...liProps}>
+            {renderAnchor ? (
+              renderAnchor(anchorProps)
+            ) : disabled ? (
+              <span {...anchorProps}>{label}</span>
+            ) : (
+              <a {...anchorProps}>{label}</a>
+            )}
+          </li>
+        )}
+      </React.Fragment>
+    );
+  }
+}
+
+export default withWFPCoreSettings(Tab);

package/src/components/Tab/Tab-oldFunc.js

@@ -0,0 +1,206 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import classNames from 'classnames';
+import useSettings from '../../hooks/useSettings';
+
+const Tab = (props) => {
+  const { prefix } = useSettings();
+  const {
+    className,
+    disabled,
+    handleTabClick,
+    handleTabAnchorFocus, // eslint-disable-line
+    handleTabKeyDown,
+    href,
+    index,
+    label,
+    selected,
+    tabIndex,
+    onClick,
+    onKeyDown,
+    renderAnchor,
+    renderListElement,
+    ...other
+  } = props;
+
+  const setTabFocus = (evt) => {
+    const leftKey = 37;
+    const rightKey = 39;
+    if (evt.which === leftKey) {
+      props.handleTabAnchorFocus(props.index - 1);
+    } else if (evt.which === rightKey) {
+      props.handleTabAnchorFocus(props.index + 1);
+    } else {
+      return;
+    }
+  };
+
+  const classes = classNames(
+    `${prefix}--tabs__nav-item`,
+    { [`${prefix}--tabs__nav-item--disabled`]: disabled },
+    { [`${prefix}--tabs__nav-item--selected`]: selected },
+    className
+  );
+
+  const selectedClasses = classNames(
+    `${prefix}--tabs__nav-item`,
+    `${prefix}--tabs__nav-item--selected`,
+    className
+  );
+
+  const anchorProps = {
+    className: 'wfp--tabs__nav-link',
+    href: disabled ? undefined : href,
+    label,
+    role: 'tab',
+    tabIndex,
+    'aria-selected': selected,
+    // ref: (e) => {
+    //   tabAnchor = e;
+    // },
+  };
+
+  //  {...other}
+  const liProps = {
+    tabIndex: -1,
+    className: classes,
+    onClick: (evt) => {
+      if (!disabled) {
+        handleTabClick(index, label, evt);
+        onClick(evt);
+      }
+    },
+    onKeyDown: (evt) => {
+      if (!disabled) {
+        setTabFocus(evt);
+        handleTabKeyDown(index, label, evt);
+        onKeyDown(evt);
+      }
+    },
+    role: 'presentation',
+    selected: selected,
+    ...other,
+  };
+
+  return (
+    <React.Fragment>
+      {renderListElement ? (
+        renderListElement({
+          ...props,
+          ...liProps,
+          anchor: anchorProps,
+          selectedClasses: selectedClasses,
+        })
+      ) : (
+        <li {...liProps}>
+          {renderAnchor ? (
+            renderAnchor(anchorProps)
+          ) : disabled ? (
+            <span {...anchorProps}>{label}</span>
+          ) : (
+            <a {...anchorProps}>{label}</a>
+          )}
+        </li>
+      )}
+    </React.Fragment>
+  );
+};
+
+Tab.propTypes = {
+  /**
+   * Specify an optional className to be added to your Tab
+   */
+  className: PropTypes.string,
+
+  /**
+   * A handler that is invoked when a user clicks on the control.
+   * Reserved for usage in Tabs
+   */
+  handleTabClick: PropTypes.func,
+
+  /**
+   * A handler that is invoked when a user presses left/right key.
+   * Reserved for usage in Tabs
+   */
+  handleTabAnchorFocus: PropTypes.func,
+
+  /**
+   * A handler that is invoked on the key down event for the control.
+   * Reserved for usage in Tabs
+   */
+  handleTabKeyDown: PropTypes.func,
+
+  /**
+   * Whether your Tab is disabled.
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Provide a string that represents the `href` of the Tab
+   */
+  href: PropTypes.string.isRequired,
+
+  /**
+   * The index of your Tab in your Tabs. Reserved for usage in Tabs
+   */
+  index: PropTypes.number,
+
+  /**
+   * Provide the contents of your Tab
+   */
+  label: PropTypes.node,
+
+  /**
+   * Provide an accessibility role for your Tab
+   */
+  role: PropTypes.string.isRequired,
+
+  /**
+   * Provide a handler that is invoked when a user clicks on the control
+   */
+  onClick: PropTypes.func.isRequired,
+
+  /**
+   * Provide a handler that is invoked on the key down event for the control
+   */
+  onKeyDown: PropTypes.func.isRequired,
+
+  /**
+   * Whether your Tab is selected.
+   * Reserved for usage in Tabs
+   */
+  selected: PropTypes.bool.isRequired,
+
+  /**
+   * Specify the tab index of the <a> node
+   */
+  tabIndex: PropTypes.number.isRequired,
+
+  /*
+   * An optional parameter to allow overriding the anchor rendering.
+   * Useful for using Tab along with react-router or other client
+   * side router libraries.
+   **/
+  renderAnchor: PropTypes.func,
+
+  /*
+   * An optional parameter to allow overriding the content rendering.
+   **/
+  renderContent: PropTypes.func,
+  /*
+   * An optional parameter to allow overriding the list element rendering.
+   **/
+  renderListElement: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+};
+
+Tab.defaultProps = {
+  role: 'presentation',
+  label: 'provide a label',
+  tabIndex: 0,
+  href: '#',
+  selected: false,
+  onClick: () => {},
+  onKeyDown: () => {},
+};
+
+export default Tab;

package/src/components/Tab/Tab-test.js

@@ -0,0 +1,93 @@
+import '@testing-library/jest-dom/extend-expect';
+import React from 'react';
+import Tab from '../Tab';
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+describe('Tab', () => {
+  let mockProps = {};
+
+  beforeEach(() => {
+    mockProps = {
+      id: 'tab',
+      "data-testid": 'tab',
+      label:"firstTab",
+      role: 'presentation',
+      tabIndex: 0,
+      selected: false,
+    };
+  });
+
+  describe('renders as expected', () => {
+    afterEach(cleanup);
+    it('render label as expected', () => {
+      render(<Tab {...mockProps} />);
+      expect(screen.getByText('firstTab')).toBeInTheDocument();
+    });
+
+    it('renders tab component with expected className', () => {
+      render(<Tab {...mockProps} />);
+      expect(screen.getByTestId('tab')).toHaveClass('wfp--tabs__nav-item');
+    });
+
+    it('renders <a> with expected className', () => {
+      render(<Tab {...mockProps} />);
+      expect(screen.getByText('firstTab')).toHaveClass('wfp--tabs__nav-link');
+    });
+
+    it('renders correct className when prop disabled is applied', () => {
+      render(<Tab disabled {...mockProps} />);
+      expect(screen.getByTestId('tab')).toHaveClass('wfp--tabs__nav-item--disabled');
+    });
+
+
+    it('renders <li> with [role="presentation"]', () => {
+      render(<Tab {...mockProps}>content</Tab>);
+      expect(screen.getByTestId('tab')).toHaveAttribute('role','presentation');
+    });
+
+    it('renders <a> with [role="tab"]', () => {
+      render(<Tab {...mockProps} href="#">content</Tab>);
+      expect(screen.getByTestId('tab')).toHaveAttribute('role','presentation');
+    });
+
+
+    it('sets href as # by default', () => {
+      render(<Tab {...mockProps} href="#" />);
+      expect(screen.getByText('firstTab')).toHaveAttribute('href','#');
+    });
+
+    it('sets new href value when passed in via props', () => {
+      render(<Tab {...mockProps} href="#other-content"/>);
+      expect(screen.getByText('firstTab')).toHaveAttribute('href','#other-content');
+    });
+
+    it('should not have [className="wfp--tabs__nav-item--selected"] by default', () => {
+      render(<Tab {...mockProps} />);
+      expect(screen.getByTestId('tab')).not.toHaveClass('wfp--tabs__nav-item--selected');
+    });
+
+    it('adds [className="wfp--tabs__nav-item--selected"] when selected prop is true', () => {
+      render(<Tab {...mockProps} selected/>);
+      expect(screen.getByTestId('tab')).toHaveClass('wfp--tabs__nav-item--selected');
+    });
+  });
+
+  describe('events', () => {
+    describe('click', () => {
+      // afterEach(cleanup);
+      // it('invokes handleTabClick from onClick prop and pass correct className', () => {
+      //   render(<Tab {...mockProps} href="#" handleTabClick={() => true} />);
+      //   userEvent.click(screen.getByTestId('tab'));
+      //   expect(screen.getByText('firstTab')).toHaveAttribute('aria-selected', "true");
+      // });
+
+      // it('invokes onClick when a function is passed to onClick prop', () => {
+      //   wrapper.setProps({ onClick });
+      //   wrapper.find('li').simulate('click');
+      //   expect(onClick).toBeCalled();
+      // });
+    });
+
+  });
+});

package/src/components/Tab/Tab.tsx

@@ -0,0 +1,149 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import * as React from "react";
+//import classNames from 'classnames';
+//import useSettings from '../../hooks/useSettings';
+import useTab from "./useTab";
+
+export interface TabProps extends React.ComponentPropsWithRef<"li"> {
+  /**
+   * Optional callback for when a tab is clicked. Provides the index, label, and event details.
+   * @functionality
+   */
+  handleTabClick?: (
+    index?: number,
+    label?: string | React.ReactNode,
+    evt?: React.ChangeEvent<HTMLInputElement>
+  ) => void;
+  /**
+   * Optional callback for when a tab gains focus. Provides the index of the focused tab.
+   * @functionality
+   */
+  handleTabAnchorFocus?: (index?: number) => void;
+  /**
+   * Optional callback for when a keydown event occurs on a tab. Provides the index, label, and event details.
+   * @functionality
+   */
+  handleTabKeyDown?: (
+    index?: number,
+    label?: string | React.ReactNode,
+    evt?: React.ChangeEvent<HTMLInputElement>
+  ) => void;
+  /**
+   * Href for the tab, useful when each tab is associated with a different URL.
+   * @navigation
+   */
+  href?: string;
+  /**
+   * Index of the tab within the Tabs component.
+   * @navigation
+   */
+  index?: number;
+  /**
+   * Content to be displayed as the label of the tab. Can be a string or React node.
+   * @content
+   */
+  label?: React.ReactNode;
+  /**
+   * ARIA role for the tab element, often set to 'tab'.
+   * @accessibility
+   */
+  role?: string;
+  /**
+   * Indicates whether the tab is currently selected.
+   * @state
+   */
+  selected?: boolean;
+  /**
+   * TabIndex for the tab, useful for accessibility and keyboard navigation.
+   * @accessibility
+   */
+  tabIndex?: number;
+  /**
+   * Optional custom renderer for the anchor element within the tab.
+   * @render
+   */
+  renderAnchor?: (props?: object) => React.ReactNode;
+  /**
+   * Optional custom renderer for the content of the tab.
+   * @render
+   */
+  renderContent?: () => React.ReactNode;
+  /**
+   * Optional custom renderer for the list element of the tab.
+   * @render
+   */
+  renderListElement?: ((props?: object) => React.ReactNode) | React.ReactNode;
+  /**
+   * Optional CSS class to apply to the tab. Allows for additional styling.
+   * @style
+   */
+  className?: string;
+  /**
+   * Indicates whether the tab is disabled.
+   * @state
+   */
+  disabled?: boolean;
+  /**
+   * Optional components to replace default elements of the Tab, such as the Tab itself.
+   * @customization
+   */
+  components?: {
+    Tab?: React.ReactNode;
+  };
+  //onClick?: (evt?: Event) => void;
+  //onKeyDown?: (evt?: Event) => void;
+}
+
+/** Tab to be used inside the Tabs component */
+
+const Tab: React.FC<TabProps> = (props) => {
+  // const { prefix } = useSettings();
+  const {
+    // className,
+    disabled,
+    //  handleTabClick = () => {},
+    // handleTabAnchorFocus = () => {}, // eslint-disable-line
+    //  handleTabKeyDown = () => {},
+    // href,
+    // index = 0,
+    label,
+    //  selected,
+    //  tabIndex,
+    ///  onClick = () => {},
+    //  onKeyDown = () => {},
+    renderAnchor,
+    renderListElement,
+    //  ...other
+  } = props;
+
+  const { anchorProps, liProps, selectedClasses } = useTab(props);
+
+  return (
+    <React.Fragment>
+      {renderListElement ? (
+        typeof renderListElement === "function" ? (
+          renderListElement({
+            ...props,
+            ...liProps,
+            anchor: anchorProps,
+            selectedClasses: selectedClasses,
+          })
+        ) : (
+          <>{renderListElement}</>
+        )
+      ) : (
+        <li {...liProps}>
+          {renderAnchor ? (
+            renderAnchor(anchorProps)
+          ) : disabled ? (
+            <span {...anchorProps}>{label}</span>
+          ) : (
+            <a {...anchorProps}>{label}</a>
+          )}
+        </li>
+      )}
+    </React.Fragment>
+  );
+};
+
+export default Tab;

package/src/components/Tab/index.ts

@@ -0,0 +1,3 @@
+export { default } from './Tab';
+
+export { default as useTab } from './useTab';