@onewelcome/react-lib-components 2.2.0 → 3.0.0

package/src/components/ProgressBar/ProgressBar.module.scss

@@ -15,10 +15,29 @@
  */
 @import "../../mixins.module.scss";
 
+$speed: 1.5s;
+
+.header {
+  display: flex;
+  justify-content: space-between;
+}
+
+.label,
+.percentage {
+  font-weight: 500;
+}
+
+.caption {
+  color: var(--color-blue-grey500);
+  line-height: var(--default-line-height);
+  margin-top: 0.25rem;
+  display: block;
+}
+
 .progress-bar {
   position: relative;
   display: block;
-  height: 0.5rem;
+  height: 0.25rem;
   width: 100%;
   border-radius: 0.25rem;
   background-color: var(--progress-bar-background-color);
@@ -32,23 +51,41 @@
     position: absolute;
     height: 0.5rem;
     border-radius: 0.25rem;
-    background-color: var(--color-primary);
+    background-color: var(--color-primary500);
+    transition: width 0.2s ease-in-out;
+    &.loading-state {
+      width: 33.3%;
+      animation: linear $speed slide-in infinite;
+    }
+  }
+
+  .bar2 {
+    position: absolute;
+    left: -30%;
+    height: 0.5rem;
+    border-radius: 0.25rem;
+    background-color: var(--color-primary500);
+    opacity: 0;
     &.loading-state {
-      width: 50%;
-      animation: cubic-bezier(0.23, 0.78, 0.78, 0.23) 1s slide-in infinite;
-      @keyframes slide-in {
-        0% {
-          left: -50%;
-        }
-
-        100% {
-          left: 100%;
-        }
-      }
+      width: 33.3%;
+      animation: linear $speed slide-in infinite;
+      animation-delay: calc($speed / 2);
     }
   }
 }
 
+@keyframes slide-in {
+  0% {
+    opacity: 1;
+    left: -50%;
+  }
+
+  100% {
+    opacity: 1;
+    left: 150%;
+  }
+}
+
 .placeholder {
   display: none;
 

package/src/components/ProgressBar/ProgressBar.test.tsx

@@ -3,7 +3,10 @@ import { ProgressBar, Props } from "./ProgressBar";
 import { render } from "@testing-library/react";
 
 const defaultParams: Props = {
-  placeholderText: "Loading"
+  label: "Loading...",
+  percentage: 0,
+  accessibilityTitle: "Progress bar",
+  caption: "One moment please..."
 };
 
 const createProgressBar = (params?: (defaultParams: Props) => Props) => {
@@ -22,13 +25,22 @@ const createProgressBar = (params?: (defaultParams: Props) => Props) => {
 
 describe("ProgressBar should render", () => {
   it("renders without crashing", () => {
-    const { ProgressBarComponent } = createProgressBar(defaultParams => ({
+    const { ProgressBarComponent, getByText } = createProgressBar(defaultParams => ({
       ...defaultParams,
       className: "test"
     }));
 
     expect(ProgressBarComponent).toBeDefined();
     expect(ProgressBarComponent).toHaveClass(`test`, { exact: true });
+    expect(ProgressBarComponent).toHaveAttribute("role", "progressbar");
+    expect(ProgressBarComponent).toHaveAttribute("aria-valuemin", "0");
+    expect(ProgressBarComponent).toHaveAttribute("aria-valuemax", "100");
+    expect(ProgressBarComponent).toHaveAttribute("aria-valuenow", "0");
+    expect(ProgressBarComponent).toHaveAttribute("title", "Progress bar");
+    expect(getByText("Loading...")).toBeDefined();
+    expect(getByText("Loading...")).toHaveClass("label");
+    expect(getByText("One moment please...")).toBeDefined();
+    expect(getByText("One moment please...")).toHaveClass("caption");
   });
 });
 
@@ -65,7 +77,7 @@ describe("ProgressBar should change styles depending on props", () => {
     }));
 
     const bar = ProgressBarComponent.querySelector(".bar");
-    expect(bar).toHaveClass("w-40");
+    expect(bar).toHaveStyle("width: 40%");
   });
 
   it("should show a loading effect when 'completed' prop is not provided", () => {

package/src/components/ProgressBar/ProgressBar.tsx

@@ -19,26 +19,55 @@ import { Typography } from "../Typography/Typography";
 import classes from "./ProgressBar.module.scss";
 
 export interface Props extends Omit<ComponentPropsWithRef<"span">, "children"> {
-  placeholderText: string;
+  label?: string;
+  caption?: string;
   completed?: number;
+  percentage?: number;
+  accessibilityTitle?: string;
 }
 
 const ProgressBarComponent: ForwardRefRenderFunction<HTMLSpanElement, Props> = (
-  { placeholderText, completed, ...rest }: Props,
+  { label, caption, completed, percentage, accessibilityTitle = "Progress bar", ...rest }: Props,
   ref
 ) => {
   return (
-    <span {...rest} ref={ref} role="progressbar">
+    <span
+      {...rest}
+      ref={ref}
+      role="progressbar"
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-valuenow={percentage}
+      title={accessibilityTitle}
+    >
+      <div className={classes["header"]}>
+        {label && (
+          <Typography className={classes["label"]} spacing={{ marginBottom: 2 }} variant="body">
+            {label}
+          </Typography>
+        )}
+        {percentage !== undefined && (
+          <Typography
+            className={classes["percentage"]}
+            spacing={{ marginBottom: 2 }}
+            variant="body"
+          >
+            {percentage}%
+          </Typography>
+        )}
+      </div>
       <span className={classes["progress-bar"]}>
         <span
-          className={`${classes["bar"]} ${
-            completed ? classes[`w-${5 * Math.round(completed / 5)}`] : classes["loading-state"]
-          }`}
+          className={`${classes["bar"]} ${completed ? "" : classes["loading-state"]}`}
+          style={{ width: `${completed}%` }}
         />
+        <span className={`${classes["bar2"]} ${completed ? "" : classes["loading-state"]}`} />
       </span>
-      <Typography className={classes["placeholder"]} spacing={{ marginBottom: 0 }} variant="body">
-        {placeholderText}
-      </Typography>
+      {caption && (
+        <Typography className={classes["caption"]} spacing={{ marginBottom: 2 }} variant="sub-text">
+          {caption}
+        </Typography>
+      )}
     </span>
   );
 };

package/src/components/Tag/Tag.module.scss

@@ -0,0 +1,24 @@
+$tagFontSize: 0.75rem;
+
+.tag {
+  font-size: $tagFontSize;
+  padding: 0.375rem 0.7rem;
+  border-radius: 3.125rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+
+  &.tag-enabled {
+    background-color: var(--color-green100);
+  }
+
+  &.tag-disabled {
+    background-color: var(--color-blue-grey100);
+  }
+
+  .label {
+    line-height: $tagFontSize;
+    font-size: inherit;
+    color: inherit;
+  }
+}

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;
+}