@ssa-ui-kit/core 0.0.1-alpha

package/src/components/Button/Button.stories.tsx

@@ -0,0 +1,124 @@
+import type { Meta } from '@storybook/react';
+
+import Icon from '@components/Icon';
+
+import Button from './index';
+import { GridWrapper, HeaderTitle, sizes, variants } from './helpers';
+import React from 'react';
+
+export default {
+  title: 'Components/Button',
+  component: Button,
+  parameters: {
+    docs: {
+      description: {
+        component: 'Button triggers an action or event.',
+      },
+    },
+  },
+  argTypes: {
+    size: {
+      table: {
+        type: {
+          summary: 'string',
+        },
+      },
+      options: ['small', 'medium', 'large'],
+      control: {
+        type: 'inline-radio',
+      },
+    },
+    startIcon: {
+      description: 'Icon to be displayed before the text.',
+      table: {
+        type: {
+          summary: 'ReactNode',
+        },
+      },
+      control: {
+        disable: true,
+      },
+    },
+    endIcon: {
+      description: 'Icon to be displayed after the text.',
+      table: {
+        type: {
+          summary: 'ReactNode',
+        },
+      },
+      control: {
+        disable: true,
+      },
+    },
+    variant: {
+      table: {
+        type: {
+          summary: 'string',
+        },
+      },
+      options: ['primary', 'info', 'secondary', 'tertiary', 'attention'],
+      control: {
+        type: 'inline-radio',
+      },
+    },
+    ref: {
+      control: {
+        disable: true,
+      },
+    },
+    key: {
+      control: {
+        disable: true,
+      },
+    },
+  },
+  args: {
+    text: 'Button',
+    size: 'small',
+    variant: 'primary',
+    type: 'button',
+  },
+} as Meta<typeof Button>;
+
+export const Default = {};
+
+export const AllStates = () => (
+  <GridWrapper>
+    <HeaderTitle>Variant</HeaderTitle>
+    <HeaderTitle>Small</HeaderTitle>
+    <HeaderTitle>Medium</HeaderTitle>
+    <HeaderTitle>Large</HeaderTitle>
+    {variants.map((variant) => (
+      <React.Fragment key={variant}>
+        <HeaderTitle css={{ width: 80 }}>{variant}</HeaderTitle>
+        {sizes.map((size) => (
+          <Button variant={variant} size={size} key={variant + size}>
+            Button
+          </Button>
+        ))}
+      </React.Fragment>
+    ))}
+  </GridWrapper>
+);
+
+AllStates.args = {
+  name: 'All States',
+};
+
+export const Block = { args: { size: 'large', block: true } };
+
+export const StartIcon = {
+  args: { startIcon: <Icon name={'notification'} size={16} color="#D0D2DC" /> },
+};
+
+export const EndIcon = {
+  args: { endIcon: <Icon name={'notification'} size={16} color="#D0D2DC" /> },
+};
+
+export const Focused = {
+  parameters: {
+    pseudo: {
+      focus: true,
+    },
+  },
+};

package/src/components/Button/Button.tsx

