@onewelcome/react-lib-components 0.1.0-alpha

package/src/Form/Wrapper/TextareaWrapper/TextareaWrapper.test.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import { TextareaWrapper, Props } from './TextareaWrapper';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+const defaultParams: Props = {
+  name: 'textarea',
+  label: 'textarea_label',
+  value: 'value',
+  error: false,
+  helperText: 'helpertext',
+  helperProps: { 'data-testid': 'helpertext' },
+  errorMessage: 'errormessage',
+  textareaProps: { 'data-testid': 'textarea' },
+  onChange: jest.fn(),
+};
+
+const createTextareaWrapper = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(<TextareaWrapper {...parameters} data-testid="textareawrapper" />);
+  const textareawrapper = queries.getByTestId('textareawrapper');
+  const textarea = queries.getByTestId('textarea');
+
+  return {
+    ...queries,
+    textareawrapper,
+    textarea,
+  };
+};
+
+describe('TextareaWrapper should render', () => {
+  it('renders without crashing', () => {
+    const { textareawrapper } = createTextareaWrapper();
+
+    expect(textareawrapper).toBeDefined();
+  });
+});
+
+describe('TextareaWrapper & Textarea have the right attributes', () => {
+  it('textarea has aria values', async () => {
+    const { textarea, getByTestId, findByText } = createTextareaWrapper();
+
+    const helpertext = getByTestId('helpertext');
+    const label = await findByText('textarea_label');
+
+    expect(textarea).toHaveAttribute('aria-describedby', helpertext.id);
+    expect(textarea).toHaveAttribute('aria-labelledby', label.id);
+  });
+
+  it('TextareaWrapper has the right helpertext', () => {
+    const { getByTestId } = createTextareaWrapper();
+
+    const helpertext = getByTestId('helpertext');
+
+    expect(helpertext).toBeTruthy();
+    expect(helpertext).toHaveTextContent('helpertext');
+  });
+
+  it('TextareaWrapper has the right errormessage', async () => {
+    const { findByText, textarea } = createTextareaWrapper((defaultParams) => ({
+      ...defaultParams,
+      error: true,
+    }));
+
+    const errorMessage = await findByText('errormessage');
+
+    expect(errorMessage).toBeTruthy();
+    expect(textarea).toHaveAttribute('aria-describedby', errorMessage.id);
+  });
+
+  it('has floating label active when it has a placeholder', async () => {
+    const { findByText } = createTextareaWrapper((defaultParams) => ({
+      ...defaultParams,
+      placeholder: 'placeholder',
+    }));
+
+    const label = await findByText('textarea_label');
+
+    expect(label).toHaveClass('floating-label-active');
+  });
+});
+
+describe('TextarenaWrapper should be interactive', () => {
+  it('Fires the onChange, onFocus & onBlur events', () => {
+    const onFocusHandler = jest.fn();
+    const onChangeHandler = jest.fn();
+    const onBlurHandler = jest.fn();
+
+    const { textarea } = createTextareaWrapper((defaultParams) => ({
+      ...defaultParams,
+      onChange: onChangeHandler,
+      onFocus: onFocusHandler,
+      onBlur: onBlurHandler,
+    }));
+
+    userEvent.tab();
+    expect(textarea).toHaveFocus();
+
+    userEvent.keyboard('input');
+    userEvent.tab();
+
+    expect(onChangeHandler).toHaveBeenCalledTimes(5);
+    expect(onFocusHandler).toHaveBeenCalled();
+    expect(onBlurHandler).toHaveBeenCalled();
+  });
+
+  it('Fires the onMouseEnter & onMouseLeave events', () => {
+    const onMouseEnterHandler = jest.fn();
+    const onMouseLeaveHandler = jest.fn();
+
+    const { textarea } = createTextareaWrapper((defaultParams) => ({
+      ...defaultParams,
+      onMouseEnter: onMouseEnterHandler,
+      onMouseLeave: onMouseLeaveHandler,
+    }));
+
+    userEvent.hover(textarea);
+    expect(onMouseEnterHandler).toHaveBeenCalled();
+    userEvent.unhover(textarea);
+    expect(onMouseLeaveHandler).toHaveBeenCalled();
+  });
+});

package/src/Form/Wrapper/TextareaWrapper/TextareaWrapper.tsx

