@progressiveui/react 1.22.0

package/src/components/SecondaryNavigation/SecondaryNavigation.stories.tsx

@@ -0,0 +1,133 @@
+import React from "react";
+import markdown from "./README.mdx";
+import { SecondaryNavigation } from "./SecondaryNavigation";
+import { SecondaryNavigationTitle } from "./SecondaryNavigationTitle";
+import Breadcrumb from "../Breadcrumb";
+import BreadcrumbItem from "../BreadcrumbItem";
+import BreadcrumbHome from "../BreadcrumbHome";
+
+import Tabs from "../Tabs";
+import Tab from "../Tab";
+
+export default {
+  title: "Components/Navigation/SecondaryNavigation",
+  component: SecondaryNavigation,
+  subcomponents: { SecondaryNavigationTitle },
+  parameters: {
+    componentSubtitle: "Component",
+    status: "released",
+    mdx: markdown,
+    previewWidth: "full",
+  },
+};
+
+/* TODO: Add import section
+
+ `import {SecondaryNavigation, SecondaryNavigationTitle, Breadcrumb, BreadcrumbHome, BreadcrumbItem, Tabs, Tab } from "@progressiveui/react";`,
+
+ */
+
+export const SecondaryNavigationDefault: Story = {
+  render: (args) => (
+    <SecondaryNavigation {...args} additional="Additional">
+      <Breadcrumb>
+        <BreadcrumbItem>
+          <a href="/#">
+            <BreadcrumbHome />
+          </a>
+        </BreadcrumbItem>
+        <BreadcrumbItem href="#">Breadcrumb 2</BreadcrumbItem>
+        <BreadcrumbItem disableLink>Breadcrumb 3</BreadcrumbItem>
+      </Breadcrumb>
+      <SecondaryNavigationTitle>The page title</SecondaryNavigationTitle>
+      <Tabs customTabContent={true}>
+        <Tab label="Tab label 1" href="#" />
+        <Tab label="Tab label 2" href="#" />
+        <Tab label="Tab label 3" href="#" />
+      </Tabs>
+    </SecondaryNavigation>
+  ),
+  args: {},
+};
+
+const sourcecode = (importstatement: string, additional?: string) => {
+  return `
+  
+${importstatement}
+        
+<SecondaryNavigation additional="additional Information">
+  <Breadcrumb>
+    <BreadcrumbItem>
+      <a href="/#">
+        <BreadcrumbHome />
+      </a>
+    </BreadcrumbItem>
+    <BreadcrumbItem href="#">
+      Breadcrumb 2
+    </BreadcrumbItem>
+    <BreadcrumbItem disableLink>
+      Breadcrumb 3
+    </BreadcrumbItem>
+  </Breadcrumb>
+  <SecondaryNavigationTitle>
+    The page title
+  </SecondaryNavigationTitle>
+  ${additional}
+</SecondaryNavigation>
+  `;
+};
+
+const tabsection = `
+  <Tabs customTabContent>
+    <Tab label="Tab label 1" />
+    <Tab label="Tab label 2" />
+    <Tab label="Tab label 3" />
+    <Tab label="Tab label 4" />
+  </Tabs>
+`;
+
+/*
+Regular.story = {
+  parameters: {
+    docs: {
+      source: {
+        code: sourcecode(
+          `import {SecondaryNavigation, SecondaryNavigationTitle, Breadcrumb, BreadcrumbHome, BreadcrumbItem, Tabs, Tab } from "@progressiveui/react";`,
+          tabsection
+        ),
+      },
+    },
+  },
+};*/
+
+export const HeadingOnly = () => (
+  <SecondaryNavigation additional="additional Information">
+    <Breadcrumb>
+      <BreadcrumbItem>
+        <a href="/#">
+          <BreadcrumbHome />
+        </a>
+      </BreadcrumbItem>
+      <BreadcrumbItem href="#">Breadcrumb 2</BreadcrumbItem>
+      <BreadcrumbItem disableLink>Breadcrumb 3</BreadcrumbItem>
+    </Breadcrumb>
+    <SecondaryNavigationTitle>The page title</SecondaryNavigationTitle>
+  </SecondaryNavigation>
+);
+
+const descriptionHeadingOnly = `
+The content of \`SecondaryNavigation\` can be customized. In this example \`SecondaryNavigation\` is used without the \`Tabs\`.
+`;
+
+HeadingOnly.story = {
+  parameters: {
+    docs: {
+      storyDescription: descriptionHeadingOnly,
+      source: {
+        code: sourcecode(
+          `import {SecondaryNavigation, SecondaryNavigationTitle, Breadcrumb, BreadcrumbHome, BreadcrumbItem } from "@progressiveui/react";`
+        ),
+      },
+    },
+  },
+};

