@onewelcome/react-lib-components 4.1.1 → 4.3.0

package/src/components/ContextMenu/ContextMenuService.ts

@@ -0,0 +1,125 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import { Placement, Offset, vertical, horizontal } from "../../hooks/usePosition";
+import { remToPx } from "../../util/helper";
+
+interface UseArrowNavigation {
+  selectedContextMenuItem: number;
+  setSelectedContextMenuItem: React.Dispatch<React.SetStateAction<number>>;
+  focusedContextMenuItem: number;
+  setFocusedContextMenuItem: React.Dispatch<React.SetStateAction<number>>;
+  showContextMenu: boolean;
+  setShowContextMenu: React.Dispatch<React.SetStateAction<boolean>>;
+  childrenCount: number;
+  setShouldClick: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const useArrowNavigation = ({
+  selectedContextMenuItem,
+  setSelectedContextMenuItem,
+  focusedContextMenuItem,
+  setFocusedContextMenuItem,
+  showContextMenu,
+  setShowContextMenu,
+  childrenCount,
+  setShouldClick
+}: UseArrowNavigation) => {
+  const onArrowNavigation = (event: React.KeyboardEvent) => {
+    if (focusedContextMenuItem === -1 && selectedContextMenuItem !== -1) {
+      setFocusedContextMenuItem(selectedContextMenuItem);
+    }
+
+    const codesToPreventDefault = [
+      "ArrowDown",
+      "ArrowUp",
+      "ArrowLeft",
+      "ArrowRight",
+      "Enter",
+      "Space",
+      "Escape",
+      "End",
+      "Home"
+    ];
+
+    if (codesToPreventDefault.includes(event.code)) {
+      event.preventDefault();
+    }
+
+    switch (event.code) {
+      case "ArrowDown":
+        if (!showContextMenu) {
+          setShowContextMenu(true);
+          return;
+        }
+        setFocusedContextMenuItem(prevState => {
+          return prevState + 1 > childrenCount - 1 ? 0 : prevState + 1;
+        });
+        return;
+      case "ArrowUp":
+        setFocusedContextMenuItem(prevState => {
+          return prevState - 1 < 0 ? childrenCount - 1 : prevState - 1;
+        });
+        return;
+      case "Enter":
+      case "Space":
+        if (!showContextMenu) {
+          setShowContextMenu(true);
+          return;
+        }
+
+        setShouldClick(true);
+        setSelectedContextMenuItem(focusedContextMenuItem);
+        setShowContextMenu(false);
+        return;
+      case "Tab":
+      case "Escape":
+        setShowContextMenu(false);
+        return;
+      case "End":
+        setFocusedContextMenuItem(childrenCount - 1);
+        return;
+      case "Home":
+        setFocusedContextMenuItem(0);
+        return;
+    }
+  };
+
+  return { onArrowNavigation };
+};
+
+const defaultOffsetSpacing = remToPx(0.25);
+
+export const useDefaultOffset = () => {
+  const calculateDefaultOffset = (placement: Placement, transformOrigin: Placement): Offset => {
+    const offset = { left: 0, right: 0, top: 0, bottom: 0 };
+    if (placement.vertical === vertical.BOTTOM && transformOrigin.vertical === vertical.TOP) {
+      offset.top = defaultOffsetSpacing;
+    } else if (
+      placement.vertical === vertical.TOP &&
+      transformOrigin.vertical === vertical.BOTTOM
+    ) {
+      offset.top = -defaultOffsetSpacing;
+    }
+
+    if (placement.horizontal === horizontal.RIGHT) {
+      offset.left = defaultOffsetSpacing;
+    }
+    return offset;
+  };
+
+  return { calculateDefaultOffset };
+};

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

@@ -13,35 +13,36 @@
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
+@use "../../../mixins.module.scss";
 
 .checkbox-wrapper {
   position: relative;
 
   + .checkbox-wrapper {
-    margin-top: 1.25rem;
+    margin-top: 0.75rem;
   }
 }
 
 .checkbox-container {
   display: flex;
-  align-items: center;
 
   label {
     display: inline-block;
     margin-left: 0.5rem;
     user-select: none;
-    font-size: var(--font-size);
+    font-size: var(--font-size-form-label);
     font-family: var(--font-family);
+    margin-top: 0.1rem;
   }
 }
 
 .checkbox-list {
   padding: 0;
-  margin: 1.25rem 0 0 1.75rem;
+  margin: 1rem 0 0 1.75rem;
   list-style: none;
 
   li + li {
-    margin-top: 1.25rem;
+    margin-top: 0.75rem;
   }
 }
 
@@ -53,31 +54,82 @@
   margin: 0;
   width: 1.25rem;
   height: 1.25rem;
+  z-index: 2;
 
-  &:checked + * {
+  &:checked:not(.disabled) + * {
     color: var(--color-primary);
   }
 
   &:focus-visible {
     + * {
       border-radius: 2px;
-      outline: 1px solid var(--color-focus);
-      outline-offset: 1px;
+      outline: 2px solid var(--color-focus);
+      outline-offset: 2px;
     }
   }
 
+  &:active:not(.disabled) + span {
+    background-color: var(--disabled);
+  }
+
   &.error:focus-visible {
     + * {
       outline-color: var(--color-error);
     }
   }
+
+  & + span[data-icon="true"]:before {
+    display: block;
+    width: 20px;
+    height: 20px;
+  }
+
+  &:hover + .square:not(.disabled) {
+    background-color: var(--checkbox-unchecked-hover-color);
+  }
+
+  &:active + .square:not(.disabled) {
+    background-color: var(--checkbox-unchecked-pressed-color);
+  }
+
+  &:hover + .checkmark:not(.disabled),
+  &:active + .indeterminate:not(.disabled) {
+    color: var(--checkbox-checked-hover-color);
+  }
+
+  &:active + .checkmark:not(.disabled),
+  &:active + .indeterminate:not(.disabled) {
+    color: var(--checkbox-checked-pressed-color);
+  }
 }
 
 .input {
   font-size: 1.25rem;
-  pointer-events: none;
+  z-index: 1;
 }
 
 .disabled {
-  color: var(--disabled);
+  cursor: not-allowed;
+
+  & + span {
+    color: var(--disabled);
+    pointer-events: none;
+  }
+
+  & + label {
+    color: var(--greyed-out);
+  }
+
+  & + .checkmark,
+  & + .indeterminate {
+    color: var(--disabled);
+    background-color: var(--greyed-out);
+    border-radius: 2px;
+    outline: 1px var(--disabled) solid;
+    outline-offset: -1px;
+  }
+}
+
+.indeterminate {
+  color: var(--color-primary);
 }

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

@@ -149,7 +149,7 @@ describe("Checkbox should have proper attributes", () => {
 
     expect(checkbox).toHaveAttribute(
       "aria-describedby",
-      container.querySelector(".error-message span:last-of-type")!.id
+      container.querySelector(".error-message")!.id
     );
 
     expect(checkbox).toHaveAttribute("aria-invalid", "true");

package/src/components/Form/Checkbox/Checkbox.tsx

@@ -33,7 +33,7 @@ import { FormSelector } from "../form.interfaces";
 
 const isToggle = (children: ReactNode) => !!(children as ReactElement)?.props?.["data-toggle"];
 
-export interface Props extends ComponentPropsWithRef<"input">, FormSelector {
+export interface Props extends ComponentPropsWithRef<"input">, Omit<FormSelector, "success"> {
   label?: string | React.ReactElement;
   indeterminate?: boolean;
   helperProps?: FormHelperTextProps;
@@ -122,13 +122,17 @@ const CheckboxComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
 
   const renderToggle = () => React.Children.toArray(children).filter(isToggle);
 
-  const iconClasses = [classes["input"], disabled ? classes["disabled"] : ""];
+  const iconClasses = [classes["input"]];
+  const nativeInputClasses = [classes["native-input"]];
+  const wrapperClasses = [classes["checkbox-wrapper"]];
+  error && nativeInputClasses.push(classes["error"]);
+  disabled && nativeInputClasses.push(classes["disabled"]) && iconClasses.push(classes["disabled"]);
+  className && wrapperClasses.push(className);
 
-  /** Default return value is the default checkbox */
   return (
     <FormSelectorWrapper
       {...formSelectorWrapperProps}
-      className={`${classes["checkbox-wrapper"]} ${className ? className : ""}`}
+      className={wrapperClasses.join(" ")}
       containerProps={{ className: classes["checkbox-container"] }}
       helperText={helperText}
       helperProps={helperProps}
@@ -146,7 +150,7 @@ const CheckboxComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
         {...rest}
         ref={ref}
         disabled={disabled}
-        className={`${classes["native-input"]} ${error ? classes["error"] : ""}`}
+        className={nativeInputClasses.join(" ")}
         checked={checked}
         onChange={onChangeHandler}
         aria-invalid={error as boolean}
@@ -158,11 +162,21 @@ const CheckboxComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
       />
       {renderToggle()}
 
-      {indeterminate && <Icon className={iconClasses.join(" ")} icon={Icons.MinusSquare} />}
+      {indeterminate && (
+        <Icon
+          className={`${iconClasses.join(" ")} ${classes["indeterminate"]}`}
+          icon={Icons.MinusSquare}
+        />
+      )}
       {checked && !indeterminate && (
-        <Icon className={iconClasses.join(" ")} icon={Icons.CheckmarkSquare} />
+        <Icon
+          className={`${iconClasses.join(" ")} ${classes["checkmark"]}`}
+          icon={Icons.CheckmarkSquare}
+        />
+      )}
+      {!checked && !indeterminate && (
+        <Icon className={`${iconClasses.join(" ")} ${classes["square"]}`} icon={Icons.Square} />
       )}
-      {!checked && !indeterminate && <Icon className={iconClasses.join(" ")} icon={Icons.Square} />}
       <label htmlFor={`${identifier}-checkbox`}>{determineLabel()}</label>
     </FormSelectorWrapper>
   );

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

@@ -39,10 +39,6 @@
         content: " *";
       }
     }
-
-    &.error {
-      color: var(--error);
-    }
   }
 }
 @media only screen and (min-width: 30em) {

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

@@ -14,8 +14,11 @@
  *    limitations under the License.
  */
 
-.error {
-  color: var(--error);
+.error input + span {
+  outline: var(--error) solid 1px;
+  outline-offset: -1px;
+  border-radius: 2px;
+  overflow: hidden;
 }
 
 .helper-text {
@@ -24,14 +27,7 @@
 }
 
 .error-message {
-  margin-top: 1.25rem;
-  display: flex;
-  align-items: flex-end;
-}
-
-.error-icon {
-  margin-right: 0.5rem;
-  font-size: 1.25rem;
+  color: var(--error);
 }
 
 .disabled {

package/src/components/Form/FormSelectorWrapper/FormSelectorWrapper.tsx

@@ -20,7 +20,6 @@ import React, {
   createRef,
   ReactNode
 } from "react";
-import { Icon, Icons } from "../../Icon/Icon";
 import { KeyValuePair } from "../../../interfaces";
 import { FormSelector } from "../form.interfaces";
 import { FormHelperText, Props as FormHelperTextProps } from "../FormHelperText/FormHelperText";
@@ -65,7 +64,7 @@ const FormSelectorWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Pro
       }`}
     >
       <div {...containerProps}>{children}</div>
-      {(helperText || helperProps?.children) && (!error || parentErrorId || !errorMessage) && (
+      {(helperText || helperProps?.children) && (
         <FormHelperText
           {...helperProps}
           ref={helperRef}
@@ -74,15 +73,15 @@ const FormSelectorWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Pro
             error ? classes["error"] : ""
           }`}
         >
-          {helperProps?.children || helperText}
+          {error ? (
+            <span className={classes["error-message"]} id={errorId}>
+              {errorMessage}
+            </span>
+          ) : (
+            helperProps?.children || helperText
+          )}
         </FormHelperText>
       )}
