@onewelcome/react-lib-components 2.3.0 → 3.0.1

package/src/components/Tag/Tag.test.tsx

@@ -0,0 +1,89 @@
+import React, { useRef, useEffect } from "react";
+import { Tag as TagComponent, Props } from "./Tag";
+import { render } from "@testing-library/react";
+import { Icons } from "../Icon/Icon";
+
+const defaultParams: Props = {};
+
+const createTag = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(
+    <TagComponent {...parameters} data-testid="Tag">
+      Tag content
+    </TagComponent>
+  );
+  const Tag = queries.getByTestId("Tag");
+
+  return {
+    ...queries,
+    Tag
+  };
+};
+
+describe("Tag should render", () => {
+  it("renders without crashing", () => {
+    const { Tag } = createTag();
+
+    expect(Tag).toBeDefined();
+  });
+
+  it("should render the enabled version", () => {
+    const { Tag } = createTag(defaultParams => ({ ...defaultParams, variant: "enabled" }));
+
+    expect(Tag).toHaveClass("tag-enabled");
+  });
+
+  it("should render the disabled version", () => {
+    const { Tag } = createTag(defaultParams => ({ ...defaultParams, variant: "disabled" }));
+
+    expect(Tag).toHaveClass("tag-disabled");
+  });
+
+  it("should render the custom version", () => {
+    const { Tag, debug } = createTag(defaultParams => ({
+      ...defaultParams,
+      backgroundColor: "blue",
+      color: "white",
+      icon: Icons.Calendar
+    }));
+
+    debug();
+
+    const icon = Tag.querySelector("[data-icon]");
+
+    expect(Tag).toHaveClass("tag");
+    expect(Tag).toHaveStyle("background-color: blue");
+    expect(Tag).toHaveStyle("color: white");
+    expect(Tag).toHaveTextContent("Tag content");
+    expect(icon).toHaveClass("icon-calendar");
+  });
+});
+
+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 <TagComponent {...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/Tag/Tag.tsx

@@ -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.
+ */
+
+import React, { ForwardRefRenderFunction, HTMLAttributes, forwardRef } from "react";
+import { Icon, Icons } from "../Icon/Icon";
+import classes from "./Tag.module.scss";
+import { Typography } from "../Typography/Typography";
+
+export interface Props extends HTMLAttributes<HTMLDivElement> {
+  variant?: "enabled" | "disabled";
+  icon?: Icons;
+  backgroundColor?: string;
+  color?: string;
+  children?: string;
+}
+
+const TagComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  { children, variant, icon, backgroundColor, color, ...rest }: Props,
+  ref
+) => {
+  const determineIcon = () => {
+    if (icon) {
+      return <Icon size="inherit" icon={icon} />;
+    }
+
+    if (variant === "enabled") {
+      return <Icon size="inherit" icon={Icons.CheckmarkCircleAlt} />;
+    } else if (variant === "disabled") {
+      return <Icon size="inherit" icon={Icons.Forbidden} />;
+    }
+  };
+
+  const determineClassName = () => {
+    if (variant === "enabled") {
+      return classes["tag-enabled"];
+    } else if (variant === "disabled") {
+      return classes["tag-disabled"];
+    }
+  };
+
+  return (
+    <div
+      ref={ref}
+      className={`${determineClassName()} ${classes["tag"]} ${rest.className ?? ""}`}
+      style={{ backgroundColor, color }}
+      {...rest}
+    >
+      {determineIcon()}
+      <Typography spacing={{ marginBottom: 0 }} variant="body" className={classes["label"]}>
+        {children}
+      </Typography>
+    </div>
+  );
+};
+
+export const Tag = forwardRef(TagComponent);

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

@@ -22,6 +22,7 @@ import { ContextMenu } from "../ContextMenu/ContextMenu";
 import { IconButton } from "../Button/IconButton";
 import { ContextMenuItem } from "../ContextMenu/ContextMenuItem";
 import userEvent from "@testing-library/user-event";
+import { waitFor } from "@storybook/testing-library";
 
 const onShow = jest.fn();
 const onClose = jest.fn();
