@progressiveui/react 2.0.3 → 2.0.5

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

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

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

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

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

package/src/components/Select/README.mdx

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

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

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

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

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

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

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

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

@@ -1,45 +0,0 @@
-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);
-    });
-  });
-});