@onewelcome/react-lib-components 1.4.0 → 1.6.0

package/src/Notifications/Banner/Banner.test.tsx

@@ -0,0 +1,84 @@
+/*
+ * 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 from "react";
+import { Banner, Props } from "./Banner";
+import { render } from "@testing-library/react";
+
+const defaultParams: Props = {
+  children: "The service will not be available between 02:00 and 03:00.",
+  title: "Maintenance is scheduled for next weekend",
+  type: "info"
+};
+
+const createBanner = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(
+    <Banner {...parameters} data-testid="BannerTest">
+      {defaultParams.children}
+    </Banner>
+  );
+  const BannerComponent = queries.getByTestId("BannerTest");
+
+  return {
+    ...queries,
+    BannerComponent
+  };
+};
+
+describe("Banner should render", () => {
+  it("renders without crashing", () => {
+    const { BannerComponent } = createBanner();
+    expect(BannerComponent).toBeDefined();
+    const title = BannerComponent.querySelector(".headline");
+    const content = BannerComponent.querySelector(".content");
+    const icon = BannerComponent.querySelector(".icon");
+    expect(BannerComponent).toHaveClass("info");
+    expect(title).toBeDefined();
+    expect(title).toHaveTextContent(defaultParams.title);
+    expect(content).toBeDefined();
+    expect(content).toHaveTextContent(defaultParams.children);
+    expect(icon).toBeDefined();
+  });
+
+  it("renders ariaLabel correctly", () => {
+    const ariaLabel = "Information regarding your information";
+    const { BannerComponent } = createBanner(defaultParams => ({ ...defaultParams, ariaLabel }));
+    expect(BannerComponent).toBeDefined();
+    expect(BannerComponent).toHaveAttribute("aria-label", ariaLabel);
+  });
+
+  it("renders ariaLive correctly", () => {
+    const ariaLive = "polite";
+    const { BannerComponent } = createBanner(defaultParams => ({ ...defaultParams, ariaLive }));
+    expect(BannerComponent).toBeDefined();
+    expect(BannerComponent).toHaveAttribute("aria-live", ariaLive);
+  });
+
+  it("renders ariaRole correctly", () => {
+    const ariaRole = "alert";
+    const { BannerComponent } = createBanner(defaultParams => ({
+      ...defaultParams,
+      type: "error",
+      ariaRole
+    }));
+    expect(BannerComponent).toBeDefined();
+    expect(BannerComponent).toHaveAttribute("role", ariaRole);
+  });
+});

package/src/Notifications/Banner/Banner.tsx

@@ -0,0 +1,78 @@
+/*
+ * 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, {
+  AriaAttributes,
+  AriaRole,
+  ComponentPropsWithRef,
+  ForwardRefRenderFunction
+} from "react";
+import { Typography } from "../../Typography/Typography";
+import { Icon, Icons } from "../../Icon/Icon";
+import classes from "./Banner.module.scss";
+
+export type BannerType = "error" | "warning" | "info";
+export interface Props extends ComponentPropsWithRef<"section"> {
+  children: string;
+  ariaRole?: AriaRole;
+  ariaLive?: AriaAttributes["aria-live"];
+  ariaLabel?: AriaAttributes["aria-label"];
+  type: BannerType;
+  title: string;
+}
+
+const BannerComponent: ForwardRefRenderFunction<HTMLElement, Props> = (
+  { children, ariaLabel, ariaRole, ariaLive, type, title, ...rest }: Props,
+  ref
+) => {
+  const getIconVariant = (type: BannerType): Icons | null => {
+    switch (type) {
+      case "info":
+        return Icons.InfoCircle;
+      case "error":
+        return Icons.Error;
+      case "warning":
+        return Icons.Warning;
+      default:
+        return null;
+    }
+  };
+
+  const icon = getIconVariant(type);
+
+  return (
+    <section
+      {...rest}
+      ref={ref}
+      aria-live={ariaLive}
+      aria-label={ariaLabel}
+      role={ariaRole}
+      className={`${classes["banner"]} ${classes[type]}`}
+    >
+      {icon && <Icon icon={icon} className={classes["icon"]} />}
+      <div className={classes["container"]}>
+        <Typography variant={"h4"} className={classes["headline"]}>
+          {title}
+        </Typography>
+        <Typography variant={"body"} className={classes["content"]} tag={"p"}>
+          {children}
+        </Typography>
+      </div>
+    </section>
+  );
+};
+
+export const Banner = React.forwardRef(BannerComponent);

package/src/Notifications/BaseModal/BaseModal.module.scss

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-@import "../../mixins.module.scss";
+@use "../../mixins.module.scss";
 
 $zIndex: 10;
 $marginTop: 3.125rem;
@@ -41,7 +41,7 @@ $marginTop: 3.125rem;
     left: 0;
     top: 0;
     background-color: transparent;
-    @include transition(background-color, 0.5s, ease);
+    @include mixins.transition(background-color, 0.5s, ease);
   }
 
   &.visible {

package/src/Notifications/Snackbar/SnackbarContainer/SnackbarContainer.module.scss

@@ -13,7 +13,7 @@
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
-@import "../../../mixins.module.scss";
+@use "../../../mixins.module.scss";
 
 .snackbars {
   position: fixed;
@@ -21,7 +21,7 @@
   width: 100%;
   display: flex;
   flex-direction: column;
-  @include transition(height, 0.2s, ease-in-out);
+  @include mixins.transition(height, 0.2s, ease-in-out);
 
   &.bottom {
     bottom: 3.5rem;

package/src/Notifications/Snackbar/SnackbarItem/SnackbarItem.module.scss

@@ -14,8 +14,8 @@
  *    limitations under the License.
  */
 
