@onewelcome/react-lib-components 0.1.4-alpha → 0.1.7-alpha

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

@@ -1,5 +1,5 @@
 import React, { ComponentPropsWithRef } from 'react';
-import { Checkbox, CheckboxProps } from '../Checkbox/Checkbox';
+import { Checkbox, Props as CheckboxProps } from '../Checkbox/Checkbox';
 import classes from './Toggle.module.scss';
 
 export interface Props
@@ -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/Form/Wrapper/CheckboxWrapper/CheckboxWrapper.test.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import { CheckboxWrapper, Props } from './CheckboxWrapper';
-import { Checkbox, CheckboxProps } from '../../Checkbox/Checkbox';
+import { Checkbox, Props as CheckboxProps } from '../../Checkbox/Checkbox';
 import { render } from '@testing-library/react';
 
 const defaultParentParams: CheckboxProps = {

package/src/Link/Link.module.scss

@@ -1,3 +1,5 @@
+@import '../mixins.module.scss';
+
 .link {
   font-family: var(--font-family);
   font-size: var(--font-size);
@@ -44,3 +46,21 @@
     }
   }
 }
+
+.button {
+  @include buttonBase('link');
+
+  text-decoration: none;
+
+  &.fill {
+    @include button('fill', 'link');
+  }
+
+  &.outline {
+    @include button('outline', 'link');
+  }
+
+  &.text {
+    @include button('text', 'link');
+  }
+}

package/src/Link/Link.test.tsx

@@ -99,6 +99,39 @@ describe('Link should render', () => {
 
     expect(link).toHaveClass('classname');
   });
