@onewelcome/react-lib-components 0.2.0 → 0.2.3

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;
   }
 }