@progressiveui/react 1.22.0

package/src/components/RadioButton/index.ts

@@ -0,0 +1,3 @@
+// export * from './RadioButton.Skeleton';
+export * from "./RadioButton";
+export { default } from "./RadioButton";

package/src/components/RadioButtonGroup/README.md

@@ -0,0 +1,31 @@
+Legacy note: RadioButtonGroup is depreciated and will be removed in the next versions. Use InputGroup instead.
+
+## Use with React Final Form (Redux form)
+
+Add `controlled={false}` to allow final-form to hand the state.
+
+```js
+<RadioButtonGroup
+  controlled={false}
+  labelText="Tracking frequency"
+  helperText="How often the position will be updated">
+  <Field
+    component={ReduxFormWrapper}
+    inputComponent={RadioButton}
+    id="radioButton-1"
+    name="radioButton"
+    value={5}
+    labelText="Radiobutton 1"
+    type="radio"
+  />
+  <Field
+    component={ReduxFormWrapper}
+    inputComponent={RadioButton}
+    id="radioButton-2"
+    name="radioButton"
+    value={10}
+    labelText="Radiobutton 2"
+    type="radio"
+  />
+</RadioButtonGroup>
+```

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import RadioButtonGroup from '../RadioButtonGroup';
+import RadioButton from '../RadioButton';
+
+describe('RadioButtonGroup', () => {
+  describe('renders as expected', () => {
+    const wrapper = mount(
+      <RadioButtonGroup defaultSelected="female" name="gender">
+        <RadioButton labelText="Male" value="male" />
+        <RadioButton labelText="Female" value="female" />
+      </RadioButtonGroup>
+    );
+
+    describe('wrapping div', () => {
+      const div = wrapper.first('div');
+
+      it('renders a div', () => {
+        expect(div.length).toEqual(1);
+      });
+
+      it('sets classes that are passed via className prop', () => {
+        wrapper.setProps({ className: 'extra-class' });
+        expect(div.hasClass('extra-class'));
+      });
+
+      it('sets disabled attribute if disabled prop is set', () => {
+        wrapper.setProps({ disabled: true });
+        expect(wrapper.first().props().disabled).toEqual(true);
+      });
+    });
+
+    describe('children', () => {
+      const radioButton = () => wrapper.find(RadioButton);
+
+      it('renders expected number of children', () => {
+        expect(radioButton().length).toEqual(2);
+      });
+
+      it('should set expected props on children', () => {
+        const firstChild = radioButton().first();
+        expect(firstChild.props().value).toEqual('male');
+      });
+    });
+  });
+
+
+
+  describe('Getting derived state from props', () => {
+    const wrapper = shallow(
+      <RadioButtonGroup
+        defaultSelected="male"
+        name="gender">
+        <RadioButton labelText="Male" value="male" />
+        <RadioButton labelText="Female" value="female" />
+      </RadioButtonGroup>
+    );
+
+    it('should initialize the current selection from props', () => {
+      console.log("state", wrapper);
+      expect(wrapper.state().selected).toEqual('male');
+    });
+
+  });
+});

package/src/components/RadioButtonGroup/RadioButtonGroup.js

