@progressiveui/react 2.0.3 → 2.0.4

package/src/components/Tabs/Tabs-old.js.legacy

@@ -1,281 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import classNames from 'classnames';
-import TabContent from '../TabContent';
-import { withWFPCoreSettings } from '../WFPCoreSettings';
-
-/** Tabs allow users to navigate easily between views within the same context */
-class Tabs extends React.Component {
-  static propTypes = {
-    prefix: PropTypes.string.isRequired,
-    /**
-     * Specify the text to be read by screen-readers when visiting the <Tabs>
-     * component
-     */
-    ariaLabel: PropTypes.string,
-
-    /**
-     * Pass in a collection of <Tab> children to be rendered depending on the
-     * currently selected tab
-     */
-    children: PropTypes.node,
-
-    /**
-     * Provide a className that is applied to the root <nav> component for the
-     * <Tabs>
-     */
-    className: PropTypes.string,
-
-    /**
-     * Provide a customTabContent by using independent action triggers
-     * inside the Tabs
-     */
-    customTabContent: PropTypes.bool,
-
-    /**
-     * Specify whether the animation should be used
-     */
-    disableAnimation: PropTypes.bool,
-
-    /**
-     * Specify whether the Tabs are displayed inline
-     */
-    inline: PropTypes.bool,
-
-    /**
-     * Specify whether the Tab content is hidden
-     */
-    hidden: PropTypes.bool,
-
-    /**
-     * By default, this value is "navigation". You can also provide an alternate
-     * role if it makes sense from the accessibility-side
-     */
-    role: PropTypes.string.isRequired,
-
-    /**
-     * Optionally provide an `onClick` handler that is invoked when a <Tab> is
-     * clicked
-     */
-    onClick: PropTypes.func,
-
-    /**
-     * Optionally provide an `onKeyDown` handler that is invoked when keyed
-     * navigation is triggered
-     */
-    onKeyDown: PropTypes.func,
-
-    /**
-     * Provide an optional handler that is called whenever the selection
-     * changes. This method is called with the index of the tab that was
-     * selected
-     */
-    onSelectionChange: PropTypes.func,
-
-    /**
-     * Provide a string that represents the `href` for the triggered <Tab>
-     */
-    triggerHref: PropTypes.string.isRequired,
-
-    /**
-     * Optionally provide an index for the currently selected <Tab>
-     */
-    selected: PropTypes.number,
-  };
-
-  static defaultProps = {
-    role: 'navigation',
-    triggerHref: '#',
-    selected: 0,
-    ariaLabel: 'listbox',
-  };
-
-  constructor(props) {
-    super(props);
-    this.state = {};
-    // Create the ref
-    this.rootRef = React.createRef();
-  }
-
-  static getDerivedStateFromProps({ selected }, state) {
-    const { prevSelected } = state;
-    return prevSelected === selected
-      ? null
-      : {
-          selected,
-          prevSelected: selected,
-        };
-  }
-
-  componentDidMount() {
-    this.getSizes();
-    window.addEventListener('resize', this.getSizes);
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.getSizes);
-  }
-
-  getTabs() {
-    return React.Children.map(this.props.children, (tab) => tab);
-  }
-
-  getTabAt = (index) => {
-    return (
-      this[`tab${index}`] || React.Children.toArray(this.props.children)[index]
-    );
-  };
-
-  getSizes = () => {
-    if (this.rootRef.current === null || this.rootRef.current.length > 1) {
-      return null;
-    }
-    const rootBounds = this.rootRef.current.getBoundingClientRect();
-    const sizes = {};
-    Object.values(this.rootRef.current.children).forEach((el, key) => {
-      const bounds = el.children[0].getBoundingClientRect();
-
-      const left = bounds.left - rootBounds.left;
-      const right = rootBounds.right - bounds.right;
-
-      sizes[key] = { left, right };
-    });
-
-    this.setState({ sizes });
-    return sizes;
-  };
-
-  setTabAt = (index, tabRef) => {
-    this[`tab${index}`] = tabRef;
-  };
-
-  // following functions (handle*) are Props on Tab.js, see Tab.js for parameters
-  handleTabClick = (onSelectionChange) => {
-    return (index, label, evt) => {
-      if (evt) {
-        evt.preventDefault();
-      }
-      this.selectTabAt(index, onSelectionChange);
-    };
-  };
-
-  handleTabKeyDown = (onSelectionChange) => {
-    return (index, label, evt) => {
-      const key = evt.key || evt.which;
-
-      if (key === 'Enter' || key === 13 || key === ' ' || key === 32) {
-        this.selectTabAt(index, onSelectionChange);
-      }
-    };
-  };
-
-  handleTabAnchorFocus = (onSelectionChange) => {
-    return (index) => {
-      const tabCount = React.Children.count(this.props.children) - 1;
-      let tabIndex = index;
-
-      if (index < 0) {
-        tabIndex = tabCount;
-      } else if (index > tabCount) {
-        tabIndex = 0;
-      }
-
-      const tab = this.getTabAt(tabIndex);
-
-      if (tab) {
-        this.selectTabAt(tabIndex, onSelectionChange);
-        if (tab.tabAnchor) {
-          tab.tabAnchor.focus();
-        }
-      }
-    };
-  };
-
-  selectTabAt = (index, onSelectionChange) => {
-    if (this.state.selected !== index) {
-      this.setState({
-        selected: index,
-      });
-      if (typeof onSelectionChange === 'function') {
-        onSelectionChange(index);
-      }
-    }
-  };
-
-  render() {
-    const {
-      prefix,
-      ariaLabel,
-      disableAnimation,
-      inline,
-      className,
-      customTabContent,
-      triggerHref,
-      role,
-      onSelectionChange,
-      ...other
-    } = this.props;
-
-    const { selected, sizes } = this.state;
-
-    const tabsWithProps = this.getTabs().map((tab, index) => {
-      const newTab = React.cloneElement(tab, {
-        index,
-        selected: index === selected,
-        handleTabClick: this.handleTabClick(onSelectionChange),
-        handleTabAnchorFocus: this.handleTabAnchorFocus(onSelectionChange),
-        ref: (e) => {
-          this.setTabAt(index, e);
-        },
-        handleTabKeyDown: this.handleTabKeyDown(onSelectionChange),
-      });
-
-      return newTab;
-    });
-
-    const tabContentWithProps = !customTabContent
-      ? React.Children.map(tabsWithProps, (tab) => {
-          const { children, selected } = tab.props;
-          if (!children) {
-            return null;
-          }
-          return (
-            <TabContent
-              className={`${prefix}--tab-content`}
-              aria-hidden={!selected}
-              hidden={!selected}
-              selected={selected}>
-              {children}
-            </TabContent>
-          );
-        })
-      : null;
-
-    const classes = {
-      tabs: classNames(
-        `${prefix}--tabs`,
-        { [`${prefix}--tabs--no-animation`]: disableAnimation },
-        className
-      ),
-      tablist: classNames(`${prefix}--tabs__nav`, {
-        [`${prefix}--tabs__nav--inline`]: inline,
-      }),
-    };
-
-    const sizeBar = sizes ? sizes[selected] : undefined;
-
-    return (
-      <>
-        <nav {...other} className={classes.tabs} role={role}>
-          <div className={`${prefix}--tabs__nav__bar`} style={sizeBar}></div>
-          <ul ref={this.rootRef} role="tablist" className={classes.tablist}>
-            {tabsWithProps}
-          </ul>
-        </nav>
-        {tabContentWithProps}
-      </>
-    );
-  }
-}
-
-export default withWFPCoreSettings(Tabs);

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

