@onewelcome/react-lib-components 2.2.0 → 3.0.0

package/src/components/Form/Wrapper/InputWrapper/InputWrapper.module.scss

@@ -16,8 +16,6 @@
 
 @use "../../../../mixins.module.scss";
 
-@include mixins.inputLabelPrimaryColorOnFocus("label.input-label.focus");
-
 input {
   &.floating-label {
     padding-top: 1rem;
@@ -33,6 +31,9 @@ input {
     @include mixins.transition(all, 0.2s, ease-in-out);
     transform: translateY(0px);
     font-size: 1.125rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
   .floating-label-active [data-icon]:before {
@@ -59,6 +60,7 @@ input {
   .disabled {
     background-color: var(--disabled);
     cursor: not-allowed;
+    color: var(--greyed-out);
   }
 }
 

package/src/components/Form/Wrapper/TextareaWrapper/TextareaWrapper.module.scss

@@ -16,8 +16,6 @@
 
 @use "../../../../mixins.module.scss";
 
-@include mixins.inputLabelPrimaryColorOnFocus("label.textarea-label");
-
 .textarea-wrapper {
   &:after {
     content: "";

package/src/components/Form/Wrapper/Wrapper/Wrapper.tsx

@@ -83,6 +83,7 @@ const WrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   return (
     <div {...rest} ref={ref} className={`${classes.wrapper} ${className ?? ""}`}>
       <FormGroup
+        disabled={disabled}
         error={error}
         errorMessage={errorMessage}
         errorId={errorId}

package/src/components/Icon/Icon.module.scss

@@ -16,10 +16,11 @@
 
 @font-face {
   font-family: "icomoon";
-  src: url("../../font/icomoon.eot?ywvhmn");
-  src: url("../../font/icomoon.eot?ywvhmn#iefix") format("embedded-opentype"),
-    url("../../font/icomoon.ttf?ywvhmn") format("truetype"),
-    url("../../font/icomoon.woff?ywvhmn") format("woff");
+  src: url("../../font/icomoon.eot?66dkqw");
+  src:
+    url("../../font/icomoon.eot?66dkqw#iefix") format("embedded-opentype"),
+    url("../../font/icomoon.ttf?66dkqw") format("truetype"),
+    url("../../font/icomoon.woff?66dkqw") format("woff");
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -44,6 +45,10 @@
   font-size: 0.875rem;
 }
 
+.icon-home-filled:before {
+  content: "\e940";
+  @include fontProperties();
+}
 .icon-file-outline:before {
   content: "\e941";
   @include fontProperties();
@@ -300,7 +305,7 @@
   content: "\e93c";
   @include fontProperties();
 }
-.icon-error-circle:before {
+.icon-error-circle-alt:before {
   content: "\e93d";
   @include fontProperties();
 }
@@ -312,7 +317,10 @@
   content: "\e93f";
   @include fontProperties();
 }
-
+.icon-error-circle:before {
+  content: "\e944";
+  @include fontProperties();
+}
 .icon-eye-blocked:before {
   content: "\e9d1";
   @include fontProperties();

package/src/components/Icon/Icon.tsx

@@ -42,6 +42,7 @@ export enum Icons {
   EllipsisAlt = "ellipsis-alt",
   Equal = "equal",
   Error = "error-circle",
+  ErrorAlt = "error-circle-alt",
   Eye = "eye",
   EyeBlocked = "eye-blocked",
   Filter = "filter",
@@ -54,6 +55,7 @@ export enum Icons {
   Gearwheel = "gearwheel",
   Grid = "grid",
   Hamburger = "hamburger",
+  HomeFilled = "home-filled",
   Heart = "heart",
   Image = "image",
   InfoBell = "info-bell",

package/src/components/Link/Link.tsx

@@ -17,13 +17,16 @@
 import React, {
   ForwardRefRenderFunction,
   ComponentPropsWithRef,
-  ForwardRefExoticComponent
+  ForwardRefExoticComponent,
+  ReactElement
 } from "react";
 import classes from "./Link.module.scss";
+import { IconProps, Icon } from "../../index";
 
 export type AnchorType = "external" | "internal" | "download";
 
 export interface Props extends ComponentPropsWithRef<"a"> {
+  prefixIcon?: ReactElement<IconProps, typeof Icon>;
   color?: "primary" | "secondary" | "tertiary";
   display?: "link" | "button";
   buttonVariant?: "outline" | "text" | "fill";
@@ -38,6 +41,7 @@ const LinkComponent: ForwardRefRenderFunction<HTMLAnchorElement, Props> = (
     children,
     className,
     disabled = false,
+    prefixIcon = undefined,
     to,
     color = "primary",
     type = "internal",
@@ -97,7 +101,8 @@ const LinkComponent: ForwardRefRenderFunction<HTMLAnchorElement, Props> = (
         ...rest.style
       }}
     >
-      {children}
+      {prefixIcon}
+      <span data-underline="true">{children}</span>
     </a>
   );
 };

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

@@ -55,10 +55,10 @@ $marginTop: 3.125rem;
 }
 
 .container {
+  margin-top: $marginTop;
   background-color: var(--modal-background-color);
   z-index: $zIndex + 1;
-  width: 100%;
-  height: 100%;
+  width: calc(100% - 2rem);
 
   display: flex;
   flex-direction: column;
@@ -66,11 +66,11 @@ $marginTop: 3.125rem;
 
 @media only screen and (min-width: 50em) {
   .container {
-    margin-top: $marginTop;
-    width: 50rem;
+    min-width: 480px;
+    width: min-content;
     height: auto;
     max-height: calc(90% - $marginTop);
-    border-radius: 8px;
+    border-radius: 2px;
     box-shadow: 0 30px 50px var(--modal-shadow-color);
   }
 }

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

@@ -83,7 +83,7 @@ const BaseModalComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   ref
 ) => {
   useSetBodyScroll(open);
-  const wrappingDivRef = useRef(null);
+  const wrappingDivRef = useRef<HTMLDivElement>(null);
   const { root } = useGetDomRoot(domRoot, wrappingDivRef);
 
   const handleEscKeyPress = (event: React.KeyboardEvent<HTMLDivElement>) => {
@@ -93,6 +93,12 @@ const BaseModalComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     }
   };
 
+  useEffect(() => {
+    if (open) {
+      wrappingDivRef.current?.focus();
+    }
+  }, [open]);
+
   const handleBackdropClick = () => !disableBackdrop && onClose && onClose();
 
   return (
@@ -122,6 +128,7 @@ const BaseModalComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
             <div
               {...containerProps}
               aria-hidden={!open}
+              data-element="dialog"
               hidden={!open}
               style={{ zIndex: zIndex && zIndex + 1 }}
               className={`${classes["container"]} ${containerProps?.className ?? ""}`}
@@ -132,6 +139,7 @@ const BaseModalComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
             open && (
               <div
                 {...containerProps}
+                data-element="dialog"
                 style={{ zIndex: zIndex && zIndex + 1 }}
                 className={`${classes["container"]} ${containerProps?.className ?? ""}`}
               >

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,6 +24,7 @@
 .headline {
   display: flex;
   align-items: center;
+  justify-content: space-between;
 }
 
 .title {

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,8 @@
 
 @media only screen and (min-width: 50em) {
   .container {
-    width: auto;
-    max-width: 440px;
+    max-width: min-content;
+    min-width: 314px;
     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
@@ -120,7 +124,7 @@ const DialogComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
         }}
         maxLength={0}
         tabIndex={-1}
-        onKeyPress={onHiddenInputKeyPress}
+        onKeyDown={onHiddenInputKeyPress}
       />
     </BaseModal>
   );

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>