@progressiveui/react 2.0.3 → 2.0.4

package/src/components/RadioButton/index.ts

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

package/src/components/RadioButtonGroup/README.md

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

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

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

@@ -1,44 +0,0 @@
-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/ReactSelect/README.mdx

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

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

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

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

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

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