@progressiveui/react 1.22.0

package/src/components/Link/__snapshots__/Link.test.tsx.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Link Component matches snapshot 1`] = `
+<DocumentFragment>
+  <a
+    class="wfp--link"
+    href="https://example.com"
+  >
+    Snapshot Link
+  </a>
+</DocumentFragment>
+`;

package/src/components/Link/index.ts

@@ -0,0 +1 @@
+export { default } from './Link';

package/src/components/Link/link-avt.md

@@ -0,0 +1,32 @@
+# Link Component Accessibility Verification Testing
+
+Developers or designers wanting to manually verify the accessibility of the
+component can carry out the following steps:
+
+## Keyboard
+
+- [ ] the user can focus the link with `tab`
+- [ ] the user can activate the link with `enter`
+
+## Contrast
+
+- [ ] the link text has a contrast of 4.5:1 minimum against the background color
+- [ ] the link focus outline has a contrast of 4.5:1 minimum against the
+      background color
+
+## Screen reader
+
+Each screen reader should be tested when paired with it's preferred browser.
+
+### VoiceOver on Safari
+
+"{link text}, link. You are currently on a link. To click this link, press
+Control-Option-Space."
+
+### JAWS on Edge/Chrome
+
+"Main region. {link text}, link."
+
+### NVDA on Firefox (optional, but recommended)
+
+"link {link text}"

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { List, ListItem } from '../List';
+import { mount } from 'enzyme';
+
+describe('List', () => {
+  describe('Renders as expected', () => {
+    const list = mount(
+      <List className="some-class">
+        <ListItem>First Item</ListItem>
+        <ListItem>Second Item</ListItem>
+      </List>
+    );
+
+    it('should use the appropriate link class', () => {
+      const listClass = list.find('.wfp--list');
+      expect(listClass.hasClass('wfp--list')).toEqual(true);
+    });
+
+    it('Renders children as expected', () => {
+      expect(list.props().children.length).toEqual(2);
+    });
+
+    it('should all for custom classes to be applied', () => {
+      expect(list.hasClass('some-class')).toEqual(true);
+    });
+  });
+});

package/src/components/List/List.hbs

@@ -0,0 +1,11 @@
+<ul class="wfp--list">
+	<li class="wfp--list__element">
+		<span class="wfp--list__element__content">First item</span>
+	</li>
+	<li class="wfp--list__element">
+		<span class="wfp--list__element__content">Second item</span>
+	</li>
+	<li class="wfp--list__element">
+		<span class="wfp--list__element__content">Third item</span>
+	</li>
+</ul>

package/src/components/List/List.stories.tsx

@@ -0,0 +1,195 @@
+import React from "react";
+import markdown from "./README.mdx";
+import List from "./List";
+import ListItem from "./ListItem";
+
+export default {
+  title: "Components/UI Elements/List",
+  component: List,
+  subcomponents: { ListItem },
+  parameters: {
+    componentSubtitle: "Component",
+    status: "released",
+    mdx: markdown,
+  },
+};
+
+export const ListDefault = (args) => (
+  <List {...args}>
+    <ListItem title="List item title">First item</ListItem>
+    <ListItem title="Another title">Second item</ListItem>
+    <ListItem>Third item</ListItem>
+  </List>
+);
+
+ListDefault.args = {
+  colon: true,
+  kind: "bullets",
+};
+
+export const ListItemDefault: Story = {
+  render: (args) => <ListItem {...args}>List item</ListItem>,
+  args: {
+    title: "Title",
+    // children: "ListItem",
+  },
+};
+
+export const SimpleInline = (args) => (
+  <List {...args}>
+    <ListItem title="List item with title">First item</ListItem>
+    <ListItem title="Another item with title">Second item</ListItem>
+    <ListItem>Third item</ListItem>
+    <ListItem>Fourth item</ListItem>
+    <ListItem>Fifth item</ListItem>
+  </List>
+);
+
+SimpleInline.args = {
+  kind: "simple-inline",
+};
+
+const msg = ` \`simple-inline\` \`kind\` shows listed items next to each other`;
+
+SimpleInline.story = {
+  parameters: {
+    docs: {
+      storyDescription: msg,
+    },
+  },
+};
+
+export const Details = (args) => (
+  <List {...args}>
+    <ListItem title="List item with title">First item</ListItem>
+    <ListItem title="Another item with title">Second item</ListItem>
+    <ListItem>Third item</ListItem>
+    <ListItem>Fourth item</ListItem>
+    <ListItem>Fifth item</ListItem>
+  </List>
+);
+
+Details.args = {
+  kind: "details",
+};
+
+const msghere = ` \`details\` \`kind\` shows listed items on different blocks`;
+
+Details.story = {
+  parameters: {
+    docs: {
+      storyDescription: msghere,
+    },
+  },
+};
+
+export const Bullet = (args) => (
+  <List {...args}>
+    <ListItem title="List item with title">First item</ListItem>
+    <ListItem title="Another item with title">Second item</ListItem>
+    <ListItem>Third item</ListItem>
+    <ListItem>Fourth item</ListItem>
+    <ListItem>Fifth item</ListItem>
+  </List>
+);
+
+Bullet.args = {
+  kind: "unordered",
+};
+
+const msgg = ` \`undordered\` \`kind\` shows bulleted list items`;
+
+Bullet.story = {
+  parameters: {
+    docs: {
+      storyDescription: msgg,
+    },
+  },
+};
+
+// export const ListColumns = (args) => (
+//   <List kind="details" style={{ columnCount: 3 }}>
+//     <ListItem title="Strategic Outcome">
+//       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+//       eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+//       voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+//       clita kasd gubergren, no sea takimata sanctus est Lorem ipsum d Stet clita
+//       kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+//     </ListItem>
+//     <ListItem title="Financial Outcome and a very long and detailed list title with more content that fits on a line">
+//       Dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
+//       sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
+//       erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
+//       rebum.
+//     </ListItem>
+//     <ListItem title="Financial Outcome">
+//       Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
+//       sit amet.
+//     </ListItem>
+//     <ListItem title="Financial Outcome">
+//       At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
+//       gubergren, no sea takimata sanctus est Lorem ipsum d Stet clita kasd
+//       gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Dolor
+//       sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
+//       diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
+//       erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
+//       rebum.
+//     </ListItem>
+//   </List>
+// );
+
+// const description = `
+// Lists can have multiple columns by using the \`columnCount\` attribute in \`style\` prop.
+// `;
+
+// ListColumns.story = {
+//   parameters: {
+//     docs: {
+//       storyDescription: description,
+//     },
+//   },
+// };
+
+export const ListitemBullets = (args) => (
+  <List kind="unordered">
+    <ListItem kind="checkmark">checkmark</ListItem>
+
+    <ListItem kind="cross">cross</ListItem>
+    <ListItem>hello</ListItem>
+  </List>
+);
+
+const listItemDescription = ` \`unordered\` List with ListItems can have \`checkmark\` and \`cross\` kinds`;
+
+ListitemBullets.story = {
+  parameters: {
+    docs: {
+      storyDescription: listItemDescription,
+    },
+  },
+};
+
+export const NestedListItems = (args) => (
+  <List kind="unordered">
+    <ListItem>Item label</ListItem>
+    <ListItem>Item label</ListItem>
+    <List kind="ordered">
+      <ListItem>Item label 2</ListItem>
+      <ListItem>Item label 2</ListItem>
+      <List>
+        <ListItem>Item label 3</ListItem>
+        <ListItem>Item label 3</ListItem>
+      </List>
+    </List>
+  </List>
+);
+
+const nestedItemDescription = ` \`unordered\` List with ListItems can have \`checkmark\` and \`cross\` kinds`;
+
+NestedListItems.story = {
+  parameters: {
+    docs: {
+      storyDescription: nestedItemDescription,
+    },
+  },
+};

