@onewelcome/react-lib-components 8.2.0 → 8.4.0

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/DatePicker/DatePicker.module.scss

@@ -0,0 +1,333 @@
+/*
+ * 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.
+ */
+
+/*
+  Those styles were originally taken from https://github.com/gpbl/react-day-picker/blob/main/src/style.css.
+  Some where updated as per design, to match the single select mode. The rest is kept intact in the file to simplify the
+  styling of the upcoming features.
+ */
+
+@use "../../variables.scss";
+@use "src/mixins.module";
+
+.rdp-root {
+  --rdp-day-height: 2rem;
+  --rdp-day-width: 2rem;
+
+  --rdp-disabled-opacity: 0.5;
+  --rdp-outside-opacity: 0.75;
+
+  --rdp-dropdown-gap: 0.5rem;
+  --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-height: 2.75rem;
+
+  --rdp-range_middle-background-color: var(--color-primary50);
+  --rdp-range_middle-color: black;
+
+  --rdp-range_start-color: white;
+  --rdp-range_start-background: var(--color-primary);
+  --rdp-range_start-date-background-color: var(--color-primary);
+
+  --rdp-range_end-background: var(--color-primary);
+  --rdp-range_end-color: white;
+  --rdp-range_end-date-background-color: var(--color-primary);
+
+  --rdp-week_number-border-radius: var(--button-border-radius);
+  --rdp-week_number-border: var(--button-border-radius) solid transparent;
+  --rdp-week_number-height: var(--rdp-day-height);
+  --rdp-week_number-opacity: 0.75;
+  --rdp-week_number-width: var(--rdp-day-width);
+  --rdp-weeknumber-text-align: center;
+
+  --rdp-weekday-padding: 0.5rem 0rem;
+  --rdp-weekday-text-align: center;
+
+  --rdp-gradient-direction: 90deg;
+}
+
+.rdp-root[dir="rtl"] {
+  --rdp-gradient-direction: -90deg;
+}
+
+.rdp-root {
+  position: relative;
+  box-sizing: border-box;
+  @include mixins.fontProperties(var(--font-family), var(--font-size-sub), 400, 1rem);
+}
+
+.rdp-root * {
+  box-sizing: border-box;
+}
+
+.rdp-day {
+  width: var(--rdp-day-width);
+  height: var(--rdp-day-height);
+  border: none;
+  text-align: center;
+  padding: 0;
+}
+
+.rdp-day_button {
+  background: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+
+  width: var(--rdp-day-width);
+  height: var(--rdp-day-height);
+  border: var(--button-border-radius) solid transparent;
+  border-radius: var(--button-border-radius);
+
+  @include mixins.focusVisibleOutline($outlineOffset: -2px);
+}
+
+.rdp-day_button:disabled {
+  cursor: revert;
+}
+
+.rdp-caption_label {
+  z-index: 1;
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+
+  white-space: nowrap;
+  border: 0;
+}
+
+.rdp-button_next,
+.rdp-button_previous {
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  appearance: none;
+
+  width: var(--rdp-nav_button-width);
+  height: var(--rdp-nav_button-height);
+
+  @include mixins.focusVisibleOutline($outlineOffset: 2px);
+}
+
+.rdp-button_previous {
+  margin-right: 0.5rem;
+}
+
+.rdp-button_next:disabled,
+.rdp-button_previous:disabled {
+  cursor: revert;
+
+  opacity: var(--rdp-nav_button-disabled-opacity);
+}
+
+.rdp-chevron {
+  display: inline-block;
+  fill: var(--color-blue-grey500);
+}
+
+.rdp-root[dir="rtl"] .rdp-nav .rdp-chevron {
+  transform: rotate(180deg);
+}
+
+.rdp-root[dir="rtl"] .rdp-nav .rdp-chevron {
+  transform: rotate(180deg);
+  transform-origin: 50%;
+}
+
+.rdp-dropdowns {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rdp-dropdown-gap);
+  color: var(--color-blue-grey500);
+  font-weight: 700;
+}
+
+.rdp-dropdown {
+  z-index: 2;
+
+  /* Reset */
+  opacity: 0;
+  appearance: none;
+  position: absolute;
+  inset-block-start: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  cursor: inherit;
+  border: none;
+  line-height: inherit;
+}
+
+.rdp-dropdown_root {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.rdp-years_dropdown {
+  &:focus-visible + .rdp-caption_label .rdp-chevron {
+    @include mixins.focusVisibleOutline($selectors: null, $outlineOffset: 0);
+  }
+}
+
+.rdp-years_dropdown + .rdp-caption_label .rdp-chevron {
+  margin-left: 0.25rem;
+  width: 0.875rem;
+}
+
+.rdp-dropdown_root[data-disabled="true"] .rdp-chevron {
+  opacity: var(--rdp-disabled-opacity);
+}
+
+.rdp-month_caption {
+  display: flex;
+  align-content: center;
+  height: var(--rdp-nav-height);
+}
+
+.rdp-months {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--rdp-months-gap);
+  max-width: fit-content;
+}
+
+.rdp-month_grid {
+  border-collapse: collapse;
+}
+
+.rdp-nav {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+
+  display: flex;
+  align-items: center;
+
+  height: var(--rdp-nav-height);
+}
+
+.rdp-weekday {
+  padding: var(--rdp-weekday-padding);
+  text-align: var(--rdp-weekday-text-align);
+  font-size: 0.625rem;
+  color: var(--color-blue-grey400);
+  height: var(--rdp-day-height);
+  width: var(--rdp-day-width);
+  font-weight: 400;
+}
+
+.rdp-week_number {
+  opacity: var(--rdp-week_number-opacity);
+  height: var(--rdp-week_number-height);
+  width: var(--rdp-week_number-width);
+  border: var(--rdp-week_number-border);
+  border-radius: var(--rdp-week_number-border-radius);
+  text-align: var(--rdp-weeknumber-text-align);
+}
+
+.rdp-today:not(.rdp-outside) {
+  color: var(--color-primary);
+}
+
+.rdp-selected {
+  color: white;
+  background-color: var(--color-primary);
+  border-radius: var(--button-border-radius);
+}
+
+.rdp-selected.rdp-outside.rdp-range_middle .rdp-day_button {
+  color: var(--color-blue-grey400);
+}
+
+.rdp-selected .rdp-day_button {
+  border: var(--button-border-radius) solid var(--color-primary);
+}
+
+.rdp-outside {
+  color: var(--color-blue-grey400);
+}
+
+.rdp-disabled {
+  opacity: var(--rdp-disabled-opacity);
+}
+
+.rdp-hidden {
+  visibility: hidden;
+  color: var(--rdp-range_start-color);
+}
+
+.rdp-range_start {
+  background: var(--rdp-range_start-background);
+}
+
+.rdp-range_start .rdp-day_button {
+  background-color: var(--rdp-range_start-date-background-color);
+  color: var(--rdp-range_start-color);
+}
+
+.rdp-range_middle {
+  background-color: var(--rdp-range_middle-background-color);
+  border-radius: 0;
+
+  &:focus-visible {
+    border-radius: var(--focus-border-radius);
+  }
+}
+
+.rdp-range_middle .rdp-day_button {
+  border-color: transparent;
+  color: var(--rdp-range_middle-color);
+}
+
+.rdp-range_end {
+  background: var(--rdp-range_end-background);
+  color: var(--rdp-range_end-color);
+}
+
+.rdp-range_end .rdp-day_button {
+  color: var(--rdp-range_start-color);
+  background-color: var(--rdp-range_end-date-background-color);
+}
+
+.rdp-range_start.rdp-range_end {
+  background: revert;
+}
+
+.rdp-focusable {
+  cursor: pointer;
+}

