@onewelcome/react-lib-components 0.1.3-alpha → 0.1.6-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onewelcome/react-lib-components",
-  "version": "0.1.3-alpha",
+  "version": "0.1.6-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']} ${

package/src/Form/Toggle/Toggle.test.tsx

@@ -1,16 +1,43 @@
-import React, { useEffect, useRef } from 'react';
-import { Toggle } from './Toggle';
+import React, { useRef, useEffect } from 'react';
+import { Toggle, Props } from './Toggle';
 import { render } from '@testing-library/react';
 
+const defaultParams: Props = {
+  children: 'label',
+  name: 'example toggle',
+};
+
+const createToggle = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(
+    <Toggle {...parameters} data-testid="toggle">
+      toggle content
+    </Toggle>
+  );
+  const toggle = queries.getByTestId('toggle');
+
+  return {
+    ...queries,
+    toggle,
+  };
+};
+
 describe('Toggle should render', () => {
   it('renders without crashing', () => {
-    const { getByTestId } = render(
-      <Toggle name="toggle" data-testid="component">
-        Toggle
-      </Toggle>
-    );
-    const component = getByTestId('component');
-    expect(component).toBeDefined();
+    const { toggle } = createToggle();
+
+    expect(toggle).toBeDefined();
+  });
+});
+
+describe('Toggle attributes', () => {
+  it('should be checked', () => {
+    const { toggle } = createToggle((defaultParams) => ({ ...defaultParams, checked: true }));
+
+    expect(toggle).toHaveAttribute('aria-checked', 'true');
   });
 });
 
@@ -29,7 +56,7 @@ describe('ref should work', () => {
         }
       }, [ref]);
 
-      return <Toggle name="test" children="test" data-ref="testing" ref={ref} />;
+      return <Toggle {...defaultParams} data-ref="testing" ref={ref} />;
     };
 
     const refCheck = (ref: React.RefObject<HTMLElement>) => {
@@ -40,16 +67,15 @@ describe('ref should work', () => {
   });
 });
 
-describe('Toggle attributes', () => {
-  it('should be checked', () => {
-    const { getByTestId } = render(
-      <Toggle checked={true} name="toggle" data-testid="component">
-        Toggle
-      </Toggle>
-    );
+describe('helperProps should be properly propagated down', () => {
+  it('renders an anchor tag as helper', () => {
+    const { getByTestId } = createToggle((defaultParams) => ({
+      ...defaultParams,
+      helperProps: { children: <a data-testid="helpertextanchor">test</a> },
+    }));
 
-    const component = getByTestId('component');
+    const helperTextAnchor = getByTestId('helpertextanchor');
 
-    expect(component).toHaveAttribute('aria-checked', 'true');
+    expect(helperTextAnchor).toBeTruthy();
   });
 });

package/src/Form/Toggle/Toggle.tsx

@@ -9,14 +9,14 @@ export interface Props
 }
 
 export const Toggle = React.forwardRef<HTMLInputElement, Props>(
-  ({ children, checked, disabled, ...rest }: Props, ref) => (
+  ({ children, checked, disabled, helperProps, ...rest }: Props, ref) => (
     <div className={classes['toggle-wrapper']}>
       <Checkbox
         {...rest}
         ref={ref}
         checked={checked}
         className={classes['checkbox']}
-        helperProps={{ className: classes['toggle-helper'] }}
+        helperProps={{ className: classes['toggle-helper'], ...helperProps }}
         disabled={disabled}
         label={children}
       >

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 {