@@ -0,0 +1,105 @@
+import React, { useState } from 'react';
+import classes from './TextareaWrapper.module.scss';
+import { Wrapper, WrapperProps } from '../Wrapper/Wrapper';
+import { Textarea, Props as TextareaProps } from '../../Textarea/Textarea';
+import { useWrapper } from '../../../hooks/useWrapper';
+
+export interface Props
+  extends Omit<WrapperProps, 'onFocus' | 'onChange' | 'onBlur' | 'onMouseEnter' | 'onMouseLeave'> {
+  placeholder?: string;
+  textareaProps?: TextareaProps;
+  value: string;
+  onFocus?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
+  onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  onBlur?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
+  onMouseEnter?: (event: React.MouseEvent<HTMLTextAreaElement>) => void;
+  onMouseLeave?: (event: React.MouseEvent<HTMLTextAreaElement>) => void;
+}
+
+export const TextareaWrapper = ({
+  name,
+  error,
+  value,
+  label,
+  placeholder,
+  textareaProps,
+  helperProps,
+  onChange,
+  onFocus,
+  onBlur,
+  onMouseEnter,
+  onMouseLeave,
+  disabled,
+  ...rest
+}: Props) => {
+  const {
+    errorId,
+    floatingLabelActive,
+    setFloatingLabelActive,
+    hasFocus,
+    setHasFocus,
+    helperId,
+    labelId,
+  } = useWrapper(value, placeholder);
+
+  const [focus, setFocus] = useState(false);
+  const [hover, setHover] = useState(false);
+
+  return (
+    <Wrapper
+      {...rest}
+      disabled={disabled}
+      labelProps={{
+        id: labelId,
+        className: `${classes['textarea-label']} ${hasFocus ? classes['focus'] : ''}`,
+      }}
+      name={name}
+      label={label}
+      helperId={helperId}
+      helperProps={{
+        ...helperProps,
+        className: classes['textarea-helper-text'],
+      }}
+      error={error}
+      floatingLabelActive={floatingLabelActive}
+      errorId={errorId}
+    >
+      <Textarea
+        {...textareaProps}
+        error={error}
+        aria-labelledby={label && labelId}
+        aria-describedby={error ? errorId : helperId}
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+        onFocus={(e) => {
+          onFocus && onFocus(e);
+          setHasFocus(true);
+          setFloatingLabelActive(true);
+          setFocus(true);
+        }}
+        onBlur={(e) => {
+          onBlur && onBlur(e);
+          setHasFocus(false);
+          setFocus(false);
+          e.target.value || textareaProps?.placeholder?.length
+            ? setFloatingLabelActive(true)
+            : setFloatingLabelActive(false);
+        }}
+        onMouseEnter={(e) => {
+          onMouseEnter && onMouseEnter(e);
+          setHover(true);
+        }}
+        onMouseLeave={(e) => {
+          onMouseLeave && onMouseLeave(e);
+          setHover(false);
+        }}
+        className={classes['textarea']}
+        wrapperClassName={`${classes['textarea-wrapper']} ${focus ? classes['focus'] : ''} ${
+          hover ? classes['hover'] : ''
+        } ${disabled ? classes['disabled'] : ''} ${error ? classes['error'] : ''}`}
+        errorClassName={classes['error-icon']}
+      />
+    </Wrapper>
+  );
+};

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

@@ -0,0 +1,35 @@
+.floating-wrapper {
+  position: relative;
+}
+
+.floating-label {
+  font-size: 1rem;
+  position: absolute;
+  z-index: 1;
+  top: 1.3125rem;
+  left: 1.25rem;
+  transform-origin: left top;
+  transition: all 0.2s ease-in-out;
+  pointer-events: none;
+
+  &.floating-label-active {
+    font-size: 0.75rem;
+    transform: translateY(-0.75rem);
+    color: var(--default);
+  }
+
+  &.error {
+    color: var(--error);
+  }
+}
+
+.wrapper + fieldset,
+.wrapper + .wrapper {
+  margin-top: 1rem;
+}
+
+.required {
+  &:after {
+    content: ' *';
+  }
+}

package/src/Form/Wrapper/Wrapper/Wrapper.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Wrapper } from './Wrapper';
+import { render } from '@testing-library/react';
+import { Input } from '../../Input/Input';
+
+describe('Wrapper should render', () => {
+  it('renders without crashing', () => {
+    const { container } = render(
+      <Wrapper floatingLabelActive={true} label="label" name="name" helperId="helperID">
+        <Input onChange={jest.fn()} name="test" type="text" value="test" />
+      </Wrapper>
+    );
+    const wrapper = container.querySelector('.wrapper');
+
+    expect(wrapper).toBeDefined();
+  });
+});

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