package/src/components/List/List.tsx

@@ -0,0 +1,91 @@
+import * as React from "react";
+import classNames from "classnames";
+import useSettings from "../../hooks/useSettings";
+
+/** List component show a number of connected items written consecutively, typically one below the other. */
+export interface ListBaseProps {
+  /**
+   * If true, colons will be displayed in the List items.
+   */
+  colon?: boolean;
+  /**
+   * Specifies the visual presentation style of the List.
+   */
+  kind?:
+    | "unstyled"
+    | "simple-inline"
+    | "simple"
+    | "details"
+    | "unordered"
+    | "ordered"
+    | "tooltip"
+    | "bullets";
+  /**
+   * If true, renders the List with a smaller font size and padding.
+   */
+  small?: boolean;
+}
+
+interface ListOlProps
+  extends ListBaseProps,
+    React.ComponentPropsWithRef<"button"> {}
+
+interface ListUlProps extends ListBaseProps, React.ComponentPropsWithRef<"a"> {}
+
+type ConditionalProps<T> = T extends { kind: "ordered" }
+  ? ListOlProps
+  : ListUlProps;
+
+type ListProps<T extends { kind?: string }> = ConditionalProps<T> &
+  React.ComponentPropsWithRef<T extends { kind: "ordered" } ? "ol" : "ul">;
+
+export const List = React.forwardRef(
+  <T extends { kind?: string }>(
+    { children, className, colon, kind, small, ...other }: ListProps<T>,
+    ref: React.Ref<
+      T extends { kind: string } ? HTMLAnchorElement : HTMLButtonElement
+    >
+  ) => {
+    const { prefix } = useSettings();
+
+    const classes = classNames(`${prefix}--list`, className, {
+      [`${prefix}--list--${kind}`]: kind,
+      [`${prefix}--list--small`]: small,
+      [`${prefix}--list--colon`]: colon,
+    });
+
+    /* if (kind == 'ordered') {
+      const olProps = {
+        ...other,
+        href: other.href,
+      } as React.AnchorHTMLAttributes<HTMLOListElement>;
+
+      return (
+        <ol
+          className={classes}
+          {...olProps}
+          ref={ref as React.Ref<HTMLOListElement>}>
+          {children}
+        </ol>
+      );
+    }*/
+
+    const ulProps = {
+      ...other,
+    } as React.ButtonHTMLAttributes<HTMLUListElement>;
+
+    return (
+      <ul
+        className={classes}
+        {...ulProps}
+        ref={ref as React.Ref<HTMLUListElement>}
+      >
+        {children}
+      </ul>
+    );
+  }
+);
+
+List.displayName = "List";
+
+export default List;

