@onewelcome/react-lib-components 0.2.1 → 0.2.2

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

@@ -1,18 +1,18 @@
-import React, { useEffect, useRef } from 'react';
-import { TextareaWrapper, Props } from './TextareaWrapper';
-import { render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+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',
+  name: "textarea",
+  label: "textarea_label",
+  value: "value",
   error: false,
-  helperText: 'helpertext',
-  helperProps: { 'data-testid': 'helpertext' },
-  errorMessage: 'errormessage',
-  textareaProps: { 'data-testid': 'textarea' },
-  onChange: jest.fn(),
+  helperText: "helpertext",
+  helperProps: { "data-testid": "helpertext" },
+  errorMessage: "errormessage",
+  textareaProps: { "data-testid": "textarea" },
+  onChange: jest.fn()
 };
 
 const createTextareaWrapper = (params?: (defaultParams: Props) => Props) => {
@@ -21,28 +21,28 @@ const createTextareaWrapper = (params?: (defaultParams: Props) => Props) => {
     parameters = params(defaultParams);
   }
   const queries = render(<TextareaWrapper {...parameters} data-testid="textareawrapper" />);
-  const textareawrapper = queries.getByTestId('textareawrapper');
-  const textarea = queries.getByTestId('textarea');
+  const textareawrapper = queries.getByTestId("textareawrapper");
+  const textarea = queries.getByTestId("textarea");
 
   return {
     ...queries,
     textareawrapper,
-    textarea,
+    textarea
   };
 };
 