package/src/components/SecondaryNavigation/SecondaryNavigation.tsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+import classNames from "classnames";
+import Wrapper from "../Wrapper";
+import useSettings from "../../hooks/useSettings";
+
+/** The SecondaryNavigation shows the page title and and optional tab navigation. */
+export interface SecondaryNavigationProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+  /**
+   * Specify the max-width on desktop devices (same as \`Wrapper\` component)
+   */
+  pageWidth?: "sm" | "md" | "lg" | "full";
+  /**
+   * The CSS class name to be placed on the wrapping element
+   */
+  wrapperClassName?: string;
+  id?: string;
+  additional?: React.ReactNode;
+}
+
+export function SecondaryNavigation({
+  additional,
+  children,
+  className,
+  id,
+  pageWidth,
+  ...other
+}: SecondaryNavigationProps) {
+  const { prefix } = useSettings();
+
+  const wrapperClasses = classNames(
+    `${prefix}--secondary-navigation`,
+    className
+  );
+
+  return (
+    <div id={id} className={wrapperClasses} {...other}>
+      <Wrapper
+        pageWidth={pageWidth}
+        className={`${prefix}--secondary-navigation__wrapper`}
+      >
+        <div className={`${prefix}--secondary-navigation__list`}>
+          {children}
+        </div>
+        {additional && (
+          <div className={`${prefix}--secondary-navigation__additional`}>
+            {additional}
+          </div>
+        )}
+      </Wrapper>
+    </div>
+  );
+}
+
+SecondaryNavigation.displayName = "SecondaryNavigation";

package/src/components/SecondaryNavigation/SecondaryNavigationTitle.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import classNames from "classnames";
+
+import useSettings from "../../hooks/useSettings";
+
+export interface SecondaryNavigationTitleProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+}
+
+export function SecondaryNavigationTitle({
+  className,
+  children,
+}: SecondaryNavigationTitleProps) {
+  const { prefix } = useSettings();
+
+  const wrapperClasses = classNames(
+    `${prefix}--secondary-navigation__title`,
+    className
+  );
+  return <h1 className={wrapperClasses}>{children}</h1>;
+}
+
+SecondaryNavigationTitle.displayName = "SecondaryNavigationTitle";

package/src/components/SecondaryNavigation/index.js

@@ -0,0 +1,2 @@
+export { SecondaryNavigation } from "./SecondaryNavigation";
+export { SecondaryNavigationTitle } from "./SecondaryNavigationTitle";

package/src/components/Select/README.mdx

@@ -0,0 +1,17 @@
+## Usage
+
+Use a dropdown list when there are multiple choices that can be collapsed under one title, if the list of items is too long, or when space is constrained.
+Use a dropdown list when the selected option is more important than the alternatives (in contrast to radio buttons where all the choices are visible, putting equal emphasis on all options).
+
+### When to use
+
+- ✓ The dropdown list label should describe what can be found in the menu.
+- ✓ Use shortened statements or single words as list options.
+- ✓ If there isn't a default option, use "Select an option" as placeholder text.
+- ✓ If "None" is an option, include it.
+- ✓ Write the choices using parallel construction. For example, start with the
+  same part of speech or verb tense.
+
+### When not to use
+
+- ✗ Avoid using Select for less then 3 entries. Try using a radio button instead.

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