package/src/components/List/ListItem.tsx

@@ -0,0 +1,54 @@
+import * as React from "react";
+import classNames from "classnames";
+import { Cross, Check } from "@progressiveui/icons-react";
+
+//export interface ListItemProps
+// extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'title'> {
+export interface ListItemProps
+  extends Omit<React.ComponentPropsWithRef<"li">, "title"> {
+  /**
+   * Specify the kind of icon to use in the list item. Options are 'checkmark' or 'cross'.
+   * This provides a visual cue about the nature or status of the list item. @design
+   */
+  kind?: "checkmark" | "cross";
+  /**
+   * Specify whether the list item should be a small variant. Useful for denser lists
+   * or when space is a constraint. @size
+   */
+  small?: boolean;
+  /**
+   * Content to be displayed as the title of the list item. This can be simple text or
+   * a React node for more complex content. @content
+   */
+  title?: React.ReactNode;
+  /**
+   * Icon to be displayed in the list item. This can be a React node or a string
+   * representing the name of a pictogram. @content
+   */
+  icon?: React.ReactNode;
+}
+
+const ListItem: React.FC<ListItemProps> = ({
+  children,
+  className,
+  title,
+  kind,
+  icon,
+  ...other
+}) => {
+  const classes = classNames("wfp--list__element", className, {
+    "wfp--list-item--checkmark": kind === "checkmark",
+    "wfp--list-item--cross": kind === "cross",
+  });
+  return (
+    <li className={classes} {...other}>
+      {kind === "cross" && <Cross className="wfp--list-item__icon" />}
+      {kind === "checkmark" && <Check className="wfp--list-item__icon" />}
+      {icon && <span className="wfp--list__element__icon">{icon}</span>}
+      {title && <span className="wfp--list__element__title">{title}</span>}
+      <span className="wfp--list__element__content">{children}</span>
+    </li>
+  );
+};
+
+export default ListItem;

