@progressiveui/react 1.22.0

package/src/components/Tabs/Tabs.tsx

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

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

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

package/src/components/Tag/README.mdx

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

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

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

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

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

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

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

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

@@ -0,0 +1,10 @@
+{{#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

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

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

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