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

package/src/components/FieldGroup/FieldGroup.stories.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { ComponentMeta } from '@storybook/react';
+
+import {
+  FieldGroup as FieldGroupComponent,
+  FieldGroupProps,
+} from './FieldGroup';
+import { RadioButton } from '../RadioButton';
+
+export default {
+  title: 'Forms (WIP)/Field Group',
+  component: FieldGroupComponent,
+  parameters: {
+    componentSubtitle: `
+    Use FieldGroup component to group elements and display it in nice layout (inline or stacked).
+    `,
+  },
+} as ComponentMeta<typeof FieldGroupComponent>;
+
+export const FieldGroup = ({
+  ...args
+}: FieldGroupProps): React.ReactElement => (
+  <FieldGroupComponent {...args}>
+    <RadioButton id="field-group-example-1">Radio button label</RadioButton>
+    <RadioButton id="field-group-example-2">Radio button label</RadioButton>
+  </FieldGroupComponent>
+);
+
+FieldGroup.args = {
+  description: 'Field group description',
+  error: '',
+  stretch: false,
+  inline: false,
+} as FieldGroupProps;

package/src/components/FieldGroup/FieldGroup.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import cx from 'clsx';
+import { FieldError } from '../FieldError';
+import { FieldDescription } from '../FieldDescription';
+
+import styles from './FieldGroup.module.scss';
+
+export interface FieldGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  description?: React.ReactNode;
+  error?: string;
+  inline?: boolean;
+  stretch?: boolean;
+}
+
+const baseClass = 'field-group';
+
+export const FieldGroup: React.FC<FieldGroupProps> = ({
+  className = '',
+  children,
+  description,
+  error,
+  inline,
+  stretch,
+  ...props
+}) => {
+  const mergedClassNames = cx(styles[baseClass], className, {
+    [styles[`${baseClass}--inline`]]: inline,
+    [styles[`${baseClass}--stretched`]]: stretch,
+  });
+
+  return (
+    <div {...props} className={mergedClassNames}>
+      {children}
+      {error && <FieldError>{error}</FieldError>}
+      {description && <FieldDescription>{description}</FieldDescription>}
+    </div>
+  );
+};

package/src/components/FieldGroup/index.ts

@@ -0,0 +1 @@
+export { FieldGroup } from './FieldGroup';

package/src/components/Form/Form.module.scss

@@ -0,0 +1,22 @@
+.form {
+  border: 0;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+
+  &__header,
+  &__footer {
+    margin-bottom: 32px;
+  }
+
+  &__label {
+    color: var(--content-default);
+    margin: 0;
+    margin-bottom: 16px;
+  }
+
+  &__helper {
+    color: var(--content-default);
+    margin: 0;
+  }
+}

package/src/components/Form/Form.spec.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+
+import { render } from 'test-utils';
+import noop from '../../utils/noop';
+import { Form } from './Form';
+
+describe('<Form /> component', () => {
+  it("should render 'labelText' heading", () => {
+    const { getByRole } = render(<Form labelText="Hello" />);
+    const heading = getByRole('heading');
+    expect(heading).toBeVisible();
+    expect(heading).toHaveTextContent('Hello');
+  });
+
+  it("should render 'helperText'", () => {
+    const { getByText } = render(<Form helperText="Hello" />);
+    expect(getByText('Hello')).toBeVisible();
+  });
+
+  it("should render nested elements as 'formFooter'", () => {
+    const { getByRole } = render(<Form formFooter={<button>Submit</button>} />);
+    const button = getByRole('button');
+    expect(button).toBeVisible();
+    expect(button).toHaveTextContent('Submit');
+  });
+
+  it("should render nested elements as 'children'", () => {
+    const { getByRole } = render(
+      <Form>
+        <input type="text" value="Hello" onChange={noop} />
+      </Form>
+    );
+
+    const input = getByRole('textbox');
+    expect(input).toBeVisible();
+    expect(input).toHaveValue('Hello');
+  });
+});

