@livechat/design-system-react-components 1.0.0-alpha.4 → 1.0.0-alpha.7

package/src/components/Alert/Alert.module.scss

@@ -1,88 +0,0 @@
-.alert {
-  box-sizing: border-box;
-  overflow: hidden;
-  padding: 20px;
-  position: relative;
-  width: 100%;
-  word-break: break-word;
-
-  &__content-text {
-    color: var(--content-default);
-  }
-
-  &__content {
-    display: flex;
-    justify-content: flex-start;
-    width: 100%;
-  }
-
-  &--small {
-    max-width: 400px;
-
-    .alert__content {
-      flex-direction: column;
-
-      &-text {
-        margin: 14px 0 0;
-        max-width: 246px;
-      }
-    }
-  }
-
-  &--medium {
-    max-width: 800px;
-
-    .alert__content {
-      &-text {
-        margin: 0 30px 0 16px;
-        max-width: 640px;
-      }
-    }
-  }
-
-  &--large {
-    .alert__content {
-      &-text {
-        margin: 0 30px 0 16px;
-        max-width: 720px;
-      }
-    }
-  }
-
-  &__close-icon {
-    background-color: transparent;
-    border: 0;
-    box-shadow: none;
-    height: 24px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    right: 12px;
-    top: 12px;
-    width: 24px;
-  }
-
-  &--info {
-    background-color: var(--surface-feedback-info);
-    box-shadow: inset 0 3px 0 0 var(--color-action-default);
-  }
-
-  &--warning {
-    background-color: var(--surface-feedback-warning);
-    box-shadow: inset 0 3px 0 0 var(--color-warning-default);
-  }
-
-  &--success {
-    background-color: var(--surface-feedback-positive);
-    box-shadow: inset 0 3px 0 0 var(--color-positive-default);
-  }
-
-  &--error {
-    background-color: var(--surface-feedback-negative);
-    box-shadow: inset 0 3px 0 0 var(--color-negative-default);
-  }
-
-  &__icon {
-    flex-shrink: 0;
-  }
-}

package/src/components/Alert/Alert.spec.tsx

@@ -1,78 +0,0 @@
-import * as React from 'react';
-import { render, fireEvent, vi } from 'test-utils';
-import { Alert, AlertSize, AlertType, AlertProps } from './Alert';
-
-import styles from './Alert.module.scss';
-
-const renderComponent = (props: AlertProps) => {
-  return render(
-    <Alert {...props} className="my-css-class">
-      This example content
-    </Alert>
-  );
-};
-
-describe('<Alert> component', () => {
-  it('should allow for custom class', () => {
-    const { container } = renderComponent({});
-
-    expect(container.firstChild).toHaveClass('my-css-class');
-  });
-
-  it('should render as info by default', () => {
-    const { container } = renderComponent({});
-
-    expect(container.firstChild).toHaveClass(styles['alert--info']);
-  });
-
-  it('should render as warning', () => {
-    const { container } = renderComponent({ type: AlertType.Warning });
-
-    expect(container.firstChild).toHaveClass(styles['alert--warning']);
-  });
-
-  it('should render as success', () => {
-    const { container } = renderComponent({ type: AlertType.Success });
-
-    expect(container.firstChild).toHaveClass(styles['alert--success']);
-  });
-
-  it('should render as error', () => {
-    const { container } = renderComponent({ type: AlertType.Error });
-
-    expect(container.firstChild).toHaveClass(styles['alert--error']);
-  });
-
-  it('should render as small by default', () => {
-    const { container } = renderComponent({});
-
-    expect(container.firstChild).toHaveClass(styles['alert--small']);
-  });
-
-  it('should render as medium', () => {
-    const { container } = renderComponent({ size: AlertSize.Medium });
-
-    expect(container.firstChild).toHaveClass(styles['alert--medium']);
-  });
-
-  it('should render as large', () => {
-    const { container } = renderComponent({ size: AlertSize.Large });
-
-    expect(container.firstChild).toHaveClass(styles['alert--large']);
-  });
-
-  it('should render with close icon and call onClose function', () => {
-    const mockedFunction = vi.fn();
-    const { getByRole } = renderComponent({ onClose: mockedFunction });
-
-    expect(getByRole('button')).toBeVisible();
-    fireEvent.click(getByRole('button'));
-    expect(mockedFunction).toHaveBeenCalled();
-  });
-
-  it('should not render with close icon if no onClose function passed', () => {
-    const { queryByRole } = renderComponent({});
-
-    expect(queryByRole('button')).toBeFalsy();
-  });
-});

