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

package/src/Form/Textarea/Textarea.tsx

@@ -1,76 +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 "./Textarea.module.scss";
-import { FormElement } from "../form.interfaces";
-import { useDetermineStatusIcon } from "../../hooks/useDetermineStatusIcon";
-
-export interface Props extends ComponentPropsWithRef<"textarea">, FormElement {
-  wrapperProps?: ComponentPropsWithRef<"div">;
-}
-
-const TextareaComponent: ForwardRefRenderFunction<HTMLTextAreaElement, Props> = (
-  {
-    error = false,
-    success = false,
-    disabled = false,
-    className,
-    rows = 4,
-    wrapperProps,
-    onFocus,
-    onBlur,
-    ...rest
-  }: Props,
-  ref
-) => {
-  const [focus, setFocus] = useState(false);
-
-  const wrapperClasses = [classes["textarea-wrapper"]];
-  const outlineClasses = [classes["outline"]];
-
-  wrapperProps?.className && wrapperClasses.push(wrapperProps.className);
-  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("success");
-
-  const icon = useDetermineStatusIcon({ success, error });
-
-  return (
-    <div {...wrapperProps} className={wrapperClasses.join(" ")}>
-      <textarea
-        {...rest}
-        ref={ref}
-        rows={rows}
-        className={`${error ? classes["error"] : ""} ${classes["textarea"]} ${className ?? ""}`}
-        disabled={disabled}
-        onFocus={event => {
-          setFocus(true);
-          onFocus && onFocus(event);
-        }}
-        onBlur={event => {
-          setFocus(false);
-          onBlur && onBlur(event);
-        }}
-      />
-      {icon}
-      <span className={outlineClasses.join(" ")}></span>
-    </div>
-  );
-};
-
-export const Textarea = React.forwardRef(TextareaComponent);

package/src/Form/Toggle/Toggle.module.scss

@@ -1,86 +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 "../../mixins.module.scss";
-
-$borderRadius: 2.5rem;
-
-.toggle-wrapper {
-  display: flex;
-  align-items: center;
-  position: relative;
-}
-
-.toggle {
-  width: 2rem;
-  min-width: 2rem;
-  height: 1.25rem;
-  background-color: var(--default);
-  border-radius: $borderRadius;
-  position: relative;
-  @include mixins.transition(background-color, 0.2s, ease-in-out);
-  display: block;
-  pointer-events: none;
-
-  &:before {
-    content: "";
-    width: 1rem;
-    height: 1rem;
-    border-radius: 50%;
-    display: block;
-    background-color: var(--light);
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%) translateX(0);
-    left: 0.125rem;
-    @include mixins.transition(transform, 0.2s, ease-in-out);
-  }
-
-  &.checked {
-    background-color: var(--color-primary);
-    &:before {
-      transform: translateY(-50%) translateX(calc(100% - 0.25rem));
-    }
-  }
-
-  &.disabled {
-    background-color: var(--disabled);
-    cursor: not-allowed;
-  }
-}
-
-.toggle-helper {
-  margin-left: 2.5rem;
-}
-
-.checkbox {
-  z-index: 10;
-  position: static;
-
-  input {
-    width: 2rem;
-  }
-
-  input ~ [data-icon][aria-hidden] {
-    display: none;
-  }
-
-  input:focus-visible {
-    + * {
-      border-radius: $borderRadius;
-    }
-  }
-}

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

@@ -1,83 +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,
-  useEffect
-} from "react";
-import classes from "./CheckboxWrapper.module.scss";
-import { useWrapper } from "../../../hooks/useWrapper";
-import { Wrapper, WrapperProps } from "../Wrapper/Wrapper";
-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;
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-}
-
-const CheckboxWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  { children, error = false, helperText, helperProps, fieldsetProps, ...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 CheckboxWrapper. 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,
-        parentHelperId: helperText ? helperId : false,
-        disabled: rest.disabled
-      })
-    );
-
-  return (
-    <Fieldset {...fieldsetProps} error={error} required={rest.required}>
-      <Wrapper
-        {...rest}
-        ref={ref}
-        label=""
-        helperId={helperId}
-        helperText={helperText}
-        helperProps={{
-          ...helperProps,
-          className: `${classes["checkbox-wrapper-helper"]} ${
-            error ? classes["checkbox-wrapper-error"] : ""
-          } ${helperProps?.className ?? ""}`
-        }}
-        error={error}
-        errorMessageIcon={Icons.Error}
-        errorId={errorId}
-      >
-        {renderChildren()}
-      </Wrapper>
-    </Fieldset>
-  );
-};
-
-export const CheckboxWrapper = React.forwardRef(CheckboxWrapperComponent);

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

