@onewelcome/react-lib-components 0.2.5 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onewelcome/react-lib-components",
-  "version": "0.2.5",
+  "version": "0.3.0",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/index.js",

package/src/ContextMenu/ContextMenu.module.scss

@@ -11,7 +11,15 @@
   padding: 0;
   min-width: 200px;
 
+  &.no-margin-top {
+    margin: 0 0 1rem;
+  }
+
   button {
     text-align: left;
   }
 }
+
+.decorative-element {
+  margin-top: 1rem;
+}

package/src/ContextMenu/ContextMenu.test.tsx

@@ -88,6 +88,16 @@ describe("ContextMenu should render", () => {
     expect(child.parentElement).toHaveClass("custom");
   });
 
+  it("renders the decorative element", () => {
+    const { getByText } = createContextMenu(defaultParams => ({
+      ...defaultParams,
+      show: true,
+      decorativeElement: <div>test</div>
+    }));
+
+    expect(getByText("test")).toBeInTheDocument();
+  });
+
   it("should throw an error", () => {
     // Prevent throwing an error in the console when this test is executed. We fix this and the end of this test.
     const err = console.error;
@@ -252,4 +262,37 @@ describe("accessibility controls", () => {
 
     expect(thirdContextMenuItem).toHaveFocus();
   });
+
+  it("opens correctly with enter, navigate with arrow keys skipping the decorative element", () => {
+    onClick.mockImplementation(e => {
+      expect(e.target.getAttribute("data-testid")).toBe("contextmenuitem3");
+    });
+
+    const { trigger, getByTestId, getByText } = createContextMenu(defaultParams => ({
+      ...defaultParams,
+      decorativeElement: <div>test</div>
+    }));
+    const thirdContextMenuItem = getByTestId("contextmenuitem3");
+
+    userEvent.tab();
+    userEvent.keyboard("{enter}");
+
+    expect(getByText("test")).toBeInTheDocument();
+
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+
+    userEvent.keyboard("{arrowdown}");
+    userEvent.keyboard("{arrowdown}");
+    userEvent.keyboard("{arrowdown}");
+
+    expect(thirdContextMenuItem).toHaveFocus();
+
+    userEvent.keyboard("{space}");
+
+    expect(onClick).toHaveBeenCalled();
+
+    userEvent.keyboard("{space}");
+
+    expect(thirdContextMenuItem).toHaveFocus();
+  });
 });

package/src/ContextMenu/ContextMenu.tsx

