@onewelcome/react-lib-components 0.2.0 → 0.2.3

package/src/Tiles/Tile.test.tsx

@@ -1,11 +1,11 @@
-import React, { useEffect, useRef } from 'react';
-import { Tile, Props } from './Tile';
-import { render } from '@testing-library/react';
-import { Icon, Icons } from '../Icon/Icon';
-import { ContextMenu } from '../ContextMenu/ContextMenu';
-import { IconButton } from '../Button/IconButton';
-import { ContextMenuItem } from '../ContextMenu/ContextMenuItem';
-import userEvent from '@testing-library/user-event';
+import React, { useEffect, useRef } from "react";
+import { Tile, Props } from "./Tile";
+import { render } from "@testing-library/react";
+import { Icon, Icons } from "../Icon/Icon";
+import { ContextMenu } from "../ContextMenu/ContextMenu";
+import { IconButton } from "../Button/IconButton";
+import { ContextMenuItem } from "../ContextMenu/ContextMenuItem";
+import userEvent from "@testing-library/user-event";
 
 const onShow = jest.fn();
 const onClose = jest.fn();
@@ -36,9 +36,9 @@ const contextMenu = (
 );
 
 const defaultParams: Props = {
-  title: 'tile',
+  title: "tile",
   enabled: true,
-  tileAction: contextMenu,
+  tileAction: contextMenu
 };
 
 const createTile = (params?: (defaultParams: Props) => Props) => {
@@ -51,42 +51,42 @@ const createTile = (params?: (defaultParams: Props) => Props) => {
       tile content
     </Tile>
   );
-  const tile = queries.getByTestId('tile');
-  const menutrigger = queries.getByTestId('contextmenu-trigger');
+  const tile = queries.getByTestId("tile");
+  const menutrigger = queries.getByTestId("contextmenu-trigger");
 
   return {
     ...queries,
     tile,
-    menutrigger,
+    menutrigger
   };
 };
 
