@progressiveui/react 2.0.2 → 2.0.4

package/src/components/Tabs/Tabs.tsx

@@ -1,270 +0,0 @@
-import * as React from "react";
-import classNames from "classnames";
-//import TabContent from '../TabContent';
-import useSettings from "../../hooks/useSettings";
-import TabsContext from "./TabsContext";
-
-export interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * Specify the text to be read by screen-readers when visiting the <Tabs>
-   * component
-   */
-  ariaLabel?: string;
-
-  /**
-   * Pass in a collection of <Tab> children to be rendered depending on the
-   * currently selected tab
-   */
-  children?: React.ReactNode;
-
-  /**
-   * Provide a className that is applied to the root <nav> component for the
-   * <Tabs>
-   */
-  className?: string;
-
-  /**
-   * Provide a customTabContent by using independent action triggers
-   * inside the Tabs
-   */
-  customTabContent?: boolean;
-
-  /**
-   * Specify whether the animation should be used
-   */
-  disableAnimation?: boolean;
-
-  /**
-   * Specify whether the Tabs are displayed inline
-   */
-  inline?: boolean;
-
-  /**
-   * Specify whether the Tab content is hidden
-   */
-  hidden?: boolean;
-
-  /**
-   * By default, this value is "navigation". You can also provide an alternate
-   * role if it makes sense from the accessibility-side
-   */
-  role?: string;
-
-  /**
-   * Optionally provide an `onClick` handler that is invoked when a <Tab> is
-   * clicked
-   */
-  onClick?: () => void;
-
-  /**
-   * Optionally provide an `onKeyDown` handler that is invoked when keyed
-   * navigation is triggered
-   */
-  onKeyDown?: () => void;
-
-  /**
-   * 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?: () => void;
-
-  /**
-   * Provide a string that represents the `href` for the triggered <Tab>
-   */
-  triggerHref?: string;
-
-  /**
-   * Optionally provide an index for the currently selected <Tab>
-   */
-  selected?: string;
-}
-
-/** Tabs allow users to navigate easily between views within the same context */
-const Tabs: React.FC<TabsProps> = (props) => {
-  const {
-    // ariaLabel = 'listbox',
-    disableAnimation,
-    inline,
-    className,
-    //customTabContent,
-    // triggerHref = '#',
-    role = "navigation",
-    //onSelectionChange,
-    selected = null,
-    // children,
-    ...other
-  } = props;
-
-  const { prefix } = useSettings();
-  const [currentSelected, setCurrentSelected] = React.useState<string | null>(
-    selected
-  );
-  //const [sizes, setSizes] = useState<boolean>();
-  const rootRef = React.useRef(null);
-
-  React.useEffect(() => {
-    if (selected !== currentSelected) {
-      setCurrentSelected(selected);
-    }
-  }, [selected]);
-
-  /*useEffect(() => {
-    getSizes();
-    // eslint-disable-next-line no-undef
-    if (window) {
-      // eslint-disable-next-line no-undef
-      window.addEventListener('resize', getSizes);
-      return () => {
-        // eslint-disable-next-line no-undef
-        window.removeEventListener('resize', getSizes);
-      };
-    }
-  }, []);*/
-
-  const classes = {
-    tabs: classNames(
-      `${prefix}--tabs`,
-      { [`${prefix}--tabs--no-animation`]: disableAnimation },
-      className
-    ),
-    tablist: classNames(`${prefix}--tabs__nav`, {
-      [`${prefix}--tabs__nav--inline`]: inline,
-    }),
-  };
-
-  /*function getTabs() {
-    return React.Children.map(props.children, (tab) => tab);
-  }*/
-
-  /*const getTabAt = (index) => {
-    return this[`tab${index}`] || React.Children.toArray(props.children)[index];
-  };*/
-
-  /*const getSizes = () => {
-    if (rootRef.current === null || rootRef.current.length > 1) {
-      return null;
-    }
-    const rootBounds = rootRef.current.getBoundingClientRect();
-    const sizes = {};
-    Object.values(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 };
-    });
-    setSizes(sizes);
-  };
-*/
-  //   const setTabAt = (index, tabRef) => {
-  //     this[`tab${index}`] = tabRef;
-  //   };
-
-  // following functions (handle*) are Props on Tab.js, see Tab.js for parameters
-  const handleTabClick = (/*onSelectionChange*/) => {
-    return (index, label, evt) => {
-      if (evt) {
-        evt.preventDefault();
-      }
-      // selectTabAt(index, onSelectionChange);
-    };
-  };
-
-  const handleTabKeyDown = (/*onSelectionChange*/) => {
-    return (index, label, evt) => {
-      const key = evt.key || evt.which;
-
-      if (key === "Enter" || key === 13 || key === " " || key === 32) {
-        //selectTabAt(index, onSelectionChange);
-      }
-    };
-  };
-
-  const handleTabAnchorFocus = (/*onSelectionChange*/) => {
-    /* return (index) => {
-      const tabCount = React.Children.count(props.children) - 1;
-      let tabIndex = index;
-
-      if (index < 0) {
-        tabIndex = tabCount;
-      } else if (index > tabCount) {
-        tabIndex = 0;
-      }
-
-      const tab = getTabAt(tabIndex);
-
-      if (tab) {
-        selectTabAt(tabIndex, onSelectionChange);
-        if (tab.tabAnchor) {
-          tab.tabAnchor.focus();
-        }
-      }
-    };*/
-  };
-
-  /*const selectTabAt = (index, onSelectionChange) => {
-    /* if (currentSelected !== index) {
-      setCurrentSelected(index);
-      if (typeof onSelectionChange === 'function') {
-        onSelectionChange(index);
-      }
-    }
-  };*/
-
-  //   const { selected, sizes } = this.state;
-
-  /*const tabsWithProps = getTabs().map((Tab, index) => {
-    const newTab = React.cloneElement(Tab, {
-      index,
-      selected: index === currentSelected,
-      handleTabClick: handleTabClick(onSelectionChange),
-      handleTabAnchorFocus: handleTabAnchorFocus(onSelectionChange),
-      //   ref: (e) => {
-      //     setTabAt(index, e);
-      //   },
-      handleTabKeyDown: 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 sizeBar = sizes ? sizes[currentSelected] : undefined;
-
-  return (
-    <TabsContext.Provider
-      value={{ handleTabClick, handleTabKeyDown, handleTabAnchorFocus }}
-    >
-      <nav {...other} className={classes.tabs} role={role}>
-        <div className={`${prefix}--tabs__nav__bar`} /*style={sizeBar}*/></div>
-        <ul ref={rootRef} role="tablist" className={classes.tablist}>
-          {props.children}
-        </ul>
-      </nav>
-    </TabsContext.Provider>
-  );
-};
-
-Tabs.displayName = "Tabs";
-
-export default Tabs;