package/src/components/Alert/Alert.stories.tsx

@@ -1,73 +0,0 @@
-import * as React from 'react';
-import { ComponentMeta, Story } from '@storybook/react';
-
-import {
-  Alert as AlertComponent,
-  AlertSize,
-  AlertType,
-  AlertProps,
-} from './Alert';
-
-export default {
-  title: 'Components/Alert',
-  component: AlertComponent,
-  parameters: {
-    componentSubtitle: `
-    Alert banners are used to let users know about important 
-    informations that require immediate action or attention.
-    `,
-  },
-  argTypes: { onClose: { defaultValue: null } },
-} as ComponentMeta<typeof AlertComponent>;
-
-const StoryTemplate: Story<AlertProps> = (args: AlertProps) => (
-  <div>
-    <AlertComponent {...args}>
-      A description with a <b>maximum of 100 characters</b>. That usually means
-      only one or two sentences.
-    </AlertComponent>
-  </div>
-);
-
-export const Alert = StoryTemplate.bind({});
-Alert.args = {};
-
-export const InfoAlert = StoryTemplate.bind({});
-InfoAlert.args = {
-  type: AlertType.Info,
-};
-
-export const WarningAlert = StoryTemplate.bind({});
-WarningAlert.args = {
-  type: AlertType.Warning,
-};
-
-export const SuccessAlert = StoryTemplate.bind({});
-SuccessAlert.args = {
-  type: AlertType.Success,
-};
-
-export const ErrorAlert = StoryTemplate.bind({});
-ErrorAlert.args = {
-  type: AlertType.Error,
-};
-
-export const BannerWithClose = StoryTemplate.bind({});
-BannerWithClose.args = {
-  onClose: () => alert('onClose click'),
-};
-
-export const SmallAlert = StoryTemplate.bind({});
-SmallAlert.args = {
-  size: AlertSize.Small,
-};
-
-export const MediumBanner = StoryTemplate.bind({});
-MediumBanner.args = {
-  size: AlertSize.Medium,
-};
-
-export const LargeAlert = StoryTemplate.bind({});
-LargeAlert.args = {
-  size: AlertSize.Large,
-};

package/src/components/Alert/Alert.tsx

@@ -1,94 +0,0 @@
-import * as React from 'react';
-import cx from 'clsx';
-import {
-  Close as CloseIcon,
-  Warning as WarningIcon,
-  Info as InfoIcon,
-  Block as BlockIcon,
-  CheckCircleSolid as CheckIcon,
-} from '@livechat/design-system-icons/react/material';
-
-import { Text } from '../Typography';
-import { Icon, IconSizeName, IconTypeName } from '../Icon';
-
-import styles from './Alert.module.scss';
-
-export enum AlertSize {
-  Small = 'small',
-  Medium = 'medium',
-  Large = 'large',
-}
-
-export enum AlertType {
-  Info = 'info',
-  Warning = 'warning',
-  Success = 'success',
-  Error = 'error',
-}
-
-export interface AlertProps {
-  className?: string;
-  size?: AlertSize;
-  type?: AlertType;
-  onClose?: () => void;
-}
-
-const IconConfig = {
-  [AlertType.Info]: {
-    source: InfoIcon,
-    iconType: IconTypeName.Link,
-  },
-  [AlertType.Warning]: {
-    source: WarningIcon,
-    iconType: IconTypeName.Warning,
-  },
-  [AlertType.Success]: {
-    source: CheckIcon,
-    iconType: IconTypeName.Success,
-  },
-  [AlertType.Error]: {
-    source: BlockIcon,
-    iconType: IconTypeName.Error,
-  },
-};
-
-const baseClass = 'alert';
-
-export const Alert: React.FC<AlertProps> = ({
-  children,
-  className,
-  size = AlertSize.Small,
-  type = AlertType.Info,
-  onClose,
-}) => {
-  const mergedClassNames = cx(
-    styles[baseClass],
-    styles[`${baseClass}--${type}`],
-    styles[`${baseClass}--${size}`],
-    className
-  );
-
-  return (
-    <div className={mergedClassNames}>
-      <div className={styles[`${baseClass}__content`]}>
-        <Icon {...IconConfig[type]} />
-        <Text as="div" className={styles[`${baseClass}__content-text`]}>
-          {children}
-        </Text>
-      </div>
-      {onClose && (
-        <button
-          type="button"
-          className={styles[`${baseClass}__close-icon`]}
-          onClick={onClose}
-        >
-          <Icon
-            source={CloseIcon}
-            size={IconSizeName.Large}
-            iconType={IconTypeName.Primary}
-          />
-        </button>
-      )}
-    </div>
-  );
-};

