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

package/src/components/Typography/Text.tsx

@@ -1,49 +0,0 @@
-import * as React from 'react';
-import cx from 'clsx';
-
-import styles from './Typography.module.scss';
-
-type TSize = 'md' | 'sm' | 'xs';
-
-interface IProps {
-  /** DOM element name that will be rendered */
-  as?: string;
-  size?: TSize;
-  /** Optional custom className */
-  className?: string;
-  caps?: boolean;
-  bold?: boolean;
-  underline?: boolean;
-  strike?: boolean;
-}
-
-export const Text: React.FC<IProps> = ({
-  as = 'p',
-  size = 'md',
-  caps = false,
-  bold = false,
-  underline = false,
-  strike = false,
-  children,
-  className,
-  ...props
-}) => {
-  const baseClassPrefix = caps ? 'caps' : `paragraph-${size}`;
-
-  return React.createElement(
-    as,
-    {
-      className: cx(
-        {
-          [styles[`${baseClassPrefix}`]]: true,
-          [styles[`${baseClassPrefix}--bold`]]: bold,
-          [styles[`${baseClassPrefix}--strike`]]: strike,
-          [styles[`${baseClassPrefix}--underline`]]: underline,
-        },
-        className
-      ),
-      ...props,
-    },
-    children
-  );
-};

package/src/components/Typography/Typography.module.scss

@@ -1,132 +0,0 @@
-@mixin heading-xl {
-  font-size: 32px;
-  font-style: normal;
-  font-weight: 600;
-  letter-spacing: 0;
-  line-height: 40px;
-}
-
-@mixin heading-lg {
-  font-size: 24px;
-  font-style: normal;
-  font-weight: 600;
-  letter-spacing: 0;
-  line-height: 32px;
-}
-
-@mixin heading-md {
-  font-size: 20px;
-  font-style: normal;
-  font-weight: 600;
-  letter-spacing: 0;
-  line-height: 28px;
-}
-
-@mixin heading-sm {
-  font-size: 18px;
-  font-style: normal;
-  font-weight: 600;
-  letter-spacing: 0;
-  line-height: 24px;
-}
-
-@mixin heading-xs {
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 600;
-  letter-spacing: 0;
-  line-height: 24px;
-}
-
-@mixin caps {
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  letter-spacing: 0.2px;
-  line-height: 20px;
-  text-transform: uppercase;
-
-  &--bold {
-    font-weight: 600;
-  }
-}
-
-@mixin paragraph-md {
-  font-size: 15px;
-  font-style: normal;
-  font-weight: 400;
-  letter-spacing: 0;
-  line-height: 22px;
-
-  &--bold {
-    font-weight: 600;
-  }
-
-  &--underline {
-    text-decoration-line: underline;
-  }
-
-  &--strike {
-    text-decoration-line: line-through;
-  }
-}
-
-@mixin paragraph-sm {
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  letter-spacing: 0;
-  line-height: 20px;
-
-  &--bold {
-    font-weight: 600;
-  }
-}
-
-@mixin paragraph-xs {
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  letter-spacing: 0.2px;
-  line-height: 16px;
-
-  &--bold {
-    font-weight: 600;
-  }
-}
-
-.heading-xl {
-  @include heading-xl;
-}
-
-.heading-lg {
-  @include heading-lg;
-}
-
-.heading-md {
-  @include heading-md;
-}
-
-.heading-sm {
-  @include heading-sm;
-}
-
-.heading-xs {
-  @include heading-xs;
-}
-
-.caps {
-  @include caps;
-}
-
-.paragraph-md {
-  @include paragraph-md;
-}
-
-.paragraph-sm {
-  @include paragraph-sm;
-}
-
-.paragraph-xs {
-  @include paragraph-xs;
-}

package/src/index.scss

@@ -1,9 +0,0 @@
-@use './themes/legacy';
-
-*[class^='lc-'] {
-  box-sizing: border-box;
-  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, Segoe UI,
-    Helvetica Neue, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}

package/src/stories/ColorTokens.stories.mdx

