@progressiveui/react 1.22.0

package/src/components/InputGroup/InputGroup.stories.tsx

@@ -0,0 +1,265 @@
+import React from "react";
+import InputGroup from ".";
+import markdown from "./README.mdx";
+import RadioButton from "../RadioButton";
+import Checkbox from "../Checkbox";
+
+export default {
+  title: "Components/Forms/InputGroup",
+  component: InputGroup,
+  parameters: {
+    componentSubtitle: "Component",
+    mdx: markdown,
+  },
+};
+
+export const Regular = (args) => (
+  <InputGroup
+    defaultSelected="default-selected"
+    labelText="Group labelText"
+    helperText="Helper text"
+    {...args}
+  >
+    <RadioButton
+      name="radio"
+      value="standard"
+      id="radio-1"
+      labelText="Radio button label 1"
+    />
+    <RadioButton
+      name="radio"
+      value="default-selected"
+      id="radio-2"
+      labelText="Radio button label 2"
+    />
+    <RadioButton
+      name="radio"
+      value="disabled"
+      id="radio-3"
+      labelText="Radio 1"
+    />
+  </InputGroup>
+);
+
+const regularsourcecode = `
+import { InputGroup, RadioButton  } from "@progressiveui/react";
+
+<InputGroup
+  defaultSelected="default-selected"
+  labelText="Group labelText"
+  helperText="Helper text">
+  <RadioButton
+    name="radio"
+    value="standard"
+    id="radio-1"
+    labelText="Radio button label 1"
+  />
+  <RadioButton
+    name="radio"
+    value="default-selected"
+    id="radio-2"
+    labelText="Radio button label 2"
+  />
+  <RadioButton
+    name="radio"
+    value="disabled"
+    id="radio-3"
+    labelText="Radio 1"
+  />
+</InputGroup>
+`;
+
+Regular.story = {
+  parameters: {
+    docs: {
+      source: {
+        code: regularsourcecode,
+      },
+    },
+  },
+};
+
+export const withCheckbox = (args) => (
+  <InputGroup
+    defaultSelected="default-selected"
+    labelText="Group labelText"
+    helperText="Helper text"
+    {...args}
+  >
+    <Checkbox
+      id="check-1"
+      name="checkbox-1"
+      value="standard"
+      labelText="Checkbox label 1"
+    />
+    <Checkbox
+      id="check-2"
+      name="checkbox-2"
+      value="default-selected"
+      labelText="Checkbox label 2"
+    />
+    <Checkbox
+      id="check-3"
+      name="checkbox-3"
+      value="disabled"
+      labelText="Checkbox label 3"
+    />
+  </InputGroup>
+);
+
+const withcheckboxsourcecode = `
+import { InputGroup, Checkbox } from "@progressiveui/react";
+        
+<InputGroup
+  defaultSelected="default-selected"
+  helperText="Helper text"
+  labelText="Group labelText"
+>
+  <Checkbox
+    labelText="Checkbox label 1"
+    name="checkbox-1"
+    value="standard"
+  />
+  <Checkbox
+    labelText="Checkbox label 2"
+    name="checkbox-2"
+    value="default-selected"
+  />
+  <Checkbox
+    labelText="Checkbox label 3"
+    name="checkbox-3"
+    value="disabled"
+  />
+</InputGroup>
+`;
+
+withCheckbox.story = {
+  parameters: {
+    docs: {
+      storyDescription: "The InputGroup can be used with checkboxes",
+      source: {
+        code: withcheckboxsourcecode,
+      },
+    },
+  },
+};
+
+export const vertical = (args) => (
+  <>
+    <InputGroup
+      defaultSelected="default-selected"
+      labelText="Group labelText"
+      helperText="Helper text"
+      vertical
+      {...args}
+    >
+      <Checkbox
+        id="checkb-1"
+        name="checkboxb-1"
+        value="standard"
+        labelText="Checkbox label 1"
+      />
+      <Checkbox
+        id="checkb-2"
+        name="checkboxb-2"
+        value="default-selected"
+        labelText="Checkbox label 2"
+      />
+      <Checkbox
+        id="checkb-3"
+        name="checkboxb-3"
+        value="disabled"
+        labelText="Checkbox label 3"
+      />
+    </InputGroup>
+    <InputGroup
+      defaultSelected="default-selected"
+      legend="Group Legend"
+      vertical
+      {...args}
+    >
+      <RadioButton
+        name="radiob"
+        value="standard"
+        id="radiob-1"
+        labelText="Radio button label 1"
+      />
+      <RadioButton
+        name="radiob"
+        value="default-selected"
+        id="radiob-2"
+        labelText="Radio button label 2"
+      />
+      <RadioButton
+        name="radiob"
+        value="disabled"
+        id="radiob-3"
+        labelText="Radio 1"
+      />
+    </InputGroup>
+  </>
+);
+
+const verticalsourcecode = `
+
+import { InputGroup, Checkbox, RadioButton  } from "@progressiveui/react";
+
+
+  <InputGroup
+    defaultSelected="default-selected"
+    labelText="Group labelText"
+    helperText="Helper text"
+    vertical>
+    <Checkbox
+      name="checkboxb-1"
+      value="standard"
+      labelText="Checkbox label 1"
+    />
+    <Checkbox
+      name="checkboxb-2"
+      value="default-selected"
+      labelText="Checkbox label 2"
+    />
+    <Checkbox
+      name="checkboxb-3"
+      value="disabled"
+      labelText="Checkbox label 3"
+    />
+  </InputGroup>
+  <InputGroup
+    defaultSelected="default-selected"
+    legend="Group Legend"
+    vertical>
+    <RadioButton
+      name="radiob"
+      value="standard"
+      id="radiob-1"
+      labelText="Radio button label 1"
+    />
+    <RadioButton
+      name="radiob"
+      value="default-selected"
+      id="radiob-2"
+      labelText="Radio button label 2"
+    />
+    <RadioButton
+      name="radiob"
+      value="disabled"
+      id="radiob-3"
+      labelText="Radio 1"
+    />
+  </InputGroup>
+
+`;
+
+vertical.story = {
+  parameters: {
+    docs: {
+      storyDescription:
+        "Use the vertical alignment if the elements do not have enough horizontal space. Avoid wrapping InputGroupss",
+      source: {
+        code: verticalsourcecode,
+      },
+    },
+  },
+};

