refactor: pass down childeren for card component

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

@@ -13,7 +13,6 @@ 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'
 
 const componentStyles: Array<ReturnType<typeof withTheme> | SerializedStyles> =
   [
@@ -28,7 +27,6 @@ const componentStyles: Array<ReturnType<typeof withTheme> | SerializedStyles> =
     IconTagStyles,
     BreadcrumbStyles,
     BreadcrumbItemStyles,
-    CardHeaderStyles,
     CardStyles,
   ]
 

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

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

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

@@ -0,0 +1,10 @@
+import React from 'react'
+import { CardProps } from './Card'
+
+export type CardContextType = {
+  size?: CardProps['size']
+}
+
+export const CardContext = React.createContext<CardContextType>(null as any)
+
+export const useCardContext = () => React.useContext(CardContext)

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

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

@@ -7,26 +7,18 @@ export const CardStyles = css`
     background: none;
     border: 1px solid rgb(var(--lsd-border-primary));
     word-break: keep-all;
-    padding: 8px 16px;
     box-sizing: border-box;
   }
 
+  .${cardClasses.body} {
+  }
+
   .${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

@@ -1,41 +1,24 @@
 import clsx from 'clsx'
 import React from 'react'
-import { CardHeader } from '../CardHeader'
-import { Typography } from '../Typography'
 import { cardClasses } from './Card.classes'
+import { CardContext } from './Card.context'
 
 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 }) => {
+} = ({ size = 'large', children, ...props }) => {
   return (
-    <div>
+    <CardContext.Provider value={{ size }}>
-      {withHeader && <CardHeader label={label} size={size} />}
       <div
-        className={clsx(
-          props.className,
-          cardClasses.root,
-          cardClasses[size],
-          withHeader && cardClasses.withHeader,
-        )}
         {...props}
+        className={clsx(props.className, cardClasses.root, cardClasses[size])}
       >
-        <Typography
+        {children}
-          color="primary"
-          component="label"
-          variant={size === 'small' ? 'label2' : 'label1'}
-          className={clsx(cardClasses.text)}
-        >
-          {text}
-        </Typography>
       </div>
-    </div>
+    </CardContext.Provider>
   )
 }
 

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

@@ -1,7 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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}></CardHeader>
-  </div>
-)
-
-Root.args = {
-  size: 'large',
-  label: 'Title',
-}

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

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

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

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

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

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

packages/lsd-react/src/index.ts

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