@onewelcome/react-lib-components 2.3.0 → 3.0.1

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

@@ -27,8 +27,8 @@ export const useArrowNavigation = ({
   isSearching,
   setIsSearching,
   setFocusedSelectItem,
+  onOptionChangeHandler,
   childrenCount,
-  customSelectButtonRef,
   setShouldClick,
   searchInputRef,
   renderSearchCondition
@@ -45,7 +45,14 @@ export const useArrowNavigation = ({
       "Home"
     ];
 
-    const codesToPreventDefaultWhenSearching = ["ArrowDown", "ArrowUp", "Enter", "Escape"];
+    const codesToPreventDefaultWhenSearching = [
+      "ArrowDown",
+      "ArrowUp",
+      "Enter",
+      "Escape",
+      "MetaLeft",
+      "MetaRight"
+    ];
 
     /** If the select is expanded, we also want to control the Tab key */
     if (expanded) {
@@ -53,7 +60,7 @@ export const useArrowNavigation = ({
     }
 
     /** We will handle the way certain key strokes affect the Select, unless we're searching */
-    if (codesToPreventDefault.includes(event.code) && !isSearching) {
+    if (codesToPreventDefault.includes(event.code) && !event.metaKey && !isSearching) {
       event.preventDefault();
     }
 
@@ -76,13 +83,13 @@ export const useArrowNavigation = ({
         case "Tab":
           setIsSearching(false);
           setExpanded(false);
-          customSelectButtonRef.current?.focus();
       }
     } else {
       switch (event.code) {
         case "ArrowDown":
           if (!expanded) {
             setExpanded(true);
+            setFocusedSelectItem(0);
             return;
           }
           setFocusedSelectItem(prevState => {
@@ -90,6 +97,12 @@ export const useArrowNavigation = ({
           });
           return;
         case "ArrowUp":
+          if (!expanded) {
+            setExpanded(true);
+            setFocusedSelectItem(childrenCount - 1);
+            return;
+          }
+
           setFocusedSelectItem(prevState => {
             return prevState - 1 < 0 ? childrenCount - 1 : prevState - 1;
           });
@@ -97,12 +110,19 @@ export const useArrowNavigation = ({
         case "Space":
           if (!expanded) {
             setExpanded(true);
+            setFocusedSelectItem(0);
             return;
           }
 
+          onOptionChangeHandler(event.target as HTMLElement);
           setShouldClick(true);
           setExpanded(false);
-          customSelectButtonRef.current?.focus();
+
+          return;
+        case "Enter":
+        case "Home":
+          setFocusedSelectItem(0);
+
           return;
         case "Tab":
           if (childrenCount >= renderSearchCondition && expanded) {
@@ -116,14 +136,22 @@ export const useArrowNavigation = ({
         case "Escape":
           if (expanded) {
             setExpanded(false);
-            customSelectButtonRef.current?.focus();
           }
           return;
         case "End":
           setFocusedSelectItem(childrenCount - 1);
           return;
-        case "Home":
-          setFocusedSelectItem(0);
+        case "ArrowLeft":
+          if (event.metaKey && expanded) {
+            event.preventDefault();
+            setFocusedSelectItem(0);
+          }
+          return;
+        case "ArrowRight":
+          if (event.metaKey && expanded) {
+            event.preventDefault();
+            setFocusedSelectItem(childrenCount - 1);
+          }
           return;
       }
     }
@@ -159,11 +187,11 @@ export const useSelectPositionList = ({
       window.innerHeight - containerReference.current.getBoundingClientRect().top;
 
     // Set position as if there's more space on the bottom
-    let position: Position = { top: 0, bottom: "initial" };
+    let position: Position = { top: "2.75rem", bottom: "initial" };
 
     // Set the position of the select
     if (spaceOnTopOfSelect > spaceOnBottomOfSelect) {
-      position = { top: "initial", bottom: 0 };
+      position = { top: "initial", bottom: "2.75rem" };
     }
 
     setListPosition(position);

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

@@ -28,6 +28,15 @@
     z-index: 1;
     top: 0.85rem;
     font-size: 1.25rem;
+
+    &:before {
+      font-size: 1.125rem;
+      height: 1.25rem;
+      width: 1.25rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
   }
 
   [data-icon-status="success"] {
@@ -42,21 +51,27 @@
 }
 
 .textarea {
-  padding: variables.$form-element-horizontal-padding-mobile 0.856em;
+  padding: variables.$form-element-vertical-padding-mobile
+    variables.$form-element-horizontal-padding-mobile;
   box-sizing: border-box;
   border: 0;
   border-radius: var(--input-border-radius);
   @include mixins.transition(all, 0.2s, ease-in-out);
   font-family: var(--font-family);
   font-size: var(--form-control-font-size);
-  color: var(--greyed-out);
-  width: 100%;
+  color: var(--color-blue-grey900);
   vertical-align: top;
   resize: vertical;
+  position: relative;
+  background-color: transparent;
+  z-index: 1;
+  /* making space for outline in text area when scroll bar is visible: width smaller and margin top & bottom to have space for border */
+  width: calc(100% - var(--input-border-width));
+  margin: var(--input-border-width) 0;
 
   &:disabled {
-    background-color: var(--disabled);
     cursor: not-allowed;
+    color: var(--greyed-out);
   }
 
   @include mixins.browserOutlineDisabled();
@@ -66,5 +81,4 @@
 
 .error {
   border-color: var(--error);
-  color: var(--error);
 }

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

@@ -118,7 +118,7 @@ describe("Error status", () => {
 describe("Success status", () => {
   it("success icon should be visible", () => {
     const { textarea } = createTextarea({ success: true });
-    const icon = textarea.parentElement?.querySelector(".icon-checkmark-circle-breakout");
+    const icon = textarea.parentElement?.querySelector(".icon-checkmark-circle-alt");
     expect(icon).toBeDefined();
   });
 });

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

@@ -22,6 +22,109 @@ $borderRadius: 2.5rem;
   display: flex;
   align-items: center;
   position: relative;
+
+  label {
+    margin-top: 0.0625rem;
+    white-space: nowrap;
+  }
+
+  &--left {
+    > div > div {
+      flex-direction: row-reverse;
+      position: relative;
+
+      input {
+        left: initial;
+        right: 0;
+      }
+
+      label {
+        margin-left: 0;
+        margin-right: 0.5rem;
+      }
+
+      + div {
+        margin-left: 0;
+      }
+    }
+  }
+
+  &--hide-label {
+    > div > div {
+      label {
+        display: none;
+      }
+
+      + div {
+        margin-left: 0;
+      }
+    }
+  }
+
+  &--wrap {
+    label {
+      white-space: normal;
+    }
+  }
+
+  &--neutral {
+    input:checked + span {
+      background-color: var(--color-blue-grey500);
+    }
+
+    input + span {
+      &:after {
+        color: var(--color-blue-grey500);
+      }
+    }
+  }
+
+  &--between {
+    width: 100%;
+
+    > div {
+      width: 100%;
+
+      > div {
+        justify-content: space-between;
+      }
+    }
+
+    &.toggle-wrapper--right {
+      > div > div {
+        + div {
+          margin-left: 0;
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  &--disabled {
+    input + span {
+      background-color: var(--color-blue-grey50);
+
+      &:before {
+        background-color: var(--color-blue-grey200);
+      }
+
+      &:after {
+        color: var(--color-blue-grey50);
+      }
+    }
+
+    input:checked + span {
+      background-color: var(--color-blue-grey200);
+
+      &:before {
+        background-color: var(--color-blue-grey50);
+      }
+
+      &:after {
+        color: var(--color-blue-grey200);
+      }
+    }
+  }
 }
 
 .toggle {
@@ -49,15 +152,32 @@ $borderRadius: 2.5rem;
     @include mixins.transition(transform, 0.2s, ease-in-out);
   }
 
+  &:after {
+    content: "\e927";
+    font-family: "icomoon";
+    position: absolute;
+    font-size: 0.4375rem;
+    top: 47%;
+    left: 0.4rem;
+    transform: translateY(-50%) translateX(0);
+    color: var(--color-primary);
+    @include mixins.transition(transform, 0.2s, ease-in-out);
+  }
+
   &.checked {
     background-color: var(--color-primary);
+
     &:before {
       transform: translateY(-50%) translateX(calc(100% - 0.25rem));
     }
+
+    &:after {
+      transform: translateY(-50%) translateX(calc(170%));
+      content: "\e938";
+    }
   }
 
   &.disabled {
-    background-color: var(--disabled);
     cursor: not-allowed;
   }
 }
@@ -69,6 +189,10 @@ $borderRadius: 2.5rem;
 .checkbox {
   z-index: 10;
   position: static;
+  & > div:first-child {
+    display: flex;
+    align-items: flex-start;
+  }
 
   input {
     width: 2rem;
@@ -81,6 +205,8 @@ $borderRadius: 2.5rem;
   input:focus-visible {
     + * {
       border-radius: $borderRadius;
+      outline-offset: 0.125rem;
+      outline-width: 0.125rem;
     }
   }
 }

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

@@ -32,10 +32,16 @@ const createToggle = (params?: (defaultParams: Props) => Props) => {
   }
   const queries = render(<Toggle {...parameters} data-testid="toggle"></Toggle>);
   const toggle = queries.getByTestId("toggle");
+  const toggleWrapper = toggle.closest(".toggle-wrapper");
+
+  if (!toggleWrapper) {
+    throw new Error("toggleWrapper is null");
+  }
 
   return {
     ...queries,
-    toggle
+    toggle,
+    toggleWrapper
   };
 };
 
@@ -97,3 +103,98 @@ describe("helperProps should be properly propagated down", () => {
     expect(helperTextAnchor).toBeTruthy();
   });
 });
+
+describe("All the props", () => {
+  it("should have toggle-wrapper--left class", () => {
+    const { toggleWrapper } = createToggle(defaultParams => ({
+      ...defaultParams,
+      labelPosition: "left"
+    }));
+
+    expect(toggleWrapper).toHaveClass("toggle-wrapper--left");
+  });
+
+  it("should have toggle-wrapper--right class", () => {
+    const { toggleWrapper } = createToggle(defaultParams => ({
+      ...defaultParams,
+      labelPosition: "right"
+    }));
+
+    expect(toggleWrapper).toHaveClass("toggle-wrapper--right");
+  });
+
+  it("should have toggle-wrapper--hide-label class", () => {
+    const { toggleWrapper } = createToggle(defaultParams => ({
+      ...defaultParams,
+      hideLabel: true
+    }));
+
+    expect(toggleWrapper).toHaveClass("toggle-wrapper--hide-label");
+  });
+
+  it("should have toggle-wrapper--nowrap class", () => {
+    const { toggleWrapper } = createToggle(defaultParams => ({
+      ...defaultParams,
+      labelOverflow: "nowrap"
+    }));
+
+    expect(toggleWrapper).toHaveClass("toggle-wrapper--nowrap");
+  });
+
+  it("should have toggle-wrapper--wrap class", () => {
+    const { toggleWrapper } = createToggle(defaultParams => ({
+      ...defaultParams,
+      labelOverflow: "wrap"
+    }));
+
+    expect(toggleWrapper).toHaveClass("toggle-wrapper--wrap");
+  });
+
+  it("should have toggle-wrapper--emphasis class", () => {
+    const { toggleWrapper } = createToggle(defaultParams => ({
+      ...defaultParams,
+      version: "emphasis"
+    }));
+
+    expect(toggleWrapper).toHaveClass("toggle-wrapper--emphasis");
+  });
+
+  it("should have toggle-wrapper--neutral class", () => {
+    const { toggleWrapper } = createToggle(defaultParams => ({
+      ...defaultParams,
+      version: "neutral"
+    }));
+
+    expect(toggleWrapper).toHaveClass("toggle-wrapper--neutral");
+  });
+
+  it("should have toggle-wrapper--packed class", () => {
+    const { toggleWrapper } = createToggle(defaultParams => ({
+      ...defaultParams,
+      spacing: "packed"
+    }));
+
+    expect(toggleWrapper).toHaveClass("toggle-wrapper--packed");
+  });
+
+  it("should have toggle-wrapper--between class", () => {
+    const { toggleWrapper } = createToggle(defaultParams => ({
+      ...defaultParams,
+      spacing: "between"
+    }));
+
+    expect(toggleWrapper).toHaveClass("toggle-wrapper--between");
+  });
+
+  it("should have toggle-wrapper--disabled class", () => {
+    const { toggleWrapper } = createToggle(defaultParams => ({ ...defaultParams, disabled: true }));
+
+    expect(toggleWrapper).toHaveClass("toggle-wrapper--disabled");
+  });
+
+  it("should have a label", () => {
+    const { getByText } = createToggle();
+
+    expect(getByText("Label")).toBeTruthy();
+  });
+});

package/src/components/Form/Toggle/Toggle.tsx

@@ -22,14 +22,38 @@ export interface Props
   extends ComponentPropsWithRef<"input">,
     Omit<CheckboxProps, "indeterminate" | "errorMessage" | "error" | "label"> {
   label?: string | React.ReactElement;
+  labelPosition?: "left" | "right";
+  hideLabel?: boolean;
+  labelOverflow?: "wrap" | "nowrap";
+  version?: "emphasis" | "neutral";
+  spacing?: "packed" | "between";
 }
 
 const ToggleComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
-  { checked, disabled, helperProps, className, label, ...rest }: Props,
+  {
+    checked,
+    disabled,
+    helperProps,
+    className,
+    label,
+    labelPosition = "right",
+    hideLabel = false,
+    labelOverflow = "nowrap",
+    version = "emphasis",
+    spacing = "packed",
+    ...rest
+  }: Props,
   ref
 ) => {
   const classNames = [classes["toggle-wrapper"]];
   className && classNames.push(className);
+  classNames.push(classes[`toggle-wrapper--${labelPosition}`]);
+  hideLabel && classNames.push(classes["toggle-wrapper--hide-label"]);
+  classNames.push(classes[`toggle-wrapper--${labelOverflow}`]);
+  classNames.push(classes[`toggle-wrapper--${version}`]);
+  classNames.push(classes[`toggle-wrapper--${spacing}`]);
+  disabled && classNames.push(classes["toggle-wrapper--disabled"]);
+
   return (
     <div className={classNames.join(" ")}>
       <Checkbox

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?5b3j0w");
-  src: url("../../font/icomoon.eot?5b3j0w#iefix") format("embedded-opentype"),
-    url("../../font/icomoon.ttf?5b3j0w") format("truetype"),
-    url("../../font/icomoon.woff?5b3j0w") 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,13 +317,11 @@
   content: "\e93f";
   @include fontProperties();
 }
-
-.icon-eye-blocked:before {
-  content: "\e9d1";
+.icon-error-circle:before {
+  content: "\e944";
   @include fontProperties();
 }
-
-.icon-home-filled:before {
-  content: "\e940";
+.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",

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

@@ -55,22 +55,20 @@ $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);
+  height: auto;
+  max-height: calc(90% - $marginTop);
   display: flex;
   flex-direction: column;
 }
 
 @media only screen and (min-width: 50em) {
   .container {
-    margin-top: $marginTop;
     width: 50rem;
-    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

@@ -128,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 ?? ""}`}
@@ -138,6 +139,7 @@ const BaseModalComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
             open && (
               <div
                 {...containerProps}
+                data-element="dialog"
                 style={{ zIndex: zIndex && zIndex + 1 }}
                 className={`${classes["container"]} ${containerProps?.className ?? ""}`}
               >