-      {errorMessage && !parentErrorId && error && (
-        <span className={classes["error-message"]}>
-          <Icon className={classes["error-icon"]} icon={Icons.Error} />
-          <span id={errorId}>{errorMessage}</span>
-        </span>
-      )}
       {nestedChildren}
     </div>
   );

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

@@ -18,7 +18,7 @@
   position: relative;
 
   + .radio-wrapper {
-    margin-top: 1.25rem;
+    margin-top: 0.75rem;
   }
 }
 
@@ -34,7 +34,6 @@
 .error-message {
   margin-top: 1.25rem;
   display: flex;
-  align-items: bottom;
 }
 
 .error-icon {
@@ -44,14 +43,14 @@
 
 .radio-container {
   display: flex;
-  align-items: center;
 
   label {
     display: inline-block;
     margin-left: 0.5rem;
     user-select: none;
-    font-size: var(--font-size);
+    font-size: var(--font-size-form-label);
     font-family: var(--font-family);
+    margin-top: 0.15rem;
 
     .disabled & {
       cursor: not-allowed;
@@ -59,16 +58,6 @@
   }
 }
 
-.radio-list {
-  padding: 0;
-  margin: 1.25rem 0 0 1.75rem;
-  list-style: none;
-
-  li + li {
-    margin-top: 1.75rem;
-  }
-}
-
 .native-input {
   position: absolute;
   top: 0;
@@ -77,37 +66,74 @@
   margin: 0;
   width: 1.75rem;
   height: 1.75rem;
+  z-index: 2;
+
+  & + span[data-icon="true"]:before {
+    display: block;
+    width: 20px;
+    height: 20px;
+  }
 
   &:checked + * {
     color: var(--color-primary);
   }
 
-  &:disabled {
+  &:checked + *.disabled {
+    color: var(--disabled);
     cursor: not-allowed;
+    pointer-events: none;
   }
 
   &:focus-visible {
     + * {
-      border-radius: 2px;
-      outline: 1px solid var(--color-focus);
-      outline-offset: 1px;
+      border-radius: 100%;
+      outline: 2px solid var(--color-focus);
+      outline-offset: 2px;
     }
   }
 
-  &.error:focus-visible {
-    + * {
-      outline-color: var(--color-error);
-    }
+  &.error + * {
+    border-radius: 100%;
+  }
+
+  &.error:hover + .radio::before {
+    outline-color: var(--radio-hover-background-color);
+  }
+
+  &.error:active + .radio::before {
+    outline-color: var(--radio-pressed-background-color);
+  }
+
+  &:hover + .input.circle:not(.disabled) {
+    background-color: var(--radio-hover-background-color);
+  }
+
+  &:active + .input.circle:not(.disabled) {
+    background-color: var(--radio-pressed-background-color);
+  }
+
+  &:hover + .input.radio:not(.disabled) {
+    background-color: var(--radio-hover-background-color);
+    color: var(--radio-hover-color);
+  }
+
+  &:active + .input.radio:not(.disabled) {
+    color: var(--radio-pressed-color);
+    background-color: var(--radio-pressed-background-color);
   }
 }
 
 .input {
   font-size: 1.25rem;
-  pointer-events: none;
   width: 1.25rem;
   height: 1.25rem;
+  z-index: 1;
+  border-radius: 100%;
+
+  &:active {
+    border-radius: 100%;
+  }
 
-  /** The & behind disabled means parent selector (so in reality this means .disabled .input) */
   .disabled & {
     color: var(--disabled);
   }
@@ -115,4 +141,5 @@
 
 .disabled {
   color: var(--disabled);
+  pointer-events: none;
 }

package/src/components/Form/Radio/Radio.tsx

@@ -25,7 +25,7 @@ import {
   Props as FormSelectorWrapperProps
 } from "../FormSelectorWrapper/FormSelectorWrapper";
 
-export interface Props extends ComponentPropsWithRef<"input">, FormSelector {
+export interface Props extends ComponentPropsWithRef<"input">, Omit<FormSelector, "success"> {
   children: string;
   value: string;
   formSelectorWrapperProps?: FormSelectorWrapperProps;
@@ -77,7 +77,14 @@ const RadioComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
     onChange?.(clonedEvent);
   };
 
-  /** Default return value is the default radio */
+  const nativeInputClasses = [classes["native-input"]];
+  const checkedRadioClasses = [classes["input"], classes["radio"]];
+  const uncheckedRadioClasses = [classes["input"], classes["circle"]];
+  error && nativeInputClasses.push(classes["error"]);
+  disabled &&
+    checkedRadioClasses.push(classes["disabled"]) &&
+    uncheckedRadioClasses.push(classes["disabled"]);
+
   return (
     <FormSelectorWrapper
       {...formSelectorWrapperProps}
@@ -97,10 +104,9 @@ const RadioComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
         ref={ref}
         disabled={disabled}
         tabIndex={0}
-        className={`${classes["native-input"]} ${error ? classes["error"] : ""}`}
+        className={nativeInputClasses.join(" ")}
         onChange={onChangeHandler}
         checked={checked}
-        aria-invalid={error ? true : false}
         aria-checked={checked}
         aria-describedby={describedBy}
         name={name}
@@ -109,18 +115,8 @@ const RadioComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
         type="radio"
       />
 
-      {checked && (
-        <Icon
-          className={`${classes["input"]} ${disabled ? classes["disabled"] : ""}`}
-          icon={Icons.Radio}
-        />
-      )}
-      {!checked && (
-        <Icon
-          className={`${classes["input"]} ${disabled ? classes["disabled"] : ""}`}
-          icon={Icons.Circle}
-        />
-      )}
+      {checked && <Icon className={checkedRadioClasses.join(" ")} icon={Icons.Radio} />}
+      {!checked && <Icon className={uncheckedRadioClasses.join(" ")} icon={Icons.Circle} />}
 
       <label onClick={onChangeHandler} htmlFor={`${identifier}-radio`}>
         {children}

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

@@ -96,7 +96,7 @@ $listItemHeight: 2.125rem;
     box-shadow: 0px 3px 14px 0px #0105321f;
     box-shadow: 0px 8px 10px 0px #01053224;
     position: absolute;
-    z-index: 11;
+    z-index: variables.$select-z-index;
     top: 44px;
     left: 0;
     width: 100%;

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

@@ -15,6 +15,7 @@
  */
 
 @use "../../../mixins.module.scss";
+@use "../../../variables.scss";
 
 $borderRadius: 2.5rem;
 
@@ -24,7 +25,6 @@ $borderRadius: 2.5rem;
   position: relative;
 
   label {
-    margin-top: 0.0625rem;
     white-space: nowrap;
   }
 
@@ -187,7 +187,7 @@ $borderRadius: 2.5rem;
 }
 
 .checkbox {
-  z-index: 10;
+  z-index: variables.$toggle-z-index;
   position: static;
   & > div:first-child {
     display: flex;

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

@@ -26,7 +26,7 @@ import { Wrapper, WrapperProps } from "../Wrapper/Wrapper";
 import { Icons } from "../../../Icon/Icon";
 import { Fieldset, Props as FieldsetProps } from "../../../Form/Fieldset/Fieldset";
 
-export interface Props extends ComponentPropsWithRef<"div">, WrapperProps {
+export interface Props extends ComponentPropsWithRef<"div">, Omit<WrapperProps, "success"> {
   children: ReactElement[] | ReactElement;
   fieldsetProps: FieldsetProps;
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
@@ -80,4 +80,7 @@ const CheckboxWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props>
   );
 };
 
+/**
+ * @deprecated
+ */
 export const CheckboxWrapper = React.forwardRef(CheckboxWrapperComponent);

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

@@ -20,6 +20,7 @@ import { render } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 const defaultParams: Props = {
+  success: false,
   label: "Example label",
   type: "text",
   name: "Example input",

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

@@ -31,6 +31,7 @@ export interface Props extends ComponentPropsWithRef<"div">, WrapperProps {
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
   onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  success?: boolean;
 }
 
 const InputWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (

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

@@ -24,5 +24,5 @@
 
 .radio-wrapper-error [data-icon] {
   font-size: 1.25rem;
-  vertical-align: bottom;
+  vertical-align: text-bottom;
 }