@onewelcome/react-lib-components 0.1.0-alpha

package/src/Button/BaseButton.test.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { BaseButton, Props } from './BaseButton';
+import { render, getByRole } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+const createButton = (params?: Props, children = 'This is a button') => {
+  const queries = render(<BaseButton {...params}>{children}</BaseButton>);
+  const button = getByRole(queries.container, 'button');
+
+  return {
+    ...queries,
+    button,
+  };
+};
+
+describe('BaseButton should render', () => {
+  it('renders without crashing', async () => {
+    const { findByText } = createButton();
+    findByText('This is a button');
+  });
+});
+
+describe('On click handler', () => {
+  it('executes the onclick handler', async () => {
+    const onClickHandler = jest.fn();
+    const { button } = createButton({ onClick: onClickHandler });
+
+    userEvent.click(button);
+
+    expect(onClickHandler).toBeCalled();
+  });
+});
+
+describe('Properties of the button', () => {
+  it('should be disabled, function should not have been called', () => {
+    const onClickHandler = jest.fn();
+    const { button } = createButton({
+      disabled: true,
+      onClick: onClickHandler,
+    });
+
+    userEvent.click(button);
+    expect(onClickHandler).toHaveBeenCalledTimes(0);
+  });
+
+  it('should have the class "TESTING"', () => {
+    const { button } = createButton({
+      className: 'TESTING',
+    });
+
+    expect(button.classList.contains('TESTING')).toBe(true);
+  });
+
+  it('should have a "name" property with the value "button"', () => {
+    const { button } = createButton({ name: 'button' });
+
+    expect(button.getAttribute('name')).toBe('button');
+  });
+});

package/src/Button/BaseButton.tsx

@@ -0,0 +1,31 @@
+import React, { RefObject } from 'react';
+import classes from './BaseButton.module.scss';
+
+export interface Props extends Omit<React.HTMLProps<HTMLButtonElement>, 'ref'> {
+  type?: 'submit' | 'button' | 'reset';
+  disabled?: boolean;
+  ref?: RefObject<HTMLButtonElement>;
+  color?: 'primary' | 'secondary' | 'tertiary' | 'default';
+}
+
+export const BaseButton = React.forwardRef<HTMLButtonElement, Props>(
+  ({ children, type = 'button', className, ...rest }, ref) => {
+    const validTypes = ['submit', 'button', 'reset'];
+
+    if (!validTypes.includes(type))
+      throw new Error(
+        `You have entered an invalid button type. Expected 'submit', 'button' or 'reset' got ${type}`
+      );
+
+    return (
+      <button
+        {...rest}
+        ref={ref}
+        type={type}
+        className={`${classes.button} ${className ? className : ''}`}
+      >
+        {children}
+      </button>
+    );
+  }
+);

package/src/Button/Button.module.scss