package/src/components/InputGroup/InputGroup.tsx

@@ -0,0 +1,132 @@
+import React, { useEffect, useState } from 'react';
+import classNames from 'classnames';
+//import RadioButton from '../RadioButton';
+//import warning from 'warning';
+import useSettings from '../../hooks/useSettings';
+import { InputProps } from '../Input/Input';
+
+/**
+ * InputGroup allows you to organize and arange multiple input elements.
+ */
+
+interface InputGroupProps
+  extends InputProps,
+    React.ComponentPropsWithoutRef<'div'> {
+  /**
+   * Provide a collection of <RadioButton> components to render in the group
+   */
+  children?: React.ReactNode;
+  /**
+   * Specify the <RadioButton> to be selected by default
+   */
+  defaultSelected?: string | number;
+
+  /**
+   * Specify the name of the underlying `input` nodes
+   */
+  name?: string;
+
+  /**
+   * Provide an optional `onChange` hook that is called whenever the value of
+   * the group changes
+   */
+  //onChange: (value: string | number) => void;
+
+  /**
+   * Specify the value that is currently selected in the group
+   */
+  valueSelected?: string | number;
+
+  /**
+   * Specify whether the elements should be displayed vertically.
+   */
+
+  vertical?: boolean;
+
+  /**
+   * Specify whether you want the underlying label to be visually hidden
+   */
+
+  hideLabel?: boolean;
+  /**
+   * Provide text that is used alongside the control label for additional help
+   */
+
+  helperText?: React.ReactNode;
+
+  /**
+   * Provide the text that will be read by a screen reader when visiting this
+   * control
+   */
+  labelText?: React.ReactNode;
+  controlled?: boolean;
+  wrapperClassName?: string;
+}
+
+/*InputGroup.defaultProps = {
+    onChange: () => {},
+    controlled: false,
+  };*/
+
+const InputGroup: React.FC<InputGroupProps> = (props) => {
+  const { prefix } = useSettings();
+
+  const {
+    children,
+    //disabled,
+    labelText,
+    helperText,
+    //controlled,
+    vertical,
+    hideLabel,
+    className = `${prefix}--input-group`,
+    wrapperClassName,
+    valueSelected,
+    defaultSelected,
+  } = props;
+
+  const [prevValueSelected, setPrevValueSelected] = useState(
+    valueSelected || defaultSelected
+  );
+  //const [selected, setSelected] = useState();
+
+  useEffect(() => {
+    if (valueSelected !== prevValueSelected) {
+      setPrevValueSelected(valueSelected);
+      //TODO: setSelected(valueSelected || defaultSelected);
+    }
+  }, [valueSelected, defaultSelected]);
+
+  const labelClasses = classNames(`${prefix}--label`, {
+    [`${prefix}--visually-hidden`]: hideLabel,
+  });
+
+  const wrapperClasses = classNames(`${prefix}--form-item`, {
+    [`${prefix}--input-group__vertical`]: vertical,
+    wrapperClassName,
+  });
+
+  const label = labelText ? (
+    <span className={labelClasses}>{labelText}</span>
+  ) : null;
+
+  const helper = helperText ? (
+    <div className={`${prefix}--form__helper-text`}>{helperText}</div>
+  ) : null;
+
+  return (
+    <div className={wrapperClasses}>
+      <div className={className}>
+        {label}
+        {helper}
+        <div className={`${prefix}--input-group-inside`}>
+          {/*controlled ? getRadioButtons() : */ children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+InputGroup.displayName = 'InputGroup';
+
+export default InputGroup;

package/src/components/InputGroup/README.mdx

@@ -0,0 +1,19 @@
+## Usage
+
+InputGroup should be used inside `<Form>`s and can contain multiple inputs.
+
+#### When to use
+
+Use InputGroup to structure multiple inputs
+
+#### When not to use
+
+Do not nest multiple Inputs. Each input should only have one label text.
+
+## Related
+
+[Form](?path=/docs/components-form--regular)
+
+[Checkbox](?path=/docs/components-checkbox--regular)
+
+[RadioButton](?path=/docs/components-radiobutton--regular)

package/src/components/InputGroup/RadioButtonGroupWithoutControls.js

@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import classNames from 'classnames';
+import useSettings from '../../hooks/useSettings';
+
+const FormWizard = (props) => {
+  const { prefix } = useSettings();
+  const { className, children, sidebar } = props;
+  const classes = {
+    formControls: classNames(`${prefix}--form-wizard`, className),
+  };
+  return (
+    <div className={classes.formControls}>
+      <div className={`${prefix}--form-wizard__sidebar`}>{sidebar}</div>
+      <div className={`${prefix}--form-wizard__content`}>{children}</div>
+    </div>
+  );
+};
+
+FormWizard.propTypes = {
+  /**
+   * Specify a custom css class
+   * which is added to the container
+   */
+  className: PropTypes.string,
+  /**
+   * Specify the custom
+   * main content component
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Specify the custom
+   * sidebar component
+   */
+  sidebar: PropTypes.node.isRequired,
+};

package/src/components/InputGroup/index.tsx

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

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import Item from '../Item';
+import { shallow } from 'enzyme';
+
+describe('Item', () => {
+  describe('Renders as expected', () => {
+    const wrapper = shallow(<Item className="some-class">A simple link</Item>);
+
+    it('renders children as expected', () => {
+      expect(wrapper.length).toBe(1);
+    });
+
+    it('should use the appropriate Item class', () => {
+      expect(wrapper.hasClass('wfp--item')).toEqual(true);
+    });
+
+    it('has inner wrapper content', () => {
+      expect(wrapper.exists('.wfp--item__content')).toBe(true);
+  })
+    it('has inner text wrapper', () => {
+      expect(wrapper.exists('.wfp--item__text-wrapper')).toBe(true);
+    })
+
+    // describe('renders Image as expected', () => {
+    //   const imageWrapper = shallow(<Item image="" >A simple link</Item>);
+
+    //   it('has error div classes as expected', () => {
+    //       expect(imageWrapper.exists('.wfp--item__image')).toBe(true);
+    //   })
+    // });
+
+  });
+});

package/src/components/Item/Item.stories.tsx

@@ -0,0 +1,158 @@
+import React from "react";
+import markdown from "./README.mdx";
+import Item from ".";
+import Tag from "../Tag";
+
+export default {
+  title: "Components/UI Elements/Item",
+  component: Item,
+  parameters: {
+    componentSubtitle: "Component",
+    status: "experimental",
+    mdx: markdown,
+  },
+};
+
+export const ItemDefault: Story = {
+  render: (args) => <Item {...args} />,
+  args: {
+    title: "A title is shown here",
+    children: `nonumy eirmod tempor invidunt`,
+    subContent: `This is the subContent. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. `,
+    icon: (
+      <img
+        alt="Moving van"
+        src="https://www.wfp.org/sites/default/files/styles/medium/public/images/publication/YiR_banner.jpg"
+      />
+    ),
+    showAdditionalIcon: true,
+    additional: "Yesterday",
+    hint: <Tag type="wfp">Hint</Tag>,
+    wrapper: "button",
+  },
+};
+
+const itemsourcecode = (kind, wrapper) => `
+import { Item, Tag } from "@progressiveui/react";
+
+<Item
+  additional="Yesterday"
+  hint={<Tag type="wfp">Hint</Tag>}
+  icon={<img alt="Moving van" src="https://www.wfp.org/sites/default/files/styles/medium/public/images/publication/YiR_banner.jpg"/>}
+  kind=${kind}
+  showAdditionalIcon
+  subContent="This is the subContent. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. "
+  title="A title is shown"
+  wrapper=${wrapper}
+>
+  nonumy eirmod tempor invidunt
+</Item>
+
+`;
+
+Regular.story = {
+  parameters: {
+    docs: {
+      source: {
+        code: itemsourcecode("large", "button"),
+      },
+    },
+  },
+};
+
+export const Horizontal = (args) => (
+  <>
+    <Item {...args} />
+    <Item {...args} unread />
+    <Item
+      {...args}
+      unread
+      style={{ marginTop: "10px" }}
+      additional={undefined}
+      hint={undefined}
+      image={
+        <img
+          alt="Moving van"
+          src="https://www.wfp.org/sites/default/files/styles/medium/public/images/publication/YiR_banner.jpg"
+        />
+      }
+    />
+    <Item
+      {...args}
+      image={
+        <img
+          alt="Moving van"
+          src="https://www.wfp.org/sites/default/files/styles/medium/public/images/publication/YiR_banner.jpg"
+        />
+      }
+    />
+  </>
+);
+
+Horizontal.args = {
+  title: "A title is shown",
+  children: `nonumy eirmod tempor invidunt`,
+  subContent: `This is the subContent. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. `,
+  kind: "horizontal",
+  icon: (
+    <img
+      alt="Moving van"
+      src="https://www.wfp.org/sites/default/files/styles/medium/public/images/publication/YiR_banner.jpg"
+    />
+  ),
+  showAdditionalIcon: true,
+  additional: "Yesterday",
+  hint: <Tag type="wfp">Hint</Tag>,
+  wrapper: "sidebar",
+};
+
+Horizontal.story = {
+  parameters: {
+    docs: {
+      source: {
+        code: itemsourcecode("horizontal", "sidebar"),
+      },
+    },
+  },
+};
+
+export const HorizontalRepeater = (args) => (
+  <>
+    <Item {...args} />{" "}
+    <Item
+      {...args}
+      title="A very long title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title is shown"
+    />
+    <Item
+      {...args}
+      title="Averylongtitletitletitletitletitletitletitletitletitletitletitletitletitletitletitletitletitletitletitletitletitletitletitletitletitletitletitletitletitletitletitletitleisshown"
+    />
+  </>
+);
+
+HorizontalRepeater.args = {
+  title: "A title is shown",
+  children: `nonumy eirmod tempor invidunt`,
+  subContent: `This is the subContent. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.`,
+  kind: "horizontal",
+  icon: (
+    <img
+      alt="Moving van"
+      src="https://www.wfp.org/sites/default/files/styles/medium/public/images/publication/YiR_banner.jpg"
+    />
+  ),
+  showAdditionalIcon: true,
+  additional: "Yesterday",
+  hint: <Tag type="wfp">Hint</Tag>,
+  wrapper: "repeater",
+};
+
+HorizontalRepeater.story = {
+  parameters: {
+    docs: {
+      source: {
+        code: itemsourcecode("horizontal", "repeater"),
+      },
+    },
+  },
+};