@@ -16,6 +16,7 @@ import { createPortal } from "react-dom";
 
 export interface Props extends ComponentPropsWithRef<"div"> {
   trigger: ReactElement<ButtonProps> | ReactElement<IconButtonProps>;
+  decorativeElement?: ReactNode;
   children: ReactNode;
   placement?: Placement;
   transformOrigin?: Placement;
@@ -32,6 +33,7 @@ export const ContextMenu = React.forwardRef<HTMLDivElement, Props>(
     {
       trigger,
       children,
+      decorativeElement,
       id,
       show = false,
       onShow,
@@ -183,7 +185,15 @@ export const ContextMenu = React.forwardRef<HTMLDivElement, Props>(
             anchorEl={anchorEl}
             show={showContextMenu}
           >
-            <ul className={classes["menu"]} id={`${id}-menu`} aria-describedby={id} role="menu">
+            {decorativeElement && (
+              <div className={classes["decorative-element"]}>{decorativeElement}</div>
+            )}
+            <ul
+              className={`${classes["menu"]} ${decorativeElement ? classes["no-margin-top"] : ""}`}
+              id={`${id}-menu`}
+              aria-describedby={id}
+              role="menu"
+            >
               {renderChildren()}
             </ul>
           </Popover>,

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

@@ -24,6 +24,7 @@
   box-sizing: border-box;
   border: 0;
   border-radius: var(--input-border-radius);
+  transition: all 0.2s ease-in-out;
 
   &:disabled {
     background-color: var(--disabled);

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

@@ -12,19 +12,26 @@ input {
   margin-top: 0.25rem;
 }
 
-.input-wrapper [data-icon]:before {
-  transition: 0.2s ease-in-out;
-  transform: translateY(0px);
-  font-size: 1.125rem;
-}
+.input-wrapper {
+  [data-icon]:before {
+    transition: 0.2s ease-in-out;
+    transform: translateY(0px);
+    font-size: 1.125rem;
+  }
 
-.input-wrapper .floating-label-active [data-icon]:before {
-  transform: translateY(5px);
-}
+  .floating-label-active [data-icon]:before {
+    transform: translateY(5px);
+  }
 
-.input-wrapper [data-prefix],
-.input-wrapper [data-suffix] {
-  transform: translateY(-0.125rem);
+  [data-prefix],
+  [data-suffix] {
+    transform: translateY(-0.125rem);
+  }
+
+  .disabled {
+    background-color: var(--disabled);
+    cursor: not-allowed;
+  }
 }
 
 .floating-label-active [data-prefix],

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

@@ -58,6 +58,26 @@ describe("InputWrapper should render", () => {
 
     expect(input).toHaveAttribute("aria-describedby", helperId);
   });
+
+  it("disabled input", () => {
+    const { getByLabelText } = createInputWrapper(defaultParams => ({
+      ...defaultParams,
+      disabled: true
+    }));
+
+    const input = getByLabelText("Example label");
+
+    expect(input).toBeDisabled();
+  });
+
+  it("consume wrapper props classname", () => {
+    const { container } = createInputWrapper(defaultParams => ({
+      ...defaultParams,
+      inputProps: { wrapperProps: { className: "testClass" } }
+    }));
+
+    expect(container.querySelector(".testClass")).toBeDefined();
+  });
 });
 
 describe("ref should work", () => {

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

@@ -56,6 +56,7 @@ export const InputWrapper = React.forwardRef<HTMLDivElement, Props>(
       onChange,
       onBlur,
       onFocus,
+      disabled,
       ...rest
     }: Props,
     ref
@@ -72,15 +73,21 @@ export const InputWrapper = React.forwardRef<HTMLDivElement, Props>(
     const { prefix, suffix } = inputProps || {};
     const input = useRef<HTMLInputElement>(null);
     const hasValueOrActiveFloatingLabel = !!value || floatingLabelActive;
-    const labelClasses = [classes["input-label"]];
     const { labelOffset } = useLabelOffset(
       (inputProps && (inputProps.ref as React.RefObject<HTMLInputElement>)) || input,
       floatingLabelActive,
       prefix
     );
 
+    const labelClasses = [classes["input-label"]];
     hasFocus && labelClasses.push(classes["focus"]);
 
+    const inputWrapperClasses = [];
+    floatingLabelActive && inputWrapperClasses.push(classes["floating-label-active"]);
+    inputProps?.wrapperProps?.className &&
+      inputWrapperClasses.push(inputProps?.wrapperProps?.className);
+    disabled && inputWrapperClasses.push(classes["disabled"]);
+
     return (
       <Wrapper
         {...rest}
@@ -102,15 +109,14 @@ export const InputWrapper = React.forwardRef<HTMLDivElement, Props>(
           className: `${classes["input-wrapper-helper"]} ${helperProps?.className ?? ""} `
         }}
         helperIndent={20}
+        disabled={disabled}
       >
         <Input
           {...inputProps}
           prefix={hasValueOrActiveFloatingLabel ? prefix : ""}
           suffix={hasValueOrActiveFloatingLabel ? suffix : ""}
           wrapperProps={{
-            className: `${floatingLabelActive ? classes["floating-label-active"] : ""} ${
-              inputProps?.wrapperProps?.className ?? ""
-            }`
+            className: inputWrapperClasses.join(" ")
           }}
           ref={(inputProps && inputProps.ref) || input}
           aria-labelledby={labelId}

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

@@ -22,6 +22,10 @@
   &.error {
     color: var(--error);
   }
+
+  &.disabled {
+    color: var(--greyed-out);
+  }
 }
 
 .wrapper + fieldset,

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

@@ -69,9 +69,10 @@ export const Wrapper = React.forwardRef<HTMLDivElement, Props>(
     labelProps?.className && labelClasses.push(labelProps.className);
     required && labelClasses.push(classes["required"]);
     error && labelClasses.push(classes["error"]);
+    disabled && labelClasses.push(classes["disabled"]);
 
     return (
-      <div {...rest} ref={ref} className={`${classes.wrapper} ${className ? className : ""}`}>
+      <div {...rest} ref={ref} className={`${classes.wrapper} ${className ?? ""}`}>
         <FormGroup
           error={error}
           errorMessage={errorMessage}