@@ -0,0 +1,336 @@
+@import '../readyclasses.module.scss';
+
+.fill {
+  color: var(--button-fill-text-color);
+  font-weight: bold;
+
+  &.primary:not(:disabled) {
+    background-color: var(--color-primary);
+    border-color: var(--color-primary);
+
+    @include focusOutline(var(--color-primary));
+
+    &:hover,
+    &:focus {
+      color: var(--color-primary);
+    }
+
+    &:active {
+      position: relative;
+      color: var(--color-primary);
+
+      &:after {
+        content: '';
+        position: absolute;
+        top: calc(-1 * var(--button-border-width));
+        left: 0;
+        width: 100%;
+        height: calc(100% + var(--button-border-width));
+        background-color: var(--color-primary);
+        border-radius: var(--button-border-radius);
+        filter: opacity(0.1);
+      }
+    }
+  }
+
+  &.secondary:not(:disabled) {
+    background-color: var(--color-secondary);
+    border-color: var(--color-secondary);
+
+    @include focusOutline(var(--color-secondary));
+
+    &:hover,
+    &:focus {
+      color: var(--color-secondary);
+    }
+
+    &:active {
+      position: relative;
+      color: var(--color-secondary);
+
+      &:after {
+        content: '';
+        position: absolute;
+        top: calc(-1 * var(--button-border-width));
+        left: 0;
+        width: 100%;
+        height: calc(100% + var(--button-border-width));
+        background-color: var(--color-secondary);
+        border-radius: var(--button-border-radius);
+        filter: opacity(0.1);
+      }
+    }
+  }
+
+  &.tertiary:not(:disabled) {
+    background-color: var(--color-tertiary);
+    border-color: var(--color-tertiary);
+
+    @include focusOutline(var(--color-tertiary));
+
+    &:hover,
+    &:focus {
+      color: var(--color-tertiary);
+    }
+
+    &:active {
+      position: relative;
+      color: var(--color-tertiary);
+
+      &:after {
+        content: '';
+        position: absolute;
+        top: calc(-1 * var(--button-border-width));
+        left: 0;
+        width: 100%;
+        height: calc(100% + var(--button-border-width));
+        background-color: var(--color-tertiary);
+        border-radius: var(--button-border-radius);
+        filter: opacity(0.1);
+      }
+    }
+  }
+
+  &.default:not(:disabled) {
+    background-color: var(--default);
+    border-color: var(--default);
+
+    @include focusOutline(var(--default));
+
+    &:hover,
+    &:focus {
+      color: var(--default);
+    }
+
+    &:active {
+      position: relative;
+      color: var(--default);
+
+      &:after {
+        content: '';
+        position: absolute;
+        top: calc(-1 * var(--button-border-width));
+        left: 0;
+        width: 100%;
+        height: calc(100% + var(--button-border-width));
+        background-color: var(--default);
+        border-radius: var(--button-border-radius);
+        filter: opacity(0.1);
+      }
+    }
+  }
+
+  &:hover:not(:disabled),
+  &:focus:not(:disabled),
+  &:active:not(:disabled) {
+    background-color: var(--button-fill-background-color);
+  }
+
+  &:disabled {
+    background-color: var(--disabled);
+    border-color: var(--disabled);
+  }
+}
+
+.outline {
+  background-color: var(--button-fill-background-color);
+  font-weight: bold;
+
+  &.primary:not(:disabled) {
+    border-color: var(--color-primary);
+    color: var(--color-primary);
+
+    @include focusOutline(var(--color-primary));
+
+    &:hover,
+    &:focus {
+      background-color: var(--color-primary);
+    }
+  }
+
+  &.secondary:not(:disabled) {
+    border-color: var(--color-secondary);
+    color: var(--color-secondary);
+
+    @include focusOutline(var(--color-secondary));
+
+    &:hover,
+    &:focus {
+      background-color: var(--color-secondary);
+    }
+  }
+
+  &.tertiary:not(:disabled) {
+    border-color: var(--color-tertiary);
+    color: var(--color-tertiary);
+
+    @include focusOutline(var(--color-tertiary));
+
+    &:hover,
+    &:focus {
+      background-color: var(--color-tertiary);
+    }
+  }
+
+  &.default:not(:disabled) {
+    border-color: var(--default);
+    color: var(--default);
+
+    @include focusOutline(var(--default));
+
+    &:hover,
+    &:focus {
+      background-color: var(--default);
+    }
+  }
+
+  &:hover:not(:disabled),
+  &:focus:not(:disabled) {
+    color: var(--button-outline-hover-text-color);
+  }
+
+  &:disabled {
+    border-color: var(--greyed-out);
+    background-color: transparent;
+  }
+}
+
+.text {
+  border-color: transparent;
+  background-color: transparent;
+
+  &.primary:not(:disabled) {
+    color: var(--color-primary);
+
+    @include focusOutline(var(--color-primary));
+
+    &:hover,
+    &:focus {
+      border-color: var(--color-primary);
+    }
+
+    &:active {
+      background-color: transparent;
+      position: relative;
+      color: var(--color-primary);
+      border-color: var(--button-fill-background-color);
+
+      &:after {
+        content: '';
+        position: absolute;
+        top: calc(-1 * var(--button-border-width) + (var(--button-border-width) / 2));
+        left: 0;
+        width: 100%;
+        height: calc(100% + var(--button-border-width));
+        background-color: var(--color-primary);
+        border-radius: var(--button-border-radius);
+        filter: opacity(0.1);
+      }
+    }
+  }
+
+  &.secondary:not(:disabled) {
+    color: var(--color-secondary);
+
+    @include focusOutline(var(--color-secondary));
+
+    &:hover,
+    &:focus {
+      border-color: var(--color-secondary);
+    }
+
+    &:active {
+      background-color: transparent;
+      position: relative;
+      color: var(--color-secondary);
+      border-color: var(--button-fill-background-color);
+
+      &:after {
+        content: '';
+        position: absolute;
+        top: calc(-1 * var(--button-border-width) + (var(--button-border-width) / 2));
+        left: 0;
+        width: 100%;
+        height: calc(100% + var(--button-border-width));
+        background-color: var(--color-secondary);
+        border-radius: var(--button-border-radius);
+        filter: opacity(0.1);
+      }
+    }
+  }
+
+  &.tertiary:not(:disabled) {
+    color: var(--color-tertiary);
+
+    @include focusOutline(var(--color-tertiary));
+
+    &:hover,
+    &:focus {
+      border-color: var(--color-tertiary);
+    }
+
+    &:active {
+      background-color: transparent;
+      position: relative;
+      color: var(--color-tertiary);
+      border-color: var(--button-fill-background-color);
+
+      &:after {
+        content: '';
+        position: absolute;
+        top: calc(-1 * var(--button-border-width) + (var(--button-border-width) / 2));
+        left: 0;
+        width: 100%;
+        height: calc(100% + var(--button-border-width));
+        background-color: var(--color-tertiary);
+        border-radius: var(--button-border-radius);
+        filter: opacity(0.1);
+      }
+    }
+  }
+
+  &.default:not(:disabled) {
+    color: var(--default);
+
+    @include focusOutline(var(--default));
+
+    &:hover,
+    &:focus {
+      border-color: var(--default);
+    }
+
+    &:active {
+      background-color: transparent;
+      position: relative;
+      color: var(--default);
+      border-color: var(--button-fill-background-color);
+
+      &:after {
+        content: '';
+        position: absolute;
+        top: calc(-1 * var(--button-border-width) + (var(--button-border-width) / 2));
+        left: 0;
+        width: 100%;
+        height: calc(100% + var(--button-border-width));
+        background-color: var(--default);
+        border-radius: var(--button-border-radius);
+        filter: opacity(0.1);
+      }
+    }
+  }
+}
+
+.has-icon {
+  display: flex;
+  align-items: center;
+
+  &.start-icon {
+    padding-left: 1rem;
+    padding-right: 1.25rem;
+  }
+
+  &.end-icon {
+    padding-left: 1.25rem;
+    padding-right: 1rem;
+  }
+}

