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

package/src/components/Tiles/Tile.module.scss

@@ -0,0 +1,88 @@
+/*!
+ * 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";
+
+.tile {
+  border: 1px solid var(--light-grey-border);
+  border-radius: 8px;
+  box-sizing: border-box;
+  padding: 0 0 2rem;
+  background-color: var(--light);
+  @include mixins.transition(box-shadow, 0.2s, ease-in-out);
+  font-family: var(--font-family);
+
+  &:hover {
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.29);
+  }
+
+  header {
+    display: flex;
+    align-items: center;
+
+    .icon {
+      padding: 0 1rem;
+    }
+  }
+
+  figure {
+    margin: 0 0 1rem;
+    height: 3rem;
+
+    img {
+      vertical-align: top;
+      height: 3rem;
+      width: auto;
+    }
+  }
+
+  .placeholder {
+    font-size: 3rem;
+    margin: 0 0 1rem;
+    color: var(--greyed-out);
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: default;
+    padding: 0 1rem;
+  }
+
+  &.loading {
+    header {
+      display: none;
+    }
+
+    .image {
+      margin-top: 2.5rem;
+      @include mixins.skeletonLoading();
+      border-radius: 0.5rem;
+      width: 3rem;
+      height: 3rem;
+    }
+
+    .title {
+      @include mixins.skeletonLoading();
+      color: transparent;
+      display: inline-block;
+      width: 70%;
+      border-radius: 0.5rem;
+    }
+  }
+}

package/src/components/Tiles/Tile.test.tsx

@@ -0,0 +1,182 @@
+/*
+ * 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 { 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();
+const contextMenuItemOnClick = jest.fn();
+
+const contextMenu = (
+  <ContextMenu
+    id="context_menu"
+    data-testid="contextmenu"
+    onShow={onShow}
+    onClose={onClose}
+    trigger={
+      <IconButton data-testid="contextmenu-trigger" title="context menu">
+        <Icon icon={Icons.EllipsisAlt} />
+      </IconButton>
+    }
+  >
+    <ContextMenuItem data-testid="item1" onClick={contextMenuItemOnClick}>
+      Item 1
+    </ContextMenuItem>
+    <ContextMenuItem data-testid="item2" onClick={contextMenuItemOnClick}>
+      Item 2
+    </ContextMenuItem>
+    <ContextMenuItem data-testid="item3" onClick={contextMenuItemOnClick}>
+      Item 3
+    </ContextMenuItem>
+  </ContextMenu>
+);
+
+const defaultParams: Props = {
+  title: "tile",
+  enabled: true,
+  tileAction: contextMenu
+};
+
+const createTile = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(
+    <Tile {...parameters} data-testid="tile">
+      tile content
+    </Tile>
+  );
+  const tile = queries.getByTestId("tile");
+  const menutrigger = queries.getByTestId("contextmenu-trigger");
+
+  return {
+    ...queries,
+    tile,
+    menutrigger
+  };
+};
+
+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).toBeDefined();
+  });
+
+  it("renders disabled", () => {
+    const { tile } = createTile(defaultParams => ({ ...defaultParams, enabled: false }));
+
+    expect(tile.querySelector(".icon-checkmark")).toBeFalsy();
+    expect(tile.querySelector(".icon-forbidden")).toBeTruthy();
+  });
+
+  it("renders no status", () => {
+    const { tile } = createTile(defaultParams => ({ ...defaultParams, enabled: undefined }));
+
+    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", () => {
+    // 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(<Tile imageProps={{ src: "test" }} />);
+    } catch (e: any) {
+      actual = e.message;
+    }
+
+    const expected = "Please make sure to pass a title prop to your Tile component.";
+
+    expect(actual).toEqual(expected);
+
+    console.error = err;
+  });
+});
+
+describe("contextmenu", () => {
+  it("should render everything correctly", async () => {
+    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");
+
+    expect(popover).toHaveStyle({ opacity: "0;" });
+    expect(menutrigger).toBeTruthy();
+    expect(contextMenu).toBeTruthy();
+    expect(menuitem1).toBeTruthy();
+    expect(menuitem2).toBeTruthy();
+    expect(menuitem3).toBeTruthy();
+
+    await userEvent.click(menutrigger);
+
+    expect(onShow).toHaveBeenCalled();
+    expect(popover).toHaveClass("show");
+    expect(popover).toHaveStyle({ opacity: "1;" });
+
+    await userEvent.click(menuitem1);
+    await userEvent.click(menuitem2);
+    await userEvent.click(menuitem3);
+
+    expect(contextMenuItemOnClick).toHaveBeenCalledTimes(3);
+  });
+});
+
+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 <Tile {...defaultParams} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute("data-ref", "testing");
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});

package/src/components/Tiles/Tile.tsx

@@ -0,0 +1,105 @@
+/*
+ * 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, {
+  ComponentPropsWithoutRef,
+  ComponentPropsWithRef,
+  ForwardRefRenderFunction,
+  ReactElement,
+  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";
+
+interface ImageProps extends ComponentPropsWithoutRef<"img"> {
+  src: string;
+}
+
+export interface Props extends ComponentPropsWithRef<"div"> {
+  title: string;
+  imageProps?: ImageProps;
+  enabled?: boolean;
+  loading?: boolean;
+  tileAction?: ReactElement<ContextMenuProps> | ReactElement<IconButtonProps>;
+}
+
+const TileComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  { title, imageProps, enabled, className, loading, tileAction, ...rest }: Props,
+  ref
+) => {
+  const [tileDescriptionID] = useState(generateID(20));
+
+  if (!title) {
+    throw new Error("Please make sure to pass a title prop to your Tile component.");
+  }
+
+  const statusMessage = () => {
+    if (enabled) {
+      return "Status: enabled";
+    }
+
+    return "Status: disabled";
+  };
+
+  return (
+    <article
+      {...rest}
+      tabIndex={0}
+      aria-labelledby={tileDescriptionID}
+      ref={ref}
+      className={`${classes["tile"]} ${loading ? classes["loading"] : ""}`}
+    >
+      <header style={{ justifyContent: enabled === undefined ? "flex-end" : "space-between" }}>
+        {enabled === true && (
+          <Icon
+            color="var(--success)"
+            icon={Icons.Checkmark}
+            className={`${classes["icon"]} ${className ?? ""}`}
+          />
+        )}
+        {enabled === false && (
+          <Icon
+            color="var(--greyed-out)"
+            icon={Icons.Forbidden}
+            className={`${classes["icon"]} ${className ?? ""}`}
+          />
+        )}
+        {enabled !== undefined && (
+          <span id={tileDescriptionID} className={readyClasses["sr-only"]}>
+            {`${title}. ${statusMessage()}`}
+          </span>
+        )}
+        {tileAction ?? null}
+      </header>
+      <div className={classes["content"]}>
+        {imageProps && imageProps.src.length > 0 && (
+          <figure className={classes["image"]}>{!loading && <img {...imageProps} alt="" />}</figure>
+        )}
+        {(!imageProps || imageProps.src.length === 0) && (
+          <Icon className={classes["placeholder"]} icon={Icons.Image} />
+        )}
+        <span className={classes["title"]}>{title}</span>
+      </div>
+    </article>
+  );
+};
+
+export const Tile = React.forwardRef(TileComponent);

package/src/components/Tooltip/Tooltip.module.scss

@@ -0,0 +1,61 @@
+/*!
+ * 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";
+
+.wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.tooltip-wrapper {
+  .icon {
+    margin-left: 0.5rem;
+    @include mixins.transition(all, 0.2s, ease-in-out);
+    color: var(--greyed-out);
+
+    &:hover {
+      color: var(--default);
+    }
+  }
+}
+
+.tooltip {
+  $transition-property: opacity, transform;
+
+  position: fixed;
+  background-color: var(--default);
+  padding: 0.1875rem 0.5rem;
+  color: var(--light);
+  max-width: 330px;
+  opacity: 0;
+  transform: scale(0);
+  transform-origin: center left;
+  pointer-events: none;
+
+  @include mixins.transition($transition-property, 0.2s, ease-in-out);
+
+  &.visible {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.label {
+  &:focus-visible {
+    outline: 0.5px dashed var(--color-primary);
+  }
+}

package/src/components/Tooltip/Tooltip.test.tsx

@@ -0,0 +1,126 @@
+/*
+ * 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 { Tooltip, Props } from "./Tooltip";
+import { render, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+const defaultParams: Props = {
+  children: "This is a test message",
+  label: "Label"
+};
+
+const createTooltip = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(<Tooltip {...parameters} data-testid="tooltip" />);
+  const tooltip = queries.getByTestId("tooltip");
+
+  return {
+    ...queries,
+    tooltip
+  };
+};
+
+describe("Tooltip should render", () => {
+  it("renders without crashing", async () => {
+    const { tooltip, getByText } = createTooltip(defaultParams => ({
+      ...defaultParams,
+      className: "testing"
+    }));
+
+    const tooltipText = getByText("This is a test message");
+    const label = getByText("Label");
+
+    expect(tooltip).toHaveClass("testing");
+    await waitFor(() => expect(tooltipText).toHaveStyle({ top: "0px", left: "16px" }));
+    expect(label).toBeTruthy();
+    expect(tooltipText).toBeTruthy();
+    expect(tooltip).toBeTruthy();
+  });
+
+  it("renders with label as ReactElement", () => {
+    const labelText = "llaabbeell";
+    const { getByText } = createTooltip(defaultParams => ({
+      ...defaultParams,
+      label: <div>{labelText}</div>
+    }));
+
+    expect(getByText(labelText)).toBeDefined();
+  });
+
+  it("should override the default placement and offset values", async () => {
+    const { tooltip, getByText } = createTooltip(defaultParams => ({
+      ...defaultParams,
+      placement: { horizontal: "center", vertical: "center" },
+      offset: { top: 0, right: 16, left: 0, bottom: 16 },
+      transformOrigin: { horizontal: "right", vertical: "bottom" }
+    }));
+
+    const tooltipText = getByText("This is a test message");
+    await waitFor(() => expect(tooltipText).toHaveStyle({ right: "1024px", bottom: "768px" }));
+    expect(tooltip).toBeTruthy();
+  });
+});
+
+describe("It opens the tooltip", () => {
+  it("opens", async () => {
+    const { tooltip, getByText } = createTooltip();
+
+    const icon = tooltip.querySelector(".icon")!;
+    const tooltipHover = getByText("This is a test message");
+    await userEvent.hover(icon);
+
+    expect(tooltipHover).toHaveClass("visible");
+    expect(tooltipHover).toHaveAttribute("aria-hidden", "false");
+
+    await userEvent.keyboard("{escape}");
+
+    await waitFor(() => {
+      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", () => {
+    const ExampleComponent = ({
+      propagateRef
+    }: {
+      propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
+    }) => {
+      const ref = useRef(null);
+
+      useEffect(() => {
+        if (ref.current) {
+          propagateRef && propagateRef(ref);
+        }
+      }, [ref]);
+
+      return <Tooltip {...defaultParams} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute("data-ref", "testing");
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});