@onewelcome/react-lib-components 0.1.0-alpha

package/src/Typography/Typography.test.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import { Typography, Props } from './Typography';
+import { render } from '@testing-library/react';
+import { Spacing } from '../hooks/useSpacing';
+
+const renderTypography = (
+  typoVariant: Props['variant'],
+  wrapper?: Props['tag'],
+  spacing?: Spacing
+) => {
+  const queries = render(
+    <Typography variant={typoVariant} tag={wrapper} spacing={spacing} data-testid="component">
+      Test
+    </Typography>
+  );
+
+  const typography = queries.getByTestId('component');
+
+  return {
+    ...queries,
+    typography,
+  };
+};
+
+const className = (variant: Props['variant']) => `typography_style_${variant}`;
+
+describe('Typography should render', () => {
+  it('renders without crashing', () => {
+    const { typography } = renderTypography('h1');
+    expect(typography).toBeDefined();
+  });
+});
+
+describe('Should give the correct default tags and corresponding classnames', () => {
+  it('renders an h1', () => {
+    const variant = 'h1';
+    const { typography } = renderTypography(variant);
+
+    expect(typography.nodeName).toBe('H1');
+    expect(typography).toHaveClass(className(variant));
+  });
+
+  it('renders an h2', () => {
+    const variant = 'h2';
+    const { typography } = renderTypography(variant);
+
+    expect(typography.nodeName).toBe('H2');
+    expect(typography).toHaveClass(className(variant));
+  });
+
+  it('renders an h3', () => {
+    const variant = 'h3';
+    const { typography } = renderTypography(variant);
+
+    expect(typography.nodeName).toBe('H3');
+    expect(typography).toHaveClass(className(variant));
+  });
+
+  it('renders an h4', () => {
+    const variant = 'h4';
+    const { typography } = renderTypography(variant);
+
+    expect(typography.nodeName).toBe('H4');
+    expect(typography).toHaveClass(className(variant));
+  });
+
+  it('renders a p', () => {
+    const variant = 'body';
+    const { typography } = renderTypography(variant);
+
+    expect(typography.nodeName).toBe('P');
+    expect(typography).toHaveClass(className(variant));
+  });
+
+  it('renders a p', () => {
+    const variant = 'body-bold';
+    const { typography } = renderTypography(variant);
+
+    expect(typography.nodeName).toBe('P');
+    expect(typography).toHaveClass(className(variant));
+  });
+
+  it('renders a span', () => {
+    const variant = 'sub-text';
+    const { typography } = renderTypography(variant);
+
+    expect(typography.nodeName).toBe('SPAN');
+    expect(typography).toHaveClass(className(variant));
+  });
+
+  it('renders a code', () => {
+    const variant = 'code';
+    const { typography } = renderTypography(variant);
+
+    expect(typography.nodeName).toBe('CODE');
+    expect(typography).toHaveClass(className(variant));
+  });
+});
+
+describe('Should override tagname', () => {
+  it('has to be a DIV element', () => {
+    const { typography } = renderTypography('h1', 'div');
+
+    expect(typography.nodeName).toBe('DIV');
+  });
+});
+
+describe('Should override styling', () => {
+  it('renders h1 with overwritten margin properties', () => {
+    const { typography } = renderTypography('h1', undefined, { margin: 4, marginBottom: 8 });
+
+    expect(typography.style).toHaveProperty('margin', '1rem 1rem 2rem 1rem');
+  });
+});

package/src/Typography/Typography.tsx

@@ -0,0 +1,84 @@
+import React, { HTMLAttributes, ReactNode } from 'react';
+import classes from './Typography.module.scss';
+import { Spacing, useSpacing } from '../hooks/useSpacing';
+
+const validVariants = ['h1', 'h2', 'h3', 'h4', 'body', 'body-bold', 'sub-text', 'code'] as const;
+export type Variant = typeof validVariants[number];
+
+export interface Props extends HTMLAttributes<HTMLElement> {
+  children: ReactNode;
+  variant: Variant;
+  tag?:
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'p'
+    | 'div'
+    | 'code'
+    | 'span'
+    | 'sup'
+    | 'sub'
+    | 'strong'
+    | 'em'
+    | 'small'
+    | 'mark'
+    | 'del'
+    | 'ins'
+    | 'blockquote';
+  spacing?: Spacing;
+}
+
+export const Typography = ({
+  children,
+  variant,
+  tag,
+  style,
+  spacing,
+  className = '',
+  ...rest
+}: Props) => {
+  if (!validVariants.includes(variant)) {
+    throw new Error(
+      `You entered an invalid variant. You can choose from: ${validVariants}, you entered: ${variant}`
+    );
+  }
+
+  const styleWithSpacing = useSpacing(spacing, style);
+
+  if (!tag) {
+    switch (variant) {
+      case 'h1':
+      case 'h2':
+      case 'h3':
+      case 'h4':
+      case 'code':
+        tag = variant;
+        break;
+      case 'body':
+        tag = 'p';
+        break;
+      case 'body-bold':
+        tag = 'p';
+        break;
+      case 'sub-text':
+        tag = 'span';
+        break;
+      default:
+        tag = 'div';
+        break;
+    }
+  }
+
+  let TagName = tag;
+
+  return (
+    <TagName
+      {...rest}
+      style={styleWithSpacing}
+      className={`${classes['typography_style_' + variant]} ${className}`}
+    >
+      {children}
+    </TagName>
+  );
+};