-@import "../../../readyclasses.module.scss";
-@import "../../../mixins.module.scss";
+@use "../../../readyclasses.module.scss";
+@use "../../../mixins.module.scss";
 
 .snackbar {
   padding: 1rem 1.25rem;
@@ -23,7 +23,7 @@
   display: flex;
   width: 100%;
   box-sizing: border-box;
-  @include transition(height, 0.2s, ease-in-out);
+  @include mixins.transition(height, 0.2s, ease-in-out);
   flex-grow: 0;
 
   &.info {
@@ -114,7 +114,7 @@
       cursor: not-allowed;
     }
 
-    @include focusOutline(var(--snackbar-text-color));
+    @include readyclasses.focusOutline(var(--snackbar-text-color));
 
     &:not(:disabled):hover,
     &:not(:disabled):focus {

package/src/Notifications/Snackbar/SnackbarItem/SnackbarItem.tsx

@@ -96,9 +96,10 @@ export const SnackbarItem = ({
         onClose(id);
         actionProp.onClick && actionProp.onClick(e);
       }}
-      children={actionProp.label}
       className={classes["action-button"]}
-    ></button>
+    >
+      {actionProp.label}
+    </button>
   ));
 
   return (

package/src/Popover/Popover.module.scss

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-@import "../mixins.module.scss";
+@use "../mixins.module.scss";
 
 .popover {
   $transition-property: transform, opacity;
@@ -28,7 +28,7 @@
   opacity: 0;
   transform: scale(0.5);
 
-  @include transition($transition-property, 0.2s, ease-in-out);
+  @include mixins.transition($transition-property, 0.2s, ease-in-out);
 
   &.show {
     transform: scale(1);

package/src/Popover/Popover.test.tsx

@@ -32,7 +32,7 @@ const createPopover = (params?: (defaultParams: Props) => Props) => {
           <li>Test</li>
         </ul>
       ),
-      show: false,
+      show: true,
       placement: { vertical: "top", horizontal: "left" }
     };
     let parameters: Props = defaultParams;
@@ -95,6 +95,9 @@ describe("Popover should render", () => {
   it("renders without crashing and has default left and top attributes", () => {
     const { popover } = createPopover();
 
+    window.dispatchEvent(new Event("resize"));
+    window.dispatchEvent(new Event("scroll"));
+
     expect(popover).toBeTruthy();
   });
 });

package/src/Popover/Popover.tsx

@@ -31,37 +31,69 @@ export interface Props extends ComponentPropsWithRef<"div"> {
   anchorEl?: RefObject<HTMLOrSVGElement>; //eslint-disable-line no-undef
   placement?: Placement;
   offset?: Offset;
+  debounceAmount?: number;
   transformOrigin?: Placement;
+  onAnchorOutOfView?: () => void;
 }
 
 const PopoverComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  { children, className, show, placement, offset, transformOrigin, anchorEl, ...rest },
+  {
+    children,
+    className,
+    show,
+    placement,
+    offset,
+    debounceAmount,
+    transformOrigin,
+    anchorEl,
+    onAnchorOutOfView,
+    ...rest
+  },
   ref
 ) => {
   const elToBePositioned = useRef<HTMLDivElement>(null);
 
-  if (show === undefined) {
-    throw new Error('Please make sure to define the "show" property on your Popover component');
-  }
-
   const { top, left, right, bottom, calculatePosition } = usePosition({
     elementToBePositioned: elToBePositioned,
     relativeElement: anchorEl,
     offset: offset,
     placement: placement,
-    transformOrigin: transformOrigin
+    transformOrigin: transformOrigin,
+    debounceAmount: debounceAmount || undefined
   });
 
   useEffect(() => {
+    if (!show) {
+      return;
+    }
+
     window.addEventListener("resize", calculatePosition);
+    window.addEventListener("scroll", calculatePosition);
 
-    return () => window.removeEventListener("resize", calculatePosition);
-  }, []);
+    return () => {
+      window.removeEventListener("resize", calculatePosition);
+      window.removeEventListener("scroll", calculatePosition);
+    };
+  }, [show]);
 
   useEffect(() => {
     calculatePosition();
   }, [show]);
 