package/src/components/List/README.mdx

@@ -0,0 +1,19 @@
+## Usage
+
+Use bulleted lists when you don’t need to convey a specific order for list items.
+
+Use numbered lists when you need to convey a priority, hierarchy, or sequence between list items.
+
+## Content
+
+#### Length
+
+Generally, lists should be used to present simple pieces of information. For more complex sets of data, consider using a data table.
+
+#### Order
+
+Arrange list items in a logical way. For example, if the list is about resource use, the default order might be highest resource use to lowest. Grouping items in categories into smaller, more specific lists might be more meaningful in some contexts. Alternatively, organize in alphabetical or numeric order.
+
+#### Text
+
+Use list items that are grammatically parallel. For example, do not mix passive voice with active voice or declarative sentences (statements) with imperative sentences (direct command).

package/src/components/List/index.ts

@@ -0,0 +1,2 @@
+export { default as List } from './List';
+export { default as ListItem } from './ListItem';

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

@@ -0,0 +1,93 @@
+/**
+ * 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.
+ */
+
+import PropTypes from "prop-types";
+import React from "react";
+import classNames from "classnames";
+import { componentsX } from "../../internal/FeatureFlags";
+import { withWFPCoreSettings } from "../WFPCoreSettings";
+
+/** Loading spinners are used when retrieving data or performing slow computations, and help to notify users that loading is underway. */
+
+class Loading extends React.Component {
+  static propTypes = {
+    prefix: PropTypes.string.isRequired,
+    /**
+     * Specify whether you want the loading indicator to be spinning or not
+     */
+    active: PropTypes.bool,
+
+    /**
+     * Provide an optional className to be applied to the containing node
+     */
+    className: PropTypes.string,
+
+    /**
+     * Specify whether you want the loader to be applied with an overlay
+     */
+    withOverlay: PropTypes.bool,
+
+    /**
+     * Specify whether you would like the small variant of <Loading>
+     */
+    small: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    active: true,
+    withOverlay: true,
+    small: false,
+  };
+
+  render() {
+    const { prefix, active, className, withOverlay, small, ...other } =
+      this.props;
+
+    const loadingClasses = classNames(`${prefix}--loading`, className, {
+      [`${prefix}--loading--small`]: small,
+      [`${prefix}--loading--stop`]: !active,
+    });
+
+    const overlayClasses = classNames(`${prefix}--loading-overlay`, {
+      [`${prefix}--loading-overlay--stop`]: !active,
+    });
+
+    const loading = (
+      <div
+        {...other}
+        aria-live={active ? "assertive" : "off"}
+        className={loadingClasses}
+      >
+        <svg className={`${prefix}--loading__svg`} viewBox="-75 -75 150 150">
+          <title>Loading</title>
+          {componentsX && small ? (
+            <circle
+              className={`${prefix}--loading__background`}
+              cx="0"
+              cy="0"
+              r="37.5"
+            />
+          ) : null}
+          <circle
+            className={componentsX ? `${prefix}--loading__stroke` : null}
+            cx="0"
+            cy="0"
+            r="37.5"
+          />
+        </svg>
+      </div>
+    );
+
+    return withOverlay ? (
+      <div className={overlayClasses}>{loading}</div>
+    ) : (
+      loading
+    );
+  }
+}
+
+export default withWFPCoreSettings(Loading);

package/src/components/Loading/Loading-oldFC.js

