@onewelcome/react-lib-components 4.2.0 → 5.0.0

package/src/components/Form/Fieldset/Fieldset.tsx

@@ -41,7 +41,6 @@ export interface Props extends ComponentPropsWithRef<"fieldset"> {
   noPadding?: boolean;
   noBackground?: boolean;
   required?: boolean;
-  error?: boolean;
   disablePropagation?: boolean;
 }
 
@@ -57,7 +56,6 @@ const FieldsetComponent: ForwardRefRenderFunction<HTMLFieldSetElement, Props> =
     noPadding = false,
     disabled = false,
     required = false,
-    error = false,
     disablePropagation = false,
     ...rest
   }: Props,
@@ -68,10 +66,10 @@ const FieldsetComponent: ForwardRefRenderFunction<HTMLFieldSetElement, Props> =
       return;
     }
 
-    /* All right, so the issue is that whenever we try to add disabled and error to a component that doesn't accept it,
-    React will throw an error. However, it might occur that we want a component inside of Fieldset because of aesthetic purposes
-    (fieldset applies a sort of container with white background and if we want to display it inside of this container... then yea).
-    So instead we supply an array of components that we want to add the disabled and error prop to and check if child.type equals one of these. */
+    /* All right, so the issue is that whenever we try to add disabled prop to a component that doesn't accept it,
+        React will throw an error. However, it might occur that we want a component inside Fieldset because of aesthetic purposes
+        (fieldset applies a sort of container with white background and if we want to display it inside of this container... then yea).
+        So instead we supply an array of components that we want to add the disabled prop to and check if child.type equals one of these. */
     const allowedComponents: React.ComponentPropsWithRef<any>[] = [
       Input,
       Select,
@@ -91,8 +89,7 @@ const FieldsetComponent: ForwardRefRenderFunction<HTMLFieldSetElement, Props> =
     return React.Children.map(children, (child: ReactElement) => {
       if (allowedComponents.includes(child.type) && !disablePropagation) {
         return React.cloneElement(child, {
-          disabled: child.props.disabled ?? disabled,
-          error: child.props.error ?? error
+          disabled: child.props.disabled ?? disabled
         });
       }
 
@@ -114,9 +111,7 @@ const FieldsetComponent: ForwardRefRenderFunction<HTMLFieldSetElement, Props> =
           variant={legendStyle}
           tag="span"
           aria-hidden="true"
-          className={`${classes["legend"]} ${required ? classes["required"] : ""} ${
-            error ? classes["error"] : ""
-          }`}
+          className={`${classes["legend"]} ${required ? classes["required"] : ""}`}
         >
           {legend}
         </Typography>

package/src/components/Form/FormControl/FormControl.tsx

@@ -21,12 +21,11 @@ export interface Props extends ComponentPropsWithRef<"div"> {
   children?: ReactElement | ReactElement[] | null;
   grid?: 1 | 2 | 3;
   align?: "top" | "start" | "middle" | "center" | "bottom" | "end" | "stretch";
-  error?: boolean;
   disabled?: boolean;
 }
 
 const FormControlComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  { children, disabled, error, className, grid, align = "center", ...rest }: Props,
+  { children, disabled, className, grid, align = "center", ...rest }: Props,
   ref
 ) => {
   const renderChildren = () =>
@@ -36,8 +35,7 @@ const FormControlComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
       }
 
       const childElement = React.cloneElement(child, {
-        disabled: child.props.disabled !== undefined ? child.props.disabled : disabled,
-        error: child.props.error !== undefined ? child.props.error : error
+        disabled: child.props.disabled !== undefined ? child.props.disabled : disabled
       });
 
       if (grid && grid > 1) {

package/src/components/Form/Wrapper/CheckboxWrapper/CheckboxWrapper.tsx

@@ -57,7 +57,7 @@ const CheckboxWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props>
     );
 
   return (
-    <Fieldset {...fieldsetProps} error={error} required={rest.required}>
+    <Fieldset {...fieldsetProps} required={rest.required}>
       <Wrapper
         {...rest}
         ref={ref}

package/src/components/Form/Wrapper/RadioWrapper/RadioWrapper.tsx

@@ -72,7 +72,7 @@ const RadioWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     );
 
   return (
-    <Fieldset {...fieldsetProps} error={error} disabled={disabled}>
+    <Fieldset {...fieldsetProps} disabled={disabled}>
       <Wrapper
         {...rest}
         ref={ref}

package/src/components/Stepper/Step.module.scss

@@ -0,0 +1,231 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+@use "../../mixins.module.scss";
+
+@mixin stepState($status: "waiting") {
+  & .step-content .step {
+    color: var(--stepper-default-text-color);
+
+    @if $status == "current" {
+      background-color: var(--stepper-current-color);
+      border-color: var(--stepper-current-color);
+    } @else if $status == "done" {
+      background-color: var(--stepper-done-color);
+      border-color: var(--stepper-done-color);
+    } @else if $status == "error" {
+      background-color: var(--stepper-error-color);
+      border-color: var(--stepper-error-color);
+    } @else if $status == "waiting" {
+      color: var(--stepper-waiting-color);
+    }
+  }
+
+  &:not(:last-child)::after {
+    @if $status == "current" or $status == "error" {
+      border-color: var(--stepper-line-color);
+    } @else if $status == "done" {
+      border-color: var(--stepper-line-bold-color);
+    }
+  }
+
+  &:hover {
+    & .step-content .step {
+      @if $status == "current" {
+        border-color: var(--stepper-current-hover-color);
+        background-color: var(--stepper-current-hover-color);
+      } @else if $status == "done" {
+        border-color: var(--stepper-done-hover-color);
+        background-color: var(--stepper-done-hover-color);
+      } @else if $status == "error" {
+        border-color: var(--stepper-error-hover-color);
+        background-color: var(--stepper-error-hover-color);
+      } @else if $status == "waiting" {
+        border: 2px solid var(--stepper-waiting-hover-color);
+        color: var(--stepper-waiting-hover-color);
+      }
+    }
+  }
+
+  &:active {
+    & .step-content .step {
+      @if $status == "current" {
+        border-color: var(--stepper-current-active-color);
+        background-color: var(--stepper-current-active-color);
+      } @else if $status == "done" {
+        border-color: var(--stepper-done-active-color);
+        background-color: var(--stepper-done-active-color);
+      } @else if $status == "error" {
+        border-color: var(--stepper-error-active-color);
+        background-color: var(--stepper-error-active-color);
+      } @else if $status == "waiting" {
+        border: 2px solid var(--stepper-waiting-active-color);
+        color: var(--stepper-waiting-active-color);
+      }
+    }
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+
+    & .step-content .step {
+      @if $status == "current" {
+        border-color: var(--stepper-current-disabled-color);
+        background-color: var(--stepper-current-disabled-color);
+      } @else if $status == "done" {
+        border-color: var(--stepper-done-disabled-color);
+        background-color: var(--stepper-done-disabled-color);
+      } @else if $status == "error" {
+        border-color: var(--stepper-error-disabled-color);
+        background-color: var(--stepper-error-disabled-color);
+      } @else if $status == "waiting" {
+        border: 2px solid var(--stepper-waiting-disabled-color);
+        color: var(--stepper-waiting-disabled-color);
+      }
+    }
+
+    & .step-content .label {
+      color: var(--stepper-label-disabled-color);
+
+      & .caption {
+        color: if(
+          $status == "error",
+          var(--stepper-caption-error-disabled-color),
+          var(--stepper-caption-disabled-color)
+        );
+      }
+    }
+    &:not(:last-child)::after {
+      border-color: if(
+        $status == "done",
+        var(--stepper-line-bold-disabled-color),
+        var(--stepper-line-disabled-color)
+      );
+    }
+  }
+}
+
+.step-wrapper {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  background-color: transparent;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+
+  @include mixins.focusVisibleOutline($outlineOffset: 0px);
+
+  .step-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &:last-child {
+    flex-grow: 0;
+    flex-basis: fit-content;
+  }
+
+  &:not(:last-child)::after {
+    content: "";
+    margin: 0 0.5rem;
+    flex-grow: 1;
+    min-width: 0.5rem;
+    border-bottom: 2px solid var(--stepper-line-color);
+  }
+
+  &.vertical {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+
+    &:last-child {
+      flex-grow: 0;
+      flex-basis: fit-content;
+    }
+
+    &:not(:last-child)::after {
+      content: "";
+      border-bottom: none;
+      margin: 0.5rem 0 0.5rem 1.6875rem;
+      border-left: 2px solid var(--stepper-line-color);
+      min-height: 0.5rem;
+      height: 100%;
+      width: 100%;
+    }
+  }
+
+  &.waiting {
+    @include stepState($status: "waiting");
+  }
+
+  &.current {
+    @include stepState($status: "current");
+
+    & .step-content .label {
+      font-weight: 700;
+      & .caption {
+        font-weight: 400;
+      }
+    }
+  }
+
+  &.done {
+    @include stepState($status: "done");
+  }
+
+  &.error {
+    @include stepState($status: "error");
+
+    & .step-content .label .caption {
+      color: var(--stepper-caption-error-color);
+    }
+  }
+}
+
+.step {
+  flex-shrink: 0;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border: 2px solid var(--stepper-waiting-color);
+  border-radius: 50%;
+  font-size: var(--font-size-form-label);
+  font-family: var(--font-family);
+  font-weight: 700;
+}
+
+.label {
+  flex-shrink: 0;
+  position: relative;
+  margin-left: 0.5rem;
+  color: var(--stepper-label-color);
+}
+
+.caption {
+  position: absolute;
+  top: 1.25rem;
+  left: 0;
+  color: var(--stepper-caption-color);
+  font-size: 0.75rem;
+}

package/src/components/Stepper/Step.tsx

@@ -0,0 +1,112 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React, {
+  ComponentPropsWithRef,
+  ForwardRefRenderFunction,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+import { Icon, Icons } from "../Icon/Icon";
+import classes from "./Step.module.scss";
+
+export type StepStatus = "waiting" | "current" | "done" | "error";
+
+export interface Props extends ComponentPropsWithRef<"button"> {
+  status: StepStatus;
+  label: string;
+  caption?: string;
+  index?: number;
+  lastStep?: boolean;
+  disabled?: boolean;
+  direction?: "horizontal" | "vertical";
+}
+
+const getStepContent = (index: number, status: StepStatus) => {
+  switch (status) {
+    case "waiting":
+      return String(index + 1);
+    case "current":
+      return String(index + 1);
+    case "done":
+      return <Icon icon={Icons.Checkmark} />;
+    case "error":
+      return "!";
+  }
+};
+
+export const StepComponent: ForwardRefRenderFunction<HTMLButtonElement, Props> = (
+  { label, caption, status, index, direction, disabled, lastStep, ...rest }: Props,
+  ref
+) => {
+  const stepIndex = index ?? 0;
+  const additionalClasses = [classes[status]];
+  const [stepContentHeight, setStepContentHeight] = useState<number>(28);
+  const [stepContentWidth, setStepContentWidth] = useState<number>(28);
+  direction === "vertical" && additionalClasses.push(classes["vertical"]);
+
+  const captionRef = useRef<HTMLSpanElement>(null);
+  const labelRef = useRef<HTMLSpanElement>(null);
+  const stepContentRef = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {
+    if (captionRef.current && stepContentRef.current && labelRef.current && lastStep) {
+      if (direction == "vertical") {
+        const capionHeight = captionRef.current.getBoundingClientRect().height;
+        const stepContentHeight = stepContentRef.current.getBoundingClientRect().height;
+        setStepContentHeight(capionHeight + stepContentHeight);
+      }
+
+      if (direction == "horizontal") {
+        const captionWidth = captionRef.current.getBoundingClientRect().width;
+        const labelWidth = labelRef.current.getBoundingClientRect().width;
+        setStepContentWidth(captionWidth > labelWidth ? captionWidth + 36 : labelWidth + 36);
+      }
+    }
+  }, []);
+
+  return (
+    <button
+      {...rest}
+      ref={ref}
+      disabled={disabled}
+      aria-current={status === "current" ? "step" : undefined}
+      className={`${classes["step-wrapper"]} ${additionalClasses.join(" ")}`}
+    >
+      <div
+        style={{
+          height: lastStep && direction == "vertical" ? `${stepContentHeight}px` : "auto",
+          width: lastStep && direction == "horizontal" ? `${stepContentWidth}px` : "auto"
+        }}
+      >
+        <div ref={stepContentRef} className={classes["step-content"]}>
+          <div aria-hidden className={classes["step"]}>
+            {getStepContent(stepIndex, status)}
+          </div>
+          <span ref={labelRef} className={classes["label"]}>
+            {label}
+            <span ref={captionRef} className={classes["caption"]}>
+              {caption}
+            </span>
+          </span>
+        </div>
+      </div>
+    </button>
+  );
+};
+
+export const Step = React.forwardRef(StepComponent);

package/src/components/Stepper/Stepper.module.scss

@@ -0,0 +1,13 @@
+.stepper {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &.vertical {
+    flex-direction: column;
+    justify-content: flex-start;
+    height: 100%;
+    width: auto;
+  }
+}

package/src/components/Stepper/Stepper.test.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import { Stepper, Props } from "./Stepper";
+import { render } from "@testing-library/react";
+
+const defaultParams: Props = {
+  steps: [],
+  direction: "horizontal"
+};
+
+const createStepper = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(<Stepper {...parameters} data-testid="Stepper" />);
+  const StepperComponent = queries.getByTestId("Stepper");
+
+  return {
+    ...queries,
+    StepperComponent
+  };
+};
+
+describe("<Stepper/> should render", () => {
+  it("should render without crashing", () => {
+    const { StepperComponent } = createStepper();
+
+    expect(StepperComponent).toBeDefined();
+  });
+
+  it("should render given steps", () => {
+    const { StepperComponent, getAllByText } = createStepper(params => ({
+      ...params,
+      steps: [
+        {
+          label: "Step 1",
+          status: "waiting",
+          caption: "Caption"
+        },
+        {
+          label: "Step 2",
+          status: "current",
+          caption: "Caption"
+        },
+        {
+          label: "Step 3",
+          status: "done",
+          caption: "Caption"
+        },
+        {
+          label: "Step 4",
+          status: "error",
+          caption: "Caption"
+        }
+      ]
+    }));
+
+    expect(StepperComponent).toBeDefined();
+
+    expect(getAllByText(/Step/i)).toHaveLength(4);
+    expect(getAllByText(/Caption/i)).toHaveLength(4);
+  });
+
+  it("should render the horizontal stepper", () => {
+    const { StepperComponent, getAllByText } = createStepper(params => ({
+      ...params,
+      direction: "horizontal"
+    }));
+
+    expect(StepperComponent).toBeDefined();
+    expect(StepperComponent.classList.contains("horizontal")).toBe(true);
+  });
+
+  it("should render the vertical stepper", () => {
+    const { StepperComponent } = createStepper(params => ({
+      ...params,
+      direction: "vertical"
+    }));
+
+    expect(StepperComponent).toBeDefined();
+    expect(StepperComponent.classList.contains("vertical")).toBe(true);
+  });
+});

package/src/components/Stepper/Stepper.tsx

@@ -0,0 +1,45 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React, { ComponentPropsWithRef } from "react";
+import { Step, Props as StepProps } from "./Step";
+import classes from "./Stepper.module.scss";
+
+export interface Props extends ComponentPropsWithRef<"div"> {
+  steps: StepProps[];
+  direction: "horizontal" | "vertical";
+}
+
+export const Stepper = ({ steps, direction = "horizontal", ...rest }: Props) => {
+  return (
+    <div
+      {...rest}
+      className={`${classes["stepper"]} ${
+        direction === "horizontal" ? classes["horizontal"] : classes["vertical"]
+      }`}
+    >
+      {steps.map((step, index) => (
+        <Step
+          {...step}
+          key={step.label.toLowerCase().replace(/\s/, "-")}
+          index={index}
+          direction={direction}
+          lastStep={index + 1 === steps.length}
+        />
+      ))}
+    </div>
+  );
+};