@progressiveui/react 2.0.2 → 2.0.4

package/src/components/Search/README.mdx

@@ -1,22 +0,0 @@
-**Search** enables users to specify a word or a phrase to find particular relevant pieces of content without the use of navigation. Search can be used as the primary means of discovering content, or as a filter to aid the user in finding content.
-
-### Usage with react
-
-```js
-import { Search } from "@progressiveui/react";
-
-const handleOnChange = (searchValue, evt) => {
-  console.log("searchValue", searchValue); // a string
-  console.log("evt", evt); // the whole event object
-};
-
-<Search
-  className="some-class"
-  kind="large"
-  name="input-name"
-  labelText="Label"
-  closeButtonLabelText="The label text for the close button (closeButtonLabelText)"
-  placeholder="Placeholder"
-  onChange={handleOnChange}
-/>;
-```

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

@@ -1,178 +0,0 @@
-import React from 'react';
-import Search from '../Search';
-import SearchSkeleton from '../Search/Search.Skeleton';
-import { mount, shallow } from 'enzyme';
-
-describe('Search', () => {
-  describe('renders as expected', () => {
-    const wrapper = mount(
-      <Search
-        id="test"
-        className="extra-class"
-        label="Search Field"
-        labelText="testlabel"
-        light={false}
-      />
-    );
-
-    const label = wrapper.find('label');
-    const textInput = wrapper.find('input');
-
-    describe('container', () => {
-      it('should add extra classes that are passed via className', () => {
-        expect(wrapper.hasClass('extra-class')).toEqual(true);
-      });
-    });
-
-    describe('input', () => {
-      it('renders as expected', () => {
-        expect(textInput.length).toBe(1);
-      });
-
-      it('has the expected classes', () => {
-        expect(textInput.hasClass('wfp--search-input')).toEqual(true);
-      });
-
-      it('should set type as expected', () => {
-        expect(textInput.props().type).toEqual('text');
-        wrapper.setProps({ type: 'email' });
-        expect(wrapper.find('input').props().type).toEqual('email');
-      });
-
-      it('should set value as expected', () => {
-        expect(textInput.props().defaultValue).toEqual(undefined);
-        wrapper.setProps({ defaultValue: 'test' });
-        expect(wrapper.find('input').props().defaultValue).toEqual('test');
-        expect(wrapper.find('input').props().value).toEqual(undefined);
-      });
-
-      it('should set placeholder as expected', () => {
-        wrapper.setProps({ placeholder: 'Enter text' });
-        expect(wrapper.find('input').props().placeholder).toEqual('Enter text');
-      });
-
-      it('should specify light version as expected', () => {
-        expect(wrapper.props().light).toEqual(false);
-        wrapper.setProps({ light: true });
-        expect(wrapper.props().light).toEqual(true);
-      });
-    });
-
-    describe('label', () => {
-      it('renders a label', () => {
-        expect(label.length).toBe(1);
-      });
-
-      it('has the expected classes', () => {
-        expect(label.hasClass('wfp--label')).toEqual(true);
-      });
-
-      it('should set label as expected', () => {
-        expect(wrapper.props().label).toEqual('Search Field');
-        wrapper.setProps({ label: 'Email Input' });
-        expect(wrapper.props().label).toEqual('Email Input');
-      });
-    });
-
-    describe('Large Search', () => {
-      describe('buttons', () => {
-        const btns = wrapper.find('button');
-
-        it('should be one button', () => {
-          expect(btns.length).toBe(1);
-        });
-
-        it('should have type="button"', () => {
-          const type1 = btns
-            .first()
-            .instance()
-            .getAttribute('type');
-          const type2 = btns
-            .last()
-            .instance()
-            .getAttribute('type');
-          expect(type1).toEqual('button');
-          expect(type2).toEqual('button');
-        });
-      });
-
-    });
-
-    describe('Small Search', () => {
-      const small = mount(
-        <Search
-          id="test"
-          kind="small"
-          className="extra-class"
-          label="Search Field"
-          labelText="testlabel"
-        />
-      );
-
-
-      // it('should have the expected small class', () => {
-      //   expect(small.hasClass('wfp--search--sm')).toEqual(true);
-      // });
-
-      it('should only have 1 button (clear)', () => {
-        const btn = small.find('button');
-        expect(btn.length).toEqual(1);
-      });
-    });
-  });
-
-  describe('events', () => {
-    describe('enabled textinput', () => {
-      const onClick = jest.fn();
-      const onChange = jest.fn();
-
-      const wrapper = shallow(
-        <Search
-          id="test"
-          labelText="testlabel"
-          onClick={onClick}
-          onChange={onChange}
-        />
-      );
-
-      const input = wrapper.find('input');
-      const eventObject = {
-        target: {
-          defaultValue: 'test',
-        },
-      };
-
-      it('should invoke onClick when input is clicked', () => {
-        wrapper.simulate('click');
-        expect(onClick).toBeCalled();
-      });
-
-      it('should invoke onChange when input value is changed', () => {
-        wrapper.simulate('change', eventObject);
-        expect(onChange).toBeCalledWith(eventObject);
-      });
-    });
-  });
-});
-
-describe('SearchSkeleton', () => {
-  describe('Renders as expected', () => {
-    const wrapper = shallow(<SearchSkeleton />);
-
-    it('Has the expected classes', () => {
-      expect(wrapper.hasClass('wfp--skeleton')).toEqual(true);
-      expect(wrapper.hasClass('wfp--search--lg')).toEqual(true);
-    });
-  });
-});
-
-describe('SearchSkeleton Small', () => {
-  describe('Renders as expected', () => {
-    const wrapper = shallow(<SearchSkeleton small />);
-
-    it('Has the expected classes', () => {
-      expect(wrapper.hasClass('wfp--skeleton')).toEqual(true);
-      expect(wrapper.hasClass('wfp--search--sm')).toEqual(true);
-    });
-  });
-});

