@onewelcome/react-lib-components 0.2.0 → 0.2.3

package/src/Button/IconButton.test.tsx

@@ -1,9 +1,9 @@
-import React, { useRef, useEffect } from 'react';
-import { IconButton, Props } from './IconButton';
-import { render } from '@testing-library/react';
+import React, { useRef, useEffect } from "react";
+import { IconButton, Props } from "./IconButton";
+import { render } from "@testing-library/react";
 
 const defaultParams: Props = {
-  title: 'iconbutton',
+  title: "iconbutton"
 };
 
 const createIconButton = (params?: (defaultParams: Props) => Props) => {
@@ -16,26 +16,26 @@ const createIconButton = (params?: (defaultParams: Props) => Props) => {
       iconButton content
     </IconButton>
   );
-  const iconButton = queries.getByTestId('iconButton');
+  const iconButton = queries.getByTestId("iconButton");
 
   return {
     ...queries,
-    iconButton,
+    iconButton
   };
 };
 
-describe('IconButton should render', () => {
-  it('renders without crashing', () => {
+describe("IconButton should render", () => {
+  it("renders without crashing", () => {
     const { iconButton } = createIconButton();
 
     expect(iconButton).toBeDefined();
   });
 });
 
-describe('ref should work', () => {
-  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+describe("ref should work", () => {
+  it("should give back the proper data prop, this also checks if the component propagates ...rest properly", () => {
     const ExampleComponent = ({
-      propagateRef,
+      propagateRef
     }: {
       propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
     }) => {
@@ -51,56 +51,56 @@ describe('ref should work', () => {
     };
 
     const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+      expect(ref.current).toHaveAttribute("data-ref", "testing");
     };
 
     render(<ExampleComponent propagateRef={refCheck} />);
   });
 });
 
-describe('Different variants of the button', () => {
+describe("Different variants of the button", () => {
   it('should have a class of "primary"', () => {
     const { iconButton } = createIconButton();
-    expect(iconButton.classList.contains('primary')).toBe(true);
+    expect(iconButton.classList.contains("primary")).toBe(true);
   });
 
   it('should have a class of "secondary"', () => {
-    const { iconButton } = createIconButton((defaultParams) => ({
+    const { iconButton } = createIconButton(defaultParams => ({
       ...defaultParams,
-      color: 'secondary',
+      color: "secondary"
     }));
-    expect(iconButton.classList.contains('secondary')).toBe(true);
+    expect(iconButton.classList.contains("secondary")).toBe(true);
   });
 
   it('should have a class of "tertiary"', () => {
-    const { iconButton } = createIconButton((defaultParams) => ({
+    const { iconButton } = createIconButton(defaultParams => ({
       ...defaultParams,
-      color: 'tertiary',
+      color: "tertiary"
     }));
-    expect(iconButton.classList.contains('tertiary')).toBe(true);
+    expect(iconButton.classList.contains("tertiary")).toBe(true);
   });
 
   it('should have a class of "fill"', () => {
-    const { iconButton } = createIconButton((defaultParams) => ({
+    const { iconButton } = createIconButton(defaultParams => ({
       ...defaultParams,
-      variant: 'fill',
+      variant: "fill"
     }));
-    expect(iconButton.classList.contains('fill')).toBe(true);
+    expect(iconButton.classList.contains("fill")).toBe(true);
   });
 
   it('should have a class of "outline"', () => {
-    const { iconButton } = createIconButton((defaultParams) => ({
+    const { iconButton } = createIconButton(defaultParams => ({
       ...defaultParams,
-      variant: 'outline',
+      variant: "outline"
     }));
-    expect(iconButton.classList.contains('outline')).toBe(true);
+    expect(iconButton.classList.contains("outline")).toBe(true);
   });
 
   it('should have a class of "text"', () => {
-    const { iconButton } = createIconButton((defaultParams) => ({
+    const { iconButton } = createIconButton(defaultParams => ({
       ...defaultParams,
-      variant: 'text',
+      variant: "text"
     }));
-    expect(iconButton.classList.contains('text')).toBe(true);
+    expect(iconButton.classList.contains("text")).toBe(true);
   });
 });

package/src/Button/IconButton.tsx

@@ -1,19 +1,19 @@
-import React, { Fragment } from 'react';
-import { BaseButton, Props as BaseButtonProps } from './BaseButton';
-import classes from './IconButton.module.scss';
-import readyclasses from '../readyclasses.module.scss';
+import React, { Fragment } from "react";
+import { BaseButton, Props as BaseButtonProps } from "./BaseButton";
+import classes from "./IconButton.module.scss";
+import readyclasses from "../readyclasses.module.scss";
 
 export interface Props extends BaseButtonProps {
   children?: React.ReactNode;
-  iconSize?: 's' | 'm' | 'l';
-  variant?: 'text' | 'fill' | 'outline';
+  iconSize?: "s" | "m" | "l";
+  variant?: "text" | "fill" | "outline";
   className?: string;
   title?: string;
 }
 
 export const IconButton = React.forwardRef<HTMLButtonElement, Props>(
   (
-    { children, color = 'primary', variant = 'text', iconSize = 'm', title, className, ...rest },
+    { children, color = "primary", variant = "text", iconSize = "m", title, className, ...rest },
     ref
   ) => {
     if (!title) {
@@ -21,10 +21,10 @@ export const IconButton = React.forwardRef<HTMLButtonElement, Props>(
     }
 
     const iconButtonClasses = [
-      classes['icon-button'],
+      classes["icon-button"],
       classes[variant],
       classes[color],
-      classes['button-' + iconSize],
+      classes["button-" + iconSize]
     ];
 
     if (className) {
@@ -32,10 +32,10 @@ export const IconButton = React.forwardRef<HTMLButtonElement, Props>(
     }
 
     return (
-      <BaseButton {...rest} ref={ref} className={iconButtonClasses.join(' ')}>
+      <BaseButton {...rest} ref={ref} className={iconButtonClasses.join(" ")}>
         <Fragment>
           {children}
-          <span className={readyclasses['sr-only']}>{title}</span>
+          <span className={readyclasses["sr-only"]}>{title}</span>
         </Fragment>
       </BaseButton>
     );

package/src/ContextMenu/ContextMenu.test.tsx

@@ -1,15 +1,15 @@
-import React, { useEffect, useRef } from 'react';
-import { ContextMenu, Props } from './ContextMenu';
-import { render } from '@testing-library/react';
-import { Button } from '../Button/Button';
-import { ContextMenuItem } from './ContextMenuItem';
-import userEvent from '@testing-library/user-event';
+import React, { useEffect, useRef } from "react";
+import { ContextMenu, Props } from "./ContextMenu";
+import { render } from "@testing-library/react";
+import { Button } from "../Button/Button";
+import { ContextMenuItem } from "./ContextMenuItem";
+import userEvent from "@testing-library/user-event";
 
 const onShow = jest.fn();
 const onClick = jest.fn();
 
 const defaultParams: Props = {
-  id: 'example-contextmenu',
+  id: "example-contextmenu",
   trigger: <Button data-testid="trigger">Click me for a context menu</Button>,
   children: [
     <ContextMenuItem onClick={onClick} data-testid="contextmenuitem" key="1">
@@ -20,10 +20,10 @@ const defaultParams: Props = {
     </ContextMenuItem>,
     <ContextMenuItem onClick={onClick} data-testid="contextmenuitem3" key="3">
       Example item 3
-    </ContextMenuItem>,
+    </ContextMenuItem>
   ],
   show: false,
-  onShow: onShow,
+  onShow: onShow
 };
 
 const createContextMenu = (params?: (defaultParams: Props) => Props) => {
@@ -34,24 +34,24 @@ const createContextMenu = (params?: (defaultParams: Props) => Props) => {
 
   const queries = render(<ContextMenu {...parameters} data-testid="contextmenu"></ContextMenu>);
 
-  const contextmenu = queries.getByTestId('contextmenu');
-  const trigger = queries.getByTestId('trigger');
+  const contextmenu = queries.getByTestId("contextmenu");
+  const trigger = queries.getByTestId("trigger");
 
   return {
     ...queries,
     contextmenu,
-    trigger,
+    trigger
   };
 };
 
-describe('ContextMenu should render', () => {
-  it('renders without crashing', () => {
+describe("ContextMenu should render", () => {
+  it("renders without crashing", () => {
     const { contextmenu } = createContextMenu();
 
     expect(contextmenu).toBeTruthy();
   });
 
-  it('executed onShow function', () => {
+  it("executed onShow function", () => {
     const { trigger } = createContextMenu();
 
     userEvent.click(trigger);
@@ -59,20 +59,36 @@ describe('ContextMenu should render', () => {
     expect(onShow).toHaveBeenCalled();
   });
 
-  it('executed onShow function', () => {
-    const { getByTestId } = createContextMenu((defaultParams) => ({
+  it("executed onShow function", () => {
+    const { getByTestId } = createContextMenu(defaultParams => ({
       ...defaultParams,
-      show: true,
+      show: true
     }));
 
-    const button = getByTestId('contextmenuitem');
+    const button = getByTestId("contextmenuitem");
 
     userEvent.click(button);
 
     expect(onClick).toHaveBeenCalled();
   });
 
-  it('should throw an error', () => {
+  it("passes custom class to ContextMenuItem", () => {
+    const { getByRole } = createContextMenu(defaultParams => ({
+      ...defaultParams,
+      show: true,
+      children: [
+        <ContextMenuItem data-testid="contextmenuitem" key="1" className="custom">
+          Item 1
+        </ContextMenuItem>
+      ]
+    }));
+
+    const child = getByRole("menuitem");
+
+    expect(child).toHaveClass("custom");
+  });
+
+  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;
     console.error = jest.fn();
@@ -86,7 +102,7 @@ describe('ContextMenu should render', () => {
       actual = e.message;
     }
 
-    const expected = 'You need to provide an ID to the context menu';
+    const expected = "You need to provide an ID to the context menu";
 
     expect(actual).toEqual(expected);
 
@@ -94,10 +110,10 @@ describe('ContextMenu should render', () => {
   });
 });
 
-describe('ref should work', () => {
-  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+describe("ref should work", () => {
+  it("should give back the proper data prop, this also checks if the component propagates ...rest properly", () => {
     const ExampleComponent = ({
-      propagateRef,
+      propagateRef
     }: {
       propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
     }) => {
@@ -113,121 +129,126 @@ describe('ref should work', () => {
     };
 
     const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+      expect(ref.current).toHaveAttribute("data-ref", "testing");
     };
 
     render(<ExampleComponent propagateRef={refCheck} />);
   });
 });
 
-describe('accessibility controls', () => {
-  it('opening works correctly with arrow key down, then navigation should work with arrow keys', () => {
+describe("accessibility controls", () => {
+  it("opening works correctly with arrow key down, then navigation should work with arrow keys", () => {
     const { getByTestId, trigger } = createContextMenu();
-    const firstContextMenuItem = getByTestId('contextmenuitem');
-    const secondContextMenuItem = getByTestId('contextmenuitem2');
-    const thirdContextMenuItem = getByTestId('contextmenuitem3');
-
-    userEvent.keyboard('{arrowdown}');
-    userEvent.keyboard('{arrowdown}');
-    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+    const firstContextMenuItem = getByTestId("contextmenuitem");
+    const secondContextMenuItem = getByTestId("contextmenuitem2");
+    const thirdContextMenuItem = getByTestId("contextmenuitem3");
+
+    userEvent.tab();
+    userEvent.keyboard("{arrowdown}");
+    userEvent.keyboard("{arrowdown}");
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
     expect(firstContextMenuItem).toHaveFocus();
 
-    userEvent.keyboard('{arrowdown}');
+    userEvent.keyboard("{arrowdown}");
     expect(secondContextMenuItem).toHaveFocus();
 
-    userEvent.keyboard('{arrowdown}');
+    userEvent.keyboard("{arrowdown}");
     expect(thirdContextMenuItem).toHaveFocus();
 
-    userEvent.keyboard('{arrowdown}');
+    userEvent.keyboard("{arrowdown}");
     expect(firstContextMenuItem).toHaveFocus();
 
-    userEvent.keyboard('{arrowup}');
+    userEvent.keyboard("{arrowup}");
     expect(thirdContextMenuItem).toHaveFocus();
 
-    userEvent.keyboard('{arrowup}');
+    userEvent.keyboard("{arrowup}");
     expect(secondContextMenuItem).toHaveFocus();
   });
 
-  it('opens correctly with enter key, closing works with escape key.', async () => {
+  it("opens correctly with enter key, closing works with escape key.", async () => {
     const { trigger } = createContextMenu();
 
-    userEvent.keyboard('{enter}');
+    userEvent.tab();
+    userEvent.keyboard("{enter}");
 
-    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
 
-    userEvent.keyboard('{escape}');
+    userEvent.keyboard("{escape}");
 
-    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
   });
 
-  it('opens correctly with space, home and end buttons work', () => {
+  it("opens correctly with space, home and end buttons work", () => {
     const { trigger, getByTestId } = createContextMenu();
-    const firstContextMenuItem = getByTestId('contextmenuitem');
-    const thirdContextMenuItem = getByTestId('contextmenuitem3');
+    const firstContextMenuItem = getByTestId("contextmenuitem");
+    const thirdContextMenuItem = getByTestId("contextmenuitem3");
 
-    userEvent.keyboard('{space}');
+    userEvent.tab();
+    userEvent.keyboard("{space}");
 
-    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
 
-    userEvent.keyboard('{end}');
+    userEvent.keyboard("{end}");
 
     expect(thirdContextMenuItem).toHaveFocus();
 
-    userEvent.keyboard('{home}');
+    userEvent.keyboard("{home}");
 
     expect(firstContextMenuItem).toHaveFocus();
   });
 
-  it('opens correctly with space, navigate with arrow keys, select with enter', () => {
-    onClick.mockImplementation((e) => {
-      expect(e.target.getAttribute('data-testid')).toBe('contextmenuitem3');
+  it("opens correctly with space, navigate with arrow keys, select with enter", () => {
+    onClick.mockImplementation(e => {
+      expect(e.target.getAttribute("data-testid")).toBe("contextmenuitem3");
     });
 
-    const { trigger, getByTestId } = createContextMenu((defaultParams) => ({
-      ...defaultParams,
+    const { trigger, getByTestId } = createContextMenu(defaultParams => ({
+      ...defaultParams
     }));
-    const thirdContextMenuItem = getByTestId('contextmenuitem3');
+    const thirdContextMenuItem = getByTestId("contextmenuitem3");
 
-    userEvent.keyboard('{space}');
+    userEvent.tab();
+    userEvent.keyboard("{space}");
 
-    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
 
-    userEvent.keyboard('{arrowdown}');
-    userEvent.keyboard('{arrowdown}');
-    userEvent.keyboard('{arrowdown}');
+    userEvent.keyboard("{arrowdown}");
+    userEvent.keyboard("{arrowdown}");
+    userEvent.keyboard("{arrowdown}");
 
     expect(thirdContextMenuItem).toHaveFocus();
 
-    userEvent.keyboard('{enter}');
+    userEvent.keyboard("{enter}");
 
     expect(onClick).toHaveBeenCalled();
   });
 
-  it('opens correctly with enter, navigate with arrow keys, select with space', () => {
-    onClick.mockImplementation((e) => {
-      expect(e.target.getAttribute('data-testid')).toBe('contextmenuitem3');
+  it("opens correctly with enter, navigate with arrow keys, select with space", () => {
+    onClick.mockImplementation(e => {
+      expect(e.target.getAttribute("data-testid")).toBe("contextmenuitem3");
     });
 
-    const { trigger, getByTestId } = createContextMenu((defaultParams) => ({
-      ...defaultParams,
+    const { trigger, getByTestId } = createContextMenu(defaultParams => ({
+      ...defaultParams
     }));
-    const thirdContextMenuItem = getByTestId('contextmenuitem3');
+    const thirdContextMenuItem = getByTestId("contextmenuitem3");
 
-    userEvent.keyboard('{enter}');
+    userEvent.tab();
+    userEvent.keyboard("{enter}");
 
-    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
 
-    userEvent.keyboard('{arrowdown}');
-    userEvent.keyboard('{arrowdown}');
-    userEvent.keyboard('{arrowdown}');
+    userEvent.keyboard("{arrowdown}");
+    userEvent.keyboard("{arrowdown}");
+    userEvent.keyboard("{arrowdown}");
 
     expect(thirdContextMenuItem).toHaveFocus();
 
-    userEvent.keyboard('{space}');
+    userEvent.keyboard("{space}");
 
     expect(onClick).toHaveBeenCalled();
 
-    userEvent.keyboard('{space}');
+    userEvent.keyboard("{space}");
 
     expect(thirdContextMenuItem).toHaveFocus();
   });