feat: implement card component

packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx

@@ -12,6 +12,8 @@ import { BreadcrumbStyles } from '../Breadcrumb/Breadcrumb.styles'
 import { BreadcrumbItemStyles } from '../BreadcrumbItem/BreadcrumbItem.styles'
 import { defaultThemes, Theme, withTheme } from '../Theme'
 import { TypographyStyles } from '../Typography/Typography.styles'
+import { CardItemStyles } from '../CardItem/Cardtem.styles'
+import { CardStyles } from '../Card/Card.styles'
 
 const componentStyles: Array<ReturnType<typeof withTheme> | SerializedStyles> =
   [
@@ -26,6 +28,8 @@ const componentStyles: Array<ReturnType<typeof withTheme> | SerializedStyles> =
     IconTagStyles,
     BreadcrumbStyles,
     BreadcrumbItemStyles,
+    CardItemStyles,
+    CardStyles,
   ]
 
 export const CSSBaseline: React.FC<{ theme?: Theme }> = ({

packages/lsd-react/src/components/Card/Card.classes.ts

@@ -0,0 +1,9 @@
+export const cardClasses = {
+  root: `lsd-card`,
+  text: `lsd-card__text`,
+
+  withHeader: 'lsd-card--with-header',
+  small: 'lsd-card--small',
+  medium: 'lsd-card--medium',
+  large: 'lsd-card--large',
+}

packages/lsd-react/src/components/Card/Card.stories.tsx

@@ -0,0 +1,28 @@
+import { Meta, Story } from '@storybook/react'
+import { Card, CardProps } from './Card'
+
+export default {
+  title: 'Card',
+  component: Card,
+  argTypes: {
+    size: {
+      type: {
+        name: 'enum',
+        value: ['small', 'medium', 'large'],
+      },
+    },
+  },
+} as Meta
+
+export const Root: Story<CardProps> = (args) => (
+  <div style={{ width: 'fit-content' }}>
+    <Card {...args}></Card>
+  </div>
+)
+
+Root.args = {
+  size: 'large',
+  label: 'Title',
+  text: 'A wise man can learn more from a foolish question than a fool can learn from a wise answer.',
+  withHeader: false,
+}

packages/lsd-react/src/components/Card/Card.styles.ts

@@ -0,0 +1,32 @@
+import { css } from '@emotion/react'
+import { cardClasses } from './Card.classes'
+
+export const CardStyles = css`
+  .${cardClasses.root} {
+    color: rgb(var(--lsd-text-primary));
+    background: none;
+    border: 1px solid rgb(var(--lsd-border-primary));
+    word-break: keep-all;
+    padding: 8px 16px;
+    box-sizing: border-box;
+  }
+
+  .${cardClasses.large} {
+    width: 600px;
+    padding: 10px 18px;
+  }
+
+  .${cardClasses.medium} {
+    width: 540px;
+    padding: 6px 14px;
+  }
+
+  .${cardClasses.small} {
+    width: 480px;
+    padding: 6px 12px;
+  }
+
+  .${cardClasses.withHeader} {
+    border-top: 1px solid transparent;
+  }
+`

packages/lsd-react/src/components/Card/Card.tsx

@@ -0,0 +1,42 @@
+import clsx from 'clsx'
+import React from 'react'
+import { CardItem } from '../CardItem'
+import { Typography } from '../Typography'
+import { cardClasses } from './Card.classes'
+
+export type CardProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'label'> & {
+  size?: 'small' | 'medium' | 'large'
+  label?: string
+  text: string
+  withHeader?: boolean
+}
+
+export const Card: React.FC<CardProps> & {
+  classes: typeof cardClasses
+} = ({ label = '', size = 'large', text, withHeader = false, ...props }) => {
+  return (
+    <>
+      {withHeader && <CardItem label={label} size={size} />}
+      <div
+        {...props}
+        className={clsx(
+          props.className,
+          cardClasses.root,
+          cardClasses[size],
+          withHeader && cardClasses.withHeader,
+        )}
+      >
+        <Typography
+          color="primary"
+          component="label"
+          variant={size === 'small' ? 'label2' : 'label1'}
+          className={cardClasses.text}
+        >
+          {text}
+        </Typography>
+      </div>
+    </>
+  )
+}
+
+Card.classes = cardClasses

packages/lsd-react/src/components/Card/index.ts

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

packages/lsd-react/src/components/CardItem/Cardtem.classes.ts

@@ -0,0 +1,7 @@
+export const cardItemClasses = {
+  root: `lsd-card-item`,
+
+  small: `lsd-card-item--small`,
+  medium: `lsd-card-item--medium`,
+  large: `lsd-card-item--large`,
+}

packages/lsd-react/src/components/CardItem/Cardtem.stories.tsx

@@ -0,0 +1,26 @@
+import { Meta, Story } from '@storybook/react'
+import { CardItem, CardItemProps } from './Cardtem'
+
+export default {
+  title: 'CardItem',
+  component: CardItem,
+  argTypes: {
+    size: {
+      type: {
+        name: 'enum',
+        value: ['small', 'medium', 'large'],
+      },
+    },
+  },
+} as Meta
+
+export const Root: Story<CardItemProps> = (args) => (
+  <div style={{ width: 'fit-content' }}>
+    <CardItem {...args}></CardItem>
+  </div>
+)
+
+Root.args = {
+  size: 'large',
+  label: 'Title',
+}

packages/lsd-react/src/components/CardItem/Cardtem.styles.ts

@@ -0,0 +1,30 @@
+import { css } from '@emotion/react'
+import { cardItemClasses } from './Cardtem.classes'
+
+export const CardItemStyles = css`
+  .${cardItemClasses.root} {
+    box-sizing: border-box;
+    border: 1px solid rgb(var(--lsd-border-primary));
+    text-align: center;
+    display: flex;
+    justify-content: center;
+  }
+
+  .${cardItemClasses.large} {
+    width: 600px;
+    min-height: 40px;
+    padding: 10px 18px;
+  }
+
+  .${cardItemClasses.medium} {
+    width: 540px;
+    min-height: 32px;
+    padding: 6px 14px;
+  }
+
+  .${cardItemClasses.small} {
+    width: 480px;
+    min-height: 28px;
+    padding: 6px 12px;
+  }
+`

packages/lsd-react/src/components/CardItem/Cardtem.tsx

@@ -0,0 +1,37 @@
+import clsx from 'clsx'
+import React from 'react'
+import { Typography } from '../Typography'
+import { cardItemClasses } from './Cardtem.classes'
+
+export type CardItemProps = Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  'label'
+> & {
+  label: string
+  size?: 'small' | 'medium' | 'large'
+}
+
+export const CardItem: React.FC<CardItemProps> & {
+  classes: typeof cardItemClasses
+} = ({ label, size = 'large', ...props }) => {
+  return (
+    <div
+      {...props}
+      className={clsx(
+        props.className,
+        cardItemClasses.root,
+        cardItemClasses[size],
+      )}
+    >
+      <Typography
+        color="primary"
+        component="label"
+        variant={size === 'small' ? 'label2' : 'label1'}
+      >
+        {label}
+      </Typography>
+    </div>
+  )
+}
+
+CardItem.classes = cardItemClasses

packages/lsd-react/src/components/CardItem/index.ts

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