@@ -0,0 +1,165 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+/* eslint-disable jsx-a11y/href-no-hash */
+import React from "react";
+import Select from ".";
+import SelectItem from "../SelectItem";
+import SelectSkeleton from "./Select.Skeleton";
+import { mount, shallow } from "enzyme";
+import { CaretDown } from "@progressiveui/icons-react";
+
+describe("Select", () => {
+  describe("Renders as expected", () => {
+    const wrapper = mount(
+      <Select
+        id="testing"
+        labelText="Select"
+        className="extra-class"
+        helperText="Helper text"
+        required
+      >
+        <SelectItem />
+        <SelectItem />
+      </Select>
+    );
+
+    const selectContainer = wrapper.find(
+      ".wfp--form-item > .wfp--input-wrapper"
+    );
+    const label = wrapper.find("label");
+    const select = wrapper.find("select");
+    const selectWrapper = wrapper.find(".wfp--select");
+    const helper = wrapper.find(".wfp--form__helper-text");
+
+    describe("selectContainer", () => {
+      it("renders a container", () => {
+        debugger;
+        expect(selectContainer.length).toEqual(1);
+      });
+
+      it("has the expected classes", () => {
+        expect(selectWrapper.hasClass("wfp--select")).toEqual(true);
+      });
+
+      it("applies extra classes specified via className", () => {
+        expect(selectWrapper.hasClass("extra-class")).toEqual(true);
+      });
+
+      it("has the expected default iconDescription", () => {
+        expect(wrapper.props().iconDescription).toEqual("open list of options");
+      });
+
+      it("adds new iconDescription when passed via props", () => {
+        wrapper.setProps({ iconDescription: "new description" });
+        expect(wrapper.props().iconDescription).toEqual("new description");
+      });
+
+      it("should specify light select as expected", () => {
+        expect(wrapper.props().light).toEqual(false);
+        wrapper.setProps({ light: true });
+        expect(wrapper.props().light).toEqual(true);
+      });
+    });
+
+    describe("select", () => {
+      it("renders a select", () => {
+        expect(select.length).toEqual(1);
+      });
+
+      it("has the expected classes", () => {
+        expect(select.hasClass("wfp--select-input")).toEqual(true);
+      });
+
+      it("has the expected id", () => {
+        expect(select.props().id).toEqual("testing");
+      });
+
+      it("should set defaultValue as expected", () => {
+        wrapper.setProps({ defaultValue: "select-1" });
+        expect(wrapper.find("select").props().defaultValue).toEqual("select-1");
+      });
+
+      it("should set disabled as expected", () => {
+        expect(select.props().disabled).toEqual(undefined);
+        wrapper.setProps({ disabled: true });
+        expect(wrapper.find("select").props().disabled).toEqual(true);
+      });
+
+      it("renders children as expected", () => {
+        expect(select.props().children.length).toEqual(2);
+      });
+    });
+
+    describe("label", () => {
+      it("renders a label", () => {
+        expect(label.length).toEqual(1);
+      });
+
+      it("has the expected classes", () => {
+        expect(label.hasClass("wfp--label")).toEqual(true);
+      });
+
+      it("has the expected htmlFor value", () => {
+        expect(label.props().htmlFor).toEqual("testing");
+      });
+
+      it("renders children as expected", () => {
+        expect(label.props().children).toEqual(["Select", "*"]);
+      });
+    });
+
+    describe("helper", () => {
+      it("renders a helper", () => {
+        expect(helper.length).toEqual(1);
+      });
+
+      it("renders children as expected", () => {
+        wrapper.setProps({
+          helperText: (
+            <span>
+              This helper text has <a href="#">a link</a>.
+            </span>
+          ),
+        });
+        const renderedHelper = wrapper.find(".wfp--form__helper-text");
+        expect(renderedHelper.props().children).toEqual(
+          <span>
+            This helper text has <a href="#">a link</a>.
+          </span>
+        );
+      });
+
+      it("should set helper text as expected", () => {
+        wrapper.setProps({ helperText: "Helper text" });
+        expect(helper.text()).toEqual("Helper text");
+      });
+    });
+  });
+  describe("Renders as expected", () => {
+    const wrapper = mount(
+      <Select id="testing" labelText="Select" className="extra-class" inline>
+        <SelectItem />
+        <SelectItem />
+      </Select>
+    );
+
+    const selectContainer = wrapper.find(".wfp--form-item > div");
+
+    /* TODO: add inline to Input component
+    
+    it('has the expected classes', () => {
+      expect(selectContainer.hasClass('wfp--select--inline')).toEqual(true);
+    });*/
+  });
+});
+
+describe("SelectSkeleton", () => {
+  describe("Renders as expected", () => {
+    const wrapper = shallow(<SelectSkeleton />);
+
+    const select = wrapper.find(".wfp--select");
+
+    it("Has the expected classes", () => {
+      expect(select.hasClass("wfp--skeleton")).toEqual(true);
+    });
+  });
+});