package/src/components/Form/Form.stories.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { ComponentMeta, Story } from '@storybook/react';
+
+import { Form as FormComponenet, FormProps } from '../Form';
+import { Button } from '..//Button';
+import { RadioButton } from '../RadioButton';
+
+export default {
+  title: 'Forms (WIP)/Form',
+  component: FormComponenet,
+} as ComponentMeta<typeof FormComponenet>;
+
+export const Form: Story<FormProps> = (args) => {
+  return <FormComponenet {...args} />;
+};
+
+Form.args = {
+  labelText: 'Settings',
+  helperText:
+    'Use form layout to arrange fields within a form using standard spacing. We recomme stacking fields vertically for easier scanning and faster completion, but you can also arrange them vertically.',
+  formFooter: (
+    <Button kind="primary" type="button">
+      Save changes
+    </Button>
+  ),
+  children: (
+    //   TODO: Expand the example with FormGroup, FieldGroup and InputField components
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'row',
+        marginBottom: '32px',
+        gap: '16px',
+      }}
+    >
+      <RadioButton checked id="gender-radio">
+        Male
+      </RadioButton>
+      <RadioButton id="gender-radio">Female</RadioButton>
+    </div>
+  ),
+} as FormProps;

package/src/components/Form/Form.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import cx from 'clsx';
+
+import { Text, Heading } from '../Typography';
+
+import styles from './Form.module.scss';
+
+export interface FormProps extends React.HTMLAttributes<HTMLFormElement> {
+  labelText?: string;
+  helperText?: string;
+  formFooter?: React.ReactNode;
+}
+
+const baseClass = 'form';
+
+export const Form: React.FC<FormProps> = ({
+  className,
+  children,
+  labelText,
+  helperText,
+  formFooter,
+  ...restProps
+}) => {
+  return (
+    <form className={cx(styles[baseClass], className)} {...restProps}>
+      {(labelText || helperText) && (
+        <div className={styles[`${baseClass}__header`]}>
+          {labelText && (
+            <Heading size="sm" className={styles[`${baseClass}__label`]}>
+              {labelText}
+            </Heading>
+          )}
+          {helperText && (
+            <Text as="p" size="sm" className={styles[`${baseClass}__helper`]}>
+              {helperText}
+            </Text>
+          )}
+        </div>
+      )}
+      {children}
+      {formFooter && (
+        <div className={styles[`${baseClass}__footer`]}>{formFooter}</div>
+      )}
+    </form>
+  );
+};

package/src/components/Form/index.ts

@@ -0,0 +1,2 @@
+export { Form } from './Form';
+export type { FormProps } from './Form';

package/src/components/FormGroup/FormGroup.module.scss

@@ -0,0 +1,20 @@
+.form-group {
+  border-style: none;
+  margin: 0 0 32px;
+  min-width: auto;
+  padding: 0;
+
+  &__header {
+    margin-bottom: 16px;
+  }
+
+  &__label {
+    color: var(--content-default);
+    display: block;
+    margin-bottom: 4px;
+  }
+
+  &__helper {
+    color: var(--content-subtle);
+  }
+}

package/src/components/FormGroup/FormGroup.spec.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { render } from 'test-utils';
+import { FormGroup } from './FormGroup';
+
+import styles from './FormGroup.module.scss';
+
+const baseClass = 'form-group';
+
+describe('<FormGroup> component', () => {
+  it('should allow for custom class', () => {
+    const { container } = render(
+      <FormGroup className="my-css-class">test</FormGroup>
+    );
+    expect(container.firstChild).toHaveClass('my-css-class');
+  });
+
+  it('should render label text', () => {
+    const text = 'Label text';
+    const { queryByText } = render(
+      <FormGroup labelText={text}>test</FormGroup>
+    );
+    expect(queryByText(text)).toBeTruthy();
+    expect(queryByText(text)).toHaveClass(styles[`${baseClass}__label`]);
+  });
+
+  it('should render helper text', () => {
+    const text = 'Helper text';
+    const { queryByText } = render(
+      <FormGroup helperText={text}>test</FormGroup>
+    );
+    expect(queryByText(text)).toBeTruthy();
+    expect(queryByText(text)).toHaveClass(styles[`${baseClass}__helper`]);
+  });
+});

package/src/components/FormGroup/FormGroup.stories.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { ComponentMeta } from '@storybook/react';
+
+import { FormGroup as FormGroupComponent, FormGroupProps } from './FormGroup';
+import { RadioButton } from '../RadioButton';
+import { FieldGroup } from '../FieldGroup';
+
+export default {
+  title: 'Forms (WIP)/Form Group',
+  component: FormGroupComponent,
+  parameters: {
+    componentSubtitle: `
+    Use FormGroup component to group related fieldsets. Component provides label for group of fields which improves accessibility of your form.
+    `,
+  },
+} as ComponentMeta<typeof FormGroupComponent>;
+
+export const FormGroup = ({ ...args }: FormGroupProps): React.ReactElement => (
+  <FormGroupComponent {...args}>
+    <FieldGroup>
+      <RadioButton id="field-group-example-1">Radio button label</RadioButton>
+      <RadioButton id="field-group-example-2">Radio button label</RadioButton>
+    </FieldGroup>
+  </FormGroupComponent>
+);
+
+FormGroup.args = {
+  labelText: 'Form Group example',
+  helperText: 'Form Group helper text',
+} as FormGroupProps;

