@onewelcome/react-lib-components 2.2.0 → 3.0.0

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

@@ -49,6 +49,7 @@ export interface Props extends ComponentPropsWithRef<"select">, FormElement {
   className?: string;
   value: string;
   clearLabel?: string;
+  noResultsLabel?: string;
   onChange?: (event: React.ChangeEvent<HTMLSelectElement>, child?: ReactElement) => void;
 }
 
@@ -71,6 +72,7 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
     success = false,
     value,
     clearLabel = "Clear selection",
+    noResultsLabel = "No results found",
     onChange,
     ...rest
   }: Props,
@@ -87,10 +89,21 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
     useState(
       false
     ); /** We need this, because whenever we use the arrow keys to select the select item, and we focus the currently selected item it fires the "click" listener in Option component. Instead, we only want this to fire if we press "enter" or "spacebar" so we set this to true whenever that is the case, and back to false when it has been executed. */
+  const [shouldFocusButtonAfterClose, setShouldFocusButtonAfterClose] = useState(false);
   const [childrenCount] = useState(React.Children.count(children));
 
   const nativeSelect = (ref as React.RefObject<HTMLSelectElement>) || createRef();
   const searchInputRef = useRef<HTMLInputElement>(null);
+
+  const onOptionChangeHandler = (optionElement: HTMLElement | null) => {
+    if (nativeSelect.current && optionElement) {
+      nativeSelect.current.value = optionElement.getAttribute("data-value")!;
+      nativeSelect.current.dispatchEvent(new Event("change", { bubbles: true }));
+    }
+
+    setExpanded(false);
+  };
+
   const customSelectButtonRef = useRef<HTMLButtonElement>(null);
   const { onArrowNavigation } = useArrowNavigation({
     expanded,
@@ -98,8 +111,8 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
     isSearching,
     setIsSearching,
     setFocusedSelectItem,
+    onOptionChangeHandler,
     childrenCount,
-    customSelectButtonRef,
     setShouldClick,
     searchInputRef,
     renderSearchCondition
@@ -116,17 +129,6 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
     });
   };
 
-  const onOptionChangeHandler = (optionRef: React.RefObject<HTMLLIElement>) => {
-    if (nativeSelect.current && optionRef.current) {
-      nativeSelect.current.value = optionRef.current.getAttribute("data-value")!;
-      nativeSelect.current.dispatchEvent(new Event("change", { bubbles: true }));
-    }
-
-    setExpanded(false);
-
-    customSelectButtonRef.current?.focus();
-  };
-
   /**
    * @description We have to modify the children (Option component) to have a additional props that allows us to keep track of which one is selected and focused at all times and if a filter is active.
    * The `children` prop can be either a single object (1 child) or an array of multiple children.
@@ -138,6 +140,12 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
           (child as ReactElement).props.children.toLowerCase().match(filter.toLowerCase()) !== null
       );
 
+      const internalChildren = _internalRenderChildren(filteredChildren as ReactElement[]);
+
+      if (internalChildren.length === 0) {
+        return <li className={classes["no-results"]}>{noResultsLabel}</li>;
+      }
+
       return _internalRenderChildren(filteredChildren as ReactElement[]);
     }
 
@@ -146,9 +154,11 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
     function _internalRenderChildren(internalChildren: ReactElement[]) {
       return React.Children.map(internalChildren, (child, index) => {
         return React.cloneElement(child, {
-          onFocusChange: (childIndex: number) => setFocusedSelectItem(childIndex),
+          onFocusChange: (childIndex: number) => {
+            setFocusedSelectItem(childIndex);
+          },
           onOptionSelect: (optionRef: React.RefObject<HTMLLIElement>) => {
-            onOptionChangeHandler(optionRef);
+            onOptionChangeHandler(optionRef.current);
             setShouldClick(false);
           },
           isSelected: child.props.value === value,
@@ -162,17 +172,22 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
     }
   };
 
+  const shouldRenderSearch =
+    expanded && Array.isArray(children) && children.length > renderSearchCondition;
+
   const renderSearch = () => (
     <Input
       {...searchInputProps}
-      autoFocus
       ref={searchInputRef}
       onFocus={() => setIsSearching(true)}
       onBlur={() => setIsSearching(false)}
       onChange={filterResults}
       className={classes["select-search"]}
       wrapperProps={{
-        className: `${classes["select-search-wrapper"]} ${searchInputProps?.wrapperProps?.className}`
+        className: searchInputProps?.wrapperProps?.className
+      }}
+      style={{
+        display: expanded ? "block" : "none"
       }}
       type="text"
       name="search-option"
@@ -180,6 +195,14 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
     />
   );
 
+  const renderChevronIcon = () => {
+    return expanded ? (
+      <Icon className={classes["chevron-icon"]} icon={Icons.ChevronUp} />
+    ) : (
+      <Icon className={classes["chevron-icon"]} icon={Icons.ChevronDown} />
+    );
+  };
+
   const filterResults = (event: React.ChangeEvent<HTMLInputElement>) => {
     setFilter(event.currentTarget.value);
   };
@@ -190,6 +213,18 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
     onChange?.(event);
   };
 
+  useEffect(() => {
+    if (expanded) {
+      setFocusedSelectItem(0);
+      setShouldFocusButtonAfterClose(true);
+    }
+
+    if (!expanded && customSelectButtonRef.current && shouldFocusButtonAfterClose) {
+      customSelectButtonRef.current.focus();
+      setShouldFocusButtonAfterClose(false);
+    }
+  }, [expanded, customSelectButtonRef.current, shouldFocusButtonAfterClose]);
+
   useEffect(() => {
     syncDisplayValue(value);
   }, [value]);
@@ -236,6 +271,7 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
           className ?? ""
         }`}
       >
+        {Array.isArray(children) && children.length > renderSearchCondition && renderSearch()}
         <button
           {...selectButtonProps}
           onClick={() => {
@@ -245,6 +281,7 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
           type="button"
           name={name}
           className={`${classes["custom-select"]} ${additionalClasses.join(" ")} `}
+          style={{ display: shouldRenderSearch ? "none" : "initial" }}
           disabled={disabled}
           aria-disabled={disabled}
           aria-invalid={error}
@@ -257,11 +294,9 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
             {!value && placeholder && <span className={classes["placeholder"]}>{placeholder}</span>}
             {value?.length > 0 && <span data-display-inner>{display}</span>}
           </div>
-          <div className={classes["status"]}>
-            {icon}
-            <Icon className={classes["triangle-down"]} icon={Icons.TriangleDown} />
-          </div>
+          <div className={classes["status"]}>{icon || renderChevronIcon()}</div>
         </button>
+
         <div
           ref={optionListReference}
           className={`list-wrapper ${classes["list-wrapper"]}`}
@@ -273,7 +308,6 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
             ...listPosition
           }}
         >
-          {Array.isArray(children) && children.length > renderSearchCondition && renderSearch()}
           <ul role="listbox">{renderOptions()}</ul>
         </div>
       </div>

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