@onewelcome/react-lib-components 0.2.4 → 0.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onewelcome/react-lib-components",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/index.js",

package/src/ContextMenu/ContextMenu.module.scss

@@ -11,7 +11,15 @@
   padding: 0;
   min-width: 200px;
 
+  &.no-margin-top {
+    margin: 0 0 1rem;
+  }
+
   button {
     text-align: left;
   }
 }
+
+.decorative-element {
+  margin-top: 1rem;
+}

package/src/ContextMenu/ContextMenu.test.tsx

@@ -88,6 +88,16 @@ describe("ContextMenu should render", () => {
     expect(child.parentElement).toHaveClass("custom");
   });
 
+  it("renders the decorative element", () => {
+    const { getByText } = createContextMenu(defaultParams => ({
+      ...defaultParams,
+      show: true,
+      decorativeElement: <div>test</div>
+    }));
+
+    expect(getByText("test")).toBeInTheDocument();
+  });
+
   it("should throw an error", () => {
     // Prevent throwing an error in the console when this test is executed. We fix this and the end of this test.
     const err = console.error;
@@ -252,4 +262,37 @@ describe("accessibility controls", () => {
 
     expect(thirdContextMenuItem).toHaveFocus();
   });
+
+  it("opens correctly with enter, navigate with arrow keys skipping the decorative element", () => {
+    onClick.mockImplementation(e => {
+      expect(e.target.getAttribute("data-testid")).toBe("contextmenuitem3");
+    });
+
+    const { trigger, getByTestId, getByText } = createContextMenu(defaultParams => ({
+      ...defaultParams,
+      decorativeElement: <div>test</div>
+    }));
+    const thirdContextMenuItem = getByTestId("contextmenuitem3");
+
+    userEvent.tab();
+    userEvent.keyboard("{enter}");
+
+    expect(getByText("test")).toBeInTheDocument();
+
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+
+    userEvent.keyboard("{arrowdown}");
+    userEvent.keyboard("{arrowdown}");
+    userEvent.keyboard("{arrowdown}");
+
+    expect(thirdContextMenuItem).toHaveFocus();
+
+    userEvent.keyboard("{space}");
+
+    expect(onClick).toHaveBeenCalled();
+
+    userEvent.keyboard("{space}");
+
+    expect(thirdContextMenuItem).toHaveFocus();
+  });
 });

package/src/ContextMenu/ContextMenu.tsx