package/src/Wizard/BaseWizardSteps/BaseWizardSteps.module.scss

@@ -0,0 +1,192 @@
+@mixin clickable-element {
+  &:enabled:hover,
+  &:focus,
+  &:enabled:active {
+    cursor: pointer;
+
+    .number-wrapper {
+      .number {
+        background-color: var(--color-primary);
+        color: #ffffff;
+      }
+    }
+
+    .label {
+      text-decoration: underline;
+    }
+  }
+
+  &:enabled:active {
+    .number-wrapper {
+      .number {
+        border: none;
+        margin: 2px;
+      }
+    }
+  }
+}
+
+@mixin disabled-element {
+  &:disabled {
+    .number-wrapper {
+      .number {
+        border: 2px solid var(--greyed-out);
+        color: var(--greyed-out);
+      }
+    }
+
+    .label {
+      color: var(--greyed-out);
+    }
+  }
+}
+
+.wizard {
+  padding: 1rem;
+  display: flex;
+}
+
+.wizard-element {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  background-color: transparent;
+  border: 0;
+  align-items: stretch;
+  padding: 0;
+  margin: 0;
+
+  &:focus-visible {
+    outline: 1px dashed var(--color-primary);
+    outline-offset: 1px;
+  }
+
+  // Completed/finished state
+  &.finished {
+    .number-wrapper {
+      .number {
+        border: 2px solid var(--color-primary);
+        color: var(--color-primary);
+        font-weight: normal;
+      }
+
+      &:before,
+      &:after {
+        border-bottom: 2px solid var(--color-primary);
+      }
+    }
+
+    .label {
+      color: var(--color-primary);
+    }
+    @include disabled-element;
+    @include clickable-element;
+  }
+
+  //Active/current step
+  &.current {
+    .number-wrapper {
+      .number {
+        color: #fff;
+        border: 2px solid var(--color-primary);
+        background-color: var(--color-primary);
+      }
+
+      &:after {
+        border-bottom: 2px solidvar(--color-primary);
+      }
+
+      &:before {
+        border-bottom: 2px solid var(--color-primary);
+      }
+    }
+
+    .label {
+      font-weight: 700;
+      color: var(--color-primary);
+    }
+  }
+
+  //Future state for clickable elements - future state is a default one
+  &.future.clickable {
+    .number-wrapper {
+      .number {
+        border: 2px solid var(--color-primary);
+        color: var(--color-primary);
+      }
+    }
+
+    .label {
+      color: var(--color-primary);
+    }
+
+    @include clickable-element;
+    @include disabled-element;
+  }
+
+  &:first-child {
+    .number-wrapper:before {
+      border-bottom: none;
+    }
+  }
+
+  &:last-child {
+    .number-wrapper:after {
+      border-bottom: none;
+    }
+  }
+}
+
+.number-wrapper {
+  display: flex;
+  flex-direction: row;
+
+  &:after,
+  &:before {
+    content: ' ';
+    margin-bottom: 0.8125rem;
+    width: 100%;
+    border-bottom: 2px solid var(--greyed-out);
+  }
+}
+
+.number {
+  font-family: var(--font-family);
+  font-size: 1rem;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid var(--greyed-out);
+  border-radius: 50%;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  color: var(--greyed-out);
+  line-height: 1.5rem;
+  background-color: #ffffff;
+  box-sizing: content-box;
+}
+
+.two-line-text-overflow {
+  max-height: 2rem;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  padding: 0.25rem 1rem 0;
+}
+
+.label {
+  font-family: var(--font-family);
+  font-size: 0.75rem;
+  line-height: 1rem;
+  overflow: hidden;
+  color: var(--greyed-out);
+  text-align: center;
+}
+
+.checkmark {
+  font-size: 0.875rem;
+}

