@progressiveui/react 2.0.3 → 2.0.4

package/src/components/Slider/Slider.tsx

@@ -1,242 +0,0 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
-import * as React from "react";
-import classNames from "classnames";
-import useSettings from "../../hooks/useSettings";
-import Input, { InputProps, useInput } from "../Input";
-import TextInput from "../TextInput";
-import { UseInputProps } from "../Input/useInput";
-
-/** Sliders provide a visual indication of adjustable content, where the user can move the handle along a horizontal track to increase or decrease the value. */
-interface SliderProps extends InputProps, React.ComponentPropsWithRef<"input"> {
-  /**
-   * Specify an optional className to be applied to the form-item node
-   */
-  formItemClassName?: string;
-  /**
-   * Specify if the control should be disabled, or not
-   */
-  disabled?: boolean;
-  /**
-   * Specify whether you want the underlying label to be visually hidden
-   */
-  hideLabel?: boolean;
-  /**
-   * The minimum value.
-   */
-  min: number;
-  /**
-   * The label associated with the minimum value.
-   */
-  minLabel?: string;
-  /**
-   * The maximum value.
-   */
-  max: number;
-  /**
-   * The label associated with the maximum value.
-   */
-  maxLabel?: string;
-  /**
-   * The callback to format the label associated with the minimum/maximum value.
-   */
-  formatLabel?: () => void;
-  /**
-   * The `name` attribute of the `<input>`.
-   */
-
-  name?: string;
-  /**
-   * The `type` attribute of the `<input>`.
-   */
-  inputType?: string;
-  /**
-   * The `ariaLabel` for the `<input>`.
-   */
-  ariaLabelInput?: string;
-  /**
-   * A value determining how much the value should increase/decrease by moving the thumb by mouse.
-   */
-  step?: number;
-  /**
-   * Specify the value of the input, if undefined or null the value is empty
-   */
-  value?: number | "";
-  /**
-   * `true` to hide the number input box.
-   */
-  hideTextInput?: boolean;
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  /**
-   * Use the width of the parent element
-   */
-  fullWidth?: boolean;
-  /**
-   * `true` to hide the controls on slider.
-   */
-  hideControls?: boolean;
-}
-
-const defaultFormatLabel = (value, label) => {
-  return typeof label === "function"
-    ? label(value)
-    : `${value}${label ? label : ""}`;
-};
-
-function calculatePercentage(value, min, max) {
-  // Ensure the values are in the correct range
-  if (max <= min) {
-    return;
-  }
-  if (value < min) value = min;
-  if (value > max) value = max;
-
-  // Calculate the percentage
-  return ((value - min) / (max - min)) * 100;
-}
-
-const Slider: React.FC<SliderProps> = React.forwardRef((props, ref) => {
-  const {
-    ariaLabelInput,
-    className,
-    disabled,
-    formatLabel = defaultFormatLabel,
-    fullWidth,
-    id,
-    inputType,
-    hideLabel,
-    hideControls,
-    hideTextInput,
-    min,
-    minLabel,
-    max,
-    maxLabel,
-    step = 1,
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    onChange = () => {},
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    //onClick = () => {},
-    helperText,
-    ...other
-  } = props;
-
-  const { prefix } = useSettings();
-
-  const initialValue = props.value;
-  const [value, setValue] = React.useState(initialValue);
-
-  React.useEffect(() => {
-    setValue(props.value);
-  }, [props.value]);
-
-  const newInputRef = React.useRef(null);
-  const _inputRef = ref ? ref : newInputRef;
-
-  const handleChange = (evt) => {
-    if (!disabled) {
-      evt.persist();
-      evt.imaginaryTarget = _inputRef;
-      if (evt.target.value > max) {
-        setValue(max);
-        onChange(/*max, */ evt);
-      } /* else if (evt.target.value < min) {
-        setValue(evt.target.value);
-        onChange(parseFloat(min), evt);
-      }*/ else {
-        setValue(evt.target.value);
-        onChange(/*parseFloat(evt.target.value), */ evt);
-      }
-    }
-  };
-
-  const numberInputClasses = classNames(
-    `${prefix}--slider--wrapper`,
-    className,
-    {
-      [`${prefix}--slider--helpertext`]: helperText,
-      [`${prefix}--slider--nolabel`]: hideLabel,
-      [`${prefix}--slider--nocontrols`]: hideControls,
-    }
-  );
-
-  const sliderContainerClasses = classNames(`${prefix}--slider-container`, {
-    [`${prefix}--slider-container--full-width`]: fullWidth,
-  });
-
-  const newProps = {
-    disabled,
-    id,
-    max,
-    min,
-    step,
-    onChange: handleChange,
-    value: value,
-  };
-
-  const inputClasses = classNames(
-    `${prefix}--input`,
-    `${prefix}--slider-text-input`
-  );
-
-  const sliderClasses = classNames(
-    `${prefix}--slider`,
-    { [`${prefix}--slider--disabled`]: disabled },
-    className
-  );
-
-  const sliderRangeWrapperClasses = classNames(
-    `${prefix}--slider__range-wrapper`,
-    { [`${prefix}--slider__range-wrapper--disabled`]: disabled },
-    className
-  );
-
-  const valueMinimal = value && value < min ? min : value;
-
-  const useInputProps = props as UseInputProps;
-  const input = useInput(useInputProps);
-
-  console.log("valueMinimal", valueMinimal);
-
-  return (
-    <Input {...input.wrapperProps} formItemClassName={numberInputClasses}>
-      <div className={sliderContainerClasses}>
-        <span className={`${prefix}--slider__range-label`}>
-          {formatLabel(min, minLabel)}
-        </span>
-
-        <div className={sliderRangeWrapperClasses}>
-          <div
-            className={`${prefix}--slider__range-before`}
-            style={{
-              width: `${calculatePercentage(valueMinimal, min, max)}%`,
-            }}
-          />
-          <input
-            className={sliderClasses}
-            type="range"
-            {...other}
-            {...newProps}
-            ref={_inputRef}
-          />
-        </div>
-        <span className={`${prefix}--slider__range-label`}>
-          {formatLabel(max, maxLabel)}
-        </span>
-        {!hideTextInput && (
-          <TextInput
-            disabled={disabled}
-            type={inputType}
-            id="input-for-slider"
-            className={inputClasses}
-            value={value}
-            onChange={handleChange}
-            aria-label={ariaLabelInput}
-          />
-        )}
-      </div>
-    </Input>
-  );
-});
-
-Slider.displayName = "Slider";
-
-export default Slider;

