@onewelcome/react-lib-components 1.9.2 → 2.0.0-alpha.1

package/src/components/Typography/Typography.tsx

@@ -0,0 +1,109 @@
+/*
+ * 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, { ForwardRefRenderFunction, ComponentPropsWithRef, ReactNode } from "react";
+import classes from "./Typography.module.scss";
+import { Spacing, useSpacing } from "../../hooks/useSpacing";
+
+export const validVariants = [
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "body",
+  "body-bold",
+  "sub-text",
+  "code"
+] as const;
+export type Variant = (typeof validVariants)[number];
+
+type Tags =
+  | "h1"
+  | "h2"
+  | "h3"
+  | "h4"
+  | "p"
+  | "div"
+  | "code"
+  | "span"
+  | "sup"
+  | "sub"
+  | "strong"
+  | "em"
+  | "small"
+  | "mark"
+  | "del"
+  | "ins"
+  | "blockquote";
+
+export interface Props extends ComponentPropsWithRef<any> {
+  children: ReactNode;
+  variant: Variant;
+  tag?: Tags;
+  spacing?: Spacing;
+}
+
+const TypographyComponent: ForwardRefRenderFunction<any, Props> = (
+  { children, variant, tag, style, spacing, className = "", ...rest }: Props,
+  ref
+) => {
+  if (!validVariants.includes(variant)) {
+    throw new Error(
+      `You entered an invalid variant. You can choose from: ${validVariants}, you entered: ${variant}`
+    );
+  }
+
+  const styleWithSpacing = useSpacing(spacing, style);
+
+  if (!tag) {
+    switch (variant) {
+      case "h1":
+      case "h2":
+      case "h3":
+      case "h4":
+      case "code":
+        tag = variant;
+        break;
+      case "body":
+        tag = "p";
+        break;
+      case "body-bold":
+        tag = "p";
+        break;
+      case "sub-text":
+        tag = "span";
+        break;
+      default:
+        tag = "div";
+        break;
+    }
+  }
+
+  let TagName = tag;
+
+  return (
+    <TagName
+      {...rest}
+      ref={ref}
+      style={styleWithSpacing}
+      className={`${classes["typography_style_" + variant]} ${className}`}
+    >
+      {children}
+    </TagName>
+  );
+};
+
+export const Typography = React.forwardRef(TypographyComponent);

package/src/components/Wizard/BaseWizardSteps/BaseWizardSteps.module.scss

@@ -0,0 +1,214 @@
+/*!
+ * 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.
+ */
+
+@mixin clickable-element {
+  &:enabled:hover,
+  &:focus,
+  &:enabled:active {
+    cursor: pointer;
+
+    .number-wrapper {
+      .number {
+        background-color: var(--color-primary);
+        color: var(--light);
+      }
+    }
+
+    .label {
+      text-decoration: underline;
+    }
+  }
+
+  &:enabled:active {
+    .number-wrapper {
+      .number {
+        border: none;
+        margin: 2px;
+      }
+    }
+  }
+}
+
+@mixin disabled-element {
+  &:disabled {
+    .number-wrapper {
+      .number {
+        border: 2px solid var(--disabled);
+        color: var(--disabled);
+      }
+    }
+
+    .label {
+      color: var(--greyed-out);
+    }
+  }
+}
+
+.wizard {
+  padding: 1rem;
+  display: flex;
+}
+
+.wizard-element {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  background-color: transparent;
+  border: 0;
+  align-items: stretch;
+  padding: 0;
+  margin: 0;
+
+  &:focus-visible {
+    outline: 1px dashed var(--color-primary);
+    outline-offset: 1px;
+  }
+
+  // Completed/finished state
+  &.finished {
+    .number-wrapper {
+      .number {
+        border: 2px solid var(--color-primary);
+        color: var(--color-primary);
+        font-weight: normal;
+      }
+
+      &:before,
+      &:after {
+        border-bottom: 2px solid var(--color-primary);
+      }
+    }
+
+    .label {
+      color: var(--color-primary);
+    }
+    @include disabled-element;
+    @include clickable-element;
+  }
+
+  //Active/current step
+  &.current {
+    .number-wrapper {
+      .number {
+        color: var(--light);
+        border: 2px solid var(--color-primary);
+        background-color: var(--color-primary);
+      }
+
+      &:before {
+        border-bottom: 2px solid var(--color-primary);
+      }
+    }
+
+    .label {
+      font-weight: 700;
+      color: var(--color-primary);
+    }
+
+    .two-line-text-overflow {
+      display: unset;
+    }
+  }
+
+  //Future state for clickable elements - future state is a default one
+  &.future.clickable {
+    .number-wrapper {
+      .number {
+        border: 2px solid var(--color-primary);
+        color: var(--color-primary);
+      }
+    }
+
+    .label {
+      color: var(--color-primary);
+    }
+
+    @include clickable-element;
+    @include disabled-element;
+  }
+
+  &:first-child {
+    .number-wrapper:before {
+      border-bottom: none;
+    }
+  }
+
+  &:last-child {
+    .number-wrapper:after {
+      border-bottom: none;
+    }
+  }
+}
+
+.number-wrapper {
+  display: flex;
+  flex-direction: row;
+
+  &:after,
+  &:before {
+    content: " ";
+    margin-bottom: 0.8125rem;
+    width: 100%;
+    border-bottom: 2px solid var(--greyed-out);
+  }
+}
+
+.number {
+  font-family: var(--font-family);
+  font-size: 1rem;
+  font-weight: normal;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid var(--wizard-step-indicator-future-color);
+  border-radius: 50%;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  color: var(--wizard-step-indicator-future-color);
+  line-height: var(--default-line-height);
+  background-color: var(--light);
+  box-sizing: content-box;
+}
+
+.two-line-text-overflow {
+  max-height: 2rem;
+  display: none;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  padding: 0.25rem 1rem 0;
+}
+
+.label {
+  font-family: var(--font-family);
+  font-size: 0.75rem;
+  line-height: 1rem;
+  overflow: hidden;
+  color: var(--default);
+  text-align: center;
+}
+
+.checkmark {
+  font-size: 0.875rem;
+}
+
+@media only screen and (min-width: 30em) {
+  .two-line-text-overflow {
+    display: unset;
+  }
+}

