From a884a056ede49d8459685d2e173c38aba930d291 Mon Sep 17 00:00:00 2001
From: Hossein Mehrabi <ohyeaross@gmail.com>
Date: Thu, 23 Feb 2023 20:10:01 +0330
Subject: [PATCH] fix: fix Card component styles

---
 .../src/components/Card/Card.classes.ts       |  1 -
 .../src/components/Card/Card.stories.tsx      | 34 ++++++-------------
 .../src/components/Card/Card.styles.ts        | 10 +++---
 .../lsd-react/src/components/Card/Card.tsx    | 10 +++---
 .../components/CardBody/CardBody.classes.ts   |  6 +---
 .../components/CardBody/CardBody.stories.tsx  | 14 ++++----
 .../components/CardBody/CardBody.styles.ts    |  8 ++---
 .../src/components/CardBody/CardBody.tsx      | 18 ++--------
 .../CardHeader/CardHeader.classes.ts          |  1 +
 .../CardHeader/CardHeader.stories.tsx         | 10 ++++--
 .../CardHeader/CardHeader.styles.ts           | 14 ++++++++
 .../src/components/CardHeader/CardHeader.tsx  | 10 +++++-
 12 files changed, 66 insertions(+), 70 deletions(-)

diff --git a/packages/lsd-react/src/components/Card/Card.classes.ts b/packages/lsd-react/src/components/Card/Card.classes.ts
index 84121cb..a29dadb 100644
--- a/packages/lsd-react/src/components/Card/Card.classes.ts
+++ b/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',
diff --git a/packages/lsd-react/src/components/Card/Card.stories.tsx b/packages/lsd-react/src/components/Card/Card.stories.tsx
index 43bdeac..af381c9 100644
--- a/packages/lsd-react/src/components/Card/Card.stories.tsx
+++ b/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.',
 }
diff --git a/packages/lsd-react/src/components/Card/Card.styles.ts b/packages/lsd-react/src/components/Card/Card.styles.ts
index 05bc3b5..ecdd610 100644
--- a/packages/lsd-react/src/components/Card/Card.styles.ts
+++ b/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} {
diff --git a/packages/lsd-react/src/components/Card/Card.tsx b/packages/lsd-react/src/components/Card/Card.tsx
index 3f4ca34..c09660c 100644
--- a/packages/lsd-react/src/components/Card/Card.tsx
+++ b/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>
   )
 }
 
diff --git a/packages/lsd-react/src/components/CardBody/CardBody.classes.ts b/packages/lsd-react/src/components/CardBody/CardBody.classes.ts
index 769f34b..3260adc 100644
--- a/packages/lsd-react/src/components/CardBody/CardBody.classes.ts
+++ b/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`,
 }
diff --git a/packages/lsd-react/src/components/CardBody/CardBody.stories.tsx b/packages/lsd-react/src/components/CardBody/CardBody.stories.tsx
index 8bb28f1..bc4d507 100644
--- a/packages/lsd-react/src/components/CardBody/CardBody.stories.tsx
+++ b/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.',
 }
diff --git a/packages/lsd-react/src/components/CardBody/CardBody.styles.ts b/packages/lsd-react/src/components/CardBody/CardBody.styles.ts
index 588d36d..1797bb8 100644
--- a/packages/lsd-react/src/components/CardBody/CardBody.styles.ts
+++ b/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));
   }
 `
diff --git a/packages/lsd-react/src/components/CardBody/CardBody.tsx b/packages/lsd-react/src/components/CardBody/CardBody.tsx
index b1f688b..a81bb16 100644
--- a/packages/lsd-react/src/components/CardBody/CardBody.tsx
+++ b/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>
   )
diff --git a/packages/lsd-react/src/components/CardHeader/CardHeader.classes.ts b/packages/lsd-react/src/components/CardHeader/CardHeader.classes.ts
index 8d0d7d1..5a72363 100644
--- a/packages/lsd-react/src/components/CardHeader/CardHeader.classes.ts
+++ b/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`,
diff --git a/packages/lsd-react/src/components/CardHeader/CardHeader.stories.tsx b/packages/lsd-react/src/components/CardHeader/CardHeader.stories.tsx
index bf379d2..cec8717 100644
--- a/packages/lsd-react/src/components/CardHeader/CardHeader.stories.tsx
+++ b/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',
 }
diff --git a/packages/lsd-react/src/components/CardHeader/CardHeader.styles.ts b/packages/lsd-react/src/components/CardHeader/CardHeader.styles.ts
index da64300..64bf783 100644
--- a/packages/lsd-react/src/components/CardHeader/CardHeader.styles.ts
+++ b/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;
   }
 `
diff --git a/packages/lsd-react/src/components/CardHeader/CardHeader.tsx b/packages/lsd-react/src/components/CardHeader/CardHeader.tsx
index b35c70f..8899787 100644
--- a/packages/lsd-react/src/components/CardHeader/CardHeader.tsx
+++ b/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>
   )
 }