@onewelcome/react-lib-components 0.2.0 → 0.2.3

package/src/Form/Fieldset/Fieldset.test.tsx

@@ -1,14 +1,14 @@
-import React, { useEffect, useRef } from 'react';
-import { Fieldset, Props } from './Fieldset';
-import { render } from '@testing-library/react';
-import { FormControl } from '../FormControl/FormControl';
-import { Input } from '../Input/Input';
-import { Select } from '../Select/Select';
-import { Option } from '../Select/Option';
+import React, { useEffect, useRef } from "react";
+import { Fieldset, Props } from "./Fieldset";
+import { render } from "@testing-library/react";
+import { FormControl } from "../FormControl/FormControl";
+import { Input } from "../Input/Input";
+import { Select } from "../Select/Select";
+import { Option } from "../Select/Option";
 
 const defaultParams: Props = {
-  legend: 'Example',
-  legendStyle: 'h2',
+  legend: "Example",
+  legendStyle: "h2",
   children: [
     <FormControl data-testid="form-control">
       <Input placeholder="This is a placeholder" name="example" type="text" />
@@ -19,8 +19,8 @@ const defaultParams: Props = {
         <Option value="option2">Option2</Option>
         <Option value="option3">Option3</Option>
       </Select>
-    </FormControl>,
-  ],
+    </FormControl>
+  ]
 };
 
 const createFieldset = (params?: (defaultParams: Props) => Props) => {
@@ -29,26 +29,26 @@ const createFieldset = (params?: (defaultParams: Props) => Props) => {
     parameters = params(defaultParams);
   }
   const queries = render(<Fieldset {...parameters} data-testid="fieldset" />);
-  const fieldset = queries.getByTestId('fieldset');
+  const fieldset = queries.getByTestId("fieldset");
 
   return {
     ...queries,
-    fieldset,
+    fieldset
   };
 };
 