package/src/components/Slider/index.ts

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

package/src/components/StepNavigation/README.mdx

@@ -1,16 +0,0 @@
-## Usage
-
-Step by step navigation is a way of presenting end-to-end journeys and wizard forms.
-It groups existing guidance and transactions into a series of steps.
-
-A StepNavigation component is used to display content as a process with defined milestones.
-Following steps are separated and connected by buttons.
-
-It's mostly used when there is a variety of long registration forms, where you don't want to present all form fields on one page to scare the user.
-
-StepNavigation can be aligned vertically or horizontally.
-
-### When to use
-
-- Registration forms
-- Payment process

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

@@ -1,20 +0,0 @@
-import React from 'react';
-import StepNavigation from '../StepNavigation';
-import StepNavigationItem from '../StepNavigationItem';
-import { shallow } from 'enzyme';
-
-describe('Tabs', () => {
-  describe('renders as expected', () => {
-    describe('navigation (<nav>)', () => {
-      const wrapper = shallow(
-        <StepNavigation className="extra-class">
-          <StepNavigationItem label="Item without Status" page={0} />
-          <StepNavigationItem label="Item without Status" page={1} />
-        </StepNavigation>
-      );
-      it('renders extra classes on <div> via className prop', () => {
-        expect(wrapper.find('nav').hasClass('extra-class')).toBe(true);
-      });
-    });
-  });
-});

package/src/components/StepNavigation/StepNavigation.Skeleton.tsx

