@onewelcome/react-lib-components 1.5.0 → 1.7.0

package/src/Notifications/Snackbar/SnackbarItem/SnackbarItem.tsx

@@ -96,9 +96,10 @@ export const SnackbarItem = ({
         onClose(id);
         actionProp.onClick && actionProp.onClick(e);
       }}
-      children={actionProp.label}
       className={classes["action-button"]}
-    ></button>
+    >
+      {actionProp.label}
+    </button>
   ));
 
   return (

package/src/Popover/Popover.module.scss

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-@import "../mixins.module.scss";
+@use "../mixins.module.scss";
 
 .popover {
   $transition-property: transform, opacity;
@@ -28,7 +28,7 @@
   opacity: 0;
   transform: scale(0.5);
 
-  @include transition($transition-property, 0.2s, ease-in-out);
+  @include mixins.transition($transition-property, 0.2s, ease-in-out);
 
   &.show {
     transform: scale(1);

package/src/ProgressBar/ProgressBar.module.scss

@@ -13,6 +13,7 @@
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
+@import "../mixins.module.scss";
 
 .progress-bar {
   position: relative;
@@ -30,18 +31,19 @@
   .bar {
     position: absolute;
     height: 0.5rem;
-    width: 50%;
     border-radius: 0.25rem;
     background-color: var(--color-primary);
-    animation: cubic-bezier(0.23, 0.78, 0.78, 0.23) 1s slide-in infinite;
+    &.loading-state {
+      width: 50%;
+      animation: cubic-bezier(0.23, 0.78, 0.78, 0.23) 1s slide-in infinite;
+      @keyframes slide-in {
+        0% {
+          left: -50%;
+        }
 
-    @keyframes slide-in {
-      0% {
-        left: -50%;
-      }
-
-      100% {
-        left: 100%;
+        100% {
+          left: 100%;
+        }
       }
     }
   }

package/src/ProgressBar/ProgressBar.test.tsx

@@ -56,3 +56,24 @@ describe("ref should work", () => {
     render(<ExampleComponent propagateRef={refCheck} />, { container });
   });
 });
+
+describe("ProgressBar should change styles depending on props", () => {
+  it("should show a progress when 'completed' prop is provided", () => {
+    const { ProgressBarComponent } = createProgressBar(defaultParams => ({
+      ...defaultParams,
+      completed: 40
+    }));
+
+    const bar = ProgressBarComponent.querySelector(".bar");
+    expect(bar).toHaveClass("w-40");
+  });
+
+  it("should show a loading effect when 'completed' prop is not provided", () => {
+    const { ProgressBarComponent } = createProgressBar(defaultParams => ({
+      ...defaultParams
+    }));
+
+    const bar = ProgressBarComponent.querySelector(".bar");
+    expect(bar).toHaveClass("loading-state");
+  });
+});

package/src/ProgressBar/ProgressBar.tsx

@@ -20,16 +20,21 @@ import classes from "./ProgressBar.module.scss";
 
 export interface Props extends Omit<ComponentPropsWithRef<"span">, "children"> {
   placeholderText: string;
+  completed?: number;
 }
 
 const ProgressBarComponent: ForwardRefRenderFunction<HTMLSpanElement, Props> = (
-  { placeholderText, ...rest }: Props,
+  { placeholderText, completed, ...rest }: Props,
   ref
 ) => {
   return (
     <span {...rest} ref={ref} role="progressbar">
       <span className={classes["progress-bar"]}>
-        <span className={classes["bar"]} />
+        <span
+          className={`${classes["bar"]} ${
+            completed ? classes[`w-${5 * Math.round(completed / 5)}`] : classes["loading-state"]
+          }`}
+        />
       </span>
       <Typography className={classes["placeholder"]} spacing={{ marginBottom: 0 }} variant="body">
         {placeholderText}

package/src/Skeleton/Skeleton.module.scss

@@ -14,12 +14,12 @@
  *    limitations under the License.
  */
 
-@import "../mixins.module.scss";
+@use "../mixins.module.scss";
 
 .skeleton {
   display: block;
   height: auto;
-  @include skeletonLoading();
+  @include mixins.skeletonLoading();
 }
 
 .no-height::before {

package/src/Tabs/TabButton.tsx

@@ -24,13 +24,12 @@ import React, {
 import classes from "./TabButton.module.scss";
 
 export interface Props extends ComponentPropsWithRef<"button"> {
-  children?: string;
   tabActive?: boolean;
   focused?: boolean;
 }
 
 const TabButtonComponent: ForwardRefRenderFunction<HTMLButtonElement, Props> = (
-  { children, tabActive, focused, ...rest }: Props,
+  { children, tabActive, focused, title, ...rest }: Props,
   ref
 ) => {
   let buttonRef = (ref as RefObject<HTMLButtonElement>) || createRef<HTMLButtonElement>();

package/src/Tabs/Tabs.module.scss

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-@import "../mixins.module.scss";
+@use "../mixins.module.scss";
 
 $focus-width: 5px;
 
@@ -45,7 +45,7 @@ $focus-width: 5px;
   height: var(--tab-active-border-height);
   background-color: var(--tab-active-border-color);
 
-  @include transition($transition-property, 0.2s, ease-in-out);
+  @include mixins.transition($transition-property, 0.2s, ease-in-out);
 }
 
 .tabdivider {

package/src/Tabs/Tabs.tsx

@@ -111,16 +111,19 @@ const TabsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   useEffect(() => {
     const buttons = React.Children.map(children, (child, index) => {
       if (Object.prototype.hasOwnProperty.call(child.props, "title")) {
-        return React.createElement(TabButton, {
-          key: `${child.props.title.toLowerCase().replace(/\s/, "_")}_button`,
-          tabIndex: activeTabIndex === index ? 0 : -1,
-          "aria-selected": activeTabIndex === index,
-          focused: usingKeyboardNavigation && activeTabIndex === index,
-          tabActive: activeTabIndex === index,
-          "aria-controls": `tab_${index}`,
-          onClick: () => setActiveTabIndex(index),
-          children: child.props.title
-        });
+        return React.createElement(
+          TabButton,
+          {
+            key: `${child.props.title.toLowerCase().replace(/\s/, "_")}_button`,
+            tabIndex: activeTabIndex === index ? 0 : -1,
+            "aria-selected": activeTabIndex === index,
+            focused: usingKeyboardNavigation && activeTabIndex === index,
+            tabActive: activeTabIndex === index,
+            "aria-controls": `tab_${index}`,
+            onClick: () => setActiveTabIndex(index)
+          },
+          child.props.title
+        );
       }
       return null;
     });

package/src/Tiles/Tile.module.scss

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-@import "../mixins.module.scss";
+@use "../mixins.module.scss";
 
 .tile {
   border: 1px solid var(--light-grey-border);
@@ -22,7 +22,7 @@
   box-sizing: border-box;
   padding: 0 0 2rem;
   background-color: var(--light);
-  @include transition(box-shadow, 0.2s, ease-in-out);
+  @include mixins.transition(box-shadow, 0.2s, ease-in-out);
   font-family: var(--font-family);
 
   &:hover {
@@ -71,14 +71,14 @@
 
     .image {
       margin-top: 2.5rem;
-      @include skeletonLoading();
+      @include mixins.skeletonLoading();
       border-radius: 0.5rem;
       width: 3rem;
       height: 3rem;
     }
 
     .title {
-      @include skeletonLoading();
+      @include mixins.skeletonLoading();
       color: transparent;
       display: inline-block;
       width: 70%;

package/src/Tooltip/Tooltip.module.scss

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-@import "../mixins.module.scss";
+@use "../mixins.module.scss";
 
 .wrapper {
   display: flex;
@@ -24,7 +24,7 @@
 .tooltip-wrapper {
   .icon {
     margin-left: 0.5rem;
-    @include transition(all, 0.2s, ease-in-out);
+    @include mixins.transition(all, 0.2s, ease-in-out);
     color: var(--greyed-out);
 
     &:hover {
@@ -46,7 +46,7 @@
   transform-origin: center left;
   pointer-events: none;
 
-  @include transition($transition-property, 0.2s, ease-in-out);
+  @include mixins.transition($transition-property, 0.2s, ease-in-out);
 
   &.visible {
     opacity: 1;

package/src/Typography/Typography.module.scss

@@ -37,11 +37,11 @@
   }
 
   &h3 {
-    @include fontProperties(var(--font-family), var(--font-size-h3), 400, 1.16666);
+    @include fontProperties(var(--font-family), var(--font-size-h3), 500, 1.16666);
   }
 
   &h4 {
-    @include fontProperties(var(--font-family), var(--font-size-h4), 700, 1.2);
+    @include fontProperties(var(--font-family), var(--font-size-h4), 500, 1.2);
   }
 
   &body {

package/src/_BaseStyling_/BaseStyling.tsx

@@ -26,6 +26,8 @@ interface CSSProperties {
   colorPrimary?: string;
   colorSecondary?: string;
   colorTertiary?: string;
+  lightPink?: string;
+  vividViolet?: string;
   defaultLineHeight?: string;
   buttonBorderRadius?: string;
   buttonBorderWidth?: string;
@@ -39,6 +41,7 @@ interface CSSProperties {
   inputBorderWidthFocus?: string;
   inputBorderStyle?: string;
   inputBackgroundColor?: string;
+  dragBorderStyle?: string;
   modalShadowColor?: string;
   modalBackgroundColor?: string;
   modalHeaderBackgroundColor?: string;
@@ -49,6 +52,7 @@ interface CSSProperties {
   snackbarSuccessBackgroundColor?: string;
   snackbarErrorBackgroundColor?: string;
   snackbarBorderRadius?: string;
+  bannerBorderRadius?: string;
   dataGridRowBackgroundColor?: string;
   dataGridRowHoverBackgroundColor?: string;
   tabsBackgroundColor?: string;
@@ -61,6 +65,7 @@ interface CSSProperties {
   default?: string;
   success?: string;
   error?: string;
+  info?: string;
   disabled?: string;
   greyedOut?: string;
   lightGreyBorder?: string;
@@ -89,6 +94,8 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     colorPrimary: "#9e006b",
     colorSecondary: "#003b5e",
     colorTertiary: "#ff1e4e",
+    lightPink: "#9E006B1A",
+    vividViolet: "#9E006B",
     defaultLineHeight: "26px",
     buttonBorderRadius: "20px",
     buttonBorderWidth: "2px",
@@ -112,6 +119,7 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     snackbarSuccessBackgroundColor: "#008a28",
     snackbarErrorBackgroundColor: "#d9291c",
     snackbarBorderRadius: "8px",
+    bannerBorderRadius: "8px",
     dataGridRowBackgroundColor: "transparent",
     dataGridRowHoverBackgroundColor: "#f5e6f0",
     tabsBackgroundColor: "var(--light)",
@@ -124,21 +132,23 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     default: "#0f0f1e",
     success: "#008a28",
     error: "#d9291c",
+    info: "var(--color-secondary)",
     disabled: "#e9e9eb",
     greyedOut: "#6f6f76",
     lightGreyBorder: "#e9e9eb",
     warning: "#ff6105",
     light: "#FFF",
     grey: "#c3c3c7",
-    fontFamily: "'Red Hat Display', sans-serif",
-    fontFamilyCode: "'Red Hat Mono', monospace",
+    fontFamily: "Roboto, sans-serif",
+    fontFamilyCode: "'Roboto Mono', monospace",
     fontSize: "1rem",
     fontSizeH1: "2.5rem",
     fontSizeH2: "1.625rem",
     fontSizeH3: "1.5rem",
     fontSizeH4: "1.25rem",
     fontSizeSub: ".75rem",
-    fontSizeCode: "1rem"
+    fontSizeCode: "1rem",
+    dragBorderStyle: "dashed"
   };
 
   /** We need a loading state, because otherwise you see the colors flash from the default to the possible overridden ones. */

package/src/hooks/useDetermineStatusIcon.test.ts

@@ -0,0 +1,28 @@
+import { renderHook } from "@testing-library/react-hooks";
+import { useDetermineStatusIcon } from "./useDetermineStatusIcon";
+
+describe("it should return the correct icon", () => {
+  it("should return an icon of type success", () => {
+    const { result } = renderHook(useDetermineStatusIcon, {
+      initialProps: { success: true, error: false }
+    });
+
+    expect(result.current).toBeDefined();
+    expect(result.current?.props?.["data-icon-status"]).toEqual("success");
+  });
+
+  it("should return an icon of type error", () => {
+    const { result } = renderHook(useDetermineStatusIcon, {
+      initialProps: { success: true, error: true }
+    });
+
+    expect(result.current).toBeDefined();
+    expect(result.current?.props?.["data-icon-status"]).toEqual("error");
+  });
+
+  it("should return null", () => {
+    const { result } = renderHook(useDetermineStatusIcon);
+
+    expect(result.current).toBeNull();
+  });
+});

package/src/hooks/useDetermineStatusIcon.tsx

@@ -0,0 +1,35 @@
+/*
+ * 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 { FormElement } from "../Form/form.interfaces";
+import React, { ReactElement, useRef } from "react";
+import { Icon, Icons } from "../Icon/Icon";
+export const useDetermineStatusIcon = (params: Partial<FormElement>): ReactElement | null => {
+  const { error, success } = params || false;
+  let icon = null;
+  const errorRef = useRef(null);
+  const successRef = useRef(null);
+
+  if (error) {
+    icon = <Icon ref={errorRef} data-icon-status="error" icon={Icons.Error} />;
+  } else if (success) {
+    icon = (
+      <Icon ref={successRef} data-icon-status="success" icon={Icons.CheckmarkCircleBreakout} />
+    );
+  }
+
+  return icon;
+};

package/src/hooks/useUploadFile.test.ts

@@ -0,0 +1,211 @@
+import { useUploadFile } from "./useUploadFile";
+import { renderHook } from "@testing-library/react-hooks";
+import { waitFor } from "@testing-library/react";
+import { FileType } from "../Form/FileUpload/FileUpload";
+
+const DONE = 4;
+
+const mockXhrRequest = (status: number, readyState?: number, response?: Object) => {
+  return {
+    open: jest.fn(),
+    send: jest.fn(),
+    addEventListener: jest.fn(),
+    onprogress: jest.fn(),
+    responseText: response,
+    onreadystatechange: jest.fn(),
+    getResponseHeader: jest.fn(),
+    upload: {
+      addEventListener: jest.fn()
+    },
+    DONE,
+    setRequestHeader: jest.fn(),
+    readyState: readyState || 4,
+    status
+  };
+};
+
+type mockRequestParams = Parameters<typeof mockXhrRequest>;
+
+const progressData = {
+  loaded: 12,
+  total: 100
+};
+
+const requestInfo = { url: "https://www.test.io", withCredentials: true };
+
+const file = {
+  name: "test.txt",
+  data: new File([""], "test.txt"),
+  size: 5,
+  type: ""
+};
+
+const setupXhrEnvironment = (mockParams: mockRequestParams) => {
+  const mock = mockXhrRequest(...mockParams);
+  const mockClass = () => mock;
+
+  // @ts-ignore
+  window.XMLHttpRequest = jest.fn().mockImplementation(mockClass);
+
+  return mock;
+};
+
+const expectReadyStateInfo = async (
+  files: FileType[],
+  mock: ReturnType<typeof mockXhrRequest>,
+  response: { code: number; body: { message: string } }
+) => {
+  const { result } = renderHook(() =>
+    useUploadFile(files, { ...requestInfo, responseErrorPath: "body.message" })
+  );
+
+  expect(mock.addEventListener).toHaveBeenCalled();
+  const [[, readystatechange]] = mock.addEventListener.mock.calls;
+  await waitFor(() => readystatechange());
+  const currentFile = result.current.updatedFiles[0];
+  expect(currentFile.status).toEqual("error");
+  expect(currentFile.error).toEqual(response.body.message);
+};
+
+describe("it should perform upload", () => {
+  it("should register the correct progress", async () => {
+    const mock = setupXhrEnvironment([200]);
+    const { result } = renderHook(() => useUploadFile([file], requestInfo));
+    expect(result.current).toBeDefined();
+    expect(mock.upload.addEventListener).toHaveBeenCalled();
+    const [[, progress]] = mock.upload.addEventListener.mock.calls;
+    await waitFor(() => progress(progressData));
+
+    const targetFile = result.current.updatedFiles[0];
+    expect(targetFile.name).toEqual(file.name);
+    expect(targetFile.progress).toEqual(12);
+  });
+
+  it("should contain a file with status of retry", async () => {
+    const mock = setupXhrEnvironment([0, DONE]);
+    const files2 = [
+      {
+        name: "test2.txt",
+        data: new File([""], "test2.txt"),
+        size: 5,
+        type: ""
+      }
+    ];
+    const { result } = renderHook(() => useUploadFile(files2, requestInfo));
+    expect(result.current).toBeDefined();
+    expect(mock.addEventListener).toHaveBeenCalled();
+    const [[, readystatechange]] = mock.addEventListener.mock.calls;
+    await waitFor(() => readystatechange());
+    expect(result.current.updatedFiles[0].status).toEqual("retry");
+  });
+
+  it("should contain a file with status of error", async () => {
+    const response = { code: 404, body: { message: "Error test" } };
+    const mock = setupXhrEnvironment([404, DONE, response]);
+    const files3 = [
+      {
+        name: "test3.txt",
+        data: new File([""], "test3.txt"),
+        size: 5,
+        type: ""
+      }
+    ];
+    await expectReadyStateInfo(files3, mock, response);
+  });
+
+  it("should contain a file with status of server error", async () => {
+    const response = { code: 500, body: { message: "Error test" } };
+    const mock = setupXhrEnvironment([500, DONE, response]);
+    const files6 = [
+      {
+        name: "test6.txt",
+        data: new File([""], "test3.txt"),
+        size: 5,
+        type: ""
+      }
+    ];
+    await expectReadyStateInfo(files6, mock, response);
+  });
+
+  it("should contain a file with status of success", async () => {
+    const mock = setupXhrEnvironment([200, DONE]);
+    const files3 = [
+      {
+        name: "test3.txt",
+        data: new File([""], "test3.txt"),
+        size: 5,
+        type: ""
+      }
+    ];
+    const { result } = renderHook(() => useUploadFile(files3, requestInfo));
+    expect(result.current).toBeDefined();
+    expect(mock.addEventListener).toHaveBeenCalled();
+    const [[, readystatechange]] = mock.addEventListener.mock.calls;
+    await waitFor(() => readystatechange());
+    const currentFile = result.current.updatedFiles[0];
+    expect(currentFile.status).toEqual("completed");
+  });
+});
+
+describe("should return data according to the parameters", () => {
+  it("should call custom callbacks", async () => {
+    const onComplete = jest.fn();
+    const onProgress = jest.fn();
+    const mock = setupXhrEnvironment([200, DONE]);
+    const files4 = [
+      {
+        name: "test4.txt",
+        data: new File([""], "test3.txt"),
+        size: 5,
+        type: ""
+      }
+    ];
+    renderHook(() => useUploadFile(files4, requestInfo, { onProgress, onComplete }));
+
+    const [[, progress]] = mock.upload.addEventListener.mock.calls;
+    await waitFor(() => progress(progressData));
+
+    const [[, readystatechange]] = mock.addEventListener.mock.calls;
+    await waitFor(() => readystatechange());
+
+    expect(mock.addEventListener).toHaveBeenCalled();
+    expect(onComplete).toHaveBeenCalled();
+    expect(onComplete).toHaveBeenCalled();
+  });
+
+  it("should add the correct error message", async () => {
+    const mock = setupXhrEnvironment([0, DONE]);
+    const files5 = [
+      {
+        name: "test5.txt",
+        data: new File([""], "test5.txt"),
+        size: 5,
+        type: ""
+      }
+    ];
+    const error = "Network error";
+    const { result } = renderHook(() =>
+      useUploadFile(files5, { ...requestInfo, networkErrorText: error })
+    );
+    const [[, readystatechange]] = mock.addEventListener.mock.calls;
+    await waitFor(() => readystatechange());
+
+    expect(mock.addEventListener).toHaveBeenCalled();
+    const file = result.current.updatedFiles[0];
+    expect(file.error).toEqual(error);
+  });
+});
+
+describe("useFileUpload hook should not fire when url and array of files is not present", () => {
+  it("should return an empty array if url is empty", () => {
+    const { result } = renderHook(() => useUploadFile([], { url: "https://yoohoo.co" }));
+
+    expect(result.current.uploadingFiles.length).toBe(0);
+  });
+
+  it("should return an empty array if url is empty", () => {
+    const { result } = renderHook(() => useUploadFile([file], { url: "" }));
+
+    expect(result.current.uploadingFiles.length).toBe(0);
+  });
+});