package/src/components/Badge/Badge.module.scss

@@ -1,23 +0,0 @@
-.badge {
-  background-color: var(--color-negative-default);
-  border-radius: 18px;
-  box-sizing: border-box;
-  color: var(--content-invert-default);
-  display: inline-block;
-  font-size: 10px;
-  font-weight: 600;
-  height: 18px;
-  line-height: 18px;
-  min-width: 18px;
-  padding: 0 3px;
-  text-align: center;
-
-  & + & {
-    margin-left: 4px;
-  }
-
-  &--secondary {
-    background-color: var(--surface-secondary-default);
-    color: var(--surface-invert-default);
-  }
-}

package/src/components/Badge/Badge.spec.tsx

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import { render } from 'test-utils';
-
-import { Badge } from './Badge';
-
-describe('Badge', () => {
-  it('should accept custom className', () => {
-    const { container } = render(<Badge className="my-custom-class" />);
-
-    expect(container.firstChild).toHaveClass('my-custom-class');
-  });
-});

package/src/components/Badge/Badge.stories.tsx

@@ -1,24 +0,0 @@
-import * as React from 'react';
-import { Badge as BadgeComponent, BadgeProps } from './Badge';
-
-export default {
-  title: 'Components/Badge',
-  component: BadgeComponent,
-};
-
-export const Badge = (args: BadgeProps): React.ReactElement => (
-  <div
-    style={{
-      display: 'inline-flex',
-      alignItems: 'center',
-      alignContent: 'center',
-    }}
-  >
-    <BadgeComponent {...args} />
-  </div>
-);
-
-Badge.args = {
-  secondary: false,
-  children: '7',
-};

package/src/components/Badge/Badge.tsx

@@ -1,24 +0,0 @@
-import * as React from 'react';
-
-import styles from './Badge.module.scss';
-import cx from 'clsx';
-
-export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
-  secondary?: boolean;
-}
-
-export const Badge: React.FC<BadgeProps> = ({
-  children,
-  className,
-  secondary = false,
-}) => {
-  return (
-    <span
-      className={cx(styles.badge, className, {
-        [styles['badge--secondary']]: secondary,
-      })}
-    >
-      {children}
-    </span>
-  );
-};

package/src/components/Button/Button.module.scss

