@onewelcome/react-lib-components 8.9.1 → 8.11.0

package/src/components/Form/Select/SingleSelect/Select.module.scss

@@ -16,6 +16,7 @@
 
 @use "src/mixins.module";
 @use "src/variables";
+@use "src/functions" as *;
 
 $listItemHeight: 2.5rem;
 
@@ -59,7 +60,7 @@ $listItemHeight: 2.5rem;
   .custom-select {
     position: relative;
     width: 100%;
-    min-height: calc(2.875rem - (2 * var(--input-border-width)));
+    min-height: calc(relativeToBaseFontSize(2.875) - (2 * var(--input-border-width)));
     padding: 0 calc(variables.$form-element-horizontal-padding-mobile - var(--input-border-width));
     background-color: transparent;
     border-color: var(--color-blue-grey500);
@@ -123,7 +124,7 @@ $listItemHeight: 2.5rem;
       font-size: var(--form-control-font-size);
       margin: 0;
       position: relative;
-      line-height: 1.25rem;
+      line-height: 1.43;
       box-sizing: border-box;
       min-height: $listItemHeight;
       cursor: pointer;
@@ -228,17 +229,17 @@ $listItemHeight: 2.5rem;
 
   [data-icon-status="success"] {
     color: var(--success);
-    font-size: 1.25rem;
+    font-size: var(--font-size-big);
   }
 
   [data-icon-status="error"] {
     color: var(--error);
-    font-size: 1.25rem;
+    font-size: var(--font-size-big);
   }
 
   .chevron-icon {
     color: var(--default);
-    font-size: 0.625rem;
+    font-size: var(--font-size-small);
   }
 
   * + * {

package/src/components/Form/Select/useAddNewBtn.module.scss

@@ -15,6 +15,7 @@
  */
 @use "src/mixins.module";
 @use "src/variables";
+@use "src/functions" as *;
 
 ul.has-sibling {
   padding-bottom: 2px;
@@ -25,7 +26,7 @@ ul.has-sibling {
   border: none;
   border-top: 1px solid var(--color-blue-grey50);
   width: 100%;
-  height: 2.5rem;
+  height: relativeToBaseFontSize(2.5);
   padding: 0.625rem 0.75rem;
   margin: 0 0 0.25rem;
   background-color: var(--light);

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

@@ -27,10 +27,10 @@
     right: 1.25rem;
     z-index: 1;
     top: 0.85rem;
-    font-size: 1.25rem;
+    font-size: var(--font-size-big);
 
     &:before {
-      font-size: 1.125rem;
+      font-size: var(--icon-font-big);
       height: 1.25rem;
       width: 1.25rem;
       display: flex;
@@ -56,7 +56,7 @@
     background-color: var(--color-white);
     padding: 0.5rem 0.75rem;
     font-family: var(--font-family);
-    font-size: var(--form-control-font-size);
+    font-size: var(--input-font-size);
     position: relative;
     border-radius: 0.125rem;
 
@@ -77,7 +77,7 @@
   border: 0;
   border-radius: var(--input-border-radius);
   font-family: var(--font-family);
-  font-size: var(--form-control-font-size);
+  font-size: var(--input-font-size);
   color: var(--color-blue-grey900);
   vertical-align: top;
   resize: vertical;

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 {
@@ -373,6 +373,10 @@
   content: "\e94f";
   @include fontProperties();
 }
+.icon-arrow-left:before {
+  content: "\e954";
+  @include fontProperties();
+}
 .icon-external-link:before {
   content: "\e950";
   @include fontProperties();

package/src/components/Icon/Icon.tsx

@@ -100,6 +100,7 @@ export enum Icons {
   ZoomIn = "zoom-in",
   ZoomOut = "zoom-out",
   ArrowUp = "arrow-up",
+  ArrowLeft = "arrow-left",
   ExternalLink = "external-link",
   SideSheetHandle = "sidesheet-handle",
   PendingCircle = "pending-circle",

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

@@ -13,11 +13,21 @@
     padding: 1rem 2rem 1rem 2rem;
     -webkit-transition: 0.5s;
     transition: 0.5s;
+
+    align-items: center;
   }
 
   &-background-color {
     background-color: var(--color-blue-grey25);
   }
+
+  & button.back-arrow {
+    width: 1rem;
+    height: 1rem;
+    display: block;
+
+    gap: 0.5rem;
+  }
 }
 
 .hide-text {
@@ -28,7 +38,37 @@
   margin: 0;
   font-weight: 500;
   color: var(--color-blue-grey900);
-  line-height: 3.125rem;
+  line-height: 1.25;
+  display: flex;
+  align-items: center;
+  max-width: 65vw;
+
+  // This is a temporary solution making sure that the title is not gone on mobile.
+  @media screen and (max-width: 900px) {
+    max-width: unset;
+
+    div {
+      text-wrap: wrap;
+    }
+  }
+
+  div {
+    vertical-align: middle;
+    align-self: center;
+  }
+
+  & button.back-arrow {
+    margin-right: 0.5rem;
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+}
+
+.header-tags {
+  display: flex;
+
+  margin-left: 1rem;
+  gap: 0.5rem;
 }
 
 .header-subtitle {
@@ -36,6 +76,18 @@
   font-weight: 500;
 }
 
+.back-text {
+  font-size: 0.875rem;
+  font-weight: 400;
+  margin-left: 0.5rem;
+}
+
+.error-text {
+  color: var(--color-red500);
+  vertical-align: middle;
+  margin-left: 0.5rem;
+}
+
 .buttons-wrapper {
   display: flex;
   justify-content: flex-end;

package/src/components/Layout/ContentHeader/ContentHeader.tsx

@@ -14,17 +14,35 @@
  *    limitations under the License.
  */
 
-import React, { HTMLAttributes, ReactElement } from "react";
+import React, { HTMLAttributes, ReactElement, useMemo } from "react";
 import { Button, Props as ButtonProps } from "../../Button/Button";
 import { Typography } from "../../Typography/Typography";
 
 import classes from "./ContentHeader.module.scss";
+import { IconButton } from "../../Button/IconButton";
+import { Icon, Icons } from "../../Icon/Icon";
+import { NavigateFunction } from "react-router-dom";
+import { Tag, Props as TagProps } from "../../Tag/Tag";
+import { TextEllipsis } from "../../TextEllipsis/TextEllipsis";
+
+export interface ContentHeaderNavigationProps {
+  displayText?: string;
+  navigateFN: NavigateFunction;
+}
 
 export interface Props extends HTMLAttributes<HTMLDivElement> {
   title: string;
+  /**
+   * @deprecated pass text as children
+   */
   subtitle?: string;
   buttons?: ReactElement<ButtonProps, typeof Button> | ReactElement<ButtonProps, typeof Button>[];
   collapsed?: boolean;
+  navigation?: ContentHeaderNavigationProps;
+  tags?: ReactElement<TagProps, typeof Tag>[];
+  error?: boolean;
+  errorMessage?: string;
+  errorTagText?: string;
 }
 
 export const ContentHeaderComponent = ({
@@ -33,8 +51,30 @@ export const ContentHeaderComponent = ({
   buttons,
   collapsed,
   subtitle,
+  navigation,
+  tags,
+  error,
+  errorMessage,
+  errorTagText,
   ...rest
 }: Props) => {
+  const errorTag = (
+    <Tag icon={Icons.Forbidden} backgroundColor="var(--color-red50)" color="var(--color-red900)">
+      {errorTagText || "Blocked"}
+    </Tag>
+  );
+
+  const getTags = () => tags ?? [];
+
+  const renderTags = useMemo(() => {
+    if (error && collapsed) {
+      return [errorTag, ...getTags().filter(tag => tag.props.variant !== "enabled")];
+    } else if (error) {
+      return getTags().filter(tag => tag.props.variant !== "enabled");
+    }
+    return getTags();
+  }, [tags, error, collapsed]);
+
   return (
     <div className={classes["header-background-color"]}>
       <div
@@ -42,23 +82,59 @@ export const ContentHeaderComponent = ({
         {...rest}
       >
         <div>
+          {navigation && !collapsed && (
+            <IconButton
+              onClick={() => {
+                navigation.navigateFN(-1);
+              }}
+              className={classes["back-arrow"]}
+              iconSize="s"
+            >
+              <Icon icon={Icons.ArrowLeft} />
+              <span className={classes["back-text"]}>
+                {navigation.displayText ? navigation.displayText : "Back"}
+              </span>
+            </IconButton>
+          )}
           <Typography className={classes["header-text"]} variant={"h1"}>
-            {title}
+            {navigation && collapsed && (
+              <IconButton
+                onClick={() => {
+                  navigation.navigateFN(-1);
+                }}
+                className={classes["back-arrow"]}
+              >
+                <Icon icon={Icons.ArrowLeft} />
+              </IconButton>
+            )}
+            <TextEllipsis data-testid={"content-header-title"}>{title}</TextEllipsis>
+            <span className={classes["header-tags"]}>
+              {renderTags.map((tag, index) => (
+                <React.Fragment key={tag.key || index}>{tag}</React.Fragment>
+              ))}
+            </span>
           </Typography>
-          {subtitle && (
+          {subtitle && !error && (
             <Typography
               className={`${classes["header-subtitle"]} ${collapsed ? classes["hide-text"] : ""}`}
-              variant={"h4"}
+              variant="h4"
             >
               {subtitle}
             </Typography>
           )}
           <Typography
             className={`${collapsed ? classes["hide-text"] : ""}`}
-            variant={"body"}
+            variant="body"
             spacing={{ margin: 0 }}
           >
-            {children}
+            {error ? (
+              <>
+                {errorTag}
+                <span className={classes["error-text"]}>{errorMessage}</span>
+              </>
+            ) : (
+              children
+            )}
           </Typography>
         </div>
         {buttons && <div className={classes["buttons-wrapper"]}>{buttons}</div>}

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;