@@ -144,7 +145,7 @@ describe("contextmenu", () => {
     await userEvent.click(menutrigger);
 
     expect(onShow).toHaveBeenCalled();
-    expect(popover).toHaveClass("show");
+    await waitFor(() => expect(popover).toHaveClass("show"));
     expect(popover).toHaveStyle({ opacity: "1;" });
 
     await userEvent.click(menuitem1);

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

@@ -16,6 +16,132 @@
 
 @use "../../mixins.module.scss";
 
+@mixin triangle($color: #000, $size: 0.5rem, $direction, $position: "center") {
+  $directions: top, bottom, left, right;
+  @if not index($directions, $direction) {
+    @error "Invalid value `#{$direction}` for `$direction`. Must be one of: `top`, `bottom`, `left`, `right`.";
+  }
+
+  $positions: center, start, end;
+  @if not index($positions, $position) {
+    @error "Invalid value `#{$position}` for `$position`. Must be one of: `center`, `start`, `end`.";
+  }
+
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: calc($size / 2);
+  border-color: transparent;
+  border-#{$direction}-color: $color;
+  position: absolute;
+
+  @if $direction == "top" or $direction == "bottom" {
+    @if $position == "end" {
+      left: 1rem;
+      right: initial;
+    } @else if $position == "start" {
+      right: 0.75rem;
+      left: initial;
+    } @else {
+      // position == "center"
+      left: 50%;
+      right: initial;
+      transform: translateX(-50%);
+    }
+  } @else {
+    // direction == "left" or direction == "right"
+    @if $position == "end" {
+      top: 0.875rem;
+      bottom: initial;
+    } @else if $position == "start" {
+      bottom: 0.9375rem;
+      top: initial;
+    } @else {
+      // position == "center"
+      top: 50%;
+      bottom: initial;
+      transform: translateY(-50%);
+    }
+  }
+
+  @if $direction == "top" {
+    top: 100%;
+    border-bottom-width: 0;
+  } @else if $direction == "bottom" {
+    bottom: 100%;
+    border-top-width: 0;
+  } @else if $direction == "left" {
+    left: 100%;
+    border-right-width: 0;
+  } @else if $direction == "right" {
+    right: 100%;
+    border-left-width: 0;
+  }
+}
+
+@mixin triangleProperties($color) {
+  &.top {
+    &:after {
+      @include triangle($color, 0.5rem, "top", "center");
+    }
+  }
+  &.top-start {
+    &:after {
+      @include triangle($color, 0.5rem, "top", "start");
+    }
+  }
+  &.top-end {
+    &:after {
+      @include triangle($color, 0.5rem, "top", "end");
+    }
+  }
+  &.bottom {
+    &:after {
+      @include triangle($color, 0.5rem, "bottom", "center");
+    }
+  }
+  &.bottom-start {
+    &:after {
+      @include triangle($color, 0.5rem, "bottom", "start");
+    }
+  }
+  &.bottom-end {
+    &:after {
+      @include triangle($color, 0.5rem, "bottom", "end");
+    }
+  }
+  &.left {
+    &:after {
+      @include triangle($color, 0.5rem, "left", "center");
+    }
+  }
+  &.left-start {
+    &:after {
+      @include triangle($color, 0.5rem, "left", "start");
+    }
+  }
+  &.left-end {
+    &:after {
+      @include triangle($color, 0.5rem, "left", "end");
+    }
+  }
+  &.right {
+    &:after {
+      @include triangle($color, 0.5rem, "right", "center");
+    }
+  }
+  &.right-start {
+    &:after {
+      @include triangle($color, 0.5rem, "right", "start");
+    }
+  }
+  &.right-end {
+    &:after {
+      @include triangle($color, 0.5rem, "right", "end");
+    }
+  }
+}
+
 .wrapper {
   display: flex;
   align-items: center;
@@ -37,17 +163,36 @@
   $transition-property: opacity, transform;
 
   position: fixed;
-  background-color: var(--tooltip-background-color);
-  padding: 0.1875rem 0.5rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  border-radius: 0.125rem;
+  padding: 0.75rem;
   color: var(--light);
-  max-width: 330px;
+  max-width: 20.625rem;
   opacity: 0;
   transform: scale(0);
-  transform-origin: center left;
+  transform-origin: center center;
   pointer-events: none;
+  box-shadow: 0 0.0625rem 0.3125rem 0 rgba(1, 5, 50, 0.3);
 
   @include mixins.transition($transition-property, 0.2s, ease-in-out);
 
+  &.black {
+    background-color: var(--tooltip-background-color);
+
+    @include triangleProperties(var(--tooltip-background-color));
+  }
+
+  &.blue {
+    background-color: var(--color-blue-grey500);
+
+    @include triangleProperties(var(--color-blue-grey500));
+  }
+
+  &:after {
+    content: "";
+  }
+
   &.visible {
     opacity: 1;
     transform: scale(1);
@@ -56,6 +201,14 @@
 
 .label {
   &:focus-visible {
-    outline: 0.5px dashed var(--color-primary);
+    outline: 0.0313rem dashed var(--color-primary);
   }
 }
+
+.tooltip-title {
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  display: block;
+  margin-bottom: 0.25rem;
+}