@@ -1,33 +0,0 @@
-import React from "react";
-import useSettings from "../../hooks/useSettings";
-
-const TabsSkeleton = () => {
-  const { prefix } = useSettings();
-  const tab = (
-    <li className={`${prefix}--tabs__nav-item`}>
-      <div className={`${prefix}--tabs__nav-link`}>&nbsp;</div>
-    </li>
-  );
-  return (
-    <nav className={`${prefix}--tabs ${prefix}--skeleton`}>
-      <div className={`${prefix}--tabs-trigger`}>
-        <div className={`${prefix}--tabs-trigger-text`}>&nbsp;</div>
-        <svg width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-          <path d="M10 0L5 5 0 0z" />
-        </svg>
-      </div>
-      <ul className={`${prefix}--tabs__nav ${prefix}--tabs__nav--hidden`}>
-        <li
-          className={`${prefix}--tabs__nav-item ${prefix}--tabs__nav-item--selected`}
-        >
-          <div className={`${prefix}--tabs__nav-link`}> &nbsp;</div>
-        </li>
-        {tab}
-        {tab}
-        {tab}
-      </ul>
-    </nav>
-  );
-};
-
-export default TabsSkeleton;

package/src/components/StepNavigation/StepNavigation.hbs

@@ -1,14 +0,0 @@
-<ul role="tablist" class="wfp--tabs__nav wfp--tabs__nav--hidden">
-	<li role="presentation" tabindex="-1" class="wfp--tabs__nav-item another-class">
-		<a class="wfp--tabs__nav-link" href="#" role="tab" tabindex="0" aria-selected="false">Tab label 1</a>
-	</li>
-	<li role="presentation" tabindex="-1" class="wfp--tabs__nav-item another-class">
-		<a class="wfp--tabs__nav-link" href="#" role="tab" tabindex="0" aria-selected="false">Tab label 2</a>
-	</li>
-	<li role="presentation" tabindex="-1" class="wfp--tabs__nav-item another-class">
-		<a class="wfp--tabs__nav-link" href="#" role="tab" tabindex="0" aria-selected="false">Tab label 3</a>
-	</li>
-	<li role="presentation" tabindex="-1" class="wfp--tabs__nav-item another-class">
-		<a class="wfp--tabs__nav-link" href="#" role="tab" tabindex="0" aria-selected="false">Tab label 4</a>
-	</li>
-</ul>

package/src/components/StepNavigation/StepNavigation.stories.tsx