package/src/components/Select/Select.Skeleton.js

@@ -0,0 +1,25 @@
+/* eslint-disable jsx-a11y/label-has-for */
+/* eslint-disable jsx-a11y/label-has-associated-control */
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const SelectSkeleton = ({ hideLabel, id }) => {
+  const label = hideLabel ? null : (
+    <label className="wfp--label wfp--skeleton" htmlFor={id} />
+  );
+
+  return (
+    <div className="wfp--form-item">
+      {label}
+      <div className="wfp--select wfp--skeleton">
+        <select className="wfp--select-input" />
+      </div>
+    </div>
+  );
+};
+
+SelectSkeleton.propTypes = {
+  hideLabel: PropTypes.bool,
+};
+
+export default SelectSkeleton;

package/src/components/Select/Select.stories.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import Select from "./Select";
+import SelectItem from "../SelectItem";
+import markdown from "./README.mdx";
+
+export default {
+  title: "Components/Forms/Dropdown/Select",
+  component: Select,
+  parameters: {
+    componentSubtitle: "Component",
+    status: "released",
+    mdx: markdown,
+  },
+};
+
+export const SelectDefault: Story = {
+  render: (args) => (
+    <Select {...args}>
+      <SelectItem value="option-1" text="Option 1" />
+      <SelectItem value="option-2" text="Option 2" />
+    </Select>
+  ),
+  args: { labelText: "Label text", helperText: "This is a helper text" },
+};
+
+SelectDefault.args = {
+  labelText: "Label text",
+  helperText: "This is a helper text",
+};
+
+const hello = `
+Imagine this to be a \`much\` longer block of text that spans
+several lines.
+`;
+
+const selectsourcecode = `
+import { Select, SelectItem  } from "@progressiveui/react";
+
+<Select>
+  <SelectItem value="option-1" text="Option 1" />
+  <SelectItem value="option-2" text="Option 2" />
+</Select>
+`;
+
+SelectDefault.story = {
+  parameters: {
+    docs: {
+      storyDescription: hello,
+      source: {
+        code: selectsourcecode,
+      },
+    },
+  },
+};

package/src/components/Select/Select.tsx