@@ -0,0 +1,80 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import classNames from 'classnames';
+import { componentsX } from '../../internal/FeatureFlags';
+import useSettings from '../../hooks/useSettings';
+
+/** Loading spinners are used when retrieving data or performing slow computations, and help to notify users that loading is underway. */
+
+const Loading = (props) => {
+  const { active, className, withOverlay, small, ...other } = props;
+
+  const { prefix } = useSettings();
+
+  const loadingClasses = classNames(`${prefix}--loading`, className, {
+    [`${prefix}--loading--small`]: small,
+    [`${prefix}--loading--stop`]: !active,
+  });
+
+  const overlayClasses = classNames(`${prefix}--loading-overlay`, {
+    [`${prefix}--loading-overlay--stop`]: !active,
+  });
+
+  const loading = (
+    <div
+      {...other}
+      aria-live={active ? 'assertive' : 'off'}
+      className={loadingClasses}>
+      <svg className={`${prefix}--loading__svg`} viewBox="-75 -75 150 150">
+        <title>Loading</title>
+        {componentsX && small ? (
+          <circle
+            className={`${prefix}--loading__background`}
+            cx="0"
+            cy="0"
+            r="37.5"
+          />
+        ) : null}
+        <circle
+          className={componentsX ? `${prefix}--loading__stroke` : null}
+          cx="0"
+          cy="0"
+          r="37.5"
+        />
+      </svg>
+    </div>
+  );
+
+  return withOverlay ? (
+    <div className={overlayClasses}>{loading}</div>
+  ) : (
+    loading
+  );
+};
+
+Loading.propTypes = {
+  active: PropTypes.bool,
+
+  /**
+   * Provide an optional className to be applied to the containing node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether you want the loader to be applied with an overlay
+   */
+  withOverlay: PropTypes.bool,
+
+  /**
+   * Specify whether you would like the small variant of <Loading>
+   */
+  small: PropTypes.bool,
+};
+
+Loading.defaultProps = {
+  active: true,
+  withOverlay: true,
+  small: false,
+};
+
+export default Loading;

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

@@ -0,0 +1,68 @@
+/**
+ * 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.
+ */
+
+import React from 'react';
+import Loading from '../Loading';
+import { mount } from 'enzyme';
+
+describe('Loading', () => {
+  describe('Renders as expected', () => {
+    const wrapper = mount(<Loading className="extra-class" />);
+    const overlay = wrapper.find('.wfp--loading-overlay');
+    const loader = wrapper.find('.wfp--loading');
+    const svg = loader.find('svg');
+
+    it('should render with an overlay', () => {
+      expect(overlay.length).toEqual(1);
+    });
+
+    it('should render with a loader', () => {
+      expect(loader.length).toEqual(1);
+    });
+
+    it('shoud render an svg', () => {
+      expect(svg.length).toEqual(1);
+    });
+
+    it('overlay has the expected class', () => {
+      expect(overlay.hasClass('wfp--loading-overlay')).toEqual(true);
+    });
+
+    it('loader has the expected classes', () => {
+      expect(loader.hasClass('wfp--loading')).toEqual(true);
+    });
+
+    it('svg has the correct class', () => {
+      expect(svg.hasClass('wfp--loading__svg')).toEqual(true);
+    });
+
+    it('should add extra classes that are passed via className', () => {
+      expect(loader.hasClass('extra-class')).toEqual(true);
+    });
+  });
+
+  describe('Sets props and state as expected', () => {
+    const wrapper = mount(<Loading className="extra-class" />);
+
+    it('should remove and add wfp--loading--stop class', () => {
+      wrapper.setProps({ active: false });
+      expect(
+        wrapper.find('.wfp--loading').hasClass('wfp--loading--stop')
+      ).toEqual(true);
+      wrapper.setProps({ active: true });
+      expect(
+        wrapper.find('.wfp--loading').hasClass('wfp--loading--stop')
+      ).toEqual(false);
+    });
+
+    it('should not render overlay when withOverlay is set to false', () => {
+      wrapper.setProps({ withOverlay: false });
+      const overlay = wrapper.find('.wfp--loading-overlay');
+      expect(overlay.length).toEqual(0);
+    });
+  });
+});