@onewelcome/react-lib-components 2.2.0 → 3.0.0

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -38,6 +38,16 @@ const BreadcrumbsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
 ) => {
   const items = React.Children.map(children, (child, index) => {
     const isLastElement = Array.isArray(children) ? index === children.length - 1 : true;
+    const isFirstElement = Array.isArray(children) && index === 0;
+    let item = React.cloneElement(child, {
+      className: classes["breadcrumb-link"],
+      ...(isFirstElement
+        ? {
+            prefixIcon: <Icon icon={Icons.HomeFilled} style={{ marginRight: "0.35rem" }} />
+          }
+        : {})
+    } as LinkProps);
+
     if (isLastElement) {
       return (
         <Typography
@@ -53,7 +63,7 @@ const BreadcrumbsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     } else {
       return (
         <Fragment key={child.key}>
-          {React.cloneElement(child)}
+          {item}
           <Icon icon={Icons.ChevronRight} className={classes["icon"]} />
         </Fragment>
       );

package/src/components/ContextMenu/ContextMenu.tsx

@@ -169,7 +169,12 @@ const ContextMenuComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
       onClose?.();
       !hasBeenClosed && setHasBeenClosed(true);
       setFocusedContextMenuItem(-1);
-      hasBeenClosed && anchorEl.current && anchorEl.current.focus();
+      // If the user clicks on the trigger button, we want to focus it again after the context menu has been closed,
+      // but only if the option doesn't open another window (such as a modal),
+      // otherwise pressing enter wouldn't fire the primary action of the modal.
+      if (document.activeElement?.closest(`.${wrappingDivRef.current?.className}`)) {
+        hasBeenClosed && anchorEl.current && anchorEl.current.focus();
+      }
     }
   }, [showContextMenu]);
 

package/src/components/Form/Fieldset/Fieldset.module.scss

@@ -18,7 +18,7 @@
 
 .fieldset {
   border: 0;
-  padding: 1rem variables.$form-element-horizontal-padding-mobile;
+  padding: variables.$form-element-horizontal-padding-mobile;
   border-radius: 0.5rem;
   margin: 0;
 
@@ -47,6 +47,6 @@
 }
 @media only screen and (min-width: 30em) {
   .fieldset {
-    padding: 1rem variables.$form-element-horizontal-padding-desktop;
+    padding: variables.$form-element-horizontal-padding-desktop;
   }
 }

package/src/components/Form/FileUpload/FileItem/FileItem.tsx

@@ -126,11 +126,7 @@ const FileItemComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
         </Typography>
       )}
       {status === "uploading" ? (
-        <ProgressBar
-          className={classes["progress-bar"]}
-          placeholderText={""}
-          completed={progress}
-        />
+        <ProgressBar className={classes["progress-bar"]} completed={progress} />
       ) : (
         ""
       )}

package/src/components/Form/FormGroup/FormGroup.module.scss

@@ -18,11 +18,8 @@
   position: relative;
 }
 
-.error {
-  color: var(--error);
-}
-
 .error-message {
+  color: var(--error);
   display: flex;
   align-items: flex-end;
 }
@@ -42,4 +39,5 @@
 
 .default-helper {
   font-size: 0.75rem;
+  line-height: 1.33333333;
 }

package/src/components/Form/FormGroup/FormGroup.tsx

@@ -46,16 +46,15 @@ const FormGroupComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     helperText,
     helperId,
     helperProps,
