@progressiveui/react 1.22.0

package/src/components/Slider/Slider.tsx

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

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

package/src/components/StepNavigation/README.mdx

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

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

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

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

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

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

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

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

@@ -0,0 +1,24 @@
+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');
+    });
+  });
+
+  
+
+});