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

package/src/StatusIndicator/StatusIndicator.test.tsx

@@ -0,0 +1,127 @@
+import React, { useEffect, useRef } from 'react';
+import { StatusIndicator, Props } from './StatusIndicator';
+import { render } from '@testing-library/react';
+
+const defaultParams: Props = {
+  status: 'active',
+};
+
+const createStatusIndicator = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(
+    <StatusIndicator {...parameters} data-testid="StatusIndicator">
+      content
+    </StatusIndicator>
+  );
+  const statusIndicator = queries.getByTestId('StatusIndicator');
+
+  return {
+    ...queries,
+    statusIndicator,
+  };
+};
+
+describe('StatusIndicator should render', () => {
+  it('renders without crashing', () => {
+    const { statusIndicator, getByText } = createStatusIndicator();
+
+    expect(statusIndicator).toBeDefined();
+    expect(getByText('content')).toBeInTheDocument();
+  });
+
+  it('passes through custom typography props', () => {
+    const { statusIndicator, getByText } = createStatusIndicator((params) => ({
+      ...params,
+      typographyProps: {
+        variant: 'body',
+        children: <strong>custom children</strong>,
+      },
+    }));
+
+    expect(statusIndicator).toBeDefined();
+    expect(getByText('custom children')).toBeInTheDocument();
+  });
+
+  it('passes through custom props', () => {
+    const { statusIndicator } = createStatusIndicator((params) => ({
+      ...params,
+      'aria-label': 'status indicator',
+    }));
+
+    expect(statusIndicator).toBeDefined();
+    expect(statusIndicator).toHaveAttribute('aria-label', 'status indicator');
+  });
+
+  it('should set "active" class on status badge', () => {
+    const { statusIndicator } = createStatusIndicator((params) => ({
+      ...params,
+      status: 'active',
+    }));
+
+    expect(statusIndicator.firstChild).toHaveClass('active');
+  });
+
+  it('should set "error" class on status badge', () => {
+    const { statusIndicator } = createStatusIndicator((params) => ({ ...params, status: 'error' }));
+
+    expect(statusIndicator.firstChild).toHaveClass('error');
+  });
+
+  it('should set "neutral" class on status badge', () => {
+    const { statusIndicator } = createStatusIndicator((params) => ({
+      ...params,
+      status: 'neutral',
+    }));
+
+    expect(statusIndicator.firstChild).toHaveClass('neutral');
+  });
+
+  it('should pass "warning" class to status badge', () => {
+    const { statusIndicator } = createStatusIndicator((params) => ({
+      ...params,
+      status: 'warning',
+    }));
+
+    expect(statusIndicator.firstChild).toHaveClass('warning');
+  });
+
+  it('should pass custom class to status badge', () => {
+    const { statusIndicator } = createStatusIndicator((params) => ({
+      ...params,
+      badgeProps: { className: 'custom' },
+    }));
+
+    expect(statusIndicator.firstChild).toHaveClass('custom');
+  });
+});
+
+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 (
+        <StatusIndicator id="test" children="test" data-ref="testing" ref={ref} status="active" />
+      );
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});

package/src/StatusIndicator/StatusIndicator.tsx

@@ -0,0 +1,25 @@
+import React, { ComponentPropsWithRef, ReactNode } from 'react';
+import { Typography, Props as TypographyProps } from '../Typography/Typography';
+import classes from './StatusIndicator.module.scss';
+
+export interface Props extends ComponentPropsWithRef<'div'> {
+  children?: ReactNode;
+  status: 'active' | 'error' | 'neutral' | 'warning';
+  badgeProps?: ComponentPropsWithRef<'div'>;
+  typographyProps?: TypographyProps;
+}
+
+export const StatusIndicator = React.forwardRef<HTMLDivElement, Props>(
+  ({ children, status, badgeProps, typographyProps, ...rest }: Props, ref) => {
+    return (
+      <div {...rest} className={classes['status-indicator']} ref={ref}>
+        <div
+          className={`${classes['status-badge']} ${classes[status]} ${badgeProps?.className ?? ''}`}
+        />
+        <Typography {...typographyProps} spacing={{ margin: '0' }} variant="body" tag="div">
+          {typographyProps?.children || children}
+        </Typography>
+      </div>
+    );
+  }
+);

package/src/Tiles/Tile.module.scss

