@onewelcome/react-lib-components 6.6.0 → 6.7.0

package/src/components/Notifications/Alert/AlertItem/AlertItem.module.scss

@@ -0,0 +1,277 @@
+/*!
+ * 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";
+
+.alert {
+  padding: 1rem 0.875rem;
+  border-radius: var(--alert-border-radius);
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  flex-grow: 0;
+
+  &.neutral {
+    background-color: var(--alert-neutral-background-color);
+    border-radius: var(--alert-border-radius);
+
+    &.emph-low {
+      color: unset;
+    }
+
+    &.emph-medium {
+      @include mixins.alertBorder(var(--alert-neutral-inverted-color));
+    }
+
+    &.emph-high {
+      background-color: var(--alert-neutral-inverted-color);
+
+      .content,
+      .title,
+      .close-btn,
+      .icon,
+      .action-button {
+        color: var(--alert-text-inverted-color);
+      }
+    }
+  }
+
+  &.informative {
+    background-color: var(--alert-info-background-color);
+    border-radius: var(--alert-border-radius);
+
+    &.emph-low {
+      color: unset;
+    }
+
+    &.emph-medium {
+      @include mixins.alertBorder(var(--alert-info-inverted-color));
+    }
+
+    &.emph-high {
+      background-color: var(--alert-info-inverted-color);
+
+      .content,
+      .title,
+      .close-btn,
+      .icon,
+      .action-button {
+        color: var(--alert-text-inverted-color);
+      }
+    }
+  }
+
+  &.success {
+    background-color: var(--alert-success-background-color);
+    border-radius: var(--alert-border-radius);
+
+    &.emph-low .icon {
+      color: var(--alert-success-inverted-color);
+    }
+
+    &.emph-medium {
+      @include mixins.alertBorder(var(--alert-success-inverted-color));
+
+      .icon {
+        color: var(--alert-success-inverted-color);
+      }
+    }
+
+    &.emph-high {
+      background-color: var(--alert-success-inverted-color);
+
+      .content,
+      .title,
+      .close-btn,
+      .icon,
+      .action-button {
+        color: var(--alert-text-inverted-color);
+      }
+    }
+  }
+
+  &.warning {
+    background-color: var(--alert-warning-background-color);
+    border-radius: var(--alert-border-radius);
+
+    &.emph-low .icon {
+      color: var(--alert-warning-inverted-color);
+    }
+
+    &.emph-medium {
+      @include mixins.alertBorder(var(--alert-warning-inverted-color));
+
+      .icon {
+        color: var(--alert-warning-inverted-color);
+      }
+    }
+
+    &.emph-high {
+      background-color: var(--alert-warning-inverted-color);
+
+      .content,
+      .title,
+      .close-btn,
+      .icon,
+      .action-button {
+        color: var(--alert-text-inverted-color);
+      }
+    }
+  }
+
+  &.error {
+    background-color: var(--alert-error-background-color);
+    border-radius: var(--alert-border-radius);
+
+    &.emph-low .icon {
+      color: var(--alert-error-inverted-color);
+    }
+
+    &.emph-medium {
+      @include mixins.alertBorder(var(--alert-error-inverted-color));
+
+      .icon {
+        color: var(--alert-error-inverted-color);
+      }
+    }
+
+    &.emph-high {
+      background-color: var(--alert-error-inverted-color);
+
+      .content,
+      .title,
+      .close-btn,
+      .icon,
+      .action-button {
+        color: var(--alert-text-inverted-color);
+      }
+    }
+  }
+
+  & + & {
+    margin-top: 0.5rem;
+  }
+
+  .close-btn {
+    color: var(--alert-text-color);
+    align-self: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    margin: -0.5rem 0;
+    flex-shrink: 0;
+    border: 0;
+
+    span {
+      font-size: 0.875rem;
+    }
+
+    &:not(:disabled):hover,
+    &:not(:disabled):focus {
+      background-color: var(--color-black10);
+    }
+
+    &:not(:disabled):active {
+      background-color: var(--color-black20);
+    }
+  }
+
+  .icon {
+    color: var(--alert-text-color);
+    font-size: 1rem;
+    height: 1.25rem;
+    display: inline-flex;
+    align-items: center;
+    align-self: flex-start;
+  }
+
+  .title {
+    color: var(--alert-text-color);
+    flex: 1;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    margin-bottom: 0.25rem;
+    display: block;
+  }
+
+  .outer-content-wrapper {
+    display: flex;
+    gap: 0.5rem;
+    flex-grow: 1;
+  }
+
+  .content-wrapper {
+    flex-grow: 1;
+    padding-left: 0.125rem;
+  }
+
+  .content {
+    color: var(--alert-text-color);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    margin-bottom: 0;
+  }
+
+  .actions {
+    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);
+    white-space: nowrap;
+    font-size: 0.875rem;
+    line-height: var(--button-font-size);
+    font-weight: 400;
+    margin: -0.5rem 0;
+    padding: 0.625rem 1.25rem;
+    cursor: pointer;
+    transition:
+      color,
+      background-color,
+      border-color 0.2s ease-in-out;
+    font-family: var(--font-family);
+    color: var(--alert-text-color);
+    background-color: transparent;
+    border-color: transparent;
+
+    &:disabled {
+      color: var(--greyed-out);
+      cursor: not-allowed;
+    }
+
+    @include mixins.focusVisibleOutline();
+
+    &:not(:disabled):hover,
+    &:not(:disabled):focus {
+      background-color: var(--color-black10);
+    }
+
+    &:not(:disabled):active {
+      background-color: var(--color-black20);
+    }
+  }
+}
+
+@media only screen and (min-width: 37.5em) {
+  .alert {
+    width: min-content;
+    min-width: 25rem;
+  }
+}

package/src/components/Notifications/Alert/AlertItem/AlertItem.tsx

@@ -0,0 +1,214 @@
+/*
+ * 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, { ButtonHTMLAttributes, useContext, useEffect, useRef } from "react";
+import { IconButton } from "../../../Button/IconButton";
+import { Icon, Icons } from "../../../Icon/Icon";
+import classes from "./AlertItem.module.scss";
+import readyclasses from "../../../../readyclasses.module.scss";
+import { useAnimation } from "../../../../hooks/useAnimation";
+import { Typography } from "../../../Typography/Typography";
+import AlertContext from "../AlertProvider/AlertContext";
+
+export const EMPHASES = ["low", "medium", "high"] as const;
+export type Emphasis = (typeof EMPHASES)[keyof typeof EMPHASES];
+
+export const VARIANTS = ["neutral", "informative", "success", "warning", "error"] as const;
+export type Variant = (typeof VARIANTS)[keyof typeof VARIANTS];
+
+export type Actions = (ButtonHTMLAttributes<HTMLButtonElement> & { label: string })[];
+
+export interface Props {
+  id: string;
+  title?: string;
+  content?: string;
+  duration?: number;
+  emphasis?: Emphasis;
+  variant?: Variant;
+  className?: string;
+  onClose?: () => void;
+  closeButtonTitle?: string;
+  actions?: Actions;
+  wasShown?: boolean;
+}
+
+const useRegisterAlertHeight = (
+  singleAlertRef: React.RefObject<HTMLDivElement>,
+  alertId: string
+) => {
+  const ctx = useContext(AlertContext);
+
+  useEffect(() => {
+    if (singleAlertRef.current) {
+      ctx.setAlertHeight(alertId, singleAlertRef.current.getBoundingClientRect().height);
+    }
+  }, [singleAlertRef.current]);
+};
+
+let actionButtonKeyCounter = 1;
+export const AlertItem = ({
+  id,
+  title,
+  duration,
+  variant = "neutral",
+  emphasis = "low",
+  content,
+  className,
+  actions = [],
+  onClose,
+  closeButtonTitle,
+  wasShown
+}: Props) => {
+  const timerHandler = useRef<ReturnType<typeof setTimeout>>();
+  const onAnimationEnd = () => {
+    onClose?.();
+  };
+  const { ref, animationStarted, startAnimation } = useAnimation<HTMLDivElement>(onAnimationEnd);
+
+  useRegisterAlertHeight(ref, id);
+
+  useEffect(() => {
+    if (duration && duration > 0) {
+      timerHandler.current = setTimeout(() => startAnimation(), duration);
+    }
+    if (ref) {
+      ref.current?.addEventListener("focus", onItemFocus);
+      ref.current?.addEventListener("blur", onItemBlur);
+      ref.current?.addEventListener("mouseenter", onItemFocus);
+      ref.current?.addEventListener("mouseleave", onItemBlur);
+    }
+    return () => {
+      timerHandler.current && clearTimeout(timerHandler.current);
+    };
+  }, []);
+
+  const onItemFocus = () => {
+    timerHandler.current && clearTimeout(timerHandler.current);
+  };
+
+  const onItemBlur = () => {
+    if (duration && duration > 0) {
+      timerHandler.current = setTimeout(() => startAnimation(), duration);
+    }
+  };
+
+  const getVariantIcon = () => {
+    if (variant === "error") {
+      return Icons.ErrorAlt;
+    }
+
+    if (variant === "warning") {
+      return Icons.Warning;
+    }
+
+    return variant === "success" ? Icons.CheckmarkCircleAlt : Icons.InfoCircle;
+  };
+
+  const actionButtons = actions.map(actionProp => (
+    <button
+      key={`alert-action-button-${(actionButtonKeyCounter++).toString()}`}
+      {...actionProp}
+      onClick={e => {
+        onClose?.();
+        actionProp.onClick?.(e);
+      }}
+      className={classes["action-button"]}
+    >
+      {actionProp.label}
+    </button>
+  ));
+
+  const getAlertClasses = (): string => {
+    const alertClasses = [classes["alert"], classes[`${variant}`], classes[`emph-${emphasis}`]];
+    if (animationStarted) {
+      alertClasses.push(readyclasses["slide-out"]);
+    }
+    if (!animationStarted && !wasShown) {
+      alertClasses.push(readyclasses["slide-in"]);
+    }
+    if (className) {
+      alertClasses.push(className);
+    }
+    return alertClasses.join(" ");
+  };
+
+  const getAria = () => {
+    if (variant === "error" && (emphasis === "medium" || emphasis === "high")) {
+      return "assertive";
+    }
+    return "polite";
+  };
+
+  const getContentOrTitle = () => {
+    if (content) {
+      return content;
+    }
+    return title;
+  };
+
+  return (
+    <div
+      {...{ ["data-testid"]: "alert-container" }}
+      ref={ref}
+      aria-live={getAria()}
+      className={getAlertClasses()}
+      role="alert"
+    >
+      <div className={classes["outer-content-wrapper"]}>
+        <Icon icon={getVariantIcon()} className={classes["icon"]} />
+        <div className={classes["content-wrapper"]} role="log">
+          {!!title && !!content && (
+            <Typography
+              {...{ ["data-testid"]: "alert-title" }}
+              className={classes["title"]}
+              variant="body-bold"
+              tag="span"
+            >
+              {title}
+            </Typography>
+          )}
+          {(!!content || !!title) && (
+            <Typography
+              {...{ ["data-testid"]: "alert-content" }}
+              className={classes["content"]}
+              variant="body"
+            >
+              {getContentOrTitle()}
+            </Typography>
+          )}
+        </div>
+      </div>
+      {actionButtons.length > 0 && (
+        <div {...{ ["data-testid"]: "alert-actions" }} className={classes["actions"]}>
+          {actionButtons}
+        </div>
+      )}
+      {onClose && (
+        <IconButton
+          className={classes["close-btn"]}
+          onClick={e => {
+            e.stopPropagation();
+            startAnimation();
+          }}
+          title={closeButtonTitle}
+          {...{ ["data-testid"]: "alert-close" }}
+        >
+          <Icon icon={Icons.Times} />
+        </IconButton>
+      )}
+    </div>
+  );
+};

package/src/components/Notifications/Alert/AlertProvider/AlertContext.ts

@@ -0,0 +1,42 @@
+/*
+ * 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 { AlertEntry } from "./AlertProvider";
+import { createContext } from "react";
+
+export type AlertQueue = Omit<AlertEntry, "id">;
+
+export interface AlertContextValue {
+  enqueueAlert: (entry: AlertQueue) => void;
+  enqueueInfoAlert: (entry: AlertQueue) => void;
+  enqueueSuccessAlert: (entry: AlertQueue) => void;
+  enqueueWarningAlert: (entry: AlertQueue) => void;
+  enqueueErrorAlert: (entry: AlertQueue) => void;
+  setAlertHeight: (id: string, height: number) => void;
+  alerts: AlertEntry[];
+}
+
+const AlertContext = createContext<AlertContextValue>({
+  enqueueAlert: entry => null,
+  enqueueInfoAlert: entry => null,
+  enqueueSuccessAlert: entry => null,
+  enqueueErrorAlert: entry => null,
+  enqueueWarningAlert: entry => null,
+  setAlertHeight: (id, height) => null,
+  alerts: []
+});
+
+export default AlertContext;

package/src/components/Notifications/Alert/AlertProvider/AlertProvider.tsx

@@ -0,0 +1,173 @@
+/*
+ * 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, { ReactNode, useRef, useState, useMemo } from "react";
+import { createPortal } from "react-dom";
+import { Placement, AlertContainer } from "../AlertContainer/AlertContainer";
+import { generateID } from "../../../../util/helper";
+import { AlertItem, Props as AlertComponentProps, Variant } from "../AlertItem/AlertItem";
+import { useGetDomRoot } from "../../../../hooks/useGetDomRoot";
+import AlertContext, { AlertContextValue } from "./AlertContext";
+
+/** Short msg is when only title is provided. Long one when content or/and actions are provided (or type is error). */
+interface Duration {
+  long: number;
+  short: number;
+}
+
+export interface Props {
+  closeButtonTitle: string;
+  children?: ReactNode;
+  placement?: Placement;
+  stackSize?: number;
+  domRoot?: HTMLElement;
+  autoHideDuration?: Duration;
+  className?: string;
+}
+
+export type AlertEntry = AlertComponentProps & { height?: number };
+
+export const AlertProvider = ({
+  closeButtonTitle,
+  placement = { vertical: "bottom", horizontal: "center" },
+  autoHideDuration = { long: 8000, short: 4000 },
+  stackSize = 3,
+  domRoot,
+  children,
+  className
+}: Props) => {
+  const [alertEntries, setAlertEntries] = useState<AlertEntry[]>([]);
+  const wrappingDivRef = useRef(null);
+  const { root } = useGetDomRoot(domRoot, wrappingDivRef);
+
+  const getDuration = (entry: Omit<AlertEntry, "id">) => {
+    if (entry.variant === "error") {
+      return autoHideDuration.long;
+    }
+    if (entry.actions?.length) {
+      return autoHideDuration.long;
+    }
+    return autoHideDuration.short;
+  };
+
+  const buildEntryWithVariant = (arg: Omit<AlertEntry, "id">, variant?: Variant): AlertEntry => {
+    let closeTitle = closeButtonTitle;
+    if (arg.closeButtonTitle) {
+      closeTitle = arg.closeButtonTitle;
+    }
+    return {
+      ...arg,
+      variant: variant ?? arg.variant,
+      id: generateID(15, arg.content ?? arg.title),
+      duration: arg.duration ?? getDuration(arg),
+      closeButtonTitle: closeTitle
+    };
+  };
+
+  const enqueueAlert = (arg: Omit<AlertEntry, "id">) => {
+    const newEntry = buildEntryWithVariant(arg);
+    setAlertEntries(entries => [...entries, newEntry]);
+  };
+
+  const enqueueInfoAlert: AlertContextValue["enqueueInfoAlert"] = arg => {
+    const newEntry: AlertEntry = buildEntryWithVariant(arg, "informative");
+    setAlertEntries(entries => [...entries, newEntry]);
+  };
+
+  const enqueueSuccessAlert: AlertContextValue["enqueueSuccessAlert"] = arg => {
+    const newEntry: AlertEntry = buildEntryWithVariant(arg, "success");
+    setAlertEntries(entries => [...entries, newEntry]);
+  };
+
+  const enqueueWarningAlert: AlertContextValue["enqueueWarningAlert"] = arg => {
+    const newEntry: AlertEntry = buildEntryWithVariant(arg, "warning");
+    setAlertEntries(entries => [...entries, newEntry]);
+  };
+
+  const enqueueErrorAlert: AlertContextValue["enqueueErrorAlert"] = arg => {
+    const newEntry: AlertEntry = buildEntryWithVariant(arg, "error");
+    setAlertEntries(entries => [...entries, newEntry]);
+  };
+
+  const setAlertHeight = (id: string, height: number) => {
+    const newAlertsState = alertEntries.map(alertEntry => {
+      if (alertEntry.id !== id) {
+        return alertEntry;
+      }
+      return { ...alertEntry, height };
+    });
+    setAlertEntries(newAlertsState);
+  };
+
+  const removeEntry = (entryId: string) => {
+    setAlertEntries(entries => {
+      return entries.filter((entry, idx) => {
+        if (idx < stackSize) {
+          entries[idx] = { ...entries[idx], wasShown: true };
+        }
+        return entry.id !== entryId;
+      });
+    });
+  };
+
+  const renderAlertList = (): ReactNode => {
+    return alertEntries.slice(0, stackSize).map(entry => (
+      <AlertItem
+        {...entry}
+        key={`${entry.id}`}
+        onClose={() => {
+          removeEntry(entry.id);
+          entry.onClose?.();
+        }}
+      />
+    ));
+  };
+
+  const contextValue = useMemo(
+    () => ({
+      enqueueAlert,
+      enqueueInfoAlert,
+      enqueueSuccessAlert,
+      enqueueErrorAlert,
+      enqueueWarningAlert,
+      setAlertHeight,
+      alerts: alertEntries
+    }),
+    [
+      enqueueAlert,
+      enqueueInfoAlert,
+      enqueueSuccessAlert,
+      enqueueErrorAlert,
+      enqueueWarningAlert,
+      setAlertHeight,
+      alertEntries
+    ]
+  );
+
+  return (
+    <AlertContext.Provider value={contextValue}>
+      {children}
+      <div ref={wrappingDivRef}>
+        {createPortal(
+          <AlertContainer placement={placement} className={className}>
+            {renderAlertList()}
+          </AlertContainer>,
+          root
+        )}
+      </div>
+    </AlertContext.Provider>
+  );
+};