@@ -0,0 +1,121 @@
+import { useState, forwardRef } from 'react';
+import { useTheme } from '@emotion/react';
+
+import Wrapper from '@components/Wrapper/Wrapper';
+
+import { ButtonBase } from './ButtonBase';
+import {
+  WhiteButtonText,
+  GreyButtonText,
+  GreyLightButtonText,
+  DisabledButtonText,
+} from './ButtonText';
+import { IButtonProps, IButtonVariants } from './types';
+import {
+  large,
+  medium,
+  small,
+  primary,
+  info,
+  secondary,
+  tertiary,
+  attention,
+  buttonBlock,
+  iconWrapperLeft,
+  iconWrapperRight,
+} from './styles';
+
+const mapSizes: MainSizes = {
+  small,
+  medium,
+  large,
+};
+
+const mapVariants: IButtonVariants = {
+  primary,
+  secondary,
+  tertiary,
+  info,
+  attention,
+};
+
+export const Button = forwardRef<HTMLButtonElement, IButtonProps>(
+  function Button(
+    {
+      block = false,
+      size = 'small',
+      text,
+      startIcon,
+      endIcon,
+      variant = 'primary',
+      type = 'button',
+      className,
+      isDisabled,
+      onClick,
+      children,
+      ...ariaProps
+    },
+    ref,
+  ) {
+    if (!text && !startIcon && !endIcon && !children) {
+      throw new Error('Button must have either text or icon or children');
+    }
+
+    const theme = useTheme();
+
+    const [isHovered, setIsHovered] = useState(false);
+
+    const isPrimary = variant === 'primary';
+    const isInfo = variant === 'info';
+    const isSecondary = variant === 'secondary';
+    const isTertiary = variant === 'tertiary';
+    const isAttention = variant === 'attention';
+    const noMargin = !text ? { margin: 0 } : {};
+
+    const variantStyles =
+      isPrimary || isInfo || isTertiary || isSecondary || isAttention
+        ? mapVariants[variant] && mapVariants[variant](theme)
+        : undefined;
+
+    const btn = (
+      <ButtonBase
+        ref={ref}
+        css={[mapSizes[size], variantStyles]}
+        type={type}
+        disabled={isDisabled}
+        className={className}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        onClick={onClick}
+        {...ariaProps}>
+        {startIcon ? (
+          <span style={noMargin} css={[iconWrapperRight]}>
+            {startIcon}
+          </span>
+        ) : null}
+        {children ? (
+          children
+        ) : text ? (
+          isDisabled ? (
+            <DisabledButtonText text={text} size={size} />
+          ) : isPrimary || isInfo || isAttention ? (
+            <WhiteButtonText text={text} size={size} />
+          ) : isTertiary && isHovered ? (
+            <GreyLightButtonText text={text} size={size} />
+          ) : (
+            <GreyButtonText text={text} size={size} />
+          )
+        ) : null}
+        {endIcon ? (
+          <span style={noMargin} css={iconWrapperLeft}>
+            {endIcon}
+          </span>
+        ) : null}
+      </ButtonBase>
+    );
+
+    return block ? <Wrapper css={buttonBlock}>{btn}</Wrapper> : btn;
+  },
+);
+
+export default Button;

package/src/components/Button/ButtonBase.tsx

@@ -0,0 +1,14 @@
+import styled from '@emotion/styled';
+
+export const ButtonBase = styled.button`
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  border: none;
+  padding: 0 16px;
+  font: inherit;
+  cursor: pointer;
+  outline: inherit;
+
+  border-radius: 12px;
+`;

package/src/components/Button/ButtonText.tsx

@@ -0,0 +1,67 @@
+import { useTheme } from '@emotion/react';
+
+import { IColoredButtonTextProps, IButtonTextProps } from './types';
+
+export const ButtonText = ({ text, className, testId }: IButtonTextProps) => {
+  return (
+    <span className={className} data-testid={testId}>
+      {text}
+    </span>
+  );
+};
+
+export const WhiteButtonText = ({ text }: IColoredButtonTextProps) => {
+  const theme = useTheme();
+
+  return (
+    <ButtonText
+      testId="white-button-text"
+      text={text}
+      css={{
+        color: theme.colors.white,
+      }}
+    />
+  );
+};
+
+export const GreyButtonText = ({ text }: IColoredButtonTextProps) => {
+  const theme = useTheme();
+
+  return (
+    <ButtonText
+      testId="grey-button-text"
+      text={text}
+      css={{
+        color: theme.colors.greyDarker,
+      }}
+    />
+  );
+};
+
+export const GreyLightButtonText = ({ text }: IColoredButtonTextProps) => {
+  const theme = useTheme();
+
+  return (
+    <ButtonText
+      testId="greylight-button-text"
+      text={text}
+      css={{
+        color: theme.colors.greyButtonGradient,
+      }}
+    />
+  );
+};
+
+export const DisabledButtonText = ({ text }: IColoredButtonTextProps) => {
+  const theme = useTheme();
+
+  return (
+    <ButtonText
+      testId="disabled-button-text"
+      text={text}
+      css={{
+        color: theme.colors.grey40,
+      }}
+    />
+  );
+};

package/src/components/Button/fixtures.ts

