@onewelcome/react-lib-components 0.2.0 → 0.2.3

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

@@ -1,20 +1,20 @@
-import React, { useEffect, useRef } from 'react';
-import { Radio, Props } from './Radio';
-import { render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+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',
+  value: "test",
+  children: "Label",
   checked: false,
   error: false,
-  errorMessage: 'errormessage',
+  errorMessage: "errormessage",
   disabled: false,
-  formSelectorWrapperProps: { 'data-testid': 'radiowrapper' },
-  helperText: 'helpertext',
-  onChange: onChangeHandeler,
+  formSelectorWrapperProps: { "data-testid": "radiowrapper" },
+  helperText: "helpertext",
+  onChange: onChangeHandeler
 };
 
 const createRadio = (params?: (defaultParams: Props) => Props) => {
@@ -23,57 +23,57 @@ const createRadio = (params?: (defaultParams: Props) => Props) => {
     parameters = params(defaultParams);
   }
   const queries = render(<Radio {...parameters} data-testid="radio" />);
-  const radio = queries.getByTestId('radio');
-  const radiowrapper = queries.getByTestId('radiowrapper');
+  const radio = queries.getByTestId("radio");
+  const radiowrapper = queries.getByTestId("radiowrapper");
 
   return {
     ...queries,
     radio,
-    radiowrapper,
+    radiowrapper
   };
 };
 
-describe('Radio should render', () => {
-  it('renders without crashing and has proper attributes/values', () => {
+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).value).toBe("test");
     expect((radio as HTMLInputElement).checked).toBe(false);
     expect(radio).toBeTruthy();
   });
 