@@ -0,0 +1,101 @@
+import React, { ReactElement } from 'react';
+import { FormGroup, Props as FormGroupProps } from '../../FormGroup/FormGroup';
+import { Label, Props as LabelProps } from '../../Label/Label';
+import classes from './Wrapper.module.scss';
+import { Props as HelperProps } from '../../FormHelperText/FormHelperText';
+import { HTMLProps } from '../../../interfaces';
+
+export interface Props extends Omit<FormGroupProps, 'children'> {
+  children: ReactElement | ReactElement[];
+  floatingLabelActive?: boolean;
+  floatingLabel?: boolean;
+  helperIndent?: number;
+  label?: string;
+  labelProps?: LabelProps;
+  name: string;
+  /** This does NOT add validation! It simply adds an asterix on the Label! */
+  required?: boolean;
+  innerClassName?: string;
+}
+
+/** For components that extend this component we create an interface (InputWrapper, SelectWrapper, etc.) */
+export interface WrapperProps extends HTMLProps<HTMLDivElement> {
+  errorMessage?: string;
+  error: boolean;
+  helperText?: string;
+  helperProps?: HelperProps;
+  label?: string;
+  name: string;
+  required?: boolean;
+}
+
+export const Wrapper = ({
+  children,
+  className,
+  error,
+  errorMessage,
+  errorId,
+  errorMessageIcon,
+  errorMessageIconPosition,
+  helperText,
+  helperId,
+  floatingLabel = true,
+  floatingLabelActive,
+  required,
+  helperProps,
+  helperIndent,
+  labelProps,
+  label,
+  disabled,
+  name,
+  innerClassName,
+  ...rest
+}: Props) => {
+  const renderChildren = () =>
+    React.Children.map(children, (child) =>
+      React.cloneElement(child, {
+        disabled,
+      })
+    );
+
+  const labelClasses = [];
+
+  floatingLabel && labelClasses.push(classes['floating-label']);
+  floatingLabel && floatingLabelActive && labelClasses.push(classes['floating-label-active']);
+  labelProps?.className && labelClasses.push(labelProps.className);
+  required && labelClasses.push(classes['required']);
+  error && labelClasses.push(classes['error']);
+
+  return (
+    <div {...rest} className={`${classes.wrapper} ${className ? className : ''}`}>
+      <FormGroup
+        error={error}
+        errorMessage={errorMessage}
+        errorId={errorId}
+        errorMessageIcon={errorMessageIcon}
+        errorMessageIconPosition={errorMessageIconPosition}
+        helperText={helperText}
+        helperId={helperId}
+        helperProps={helperProps}
+        helperIndent={helperIndent}
+      >
+        <div
+          className={`${floatingLabel ? classes['floating-wrapper'] : ''} ${
+            innerClassName ? innerClassName : ''
+          }`}
+        >
+          {label && (
+            <Label
+              {...labelProps}
+              className={`${classes.label} ${labelClasses.join(' ')}`}
+              htmlFor={name}
+            >
+              {label}
+            </Label>
+          )}
+          {renderChildren()}
+        </div>
+      </FormGroup>
+    </div>
+  );
+};

package/src/Form/form.interfaces.ts

@@ -0,0 +1,14 @@
+import { HTMLProps } from '../interfaces';
+
+/** Radios */
+export interface FormSelector<T> extends FormElement<T> {
+  helperText?: string;
+  errorMessage?: string;
+  parentHelperId?: string;
+  parentErrorId?: string;
+}
+
+/** Default form elements */
+export interface FormElement<T> extends HTMLProps<T> {
+  error?: boolean;
+}

package/src/Icon/Icon.module.scss

