refactor: add card header and body

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

@@ -13,6 +13,8 @@ import { BreadcrumbItemStyles } from '../BreadcrumbItem/BreadcrumbItem.styles'
 import { defaultThemes, Theme, withTheme } from '../Theme'
 import { TypographyStyles } from '../Typography/Typography.styles'
 import { CardStyles } from '../Card/Card.styles'
+import { CardHeaderStyles } from '../CardHeader/CardHeader.styles'
+import { CardBodyStyles } from '../CardBody/CardBody.styles'
 
 const componentStyles: Array<ReturnType<typeof withTheme> | SerializedStyles> =
   [
@@ -28,6 +30,8 @@ const componentStyles: Array<ReturnType<typeof withTheme> | SerializedStyles> =
     BreadcrumbStyles,
     BreadcrumbItemStyles,
     CardStyles,
+    CardHeaderStyles,
+    CardBodyStyles,
   ]
 
 export const CSSBaseline: React.FC<{ theme?: Theme }> = ({

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

@@ -1,4 +1,6 @@
 import { Meta, Story } from '@storybook/react'
+import { CardBody } from '../CardBody'
+import { CardHeader } from '../CardHeader'
 import { Card, CardProps } from './Card'
 
 export default {
@@ -17,20 +19,27 @@ export default {
 export const Root: Story<CardProps> = (args) => (
   <div style={{ width: 'fit-content' }}>
     <Card {...args}>
-      <div
+      <CardHeader
         style={{
           padding: '10px 18px',
-          borderBottom: '1px solid rgb(var(--lsd-border-primary))',
+          border: '1px solid rgb(var(--lsd-border-primary))',
+          borderBottom: 'none',
           textAlign: 'center',
           fontSize: '14px',
         }}
       >
         Title
-      </div>
-      <div style={{ padding: '14px 22px', fontSize: '16px' }}>
+      </CardHeader>
+      <CardBody
+        style={{
+          padding: '14px 22px',
+          fontSize: '16px',
+          border: '1px solid rgb(var(--lsd-border-primary))',
+        }}
+      >
         A wise man can learn more from a foolish question than a fool can learn
         from a wise answer.
-      </div>
+      </CardBody>
     </Card>
   </div>
 )

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

@@ -1,5 +1,7 @@
 import clsx from 'clsx'
 import React from 'react'
+import { CardBody } from '../CardBody'
+import { CardHeader } from '../CardHeader'
 import { cardClasses } from './Card.classes'
 import { CardContext } from './Card.context'
 
@@ -9,16 +11,9 @@ export type CardProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'label'> & {
 
 export const Card: React.FC<CardProps> & {
   classes: typeof cardClasses
-} = ({ size = 'large', children, ...props }) => {
+} = ({ size = 'large', children }) => {
   return (
-    <CardContext.Provider value={{ size }}>
-      <div
-        {...props}
-        className={clsx(props.className, cardClasses.root, cardClasses[size])}
-      >
-        {children}
-      </div>
-    </CardContext.Provider>
+    <CardContext.Provider value={{ size }}>{children}</CardContext.Provider>
   )
 }
 

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

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

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

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

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

@@ -0,0 +1,14 @@
+import { css } from '@emotion/react'
+import { cardBodyClasses } from './CardBody.classes'
+
+export const CardBodyStyles = css`
+  .${cardBodyClasses.root} {
+    box-sizing: border-box;
+  }
+  .${cardBodyClasses.large} {
+  }
+  .${cardBodyClasses.medium} {
+  }
+  .${cardBodyClasses.small} {
+  }
+`

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

@@ -0,0 +1,32 @@
+import clsx from 'clsx'
+import React from 'react'
+import { useCardContext } from '../Card/Card.context'
+import { cardBodyClasses } from './CardBody.classes'
+
+export type CardBodyProps = Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  'label'
+> & {
+  size?: 'small' | 'medium' | 'large'
+}
+
+export const CardBody: React.FC<CardBodyProps> & {
+  classes: typeof cardBodyClasses
+} = ({ size: _size = 'large', children, ...props }) => {
+  const sizeContext = useCardContext()
+  const size = sizeContext?.size ?? _size
+  return (
+    <div
+      {...props}
+      className={clsx(
+        props.className,
+        cardBodyClasses.root,
+        cardBodyClasses[size],
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+CardBody.classes = cardBodyClasses

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

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

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

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

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

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

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

@@ -0,0 +1,14 @@
+import { css } from '@emotion/react'
+import { cardHeaderClasses } from './CardHeader.classes'
+
+export const CardHeaderStyles = css`
+  .${cardHeaderClasses.root} {
+    box-sizing: border-box;
+  }
+  .${cardHeaderClasses.large} {
+  }
+  .${cardHeaderClasses.medium} {
+  }
+  .${cardHeaderClasses.small} {
+  }
+`

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

@@ -0,0 +1,32 @@
+import clsx from 'clsx'
+import React from 'react'
+import { useCardContext } from '../Card/Card.context'
+import { cardHeaderClasses } from './CardHeader.classes'
+
+export type CardHeaderProps = Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  'label'
+> & {
+  size?: 'small' | 'medium' | 'large'
+}
+
+export const CardHeader: React.FC<CardHeaderProps> & {
+  classes: typeof cardHeaderClasses
+} = ({ size: _size = 'large', children, ...props }) => {
+  const sizeContext = useCardContext()
+  const size = sizeContext?.size ?? _size
+  return (
+    <div
+      {...props}
+      className={clsx(
+        props.className,
+        cardHeaderClasses.root,
+        cardHeaderClasses[size],
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+CardHeader.classes = cardHeaderClasses

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

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

packages/lsd-react/src/index.ts

@@ -10,3 +10,5 @@ export * from './components/Theme'
 export * from './components/Breadcrumb'
 export * from './components/BreadcrumbItem'
 export * from './components/Card'
+export * from './components/CardHeader'
+export * from './components/CardBody'