-  it('it is checked', () => {
-    const { radio } = createRadio((defaultParams) => ({ ...defaultParams, checked: true }));
+  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) => ({
+  it("it is disabled", () => {
+    const { radio, radiowrapper } = createRadio(defaultParams => ({
       ...defaultParams,
-      disabled: true,
+      disabled: true
     }));
 
     expect((radio as HTMLInputElement).disabled).toBe(true);
-    expect(radiowrapper).toHaveClass('disabled');
+    expect(radiowrapper).toHaveClass("disabled");
   });
 
-  it('has the correct describedby value when theres no error', async () => {
-    const { radio, findByText } = createRadio((defaultParams) => ({
+  it("has the correct describedby value when theres no error", async () => {
+    const { radio, findByText } = createRadio(defaultParams => ({
       ...defaultParams,
-      error: true,
+      error: true
     }));
 
-    const error = await findByText('errormessage');
+    const error = await findByText("errormessage");
 
-    expect(radio).toHaveAttribute('aria-describedby', error.id);
+    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', () => {
+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
     }: {
       propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
     }) => {
@@ -89,15 +89,15 @@ describe('ref should work', () => {
     };
 
     const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+      expect(ref.current).toHaveAttribute("data-ref", "testing");
     };
 
     render(<ExampleComponent propagateRef={refCheck} />);
   });
 });
 
-describe('Radio should be interactive', () => {
-  it('should call onChange when clicked', () => {
+describe("Radio should be interactive", () => {
+  it("should call onChange when clicked", () => {
     const { radio } = createRadio();
 
     expect(onChangeHandeler).not.toBeCalled();
@@ -105,8 +105,8 @@ describe('Radio should be interactive', () => {
     expect(onChangeHandeler).toBeCalledTimes(1);
   });
 
-  it('should not call onChange when disabled', () => {
-    const { radio } = createRadio((defaultParams) => ({ ...defaultParams, disabled: true }));
+  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,15 +1,15 @@
-import React, { 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 React, { 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';
+  Props as FormSelectorWrapperProps
+} from "../FormSelectorWrapper/FormSelectorWrapper";
 
-export interface Props extends ComponentPropsWithRef<'input'>, FormSelector {
+export interface Props extends ComponentPropsWithRef<"input">, FormSelector {
   children: string;
   value: string;
   formSelectorWrapperProps?: FormSelectorWrapperProps;
@@ -43,7 +43,7 @@ export const Radio = React.forwardRef<HTMLInputElement, Props>(
       parentErrorId,
       errorMessage,
       error,
-      parentHelperId,
+      parentHelperId
     });
 
     const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent) => {
@@ -54,9 +54,9 @@ export const Radio = React.forwardRef<HTMLInputElement, Props>(
       const nativeEvent: any = event.nativeEvent || event;
       const clonedEvent = new nativeEvent.constructor(nativeEvent.type, nativeEvent);
 
-      Object.defineProperty(clonedEvent, 'target', {
+      Object.defineProperty(clonedEvent, "target", {
         writable: true,
-        value: { value: value },
+        value: { value: value }
       });
 
       onChange && onChange(clonedEvent);
@@ -66,8 +66,8 @@ export const Radio = React.forwardRef<HTMLInputElement, Props>(
     return (
       <FormSelectorWrapper
         {...formSelectorWrapperProps}
-        className={`${classes['radio-wrapper']} ${className ?? ''}`}
-        containerProps={{ className: classes['radio-container'] }}
+        className={`${classes["radio-wrapper"]} ${className ?? ""}`}
+        containerProps={{ className: classes["radio-container"] }}
         helperText={helperText}
         helperProps={helperProps}
         parentErrorId={parentErrorId}
@@ -82,7 +82,7 @@ export const Radio = React.forwardRef<HTMLInputElement, Props>(
           ref={ref}
           disabled={disabled}
           tabIndex={0}
-          className={`${classes['native-input']} ${error ? classes['error'] : ''}`}
+          className={`${classes["native-input"]} ${error ? classes["error"] : ""}`}
           onChange={onChangeHandler}
           checked={checked}
           aria-invalid={error ? true : false}
@@ -96,13 +96,13 @@ export const Radio = React.forwardRef<HTMLInputElement, Props>(
 
         {checked && (
           <Icon
-            className={`${classes['input']} ${disabled ? classes['disabled'] : ''}`}
+            className={`${classes["input"]} ${disabled ? classes["disabled"] : ""}`}
             icon={Icons.Radio}
           />
         )}
         {!checked && (
           <Icon
-            className={`${classes['input']} ${disabled ? classes['disabled'] : ''}`}
+            className={`${classes["input"]} ${disabled ? classes["disabled"] : ""}`}
             icon={Icons.Circle}
           />
         )}

package/src/Form/Select/Option.test.tsx

@@ -1,23 +1,23 @@
-import React, { useEffect, useRef } from 'react';
-import { Option } from './Option';
-import { render } from '@testing-library/react';
+import React, { useEffect, useRef } from "react";
+import { Option } from "./Option";
+import { render } from "@testing-library/react";
 
-describe('Option should render', () => {
-  it('renders without crashing', () => {
+describe("Option should render", () => {
+  it("renders without crashing", () => {
     const { getByTestId } = render(
       <Option value="option" data-testid="component">
         Option
       </Option>
     );
-    const component = getByTestId('component');
+    const component = getByTestId("component");
     expect(component).toBeDefined();
   });
 });
 
-describe('ref should work', () => {
-  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+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
     }: {
       propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
     }) => {
@@ -33,7 +33,7 @@ describe('ref should work', () => {
     };
 
     const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+      expect(ref.current).toHaveAttribute("data-ref", "testing");
     };
 
     render(<ExampleComponent propagateRef={refCheck} />);

package/src/Form/Select/Option.tsx

@@ -1,7 +1,7 @@
-import React, { ComponentPropsWithRef, createRef, RefObject, useEffect } from 'react';
-import classes from './Select.module.scss';
+import React, { ComponentPropsWithRef, createRef, RefObject, useEffect } from "react";
+import classes from "./Select.module.scss";
 
-export interface Props extends ComponentPropsWithRef<'li'> {
+export interface Props extends ComponentPropsWithRef<"li"> {
   children: string;
   value: string;
   disabled?: boolean;
@@ -59,12 +59,12 @@ export const Option = React.forwardRef<HTMLLIElement, Props>(
         {...rest}
         ref={innerOptionRef}
         data-value={value}
-        className={`${isSelected ? classes['selected-option'] : ''} ${
-          disabled ? classes.disabled : ''
-        } ${className ?? ''}`}
+        className={`${isSelected ? classes["selected-option"] : ""} ${
+          disabled ? classes.disabled : ""
+        } ${className ?? ""}`}
         onClick={onSelectHandler}
-        onKeyDownCapture={(event) => {
-          if (event.code === 'Enter') {
+        onKeyDownCapture={event => {
+          if (event.code === "Enter") {
             event.stopPropagation();
             event.preventDefault();
 

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

@@ -1,4 +1,4 @@
-@import '../../readyclasses.module.scss';
+@import "../../readyclasses.module.scss";
 
 $listItemHeight: 2.125rem;
 
@@ -6,7 +6,9 @@ $listItemHeight: 2.125rem;
   position: relative;
   box-sizing: border-box;
   transition: all 0.2s ease-in-out;
-  background-color: #fff;
+  border: 0;
+  border-radius: var(--input-border-radius);
+  background-color: var(--input-background-color);
   font-size: var(--font-size);
 
   [data-display] {
@@ -18,14 +20,13 @@ $listItemHeight: 2.125rem;
 
     .list-wrapper {
       background: #fff;
-      opacity: 1;
-      pointer-events: auto;
     }
   }
 
   &:not(.expanded) {
     button:focus-visible:not(.error) {
       border: var(--input-border-width-focus) solid var(--color-primary);
+      padding: 0 calc(1.25rem - var(--input-border-width-focus) + var(--input-border-width));
     }
   }
 
@@ -76,8 +77,6 @@ $listItemHeight: 2.125rem;
     top: 0;
     left: 0;
     width: 100%;
-    opacity: 0;
-    pointer-events: none;
     overflow: auto;
   }
 
@@ -102,7 +101,7 @@ $listItemHeight: 2.125rem;
       cursor: pointer;
 
       &:after {
-        content: '';
+        content: "";
         position: absolute;
         top: 0;
         left: 0;
@@ -132,7 +131,7 @@ $listItemHeight: 2.125rem;
 
 .selected-option {
   &:before {
-    content: '';
+    content: "";
     position: absolute;
     top: 0;
     left: 0;
@@ -147,7 +146,6 @@ $listItemHeight: 2.125rem;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  left: 1.25rem;
   pointer-events: none;
 }