package/src/components/DatePicker/DatePicker.tsx

@@ -0,0 +1,83 @@
+/*
+ * 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, { ComponentPropsWithoutRef, Fragment, useEffect, useState } from "react";
+import { ClassNames, DateRange, DayPicker, Locale, PropsBase } from "react-day-picker";
+import classes from "./DatePicker.module.scss";
+import * as locales from "date-fns/locale";
+
+export interface Props extends ComponentPropsWithoutRef<any> {
+  onSelect: (date: Date | DateRange | undefined) => void;
+  mode: "single" | "range";
+  value: Date | DateRange | undefined;
+  required?: boolean;
+  locale?: keyof typeof locales;
+}
+
+export const DatePicker = ({ onSelect, value, required, mode, locale, ...rest }: Props) => {
+  const [dayPickerLocale, setDayPickerLocale] = useState<Locale>(locales.enGB);
+
+  useEffect(() => {
+    try {
+      const selectedLocale = locales[locale!];
+      setDayPickerLocale(selectedLocale);
+    } catch (e) {
+      setDayPickerLocale(locales.enGB);
+    }
+  }, [locale]);
+
+  const getCustomClassNamesMapping = (): Partial<ClassNames> => {
+    const CLASSNAME_PREFIX = "rdp-";
+    const dayPickerClassNames: Partial<ClassNames> = {};
+
+    Object.keys(classes).forEach(key => {
+      const classKey = key.replace(CLASSNAME_PREFIX, "") as keyof ClassNames;
+      dayPickerClassNames[classKey] = classes[key];
+    });
+
+    return dayPickerClassNames;
+  };
+
+  const commonProps: PropsBase = {
+    showOutsideDays: true,
+    captionLayout: "dropdown-years",
+    required: required,
+    classNames: getCustomClassNamesMapping(),
+    locale: dayPickerLocale
+  };
+
+  return (
+    <Fragment>
+      {mode === "single" ? (
+        <DayPicker
+          {...rest}
+          {...commonProps}
+          mode={mode}
+          onSelect={onSelect}
+          selected={value as Date | undefined}
+        ></DayPicker>
+      ) : (
+        <DayPicker
+          {...rest}
+          {...commonProps}
+          mode={mode}
+          onSelect={onSelect}
+          selected={value as DateRange | undefined}
+        />
+      )}
+    </Fragment>
+  );
+};

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,11 +28,21 @@
 
   .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);
+      }
+    }
   }
 
-  @include transition(all, 0.2s, ease-in-out);
   &.error {
     span[data-icon-status],
     .file-upload-title {
@@ -67,8 +77,8 @@
     right: 2rem;
   }
 
-  .file-upload-title-mandatory {
-    color: var(--color-red500);
+  & {
+    @include transition(all, 0.2s, ease-in-out);
   }
 }
 
@@ -89,6 +99,7 @@
       background-color: var(--color-primary50);
 
       @include transition(all, 0.2s, ease-in-out);
+
       &::before {
         content: "Drop here";
         text-align: center;

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}