package/src/components/FormGroup/FormGroup.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import cx from 'clsx';
+import { Text, Heading } from '../Typography';
+
+import styles from './FormGroup.module.scss';
+
+export interface FormGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+  labelText?: string;
+  helperText?: string;
+}
+
+const baseClass = 'form-group';
+
+export const FormGroup: React.FC<FormGroupProps> = ({
+  className = '',
+  children,
+  labelText,
+  helperText,
+  ...props
+}) => {
+  const mergedClassNames = cx(styles[baseClass], className);
+
+  return (
+    <div
+      {...props}
+      role="group"
+      {...(labelText && { 'aria-label': labelText })}
+      className={mergedClassNames}
+    >
+      <div className={styles[`${baseClass}__header`]}>
+        <Heading as="div" size="sm" className={styles[`${baseClass}__label`]}>
+          {labelText}
+        </Heading>
+        {helperText && (
+          <Text as="div" size="sm" className={styles[`${baseClass}__helper`]}>
+            {helperText}
+          </Text>
+        )}
+      </div>
+      {children}
+    </div>
+  );
+};

package/src/components/FormGroup/index.ts

@@ -0,0 +1 @@
+export * from './FormGroup';

package/src/components/Icon/Icon.module.scss

@@ -0,0 +1,70 @@
+.icon {
+  align-items: center;
+  display: flex;
+
+  &--primary {
+    color: var(--content-default);
+  }
+
+  &--subtle {
+    color: var(--content-subtle);
+  }
+
+  &--inverted {
+    color: var(--content-invert-default);
+  }
+
+  &--inverted-subtle {
+    color: var(--content-invert-subtle);
+  }
+
+  &--link {
+    color: var(--color-action-default);
+  }
+
+  &--success {
+    color: var(--color-positive-default);
+  }
+
+  &--warning {
+    color: var(--color-warning-default);
+  }
+
+  &--error {
+    color: var(--color-negative-default);
+  }
+
+  &--disabled {
+    &--primary {
+      color: var(--content-disabled);
+    }
+
+    &--subtle {
+      color: var(--content-disabled);
+    }
+
+    &--inverted {
+      color: var(--content-invert-disabled);
+    }
+
+    &--inverted-subtle {
+      color: var(--content-invert-disabled);
+    }
+
+    &--link {
+      color: var(--color-action-disabled);
+    }
+
+    &--success {
+      color: var(--color-positive-disabled);
+    }
+
+    &--warning {
+      color: var(--color-warning-default);
+    }
+
+    &--error {
+      color: var(--color-negative-disabled);
+    }
+  }
+}