package/src/components/Tabs/TabsContext.ts

@@ -1,15 +0,0 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
-import React from 'react';
-
-export interface TabsContextType {
-  handleTabClick?: (onSelectionChange?: any) => void;
-  handleTabKeyDown?: (onSelectionChange?: any) => void;
-  handleTabAnchorFocus?: (onSelectionChange?: any) => void;
-}
-
-const TabsContext = React.createContext<TabsContextType>({
-  handleTabClick: () => {},
-  handleTabKeyDown: () => {},
-  handleTabAnchorFocus: () => {},
-});
-export default TabsContext;

package/src/components/Tabs/index.ts

@@ -1,2 +0,0 @@
-// export * from './Tabs.Skeleton';
-export { default } from "./Tabs";

package/src/components/Tag/README.mdx

@@ -1,19 +0,0 @@
-Tags are used for items that need to be labeled, categorized, or organized using keywords that describe them.
-
-### SCSS
-
-#### Mixins
-
-Mixins specific to tag are located in [src/components/Tag/\_mixins.scss]().
-
-| Name      | Params                 | Description                                 |
-| --------- | ---------------------- | ------------------------------------------- |
-| tag-theme | $bg-color, $text-color | Adds given background-color and text colour |
-
-#### Modifiers
-
-Use these modifiers with `.wfp--tag` class.
-
-| Selector          | Description                         |
-| ----------------- | ----------------------------------- |
-| .wfp--tag--custom | Apply the colours for a custom tag. |

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

