@progressiveui/react 2.0.2 → 2.0.4

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

@@ -1,209 +0,0 @@
-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

@@ -1,206 +0,0 @@
-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

@@ -1,93 +0,0 @@
-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

@@ -1,149 +0,0 @@
-/* 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

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