@@ -1,284 +0,0 @@
-import '@testing-library/jest-dom/extend-expect';
-import React from 'react';
-import Tabs from '.';
-import Tab from '../Tab';
-import TabsSkeleton from './Tabs.Skeleton';
-import { shallow, mount } from 'enzyme';
-import { cleanup, render, screen } from '@testing-library/react';
-
-describe('Tabs', () => {
-  describe('renders as expected', () => {
-    describe('navigation (<nav>)', () => {
-      afterEach(cleanup);
-
-      it('renders [role="navigation"] props on <nav> by default', () => {
-        render(
-          <Tabs className="extra-class" data-testid="tabs">
-            <Tab label="firstTab">content1</Tab>
-            <Tab label="lastTab">content2</Tab>
-          </Tabs>
-        );
-        expect(screen.getByTestId('tabs')).toHaveAttribute(
-          'role',
-          'navigation'
-        );
-      });
-
-      // it('renders [role="tablist"] props on <ul> by default', () => {
-      //   render(
-      //     <Tabs className="extra-class" data-testid="tabs">
-      //     <Tab label="firstTab">content1</Tab>
-      //   </Tabs>
-      //   )
-      //   expect(screen.getByTestId('tabs')).toHaveAttribute('role','tablist');
-      // });
-
-      it('renders extra classes on <nav> via className prop', () => {
-        render(
-          <Tabs className="extra-class" data-testid="tabs">
-            <Tab label="firstTab">content1</Tab>
-          </Tabs>
-        );
-        expect(screen.getByTestId('tabs')).toHaveClass('extra-class');
-      });
-
-      it('renders expected classes on <nav> by default', () => {
-        render(
-          <Tabs className="extra-class" data-testid="tabs">
-            <Tab label="firstTab">content1</Tab>
-          </Tabs>
-        );
-        expect(screen.getByTestId('tabs')).toHaveClass('wfp--tabs');
-      });
-    });
-
-    describe('Children (<Tab>)', () => {
-      afterEach(cleanup);
-
-      it('renders children as expected', () => {
-        render(
-          <Tabs data-testid="tabs">
-            <Tab data-testid="tab-one" label="firstTab">
-              content1
-            </Tab>
-            <Tab data-testid="tab-last" label="lastTab">
-              content2
-            </Tab>
-          </Tabs>
-        );
-        expect(screen.getByText('content1')).toBeInTheDocument();
-        expect(screen.getByText('content2')).toBeInTheDocument();
-      });
-
-      // it('renders index prop', () => {
-      //   render(
-      //     <Tabs data-testid="tabs">
-      //       <Tab data-testid="tab-one" label="firstTab">content1</Tab>
-      //       <Tab data-testid="tab-last" label="lastTab">content2</Tab>
-      //     </Tabs>
-      //   );
-      //   expect(screen.getByTestId('tab-one')).toHaveAttribute('index', '0');
-      //   expect(screen.getByTestId('tab-last')).toHaveAttribute('index', '1');
-      // });
-
-      it('renders selected prop (where firstTab is selected by default)', () => {
-        render(
-          <Tabs data-testid="tabs">
-            <Tab data-testid="tab-one" label="firstTab" selected>
-              content1
-            </Tab>
-            <Tab data-testid="tab-last" label="lastTab">
-              content2
-            </Tab>
-          </Tabs>
-        );
-        expect(screen.getByTestId('tab-one')).not.toBeEmptyDOMElement();
-        // expect(screen.getByTestId('tab-last')).toHaveAttribute('selected', false);
-      });
-    });
-  });
-
-  /*describe('Children (<TabContent>)', () => {
-    const wrapper = shallow(
-      <Tabs>
-        <Tab label="firstTab">content1</Tab>
-        <Tab label="lastTab">content2</Tab>
-      </Tabs>
-    );
-
-    it('renders expected className', () => {
-      const tabContentClass = 'wfp--tab-content';
-      expect(
-        wrapper
-          .find('.wfp--tab-content')
-          .first()
-          .hasClass(tabContentClass)
-      ).toBe(true);
-    });
-
-    it('renders content children as expected', () => {
-      expect(wrapper.find('.wfp--tab-content').length).toEqual(2);
-    });
-
-    it('renders hidden props with boolean value', () => {
-      const hiddenProp = wrapper
-        .find('.wfp--tab-content')
-        .first()
-        .props().hidden;
-      expect(typeof hiddenProp).toBe('boolean');
-    });
-
-    it('renders selected props with boolean value', () => {
-      const selectedProp = wrapper
-        .find('.wfp--tab-content')
-        .first()
-        .props().hidden;
-      expect(typeof selectedProp).toBe('boolean');
-    });
-  });*/
-
-  /*describe('events', () => {
-
-    describe('keydown', () => {
-      const wrapper = mount(
-        <Tabs selected={0}>
-          <Tab label="firstTab" className="firstTab">
-            content
-          </Tab>
-          <Tab label="lastTab" className="lastTab">
-            content
-          </Tab>
-        </Tabs>
-      );
-
-      const firstTab = wrapper.find('.firstTab').last();
-      const lastTab = wrapper.find('.lastTab').last();
-      const leftKey = 37;
-      const rightKey = 39;
-      const spaceKey = 32;
-      const enterKey = 13;
-
-      describe('state: selected', () => {
-        it('updates selected state when pressing arrow keys', () => {
-          firstTab.simulate('keydown', { which: rightKey });
-          expect(wrapper.state().selected).toEqual(1);
-          lastTab.simulate('keydown', { which: leftKey });
-          expect(wrapper.state().selected).toEqual(0);
-        });
-
-        it('loops focus and selected state from lastTab to firstTab', () => {
-          lastTab.simulate('keydown', { which: rightKey });
-          expect(wrapper.state().selected).toEqual(0);
-        });
-
-        it('loops focus and selected state from firstTab to lastTab', () => {
-          firstTab.simulate('keydown', { which: leftKey });
-          expect(wrapper.state().selected).toEqual(1);
-        });
-
-        it('updates selected state when pressing space or enter key', () => {
-          firstTab.simulate('keydown', { which: spaceKey });
-          expect(wrapper.state().selected).toEqual(0);
-          lastTab.simulate('keydown', { which: enterKey });
-          expect(wrapper.state().selected).toEqual(1);
-        });
-      });
-    });
-  });*/
-
-  /*describe('default state', () => {
-    const wrapper = mount(
-      <Tabs>
-        <Tab label="firstTab" className="firstTab">
-          content
-        </Tab>
-        <Tab label="lastTab" className="lastTab">
-          content
-        </Tab>
-      </Tabs>
-    );
-
-    describe('selected', () => {
-      it('should be 0', () => {
-        expect(wrapper.state().selected).toEqual(0);
-      });
-    });
-  });*/
-
-  /*describe('Allow initial state to draw from props', () => {
-    const wrapper = mount(
-      <Tabs selected={1}>
-        <Tab label="firstTab" className="firstTab">
-          content
-        </Tab>
-        <Tab label="lastTab" className="lastTab">
-          content
-        </Tab>
-      </Tabs>
-    );
-
-    const children = wrapper.find(Tab);
-
-    it('Should apply the selected property on the selected tab', () => {
-      expect(children.first().props().selected).toEqual(false);
-      expect(children.last().props().selected).toEqual(true);
-    });
-  });*/
-});
-
-// describe('props update', () => {
-//   const wrapper = mount(
-//     <Tabs selected={0}>
-//       <Tab label="firstTab" className="firstTab">
-//         content
-//       </Tab>
-//       <Tab label="lastTab" className="lastTab">
-//         content
-//       </Tab>
-//     </Tabs>
-//   );
-
-//   it('updates selected state when selected prop changes', () => {
-//     wrapper.setProps({ selected: 1 });
-//     expect(wrapper.state().selected).toEqual(1);
-//     wrapper.setProps({ selected: 0 });
-//     expect(wrapper.state().selected).toEqual(0);
-//   });
-
-//   it('avoids updating state upon setting props, unless there the value actually changes', () => {
-//     wrapper.setProps({ selected: 1 });
-//     wrapper.setState({ selected: 2 });
-//     wrapper.setProps({ selected: 1 });
-//     expect(wrapper.state().selected).toEqual(2);
-//   });
-// });
-
-// describe('selection change', () => {
-//   const wrapper = mount(
-//     <Tabs selected={0} onSelectionChange={jest.fn()}>
-//       <Tab label="firstTab">content</Tab>
-//       <Tab label="lastTab" className="secondTab">
-//         content
-//       </Tab>
-//     </Tabs>
-//   );
-
-//   it('updates selected state when selected prop changes', () => {
-//     wrapper
-//       .find('.secondTab')
-//       .last()
-//       .simulate('click');
-//     expect(wrapper.props().onSelectionChange).toHaveBeenCalledWith(1);
-//   });
-// });
-
-// describe('TabsSkeleton', () => {
-//   describe('Renders as expected', () => {
-//     const wrapper = shallow(<TabsSkeleton />);
-
-//     it('Has the expected classes', () => {
-//       expect(wrapper.hasClass('wfp--skeleton')).toEqual(true);
-//       expect(wrapper.hasClass('wfp--tabs')).toEqual(true);
-//     });
-//   });
-// });