+
+  it('should render as a filled button ', () => {
+    const { link } = createLink((defaultParams) => ({
+      ...defaultParams,
+      display: 'button',
+      buttonVariant: 'fill',
+    }));
+
+    expect(link).toHaveClass('button');
+    expect(link).toHaveClass('fill');
+  });
+
+  it('should render as a text button ', () => {
+    const { link } = createLink((defaultParams) => ({
+      ...defaultParams,
+      display: 'button',
+      buttonVariant: 'text',
+    }));
+
+    expect(link).toHaveClass('button');
+    expect(link).toHaveClass('text');
+  });
+
+  it('should render as an outline button ', () => {
+    const { link } = createLink((defaultParams) => ({
+      ...defaultParams,
+      display: 'button',
+      buttonVariant: 'outline',
+    }));
+
+    expect(link).toHaveClass('button');
+    expect(link).toHaveClass('outline');
+  });
 });
 
 describe('ref should work', () => {

package/src/Link/Link.tsx

@@ -7,11 +7,13 @@ import React, {
 import classes from './Link.module.scss';
 import { LinkProps } from './types';
 
-type AnchorType = 'external' | 'internal' | 'download';
+export type AnchorType = 'external' | 'internal' | 'download';
 
 export interface Props extends ComponentPropsWithRef<'a'> {
   children?: ReactNode;
   color?: 'primary' | 'secondary' | 'tertiary';
+  display?: 'link' | 'button';
+  buttonVariant?: 'outline' | 'text' | 'fill';
   type?: AnchorType;
   to: string;
   disabled?: boolean;
@@ -27,6 +29,8 @@ export const Link = React.forwardRef<HTMLAnchorElement, Props>(
       to,
       color = 'primary',
       type = 'internal',
+      display = 'link',
+      buttonVariant = 'fill',
       component,
       ...rest
     }: Props,
@@ -44,7 +48,9 @@ export const Link = React.forwardRef<HTMLAnchorElement, Props>(
       return '';
     };
 
-    const classNames = [classes['link'], classes[color]];
+    const classNames = [classes[color]];
+    display === 'link' && classNames.push(classes['link']);
+    display === 'button' && classNames.push(classes['button'], classes[buttonVariant]);
     disabled && classNames.push(classes['disabled']);
     className && classNames.push(className);
 

package/src/Notifications/BaseModal/BaseModal.test.tsx

@@ -6,48 +6,112 @@ import userEvent from '@testing-library/user-event';
 const classNames = ['class11', 'class12'];
 const containerClassNames = ['class21', 'class22'];
 
-const initParams: Props = {
+const defaultParams: Props = {
   id: 'modal',
   open: true,
   onClose: jest.fn(),
   className: classNames.join(' '),
-  containerClassName: containerClassNames.join(' '),
+  containerProps: { className: containerClassNames.join(' ') },
   children: 'This is example dialog content.',
 };
 
+const createBaseModal = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(<BaseModal {...parameters} data-testid="BaseModal" />);
+  const slideInModal = queries.getByTestId('BaseModal');
+
+  return {
+    ...queries,
+    slideInModal,
+  };
+};
+
 describe('BaseModal', () => {
   it('renders without crashing', () => {
-    const { getByRole } = render(<BaseModal {...initParams} />);
+    const { getByRole } = createBaseModal();
     const dialog = getByRole('dialog');
+
     expect(dialog).toHaveAttribute('aria-modal', 'true');
     expect(dialog).toHaveAttribute('aria-labelledby', 'modal-label');
     expect(dialog).toHaveAttribute('aria-describedby', 'modal-description');
     expect(dialog).toHaveAttribute('data-hidden', 'false');
     expect(dialog).toHaveAttribute('aria-hidden', 'false');
-    expect(getByText(dialog, initParams.children as string)).toBeDefined();
+    expect(getByText(dialog, defaultParams.children as string)).toBeDefined();
     expect(document.body).toHaveStyle('overflow: hidden');
   });
 
-  it('should render close modal without content', () => {
-    const { queryByRole } = render(<BaseModal {...initParams} open={false} />);
+  it('should render closed modal without content', () => {
+    const { queryByRole } = createBaseModal((params) => ({ ...params, open: false }));
+
     const dialogByRole = queryByRole('dialog');
     const dialog = document.body.children[1] as HTMLElement;
+
     expect(dialogByRole).toBeNull();
     expect(dialog).toHaveAttribute('aria-hidden', 'true');
-    expect(queryByText(dialog, initParams.children as string)).toBeNull();
+    expect(queryByText(dialog, defaultParams.children as string)).toBeNull();
+  });
+
+  it('should render closed modal with content when forceContainerOpen is provided', () => {
+    const { getByRole } = createBaseModal((params) => ({
+      ...params,
+      open: false,
+      forceContainerOpen: true,
+    }));
+
+    const modal = getByRole('dialog', { hidden: true });
+    const container = modal.querySelector('.container') as HTMLElement;
+
+    expect(container).toBeInTheDocument();
+    expect(container).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('propagates containerProps to container element', () => {
+    const { getByRole } = createBaseModal((params) => ({
+      ...params,
+      open: true,
+      containerProps: {
+        id: 'container',
+      },
+    }));
+
+    const modal = getByRole('dialog');
+    const container = modal.querySelector('.container') as HTMLElement;
+
+    expect(container).toBeInTheDocument();
+    expect(container).toHaveAttribute('id', 'container');
+  });
+
+  it('propagates backdropProps to backdrop element', () => {
+    const { getByRole } = createBaseModal((params) => ({
+      ...params,
+      open: true,
+      backdropProps: {
+        id: 'backdrop',
+      },
+    }));
+
+    const modal = getByRole('dialog');
+    const backdrop = modal.querySelector('.backdrop') as HTMLElement;
+
+    expect(backdrop).toBeInTheDocument();
+    expect(backdrop).toHaveAttribute('id', 'backdrop');
   });
 
   it('should handle clicking on backdrop & ESC key', () => {
-    const { getByRole } = render(<BaseModal {...initParams} />);
+    const { getByRole } = createBaseModal();
+
     const modal = getByRole('dialog');
     const backdrop = modal.querySelector('.backdrop') as HTMLElement;
-    expect(initParams.onClose).toHaveBeenCalledTimes(0);
+    expect(defaultParams.onClose).toHaveBeenCalledTimes(0);
 
     userEvent.click(backdrop);
-    expect(initParams.onClose).toHaveBeenCalledTimes(1);
+    expect(defaultParams.onClose).toHaveBeenCalledTimes(1);
 
     fireEvent.keyDown(modal, { key: 'Escape' });
-    expect(initParams.onClose).toHaveBeenCalledTimes(2);
+    expect(defaultParams.onClose).toHaveBeenCalledTimes(2);
   });
 });
 

package/src/Notifications/BaseModal/BaseModal.tsx

@@ -12,11 +12,13 @@ export interface Props extends ComponentPropsWithRef<'div'> {
   open: boolean;
   onClose?: (event?: React.MouseEvent<HTMLElement>) => unknown;
   className?: string;
-  containerClassName?: string;
+  containerProps?: ComponentPropsWithRef<'div'>;
+  backdropProps?: ComponentPropsWithRef<'div'>;
   labelledby?: string;
   describedby?: string;
   disableEscapeKeyDown?: boolean;
   disableBackdrop?: boolean;
+  forceContainerOpen?: boolean;
   zIndex?: number;
   domRoot?: HTMLElement;
 }
@@ -51,11 +53,13 @@ export const BaseModal = React.forwardRef<HTMLDivElement, Props>(
       open,
       onClose,
       className = '',
-      containerClassName = '',
+      containerProps,
+      backdropProps,
       labelledby,
       describedby,
       disableEscapeKeyDown = false,
       disableBackdrop = false,
+      forceContainerOpen = false,
       zIndex,
       domRoot = document.body,
       ...rest
@@ -78,7 +82,7 @@ export const BaseModal = React.forwardRef<HTMLDivElement, Props>(
         {...rest}
         ref={ref}
         id={id}
-        className={`${classes['modal']} ${open && classes['visible']} ${className}`}
+        className={`${classes['modal']} ${open ? classes['visible'] : ''} ${className}`}
         role="dialog"
         aria-modal="true"
         aria-labelledby={labelledby || labelId(id)}
@@ -89,14 +93,31 @@ export const BaseModal = React.forwardRef<HTMLDivElement, Props>(
         onKeyDown={handleEscKeyPress}
         style={{ zIndex }}
       >
-        <div className={classes['backdrop']} onClick={handleBackdropClick}></div>
-        {open && (
+        <div
+          {...backdropProps}
+          className={`${classes['backdrop']} ${backdropProps?.className ?? ''}`}
+          onClick={handleBackdropClick}
+        ></div>
+        {forceContainerOpen ? (
           <div
+            {...containerProps}
+            aria-hidden={!open}
+            hidden={!open}
             style={{ zIndex: zIndex && zIndex + 1 }}
-            className={`${classes['container']} ${containerClassName}`}
+            className={`${classes['container']} ${containerProps?.className ?? ''}`}
           >
             {children}
           </div>
+        ) : (
+          open && (
+            <div
+              {...containerProps}
+              style={{ zIndex: zIndex && zIndex + 1 }}
+              className={`${classes['container']} ${containerProps?.className ?? ''}`}
+            >
+              {children}
+            </div>
+          )
         )}
       </div>,
       domRoot

package/src/Notifications/Dialog/Dialog.tsx

@@ -74,7 +74,7 @@ export const Dialog = React.forwardRef<HTMLDivElement, Props>(
         ref={ref}
         id={dialogId}
         className={classes['dialog']}
-        containerClassName={classes['container']}
+        containerProps={{ className: classes['container'] }}
         open={open}
         disableBackdrop
         onClose={onClose}

package/src/Notifications/SlideInModal/SlideInModal.module.scss

@@ -0,0 +1,36 @@
+.slide-in-modal {
+  justify-content: flex-end;
+
+  visibility: visible;
+
+  transition: transform 0.5s ease-in-out;
+  transform: translate(120%);
+
+  &.hidden {
+    visibility: hidden;
+  }
+
+  &.visible {
+    visibility: visible;
+    transform: translate(0%);
+
+    .backdrop-slide {
+      background-color: transparent;
+    }
+  }
+}
+
+.backdrop-slide {
+  background-color: transparent;
+}
+
+@media only screen and (min-width: 50rem) {
+  .container {
+    margin-top: 0;
+    width: 50rem;
+    height: 100%;
+    max-height: unset;
+    border-radius: 0;
+    box-shadow: 0 1.875rem 3.125rem var(--modal-shadow-color);
+  }
+}

package/src/Notifications/SlideInModal/SlideInModal.test.tsx

@@ -0,0 +1,69 @@
+import React, { useEffect, useRef } from 'react';
+import { SlideInModal } from './SlideInModal';
+import { Props } from '../Modal/Modal';
+import { render, fireEvent } from '@testing-library/react';
+
+const defaultParams: Props = {
+  id: '',
+  children: undefined,
+  open: false,
+};
+
+const createSlideInModal = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(<SlideInModal {...parameters} data-testid="SlideInModal" />);
+  const slideInModal = queries.getByTestId('SlideInModal');
+
+  return {
+    ...queries,
+    slideInModal,
+  };
+};
+
+describe('SlideInModal should render', () => {
+  it('renders without crashing', () => {
+    const { slideInModal } = createSlideInModal();
+
+    expect(slideInModal).toBeDefined();
+  });
+
+  it("makes modal content's container visible after opening transition ends", () => {
+    const { slideInModal, rerender } = createSlideInModal();
+
+    expect(slideInModal).toHaveClass('hidden');
+
+    rerender(<SlideInModal {...defaultParams} open />);
+    fireEvent.transitionEnd(slideInModal);
+
+    expect(slideInModal).not.toHaveClass('hidden');
+  });
+});
+
+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?: (ref: React.RefObject<HTMLElement>) => void;
+    }) => {
+      const ref = useRef(null);
+
+      useEffect(() => {
+        if (ref.current) {
+          propagateRef && propagateRef(ref);
+        }
+      }, [ref]);
+
+      return <SlideInModal {...defaultParams} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});

package/src/Notifications/SlideInModal/SlideInModal.tsx

@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import { Props as ModalProps, Modal } from '../Modal/Modal';
+import classes from './SlideInModal.module.scss';
+
+export const SlideInModal = React.forwardRef<HTMLDivElement, ModalProps>(
+  ({ children, id, open, ...rest }: ModalProps, ref) => {
+    const [classHideOnTransition, setClassHideOnTransition] = useState<'hidden' | ''>('hidden');
+
+    const onTransitionEnd = () => setClassHideOnTransition((prev) => (prev ? '' : 'hidden'));
+
+    return (
+      <Modal
+        {...rest}
+        id={id}
+        open={open}
+        className={`${classes['slide-in-modal']} ${open ? classes['visible'] : ''} ${
+          !open ? classes[classHideOnTransition] : ''
+        }`}
+        containerProps={{ className: classes['container'] }}
+        backdropProps={{ className: classes['backdrop-slide'] }}
+        forceContainerOpen
+        onTransitionEnd={onTransitionEnd}
+        ref={ref}
+      >
+        {children}
+      </Modal>
+    );
+  }
+);
+
+export { Props } from '../Modal/Modal';

package/src/StatusIndicator/StatusIndicator.module.scss

@@ -0,0 +1,27 @@
+.status-indicator {
+  display: flex;
+  align-items: center;
+}
+
+.status-badge {
+  width: 0.75rem;
+  height: 0.75rem;
+  margin-right: 0.5rem;
+  border-radius: 50%;
+}
+
+.active {
+  background-color: var(--success);
+}
+
+.error {
+  background-color: var(--error);
+}
+
+.neutral {
+  background-color: var(--greyed-out);
+}
+
+.warning {
+  background-color: var(--warning);
+}