Merge pull request #13 from acid-info/topic-implement-card

Implement card component

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

@@ -4,6 +4,9 @@ import { AutocompleteStyles } from '../Autocomplete/Autocomplete.styles'
 import { BreadcrumbStyles } from '../Breadcrumb/Breadcrumb.styles'
 import { BreadcrumbItemStyles } from '../BreadcrumbItem/BreadcrumbItem.styles'
 import { ButtonStyles } from '../Button/Button.styles'
+import { CardStyles } from '../Card/Card.styles'
+import { CardBodyStyles } from '../CardBody/CardBody.styles'
+import { CardHeaderStyles } from '../CardHeader/CardHeader.styles'
 import { CollapseStyles } from '../Collapse/Collapse.styles'
 import { CollapseHeaderStyles } from '../CollapseHeader/CollapseHeader.styles'
 import { DropdownStyles } from '../Dropdown/Dropdown.styles'
@@ -32,6 +35,9 @@ const componentStyles: Array<ReturnType<typeof withTheme> | SerializedStyles> =
     DropdownItemStyles,
     BreadcrumbStyles,
     BreadcrumbItemStyles,
+    CardStyles,
+    CardHeaderStyles,
+    CardBodyStyles,
     TagStyles,
     TextFieldStyles,
     AutocompleteStyles,

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

@@ -0,0 +1,7 @@
+export const cardClasses = {
+  root: `lsd-card`,
+
+  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

@@ -0,0 +1,37 @@
+import { Meta, Story } from '@storybook/react'
+import { CardBody } from '../CardBody'
+import { CardHeader } from '../CardHeader'
+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 & {
+    body: string
+    title: string
+  }
+> = ({ title, body, ...args }) => (
+  <div style={{ width: 400 }}>
+    <Card {...args}>
+      <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

@@ -0,0 +1,24 @@
+import { css } from '@emotion/react'
+import { cardHeaderClasses } from '../CardHeader/CardHeader.classes'
+import { cardClasses } from './Card.classes'
+
+export const CardStyles = css`
+  .${cardClasses.root} {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .${cardClasses.root} > .${cardHeaderClasses.root} {
+    margin-bottom: -1px;
+  }
+
+  .${cardClasses.large} {
+  }
+
+  .${cardClasses.medium} {
+  }
+
+  .${cardClasses.small} {
+  }
+`

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

@@ -0,0 +1,22 @@
+import clsx from 'clsx'
+import React from 'react'
+import { cardClasses } from './Card.classes'
+import { CardContext } from './Card.context'
+
+export type CardProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'label'> & {
+  size?: 'small' | 'medium' | 'large'
+}
+
+export const Card: React.FC<CardProps> & {
+  classes: typeof cardClasses
+} = ({ size = 'large', children, ...props }) => {
+  return (
+    <CardContext.Provider value={{ size }}>
+      <div {...props} className={clsx(cardClasses.root, cardClasses[size])}>
+        {children}
+      </div>
+    </CardContext.Provider>
+  )
+}
+
+Card.classes = cardClasses

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

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

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

@@ -0,0 +1,3 @@
+export const cardBodyClasses = {
+  root: `lsd-card-body`,
+}

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 & { body: string }> = ({
+  body,
+  ...args
+}) => (
+  <div style={{ width: 400 }}>
+    <CardBody {...args}>{body}</CardBody>
+  </div>
+)
+
+Root.args = {
+  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

@@ -0,0 +1,10 @@
+import { css } from '@emotion/react'
+import { cardBodyClasses } from './CardBody.classes'
+
+export const CardBodyStyles = css`
+  .${cardBodyClasses.root} {
+    box-sizing: border-box;
+    padding: 14px 22px;
+    border: 1px solid rgb(var(--lsd-border-primary));
+  }
+`

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

@@ -0,0 +1,20 @@
+import clsx from 'clsx'
+import React from 'react'
+import { cardBodyClasses } from './CardBody.classes'
+
+export type CardBodyProps = Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  'label'
+> & {}
+
+export const CardBody: React.FC<CardBodyProps> & {
+  classes: typeof cardBodyClasses
+} = ({ children, ...props }) => {
+  return (
+    <div {...props} className={clsx(props.className, cardBodyClasses.root)}>
+      {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,8 @@
+export const cardHeaderClasses = {
+  root: `lsd-card-header`,
+  title: `lsd-card-header__title`,
+
+  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,29 @@
+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 & { 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

@@ -0,0 +1,28 @@
+import { css } from '@emotion/react'
+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

@@ -0,0 +1,40 @@
+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<
+  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],
+      )}
+    >
+      <Typography
+        className={cardHeaderClasses.title}
+        component="div"
+        variant={size === 'large' ? 'label1' : 'label2'}
+      >
+        {children}
+      </Typography>
+    </div>
+  )
+}
+
+CardHeader.classes = cardHeaderClasses

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

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

packages/lsd-react/src/index.ts

@@ -2,6 +2,9 @@ export * from './components/Autocomplete'
 export * from './components/Breadcrumb'
 export * from './components/BreadcrumbItem'
 export * from './components/Button'
+export * from './components/Card'
+export * from './components/CardBody'
+export * from './components/CardHeader'
 export * from './components/Collapse'
 export * from './components/CollapseHeader'
 export * from './components/Dropdown'