package/src/components/Tabs/Tabs.Skeleton.jsx

@@ -1,33 +0,0 @@
-import React from "react";
-import useSettings from "../../hooks/useSettings";
-
-const TabsSkeleton = () => {
-  const { prefix } = useSettings();
-  const tab = (
-    <li className={`${prefix}--tabs__nav-item`}>
-      <div className={`${prefix}--tabs__nav-link`}>&nbsp;</div>
-    </li>
-  );
-  return (
-    <nav className={`${prefix}--tabs ${prefix}--skeleton`}>
-      <div className={`${prefix}--tabs-trigger`}>
-        <div className={`${prefix}--tabs-trigger-text`}>&nbsp;</div>
-        <svg width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-          <path d="M10 0L5 5 0 0z" />
-        </svg>
-      </div>
-      <ul className={`${prefix}--tabs__nav ${prefix}--tabs__nav--hidden`}>
-        <li
-          className={`${prefix}--tabs__nav-item ${prefix}--tabs__nav-item--selected`}
-        >
-          <div className={`${prefix}--tabs__nav-link`}> &nbsp;</div>
-        </li>
-        {tab}
-        {tab}
-        {tab}
-      </ul>
-    </nav>
-  );
-};
-
-export default TabsSkeleton;

package/src/components/Tabs/Tabs.hbs