package/src/components/Search/Search.stories.tsx

@@ -1,112 +0,0 @@
-import React, { useState } from "react";
-import markdown from "./README.mdx";
-import Search from ".";
-import Button from "../Button";
-
-export default {
-  title: "Components/UI Elements/Search",
-  component: Search,
-  parameters: {
-    componentSubtitle: "Component",
-    status: "released",
-    mdx: markdown,
-  },
-};
-
-export const SearchDefault: Story = {
-  render: (args) => <Search {...args} />,
-  args: {
-    name: "search",
-    placeholder: "search here",
-  },
-};
-
-export const SearchWithButton = (args) => (
-  <div style={{ width: "50%", display: "flex" }}>
-    <Search {...args} addonAfter={<div>AddonAfter</div>} />
-    <Button kind="primary" style={{ margin: "0 0.5rem" }}>
-      Apply search
-    </Button>
-  </div>
-);
-
-SearchWithButton.args = {
-  name: "search",
-  id: "butonsearch",
-};
-
-const AddonBefore = () => {
-  return <div>Before</div>;
-};
-
-const AddonAfter = () => {
-  return <div>After</div>;
-};
-
-export const SearchWithComponents = (args) => {
-  const [value, setValue] = useState("");
-  return (
-    <div style={{ width: "50%", display: "flex" }}>
-      <Search
-        onChange={(evt) => {
-          setValue(evt.target.value);
-        }}
-        {...args}
-        components={{ AddonBefore, AddonAfter }}
-      />
-      <Button kind="primary" style={{ margin: "0 0.5rem" }}>
-        Apply search
-      </Button>
-    </div>
-  );
-};
-
-SearchWithButton.story = {
-  parameters: {
-    docs: {
-      storyDescription: `You can add a button to initate search action`,
-    },
-  },
-};
-
-export const SmallSearch = (args) => <Search {...args} />;
-
-SmallSearch.args = {
-  kind: "small",
-  id: "smallsearch",
-};
-
-SmallSearch.story = {
-  parameters: {
-    docs: {
-      storyDescription: `There are diffent ways to render the \`Search\` input by changing the \`kind\` prop.`,
-    },
-  },
-};
-
-export const RoundedSearch = (args) => <Search {...args} />;
-RoundedSearch.args = {
-  id: "roundedsearch",
-  rounded: true,
-};
-RoundedSearch.story = {
-  parameters: {
-    docs: {
-      storyDescription: `You can make the search input rounded by adding the prop \`rounded\``,
-    },
-  },
-};
-
-export const MainNavigationSearch = (args) => <Search {...args} />;
-
-MainNavigationSearch.args = {
-  kind: "main",
-};
-
-MainNavigationSearch.story = {
-  parameters: {
-    docs: {
-      storyDescription: `The Search input for the mainnavigation`,
-    },
-  },
-};

