@ssa-ui-kit/core 0.0.16-alpha → 0.0.17-alpha

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

@@ -1,124 +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,
-    },
-  },
-};
+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

@@ -1,121 +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;
+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

@@ -1,14 +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;
-`;
+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

@@ -1,67 +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,
-      }}
-    />
-  );
-};
+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,
+      }}
+    />
+  );
+};