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

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

@@ -0,0 +1,297 @@
+/*
+ * 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 { Checkbox, Props } from "./Checkbox";
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Toggle } from "../Toggle/Toggle";
+
+const onChangeHandler = jest.fn();
+
+const defaultParams: Props = {
+  name: "Testing",
+  children: "checkbox content",
+  helperText: "example helper",
+  onChange: onChangeHandler
+};
+
+const createCheckbox = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(<Checkbox {...parameters} data-testid="checkbox" />);
+  const checkbox = queries.getByTestId("checkbox");
+
+  return {
+    ...queries,
+    checkbox
+  };
+};
+
+describe("Checkbox should render", () => {
+  it("renders without crashing", () => {
+    const { checkbox } = createCheckbox();
+    expect(checkbox).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 <Checkbox {...defaultParams} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute("data-ref", "testing");
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});
+
+describe("Checkbox should have proper attributes", () => {
+  it("should be unchecked", () => {
+    const { checkbox } = createCheckbox();
+
+    expect(checkbox).toHaveAttribute("aria-checked", "false");
+  });
+
+  it("should be checked", () => {
+    const { checkbox } = createCheckbox(defaultParams => ({ ...defaultParams, checked: true }));
+
+    expect(checkbox).toHaveAttribute("aria-checked", "true");
+  });
+
+  it("should call the onChange function", async () => {
+    const onChangeHandler = jest.fn();
+    const { checkbox } = createCheckbox(defaultParams => ({
+      ...defaultParams,
+      onChange: onChangeHandler
+    }));
+    await userEvent.click(checkbox);
+    expect(onChangeHandler).toHaveBeenCalled();
+  });
+
+  it("should be disabled", async () => {
+    const onChangeHandler = jest.fn();
+    const { checkbox } = createCheckbox(defaultParams => ({
+      ...defaultParams,
+      onChange: onChangeHandler,
+      disabled: true
+    }));
+
+    expect(checkbox).toBeDisabled();
+
+    await userEvent.click(checkbox);
+
+    expect(onChangeHandler).not.toHaveBeenCalled();
+  });
+
+  it("nested checkbox should be disabled", () => {
+    const { getByTestId } = createCheckbox(defaultParams => ({
+      ...defaultParams,
+      indeterminate: false,
+      label: "test",
+      children: (
+        <Checkbox data-testid="nested-checkbox" name="test" disabled={true}>
+          test
+        </Checkbox>
+      )
+    }));
+
+    const nestedCheckbox = getByTestId("nested-checkbox");
+
+    expect(nestedCheckbox).toBeDisabled();
+  });
+
+  it("should have helpertext rendered", () => {
+    const { getByText } = createCheckbox();
+
+    const helperText = getByText("example helper");
+
+    expect(helperText).toBeTruthy();
+  });
+
+  it("should have the error state enabled", () => {
+    const { checkbox, container, getByTestId } = createCheckbox(defaultParams => ({
+      ...defaultParams,
+      error: true,
+      errorMessage: "This is an error",
+      formSelectorWrapperProps: { "data-testid": "checkbox-wrapper" }
+    }));
+
+    expect(checkbox).toHaveAttribute(
+      "aria-describedby",
+      container.querySelector(".error-message span:last-of-type")!.id
+    );
+
+    expect(checkbox).toHaveAttribute("aria-invalid", "true");
+    expect(getByTestId("checkbox-wrapper")).toHaveClass("error");
+  });
+
+  it("should have a correctly linked label element", () => {
+    const { checkbox, container } = createCheckbox(defaultParams => ({
+      ...defaultParams,
+      children: "Label"
+    }));
+
+    const id = checkbox.getAttribute("id");
+    const label = container.querySelector(`label[for=${id}]`);
+
+    expect(label).toBeTruthy();
+    expect(label).toHaveTextContent("Label");
+  });
+});
+
+describe("Checkbox should be interactive", () => {
+  it("should call onChange when clicked", async () => {
+    const { checkbox } = createCheckbox();
+
+    expect(onChangeHandler).not.toBeCalled();
+    await userEvent.click(checkbox);
+    expect(onChangeHandler).toBeCalledTimes(1);
+  });
+
+  it("should not call onChange when disabled", async () => {
+    const { checkbox } = createCheckbox(defaultParams => ({ ...defaultParams, disabled: true }));
+
+    await userEvent.click(checkbox);
+    expect(onChangeHandler).not.toBeCalled();
+  });
+});
+
+describe("toggle version", () => {
+  it("should turn into a toggle", () => {
+    const { container } = render(<Toggle name="toggle">Test</Toggle>);
+
+    expect(container.querySelector("[data-toggle]")).toBeInTheDocument();
+  });
+});
+
+describe("missing attributes gets us errors", () => {
+  it("throws an error for missing label prop", () => {
+    // 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;
+    console.error = jest.fn();
+
+    let actual;
+
+    try {
+      // @ts-ignore: mandatory props (test for non-typescript react projects)
+      createCheckbox(defaultParams => ({
+        ...defaultParams,
+        name: "testing",
+        children: <Checkbox name="test">Test</Checkbox>
+      }));
+    } catch (e: any) {
+      actual = e.message;
+    }
+
+    const expected =
+      "If you pass Checkboxes as a child component (to create nested checkbox tree) you need to pass a label to the parent checkbox.";
+
+    expect(actual).toEqual(expected);
+
+    console.error = err;
+  });
+
+  it("throws an error for indeterminate prop", () => {
+    // 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;
+    console.error = jest.fn();
+
+    let actual;
+
+    try {
+      // @ts-ignore: mandatory props (test for non-typescript react projects)
+      createCheckbox(defaultParams => ({
+        ...defaultParams,
+        label: "testing",
+        children: <Checkbox name="test">Test</Checkbox>
+      }));
+    } catch (e: any) {
+      actual = e.message;
+    }
+
+    const expected =
+      "If you have nested checkboxes you have to manage the indeterminate state by passing a boolean to the `indeterminate` prop.";
+
+    expect(actual).toEqual(expected);
+
+    console.error = err;
+  });
+
+  it("throws an error for incorrect children prop", () => {
+    // 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;
+    console.error = jest.fn();
+
+    let actual;
+
+    try {
+      // @ts-ignore: mandatory props (test for non-typescript react projects)
+      createCheckbox(defaultParams => ({
+        name: undefined
+      }));
+    } catch (e: any) {
+      actual = e.message;
+    }
+
+    const expected =
+      "Please make sure to pass either a string or more Checkbox components as a child of your Checkbox component.";
+
+    expect(actual).toEqual(expected);
+
+    console.error = err;
+  });
+
+  it("throws an error for missing name prop", () => {
+    // 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;
+    console.error = jest.fn();
+
+    let actual;
+
+    try {
+      // @ts-ignore: mandatory props (test for non-typescript react projects)
+      createCheckbox(defaultParams => ({
+        children: "test"
+      }));
+    } catch (e: any) {
+      actual = e.message;
+    }
+
+    const expected = "Please pass a 'name' prop to your <Checkbox> component.";
+
+    expect(actual).toEqual(expected);
+
+    console.error = err;
+  });
+});

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

@@ -0,0 +1,183 @@
+/*
+ * 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,
+  ReactNode,
+  useEffect
+} from "react";
+import { Icon, Icons } from "../../Icon/Icon";
+import { Props as FormHelperTextProps } from "../FormHelperText/FormHelperText";
+import classes from "./Checkbox.module.scss";
+import { useFormSelector } from "../../../hooks/useFormSelector";
+import {
+  FormSelectorWrapper,
+  Props as FormSelectorWrapperProps
+} from "../FormSelectorWrapper/FormSelectorWrapper";
+import { FormSelector } from "../form.interfaces";
+
+const isToggle = (children: ReactNode) => (children as ReactElement)?.props?.["data-toggle"];
+
+export interface Props extends ComponentPropsWithRef<"input">, FormSelector {
+  children: ReactNode;
+  label?: string;
+  indeterminate?: boolean;
+  helperProps?: FormHelperTextProps;
+  formSelectorWrapperProps?: FormSelectorWrapperProps;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+const CheckboxComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
+  {
+    children,
+    name,
+    helperText,
+    helperProps,
+    indeterminate,
+    parentErrorId,
+    errorMessage,
+    disabled,
+    label,
+    parentHelperId,
+    className,
+    error,
+    checked = false,
+    formSelectorWrapperProps,
+    onChange,
+    ...rest
+  }: Props,
+  ref
+) => {
+  const { errorId, identifier, describedBy } = useFormSelector({
+    name,
+    helperText,
+    parentErrorId,
+    errorMessage,
+    error,
+    parentHelperId
+  });
+
+  useEffect(() => {
+    if (!name) {
+      throw new Error("Please pass a 'name' prop to your <Checkbox> component.");
+    }
+
+    if (typeof children === "object" && !isToggle(children) && indeterminate === undefined) {
+      throw new Error(
+        "If you have nested checkboxes you have to manage the indeterminate state by passing a boolean to the `indeterminate` prop."
+      );
+    }
+  }, []);
+
+  const determineLabel = () => {
+    if (label) {
+      return label;
+    } else if (children === undefined) {
+      throw new Error(
+        "Please make sure to pass either a string or more Checkbox components as a child of your Checkbox component."
+      );
+    }
+
+    if (
+      typeof children === "string" ||
+      (typeof children === "object" && (children as ReactElement).type === "span")
+    ) {
+      return children;
+    }
+
+    throw new Error(
+      "If you pass Checkboxes as a child component (to create nested checkbox tree) you need to pass a label to the parent checkbox."
+    );
+  };
+
+  const renderNestedCheckboxes = () => (
+    <ul className={classes["checkbox-list"]}>
+      {React.Children.map(children as ReactElement[], child => {
+        return (
+          <li>
+            <Checkbox
+              {...child.props}
+              parentHelperId={parentHelperId}
+              parentErrorId={parentErrorId}
+              error={error}
+              disabled={child.props.disabled ? child.props.disabled : disabled}
+            >
+              {child.props.children}
+            </Checkbox>
+          </li>
+        );
+      })}
+    </ul>
+  );
+
+  const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (disabled) {
+      return;
+    }
+    onChange?.(event);
+  };
+
+  const renderToggle = () => React.Children.toArray(children).filter(isToggle);
+
+  const iconClasses = [classes["input"], disabled ? classes["disabled"] : ""];
+
+  /** Default return value is the default checkbox */
+  return (
+    <FormSelectorWrapper
+      {...formSelectorWrapperProps}
+      className={`${classes["checkbox-wrapper"]} ${className ? className : ""}`}
+      containerProps={{ className: classes["checkbox-container"] }}
+      helperText={helperText}
+      helperProps={helperProps}
+      parentErrorId={parentErrorId}
+      errorId={errorId}
+      errorMessage={errorMessage}
+      error={error}
+      disabled={disabled}
+      identifier={identifier}
+      nestedChildren={
+        typeof children === "object" && !isToggle(children) && renderNestedCheckboxes()
+      }
+    >
+      <input
+        {...rest}
+        ref={ref}
+        disabled={disabled}
+        className={`${classes["native-input"]} ${error ? classes["error"] : ""}`}
+        checked={checked}
+        onChange={onChangeHandler}
+        aria-invalid={error as boolean}
+        aria-checked={indeterminate ? "mixed" : checked}
+        aria-describedby={describedBy}
+        id={`${identifier}-checkbox`}
+        name={name}
+        type="checkbox"
+      />
+      {renderToggle()}
+
+      {indeterminate && <Icon className={iconClasses.join(" ")} icon={Icons.MinusSquare} />}
+      {checked && !indeterminate && (
+        <Icon className={iconClasses.join(" ")} icon={Icons.CheckmarkSquare} />
+      )}
+      {!checked && !indeterminate && <Icon className={iconClasses.join(" ")} icon={Icons.Square} />}
+      <label htmlFor={`${identifier}-checkbox`}>{determineLabel()}</label>
+    </FormSelectorWrapper>
+  );
+};
+
+export const Checkbox = React.forwardRef(CheckboxComponent);

