@dotss/ui 0.0.4

package/components/Button/Button.stories.tsx

@@ -0,0 +1,136 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Box from '@components/Box';
+import Icon from '@components/Icon';
+
+import Button from './Button';
+
+const meta = {
+  title: 'Component/Button',
+  component: Button,
+  parameters: {
+    layout: 'centered'
+  },
+  argTypes: {
+    startAdornment: {
+      control: {
+        disable: true
+      }
+    },
+    endAdornment: {
+      control: {
+        disable: true
+      }
+    }
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Filled: Story = {
+  args: {
+    children: 'BUTTON',
+    variant: 'filled',
+    color: 'primary',
+    size: 'medium',
+    disabled: false,
+    rounded: true
+  }
+};
+
+export const Outlined: Story = {
+  args: {
+    children: 'BUTTON',
+    variant: 'outlined',
+    color: 'primary',
+    size: 'medium',
+    disabled: false,
+    rounded: true
+  }
+};
+
+export const Text: Story = {
+  args: {
+    children: 'BUTTON',
+    variant: 'text',
+    color: 'primary',
+    size: 'medium',
+    disabled: false,
+    rounded: true
+  }
+};
+
+export const FullWidth: Story = {
+  decorators: [
+    (Story) => (
+      <Box
+        inlineCSS={{
+          width: '100vh'
+        }}
+      >
+        <Story />
+      </Box>
+    )
+  ],
+  args: {
+    children: 'BUTTON',
+    variant: 'filled',
+    color: 'primary',
+    size: 'medium',
+    disabled: false,
+    fullWidth: true,
+    rounded: true
+  }
+};
+
+export const StartAdornment: Story = {
+  args: {
+    children: 'BUTTON',
+    variant: 'filled',
+    color: 'primary',
+    size: 'medium',
+    disabled: false,
+    startAdornment: <Icon name="PlusLine" />,
+    rounded: true
+  }
+};
+
+export const EndAdornment: Story = {
+  args: {
+    children: 'BUTTON',
+    variant: 'filled',
+    color: 'primary',
+    size: 'medium',
+    disabled: false,
+    endAdornment: <Icon name="ChevronRightLine" />,
+    rounded: true
+  }
+};
+
+export const BothAdornment: Story = {
+  args: {
+    children: 'BUTTON',
+    variant: 'filled',
+    color: 'primary',
+    size: 'medium',
+    disabled: false,
+    startAdornment: <Icon name="PlusLine" />,
+    endAdornment: <Icon name="ChevronRightLine" />,
+    rounded: true
+  }
+};
+
+export const IconOnly: Story = {
+  args: {
+    children: 'BUTTON',
+    variant: 'filled',
+    color: 'primary',
+    size: 'medium',
+    disabled: false,
+    startAdornment: <Icon name="SearchLine" />,
+    iconOnly: true,
+    rounded: true
+  }
+};

package/components/Button/Button.styles.ts

@@ -0,0 +1,420 @@
+import type { CSSObject } from '@emotion/styled';
+import styled from '@emotion/styled';
+
+import type { ButtonProps } from './Button';
+import getContrastingTextColor from '../../utils/getContrastingTextColor/getContrastingTextColor';
+
+export const StyledButton = styled.button<
+  Pick<
+    ButtonProps,
+    | 'variant'
+    | 'size'
+    | 'color'
+    | 'fullWidth'
+    | 'rounded'
+    | 'startAdornment'
+    | 'endAdornment'
+    | 'iconOnly'
+  > & { isHoverPossible: boolean }
+>`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
+  & svg {
+    color: inherit;
+  }
+
+  ${({
+    theme: {
+      palette: { brand, grey }
+    },
+    variant,
+    color
+  }): CSSObject => {
+    let cssObject: CSSObject = {
+      backgroundColor: brand.primary.main,
+      color: getContrastingTextColor(brand.primary.main, [grey.white, grey['100']])
+    };
+
+    if (variant === 'filled' && color === 'secondary') {
+      cssObject = {
+        backgroundColor: brand.secondary,
+        color: getContrastingTextColor(brand.secondary, [grey.white, grey['100']])
+      };
+    }
+
+    if (variant === 'filled' && color === 'tertiary') {
+      cssObject = {
+        backgroundColor: brand.tertiary,
+        color: getContrastingTextColor(brand.tertiary, [grey.white, grey['100']])
+      };
+    }
+
+    if (variant === 'outlined') {
+      cssObject = {
+        borderColor: grey['50'],
+        backgroundColor: grey.white,
+        color: getContrastingTextColor(grey.white, [grey.white, grey['100']])
+      };
+    }
+
+    if (variant === 'text' && color === 'primary') {
+      cssObject = {
+        backgroundColor: 'transparent',
+        color: getContrastingTextColor('transparent', [grey.white, grey['100']])
+      };
+    }
+
+    if (variant === 'text' && color === 'secondary') {
+      cssObject = {
+        backgroundColor: 'transparent',
+        color: grey['70']
+      };
+    }
+
+    return cssObject;
+  }};
+
+  ${({
+    theme: { spacing, typography },
+    variant,
+    size,
+    startAdornment,
+    endAdornment,
+    iconOnly
+  }): CSSObject => {
+    let cssObject: CSSObject = {
+      gap: spacing.content(1),
+      padding: 10,
+      borderRadius: 8,
+      fontSize: typography.b4M.size,
+      fontWeight: typography.b4M.weight,
+      lineHeight: typography.b4M.lineHeight,
+      letterSpacing: typography.b4M.letterSpacing,
+      '& svg': {
+        width: 20,
+        height: 20
+      }
+    };
+
+    if (size === '2xLarge') {
+      const { h0B } = typography;
+      let padding = '26px 24px';
+      if (startAdornment) {
+        padding = variant === 'text' ? '26px 16px 26px 12px' : '26px 36px 26px 24px';
+      }
+      if (endAdornment) {
+        padding = variant === 'text' ? '26px 12px 26px 16px' : '26px 24px 26px 36px';
+      }
+      if (startAdornment && endAdornment) {
+        padding = variant === 'text' ? '26px 12px' : '26px 24px';
+      }
+      if (iconOnly) {
+        padding = '26px 25px';
+      }
+
+      cssObject = {
+        gap: spacing.content(3),
+        maxHeight: 100,
+        padding,
+        borderRadius: 20,
+        fontSize: h0B.size,
+        fontWeight: h0B.weight,
+        lineHeight: h0B.lineHeight,
+        letterSpacing: h0B.letterSpacing,
+        '& svg': {
+          width: 48,
+          height: 48
+        }
+      };
+    }
+
+    if (size === 'xLarge') {
+      const { h4B } = typography;
+      let padding = '16px 12px';
+      if (startAdornment) {
+        padding = variant === 'text' ? '16px 8px 16px 4px' : '16px 16px 16px 12px';
+      }
+      if (endAdornment) {
+        padding = variant === 'text' ? '16px 4px 16px 8px' : '16px 12px 16px 16px';
+      }
+      if (startAdornment && endAdornment) {
+        padding = variant === 'text' ? '16px 4px' : '16px 12px';
+      }
+      if (iconOnly) {
+        padding = '16px 15px';
+      }
+
+      cssObject = {
+        gap: spacing.content(2),
+        maxHeight: 56,
+        padding,
+        borderRadius: 12,
+        fontSize: h4B.size,
+        fontWeight: h4B.weight,
+        lineHeight: h4B.lineHeight,
+        letterSpacing: h4B.letterSpacing,
+        '& svg': {
+          width: 24,
+          height: 24
+        }
+      };
+    }
+
+    if (size === 'large') {
+      const { b2M } = typography;
+      let padding = '12px 8px';
+      if (startAdornment) {
+        padding = variant === 'text' ? '12px 8px 12px 4px' : '12px 12px 12px 8px';
+      }
+      if (endAdornment) {
+        padding = variant === 'text' ? '12px 4px 12px 8px' : '12px 8px 12px 12px';
+      }
+      if (startAdornment && endAdornment) {
+        padding = variant === 'text' ? '12px 4px' : '12px 8px';
+      }
+      if (iconOnly) {
+        padding = '12px 11px';
+      }
+
+      cssObject = {
+        gap: 6,
+        maxHeight: 48,
+        padding,
+        borderRadius: 10,
+        fontSize: b2M.size,
+        fontWeight: b2M.weight,
+        lineHeight: b2M.lineHeight,
+        letterSpacing: b2M.letterSpacing,
+        '& svg': {
+          width: 24,
+          height: 24
+        }
+      };
+    }
+
+    if (size === 'medium') {
+      const { b4M } = typography;
+      let padding = '10px 8px';
+      if (startAdornment) {
+        padding = variant === 'text' ? '10px 8px 10px 4px' : '10px 10px 10px 8px';
+      }
+      if (endAdornment) {
+        padding = variant === 'text' ? '10px 4px 10px 8px' : '10px 8px 10px 10px';
+      }
+      if (startAdornment && endAdornment) {
+        padding = variant === 'text' ? '10px 4px' : '10px 8px';
+      }
+      if (iconOnly) {
+        padding = '10px 9px';
+      }
+
+      cssObject = {
+        gap: spacing.content(1),
+        maxHeight: 40,
+        padding,
+        borderRadius: 8,
+        fontSize: b4M.size,
+        fontWeight: b4M.weight,
+        lineHeight: b4M.lineHeight,
+        letterSpacing: b4M.letterSpacing,
+        '& svg': {
+          width: 20,
+          height: 20
+        }
+      };
+    }
+
+    if (size === 'small') {
+      const { c3M } = typography;
+      let padding = '8px 6px';
+      if (startAdornment) {
+        padding = variant === 'text' ? '8px 8px 8px 4px' : '8px 8px 8px 6px';
+      }
+      if (endAdornment) {
+        padding = variant === 'text' ? '8px 4px 8px 8px' : '8px 6px 8px 8px';
+      }
+      if (startAdornment && endAdornment) {
+        padding = variant === 'text' ? '8px 6px' : '8px 4px';
+      }
+      if (iconOnly) {
+        padding = '8px 7px';
+      }
+
+      cssObject = {
+        gap: spacing.content(1),
+        maxHeight: 32,
+        padding,
+        borderRadius: 6,
+        fontSize: c3M.size,
+        fontWeight: c3M.weight,
+        lineHeight: c3M.lineHeight,
+        letterSpacing: c3M.letterSpacing,
+        '& svg': {
+          width: 16,
+          height: 16
+        }
+      };
+    }
+
+    if (size === 'xSmall') {
+      const { c3M } = typography;
+      let padding = '4px 6px';
+      if (startAdornment) {
+        padding = variant === 'text' ? '4px 8px 4px 4px' : '4px 8px 4px 6px';
+      }
+      if (endAdornment) {
+        padding = variant === 'text' ? '4px 4px 4px 8px' : '4px 6px 4px 8px';
+      }
+      if (startAdornment && endAdornment) {
+        padding = variant === 'text' ? '4px' : '4px 6px';
+      }
+      if (iconOnly) {
+        padding = '4px 3px';
+      }
+
+      if (iconOnly) {
+        cssObject = {
+          gap: spacing.content(1),
+          maxHeight: 24,
+          width: 24,
+          height: 24,
+          borderRadius: 6,
+          fontSize: c3M.size,
+          fontWeight: c3M.weight,
+          lineHeight: c3M.lineHeight,
+          letterSpacing: c3M.letterSpacing,
+          '& svg': {
+            width: 16,
+            height: 16
+          }
+        };
+      } else {
+        cssObject = {
+          gap: spacing.content(1),
+          maxHeight: 24,
+          padding,
+          borderRadius: 6,
+          fontSize: c3M.size,
+          fontWeight: c3M.weight,
+          lineHeight: c3M.lineHeight,
+          letterSpacing: c3M.letterSpacing,
+          '& svg': {
+            width: 16,
+            height: 16
+          }
+        };
+      }
+    }
+
+    if (variant === 'text' && size === 'xLarge') {
+      cssObject = {
+        ...cssObject,
+        borderWidth: 1.5
+      };
+    }
+
+    return cssObject;
+  }};
+
+  ${({ rounded }): CSSObject => {
+    if (!rounded) {
+      return {
+        borderRadius: 'unset'
+      };
+    }
+    return {};
+  }}
+
+  ${({
+    theme: {
+      palette: { brand, grey }
+    },
+    variant,
+    color,
+    isHoverPossible
+  }): CSSObject => {
+    let cssObject: CSSObject = {
+      '&:active:not([aria-disabled="true"])': { backgroundColor: brand.primary.press },
+      ...(isHoverPossible
+        ? { '&:hover:not([aria-disabled="true"])': { backgroundColor: brand.primary.press } }
+        : {})
+    };
+
+    if (variant === 'filled' && color === 'secondary') {
+      cssObject = {
+        '&:active:not([aria-disabled="true"])': { backgroundColor: grey['100'] },
+        ...(isHoverPossible
+          ? { '&:hover:not([aria-disabled="true"])': { backgroundColor: grey['100'] } }
+          : {})
+      };
+    }
+
+    if (variant === 'filled' && color === 'tertiary') {
+      cssObject = {
+        '&:active:not([aria-disabled="true"])': { backgroundColor: grey['70'] },
+        ...(isHoverPossible
+          ? { '&:hover:not([aria-disabled="true"])': { backgroundColor: grey['70'] } }
+          : {})
+      };
+    }
+
+    if (variant === 'outlined' || variant === 'text') {
+      cssObject = {
+        '&:active:not([aria-disabled="true"])': { backgroundColor: grey['10'] },
+        ...(isHoverPossible
+          ? { '&:hover:not([aria-disabled="true"])': { backgroundColor: grey['10'] } }
+          : {})
+      };
+    }
+
+    return cssObject;
+  }}
+
+  &[aria-disabled="true"] {
+    cursor: not-allowed;
+    ${({
+      theme: {
+        palette: { brand, grey }
+      },
+      variant,
+      color
+    }): CSSObject => {
+      let cssObject: CSSObject = {
+        backgroundColor: brand.primary.disable,
+        color: getContrastingTextColor(brand.primary.disable, [grey['30'], grey.white])
+      };
+
+      if (variant === 'filled' && color === 'secondary') {
+        cssObject = {
+          backgroundColor: grey['10'],
+          color: getContrastingTextColor(grey['10'], [grey['30'], grey.white])
+        };
+      }
+
+      if (variant === 'outlined') {
+        cssObject = {
+          borderColor: grey['30'],
+          backgroundColor: grey['10'],
+          color: getContrastingTextColor(grey['30'], [grey['30'], grey.white])
+        };
+      }
+
+      if (variant === 'text') {
+        cssObject = {
+          color: getContrastingTextColor(grey['30'], [grey['30'], grey.white])
+        };
+      }
+
+      return cssObject;
+    }};
+  }
+
+  ${({ fullWidth }): CSSObject | null =>
+    fullWidth
+      ? {
+          width: '100%'
+        }
+      : null};
+`;

package/components/Button/Button.test.tsx

@@ -0,0 +1,68 @@
+import { composeStories } from '@storybook/react';
+import { waitFor } from '@storybook/test';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+
+import * as stories from './Button.stories';
+
+const { Text, FullWidth, IconOnly } = composeStories(stories);
+
+describe('Button', () => {
+  const setup = async () => {
+    render(<Text>TEST</Text>);
+    const button = screen.getByRole('button');
+    const user = await userEvent.setup();
+    return { user, button };
+  };
+
+  it('버튼명을 제대로 노출한다.', async () => {
+    const { button } = await setup();
+    expect(button).toBeInTheDocument();
+  });
+
+  // TODO: toHaveStyle: 인라인스타일로 지정해준 것만 확인가능
+  // it('버튼 hover, active 시의 효과가 보여진다.', async () => {
+  //   const { button, user } = await setup();
+  //   await user.hover(button);
+  //   await waitFor(() => expect(button).toHaveAttribute('backgroundColor', 'rgb(245, 180, 0)'));
+  //
+  //   await user.click(button);
+  //   await waitFor(() => expect(button).toHaveStyle({ backgroundColor: light.palette.yellow[80] }));
+  // });
+
+  it('버튼을 클릭하면 onClick 함수가 실행된다.', async () => {
+    const spy = vi.fn();
+    const user = await userEvent.setup();
+    render(<Text onClick={spy}>TEST</Text>);
+    user.click(screen.getByRole('button'));
+    await waitFor(() => expect(spy).toBeCalledTimes(1));
+  });
+
+  it('버튼이 disabled 일 때는 선택될 수 없다.', async () => {
+    const spy = vi.fn();
+    const user = await userEvent.setup();
+    render(
+      <Text disabled onClick={spy}>
+        TEST
+      </Text>
+    );
+    user.click(screen.getByRole('button'));
+    await waitFor(() => expect(spy).not.toBeCalled());
+  });
+
+  it('fullWidth 속성이 true 이면 100%의 너비값을 갖는다.', async () => {
+    render(<FullWidth>TEST</FullWidth>);
+    const button = screen.getByRole('button');
+    expect(button).toHaveStyle({ width: '100%' });
+  });
+
+  it('iconOnly 버튼은 오로지 icon만 노출한다.', async () => {
+    render(<IconOnly>TEST</IconOnly>);
+    const button = screen.getByRole('button');
+
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveTextContent('');
+    expect(button.querySelector('svg')).toBeInTheDocument();
+  });
+});

package/components/Button/Button.tsx

@@ -0,0 +1,82 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import { forwardRef, isValidElement } from 'react';
+
+import type { IconProps } from '@components/Icon/Icon';
+import useCheckHoverPossible from '@hooks/useCheckHoverPossible/useCheckHoverPossible';
+import type { BrandColorKey } from '@typings/color';
+
+import type { GeneralComponentProps, Size, Variant } from '@typings/component';
+
+import getIconLabel from '@utils/getIconLabel/getIconLabel';
+
+import { StyledButton } from './Button.styles';
+
+export interface ButtonProps
+  extends GeneralComponentProps<ButtonHTMLAttributes<HTMLButtonElement>> {
+  variant?: Extract<Variant, 'filled' | 'outlined' | 'text'>;
+  color?: BrandColorKey;
+  size?: Size;
+  startAdornment?: ReactNode;
+  endAdornment?: ReactNode;
+  iconOnly?: boolean;
+  fullWidth?: boolean;
+  rounded?: boolean;
+}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  {
+    children,
+    variant = 'filled',
+    size = 'medium',
+    color = 'primary',
+    startAdornment,
+    endAdornment,
+    iconOnly,
+    fullWidth,
+    inlineCSS,
+    rounded = true,
+    disabled,
+    ...props
+  },
+  ref
+) {
+  const { isHoverPossible } = useCheckHoverPossible();
+
+  const getAriaLabel = () => {
+    if (!iconOnly) return undefined;
+
+    if (props['aria-label']) return props['aria-label'];
+
+    const childElement = startAdornment || endAdornment || children;
+    if (isValidElement<IconProps>(childElement)) {
+      return getIconLabel(childElement.props.name);
+    }
+
+    return undefined;
+  };
+
+  return (
+    <StyledButton
+      ref={ref}
+      variant={variant}
+      size={size}
+      color={color}
+      fullWidth={fullWidth}
+      rounded={rounded}
+      startAdornment={startAdornment}
+      endAdornment={endAdornment}
+      iconOnly={iconOnly}
+      isHoverPossible={isHoverPossible}
+      aria-disabled={disabled}
+      aria-label={getAriaLabel()}
+      {...props}
+      css={inlineCSS}
+    >
+      {startAdornment}
+      {!iconOnly && children}
+      {endAdornment}
+    </StyledButton>
+  );
+});
+
+export default Button;

package/components/Button/index.ts

@@ -0,0 +1,3 @@
+import Button from './Button';
+
+export default Button;