@@ -1,10 +0,0 @@
-import { Meta, Canvas } from '@storybook/addon-docs';
-import { ColorTokensPallete } from './components/ColorTokens';
-
-<Meta title="Foundations/Color Tokens" />
-
-# Color Tokens
-
-List of available color tokens. Click on token to copy it's value to clipboard.
-
-<ColorTokensPallete />

package/src/stories/Icons.stories.mdx

@@ -1,12 +0,0 @@
-import { Meta, Canvas, ArgsTable } from "@storybook/addon-docs";
-
-import { Icon, IconTypeName, IconSizeName } from "../components/Icon";
-import { IconsShowcase } from "./components/IconsShowcase";
-
-<Meta title="Foundations/Icons" />
-
-# Icons
-
-List of the icons available in the design system.
-
-<IconsShowcase />

package/src/stories/Typography.stories.mdx

@@ -1,65 +0,0 @@
-import { Meta, Canvas, ArgsTable } from "@storybook/addon-docs";
-
-import { Heading, Text } from "../components/Typography";
-
-<Meta title="Foundations/Typography" />
-
-# Typography
-
-This guide will help you create a typography hierarchy in the interface you build. This can be achieved by using size and weight.
-
-## Heading
-
-`Heading` component renders heading element with given size.
-
-You can modify the output element via `as` prop. For example if you want to render XLarge heading as `h3` just pass `as='h3'`
-
-```jsx
-<Heading size="xl" as="h3">
-  My h3 heading
-</Heading>
-```
-
-<ArgsTable of={Heading} />
-
-<Canvas style={{ color: "var(--content-default)" }}>
-  <Heading size="xl">Heading XLarge</Heading>
-  <Heading size="lg">Heading Large</Heading>
-  <Heading size="md">Heading Medium</Heading>
-  <Heading size="sm">Heading Small</Heading>
-  <Heading size="xs">Heading XSmall</Heading>
-</Canvas>
-
-## Text
-
-`Text` component renders a paragraph.
-
-```jsx
-<Text size="sm" bold>
-  This text is a small bold p
-</Text>
-```
-
-<ArgsTable of={Text} />
-
-<Canvas style={{ color: "var(--content-default)" }}>
-  <Text>Paragraph Medium</Text>
-  <Text bold>Paragraph Medium Bold</Text>
-  <Text underline>Paragraph Medium Underline</Text>
-  <Text strike>Paragraph Medium Strikethrough</Text>
-  <Text size="sm">Paragraph Small</Text>
-  <Text size="sm" bold>
-    Paragraph Small Bold
-  </Text>
-  <Text size="xs">Paragraph XSmall</Text>
-  <Text size="xs" bold>
-    Paragraph XSmall Bold
-  </Text>
-  <Text caps>Caps</Text>
-  <Text caps bold>
-    Bold Caps
-  </Text>
-  <Text as="div" size="sm">
-    Small text as div
-  </Text>
-</Canvas>

package/src/stories/components/ColorTokens.tsx