package/src/components/Form/Fieldset/Fieldset.tsx

@@ -0,0 +1,129 @@
+/*
+ * 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 readyclasses from "../../../readyclasses.module.scss";
+import classes from "./Fieldset.module.scss";
+import { Typography, Variant } from "../../Typography/Typography";
+import { Input } from "../Input/Input";
+import { Select } from "../Select/Select";
+import { Radio } from "../Radio/Radio";
+import { Checkbox } from "../Checkbox/Checkbox";
+import { Textarea } from "../Textarea/Textarea";
+import { Toggle } from "../Toggle/Toggle";
+import { Label } from "../Label/Label";
+import { FormControl } from "../FormControl/FormControl";
+import { FormSelectorWrapper } from "../FormSelectorWrapper/FormSelectorWrapper";
+import { FormHelperText } from "../FormHelperText/FormHelperText";
+import { InputWrapper } from "../Wrapper/InputWrapper/InputWrapper";
+import { SelectWrapper } from "../Wrapper/SelectWrapper/SelectWrapper";
+import { TextareaWrapper } from "../Wrapper/TextareaWrapper/TextareaWrapper";
+
+export interface Props extends ComponentPropsWithRef<"fieldset"> {
+  children?: ReactElement | ReactElement[];
+  legend: string;
+  legendStyle?: Variant;
+  hideLegend?: boolean;
+  background?: string;
+  noPadding?: boolean;
+  noBackground?: boolean;
+  required?: boolean;
+  error?: boolean;
+  disablePropagation?: boolean;
+}
+
+const FieldsetComponent: ForwardRefRenderFunction<HTMLFieldSetElement, Props> = (
+  {
+    children,
+    className,
+    legend,
+    legendStyle = "body",
+    hideLegend = false,
+    noBackground,
+    background = noBackground ? "" : "#FFF",
+    noPadding = false,
+    disabled = false,
+    required = false,
+    error = false,
+    disablePropagation = false,
+    ...rest
+  }: Props,
+  ref
+) => {
+  const renderChildren = () => {
+    if (!children) {
+      return;
+    }
+
+    /* All right, so the issue is that whenever we try to add disabled and error to a component that doesn't accept it,
+    React will throw an error. However, it might occur that we want a component inside of Fieldset because of aesthetic purposes
+    (fieldset applies a sort of container with white background and if we want to display it inside of this container... then yea).
+    So instead we supply an array of components that we want to add the disabled and error prop to and check if child.type equals one of these. */
+    const allowedComponents: React.ComponentPropsWithRef<any>[] = [
+      Input,
+      Select,
+      Radio,
+      Checkbox,
+      Textarea,
+      Toggle,
+      Label,
+      FormControl,
+      FormSelectorWrapper,
+      FormHelperText,
+      InputWrapper,
+      SelectWrapper,
+      TextareaWrapper
+    ];
+
+    return React.Children.map(children, (child: ReactElement) => {
+      if (allowedComponents.includes(child.type) && !disablePropagation) {
+        return React.cloneElement(child, {
+          disabled: child.props.disabled ?? disabled,
+          error: child.props.error ?? error
+        });
+      }
+
+      return child;
+    });
+  };
+
+  return (
+    <fieldset
+      {...rest}
+      ref={ref}
+      disabled={disabled}
+      style={{ backgroundColor: background, ...rest.style }}
+      className={`${classes.fieldset} ${noPadding ? classes["no-padding"] : ""} ${className ?? ""}`}
+    >
+      {legend && <legend className={readyclasses["sr-only"]}>{legend}</legend>}
+      {legend && !hideLegend && (
+        <Typography
+          variant={legendStyle}
+          tag="span"
+          aria-hidden="true"
+          className={`${classes["legend"]} ${required ? classes["required"] : ""} ${
+            error ? classes["error"] : ""
+          }`}
+        >
+          {legend}
+        </Typography>
+      )}
+      {renderChildren()}
+    </fieldset>
+  );
+};
+
+export const Fieldset = React.forwardRef(FieldsetComponent);