-describe('TextareaWrapper should render', () => {
-  it('renders without crashing', () => {
+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', () => {
+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>,
@@ -61,7 +61,7 @@ describe('ref should work', () => {
       return (
         <TextareaWrapper
           {...defaultParams}
-          textareaProps={{ ref: innerRef, 'data-ref': 'inner-testing' }}
+          textareaProps={{ ref: innerRef, "data-ref": "inner-testing" }}
           name="test"
           data-ref="testing"
           ref={ref}
@@ -73,75 +73,75 @@ describe('ref should work', () => {
       ref: React.RefObject<HTMLElement>,
       innerRef: React.RefObject<HTMLElement>
     ) => {
-      expect(ref.current).toHaveAttribute('data-ref', 'testing');
-      expect(innerRef.current).toHaveAttribute('data-ref', 'inner-testing');
+      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 () => {
+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');
+    const helpertext = getByTestId("helpertext");
+    const label = await findByText("textarea_label");
 
-    expect(textarea).toHaveAttribute('aria-describedby', helpertext.id);
-    expect(textarea).toHaveAttribute('aria-labelledby', label.id);
+    expect(textarea).toHaveAttribute("aria-describedby", helpertext.id);
+    expect(textarea).toHaveAttribute("aria-labelledby", label.id);
   });
 
-  it('TextareaWrapper has the right helpertext', () => {
+  it("TextareaWrapper has the right helpertext", () => {
     const { getByTestId } = createTextareaWrapper();
 
-    const helpertext = getByTestId('helpertext');
+    const helpertext = getByTestId("helpertext");
 
     expect(helpertext).toBeTruthy();
-    expect(helpertext).toHaveTextContent('helpertext');
+    expect(helpertext).toHaveTextContent("helpertext");
   });
 
-  it('TextareaWrapper has the right errormessage', async () => {
-    const { findByText, textarea } = createTextareaWrapper((defaultParams) => ({
+  it("TextareaWrapper has the right errormessage", async () => {
+    const { findByText, textarea } = createTextareaWrapper(defaultParams => ({
       ...defaultParams,
-      error: true,
+      error: true
     }));
 
-    const errorMessage = await findByText('errormessage');
+    const errorMessage = await findByText("errormessage");
 
     expect(errorMessage).toBeTruthy();
-    expect(textarea).toHaveAttribute('aria-describedby', errorMessage.id);
+    expect(textarea).toHaveAttribute("aria-describedby", errorMessage.id);
   });
 
-  it('has floating label active when it has a placeholder', async () => {
-    const { findByText } = createTextareaWrapper((defaultParams) => ({
+  it("has floating label active when it has a placeholder", async () => {
+    const { findByText } = createTextareaWrapper(defaultParams => ({
       ...defaultParams,
-      placeholder: 'placeholder',
+      placeholder: "placeholder"
     }));
 
-    const label = await findByText('textarea_label');
+    const label = await findByText("textarea_label");
 
-    expect(label).toHaveClass('floating-label-active');
+    expect(label).toHaveClass("floating-label-active");
   });
 });
 
-describe('TextarenaWrapper should be interactive', () => {
-  it('Fires the onChange, onFocus & onBlur events', () => {
+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) => ({
+    const { textarea } = createTextareaWrapper(defaultParams => ({
       ...defaultParams,
       onChange: onChangeHandler,
       onFocus: onFocusHandler,
-      onBlur: onBlurHandler,
+      onBlur: onBlurHandler
     }));
 
     userEvent.tab();
     expect(textarea).toHaveFocus();
 
-    userEvent.keyboard('input');
+    userEvent.keyboard("input");
     userEvent.tab();
 
     expect(onChangeHandler).toHaveBeenCalledTimes(5);
@@ -149,14 +149,14 @@ describe('TextarenaWrapper should be interactive', () => {
     expect(onBlurHandler).toHaveBeenCalled();
   });
 
-  it('Fires the onMouseEnter & onMouseLeave events', () => {
+  it("Fires the onMouseEnter & onMouseLeave events", () => {
     const onMouseEnterHandler = jest.fn();
     const onMouseLeaveHandler = jest.fn();
 
-    const { textarea } = createTextareaWrapper((defaultParams) => ({
+    const { textarea } = createTextareaWrapper(defaultParams => ({
       ...defaultParams,
       onMouseEnter: onMouseEnterHandler,
-      onMouseLeave: onMouseLeaveHandler,
+      onMouseLeave: onMouseLeaveHandler
     }));
 
     userEvent.hover(textarea);

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

@@ -1,15 +1,15 @@
-import React, { 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';
+import React, { 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'
+      ComponentPropsWithRef<"div">,
+      "onFocus" | "onChange" | "onBlur" | "onMouseEnter" | "onMouseLeave"
     >,
-    Omit<WrapperProps, 'onFocus' | 'onChange' | 'onBlur' | 'onMouseEnter' | 'onMouseLeave'> {
+    Omit<WrapperProps, "onFocus" | "onChange" | "onBlur" | "onMouseEnter" | "onMouseLeave"> {
   placeholder?: string;
   textareaProps?: TextareaProps;
   value: string;
@@ -47,16 +47,16 @@ export const TextareaWrapper = React.forwardRef<HTMLDivElement, Props>(
       hasFocus,
       setHasFocus,
       helperId,
-      labelId,
+      labelId
     } = useWrapper(value, placeholder);
     const [hover, setHover] = useState(false);
 
     const optionalClasses: string[] = [];
 
-    hasFocus && optionalClasses.push(classes['focus']);
-    hover && optionalClasses.push(classes['hover']);
-    disabled && optionalClasses.push(classes['disabled']);
-    error && optionalClasses.push(classes['error']);
+    hasFocus && optionalClasses.push(classes["focus"]);
+    hover && optionalClasses.push(classes["hover"]);
+    disabled && optionalClasses.push(classes["disabled"]);
+    error && optionalClasses.push(classes["error"]);
 
     return (
       <Wrapper
@@ -65,14 +65,14 @@ export const TextareaWrapper = React.forwardRef<HTMLDivElement, Props>(
         disabled={disabled}
         labelProps={{
           id: labelId,
-          className: `${classes['textarea-label']} ${optionalClasses.join('')}`,
+          className: `${classes["textarea-label"]} ${optionalClasses.join(" ")}`
         }}
         name={name}
         label={label}
         helperId={helperId}
         helperProps={{
           ...helperProps,
-          className: classes['textarea-helper-text'],
+          className: classes["textarea-helper-text"]
         }}
         error={error}
         floatingLabelActive={floatingLabelActive}
@@ -88,31 +88,31 @@ export const TextareaWrapper = React.forwardRef<HTMLDivElement, Props>(
           id={name}
           value={value}
           onChange={onChange}
-          onFocus={(e) => {
+          onFocus={e => {
             onFocus && onFocus(e);
             setHasFocus(true);
             setFloatingLabelActive(true);
           }}
-          onBlur={(e) => {
+          onBlur={e => {
             onBlur && onBlur(e);
             setHasFocus(false);
             e.target.value || e.target.placeholder || textareaProps?.placeholder?.length
               ? setFloatingLabelActive(true)
               : setFloatingLabelActive(false);
           }}
-          onMouseEnter={(e) => {
+          onMouseEnter={e => {
             onMouseEnter && onMouseEnter(e);
             setHover(true);
           }}
-          onMouseLeave={(e) => {
+          onMouseLeave={e => {
             onMouseLeave && onMouseLeave(e);
             setHover(false);
           }}
-          className={`${classes['textarea']} ${error ? classes['error'] : ''}`}
+          className={`${classes["textarea"]} ${error ? classes["error"] : ""}`}
           wrapperProps={{
-            className: `${classes['textarea-wrapper']}} ${optionalClasses.join(' ')}`,
+            className: `${classes["textarea-wrapper"]}} ${optionalClasses.join(" ")}`
           }}
-          errorProps={{ className: classes['error-icon'] }}
+          errorProps={{ className: classes["error-icon"] }}
         />
       </Wrapper>
     );

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

@@ -8,7 +8,7 @@
   position: absolute;
   z-index: 1;
   top: 1.3125rem;
-  left: 1.35rem;
+  left: 1.25rem;
   transform-origin: left top;
   transition: all 0.2s ease-in-out;
   pointer-events: none;
@@ -31,6 +31,6 @@
 
 .required {
   &:after {
-    content: ' *';
+    content: " *";
   }
 }

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

@@ -1,25 +1,25 @@
-import React, { useEffect, useRef } from 'react';
-import { Wrapper } from './Wrapper';
-import { render } from '@testing-library/react';
-import { Input } from '../../Input/Input';
+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', () => {
+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');
+    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', () => {
+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;
     }) => {
@@ -35,7 +35,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/Wrapper/Wrapper/Wrapper.tsx

@@ -1,11 +1,11 @@
-import React, { 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';
+import React, { 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 {
+export interface Props extends ComponentPropsWithRef<"div">, FormGroupProps {
   children: ReactElement | ReactElement[];
   floatingLabelActive?: boolean;
   floatingLabel?: boolean;
@@ -56,22 +56,22 @@ export const Wrapper = React.forwardRef<HTMLDivElement, Props>(
     ref
   ) => {
     const renderChildren = () =>
-      React.Children.map(children, (child) =>
+      React.Children.map(children, child =>
         React.cloneElement(child, {
-          disabled,
+          disabled
         })
       );
 
     const labelClasses = [];
 
-    floatingLabel && labelClasses.push(classes['floating-label']);
-    floatingLabel && floatingLabelActive && labelClasses.push(classes['floating-label-active']);
+    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']);
+    required && labelClasses.push(classes["required"]);
+    error && labelClasses.push(classes["error"]);
 
     return (
-      <div {...rest} ref={ref} className={`${classes.wrapper} ${className ? className : ''}`}>
+      <div {...rest} ref={ref} className={`${classes.wrapper} ${className ? className : ""}`}>
         <FormGroup
           error={error}
           errorMessage={errorMessage}
@@ -84,14 +84,14 @@ export const Wrapper = React.forwardRef<HTMLDivElement, Props>(
           helperIndent={helperIndent}
         >
           <div
-            className={`${floatingLabel ? classes['floating-wrapper'] : ''} ${
-              innerClassName ? innerClassName : ''
+            className={`${floatingLabel ? classes["floating-wrapper"] : ""} ${
+              innerClassName ? innerClassName : ""
             }`}
           >
             {label && (
               <Label
                 {...labelProps}
-                className={`${classes.label} ${labelClasses.join(' ')}`}
+                className={`${classes.label} ${labelClasses.join(" ")}`}
                 htmlFor={name}
               >
                 {label}

package/src/Form/form.interfaces.ts

@@ -1,4 +1,4 @@
-import { DataAttributeKey } from '../interfaces';
+import { DataAttributeKey } from "../interfaces";
 
 /** Radios */
 export interface FormSelector extends FormElement {