@@ -1,70 +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 "../../../mixins.module.scss";
-
-@include mixins.inputLabelPrimaryColorOnFocus("label.input-label.focus");
-
-input {
-  &.floating-label {
-    padding-top: 1rem;
-  }
-}
-
-.input-wrapper-helper {
-  margin-top: 0.25rem;
-}
-
-.input-wrapper {
-  [data-icon]:before {
-    @include mixins.transition(all, 0.2s, ease-in-out);
-    transform: translateY(0px);
-    font-size: 1.125rem;
-  }
-
-  .floating-label-active [data-icon]:before {
-    transform: translateY(5px);
-  }
-
-  [data-prefix],
-  [data-suffix] {
-    transform: translateY(-0.125rem);
-    font-family: var(--font-family);
-  }
-
-  [data-prefix] + input {
-    padding-left: 0.5rem;
-  }
-
-  [data-suffix] {
-    padding-left: 1.25rem;
-  }
-
-  input + [data-suffix] {
-    padding-left: 0.5rem;
-  }
-
-  .disabled {
-    background-color: var(--disabled);
-    cursor: not-allowed;
-  }
-}
-
-.floating-label-active [data-prefix],
-.floating-label-active [data-suffix] {
-  padding-top: 1rem;
-  transform: translateY(0);
-}

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

@@ -1,217 +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 { InputWrapper, Props } from "./InputWrapper";
-import { render } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-const defaultParams: Props = {
-  label: "Example label",
-  type: "text",
-  name: "Example input",
-  helperText: "this is helpertext",
-  errorMessage: "This is an error",
-  error: false,
-  value: "value",
-  onChange: jest.fn()
-};
-
-const createInputWrapper = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const queries = render(<InputWrapper {...parameters} data-testid="inputwrapper" />);
-  const inputwrapper = queries.getByTestId("inputwrapper");
-
-  return {
-    ...queries,
-    inputwrapper
-  };
-};
-
-describe("InputWrapper should render", () => {
-  it("renders without crashing", () => {
-    const { inputwrapper } = createInputWrapper();
-
-    expect(inputwrapper).toBeTruthy();
-  });
-
-  it("has helpertext", () => {
-    const { getByTestId } = createInputWrapper(defaultParams => ({
-      ...defaultParams,
-      helperProps: { "data-testid": "helper_text" }
-    }));
-
-    const helperText = getByTestId("helper_text");
-
-    expect(helperText).toBeTruthy();
-  });
-
-  it("is described by the helpertext", () => {
-    const { getByTestId } = createInputWrapper(defaultParams => ({
-      ...defaultParams,
-      inputProps: { "data-testid": "input" },
-      helperProps: { "data-testid": "helper_text" }
-    }));
-
-    const input = getByTestId("input");
-    const helperId = getByTestId("helper_text").getAttribute("id");
-
-    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", () => {
-  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 (
-        <InputWrapper
-          {...defaultParams}
-          inputProps={{ 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("InputWrapper should be interactive", () => {
-  it("executes the eventlisteners", () => {
-    const onFocusHandler = jest.fn();
-    const onChangeHandler = jest.fn();
-    const onBlurHandler = jest.fn();
-
-    const { getByTestId } = createInputWrapper(defaultParams => ({
-      ...defaultParams,
-      inputProps: {
-        "data-testid": "input"
-      },
-      onChange: onChangeHandler,
-      onFocus: onFocusHandler,
-      onBlur: onBlurHandler,
-      value: ""
-    }));
-
-    const input = getByTestId("input");
-
-    userEvent.tab();
-    userEvent.keyboard("test");
-
-    expect(input).toHaveFocus();
-    expect(onChangeHandler).toHaveBeenCalled();
-    expect(onFocusHandler).toHaveBeenCalled();
-
-    userEvent.tab();
-
-    expect(onBlurHandler).toHaveBeenCalled();
-  });
-});
-
-describe("InputWrapper should support prefix and suffix", () => {
-  const prefix = "prefix";
-  const suffix = "suffix";
-
-  const hasPrefixAndSuffixDefined = (container: HTMLElement) => {
-    expect(container.querySelector("[data-prefix]")).toHaveTextContent(prefix);
-    expect(container.querySelector("[data-suffix]")).toHaveTextContent(suffix);
-  };
-
-  it("renders prefix and sufix when input has focus", () => {
-    const { container, getByTestId } = createInputWrapper(defaultParams => ({
-      ...defaultParams,
-      value: "",
-      inputProps: { "data-testid": "input", prefix, suffix }
-    }));
-
-    const input = getByTestId("input");
-
-    expect(container.querySelector("[data-prefix]")).toBeNull();
-    expect(container.querySelector("[data-suffix]")).toBeNull();
-
-    userEvent.tab();
-    expect(input).toHaveFocus();
-    hasPrefixAndSuffixDefined(container);
-  });
-
-  it("renders prefix and sufix when input has value", () => {
-    const { container, getByTestId } = createInputWrapper(defaultParams => ({
-      ...defaultParams,
-      inputProps: { "data-testid": "input", prefix, suffix }
-    }));
-
-    const input = getByTestId("input");
-
-    hasPrefixAndSuffixDefined(container);
-
-    userEvent.tab();
-    expect(input).toHaveFocus();
-    hasPrefixAndSuffixDefined(container);
-
-    userEvent.tab();
-    expect(input).not.toHaveFocus();
-    hasPrefixAndSuffixDefined(container);
-  });
-});