@@ -1,131 +0,0 @@
-import React, { useState } from "react";
-import StepNavigation from "./StepNavigation";
-import StepNavigationItem from "../StepNavigationItem";
-
-export default {
-  title: "Components/Navigation/StepNavigation",
-  component: StepNavigation,
-  subcomponents: { StepNavigationItem },
-  parameters: {
-    componentSubtitle: "Component",
-    status: "released",
-  },
-};
-
-export const StepNavigationDefault: Story = {
-  render: (args) => (
-    <StepNavigation
-      {...args}
-      onSelectionChange={(e) => setStep(e)}
-      selectedPage={0}
-    >
-      <StepNavigationItem
-        label="Item without Status"
-        helperText="dbsajjh"
-        page={0}
-      />
-      <StepNavigationItem label="Active Item" page={1} />
-      <StepNavigationItem
-        label="Not started Item"
-        page={2}
-        status="not-started"
-      />
-    </StepNavigation>
-  ),
-  args: {
-    children: "StepNavigation",
-  },
-};
-
-export const DifferentStates = (args) => (
-  <StepNavigation {...args}>
-    <StepNavigationItem label="Item without Status" page={0} />
-    <StepNavigationItem label="Active Item" page={1} />
-    <StepNavigationItem
-      label="Not started Item"
-      page={2}
-      status="not-started"
-    />
-    <StepNavigationItem label="Warning Item" page={3} status="warning" />
-    <StepNavigationItem label="Complete Item" page={4} status="complete" />
-    <StepNavigationItem label="Skipped Item" page={4} status="skip" />
-    <StepNavigationItem label="Disabled Item" page={5} status="disabled" />
-    <StepNavigationItem label="Locked Item" page={6} status="locked" />
-  </StepNavigation>
-);
-
-DifferentStates.args = {};
-
-const description = `
-
-#### Default types of state
-
-| status   |  Description  |
-|----------|-------------|
-| \`warning\` | warning that there is information missing |
-| \`error\` | experimental   |
-| \`not-started\` | currently empty, because not yet started |
-| \`locked\` | can't be accessed at the moment |
-| \`skip\` | skipped step |
-| \`disabled\` | disabled step |
-| \`complete\` | completed step |
-`;
-
-DifferentStates.story = {
-  parameters: {
-    docs: {
-      storyDescription: description,
-    },
-  },
-};
-
-export const Vertical = (args) => (
-  <StepNavigation {...args}>
-    <StepNavigationItem label="Item without Status" page={0} />
-    <StepNavigationItem label="Active Item" page={1} />
-    <StepNavigationItem
-      label="Not started Item"
-      page={2}
-      status="not-started"
-    />
-    <StepNavigationItem label="Warning Item" page={3} status="warning" />
-    <StepNavigationItem label="Complete Item" page={4} status="complete" />
-  </StepNavigation>
-);
-
-Vertical.args = { vertical: true };
-
-Vertical.story = {
-  parameters: {
-    docs: {
-      storyDescription: ``,
-    },
-  },
-};
-
-export const Small = (args) => (
-  <StepNavigation {...args}>
-    <StepNavigationItem label="Item without Status" page={0} />
-    <StepNavigationItem label="Active Item" page={1} />
-    <StepNavigationItem
-      label="Not started Item"
-      page={2}
-      status="not-started"
-    />
-    <StepNavigationItem label="Warning Item" page={3} status="warning" />
-    <StepNavigationItem label="Complete Item" page={4} status="complete" />
-    <StepNavigationItem label="Skipped Item" page={4} status="skip" />
-    <StepNavigationItem label="Disabled Item" page={5} status="disabled" />
-    <StepNavigationItem label="Locked Item" page={6} status="locked" />
-  </StepNavigation>
-);
-
-Small.args = { vertical: true, small: true };
-
-Small.story = {
-  parameters: {
-    docs: {
-      storyDescription: `The \`small\` StepNavigation can be used in places the space is limited and the component is not used for navigation. Use it to indicate the progress of a flow.`,
-    },
-  },
-};

package/src/components/StepNavigation/StepNavigation.tsx