package/src/components/Form/FileUpload/FileItem/FileItem.modules.scss

@@ -0,0 +1,75 @@
+/*!
+ * 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 "../../../../mixins.module.scss";
+
+.file-item-wrapper {
+  padding: 0.5rem 1.25rem;
+  border-radius: var(--input-border-radius);
+  background-color: var(--input-background-color);
+  @include transition(all, 0.2s, ease-in-out);
+
+  [class*="icon"] {
+    font-size: 1.25rem;
+  }
+
+  .progress-bar {
+    background-color: var(--color-black10);
+  }
+
+  span[class*="bar--"] {
+    border-radius: var(--input-border-radius);
+    height: 1rem;
+  }
+
+  .file-name {
+    margin: 0;
+    display: flex;
+    align-items: center;
+    .friendly-name {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .action-icon {
+    margin-left: auto;
+    color: var(--color-primary);
+    cursor: pointer;
+    padding-left: 1.25rem;
+  }
+
+  .file-icon {
+    margin-right: 0.5rem;
+  }
+
+  .file-subtitle,
+  .progress-bar {
+    display: block;
+    margin: 0.3125rem 1.75rem;
+    padding: 0;
+  }
+
+  .error,
+  .retry {
+    color: var(--error);
+  }
+
+  .readonly {
+    color: var(--greyed-out);
+  }
+}