package/src/Wizard/BaseWizardSteps/BaseWizardSteps.test.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { BaseWizardSteps, Props } from './BaseWizardSteps';
+import { getAllByRole, getByText, queryByText, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+const initParams: Props = {
+  steps: [
+    {
+      label: 'Step 1',
+    },
+    {
+      label: 'Step 2',
+    },
+    {
+      label: 'Step 3',
+      disabled: true,
+    },
+    {
+      label: 'Step 4',
+    },
+  ],
+  currentStepNo: 1,
+  stepScreenReaderLabel: 'Step',
+  onClick: jest.fn(),
+};
+
+const getStepButtons = (container: HTMLElement) => getAllByRole(container, 'button');
+
+describe('BaseWizardSteps', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<BaseWizardSteps {...initParams} />);
+    const buttons = getStepButtons(container);
+    expect(initParams.onClick).toHaveBeenCalledTimes(0);
+
+    expect(buttons).toHaveLength(4);
+    expect(buttons[0]).not.toHaveAttribute('aria-current');
+    expect(buttons[0].querySelector('.checkmark')).toBeDefined();
+    expect(buttons[1]).toHaveAttribute('aria-current', 'step');
+    expect(getByText(buttons[1], '2')).toBeDefined();
+    expect(buttons[2]).not.toHaveAttribute('aria-current');
+    expect(getByText(buttons[2], '3')).toBeDefined();
+    expect(buttons[3]).not.toHaveAttribute('aria-current');
+    expect(getByText(buttons[3], '4')).toBeDefined();
+
+    userEvent.click(buttons[0]);
+    expect(initParams.onClick).toHaveBeenCalledTimes(1);
+
+    userEvent.click(buttons[1]);
+    userEvent.click(buttons[2]);
+    userEvent.click(buttons[3]);
+    expect(initParams.onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('should allow to click on future and prev steps but not on current and disabled steps when futureStepsClickable is enabled', () => {
+    const { container } = render(<BaseWizardSteps {...initParams} futureStepsClickable />);
+    const buttons = getStepButtons(container);
+    expect(initParams.onClick).toHaveBeenCalledTimes(0);
+
+    userEvent.click(buttons[3]);
+    expect(initParams.onClick).toHaveBeenCalledTimes(1);
+    userEvent.click(buttons[0]);
+    expect(initParams.onClick).toHaveBeenCalledTimes(2);
+
+    userEvent.click(buttons[1]);
+    userEvent.click(buttons[2]);
+    expect(initParams.onClick).toHaveBeenCalledTimes(2);
+  });
+
+  it('should not render checkmark or number when prev steps is disabled', () => {
+    const { container } = render(<BaseWizardSteps {...initParams} currentStepNo={3} />);
+    const buttons = getStepButtons(container);
+
+    expect(queryByText(buttons[2], '3')).toBeNull();
+  });
+});

package/src/Wizard/BaseWizardSteps/BaseWizardSteps.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import classes from './BaseWizardSteps.module.scss';
+import readyclasses from '../../readyclasses.module.scss';
+import { Icon, Icons } from '../../Icon/Icon';
+
+type StepState = 'finished' | 'current' | 'future';
+
+export interface Step {
+  label: string;
+  disabled?: boolean;
+}
+
+export interface Props extends Omit<React.HTMLProps<HTMLDivElement>, 'onClick'> {
+  steps: Step[];
+  currentStepNo: number;
+  onClick?: (stepNo: number) => void;
+  futureStepsClickable?: boolean;
+  stepScreenReaderLabel: string;
+}
+
+export const BaseWizardSteps = ({
+  steps,
+  currentStepNo,
+  onClick,
+  futureStepsClickable = false,
+  stepScreenReaderLabel,
+  ...restProps
+}: Props) => {
+  const getStepState = (stepNo: number): StepState => {
+    if (currentStepNo === stepNo) {
+      return 'current';
+    } else if (stepNo < currentStepNo) {
+      return 'finished';
+    }
+    return 'future';
+  };
+
+  const getStepContent = (stepState: StepState, index: number, disabled?: boolean) => {
+    const stepNumberString = String(index + 1);
+    if (stepState === 'finished') {
+      return disabled ? null : <Icon className={classes['checkmark']} icon={Icons.Checkmark} />;
+    } else {
+      return (
+        <>
+          <span className={readyclasses['sr-only']}>{stepScreenReaderLabel} </span>
+          {stepNumberString}
+        </>
+      );
+    }
+  };
+
+  const generatedSteps = steps.map((step, index) => {
+    const stepState = getStepState(index);
+    const disabledStyleClassName = step.disabled ? classes['disabled'] : '';
+    const clickableClassName = futureStepsClickable ? classes['clickable'] : '';
+
+    return (
+      <button
+        key={step.label.toLowerCase().replace(/\s/, '-')}
+        disabled={
+          step.disabled ||
+          (stepState === 'future' && !futureStepsClickable) ||
+          stepState === 'current'
+        }
+        aria-current={stepState === 'current' ? 'step' : undefined}
+        onClick={() => onClick && onClick(index)}
+        className={`${classes['wizard-element']} ${classes[stepState]} ${clickableClassName} ${disabledStyleClassName}`}
+      >
+        <div className={classes['number-wrapper']}>
+          <span className={classes['number']}>
+            {getStepContent(stepState, index, step.disabled)}
+          </span>
+        </div>
+        <div className={classes['two-line-text-overflow']}>
+          <span className={classes['label']}>{step.label}</span>
+        </div>
+      </button>
+    );
+  });
+
+  return (
+    <div {...restProps} className={classes['wizard']}>
+      {generatedSteps}
+    </div>
+  );
+};