@onewelcome/react-lib-components 2.0.0-alpha → 2.0.0-alpha.1

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

@@ -0,0 +1,91 @@
+/*
+ * 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 React, {
+  ForwardRefRenderFunction,
+  ComponentPropsWithRef,
+  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";
+import classes from "./FormSelectorWrapper.module.scss";
+
+export interface Props extends ComponentPropsWithRef<"div">, FormSelector {
+  children?: ReactNode;
+  nestedChildren?: ReactNode;
+  containerProps?: ComponentPropsWithRef<"div"> & KeyValuePair;
+  helperProps?: FormHelperTextProps;
+  disabled?: boolean;
+  errorId?: string;
+  identifier?: string;
+}
+
+const FormSelectorWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  {
+    children,
+    className,
+    nestedChildren,
+    containerProps,
+    helperProps,
+    error,
+    disabled,
+    helperText,
+    errorMessage,
+    parentErrorId,
+    errorId,
+    identifier,
+    ...rest
+  }: Props,
+  ref
+) => {
+  const helperRef = helperProps?.ref ?? createRef();
+
+  return (
+    <div
+      {...rest}
+      ref={ref}
+      className={`${error ? classes["error"] : ""} ${disabled ? classes["disabled"] : ""} ${
+        className ?? ""
+      }`}
+    >
+      <div {...containerProps}>{children}</div>
+      {(helperText || helperProps?.children) && (!error || parentErrorId || !errorMessage) && (
+        <FormHelperText
+          {...helperProps}
+          ref={helperRef}
+          id={`${identifier}`}
+          className={`${classes["helper-text"]} ${helperProps?.className ?? ""} ${
+            error ? classes["error"] : ""
+          }`}
+        >
+          {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>
+  );
+};
+
+export const FormSelectorWrapper = React.forwardRef(FormSelectorWrapperComponent);

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

@@ -0,0 +1,147 @@
+/*!
+ * 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.
+ */
+
+@use "src/mixins.module";
+@use "src/variables";
+
+.input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  border: 0;
+  border-radius: var(--input-border-radius);
+  background-color: var(--input-background-color);
+  padding: 0 variables.$form-element-horizontal-padding-mobile;
+  @include mixins.transition(all, 0.2s, ease-in-out);
+
+  // General autofill styles
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus,
+  input:-webkit-autofill:active {
+    transition: background-color 5000s ease-in-out 0s !important;
+
+    ~ .outline {
+      &:after {
+        content: "";
+        position: absolute;
+        display: block;
+        width: 100%;
+        height: 100%;
+        border-radius: var(--input-border-radius);
+      }
+    }
+
+    // Chrome specific color
+    @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
+      ~ .outline {
+        &:after {
+          background-color: rgb(232, 240, 254);
+        }
+      }
+    }
+
+    // Safari specific color
+    @media not all and (min-resolution: 0.001dpcm) {
+      ~ .outline {
+        &:after {
+          background-color: rgb(250, 255, 189);
+        }
+      }
+    }
+  }
+
+  @include mixins.outlineStates;
+
+  [data-icon-status="success"],
+  [data-icon-status="error"] {
+    height: 100%;
+    width: 1.25rem;
+    box-sizing: border-box;
+    font-size: 1.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+
+    &:before {
+      height: 1.25rem;
+      width: 1.25rem;
+    }
+  }
+
+  [data-icon-status="success"] {
+    color: var(--success);
+  }
+
+  [data-icon-status="error"] {
+    color: var(--error);
+  }
+}
+
+.input {
+  height: 40px;
+  color: var(--greyed-out);
+  font-size: var(--form-control-font-size);
+  font-family: var(--font-family);
+  box-sizing: border-box;
+  border: 0;
+  border-radius: var(--input-border-radius);
+  @include mixins.transition(all, 0.2s, ease-in-out);
+  background-color: transparent;
+  z-index: 1;
+
+  &:not(.shrink-width-for-date-icon) {
+    width: 100%;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  &.shrink-width-for-date-icon {
+    width: auto;
+  }
+
+  @include mixins.browserOutlineDisabled;
+}
+
+@include mixins.outline;
+
+.error input {
+  color: var(--error);
+  padding-right: 1.25rem;
+
+  &.remove-extra-indent {
+    padding-right: 0;
+  }
+}
+.success input {
+  padding-right: 1.25rem;
+}
+
+.input-wrapper [data-prefix],
+.input-wrapper [data-suffix] {
+  @include mixins.transition(all, 0.2s, ease-in-out);
+  display: block;
+  z-index: 1;
+}
+
+@media only screen and (min-width: 30em) {
+  .input-wrapper {
+    padding: 0 variables.$form-element-horizontal-padding-desktop;
+  }
+}

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

@@ -0,0 +1,251 @@
+/*
+ * 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 React, { useEffect, useRef, useState, Fragment } from "react";
+import { Input, Props, Type } from "./Input";
+import { act, fireEvent, render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Label } from "../Label/Label";
+
+const defaultParams: Props = {
+  name: "input",
+  type: "text"
+};
+
+const createInput = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(<Input {...parameters} data-testid="input" />);
+  const input = queries.getByTestId("input");
+
+  return {
+    ...queries,
+    input
+  };
+};
+
+const CreateInputComponent = ({
+  onValueChange,
+  type
+}: {
+  onValueChange: (value: string) => void;
+  type: Type;
+}) => {
+  const [inputValue, setInputValue] = useState("");
+
+  useEffect(() => {
+    if (inputValue !== "") {
+      onValueChange(inputValue);
+    }
+  }, [inputValue]);
+
+  return (
+    <Fragment>
+      <Label htmlFor="sample-input">Test</Label>
+      <Input
+        name="sample_input"
+        type={type}
+        id="sample-input"
+        value={inputValue}
+        onChange={e => setInputValue(e.target.value)}
+      />
+    </Fragment>
+  );
+};
+
+describe("Input should render", () => {
+  it("renders without crashing and has a name and type", () => {
+    const { input } = createInput();
+    expect(input).toBeTruthy();
+  });
+});
+
+describe("ref should work", () => {
+  it("should give back the proper data prop, this also checks if the component propagates ...rest properly", () => {
+    const ExampleComponent = ({
+      propagateRef
+    }: {
+      propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
+    }) => {
+      const ref = useRef(null);
+
+      useEffect(() => {
+        if (ref.current) {
+          propagateRef && propagateRef(ref);
+        }
+      }, [ref]);
+
+      return <Input {...defaultParams} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute("data-ref", "testing");
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});
+
+describe("Should have the appropriate attributes", () => {
+  it("is disabled and has a class", () => {
+    const { input } = createInput(defaultParams => ({
+      ...defaultParams,
+      disabled: true,
+      className: "classname"
+    }));
+
+    expect(input).toHaveAttribute("disabled");
+    expect(input).toHaveClass("classname");
+  });
+
+  it("should render an input with spellcheck enabled", () => {
+    const { input } = createInput(defaultParams => ({ ...defaultParams, spellCheck: true }));
+
+    expect(input).toHaveAttribute("spellcheck", "true");
+  });
+
+  it("should render an input with spellcheck disabled by default", () => {
+    const { input } = createInput(defaultParams => ({ ...defaultParams }));
+
+    expect(input).toHaveAttribute("spellcheck", "false");
+  });
+});
+
+describe("Should render all different types of inputs", () => {
+  it.each([
+    ["text", "testing", "testing"],
+    ["email", "testing@testing.com", "testing@testing.com"],
+    ["tel", "06123456789", "06123456789"],
+    ["number", "1234567890", "1234567890"],
+    ["search", "example", "example"],
+    ["time", "1234", "12:34"],
+    ["url", "https://www.onewelcome.com", "https://www.onewelcome.com"]
+  ])(
+    "renders a %p input with %p as a value",
+    async (type: string, value: string, result: string) => {
+      let changedValue = "";
+
+      const { findByLabelText } = render(
+        <CreateInputComponent type={type as Type} onValueChange={value => (changedValue = value)} />
+      );
+
+      const input = await findByLabelText(/Test/);
+
+      await act(() => {
+        input.focus();
+      });
+
+      await userEvent.keyboard(value);
+
+      expect(changedValue).toBe(result);
+    }
+  );
+
+  it("should render a password input", () => {
+    const { input } = createInput(defaultParams => ({ ...defaultParams, type: "password" }));
+
+    expect(input).toHaveAttribute("type", "password");
+  });
+
+  it("should render a datetime input", async () => {
+    let changedValue = "";
+
+    const { findByLabelText } = render(
+      <CreateInputComponent type="datetime-local" onValueChange={value => (changedValue = value)} />
+    );
+
+    const input = await findByLabelText(/Test/);
+
+    const testValue = "2019-03-29T12:34";
+    fireEvent.change(input, { target: { value: testValue } });
+
+    expect(changedValue).toBe(testValue);
+  });
+
+  it("should be hidden", () => {
+    const { input } = createInput(defaultParams => ({ ...defaultParams, type: "hidden" }));
+
+    expect(input.parentElement).toHaveClass("hidden");
+    expect(input).toHaveAttribute("type", "hidden");
+  });
+});
+
+describe("It should execute the listeners", () => {
+  it("fires event handlers", async () => {
+    const onChangeHandler = jest.fn();
+    const onKeyUpHandler = jest.fn();
+    const onKeyDownHandler = jest.fn();
+
+    const { input } = createInput(defaultParams => ({
+      ...defaultParams,
+      type: "text",
+      onKeyUp: onKeyUpHandler,
+      onKeyDown: onKeyDownHandler,
+      onChange: onChangeHandler
+    }));
+
+    await act(() => {
+      input.focus();
+    });
+
+    expect(input).toHaveFocus();
+
+    await userEvent.keyboard("test");
+
+    expect(onKeyUpHandler).toHaveBeenCalled();
+    expect(onKeyDownHandler).toHaveBeenCalled();
+    expect(onChangeHandler).toHaveBeenCalled();
+  });
+});
+
+describe("It should render prefix and suffix ", () => {
+  it("renders prefix and suffix", () => {
+    const prefix = "http://";
+    const suffix = ".com";
+    const { getByText } = createInput(defaultParams => ({
+      ...defaultParams,
+      prefix,
+      suffix
+    }));
+
+    expect(getByText(prefix)).toBeDefined();
+    expect(getByText(suffix)).toBeDefined();
+  });
+
+  it("error icon should be visible with suffix", () => {
+    const suffix = ".com";
+    const { input, getByText } = createInput(defaultParams => ({
+      ...defaultParams,
+      error: true,
+      suffix
+    }));
+
+    expect(input.querySelector("icon-warning")).toBeDefined();
+    expect(getByText(suffix)).toBeDefined();
+  });
+
+  it("success icon should be visible", () => {
+    const { input } = createInput(defaultParams => ({
+      ...defaultParams,
+      success: true
+    }));
+    const icon = input.querySelector(".icon-checkmark-circle-breakout");
+    expect(input.querySelector(".success")).toBeDefined();
+    expect(icon).toBeDefined();
+  });
+});

package/src/components/Form/Input/Input.tsx

@@ -0,0 +1,142 @@
+/*
+ * 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 React, {
+  ForwardRefRenderFunction,
+  ComponentPropsWithRef,
+  Ref,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import classes from "./Input.module.scss";
+import readyclasses from "../../../readyclasses.module.scss";
+import { FormElement } from "../form.interfaces";
+import { useDetermineStatusIcon } from "../../../hooks/useDetermineStatusIcon";
+
+export const dateTypes = ["date", "time", "datetime-local"] as const;
+
+export type Type =
+  | "text"
+  | "email"
+  | "file"
+  | "number"
+  | "password"
+  | "search"
+  | "tel"
+  | "url"
+  | "hidden"
+  | (typeof dateTypes)[number];
+
+export interface Props extends ComponentPropsWithRef<"input">, FormElement {
+  wrapperProps?: ComponentPropsWithRef<"div">;
+  labeledBy?: string;
+  type: Type;
+  suffix?: string;
+  prefix?: string;
+}
+
+const InputComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
+  {
+    error = false,
+    success = false,
+    className,
+    name,
+    style,
+    wrapperProps,
+    type,
+    labeledBy,
+    prefix,
+    suffix,
+    disabled,
+    onFocus,
+    onBlur,
+    ...rest
+  }: Props,
+  ref: Ref<HTMLInputElement>
+) => {
+  const [focus, setFocus] = useState(false);
+  const inputWrapperRef = useRef<HTMLDivElement>(null);
+  const suffixRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (name === undefined) {
+      throw new Error("Please give your <Input /> component a 'name' attribute");
+    }
+  }, []);
+
+  const inputClassNames = [classes["input"]];
+
+  (dateTypes as ReadonlyArray<string>).includes(type) &&
+    inputClassNames.push(classes["shrink-width-for-date-icon"]);
+  className && inputClassNames.push(className);
+
+  const wrapperClasses = [classes["input-wrapper"]];
+  const outlineClasses = [classes["outline"]];
+
+  wrapperProps?.className && wrapperClasses.push(wrapperProps.className);
+  type === "hidden" && wrapperClasses.push(readyclasses["hidden"]);
+  prefix && wrapperClasses.push(classes["prefix"]);
+  suffix && wrapperClasses.push(classes["suffix"]);
+  disabled && wrapperClasses.push(classes["disabled"]) && outlineClasses.push(classes["disabled"]);
+  error && wrapperClasses.push(classes["error"]) && outlineClasses.push(classes["error"]);
+  focus && wrapperClasses.push(classes["focus"]) && outlineClasses.push(classes["focus"]);
+  success && wrapperClasses.push(classes["success"]);
+
+  const icon = useDetermineStatusIcon({ success, error });
+
+  return (
+    <div
+      ref={inputWrapperRef}
+      {...wrapperProps}
+      style={{ ...style }}
+      className={`${classes["input-wrapper"]} ${wrapperClasses.join(" ")}`}
+    >
+      {prefix && (
+        <div data-prefix className={classes["prefix"]}>
+          <span>{prefix}</span>
+        </div>
+      )}
+      <input
+        {...rest}
+        ref={ref}
+        onFocus={event => {
+          setFocus(true);
+          onFocus?.(event);
+        }}
+        onBlur={event => {
+          setFocus(false);
+          onBlur?.(event);
+        }}
+        aria-labelledby={labeledBy}
+        type={type}
+        name={name}
+        disabled={disabled}
+        className={inputClassNames.join(" ")}
+        spellCheck={rest.spellCheck ?? false}
+      />
+      {icon}
+      {suffix && (
+        <div ref={suffixRef} data-suffix className={classes["suffix"]}>
+          <span>{suffix}</span>
+        </div>
+      )}
+      <span className={outlineClasses.join(" ")}></span>
+    </div>
+  );
+};
+
+export const Input = React.forwardRef(InputComponent);

package/src/components/Form/Label/Label.tsx

@@ -0,0 +1,40 @@
+/*
+ * 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 React, { ForwardRefRenderFunction, ComponentPropsWithRef, ReactNode } from "react";
+import classes from "./Label.module.scss";
+import readyclasses from "../../../readyclasses.module.scss";
+
+export interface Props extends ComponentPropsWithRef<"label"> {
+  children?: ReactNode;
+}
+
+const LabelComponent: ForwardRefRenderFunction<HTMLLabelElement, Props> = (
+  { children, className, hidden = false, ...rest }: Props,
+  ref
+) => {
+  return (
+    <label
+      {...rest}
+      ref={ref}
+      className={`${hidden ? readyclasses["sr-only"] : ""} ${classes["label"]} ${className ?? ""}`}
+    >
+      {children}
+    </label>
+  );
+};
+
+export const Label = React.forwardRef(LabelComponent);