@onewelcome/react-lib-components 8.9.1 → 8.10.0

package/src/components/DataGrid/DataGridFilters/DataGridFilter.module.scss

@@ -15,6 +15,7 @@
  */
 
 @use "../../../mixins.module.scss";
+@use "src/functions" as *;
 
 .filter-wrapper {
   display: flex;
@@ -67,7 +68,7 @@
   }
 
   .remove-icon {
-    font-size: 0.6rem;
+    font-size: relativeToBaseFontSize(0.6);
   }
 }
 

package/src/components/DataGrid/DataGridFilters/DateTimePicker/DateTimePicker.module.scss

@@ -14,6 +14,8 @@
  *    limitations under the License.
  */
 
+@use "src/functions" as *;
+
 .popover {
   display: flex;
   flex-direction: column;
@@ -48,8 +50,8 @@
     button {
       padding: 0.5rem 0.75rem;
 
-      font-size: 0.75rem;
-      line-height: 1rem;
+      font-size: var(--font-size-sub);
+      line-height: 1.33;
       text-align: start;
     }
   }
@@ -97,7 +99,7 @@
     max-width: 14rem;
 
     label {
-      font-size: 0.75rem;
+      font-size: var(--font-size-sub);
     }
   }
 
@@ -118,17 +120,17 @@
 
   .month-caption {
     width: 100%;
-    height: 2.5rem;
+    height: relativeToBaseFontSize(2.5);
     margin: 0;
     padding: 0.75rem 0;
 
-    font-size: 0.75rem;
+    font-size: var(--font-size-sub);
     font-weight: 500;
-    line-height: 1rem;
+    line-height: 1.33;
     text-align: center;
   }
 }
 
 .error-message {
-  font-size: 0.625rem;
+  font-size: var(--font-size-small);
 }

package/src/components/DataGrid/DataGridHeader/DataGridHeader.tsx

@@ -81,7 +81,7 @@ const DataGridHeaderComponent: ForwardRefRenderFunction<HTMLTableSectionElement,
       return null;
     }
 
