@onewelcome/react-lib-components 2.3.0 → 3.0.1

package/src/components/Notifications/BaseModal/BaseModalActions/BaseModalActions.module.scss

@@ -15,11 +15,51 @@
  */
 
 .actions {
-  margin: 1.875rem 1.25rem 1.875rem 1.25rem;
+  margin: 1.5rem 0 1rem;
+  padding: 1rem 1.5rem 0;
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
+  border-top: 1px solid var(--color-blue-grey100);
 
-  & > * {
+  & > * + * {
     margin-left: 2rem;
   }
+
+  @media screen and (max-width: 640px) {
+    display: block;
+
+    .cancel-action {
+      display: none;
+    }
+
+    .primary-actions {
+      flex-direction: column;
+      align-items: flex-end;
+      margin-left: 0;
+
+      > * {
+        width: 100%;
+      }
+
+      > * + * {
+        margin-top: 0.5rem;
+      }
+    }
+  }
+}
+
+.primary-actions {
+  display: flex;
+  flex-grow: 1;
+  justify-content: flex-end;
+
+  button {
+    white-space: nowrap;
+  }
+
+  @media screen and (min-width: 640px) {
+    button + button {
+      margin-left: 0.5rem;
+    }
+  }
 }

package/src/components/Notifications/BaseModal/BaseModalActions/BaseModalActions.test.tsx

@@ -23,13 +23,44 @@ describe("BaseModalActions", () => {
     const children = "Content";
     const classNames = ["class1", "class2"];
     const { container } = render(
-      <BaseModalActions className={classNames.join(" ")}>{children}</BaseModalActions>
+      <BaseModalActions onClose={jest.fn()} className={classNames.join(" ")}>
+        {children}
+      </BaseModalActions>
     );
 
     const dialogActionsContainer = container.children[0];
     expect(dialogActionsContainer).toHaveClass("actions", classNames[0], classNames[1]);
     expect(dialogActionsContainer).toHaveTextContent(children);
   });
+
+  it("Should render the default cancel action if we don't pass it", () => {
+    const { container } = render(<BaseModalActions onClose={jest.fn()} />);
+    const dialogActionsContainer = container.children[0];
+    expect(dialogActionsContainer).toHaveClass("actions");
+    expect(dialogActionsContainer).toHaveTextContent("Cancel");
+  });
+
+  it("should render a cancel action with a custom label", () => {
+    const cancelAction = { label: "Close", disable: false };
+    const { container } = render(
+      <BaseModalActions onClose={jest.fn()} cancelAction={cancelAction} />
+    );
+
+    const dialogActionsContainer = container.children[0];
+    expect(dialogActionsContainer).toHaveClass("actions");
+    expect(dialogActionsContainer).toHaveTextContent(cancelAction.label);
+  });
+
+  it("Shouldn't render a label because of disabled cancel action", () => {
+    const cancelAction = { label: "Close", disable: true };
+    const { container } = render(
+      <BaseModalActions onClose={jest.fn()} cancelAction={cancelAction} />
+    );
+
+    const dialogActionsContainer = container.children[0];
+    expect(dialogActionsContainer).toHaveClass("actions");
+    expect(dialogActionsContainer).not.toHaveTextContent(cancelAction.label);
+  });
 });
 describe("ref should work", () => {
   it("should give back the proper data prop, this also checks if the component propagates ...rest properly", () => {
@@ -46,7 +77,7 @@ describe("ref should work", () => {
         }
       }, [ref]);
 
-      return <BaseModalActions data-ref="testing" ref={ref} />;
+      return <BaseModalActions onClose={jest.fn()} data-ref="testing" ref={ref} />;
     };
 
     const refCheck = (ref: React.RefObject<HTMLElement>) => {

package/src/components/Notifications/BaseModal/BaseModalActions/BaseModalActions.tsx

@@ -14,20 +14,51 @@
  *    limitations under the License.
  */
 
-import React, { ForwardRefRenderFunction, ComponentPropsWithRef } from "react";
+import React, { ForwardRefRenderFunction, ComponentPropsWithRef, useRef } from "react";
 import classes from "./BaseModalActions.module.scss";
+import { Button } from "../../../Button/Button";
 
 export interface Props extends ComponentPropsWithRef<"div"> {
   children?: React.ReactNode;
+  onClose: () => void;
+  cancelAction?: CancelAction;
+}
+
+export interface CancelAction {
+  label?: string;
+  disable?: boolean;
 }
 
 const BaseModalActionsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  { children, className = "", ...rest }: Props,
+  {
+    children,
+    onClose,
+    cancelAction = { label: undefined, disable: false },
+    className = "",
+    ...rest
+  }: Props,
   ref
 ) => {
+  const innerRef = (React.createRef() as React.RefObject<HTMLDivElement>) || ref;
+  const cancelButtonRef = useRef<HTMLDivElement>(null);
+  const primaryActionsRef = useRef<HTMLDivElement>(null);
+
+  const CancelButton = (
+    <Button key="cancel" variant="text" color="default" onClick={onClose}>
+      {cancelAction?.label ?? "Cancel"}
+    </Button>
+  );
+
   return (
-    <div {...rest} ref={ref} className={`${classes["actions"]} ${className}`}>
-      {children}
+    <div {...rest} ref={innerRef} className={`${classes["actions"]} ${className}`}>
+      {!cancelAction.disable && (
+        <div className={classes["cancel-action"]} ref={cancelButtonRef}>
+          {CancelButton}
+        </div>
+      )}
+      <div ref={primaryActionsRef} className={classes["primary-actions"]}>
+        {children}
+      </div>
     </div>
   );
 };

package/src/components/Notifications/BaseModal/BaseModalContent/BaseModalContent.module.scss

@@ -15,8 +15,11 @@
  */
 
 .content {
-  padding: 1.5rem 1.25rem 0;
+  padding: 1.25rem 1.5rem 0;
   overflow-y: auto;
   flex: 1;
   outline: none;
+  color: var(--color-blue-grey500);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
 }

package/src/components/Notifications/BaseModal/BaseModalHeader/BaseModalHeader.module.scss

@@ -16,8 +16,7 @@
 
 .header {
   min-width: 80px;
-  padding: 1rem 1.25rem;
-  background-color: var(--modal-header-background-color);
+  padding: 1.25rem 1.5rem 0;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
 }
@@ -25,9 +24,10 @@
 .headline {
   display: flex;
   align-items: center;
+  justify-content: space-between;
 }
 
 .title {
   flex: 1;
-  margin: 0 0 0 1.25rem;
+  margin: 0;
 }

package/src/components/Notifications/BaseModal/BaseModalHeader/BaseModalHeader.tsx

@@ -34,9 +34,17 @@ const BaseModalHeaderComponent: ForwardRefRenderFunction<HTMLDivElement, Props>
   return (
     <div {...rest} ref={ref} className={classes["header"]}>
       <div className={classes["headline"]}>
-        <Typography id={id} className={classes["title"]} tag="h1" variant="h4">
-          {title}
-        </Typography>
+        <div className={classes["title-wrapper"]}>
+          <Typography
+            id={id}
+            className={classes["title"]}
+            tag="h1"
+            spacing={{ marginBottom: 0 }}
+            variant="h4"
+          >
+            {title}
+          </Typography>
+        </div>
         <IconButton onClick={onClose} className={classes["closeBtn"]} title="close modal">
           <Icon icon={Icons.Times} />
         </IconButton>

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

@@ -20,8 +20,7 @@
 
 @media only screen and (min-width: 50em) {
   .container {
-    width: auto;
-    max-width: 440px;
+    width: 30rem;
     margin-top: 0;
     max-height: 90%;
   }

package/src/components/Notifications/Dialog/Dialog.test.tsx

@@ -23,12 +23,15 @@ const initParams: Props = {
   id: "modal",
   open: true,
   onClose: jest.fn(),
-  alignActions: "left",
   title: "Example dialog",
   primaryAction: {
     label: "Save",
     onClick: jest.fn()
   },
+  cancelAction: {
+    label: "Cancel",
+    disable: false
+  },
   secondaryAction: {
     label: "Cancel",
     onClick: jest.fn()
@@ -40,42 +43,29 @@ const getButtons = (container: HTMLElement) => getAllByRole(container, "button")
 
 describe("Dialog", () => {
   it("renders without crashing", () => {
-    const { getByText } = render(<Dialog {...initParams} />);
-    const [primaryButton, secondaryButton] = getButtons(document.body);
+    const { getByText, debug } = render(<Dialog {...initParams} />);
+    const [_cancelButton, secondaryButton, primaryButton] = getButtons(document.body);
 
     expect(getByText(initParams.title)).toBeDefined();
     expect(getByText(initParams.children as string)).toBeDefined();
     const actionsDiv = primaryButton.closest("div");
-    expect(actionsDiv).toHaveClass("left");
-    expect(actionsDiv?.children[0]).toEqual(primaryButton);
-    expect(actionsDiv?.children[1]).toEqual(secondaryButton);
-    expect(primaryButton).toHaveClass("fill");
-    expect(secondaryButton).toHaveClass("text");
-  });
-
-  it("renders action aligned to right", () => {
-    render(<Dialog {...initParams} alignActions="right" />);
-    const [secondaryButton, primaryButton] = getButtons(document.body);
-
-    const actionsDiv = primaryButton.closest("div");
-    expect(actionsDiv).not.toHaveClass("left");
-    expect(actionsDiv?.children[0]).toEqual(secondaryButton);
     expect(actionsDiv?.children[1]).toEqual(primaryButton);
+    expect(actionsDiv?.children[0]).toEqual(secondaryButton);
     expect(primaryButton).toHaveClass("fill");
-    expect(secondaryButton).toHaveClass("text");
+    expect(secondaryButton).toHaveClass("outline");
   });
 
   it("renders only one button", () => {
     render(<Dialog {...initParams} secondaryAction={undefined} />);
     const buttons = getButtons(document.body);
 
-    expect(buttons).toHaveLength(1);
-    expect(buttons[0]).toHaveClass("fill");
+    expect(buttons).toHaveLength(2);
+    expect(buttons[1]).toHaveClass("fill");
   });
 
   it("should handle clicking on buttons and ENTER press", async () => {
     render(<Dialog {...initParams} />);
-    const [primaryButton, secondaryButton] = getButtons(document.body);
+    const [_cancelButton, secondaryButton, primaryButton] = getButtons(document.body);
     expect(initParams.primaryAction.onClick).toHaveBeenCalledTimes(0);
     expect(initParams.secondaryAction?.onClick).toHaveBeenCalledTimes(0);
     expect(initParams.onClose).toHaveBeenCalledTimes(0);
@@ -110,7 +100,6 @@ describe("ref should work", () => {
         <Dialog
           children="test"
           open={false}
-          alignActions={"left"}
           onClose={jest.fn()}
           primaryAction={{ label: "test", onClick: jest.fn() }}
           title="test"

package/src/components/Notifications/Dialog/Dialog.tsx

@@ -23,18 +23,21 @@ import { DialogTitle } from "./DialogTitle/DialogTitle";
 import { Button, Props as ButtonProps } from "../../Button/Button";
 import { labelId, descriptionId } from "../BaseModal/BaseModalContext";
 import { generateID } from "../../../util/helper";
+import { CancelAction } from "../BaseModal/BaseModalActions/BaseModalActions";
 
 export interface Props extends ComponentPropsWithRef<"div"> {
   id?: string;
   open: boolean;
   children: React.ReactNode;
-  alignActions: "left" | "right";
   onClose: () => void;
   title: string;
   primaryAction: Action;
   secondaryAction?: Action;
+  cancelAction?: CancelAction;
   zIndex?: number;
   disableEscapeKeyDown?: boolean;
+  titleIcon?: React.ReactNode;
+  caption?: string;
 }
 
 export interface Action extends Omit<ButtonProps, "variant" | "ref"> {
@@ -47,13 +50,15 @@ const DialogComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     id,
     open,
     children,
-    alignActions,
     onClose,
     title,
     primaryAction,
     secondaryAction,
+    cancelAction,
     zIndex,
     disableEscapeKeyDown = true,
+    titleIcon,
+    caption,
     ...rest
   }: Props,
   ref
@@ -65,12 +70,13 @@ const DialogComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
       {primaryLabel}
     </Button>
   );
-  const TertiaryButton =
+
+  const SecondaryButton =
     secondaryAction &&
     (function () {
       const { label: secondaryLabel, ...restOfSecondaryAction } = secondaryAction;
       return (
-        <Button key="tertiary" variant="text" {...restOfSecondaryAction}>
+        <Button key="tertiary" variant="outline" {...restOfSecondaryAction}>
           {secondaryLabel}
         </Button>
       );
@@ -96,7 +102,7 @@ const DialogComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
       zIndex={zIndex}
       disableEscapeKeyDown={disableEscapeKeyDown}
     >
-      <DialogTitle id={labelId(dialogId)} title={title} />
+      <DialogTitle titleIcon={titleIcon} caption={caption} id={labelId(dialogId)} title={title} />
       <BaseModalContent
         id={descriptionId(dialogId)}
         className={classes["content"]}
@@ -104,10 +110,8 @@ const DialogComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
       >
         {children}
       </BaseModalContent>
-      <DialogActions align={alignActions}>
-        {alignActions === "left"
-          ? [PrimaryButton, TertiaryButton]
-          : [TertiaryButton, PrimaryButton]}
+      <DialogActions onClose={onClose} cancelAction={cancelAction}>
+        {[SecondaryButton, PrimaryButton]}
       </DialogActions>
       <input
         autoFocus

package/src/components/Notifications/Dialog/DialogActions/DialogActions.module.scss

@@ -15,13 +15,7 @@
  */
 
 .actions {
-  margin: 1.5rem 1.25rem 1.25rem;
-
-  &.left {
-    justify-content: flex-start;
-  }
-
   & * + * {
-    margin-left: 1.25rem;
+    margin-left: 0.5rem;
   }
 }

package/src/components/Notifications/Dialog/DialogActions/DialogActions.test.tsx

@@ -20,7 +20,8 @@ import { render } from "@testing-library/react";
 
 const initParams: Props = {
   align: "right",
-  children: "Content"
+  children: "Content",
+  onClose: jest.fn()
 };
 
 describe("DialogActions", () => {
@@ -31,13 +32,6 @@ describe("DialogActions", () => {
     expect(dialogActionsContainer).toHaveClass("actions");
     expect(dialogActionsContainer).toHaveTextContent(initParams.children as string);
   });
-
-  it("should align items to left", () => {
-    const { container } = render(<DialogActions {...initParams} align="left" />);
-
-    const dialogActionsContainer = container.children[0];
-    expect(dialogActionsContainer).toHaveClass("actions", "left");
-  });
 });
 
 describe("ref should work", () => {

package/src/components/Notifications/Dialog/DialogActions/DialogActions.tsx

@@ -17,23 +17,26 @@
 import React, { ForwardRefRenderFunction, ComponentPropsWithRef } from "react";
 import {
   BaseModalActions,
-  Props as BaseModalActionsProps
+  Props as BaseModalActionsProps,
+  CancelAction
 } from "../../BaseModal/BaseModalActions/BaseModalActions";
 import classes from "./DialogActions.module.scss";
 
 export interface Props extends ComponentPropsWithRef<any>, BaseModalActionsProps {
-  align: "left" | "right";
+  cancelAction?: CancelAction;
 }
 
 const DialogActionsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  { children, align, ...rest }: Props,
+  { children, cancelAction, onClose, ...rest }: Props,
   ref
 ) => {
   return (
     <BaseModalActions
       {...rest}
+      cancelAction={{ label: cancelAction?.label, disable: cancelAction?.disable }}
+      onClose={onClose}
       ref={ref}
-      className={`${classes["actions"]}${align === "left" ? " " + classes["left"] : ""}`}
+      className={classes["actions"]}
     >
       {children}
     </BaseModalActions>

package/src/components/Notifications/Dialog/DialogTitle/DialogTitle.module.scss

@@ -15,9 +15,20 @@
  */
 
 .header {
-  margin: 1.5rem 1.25rem 1.25rem;
+  margin: 1rem 1.5rem;
+  display: flex;
+  align-items: flex-start;
 }
 
 .title {
   margin: 0;
+  line-height: 1;
+
+  &-icon > [data-icon] {
+    font-size: 1.25rem;
+  }
+}
+
+.caption {
+  color: var(--color-blue-grey500);
 }

package/src/components/Notifications/Dialog/DialogTitle/DialogTitle.test.tsx

@@ -31,6 +31,33 @@ describe("DialogTitle", () => {
     expect(dialogTitleContainer).toHaveClass("header");
     expect(getByText(container, initParams.title));
   });
+
+  it("should render a title icon", () => {
+    const { container } = render(<DialogTitle {...initParams} titleIcon={true} />);
+
+    const dialogTitleContainer = container.children[0];
+    expect(dialogTitleContainer).toHaveClass("header");
+    expect(getByText(container, initParams.title));
+  });
+
+  it("should render a custom title icon", () => {
+    const { container } = render(
+      <DialogTitle {...initParams} titleIcon={<div>Custom Icon</div>} />
+    );
+
+    const dialogTitleContainer = container.children[0];
+    expect(dialogTitleContainer).toHaveClass("header");
+    expect(getByText(container, initParams.title));
+  });
+
+  it("should render a caption", () => {
+    const { container } = render(<DialogTitle {...initParams} caption="Example caption" />);
+
+    const dialogTitleContainer = container.children[0];
+    expect(dialogTitleContainer).toHaveClass("header");
+    expect(getByText(container, initParams.title));
+    expect(getByText(container, "Example caption"));
+  });
 });
 
 describe("ref should work", () => {

package/src/components/Notifications/Dialog/DialogTitle/DialogTitle.tsx

@@ -17,21 +17,42 @@
 import React, { ForwardRefRenderFunction, ComponentPropsWithRef } from "react";
 import { Typography } from "../../../Typography/Typography";
 import classes from "./DialogTitle.module.scss";
+import { Icon, Icons } from "../../../Icon/Icon";
 
 export interface Props extends ComponentPropsWithRef<"div"> {
   id: string;
   title: string;
+  titleIcon?: React.ReactNode;
+  caption?: string;
 }
 
 const DialogTitleComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  { id, title, ...rest }: Props,
+  { id, title, titleIcon, caption, ...rest }: Props,
   ref
 ) => {
   return (
     <div {...rest} ref={ref} className={classes["header"]}>
-      <Typography id={id} className={classes["title"]} tag="h1" variant="h4">
-        {title}
-      </Typography>
+      {titleIcon && (
+        <div className={classes["title-icon"]}>
+          {typeof titleIcon === "boolean" ? <Icon icon={Icons.InfoCircle} /> : titleIcon}
+        </div>
+      )}
+      <div className={classes["title-wrapper"]}>
+        <Typography
+          id={id}
+          className={classes["title"]}
+          spacing={titleIcon && { marginLeft: 2 }}
+          tag="h1"
+          variant="h4"
+        >
+          {title}
+        </Typography>
+        {caption && (
+          <Typography className={classes["caption"]} spacing={{ marginLeft: 2 }} variant="sub-text">
+            {caption}
+          </Typography>
+        )}
+      </div>
     </div>
   );
 };

package/src/components/Notifications/DiscardChangesModal/DiscardChangesDialog/DiscardChangesDialog.tsx

@@ -18,11 +18,13 @@ import React, { ForwardRefRenderFunction, ComponentPropsWithRef } from "react";
 import { Dialog } from "../../Dialog/Dialog";
 import { Typography } from "../../../Typography/Typography";
 import { DataAttributeKey } from "../../../../interfaces";
+import { CancelAction } from "../../BaseModal/BaseModalActions/BaseModalActions";
 
 export interface Props extends ComponentPropsWithRef<"div"> {
   open: boolean;
   discardChangesButtonLabel: string;
   keepEditingButtonLabel: string;
+  cancelAction?: CancelAction;
   contentLabel: string;
   titleLabel: string;
   [dataAttribute: DataAttributeKey]: any;
@@ -39,6 +41,7 @@ const DiscardChangesDialogComponent: ForwardRefRenderFunction<HTMLDivElement, Pr
     keepEditingButtonLabel,
     contentLabel,
     titleLabel,
+    cancelAction,
     ...rest
   }: Props,
   ref
@@ -48,9 +51,9 @@ const DiscardChangesDialogComponent: ForwardRefRenderFunction<HTMLDivElement, Pr
       {...rest}
       ref={ref}
       open={open}
-      alignActions="left"
       title={titleLabel}
       onClose={onKeepEditing}
+      cancelAction={cancelAction}
       primaryAction={{
         label: discardChangesButtonLabel,
         onClick: onDiscardChanges

package/src/components/Notifications/DiscardChangesModal/DiscardChangesModal.test.tsx

@@ -97,15 +97,12 @@ describe("DiscardChangesModal should show DiscardChangesDialog", () => {
 
     expect(defaultParams.onClose).not.toBeCalled();
     await findDiscardChangesDialog(container);
-    const [_, keepEditingBtn] = getDiscardChangesButtons(container);
+    const [_cancelButton, _discardButton, keepEditingBtn] = getDiscardChangesButtons(container);
     expect(container).toHaveTextContent(defaultParams.discardChangedDialogProps.titleLabel);
     expect(container).toHaveTextContent(defaultParams.discardChangedDialogProps.contentLabel);
 
     await userEvent.click(keepEditingBtn);
     expect(defaultParams.onClose).not.toBeCalled();
-    await waitFor(() =>
-      expect(container).not.toHaveTextContent(defaultParams.discardChangedDialogProps.titleLabel)
-    );
   });
 
   it("showing DiscardChangesDialog and clicking on `discard` button", async () => {
@@ -118,7 +115,7 @@ describe("DiscardChangesModal should show DiscardChangesDialog", () => {
     await userEvent.click(closeBtn);
 
     await findDiscardChangesDialog(container);
-    const [discardBtn] = getDiscardChangesButtons(container);
+    const [_cancelButton, discardBtn] = getDiscardChangesButtons(container);
     expect(container).toHaveTextContent(defaultParams.discardChangedDialogProps.titleLabel);
 
     await userEvent.click(discardBtn);