@onewelcome/react-lib-components 8.3.0 → 8.5.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "homepage": "http://onewelcome.github.io/react-lib-components",
   "name": "@onewelcome/react-lib-components",
-  "version": "8.3.0",
+  "version": "8.5.0",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/cjs/src/index.cjs.js",
@@ -53,16 +53,16 @@
     "node": ">=16"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.9",
-    "@babel/preset-env": "^7.24.8",
+    "@babel/core": "^7.24.7",
+    "@babel/preset-env": "^7.24.7",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@chromatic-com/storybook": "^1.6.1",
+    "@chromatic-com/storybook": "^1.6.0",
     "@mdx-js/react": "^3.0.1",
     "@onewelcome/eslint-config-shared-codestyle": "^9.2.3",
     "@onewelcome/storybook-addon-basestyling": "^2.0.0",
-    "@rollup/plugin-commonjs": "^26.0.3",
-    "@rollup/plugin-node-resolve": "^15.2.4",
+    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
     "@storybook/addon-a11y": "^8.1.11",
@@ -78,29 +78,29 @@
     "@storybook/react": "^8.1.11",
     "@storybook/react-webpack5": "^8.1.11",
     "@storybook/theming": "^8.1.11",
-    "@testing-library/dom": "^10.3.2",
-    "@testing-library/jest-dom": "^6.4.8",
-    "@testing-library/react": "^16.0.1",
+    "@testing-library/dom": "^10.3.0",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^29.5.13",
+    "@types/jest": "^29.5.12",
     "@types/mdx": "^2.0.13",
-    "@types/react": "^18.3.11",
+    "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^7.15.0",
     "@typescript-eslint/parser": "^7.15.0",
     "babel-loader": "^9.1.3",
-    "chromatic": "^11.5.6",
+    "chromatic": "^11.5.4",
     "css-loader": "^7.1.2",
-    "eslint": "^8.57.1",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-cypress": "^3.3.0",
     "eslint-plugin-export-scope": "^2.4.0",
     "eslint-plugin-jest": "^28.6.0",
     "eslint-plugin-license-header": "^0.6.1",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.4",
+    "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-storybook": "^0.8.0",
     "husky": "^9.1.6",
@@ -109,30 +109,30 @@
     "jest-environment-jsdom": "^29.7.0",
     "jest-junit": "^16.0.0",
     "jest-sonar-reporter": "^2.0.0",
-    "lint-staged": "^15.2.10",
-    "mini-css-extract-plugin": "^2.9.1",
+    "lint-staged": "^15.2.7",
+    "mini-css-extract-plugin": "^2.9.0",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.47",
+    "postcss": "^8.4.39",
     "postcss-modules": "^6.0.0",
     "postcss-url": "^10.1.3",
-    "prettier": "^3.3.3",
+    "prettier": "^3.3.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-is": "^18.3.1",
     "react-router-dom": "^6.24.1",
     "remark-gfm": "^4.0.0",
     "rimraf": "^6.0.1",
-    "rollup": "^4.18.1",
+    "rollup": "^4.18.0",
     "rollup-plugin-postcss": "^4.0.2",
-    "sass": "1.77.8",
+    "sass": "1.77.6",
     "sass-loader": "^14.2.1",
-    "size-limit": "^11.1.6",
+    "size-limit": "^11.1.4",
     "storybook": "^8.1.11",
     "storybook-addon-mock": "^5.0.0",
     "storybook-addon-pseudo-states": "^3.1.1",
     "style-loader": "^4.0.0",
     "ts-jest": "^29.1.5",
     "tslib": "^2.6.3",
-    "typescript": "^5.5.4"
+    "typescript": "^5.5.3"
   }
 }

package/src/components/Button/BaseButton.tsx

@@ -16,7 +16,7 @@
 
 import React, { ForwardRefRenderFunction, ComponentPropsWithRef, Fragment } from "react";
 import classes from "./BaseButton.module.scss";
