@onewelcome/react-lib-components 0.1.2-alpha → 0.1.5-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onewelcome/react-lib-components",
-  "version": "0.1.2-alpha",
+  "version": "0.1.5-alpha",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/index.js",

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

@@ -85,3 +85,27 @@ describe('Correct error state', () => {
     expect(errorMessage?.querySelector('#error_id')).toHaveTextContent('example error message');
   });
 });
+
+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) => ({
+      ...defaultParams,
+      error: false,
+      helperText: undefined,
+      errorMessage: 'example error message',
+    }));
+
+    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) => ({
+      ...defaultParams,
+      error: true,
+      helperText: undefined,
+      errorMessage: 'example error message',
+    }));
+
+    expect(formgroup.querySelector('.default-helper')).toBeTruthy();
+  });
+});

package/src/Form/FormGroup/FormGroup.tsx

@@ -45,7 +45,7 @@ export const FormGroup = React.forwardRef<HTMLDivElement, Props>(
       >
         {children}
 
-        {(helperText || errorMessage) && (
+        {(helperText || (errorMessage && error)) && (
           <div
             style={{ marginLeft: `${helperIndent}px` }}
             className={`${classes['default-helper']} ${
@@ -54,7 +54,7 @@ export const FormGroup = React.forwardRef<HTMLDivElement, Props>(
           >
             {helperText && !error && (
               <FormHelperText {...helperProps} className={''} id={helperId}>
-                {helperText}
+                {(helperProps && helperProps.children) || helperText}
               </FormHelperText>
             )}
             {error && errorMessage && (

package/src/Form/FormSelectorWrapper/FormSelectorWrapper.tsx

@@ -45,18 +45,19 @@ export const FormSelectorWrapper = React.forwardRef<HTMLDivElement, Props>(
         }`}
       >
         <div {...containerProps}>{children}</div>
-        {helperText && (!error || parentErrorId || !errorMessage) && (
-          <FormHelperText
-            {...helperProps}
-            ref={helperRef}
-            id={`${identifier}`}
-            className={`${classes['helper-text']} ${helperProps?.className ?? ''} ${
-              error ? classes['error'] : ''
-            }`}
-          >
-            {helperText}
-          </FormHelperText>
-        )}
+        {(helperText || (helperProps && helperProps.children)) &&
+          (!error || parentErrorId || !errorMessage) && (
+            <FormHelperText
+              {...helperProps}
+              ref={helperRef}
+              id={`${identifier}`}
+              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} />

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

@@ -38,6 +38,7 @@
   font-family: var(--font-family);
   width: 100%;
   box-sizing: border-box;
+  padding: 0;
 
   &:focus:not(:disabled) {
     outline: none;

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

@@ -19,10 +19,15 @@ input {
 }
 
 .input-wrapper [data-icon]:before {
-  transform: translateY(5px);
+  transition: 0.2s ease-in-out;
+  transform: translateY(0px);
   font-size: 1.125rem;
 }
 
+.input-wrapper .floating-label-active [data-icon]:before {
+  transform: translateY(5px);
+}
+
 .input-wrapper [data-prefix],
 .input-wrapper [data-suffix] {
   transform: translateY(-0.125rem);

package/src/Form/Wrapper/InputWrapper/InputWrapper.tsx

@@ -54,6 +54,7 @@ export const InputWrapper = React.forwardRef<HTMLDivElement, Props>(
       helperText,
       helperProps,
       value,
+      className,
       error,
       onChange,
       onBlur,
@@ -90,7 +91,7 @@ export const InputWrapper = React.forwardRef<HTMLDivElement, Props>(
         {...rest}
         ref={ref || wrapper}
         name={name}
-        className={classes['input-wrapper']}
+        className={`${classes['input-wrapper']} ${className ?? ''}`}
         labelProps={{
           id: labelId,
           className: labelClasses.join(' '),
@@ -111,7 +112,11 @@ export const InputWrapper = React.forwardRef<HTMLDivElement, Props>(
           {...inputProps}
           prefix={hasValueOrActiveFloatingLabel ? prefix : ''}
           suffix={hasValueOrActiveFloatingLabel ? suffix : ''}
-          wrapperProps={{ className: floatingLabelActive ? classes['floating-label-active'] : '' }}
+          wrapperProps={{
+            className: `${floatingLabelActive ? classes['floating-label-active'] : ''} ${
+              inputProps?.wrapperProps?.className ?? ''
+            }`,
+          }}
           ref={(inputProps && inputProps.ref) || input}
           aria-labelledby={labelId}
           aria-describedby={error ? errorId : helperId}
@@ -132,7 +137,9 @@ export const InputWrapper = React.forwardRef<HTMLDivElement, Props>(
               ? setFloatingLabelActive(true)
               : setFloatingLabelActive(false);
           }}
-          className={floatingLabelActive ? classes['floating-label'] : ''}
+          className={`${floatingLabelActive ? classes['floating-label'] : ''} ${
+            inputProps?.className ?? ''
+          }`}
           name={name}
           error={error}
           id={name}

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

@@ -1,7 +1,7 @@
 .textarea-label {
   left: calc(
-    1.25rem + 2px
-  ); // 2px is for offset of the textarea border. It's relative to the parent div which doesn't have a border.
+    1.25rem + 1px
+  ); // 1px is for offset of the textarea border. It's relative to the parent div which doesn't have a border.
 
   &.focus {
     color: var(--color-primary);

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

@@ -7,7 +7,7 @@
   position: absolute;
   z-index: 1;
   top: 1.3125rem;
-  left: 1.25rem;
+  left: 1.35rem;
   transform-origin: left top;
   transition: all 0.2s ease-in-out;
   pointer-events: none;

package/src/Link/Link.tsx

@@ -1,11 +1,16 @@
-import React, { ComponentPropsWithRef, ForwardRefExoticComponent, RefAttributes } from 'react';
+import React, {
+  ComponentPropsWithRef,
+  ForwardRefExoticComponent,
+  ReactNode,
+  RefAttributes,
+} from 'react';
 import classes from './Link.module.scss';
 import { LinkProps } from './types';
 
 type AnchorType = 'external' | 'internal' | 'download';
 
 export interface Props extends ComponentPropsWithRef<'a'> {
-  children?: string;
+  children?: ReactNode;
   color?: 'primary' | 'secondary' | 'tertiary';
   type?: AnchorType;
   to: string;

package/src/index.ts

@@ -13,6 +13,9 @@ export {
 } from './Pagination/Pagination';
 export { Icon, Icons } from './Icon/Icon';
 
+export { Tabs, Props as TabsProps } from './Tabs/Tabs';
+export { Tab, Props as TabProps } from './Tabs/Tab';
+
 export { Dialog } from './Notifications/Dialog/Dialog';
 export { Modal } from './Notifications/Modal/Modal';
 export { ModalActions } from './Notifications/Modal/ModalActions/ModalActions';
@@ -52,6 +55,7 @@ export { TextareaWrapper } from './Form/Wrapper/TextareaWrapper/TextareaWrapper'
 export { Input } from './Form/Input/Input';
 export { Radio } from './Form/Radio/Radio';
 export { Checkbox } from './Form/Checkbox/Checkbox';
+export { Toggle } from './Form/Toggle/Toggle';
 
 /** Wizard */
 export {