-describe('Tile should render', () => {
-  it('renders without crashing and enabled', () => {
+describe("Tile should render", () => {
+  it("renders without crashing and enabled", () => {
     const { tile } = createTile();
 
-    expect(tile.querySelector('.icon-checkmark')).toBeTruthy();
-    expect(tile.querySelector('.icon-forbidden')).toBeFalsy();
+    expect(tile.querySelector(".icon-checkmark")).toBeTruthy();
+    expect(tile.querySelector(".icon-forbidden")).toBeFalsy();
     expect(tile).toBeDefined();
   });
 
-  it('renders disabled', () => {
-    const { tile } = createTile((defaultParams) => ({ ...defaultParams, enabled: false }));
+  it("renders disabled", () => {
+    const { tile } = createTile(defaultParams => ({ ...defaultParams, enabled: false }));
 
-    expect(tile.querySelector('.icon-checkmark')).toBeFalsy();
-    expect(tile.querySelector('.icon-forbidden')).toBeTruthy();
+    expect(tile.querySelector(".icon-checkmark")).toBeFalsy();
+    expect(tile.querySelector(".icon-forbidden")).toBeTruthy();
   });
 
-  it('renders no status', () => {
-    const { tile } = createTile((defaultParams) => ({ ...defaultParams, enabled: undefined }));
+  it("renders no status", () => {
+    const { tile } = createTile(defaultParams => ({ ...defaultParams, enabled: undefined }));
 
-    expect(tile.querySelector('.icon-checkmark')).toBeFalsy();
-    expect(tile.querySelector('.icon-forbidden')).toBeFalsy();
+    expect(tile.querySelector(".icon-checkmark")).toBeFalsy();
+    expect(tile.querySelector(".icon-forbidden")).toBeFalsy();
   });
 });
 
 describe("should throw errors since we don't pass props", () => {
-  it('throws because of missing id', () => {
+  it("throws because of missing id", () => {
     // 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();
@@ -95,12 +95,12 @@ describe("should throw errors since we don't pass props", () => {
 
     try {
       // @ts-ignore: mandatory props (test for non-typescript react projects)
-      render(<Tile imageProps={{ src: 'test' }} />);
+      render(<Tile imageProps={{ src: "test" }} />);
     } catch (e: any) {
       actual = e.message;
     }
 
-    const expected = 'Please make sure to pass a title prop to your Tile component.';
+    const expected = "Please make sure to pass a title prop to your Tile component.";
 
     expect(actual).toEqual(expected);
 
@@ -108,17 +108,17 @@ describe("should throw errors since we don't pass props", () => {
   });
 });
 
-describe('contextmenu', () => {
-  it('should render everything correctly', () => {
+describe("contextmenu", () => {
+  it("should render everything correctly", () => {
     const { menutrigger, getByTestId } = createTile();
 
-    const contextMenu = getByTestId('contextmenu');
-    const menuitem1 = getByTestId('item1');
-    const menuitem2 = getByTestId('item2');
-    const menuitem3 = getByTestId('item3');
-    const popover = document.querySelector('.popover');
+    const contextMenu = getByTestId("contextmenu");
+    const menuitem1 = getByTestId("item1");
+    const menuitem2 = getByTestId("item2");
+    const menuitem3 = getByTestId("item3");
+    const popover = document.querySelector(".popover");
 
-    expect(popover).toHaveStyle({ opacity: '0;' });
+    expect(popover).toHaveStyle({ opacity: "0;" });
     expect(menutrigger).toBeTruthy();
     expect(contextMenu).toBeTruthy();
     expect(menuitem1).toBeTruthy();
@@ -127,8 +127,8 @@ describe('contextmenu', () => {
 
     userEvent.click(menutrigger);
     expect(onShow).toHaveBeenCalled();
-    expect(popover).toHaveClass('show');
-    expect(popover).toHaveStyle({ opacity: '1;' });
+    expect(popover).toHaveClass("show");
+    expect(popover).toHaveStyle({ opacity: "1;" });
 
     userEvent.click(menuitem1);
     userEvent.click(menuitem2);
@@ -138,10 +138,10 @@ describe('contextmenu', () => {
   });
 });
 
-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;
     }) => {
@@ -157,7 +157,7 @@ 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} />);

package/src/Tiles/Tile.tsx

@@ -2,21 +2,21 @@ import React, {
   ComponentPropsWithoutRef,
   ComponentPropsWithRef,
   ReactElement,
-  useState,
-} from 'react';
-import { Icon, Icons } from '../Icon/Icon';
-import classes from './Tile.module.scss';
-import readyClasses from '../readyclasses.module.scss';
+  useState
+} from "react";
+import { Icon, Icons } from "../Icon/Icon";
+import classes from "./Tile.module.scss";
+import readyClasses from "../readyclasses.module.scss";
 
-import { Props as ContextMenuProps } from '../ContextMenu/ContextMenu';
-import { generateID } from '../util/helper';
-import { Props as IconButtonProps } from '../Button/IconButton';
+import { Props as ContextMenuProps } from "../ContextMenu/ContextMenu";
+import { generateID } from "../util/helper";
+import { Props as IconButtonProps } from "../Button/IconButton";
 
-interface ImageProps extends ComponentPropsWithoutRef<'img'> {
+interface ImageProps extends ComponentPropsWithoutRef<"img"> {
   src: string;
 }
 
-export interface Props extends ComponentPropsWithRef<'div'> {
+export interface Props extends ComponentPropsWithRef<"div"> {
   title: string;
   imageProps?: ImageProps;
   enabled?: boolean;
@@ -29,15 +29,15 @@ export const Tile = React.forwardRef<HTMLDivElement, Props>(
     const [tileDescriptionID] = useState(generateID(20));
 
     if (!title) {
-      throw new Error('Please make sure to pass a title prop to your Tile component.');
+      throw new Error("Please make sure to pass a title prop to your Tile component.");
     }
 
     const statusMessage = () => {
       if (enabled) {
-        return 'Status: enabled';
+        return "Status: enabled";
       }
 
-      return 'Status: disabled';
+      return "Status: disabled";
     };
 
     return (
@@ -46,40 +46,40 @@ export const Tile = React.forwardRef<HTMLDivElement, Props>(
         tabIndex={0}
         aria-labelledby={tileDescriptionID}
         ref={ref}
-        className={`${classes['tile']} ${loading ? classes['loading'] : ''}`}
+        className={`${classes["tile"]} ${loading ? classes["loading"] : ""}`}
       >
-        <header style={{ justifyContent: enabled === undefined ? 'flex-end' : 'space-between' }}>
+        <header style={{ justifyContent: enabled === undefined ? "flex-end" : "space-between" }}>
           {enabled === true && (
             <Icon
               color="var(--success)"
               icon={Icons.Checkmark}
-              className={`${classes['icon']} ${className ?? ''}`}
+              className={`${classes["icon"]} ${className ?? ""}`}
             />
           )}
           {enabled === false && (
             <Icon
               color="var(--greyed-out)"
               icon={Icons.Forbidden}
-              className={`${classes['icon']} ${className ?? ''}`}
+              className={`${classes["icon"]} ${className ?? ""}`}
             />
           )}
           {enabled !== undefined && (
-            <span id={tileDescriptionID} className={readyClasses['sr-only']}>
+            <span id={tileDescriptionID} className={readyClasses["sr-only"]}>
               {`${title}. ${statusMessage()}`}
             </span>
           )}
           {tileAction ?? null}
         </header>
-        <div className={classes['content']}>
+        <div className={classes["content"]}>
           {imageProps && imageProps.src.length > 0 && (
-            <figure className={classes['image']}>
+            <figure className={classes["image"]}>
               {!loading && <img {...imageProps} alt="" />}
             </figure>
           )}
           {(!imageProps || imageProps.src.length === 0) && (
-            <Icon className={classes['placeholder']} icon={Icons.Image} />
+            <Icon className={classes["placeholder"]} icon={Icons.Image} />
           )}
-          <span className={classes['title']}>{title}</span>
+          <span className={classes["title"]}>{title}</span>
         </div>
       </article>
     );

package/src/Tiles/Tiles.test.tsx

@@ -1,11 +1,11 @@
-import React, { useEffect, useRef } from 'react';
-import { Tiles, Props } from './Tiles';
-import { Tile } from './Tile';
-import { render } from '@testing-library/react';
-import { Icon, Icons } from '../Icon/Icon';
-import { ContextMenu } from '../ContextMenu/ContextMenu';
-import { ContextMenuItem } from '../ContextMenu/ContextMenuItem';
-import { IconButton } from '../Button/IconButton';
+import React, { useEffect, useRef } from "react";
+import { Tiles, Props } from "./Tiles";
+import { Tile } from "./Tile";
+import { render } from "@testing-library/react";
+import { Icon, Icons } from "../Icon/Icon";
+import { ContextMenu } from "../ContextMenu/ContextMenu";
+import { ContextMenuItem } from "../ContextMenu/ContextMenuItem";
+import { IconButton } from "../Button/IconButton";
 
 const onShow = jest.fn();
 const onClose = jest.fn();
@@ -47,7 +47,7 @@ const defaultParams: Props = {
       key="tile1"
       title="Tile1"
       imageProps={{
-        src: 'https://www.onegini.com/hubfs/OneWelcome_Beeldmerk.svg',
+        src: "https://www.onegini.com/hubfs/OneWelcome_Beeldmerk.svg"
       }}
       enabled={true}
       tileAction={contextMenu}
@@ -57,7 +57,7 @@ const defaultParams: Props = {
       key="tile2"
       title="Tile2"
       imageProps={{
-        src: 'https://www.onegini.com/hubfs/OneWelcome_Beeldmerk.svg',
+        src: "https://www.onegini.com/hubfs/OneWelcome_Beeldmerk.svg"
       }}
       enabled={false}
       tileAction={addToFavoriteButton}
@@ -67,12 +67,12 @@ const defaultParams: Props = {
       key="tile3"
       title="Tile3"
       imageProps={{
-        src: 'https://www.onegini.com/hubfs/OneWelcome_Beeldmerk.svg',
+        src: "https://www.onegini.com/hubfs/OneWelcome_Beeldmerk.svg"
       }}
       tileAction={contextMenu}
-    />,
+    />
   ],
-  className: 'example-classname',
+  className: "example-classname"
 };
 
 const createTiles = (params?: (defaultParams: Props) => Props) => {
@@ -81,48 +81,48 @@ const createTiles = (params?: (defaultParams: Props) => Props) => {
     parameters = params(defaultParams);
   }
   const queries = render(<Tiles {...parameters} data-testid="tiles" />);
-  const tiles = queries.getByTestId('tiles');
+  const tiles = queries.getByTestId("tiles");
 
   let individualTiles;
 
   if (!parameters.loading) {
-    individualTiles = queries.getAllByTestId('tile');
+    individualTiles = queries.getAllByTestId("tile");
   }
 
   return {
     ...queries,
     tiles,
-    individualTiles,
+    individualTiles
   };
 };
 
-describe('Tiles should render', () => {
-  it('renders without crashing', () => {
+describe("Tiles should render", () => {
+  it("renders without crashing", () => {
     const { tiles, individualTiles } = createTiles();
 
     individualTiles?.forEach((tile, index) => {
-      expect(tile.querySelector('.title')).toHaveTextContent('Tile' + (index + 1).toFixed(0));
-      expect(tile.querySelector('img')).toBeTruthy();
+      expect(tile.querySelector(".title")).toHaveTextContent("Tile" + (index + 1).toFixed(0));
+      expect(tile.querySelector("img")).toBeTruthy();
     });
 
-    expect(tiles).toHaveClass('example-classname');
+    expect(tiles).toHaveClass("example-classname");
     expect(tiles).toBeDefined();
   });
 });
 
-describe('loading state should be handled properly', () => {
-  it('is loading', () => {
-    const { tiles } = createTiles((defaultParams) => ({ ...defaultParams, loading: true }));
+describe("loading state should be handled properly", () => {
+  it("is loading", () => {
+    const { tiles } = createTiles(defaultParams => ({ ...defaultParams, loading: true }));
 
-    expect(tiles).toHaveAttribute('aria-busy', 'true');
-    expect(tiles.querySelectorAll('.tile.loading').length).toBe(3);
+    expect(tiles).toHaveAttribute("aria-busy", "true");
+    expect(tiles.querySelectorAll(".tile.loading").length).toBe(3);
   });
 });
 
-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;
     }) => {
@@ -138,7 +138,7 @@ 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} />);

package/src/Tiles/Tiles.tsx

@@ -1,8 +1,8 @@
-import React, { ComponentPropsWithRef, ReactNode } from 'react';
-import classes from './Tiles.module.scss';
-import { Tile } from './Tile';
+import React, { ComponentPropsWithRef, ReactNode } from "react";
+import classes from "./Tiles.module.scss";
+import { Tile } from "./Tile";
 
-export interface Props extends ComponentPropsWithRef<'div'> {
+export interface Props extends ComponentPropsWithRef<"div"> {
   children: ReactNode;
   loading?: boolean;
 }
@@ -15,21 +15,21 @@ export const Tiles = React.forwardRef<HTMLDivElement, Props>(
           <Tile
             key="placeholder1"
             title="placeholder"
-            imageProps={{ src: 'placeholder' }}
+            imageProps={{ src: "placeholder" }}
             loading={true}
           />,
           <Tile
             key="placeholder2"
             title="placeholder"
-            imageProps={{ src: 'placeholder' }}
+            imageProps={{ src: "placeholder" }}
             loading={true}
           />,
           <Tile
             key="placeholder3"
             title="placeholder"
-            imageProps={{ src: 'placeholder' }}
+            imageProps={{ src: "placeholder" }}
             loading={true}
-          />,
+          />
         ];
       }
 
@@ -40,7 +40,7 @@ export const Tiles = React.forwardRef<HTMLDivElement, Props>(
       <div
         {...rest}
         ref={ref}
-        className={`${classes['tiles']} ${className ?? ''}`}
+        className={`${classes["tiles"]} ${className ?? ""}`}
         aria-live="polite"
         aria-busy={loading}
       >

package/src/Tooltip/Tooltip.test.tsx

@@ -1,11 +1,11 @@
-import React, { useEffect, useRef } from 'react';
-import { Tooltip, Props } from './Tooltip';
-import { render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import React, { useEffect, useRef } from "react";
+import { Tooltip, Props } from "./Tooltip";
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 const defaultParams: Props = {
-  children: 'This is a test message',
-  label: 'Label',
+  children: "This is a test message",
+  label: "Label"
 };
 
 const createTooltip = (params?: (defaultParams: Props) => Props) => {
@@ -14,67 +14,67 @@ const createTooltip = (params?: (defaultParams: Props) => Props) => {
     parameters = params(defaultParams);
   }
   const queries = render(<Tooltip {...parameters} data-testid="tooltip" />);
-  const tooltip = queries.getByTestId('tooltip');
+  const tooltip = queries.getByTestId("tooltip");
 
   return {
     ...queries,
-    tooltip,
+    tooltip
   };
 };
 
-describe('Tooltip should render', () => {
-  it('renders without crashing', () => {
-    const { tooltip, getByText } = createTooltip((defaultParams) => ({
+describe("Tooltip should render", () => {
+  it("renders without crashing", () => {
+    const { tooltip, getByText } = createTooltip(defaultParams => ({
       ...defaultParams,
-      className: 'testing',
+      className: "testing"
     }));
 
-    const tooltipText = getByText('This is a test message');
-    const label = getByText('Label');
+    const tooltipText = getByText("This is a test message");
+    const label = getByText("Label");
 
-    expect(tooltip).toHaveClass('testing');
-    expect(tooltipText).toHaveStyle({ top: '0px', left: '16px' });
+    expect(tooltip).toHaveClass("testing");
+    expect(tooltipText).toHaveStyle({ top: "0px", left: "16px" });
     expect(label).toBeTruthy();
     expect(tooltipText).toBeTruthy();
     expect(tooltip).toBeTruthy();
   });
 
-  it('should override the default placement and offset values', () => {
-    const { tooltip, getByText } = createTooltip((defaultParams) => ({
+  it("should override the default placement and offset values", () => {
+    const { tooltip, getByText } = createTooltip(defaultParams => ({
       ...defaultParams,
-      placement: { horizontal: 'center', vertical: 'center' },
+      placement: { horizontal: "center", vertical: "center" },
       offset: { top: 0, right: 16, left: 0, bottom: 16 },
-      transformOrigin: { horizontal: 'right', vertical: 'bottom' },
+      transformOrigin: { horizontal: "right", vertical: "bottom" }
     }));
 
-    const tooltipText = getByText('This is a test message');
-    expect(tooltipText).toHaveStyle({ right: '1024px', bottom: '768px' });
+    const tooltipText = getByText("This is a test message");
+    expect(tooltipText).toHaveStyle({ right: "1024px", bottom: "768px" });
     expect(tooltip).toBeTruthy();
   });
 });
 
-describe('It opens the tooltip', () => {
-  it('opens', () => {
+describe("It opens the tooltip", () => {
+  it("opens", () => {
     const { tooltip, getByText } = createTooltip();
 
-    const icon = tooltip.querySelector('.icon')!;
-    const tooltipHover = getByText('This is a test message');
+    const icon = tooltip.querySelector(".icon")!;
+    const tooltipHover = getByText("This is a test message");
     userEvent.hover(icon);
 
-    expect(tooltipHover).toHaveClass('visible');
-    expect(tooltipHover).toHaveAttribute('aria-hidden', 'false');
+    expect(tooltipHover).toHaveClass("visible");
+    expect(tooltipHover).toHaveAttribute("aria-hidden", "false");
 
-    userEvent.keyboard('{escape}');
+    userEvent.keyboard("{escape}");
 
-    expect(tooltipHover).not.toHaveClass('visible');
-    expect(tooltipHover).toHaveAttribute('aria-hidden', 'true');
+    expect(tooltipHover).not.toHaveClass("visible");
+    expect(tooltipHover).toHaveAttribute("aria-hidden", "true");
   });
 });
 
-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;
     }) => {
@@ -90,7 +90,7 @@ 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} />);