@@ -0,0 +1,172 @@
+import PropTypes from "prop-types";
+import React from "react";
+import classNames from "classnames";
+import RadioButton from "../RadioButton";
+import warning from "warning";
+
+class RadioButtonGroup extends React.Component {
+  state = { selected: this.props.valueSelected || this.props.defaultSelected };
+
+  static propTypes = {
+    prefix: PropTypes.string,
+    /**
+     * Provide a collection of <RadioButton> components to render in the group
+     */
+    children: PropTypes.node,
+
+    /**
+     * Provide an optional className to be applied to the container node
+     */
+    className: PropTypes.string,
+    /**
+     * Provide an optional className to be applied to the container node
+     */
+    controlled: PropTypes.bool,
+
+    /**
+     * Specify the <RadioButton> to be selected by default
+     */
+    defaultSelected: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+    /**
+     * Specify the name of the underlying `input` nodes
+     */
+    name: PropTypes.string.isRequired,
+
+    /**
+     * Specify whether the group is disabled
+     */
+    disabled: PropTypes.bool,
+
+    /**
+     * Provide an optional `onChange` hook that is called whenever the value of
+     * the group changes
+     */
+    onChange: PropTypes.func,
+
+    /**
+     * Specify the value that is currently selected in the group
+     */
+    valueSelected: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+    /**
+     * Specify whether the elements should be displayed vertically.
+     */
+
+    vertical: PropTypes.bool,
+
+    /**
+     * Specify whether you want the underlying label to be visually hidden
+     */
+
+    hideLabel: PropTypes.bool,
+    /**
+     * Provide text that is used alongside the control label for additional help
+     */
+
+    helperText: PropTypes.node,
+
+    /**
+     * Provide the text that will be read by a screen reader when visiting this
+     * control
+     */
+    labelText: PropTypes.node,
+  };
+
+  static defaultProps = {
+    onChange: /* istanbul ignore next */ () => {},
+    controlled: false,
+  };
+
+  static getDerivedStateFromProps({ valueSelected, defaultSelected }, state) {
+    const { prevValueSelected } = state;
+    return prevValueSelected === valueSelected
+      ? null
+      : {
+          selected: valueSelected || defaultSelected,
+          prevValueSelected: valueSelected,
+        };
+  }
+
+  getRadioButtons = () => {
+    const children = React.Children.map(this.props.children, (radioButton) => {
+      const { value, ...other } = radioButton.props;
+      /* istanbul ignore if */
+      if (radioButton.props.hasOwnProperty("checked")) {
+        warning(
+          false,
+          `Instead of using the checked property on the RadioButton, set
+            the defaultSelected property or valueSelected property on the RadioButtonGroup.`
+        );
+      }
+
+      return (
+        <RadioButton
+          {...other}
+          name={this.props.name}
+          key={value}
+          value={value}
+          onChange={this.handleChange}
+          checked={value === this.state.selected}
+        />
+      );
+    });
+
+    return children;
+  };
+
+  handleChange = (newSelection, value, evt) => {
+    if (newSelection !== this.state.selected) {
+      this.setState({ selected: newSelection });
+      this.props.onChange(newSelection, this.props.name, evt);
+    }
+  };
+
+  render() {
+    const {
+      prefix,
+      children,
+      disabled,
+      labelText,
+      helperText,
+      controlled,
+      vertical,
+      hideLabel,
+      className = `${prefix}--radio-button-group`,
+    } = this.props;
+
+    const labelClasses = classNames(`${prefix}--label`, {
+      [`${prefix}--visually-hidden`]: hideLabel,
+    });
+
+    const wrapperClasses = classNames(`${prefix}--form-item`, {
+      [`${prefix}--radio-button-group__vertical`]: vertical,
+    });
+
+    const label = labelText ? (
+      <span className={labelClasses}>{labelText}</span>
+    ) : null;
+
+    const helper = helperText ? (
+      <div className="wfp--form__helper-text">{helperText}</div>
+    ) : null;
+
+    console.warn(
+      "RadioButtonGroup is depreciated and will be removed in the next versions. Use InputGroup instead"
+    );
+
+    return (
+      <div className={wrapperClasses}>
+        <div className={className} disabled={disabled}>
+          {label}
+          {helper}
+          <div className={`${prefix}--radio-button-group-inside`}>
+            {controlled ? this.getRadioButtons() : children}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default RadioButtonGroup;

package/src/components/RadioButtonGroup/RadioButtonGroupWithoutControls.js

@@ -0,0 +1,44 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import classNames from 'classnames';
+
+export default class FormWizard extends React.Component {
+  static 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,
+  };
+
+  static defaultProps = {};
+
+  render() {
+    const { className, children, sidebar } = this.props;
+
+    const classes = {
+      formControls: classNames('wfp--form-wizard', className),
+    };
+
+    console.warn(
+      'RadioButtonGroup is depreciated and will be removed in the next versions. Use InputGroup instead'
+    );
+
+    return (
+      <div className={classes.formControls}>
+        <div className="wfp--form-wizard__sidebar">{sidebar}</div>
+        <div className="wfp--form-wizard__content">{children}</div>
+      </div>
+    );
+  }
+}

package/src/components/RadioButtonGroup/index.js

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

package/src/components/ReactSelect/README.mdx

@@ -0,0 +1,33 @@
+We recommend [React Select](https://react-select.com) for multiselect, autocomplete or ajax inputs.
+
+### Usage
+
+To use the WFP UI styling add the following `className` and `classNamePrefix` props.
+
+```js
+<Select
+  className="wfp--react-select-container"
+  classNamePrefix="wfp--react-select"
+/>
+```
+
+### Usage with react-final-forms or redux-forms
+
+[Click here](?path=/story/components-reduxformwrapper--select-react-final-form) for an example on using react-select inside the `<Field/>` component.
+
+### Usage inside custom component with a label
+
+```js
+<div className="wfp--form-item" style={{ minWidth: '400px' }}>
+  <label htmlFor="abc" className="wfp--label">
+    The Label
+  </label>
+  <ReactSelect
+    className="wfp--react-select-container"
+    classNamePrefix="wfp--react-select"
+    isMulti
+    id="abc"
+    options={options}
+  />
+</div>
+```

package/src/components/ReactSelect/ReactSelect.stories.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import ReactSelect from "react-select";
+
+import markdown from "./README.mdx";
+
+export default {
+  title: "Components/Forms/Dropdown/react-select",
+  component: ReactSelect,
+  markdown: "hello",
+  parameters: {
+    componentSubtitle: "Component",
+    status: "released",
+    introText: `[React Select](https://react-select.com) is recommended for multiselect, autocomplete or dynamic inputs.`,
+    mdx: markdown,
+    code: false,
+    html: false,
+  },
+};
+
+const options = [
+  { value: "chocolate", label: "Chocolate" },
+  { value: "strawberry", label: "Strawberry" },
+  { value: "vanilla", label: "Vanilla" },
+];
+
+export const Default = (args) => (
+  <div className="wfp--form-item" style={{ minWidth: "400px" }}>
+    <label htmlFor="abc" className="wfp--label">
+      The Label
+    </label>
+    <ReactSelect
+      className="wfp--react-select-container"
+      classNamePrefix="wfp--react-select"
+      isMulti
+      id="abc"
+      options={options}
+      {...args}
+    />
+  </div>
+);
+Default.args = {
+  placeholder: "Placeholder",
+  isSearchable: false,
+  isMulti: true,
+  isDisabled: false,
+};
+
+Default.story = {
+  name: "Default",
+  parameters: {
+    info: {
+      source: false,
+      propTables: false,
+    },
+  },
+};

package/src/components/ReadMore/README.mdx

@@ -0,0 +1,30 @@
+Using the **ReadMore** component is a simple way to keep longer content from cluttering up your page, giving you more control over how much content is displayed to visitors.
+
+### Truncate text
+
+Based on the type of content use [react-truncate](https://www.npmjs.com/package/react-truncate) or [react-truncate-html](https://www.npmjs.com/package/react-truncate-html) to truncate the collapsed content.
+
+```jsx
+import Truncate from 'react-truncate';
+```
+
+```jsx
+<ReadMore
+  collapsed={
+    <Truncate lines={1} ellipsis="...">
+      {moreText}
+    </Truncate>
+  }>
+  Expanded content
+</ReadMore>
+```
+
+### Fade & animate
+
+The `maxHeight` prop will allow the content to be collapsed if it extends a specific height. It will only work without the `collapsed` prop.
+
+```jsx
+<ReadMore fade maxHeight={30}>
+  The content
+</ReadMore>
+```

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReadMore from '../ReadMore';
+import { shallow } from 'enzyme';
+
+describe('ReadMore', () => {
+  describe('Renders as expected', () => {
+    const readMore = shallow(
+      <ReadMore className="some-class">Content</ReadMore>
+    );
+    it('should use the appropriate link class', () => {
+      expect(readMore.hasClass('wfp--read-more')).toEqual(true);
+    });
+    it('should all for custom classes to be applied', () => {
+      expect(readMore.hasClass('some-class')).toEqual(true);
+    });
+  });
+});

package/src/components/ReadMore/ReadMore.stories.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import markdown from "./README.mdx";
+import ReadMore from ".";
+
+export default {
+  title: "Components/UI Elements/ReadMore",
+  component: ReadMore,
+  parameters: {
+    componentSubtitle: "Component",
+    status: "released",
+    mdx: markdown,
+  },
+};
+
+export const ReadMoreDefault: Story = {
+  render: (args) => (
+    <ReadMore {...args}>
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. 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. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
+      diam voluptua. 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. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
+      diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
+      erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
+      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum.
+    </ReadMore>
+  ),
+  args: {
+    colon: true,
+    fade: true,
+    maxHeight: 50,
+  },
+};

package/src/components/ReadMore/ReadMore.tsx

@@ -0,0 +1,185 @@
+import React, { useRef, useState } from "react";
+import classNames from "classnames";
+import Link from "../Link";
+import { CaretUp, ChevronUp } from "@progressiveui/icons-react";
+import useSettings from "../../hooks/useSettings";
+import { useId } from "../../hooks/useId";
+
+const MoreLink = ({ handleToggleClick, link, text, showMore, contentId }) => {
+  const { prefix } = useSettings();
+  const ariaProps = {
+    "aria-expanded": showMore,
+    "aria-controls": contentId,
+  };
+
+  if (link) {
+    const clonedLink = React.cloneElement(link, {
+      onClick: handleToggleClick,
+      ...ariaProps, // Spread ariaProps into the clone
+    });
+    return clonedLink;
+  } else {
+    const Icon = ChevronUp;
+
+    const classes = classNames({
+      [`${prefix}--read-more__trigger`]: true,
+      [`${prefix}--read-more__trigger--expanded`]: showMore,
+    });
+
+    return (
+      <Link
+        className={classes}
+        size="sm"
+        onClick={handleToggleClick}
+        {...ariaProps} // Add aria attributes to the link
+      >
+        {text}
+        <Icon
+          width="10"
+          height="10"
+          description={showMore ? "icon up" : "icon down"}
+        />
+      </Link>
+    );
+  }
+};
+
+export interface ReadMoreProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /**
+   * Specify an optional className to be applied to the wrapper node
+   */
+  className?: string;
+  /**
+   * The content of the collapsed content (optional)
+   */
+  collapsed?: boolean;
+  /**
+   * A custom link for collapsing
+   */
+  collapseLink?: React.ReactNode;
+  /**
+   * Custom text for collapsing
+   */
+  collapseText?: React.ReactNode;
+  /**
+   * Disable the scroll into view on expanding
+   */
+  disableAutoscroll?: boolean;
+  /**
+   * A custom link for expanding
+   */
+  expandLink?: React.ReactNode;
+  /**
+   * Custom text for expanding
+   */
+  expandText?: React.ReactNode;
+  /**
+   * Enables the fade effect when the content is collapsed (optional) when enabled collapsed will be ignored
+   */
+  fade?: boolean;
+  /**
+   * The maximum height when the content is collapsed (optional)
+   */
+  maxHeight?: number;
+}
+
+/** ReadMore component is a simple way to keep longer content from cluttering up your page, giving you more control over how much content is displayed to visitor */
+function ReadMore({
+  collapseLink,
+  collapseText = "Show less",
+  children,
+  collapsed,
+  className,
+  disableAutoscroll,
+  expandLink,
+  expandText = "Show more",
+  fade,
+  maxHeight,
+}: ReadMoreProps) {
+  const { prefix } = useSettings();
+  const [showMore, setShowMore] = useState(false);
+  const [innerHeight, setInnerHeight] = useState(0);
+  const readMoreRef = useRef<HTMLInputElement>(null);
+  const readMoreFakeRef = useRef<HTMLInputElement>(null);
+  const internalId = useId();
+
+  // Generate a unique ID for the content container
+  const contentId = `${internalId}-read-more-content`;
+
+  const handleToggleClick = (e) => {
+    e.preventDefault();
+    const innerHeight = readMoreRef?.current?.clientHeight;
+
+    if (!showMore && !disableAutoscroll)
+      setTimeout(() => {
+        if (readMoreFakeRef?.current)
+          readMoreFakeRef.current.scrollIntoView({
+            behavior: "smooth",
+            block: "end",
+          });
+      }, 50);
+
+    setShowMore(!showMore);
+    if (innerHeight) {
+      setInnerHeight(innerHeight);
+    }
+  };
+
+  const classes = classNames(className, {
+    [`${prefix}--read-more`]: true,
+    [`${prefix}--read-more--expanded`]: showMore,
+    [`${prefix}--read-more--fade`]: fade,
+    [`${prefix}--read-more--max-height`]: maxHeight,
+  });
+
+  const contentStyle = !maxHeight
+    ? {
+        undefined,
+      }
+    : maxHeight && !showMore
+    ? {
+        maxHeight: maxHeight,
+      }
+    : {
+        maxHeight: innerHeight + 20,
+      };
+
+  const collapseStyle = showMore
+    ? {
+        display: "none",
+      }
+    : {
+        display: "block",
+      };
+
+  return (
+    <div className={classes}>
+      <div
+        className={`${prefix}--read-more__content`}
+        style={contentStyle}
+        id={contentId}
+      >
+        <div
+          className={`${prefix}--read-more__fake-height`}
+          ref={readMoreFakeRef}
+          style={{ height: `${innerHeight + 30}px` }}
+        ></div>
+        <div ref={readMoreRef}>
+          {(showMore || !collapsed) && children}
+          {collapsed && <div style={collapseStyle}>{collapsed}</div>}
+        </div>
+      </div>
+      <MoreLink
+        handleToggleClick={handleToggleClick}
+        showMore={showMore}
+        link={showMore ? collapseLink : expandLink}
+        text={showMore ? collapseText : expandText}
+        contentId={contentId}
+      />
+    </div>
+  );
+}
+
+ReadMore.displayName = "ReadMore";
+
+export default ReadMore;

package/src/components/ReadMore/index.js

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