package/src/components/Search/Search.tsx

@@ -1,177 +0,0 @@
-import * as React from "react";
-import classNames from "classnames";
-import useSettings from "../../hooks/useSettings";
-import Input, { InputProps, useInput } from "../Input";
-import { Search as SearchIcon, Close } from "@progressiveui/icons-react";
-import { UseInputProps } from "../Input/useInput";
-
-interface SearchProps extends InputProps, React.ComponentPropsWithRef<"input"> {
-  defaultValue?: string | number;
-  /**
-   * Specify an optional className to be applied to the form-item node
-   */
-  formItemClassName?: string;
-  inputWrapperClassName?: string;
-  /**
-   * Specify whether you want the underlying label to be visually hidden
-   */
-  hideLabel?: boolean;
-  children?: React.ReactNode | string;
-  light?: boolean;
-  /**
-   * The text for the close Button
-   */
-  closeButtonLabelText?: string;
-  //  placeholder?: string;
-  /**
-   * Specify if the control should be disabled, or not
-   */
-  disabled?: boolean;
-  id?: string;
-  hideControls?: boolean;
-  /**
-   * Specify a style for the search input
-   */
-  kind?: "large" | "small" | "main" | "light" | "banner";
-  /**
-   * The new value is available first arg 'searchValue' and evt object if needed is on second arg.
-   * i.e.
-   * const handleChange = (searchValue, evt) => {
-   * console.log("searchValue", searchValue); // a string
-   * console.log("evt", evt); // the whole event object
-   * }
-   */
-  onChange?: (
-    event?: React.ChangeEvent<HTMLInputElement>,
-    value?: string
-  ) => void;
-  onSearchIconClick?: () => void;
-  /**
-   * `true` to use the small version of Search
-   */
-  small?: boolean;
-  value?: string;
-  className?: string;
-  rounded?: boolean;
-}
-
-/** Search enables users to specify a word or a phrase to find relevant pieces of content without the use of navigation. */
-const Search: React.FC<SearchProps> = React.forwardRef((props, ref) => {
-  const { prefix } = useSettings();
-
-  const {
-    className,
-    closeButtonLabelText,
-    disabled,
-    // id,
-    hideLabel,
-    hideControls,
-    labelText,
-    kind = "large",
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    onChange = () => {},
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    onSearchIconClick = () => {},
-    helperText,
-    light,
-    rounded,
-  } = props;
-
-  const initialValue = props.value;
-  const [value, setValue] = React.useState(initialValue);
-
-  React.useEffect(() => {
-    setValue(props.value);
-  }, [props.value]);
-
-  const newInputRef = React.useRef<HTMLInputElement>(null);
-
-  const _inputRef = ref ? ref : newInputRef;
-
-  const handleChange = (evt) => {
-    if (!disabled) {
-      evt.persist();
-      evt.imaginaryTarget = _inputRef;
-      setValue(evt.target.value);
-      onChange(evt, evt.target.value); //TODO: why are we passing evt as second arg
-    }
-  };
-
-  const clearSearch = (evt) => {
-    setValue("");
-    // setTimeout(() => {
-    //   console.log("value", value);
-    // }, 1000);
-    onChange(evt, "");
-  };
-
-  const searchInputWrapperClasses = classNames(`${prefix}--number`, className, {
-    [`${prefix}--number--light`]: light,
-    [`${prefix}--number--helpertext`]: helperText,
-    [`${prefix}--number--nolabel`]: hideLabel,
-    [`${prefix}--number--nocontrols`]: hideControls,
-    "wfp--search": true,
-    "wfp--search--lg": kind === "large",
-    "wfp--search--sm": kind === "small",
-    "wfp--search--main": kind === "main",
-    "wfp--search--banner": kind === "banner",
-    "wfp--search--light": kind === "light",
-  });
-
-  /*const newProps = {
-    disabled,
-    id,
-    onChange: handleChange,
-    value: value,
-  };*/
-
-  const clearClasses = classNames({
-    "wfp--search-close": true,
-    "wfp--search-close--hidden": !value,
-  });
-
-  const searchInputClassName = classNames(
-    `${prefix}--search-input`,
-    className,
-    {
-      [`${prefix}--search-input--rounded`]: rounded,
-    }
-  );
-
-  const useInputProps = props as UseInputProps;
-
-  const { wrapperProps, inputProps } = useInput({
-    ...useInputProps,
-    onChange: handleChange,
-    className: `${prefix}--search-input__wrapper`,
-    inputClassName: searchInputClassName,
-  });
-
-  return (
-    <Input {...wrapperProps} inputWrapperClassName={searchInputWrapperClasses}>
-      <SearchIcon
-        description={labelText}
-        className={`${prefix}--search-magnifier-icon`}
-        onClick={onSearchIconClick}
-      />
-
-      <input
-        {...inputProps}
-        ref={_inputRef as React.Ref<HTMLInputElement>}
-        value={value}
-      />
-      <button
-        className={clearClasses}
-        onClick={clearSearch}
-        type="button"
-        aria-label={closeButtonLabelText}
-      >
-        <Close description={closeButtonLabelText} />
-      </button>
-    </Input>
-  );
-});
-
-Search.displayName = "Search";
-
-export default Search;