@@ -0,0 +1,165 @@
+import Icon from '@components/Icon';
+import { IButtonProps } from './types';
+
+export type TestPropsType = Omit<
+  IButtonProps,
+  'isDisabled' | 'startIcon' | 'endIcon'
+> & {
+  disabled?: boolean;
+  startIcon?: React.ComponentProps<typeof Icon>['name'];
+  endIcon?: React.ComponentProps<typeof Icon>['name'];
+};
+
+const baseSpecs: TestPropsType[] = [
+  {
+    type: 'button',
+    variant: 'primary',
+    size: 'small',
+    text: 'Button',
+    disabled: false,
+  },
+  {
+    type: 'button',
+    variant: 'primary',
+    size: 'small',
+    text: 'Button',
+    disabled: false,
+    endIcon: 'plus',
+  },
+  {
+    type: 'button',
+    variant: 'primary',
+    size: 'small',
+    text: 'Button',
+    disabled: false,
+    startIcon: 'minus',
+  },
+  {
+    type: 'button',
+    variant: 'primary',
+    size: 'small',
+    text: 'Button',
+    disabled: false,
+    startIcon: 'minus',
+    endIcon: 'plus',
+  },
+  {
+    type: 'button',
+    variant: 'primary',
+    size: 'small',
+    disabled: false,
+    startIcon: 'minus',
+    endIcon: 'plus',
+  },
+  {
+    type: 'button',
+    variant: 'primary',
+    size: 'small',
+    disabled: false,
+    startIcon: 'minus',
+  },
+  {
+    type: 'button',
+    variant: 'primary',
+    size: 'small',
+    disabled: false,
+    endIcon: 'plus',
+  },
+
+  {
+    type: 'button',
+    variant: 'primary',
+    size: 'small',
+    text: 'Button',
+    disabled: true,
+  },
+  {
+    type: 'button',
+    variant: 'primary',
+    size: 'small',
+    text: 'Button',
+    disabled: true,
+    endIcon: 'plus',
+  },
+  {
+    type: 'button',
+    variant: 'primary',
+    size: 'small',
+    text: 'Button',
+    disabled: true,
+    startIcon: 'minus',
+  },
+  {
+    type: 'button',
+    variant: 'primary',
+    size: 'small',
+    text: 'Button',
+    disabled: true,
+    startIcon: 'minus',
+    endIcon: 'plus',
+  },
+  {
+    type: 'button',
+    variant: 'primary',
+    size: 'small',
+    disabled: true,
+    startIcon: 'minus',
+    endIcon: 'plus',
+  },
+  {
+    type: 'button',
+    variant: 'primary',
+    size: 'small',
+    disabled: true,
+    startIcon: 'minus',
+  },
+  {
+    type: 'button',
+    variant: 'primary',
+    size: 'small',
+    disabled: true,
+    endIcon: 'plus',
+  },
+];
+
+export const primaryBtnSpecs = [
+  ...baseSpecs,
+  ...baseSpecs.map((s) => ({ ...s, size: undefined })),
+  ...baseSpecs.map((s) => ({ ...s, size: 'medium' as IButtonProps['size'] })),
+  ...baseSpecs.map((s) => ({ ...s, size: 'large' as IButtonProps['size'] })),
+  ...baseSpecs.map((s) => ({
+    ...s,
+    size: 'small' as IButtonProps['size'],
+    type: 'submit' as IButtonProps['type'],
+  })),
+  ...baseSpecs.map((s) => ({
+    ...s,
+    size: 'medium' as IButtonProps['size'],
+    type: 'submit' as IButtonProps['type'],
+  })),
+  ...baseSpecs.map((s) => ({
+    ...s,
+    size: 'large' as IButtonProps['size'],
+    type: 'submit' as IButtonProps['type'],
+  })),
+];
+
+export const secondaryBtnSpecs = primaryBtnSpecs.map((s) => ({
+  ...s,
+  variant: 'secondary' as IButtonProps['variant'],
+}));
+
+export const tertiaryBtnSpecs = primaryBtnSpecs.map((s) => ({
+  ...s,
+  variant: 'tertiary' as IButtonProps['variant'],
+}));
+
+export const infoBtnSpecs = primaryBtnSpecs.map((s) => ({
+  ...s,
+  variant: 'info' as IButtonProps['variant'],
+}));
+
+export const attentionBtnSpecs = primaryBtnSpecs.map((s) => ({
+  ...s,
+  variant: 'attention' as IButtonProps['variant'],
+}));

package/src/components/Button/helpers.ts

@@ -0,0 +1,30 @@
+import styled from '@emotion/styled';
+import { IButtonVariants } from './types';
+
+export const sizes: Array<keyof MainSizes> = ['small', 'medium', 'large'];
+export const variants: Array<keyof IButtonVariants> = [
+  'primary',
+  'info',
+  'secondary',
+  'tertiary',
+  'attention',
+];
+
+export const HeaderTitle = styled.span`
+  text-align: center;
+  font-weight: 800;
+  font-size: 12px;
+`;
+
+export const GridWrapper = styled.div`
+  display: grid;
+  grid-template: 'a a a a';
+  grid-gap: 10px;
+  grid-auto-columns: min-content;
+  align-items: center;
+  & > span {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+  }
+`;

package/src/components/Button/index.ts

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

package/src/components/Button/styles.ts