package/src/components/Wizard/BaseWizardSteps/BaseWizardSteps.test.tsx

@@ -0,0 +1,90 @@
+/*
+ * 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 from "react";
+import { BaseWizardSteps, Props } from "./BaseWizardSteps";
+import { getAllByRole, getByText, queryByText, render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+const initParams: Props = {
+  steps: [
+    {
+      label: "Step 1"
+    },
+    {
+      label: "Step 2"
+    },
+    {
+      label: "Step 3",
+      disabled: true
+    },
+    {
+      label: "Step 4"
+    }
+  ],
+  currentStepNo: 1,
+  onClick: jest.fn()
+};
+
+const getStepButtons = (container: HTMLElement) => getAllByRole(container, "button");
+
+describe("BaseWizardSteps", () => {
+  it("renders without crashing", async () => {
+    const { container } = render(<BaseWizardSteps {...initParams} />);
+    const buttons = getStepButtons(container);
+    expect(initParams.onClick).toHaveBeenCalledTimes(0);
+
+    expect(buttons).toHaveLength(4);
+    expect(buttons[0]).not.toHaveAttribute("aria-current");
+    expect(buttons[0].querySelector(".checkmark")).toBeDefined();
+    expect(buttons[1]).toHaveAttribute("aria-current", "step");
+    expect(getByText(buttons[1], "2")).toBeDefined();
+    expect(buttons[2]).not.toHaveAttribute("aria-current");
+    expect(getByText(buttons[2], "3")).toBeDefined();
+    expect(buttons[3]).not.toHaveAttribute("aria-current");
+    expect(getByText(buttons[3], "4")).toBeDefined();
+
+    await userEvent.click(buttons[0]);
+    expect(initParams.onClick).toHaveBeenCalledTimes(1);
+
+    await userEvent.click(buttons[1]);
+    await userEvent.click(buttons[2]);
+    await userEvent.click(buttons[3]);
+    expect(initParams.onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("should allow to click on future and prev steps but not on current and disabled steps when futureStepsClickable is enabled", async () => {
+    const { container } = render(<BaseWizardSteps {...initParams} futureStepsClickable />);
+    const buttons = getStepButtons(container);
+    expect(initParams.onClick).toHaveBeenCalledTimes(0);
+
+    await userEvent.click(buttons[3]);
+    expect(initParams.onClick).toHaveBeenCalledTimes(1);
+    await userEvent.click(buttons[0]);
+    expect(initParams.onClick).toHaveBeenCalledTimes(2);
+
+    await userEvent.click(buttons[1]);
+    await userEvent.click(buttons[2]);
+    expect(initParams.onClick).toHaveBeenCalledTimes(2);
+  });
+
+  it("should not render checkmark or number when prev steps is disabled", () => {
+    const { container } = render(<BaseWizardSteps {...initParams} currentStepNo={3} />);
+    const buttons = getStepButtons(container);
+
+    expect(queryByText(buttons[2], "3")).toBeNull();
+  });
+});

package/src/components/Wizard/BaseWizardSteps/BaseWizardSteps.tsx

@@ -0,0 +1,93 @@
+/*
+ * 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, { ForwardRefRenderFunction, ComponentPropsWithRef, Fragment } from "react";
+import classes from "./BaseWizardSteps.module.scss";
+import { Icon, Icons } from "../../Icon/Icon";
+
+type StepState = "finished" | "current" | "future";
+
+export interface Step {
+  label: string;
+  disabled?: boolean;
+}
+
+export interface Props extends Omit<ComponentPropsWithRef<"div">, "onClick"> {
+  steps: Step[];
+  currentStepNo: number;
+  onClick?: (stepNo: number) => void;
+  futureStepsClickable?: boolean;
+}
+
+const BaseWizardStepsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  { steps, currentStepNo, onClick, futureStepsClickable = false, ...rest }: Props,
+  ref
+) => {
+  const getStepState = (stepNo: number): StepState => {
+    if (currentStepNo === stepNo) {
+      return "current";
+    } else if (stepNo < currentStepNo) {
+      return "finished";
+    }
+    return "future";
+  };
+
+  const getStepContent = (stepState: StepState, index: number, disabled?: boolean) => {
+    const stepNumberString = String(index + 1);
+    if (stepState === "finished") {
+      return disabled ? null : <Icon className={classes["checkmark"]} icon={Icons.Checkmark} />;
+    } else {
+      return <Fragment>{stepNumberString}</Fragment>;
+    }
+  };
+
+  const generatedSteps = steps.map((step, index) => {
+    const stepState = getStepState(index);
+    const disabledStyleClassName = step.disabled ? classes["disabled"] : "";
+    const clickableClassName = futureStepsClickable ? classes["clickable"] : "";
+
+    return (
+      <button
+        key={step.label.toLowerCase().replace(/\s/, "-")}
+        disabled={
+          step.disabled ||
+          (stepState === "future" && !futureStepsClickable) ||
+          stepState === "current"
+        }
+        aria-current={stepState === "current" ? "step" : undefined}
+        onClick={() => onClick?.(index)}
+        className={`${classes["wizard-element"]} ${classes[stepState]} ${clickableClassName} ${disabledStyleClassName}`}
+      >
+        <div className={classes["number-wrapper"]}>
+          <span className={classes["number"]}>
+            {getStepContent(stepState, index, step.disabled)}
+          </span>
+        </div>
+        <div className={classes["two-line-text-overflow"]}>
+          <span className={classes["label"]}>{step.label}</span>
+        </div>
+      </button>
+    );
+  });
+
+  return (
+    <div {...rest} ref={ref} className={classes["wizard"]}>
+      {generatedSteps}
+    </div>
+  );
+};
+
+export const BaseWizardSteps = React.forwardRef(BaseWizardStepsComponent);