@@ -1,99 +0,0 @@
-import * as React from 'react';
-import { DesignTokens } from '../../themes/designTokens';
-import { Text } from '../../components/Typography';
-
-interface TokensGroup {
-  background: string[];
-  surface: string[];
-  content: string[];
-  border: string[];
-  color: string[];
-  decor: string[];
-}
-
-type TokenGroupName =
-  | 'background'
-  | 'surface'
-  | 'content'
-  | 'border'
-  | 'color'
-  | 'decor';
-
-const Tokens: TokensGroup = Object.values(
-  DesignTokens as { [key: string]: string }
-).reduce(
-  (acc: TokensGroup, value) => {
-    const groupName = value.split('-').filter(Boolean)[0] as TokenGroupName;
-    acc[groupName].push(value);
-
-    return acc;
-  },
-  { background: [], surface: [], content: [], border: [], color: [], decor: [] }
-);
-
-const CONTENT = {
-  background: {
-    heading: 'Background',
-    content:
-      'Basic layer of the UI – this represents the canvas (for developers) or frame (for designers)',
-  },
-  surface: {
-    heading: 'Surface',
-    content:
-      'Background of components, like cards, input fields, tooltips, ect.',
-  },
-  content: {
-    heading: 'Content',
-    content: 'Fonts & icons (mostly)',
-  },
-  border: {
-    heading: 'Border',
-    content: 'Style for components borders',
-  },
-  color: {
-    heading: 'Accent colors',
-    content:
-      'All colors that drive attention in the UI - it can be either action, warning, negative or positive',
-  },
-  decor: {
-    heading: 'Decor',
-    content:
-      'Those colors can be used for specific elements of the UI, they were purposely separated from all other tokens, as they are used only for decorative means. Those colors are shared between all three themes — Legacy, Light & Dark. This palette is not yet fully supported in dark mode.',
-  },
-};
-
-export const ColorTokensPallete: React.FC = () => (
-  <div style={{ color: 'var(--content-default)' }}>
-    {Object.entries(CONTENT).map(([section, { heading, content }]) => (
-      <React.Fragment key={section}>
-        <h2>{heading}</h2>
-        <Text as="p">{content}</Text>
-        <ul style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr' }}>
-          {Tokens[section as TokenGroupName].map((colorToken: string) => (
-            <li
-              key={colorToken}
-              style={{
-                display: 'flex',
-                cursor: 'pointer',
-                alignItems: 'center',
-              }}
-              onClick={() => navigator.clipboard.writeText(colorToken)}
-            >
-              <div
-                style={{
-                  backgroundColor: `var(${colorToken})`,
-                  border: '1px solid var(--border-subtle)',
-                  borderRadius: '4px',
-                  width: '50px',
-                  height: '50px',
-                  margin: '5px',
-                }}
-              />
-              <Text>{colorToken}</Text>
-            </li>
-          ))}
-        </ul>
-      </React.Fragment>
-    ))}
-  </div>
-);

package/src/stories/components/IconsShowcase.tsx

@@ -1,25 +0,0 @@
-import * as React from 'react';
-
-import * as MaterialIcons from '@livechat/design-system-icons/react/material';
-import { Icon, IconSizeName } from '../../components/Icon';
-import './iconsShowcase.css';
-
-export type IconsMap = {
-  [key: string]: React.FC<React.SVGProps<SVGSVGElement>>;
-};
-
-const Icons = MaterialIcons as IconsMap;
-
-export const IconsShowcase = (): React.ReactElement => {
-  const iconsGrid = Object.keys(Icons).map((item) => {
-    const iconSource = Icons[item];
-    return (
-      <div className="icon-showcase-card">
-        <Icon source={iconSource} size={IconSizeName.XLarge}></Icon>
-        <p>{item}</p>
-      </div>
-    );
-  });
-
-  return <div className="icons-showcase-wrapper">{iconsGrid}</div>;
-};

package/src/stories/components/iconsShowcase.css

