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

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

@@ -1,183 +0,0 @@
-/*
- * 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);
-  });
-
-  it("has floating label active when it has a placeholder", async () => {
-    const { findByText } = createTextareaWrapper(defaultParams => ({
-      ...defaultParams,
-      placeholder: "placeholder"
-    }));
-
-    const label = await findByText("textarea_label");
-
-    expect(label).toHaveClass("floating-label-active");
-  });
-});
-
-describe("TextarenaWrapper should be interactive", () => {
-  it("Fires the onChange, onFocus & onBlur events", () => {
-    const onFocusHandler = jest.fn();
-    const onChangeHandler = jest.fn();
-    const onBlurHandler = jest.fn();
-
-    const { textarea } = createTextareaWrapper(defaultParams => ({
-      ...defaultParams,
-      onChange: onChangeHandler,
-      onFocus: onFocusHandler,
-      onBlur: onBlurHandler
-    }));
-
-    userEvent.tab();
-    expect(textarea).toHaveFocus();
-
-    userEvent.keyboard("input");
-    userEvent.tab();
-
-    expect(onChangeHandler).toHaveBeenCalledTimes(5);
-    expect(onFocusHandler).toHaveBeenCalled();
-    expect(onBlurHandler).toHaveBeenCalled();
-  });
-
-  it("Fires the onMouseEnter & onMouseLeave events", () => {
-    const onMouseEnterHandler = jest.fn();
-    const onMouseLeaveHandler = jest.fn();
-
-    const { textarea } = createTextareaWrapper(defaultParams => ({
-      ...defaultParams,
-      onMouseEnter: onMouseEnterHandler,
-      onMouseLeave: onMouseLeaveHandler
-    }));
-
-    userEvent.hover(textarea);
-    expect(onMouseEnterHandler).toHaveBeenCalled();
-    userEvent.unhover(textarea);
-    expect(onMouseLeaveHandler).toHaveBeenCalled();
-  });
-});

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

@@ -1,137 +0,0 @@
-/*
- * 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, useState } from "react";
-import classes from "./TextareaWrapper.module.scss";
-import { Wrapper, WrapperProps } from "../Wrapper/Wrapper";
-import { Textarea, Props as TextareaProps } from "../../Textarea/Textarea";
-import { useWrapper } from "../../../hooks/useWrapper";
-
-export interface Props
-  extends Omit<
-      ComponentPropsWithRef<"div">,
-      "onFocus" | "onChange" | "onBlur" | "onMouseEnter" | "onMouseLeave"
-    >,
-    Omit<WrapperProps, "onFocus" | "onChange" | "onBlur" | "onMouseEnter" | "onMouseLeave"> {
-  placeholder?: string;
-  textareaProps?: TextareaProps;
-  value: string;
-  onFocus?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
-  onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
-  onBlur?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
-  onMouseEnter?: (event: React.MouseEvent<HTMLTextAreaElement>) => void;
-  onMouseLeave?: (event: React.MouseEvent<HTMLTextAreaElement>) => void;
-}
-
-const TextareaWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  {
-    name,
-    error,
-    success,
-    value,
-    label,
-    placeholder,
-    textareaProps,
-    helperProps,
-    onChange,
-    onFocus,
-    onBlur,
-    onMouseEnter,
-    onMouseLeave,
-    disabled,
-    ...rest
-  }: Props,
-  ref
-) => {
-  const {
-    errorId,
-    floatingLabelActive,
-    setFloatingLabelActive,
-    hasFocus,
-    setHasFocus,
-    helperId,
-    labelId
-  } = useWrapper(value, placeholder);
-  const [hover, setHover] = useState(false);
-
-  const wrapperClasses: string[] = [];
-
-  hasFocus && wrapperClasses.push(classes["focus"]);
-  hover && wrapperClasses.push(classes["hover"]);
-  disabled && wrapperClasses.push(classes["disabled"]);
-  error && wrapperClasses.push(classes["error"]);
-
-  return (
-    <Wrapper
-      {...rest}
-      ref={ref}
-      disabled={disabled}
-      labelProps={{
-        id: labelId,
-        className: `${classes["textarea-label"]} ${wrapperClasses.join(" ")}`
-      }}
-      name={name}
-      label={label}
-      helperId={helperId}
-      helperProps={{
-        ...helperProps,
-        className: classes["textarea-helper-text"]
-      }}
-      error={error}
-      floatingLabelActive={floatingLabelActive}
-      errorId={errorId}
-    >
-      <Textarea
-        {...textareaProps}
-        error={error}
-        aria-labelledby={label && labelId}
-        aria-describedby={error ? errorId : helperId}
-        placeholder={placeholder}
-        name={name}
-        id={name}
-        value={value}
-        success={success}
-        onChange={onChange}
-        onFocus={e => {
-          onFocus && onFocus(e);
-          setHasFocus(true);
-          setFloatingLabelActive(true);
-        }}
-        onBlur={e => {
-          onBlur && onBlur(e);
-          setHasFocus(false);
-          e.target.value || e.target.placeholder || textareaProps?.placeholder?.length
-            ? setFloatingLabelActive(true)
-            : setFloatingLabelActive(false);
-        }}
-        onMouseEnter={e => {
-          onMouseEnter && onMouseEnter(e);
-          setHover(true);
-        }}
-        onMouseLeave={e => {
-          onMouseLeave && onMouseLeave(e);
-          setHover(false);
-        }}
-        className={`${classes["textarea"]} ${error ? classes["error"] : ""}`}
-        wrapperProps={{
-          className: `${wrapperClasses.join(" ")} ${classes["textarea-wrapper"]}`
-        }}
-      />
-    </Wrapper>
-  );
-};
-
-export const TextareaWrapper = React.forwardRef(TextareaWrapperComponent);

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

@@ -1,67 +0,0 @@
-/*!
- * 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";
-
-.floating-wrapper {
-  position: relative;
-
-  .floating-label {
-    font-family: var(--font-family);
-    font-size: 1rem;
-    position: absolute;
-    z-index: 2;
-    top: 1.3125rem;
-    left: variables.$form-element-horizontal-padding-mobile;
-    transform-origin: left top;
-    @include mixins.transition(all, 0.2s, ease-in-out);
-    pointer-events: none;
-
-    &.floating-label-active {
-      font-size: 0.75rem;
-      transform: translateY(-0.8rem);
-      color: var(--default);
-    }
-
-    &.error {
-      color: var(--error);
-    }
-
-    &.disabled {
-      color: var(--greyed-out);
-    }
-  }
-}
-
-.wrapper + fieldset,
-.wrapper + .wrapper {
-  margin-top: 1rem;
-}
-
-.required {
-  &:after {
-    content: " *";
-  }
-}
-
-@media only screen and (min-width: 30em) {
-  .floating-wrapper {
-    .floating-label {
-      left: variables.$form-element-horizontal-padding-desktop;
-    }
-  }
-}

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

@@ -1,59 +0,0 @@
-/*
- * 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 { Wrapper } from "./Wrapper";
-import { render } from "@testing-library/react";
-import { Input } from "../../Input/Input";
-
-describe("Wrapper should render", () => {
-  it("renders without crashing", () => {
-    const { container } = render(
-      <Wrapper floatingLabelActive={true} label="label" name="name" helperId="helperID">
-        <Input onChange={jest.fn()} name="test" type="text" value="test" />
-      </Wrapper>
-    );
-    const wrapper = container.querySelector(".wrapper");
-
-    expect(wrapper).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>) => void;
-    }) => {
-      const ref = useRef(null);
-
-      useEffect(() => {
-        if (ref.current) {
-          propagateRef && propagateRef(ref);
-        }
-      }, [ref]);
-
-      return <Wrapper name="wrapper" children={<div></div>} data-ref="testing" ref={ref} />;
-    };
-
-    const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute("data-ref", "testing");
-    };
-
-    render(<ExampleComponent propagateRef={refCheck} />);
-  });
-});

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

@@ -1,123 +0,0 @@
-/*
- * 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 { FormGroup, Props as FormGroupProps } from "../../FormGroup/FormGroup";
-import { Label, Props as LabelProps } from "../../Label/Label";
-import classes from "./Wrapper.module.scss";
-import { Props as HelperProps } from "../../FormHelperText/FormHelperText";
-import { FormElement } from "../../form.interfaces";
-
-export interface Props extends ComponentPropsWithRef<"div">, FormGroupProps {
-  children: ReactElement | ReactElement[];
-  floatingLabelActive?: boolean;
-  floatingLabel?: boolean;
-  helperIndent?: number;
-  label?: string;
-  labelProps?: LabelProps;
-  name: string;
-  /** This does NOT add validation! It simply adds an asterix on the Label! */
-  required?: boolean;
-  innerClassName?: string;
-}
-
-/** For components that extend this component we create an interface (InputWrapper, SelectWrapper, etc.) */
-export interface WrapperProps extends FormElement {
-  errorMessage?: string;
-  helperText?: string;
-  helperProps?: HelperProps;
-  label?: string;
-  name: string;
-  required?: boolean;
-  disabled?: boolean;
-}
-
-const WrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  {
-    children,
-    className,
-    error,
-    errorMessage,
-    errorId,
-    errorMessageIcon,
-    errorMessageIconPosition,
-    helperText,
-    helperId,
-    floatingLabel = true,
-    floatingLabelActive,
-    required,
-    helperProps,
-    helperIndent,
-    labelProps,
-    label,
-    disabled,
-    name,
-    innerClassName,
-    ...rest
-  }: Props,
-  ref
-) => {
-  const renderChildren = () =>
-    React.Children.map(children, child =>
-      React.cloneElement(child, {
-        disabled
-      })
-    );
-
-  const labelClasses = [];
-
-  floatingLabel && labelClasses.push(classes["floating-label"]);
-  floatingLabel && floatingLabelActive && labelClasses.push(classes["floating-label-active"]);
-  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 ?? ""}`}>
-      <FormGroup
-        error={error}
-        errorMessage={errorMessage}
-        errorId={errorId}
-        errorMessageIcon={errorMessageIcon}
-        errorMessageIconPosition={errorMessageIconPosition}
-        helperText={helperText}
-        helperId={helperId}
-        helperProps={helperProps}
-        helperIndent={helperIndent}
-      >
-        <div
-          className={`${floatingLabel ? classes["floating-wrapper"] : ""} ${
-            innerClassName ? innerClassName : ""
-          }`}
-        >
-          {label && (
-            <Label
-              {...labelProps}
-              className={`${classes.label} ${labelClasses.join(" ")}`}
-              htmlFor={name}
-            >
-              {label}
-            </Label>
-          )}
-          {renderChildren()}
-        </div>
-      </FormGroup>
-    </div>
-  );
-};
-
-export const Wrapper = React.forwardRef(WrapperComponent);

package/src/Form/form.interfaces.ts

@@ -1,32 +0,0 @@
-/*
- * 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 { DataAttributeKey } from "../interfaces";
-
-/** Radios */
-export interface FormSelector extends FormElement {
-  helperText?: string;
-  errorMessage?: string;
-  parentHelperId?: string;
-  parentErrorId?: string;
-}
-
-/** Default form elements */
-export interface FormElement {
-  error?: boolean;
-  success?: boolean;
-  [dataAttribute: DataAttributeKey]: unknown;
-}