@onewelcome/react-lib-components 0.2.6 → 0.3.0

package/package.json

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

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}