+    disabled,
     ...rest
   }: Props,
   ref
 ) => {
+  const disableHelperText = helperProps?.disabled !== undefined ? helperProps?.disabled : disabled;
+
   return (
-    <div
-      {...rest}
-      ref={ref}
-      className={`${classes["form-group"]} ${error ? classes.error : ""} ${className ?? ""}`}
-    >
+    <div {...rest} ref={ref} className={`${classes["form-group"]} ${className ?? ""}`}>
       {children}
 
       {(helperText || (errorMessage && error)) && (
@@ -65,13 +64,18 @@ const FormGroupComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
           }`}
         >
           {((helperText && !error) || (helperText && error && !errorMessage)) && (
-            <FormHelperText {...helperProps} className={""} id={helperId}>
+            <FormHelperText
+              {...helperProps}
+              className={""}
+              id={helperId}
+              disabled={disableHelperText}
+            >
               {helperProps?.children || helperText}
             </FormHelperText>
           )}
           {error && errorMessage && (
             <span className={classes["error-message"]}>
-              <span className={classes.message} id={errorId}>
+              <span id={errorId} className={classes.message}>
                 {errorMessageIcon && errorMessageIconPosition === "before" && (
                   <Icon
                     className={`${classes["error-icon"]} ${classes["error-icon-before"]}`}

package/src/components/Form/FormHelperText/FormHelperText.module.scss

@@ -14,11 +14,15 @@
  *    limitations under the License.
  */
 
-.form-helper-text {
-  margin: 0;
+div.form-helper-text {
+  color: var(--input-helper-text-color);
+  margin-bottom: 0;
+}
+
+div.disabled {
   color: var(--greyed-out);
 }
 
-.error {
+div.error {
   color: var(--error);
 }

package/src/components/Form/FormHelperText/FormHelperText.tsx

@@ -21,20 +21,20 @@ import { FormElement } from "../form.interfaces";
 
 export interface Props extends ComponentPropsWithRef<"div">, FormElement {
   children?: ReactNode;
+  disabled?: boolean;
 }
 
 const FormHelperTextComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  { children, error, className, ...rest }: Props,
+  { children, error, disabled, className, ...rest }: Props,
   ref
 ) => {
+  const classNames = [classes["form-helper-text"]];
+  error && classNames.push(classes["error"]);
+  disabled && classNames.push(classes["disabled"]);
+  className && classNames.push(className);
+
   return (
-    <Typography
-      {...rest}
-      ref={ref}
-      variant="sub-text"
-      tag="div"
-      className={`${classes["form-helper-text"]} ${error ? classes.error : ""} ${className ?? ""}`}
-    >
+    <Typography {...rest} ref={ref} variant="sub-text" tag="div" className={classNames.join(" ")}>
       {children}
     </Typography>
   );

package/src/components/Form/Input/Input.module.scss

@@ -71,15 +71,19 @@
     height: 100%;
     width: 1.25rem;
     box-sizing: border-box;
-    font-size: 1.25rem;
+    font-size: 1.125rem;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 2;
 
     &:before {
+      font-size: 1.125rem;
       height: 1.25rem;
       width: 1.25rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
   }
 
@@ -93,8 +97,9 @@
 }
 
 .input {
+  padding: 0;
   height: 40px;
-  color: var(--greyed-out);
+  color: var(--color-blue-grey900);
   font-size: var(--form-control-font-size);
   font-family: var(--font-family);
   box-sizing: border-box;
@@ -110,6 +115,7 @@
 
   &:disabled {
     cursor: not-allowed;
+    color: var(--greyed-out);
   }
 
   &.shrink-width-for-date-icon {
@@ -122,7 +128,6 @@
 @include mixins.outline;
 
 .error input {
-  color: var(--error);
   padding-right: 1.25rem;
 
   &.remove-extra-indent {

package/src/components/Form/Input/Input.test.tsx

@@ -260,7 +260,7 @@ describe("It should render prefix and suffix ", () => {
       ...defaultParams,
       success: true
     }));
-    const icon = input.querySelector(".icon-checkmark-circle-breakout");
+    const icon = input.querySelector(".icon-checkmark-circle-alt");
     expect(input.querySelector(".success")).toBeDefined();
     expect(icon).toBeDefined();
   });

package/src/components/Form/Select/Option.tsx

@@ -19,12 +19,13 @@ import React, {
   ComponentPropsWithRef,
   createRef,
   RefObject,
-  useEffect
+  useEffect,
+  ReactNode
 } from "react";
 import classes from "./Select.module.scss";
 
 export interface Props extends ComponentPropsWithRef<"li"> {
-  children: string;
+  children: ReactNode;
   value: string;
   disabled?: boolean;
   isSelected?: boolean;
@@ -71,9 +72,7 @@ const OptionComponent: ForwardRefRenderFunction<HTMLLIElement, Props> = (
     }
   }, [hasFocus, innerOptionRef, selectOpened, isSearching]);
 
-  const onSelectHandler = () => {
-    if (onOptionSelect) onOptionSelect(innerOptionRef);
-  };
+  const onSelectHandler = () => onOptionSelect?.(innerOptionRef);
 
   return (
     <li

package/src/components/Form/Select/Select.interfaces.ts

@@ -15,8 +15,8 @@
  */
 
 export type Position = {
-  top: 0 | "initial";
-  bottom: 0 | "initial";
+  top: number | `${number}rem` | "initial";
+  bottom: number | `${number}rem` | "initial";
 };
 
 export interface UseArrowNavigationParams {
@@ -26,8 +26,8 @@ export interface UseArrowNavigationParams {
   setIsSearching: React.Dispatch<React.SetStateAction<boolean>>;
   setFocusedSelectItem: React.Dispatch<React.SetStateAction<number>>;
   childrenCount: number;
-  customSelectButtonRef: React.RefObject<HTMLButtonElement>;
   setShouldClick: React.Dispatch<React.SetStateAction<boolean>>;
+  onOptionChangeHandler: (optionElement: HTMLElement | null) => void;
   searchInputRef: React.RefObject<HTMLInputElement>;
   renderSearchCondition: number;
 }

package/src/components/Form/Select/Select.module.scss

@@ -29,8 +29,8 @@ $listItemHeight: 2.125rem;
   font-size: var(--form-control-font-size);
 
   [data-display] {
-    color: var(--greyed-out);
-    font-family: var(--form-control-font-size);
+    color: var(--color-default);
+    font-family: var(--font-family);
   }
 
   &.expanded {
@@ -43,10 +43,7 @@ $listItemHeight: 2.125rem;
     button:focus:not(.error) {
       border: var(--input-border-width-focus) solid var(--color-focus);
       padding: 0
-        calc(
-          variables.$form-element-horizontal-padding-mobile - var(--input-border-width-focus) +
-            var(--input-border-width)
-        );
+        calc(variables.$form-element-horizontal-padding-mobile - var(--input-border-width-focus));
     }
   }
 
@@ -54,16 +51,17 @@ $listItemHeight: 2.125rem;
     button:not(:focus) {
       border-color: var(--default);
       border-width: var(--input-border-width);
+      background-color: var(--color-blue-grey25);
     }
   }
 
   .custom-select {
     position: relative;
     width: 100%;
-    min-height: calc(2.86rem - (2 * var(--input-border-width)));
-    padding: 0 variables.$form-element-horizontal-padding-mobile;
+    min-height: calc(2.625rem - (2 * var(--input-border-width)));
+    padding: 0 calc(variables.$form-element-horizontal-padding-mobile - var(--input-border-width));
     background-color: transparent;
-    border-color: var(--light-grey-border);
+    border-color: var(--color-blue-grey500);
     border-style: var(--input-border-style);
     border-width: var(--input-border-width);
     border-radius: var(--input-border-radius);
@@ -83,6 +81,10 @@ $listItemHeight: 2.125rem;
     &.error:focus {
       border-width: var(--input-border-width-focus);
     }
+
+    &.disabled {
+      border-color: var(--color-disabled);
+    }
   }
 
   .list-wrapper {
@@ -90,10 +92,12 @@ $listItemHeight: 2.125rem;
     border-style: var(--input-border-style);
     border-width: var(--input-border-width);
     border-radius: var(--input-border-radius);
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.29);
+    box-shadow: 0px 4px 5px 0px #01053233;
+    box-shadow: 0px 3px 14px 0px #0105321f;
+    box-shadow: 0px 8px 10px 0px #01053224;
     position: absolute;
     z-index: 11;
-    top: 0;
+    top: 44px;
     left: 0;
     width: 100%;
     overflow: auto;
@@ -112,8 +116,8 @@ $listItemHeight: 2.125rem;
     max-height: calc($listItemHeight * 10);
 
     li {
-      padding: 0.5rem 1rem;
-      font-size: var(--font-size);
+      padding: 0.5rem 0.75rem;
+      font-size: var(--form-control-font-size);
       margin: 0;
       position: relative;
       line-height: var(--default-line-height);
@@ -131,14 +135,19 @@ $listItemHeight: 2.125rem;
       }
 
       &:focus {
-        outline: 1px solid var(--color-primary);
-        outline-offset: -1px;
+        outline: var(--input-border-width-focus) solid var(--color-primary300);
+        outline-offset: -var(--input-border-width-focus);
       }
 
-      &:hover:after {
+      &:hover:after,
+      &:active:after {
         background-color: var(--color-primary);
       }
 
+      &:active:after {
+        opacity: 0.1;
+      }
+
       &.disabled {
         color: var(--greyed-out);
         background-color: var(--disabled);
@@ -154,11 +163,12 @@ $listItemHeight: 2.125rem;
     position: absolute;
     top: 0;
     left: 0;
-    background-color: var(--color-primary);
-    width: 100%;
     height: 100%;
-    opacity: 0.1;
+    border-top-right-radius: 0.125rem;
+    border-bottom-right-radius: 0.125rem;
+    border-left: 0.25rem solid var(--color-primary);
   }
+  color: var(--color-primary);
 }
 
 .selected {
@@ -171,7 +181,7 @@ $listItemHeight: 2.125rem;
 .status {
   position: absolute;
   top: 50%;
-  right: 1.625rem;
+  right: 0.8125rem;
   transform: translateY(-50%);
   display: flex;
   align-items: center;
@@ -186,7 +196,7 @@ $listItemHeight: 2.125rem;
     font-size: 1.25rem;
   }
 
-  .triangle-down {
+  .chevron-icon {
     color: var(--default);
     font-size: 0.625rem;
   }
@@ -200,11 +210,8 @@ $listItemHeight: 2.125rem;
   color: var(--greyed-out);
 }
 
-.select-search-wrapper + ul {
-  border-radius: 0 0 var(--input-border-radius) var(--input-border-radius);
-}
-
 .select-search {
+  position: relative;
   width: 100%;
   box-sizing: border-box;
   border-bottom-left-radius: 0;
@@ -214,7 +221,7 @@ $listItemHeight: 2.125rem;
 .disabled {
   cursor: not-allowed;
   color: var(--greyed-out);
-  background-color: var(--disabled);
+  background-color: var(--color-blue-grey25);
 
   > * {
     pointer-events: none;
@@ -224,16 +231,14 @@ $listItemHeight: 2.125rem;
 @media only screen and (min-width: 30em) {
   .select {
     .custom-select {
-      padding: 0 variables.$form-element-horizontal-padding-desktop;
+      padding: 0
+        calc(variables.$form-element-horizontal-padding-desktop - var(--input-border-width));
     }
 
     &:not(.expanded) {
       button:focus:not(.error) {
         padding: 0
-          calc(
-            variables.$form-element-horizontal-padding-desktop - var(--input-border-width-focus) +
-              var(--input-border-width)
-          );
+          calc(variables.$form-element-horizontal-padding-desktop - var(--input-border-width-focus));
       }
     }
   }

package/src/components/Form/Select/Select.test.tsx

@@ -126,7 +126,7 @@ describe("Select should render", () => {
       success: true
     }));
 
-    const icon = button.querySelector("[class*='icon-checkmark-circle-breakout']");
+    const icon = button.querySelector("[class*='icon-checkmark-circle-alt']");
     expect(button).toHaveClass("success");
     expect(icon).toBeDefined();
   });
@@ -207,20 +207,75 @@ describe("Selecting options using keyboard", () => {
 
     await userEvent.keyboard("{arrowdown}");
 
-    expect(select.querySelector('li[data-value="option3"]')).toHaveFocus();
+    expect(select.querySelector('li[data-value="option2"]')).toHaveFocus();
 
     await userEvent.keyboard("{arrowup}");
     await userEvent.keyboard("{arrowup}");
     await userEvent.keyboard("{arrowup}");
     await userEvent.keyboard("{arrowup}");
 
-    expect(select.querySelector('li[data-value="option16"]')).toHaveFocus();
+    expect(select.querySelector('li[data-value="option15"]')).toHaveFocus();
+    await userEvent.keyboard("{arrowup}");
+    expect(select.querySelector('li[data-value="option14"]')).toHaveFocus();
+
+    await userEvent.keyboard("{arrowdown}");
+    await userEvent.keyboard("{arrowdown}");
+    await userEvent.keyboard("{arrowdown}");
+    await userEvent.keyboard("{arrowdown}");
+
+    expect(select.querySelector('li[data-value="option1"]')).toHaveFocus();
+
+    await userEvent.keyboard("{escape}");
+
+    expect(button).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("should focus through list items and select on spacebar press", async () => {
+    const onChangeHandler = jest.fn();
+    const { select, button } = createSelect(defaultParams => ({
+      ...defaultParams,
+      onChange: onChangeHandler
+    }));
+
+    await act(() => {
+      button.focus();
+    });
+
+    expect(button).toHaveFocus();
+
+    await userEvent.keyboard("[Space]");
+
+    expect(button).toHaveAttribute("aria-expanded", "true");
+
+    await userEvent.keyboard("{arrowdown}");
+    await userEvent.keyboard("{arrowdown}");
+    await userEvent.keyboard("[Space]");
+
+    await waitFor(() => expect(button).toHaveAttribute("aria-expanded", "false"));
+
+    expect(onChangeHandler).toHaveBeenCalled();
+
+    await userEvent.keyboard("[Space]");
+
+    expect(button).toHaveAttribute("aria-expanded", "true");
+
+    await userEvent.keyboard("{arrowdown}");
+
+    expect(select.querySelector('li[data-value="option2"]')).toHaveFocus();
+
     await userEvent.keyboard("{arrowup}");
+    await userEvent.keyboard("{arrowup}");
+    await userEvent.keyboard("{arrowup}");
+    await userEvent.keyboard("{arrowup}");
+
     expect(select.querySelector('li[data-value="option15"]')).toHaveFocus();
+    await userEvent.keyboard("{arrowup}");
+    expect(select.querySelector('li[data-value="option14"]')).toHaveFocus();
 
     await userEvent.keyboard("{arrowdown}");
     await userEvent.keyboard("{arrowdown}");
     await userEvent.keyboard("{arrowdown}");
+    await userEvent.keyboard("{arrowdown}");
 
     expect(select.querySelector('li[data-value="option1"]')).toHaveFocus();
 
@@ -266,7 +321,7 @@ describe("List expansion", () => {
       await userEvent.click(button);
     }
 
-    expect(dropdownWrapper).toHaveStyle({ bottom: "0px" });
+    expect(dropdownWrapper).toHaveStyle({ bottom: "2.75rem" });
   });
 
   it("should expand downwards with a max height set", async () => {
@@ -304,7 +359,7 @@ describe("List expansion", () => {
     await userEvent.click(button);
 
     expect(dropdownWrapper).toHaveStyle({ maxHeight: "474px" });
-    expect(dropdownWrapper).toHaveStyle({ top: "0px" });
+    expect(dropdownWrapper).toHaveStyle({ top: "2.75rem" });
   });
 });
 
@@ -319,7 +374,7 @@ describe("previously selected item", () => {
       button.focus();
     });
 
-    const option2 = select.querySelector('li[data-value="option2"]')!;
+    const option1 = select.querySelector('li[data-value="option1"]')!;
 
     await userEvent.keyboard("{enter}");
 
@@ -330,7 +385,7 @@ describe("previously selected item", () => {
 
     await userEvent.click(button);
 
-    expect(document.activeElement).toStrictEqual(option2);
+    expect(document.activeElement).toStrictEqual(option1);
   });
 });
 
@@ -392,6 +447,18 @@ describe("search input", () => {
     expect(button).toHaveAttribute("aria-expanded", "true");
   });
 
+  it("expand list with arrowup", async () => {
+    const { button } = createSelect();
+
+    await act(() => {
+      button.focus();
+    });
+
+    await userEvent.keyboard("{arrowup}");
+
+    expect(button).toHaveAttribute("aria-expanded", "true");
+  });
+
   it("expand list with space", async () => {
     const { button } = createSelect();
 
@@ -463,3 +530,35 @@ describe("search input props work", () => {
     expect(document.querySelector(".test-wrapper-classname")).toBeInTheDocument();
   });
 });
+
+describe("meta arrow left and right", () => {
+  it("goes to the last item in the list when pressing meta right", async () => {
+    const { button } = createSelect();
+
+    await act(() => {
+      button.focus();
+    });
+
+    await userEvent.keyboard("{enter}");
+
+    expect(button).toHaveAttribute("aria-expanded", "true");
+
+    await userEvent.keyboard("{Meta>}{arrowright}");
+
+    await waitFor(() => expect(document.querySelector('li[data-value="option17"]')).toHaveFocus());
+  });
+
+  it("goes to the first item in the list when pressing meta left", async () => {
+    const { button } = createSelect();
+
+    await userEvent.click(button);
+
+    await userEvent.keyboard("{Meta>}{arrowright}");
+
+    await waitFor(() => expect(document.querySelector('li[data-value="option17"]')).toHaveFocus());
+
+    await userEvent.keyboard("{Meta>}{arrowleft}");
+
+    expect(document.querySelector('li[data-value="option1"]')).toHaveFocus();
+  });
+});