@onewelcome/react-lib-components 8.9.1 → 8.10.0

package/src/components/Form/Toggle/Toggle.module.scss

@@ -16,6 +16,7 @@
 
 @use "../../../mixins.module.scss";
 @use "../../../variables.scss";
+@use "src/functions" as *;
 
 $borderRadius: 2.5rem;
 
@@ -128,9 +129,9 @@ $borderRadius: 2.5rem;
 }
 
 .toggle {
-  width: 2rem;
-  min-width: 2rem;
-  height: 1.25rem;
+  width: relativeToBaseFontSize(2);
+  min-width: relativeToBaseFontSize(2);
+  height: var(--font-size-big);
   background-color: var(--toggle-background-color);
   border-radius: $borderRadius;
   position: relative;
@@ -141,15 +142,15 @@ $borderRadius: 2.5rem;
 
   &:before {
     content: "";
-    width: 1rem;
-    height: 1rem;
+    width: var(--font-size);
+    height: var(--font-size);
     border-radius: 50%;
     display: block;
     background-color: var(--light);
     position: absolute;
     top: 50%;
     transform: translateY(-50%) translateX(0);
-    left: 0.125rem;
+    left: relativeToBaseFontSize(0.125);
     @include mixins.transition(transform, 0.2s, ease-in-out);
   }
 
@@ -157,9 +158,9 @@ $borderRadius: 2.5rem;
     content: "\e927";
     font-family: "icomoon";
     position: absolute;
-    font-size: 0.4375rem;
+    font-size: relativeToBaseFontSize(0.4375);
     top: 47%;
-    left: 0.4rem;
+    left: relativeToBaseFontSize(0.4);
     transform: translateY(-50%) translateX(0);
     color: var(--color-primary);
     @include mixins.transition(transform, 0.2s, ease-in-out);
@@ -169,7 +170,7 @@ $borderRadius: 2.5rem;
     background-color: var(--color-primary);
 
     &:before {
-      transform: translateY(-50%) translateX(calc(100% - 0.25rem));
+      transform: translateY(-50%) translateX(calc(100% - 0.25 * var(--font-size)));
     }
 
     &:after {
@@ -196,7 +197,7 @@ $borderRadius: 2.5rem;
   }
 
   input {
-    width: 2rem;
+    width: relativeToBaseFontSize(2);
   }
 
   input ~ [data-icon][aria-hidden] {

package/src/components/Form/Wrapper/CheckboxWrapper/CheckboxWrapper.module.scss

@@ -14,6 +14,8 @@
  *    limitations under the License.
  */
 
+@use "src/functions" as *;
+
 .checkbox-wrapper-helper {
   margin-top: 1.25rem;
 }
@@ -23,6 +25,6 @@
 }
 
 .checkbox-wrapper-error [data-icon] {
-  font-size: 1.375rem;
+  font-size: relativeToBaseFontSize(1.375);
   vertical-align: bottom;
 }

package/src/components/Form/Wrapper/InputWrapper/InputWrapper.module.scss

@@ -31,7 +31,7 @@ input {
 .input-wrapper {
   [data-icon]:before {
     transform: translateY(0px);
-    font-size: 1.125rem;
+    font-size: var(--icon-font-big);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -45,7 +45,7 @@ input {
 
   [data-prefix],
   [data-suffix] {
-    font-size: var(--form-control-font-size);
+    font-size: var(--input-font-size);
   }
 
   [data-prefix] + input {

package/src/components/Form/Wrapper/RadioWrapper/RadioWrapper.module.scss

@@ -23,6 +23,6 @@
 }
 
 .radio-wrapper-error [data-icon] {
-  font-size: 1.25rem;
+  font-size: var(--font-size-big);
   vertical-align: text-bottom;
 }

package/src/components/Form/Wrapper/TextareaWrapper/TextareaWrapper.module.scss

@@ -79,7 +79,7 @@
       position: absolute;
       right: 1.25rem;
       top: 0.8rem;
-      font-size: 1.125rem;
+      font-size: var(--icon-font-big);
       height: 1.25rem;
       width: 1.25rem;
     }

package/src/components/Icon/Icon.module.scss

@@ -42,7 +42,7 @@
 
 .icon {
   line-height: 0;
-  font-size: 0.875rem;
+  font-size: var(--button-font-size);
 }
 
 .icon-save-outline:before {

package/src/components/Layout/ContentHeader/ContentHeader.module.scss

@@ -28,7 +28,7 @@
   margin: 0;
   font-weight: 500;
   color: var(--color-blue-grey900);
-  line-height: 3.125rem;
+  line-height: 1.25;
 }
 
 .header-subtitle {

package/src/components/Layout/FormPage/FormWithStepper/FormSection/FormSection.module.scss

@@ -7,6 +7,6 @@
 }
 
 .section-header {
-  line-height: 2rem;
+  line-height: 1.6;
   color: var(--color-primary500);
 }

package/src/components/Link/Link.tsx

@@ -33,6 +33,7 @@ export interface Props extends ComponentPropsWithRef<"a"> {
   type?: AnchorType;
   to: string;
   disabled?: boolean;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   component?: ForwardRefExoticComponent<any>;
 }
 

package/src/components/Notifications/Alert/AlertItem/AlertItem.module.scss

@@ -178,7 +178,7 @@
     border: 0;
 
     span {
-      font-size: 0.875rem;
+      font-size: var(--alert-font-size);
     }
 
     &:not(:disabled):hover,
@@ -193,8 +193,8 @@
 
   .icon {
     color: var(--alert-text-color);
-    font-size: 1rem;
-    height: 1.25rem;
+    font-size: var(--font-size);
+    height: var(--font-size-big);
     display: inline-flex;
     align-items: center;
     align-self: flex-start;
@@ -203,8 +203,8 @@
   .title {
     color: var(--alert-text-color);
     flex: 1;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
+    font-size: var(--alert-font-size);
+    line-height: 1.43;
     margin-bottom: 0.25rem;
     display: block;
   }
@@ -222,8 +222,8 @@
 
   .content {
     color: var(--alert-text-color);
-    font-size: 0.875rem;
-    line-height: 1.25rem;
+    font-size: var(--alert-font-size);
+    line-height: 1.43;
     margin-bottom: 0;
     word-break: break-word;
   }
@@ -238,8 +238,8 @@
     border-style: var(--button-border-style);
     border-radius: var(--button-border-radius);
     white-space: nowrap;
-    font-size: 0.875rem;
-    line-height: var(--button-font-size);
+    font-size: var(--alert-font-size);
+    line-height: 1;
     font-weight: 400;
     margin: -0.5rem 0;
     padding: 0.625rem 1.25rem;

package/src/components/Notifications/Banner/Banner.module.scss

@@ -39,7 +39,7 @@
 
   .icon {
     margin-top: 0.1rem;
-    font-size: 1.25rem;
+    font-size: var(--font-size-big);
     line-height: var(--default-line-height);
   }
 

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

@@ -19,6 +19,6 @@
   overflow-y: auto;
   flex: 1;
   outline: none;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
+  font-size: var(--modal-content-font-size);
+  line-height: 1.43;
 }

package/src/components/Notifications/Dialog/DialogActions/DialogActions.tsx

@@ -22,6 +22,7 @@ import {
 } from "../../BaseModal/BaseModalActions/BaseModalActions";
 import classes from "./DialogActions.module.scss";
 
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export interface Props extends ComponentPropsWithRef<any>, BaseModalActionsProps {
   cancelAction?: CancelAction;
 }

package/src/components/Notifications/Dialog/DialogTitle/DialogTitle.module.scss

@@ -38,7 +38,7 @@
   line-height: 1;
 
   &-icon > [data-icon] {
-    font-size: 1.25rem;
+    font-size: var(--font-size-big);
   }
 }
 

package/src/components/Notifications/DiscardChangesModal/DiscardChangesDialog/DiscardChangesDialog.tsx

@@ -27,7 +27,10 @@ export interface Props extends ComponentPropsWithRef<"div"> {
   cancelAction?: CancelAction;
   contentLabel: string;
   titleLabel: string;
+
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   [dataAttribute: DataAttributeKey]: any;
+
   onKeepEditing: () => void;
   onDiscardChanges: () => void;
 }

package/src/components/Notifications/SideSheet/SideSheet.module.scss

@@ -15,6 +15,7 @@
  */
 
 @use "../../../mixins.module.scss";
+@use "src/functions" as *;
 
 .slide-in-modal {
   right: 0;
@@ -48,7 +49,7 @@
 .handle {
   position: absolute;
   top: 13.25rem;
-  left: -1.5rem;
+  left: relativeToBaseFontSize(-1.5);
 
   display: flex;
   align-items: center;

package/src/components/Pagination/Pagination.module.scss

@@ -14,6 +14,8 @@
  *    limitations under the License.
  */
 
+@use "src/functions" as *;
+
 .pagination-wrapper {
   font-family: var(--font-family);
   font-size: var(--font-size-data-grid);
@@ -28,14 +30,14 @@
   }
 
   .form-element {
-    height: 2.5rem;
+    height: relativeToBaseFontSize(2.5);
 
     .search-input-wrapper {
       width: 2.75rem;
     }
 
     button {
-      min-height: 2.5rem;
+      min-height: relativeToBaseFontSize(2.5);
     }
   }
 
@@ -63,7 +65,7 @@
       align-items: center;
 
       button span:before {
-        font-size: 0.75rem;
+        font-size: var(--font-size-sub);
       }
     }
   }
@@ -109,7 +111,7 @@
     margin: 0 0.25rem;
 
     button {
-      min-width: 3.75rem;
+      min-width: relativeToBaseFontSize(3.75);
       padding: 0;
 
       div[data-display] {
@@ -125,7 +127,7 @@
 
 .current-page-select {
   button {
-    min-width: 3.75rem;
+    min-width: relativeToBaseFontSize(3.75);
     padding: 0;
 
     div[data-display] {

package/src/components/Pagination/Pagination.tsx

@@ -72,7 +72,9 @@ const PaginationComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   ref
 ) => {
   const calculateAmountOfPages = () => {
-    if (!totalElements) return 1;
+    if (!totalElements) {
+      return 1;
+    }
 
     if (Math.ceil(totalElements / pageSize) < 1) {
       return 1;

package/src/components/Tabs/Tab.tsx

@@ -19,6 +19,7 @@ import classes from "./Tab.module.scss";
 
 export interface Props extends Omit<HTMLProps<HTMLDivElement>, "children"> {
   title: string;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   children?: any;
   tabActive?: boolean;
   icon?: React.ReactNode;

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;
@@ -113,15 +113,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 +189,7 @@ interface CSSProperties {
   tooltipBackgroundColor?: string;
   contextMenuHoverColor?: string;
   contextMenuPressedColor?: string;
+  contextMenuFontSize?: string;
   default?: string;
   success?: string;
   error?: string;
@@ -204,6 +208,8 @@ interface CSSProperties {
   fontSizeH3?: string;
   fontSizeH4?: string;
   fontSizeSub?: string;
+  fontSizeSmall?: string;
+  fontSizeBig?: string;
   fontSizeCode?: string;
   formControlFontSize?: string;
   fileUploadBorderWidth?: string;
@@ -211,6 +217,7 @@ interface CSSProperties {
   fontSizeDataGrid?: string;
   readOnlyBorderColor?: string;
   readOnlyTextColor?: string;
+  iconFontBig?: string;
 }
 
 export interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -263,7 +270,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 +319,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 +398,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 +410,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/miscellaneous/IdentityProviderButton.tsx

@@ -33,6 +33,7 @@ export interface Props extends Omit<ComponentPropsWithRef<"button">, "color"> {
   imgAltText?: string;
   idpType: string;
   customization?: SupportedCustomizationKeys;
+  loading?: boolean;
 }
 
 export const IdentityProviderButton: ForwardRefRenderFunction<HTMLButtonElement, Props> = ({
@@ -41,6 +42,7 @@ export const IdentityProviderButton: ForwardRefRenderFunction<HTMLButtonElement,
   imgAltText,
   idpType,
   customization,
+  loading,
   ...rest
 }) => {
   const DEFAULT_BACKGROUND_COLOR = "#FFFFFF";
@@ -70,13 +72,14 @@ export const IdentityProviderButton: ForwardRefRenderFunction<HTMLButtonElement,
       color="primary"
       variant="fill"
       className={classes["idp-button"]}
+      loading={loading}
       {...rest}
     >
       <span className={classes["idp-button--with-icon"]}>
         <img
           height={24}
           width={24}
-          src={iconUrl || `/ui-resources-static/common/icons/${idpType}.svg`}
+          src={iconUrl || `/ui-resources-static/common/idb/icons/${idpType}.svg`}
           alt={imgAltText || "Identity Provider icon"}
         />
         {children}