@@ -1,13 +0,0 @@
-.icons-showcase-card {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.icons-showcase-wrapper {
-  display: grid;
-  gap: 10px;
-  grid-auto-rows: minmax(100px, auto);
-  grid-template-columns: repeat(8, 1fr);
-}

package/src/test/setup.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/src/test/utils.ts

@@ -1,3 +0,0 @@
-export * from '@testing-library/react';
-export { default as userEvent } from '@testing-library/user-event';
-export * from 'vitest';

package/src/themes/dark.scss

@@ -1,127 +0,0 @@
-.lc-dark-theme {
-  --background: #131317;
-  --surface-basic-default: #202024;
-  --surface-basic-subtle: #29292f;
-  --surface-basic-hover: rgba(255, 255, 255, 0.1);
-  --surface-basic-active: rgba(255, 255, 255, 0.2);
-  --surface-basic-disabled: #2d2d32;
-  --surface-secondary-default: #767680;
-  --surface-secondary-subtle: #3b3b43;
-  --surface-secondary-hover: #ababb1;
-  --surface-secondary-disabled: #3b3b43;
-  --surface-feedback-info: #323640;
-  --surface-feedback-negative: #3a3136;
-  --surface-feedback-warning: #3a362b;
-  --surface-feedback-positive: #263532;
-  --surface-invert-default: #eeeeef;
-  --surface-invert-subtle: #c9c9cd;
-  --surface-invert-disabled: #29292f;
-  --surface-overlay: rgba(19, 19, 23, 0.9);
-  --content-default: rgba(255, 255, 255, 0.8);
-  --content-subtle: rgba(255, 255, 255, 0.6);
-  --content-disabled: rgba(255, 255, 255, 0.4);
-  --content-white-locked: #fff;
-  --content-invert-default: #131317;
-  --content-invert-subtle: rgba(19, 19, 23, 0.7);
-  --content-invert-disabled: rgba(19, 19, 23, 0.3);
-  --border-default: rgba(255, 255, 255, 0.4);
-  --border-subtle: rgba(255, 255, 255, 0.1);
-  --border-hover: rgba(255, 255, 255, 0.6);
-  --border-disabled: rgba(255, 255, 255, 0.5);
-  --border-invert-default: rgba(19, 19, 23, 0.5);
-  --border-invert-subtle: rgba(19, 19, 23, 0.1);
-  --border-invert-hover: rgba(19, 19, 23, 0.7);
-  --border-invert-disabled: rgba(19, 19, 23, 0.3);
-  --color-action-active: #b6d5fb;
-  --color-action-hover: #8abbf9;
-  --color-action-default: #6daaf8;
-  --color-action-default-rgb: 157, 206, 255;
-  --color-action-disabled: #6daaf8;
-  --color-negative-active: #ffe5e5;
-  --color-negative-hover: #ffb7b7;
-  --color-negative-default: #ff4c4d;
-  --color-negative-disabled: rgba(255, 76, 77, 0.3);
-  --color-warning-default: #fed65e;
-  --color-warning-hover: #fedc89;
-  --color-positive-default: #00c057;
-  --color-positive-hover: #00e066;
-  --color-positive-disabled: #4d735e;
-  --color-bot: #50009c;
-  --color-black: #131317;
-  --color-white: #fff;
-  --decor-blue900: #003288;
-  --decor-blue800: #003fa4;
-  --decor-blue700: #004bc2;
-  --decor-blue600: #0059e1;
-  --decor-blue500: #06f;
-  --decor-blue400: #328dff;
-  --decor-blue300: #68afff;
-  --decor-blue200: #9dceff;
-  --decor-blue100: #daedff;
-  --decor-blue50: #f4faff;
-  --decor-orange900: #6c1d00;
-  --decor-orange800: #842600;
-  --decor-orange700: #9c2e00;
-  --decor-orange600: #b43700;
-  --decor-orange500: #d54300;
-  --decor-orange400: #ff5100;
-  --decor-orange300: #ff8a77;
-  --decor-orange200: #ffb8af;
-  --decor-orange100: #ffe5e3;
-  --decor-orange50: #fff8f7;
-  --decor-yellow900: #493700;
-  --decor-yellow800: #755b00;
-  --decor-yellow700: #c9a100;
-  --decor-yellow600: #e8bb00;
-  --decor-yellow500: #f3c600;
-  --decor-yellow400: #d1aa00;
-  --decor-yellow300: #fed65e;
-  --decor-yellow200: #fedc89;
-  --decor-yellow100: #fff2d6;
-  --decor-yellow50: #fff9ed;
-  --decor-gray950: #131317;
-  --decor-gray900: #1b1b20;
-  --decor-gray800: #29292f;
-  --decor-gray700: #3b3b43;
-  --decor-gray600: #4e4e58;
-  --decor-gray500: #62626d;
-  --decor-gray400: #767680;
-  --decor-gray300: #8d8d95;
-  --decor-gray200: #ababb1;
-  --decor-gray150: #c9c9cd;
-  --decor-gray100: #c9c9cd;
-  --decor-gray75: #eeeeef;
-  --decor-gray50: #e2e2e4;
-  --decor-gray40: #eeeeef;
-  --decor-gray20: #fcfcfc;
-  --decor-green900: #00431a;
-  --decor-green800: #005321;
-  --decor-green700: #006329;
-  --decor-green600: #007331;
-  --decor-green500: #00893c;
-  --decor-green400: #00a449;
-  --decor-green300: #00c057;
-  --decor-green200: #7edd92;
-  --decor-green100: #e4f4ed;
-  --decor-green50: #f3fcf4;
-  --decor-red900: #790002;
-  --decor-red800: #930002;
-  --decor-red700: #ae0003;
-  --decor-red600: #ca0005;
-  --decor-red500: #ee0007;
-  --decor-red400: #ff4c4d;
-  --decor-red300: #ff8889;
-  --decor-red200: #ffb7b7;
-  --decor-red100: #ffe5e5;
-  --decor-red50: #fff8f8;
-  --decor-purple900: #50009c;
-  --decor-purple800: #6100bd;
-  --decor-purple700: #7400df;
-  --decor-purple600: #8609ff;
-  --decor-purple500: #9146ff;
-  --decor-purple400: #a372ff;
-  --decor-purple300: #b99aff;
-  --decor-purple200: #d1c0ff;
-  --decor-purple100: #eee8ff;
-  --decor-purple50: #faf8ff;
-}

package/src/themes/designTokens.ts

@@ -1,126 +0,0 @@
-export const DesignTokens = {
-  Background: '--background',
-  SurfaceBasicDefault: '--surface-basic-default',
-  SurfaceBasicSubtle: '--surface-basic-subtle',
-  SurfaceBasicHover: '--surface-basic-hover',
-  SurfaceBasicActive: '--surface-basic-active',
-  SurfaceBasicDisabled: '--surface-basic-disabled',
-  SurfaceSecondaryDefault: '--surface-secondary-default',
-  SurfaceSecondarySubtle: '--surface-secondary-subtle',
-  SurfaceSecondaryHover: '--surface-secondary-hover',
-  SurfaceSecondaryDisabled: '--surface-secondary-disabled',
-  SurfaceFeedbackInfo: '--surface-feedback-info',
-  SurfaceFeedbackNegative: '--surface-feedback-negative',
-  SurfaceFeedbackWarning: '--surface-feedback-warning',
-  SurfaceFeedbackPositive: '--surface-feedback-positive',
-  SurfaceInvertDefault: '--surface-invert-default',
-  SurfaceInvertSubtle: '--surface-invert-subtle',
-  SurfaceInvertDisabled: '--surface-invert-disabled',
-  SurfaceOverlay: '--surface-overlay',
-  ContentDefault: '--content-default',
-  ContentSubtle: '--content-subtle',
-  ContentDisabled: '--content-disabled',
-  ContentWhiteLocked: '--content-white-locked',
-  ContentInvertDefault: '--content-invert-default',
-  ContentInvertSubtle: '--content-invert-subtle',
-  ContentInvertDisabled: '--content-invert-disabled',
-  BorderDefault: '--border-default',
-  BorderSubtle: '--border-subtle',
-  BorderHover: '--border-hover',
-  BorderDisabled: '--border-disabled',
-  BorderInvertDefault: '--border-invert-default',
-  BorderInvertSubtle: '--border-invert-subtle',
-  BorderInvertHover: '--border-invert-hover',
-  BorderInvertDisabled: '--border-invert-disabled',
-  ColorActionActive: '--color-action-active',
-  ColorActionHover: '--color-action-hover',
-  ColorActionDefault: '--color-action-default',
-  ColorActionDisabled: '--color-action-disabled',
-  ColorNegativeActive: '--color-negative-active',
-  ColorNegativeHover: '--color-negative-hover',
-  ColorNegativeDefault: '--color-negative-default',
-  ColorNegativeDisabled: '--color-negative-disabled',
-  ColorWarningDefault: '--color-warning-default',
-  ColorWarningHover: '--color-warning-hover',
-  ColorPositiveDefault: '--color-positive-default',
-  ColorPositiveHover: '--color-positive-hover',
-  ColorPositiveDisabled: '--color-positive-disabled',
-  ColorBot: '--color-bot',
-  ColorBlack: '--color-black',
-  ColorWhite: '--color-white',
-  DecorBlue900: '--decor-blue900',
-  DecorBlue800: '--decor-blue800',
-  DecorBlue700: '--decor-blue700',
-  DecorBlue600: '--decor-blue600',
-  DecorBlue500: '--decor-blue500',
-  DecorBlue400: '--decor-blue400',
-  DecorBlue300: '--decor-blue300',
-  DecorBlue200: '--decor-blue200',
-  DecorBlue100: '--decor-blue100',
-  DecorBlue50: '--decor-blue50',
-  DecorOrange900: '--decor-orange900',
-  DecorOrange800: '--decor-orange800',
-  DecorOrange700: '--decor-orange700',
-  DecorOrange600: '--decor-orange600',
-  DecorOrange500: '--decor-orange500',
-  DecorOrange400: '--decor-orange400',
-  DecorOrange300: '--decor-orange300',
-  DecorOrange200: '--decor-orange200',
-  DecorOrange100: '--decor-orange100',
-  DecorOrange50: '--decor-orange50',
-  DecorYellow900: '--decor-yellow900',
-  DecorYellow800: '--decor-yellow800',
-  DecorYellow700: '--decor-yellow700',
-  DecorYellow600: '--decor-yellow600',
-  DecorYellow500: '--decor-yellow500',
-  DecorYellow400: '--decor-yellow400',
-  DecorYellow300: '--decor-yellow300',
-  DecorYellow200: '--decor-yellow200',
-  DecorYellow100: '--decor-yellow100',
-  DecorYellow50: '--decor-yellow50',
-  DecorGray950: '--decor-gray950',
-  DecorGray900: '--decor-gray900',
-  DecorGray800: '--decor-gray800',
-  DecorGray700: '--decor-gray700',
-  DecorGray600: '--decor-gray600',
-  DecorGray500: '--decor-gray500',
-  DecorGray400: '--decor-gray400',
-  DecorGray300: '--decor-gray300',
-  DecorGray200: '--decor-gray200',
-  DecorGray150: '--decor-gray150',
-  DecorGray100: '--decor-gray100',
-  DecorGray75: '--decor-gray75',
-  DecorGray50: '--decor-gray50',
-  DecorGray40: '--decor-gray40',
-  DecorGray20: '--decor-gray20',
-  DecorGreen900: '--decor-green900',
-  DecorGreen800: '--decor-green800',
-  DecorGreen700: '--decor-green700',
-  DecorGreen600: '--decor-green600',
-  DecorGreen500: '--decor-green500',
-  DecorGreen400: '--decor-green400',
-  DecorGreen300: '--decor-green300',
-  DecorGreen200: '--decor-green200',
-  DecorGreen100: '--decor-green100',
-  DecorGreen50: '--decor-green50',
-  DecorRed900: '--decor-red900',
-  DecorRed800: '--decor-red800',
-  DecorRed700: '--decor-red700',
-  DecorRed600: '--decor-red600',
-  DecorRed500: '--decor-red500',
-  DecorRed400: '--decor-red400',
-  DecorRed300: '--decor-red300',
-  DecorRed200: '--decor-red200',
-  DecorRed100: '--decor-red100',
-  DecorRed50: '--decor-red50',
-  DecorPurple900: '--decor-purple900',
-  DecorPurple800: '--decor-purple800',
-  DecorPurple700: '--decor-purple700',
-  DecorPurple600: '--decor-purple600',
-  DecorPurple500: '--decor-purple500',
-  DecorPurple400: '--decor-purple400',
-  DecorPurple300: '--decor-purple300',
-  DecorPurple200: '--decor-purple200',
-  DecorPurple100: '--decor-purple100',
-  DecorPurple50: '--decor-purple50',
-};