@@ -0,0 +1,278 @@
+@font-face {
+  font-family: 'icomoon';
+  src: url('../../font/icomoon.eot?9c63pa');
+  src: url('../../font/icomoon.eot?9c63pa#iefix') format('embedded-opentype'),
+    url('../../font/icomoon.ttf?9c63pa') format('truetype'),
+    url('../../font/icomoon.woff?9c63pa') format('woff'),
+    url('../../font/icomoon.svg?9c63pa#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+@mixin fontProperties() {
+  font-family: 'icomoon', sans-serif !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon {
+  line-height: 0;
+}
+
+.icon-image:before {
+  content: '\e900';
+  @include fontProperties();
+}
+.icon-bookmark:before {
+  content: '\e901';
+  @include fontProperties();
+}
+.icon-bookmark-alt:before {
+  content: '\e902';
+  @include fontProperties();
+}
+.icon-equal:before {
+  content: '\e903';
+  @include fontProperties();
+}
+.icon-build:before {
+  content: '\e904';
+  @include fontProperties();
+}
+.icon-refresh:before {
+  content: '\e905';
+  @include fontProperties();
+}
+.icon-calendar:before {
+  content: '\e906';
+  @include fontProperties();
+}
+.icon-checkmark-circle:before {
+  content: '\e907';
+  @include fontProperties();
+}
+.icon-checkmark-circle-alt:before {
+  content: '\e908';
+  @include fontProperties();
+}
+.icon-clock:before {
+  content: '\e909';
+  @include fontProperties();
+}
+.icon-trash:before {
+  content: '\e90a';
+  @include fontProperties();
+}
+.icon-heart:before {
+  content: '\e90b';
+  @include fontProperties();
+}
+.icon-search:before {
+  content: '\e90c';
+  @include fontProperties();
+}
+.icon-gearwheel:before {
+  content: '\e90d';
+  @include fontProperties();
+}
+.icon-star:before {
+  content: '\e90e';
+  @include fontProperties();
+}
+.icon-star-alt:before {
+  content: '\e90f';
+  @include fontProperties();
+}
+.icon-undo:before {
+  content: '\e910';
+  @include fontProperties();
+}
+.icon-eye:before {
+  content: '\e911';
+  @include fontProperties();
+}
+.icon-times-circle-alt:before {
+  content: '\e912';
+  @include fontProperties();
+}
+.icon-info-circle:before {
+  content: '\e913';
+  @include fontProperties();
+}
+.icon-info-bell:before {
+  content: '\e914';
+  @include fontProperties();
+}
+.icon-checkmark-circle-breakout:before {
+  content: '\e915';
+  @include fontProperties();
+}
+.icon-warning:before {
+  content: '\e916';
+  @include fontProperties();
+}
+.icon-plus:before {
+  content: '\e917';
+  @include fontProperties();
+}
+.icon-copy:before {
+  content: '\e918';
+  @include fontProperties();
+}
+.icon-edit:before {
+  content: '\e919';
+  @include fontProperties();
+}
+.icon-filter:before {
+  content: '\e91a';
+  @include fontProperties();
+}
+.icon-link:before {
+  content: '\e91b';
+  @include fontProperties();
+}
+.icon-change:before {
+  content: '\e91c';
+  @include fontProperties();
+}
+.icon-filter-alt-arrow:before {
+  content: '\e91d';
+  @include fontProperties();
+}
+.icon-filter-alt:before {
+  content: '\e91e';
+  @include fontProperties();
+}
+.icon-filter-alt-times:before {
+  content: '\e91f';
+  @include fontProperties();
+}
+.icon-grid:before {
+  content: '\e920';
+  @include fontProperties();
+}
+.icon-triangle-down:before {
+  content: '\e921';
+  @include fontProperties();
+}
+.icon-triangle-down-circle:before {
+  content: '\e922';
+  @include fontProperties();
+}
+.icon-triangle-up:before {
+  content: '\e923';
+  @include fontProperties();
+}
+.icon-triangle-right:before {
+  content: '\e924';
+  @include fontProperties();
+}
+.icon-chevron-left:before {
+  content: '\e925';
+  @include fontProperties();
+}
+.icon-chevron-right:before {
+  content: '\e926';
+  @include fontProperties();
+}
+.icon-times:before {
+  content: '\e927';
+  @include fontProperties();
+}
+.icon-times-circle:before {
+  content: '\e928';
+  @include fontProperties();
+}
+.icon-times-thin:before {
+  content: '\e929';
+  @include fontProperties();
+}
+.icon-chevron-up:before {
+  content: '\e92a';
+  @include fontProperties();
+}
+.icon-chevron-down:before {
+  content: '\e92b';
+  @include fontProperties();
+}
+.icon-navigation-first:before {
+  content: '\e92c';
+  @include fontProperties();
+}
+.icon-fullscreen:before {
+  content: '\e92d';
+  @include fontProperties();
+}
+.icon-fullscreen-exit:before {
+  content: '\e92e';
+  @include fontProperties();
+}
+.icon-navigation-last:before {
+  content: '\e92f';
+  @include fontProperties();
+}
+.icon-hamburger:before {
+  content: '\e930';
+  @include fontProperties();
+}
+.icon-ellipsis:before {
+  content: '\e931';
+  @include fontProperties();
+}
+.icon-triangle-left:before {
+  content: '\e932';
+  @include fontProperties();
+}
+.icon-ellipsis-alt:before {
+  content: '\e933';
+  @include fontProperties();
+}
+.icon-bell:before {
+  content: '\e934';
+  @include fontProperties();
+}
+.icon-bell-alt:before {
+  content: '\e935';
+  @include fontProperties();
+}
+.icon-share:before {
+  content: '\e936';
+  @include fontProperties();
+}
+.icon-forbidden:before {
+  content: '\e937';
+  @include fontProperties();
+}
+.icon-checkmark:before {
+  content: '\e938';
+  @include fontProperties();
+}
+.icon-checkmark-square:before {
+  content: '\e939';
+  @include fontProperties();
+}
+.icon-square:before {
+  content: '\e93a';
+  @include fontProperties();
+}
+.icon-minus-square:before {
+  content: '\e93b';
+  @include fontProperties();
+}
+.icon-radio:before {
+  content: '\e93c';
+  @include fontProperties();
+}
+.icon-circle:before {
+  content: '\e93e';
+  @include fontProperties();
+}