@onewelcome/react-lib-components 8.3.0 → 8.4.0

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,8 @@
   content: "\e950";
   @include fontProperties();
 }
+
+.icon-sidesheet-handle:before {
+  content: "\e951";
+  @include fontProperties();
+}

package/src/components/Icon/Icon.tsx

@@ -100,7 +100,8 @@ export enum Icons {
   ZoomIn = "zoom-in",
   ZoomOut = "zoom-out",
   ArrowUp = "arrow-up",
-  ExternalLink = "external-link"
+  ExternalLink = "external-link",
+  SideSheetHandle = "sidesheet-handle"
 }
 
 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} />

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

@@ -0,0 +1,96 @@
+/*!
+ * 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.
+ */
+
+@use "../../../mixins.module.scss";
+
+.slide-in-modal {
+  right: 0;
+  left: auto;
+
+  justify-content: flex-end;
+
+  min-width: 25rem;
+  width: 33vw;
+  max-width: 40rem;
+
+  visibility: visible;
+
+  transform: translate(calc(100% - 0.5rem));
+  @include mixins.transition(transform, 0.5s, ease-in-out);
+
+  &.hide {
+    visibility: hidden;
+  }
+
+  &.visible {
+    visibility: visible;
+    transform: translate(0%);
+
+    #backdrop-slide {
+      background-color: transparent;
+    }
+  }
+}
+
+.handle {
+  position: absolute;
+  top: 13.25rem;
+  left: -1.5rem;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 1.5rem;
+  height: 2.5rem;
+  padding: 0.5rem 0;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+  background-color: var(--modal-background-color);
+  box-shadow:
+    -4px 4px 5px 0px var(--side-sheet-shadow-color-one),
+    -4px 3px 14px 0px var(--side-sheet-shadow-color-two),
+    -4px 8px 10px 0px var(--side-sheet-shadow-color-two);
+}
+
+.handle-button {
+  transform: rotateY(180deg);
+}
+
+.collapsed-sheet {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 0.5rem;
+  height: 100vh;
+  background-color: var(--modal-background-color);
+  box-shadow:
+    0px 4px 5px 0px var(--side-sheet-shadow-color-one),
+    0px 3px 14px 0px var(--side-sheet-shadow-color-two),
+    0px 8px 10px 0px var(--side-sheet-shadow-color-two);
+}
+
+.container {
+  margin-top: 0;
+  width: 50rem;
+  height: 100%;
+  max-height: unset;
+  border-radius: 0;
+  box-shadow:
+    0px 4px 5px 0px var(--side-sheet-shadow-color-one),
+    0px 3px 14px 0px var(--side-sheet-shadow-color-two),
+    0px 8px 10px 0px var(--side-sheet-shadow-color-two);
+}

package/src/components/Notifications/SideSheet/SideSheet.tsx

@@ -0,0 +1,114 @@
+/*
+ * 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, {
+  ForwardRefRenderFunction,
+  TransitionEventHandler,
+  useState,
+  useRef,
+  useCallback,
+  useEffect
+} from "react";
+import { Props as ModalProps, Modal } from "../Modal/Modal";
+import classes from "./SideSheet.module.scss";
+import { IconButton } from "../../Button/IconButton";
+import { Icon, Icons } from "../../Icon/Icon";
+
+export interface Props extends Omit<ModalProps, "hideBackdrop" | "disableBackdrop"> {
+  handleButtonProps?: {
+    onOpen: () => void;
+    onClose: () => void;
+    title?: string;
+  };
+}
+
+const SideSheetComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  { children, id, open, handleButtonProps, ...rest }: Props,
+  ref
+) => {
+  const [classHideOnTransition, setClassHideOnTransition] = useState<string>("hide");
+  const [controlledOpen, setControlledOpen] = useState(false);
+  const containerRef = useRef(null);
+  const handleTitle = handleButtonProps?.title ?? "Side sheet handle";
+  const handleButtonStyle = {
+    width: "1.5rem",
+    height: "3.5rem",
+    borderTopLeftRadius: "4px",
+    borderBottomLeftRadius: "4px"
+  };
+
+  const onTransitionEnd: TransitionEventHandler<HTMLDivElement> = useCallback(
+    e => {
+      if (e.target === containerRef.current) {
+        setClassHideOnTransition(prev => (prev ? "" : "hide"));
+        if (!open && controlledOpen) {
+          setControlledOpen(false);
+        }
+      }
+    },
+    [open]
+  );
+
+  useEffect(() => {
+    open && setControlledOpen(open);
+  }, [open]);
+
+  return (
+    <>
+      {handleButtonProps && !open && (
+        <div className={classes["collapsed-sheet"]}>
+          <div className={classes["handle"]}>
+            <IconButton
+              style={handleButtonStyle}
+              className={classes["handle-button"]}
+              onClick={handleButtonProps.onOpen}
+              title={handleTitle}
+            >
+              <Icon size="0.9rem" icon={Icons.SideSheetHandle} />
+            </IconButton>
+          </div>
+        </div>
+      )}
+      <Modal
+        {...rest}
+        id={id}
+        open={controlledOpen}
+        className={`${classes["slide-in-modal"]} ${open ? classes["visible"] : ""} ${
+          !open ? classes[classHideOnTransition] : ""
+        }`}
+        containerProps={{ className: classes["container"] }}
+        hideBackdrop={true}
+        onTransitionEnd={onTransitionEnd}
+        ref={ref ?? containerRef}
+      >
+        {handleButtonProps && (
+          <div className={classes["handle"]}>
+            <IconButton
+              style={handleButtonStyle}
+              title={handleTitle}
+              onClick={handleButtonProps.onClose}
+            >
+              <Icon size="0.9rem" icon={Icons.SideSheetHandle} />
+            </IconButton>
+          </div>
+        )}
+        {children}
+      </Modal>
+    </>
+  );
+};
+
+export const SideSheet = React.forwardRef(SideSheetComponent);

package/src/components/Notifications/SideSheet/SideSheetActions/SideSheetActions.tsx

@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */
+
+export { BaseModalActions as SideSheetActions } from "../../BaseModal/BaseModalActions/BaseModalActions";
+export type { Props } from "../../BaseModal/BaseModalActions/BaseModalActions";

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

@@ -0,0 +1,19 @@
+/*
+ * 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.
+ */
+
+.side-sheet-content {
+  padding: 1.5rem;
+}