@@ -1,14 +0,0 @@
-<ul role="tablist" class="wfp--tabs__nav wfp--tabs__nav--hidden">
-	<li role="presentation" tabindex="-1" class="wfp--tabs__nav-item another-class wfp--tabs__nav-item--selected">
-		<a class="wfp--tabs__nav-link" href="#" role="tab" tabindex="0" aria-selected="false">Tab label 1</a>
-	</li>
-	<li role="presentation" tabindex="-1" class="wfp--tabs__nav-item another-class">
-		<a class="wfp--tabs__nav-link" href="#" role="tab" tabindex="0" aria-selected="false">Tab label 2</a>
-	</li>
-	<li role="presentation" tabindex="-1" class="wfp--tabs__nav-item another-class">
-		<a class="wfp--tabs__nav-link" href="#" role="tab" tabindex="0" aria-selected="false">Tab label 3</a>
-	</li>
-	<li role="presentation" tabindex="-1" class="wfp--tabs__nav-item another-class">
-		<a class="wfp--tabs__nav-link" href="#" role="tab" tabindex="0" aria-selected="false">Tab label 4</a>
-	</li>
-</ul>

package/src/components/Tabs/Tabs.stories.tsx

@@ -1,73 +0,0 @@
-import React from "react";
-import markdown from "./README.mdx";
-import Tabs from ".";
-import Tab from "../Tab";
-
-export default {
-  title: "Components/Content Related/Tabs",
-  component: Tabs,
-  parameters: {
-    componentSubtitle: "Component",
-    status: "released",
-    mdx: markdown,
-  },
-};
-
-const tab = {
-  label: "Label",
-};
-
-export const TabsDefault: Story = {
-  render: (args) => (
-    <Tabs {...args}>
-      <Tab label="Tab 1" selected>
-        <div className="some-content">Content for first tab goes here.</div>
-      </Tab>
-      <Tab label="Tab 2">
-        <div className="some-content">Content for second tab goes here.</div>
-      </Tab>
-      <Tab disabled label="Tab 3 disabled">
-        <div className="some-content">Content for fourth tab goes here.</div>
-      </Tab>
-    </Tabs>
-  ),
-  args: {},
-};
-
-export const TabDefault: Story = {
-  render: (args) => (
-    <Tab {...args}>
-      <div className="some-content">Content for first tab goes here.</div>
-    </Tab>
-  ),
-  args: { label: "Tab 1", selected: true },
-};
-
-// export const WithoutAnimation = (args) => (
-//   <Tabs {...args}>
-//     <Tab label={`${tab.label} 1`}>
-//       <div className="some-content">Content for first tab goes here.</div>
-//     </Tab>
-//     <Tab label={`${tab.label} 2`}>
-//       <div className="some-content">Content for second tab goes here.</div>
-//     </Tab>
-//     <Tab label={`${tab.label} 3`}>
-//       <div className="some-content">Content for third tab goes here.</div>
-//     </Tab>
-//     <Tab disabled label={`${tab.label} 4 disabled`}>
-//       <div className="some-content">Content for fourth tab goes here.</div>
-//     </Tab>
-//   </Tabs>
-// );
-
-// const description = `
-// You can have tabs without animations.
-// `;
-
-// WithoutAnimation.story = {
-//   parameters: {
-//     docs: {
-//       storyDescription: description,
-//     },
-//   },
-// };