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

package/src/Tiles/Tile.module.scss

@@ -1,88 +0,0 @@
-/*!
- * 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/Tiles/Tile.test.tsx

@@ -1,187 +0,0 @@
-/*
- * 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";
-import { act } from "react-dom/test-utils";
-
-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", () => {
-    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();
-
-    act(() => {
-      userEvent.click(menutrigger);
-    });
-
-    expect(onShow).toHaveBeenCalled();
-    expect(popover).toHaveClass("show");
-    expect(popover).toHaveStyle({ opacity: "1;" });
-
-    act(() => {
-      userEvent.click(menuitem1);
-      userEvent.click(menuitem2);
-      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/Tiles/Tile.tsx

@@ -1,105 +0,0 @@
-/*
- * 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/Tooltip/Tooltip.module.scss

@@ -1,61 +0,0 @@
-/*!
- * 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/Tooltip/Tooltip.test.tsx

@@ -1,126 +0,0 @@
-/*
- * 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");
-    userEvent.hover(icon);
-
-    expect(tooltipHover).toHaveClass("visible");
-    expect(tooltipHover).toHaveAttribute("aria-hidden", "false");
-
-    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} />);
-  });
-});