@progressiveui/react 1.22.0

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

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

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

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

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

@@ -0,0 +1,73 @@
+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,
+//     },
+//   },
+// };