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

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

@@ -1,180 +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,
-  useEffect,
-  useRef,
-  useState
-} from "react";
-import { Input, Type, Props as InputProps } from "../../Input/Input";
-import classes from "./InputWrapper.module.scss";
-import { Wrapper, WrapperProps } from "../Wrapper/Wrapper";
-import { useWrapper } from "../../../hooks/useWrapper";
-import { remToPx } from "../../../util/helper";
-
-interface PartialInputProps extends Partial<InputProps> {}
-
-export interface Props extends ComponentPropsWithRef<"div">, WrapperProps {
-  label: string;
-  type: Type;
-  name: string;
-  inputProps?: PartialInputProps;
-  value: string;
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
-  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
-}
-
-const useLabelOffset = (
-  input: React.RefObject<HTMLInputElement>,
-  floatingLabelActive: boolean,
-  prefix?: string
-) => {
-  const [labelOffset, setLabelOffset] = useState({});
-
-  const resetLabelOffset = () => setLabelOffset({ left: undefined });
-
-  useEffect(() => {
-    if (input.current && prefix) {
-      if (floatingLabelActive) {
-        resetLabelOffset();
-      } else {
-        const spacingBetweenPrefixAndInput = 4;
-        const prefixDifference =
-          getComputedStyle(input.current).paddingLeft + spacingBetweenPrefixAndInput;
-        setLabelOffset({ left: `${prefixDifference}px` });
-      }
-    }
-  }, [input.current, prefix, floatingLabelActive]);
-
-  return { labelOffset };
-};
-
-const InputWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  {
-    type,
-    name,
-    inputProps,
-    helperText,
-    helperProps,
-    value,
-    className,
-    error,
-    success,
-    onChange,
-    onBlur,
-    onFocus,
-    disabled,
-    ...rest
-  }: Props,
-  ref
-) => {
-  const {
-    errorId,
-    floatingLabelActive,
-    setFloatingLabelActive,
-    hasFocus,
-    setHasFocus,
-    helperId,
-    labelId
-  } = useWrapper(value, inputProps?.placeholder, type);
-  const { prefix, suffix } = inputProps || {};
-  const input = useRef<HTMLInputElement>(null);
-  const hasValueOrActiveFloatingLabel = !!value || floatingLabelActive;
-  const helperIndent = window.innerWidth >= remToPx(30) ? remToPx(1.25) : remToPx(1);
-  const { labelOffset } = useLabelOffset(
-    (inputProps && (inputProps.ref as React.RefObject<HTMLInputElement>)) || input,
-    floatingLabelActive,
-    prefix
-  );
-
-  const labelClasses = [classes["input-label"]];
-  hasFocus && labelClasses.push(classes["focus"]);
-
-  const inputWrapperClasses = [];
-  floatingLabelActive && inputWrapperClasses.push(classes["floating-label-active"]);
-  inputProps?.wrapperProps?.className &&
-    inputWrapperClasses.push(inputProps?.wrapperProps?.className);
-  disabled && inputWrapperClasses.push(classes["disabled"]);
-
-  return (
-    <Wrapper
-      {...rest}
-      ref={ref}
-      name={name}
-      className={`${classes["input-wrapper"]} ${className ?? ""}`}
-      labelProps={{
-        id: labelId,
-        className: labelClasses.join(" "),
-        style: { ...labelOffset }
-      }}
-      floatingLabelActive={floatingLabelActive}
-      errorId={errorId}
-      error={error}
-      helperId={helperId}
-      helperText={helperText}
-      helperProps={{
-        ...helperProps,
-        className: `${classes["input-wrapper-helper"]} ${helperProps?.className ?? ""} `
-      }}
-      helperIndent={helperIndent}
-      disabled={disabled}
-    >
-      <Input
-        {...inputProps}
-        prefix={hasValueOrActiveFloatingLabel ? prefix : ""}
-        suffix={hasValueOrActiveFloatingLabel ? suffix : ""}
-        wrapperProps={{
-          className: inputWrapperClasses.join(" ")
-        }}
-        ref={(inputProps && inputProps.ref) || input}
-        aria-labelledby={labelId}
-        aria-describedby={error ? errorId : helperId}
-        onChange={onChange}
-        onFocus={e => {
-          onFocus && onFocus(e);
-          setHasFocus(true);
-          setFloatingLabelActive(true);
-        }}
-        onBlur={e => {
-          onBlur && onBlur(e);
-          setHasFocus(false);
-          e.target.value ||
-          e.target.placeholder ||
-          inputProps?.placeholder?.length ||
-          type === "datetime-local" ||
-          type === "time" ||
-          type === "date"
-            ? setFloatingLabelActive(true)
-            : setFloatingLabelActive(false);
-        }}
-        className={`${floatingLabelActive ? classes["floating-label"] : ""} ${
-          inputProps?.className ?? ""
-        }`}
-        name={name}
-        success={success}
-        error={error}
-        id={name}
-        value={value}
-        type={type}
-      />
-    </Wrapper>
-  );
-};
-
-export const InputWrapper = React.forwardRef(InputWrapperComponent);

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

@@ -1,100 +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 "./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(value);
-
-  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}
-        floatingLabel={false}
-      >
-        {renderChildren()}
-      </Wrapper>
-    </Fieldset>
-  );
-};
-
-export const RadioWrapper = React.forwardRef(RadioWrapperComponent);

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

@@ -1,38 +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/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.25rem;
-  margin-left: variables.$form-element-horizontal-padding-mobile;
-}
-
-.floating-label-active [data-display] {
-  top: calc(50% + 0.5rem);
-}
-
-@media only screen and (min-width: 30em) {
-  .select-helper-text {
-    margin-left: variables.$form-element-horizontal-padding-desktop;
-  }
-}

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

@@ -1,185 +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 { 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();
-
-    userEvent.click(select as Element);
-
-    const option3 = await findByText("Option 3");
-
-    userEvent.click(option3 as Element);
-
-    expect(onChangeHandler).toHaveBeenCalled();
-  });
-});

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

@@ -1,90 +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,
-  ReactChild,
-  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: ReactChild | ReactChild[];
-  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, floatingLabelActive, helperId, labelId } = useWrapper(value, placeholder);
-
-  return (
-    <Wrapper
-      {...rest}
-      ref={ref}
-      floatingLabelActive={floatingLabelActive}
-      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={`${floatingLabelActive ? classes["floating-label-active"] : ""} ${
-          selectProps?.className ?? ""
-        }`}
-      >
-        {children as ReactElement[]}
-      </Select>
-    </Wrapper>
-  );
-};
-
-export const SelectWrapper = React.forwardRef(SelectWrapperComponent);

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

@@ -1,66 +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.textarea-label");
-
-.textarea-wrapper {
-  &:after {
-    content: "";
-    @include mixins.transition(all, 0.15s, ease-in-out);
-    display: block;
-    width: calc(95%);
-    height: 1.625rem;
-    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 {
-    padding-top: 1.625rem;
-
-    &:active:not(:disabled) {
-      border-color: var(--color-primary);
-    }
-
-    &:focus:not(:disabled) {
-      outline: none;
-    }
-  }
-
-  [data-icon-status="success"],
-  [data-icon-status="error"] {
-    top: 1.75rem;
-  }
-}
-
-.textarea-helper-text {
-  margin-top: 0.25rem;
-  margin-left: 1.25rem;
-}