@@ -1,42 +0,0 @@
-import React from 'react';
-import Tag from '../Tag';
-import TagSkeleton from '../Tag/Tag.Skeleton';
-import { shallow } from 'enzyme';
-
-describe('Tag', () => {
-  describe('Renders as expected', () => {
-    it('should render with the appropriate type', () => {
-      const tag = shallow(<Tag type="info" />);
-      expect(tag.hasClass('wfp--tag')).toEqual(true);
-      expect(tag.hasClass('wfp--tag--info')).toEqual(true);
-    });
-
-    it('should provide a default label based on the type', () => {
-      const tag = shallow(<Tag type="success" />);
-      expect(tag.text()).toEqual('Success');
-      tag.setProps({ type: 'custom' });
-      expect(tag.text()).toEqual('Custom');
-    });
-  });
-
-  it('should allow for a custom label', () => {
-    const tag = shallow(<Tag type="custom">New Version!</Tag>);
-    expect(tag.text()).toEqual('New Version!');
-  });
-
-  it('should support extra class names', () => {
-    const tag = shallow(<Tag type="info" className="extra-class" />);
-    expect(tag.hasClass('extra-class')).toEqual(true);
-  });
-});
-
-describe('TagSkeleton', () => {
-  describe('Renders as expected', () => {
-    const wrapper = shallow(<TagSkeleton />);
-
-    it('Has the expected classes', () => {
-      expect(wrapper.hasClass('wfp--skeleton')).toEqual(true);
-      expect(wrapper.hasClass('wfp--tag')).toEqual(true);
-    });
-  });
-});

package/src/components/Tag/Tag.Skeleton.jsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import useSettings from '../../hooks/useSettings';
-
-const TagSkeleton = () => {
-  const { prefix } = useSettings();
-  return <span className={`${prefix}--tag ${prefix}--skeleton`} />;
-};
-
-export default TagSkeleton;

package/src/components/Tag/Tag.stories.tsx

@@ -1,20 +0,0 @@
-import React from "react";
-
-import Tag from ".";
-
-export default {
-  title: "Components/UI Elements/Tag",
-  component: Tag,
-  parameters: {
-    componentSubtitle: "Component",
-    status: "released",
-  },
-};
-
-export const Regular = (args) => <Tag {...args}></Tag>;
-
-Regular.args = {
-  children: "Text",
-  type: "info",
-  kind: "success",
-};

package/src/components/Tag/Tag.tsx

@@ -1,46 +0,0 @@
-import * as React from "react";
-import classNames from "classnames";
-import useSettings from "../../hooks/useSettings";
-//import { TagType } from '../../typesLegacy/utils';
-
-const TYPES = {
-  info: "Info",
-  error: "error",
-  success: "Success",
-  warning: "Warning",
-  custom: "Custom",
-};
-
-export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
-  /**
-   * Specify the type of Tag @design
-   */
-  type?: "wfp" | "info" | "error" | "success" | "warning" | "custom" | string;
-
-  /**
-   * Specify if the Tag should be wrapped if it is too long @deprecated
-   */
-  wrap?: boolean;
-}
-
-/** Tag is used to label, categorize, or organize items using keywords that describe them. */
-
-const Tag: React.FC<TagProps> = ({
-  children,
-  className,
-  type = "info",
-  ...other
-}) => {
-  const { prefix } = useSettings();
-  const tagClass = `${prefix}--tag--${type}`;
-  const tagClasses = classNames(`${prefix}--tag`, tagClass, className);
-  return (
-    <span className={tagClasses} {...other}>
-      {children || TYPES[type]}
-    </span>
-  );
-};
-
-Tag.displayName = "Tag";
-
-export default Tag;

