@onewelcome/react-lib-components 8.9.1 → 8.11.0

package/src/components/Tabs/TabButton.module.scss

@@ -13,7 +13,9 @@
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
+
 @use "../../mixins.module.scss";
+@use "src/functions" as *;
 
 .tabbutton {
   color: var(--tab-text-color);
@@ -55,7 +57,7 @@
   }
 
   &.has-icon {
-    gap: 0.25rem;
+    gap: relativeToBaseFontSize(0.25);
     display: inline-flex;
     align-items: center;
 
@@ -65,8 +67,8 @@
 
     span[data-icon] {
       display: inline-block;
-      font-size: 1.25rem;
-      width: 1.25rem;
+      font-size: var(--font-size-big);
+      width: var(--font-size-big);
     }
 
     &.top-icon,

package/src/components/Tabs/TabButton.tsx

@@ -35,7 +35,7 @@ const TabButtonComponent: ForwardRefRenderFunction<HTMLButtonElement, Props> = (
   { children, tabActive, focused, title, fluid, icon, iconPosition, className, ...rest }: Props,
   ref
 ) => {
-  let buttonRef = (ref as RefObject<HTMLButtonElement>) || createRef<HTMLButtonElement>();
+  const buttonRef = (ref as RefObject<HTMLButtonElement>) || createRef<HTMLButtonElement>();
 
   useEffect(() => {
     if (focused && buttonRef.current) {

package/src/components/Tabs/Tabs.tsx

@@ -70,8 +70,12 @@ const TabsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
     const totalAmountOfTabs = [children].flat().length;
-    if (!usingKeyboardNavigation) setUsingKeyboardNavigation(true);
-    if (totalAmountOfTabs === 1) return;
+    if (!usingKeyboardNavigation) {
+      setUsingKeyboardNavigation(true);
+    }
+    if (totalAmountOfTabs === 1) {
+      return;
+    }
 
     switch (e.key) {
       case "ArrowRight":

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

@@ -37,6 +37,6 @@
   @include mixins.focusVisibleOutline($outlineOffset: 0);
 
   .icon {
-    font-size: 0.625rem;
+    font-size: var(--font-size-small);
   }
 }

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

@@ -14,10 +14,8 @@
  *    limitations under the License.
  */
 
-$tagFontSize: 0.75rem;
-
 .tag {
-  font-size: $tagFontSize;
+  font-size: var(--font-size-sub);
   padding: 0.25rem 0.75rem;
   border: none;
   border-radius: 3.125rem;

package/src/components/Tag/Tag.tsx

@@ -63,7 +63,7 @@ const TagComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   return (
     <div
       {...rest}
-      ref={ref as any}
+      ref={ref}
       className={`${tagClasses.join(" ")} ${rest.className ?? ""}`}
       style={{ backgroundColor, color }}
     >

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

@@ -163,8 +163,8 @@
   $transition-property: opacity, transform;
 
   position: fixed;
-  font-size: 0.75rem;
-  line-height: 1rem;
+  font-size: var(--font-size-sub);
+  line-height: 1.33;
   border-radius: 0.125rem;
   padding: 0.75rem;
   color: var(--light);
@@ -208,8 +208,8 @@
 
 .tooltip-title {
   font-weight: 500;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
+  font-size: var(--font-size-form-label);
+  line-height: 1.43;
   display: block;
   margin-bottom: 0.25rem;
 }

package/src/components/Tooltip/Tooltip.tsx

@@ -155,7 +155,9 @@ const TooltipComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   });
 
   useEffect(() => {
-    if (!visible) return;
+    if (!visible) {
+      return;
+    }
 
     const escapePressHandler = (event: KeyboardEvent) => {
       if (event.key === "Escape") {

package/src/components/Typography/Typography.module.scss

@@ -52,7 +52,7 @@
   }
 
   &sub-text {
-    @include mixins.fontProperties(var(--font-family), var(--font-size-sub), 400, 1rem);
+    @include mixins.fontProperties(var(--font-family), var(--font-size-sub), 400, var(--font-size));
   }
 
   &code {

package/src/components/Typography/Typography.tsx

@@ -49,6 +49,7 @@ type Tags =
   | "ins"
   | "blockquote";
 
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export interface Props extends ComponentPropsWithRef<any> {
   children: ReactNode;
   variant: Variant;
@@ -57,7 +58,7 @@ export interface Props extends ComponentPropsWithRef<any> {
   align?: "left" | "center" | "right";
 }
 
-const TypographyComponent: ForwardRefRenderFunction<any, Omit<Props, "ref">> = (
+const TypographyComponent: ForwardRefRenderFunction<unknown, Omit<Props, "ref">> = (
   { children, variant, tag, style, spacing, align, className = "", ...rest },
   ref
 ) => {
@@ -93,7 +94,7 @@ const TypographyComponent: ForwardRefRenderFunction<any, Omit<Props, "ref">> = (
     }
   }
 
-  let TagName = tag;
+  const TagName = tag;
 
   return (
     <TagName

package/src/components/_BaseStyling_/BaseStyling.tsx

@@ -21,7 +21,7 @@
 
 import React, { HTMLAttributes, ReactElement, useEffect, useRef, useState } from "react";
 
-interface CSSProperties {
+export interface CSSProperties {
   colorFocus?: string;
   colorPrimary?: string;
   colorSuccess?: string;
@@ -53,11 +53,13 @@ interface CSSProperties {
   colorOrange500?: string;
   colorOrange600?: string;
   colorOrange700?: string;
+  colorRed50?: string;
   colorRed100?: string;
   colorRed200?: string;
   colorRed500?: string;
   colorRed600?: string;
   colorRed700?: string;
+  colorRed900?: string;
   colorWhite?: string;
   colorBlack100?: string;
   colorBlack50?: string;
@@ -113,15 +115,18 @@ interface CSSProperties {
   inputHelperTextColor?: string;
   inputHoverBackgroundColor?: string;
   inputDisabledBackgroundColor?: string;
+  inputFontSize?: string;
   dragBorderStyle?: string;
   modalShadowColor?: string;
   modalBackgroundColor?: string;
   modalBackdropColor?: string;
+  modalContentFontSize?: string;
   sideSheetShadowColorOne?: string;
   sideSheetShadowColorTwo?: string;
   skeletonBackgroundColor?: string;
   skeletonAnimationColorRgb?: string;
 
+  alertFontSize?: string;
   alertTextColor?: string;
   alertTextInvertedColor?: string;
 
@@ -186,6 +191,7 @@ interface CSSProperties {
   tooltipBackgroundColor?: string;
   contextMenuHoverColor?: string;
   contextMenuPressedColor?: string;
+  contextMenuFontSize?: string;
   default?: string;
   success?: string;
   error?: string;
@@ -204,6 +210,8 @@ interface CSSProperties {
   fontSizeH3?: string;
   fontSizeH4?: string;
   fontSizeSub?: string;
+  fontSizeSmall?: string;
+  fontSizeBig?: string;
   fontSizeCode?: string;
   formControlFontSize?: string;
   fileUploadBorderWidth?: string;
@@ -211,6 +219,7 @@ interface CSSProperties {
   fontSizeDataGrid?: string;
   readOnlyBorderColor?: string;
   readOnlyTextColor?: string;
+  iconFontBig?: string;
 }
 
 export interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -246,11 +255,13 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     colorOrange500: "#E07900",
     colorOrange600: "#B36100",
     colorOrange700: "#864900",
+    colorRed50: "#F9D2CC",
     colorRed100: "#FFCDD2",
     colorRed200: "#F3A599",
     colorRed500: "#E01E00",
     colorRed600: "#B31800",
     colorRed700: "#861200",
+    colorRed900: "#2D0600",
     colorBlack100: "#000000",
     colorBlack50: "rgba(0, 0, 0, 0.5)",
     colorBlack20: "rgba(0, 0, 0, 0.2)",
@@ -263,7 +274,7 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     colorDanger: "var(--color-red500)",
     defaultPressedColor: "var(--color-blue-grey100)",
     defaultHoverColor: "var(--color-blue-grey25)",
-    defaultLineHeight: "1.5", //FIXME: UCL-395
+    defaultLineHeight: "1.5",
     dataGridLineHeight: "1.25",
     defaultBorderRadius: "0.25rem",
     focusBorderRadius: "0.125rem",
@@ -312,15 +323,18 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     inputHelperTextColor: "var(--color-blue-grey500)",
     inputHoverBackgroundColor: "var(--default-hover-color)",
     inputDisabledBackgroundColor: "var(--input-hover-background-color)",
+    inputFontSize: "0.875rem",
     dragBorderStyle: "solid",
     modalShadowColor: "rgba(0, 0, 0, 0.16)",
     modalBackgroundColor: "var(--light)",
     modalBackdropColor: "var(--default)",
+    modalContentFontSize: "0.875rem",
     sideSheetShadowColorOne: "#01053214",
     sideSheetShadowColorTwo: "#0105320a",
     skeletonBackgroundColor: "var(--disabled)",
     skeletonAnimationColorRgb: "255, 255, 255",
 
+    alertFontSize: "0.875rem",
     alertTextColor: "var(--default)",
     alertTextInvertedColor: "var(--light)",
 
@@ -388,6 +402,7 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     tooltipBackgroundColor: "var(--default)",
     contextMenuHoverColor: "var(--default-hover-color)",
     contextMenuPressedColor: "var(--default-pressed-color)",
+    contextMenuFontSize: "0.875rem",
     default: "var(--color-blue-grey900)",
     success: "var(--color-green500)",
     error: "var(--color-red500)",
@@ -399,18 +414,21 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     light: "var(--color-white)",
     fontFamily: "Roboto, sans-serif",
     fontFamilyCode: "'Roboto Mono', monospace",
-    fontSizeFormLabel: "0.875rem", //FIXME: UCL-395
-    fontSize: "1rem", //FIXME: UCL-395
+    fontSizeFormLabel: "0.875rem",
+    fontSize: "1rem",
     fontSizeH1: "2.5rem",
     fontSizeH2: "1.625rem",
     fontSizeH3: "1.5rem",
     fontSizeH4: "1.25rem",
-    fontSizeSub: ".75rem",
+    fontSizeSub: "0.75rem",
+    fontSizeSmall: "0.625rem",
+    fontSizeBig: "1.25rem",
     fontSizeCode: "1rem",
     readOnlyBorderColor: "var(--color-blue-grey100)",
     readOnlyTextColor: "var(--color-blue-grey900)",
-    formControlFontSize: "0.875rem", //FIXME: UCL-395
-    fontSizeDataGrid: "0.875rem" //FIXME: UCL-395
+    formControlFontSize: "0.875rem",
+    fontSizeDataGrid: "0.875rem",
+    iconFontBig: "1.125rem"
   };
 
   /** We need a loading state, because otherwise you see the colors flash from the default to the possible overridden ones. */

package/src/components/admin/layout/LeftNav/LeftNav.interfaces.ts

@@ -0,0 +1,30 @@
+/*
+ * 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 { ReactElement } from "react";
+
+export interface MenuItem {
+  key: string;
+  path?: string;
+  active?: boolean;
+  /**
+   * @deprecated it can be removed in next release
+   */
+  disabled?: boolean;
+  title: string;
+  iconComponent?: ReactElement;
+  items?: MenuItem[];
+}

package/src/components/admin/layout/LeftNav/LeftNav.module.scss

@@ -0,0 +1,52 @@
+/*!
+ * 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";
+
+.sidenavbar {
+  --margin-top: 4rem;
+  position: fixed;
+  z-index: 2;
+
+  background-color: white;
+  display: block;
+  overflow-y: auto;
+  flex-shrink: 0;
+  width: 15rem;
+  height: calc(100vh - var(--margin-top));
+  padding: 0;
+  margin: 0;
+
+  box-shadow:
+    0px 2px 2px 0px rgba(1, 5, 50, 0.02),
+    0px 3px 4px 0px rgba(1, 5, 50, 0.02),
+    0px 1px 5px 0px rgba(1, 5, 50, 0.04);
+
+  @include mixins.breakpoint("max", "medium") {
+    transition: transform 200ms ease-in-out;
+    box-shadow: 0 30px 50px #00000029;
+    transform: translateX(-110%);
+
+    &.hidden {
+      visibility: hidden;
+    }
+
+    &.open {
+      visibility: visible;
+      transform: translateX(0);
+    }
+  }
+}

package/src/components/admin/layout/LeftNav/LeftNav.tsx

@@ -0,0 +1,81 @@
+/*
+ * 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, {
+  ComponentPropsWithRef,
+  CSSProperties,
+  ForwardRefRenderFunction,
+  useState
+} from "react";
+import classes from "./LeftNav.module.scss";
+import { MenuItem } from "./LeftNav.interfaces";
+import { LeftNavItem } from "./LeftNavItem/LeftNavItem";
+import { useRefItems } from "./useRefItems";
+
+export interface Props extends ComponentPropsWithRef<"nav"> {
+  isSideMenuOpen?: boolean;
+  items: MenuItem[];
+  navigate: (path: string) => void;
+  onItemClick: (path?: string, button?: boolean) => void;
+  marginTop?: string;
+}
+
+const LeftNavComponent: ForwardRefRenderFunction<HTMLElement, Props> = (
+  { isSideMenuOpen, items, navigate, onItemClick, marginTop, ...rest },
+  ref
+) => {
+  const [isSideNavbarVisible, setIsSideNavbarVisible] = useState(isSideMenuOpen);
+  const refItems = useRefItems({ items });
+
+  const onSideNavbarTransitionEnd: React.TransitionEventHandler<HTMLUListElement> = () => {
+    setIsSideNavbarVisible(isSideMenuOpen);
+  };
+
+  const renderMenuItems = () => {
+    if (!items.length) {
+      return null;
+    }
+
+    return items.map(item => {
+      return (
+        <LeftNavItem
+          ref={el => refItems.addElementReference(el, item.key)}
+          key={item.key}
+          item={item}
+          navigate={navigate}
+          onItemClick={onItemClick}
+          refItems={refItems}
+        />
+      );
+    });
+  };
+
+  return (
+    <nav {...rest} ref={ref}>
+      <ul
+        style={{ "--margin-top": marginTop } as CSSProperties}
+        className={`${classes["sidenavbar"]} ${isSideMenuOpen ? classes["open"] : ""} ${
+          !isSideNavbarVisible ? classes["hidden"] : ""
+        }`}
+        onTransitionEnd={onSideNavbarTransitionEnd}
+      >
+        {renderMenuItems()}
+      </ul>
+    </nav>
+  );
+};
+
+export const LeftNav = React.forwardRef(LeftNavComponent);

package/src/components/admin/layout/LeftNav/LeftNavItem/ButtonLeftNavItem.tsx

@@ -0,0 +1,153 @@
+/*
+ * 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, {
+  ForwardRefExoticComponent,
+  ForwardRefRenderFunction,
+  HTMLProps,
+  MouseEvent,
+  Ref,
+  useEffect,
+  useState
+} from "react";
+import classes from "./LeftNavItem.module.scss";
+import { Link as RouterLink } from "react-router-dom";
+import { MenuItem } from "../LeftNav.interfaces";
+import { Icon, Icons } from "../../../../Icon/Icon";
+import { useKeyboardNavigation } from "./useKeyboardNavigation";
+import { UseRefItemsReturnType } from "../useRefItems";
+import { LeftNavItemProps } from "./LeftNavItem.interface";
+
+export interface Props extends HTMLProps<HTMLElement> {
+  item: MenuItem;
+  navigate: (path: string) => void;
+  onItemClick: (path?: string, button?: boolean) => void;
+  refItems: UseRefItemsReturnType;
+  NestedComponent: ForwardRefExoticComponent<LeftNavItemProps>;
+  closeParentList?: () => void;
+}
+
+const chevronIconDataKey = { attributeKey: "chevron-icon", objectKey: "chevronIcon" };
+
+const ButtonLeftNavItemComponent: ForwardRefRenderFunction<HTMLElement, Props> = (
+  { item, navigate, onItemClick, refItems, NestedComponent, closeParentList },
+  ref
+) => {
+  const [expanded, setExpanded] = useState(false);
+  const isActiveParent = !!item.items?.find(menuItem => menuItem.active);
+  const { onKeyPressNavigation } = useKeyboardNavigation({ refItems, item, closeParentList });
+
+  const onButtonClickHandler = (event: MouseEvent<HTMLButtonElement>) => {
+    const isChevronIcon = !!(event.target as HTMLElement).dataset[chevronIconDataKey.objectKey];
+    if (!isChevronIcon && item.path && !item.disabled) {
+      event.preventDefault();
+      navigate(item.path);
+      onItemClick(item.path, true);
+    }
+  };
+
+  const onExpandIconClickHandler = () => {
+    setExpanded(expanded => !expanded);
+  };
+
+  const openParentWithActiveElement = () => {
+    if (isActiveParent) {
+      setExpanded(true);
+    }
+  };
+
+  useEffect(openParentWithActiveElement, [isActiveParent]);
+
+  const getStylingClasses = () => {
+    const buttonClasses = [classes["menu-item"], classes["menu-button"]];
+    expanded && buttonClasses.push(classes["expanded"]);
+    (item.active || isActiveParent) && buttonClasses.push(classes["menu-item-active"]);
+    item.disabled && buttonClasses.push(classes["disabled"]);
+    const buttonWrapperClasses = [classes["menu-button-wrapper"], classes["menu-list-item"]];
+    expanded && buttonWrapperClasses.push(classes["expanded"]);
+    item.active && buttonWrapperClasses.push(classes["menu-item-active"]);
+    return {
+      buttonClasses,
+      buttonWrapperClasses
+    };
+  };
+
+  const { buttonClasses, buttonWrapperClasses } = getStylingClasses();
+  const tabIndexActive = item.active ? 0 : -1;
+  const tabIndex = item.disabled ? -1 : tabIndexActive;
+
+  return (
+    <li className={buttonWrapperClasses.join(" ")} data-testid={item.key}>
+      <button
+        aria-controls={item.key}
+        data-testid={`tab-btn-${item.key}`}
+        aria-expanded={expanded}
+        ref={ref as Ref<HTMLButtonElement>}
+        onKeyDown={onKeyPressNavigation}
+        onClick={onButtonClickHandler}
+        className={buttonClasses.join(" ")}
+        disabled={item.disabled}
+        tabIndex={tabIndex}
+      >
+        <div className={classes["menu-item-text-wrapper"]}>
+          {item.iconComponent &&
+            React.cloneElement(item.iconComponent, { className: classes["menu-item-icon"] })}
+          {item.path ? (
+            <RouterLink
+              to={item.path}
+              aria-current={item.active ? "page" : false}
+              className={classes["menu-item-text"]}
+              tabIndex={-1}
+            >
+              {item.title}
+            </RouterLink>
+          ) : (
+            <span className={classes["menu-item-text"]}>{item.title}</span>
+          )}
+        </div>
+        <Icon
+          onClick={onExpandIconClickHandler}
+          className={classes["menu-item-expand-icon"]}
+          icon={Icons.ChevronDown}
+          {...{ [`data-${chevronIconDataKey.attributeKey}`]: "true" }}
+        />
+      </button>
+      <ul
+        id={item.key}
+        style={{ maxHeight: expanded ? undefined : 0 }}
+        className={classes["menu-list"]}
+      >
+        {!item.disabled &&
+          item.items?.map(item => (
+            <NestedComponent
+              ref={el => refItems.addElementReference(el, item.key)}
+              key={item.key}
+              closeParentList={() => setExpanded(false)}
+              onKeyUp={onKeyPressNavigation}
+              item={item}
+              navigate={navigate}
+              onItemClick={onItemClick}
+              refItems={refItems}
+            >
+              {item.title}
+            </NestedComponent>
+          ))}
+      </ul>
+    </li>
+  );
+};
+
+export const ButtonLeftNavItem = React.forwardRef(ButtonLeftNavItemComponent);

package/src/components/admin/layout/LeftNav/LeftNavItem/LeftNavItem.interface.ts

@@ -0,0 +1,27 @@
+/*
+ * 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 { HTMLProps } from "react";
+import { MenuItem } from "../LeftNav.interfaces";
+import { UseRefItemsReturnType } from "../useRefItems";
+
+export interface LeftNavItemProps extends HTMLProps<HTMLElement> {
+  item: MenuItem;
+  navigate: (path: string) => void;
+  onItemClick: (path?: string, button?: boolean) => void;
+  refItems: UseRefItemsReturnType;
+  closeParentList?: () => void;
+}