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

package/src/Form/Radio/Radio.test.tsx

@@ -1,130 +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 { Radio, Props } from "./Radio";
-import { render } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-const onChangeHandeler = jest.fn();
-
-const defaultParams: Props = {
-  value: "test",
-  children: "Label",
-  checked: false,
-  error: false,
-  errorMessage: "errormessage",
-  disabled: false,
-  formSelectorWrapperProps: { "data-testid": "radiowrapper" },
-  helperText: "helpertext",
-  onChange: onChangeHandeler
-};
-
-const createRadio = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const queries = render(<Radio {...parameters} data-testid="radio" />);
-  const radio = queries.getByTestId("radio");
-  const radiowrapper = queries.getByTestId("radiowrapper");
-
-  return {
-    ...queries,
-    radio,
-    radiowrapper
-  };
-};
-
-describe("Radio should render", () => {
-  it("renders without crashing and has proper attributes/values", () => {
-    const { radio } = createRadio();
-
-    expect((radio as HTMLInputElement).value).toBe("test");
-    expect((radio as HTMLInputElement).checked).toBe(false);
-    expect(radio).toBeTruthy();
-  });
-
-  it("it is checked", () => {
-    const { radio } = createRadio(defaultParams => ({ ...defaultParams, checked: true }));
-
-    expect((radio as HTMLInputElement).checked).toBe(true);
-  });
-
-  it("it is disabled", () => {
-    const { radio, radiowrapper } = createRadio(defaultParams => ({
-      ...defaultParams,
-      disabled: true
-    }));
-
-    expect((radio as HTMLInputElement).disabled).toBe(true);
-    expect(radiowrapper).toHaveClass("disabled");
-  });
-
-  it("has the correct describedby value when theres no error", async () => {
-    const { radio, findByText } = createRadio(defaultParams => ({
-      ...defaultParams,
-      error: true
-    }));
-
-    const error = await findByText("errormessage");
-
-    expect(radio).toHaveAttribute("aria-describedby", error.id);
-  });
-});
-
-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 <Radio {...defaultParams} data-ref="testing" ref={ref} />;
-    };
-
-    const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute("data-ref", "testing");
-    };
-
-    render(<ExampleComponent propagateRef={refCheck} />);
-  });
-});
-
-describe("Radio should be interactive", () => {
-  it("should call onChange when clicked", () => {
-    const { radio } = createRadio();
-
-    expect(onChangeHandeler).not.toBeCalled();
-    userEvent.click(radio);
-    expect(onChangeHandeler).toBeCalledTimes(1);
-  });
-
-  it("should not call onChange when disabled", () => {
-    const { radio } = createRadio(defaultParams => ({ ...defaultParams, disabled: true }));
-
-    userEvent.click(radio);
-    expect(onChangeHandeler).not.toBeCalled();
-  });
-});

package/src/Form/Radio/Radio.tsx

@@ -1,132 +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 } from "react";
-import { Icon, Icons } from "../../Icon/Icon";
-import { Props as HelperProps } from "../FormHelperText/FormHelperText";
-import classes from "./Radio.module.scss";
-import { useFormSelector } from "../../hooks/useFormSelector";
-import { FormSelector } from "../form.interfaces";
-import {
-  FormSelectorWrapper,
-  Props as FormSelectorWrapperProps
-} from "../FormSelectorWrapper/FormSelectorWrapper";
-
-export interface Props extends ComponentPropsWithRef<"input">, FormSelector {
-  children: string;
-  value: string;
-  formSelectorWrapperProps?: FormSelectorWrapperProps;
-  helperProps?: HelperProps;
-}
-
-const RadioComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
-  {
-    children,
-    disabled,
-    className,
-    value,
-    name,
-    helperText,
-    parentErrorId,
-    parentHelperId,
-    error,
-    errorMessage,
-    checked = false,
-    formSelectorWrapperProps,
-    helperProps,
-    onChange,
-    ...rest
-  }: Props,
-  ref
-) => {
-  const { errorId, identifier, describedBy } = useFormSelector({
-    name,
-    helperText,
-    parentErrorId,
-    errorMessage,
-    error,
-    parentHelperId
-  });
-
-  const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent) => {
-    if (disabled) {
-      return;
-    }
-    /** We have to clone the native event we got here and change the "target" property to the value. Otherwise, this regular event has "on" as it's event.target.value, which is useless. */
-    const nativeEvent: any = event.nativeEvent || event;
-    const clonedEvent = new nativeEvent.constructor(nativeEvent.type, nativeEvent);
-
-    Object.defineProperty(clonedEvent, "target", {
-      writable: true,
-      value: { value: value }
-    });
-
-    onChange && onChange(clonedEvent);
-  };
-
-  /** Default return value is the default radio */
-  return (
-    <FormSelectorWrapper
-      {...formSelectorWrapperProps}
-      className={`${classes["radio-wrapper"]} ${className ?? ""}`}
-      containerProps={{ className: classes["radio-container"] }}
-      helperText={helperText}
-      helperProps={helperProps}
-      parentErrorId={parentErrorId}
-      errorId={errorId}
-      errorMessage={errorMessage}
-      error={error}
-      disabled={disabled}
-      identifier={identifier}
-    >
-      <input
-        {...rest}
-        ref={ref}
-        disabled={disabled}
-        tabIndex={0}
-        className={`${classes["native-input"]} ${error ? classes["error"] : ""}`}
-        onChange={onChangeHandler}
-        checked={checked}
-        aria-invalid={error ? true : false}
-        aria-checked={checked}
-        aria-describedby={describedBy}
-        name={name}
-        value={value}
-        id={`${identifier}-radio`}
-        type="radio"
-      />
-
-      {checked && (
-        <Icon
-          className={`${classes["input"]} ${disabled ? classes["disabled"] : ""}`}
-          icon={Icons.Radio}
-        />
-      )}
-      {!checked && (
-        <Icon
-          className={`${classes["input"]} ${disabled ? classes["disabled"] : ""}`}
-          icon={Icons.Circle}
-        />
-      )}
-
-      <label onClick={onChangeHandler} htmlFor={`${identifier}-radio`}>
-        {children}
-      </label>
-    </FormSelectorWrapper>
-  );
-};
-
-export const Radio = React.forwardRef(RadioComponent);