@@ -0,0 +1,98 @@
+import * as React from "react";
+import classNames from "classnames";
+import { /* CaretDown, */ ChevronDown } from "@progressiveui/icons-react";
+
+import useSettings from "../../hooks/useSettings";
+import Input, { InputProps, useInput } from "../Input";
+import { UseInputProps } from "../Input/useInput";
+
+interface SelectProps
+  extends InputProps,
+    React.ComponentPropsWithRef<"select"> {
+  /**
+   * Specify whether you want the inline version of this control
+   */
+  inline?: boolean;
+  /**
+   * Optionally provide the default value of the `<select>`
+   */
+  defaultValue?: string;
+  /**
+   * Provide a description for the twistie icon that can be read by screen readers
+   */
+  iconDescription?: string;
+  /**
+   * Specify whether the label should be hidden, or not
+   */
+  hideLabel?: boolean;
+  children?: React.ReactNode;
+}
+
+/** The select component allows users to choose one option from a list. It is used in forms for users to submit data. */
+
+const Select: React.FC<SelectProps> = React.forwardRef((props, ref) => {
+  const {
+    className,
+    inline,
+    disabled,
+    children,
+    iconDescription,
+    light,
+    hideLabel,
+  } = props;
+
+  const { prefix } = useSettings();
+
+  const selectClasses = classNames(
+    {
+      [`${prefix}--select-input`]: true,
+      [`${prefix}--select--inline`]: inline,
+      [`${prefix}--select--light`]: light,
+      //      [`${prefix}--select--invalid`]: invalid,
+      [`${prefix}--select--disabled`]: disabled,
+    },
+    className
+  );
+
+  /*const ariaProps = {};
+ if (invalid) {
+    //TODO: check if correct
+    ariaProps['aria-describedby'] = usedId;
+  }*/
+  const useInputProps = props as UseInputProps;
+  const { inputProps, wrapperProps } = useInput({
+    ...useInputProps,
+    inputClassName: selectClasses,
+  });
+
+  return (
+    <Input
+      {...wrapperProps}
+      inputWrapperClassName={`${prefix}--select`}
+      hideLabel={hideLabel}
+    >
+      <select
+        //{...other}
+        //{...ariaProps}
+
+        //className={`${prefix}--select-input`}
+        {...inputProps}
+        /*disabled={disabled || undefined}
+          data-invalid={invalid || undefined}
+          aria-invalid={invalid || undefined} */
+        ref={ref as React.Ref<HTMLSelectElement>}
+      >
+        {children}
+      </select>
+
+      <ChevronDown
+        className={`${prefix}--select__arrow`}
+        description={iconDescription}
+      />
+    </Input>
+  );
+});
+
+Select.displayName = "Select";
+
+export default Select;

package/src/components/Select/index.ts

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

package/src/components/SelectItem/SelectItem-old.js

@@ -0,0 +1,40 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import classNames from 'classnames';
+import useSettings from '../../hooks/useSettings';
+
+const SelectItem = ({ className, value, disabled, hidden, text, ...other }) => {
+  const { prefix } = useSettings();
+  const selectItemClasses = classNames({
+    [`${prefix}--select-option`]: true,
+    [className]: className,
+  });
+
+  return (
+    <option
+      {...other}
+      className={selectItemClasses}
+      value={value}
+      disabled={disabled}
+      hidden={hidden}>
+      {text}
+    </option>
+  );
+};
+
+SelectItem.propTypes = {
+  value: PropTypes.any.isRequired,
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  hidden: PropTypes.bool,
+  text: PropTypes.string.isRequired,
+};
+
+SelectItem.defaultProps = {
+  disabled: false,
+  hidden: false,
+  value: '',
+  text: '',
+};
+
+export default SelectItem;

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import SelectItem from '.';
+import { shallow } from 'enzyme';
+
+describe('SelectItem', () => {
+  describe('Renders as expected', () => {
+    const wrapper = shallow(
+      <SelectItem className="extra-class" value="test" text="test" />
+    );
+
+    it('Has the expected classes', () => {
+      expect(wrapper.hasClass('wfp--select-option')).toEqual(true);
+    });
+
+    it('Should add extra classes that are passed via className', () => {
+      expect(wrapper.hasClass('extra-class')).toEqual(true);
+    });
+
+    it('Should add the value that is passed', () => {
+      wrapper.setProps({ value: 'placeholder-item' });
+      expect(wrapper.props().value).toEqual('placeholder-item');
+    });
+
+    it('Should add the select item text that is passed', () => {
+      wrapper.setProps({ text: 'Pick an option' });
+      expect(wrapper.props().children).toEqual('Pick an option');
+    });
+
+    it('Should not be disabled by default', () => {
+      expect(wrapper.props().disabled).toEqual(false);
+    });
+
+    it('should set disabled as expected', () => {
+      expect(wrapper.props().disabled).toEqual(false);
+      wrapper.setProps({ disabled: true });
+      expect(wrapper.props().disabled).toEqual(true);
+    });
+
+    it('should set hidden as expected', () => {
+      expect(wrapper.props().hidden).toEqual(false);
+      wrapper.setProps({ hidden: true });
+      expect(wrapper.props().hidden).toEqual(true);
+    });
+  });
+});