@@ -1,4 +1,4 @@
-@import '../readyclasses.module.scss';
+@import '../mixins.module.scss';
 
 .tile {
   border: 1px solid #e9e9eb;

package/src/Tiles/Tile.test.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import { Tile, Props } from './Tile';
-import { render, getByRole } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { Icon, Icons } from '../Icon/Icon';
 import { ContextMenu } from '../ContextMenu/ContextMenu';
 import { IconButton } from '../Button/IconButton';
@@ -130,9 +130,9 @@ describe('contextmenu', () => {
     expect(popover).toHaveClass('show');
     expect(popover).toHaveStyle({ opacity: '1;' });
 
-    userEvent.click(getByRole(menuitem1, 'button'));
-    userEvent.click(getByRole(menuitem2, 'button'));
-    userEvent.click(getByRole(menuitem3, 'button'));
+    userEvent.click(menuitem1);
+    userEvent.click(menuitem2);
+    userEvent.click(menuitem3);
 
     expect(contextMenuItemOnClick).toHaveBeenCalledTimes(3);
   });

package/src/index.ts

@@ -1,9 +1,19 @@
-/** Components */
+/* Components */
 export { BaseStyling } from './_BaseStyling_/BaseStyling';
-export { Typography } from './Typography/Typography';
-export { Button } from './Button/Button';
-export { Link } from './Link/Link';
-export { IconButton } from './Button/IconButton';
+export { Button, Props as ButtonProps } from './Button/Button';
+export { Breadcrumbs, Props as BreadcrumbsProps } from './Breadcrumbs/Breadcrumbs';
+export { ContextMenu, Props as ContextMenuProps } from './ContextMenu/ContextMenu';
+export { ContextMenuItem, Props as ContextMenuItemProps } from './ContextMenu/ContextMenuItem';
+export { Link, Props as LinkProps, AnchorType } from './Link/Link';
+export { Icon, Icons, Props as IconProps } from './Icon/Icon';
+export { IconButton, Props as IconButtonProps } from './Button/IconButton';
+export { Tab, Props as TabProps } from './Tabs/Tab';
+export { Tabs, Props as TabsProps } from './Tabs/Tabs';
+export { TextEllipsis, Props as TextEllipsisProps } from './TextEllipsis/TextEllipsis';
+export { Tile, Props as TileProps } from './Tiles/Tile';
+export { Tiles, Props as TilesProps } from './Tiles/Tiles';
+export { Tooltip, Props as TooltipProps } from './Tooltip/Tooltip';
+export { Typography, Variant, Props as TypographyProps } from './Typography/Typography';
 export {
   Pagination,
   Props as PaginationProps,
@@ -11,57 +21,79 @@ export {
   PaginationTranslations,
   PageSize,
 } 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';
-export { ModalContent } from './Notifications/Modal/ModalContent/ModalContent';
-export { ModalHeader } from './Notifications/Modal/ModalHeader/ModalHeader';
-export { DiscardChangesModal } from './Notifications/DiscardChangesModal/DiscardChangesModal';
-export { TextEllipsis, Props as TextEllipsisProps } from './TextEllipsis/TextEllipsis';
-export { Tooltip } from './Tooltip/Tooltip';
-export { Tiles } from './Tiles/Tiles';
-export { Tile } from './Tiles/Tile';
-export { ContextMenu } from './ContextMenu/ContextMenu';
-export { ContextMenuItem } from './ContextMenu/ContextMenuItem';
-export { Breadcrumbs } from './Breadcrumbs/Breadcrumbs';
-
-export { SnackbarProvider } from './Notifications/Snackbar/SnackbarProvider/SnackbarProvider';
-export { useSnackbar } from './Notifications/Snackbar/useSnackbar';
 
+/* Utils */
 export { useRepeater } from './hooks/useRepeater';
-
 export { generateID } from './util/helper';
 
+/* Notifications */
+export { Modal, Props as ModalProps } from './Notifications/Modal/Modal';
+export { useSnackbar } from './Notifications/Snackbar/useSnackbar';
+export {
+  Dialog,
+  Props as DialogProps,
+  Action as DialogAction,
+} from './Notifications/Dialog/Dialog';
+export {
+  DiscardChangesModal,
+  Props as DiscardChangesModalProps,
+} from './Notifications/DiscardChangesModal/DiscardChangesModal';
+export {
+  ModalActions,
+  Props as ModalActionsProps,
+} from './Notifications/Modal/ModalActions/ModalActions';
+export {
+  ModalContent,
+  Props as ModalContentProps,
+} from './Notifications/Modal/ModalContent/ModalContent';
+export {
+  ModalHeader,
+  Props as ModalHeaderProps,
+} from './Notifications/Modal/ModalHeader/ModalHeader';
+export {
+  SlideInModal,
+  Props as SlideInModalProps,
+} from './Notifications/SlideInModal/SlideInModal';
+export {
+  SnackbarProvider,
+  Props as SnackbarProviderProps,
+} from './Notifications/Snackbar/SnackbarProvider/SnackbarProvider';
+
 /** Form components */
-export { Form } from './Form/Form';
-export { Fieldset } from './Form/Fieldset/Fieldset';
-export { FormControl } from './Form/FormControl/FormControl';
-export { FormGroup } from './Form/FormGroup/FormGroup';
-export { FormHelperText } from './Form/FormHelperText/FormHelperText';
-export { Label } from './Form/Label/Label';
-export { Select } from './Form/Select/Select';
-export { Option } from './Form/Select/Option';
-export { Textarea } from './Form/Textarea/Textarea';
-export { CheckboxWrapper } from './Form/Wrapper/CheckboxWrapper/CheckboxWrapper';
-export { InputWrapper } from './Form/Wrapper/InputWrapper/InputWrapper';
-export { RadioWrapper } from './Form/Wrapper/RadioWrapper/RadioWrapper';
-export { SelectWrapper } from './Form/Wrapper/SelectWrapper/SelectWrapper';
-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 { Checkbox, Props as CheckboxProps } from './Form/Checkbox/Checkbox';
+export { Fieldset, Props as FieldsetProps } from './Form/Fieldset/Fieldset';
+export { Form, Props as FormProps } from './Form/Form';
+export { FormControl, Props as FormControlProps } from './Form/FormControl/FormControl';
+export { FormGroup, Props as FormGroupProps } from './Form/FormGroup/FormGroup';
+export { FormHelperText, Props as FormHelperTextProps } from './Form/FormHelperText/FormHelperText';
+export { Input, Props as InputProps, Type as InputType } from './Form/Input/Input';
+export { InputWrapper, Props as InputWrapperProps } from './Form/Wrapper/InputWrapper/InputWrapper';
+export { Label, Props as LabelProps } from './Form/Label/Label';
+export { Option, Props as OptionProps } from './Form/Select/Option';
+export { Radio, Props as RadioProps } from './Form/Radio/Radio';
+export { RadioWrapper, Props as RadioWrapperProps } from './Form/Wrapper/RadioWrapper/RadioWrapper';
+export { Select, Props as SelectProps } from './Form/Select/Select';
+export { Textarea, Props as TextareaProps } from './Form/Textarea/Textarea';
+export { Toggle, Props as ToggleProps } from './Form/Toggle/Toggle';
+export {
+  CheckboxWrapper,
+  Props as CheckboxWrapperProps,
+} from './Form/Wrapper/CheckboxWrapper/CheckboxWrapper';
+export {
+  TextareaWrapper,
+  Props as TextareaWrapperProps,
+} from './Form/Wrapper/TextareaWrapper/TextareaWrapper';
+export {
+  SelectWrapper,
+  Props as SelectWrapperProps,
+} from './Form/Wrapper/SelectWrapper/SelectWrapper';
 
 /** Wizard */
+export { Wizard, Props as WizardProps } from './Wizard/Wizard';
+export { WizardActions, Props as WizardActionsProps } from './Wizard/WizardActions/WizardActions';
+export { WizardSteps, Props as WizardStepsProps } from './Wizard/WizardSteps/WizardSteps';
 export {
   BaseWizardSteps,
   Props as BaseWizardStepsProps,
   Step as WizardStep,
 } from './Wizard/BaseWizardSteps/BaseWizardSteps';
-export { WizardActions } from './Wizard/WizardActions/WizardActions';
-export { WizardSteps } from './Wizard/WizardSteps/WizardSteps';
-export { Wizard, Props as WizardProps } from './Wizard/Wizard';

package/src/mixins.module.scss

@@ -0,0 +1,171 @@
+@import './readyclasses.module.scss';
+
+@mixin button($variant: 'text', $type: 'default') {
+  $disabledSelector: if($type == 'link', '.disabled', ':disabled');
+
+  @if $variant == 'text' {
+    border-color: transparent;
+    background-color: transparent;
+  } @else if $variant == 'fill' {
+    @if $type == 'default' {
+      color: var(--button-fill-text-color);
+    } @else if $type == 'icon' or $type == 'link' {
+      &:not(#{$disabledSelector}) {
+        color: var(--button-fill-text-color);
+      }
+    }
+    font-weight: bold;
+  } @else if $variant == 'outline' {
+    background-color: var(--button-fill-background-color);
+    font-weight: bold;
+  }
+
+  &.primary:not(#{$disabledSelector}) {
+    @include buttonStyles(var(--color-primary), $variant, $type);
+  }
+  &.secondary:not(#{$disabledSelector}) {
+    @include buttonStyles(var(--color-secondary), $variant, $type);
+  }
+  &.tertiary:not(#{$disabledSelector}) {
+    @include buttonStyles(var(--color-tertiary), $variant, $type);
+  }
+  &.default:not(#{$disabledSelector}) {
+    @include buttonStyles(var(--default), $variant, $type);
+  }
+
+  @if $variant == 'fill' {
+    &:hover:not(#{$disabledSelector}),
+    &:focus:not(#{$disabledSelector}),
+    &:active:not(#{$disabledSelector}) {
+      background-color: var(--button-fill-background-color);
+    }
+
+    &#{$disabledSelector} {
+      background-color: var(--disabled);
+      border-color: var(--disabled);
+    }
+  } @else if $variant == 'outline' {
+    &:hover:not(#{$disabledSelector}),
+    &:focus:not(#{$disabledSelector}) {
+      color: var(--button-outline-hover-text-color);
+    }
+
+    &#{$disabledSelector} {
+      border-color: var(--greyed-out);
+      background-color: transparent;
+    }
+  }
+}
+
+@mixin buttonStyles($color, $variant: 'text', $type: 'default') {
+  @if $variant == 'text' {
+    color: $color;
+  } @else if $variant == 'fill' {
+    border-color: $color;
+    background-color: $color;
+  } @else if $variant == 'outline' {
+    border-color: $color;
+    color: $color;
+  }
+
+  @include focusOutline($color);
+
+  &:hover:not(.disabled),
+  &:focus:not(.disabled) {
+    @if $variant == 'text' {
+      border-color: $color;
+    } @else if $variant == 'fill' {
+      color: $color;
+    } @else if $variant == 'outline' {
+      background-color: $color;
+    }
+  }
+
+  @if $variant == 'text' or $variant == 'fill' {
+    &:active:not(.disabled) {
+      @if $variant == 'text' {
+        background-color: transparent;
+        position: relative;
+        color: $color;
+        border-color: var(--button-fill-background-color);
+      } @else if $variant == 'fill' {
+        position: relative;
+        color: $color;
+      }
+
+      &:after {
+        content: '';
+        position: absolute;
+        @if $variant == 'fill' {
+          top: calc(-1 * var(--button-border-width));
+        } @else {
+          top: calc(-1 * var(--button-border-width) + (var(--button-border-width) / 2));
+        }
+        @if $type == 'default' or $type == 'link' {
+          left: 0;
+          width: 100%;
+        } @else if $type == 'icon' {
+          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: $color;
+        border-radius: var(--button-border-radius);
+        filter: opacity(0.1);
+      }
+    }
+  }
+}
+
+@mixin buttonBase($type: 'default') {
+  $disabledSelector: if($type == 'link', '.disabled', ':disabled');
+
+  border-width: var(--button-border-width);
+  border-style: var(--button-border-style);
+  border-radius: var(--button-border-radius);
+  font-size: var(--button-font-size);
+  line-height: var(--button-font-size);
+  margin: 0;
+  padding: 0.5rem 1.25rem;
+  min-height: 2.5rem;
+  cursor: pointer;
+  transition-property: color, background-color, border-color;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
+  font-family: var(--font-family);
+
+  &#{$disabledSelector} {
+    color: var(--greyed-out);
+    cursor: not-allowed;
+  }
+}
+
+@mixin skeletonLoading() {
+  position: relative;
+  overflow: hidden;
+  background-color: var(--disabled);
+
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transform: translateX(-100%);
+    background-image: linear-gradient(
+      90deg,
+      rgba(#fff, 0) 0,
+      rgba(#fff, 0.2) 20%,
+      rgba(#fff, 0.5) 60%,
+      rgba(#fff, 0)
+    );
+    animation: shimmer 2s infinite;
+    content: '';
+  }
+
+  @keyframes shimmer {
+    100% {
+      transform: translateX(100%);
+    }
+  }
+}

package/src/readyclasses.module.scss

@@ -9,36 +9,6 @@
   border: 0;
 }
 
-@mixin skeletonLoading() {
-  position: relative;
-  overflow: hidden;
-  background-color: var(--disabled);
-
-  &::after {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    transform: translateX(-100%);
-    background-image: linear-gradient(
-      90deg,
-      rgba(#fff, 0) 0,
-      rgba(#fff, 0.2) 20%,
-      rgba(#fff, 0.5) 60%,
-      rgba(#fff, 0)
-    );
-    animation: shimmer 2s infinite;
-    content: '';
-  }
-
-  @keyframes shimmer {
-    100% {
-      transform: translateX(100%);
-    }
-  }
-}
-
 .hidden {
   display: none;
 }