package/src/Button/Button.test.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Button, Props } from './Button';
+import { render, getByRole } from '@testing-library/react';
+import { Icon, Icons } from '../Icon/Icon';
+
+const createButton = (params?: Props, children = 'This is a button') => {
+  const queries = render(<Button {...params}>{children}</Button>);
+  const button = getByRole(queries.container, 'button');
+
+  return {
+    ...queries,
+    button,
+  };
+};
+
+describe('Button should render', () => {
+  it('renders without crashing', () => {
+    const { button } = createButton();
+
+    expect(button).toBeDefined();
+  });
+});
+
+describe('Different variants of the button', () => {
+  it('should have a class of "primary"', () => {
+    const { button } = createButton({ color: 'primary' });
+    expect(button.classList.contains('primary')).toBe(true);
+  });
+
+  it('should have a class of "secondary"', () => {
+    const { button } = createButton({ color: 'secondary' });
+    expect(button.classList.contains('secondary')).toBe(true);
+  });
+
+  it('should have a class of "tertiary"', () => {
+    const { button } = createButton({ color: 'tertiary' });
+    expect(button.classList.contains('tertiary')).toBe(true);
+  });
+
+  it('should have a class of "fill"', () => {
+    const { button } = createButton({ variant: 'fill' });
+    expect(button.classList.contains('fill')).toBe(true);
+  });
+
+  it('should have a class of "outline"', () => {
+    const { button } = createButton({ variant: 'outline' });
+    expect(button.classList.contains('outline')).toBe(true);
+  });
+
+  it('should have a class of "text"', () => {
+    const { button } = createButton({ variant: 'text' });
+    expect(button.classList.contains('text')).toBe(true);
+  });
+});
+
+describe('Button contains an icon', () => {
+  it('Contains an icon at the start', () => {
+    const { button } = createButton({
+      startIcon: <Icon icon={Icons.Calendar} />,
+    });
+
+    expect(button.classList.contains('has-icon')).toBe(true);
+    expect(button.firstElementChild?.nodeName).toBe('I');
+    expect(button.querySelector('i + span')!.innerHTML).toBe('This is a button');
+  });
+
+  it('Contains an icon at the end', () => {
+    const { button } = createButton({
+      endIcon: <Icon icon={Icons.Calendar} />,
+    });
+
+    expect(button.classList.contains('has-icon')).toBe(true);
+    expect(button.lastElementChild?.nodeName).toBe('I');
+    expect(button.querySelector('span')!.innerHTML).toBe('This is a button');
+  });
+});

package/src/Button/Button.tsx

@@ -0,0 +1,44 @@
+import React, { RefObject } from 'react';
+import { BaseButton, Props as BaseButtonProps } from './BaseButton';
+import classes from './Button.module.scss';
+
+export interface Props extends Omit<BaseButtonProps, 'ref'> {
+  startIcon?: React.ReactNode | false;
+  endIcon?: React.ReactNode | false;
+  children?: React.ReactNode;
+  variant?: 'text' | 'fill' | 'outline';
+  ref?: RefObject<HTMLButtonElement>;
+}
+
+export const Button = React.forwardRef<HTMLButtonElement, Props>(
+  (
+    { children, variant = 'fill', color = 'primary', startIcon = false, endIcon = false, ...rest },
+    ref
+  ) => {
+    const additionalClasses = [];
+
+    if (startIcon || endIcon) {
+      additionalClasses.push(classes['has-icon']);
+    }
+
+    if (startIcon) {
+      additionalClasses.push(classes['start-icon']);
+    }
+
+    if (endIcon) {
+      additionalClasses.push(classes['end-icon']);
+    }
+
+    return (
+      <BaseButton
+        {...rest}
+        ref={ref}
+        className={`${classes[color]} ${classes[variant]} ${additionalClasses.join(' ')}`}
+      >
+        {startIcon && <i>{startIcon}&nbsp;</i>}
+        <span>{children}</span>
+        {endIcon && <i>&nbsp;{endIcon}</i>}
+      </BaseButton>
+    );
+  }
+);

