@onewelcome/react-lib-components 0.2.1 → 0.2.2

package/src/Form/FormGroup/FormGroup.tsx

@@ -1,15 +1,15 @@
 /** The empty className property on FormHelperText is on purpose! We want to basically "filter" out the className from helperProps because we're adding this to the surrounding div. This makes it so also the errormessage receives this styling. */
 
-import React, { ComponentPropsWithRef, ReactChild } from 'react';
-import classes from './FormGroup.module.scss';
-import { FormHelperText, Props as HelperProps } from '../FormHelperText/FormHelperText';
-import { Icon, Icons } from '../../Icon/Icon';
+import React, { ComponentPropsWithRef, ReactChild } from "react";
+import classes from "./FormGroup.module.scss";
+import { FormHelperText, Props as HelperProps } from "../FormHelperText/FormHelperText";
+import { Icon, Icons } from "../../Icon/Icon";
 
-export interface Props extends ComponentPropsWithRef<'div'> {
+export interface Props extends ComponentPropsWithRef<"div"> {
   children: ReactChild[] | ReactChild;
   error?: boolean;
   errorMessageIcon?: Icons;
-  errorMessageIconPosition?: 'before' | 'after';
+  errorMessageIconPosition?: "before" | "after";
   errorMessage?: string;
   errorId?: string;
   helperIndent?: number;
@@ -28,7 +28,7 @@ export const FormGroup = React.forwardRef<HTMLDivElement, Props>(
       errorMessage,
       errorId,
       errorMessageIcon,
-      errorMessageIconPosition = 'before',
+      errorMessageIconPosition = "before",
       helperText,
       helperId,
       helperProps,
@@ -41,35 +41,35 @@ export const FormGroup = React.forwardRef<HTMLDivElement, Props>(
       <div
         {...rest}
         ref={ref}
-        className={`${classes['form-group']} ${error ? classes.error : ''} ${className ?? ''}`}
+        className={`${classes["form-group"]} ${error ? classes.error : ""} ${className ?? ""}`}
       >
         {children}
 
         {(helperText || (errorMessage && error)) && (
           <div
             style={{ marginLeft: `${helperIndent}px` }}
-            className={`${classes['default-helper']} ${
-              helperProps?.className ? helperProps.className : ''
+            className={`${classes["default-helper"]} ${
+              helperProps?.className ? helperProps.className : ""
             }`}
           >
             {helperText && !error && (
-              <FormHelperText {...helperProps} className={''} id={helperId}>
+              <FormHelperText {...helperProps} className={""} id={helperId}>
                 {(helperProps && helperProps.children) || helperText}
               </FormHelperText>
             )}
             {error && errorMessage && (
-              <span className={classes['error-message']}>
+              <span className={classes["error-message"]}>
                 <span className={classes.message} id={errorId}>
-                  {errorMessageIcon && errorMessageIconPosition === 'before' && (
+                  {errorMessageIcon && errorMessageIconPosition === "before" && (
                     <Icon
-                      className={`${classes['error-icon']} ${classes['error-icon-before']}`}
+                      className={`${classes["error-icon"]} ${classes["error-icon-before"]}`}
                       icon={errorMessageIcon}
                     />
                   )}
                   {errorMessage}
-                  {errorMessageIcon && errorMessageIconPosition === 'after' && (
+                  {errorMessageIcon && errorMessageIconPosition === "after" && (
                     <Icon
-                      className={`${classes['error-icon']} ${classes['error-icon-after']}`}
+                      className={`${classes["error-icon"]} ${classes["error-icon-after"]}`}
                       icon={errorMessageIcon}
                     />
                   )}

package/src/Form/FormHelperText/FormHelperText.test.tsx

@@ -1,10 +1,10 @@
-import React, { useEffect, useRef } from 'react';
-import { FormHelperText, Props } from './FormHelperText';
-import { render } from '@testing-library/react';
+import React, { useEffect, useRef } from "react";
+import { FormHelperText, Props } from "./FormHelperText";
+import { render } from "@testing-library/react";
 
 const defaultParams: Props = {
   error: false,
-  children: 'This is a field description',
+  children: "This is a field description"
 };
 
 const createFormHelperText = (params?: (defaultParams: Props) => Props) => {
@@ -13,26 +13,26 @@ const createFormHelperText = (params?: (defaultParams: Props) => Props) => {
     parameters = params(defaultParams);
   }
   const queries = render(<FormHelperText {...parameters} data-testid="formhelpertext" />);
-  const formhelpertext = queries.getByTestId('formhelpertext');
+  const formhelpertext = queries.getByTestId("formhelpertext");
 
   return {
     ...queries,
-    formhelpertext,
+    formhelpertext
   };
 };
 
-describe('FormHelperText should render', () => {
-  it('renders without crashing', () => {
+describe("FormHelperText should render", () => {
+  it("renders without crashing", () => {
     const { formhelpertext } = createFormHelperText();
 
     expect(formhelpertext).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;
     }) => {
@@ -48,21 +48,21 @@ 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('Attributes', () => {
-  it('contains the error class', () => {
-    const { formhelpertext } = createFormHelperText((defaultParams) => ({
+describe("Attributes", () => {
+  it("contains the error class", () => {
+    const { formhelpertext } = createFormHelperText(defaultParams => ({
       ...defaultParams,
-      error: true,
+      error: true
     }));
 
-    expect(formhelpertext).toHaveClass('error');
-    expect(formhelpertext).toHaveStyle({ color: 'rgb(226, 42, 29);' });
+    expect(formhelpertext).toHaveClass("error");
+    expect(formhelpertext).toHaveStyle({ color: "rgb(226, 42, 29);" });
   });
 });

package/src/Form/FormHelperText/FormHelperText.tsx

@@ -1,9 +1,9 @@
-import React, { ComponentPropsWithRef, ReactNode } from 'react';
-import classes from './FormHelperText.module.scss';
-import { Typography } from '../../Typography/Typography';
-import { FormElement } from '../form.interfaces';
+import React, { ComponentPropsWithRef, ReactNode } from "react";
+import classes from "./FormHelperText.module.scss";
+import { Typography } from "../../Typography/Typography";
+import { FormElement } from "../form.interfaces";
 
-export interface Props extends ComponentPropsWithRef<'div'>, FormElement {
+export interface Props extends ComponentPropsWithRef<"div">, FormElement {
   children?: ReactNode;
 }
 
@@ -15,8 +15,8 @@ export const FormHelperText = React.forwardRef<HTMLDivElement, Props>(
         ref={ref}
         variant="sub-text"
         tag="div"
-        className={`${classes['form-helper-text']} ${error ? classes.error : ''} ${
-          className ?? ''
+        className={`${classes["form-helper-text"]} ${error ? classes.error : ""} ${
+          className ?? ""
         }`}
       >
         {children}

package/src/Form/FormSelectorWrapper/FormSelectorWrapper.test.tsx

@@ -1,6 +1,6 @@
-import React, { useRef, useEffect } from 'react';
-import { FormSelectorWrapper, Props } from './FormSelectorWrapper';
-import { render } from '@testing-library/react';
+import React, { useRef, useEffect } from "react";
+import { FormSelectorWrapper, Props } from "./FormSelectorWrapper";
+import { render } from "@testing-library/react";
 
 const defaultParams: Props = {};
 
@@ -14,26 +14,26 @@ const createFormSelectorWrapper = (params?: (defaultParams: Props) => Props) =>
       formSelectorWrapper content
     </FormSelectorWrapper>
   );
-  const formSelectorWrapper = queries.getByTestId('formSelectorWrapper');
+  const formSelectorWrapper = queries.getByTestId("formSelectorWrapper");
 
   return {
     ...queries,
-    formSelectorWrapper,
+    formSelectorWrapper
   };
 };
 
-describe('FormSelectorWrapper should render', () => {
-  it('renders without crashing', () => {
+describe("FormSelectorWrapper should render", () => {
+  it("renders without crashing", () => {
     const { formSelectorWrapper } = createFormSelectorWrapper();
 
     expect(formSelectorWrapper).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>,
@@ -54,9 +54,9 @@ describe('ref should work', () => {
       return (
         <FormSelectorWrapper
           {...defaultParams}
-          containerProps={{ 'data-ref': 'testing', ref: containerRef }}
+          containerProps={{ "data-ref": "testing", ref: containerRef }}
           helperText="helpertext"
-          helperProps={{ 'data-ref': 'testing', ref: helperRef }}
+          helperProps={{ "data-ref": "testing", ref: helperRef }}
           data-ref="testing"
           ref={ref}
         />
@@ -68,9 +68,9 @@ describe('ref should work', () => {
       ref2: React.RefObject<HTMLElement>,
       ref3: React.RefObject<HTMLElement>
     ) => {
-      expect(ref.current).toHaveAttribute('data-ref', 'testing');
-      expect(ref2.current).toHaveAttribute('data-ref', 'testing');
-      expect(ref3.current).toHaveAttribute('data-ref', 'testing');
+      expect(ref.current).toHaveAttribute("data-ref", "testing");
+      expect(ref2.current).toHaveAttribute("data-ref", "testing");
+      expect(ref3.current).toHaveAttribute("data-ref", "testing");
     };
 
     render(<ExampleComponent propagateRef={refCheck} />);

package/src/Form/FormSelectorWrapper/FormSelectorWrapper.tsx

@@ -1,14 +1,14 @@
-import React, { ComponentPropsWithRef, createRef, ReactNode } from 'react';
-import { Icon, Icons } from '../../Icon/Icon';
-import { KeyValuePair } from '../../interfaces';
-import { FormSelector } from '../form.interfaces';
-import { FormHelperText, Props as FormHelperTextProps } from '../FormHelperText/FormHelperText';
-import classes from './FormSelectorWrapper.module.scss';
+import React, { ComponentPropsWithRef, createRef, ReactNode } from "react";
+import { Icon, Icons } from "../../Icon/Icon";
+import { KeyValuePair } from "../../interfaces";
+import { FormSelector } from "../form.interfaces";
+import { FormHelperText, Props as FormHelperTextProps } from "../FormHelperText/FormHelperText";
+import classes from "./FormSelectorWrapper.module.scss";
 
-export interface Props extends ComponentPropsWithRef<'div'>, FormSelector {
+export interface Props extends ComponentPropsWithRef<"div">, FormSelector {
   children?: ReactNode;
   nestedChildren?: ReactNode;
-  containerProps?: ComponentPropsWithRef<'div'> & KeyValuePair;
+  containerProps?: ComponentPropsWithRef<"div"> & KeyValuePair;
   helperProps?: FormHelperTextProps;
   disabled?: boolean;
   errorId?: string;
@@ -40,8 +40,8 @@ export const FormSelectorWrapper = React.forwardRef<HTMLDivElement, Props>(
       <div
         {...rest}
         ref={ref}
-        className={`${error ? classes['error'] : ''} ${disabled ? classes['disabled'] : ''} ${
-          className ?? ''
+        className={`${error ? classes["error"] : ""} ${disabled ? classes["disabled"] : ""} ${
+          className ?? ""
         }`}
       >
         <div {...containerProps}>{children}</div>
@@ -51,16 +51,16 @@ export const FormSelectorWrapper = React.forwardRef<HTMLDivElement, Props>(
               {...helperProps}
               ref={helperRef}
               id={`${identifier}`}
-              className={`${classes['helper-text']} ${helperProps?.className ?? ''} ${
-                error ? classes['error'] : ''
+              className={`${classes["helper-text"]} ${helperProps?.className ?? ""} ${
+                error ? classes["error"] : ""
               }`}
             >
               {(helperProps && helperProps.children) || helperText}
             </FormHelperText>
           )}
         {errorMessage && !parentErrorId && error && (
-          <span className={classes['error-message']}>
-            <Icon className={classes['error-icon']} icon={Icons.Error} />
+          <span className={classes["error-message"]}>
+            <Icon className={classes["error-icon"]} icon={Icons.Error} />
             <span id={errorId}>{errorMessage}</span>
           </span>
         )}

package/src/Form/Input/Input.module.scss

@@ -1,70 +1,46 @@
+@import "../../mixins.module.scss";
+
 .input-wrapper {
   position: relative;
   display: flex;
   align-items: center;
-  height: calc(4rem - (2 * var(--input-border-width)));
-  padding: 0 1.25rem;
-
-  background-color: var(--input-background-color);
-  border-color: var(--input-border-color);
-  border-style: var(--input-border-style);
-  border-width: var(--input-border-width);
+  height: 4rem;
+  border: 0;
   border-radius: var(--input-border-radius);
+  background-color: var(--input-background-color);
+  padding: 0 1.25rem;
   transition: all 0.2s ease-in-out;
 
-  &:hover:not(:disabled):not(.error) {
-    height: calc(4rem - (2 * var(--input-border-width)));
-    padding: 0 1.25rem;
-
-    border-color: var(--default);
-    border-width: var(--input-border-width);
-  }
-
-  &.disabled,
-  &.disabled input {
-    background-color: var(--disabled);
-    border-color: #fff;
-    cursor: not-allowed;
-  }
-
-  &.error {
-    border-color: var(--error);
-  }
-
-  &.focus {
-    height: calc(4rem - (2 * var(--input-border-width-focus)));
-    padding: 0 calc(1.25rem - var(--input-border-width));
-    border-width: var(--input-border-width-focus);
-  }
-
-  &.focus:not(.error) {
-    border-color: var(--color-primary);
-  }
+  @include outlineStates;
 }
 
 .input {
-  height: calc(4rem - (2 * var(--input-border-width)));
-  border: 0;
+  padding: 0;
+  height: 4rem;
   color: var(--greyed-out);
   font-size: var(--font-size);
   font-family: var(--font-family);
   width: 100%;
   box-sizing: border-box;
-  padding: 0;
+  border: 0;
+  border-radius: var(--input-border-radius);
 
-  &:focus:not(:disabled) {
-    height: calc(4rem - (2 * var(--input-border-width-focus)));
-    outline: none;
-    border-color: var(--color-primary);
+  &:disabled {
+    background-color: var(--disabled);
+    cursor: not-allowed;
   }
+
+  @include browserOutlineDisabled;
 }
 
+@include outline;
+
 .error input {
   color: var(--error);
-  padding-right: 3.75rem;
+  padding-right: 3.5rem;
 
   &.remove-extra-indent {
-    padding-right: 1.25rem;
+    padding-right: 0rem;
   }
 }
 

package/src/Form/Input/Input.test.tsx

@@ -1,11 +1,11 @@
-import React, { useEffect, useRef } from 'react';
-import { Input, Props } from './Input';
-import { render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import React, { useEffect, useRef } from "react";
+import { Input, Props } from "./Input";
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 const defaultParams: Props = {
-  name: 'input',
-  type: 'text',
+  name: "input",
+  type: "text"
 };
 
 const createInput = (params?: (defaultParams: Props) => Props) => {
@@ -14,25 +14,25 @@ const createInput = (params?: (defaultParams: Props) => Props) => {
     parameters = params(defaultParams);
   }
   const queries = render(<Input {...parameters} data-testid="input" />);
-  const input = queries.getByTestId('input');
+  const input = queries.getByTestId("input");
 
   return {
     ...queries,
-    input,
+    input
   };
 };
 
-describe('Input should render', () => {
-  it('renders without crashing and has a name and type', () => {
+describe("Input should render", () => {
+  it("renders without crashing and has a name and type", () => {
     const { input } = createInput();
     expect(input).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;
     }) => {
@@ -48,114 +48,141 @@ 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('Should have the appropriate attributes', () => {
-  it('is disabled and has a class', () => {
-    const { input } = createInput((defaultParams) => ({
+describe("Should have the appropriate attributes", () => {
+  it("is disabled and has a class", () => {
+    const { input } = createInput(defaultParams => ({
       ...defaultParams,
       disabled: true,
-      className: 'classname',
+      className: "classname"
     }));
 
-    expect(input).toHaveAttribute('disabled');
-    expect(input).toHaveClass('classname');
+    expect(input).toHaveAttribute("disabled");
+    expect(input).toHaveClass("classname");
   });
 });
 
-describe('Should render all different types of inputs', () => {
-  it('should render a text input', () => {
-    const { input } = createInput((defaultParams) => ({ ...defaultParams, type: 'text' }));
+describe("Should render all different types of inputs", () => {
+  it("should render a text input", () => {
+    const { input } = createInput(defaultParams => ({ ...defaultParams, type: "text" }));
 
-    expect(input).toHaveAttribute('type', 'text');
+    expect(input).toHaveAttribute("type", "text");
   });
 
-  it('should render a email input', () => {
-    const { input } = createInput((defaultParams) => ({ ...defaultParams, type: 'email' }));
+  it("should render a email input", () => {
+    const { input } = createInput(defaultParams => ({ ...defaultParams, type: "email" }));
 
-    expect(input).toHaveAttribute('type', 'email');
+    expect(input).toHaveAttribute("type", "email");
   });
 
-  it('should render a tel input', () => {
-    const { input } = createInput((defaultParams) => ({ ...defaultParams, type: 'tel' }));
+  it("should render a tel input", () => {
+    const { input } = createInput(defaultParams => ({ ...defaultParams, type: "tel" }));
 
-    expect(input).toHaveAttribute('type', 'tel');
+    expect(input).toHaveAttribute("type", "tel");
   });
 
-  it('should render a number input', () => {
-    const { input } = createInput((defaultParams) => ({ ...defaultParams, type: 'number' }));
+  it("should render a number input", () => {
+    const { input } = createInput(defaultParams => ({ ...defaultParams, type: "number" }));
 
-    expect(input).toHaveAttribute('type', 'number');
+    expect(input).toHaveAttribute("type", "number");
   });
 
-  it('should render a password input', () => {
-    const { input } = createInput((defaultParams) => ({ ...defaultParams, type: 'password' }));
+  it("should render a password input", () => {
+    const { input } = createInput(defaultParams => ({ ...defaultParams, type: "password" }));
 
-    expect(input).toHaveAttribute('type', 'password');
+    expect(input).toHaveAttribute("type", "password");
   });
 
-  it('should render a search input', () => {
-    const { input } = createInput((defaultParams) => ({ ...defaultParams, type: 'search' }));
+  it("should render a search input", () => {
+    const { input } = createInput(defaultParams => ({ ...defaultParams, type: "search" }));
 
-    expect(input).toHaveAttribute('type', 'search');
+    expect(input).toHaveAttribute("type", "search");
   });
 
-  it('should render a time input', () => {
-    const { input } = createInput((defaultParams) => ({ ...defaultParams, type: 'time' }));
+  it("should render a time input", () => {
+    const { input } = createInput(defaultParams => ({ ...defaultParams, type: "time" }));
 
-    expect(input).toHaveAttribute('type', 'time');
+    expect(input).toHaveAttribute("type", "time");
   });
 
-  it('should render a url input', () => {
-    const { input } = createInput((defaultParams) => ({ ...defaultParams, type: 'url' }));
+  it("should render a url input", () => {
+    const { input } = createInput(defaultParams => ({ ...defaultParams, type: "url" }));
 
-    expect(input).toHaveAttribute('type', 'url');
+    expect(input).toHaveAttribute("type", "url");
   });
 
-  it('should render a datetime input', () => {
-    const { input } = createInput((defaultParams) => ({
+  it("should render a datetime input", () => {
+    const { input } = createInput(defaultParams => ({
       ...defaultParams,
-      type: 'datetime-local',
+      type: "datetime-local"
     }));
 
-    expect(input).toHaveAttribute('type', 'datetime-local');
+    expect(input).toHaveAttribute("type", "datetime-local");
   });
 
-  it('should be hidden', () => {
-    const { input } = createInput((defaultParams) => ({ ...defaultParams, type: 'hidden' }));
+  it("should be hidden", () => {
+    const { input } = createInput(defaultParams => ({ ...defaultParams, type: "hidden" }));
 
-    expect(input.parentElement).toHaveClass('hidden');
-    expect(input).toHaveAttribute('type', 'hidden');
+    expect(input.parentElement).toHaveClass("hidden");
+    expect(input).toHaveAttribute("type", "hidden");
   });
 });
 
-describe('It should execute the listeners', () => {
-  it('fires event handlers', () => {
+describe("It should execute the listeners", () => {
+  it("fires event handlers", () => {
     const onChangeHandler = jest.fn();
     const onKeyUpHandler = jest.fn();
     const onKeyDownHandler = jest.fn();
 
-    const { input } = createInput((defaultParams) => ({
+    const { input } = createInput(defaultParams => ({
       ...defaultParams,
-      type: 'text',
+      type: "text",
       onKeyUp: onKeyUpHandler,
       onKeyDown: onKeyDownHandler,
-      onChange: onChangeHandler,
+      onChange: onChangeHandler
     }));
 
     input.focus();
 
     expect(input).toHaveFocus();
 
-    userEvent.keyboard('test');
+    userEvent.keyboard("test");
 
     expect(onKeyUpHandler).toHaveBeenCalled();
     expect(onKeyDownHandler).toHaveBeenCalled();
     expect(onChangeHandler).toHaveBeenCalled();
   });
 });
+
+describe("It should render prefix and suffix ", () => {
+  it("renders prefix and suffix", () => {
+    const prefix = "http://";
+    const suffix = ".com";
+    const { getByText } = createInput(defaultParams => ({
+      ...defaultParams,
+      prefix,
+      suffix
+    }));
+
+    expect(getByText(prefix)).toBeDefined();
+    expect(getByText(suffix)).toBeDefined();
+  });
+
+  it("error icon should be visible with suffix", () => {
+    const suffix = ".com";
+    const { input, getByText } = createInput(defaultParams => ({
+      ...defaultParams,
+      error: true,
+      suffix
+    }));
+
+    expect(input.querySelector("icon-warning")).toBeDefined();
+    expect(getByText(suffix)).toBeDefined();
+  });
+});