package/src/components/Tag/index.ts

@@ -1,3 +0,0 @@
-// export * from './Tag.Skeleton';
-export * from "./Tag";
-export { default } from "./Tag";

package/src/components/Tag/tag.config.js

@@ -1,69 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-const tags = [
-  {
-    type: 'red',
-    label: 'Red',
-  },
-  {
-    type: 'magenta',
-    label: 'Magenta',
-  },
-  {
-    type: 'purple',
-    label: 'Purple',
-  },
-  {
-    type: 'blue',
-    label: 'Blue',
-  },
-  {
-    type: 'cyan',
-    label: 'Cyan',
-  },
-  {
-    type: 'teal',
-    label: 'Teal',
-  },
-  {
-    type: 'green',
-    label: 'Green',
-  },
-  {
-    type: 'gray',
-    label: 'Gray',
-  },
-  {
-    type: 'cool-gray',
-    label: 'Cool-Gray',
-  },
-  {
-    type: 'warm-gray',
-    label: 'Warm-Gray',
-  },
-];
-
-module.exports = {
-  context: {},
-  variants: [
-    {
-      name: 'default',
-      label: 'Tag',
-      context: {
-        tags,
-      },
-    },
-    {
-      name: 'filter',
-      label: 'Tag (filter)',
-      context: {
-        filter: true,
-      },
-    },
-  ],
-};

package/src/components/Tag/tag.hbs

