@onewelcome/react-lib-components 2.3.0 → 3.0.1

package/src/components/Notifications/NotificationProvider/notification.interfaces.ts

@@ -0,0 +1,68 @@
+/*
+ * 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 interface ErrorNotification extends NotificationType {
+  response?: string;
+  type: "error";
+}
+
+export interface SuccessNotification extends NotificationType {
+  response?: string;
+  type: "success";
+}
+
+interface NotificationType {
+  type: "error" | "success";
+  status: HttpStatuses;
+}
+
+export type HttpStatuses = 200 | 500 | 400 | 401 | 403 | 404 | 501 | 502 | 503 | 504;
+
+export interface AddNotification {
+  type: "error" | "success";
+  status: HttpStatuses;
+  title?: string;
+  message?: string;
+}
+
+export interface RemoveNotification {
+  id: string;
+}
+
+export interface Notification<T extends NotificationType> {
+  id?: string;
+  type?: T["type"];
+  status?: HttpStatuses;
+  title?: string;
+  message?: string;
+  handled?: boolean;
+}
+
+export interface Translations {
+  general: {
+    error: string;
+    success: string;
+  };
+  messages: {
+    general: string;
+    badRequest: string;
+    unauthorized: string;
+    forbidden: string;
+    notFound: string;
+    timeout: string;
+    unavailable: string;
+  };
+}

package/src/components/Notifications/Snackbar/SnackbarItem/SnackbarItem.module.scss

@@ -18,14 +18,21 @@
 @use "../../../../mixins.module.scss";
 
 .snackbar {
-  padding: 1rem 1.25rem;
+  padding: 0.5rem 1rem;
   border-radius: var(--snackbar-border-radius);
   display: flex;
+  gap: 0.5rem;
+  align-items: center;
   width: 100%;
   box-sizing: border-box;
   @include mixins.transition(height, 0.2s, ease-in-out);
   flex-grow: 0;
 
+  &.has-title {
+    align-items: flex-start;
+    padding: 1rem;
+  }
+
   &.info {
     background-color: var(--snackbar-info-background-color);
   }
@@ -38,72 +45,94 @@
     background-color: var(--snackbar-error-background-color);
   }
 
-  & + & {
-    margin-top: 0.5rem;
-  }
-
-  .container {
-    flex: 1;
+  &.warning {
+    background-color: var(--snackbar-warning-background-color);
   }
 
-  .headline {
-    display: flex;
-    color: var(--snackbar-text-color);
+  & + & {
+    margin-top: 0.5rem;
   }
 
   #close-btn {
     color: var(--snackbar-text-color);
-
-    &:hover,
-    &:focus {
-      border-color: var(--snackbar-text-color);
+    align-self: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    flex-shrink: 0;
+    border: 0;
+
+    span {
+      font-size: 0.875rem;
     }
 
-    &:active {
-      border-color: transparent;
+    &:not(:disabled):hover,
+    &:not(:disabled):focus {
+      background-color: var(--color-black10);
+    }
 
-      &:after {
-        top: 0;
-        height: 100%;
-        background-color: var(--snackbar-text-color);
-      }
+    &:not(:disabled):active {
+      background-color: var(--color-black20);
     }
   }
 
   .icon {
     color: var(--snackbar-text-color);
-    margin-top: 0.5rem;
-    font-size: 1.25rem;
+    font-size: 1rem;
     line-height: var(--default-line-height);
+    display: flex;
   }
 
   .title {
     color: var(--snackbar-text-color);
     flex: 1;
-    margin: calc(0.5rem - 0.125rem) 1.25rem 0 0.75rem;
+    font-size: 0.875rem;
+    line-height: var(--default-line-height);
+    margin-bottom: 0.25rem;
+    margin-top: -2.5px;
+    display: block;
+  }
+
+  .content-wrapper {
+    flex-grow: 1;
+  }
+
+  &.has-title .content-wrapper {
+    width: 12.5rem;
+  }
+
+  @media screen and (min-width: 37.5em) {
+    &:not(.has-title) .content {
+      white-space: nowrap;
+    }
   }
 
   .content {
-    margin: 0.25rem 0.75rem 0 0.75rem;
     color: var(--snackbar-text-color);
+    font-size: 0.875rem;
+    margin-bottom: 0;
+    line-height: var(--default-line-height);
   }
 
   .actions {
-    margin: 0.5rem 0.75rem 0 0.75rem;
     text-align: right;
+    align-self: center;
   }
 
   .action-button {
     border-width: var(--button-border-width);
     border-style: var(--button-border-style);
     border-radius: var(--button-border-radius);
-    font-size: var(--button-font-size);
+    white-space: nowrap;
+    font-size: 0.875rem;
     line-height: var(--button-font-size);
-    font-weight: 700;
+    font-weight: 400;
     margin: 0;
     padding: 0.625rem 1.25rem;
     cursor: pointer;
-    transition: color, background-color, border-color 0.2s ease-in-out;
+    transition:
+      color,
+      background-color,
+      border-color 0.2s ease-in-out;
     font-family: var(--font-family);
     color: var(--snackbar-text-color);
     background-color: transparent;
@@ -118,36 +147,18 @@
 
     &:not(:disabled):hover,
     &:not(:disabled):focus {
-      border-color: var(--snackbar-text-color);
-    }
-
-    &:active {
-      position: relative;
-      border: 0 transparent;
-      padding: calc(0.625rem + var(--button-border-width))
-        calc(1.25rem + var(--button-border-width));
-
-      &:after {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-color: var(--snackbar-text-color);
-        border-radius: var(--button-border-radius);
-        filter: opacity(0.1);
-      }
+      background-color: var(--color-black10);
     }
 
-    & + .action-button {
-      margin-left: 1rem;
+    &:not(:disabled):active {
+      background-color: var(--color-black20);
     }
   }
 }
 
 @media only screen and (min-width: 37.5em) {
   .snackbar {
-    width: 37.5rem;
+    width: min-content;
+    min-width: 25rem;
   }
 }

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

@@ -32,7 +32,7 @@ describe("SnackbarItem", () => {
   it("renders without crashing", () => {
     const { container } = render(<SnackbarItem {...initParams} />);
 
-    expect(container).toHaveTextContent(initParams.title);
+    expect(container).toHaveTextContent(initParams.title!);
     const contentDiv = container.querySelector(".content");
     expect(contentDiv).toBeNull();
     const actionsDiv = container.querySelector(".actions");

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

@@ -28,9 +28,10 @@ const textColor = "var(--snackbar-text-color)";
 
 export interface Props {
   id: string;
-  title: string;
+  title?: string;
   duration: number;
   variant: Variant;
+  className?: string;
   onClose: (key: string) => void;
   closeButtonTitle: string;
   content?: string;
@@ -56,6 +57,7 @@ export const SnackbarItem = ({
   duration,
   variant,
   content,
+  className,
   actions = [],
   onClose,
   closeButtonTitle
@@ -85,7 +87,12 @@ export const SnackbarItem = ({
     if (variant === "error") {
       return Icons.Error;
     }
-    return variant === "success" ? Icons.CheckmarkCircleBreakout : Icons.InfoCircle;
+
+    if (variant === "warning") {
+      return Icons.Warning;
+    }
+
+    return variant === "success" ? Icons.CheckmarkCircleAlt : Icons.InfoCircle;
   };
 
   const actionButtons = actions.map((actionProp, index) => (
@@ -102,37 +109,43 @@ export const SnackbarItem = ({
     </button>
   ));
 
+  const snackbarClasses = [
+    classes["snackbar"],
+    classes[variant],
+    animationStarted ? readyclasses["slide-out"] : readyclasses["slide-in"],
+    title ? classes["has-title"] : "",
+    className ?? ""
+  ].join(" ");
+
   return (
     <div
       ref={ref}
       aria-live="polite"
-      className={`${classes["snackbar"]} ${classes[variant]} ${
-        animationStarted ? readyclasses["slide-out"] : readyclasses["slide-in"]
-      }`}
+      className={snackbarClasses}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
     >
       <Icon icon={getVariantIcon()} className={classes["icon"]} />
-      <div className={classes["container"]}>
-        <div className={classes["headline"]}>
-          <Typography className={classes["title"]} variant="h4" tag="span">
+      <div className={classes["content-wrapper"]}>
+        {title && (
+          <Typography className={classes["title"]} variant="body-bold" tag="span">
             {title}
           </Typography>
-          <IconButton
-            id={classes["close-btn"]}
-            onClick={() => startAnimation()}
-            title={closeButtonTitle}
-          >
-            <Icon icon={Icons.Times} color={textColor} />
-          </IconButton>
-        </div>
-        {!!content && (
+        )}
+        {content && (
           <Typography className={classes["content"]} variant="body">
             {content}
           </Typography>
         )}
-        {actionButtons.length > 0 && <div className={classes["actions"]}>{actionButtons}</div>}
       </div>
+      {actionButtons.length > 0 && <div className={classes["actions"]}>{actionButtons}</div>}
+      <IconButton
+        id={classes["close-btn"]}
+        onClick={() => startAnimation()}
+        title={closeButtonTitle}
+      >
+        <Icon icon={Icons.Times} color={textColor} />
+      </IconButton>
     </div>
   );
 };

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

@@ -55,9 +55,22 @@ const infoProps = {
   }
 };
 
+const warningProps = {
+  title: "warning title",
+  options: {
+    duration: 10,
+    onClose: jest.fn()
+  }
+};
+
 const renderSnackbarProvider = (props?: Partial<Props>) => {
   const AppComponent = () => {
-    const { enqueueSuccessSnackbar, enqueueErrorSnackbar, enqueueSnackbar } = useSnackbar();
+    const {
+      enqueueSuccessSnackbar,
+      enqueueErrorSnackbar,
+      enqueueSnackbar,
+      enqueueWarningSnackbar
+    } = useSnackbar();
     const [index, setIndex] = useState(0);
     return (
       <div>
@@ -89,6 +102,15 @@ const renderSnackbarProvider = (props?: Partial<Props>) => {
         >
           Info
         </button>
+        <button
+          data-testid="show-warning"
+          onClick={() => {
+            enqueueWarningSnackbar(warningProps.title + index, undefined, warningProps.options);
+            setIndex(index + 1);
+          }}
+        >
+          Warning
+        </button>
       </div>
     );
   };
@@ -102,12 +124,14 @@ const renderSnackbarProvider = (props?: Partial<Props>) => {
   const showSuccessSnackbarBtn = getByTestId(queries.container, "show-success");
   const showErrorSnackbarBtn = getByTestId(queries.container, "show-error");
   const showInfoSnackbarBtn = getByTestId(queries.container, "show-info");
+  const showWarningSnackbarBtn = getByTestId(queries.container, "show-warning");
 
   return {
     ...queries,
     showSuccessSnackbarBtn,
     showErrorSnackbarBtn,
-    showInfoSnackbarBtn
+    showInfoSnackbarBtn,
+    showWarningSnackbarBtn
   };
 };
 
@@ -119,14 +143,17 @@ describe("SnackbarProvider", () => {
   });
 
   it("should stack 3 snackbars at one time", async () => {
-    const { showSuccessSnackbarBtn } = renderSnackbarProvider();
+    const { showSuccessSnackbarBtn, showWarningSnackbarBtn } = renderSnackbarProvider();
 
     await userEvent.click(showSuccessSnackbarBtn);
-    await userEvent.click(showSuccessSnackbarBtn);
+    await userEvent.click(showWarningSnackbarBtn);
     await userEvent.click(showSuccessSnackbarBtn);
     await userEvent.click(showSuccessSnackbarBtn);
 
-    expect(getAllByText(document.body, new RegExp(successProps.title))).toHaveLength(3);
+    await waitFor(() => {
+      expect(getAllByText(document.body, new RegExp(successProps.title))).toHaveLength(2);
+      expect(getAllByText(document.body, new RegExp(warningProps.title))).toHaveLength(1);
+    });
   });
 
   it("should render 3 variants of snackbars", async () => {

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

@@ -41,8 +41,9 @@ export interface Props {
 
 export interface Item {
   id: string;
-  title: string;
+  title?: string;
   duration: number;
+  className?: string;
   height: number;
   variant: Variant;
   content?: string;
@@ -91,7 +92,7 @@ export const SnackbarProvider = (
   };
 
   const enqueueSnackbar = (
-    title: string,
+    title?: string,
     content?: string,
     options: SnackbarOptionsProps = {}
   ): void => {
@@ -105,6 +106,7 @@ export const SnackbarProvider = (
       title,
       content,
       variant,
+      className: options.className,
       actions,
       duration,
       height: 0,
@@ -115,7 +117,7 @@ export const SnackbarProvider = (
   };
 
   const enqueueSuccessSnackbar = (
-    title: string,
+    title?: string,
     content?: string,
     options?: SnackbarOptionsProps
   ): void => {
@@ -123,13 +125,21 @@ export const SnackbarProvider = (
   };
 
   const enqueueErrorSnackbar = (
-    title: string,
+    title?: string,
     content?: string,
     options?: SnackbarOptionsProps
   ): void => {
     enqueueSnackbar(title, content, { ...options, variant: "error" });
   };
 
+  const enqueueWarningSnackbar = (
+    title?: string,
+    content?: string,
+    options?: SnackbarOptionsProps
+  ): void => {
+    enqueueSnackbar(title, content, { ...options, variant: "warning" });
+  };
+
   const onItemClosed = (id: string) => {
     setSnackbars(items => [...items].filter(item => item.id !== id));
   };
@@ -139,6 +149,7 @@ export const SnackbarProvider = (
       <SnackbarItem
         {...item}
         key={item.id}
+        className={item.className}
         onClose={() => {
           onItemClosed(item.id);
           item.onClose?.();
@@ -161,6 +172,7 @@ export const SnackbarProvider = (
         enqueueSnackbar,
         enqueueSuccessSnackbar,
         enqueueErrorSnackbar,
+        enqueueWarningSnackbar,
         setSnackbarHeight,
         snackbars
       }}

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

@@ -19,9 +19,18 @@ import { SnackbarOptionsProps } from "../interfaces";
 import { Item } from "./SnackbarProvider";
 
 interface SnackbarContextProps {
-  enqueueSnackbar: (title: string, content?: string, options?: SnackbarOptionsProps) => void;
-  enqueueSuccessSnackbar: (title: string, content?: string, options?: SnackbarOptionsProps) => void;
-  enqueueErrorSnackbar: (title: string, content?: string, options?: SnackbarOptionsProps) => void;
+  enqueueSnackbar: (title?: string, content?: string, options?: SnackbarOptionsProps) => void;
+  enqueueSuccessSnackbar: (
+    title?: string,
+    content?: string,
+    options?: SnackbarOptionsProps
+  ) => void;
+  enqueueWarningSnackbar: (
+    title?: string,
+    content?: string,
+    options?: SnackbarOptionsProps
+  ) => void;
+  enqueueErrorSnackbar: (title?: string, content?: string, options?: SnackbarOptionsProps) => void;
   setSnackbarHeight: (id: string, height: number) => void;
   snackbars: Item[];
 }
@@ -30,6 +39,7 @@ const SnackbarContext = createContext<SnackbarContextProps>({
   enqueueSnackbar: () => null,
   enqueueSuccessSnackbar: () => null,
   enqueueErrorSnackbar: () => null,
+  enqueueWarningSnackbar: () => null,
   setSnackbarHeight: () => null,
   snackbars: []
 });

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

@@ -16,12 +16,13 @@
 
 import { ButtonHTMLAttributes } from "react";
 
-export type Variant = "info" | "success" | "error";
+export type Variant = "info" | "success" | "error" | "warning";
 
 export type Actions = (ButtonHTMLAttributes<HTMLButtonElement> & { label: string })[];
 
 export interface SnackbarOptionsProps {
   actions?: Actions;
+  className?: string;
   variant?: Variant;
   duration?: number;
   onClose?: () => void;

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

@@ -21,6 +21,7 @@ export const useSnackbar = () => {
   const ctx = useContext(SnackbarContext);
 
   return {
+    enqueueWarningSnackbar: ctx.enqueueWarningSnackbar,
     enqueueErrorSnackbar: ctx.enqueueErrorSnackbar,
     enqueueSuccessSnackbar: ctx.enqueueSuccessSnackbar,
     enqueueSnackbar: ctx.enqueueSnackbar

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

@@ -21,6 +21,11 @@
   color: var(--greyed-out);
   display: flex;
   flex-direction: column;
+  justify-content: space-between;
+
+  .left {
+    display: flex;
+  }
 
   label {
     margin-bottom: 0;
@@ -40,11 +45,8 @@
     align-items: center;
     justify-content: center;
 
-    span > span {
-      font-weight: 700;
-      font-family: var(--font-family);
-      font-size: var(--font-size);
-      margin-left: 0.25rem;
+    span {
+      color: var(--color-blue-grey500);
     }
   }
 
@@ -60,10 +62,6 @@
       display: flex;
       align-items: center;
 
-      button {
-        margin: 0.25rem;
-      }
-
       button span:before {
         font-size: 0.75rem;
       }
@@ -73,20 +71,43 @@
   .per-page {
     display: none;
     align-items: center;
+
+    label {
+      font-weight: 500;
+      color: var(--color-blue-grey900);
+    }
+
+    + .total {
+      padding-left: 0.9375rem;
+      border-left: 1px solid var(--color-blue-grey100);
+    }
   }
 
   .page {
     display: flex;
     align-items: center;
     flex-basis: min-content;
+    padding-right: 1rem;
+
+    &-total {
+      display: inline-block;
+      margin-left: 0.5rem;
+      white-space: nowrap;
+      font-weight: 500;
+      color: var(--color-blue-grey900);
+    }
+
+    + .previous {
+      padding-left: 0.9375rem;
+      border-left: 1px solid var(--color-blue-grey100);
+    }
   }
 
   .page-size-select {
-    border-color: var(--light);
     margin: 0 0.25rem;
 
     button {
-      min-width: 3.4375rem;
+      min-width: 3.75rem;
       padding: 0;
 
       div[data-display] {
@@ -98,17 +119,19 @@
       }
     }
   }
+}
 
-  .current-value-input {
-    margin: 0 0.25rem 0 0;
+.current-page-select {
+  button {
+    min-width: 3.75rem;
     padding: 0;
-    height: auto;
 
-    input {
-      border-radius: var(--input-border-radius);
-      padding: 0 1rem;
-      width: auto;
-      text-align: center;
+    div[data-display] {
+      left: 0.5rem;
+    }
+
+    div:not([data-display]) {
+      right: 0.5rem;
     }
   }
 }
@@ -124,13 +147,6 @@
     .pagination {
       margin-top: 0;
       justify-content: flex-end;
-
-      .previous,
-      .next {
-        button {
-          margin: 0 0.5rem;
-        }
-      }
     }
   }
 }
@@ -138,6 +154,6 @@
 @media screen and (min-width: 48em) {
   .pagination-wrapper .per-page {
     display: flex;
-    margin-right: 0.5rem;
+    margin-right: 1rem;
   }
 }