@@ -1,159 +0,0 @@
-import React, { useState /*createRef */ } from "react";
-import classNames from "classnames";
-
-import useSettings from "../../hooks/useSettings";
-
-/** Step Navigation provide indications to help users reach their destination from their current position */
-interface StepNavigationProps {
-  /**
-   * Provide the contents of your StepNavigation
-   */
-  children: React.ReactNode;
-  /**
-   * Provide a className that is applied to the root <nav> component for the
-   * <Tabs>
-   */
-  className?: string;
-  /**
-   * Specify whether the StepNavigation will be displayed small
-   */
-  small?: boolean;
-  /**
-   * Specify whether the StepNavigation will be displayed vertically
-   */
-  vertical?: boolean;
-  /**
-   * Specify whether the StepNavigation will be displayed inline
-   */
-  inline?: boolean;
-  /**
-   * By default, this value is "navigation". You can also provide an alternate
-   * role if it makes sense from the accessibility-side
-   */
-  role: string;
-  /**
-   * Provide an optional handler that is called whenever the selection
-   * changes. This method is called with the index of the tab that was
-   * selected
-   */
-  onSelectionChange?: React.SetStateAction<number>;
-  /**
-   * Optionally provide an index for the currently selected <Tab>
-   */
-  selectedPage?: number;
-}
-
-function StepNavigation({
-  inline,
-  small,
-  vertical,
-  className,
-  role,
-  children,
-}: //selectedPage,
-// onSelectionChange,
-StepNavigationProps) {
-  const { prefix } = useSettings();
-  const [dropdownHidden] = useState(true);
-  // const [elRefs, setElRefs] = useState({});
-
-  /*const getTabAt = (index) => {
-    return elRefs[`tab${index}`] || React.Children.toArray(children)[index];
-  };
-*/
-  const getTabs = () => {
-    return React.Children.map(children, (tab) => tab);
-  };
-
-  //const arrLength = getTabs()?.length;
-
-  /* React.useEffect(() => {
-    // add or remove refs
-    setElRefs((elRefs) =>
-      Array(arrLength).map((_, i) => elRefs[i] || createRef())
-    );
-  }, [arrLength]);*/
-
-  // const setTabAt = (index, tabRef) => {
-  //   //setElRefs({ ...elRefs, [`tab${index}`]: tabRef });
-  // };
-
-  const handleTabClick = (onSelectionChange) => {
-    return (index, label, evt) => {
-      evt.preventDefault();
-      selectTabAt(index, onSelectionChange);
-    };
-  };
-
-  /*const handleTabAnchorFocus = (onSelectionChange) => {
-    return (index) => {
-      const tabCount = React.Children.count(children) - 1;
-      let tabIndex = index;
-
-      if (index < 0) {
-        tabIndex = tabCount;
-      } else if (index > tabCount) {
-        tabIndex = 0;
-      }
-
-      const tab = getTabAt(tabIndex);
-
-      if (tab) {
-        selectTabAt(tabIndex, onSelectionChange);
-        if (tab.tabAnchor) {
-          tab.tabAnchor.focus();
-        }
-      }
-    };
-  };
-*/
-  // const handleDropdownClick = () => {
-  //   setDropdownHidden(!dropdownHidden);
-  // };
-
-  const selectTabAt = (index, onSelectionChange) => {
-    handleTabClick(index);
-    if (typeof onSelectionChange === "function") {
-      onSelectionChange(index);
-    }
-  };
-
-  const tabsWithProps = getTabs(); /* TODO: Use hook ?.map(
-    (tab: React.ReactElement<any>, index: number) => {
-      const newTab = React.cloneElement(tab as React.ReactElement<any>, {
-        index,
-        selectedPage: selectedPage,
-        handleTabClick: handleTabClick(onSelectionChange),
-        handleTabAnchorFocus: handleTabAnchorFocus(onSelectionChange),
-        ref: elRefs[index],
-      });
-
-      return newTab;
-    }
-  );*/
-
-  const classes = {
-    tabs: classNames(className, {
-      [`${prefix}--step-navigation`]: true,
-      [`${prefix}--step-navigation--vertical`]: vertical,
-      [`${prefix}--step-navigation--small`]: small,
-      [`${prefix}--step-navigation--regular`]: !small,
-    }),
-    tablist: classNames(`${prefix}--step-navigation__nav`, {
-      [`${prefix}--step-navigation__nav--hidden`]: dropdownHidden,
-      [`${prefix}--step-navigation__nav--inline`]: inline,
-    }),
-  };
-
-  return (
-    <>
-      <nav className={classes.tabs} role={role}>
-        <ul role="tablist" className={classes.tablist}>
-          {tabsWithProps}
-        </ul>
-      </nav>
-    </>
-  );
-}
-
-export default StepNavigation;

package/src/components/StepNavigation/index.ts

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

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

@@ -1,24 +0,0 @@
-import React from 'react';
-import StepNavigationItem from '../StepNavigationItem';
-import { shallow } from 'enzyme';
-
-describe('StepNavigationItem', () => {
-
-  describe('renders as expected', () => {
-    const wrapper = shallow(<StepNavigationItem status="locked"/>);
-    it('renders <li> length as exected', () => {
-      expect(wrapper.find('li')).toHaveLength(1);
-    })
-
-     it('renders <li> with expected className', () => {
-      expect(wrapper.hasClass('wfp--step-navigation__nav-item')).toEqual(true);
-    });
-
-    it('Should always render with [role="presentation"] by default', () => {
-      expect(wrapper.props().role).toEqual('presentation');
-    });
-  });
-
-  
-
-});