@@ -1,257 +0,0 @@
-$base-class: 'btn';
-
-.#{$base-class} {
-  align-items: center;
-  border-radius: 4px;
-  border-style: solid;
-  border-width: 1px;
-  cursor: pointer;
-  display: inline-flex;
-  font-size: 15px;
-  font-weight: 600;
-  height: 36px;
-  justify-content: center;
-  min-width: 36px;
-  padding: 8px 16px;
-  position: relative;
-  text-align: center;
-  text-decoration: none;
-  transition-duration: 200ms;
-  transition-property: opacity, border, color, background-color, box-shadow;
-  transition-timing-function: cubic-bezier(0.64, 0, 0.35, 1);
-  user-select: none;
-
-  &:focus,
-  &:hover,
-  &:active {
-    outline: 0;
-  }
-
-  &:focus {
-    box-shadow: 0 0 1px 2px rgba(var(--color-action-default-rgb), 0.7);
-  }
-
-  &--disabled {
-    cursor: not-allowed;
-  }
-
-  &--icon-only {
-    padding: 6px;
-
-    .#{$base-class}__icon--left,
-    .#{$base-class}__icon--right {
-      margin: 0;
-    }
-  }
-
-  &--full-width {
-    width: 100%;
-  }
-
-  &--basic {
-    background-color: var(--surface-basic-default);
-    border-color: var(--color-action-default);
-    color: var(--color-action-default);
-
-    &:hover {
-      background-color: var(--surface-basic-subtle);
-      color: var(--color-action-hover);
-    }
-
-    &:active {
-      background-color: var(--surface-feedback-info);
-      color: var(--color-action-hover);
-    }
-
-    &[disabled] {
-      background-color: inherit;
-      border-color: var(--color-action-disabled);
-      color: var(--color-action-disabled);
-    }
-  }
-
-  &--primary {
-    background-color: var(--color-action-default);
-    border-color: var(--color-action-default);
-    color: var(--content-invert-default);
-
-    &:hover {
-      background-color: var(--color-action-hover);
-      border-color: var(--color-action-hover);
-    }
-
-    &:active {
-      background-color: var(--color-action-active);
-      border-color: var(--color-action-active);
-    }
-
-    &[disabled] {
-      background-color: var(--color-action-disabled);
-      border-color: var(--color-action-disabled);
-    }
-  }
-
-  &--secondary {
-    background-color: var(--surface-basic-default);
-    border-color: var(--surface-secondary-default);
-    color: var(--content-default);
-
-    &:hover {
-      background-color: var(--surface-basic-hover);
-      border-color: var(--surface-secondary-hover);
-    }
-
-    &:active {
-      background-color: var(--surface-feedback-info);
-      border-color: var(--color-action-default);
-      color: var(--color-action-default);
-    }
-
-    &[disabled] {
-      background-color: inherit;
-      border-color: var(--border-disabled);
-      color: var(--content-disabled);
-    }
-  }
-
-  &--destructive {
-    background-color: var(--color-negative-default);
-    border-color: var(--color-negative-default);
-    color: var(--content-invert-default);
-
-    &:hover {
-      background-color: var(--color-negative-hover);
-      border-color: var(--color-negative-hover);
-    }
-
-    &:active {
-      background-color: var(--color-negative-active);
-      border-color: var(--color-negative-active);
-    }
-
-    &[disabled] {
-      background-color: var(--color-negative-disabled);
-      border-color: var(--color-negative-disabled);
-    }
-  }
-
-  &--compact {
-    height: 32px;
-    min-width: 32px;
-    padding: 6px 16px;
-
-    &.#{$base-class}--icon-only {
-      padding: 4px;
-    }
-  }
-
-  &--large {
-    height: 42px;
-    min-width: 42px;
-    padding: 11px 16px;
-
-    &.#{$base-class}--icon-only {
-      padding: 9px;
-    }
-  }
-
-  &--text,
-  &--plain,
-  &--plain-light {
-    background-color: transparent;
-    border-color: transparent;
-    color: var(--color-action-default);
-
-    &:hover {
-      color: var(--color-action-hover);
-    }
-
-    &[disabled] {
-      color: var(--color-action-disabled);
-    }
-  }
-
-  &--plain-light {
-    font-weight: 400;
-  }
-
-  &--plain {
-    font-weight: 600;
-  }
-
-  &--plain,
-  &--plain-light {
-    border: 0;
-    height: auto;
-    min-width: auto;
-    padding: 0;
-
-    &:hover,
-    &:focus {
-      box-shadow: none;
-      text-decoration: underline;
-    }
-
-    &:disabled {
-      text-decoration: none;
-    }
-  }
-
-  &--loading {
-    cursor: progress;
-    transition: all 0.2s cubic-bezier(0.64, 0, 0.35, 1);
-
-    > * {
-      opacity: 0;
-    }
-
-    .#{$base-class}__loader {
-      align-items: center;
-      box-sizing: border-box;
-      display: flex;
-      height: 100%;
-      justify-content: center;
-      left: 0;
-      opacity: 1;
-      padding: inherit;
-      position: absolute;
-      top: 0;
-      width: 100%;
-
-      > * {
-        color: inherit;
-        font-weight: inherit;
-        margin: 0 5px;
-        overflow: hidden;
-        text-align: left;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-    }
-  }
-
-  // TODO: Investigate
-  &__content {
-    margin-top: -2px;
-  }
-
-  &__icon {
-    color: inherit;
-    display: inline-block;
-    height: 20px;
-    line-height: 1;
-    width: 20px;
-
-    &--left {
-      margin-left: -4px;
-      margin-right: 5px;
-      order: -1;
-    }
-
-    &--right {
-      margin-left: 5px;
-      margin-right: -4px;
-      order: 1;
-    }
-  }
-}