@@ -16,6 +16,7 @@ import { createPortal } from "react-dom";
 
 export interface Props extends ComponentPropsWithRef<"div"> {
   trigger: ReactElement<ButtonProps> | ReactElement<IconButtonProps>;
+  decorativeElement?: ReactNode;
   children: ReactNode;
   placement?: Placement;
   transformOrigin?: Placement;
@@ -32,6 +33,7 @@ export const ContextMenu = React.forwardRef<HTMLDivElement, Props>(
     {
       trigger,
       children,
+      decorativeElement,
       id,
       show = false,
       onShow,
@@ -183,7 +185,15 @@ export const ContextMenu = React.forwardRef<HTMLDivElement, Props>(
             anchorEl={anchorEl}
             show={showContextMenu}
           >
-            <ul className={classes["menu"]} id={`${id}-menu`} aria-describedby={id} role="menu">
+            {decorativeElement && (
+              <div className={classes["decorative-element"]}>{decorativeElement}</div>
+            )}
+            <ul
+              className={`${classes["menu"]} ${decorativeElement ? classes["no-margin-top"] : ""}`}
+              id={`${id}-menu`}
+              aria-describedby={id}
+              role="menu"
+            >
               {renderChildren()}
             </ul>
           </Popover>,

package/src/Form/Toggle/Toggle.module.scss

@@ -17,11 +17,6 @@ $borderRadius: 2.5rem;
   display: block;
   pointer-events: none;
 
-  &.disabled {
-    opacity: 0.25;
-    cursor: not-allowed;
-  }
-
   &:before {
     content: "";
     width: 1rem;
@@ -42,6 +37,11 @@ $borderRadius: 2.5rem;
       transform: translateY(-50%) translateX(calc(100% - 0.25rem));
     }
   }
+
+  &.disabled {
+    background-color: var(--disabled);
+    cursor: not-allowed;
+  }
 }
 
 .toggle-helper {

package/src/Notifications/Snackbar/SnackbarProvider/SnackbarProvider.test.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import {
   render,
   getByTestId,
@@ -6,20 +6,26 @@ import {
   waitFor,
   getAllByRole,
   getByText,
-  findByText,
-  findAllByText,
-  queryByText
+  fireEvent
 } from "@testing-library/react";
 import { SnackbarProvider, Props } from "./SnackbarProvider";
 import { useSnackbar } from "../useSnackbar";
 import userEvent from "@testing-library/user-event";
 
 const successProps = {
-  title: "success title"
+  title: "success title",
+  options: {
+    duration: 10,
+    onClose: jest.fn()
+  }
 };
 
 const errorProps = {
-  title: "error title"
+  title: "error title",
+  options: {
+    duration: 10,
+    onClose: jest.fn()
+  }
 };
 
 const infoProps = {
@@ -43,7 +49,7 @@ const renderSnackbarProvider = (props?: Partial<Props>) => {
         <button
           data-testid="show-success"
           onClick={() => {
-            enqueueSuccessSnackbar(successProps.title + index);
+            enqueueSuccessSnackbar(successProps.title + index, undefined, successProps.options);
             setIndex(index + 1);
           }}
         >
@@ -96,24 +102,24 @@ describe("SnackbarProvider", () => {
     expect(container).toHaveTextContent("content");
   });
 
-  it("should stack 3 snackbars at one time", () => {
+  it("should stack 3 snackbars at one time", async () => {
     const { showSuccessSnackbarBtn } = renderSnackbarProvider();
 
-    userEvent.click(showSuccessSnackbarBtn);
-    userEvent.click(showSuccessSnackbarBtn);
-    userEvent.click(showSuccessSnackbarBtn);
-    userEvent.click(showSuccessSnackbarBtn);
+    await userEvent.click(showSuccessSnackbarBtn);
+    await userEvent.click(showSuccessSnackbarBtn);
+    await userEvent.click(showSuccessSnackbarBtn);
+    await userEvent.click(showSuccessSnackbarBtn);
 
     expect(getAllByText(document.body, new RegExp(successProps.title))).toHaveLength(3);
   });
 
-  it("should render 3 variants of snackbars", () => {
+  it("should render 3 variants of snackbars", async () => {
     const { showSuccessSnackbarBtn, showErrorSnackbarBtn, showInfoSnackbarBtn } =
       renderSnackbarProvider();
 
-    userEvent.click(showSuccessSnackbarBtn);
-    userEvent.click(showErrorSnackbarBtn);
-    userEvent.click(showInfoSnackbarBtn);
+    await userEvent.click(showSuccessSnackbarBtn);
+    await userEvent.click(showErrorSnackbarBtn);
+    await userEvent.click(showInfoSnackbarBtn);
 
     expect(getByText(document.body, new RegExp(successProps.title))).toBeDefined();
     expect(getByText(document.body, new RegExp(errorProps.title))).toBeDefined();
@@ -122,58 +128,45 @@ describe("SnackbarProvider", () => {
     const infoSnackbarActions = getAllByRole(document.body, "button", { name: /Contact/i });
     expect(infoSnackbarActions).toHaveLength(2);
 
-    userEvent.click(infoSnackbarActions[0]);
-    userEvent.click(infoSnackbarActions[1]);
+    await userEvent.click(infoSnackbarActions[0]);
+    await userEvent.click(infoSnackbarActions[1]);
 
     expect(infoProps.options.actions[0].onClick).toBeCalledTimes(1);
-    waitFor(() => expect(infoProps.options.actions[1].onClick).toBeCalledTimes(1));
   });
+});
 
-  it("should stack 3 snackbars at one time and then after 3 disapear show the fourth one", () => {
-    const { showSuccessSnackbarBtn } = renderSnackbarProvider({
-      autoHideDuration: { long: 1, short: 1 }
-    });
+describe("handlers", () => {
+  it("should fire onClose", async () => {
+    const onCloseHandler = jest.fn();
+    const ExampleComponent = () => {
+      const { enqueueErrorSnackbar, enqueueSuccessSnackbar } = useSnackbar();
 
-    userEvent.click(showSuccessSnackbarBtn);
-    userEvent.click(showSuccessSnackbarBtn);
-    userEvent.click(showSuccessSnackbarBtn);
-    userEvent.click(showSuccessSnackbarBtn);
+      useEffect(() => {
+        enqueueErrorSnackbar("error", undefined, { onClose: onCloseHandler, duration: 1 });
+        enqueueSuccessSnackbar("success", undefined, { onClose: onCloseHandler, duration: 1 });
+      }, []);
 
-    expect(getAllByText(document.body, new RegExp(successProps.title))).toHaveLength(3);
+      return <div></div>;
+    };
 
-    /** Looking for fourth one to be shown */
-    waitFor(() => expect(getAllByText(document.body, successProps.title + "3")).toHaveLength(1));
-
-    /** There shouldn't be any other snackbars */
-    waitFor(() =>
-      expect(getAllByText(document.body, new RegExp(successProps.title))).not.toBeDefined()
+    const queries = render(
+      <SnackbarProvider closeButtonTitle="close">
+        <ExampleComponent />
+      </SnackbarProvider>
     );
-  });
-
-  it("should close snackbar after clicking X button", async () => {
-    const { showSuccessSnackbarBtn } = renderSnackbarProvider({
-      autoHideDuration: { long: 1_000_000, short: 1_000_000 }
-    });
 
-    userEvent.click(showSuccessSnackbarBtn);
-    userEvent.click(showSuccessSnackbarBtn);
-    userEvent.click(showSuccessSnackbarBtn);
-    userEvent.click(showSuccessSnackbarBtn);
+    const errorSnackbar = await queries.findByText(/error/i);
+    const successSnackbar = await queries.findByText(/success/i);
 
-    const closeButtons = getAllByRole(document.body, "button", { name: "close" });
-
-    expect(closeButtons).toHaveLength(3);
-    expect(getAllByText(document.body, new RegExp(successProps.title))).toHaveLength(3);
+    expect(errorSnackbar).toBeTruthy();
+    expect(successSnackbar).toBeTruthy();
 
-    userEvent.click(closeButtons[0]);
-    expect(
-      await findAllByText(document.body, new RegExp(successProps.title + "[12]+"))
-    ).toHaveLength(2);
+    const parentErrorSnackbar = errorSnackbar.closest(".snackbar")!;
+    const parentSuccessSnackbar = successSnackbar.closest(".snackbar")!;
 
-    userEvent.click(closeButtons[1]);
-    expect(await findByText(document.body, successProps.title + "2")).toBeDefined();
+    await fireEvent.animationEnd(parentErrorSnackbar);
+    await fireEvent.animationEnd(parentSuccessSnackbar);
 
-    userEvent.click(closeButtons[2]);
-    waitFor(() => expect(queryByText(document.body, new RegExp(successProps.title))).toBeNull());
+    await waitFor(() => expect(onCloseHandler).toHaveBeenCalledTimes(2));
   });
 });

package/src/Notifications/Snackbar/SnackbarProvider/SnackbarProvider.tsx

@@ -29,6 +29,7 @@ interface Item {
   variant: Variant;
   content?: string;
   actions?: Actions;
+  onClose?: () => void;
 }
 
 export const SnackbarProvider = (
@@ -65,7 +66,8 @@ export const SnackbarProvider = (
     const {
       variant = "info",
       actions,
-      duration = getDuration(variant, actions, content)
+      duration = getDuration(variant, actions, content),
+      onClose
     } = options;
     const item: Item = {
       title,
@@ -73,7 +75,8 @@ export const SnackbarProvider = (
       variant,
       actions,
       duration,
-      id: generateID(15, title)
+      id: generateID(15, title),
+      onClose
     };
     addSnackbar(item);
   };
@@ -103,7 +106,10 @@ export const SnackbarProvider = (
       <SnackbarItem
         {...item}
         key={item.id}
-        onClose={onItemClosed}
+        onClose={() => {
+          onItemClosed(item.id);
+          item.onClose && item.onClose();
+        }}
         closeButtonTitle={closeButtonTitle}
       />
     ) : null

package/src/Notifications/Snackbar/interfaces.ts

@@ -8,4 +8,5 @@ export interface SnackbarOptionsProps {
   actions?: Actions;
   variant?: Variant;
   duration?: number;
+  onClose?: () => void;
 }