Box

Box는 디자인시스템 테마 객체에 접근할 수 있는 컴포넌트입니다.

Introduce

sx prop을 이용하여 emotion과 같은 DX를 누릴 수 있어요.
모든 디자인시스템 컴포넌트는 Box를 기반으로 설계되었기 때문에 sx prop을 사용할 수 있어요.
emotion에서 제공하는 css, keyframes, ClassNames 모두 사용할 수 있어요.

import { Box } from '@wanteddev/wds';

const Demo = () => {
  return (
    <Box
      sx={theme => ({
        backgroundColor: theme.semantic.background.elevated.alternative, width: '50px', height: '50px'
      })}
    />
  );
}

export default Demo;

With css function

import { Box, css, FlexBox } from '@wanteddev/wds';

const widthStyle = css`
width: 50px;
height: 50px;
`;

const Demo = () => {
return (
  <FlexBox>
    <Box sx={css`
      background-color: black;
      ${widthStyle}
    `}
    />
    <Box
      sx={theme => ({
        backgroundColor: theme.semantic.background.elevated.alternative, width: '50px', height: '50px'
      })}
    />
    <Box sx={theme => css`
      background-color: ${theme.semantic.primary.normal};
      width: 50px;
      height: 50px;
    `}
    />
    <Box sx={[
      theme => css`
        background-color: ${theme.semantic.label.normal};
      `,
      {
        width: '50px',
        height: '50px',
      }
    ]}
    />
  </FlexBox>
);
}

export default Demo;

With keyframes function

import { Box, css, keyframes } from '@wanteddev/wds';

const bounce = keyframes`
from, 20%, 53%, 80%, to {
  transform: translate3d(0,0,0);
}

40%, 43% {
  transform: translate3d(0, -30px, 0);
}

70% {
  transform: translate3d(0, -15px, 0);
}

90% {
  transform: translate3d(0,-4px,0);
}
`;

const Demo = () => {
return <Box sx={css`
  background-color: black;
  animation: ${bounce} 1s ease infinite;
  width: 50px;
  height: 50px;
`}
/>
}

export default Demo;

ClassNames

Emotion 의 문서를 참고해주세요.

API

HTMLDivElement 의 모든 옵션을 사용할 수 있으며 as 옵션을 통해 Link, section 등 다른 컴포넌트/태그로 활용할 수 있습니다.