package/src/Form/Select/Select.module.scss

@@ -1,240 +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";
-
-$listItemHeight: 2.125rem;
-
-.select {
-  position: relative;
-  box-sizing: border-box;
-  @include mixins.transition(all, 0.2s, ease-in-out);
-  border: 0;
-  border-radius: var(--input-border-radius);
-  background-color: var(--input-background-color);
-  font-size: var(--font-size);
-
-  [data-display] {
-    color: var(--greyed-out);
-    font-family: var(--font-family);
-  }
-
-  &.expanded {
-    .list-wrapper {
-      background: var(--light);
-    }
-  }
-
-  &:not(.expanded) {
-    button:focus:not(.error) {
-      border: var(--input-border-width-focus) solid var(--color-focus);
-      padding: 0
-        calc(
-          variables.$form-element-horizontal-padding-mobile - var(--input-border-width-focus) +
-            var(--input-border-width)
-        );
-    }
-  }
-
-  &:hover:not(.disabled):not(.expanded):not(.error) {
-    button:not(:focus) {
-      border-color: var(--default);
-      border-width: var(--input-border-width);
-    }
-  }
-
-  .custom-select {
-    position: relative;
-    width: 100%;
-    min-height: calc(4rem - (2 * var(--input-border-width)));
-    padding: 0 variables.$form-element-horizontal-padding-mobile;
-    background-color: transparent;
-    border-color: var(--light-grey-border);
-    border-style: var(--input-border-style);
-    border-width: var(--input-border-width);
-    border-radius: var(--input-border-radius);
-    font-size: var(--font-size);
-    cursor: pointer;
-    @include mixins.transition(all, 0.2s, ease-in-out);
-
-    &:focus {
-      outline: 0;
-    }
-
-    &.error {
-      border-color: var(--error);
-      color: var(--error);
-    }
-
-    &.error:focus {
-      border-width: var(--input-border-width-focus);
-    }
-  }
-
-  .list-wrapper {
-    border-color: var(--light-grey-border);
-    border-style: var(--input-border-style);
-    border-width: var(--input-border-width);
-    border-radius: var(--input-border-radius);
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.29);
-    position: absolute;
-    z-index: 11;
-    top: 0;
-    left: 0;
-    width: 100%;
-    overflow: auto;
-  }
-
-  ul {
-    box-sizing: border-box;
-    padding: 0.25rem 0;
-    width: 100%;
-    margin: 0;
-    list-style: none;
-    background-color: var(--light);
-    border-radius: var(--input-border-radius);
-    color: var(--default);
-    text-align: left;
-    max-height: calc($listItemHeight * 10);
-
-    li {
-      padding: 0.5rem 1rem;
-      font-size: var(--font-size);
-      margin: 0;
-      position: relative;
-      line-height: 1;
-      cursor: pointer;
-
-      &:after {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        background-color: transparent;
-        width: 100%;
-        height: 100%;
-        opacity: 0.05;
-      }
-
-      &:focus {
-        outline: 1px solid var(--color-primary);
-        outline-offset: -1px;
-      }
-
-      &:hover:after {
-        background-color: var(--color-primary);
-      }
-
-      &.disabled {
-        color: var(--greyed-out);
-        background-color: var(--disabled);
-        pointer-events: none;
-      }
-    }
-  }
-}
-
-.selected-option {
-  &:before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    background-color: var(--color-primary);
-    width: 100%;
-    height: 100%;
-    opacity: 0.1;
-  }
-}
-
-.selected {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  pointer-events: none;
-}
-
-.status {
-  position: absolute;
-  top: 50%;
-  right: 1.625rem;
-  transform: translateY(-50%);
-  display: flex;
-  align-items: center;
-
-  [data-icon-status="success"] {
-    color: var(--success);
-    font-size: 1.25rem;
-  }
-
-  [data-icon-status="error"] {
-    color: var(--error);
-    font-size: 1.25rem;
-  }
-
-  .triangle-down {
-    color: var(--default);
-    font-size: 0.625rem;
-  }
-
-  * + * {
-    margin-left: 1.25rem;
-  }
-}
-
-.placeholder {
-  color: var(--greyed-out);
-}
-
-.select-search-wrapper + ul {
-  border-radius: 0 0 var(--input-border-radius) var(--input-border-radius);
-}
-
-.select-search {
-  width: 100%;
-  box-sizing: border-box;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.disabled {
-  cursor: not-allowed;
-  color: var(--greyed-out);
-  background-color: var(--disabled);
-
-  > * {
-    pointer-events: none;
-  }
-}
-
-@media only screen and (min-width: 30em) {
-  .select {
-    .custom-select {
-      padding: 0 variables.$form-element-horizontal-padding-desktop;
-    }
-
-    &:not(.expanded) {
-      button:focus:not(.error) {
-        padding: 0
-          calc(
-            variables.$form-element-horizontal-padding-desktop - var(--input-border-width-focus) +
-              var(--input-border-width)
-          );
-      }
-    }
-  }
-}