+  useEffect(() => {
+    const isAnchorOffscreen =
+      show &&
+      (top === 0 ||
+        left === 0 ||
+        right === 0 ||
+        bottom === 0 ||
+        window.innerHeight - (elToBePositioned.current as HTMLElement).offsetHeight === top);
+
+    if (isAnchorOffscreen) {
+      onAnchorOutOfView && onAnchorOutOfView();
+    }
+  }, [top, left, right, bottom]);
+
   return (
     <div ref={ref} {...rest}>
       <div

package/src/Skeleton/Skeleton.module.scss

@@ -14,12 +14,12 @@
  *    limitations under the License.
  */
 
-@import "../mixins.module.scss";
+@use "../mixins.module.scss";
 
 .skeleton {
   display: block;
   height: auto;
-  @include skeletonLoading();
+  @include mixins.skeletonLoading();
 }
 
 .no-height::before {

package/src/Tabs/TabButton.tsx

@@ -24,13 +24,12 @@ import React, {
 import classes from "./TabButton.module.scss";
 
 export interface Props extends ComponentPropsWithRef<"button"> {
-  children?: string;
   tabActive?: boolean;
   focused?: boolean;
 }
 
 const TabButtonComponent: ForwardRefRenderFunction<HTMLButtonElement, Props> = (
-  { children, tabActive, focused, ...rest }: Props,
+  { children, tabActive, focused, title, ...rest }: Props,
   ref
 ) => {
   let buttonRef = (ref as RefObject<HTMLButtonElement>) || createRef<HTMLButtonElement>();

package/src/Tabs/Tabs.module.scss

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-@import "../mixins.module.scss";
+@use "../mixins.module.scss";
 
 $focus-width: 5px;
 
@@ -45,7 +45,7 @@ $focus-width: 5px;
   height: var(--tab-active-border-height);
   background-color: var(--tab-active-border-color);
 
-  @include transition($transition-property, 0.2s, ease-in-out);
+  @include mixins.transition($transition-property, 0.2s, ease-in-out);
 }
 
 .tabdivider {

package/src/Tabs/Tabs.tsx

@@ -111,16 +111,19 @@ const TabsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   useEffect(() => {
     const buttons = React.Children.map(children, (child, index) => {
       if (Object.prototype.hasOwnProperty.call(child.props, "title")) {
-        return React.createElement(TabButton, {
-          key: `${child.props.title.toLowerCase().replace(/\s/, "_")}_button`,
-          tabIndex: activeTabIndex === index ? 0 : -1,
-          "aria-selected": activeTabIndex === index,
-          focused: usingKeyboardNavigation && activeTabIndex === index,
-          tabActive: activeTabIndex === index,
-          "aria-controls": `tab_${index}`,
-          onClick: () => setActiveTabIndex(index),
-          children: child.props.title
-        });
+        return React.createElement(
+          TabButton,
+          {
+            key: `${child.props.title.toLowerCase().replace(/\s/, "_")}_button`,
+            tabIndex: activeTabIndex === index ? 0 : -1,
+            "aria-selected": activeTabIndex === index,
+            focused: usingKeyboardNavigation && activeTabIndex === index,
+            tabActive: activeTabIndex === index,
+            "aria-controls": `tab_${index}`,
+            onClick: () => setActiveTabIndex(index)
+          },
+          child.props.title
+        );
       }
       return null;
     });

package/src/Tiles/Tile.module.scss

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-@import "../mixins.module.scss";
+@use "../mixins.module.scss";
 
 .tile {
   border: 1px solid var(--light-grey-border);
@@ -22,7 +22,7 @@
   box-sizing: border-box;
   padding: 0 0 2rem;
   background-color: var(--light);
-  @include transition(box-shadow, 0.2s, ease-in-out);
+  @include mixins.transition(box-shadow, 0.2s, ease-in-out);
   font-family: var(--font-family);
 
   &:hover {
@@ -71,14 +71,14 @@
 
     .image {
       margin-top: 2.5rem;
-      @include skeletonLoading();
+      @include mixins.skeletonLoading();
       border-radius: 0.5rem;
       width: 3rem;
       height: 3rem;
     }
 
     .title {
-      @include skeletonLoading();
+      @include mixins.skeletonLoading();
       color: transparent;
       display: inline-block;
       width: 70%;

package/src/Tooltip/Tooltip.module.scss

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-@import "../mixins.module.scss";
+@use "../mixins.module.scss";
 
 .wrapper {
   display: flex;
@@ -24,7 +24,7 @@
 .tooltip-wrapper {
   .icon {
     margin-left: 0.5rem;
-    @include transition(all, 0.2s, ease-in-out);
+    @include mixins.transition(all, 0.2s, ease-in-out);
     color: var(--greyed-out);
 
     &:hover {
@@ -46,7 +46,7 @@
   transform-origin: center left;
   pointer-events: none;
 
-  @include transition($transition-property, 0.2s, ease-in-out);
+  @include mixins.transition($transition-property, 0.2s, ease-in-out);
 
   &.visible {
     opacity: 1;

package/src/Tooltip/Tooltip.test.tsx

@@ -16,7 +16,7 @@
 
 import React, { useEffect, useRef } from "react";
 import { Tooltip, Props } from "./Tooltip";
-import { render } from "@testing-library/react";
+import { render, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 const defaultParams: Props = {
@@ -39,7 +39,7 @@ const createTooltip = (params?: (defaultParams: Props) => Props) => {
 };
 
 describe("Tooltip should render", () => {
-  it("renders without crashing", () => {
+  it("renders without crashing", async () => {
     const { tooltip, getByText } = createTooltip(defaultParams => ({
       ...defaultParams,
       className: "testing"
@@ -49,7 +49,7 @@ describe("Tooltip should render", () => {
     const label = getByText("Label");
 
     expect(tooltip).toHaveClass("testing");
-    expect(tooltipText).toHaveStyle({ top: "0px", left: "16px" });
+    await waitFor(() => expect(tooltipText).toHaveStyle({ top: "0px", left: "16px" }));
     expect(label).toBeTruthy();
     expect(tooltipText).toBeTruthy();
     expect(tooltip).toBeTruthy();
@@ -65,7 +65,7 @@ describe("Tooltip should render", () => {
     expect(getByText(labelText)).toBeDefined();
   });
 
-  it("should override the default placement and offset values", () => {
+  it("should override the default placement and offset values", async () => {
     const { tooltip, getByText } = createTooltip(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "center", vertical: "center" },
@@ -74,7 +74,7 @@ describe("Tooltip should render", () => {
     }));
 
     const tooltipText = getByText("This is a test message");
-    expect(tooltipText).toHaveStyle({ right: "1024px", bottom: "768px" });
+    await waitFor(() => expect(tooltipText).toHaveStyle({ right: "1024px", bottom: "768px" }));
     expect(tooltip).toBeTruthy();
   });
 });

package/src/_BaseStyling_/BaseStyling.tsx

@@ -42,11 +42,14 @@ interface CSSProperties {
   modalShadowColor?: string;
   modalBackgroundColor?: string;
   modalHeaderBackgroundColor?: string;
+  skeletonBackgroundColor?: string;
+  skeletonAnimationColorRgb?: string;
   snackbarTextColor?: string;
   snackbarInfoBackgroundColor?: string;
   snackbarSuccessBackgroundColor?: string;
   snackbarErrorBackgroundColor?: string;
   snackbarBorderRadius?: string;
+  bannerBorderRadius?: string;
   dataGridRowBackgroundColor?: string;
   dataGridRowHoverBackgroundColor?: string;
   tabsBackgroundColor?: string;
@@ -59,6 +62,7 @@ interface CSSProperties {
   default?: string;
   success?: string;
   error?: string;
+  info?: string;
   disabled?: string;
   greyedOut?: string;
   lightGreyBorder?: string;
@@ -103,11 +107,14 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     modalShadowColor: "rgba(0, 0, 0, 0.16)",
     modalBackgroundColor: "#f5f8f8",
     modalHeaderBackgroundColor: "var(--light)",
+    skeletonBackgroundColor: "var(--disabled)",
+    skeletonAnimationColorRgb: "255, 255, 255",
     snackbarTextColor: "var(--light)",
     snackbarInfoBackgroundColor: "#003b5e",
     snackbarSuccessBackgroundColor: "#008a28",
     snackbarErrorBackgroundColor: "#d9291c",
     snackbarBorderRadius: "8px",
+    bannerBorderRadius: "8px",
     dataGridRowBackgroundColor: "transparent",
     dataGridRowHoverBackgroundColor: "#f5e6f0",
     tabsBackgroundColor: "var(--light)",
@@ -120,6 +127,7 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     default: "#0f0f1e",
     success: "#008a28",
     error: "#d9291c",
+    info: "var(--color-secondary)",
     disabled: "#e9e9eb",
     greyedOut: "#6f6f76",
     lightGreyBorder: "#e9e9eb",

package/src/hooks/useDetermineStatusIcon.test.ts

@@ -0,0 +1,28 @@
+import { renderHook } from "@testing-library/react-hooks";
+import { useDetermineStatusIcon } from "./useDetermineStatusIcon";
+
+describe("it should return the correct icon", () => {
+  it("should return an icon of type success", () => {
+    const { result } = renderHook(useDetermineStatusIcon, {
+      initialProps: { success: true, error: false }
+    });
+
+    expect(result.current).toBeDefined();
+    expect(result.current?.props?.["data-icon-status"]).toEqual("success");
+  });
+
+  it("should return an icon of type error", () => {
+    const { result } = renderHook(useDetermineStatusIcon, {
+      initialProps: { success: true, error: true }
+    });
+
+    expect(result.current).toBeDefined();
+    expect(result.current?.props?.["data-icon-status"]).toEqual("error");
+  });
+
+  it("should return null", () => {
+    const { result } = renderHook(useDetermineStatusIcon);
+
+    expect(result.current).toBeNull();
+  });
+});

package/src/hooks/useDetermineStatusIcon.tsx

@@ -0,0 +1,35 @@
+/*
+ * 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 { FormElement } from "../Form/form.interfaces";
+import React, { ReactElement, useRef } from "react";
+import { Icon, Icons } from "../Icon/Icon";
+export const useDetermineStatusIcon = (params: Partial<FormElement>): ReactElement | null => {
+  const { error, success } = params || false;
+  let icon = null;
+  const errorRef = useRef(null);
+  const successRef = useRef(null);
+
+  if (error) {
+    icon = <Icon ref={errorRef} data-icon-status="error" icon={Icons.Error} />;
+  } else if (success) {
+    icon = (
+      <Icon ref={successRef} data-icon-status="success" icon={Icons.CheckmarkCircleBreakout} />
+    );
+  }
+
+  return icon;
+};