package/src/components/Search/index.ts

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

package/src/components/SecondaryNavigation/README.mdx

@@ -1 +0,0 @@
-The SecondaryNavigation shows the page title and and optional tab navigation.

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

@@ -1,80 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import classNames from 'classnames';
-import Wrapper from '../Wrapper';
-import useSettings from '../../hooks/useSettings';
-
-const SecondaryNavigationTitle = ({ className, children }) => {
-  const { prefix } = useSettings();
-
-  const wrapperClasses = classNames(
-    `${prefix}--secondary-navigation__title`,
-    className
-  );
-  return <h1 className={wrapperClasses}>{children}</h1>;
-};
-
-SecondaryNavigationTitle.propTypes = {
-  /**
-   * The CSS class name to be placed on the wrapping element.
-   */
-  className: PropTypes.string,
-
-  /**
-   * The content of the SecondaryNavigation can be fully customized.
-   */
-  children: PropTypes.node.isRequired,
-};
-
-/** The SecondaryNavigation shows the page title and and optional tab navigation. */
-const SecondaryNavigation = ({
-  additional,
-  children,
-  className,
-  id,
-  pageWidth,
-}) => {
-  const { prefix } = useSettings();
-
-  const wrapperClasses = classNames(
-    `${prefix}--secondary-navigation`,
-    className
-  );
-
-  return (
-    <div id={id} className={wrapperClasses}>
-      <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.propTypes = {
-  children: PropTypes.node.isRequired,
-  /**
-   * The CSS class name to be placed on the wrapping element
-   */
-  className: PropTypes.string,
-  id: PropTypes.string,
-  /**
-   * Specify the max-width on desktop devices (same as \`Wrapper\` component)
-   */
-  pageWidth: PropTypes.oneOf(['sm', 'md', 'lg', 'full']),
-  wrapperClassName: PropTypes.string,
-};
-
-SecondaryNavigation.defaultProps = {
-  pageWidth: 'lg',
-};
-
-export { SecondaryNavigationTitle, SecondaryNavigation };

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

@@ -1,27 +0,0 @@
-import React from 'react';
-import { SecondaryNavigation } from '../SecondaryNavigation';
-import { shallow, mount } from 'enzyme';
-
-describe('SecondaryNavigation', () => {
-    describe('Renders as expected', () => {
-        const wrapper = shallow(<SecondaryNavigation className="some-class" additional="additional Information">Content</SecondaryNavigation>)
-
-        it('has classes as expected', () => {
-            expect(wrapper.exists('.wfp--secondary-navigation')).toBe(true);
-           
-        })
-
-        it('should allow for custom classes to be applied', () => {
-            expect(wrapper.hasClass('some-class')).toEqual(true);
-        });
-
-        it('renders additional props as expected', () => {
-            const additionalWrapper = mount(<SecondaryNavigation additional="additional Information">Content</SecondaryNavigation>)
-            expect(additionalWrapper.props().additional).toEqual('additional Information');
-        });
-
-        
-    });
-
-    
-})

package/src/components/SecondaryNavigation/SecondaryNavigation.hbs

@@ -1,35 +0,0 @@
-<div class="wfp--secondary-navigation">
-  <div class="wfp--wrapper wfp--wrapper--width-lg wfp--secondary-navigation__wrapper">
-    <div class="wfp--secondary-navigation__list">
-      <div class="wfp--breadcrumb wfp--breadcrumb--no-trailing-slash">
-        <div class="wfp--breadcrumb-item">
-          <a href="/#" class="wfp--link">
-            <svg class="wfp--breadcrumb-home" fill="#0b77c2" fill-rule="evenodd" height="14" name="home" role="img" viewBox="0 0 16 16" width="14" aria-label="Provide a description that will be used as the title" alt="Provide a description that will be used as the title">
-              <title>Provide a description that will be used as the title</title>
-              <path d="M13.555 9.515v3.842a.654.654 0 0 1-.666.643H9.666a.329.329 0 0 1-.333-.322v-3.002a.329.329 0 0 0-.334-.322H7a.329.329 0 0 0-.333.322v3.002c0 .177-.15.322-.334.322H3.11a.654.654 0 0 1-.667-.643V9.515a.32.32 0 0 1 .122-.25l5.223-4.149a.348.348 0 0 1 .425 0l5.223 4.15c.075.062.12.153.12.25zm2.323-1.632l-2.323-1.847V2.323a.329.329 0 0 0-.333-.322h-1.556a.329.329 0 0 0-.333.322v1.946L8.846 2.294a1.37 1.37 0 0 0-1.694 0L.12 7.883a.315.315 0 0 0-.045.453l.709.83a.343.343 0 0 0 .469.044l6.534-5.193a.348.348 0 0 1 .425 0l6.534 5.193a.343.343 0 0 0 .47-.043l.708-.831a.315.315 0 0 0-.047-.453z"></path>
-            </svg>
-          </a>
-        </div>
-        <div class="wfp--breadcrumb-item"><a href="#" class="wfp--link">Breadcrumb 2</a></div>
-        <div class="wfp--breadcrumb-item"><a href="#" class="wfp--link">Breadcrumb 3</a></div>
-      </div>
-      <h1 class="wfp--secondary-navigation__title">The Page Title</h1>
-      <nav class="wfp--tabs some-class" role="navigation">
-        <div role="listbox" aria-label="listbox" tabindex="0" class="wfp--tabs-trigger">
-          <a tabindex="-1" class="wfp--tabs-trigger-text" href="#anotherAnchor">Tab label 1</a>
-          <svg fill-rule="evenodd" height="5" role="img" viewBox="0 0 10 5" width="10" aria-label="show menu options" alt="show menu options">
-            <title>show menu options</title>
-            <path d="M0 0l5 4.998L10 0z"></path>
-          </svg>
-        </div>
-        <ul role="tablist" class="wfp--tabs__nav wfp--tabs__nav--hidden wfp--tabs__nav--inline">
-          <li role="presentation" tabindex="-1" class="wfp--tabs__nav-item wfp--tabs__nav-item--selected another-class"><a href="http://www.de.wfp.org">Tab label 1</a></li>
-          <li role="presentation" tabindex="-1" class="wfp--tabs__nav-item another-class"><a href="http://www.es.wfp.org">Tab label 2</a></li>
-          <li role="presentation" tabindex="-1" class="wfp--tabs__nav-item another-class"><a href="http://www.us.wfp.org">Tab label 3</a></li>
-          <li role="presentation" tabindex="-1" class="wfp--tabs__nav-item another-class"><a href="http://www.fr.wfp.org">Tab label 4</a></li>
-        </ul>
-      </nav>
-    </div>
-    <div class="wfp--secondary-navigation__additional">additional Information</div>
-  </div>
-</div>