package/src/components/Icon/Icon.stories.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { ComponentMeta } from '@storybook/react';
+import * as MaterialIcons from '@livechat/design-system-icons/react/material';
+
+import {
+  Icon as IconComponent,
+  IconSizeName,
+  IconTypeName,
+  IconProps,
+} from './Icon';
+
+const iterator = Object.keys(MaterialIcons);
+
+export default {
+  title: 'Components/Icon',
+  component: IconComponent,
+  argTypes: {
+    source: {
+      options: iterator,
+      mapping: MaterialIcons,
+      control: {
+        type: 'select',
+        labels: iterator,
+      },
+    },
+    size: {
+      table: {
+        defaultValue: {
+          summary: IconSizeName.Medium,
+        },
+      },
+    },
+    iconType: {
+      table: {
+        defaultValue: {
+          summary: IconTypeName.Primary,
+        },
+      },
+    },
+  },
+} as ComponentMeta<typeof IconComponent>;
+
+export const Icon = (args: IconProps): React.ReactElement => (
+  <div style={{ width: '300px' }}>
+    <IconComponent {...args} />
+  </div>
+);
+
+Icon.args = {
+  source: MaterialIcons.Email,
+  size: IconSizeName.Medium,
+  iconType: IconTypeName.Primary,
+};

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,118 @@
+import * as React from 'react';
+import cx from 'clsx';
+import styles from './Icon.module.scss';
+
+export enum IconSizeName {
+  XSmall = 'xsmall',
+  Small = 'small',
+  Medium = 'medium',
+  Large = 'large',
+  XLarge = 'xlarge',
+}
+
+export const IconSize = {
+  [IconSizeName.XSmall]: {
+    width: 12,
+    height: 12,
+  },
+  [IconSizeName.Small]: {
+    width: 16,
+    height: 16,
+  },
+  [IconSizeName.Medium]: {
+    width: 20,
+    height: 20,
+  },
+  [IconSizeName.Large]: {
+    width: 24,
+    height: 24,
+  },
+  [IconSizeName.XLarge]: {
+    width: 32,
+    height: 32,
+  },
+};
+
+export enum IconTypeName {
+  Primary = 'primary',
+  Subtle = 'subtle',
+  Inverted = 'inverted',
+  InvertedSubtle = 'inverted_subtle',
+  Link = 'link',
+  Success = 'success',
+  Warning = 'warning',
+  Error = 'error',
+}
+
+export const IconColorMapper = {
+  [IconTypeName.Primary]: 'primary',
+  [IconTypeName.Subtle]: 'subtle',
+  [IconTypeName.Inverted]: 'inverted',
+  [IconTypeName.InvertedSubtle]: 'inverted-subtle',
+  [IconTypeName.Link]: 'link',
+  [IconTypeName.Success]: 'success',
+  [IconTypeName.Warning]: 'warning',
+  [IconTypeName.Error]: 'error',
+};
+
+export const IconColorDisabledMapper = {
+  [IconTypeName.Primary]: 'disabled--primary',
+  [IconTypeName.Subtle]: 'disabled--subtle',
+  [IconTypeName.Inverted]: 'disabled--inverted',
+  [IconTypeName.InvertedSubtle]: 'disabled--inverted-subtle',
+  [IconTypeName.Link]: 'disabled--link',
+  [IconTypeName.Success]: 'disabled--success',
+  [IconTypeName.Warning]: 'disabled--warning',
+  [IconTypeName.Error]: 'disabled--error',
+};
+
+export interface IconProps {
+  source: React.FC<React.SVGProps<SVGSVGElement>> | string;
+  size?: IconSizeName;
+  iconType?: IconTypeName;
+  disabled?: boolean;
+  className?: string;
+  customColor?: string;
+}
+
+const baseClass = 'icon';
+
+export const Icon: React.FC<IconProps> = (props) => {
+  const {
+    source,
+    size = IconSizeName.Medium,
+    iconType,
+    disabled,
+    className,
+    customColor,
+    ...restProps
+  } = props;
+  let filledColor;
+
+  if (iconType) {
+    filledColor = IconColorMapper[iconType];
+
+    if (disabled) {
+      filledColor = IconColorDisabledMapper[iconType];
+    }
+  }
+
+  const GeneratedIcon = React.createElement(source, {
+    ...IconSize[size],
+    color: customColor,
+  });
+
+  const mergedClassNames = cx(
+    className,
+    styles[baseClass],
+    filledColor && styles[`${baseClass}--${filledColor}`]
+  );
+
+  return (
+    <span {...restProps} className={mergedClassNames}>
+      {GeneratedIcon}
+    </span>
+  );
+};
+
+export default Icon;

package/src/components/Icon/index.ts

@@ -0,0 +1 @@
+export { Icon, IconSizeName, IconTypeName } from './Icon';

package/src/components/InputField/InputField.module.scss

@@ -0,0 +1,37 @@
+.input-field {
+  background-clip: padding-box;
+  border: 1px solid var(--border-default);
+  border-radius: 4px;
+  box-sizing: border-box;
+  color: var(--content-default);
+  font-size: 15px;
+  line-height: 1.2;
+  padding: 8px 10px;
+  transition: border 0.25s ease-in-out;
+  width: 100%;
+  will-change: border-color;
+
+  &::placeholder {
+    color: var(--content-disabled);
+  }
+
+  &:hover {
+    border-color: var(--border-hover);
+    outline: 0;
+  }
+
+  &:focus {
+    border-color: var(--color-action-default);
+    outline: 0;
+  }
+
+  &--error,
+  &--error:focus {
+    border-color: var(--color-negative-default);
+  }
+
+  &:disabled {
+    color: var(--content-disabled);
+    cursor: not-allowed;
+  }
+}