@onewelcome/react-lib-components 4.1.1 → 4.3.0

package/src/components/Form/Wrapper/SelectWrapper/SelectWrapper.test.tsx

@@ -23,6 +23,7 @@ import userEvent from "@testing-library/user-event";
 const onChangeHandler = jest.fn();
 
 const defaultParams: Props = {
+  success: false,
   children: [
     <Option key="1" value="option1">
       Option 1

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

@@ -31,6 +31,7 @@ export interface Props
   error?: boolean;
   selectProps?: PartialSelectProps;
   onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+  success?: boolean;
 }
 
 const SelectWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (

package/src/components/Form/Wrapper/TextareaWrapper/TextareaWrapper.test.tsx

@@ -20,6 +20,7 @@ import { render } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 const defaultParams: Props = {
+  success: false,
   name: "textarea",
   label: "textarea_label",
   value: "value",

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

@@ -34,13 +34,13 @@ export interface Props
   onBlur?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
   onMouseEnter?: (event: React.MouseEvent<HTMLTextAreaElement>) => void;
   onMouseLeave?: (event: React.MouseEvent<HTMLTextAreaElement>) => void;
+  success?: boolean;
 }
 
 const TextareaWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   {
     name,
     error,
-    success,
     value,
     label,
     placeholder,
@@ -52,6 +52,7 @@ const TextareaWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props>
     onMouseEnter,
     onMouseLeave,
     disabled,
+    success,
     ...rest
   }: Props,
   ref

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

@@ -33,7 +33,7 @@ export interface Props extends ComponentPropsWithRef<"div">, FormGroupProps {
 }
 
 /** For components that extend this component we create an interface (InputWrapper, SelectWrapper, etc.) */
-export interface WrapperProps extends FormElement {
+export interface WrapperProps extends Omit<FormElement, "success"> {
   errorMessage?: string;
   helperText?: string;
   helperProps?: HelperProps;

package/src/components/Notifications/BaseModal/BaseModal.module.scss

@@ -15,13 +15,13 @@
  */
 
 @use "../../../mixins.module.scss";
+@use "../../../variables.scss";
 
-$zIndex: 10;
 $marginTop: 3.125rem;
 
 .modal {
   position: fixed;
-  z-index: $zIndex;
+  z-index: variables.$modal-z-index;
   top: 0;
   left: 0;
   height: 100vh;
@@ -57,7 +57,7 @@ $marginTop: 3.125rem;
 .container {
   margin-top: $marginTop;
   background-color: var(--modal-background-color);
-  z-index: $zIndex + 1;
+  z-index: variables.$modal-z-index + 1;
   width: calc(100% - 2rem);
   height: auto;
   max-height: calc(90% - $marginTop);

package/src/components/Notifications/NotificationProvider/NotificationContext.test.tsx

@@ -31,6 +31,75 @@ jest.mock("../../../util/helper", () => ({
   })
 }));
 
+const renderSnackbarProvider = () => {
+  const AppComponent = () => {
+    const { addNotification } = useNotificationContext();
+    const [index, setIndex] = useState(0);
+    return (
+      <div>
+        content
+        <button
+          data-testid="show-success"
+          onClick={() => {
+            addNotification({
+              status: 200,
+              type: "success",
+              title: "Test Success",
+              message: "Test successful request"
+            });
+            setIndex(index + 1);
+          }}
+        >
+          Success
+        </button>
+        <button
+          data-testid="show-error"
+          onClick={() => {
+            addNotification({
+              status: 400,
+              type: "error",
+              title: "TestError",
+              message: "Test bad request"
+            });
+            setIndex(index + 1);
+          }}
+        >
+          Error
+        </button>
+      </div>
+    );
+  };
+
+  const queries = render(
+    <SnackbarProvider closeButtonTitle="close">
+      <NotificationProvider>
+        <AppComponent />
+      </NotificationProvider>
+    </SnackbarProvider>
+  );
+
+  const showSuccessSnackbarBtn = getByTestId(queries.container, "show-success");
+  const showErrorSnackbarBtn = getByTestId(queries.container, "show-error");
+
+  return {
+    ...queries,
+    showSuccessSnackbarBtn,
+    showErrorSnackbarBtn
+  };
+};
+
+describe("Actually shows the snackbars showing up", () => {
+  it("Shows the snackbars", async () => {
+    const { showSuccessSnackbarBtn, showErrorSnackbarBtn, getByText } = renderSnackbarProvider();
+
+    await userEvent.click(showSuccessSnackbarBtn);
+    await userEvent.click(showErrorSnackbarBtn);
+
+    await waitFor(() => expect(getByText("Test Success")).toBeInTheDocument());
+    await waitFor(() => expect(getByText("Test bad request")).toBeInTheDocument());
+  });
+});
+
 describe("Notification", () => {
   describe("useNotificationContext", () => {
     it("returns the correct context", () => {
@@ -378,72 +447,3 @@ describe("Notification", () => {
     });
   });
 });
-
-const renderSnackbarProvider = () => {
-  const AppComponent = () => {
-    const { addNotification } = useNotificationContext();
-    const [index, setIndex] = useState(0);
-    return (
-      <div>
-        content
-        <button
-          data-testid="show-success"
-          onClick={() => {
-            addNotification({
-              status: 200,
-              type: "success",
-              title: "Test Success",
-              message: "Test successful request"
-            });
-            setIndex(index + 1);
-          }}
-        >
-          Success
-        </button>
-        <button
-          data-testid="show-error"
-          onClick={() => {
-            addNotification({
-              status: 400,
-              type: "error",
-              title: "TestError",
-              message: "Test bad request"
-            });
-            setIndex(index + 1);
-          }}
-        >
-          Error
-        </button>
-      </div>
-    );
-  };
-
-  const queries = render(
-    <SnackbarProvider closeButtonTitle="close">
-      <NotificationProvider>
-        <AppComponent />
-      </NotificationProvider>
-    </SnackbarProvider>
-  );
-
-  const showSuccessSnackbarBtn = getByTestId(queries.container, "show-success");
-  const showErrorSnackbarBtn = getByTestId(queries.container, "show-error");
-
-  return {
-    ...queries,
-    showSuccessSnackbarBtn,
-    showErrorSnackbarBtn
-  };
-};
-
-describe("Actually shows the snackbars showing up", () => {
-  it("Shows the snackbars", async () => {
-    const { showSuccessSnackbarBtn, showErrorSnackbarBtn, getByText } = renderSnackbarProvider();
-
-    await userEvent.click(showSuccessSnackbarBtn);
-    await userEvent.click(showErrorSnackbarBtn);
-
-    await waitFor(() => expect(getByText("Test Success")).toBeInTheDocument());
-    await waitFor(() => expect(getByText("Test bad request")).toBeInTheDocument());
-  });
-});

package/src/components/Notifications/Snackbar/SnackbarContainer/SnackbarContainer.module.scss

@@ -14,10 +14,11 @@
  *    limitations under the License.
  */
 @use "../../../../mixins.module.scss";
+@use "../../../../variables.scss";
 
 .snackbars {
   position: fixed;
-  z-index: 20;
+  z-index: variables.$snackbar-z-index;
   width: 100%;
   display: flex;
   flex-direction: column;

package/src/components/Notifications/Snackbar/SnackbarItem/SnackbarItem.module.scss

@@ -14,7 +14,6 @@
  *    limitations under the License.
  */
 
-@use "../../../../readyclasses.module.scss";
 @use "../../../../mixins.module.scss";
 
 .snackbar {
@@ -143,7 +142,7 @@
       cursor: not-allowed;
     }
 
-    @include readyclasses.focusOutline(var(--snackbar-text-color));
+    @include mixins.focusVisibleOutline();
 
     &:not(:disabled):hover,
     &:not(:disabled):focus {

package/src/components/Popover/Popover.module.scss

@@ -15,16 +15,20 @@
  */
 
 @use "../../mixins.module.scss";
+@use "../../variables.scss";
 
 .popover {
   $transition-property: transform, opacity;
 
   position: fixed;
-  z-index: 100;
+  z-index: variables.$popover-z-index;
   pointer-events: none;
   background-color: var(--light);
-  border-radius: 8px;
-  box-shadow: 0 30px 50px rgba(0, 0, 0, 0.29);
+  border-radius: 0.125rem;
+  box-shadow:
+    0px 4px 5px 0px rgba(1, 5, 50, 0.2),
+    0px 3px 14px 0px rgba(1, 5, 50, 0.12),
+    0px 8px 10px 0px rgba(1, 5, 50, 0.14);
   opacity: 0;
   transform: scale(0.5);
 

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;
+  }
+}