fix: fix Card component styles

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

@@ -1,6 +1,5 @@
 export const cardClasses = {
   root: `lsd-card`,
-  body: `lsd-card-body`,
 
   small: 'lsd-card--small',
   medium: 'lsd-card--medium',

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

@@ -16,34 +16,22 @@ export default {
   },
 } as Meta
 
-export const Root: Story<CardProps> = (args) => (
-  <div style={{ width: 'fit-content' }}>
+export const Root: Story<
+  CardProps & {
+    body: string
+    title: string
+  }
+> = ({ title, body, ...args }) => (
+  <div style={{ width: 400 }}>
     <Card {...args}>
-      <CardHeader
-        style={{
-          padding: '10px 18px',
-          border: '1px solid rgb(var(--lsd-border-primary))',
-          borderBottom: 'none',
-          textAlign: 'center',
-          fontSize: '14px',
-        }}
-      >
-        Title
-      </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.
-      </CardBody>
+      <CardHeader>{title}</CardHeader>
+      <CardBody>{body}</CardBody>
     </Card>
   </div>
 )
 
 Root.args = {
   size: 'large',
+  title: 'Title',
+  body: 'A wise man can learn more from a foolish question than a fool can learn from a wise answer.',
 }

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

@@ -1,16 +1,16 @@
 import { css } from '@emotion/react'
+import { cardHeaderClasses } from '../CardHeader/CardHeader.classes'
 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;
     box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
   }
 
-  .${cardClasses.body} {
+  .${cardClasses.root} > .${cardHeaderClasses.root} {
+    margin-bottom: -1px;
   }
 
   .${cardClasses.large} {

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

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

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

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

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

@@ -14,15 +14,15 @@ export default {
   },
 } 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>
+export const Root: Story<CardBodyProps & { body: string }> = ({
+  body,
+  ...args
+}) => (
+  <div style={{ width: 400 }}>
+    <CardBody {...args}>{body}</CardBody>
   </div>
 )
 
 Root.args = {
-  size: 'large',
+  body: 'A wise man can learn more from a foolish question than a fool can learn from a wise answer.',
 }

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

@@ -4,11 +4,7 @@ import { cardBodyClasses } from './CardBody.classes'
 export const CardBodyStyles = css`
   .${cardBodyClasses.root} {
     box-sizing: border-box;
-  }
-  .${cardBodyClasses.large} {
-  }
-  .${cardBodyClasses.medium} {
-  }
-  .${cardBodyClasses.small} {
+    padding: 14px 22px;
+    border: 1px solid rgb(var(--lsd-border-primary));
   }
 `

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

@@ -1,29 +1,17 @@
 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
+} = ({ children, ...props }) => {
   return (
-    <div
-      {...props}
-      className={clsx(
-        props.className,
-        cardBodyClasses.root,
-        cardBodyClasses[size],
-      )}
-    >
+    <div {...props} className={clsx(props.className, cardBodyClasses.root)}>
       {children}
     </div>
   )

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

@@ -1,5 +1,6 @@
 export const cardHeaderClasses = {
   root: `lsd-card-header`,
+  title: `lsd-card-header__title`,
 
   small: `lsd-card-header--small`,
   medium: `lsd-card-header--medium`,

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

@@ -14,12 +14,16 @@ export default {
   },
 } as Meta
 
-export const Root: Story<CardHeaderProps> = (args) => (
-  <div style={{ width: 'fit-content' }}>
-    <CardHeader {...args}>Title</CardHeader>
+export const Root: Story<CardHeaderProps & { title: string }> = ({
+  title,
+  ...args
+}) => (
+  <div style={{ width: 400 }}>
+    <CardHeader {...args}>{title}</CardHeader>
   </div>
 )
 
 Root.args = {
   size: 'large',
+  title: 'Title',
 }

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

@@ -4,11 +4,25 @@ import { cardHeaderClasses } from './CardHeader.classes'
 export const CardHeaderStyles = css`
   .${cardHeaderClasses.root} {
     box-sizing: border-box;
+    padding: 10px 18px;
+    text-align: center;
+    border: 1px solid rgb(var(--lsd-border-primary));
   }
+
+  .${cardHeaderClasses.title} {
+    overflow: hidden;
+    word-break: break-all;
+  }
+
   .${cardHeaderClasses.large} {
+    padding: 10px 18px;
   }
+
   .${cardHeaderClasses.medium} {
+    padding: 6px 14px;
   }
+
   .${cardHeaderClasses.small} {
+    padding: 6px 12px;
   }
 `

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

@@ -1,6 +1,7 @@
 import clsx from 'clsx'
 import React from 'react'
 import { useCardContext } from '../Card/Card.context'
+import { Typography } from '../Typography'
 import { cardHeaderClasses } from './CardHeader.classes'
 
 export type CardHeaderProps = Omit<
@@ -15,6 +16,7 @@ export const CardHeader: React.FC<CardHeaderProps> & {
 } = ({ size: _size = 'large', children, ...props }) => {
   const sizeContext = useCardContext()
   const size = sizeContext?.size ?? _size
+
   return (
     <div
       {...props}
@@ -24,7 +26,13 @@ export const CardHeader: React.FC<CardHeaderProps> & {
         cardHeaderClasses[size],
       )}
     >
-      {children}
+      <Typography
+        className={cardHeaderClasses.title}
+        component="div"
+        variant={size === 'large' ? 'label1' : 'label2'}
+      >
+        {children}
+      </Typography>
     </div>
   )
 }