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

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

@@ -0,0 +1,99 @@
+/*
+ * 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,
+  ReactElement,
+  useEffect
+} from "react";
+import classes from "./RadioWrapper.module.scss";
+import { Wrapper, WrapperProps } from "../Wrapper/Wrapper";
+import { useWrapper } from "../../../../hooks/useWrapper";
+import { Icons } from "../../../Icon/Icon";
+import { Fieldset, Props as FieldsetProps } from "../../../Form/Fieldset/Fieldset";
+
+export interface Props extends ComponentPropsWithRef<"div">, WrapperProps {
+  children: ReactElement | ReactElement[];
+  fieldsetProps: FieldsetProps;
+  value: string;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+const RadioWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  {
+    children,
+    error,
+    name,
+    helperText,
+    helperProps,
+    fieldsetProps,
+    value,
+    onChange,
+    disabled,
+    ...rest
+  }: Props,
+  ref
+) => {
+  const { errorId, helperId } = useWrapper();
+
+  useEffect(() => {
+    if (fieldsetProps.legend === undefined) {
+      console.error(
+        `You should give your Fieldset component a legend prop so a legend element is rendered. This error was thrown in RadioWrapper. You can add this legend prop through the fieldsetProps prop by passing an object (fieldsetProps={{ legend: "legend here" }})`
+      );
+    }
+  }, []);
+
+  const renderChildren = () =>
+    React.Children.map(children, child =>
+      React.cloneElement(child, {
+        parentErrorId: errorId,
+        error: error,
+        checked: child.props.value === value,
+        name: name,
+        parentHelperId: helperText ? helperId : false,
+        onChange: onChange,
+        disabled: child.props.disabled !== undefined ? child.props.disabled : disabled
+      })
+    );
+
+  return (
+    <Fieldset {...fieldsetProps} error={error} disabled={disabled}>
+      <Wrapper
+        {...rest}
+        ref={ref}
+        disabled={disabled}
+        name={name}
+        helperId={helperId}
+        helperText={helperText}
+        helperProps={{
+          ...helperProps,
+          className: `${classes["radio-wrapper-helper"]} ${
+            error ? classes["radio-wrapper-error"] : ""
+          } ${helperProps?.className ?? ""}`
+        }}
+        error={error}
+        errorId={errorId}
+        errorMessageIcon={Icons.Error}
+      >
+        {renderChildren()}
+      </Wrapper>
+    </Fieldset>
+  );
+};
+
+export const RadioWrapper = React.forwardRef(RadioWrapperComponent);

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

@@ -0,0 +1,31 @@
+/*!
+ * 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/variables";
+
+.select-label {
+  left: calc(
+    1.25rem + 2px
+  ); // 2px is for offset of the selectwrapper border. It's relative to the parent div which doesn't have a border.
+}
+
+.select-helper-text {
+  margin-top: 0.15rem;
+}
+
+.floating-label-active [data-display] {
+  top: calc(50% + 0.5rem);
+}

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

@@ -0,0 +1,185 @@
+/*
+ * 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 } from "react";
+import { SelectWrapper, Props } from "./SelectWrapper";
+import { render } from "@testing-library/react";
+import { Option } from "../../Select/Option";
+import userEvent from "@testing-library/user-event";
+
+const onChangeHandler = jest.fn();
+
+const defaultParams: Props = {
+  children: [
+    <Option key="1" value="option1">
+      Option 1
+    </Option>,
+    <Option key="2" value="option2">
+      Option 2
+    </Option>,
+    <Option key="3" value="option3">
+      Option 3
+    </Option>,
+    <Option key="4" value="option4">
+      Option 4
+    </Option>
+  ],
+  label: "select_label",
+  name: "select",
+  helperText: "helpertext",
+  helperProps: { "data-testid": "helpertext" },
+  errorMessage: "errormessage",
+  error: false,
+  value: "option1",
+  onChange: onChangeHandler
+};
+
+const createSelectWrapper = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(<SelectWrapper {...parameters} data-testid="selectwrapper" />);
+  const selectwrapper = queries.getByTestId("selectwrapper");
+  const select = selectwrapper.querySelector("button");
+
+  return {
+    ...queries,
+    selectwrapper,
+    select
+  };
+};
+
+describe("SelectWrapper should render", () => {
+  it("renders without crashing", () => {
+    const { selectwrapper } = createSelectWrapper();
+
+    expect(selectwrapper).toBeDefined();
+  });
+});
+
+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>,
+        innerRef: React.RefObject<HTMLInputElement>
+      ) => void;
+    }) => {
+      const ref = useRef(null);
+      const innerRef = useRef(null);
+
+      useEffect(() => {
+        if (ref.current) {
+          propagateRef && propagateRef(ref, innerRef);
+        }
+      }, [ref]);
+
+      return (
+        <SelectWrapper
+          {...defaultParams}
+          selectProps={{ ref: innerRef, "data-ref": "inner-testing" }}
+          name="test"
+          data-ref="testing"
+          ref={ref}
+        />
+      );
+    };
+
+    const refCheck = (
+      ref: React.RefObject<HTMLElement>,
+      innerRef: React.RefObject<HTMLElement>
+    ) => {
+      expect(ref.current).toHaveAttribute("data-ref", "testing");
+      expect(innerRef.current!.nodeName).toBe("SELECT");
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});
+
+describe("SelectWrapper & Select have the right attributes", () => {
+  it("select has aria values", async () => {
+    const { select, getByTestId, findByText } = createSelectWrapper();
+
+    const helpertext = getByTestId("helpertext");
+    const label = await findByText("select_label");
+
+    expect(select).toHaveAttribute("aria-describedby", helpertext.id);
+    expect(select).toHaveAttribute("aria-labelledby", label.id);
+  });
+
+  it("SelectWrapper has the right helpertext", () => {
+    const { getByTestId } = createSelectWrapper();
+
+    const helpertext = getByTestId("helpertext");
+
+    expect(helpertext).toBeTruthy();
+    expect(helpertext).toHaveTextContent("helpertext");
+  });
+
+  it("Passes the proper helperProps class", () => {
+    const { getByTestId } = createSelectWrapper(defaultParams => ({
+      ...defaultParams,
+      helperProps: { ...defaultParams.helperProps, className: "example-helper-classname" }
+    }));
+
+    const helpertext = getByTestId("helpertext");
+
+    expect(helpertext.parentElement).toHaveClass("example-helper-classname");
+  });
+
+  it("Passes the proper selectProps class", () => {
+    const { getByTestId } = createSelectWrapper(defaultParams => ({
+      ...defaultParams,
+      selectProps: {
+        ...defaultParams.selectProps,
+        "data-testid": "select-element",
+        className: "example-select-classname"
+      }
+    }));
+
+    const select = getByTestId("select-element");
+
+    expect(select).toHaveClass("example-select-classname");
+  });
+
+  it("SelectWrapper has the right errormessage", async () => {
+    const { findByText, select } = createSelectWrapper(defaultParams => ({
+      ...defaultParams,
+      error: true
+    }));
+
+    const errorMessage = await findByText("errormessage");
+
+    expect(errorMessage).toBeTruthy();
+    expect(select).toHaveAttribute("aria-describedby", errorMessage.id);
+  });
+
+  it("Fires the onChange event", async () => {
+    const { select, findByText } = createSelectWrapper();
+
+    await userEvent.click(select as Element);
+
+    const option3 = await findByText("Option 3");
+
+    await userEvent.click(option3 as Element);
+
+    expect(onChangeHandler).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,82 @@
+/*
+ * 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, ReactElement } from "react";
+import classes from "./SelectWrapper.module.scss";
+import { Wrapper, WrapperProps } from "../Wrapper/Wrapper";
+import { Select, Props as SelectProps } from "../../Select/Select";
+import { useWrapper } from "../../../../hooks/useWrapper";
+
+interface PartialSelectProps extends Partial<SelectProps> {}
+
+export interface Props
+  extends Omit<ComponentPropsWithRef<"div">, "onChange">,
+    Omit<WrapperProps, "onChange" | "error"> {
+  children: ReactElement[] | ReactElement | number[];
+  placeholder?: string;
+  value: string;
+  error?: boolean;
+  selectProps?: PartialSelectProps;
+  onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+}
+
+const SelectWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  {
+    children,
+    error,
+    success,
+    value,
+    placeholder,
+    selectProps,
+    helperProps,
+    onChange,
+    ...rest
+  }: Props,
+  ref
+) => {
+  const { errorId, helperId, labelId } = useWrapper();
+
+  return (
+    <Wrapper
+      {...rest}
+      ref={ref}
+      errorId={errorId}
+      helperId={helperId}
+      labelProps={{ id: labelId, className: classes["select-label"] }}
+      helperProps={{
+        ...helperProps,
+        className: `${classes["select-helper-text"]} ${helperProps?.className ?? ""}`
+      }}
+      error={error}
+    >
+      <Select
+        {...selectProps}
+        value={value}
+        labeledBy={labelId}
+        error={error}
+        success={success}
+        describedBy={error ? errorId : helperId}
+        onChange={onChange}
+        placeholder={placeholder}
+        className={`${selectProps?.className ?? ""}`}
+      >
+        {children as ReactElement[]}
+      </Select>
+    </Wrapper>
+  );
+};
+
+export const SelectWrapper = React.forwardRef(SelectWrapperComponent);

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

@@ -0,0 +1,57 @@
+/*!
+ * 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 "../../../../mixins.module.scss";
+
+@include mixins.inputLabelPrimaryColorOnFocus("label.textarea-label");
+
+.textarea-wrapper {
+  &:after {
+    content: "";
+    @include mixins.transition(all, 0.15s, ease-in-out);
+    display: block;
+    width: calc(95%);
+    background-color: var(--light);
+    position: absolute;
+    z-index: 0;
+    left: 1px;
+    top: 1px;
+    border-radius: var(--input-border-radius) var(--input-border-radius) 0 0;
+  }
+
+  &.disabled:after {
+    background-color: var(--disabled);
+  }
+
+  &.focus:after {
+    left: 2px;
+    top: 2px;
+  }
+
+  .textarea {
+    &:active:not(:disabled) {
+      border-color: var(--color-primary);
+    }
+
+    &:focus:not(:disabled) {
+      outline: none;
+    }
+  }
+}
+
+.textarea-helper-text {
+  margin-top: 0.14rem;
+}

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

@@ -0,0 +1,172 @@
+/*
+ * 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 } from "react";
+import { TextareaWrapper, Props } from "./TextareaWrapper";
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+const defaultParams: Props = {
+  name: "textarea",
+  label: "textarea_label",
+  value: "value",
+  error: false,
+  helperText: "helpertext",
+  helperProps: { "data-testid": "helpertext" },
+  errorMessage: "errormessage",
+  textareaProps: { "data-testid": "textarea" },
+  onChange: jest.fn()
+};
+
+const createTextareaWrapper = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(<TextareaWrapper {...parameters} data-testid="textareawrapper" />);
+  const textareawrapper = queries.getByTestId("textareawrapper");
+  const textarea = queries.getByTestId("textarea");
+
+  return {
+    ...queries,
+    textareawrapper,
+    textarea
+  };
+};
+
+describe("TextareaWrapper should render", () => {
+  it("renders without crashing", () => {
+    const { textareawrapper } = createTextareaWrapper();
+
+    expect(textareawrapper).toBeDefined();
+  });
+});
+
+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>,
+        innerRef: React.RefObject<HTMLInputElement>
+      ) => void;
+    }) => {
+      const ref = useRef(null);
+      const innerRef = useRef(null);
+
+      useEffect(() => {
+        if (ref.current) {
+          propagateRef && propagateRef(ref, innerRef);
+        }
+      }, [ref]);
+
+      return (
+        <TextareaWrapper
+          {...defaultParams}
+          textareaProps={{ ref: innerRef, "data-ref": "inner-testing" }}
+          name="test"
+          data-ref="testing"
+          ref={ref}
+        />
+      );
+    };
+
+    const refCheck = (
+      ref: React.RefObject<HTMLElement>,
+      innerRef: React.RefObject<HTMLElement>
+    ) => {
+      expect(ref.current).toHaveAttribute("data-ref", "testing");
+      expect(innerRef.current).toHaveAttribute("data-ref", "inner-testing");
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});
+
+describe("TextareaWrapper & Textarea have the right attributes", () => {
+  it("textarea has aria values", async () => {
+    const { textarea, getByTestId, findByText } = createTextareaWrapper();
+
+    const helpertext = getByTestId("helpertext");
+    const label = await findByText("textarea_label");
+
+    expect(textarea).toHaveAttribute("aria-describedby", helpertext.id);
+    expect(textarea).toHaveAttribute("aria-labelledby", label.id);
+  });
+
+  it("TextareaWrapper has the right helpertext", () => {
+    const { getByTestId } = createTextareaWrapper();
+
+    const helpertext = getByTestId("helpertext");
+
+    expect(helpertext).toBeTruthy();
+    expect(helpertext).toHaveTextContent("helpertext");
+  });
+
+  it("TextareaWrapper has the right errormessage", async () => {
+    const { findByText, textarea } = createTextareaWrapper(defaultParams => ({
+      ...defaultParams,
+      error: true
+    }));
+
+    const errorMessage = await findByText("errormessage");
+
+    expect(errorMessage).toBeTruthy();
+    expect(textarea).toHaveAttribute("aria-describedby", errorMessage.id);
+  });
+});
+
+describe("TextarenaWrapper should be interactive", () => {
+  it("Fires the onChange, onFocus & onBlur events", async () => {
+    const onFocusHandler = jest.fn();
+    const onChangeHandler = jest.fn();
+    const onBlurHandler = jest.fn();
+
+    const { textarea } = createTextareaWrapper(defaultParams => ({
+      ...defaultParams,
+      onChange: onChangeHandler,
+      onFocus: onFocusHandler,
+      onBlur: onBlurHandler
+    }));
+
+    await userEvent.tab();
+    expect(textarea).toHaveFocus();
+
+    await userEvent.keyboard("input");
+    await userEvent.tab();
+
+    expect(onChangeHandler).toHaveBeenCalledTimes(5);
+    expect(onFocusHandler).toHaveBeenCalled();
+    expect(onBlurHandler).toHaveBeenCalled();
+  });
+
+  it("Fires the onMouseEnter & onMouseLeave events", async () => {
+    const onMouseEnterHandler = jest.fn();
+    const onMouseLeaveHandler = jest.fn();
+
+    const { textarea } = createTextareaWrapper(defaultParams => ({
+      ...defaultParams,
+      onMouseEnter: onMouseEnterHandler,
+      onMouseLeave: onMouseLeaveHandler
+    }));
+
+    await userEvent.hover(textarea);
+    expect(onMouseEnterHandler).toHaveBeenCalled();
+    await userEvent.unhover(textarea);
+    expect(onMouseLeaveHandler).toHaveBeenCalled();
+  });
+});