@progressiveui/react 1.22.0

package/src/components/Search/README.mdx

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

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

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

@@ -0,0 +1,177 @@
+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 = () => {
+    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

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

package/src/components/SecondaryNavigation/README.mdx

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

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

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

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

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