@@ -0,0 +1,168 @@
+import { css, Theme } from '@emotion/react';
+import { focusOutline } from '@styles/safari-focus-outline';
+
+export const buttonBlock = css`
+  display: grid;
+
+  span {
+    display: inline-block;
+    margin: auto;
+  }
+`;
+
+export const iconWrapperRight = css`
+  display: inline-flex;
+  margin-right: 6px;
+`;
+
+export const iconWrapperLeft = css`
+  display: inline-flex;
+  margin-left: 6px;
+`;
+
+export const large = css`
+  height: 54px;
+
+  font-weight: 400;
+  font-size: 16px;
+  letter-spacing: 0.8px;
+
+  padding: 0 32px;
+`;
+
+export const medium = css`
+  height: 46px;
+
+  font-weight: 500;
+  font-size: 16px;
+  letter-spacing: 0.8px;
+
+  padding: 0 24px;
+`;
+
+export const small = css`
+  height: 36px;
+
+  font-size: 13.33px;
+  font-weight: 400;
+  letter-spacing: 0.8px;
+
+  padding: 0 16px;
+`;
+
+export const primary = (theme: Theme) => css`
+  color: ${theme.colors.white};
+  background: linear-gradient(
+    108.3deg,
+    ${theme.colors.greyDarker} -0.36%,
+    ${theme.colors.greyDark} 100%
+  );
+
+  &:hover {
+    background: linear-gradient(
+      108.3deg,
+      ${theme.colors.greyButtonGradient} -0.36%,
+      ${theme.colors.greyButtonGradientLight} 100%
+    );
+    box-shadow: -4px 4px 14px ${theme.colors.greyDarker14};
+  }
+
+  &:active {
+    background: ${theme.colors.greyDarker};
+    box-shadow: -4px 4px 14px ${theme.colors.greyDarker14};
+  }
+
+  &:disabled {
+    background: ${theme.colors.grey};
+  }
+
+  &:focus {
+    background: linear-gradient(
+      108.3deg,
+      ${theme.colors.greyBackground} -0.36%,
+      ${theme.colors.greyBackgroundLight} 100%
+    );
+    box-shadow: -4px 4px 14px ${theme.colors.greyDarker14};
+  }
+`;
+
+export const info = (theme: Theme) => css`
+  color: ${theme.colors.white};
+  background: linear-gradient(
+    247deg,
+    ${theme.colors.blueLighter} 14.71%,
+    ${theme.colors.blue} 85.29%
+  );
+
+  &:hover {
+    background: linear-gradient(
+      247deg,
+      ${theme.colors.blueButtonHoverGradientFrom} 14.71%,
+      ${theme.colors.blueButtonHoverGradientTo} 85.29%
+    );
+  }
+
+  &:active {
+    background: ${theme.colors.blueButtonActive};
+  }
+
+  &:disabled {
+    background: ${theme.colors.grey};
+  }
+`;
+
+export const secondary = (theme: Theme) => css`
+  background: ${theme.colors.greyLighter};
+  box-shadow: 0px 10px 40px ${theme.colors.greyShadow};
+
+  &:hover {
+    background: ${theme.colors.white};
+    box-shadow: 0px 10px 40px ${theme.colors.greyShadowHover};
+  }
+
+  &:active {
+    background: ${theme.colors.greyFocused};
+    box-shadow: 0px 10px 40px ${theme.colors.greyShadow};
+  }
+
+  &:disabled {
+    background: ${theme.colors.grey};
+    box-shadow: 0px 10px 40px ${theme.colors.greyShadow};
+  }
+
+  &:focus {
+    background: ${theme.colors.greySelectedMenuItem};
+    box-shadow: 0px 10px 40px ${theme.colors.greyShadow};
+  }
+`;
+
+export const tertiary = (theme: Theme) => css`
+  background: transparent;
+
+  ${focusOutline(theme, 'greyOutline')}
+`;
+
+export const attention = (theme: Theme) => css`
+  color: ${theme.colors.white};
+  background: linear-gradient(
+    99.26deg,
+    ${theme.colors.pink} -7.01%,
+    ${theme.colors.pinkLighter} 92.87%
+  );
+
+  &:hover {
+    background: linear-gradient(
+      99.26deg,
+      ${theme.colors.pinkDark} 7.01%,
+      ${theme.colors.pinkDarker} 92.87%
+    );
+  }
+
+  &:active {
+    background: ${theme.colors.pinkDark};
+  }
+
+  &:disabled {
+    background: ${theme.colors.grey};
+  }
+`;