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

package/src/components/Button/Button.test.tsx

@@ -0,0 +1,138 @@
+/*
+ * 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, { useRef, useEffect } from "react";
+import { Button, Props } from "./Button";
+import { render } from "@testing-library/react";
+import { Icon, Icons } from "../Icon/Icon";
+
+const defaultParams: Props = {};
+
+const createButton = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(
+    <Button {...parameters} data-testid="button">
+      button content
+    </Button>
+  );
+  const button = queries.getByTestId("button");
+
+  return {
+    ...queries,
+    button
+  };
+};
+
+describe("Button should render", () => {
+  it("renders without crashing", () => {
+    const { button } = createButton();
+
+    expect(button).toBeDefined();
+  });
+});
+
+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?: (ref: React.RefObject<HTMLElement>) => void;
+    }) => {
+      const ref = useRef(null);
+
+      useEffect(() => {
+        if (ref.current) {
+          propagateRef && propagateRef(ref);
+        }
+      }, [ref]);
+
+      return <Button {...defaultParams} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute("data-ref", "testing");
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});
+
+describe("Button should render", () => {
+  it("renders without crashing", () => {
+    const { button } = createButton();
+
+    expect(button).toBeDefined();
+  });
+});
+
+describe("Different variants of the button", () => {
+  it('should have a class of "primary"', () => {
+    const { button } = createButton();
+    expect(button.classList.contains("primary")).toBe(true);
+  });
+
+  it('should have a class of "secondary"', () => {
+    const { button } = createButton(defaultParams => ({ ...defaultParams, color: "secondary" }));
+    expect(button.classList.contains("secondary")).toBe(true);
+  });
+
+  it('should have a class of "warning"', () => {
+    const { button } = createButton(defaultParams => ({ ...defaultParams, color: "warning" }));
+    expect(button.classList.contains("warning")).toBe(true);
+  });
+
+  it('should have a class of "fill"', () => {
+    const { button } = createButton(defaultParams => ({ ...defaultParams, variant: "fill" }));
+    expect(button.classList.contains("fill")).toBe(true);
+  });
+
+  it('should have a class of "outline"', () => {
+    const { button } = createButton(defaultParams => ({ ...defaultParams, variant: "outline" }));
+    expect(button.classList.contains("outline")).toBe(true);
+  });
+
+  it('should have a class of "text"', () => {
+    const { button } = createButton(defaultParams => ({ ...defaultParams, variant: "text" }));
+    expect(button.classList.contains("text")).toBe(true);
+  });
+});
+
+describe("Button contains an icon", () => {
+  it("Contains an icon at the start", () => {
+    const { button } = createButton(defaultParams => ({
+      ...defaultParams,
+      startIcon: <Icon icon={Icons.Calendar} />
+    }));
+
+    expect(button.classList.contains("has-icon")).toBe(true);
+    expect(button.firstElementChild?.nodeName).toBe("I");
+    expect(button.querySelector("i + span")!.innerHTML).toBe("button content");
+  });
+
+  it("Contains an icon at the end", () => {
+    const { button } = createButton(defaultParams => ({
+      ...defaultParams,
+      endIcon: <Icon icon={Icons.Calendar} />
+    }));
+
+    expect(button.classList.contains("has-icon")).toBe(true);
+    expect(button.lastElementChild?.nodeName).toBe("I");
+    expect(button.querySelector("span")!.innerHTML).toBe("button content");
+  });
+});

package/src/components/Button/IconButton.module.scss

@@ -0,0 +1,69 @@
+/*!
+ * 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.
+ */
+
+@use "../../mixins.module.scss";
+
+.icon-button {
+  border: var(--button-border-width) var(--button-border-style) transparent;
+  background-color: transparent;
+  padding: 0;
+  border-radius: var(--button-border-radius);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: auto;
+
+  span {
+    vertical-align: top;
+  }
+
+  /** Sizes **/
+  &.button-s {
+    span {
+      font-size: 0.75rem;
+    }
+    width: 1.875rem;
+    height: 1.875rem;
+  }
+
+  &.button-m {
+    span {
+      font-size: 1rem;
+    }
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+
+  &.button-l {
+    span {
+      font-size: 1.375rem;
+    }
+    width: 3.125rem;
+    height: 3.125rem;
+  }
+
+  &.fill {
+    @include mixins.button("fill", "icon");
+  }
+
+  &.text {
+    @include mixins.button("text", "icon");
+  }
+
+  &.outline {
+    @include mixins.button("outline", "icon");
+  }
+}

package/src/components/Button/IconButton.test.tsx

@@ -0,0 +1,122 @@
+/*
+ * 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, { useRef, useEffect } from "react";
+import { IconButton, Props } from "./IconButton";
+import { render } from "@testing-library/react";
+
+const defaultParams: Props = {
+  title: "iconbutton"
+};
+
+const createIconButton = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(
+    <IconButton {...parameters} data-testid="iconButton">
+      iconButton content
+    </IconButton>
+  );
+  const iconButton = queries.getByTestId("iconButton");
+
+  return {
+    ...queries,
+    iconButton
+  };
+};
+
+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", () => {
+    const ExampleComponent = ({
+      propagateRef
+    }: {
+      propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
+    }) => {
+      const ref = useRef(null);
+
+      useEffect(() => {
+        if (ref.current) {
+          propagateRef && propagateRef(ref);
+        }
+      }, [ref]);
+
+      return <IconButton {...defaultParams} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute("data-ref", "testing");
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});
+
+describe("Different variants of the button", () => {
+  it('should have a class of "primary"', () => {
+    const { iconButton } = createIconButton();
+    expect(iconButton.classList.contains("primary")).toBe(true);
+  });
+
+  it('should have a class of "secondary"', () => {
+    const { iconButton } = createIconButton(defaultParams => ({
+      ...defaultParams,
+      color: "secondary"
+    }));
+    expect(iconButton.classList.contains("secondary")).toBe(true);
+  });
+
+  it('should have a class of "warning"', () => {
+    const { iconButton } = createIconButton(defaultParams => ({
+      ...defaultParams,
+      color: "warning"
+    }));
+    expect(iconButton.classList.contains("warning")).toBe(true);
+  });
+
+  it('should have a class of "fill"', () => {
+    const { iconButton } = createIconButton(defaultParams => ({
+      ...defaultParams,
+      variant: "fill"
+    }));
+    expect(iconButton.classList.contains("fill")).toBe(true);
+  });
+
+  it('should have a class of "outline"', () => {
+    const { iconButton } = createIconButton(defaultParams => ({
+      ...defaultParams,
+      variant: "outline"
+    }));
+    expect(iconButton.classList.contains("outline")).toBe(true);
+  });
+
+  it('should have a class of "text"', () => {
+    const { iconButton } = createIconButton(defaultParams => ({
+      ...defaultParams,
+      variant: "text"
+    }));
+    expect(iconButton.classList.contains("text")).toBe(true);
+  });
+});

package/src/components/Button/IconButton.tsx

@@ -0,0 +1,59 @@
+/*
+ * 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, 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";
+  className?: string;
+  title?: string;
+}
+
+export const IconButtonComponent: ForwardRefRenderFunction<HTMLButtonElement, Props> = (
+  { children, color = "primary", variant = "text", iconSize = "m", title, className, ...rest },
+  ref
+) => {
+  if (!title) {
+    console.error("Please make sure to specify a 'title' prop to your IconButton component! ");
+  }
+
+  const iconButtonClasses = [
+    classes["icon-button"],
+    classes[variant],
+    classes[color],
+    classes["button-" + iconSize]
+  ];
+
+  if (className) {
+    iconButtonClasses.push(className);
+  }
+
+  return (
+    <BaseButton {...rest} ref={ref} className={iconButtonClasses.join(" ")}>
+      <Fragment>
+        {children}
+        <span className={readyclasses["sr-only"]}>{title}</span>
+      </Fragment>
+    </BaseButton>
+  );
+};
+
+export const IconButton = React.forwardRef(IconButtonComponent);

package/src/components/ContextMenu/ContextMenu.test.tsx

@@ -0,0 +1,314 @@
+/*
+ * 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, { 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",
+  trigger: <Button data-testid="trigger">Click me for a context menu</Button>,
+  children: [
+    <ContextMenuItem onClick={onClick} data-testid="contextmenuitem" key="1">
+      Example item 1
+    </ContextMenuItem>,
+    <ContextMenuItem onClick={onClick} data-testid="contextmenuitem2" key="2">
+      Example item 2
+    </ContextMenuItem>,
+    <ContextMenuItem onClick={onClick} data-testid="contextmenuitem3" key="3">
+      Example item 3
+    </ContextMenuItem>
+  ],
+  show: false,
+  onShow: onShow
+};
+
+const createContextMenu = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+
+  const queries = render(<ContextMenu {...parameters} data-testid="contextmenu"></ContextMenu>);
+
+  const contextmenu = queries.getByTestId("contextmenu");
+  const trigger = queries.getByTestId("trigger");
+
+  return {
+    ...queries,
+    contextmenu,
+    trigger
+  };
+};
+
+describe("ContextMenu should render", () => {
+  it("renders without crashing", () => {
+    const { contextmenu } = createContextMenu();
+
+    expect(contextmenu).toBeTruthy();
+  });
+
+  it("executed onShow function", async () => {
+    const { trigger } = createContextMenu();
+
+    await userEvent.click(trigger);
+
+    expect(onShow).toHaveBeenCalled();
+  });
+
+  it("executed onShow function", async () => {
+    const { getByTestId } = createContextMenu(defaultParams => ({
+      ...defaultParams,
+      show: true
+    }));
+
+    const button = getByTestId("contextmenuitem");
+
+    await userEvent.click(button);
+
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  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.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;
+    console.error = jest.fn();
+
+    let actual;
+
+    try {
+      // @ts-ignore: mandatory props (test for non-typescript react projects)
+      render(<ContextMenu />);
+    } catch (e: any) {
+      actual = e.message;
+    }
+
+    const expected = "You need to provide an ID to the context menu";
+
+    expect(actual).toEqual(expected);
+
+    console.error = err;
+  });
+});
+
+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?: (ref: React.RefObject<HTMLElement>) => void;
+    }) => {
+      const ref = useRef(null);
+
+      useEffect(() => {
+        if (ref.current) {
+          propagateRef && propagateRef(ref);
+        }
+      }, [ref]);
+
+      return <ContextMenu {...defaultParams} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      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", async () => {
+    const { getByTestId, trigger } = createContextMenu();
+    const firstContextMenuItem = getByTestId("contextmenuitem");
+    const secondContextMenuItem = getByTestId("contextmenuitem2");
+    const thirdContextMenuItem = getByTestId("contextmenuitem3");
+
+    await userEvent.tab();
+    await userEvent.keyboard("{arrowdown}");
+    await userEvent.keyboard("{arrowdown}");
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+    expect(firstContextMenuItem).toHaveFocus();
+
+    await userEvent.keyboard("{arrowdown}");
+    expect(secondContextMenuItem).toHaveFocus();
+
+    await userEvent.keyboard("{arrowdown}");
+    expect(thirdContextMenuItem).toHaveFocus();
+
+    await userEvent.keyboard("{arrowdown}");
+    expect(firstContextMenuItem).toHaveFocus();
+
+    await userEvent.keyboard("{arrowup}");
+    expect(thirdContextMenuItem).toHaveFocus();
+
+    await userEvent.keyboard("{arrowup}");
+    expect(secondContextMenuItem).toHaveFocus();
+  });
+
+  it("opens correctly with enter key, closing works with escape key.", async () => {
+    const { trigger } = createContextMenu();
+
+    await userEvent.tab();
+    await userEvent.keyboard("{enter}");
+
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+
+    await userEvent.keyboard("{escape}");
+
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("opens correctly with space, home and end buttons work", async () => {
+    const { trigger, getByTestId } = createContextMenu();
+    const firstContextMenuItem = getByTestId("contextmenuitem");
+    const thirdContextMenuItem = getByTestId("contextmenuitem3");
+
+    await userEvent.tab();
+    await userEvent.keyboard("[space]");
+
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+
+    await userEvent.keyboard("{end}");
+
+    expect(thirdContextMenuItem).toHaveFocus();
+
+    await userEvent.keyboard("{home}");
+
+    expect(firstContextMenuItem).toHaveFocus();
+  });
+
+  it("opens correctly with space, navigate with arrow keys, select with enter", async () => {
+    onClick.mockImplementation(e => {
+      expect(e.target.getAttribute("data-testid")).toBe("contextmenuitem3");
+    });
+
+    const { trigger, getByTestId } = createContextMenu(defaultParams => ({
+      ...defaultParams
+    }));
+    const thirdContextMenuItem = getByTestId("contextmenuitem3");
+
+    await userEvent.tab();
+    await userEvent.keyboard("[space]");
+
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+
+    await userEvent.keyboard("{arrowdown}");
+    await userEvent.keyboard("{arrowdown}");
+    await userEvent.keyboard("{arrowdown}");
+
+    expect(thirdContextMenuItem).toHaveFocus();
+
+    await userEvent.keyboard("{enter}");
+
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  it("opens correctly with enter, navigate with arrow keys, select with space", async () => {
+    onClick.mockImplementation(e => {
+      expect(e.target.getAttribute("data-testid")).toBe("contextmenuitem3");
+    });
+
+    const { trigger, getByTestId } = createContextMenu(defaultParams => ({
+      ...defaultParams
+    }));
+    const thirdContextMenuItem = getByTestId("contextmenuitem3");
+
+    await userEvent.tab();
+    await userEvent.keyboard("{enter}");
+
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+
+    await userEvent.keyboard("{arrowdown}");
+    await userEvent.keyboard("{arrowdown}");
+    await userEvent.keyboard("{arrowdown}");
+
+    expect(thirdContextMenuItem).toHaveFocus();
+
+    await userEvent.keyboard("[space]");
+
+    expect(onClick).toHaveBeenCalled();
+
+    await userEvent.keyboard("[space]");
+
+    expect(thirdContextMenuItem).toHaveFocus();
+  });
+
+  it("opens correctly with enter, navigate with arrow keys skipping the decorative element", async () => {
+    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");
+
+    await userEvent.tab();
+    await userEvent.keyboard("{enter}");
+
+    expect(getByText("test")).toBeInTheDocument();
+
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+
+    await userEvent.keyboard("{arrowdown}");
+    await userEvent.keyboard("{arrowdown}");
+    await userEvent.keyboard("{arrowdown}");
+
+    expect(thirdContextMenuItem).toHaveFocus();
+
+    await userEvent.keyboard("[space]");
+
+    expect(onClick).toHaveBeenCalled();
+
+    await userEvent.keyboard("[space]");
+
+    expect(thirdContextMenuItem).toHaveFocus();
+  });
+});