-describe('Fieldset should render', () => {
-  it('renders without crashing', () => {
+describe("Fieldset should render", () => {
+  it("renders without crashing", () => {
     const { fieldset } = createFieldset();
 
     expect(fieldset).toBeTruthy();
   });
 });
 
-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;
     }) => {
@@ -64,46 +64,46 @@ 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('Fieldset should get proper attributes and classes', () => {
-  it('has no padding class', () => {
-    const { fieldset } = createFieldset((defaultParams) => ({ ...defaultParams, noPadding: true }));
+describe("Fieldset should get proper attributes and classes", () => {
+  it("has no padding class", () => {
+    const { fieldset } = createFieldset(defaultParams => ({ ...defaultParams, noPadding: true }));
 
-    expect(fieldset).toHaveClass('no-padding');
+    expect(fieldset).toHaveClass("no-padding");
   });
 
-  it('has no background styling', () => {
-    const { fieldset } = createFieldset((defaultParams) => ({
+  it("has no background styling", () => {
+    const { fieldset } = createFieldset(defaultParams => ({
       ...defaultParams,
-      noBackground: true,
+      noBackground: true
     }));
 
-    expect(fieldset.style.backgroundColor).toBe('');
+    expect(fieldset.style.backgroundColor).toBe("");
   });
 
-  it('has a correct legend and title <span> element', () => {
+  it("has a correct legend and title <span> element", () => {
     const { getByText } = createFieldset();
 
-    const legend = getByText(/example/i, { selector: 'legend' });
-    const title = getByText(/example/i, { selector: 'span' });
+    const legend = getByText(/example/i, { selector: "legend" });
+    const title = getByText(/example/i, { selector: "span" });
 
-    expect(legend).toHaveTextContent('Example');
+    expect(legend).toHaveTextContent("Example");
     expect(legend).toBeTruthy();
-    expect(title).toHaveClass('typography_style_h2');
+    expect(title).toHaveClass("typography_style_h2");
     expect(title).toBeTruthy();
-    expect(title).toHaveTextContent('Example');
+    expect(title).toHaveTextContent("Example");
   });
 
-  it('renders its children correctly', () => {
+  it("renders its children correctly", () => {
     const { getAllByTestId } = createFieldset();
 
-    const formcontrols = getAllByTestId('form-control');
+    const formcontrols = getAllByTestId("form-control");
 
     expect(formcontrols).toBeTruthy();
     expect(formcontrols).toHaveLength(2);

package/src/Form/Fieldset/Fieldset.tsx

@@ -1,22 +1,22 @@
-import React, { ComponentPropsWithRef, ReactNode, ReactElement } from 'react';
-import readyclasses from '../../readyclasses.module.scss';
-import classes from './Fieldset.module.scss';
-import { Typography, Variant } from '../../Typography/Typography';
-import { Input } from '../Input/Input';
-import { Select } from '../Select/Select';
-import { Radio } from '../Radio/Radio';
-import { Checkbox } from '../Checkbox/Checkbox';
-import { Textarea } from '../Textarea/Textarea';
-import { Toggle } from '../Toggle/Toggle';
-import { Label } from '../Label/Label';
-import { FormControl } from '../FormControl/FormControl';
-import { FormSelectorWrapper } from '../FormSelectorWrapper/FormSelectorWrapper';
-import { FormHelperText } from '../FormHelperText/FormHelperText';
-import { InputWrapper } from '../Wrapper/InputWrapper/InputWrapper';
-import { SelectWrapper } from '../Wrapper/SelectWrapper/SelectWrapper';
-import { TextareaWrapper } from '../Wrapper/TextareaWrapper/TextareaWrapper';
+import React, { ComponentPropsWithRef, ReactNode, ReactElement } from "react";
+import readyclasses from "../../readyclasses.module.scss";
+import classes from "./Fieldset.module.scss";
+import { Typography, Variant } from "../../Typography/Typography";
+import { Input } from "../Input/Input";
+import { Select } from "../Select/Select";
+import { Radio } from "../Radio/Radio";
+import { Checkbox } from "../Checkbox/Checkbox";
+import { Textarea } from "../Textarea/Textarea";
+import { Toggle } from "../Toggle/Toggle";
+import { Label } from "../Label/Label";
+import { FormControl } from "../FormControl/FormControl";
+import { FormSelectorWrapper } from "../FormSelectorWrapper/FormSelectorWrapper";
+import { FormHelperText } from "../FormHelperText/FormHelperText";
+import { InputWrapper } from "../Wrapper/InputWrapper/InputWrapper";
+import { SelectWrapper } from "../Wrapper/SelectWrapper/SelectWrapper";
+import { TextareaWrapper } from "../Wrapper/TextareaWrapper/TextareaWrapper";
 
-export interface Props extends ComponentPropsWithRef<'fieldset'> {
+export interface Props extends ComponentPropsWithRef<"fieldset"> {
   children?: ReactElement | ReactElement[];
   legend: string;
   legendStyle?: Variant;
@@ -35,10 +35,10 @@ export const Fieldset = React.forwardRef<HTMLFieldSetElement, Props>(
       children,
       className,
       legend,
-      legendStyle = 'body',
+      legendStyle = "body",
       hideLegend = false,
       noBackground,
-      background = noBackground ? '' : '#FFF',
+      background = noBackground ? "" : "#FFF",
       noPadding = false,
       disabled = false,
       required = false,
@@ -68,14 +68,14 @@ export const Fieldset = React.forwardRef<HTMLFieldSetElement, Props>(
         FormHelperText,
         InputWrapper,
         SelectWrapper,
-        TextareaWrapper,
+        TextareaWrapper
       ];
 
       return React.Children.map(children, (child: ReactElement) => {
         if (allowedComponents.includes(child.type) && !disablePropagation) {
           return React.cloneElement(child, {
             disabled: child.props.disabled ?? disabled,
-            error: child.props.error ?? error,
+            error: child.props.error ?? error
           });
         }
 
@@ -89,18 +89,18 @@ export const Fieldset = React.forwardRef<HTMLFieldSetElement, Props>(
         ref={ref}
         disabled={disabled}
         style={{ backgroundColor: background, ...rest.style }}
-        className={`${classes.fieldset} ${noPadding ? classes['no-padding'] : ''} ${
-          className ?? ''
+        className={`${classes.fieldset} ${noPadding ? classes["no-padding"] : ""} ${
+          className ?? ""
         }`}
       >
-        {legend && <legend className={readyclasses['sr-only']}>{legend}</legend>}
+        {legend && <legend className={readyclasses["sr-only"]}>{legend}</legend>}
         {legend && !hideLegend && (
           <Typography
             variant={legendStyle}
             tag="span"
             aria-hidden="true"
-            className={`${classes['legend']} ${required ? classes['required'] : ''} ${
-              error ? classes['error'] : ''
+            className={`${classes["legend"]} ${required ? classes["required"] : ""} ${
+              error ? classes["error"] : ""
             }`}
           >
             {legend}

package/src/Form/Form.test.tsx

@@ -1,22 +1,22 @@
-import React from 'react';
-import { Form } from './Form';
-import { render } from '@testing-library/react';
-import { Button } from '../Button/Button';
-import userEvent from '@testing-library/user-event';
-
-describe('Form should render', () => {
-  it('renders without crashing', () => {
+import React from "react";
+import { Form } from "./Form";
+import { render } from "@testing-library/react";
+import { Button } from "../Button/Button";
+import userEvent from "@testing-library/user-event";
+
+describe("Form should render", () => {
+  it("renders without crashing", () => {
     const { getByTestId } = render(<Form data-testid="component">Content</Form>);
-    const component = getByTestId('component');
+    const component = getByTestId("component");
     expect(component).toBeDefined();
   });
 });
 
-describe('Event should fire', () => {
-  it('should fire the onSubmitHandler function', () => {
+describe("Event should fire", () => {
+  it("should fire the onSubmitHandler function", () => {
     const onSubmitHandler = jest.fn();
 
-    onSubmitHandler.mockImplementation((event) => {
+    onSubmitHandler.mockImplementation(event => {
       event.preventDefault();
     });
 
@@ -26,22 +26,22 @@ describe('Event should fire', () => {
       </Form>
     );
 
-    const button = getByTestId('submit-button');
+    const button = getByTestId("submit-button");
     userEvent.click(button);
     expect(onSubmitHandler).toHaveBeenCalled();
   });
 });
 
-describe('Should be able to set some default form properties', () => {
+describe("Should be able to set some default form properties", () => {
   const { getByTestId } = render(
     <Form data-testid="form" method="POST" action="./test.php">
       Test
     </Form>
   );
 
-  const form = getByTestId('form');
+  const form = getByTestId("form");
 
-  expect(form.getAttribute('method')).toBe('POST');
-  expect(form.getAttribute('action')).toBe('./test.php');
-  expect(form.innerHTML).toBe('Test');
+  expect(form.getAttribute("method")).toBe("POST");
+  expect(form.getAttribute("action")).toBe("./test.php");
+  expect(form.innerHTML).toBe("Test");
 });

package/src/Form/Form.tsx

@@ -1,5 +1,5 @@
-import React, { HTMLProps, ReactNode } from 'react';
-import classes from './Form.module.scss';
+import React, { HTMLProps, ReactNode } from "react";
+import classes from "./Form.module.scss";
 
 export interface Props extends HTMLProps<HTMLFormElement> {
   children?: ReactNode;
@@ -7,7 +7,7 @@ export interface Props extends HTMLProps<HTMLFormElement> {
 
 export const Form = ({ children, className, ...rest }: Props) => {
   return (
-    <form className={`${classes.form} ${className ?? ''}`} {...rest}>
+    <form className={`${classes.form} ${className ?? ""}`} {...rest}>
       {children}
     </form>
   );

package/src/Form/FormControl/FormControl.test.tsx

@@ -1,16 +1,16 @@
-import React, { useEffect, useRef } from 'react';
-import { FormControl, Props } from './FormControl';
-import { render } from '@testing-library/react';
-import { Input } from '../Input/Input';
+import React, { useEffect, useRef } from "react";
+import { FormControl, Props } from "./FormControl";
+import { render } from "@testing-library/react";
+import { Input } from "../Input/Input";
 
 const defaultParams: Props = {
   grid: 3,
-  align: 'center',
+  align: "center",
   children: [
     <Input placeholder="This is a placeholder" name="example" data-testid="input" type="text" />,
     <Input placeholder="This is a placeholder" name="example" data-testid="input" type="text" />,
-    <Input placeholder="This is a placeholder" name="example" data-testid="input" type="text" />,
-  ],
+    <Input placeholder="This is a placeholder" name="example" data-testid="input" type="text" />
+  ]
 };
 
 const createFormControl = (params?: (defaultParams: Props) => Props) => {
@@ -19,26 +19,26 @@ const createFormControl = (params?: (defaultParams: Props) => Props) => {
     parameters = params(defaultParams);
   }
   const queries = render(<FormControl {...parameters} data-testid="formcontrol" />);
-  const formcontrol = queries.getByTestId('formcontrol');
+  const formcontrol = queries.getByTestId("formcontrol");
 
   return {
     ...queries,
-    formcontrol,
+    formcontrol
   };
 };
 
-describe('FormControl should render', () => {
-  it('renders without crashing', () => {
+describe("FormControl should render", () => {
+  it("renders without crashing", () => {
     const { formcontrol } = createFormControl();
 
     expect(formcontrol).toBeTruthy();
   });
 });
 
-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;
     }) => {
@@ -54,27 +54,27 @@ 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('FormControl attributes should be working correctly', () => {
-  it('has the right classes and attributes', () => {
+describe("FormControl attributes should be working correctly", () => {
+  it("has the right classes and attributes", () => {
     const { formcontrol } = createFormControl();
 
-    expect(formcontrol).toHaveClass('grid');
-    expect(formcontrol.firstChild).toHaveClass('col-3');
+    expect(formcontrol).toHaveClass("grid");
+    expect(formcontrol.firstChild).toHaveClass("col-3");
   });
 });
 
-describe('FormControl children should render properly', () => {
-  it('renders children', () => {
+describe("FormControl children should render properly", () => {
+  it("renders children", () => {
     const { getAllByTestId } = createFormControl();
 
-    const inputs = getAllByTestId('input');
+    const inputs = getAllByTestId("input");
 
     expect(inputs).toBeTruthy();
     expect(inputs).toHaveLength(3);

package/src/Form/FormControl/FormControl.tsx

@@ -1,30 +1,30 @@
-import React, { ComponentPropsWithRef, ReactElement } from 'react';
-import classes from './FormControl.module.scss';
+import React, { ComponentPropsWithRef, ReactElement } from "react";
+import classes from "./FormControl.module.scss";
 
-export interface Props extends ComponentPropsWithRef<'div'> {
+export interface Props extends ComponentPropsWithRef<"div"> {
   children?: ReactElement | ReactElement[];
   grid?: 1 | 2 | 3;
-  align?: 'top' | 'start' | 'middle' | 'center' | 'bottom' | 'end' | 'stretch';
+  align?: "top" | "start" | "middle" | "center" | "bottom" | "end" | "stretch";
   error?: boolean;
   disabled?: boolean;
 }
 
 export const FormControl = React.forwardRef<HTMLDivElement, Props>(
-  ({ children, disabled, error, className, grid, align = 'center', ...rest }: Props, ref) => {
+  ({ children, disabled, error, className, grid, align = "center", ...rest }: Props, ref) => {
     const renderChildren = () =>
-      React.Children.map(children, (child) => {
+      React.Children.map(children, child => {
         if (!child) {
           return null;
         }
 
         const childElement = React.cloneElement(child, {
           disabled: child.props.disabled !== undefined ? child.props.disabled : disabled,
-          error: child.props.error !== undefined ? child.props.error : error,
+          error: child.props.error !== undefined ? child.props.error : error
         });
 
         if (grid && grid > 1) {
           return (
-            <div className={`${classes['col-' + grid]} ${classes.column}`}>{childElement}</div>
+            <div className={`${classes["col-" + grid]} ${classes.column}`}>{childElement}</div>
           );
         }
 
@@ -36,8 +36,8 @@ export const FormControl = React.forwardRef<HTMLDivElement, Props>(
         {...rest}
         ref={ref}
         data-formcontrol
-        className={`${classes['form-control']} ${className ? className : ''} ${
-          grid && grid > 1 ? `${classes.grid} ${classes['grid-' + grid]}` : ''
+        className={`${classes["form-control"]} ${className ? className : ""} ${
+          grid && grid > 1 ? `${classes.grid} ${classes["grid-" + grid]}` : ""
         } ${classes[align]}`}
       >
         {renderChildren()}

package/src/Form/FormGroup/FormGroup.test.tsx

@@ -1,13 +1,13 @@
-import React, { useEffect, useRef } from 'react';
-import { FormGroup, Props } from './FormGroup';
-import { render } from '@testing-library/react';
+import React, { useEffect, useRef } from "react";
+import { FormGroup, Props } from "./FormGroup";
+import { render } from "@testing-library/react";
 
 const defaultParams: Props = {
-  children: 'Formcontent here',
-  helperId: 'helper_id',
-  helperText: 'example helper text',
-  errorMessage: 'example error message',
-  errorId: 'error_id',
+  children: "Formcontent here",
+  helperId: "helper_id",
+  helperText: "example helper text",
+  errorMessage: "example error message",
+  errorId: "error_id"
 };
 
 const createFormGroup = (params?: (defaultParams: Props) => Props) => {
@@ -16,38 +16,38 @@ const createFormGroup = (params?: (defaultParams: Props) => Props) => {
     parameters = params(defaultParams);
   }
   const queries = render(<FormGroup {...parameters} data-testid="formgroup"></FormGroup>);
-  const formgroup = queries.getByTestId('formgroup');
+  const formgroup = queries.getByTestId("formgroup");
 
   return {
     ...queries,
-    formgroup,
+    formgroup
   };
 };
 
-describe('FormSelectorGroup should render', () => {
-  it('renders without crashing', () => {
+describe("FormSelectorGroup should render", () => {
+  it("renders without crashing", () => {
     const { formgroup } = createFormGroup();
 
     expect(formgroup).toBeDefined();
   });
 
-  it('has the correct values and attributes', () => {
-    const { getByTestId } = createFormGroup((defaultParams) => ({
+  it("has the correct values and attributes", () => {
+    const { getByTestId } = createFormGroup(defaultParams => ({
       ...defaultParams,
-      helperProps: { 'data-testid': 'helper_text' },
+      helperProps: { "data-testid": "helper_text" }
     }));
 
-    const helperText = getByTestId('helper_text');
+    const helperText = getByTestId("helper_text");
 
-    expect(helperText).toHaveAttribute('id', 'helper_id');
-    expect(helperText).toHaveTextContent('example helper text');
+    expect(helperText).toHaveAttribute("id", "helper_id");
+    expect(helperText).toHaveTextContent("example helper text");
   });
 });
 
-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;
     }) => {
@@ -63,49 +63,49 @@ 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('Correct error state', () => {
-  it('has the correct state', () => {
-    const { formgroup } = createFormGroup((defaultParams) => ({
+describe("Correct error state", () => {
+  it("has the correct state", () => {
+    const { formgroup } = createFormGroup(defaultParams => ({
       ...defaultParams,
       error: true,
-      errorMessage: 'example error message',
-      errorId: 'error_id',
+      errorMessage: "example error message",
+      errorId: "error_id"
     }));
-    const errorMessage = formgroup.querySelector('.error-message');
+    const errorMessage = formgroup.querySelector(".error-message");
 
     expect(errorMessage).toBeTruthy();
-    expect(errorMessage?.querySelector('#error_id')).toBeTruthy();
-    expect(errorMessage?.querySelector('#error_id')).toHaveTextContent('example error message');
+    expect(errorMessage?.querySelector("#error_id")).toBeTruthy();
+    expect(errorMessage?.querySelector("#error_id")).toHaveTextContent("example error message");
   });
 });
 
-describe('no helpertext, but errorMessage is defined', () => {
+describe("no helpertext, but errorMessage is defined", () => {
   it("doesn't show the div with 'default-helper' class when there's no error and no helpertext defined", () => {
-    const { formgroup } = createFormGroup((defaultParams) => ({
+    const { formgroup } = createFormGroup(defaultParams => ({
       ...defaultParams,
       error: false,
       helperText: undefined,
-      errorMessage: 'example error message',
+      errorMessage: "example error message"
     }));
 
-    expect(formgroup.querySelector('.default-helper')).toBeFalsy();
+    expect(formgroup.querySelector(".default-helper")).toBeFalsy();
   });
 
   it("does show the div with 'default-helper' class when there's an error and no helpertext defined", () => {
-    const { formgroup } = createFormGroup((defaultParams) => ({
+    const { formgroup } = createFormGroup(defaultParams => ({
       ...defaultParams,
       error: true,
       helperText: undefined,
-      errorMessage: 'example error message',
+      errorMessage: "example error message"
     }));
 
-    expect(formgroup.querySelector('.default-helper')).toBeTruthy();
+    expect(formgroup.querySelector(".default-helper")).toBeTruthy();
   });
 });