@@ -1,10 +0,0 @@
-{{#if componentsX}}
-{{#each tags}}
-<span class="wfp--tag wfp--tag--{{type}}">{{label}}</span>
-{{/each}}
-<span class="wfp--tag wfp--tag--basic" disabled>Component</span>
-{{else}}
-{{#each tags}}
-<span class="wfp--tag wfp--tag--{{type}}">{{label}}</span>
-  {{/each}}
-{{/if}}

package/src/components/Text/README.mdx

@@ -1,57 +0,0 @@
-The **Text** component adds a default style, formatting and spacing for a text.
-
-More information can be found in the [typography documentation](?path=/story/documentation-general--typography).
-You can specify the `kind` prop to apply font styles to Text. If you do not specify the variant prop, by default, Text applies the styling from specifying the variant value to medium.
-You can specify block to enable block and nowrap to enable nowrap. For ellipsis on overflow to work properly, block and nowrap should be manually set to true.
-
-### Usage with react
-
-```js
-import { Story } from "@progressiveui/react";
-<Story>Content</Story>;
-```
-
-### Usage with html
-
-```js
-<div class="story">
-  <h1 class="wfp--story__title">Story Title</h1>
-  <h2 class="wfp--story__subtitle">The Sub Title</h2>
-  <p>
-    Some <a href="#">text</a>
-  </p>
-  <ul>
-    <li>A list</li>
-    <li>Another list item</li>
-  </ul>
-</div>
-```
-
-### Elements
-
-When applying the story classes the margins between the elements will be calculated automatically.
-
-### Selectors
-
-| kind property | css class                       | html-tag        | Role                                            |
-| ------------- | ------------------------------- | --------------- | ----------------------------------------------- |
-| `title`       | `.wfp--story__title`            | `h1`            | The main title of the story                     |
-| `subtitle`    | `.wfp--story__subtitle`         | `h3`            | A subtitle placed directly under the main title |
-| `h1`          | `.wfp--story__h1`               | `h1`            | A primary heading                               |
-| `h2`          | `.wfp--story__h2`               | `h2`            | A secondary heading                             |
-| `h3`          | `.wfp--story__h3`               | `h3`            | A tertiary heading                              |
-| `h4`          | `.wfp--story__h4`               | `h4`            | A heading 4                                     |
-| `h5`          | `.wfp--story__h5`               | `h5`            | A heading 5                                     |
-| `p`           | `.wfp--story__p`                | `p`             | regular paragraph                               |
-| `i`           | `.wfp--story__i`                | `p`             | italic text                                     |
-| `bold`        | `.wfp--story__bold`             | `bold` `strong` | bold text                                       |
-| `code`        | `.wfp--story__code`             | `div`           | code block                                      |
-| `sup`         | `.wfp--story__sup`              | `p`             | sup                                             |
-| `a`           | `.wfp--story__a`                | `a`             | link element                                    |
-| `highlight`   | `.wfp--story__inline-highlight` | `none`          | inline highlighted text                         |
-| `list`        | `.wfp--story__list`             | `none`          | default story list                              |
-| `img`         | `none`                          | `none`          | image shown as a block element                  |
-
-### html Usage
-
-By adding `<div class="wfp--story"></div>` the story styling will be applied to all containing elements.

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

@@ -1,19 +0,0 @@
-import React from 'react';
-import Text from '../Text';
-import { shallow, mount } from 'enzyme';
-
-describe('Text', () => {
-    describe('Renders as expected', () => {
-        const wrapper = shallow(<Text>test child here</Text>);
-
-        it('renders as expected ', () => {
-            expect(wrapper.length).toBe(1);
-        })
-
-        it('should render classes as exected', () => {
-            const textWrapper = () => wrapper.find('div.wfp--text');
-            expect(textWrapper().hasClass('wfp--text')).toBe(true);
-        })
-    });
-
-});

package/src/components/Text/Text.js.legacy

@@ -1,102 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import classNames from 'classnames';
-
-import useSettings from '../../hooks/useSettings';
-
-export const textLookup = {
-  h1: 'h1',
-  h2: 'h2',
-  h3: 'h3',
-  h4: 'h4',
-  h5: 'h5',
-  h6: 'h6',
-  title: 'h1',
-  subtitle: 'h3',
-  p: 'p',
-  caption: 'div',
-  code: 'code',
-};
-
-/**
- *Text is a component for displaying paragraphs. You can use Text to standardize text across your web app. For longer sections or full articles use the <Story /> component instead.
- */
-
-const Text = ({ children, className, kind, spacingTop, spacingBottom }) => {
-  const { prefix } = useSettings();
-  const tagName = { name: textLookup[kind] ? textLookup[kind] : 'div' };
-  const Tag = tagName.name;
-  const classes = classNames({
-    [`${prefix}--text`]: true,
-    [`${prefix}--text__${kind}`]: kind,
-    [`${prefix}--text__spacing-top-${spacingTop}`]: spacingTop,
-    [`${prefix}--text__spacing-bottom-${spacingBottom}`]: spacingBottom,
-    [`${className}`]: className,
-  });
-  return <Tag className={classes}>{children}</Tag>;
-};
-
-Text.propTypes = {
-  /**
-    The Text content
-  */
-  children: PropTypes.node,
-  /**
-    Additional className for Story
-  */
-  className: PropTypes.string,
-  /**
-    Additional className for Story
-  */
-  kind: PropTypes.oneOf([
-    'h1',
-    'h2',
-    'h3',
-    'h4',
-    'h5',
-    'h6',
-    'title',
-    'subtitle',
-    'p',
-    'i',
-    'bold',
-    'strong',
-    'sup',
-    'a',
-    'code',
-    'inline-highlight',
-    'caption',
-  ]),
-  /**
-    Override spacing on top
-  */
-  spacingTop: PropTypes.oneOf([
-    'none',
-    '3xs',
-    '2xs',
-    'xs',
-    'md',
-    'lg',
-    'xl',
-    '2xl',
-    '3xl',
-    '4xl',
-  ]),
-  /**
-  Override spacing on bottom
-*/
-  spacingBottom: PropTypes.oneOf([
-    'none',
-    '3xs',
-    '2xs',
-    'xs',
-    'md',
-    'lg',
-    'xl',
-    '2xl',
-    '3xl',
-    '4xl',
-  ]),
-};
-
-export default Text;