-import { Spinner } from "./Spinner";
+import { ButtonSpinner } from "./Spinner";
 
 export interface Props extends ComponentPropsWithRef<"button"> {
   type?: "submit" | "button" | "reset";
@@ -49,7 +49,7 @@ const BaseButtonComponent: ForwardRefRenderFunction<HTMLButtonElement, Props> =
       {loading ? (
         <Fragment>
           <div className={classes["content-hidden"]}>{children}</div>
-          <Spinner className={classes["spinner"]} />
+          <ButtonSpinner className={classes["spinner"]} />
         </Fragment>
       ) : (
         children

package/src/components/Button/Spinner.tsx

@@ -16,7 +16,7 @@
 
 import React from "react";
 
-export const Spinner: React.FC<React.SVGProps<SVGSVGElement>> = props => (
+export const ButtonSpinner: React.FC<React.SVGProps<SVGSVGElement>> = props => (
   <svg
     {...props}
     width="24"

package/src/components/DataGrid/DataGridBody/DataGridCell/DataGridCell.module.scss

@@ -17,7 +17,7 @@
 @use "../../../../mixins.module.scss";
 
 .cell {
-  height: 2.75rem;
+  height: 2.625rem;
   padding: 0.25rem 1rem;
 
   &:first-child {

package/src/components/DataGrid/DataGridBody/DataGridRow/DataGridRow.module.scss

@@ -13,6 +13,8 @@
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
+@use "../../dataGridMixins.module";
+
 $nesting-limit: 6;
 
 .row {
@@ -23,29 +25,11 @@ $nesting-limit: 6;
     background-color: var(--data-grid-row-hover-background-color);
   }
 
-  @mixin borderAfter($i, $no-offset: false) {
-    content: "";
-    position: absolute;
-
-    @if $no-offset {
-      width: 100%;
-      left: 0;
-    } @else if $i > 0 {
-      width: calc(100% - calc(3.0625rem + $i * 4.125rem));
-      left: calc(3.0625rem + $i * 4.125rem);
-    } @else {
-      width: calc(100% - 3.0625rem);
-      left: 3.0625rem;
-    }
-    bottom: 0;
-    border-bottom: 1px solid var(--light-grey-border);
-  }
-
   @mixin border-x {
     @for $i from 0 through $nesting-limit {
       &.border-#{$i} {
-        &:not(:last-child)::after {
-          @include borderAfter($i);
+        &::after {
+          @include dataGridMixins.borderAfter($i);
         }
       }
     }
@@ -54,14 +38,14 @@ $nesting-limit: 6;
   @include border-x();
 
   &.border {
-    &:not(:last-child)::after {
-      @include borderAfter(0, true);
+    &::after {
+      @include dataGridMixins.borderAfter(0, true);
     }
   }
 
   &.border-drawer {
-    &:not(:last-child):not(:nth-last-child(2))::after {
-      @include borderAfter(0, true);
+    &:not(:nth-last-child(2))::after {
+      @include dataGridMixins.borderAfter(0, true);
     }
   }
 }

package/src/components/DataGrid/DataGridFilters/DataGridFilters.interfaces.ts

@@ -83,3 +83,8 @@ export interface FiltersTranslations {
   tag?: TagTranslations;
   popover?: PopoverTranslations;
 }
+
+export interface KeyValuePair<TKey = string, TValue = string> {
+  key: TKey;
+  value: TValue;
+}

package/src/components/DataGrid/DataGridFilters/DataGridSearchbar.tsx

@@ -15,10 +15,13 @@
  */
 
 import React, { useState, useEffect } from "react";
-import { InputWrapper } from "../../Form/Wrapper/InputWrapper/InputWrapper";
+import {
+  InputWrapper,
+  Props as InputWrapperProps
+} from "../../Form/Wrapper/InputWrapper/InputWrapper";
 import { Icon, Icons } from "../../Icon/Icon";
 import classes from "./DataGridToolbar.module.scss";
-import { InputWrapperProps, useDebouncedCallback } from "../../..";
+import { useDebouncedCallback } from "../../../hooks/useDebouncedCallback";
 
 export interface DataGridSearchbarProps {
   onSearch: (value: string) => void;

package/src/components/DataGrid/DataGridFilters/FilterKeyMapper.ts

@@ -0,0 +1,48 @@
+/*
+ * 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 { KeyValuePair } from "./DataGridFilters.interfaces";
+
+export class FilterKeyMapper {
+  columnKvPairs = new Map<string, { key: string; value: string }[]>();
+
+  setColumnKvPairs(columnName: string, kvPairs: { key: string; value: string }[]) {
+    this.columnKvPairs.set(columnName, kvPairs);
+  }
+
+  getValues(columnName: string): string[] {
+    return this.getKvPairs(columnName).map(kv => kv.value);
+  }
+
+  getKeysForValues(columnName: string, values: string[]): string[] {
+    const kvPairs = this.getKvPairs(columnName);
+    return values.map(v => {
+      const kv = kvPairs?.find(kv => kv.value === v);
+      if (kv == undefined) {
+        throw new Error(`Column '${columnName}' in FilterKeyMapper does not contain value '${v}'`);
+      }
+      return kv.key;
+    });
+  }
+
+  getKvPairs(columnName: string): KeyValuePair[] {
+    const kvPairs = this.columnKvPairs.get(columnName);
+    if (kvPairs == undefined) {
+      throw new Error(`Column '${columnName}' not found in ${FilterKeyMapper.name}`);
+    }
+    return kvPairs;
+  }
+}

package/src/components/DataGrid/DataGridHeader/DataGridHeader.module.scss

@@ -13,19 +13,20 @@
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
+@use "../dataGridMixins.module";
 
 .row {
-  height: 2.5rem;
+  height: 3.25rem;
+  background-color: var(--color-blue-grey25);
+  position: relative;
+  border-top: 2px solid var(--light-grey-border);
+
+  &::after {
+    @include dataGridMixins.borderAfter(0, true);
+  }
 }
 
 .context-menu {
   width: 4.125rem;
   box-sizing: border-box;
 }
-
-@media only screen and (min-width: 50em) {
-  .thead::after {
-    width: calc(100% - 2.5rem);
-    left: 1.25rem;
-  }
-}

package/src/components/DataGrid/dataGridMixins.module.scss

@@ -0,0 +1,33 @@
+/*!
+ * 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.
+ */
+
+@mixin borderAfter($i, $no-offset: false) {
+  content: "";
+  position: absolute;
+
+  @if $no-offset {
+    width: 100%;
+    left: 0;
+  } @else if $i > 0 {
+    width: calc(100% - calc(3.0625rem + $i * 4.125rem));
+    left: calc(3.0625rem + $i * 4.125rem);
+  } @else {
+    width: calc(100% - 3.0625rem);
+    left: 3.0625rem;
+  }
+  bottom: 0;
+  border-bottom: 2px solid var(--light-grey-border);
+}

package/src/components/DataGrid/testUtils.ts

@@ -18,48 +18,39 @@ import { useEffect, useState } from "react";
 import { Filter } from "./DataGridFilters/DataGridFilters.interfaces";
 import { useFiltersReducer } from "./DataGridFilters/useFiltersReducer";
 
+type OperatorPredicateMap<TOperator extends string> = {
+  [op in TOperator]: (v1: string, v2: string) => boolean;
+};
+
+const operatorPredicateMap: OperatorPredicateMap<string> = {
+  is: (v1, v2) => v1 === v2,
+  "is not": (v1, v2) => v1 !== v2
+};
+
+function reduceConjunction<T>(arr: T[], fn: (v: T) => boolean) {
+  return arr.reduce((acc, val) => fn(val) && acc, true);
+}
+function reduceDisjunction<T>(arr: T[], fn: (v: T) => boolean) {
+  return arr.reduce((acc, val) => fn(val) || acc, false);
+}
+
 /**
  * @scope .
  * @scopeException stories/DataGrid/DataGrid.stories.tsx
  */
-export const useMockFilteringLogic = <T>(data: T[], filterValues: Filter[] | undefined) => {
+export const useMockFilteringLogic = <T extends { [k: string]: string }>(
+  data: T[],
+  filterValues: Filter[] | undefined
+) => {
   const { state, addFilter, editFilter, deleteFilter, clearFilters } =
     useFiltersReducer(filterValues);
 
   const [gridData, setGridData] = useState(data);
 
-  const operatorPredicateMap = {
-    is: (v1: string, v2: string) => v1 === v2,
-    "is not": (v1: string, v2: string) => v1 !== v2
-  };
-
   useEffect(() => {
-    const filteredData = data
-      .map((row: T) => {
-        let shouldBeDiscarded: boolean[] = [];
-        state.filters.forEach(filter => {
-          shouldBeDiscarded = [
-            ...shouldBeDiscarded,
-            !filter.value.reduce((acc, val) => {
-              return (
-                // eslint-disable-next-line  @typescript-eslint/no-explicit-any
-                (operatorPredicateMap[filter.operator as keyof typeof operatorPredicateMap] as any)(
-                  row[filter.column as keyof typeof row],
-                  val
-                ) && acc
-              );
-            }, true)
-          ];
-        });
-
-        return shouldBeDiscarded.length > 0 &&
-          shouldBeDiscarded.reduce((acc, val) => acc || val, false)
-          ? undefined
-          : row;
-      })
-      .filter(val => {
-        return val !== undefined;
-      }) as T[];
+    const filteredData = data.map(filterRow).filter(val => {
+      return val !== undefined;
+    });
     setGridData(filteredData);
   }, [state.filters]);
 
@@ -72,4 +63,20 @@ export const useMockFilteringLogic = <T>(data: T[], filterValues: Filter[] | und
     setGridData,
     filters: state.filters
   };
+
+  function filterRow(row: T) {
+    let shouldBeDiscarded: boolean[] = [];
+    state.filters.forEach(filter => {
+      const reduce = filter.operator == "is" ? reduceDisjunction : reduceConjunction;
+      const operatorPredicate = operatorPredicateMap[filter.operator];
+      shouldBeDiscarded = [
+        ...shouldBeDiscarded,
+        !reduce(filter.value, val => operatorPredicate(row[filter.column], val))
+      ];
+    });
+
+    return shouldBeDiscarded.length > 0 && shouldBeDiscarded.reduce((acc, val) => acc || val, false)
+      ? undefined
+      : row;
+  }
 };

package/src/components/Form/FileUpload/FileItem/FileItem.module.scss

@@ -87,7 +87,7 @@
       align-items: center;
 
       .progress-bar {
-        height: 3rem;
+        min-height: 3rem;
         width: 100%;
         background: transparent;
 
@@ -119,9 +119,9 @@
     font-size: 0.875rem;
 
     .friendly-name {
-      overflow: hidden;
+      overflow-wrap: anywhere;
       text-overflow: ellipsis;
-      white-space: nowrap;
+      text-wrap: wrap;
     }
 
     &.error {
@@ -169,6 +169,9 @@
     display: block;
     margin: 0.3125rem 1.75rem;
     padding: 0;
+    overflow-wrap: anywhere;
+    text-overflow: ellipsis;
+    text-wrap: wrap;
   }
 
   .error,

package/src/components/Form/FileUpload/FileItem/FileItem.tsx

@@ -195,7 +195,9 @@ const FileItemComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
           />
         )}
         <Icon icon={icons.fileIcon} className={classes["file-icon"]} />
-        <span className={classes["friendly-name"]}>{friendlyName}</span>.<span>{extension}</span>
+        <span className={classes["friendly-name"]}>
+          {friendlyName}.{extension}
+        </span>
       </Typography>
     );
   };

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

@@ -28,8 +28,19 @@
 
   .file-upload-title {
     margin: 0 0 0.25rem 0;
-    font-size: 0.875rem;
+    font-family: var(--font-family);
+    font-size: var(--form-control-font-size);
+    line-height: var(--default-line-height);
+    color: var(--color-blue-grey900);
     font-weight: 400;
+    display: block;
+
+    &.required {
+      &:after {
+        content: " *";
+        color: var(--error);
+      }
+    }
   }
 
   &.error {
@@ -66,10 +77,6 @@
     right: 2rem;
   }
 
-  .file-upload-title-mandatory {
-    color: var(--color-red500);
-  }
-
   & {
     @include transition(all, 0.2s, ease-in-out);
   }

package/src/components/Form/FileUpload/FileUpload.tsx

@@ -28,6 +28,7 @@ import { Props as InputProps } from "../Input/Input";
 import { Typography } from "../../Typography/Typography";
 import classes from "./FileUpload.module.scss";
 import { useDetermineStatusIcon } from "../../../hooks/useDetermineStatusIcon";
+import { Label } from "../Label/Label";
 
 type FileUploadType = Omit<InputProps, "onDrop" | "type" | "onChange" | "suffix" | "prefix">;
 export type FileType = Omit<FileConfig, "onRequestedFileAction"> &
@@ -105,6 +106,9 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
   }
   disabled && dropzoneContainerClassNames.push(classes["disabled"]);
   success && !error && dropzoneClassNames.push(classes["success"]);
+  const inputId = `input-${name}`;
+  const labelClasses = [classes["file-upload-title"]];
+  isRequired && labelClasses.push(classes["required"]);
 
   const getFileList = (files: FileList | null): FileType[] => {
     let savedFiles = fileList ? [...fileList] : [];
@@ -160,9 +164,9 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
       const isAtLeastOneMb = maxFileSizeInBytes >= 1024 * 1024;
 
       if (isAtLeastOneMb) {
-        sizeMessage = `${(maxFileSizeInBytes / (1024 * 1024)).toFixed(2)}MB`;
+        sizeMessage = `${parseFloat((maxFileSizeInBytes / (1024 * 1024)).toFixed(2))}MB`;
       } else {
-        sizeMessage = `${(maxFileSizeInBytes / 1024).toFixed(2)}KB`;
+        sizeMessage = `${parseFloat((maxFileSizeInBytes / 1024).toFixed(2))}KB`;
       }
 
       result.error =
@@ -228,11 +232,9 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
     <div className={classes["file-upload-wrapper"]} {...wrapperProps}>
       <div className={classes["dropzone-wrapper"]}>
         <div className={dropzoneClassNames.join(" ")}>
-          <Typography variant="body-bold" className={classes["file-upload-title"]} ref={labelRef}>
-            {title}{" "}
-            {isRequired && <span className={classes["file-upload-title-mandatory"]}>*</span>}
-          </Typography>
-
+          <Label ref={labelRef} className={`${labelClasses.join(" ")}`} htmlFor={inputId}>
+            {title}
+          </Label>
           {fileList?.length > 0 && (
             <ul className={classes["file-list"]}>
               {fileList.map(({ name, status, progress, error }) => (
@@ -271,6 +273,7 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
                     ref={ref}
                     aria-labelledby={labeledBy}
                     type="file"
+                    id={inputId}
                     name={name}
                     multiple={multiple}
                     disabled={disabled}

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

@@ -377,3 +377,15 @@
   content: "\e950";
   @include fontProperties();
 }
+.icon-sidesheet-handle:before {
+  content: "\e951";
+  @include fontProperties();
+}
+.icon-pending-circle:before {
+  content: "\e952";
+  @include fontProperties();
+}
+.icon-minus-circle:before {
+  content: "\e953";
+  @include fontProperties();
+}

package/src/components/Icon/Icon.tsx

@@ -100,7 +100,10 @@ export enum Icons {
   ZoomIn = "zoom-in",
   ZoomOut = "zoom-out",
   ArrowUp = "arrow-up",
-  ExternalLink = "external-link"
+  ExternalLink = "external-link",
+  SideSheetHandle = "sidesheet-handle",
+  PendingCircle = "pending-circle",
+  MinusCircle = "minus-circle"
 }
 
 type Tag = "span" | "div" | "i";

package/src/components/Notifications/BaseModal/BaseModal.tsx

@@ -44,6 +44,7 @@ export interface Props extends ComponentPropsWithRef<"div"> {
   describedby?: string;
   disableEscapeKeyDown?: boolean;
   disableBackdrop?: boolean;
+  hideBackdrop?: boolean;
   forceContainerOpen?: boolean;
   zIndex?: number;
   domRoot?: HTMLElement;
@@ -84,6 +85,7 @@ const BaseModalComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     describedby,
     disableEscapeKeyDown = false,
     disableBackdrop = false,
+    hideBackdrop = false,
     forceContainerOpen = false,
     zIndex,
     domRoot,
@@ -141,12 +143,14 @@ const BaseModalComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
           onKeyDown={handleEscKeyPress}
           style={{ zIndex }}
         >
-          <div
-            {...backdropProps}
-            aria-hidden={true}
-            className={`${classes["backdrop"]} ${backdropProps?.className ?? ""}`}
-            onClick={handleBackdropClick}
-          ></div>
+          {!hideBackdrop ? (
+            <div
+              {...backdropProps}
+              aria-hidden={true}
+              className={`${classes["backdrop"]} ${backdropProps?.className ?? ""}`}
+              onClick={handleBackdropClick}
+            ></div>
+          ) : null}
           {forceContainerOpen ? (
             <div
               {...containerProps}

package/src/components/Notifications/BaseModal/BaseModalHeader/BaseModalHeader.tsx

@@ -23,16 +23,17 @@ import { Typography } from "../../../Typography/Typography";
 export interface Props extends ComponentPropsWithRef<"div"> {
   id: string;
   title: string;
+  description?: string;
   children?: React.ReactNode;
   onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
 const BaseModalHeaderComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  { id, title, children, onClose, ...rest }: Props,
+  { id, title, children, onClose, description, className, ...rest }: Props,
   ref
 ) => {
   return (
-    <div {...rest} ref={ref} className={classes["header"]}>
+    <div {...rest} ref={ref} className={`${classes["header"]} ${className}`}>
       <div className={classes["headline"]}>
         <div className={classes["title-wrapper"]}>
           <Typography
@@ -44,6 +45,17 @@ const BaseModalHeaderComponent: ForwardRefRenderFunction<HTMLDivElement, Props>
           >
             {title}
           </Typography>
+          {description && (
+            <Typography
+              id={id}
+              className={classes["title"]}
+              tag="span"
+              spacing={{ marginBottom: 0 }}
+              variant="body"
+            >
+              {description}
+            </Typography>
+          )}
         </div>
         <IconButton onClick={onClose} className={classes["closeBtn"]} title="close modal">
           <Icon icon={Icons.Times} />