@onewelcome/react-lib-components 6.6.0 → 6.7.0

package/src/components/Notifications/Alert/useAlert.ts

@@ -0,0 +1,30 @@
+/*
+ * 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 { useContext } from "react";
+import AlertContext from "./AlertProvider/AlertContext";
+
+export const useAlert = () => {
+  const ctx = useContext(AlertContext);
+
+  return {
+    enqueueAlert: ctx.enqueueAlert,
+    enqueueInfoAlert: ctx.enqueueInfoAlert,
+    enqueueSuccessAlert: ctx.enqueueSuccessAlert,
+    enqueueWarningAlert: ctx.enqueueWarningAlert,
+    enqueueErrorAlert: ctx.enqueueErrorAlert
+  };
+};

package/src/components/Notifications/Snackbar/SnackbarContainer/SnackbarContainer.tsx

@@ -18,11 +18,17 @@ import React, { useContext, useEffect, useState } from "react";
 import classes from "./SnackbarContainer.module.scss";
 import { SnackbarContext } from "../SnackbarProvider/SnackbarStateProvider";
 
+/**
+ * @deprecated
+ */
 export interface Placement {
   vertical: "top" | "bottom";
   horizontal: "start" | "center" | "end";
 }
 
+/**
+ * @deprecated
+ */
 export interface Props {
   placement: Placement;
   children?: React.ReactNode;
@@ -66,6 +72,9 @@ const useSnackbarContainerHeightAnimation = () => {
   return { height, justifyContent };
 };
 
+/**
+ * @deprecated
+ */
 export const SnackbarContainer = ({ placement, children, zIndex, className, ...rest }: Props) => {
   const { height, justifyContent } = useSnackbarContainerHeightAnimation();
 

package/src/components/Notifications/Snackbar/SnackbarItem/SnackbarItem.tsx

@@ -26,6 +26,9 @@ import { SnackbarContext } from "../SnackbarProvider/SnackbarStateProvider";
 
 const textColor = "var(--snackbar-text-color)";
 
+/**
+ * @deprecated
+ */
 export interface Props {
   id: string;
   title?: string;
@@ -51,6 +54,9 @@ const useRegisterSnackbarHeight = (
   }, [singleSnackbarRef.current]);
 };
 
+/**
+ * @deprecated
+ */
 export const SnackbarItem = ({
   id,
   title,

package/src/components/Notifications/Snackbar/SnackbarProvider/SnackbarProvider.tsx

@@ -35,6 +35,9 @@ interface Duration {
   short: number;
 }
 
+/**
+ * @deprecated
+ */
 export interface Props {
   closeButtonTitle: string;
   children?: ReactNode;
@@ -45,6 +48,9 @@ export interface Props {
   className?: string;
 }
 
+/**
+ * @deprecated
+ */
 export interface Item {
   id: string;
   title?: string;
@@ -57,6 +63,9 @@ export interface Item {
   onClose?: () => void;
 }
 
+/**
+ * @deprecated
+ */
 export const SnackbarProvider = (
   {
     closeButtonTitle,

package/src/components/Notifications/Snackbar/SnackbarProvider/SnackbarStateProvider.tsx

@@ -18,6 +18,9 @@ import React, { createContext } from "react";
 import { DeprecatedEnqueueSnackbarType } from "../interfaces";
 import { Item } from "./SnackbarProvider";
 
+/**
+ * @deprecated
+ */
 interface SnackbarContextProps {
   enqueueSnackbar: DeprecatedEnqueueSnackbarType;
   enqueueSuccessSnackbar: DeprecatedEnqueueSnackbarType;
@@ -27,6 +30,9 @@ interface SnackbarContextProps {
   snackbars: Item[];
 }
 
+/**
+ * @deprecated
+ */
 const SnackbarContext = createContext<SnackbarContextProps>({
   enqueueSnackbar: () => null,
   enqueueSuccessSnackbar: () => null,
@@ -41,6 +47,9 @@ interface Props {
   children?: React.ReactNode;
 }
 
+/**
+ * @deprecated
+ */
 const SnackbarContextProvider = ({ children, initialState }: Props) => {
   return <SnackbarContext.Provider value={initialState}>{children}</SnackbarContext.Provider>;
 };

package/src/components/Notifications/Snackbar/interfaces.ts

@@ -16,10 +16,19 @@
 
 import { ButtonHTMLAttributes } from "react";
 
+/**
+ * @deprecated
+ */
 export type Variant = "info" | "success" | "error" | "warning";
 
+/**
+ * @deprecated
+ */
 export type Actions = (ButtonHTMLAttributes<HTMLButtonElement> & { label: string })[];
 
+/**
+ * @deprecated
+ */
 export interface SnackbarOptionsProps {
   actions?: Actions;
   className?: string;
@@ -28,17 +37,26 @@ export interface SnackbarOptionsProps {
   onClose?: () => void;
 }
 
+/**
+ * @deprecated
+ */
 export interface EnqueueSnackbarProps extends SnackbarOptionsProps {
   title?: string;
   content?: string;
 }
 
+/**
+ * @deprecated
+ */
 export type DeprecatedEnqueueSnackbarType = (
   propsOrTitle: EnqueueSnackbarProps | string | undefined,
   content?: string,
   options?: SnackbarOptionsProps
 ) => void;
 
+/**
+ * @deprecated
+ */
 export function isNewEnqueueSnackbarInterface(args: unknown): args is EnqueueSnackbarProps {
   return args !== null && typeof args === "object" && ("title" in args || "content" in args);
 }

package/src/components/Notifications/Snackbar/useSnackbar.ts

@@ -17,6 +17,9 @@
 import { useContext } from "react";
 import { SnackbarContext } from "./SnackbarProvider/SnackbarStateProvider";
 
+/**
+ * @deprecated
+ */
 export const useSnackbar = () => {
   const ctx = useContext(SnackbarContext);
 

package/src/components/Pagination/Pagination.module.scss

@@ -16,8 +16,8 @@
 
 .pagination-wrapper {
   font-family: var(--font-family);
-  font-size: var(--font-size);
-  line-height: var(--default-line-height);
+  font-size: var(--font-size-data-grid);
+  line-height: var(--data-grid-line-height);
   color: var(--greyed-out);
   display: flex;
   flex-direction: column;
@@ -27,10 +27,6 @@
     display: flex;
   }
 
-  label {
-    margin-bottom: 0;
-  }
-
   .form-element {
     height: 2.5rem;
 
@@ -77,6 +73,8 @@
     align-items: center;
 
     label {
+      font-size: var(--font-size-data-grid);
+      line-height: var(--data-grid-line-height);
       font-weight: 500;
       color: var(--color-blue-grey900);
     }

package/src/components/Pagination/Pagination.tsx

@@ -102,7 +102,9 @@ const PaginationComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
       <div className={classes["left"]}>
         {pageSize && (
           <div className={classes["per-page"]}>
-            <Label id="page-size-select-label">{translate.itemsPerPage}</Label>
+            <Label id="page-size-select-label" className={classes["label"]}>
+              {translate.itemsPerPage}
+            </Label>
             <Select
               labeledBy="page-size-select-label"
               className={`${classes["form-element"]} ${classes["page-size-select"]}`}

package/src/components/_BaseStyling_/BaseStyling.tsx

@@ -33,6 +33,7 @@ interface CSSProperties {
   colorPrimary600?: string;
   colorPrimary700?: string;
   colorPrimary900?: string;
+  colorPrimaryLight?: string;
   colorBlueGrey100?: string;
   colorBlueGrey200?: string;
   colorBlueGrey300?: string;
@@ -52,9 +53,11 @@ interface CSSProperties {
   colorLightBlue500?: string;
   colorLightBlue600?: string;
   colorShadowBlue?: string;
+  colorOrange100?: string;
   colorOrange500?: string;
   colorOrange600?: string;
   colorOrange700?: string;
+  colorRed100?: string;
   colorRed200?: string;
   colorRed500?: string;
   colorRed600?: string;
@@ -66,6 +69,7 @@ interface CSSProperties {
   defaultPressedColor?: string;
   defaultHoverColor?: string;
   defaultLineHeight?: string;
+  dataGridLineHeight?: string;
   focusBorderRadius?: string;
   buttonBorderRadius?: string;
   buttonBorderWidth?: string;
@@ -119,12 +123,50 @@ interface CSSProperties {
   modalBackdropColor?: string;
   skeletonBackgroundColor?: string;
   skeletonAnimationColorRgb?: string;
+
+  /**
+   * @deprecated
+   */
   snackbarTextColor?: string;
+  /**
+   * @deprecated
+   */
   snackbarInfoBackgroundColor?: string;
+  /**
+   * @deprecated
+   */
   snackbarSuccessBackgroundColor?: string;
+  /**
+   * @deprecated
+   */
   snackbarErrorBackgroundColor?: string;
+  /**
+   * @deprecated
+   */
   snackbarWarningBackgroundColor?: string;
+  /**
+   * @deprecated
+   */
   snackbarBorderRadius?: string;
+
+  alertTextColor?: string;
+  alertTextInvertedColor?: string;
+
+  alertNeutralBackgroundColor?: string;
+  alertInfoBackgroundColor?: string;
+  alertSuccessBackgroundColor?: string;
+  alertErrorBackgroundColor?: string;
+  alertWarningBackgroundColor?: string;
+
+  alertNeutralInvertedColor?: string;
+  alertInfoInvertedColor?: string;
+  alertSuccessInvertedColor?: string;
+  alertErrorInvertedColor?: string;
+  alertWarningInvertedColor?: string;
+
+  alertBorderWidth?: string;
+  alertBorderRadius?: string;
+
   stepperWaitingColor?: string;
   stepperWaitingHoverColor?: string;
   stepperWaitingActiveColor?: string;
@@ -192,6 +234,10 @@ interface CSSProperties {
   fontSizeSub?: string;
   fontSizeCode?: string;
   formControlFontSize?: string;
+  fileUploadBorderWidth?: string;
+  dragDropBorderStyle?: string;
+  defaultZIndex1?: string;
+  fontSizeDataGrid?: string;
 }
 
 export interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -207,6 +253,7 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     colorPrimary600: "#030F77",
     colorPrimary700: "#020B59",
     colorPrimary900: "#01041E",
+    colorPrimaryLight: "#E6E7F4",
     colorBlueGrey25: "#F7F7F9",
     colorBlueGrey25Transparent: "rgba(247, 247, 249, .8)",
     colorBlueGrey50: "#EEEFF3",
@@ -225,9 +272,11 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     colorGreen700: "#0E4E29",
     colorLightBlue500: "#00BCDD",
     colorLightBlue600: "#0096B1",
+    colorOrange100: "#FFE0B2",
     colorOrange500: "#E07900",
     colorOrange600: "#B36100",
     colorOrange700: "#864900",
+    colorRed100: "#FFCDD2",
     colorRed200: "#F3A599",
     colorRed500: "#E01E00",
     colorRed600: "#B31800",
@@ -245,6 +294,7 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     defaultPressedColor: "var(--color-blue-grey100)",
     defaultHoverColor: "var(--color-blue-grey25)",
     defaultLineHeight: "1.5", //FIXME: UCL-395
+    dataGridLineHeight: "1.25",
     defaultBorderRadius: "0.25rem",
     focusBorderRadius: "0.125rem",
     buttonBorderRadius: "0.125rem",
@@ -285,6 +335,8 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     inputBorderWidth: "1px",
     inputBorderWidthFocus: "1px",
     inputBorderStyle: "solid",
+    fileUploadBorderWidth: "1px",
+    dragDropBorderStyle: "dashed",
     inputBorderColor: "var(--color-blue-grey500)",
     inputBackgroundColor: "var(--light)",
     inputHelperTextColor: "var(--color-blue-grey500)",
@@ -297,12 +349,35 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     modalBackdropColor: "var(--default)",
     skeletonBackgroundColor: "var(--disabled)",
     skeletonAnimationColorRgb: "255, 255, 255",
+
     snackbarTextColor: "var(--light)",
     snackbarInfoBackgroundColor: "var(--color-primary500)",
     snackbarSuccessBackgroundColor: "var(--color-green500)",
     snackbarErrorBackgroundColor: "var(--color-red500)",
     snackbarWarningBackgroundColor: "var(--color-orange500)",
     snackbarBorderRadius: "2px",
+
+    alertTextColor: "var(--default)",
+    alertTextInvertedColor: "var(--light)",
+
+    alertNeutralBackgroundColor: "var(--color-blue-grey50)",
+    alertNeutralInvertedColor: "var(--color-blue-grey500)",
+
+    alertInfoBackgroundColor: "var(--color-primary100)",
+    alertInfoInvertedColor: "var(--color-primary500)",
+
+    alertSuccessBackgroundColor: "var(--color-green100)",
+    alertSuccessInvertedColor: "var(--color-green500)",
+
+    alertErrorBackgroundColor: "var(--color-red100)",
+    alertErrorInvertedColor: "var(--color-red500)",
+
+    alertWarningBackgroundColor: "var(--color-orange100)",
+    alertWarningInvertedColor: "var(--color-orange500)",
+
+    alertBorderWidth: "4px",
+    alertBorderRadius: "2px",
+
     stepperWaitingColor: "var(--color-blue-grey200)",
     stepperWaitingHoverColor: "var(--color-blue-grey300)",
     stepperWaitingActiveColor: "var(--color-blue-grey400)",
@@ -369,7 +444,9 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     fontSizeH4: "1.25rem",
     fontSizeSub: ".75rem",
     fontSizeCode: "1rem",
-    formControlFontSize: "0.875rem" //FIXME: UCL-395
+    defaultZIndex1: "1",
+    formControlFontSize: "0.875rem", //FIXME: UCL-395
+    fontSizeDataGrid: "0.875rem" //FIXME: UCL-395
   };
 
   /** We need a loading state, because otherwise you see the colors flash from the default to the possible overridden ones. */

package/src/components/admin/layout/MicrofrontendContainer/MicrofrontendContainer.module.scss

@@ -0,0 +1,25 @@
+/*!
+ * 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.
+ */
+
+.microfrontend-container {
+  &-margin {
+    padding: 2rem;
+  }
+
+  &-max-width {
+    max-width: 105rem;
+  }
+}

package/src/components/admin/layout/MicrofrontendContainer/MicrofrontendContainer.tsx

@@ -0,0 +1,47 @@
+/*
+ * 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, { ReactElement } from "react";
+import classes from "./MicrofrontendContainer.module.scss";
+
+export interface Props {
+  header?: ReactElement | ReactElement[];
+  children: ReactElement | ReactElement[];
+  contentMargins?: boolean;
+  contentMaxWidth?: boolean;
+}
+
+export const MicrofrontendContainer = ({
+  header,
+  children,
+  contentMargins = true,
+  contentMaxWidth = true,
+  ...rest
+}: Props) => {
+  const appliedClasses = [];
+
+  contentMargins && appliedClasses.push(classes["microfrontend-container-margin"]);
+  contentMaxWidth && appliedClasses.push(classes["microfrontend-container-max-width"]);
+
+  return (
+    <>
+      <div>{header}</div>
+      <div className={appliedClasses.join(" ")} {...rest}>
+        {children}
+      </div>
+    </>
+  );
+};

package/src/font/icomoon.svg

@@ -80,5 +80,8 @@
 <glyph unicode="&#xe946;" glyph-name="reply" d="M98.011 739.109l366.202-157.014-366.689 48.762 0.488 108.251zM463.726 313.905l-366.202-157.014v108.251l366.202 48.762zM0.488 886.857l-0.488-341.334 731.429-97.523-731.429-97.523 0.488-341.334 1023.512 438.857-1023.512 438.857z" />
 <glyph unicode="&#xe947;" glyph-name="save" d="M796.445 959.998h-682.667c-63.147 0-113.777-51.2-113.777-113.777v-796.444c0-62.577 50.631-113.777 113.777-113.777h796.444c62.577 0 113.777 51.2 113.777 113.777v682.667l-227.556 227.556zM910.224 49.775h-796.444v796.444h635.449l160.996-160.996v-635.449zM512.001 447.998c-94.436 0-170.667-76.231-170.667-170.667s76.231-170.667 170.667-170.667c94.436 0 170.667 76.231 170.667 170.667s-76.231 170.667-170.667 170.667zM170.668 789.331h512v-227.556h-512v227.556z" />
 <glyph unicode="&#xe948;" glyph-name="warning-filled" d="M0 5.818h1024l-511.999 884.364-511.999-884.364zM558.545 145.454h-93.091v93.091h93.091v-93.091zM558.545 331.636h-93.091v186.182h93.091v-186.182z" />
+<glyph unicode="&#xe949;" glyph-name="retry" d="M856.071 792.378c-88.386 88.381-209.679 143.238-344.383 143.238-269.41 0-487.010-218.21-487.010-487.619 0-269.411 217.6-487.619 487.010-487.619 227.354 0 416.911 155.429 471.161 365.714h-126.779c-49.986-142.021-185.297-243.806-344.383-243.806-201.753 0-365.714 163.959-365.714 365.711s163.961 365.714 365.714 365.714c101.181 0 191.39-42.057 257.219-108.495l-196.266-196.267h426.666v426.667l-143.236-143.238z" />
+<glyph unicode="&#xe94a;" glyph-name="cancel" d="M512 960c-283.136 0-512-228.864-512-512s228.864-512 512-512c283.136 0 512 228.864 512 512s-228.864 512-512 512zM512 38.4c-225.792 0-409.6 183.808-409.6 409.6s183.808 409.6 409.6 409.6c225.792 0 409.6-183.808 409.6-409.6s-183.808-409.6-409.6-409.6zM695.808 704l-183.808-183.808-183.808 183.808-72.192-72.192 183.808-183.808-183.808-183.808 72.192-72.192 183.808 183.808 183.808-183.808 72.192 72.192-183.808 183.808 183.808 183.808-72.192 72.192z" />
+<glyph unicode="&#xe94b;" glyph-name="file-alt" d="M635.447 846.222l274.773-274.773v-521.67h-796.443v796.443h521.67zM635.447 960h-521.67c-62.578 0-113.778-51.2-113.778-113.778v-796.443c0-62.579 51.2-113.779 113.778-113.779h796.443c62.579 0 113.779 51.2 113.779 113.779v521.67c0 30.151-11.947 59.165-33.566 80.213l-274.773 274.773c-21.047 21.618-50.061 33.564-80.213 33.564zM227.555 277.333h568.89v-113.779h-568.89v113.779zM227.555 504.887h568.89v-113.775h-568.89v113.775zM227.555 732.445h398.224v-113.778h-398.224v113.778z" />
 <glyph unicode="&#xe9d1;" glyph-name="eye-blocked" d="M945.942 945.942c-18.746 18.744-49.136 18.744-67.882 0l-202.164-202.164c-51.938 15.754-106.948 24.222-163.896 24.222-223.318 0-416.882-130.042-512-320 41.122-82.124 100.648-153.040 173.022-207.096l-158.962-158.962c-18.746-18.746-18.746-49.136 0-67.882 9.372-9.374 21.656-14.060 33.94-14.060s24.568 4.686 33.942 14.058l864 864c18.744 18.746 18.744 49.138 0 67.884zM416 640c42.24 0 78.082-27.294 90.92-65.196l-121.724-121.724c-37.902 12.838-65.196 48.68-65.196 90.92 0 53.020 42.98 96 96 96zM110.116 448c38.292 60.524 89.274 111.924 149.434 150.296 3.918 2.5 7.876 4.922 11.862 7.3-9.962-27.328-15.412-56.822-15.412-87.596 0-54.89 17.286-105.738 46.7-147.418l-60.924-60.924c-52.446 36.842-97.202 83.882-131.66 138.342zM768 518c0 27.166-4.256 53.334-12.102 77.898l-321.808-321.808c24.568-7.842 50.742-12.090 77.91-12.090 141.382 0 256 114.618 256 256zM830.026 670.026l-69.362-69.362c1.264-0.786 2.53-1.568 3.786-2.368 60.162-38.374 111.142-89.774 149.434-150.296-38.292-60.522-89.274-111.922-149.436-150.296-75.594-48.218-162.89-73.704-252.448-73.704-38.664 0-76.902 4.76-113.962 14.040l-76.894-76.894c59.718-21.462 123.95-33.146 190.856-33.146 223.31 0 416.876 130.042 512 320-45.022 89.916-112.118 166.396-193.974 222.026z" />
 </font></defs></svg>