package/src/Button/IconButton.module.scss

@@ -0,0 +1,161 @@
+@import '../readyclasses.module.scss';
+
+.icon-button {
+  border: var(--button-border-width) var(--button-border-style) transparent;
+  background-color: transparent;
+  padding: 0;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    vertical-align: top;
+  }
+
+  /** Sizes **/
+  &.button-s {
+    svg {
+      font-size: 14px;
+    }
+    width: 30px;
+    height: 30px;
+  }
+
+  &.button-m {
+    svg {
+      font-size: 24px;
+    }
+    width: 40px;
+    height: 40px;
+  }
+
+  &.button-l {
+    svg {
+      font-size: 34px;
+    }
+    width: 50px;
+    height: 50px;
+  }
+
+  /** Colors **/
+  &.primary:not(:disabled) {
+    color: var(--color-primary);
+
+    @include focusOutline(var(--color-primary));
+
+    &:hover,
+    &:focus {
+      border-color: var(--color-primary);
+    }
+
+    &:active {
+      background-color: transparent;
+      position: relative;
+      color: var(--color-primary);
+      border-color: var(--button-fill-background-color);
+
+      &:after {
+        content: '';
+        position: absolute;
+        top: calc(-1 * var(--button-border-width) + (var(--button-border-width) / 2));
+        left: calc(-1 * var(--button-border-width) + (var(--button-border-width) / 2));
+        width: calc(100% + var(--button-border-width));
+        height: calc(100% + var(--button-border-width));
+        background-color: var(--color-primary);
+        border-radius: var(--button-border-radius);
+        filter: opacity(0.1);
+      }
+    }
+  }
+
+  &.secondary:not(:disabled) {
+    color: var(--color-secondary);
+
+    @include focusOutline(var(--color-secondary));
+
+    &:hover,
+    &:focus {
+      border-color: var(--color-secondary);
+    }
+
+    &:active {
+      background-color: transparent;
+      position: relative;
+      color: var(--color-secondary);
+      border-color: var(--button-fill-background-color);
+
+      &:after {
+        content: '';
+        position: absolute;
+        top: calc(-1 * var(--button-border-width) + (var(--button-border-width) / 2));
+        left: calc(-1 * var(--button-border-width) + (var(--button-border-width) / 2));
+        width: calc(100% + var(--button-border-width));
+        height: calc(100% + var(--button-border-width));
+        background-color: var(--color-secondary);
+        border-radius: var(--button-border-radius);
+        filter: opacity(0.1);
+      }
+    }
+  }
+
+  &.tertiary:not(:disabled) {
+    color: var(--color-tertiary);
+
+    @include focusOutline(var(--color-tertiary));
+
+    &:hover,
+    &:focus {
+      border-color: var(--color-tertiary);
+    }
+
+    &:active {
+      background-color: transparent;
+      position: relative;
+      color: var(--color-tertiary);
+      border-color: var(--button-fill-background-color);
+
+      &:after {
+        content: '';
+        position: absolute;
+        top: calc(-1 * var(--button-border-width) + (var(--button-border-width) / 2));
+        left: calc(-1 * var(--button-border-width) + (var(--button-border-width) / 2));
+        width: calc(100% + var(--button-border-width));
+        height: calc(100% + var(--button-border-width));
+        background-color: var(--color-tertiary);
+        border-radius: var(--button-border-radius);
+        filter: opacity(0.1);
+      }
+    }
+  }
+
+  &.default {
+    color: var(--default);
+
+    @include focusOutline(var(--default));
+
+    &:hover,
+    &:focus {
+      border-color: var(--default);
+    }
+
+    &:active {
+      background-color: transparent;
+      position: relative;
+      color: var(--default);
+      border-color: var(--button-fill-background-color);
+
+      &:after {
+        content: '';
+        position: absolute;
+        top: calc(-1 * var(--button-border-width) + (var(--button-border-width) / 2));
+        left: calc(-1 * var(--button-border-width) + (var(--button-border-width) / 2));
+        width: calc(100% + var(--button-border-width));
+        height: calc(100% + var(--button-border-width));
+        background-color: var(--default);
+        border-radius: var(--button-border-radius);
+        filter: opacity(0.1);
+      }
+    }
+  }
+}