-    let headerStyle: React.CSSProperties = {
+    const headerStyle: React.CSSProperties = {
       textAlign: header.align ?? "left"
     };
 

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

@@ -57,7 +57,7 @@
   justify-content: center;
 
   & > * {
-    font-size: 0.625rem;
+    font-size: var(--font-size-small);
   }
 
   .indicator {

package/src/components/DatePicker/DatePicker.module.scss

@@ -24,8 +24,8 @@
 @use "src/mixins.module";
 
 .rdp-root {
-  --rdp-day-height: 2rem;
-  --rdp-day-width: 2rem;
+  --rdp-day-height: calc(2 * var(--font-size));
+  --rdp-day-width: calc(2 * var(--font-size));
 
   --rdp-disabled-opacity: 0.5;
   --rdp-outside-opacity: 0.75;
@@ -34,8 +34,8 @@
   --rdp-months-gap: 2rem;
 
   --rdp-nav_button-disabled-opacity: 0.5;
-  --rdp-nav_button-height: 0.75rem;
-  --rdp-nav_button-width: 0.75rem;
+  --rdp-nav_button-height: var(--font-size-sub);
+  --rdp-nav_button-width: var(--font-size-sub);
   --rdp-nav-height: 2.75rem;
 
   --rdp-range_middle-background-color: var(--color-blue-grey100);
@@ -69,7 +69,7 @@
 .rdp-root {
   position: relative;
   box-sizing: border-box;
-  @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));
 }
 
 .rdp-root * {
@@ -116,6 +116,10 @@
 
   white-space: nowrap;
   border: 0;
+
+  svg {
+    transform: scale(var(--font-size));
+  }
 }
 
 .rdp-button_next,
@@ -244,7 +248,7 @@
 .rdp-weekday {
   padding: var(--rdp-weekday-padding);
   text-align: var(--rdp-weekday-text-align);
-  font-size: 0.625rem;
+  font-size: var(--font-size-small);
   color: var(--color-blue-grey400);
   height: var(--rdp-day-height);
   width: var(--rdp-day-width);

package/src/components/DatePicker/DatePicker.tsx

@@ -26,6 +26,7 @@ import {
 import classes from "./DatePicker.module.scss";
 import * as locales from "date-fns/locale";
 
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export interface Props extends ComponentPropsWithoutRef<any> {
   onSelect: (date: Date | DateRange | undefined) => void;
   mode: "single" | "range";
@@ -39,7 +40,7 @@ export interface Props extends ComponentPropsWithoutRef<any> {
 
 export const DatePicker = ({ onSelect, value, required, mode, locale, ...rest }: Props) => {
   const [dayPickerLocale, setDayPickerLocale] = useState<Locale>(locales.enGB);
-  //we have to specify the endMonth value. Otherwise the date range picker doesn't let us to navigate between years
+  //we have to specify the endMonth value. Otherwise, the date range picker doesn't let us navigate between years
   const endMonth = new Date(3000, 12);
 
   useEffect(() => {

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

@@ -14,6 +14,7 @@
  *    limitations under the License.
  */
 @use "../../../mixins.module.scss";
+@use "src/functions" as *;
 
 .checkbox-wrapper {
   position: relative;
@@ -28,7 +29,7 @@
 
   label {
     display: inline-block;
-    margin-left: 0.5rem;
+    margin-left: relativeToBaseFontSize(0.5);
     user-select: none;
     font-size: var(--font-size-form-label);
     font-family: var(--font-family);
@@ -52,8 +53,8 @@
   left: 0;
   opacity: 0;
   margin: 0;
-  width: 1.25rem;
-  height: 1.25rem;
+  width: var(--font-size-big);
+  height: var(--font-size-big);
   z-index: 2;
 
   &:checked:not(.disabled) + * {
@@ -80,8 +81,8 @@
 
   & + span[data-icon="true"]:before {
     display: block;
-    width: 20px;
-    height: 20px;
+    width: var(--font-size-big);
+    height: var(--font-size-big);
   }
 
   &:hover + .square:not(.disabled) {
@@ -104,7 +105,9 @@
 }
 
 .input {
-  font-size: 1.25rem;
+  font-size: var(--font-size-big);
+  width: var(--font-size-big);
+  height: var(--font-size-big);
   z-index: 1;
 }
 

package/src/components/Form/Fieldset/Fieldset.tsx

@@ -69,9 +69,10 @@ const FieldsetComponent: ForwardRefRenderFunction<HTMLFieldSetElement, Props> =
     }
 
     /* All right, so the issue is that whenever we try to add disabled prop to a component that doesn't accept it,
-        React will throw an error. However, it might occur that we want a component inside Fieldset because of aesthetic purposes
-        (fieldset applies a sort of container with white background and if we want to display it inside of this container... then yea).
-        So instead we supply an array of components that we want to add the disabled prop to and check if child.type equals one of these. */
+            React will throw an error. However, it might occur that we want a component inside Fieldset because of aesthetic purposes
+            (fieldset applies a sort of container with white background and if we want to display it inside of this container... then yea).
+            So instead we supply an array of components that we want to add the disabled prop to and check if child.type equals one of these. */
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     const allowedComponents: React.ComponentPropsWithRef<any>[] = [
       Input,
       Select,

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

@@ -22,7 +22,7 @@
   @include transition(all, 0.2s, ease-in-out);
 
   [class*="icon"] {
-    font-size: 1.25rem;
+    font-size: var(--font-size-big);
   }
 
   & .file-list-container {
@@ -41,7 +41,7 @@
         margin-left: 0.5rem;
 
         span {
-          font-size: 0.875rem;
+          font-size: var(--button-font-size);
           text-transform: capitalize;
         }
       }
@@ -59,14 +59,14 @@
         span.action-icon {
           display: flex;
           justify-content: center;
-          width: 1.5rem;
+          width: calc(1.71 * var(--button-font-size));
           margin-right: 0.25rem;
-          font-size: 0.875rem;
+          font-size: var(--button-font-size);
           padding-left: 0;
         }
 
         span {
-          font-size: 0.875rem;
+          font-size: var(--button-font-size);
           text-transform: capitalize;
         }
 
@@ -97,7 +97,7 @@
         }
 
         p {
-          font-size: 0.875rem;
+          font-size: var(--button-font-size);
         }
       }
     }
@@ -116,7 +116,7 @@
     margin: 0;
     display: flex;
     align-items: center;
-    font-size: 0.875rem;
+    font-size: var(--form-control-font-size);
 
     .friendly-name {
       overflow-wrap: anywhere;

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

@@ -230,7 +230,7 @@ const FileItemComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   };
 
   const restPropsWithoutPointerEvents = () => {
-    let props = rest;
+    const props = rest;
     delete rest?.style?.pointerEvents;
     return props;
   };

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

@@ -71,7 +71,7 @@
   }
 
   span[data-icon-status] {
-    font-size: 1.25rem;
+    font-size: var(--font-size-big);
     position: absolute;
     top: auto;
     right: 2rem;
@@ -199,7 +199,7 @@
   padding: 1.25rem;
 
   [class*="file"] {
-    font-size: 1.25rem;
+    font-size: var(--font-size-big);
     margin-left: 0.5rem;
   }
 

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

@@ -33,6 +33,7 @@ import { withReadOnly } from "../../withReadOnly";
 
 type FileUploadType = Omit<InputProps, "onDrop" | "type" | "onChange" | "suffix" | "prefix">;
 export type FileType = Omit<FileConfig, "onRequestedFileAction"> &
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   Pick<File, "size" | "type"> & { data?: any };
 
 export interface Props extends FileUploadType {
@@ -102,10 +103,10 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
   const [errorMsg, setErrorMsg] = useState("");
   const [inputError, setInputError] = useState(false);
   const icon = useDetermineStatusIcon({ success, error });
-  let dropzoneClassNames = [classes["file-dropzone"]];
-  let dropzoneContainerClassNames = [classes["upload-button-wrapper"]];
-  let subTextClass = [classes["file-selector-sub-text"]];
-  let errorTextClass = [classes["file-selector-sub-text"]];
+  const dropzoneClassNames = [classes["file-dropzone"]];
+  const dropzoneContainerClassNames = [classes["upload-button-wrapper"]];
+  const subTextClass = [classes["file-selector-sub-text"]];
+  const errorTextClass = [classes["file-selector-sub-text"]];
   dragActive && dropzoneContainerClassNames.push(classes["drag-active"]);
   const hasError = inputError || error || errorMsg;
   const readOnlyView = rest["data-readonlyview"];
@@ -148,7 +149,7 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
   const onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     e.preventDefault();
     e.stopPropagation();
-    let files = getFileList(e.target.files);
+    const files = getFileList(e.target.files);
     const isFileValid = files.length && verifyExtensionValidity(files[files.length - 1]);
     if (isFileValid) {
       setErrorMsg("");

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

@@ -26,7 +26,7 @@
 
 .error-icon {
   margin-right: 0.5rem;
-  font-size: 1.25rem;
+  font-size: var(--font-size-big);
 
   &-before {
     margin-right: 0.5rem;
@@ -38,6 +38,6 @@
 }
 
 .default-helper {
-  font-size: 0.75rem;
+  font-size: var(--font-size-sub);
   line-height: 1.33333333;
 }

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

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

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

@@ -14,6 +14,8 @@
  *    limitations under the License.
  */
 
+@use "src/functions" as *;
+
 .error input + span {
   outline: var(--error) solid 1px;
   outline-offset: -1px;
@@ -23,7 +25,7 @@
 
 .helper-text {
   margin-top: 0.25rem;
-  margin-left: 1.75rem;
+  margin-left: relativeToBaseFontSize(1.75);
 }
 
 .error-message {

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

@@ -16,6 +16,7 @@
 
 @use "src/mixins.module";
 @use "src/variables";
+@use "src/functions" as *;
 
 .input-wrapper {
   position: relative;
@@ -71,14 +72,14 @@
     height: 100%;
     width: 1.25rem;
     box-sizing: border-box;
-    font-size: 1.125rem;
+    font-size: var(--icon-font-big);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 2;
 
     &:before {
-      font-size: 1.125rem;
+      font-size: var(--icon-font-big);
       height: 1.25rem;
       width: 1.25rem;
       display: flex;
@@ -124,9 +125,9 @@
 
 .input {
   padding: 0;
-  height: 44px;
+  height: relativeToBaseFontSize(2.75);
   color: var(--color-blue-grey900);
-  font-size: var(--form-control-font-size);
+  font-size: var(--input-font-size);
   font-family: var(--font-family);
   box-sizing: border-box;
   border: 0;

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

@@ -14,6 +14,8 @@
  *    limitations under the License.
  */
 
+@use "src/functions" as *;
+
 .radio-wrapper {
   position: relative;
 
@@ -38,7 +40,7 @@
 
 .error-icon {
   margin-right: 0.5rem;
-  font-size: 1.25rem;
+  font-size: var(--font-size-big);
 }
 
 .radio-container {
@@ -46,7 +48,7 @@
 
   label {
     display: inline-block;
-    margin-left: 0.5rem;
+    margin-left: relativeToBaseFontSize(0.5);
     user-select: none;
     font-size: var(--font-size-form-label);
     font-family: var(--font-family);
@@ -64,14 +66,14 @@
   left: 0;
   opacity: 0;
   margin: 0;
-  width: 1.75rem;
-  height: 1.75rem;
+  width: var(--font-size-big);
+  height: var(--font-size-big);
   z-index: 2;
 
   & + span[data-icon="true"]:before {
     display: block;
-    width: 20px;
-    height: 20px;
+    width: var(--font-size-big);
+    height: var(--font-size-big);
   }
 
   &:checked + * {
@@ -124,9 +126,9 @@
 }
 
 .input {
-  font-size: 1.25rem;
-  width: 1.25rem;
-  height: 1.25rem;
+  font-size: var(--font-size-big);
+  width: var(--font-size-big);
+  height: var(--font-size-big);
   z-index: 1;
   border-radius: 100%;
 

package/src/components/Form/Radio/Radio.tsx

@@ -69,6 +69,7 @@ const RadioComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
       return;
     }
     /** We have to clone the native event we got here and change the "target" property to the value. Otherwise, this regular event has "on" as it's event.target.value, which is useless. */
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     const nativeEvent: any = event.nativeEvent || event;
     const clonedEvent = new nativeEvent.constructor(nativeEvent.type, nativeEvent);
 

package/src/components/Form/Select/MultiSelect/MultiOption.tsx

@@ -27,7 +27,7 @@ const MultiOptionComponent: ForwardRefRenderFunction<HTMLLIElement, Props> = (
   { fixed: _fixed, hasFocus, className, ...rest }: Props,
   ref
 ) => {
-  let innerOptionRef = (ref as RefObject<HTMLLIElement>) || createRef<HTMLLIElement>();
+  const innerOptionRef = (ref as RefObject<HTMLLIElement>) || createRef<HTMLLIElement>();
 
   const additionalClasses = [];
   className && additionalClasses.push(className);

package/src/components/Form/Select/MultiSelect/MultiSelect.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 {
     box-sizing: border-box;
     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);
@@ -133,7 +134,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;
@@ -192,17 +193,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);
   }
 
   * + * {
@@ -223,6 +224,7 @@ $listItemHeight: 2.5rem;
   background-color: transparent;
   color: var(--default);
   font-family: var(--font-family);
+  font-size: relativeToBaseFontSize(0.83);
   line-height: 1.3333;
   margin: 0;
   padding: 0;

package/src/components/Form/Select/MultiSelect/useSearch.tsx

@@ -67,6 +67,7 @@ export const useSearch = ({
   const renderSearch = () => {
     return (
       <input
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         {...((search?.searchInputProps as any) ?? {})}
         ref={searchInputRef}
         value={filter}

package/src/components/Form/Select/SingleSelect/Option.tsx

@@ -66,7 +66,7 @@ const OptionComponent: ForwardRefRenderFunction<HTMLLIElement, Props> = (
 ) => {
   const defaultOptionId = useRef(generateID(20));
   const optionId = id ?? defaultOptionId.current;
-  let innerOptionRef = (ref as RefObject<HTMLLIElement>) || createRef<HTMLLIElement>();
+  const innerOptionRef = (ref as RefObject<HTMLLIElement>) || createRef<HTMLLIElement>();
 
   const additionalClasses = [];
   className && additionalClasses.push(className);

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;