From afb665cfb8d5f837f2e545b1b94c8157cf99ac3e Mon Sep 17 00:00:00 2001 From: evan-moon Date: Fri, 5 Feb 2021 15:23:34 +0900 Subject: [PATCH 1/3] =?UTF-8?q?feat(ui-kit):=20=EC=B9=B4=EB=93=9C=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc.js | 1 + ui-kit/src/components/Card/CardContent.tsx | 12 +++ ui-kit/src/components/Card/CardFooter.tsx | 22 +++++ ui-kit/src/components/Card/CardHeader.tsx | 16 ++++ .../src/components/Card/CardImageContent.tsx | 20 ++++ ui-kit/src/components/Card/index.tsx | 17 ++++ ui-kit/src/components/index.ts | 1 + ui-kit/src/sass/components/_Card.scss | 40 ++++++++ ui-kit/src/sass/components/_index.scss | 1 + ui-kit/src/sass/utils/_colors.scss | 26 +++-- ui-kit/src/stories/Card.stories.tsx | 94 +++++++++++++++++++ 11 files changed, 236 insertions(+), 14 deletions(-) create mode 100644 ui-kit/src/components/Card/CardContent.tsx create mode 100644 ui-kit/src/components/Card/CardFooter.tsx create mode 100644 ui-kit/src/components/Card/CardHeader.tsx create mode 100644 ui-kit/src/components/Card/CardImageContent.tsx create mode 100644 ui-kit/src/components/Card/index.tsx create mode 100644 ui-kit/src/sass/components/_Card.scss create mode 100644 ui-kit/src/stories/Card.stories.tsx diff --git a/.eslintrc.js b/.eslintrc.js index dccaea42..6a2ea0f3 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -22,5 +22,6 @@ module.exports = { rules: { '@typescript-eslint/explicit-module-boundary-types': 'off', '@typescript-eslint/no-empty-function': 'off', + 'react/prop-types': 'off', }, }; diff --git a/ui-kit/src/components/Card/CardContent.tsx b/ui-kit/src/components/Card/CardContent.tsx new file mode 100644 index 00000000..ee6c5d44 --- /dev/null +++ b/ui-kit/src/components/Card/CardContent.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { ReactNode } from 'react'; +import classnames from 'classnames'; + +interface CardContentProps { + children?: ReactNode; +} +const CardContent = ({ children }: CardContentProps) => { + return
{children}
; +}; + +export default CardContent; diff --git a/ui-kit/src/components/Card/CardFooter.tsx b/ui-kit/src/components/Card/CardFooter.tsx new file mode 100644 index 00000000..811c1b58 --- /dev/null +++ b/ui-kit/src/components/Card/CardFooter.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { ReactNode } from 'react'; +import classnames from 'classnames'; + +interface CardFooterProps { + children?: ReactNode; + justifyContent?: 'flex-start' | 'center' | 'flex-end'; +} +const CardFooter = ({ children, justifyContent = 'flex-start' }: CardFooterProps) => { + return ( +
+ {children} +
+ ); +}; + +export default CardFooter; diff --git a/ui-kit/src/components/Card/CardHeader.tsx b/ui-kit/src/components/Card/CardHeader.tsx new file mode 100644 index 00000000..1c63a100 --- /dev/null +++ b/ui-kit/src/components/Card/CardHeader.tsx @@ -0,0 +1,16 @@ +import React, { ReactNode, isValidElement } from 'react'; +import classnames from 'classnames'; +import Text from '../Text'; + +interface CardHeaderProps { + children?: ReactNode; +} +const CardHeader = ({ children }: CardHeaderProps) => { + return ( +
+ {isValidElement(children) ? children : {children}} +
+ ); +}; + +export default CardHeader; diff --git a/ui-kit/src/components/Card/CardImageContent.tsx b/ui-kit/src/components/Card/CardImageContent.tsx new file mode 100644 index 00000000..e276dd89 --- /dev/null +++ b/ui-kit/src/components/Card/CardImageContent.tsx @@ -0,0 +1,20 @@ +import React, { HTMLAttributes } from 'react'; +import classnames from 'classnames'; +import { Combine } from 'src/types/utils'; + +type CardImageContentProps = Combine< + HTMLAttributes, + { + src: string; + alt: string; + } +>; +const CardImageContent = ({ className, ...props }: CardImageContentProps) => { + return ( +
+ +
+ ); +}; + +export default CardImageContent; diff --git a/ui-kit/src/components/Card/index.tsx b/ui-kit/src/components/Card/index.tsx new file mode 100644 index 00000000..02ad79c1 --- /dev/null +++ b/ui-kit/src/components/Card/index.tsx @@ -0,0 +1,17 @@ +import React, { forwardRef } from 'react'; +import { ReactNode } from 'react'; +import classnames from 'classnames'; + +interface Props { + children: ReactNode; +} + +const Card = forwardRef(function Card({ children }, ref) { + return ( +
+ {children} +
+ ); +}); + +export default Card; diff --git a/ui-kit/src/components/index.ts b/ui-kit/src/components/index.ts index 1a0a0df9..c4a494a3 100644 --- a/ui-kit/src/components/index.ts +++ b/ui-kit/src/components/index.ts @@ -9,3 +9,4 @@ export { default as LubyconUIKitProvider } from './LubyconUIKitProvider'; export { default as Toast } from './Toast'; export { default as Tooltip } from './Tooltip'; export { Tabs, TabPane } from './Tabs'; +export { default as Card } from './Card'; diff --git a/ui-kit/src/sass/components/_Card.scss b/ui-kit/src/sass/components/_Card.scss new file mode 100644 index 00000000..fd35c694 --- /dev/null +++ b/ui-kit/src/sass/components/_Card.scss @@ -0,0 +1,40 @@ +$card-padding: 16px 20px; +$default-radius: 4px; + +.lubycon-card { + display: flex; + flex-direction: column; + border-radius: $default-radius; + overflow: hidden; + background-color: get-color('white'); + &__header { + order: 0; + padding: $card-padding; + border-bottom: 1px solid get-color('gray30'); + overflow: hidden; + } + &__content { + order: 1; + padding: $card-padding; + } + &__image-content { + img { + width: 100%; + vertical-align: top; + } + } + &__footer { + display: flex; + order: 2; + padding: $card-padding; + &--align-flex-start { + justify-content: flex-start; + } + &--align-center { + justify-content: center; + } + &--align-flex-end { + justify-content: flex-end; + } + } +} diff --git a/ui-kit/src/sass/components/_index.scss b/ui-kit/src/sass/components/_index.scss index 4345877a..3811b0fc 100644 --- a/ui-kit/src/sass/components/_index.scss +++ b/ui-kit/src/sass/components/_index.scss @@ -10,3 +10,4 @@ @import './Toast'; @import './Tooltip'; @import './Tabs'; +@import './Card'; diff --git a/ui-kit/src/sass/utils/_colors.scss b/ui-kit/src/sass/utils/_colors.scss index b80eba8f..5ba2db62 100644 --- a/ui-kit/src/sass/utils/_colors.scss +++ b/ui-kit/src/sass/utils/_colors.scss @@ -1,23 +1,18 @@ $colors: ( - /* - Semantic Color - Positive - */ 'green50': #13bc4c, + // Positive + 'green50': #13bc4c, 'green40': #78cf81, 'green60': #0f933c, - /* - Informative - */ 'blue50': #135ce9, + // Informative + 'blue50': #135ce9, 'blue40': #87adf5, 'blue60': #013cad, - /* - Negative - */ 'red50': #cb121c, + // Negative + 'red50': #cb121c, 'red40': #f29ca1, 'red60': #9b0b13, - /* - Notice - */ 'yellow50': #f0cb08, + // Notice + 'yellow50': #f0cb08, 'yellow40': #f9e681, 'yellow60': #aa8f00, /* @@ -32,7 +27,10 @@ $colors: ( 'gray40': #d0d1d3, 'gray30': #e3e4e5, 'gray20': #f3f4f5, - 'gray10': #fcfcfd + 'gray10': #fcfcfd, + // Mono Tone + 'white': #ffffff, + 'black': #000000 ); @mixin color($name, $value) { diff --git a/ui-kit/src/stories/Card.stories.tsx b/ui-kit/src/stories/Card.stories.tsx new file mode 100644 index 00000000..0d636bee --- /dev/null +++ b/ui-kit/src/stories/Card.stories.tsx @@ -0,0 +1,94 @@ +import React from 'react'; +import Card from 'components/Card'; +import { Meta } from '@storybook/react/types-6-0'; +import CardHeader from 'components/Card/CardHeader'; +import CardContent from 'components/Card/CardContent'; +import CardImageContent from 'components/Card/CardImageContent'; +import CardFooter from 'components/Card/CardFooter'; +import Text from 'components/Text'; +import Icon from 'components/Icon'; +import { colors } from 'constants/colors'; +import { arrowForward } from 'ionicons/icons'; +import { Button, Column, Row } from 'src/components'; + +export default { + title: 'Lubycon UI Kit/Card', +} as Meta; + +export const Default = () => { + return ( +
+ + 제목 + + + 내용을 입력하세요. +
+ 내용을 입력하세요. +
+ 내용을 입력하세요. +
+ 내용을 입력하세요. + + + + + + 더보기 + + + + + +
+ ); +}; + +export const ImageCard = () => { + return ( + + + + 제목 + + + + + 더보기 + + + + + + + + + 춤추는 에비츄 + + + + + + + + + 장보는 에비츄 + + + + + ); +}; From 592257531a6544c1219906b7b7187918176b9f5d Mon Sep 17 00:00:00 2001 From: evan-moon Date: Fri, 5 Feb 2021 15:28:51 +0900 Subject: [PATCH 2/3] =?UTF-8?q?feat(ui-kit):=20=EB=AA=A8=EB=93=88=20?= =?UTF-8?q?=EA=B4=80=EA=B3=84=20=EC=9E=AC=EC=A0=95=EC=9D=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui-kit/src/components/Card/index.tsx | 4 ++++ ui-kit/src/components/index.ts | 2 +- ui-kit/src/stories/Card.stories.tsx | 20 ++++++++++++-------- 3 files changed, 17 insertions(+), 9 deletions(-) diff --git a/ui-kit/src/components/Card/index.tsx b/ui-kit/src/components/Card/index.tsx index 02ad79c1..e3f1b860 100644 --- a/ui-kit/src/components/Card/index.tsx +++ b/ui-kit/src/components/Card/index.tsx @@ -15,3 +15,7 @@ const Card = forwardRef(function Card({ children }, ref) }); export default Card; +export { default as CardHeader } from './CardHeader'; +export { default as CardContent } from './CardContent'; +export { default as CardImageContent } from './CardImageContent'; +export { default as CardFooter } from './CardFooter'; diff --git a/ui-kit/src/components/index.ts b/ui-kit/src/components/index.ts index c4a494a3..6fce583b 100644 --- a/ui-kit/src/components/index.ts +++ b/ui-kit/src/components/index.ts @@ -9,4 +9,4 @@ export { default as LubyconUIKitProvider } from './LubyconUIKitProvider'; export { default as Toast } from './Toast'; export { default as Tooltip } from './Tooltip'; export { Tabs, TabPane } from './Tabs'; -export { default as Card } from './Card'; +export { default as Card, CardHeader, CardContent, CardImageContent, CardFooter } from './Card'; diff --git a/ui-kit/src/stories/Card.stories.tsx b/ui-kit/src/stories/Card.stories.tsx index 0d636bee..6dda630c 100644 --- a/ui-kit/src/stories/Card.stories.tsx +++ b/ui-kit/src/stories/Card.stories.tsx @@ -1,15 +1,19 @@ import React from 'react'; -import Card from 'components/Card'; -import { Meta } from '@storybook/react/types-6-0'; -import CardHeader from 'components/Card/CardHeader'; -import CardContent from 'components/Card/CardContent'; -import CardImageContent from 'components/Card/CardImageContent'; -import CardFooter from 'components/Card/CardFooter'; -import Text from 'components/Text'; +import { + Card, + CardHeader, + CardContent, + CardImageContent, + CardFooter, + Text, + Button, + Column, + Row, +} from 'components/index'; import Icon from 'components/Icon'; +import { Meta } from '@storybook/react/types-6-0'; import { colors } from 'constants/colors'; import { arrowForward } from 'ionicons/icons'; -import { Button, Column, Row } from 'src/components'; export default { title: 'Lubycon UI Kit/Card', From 0ae7f65f8a1d2b4c5484d0786357cb00d20d4ebd Mon Sep 17 00:00:00 2001 From: evan-moon Date: Sat, 6 Feb 2021 17:02:25 +0900 Subject: [PATCH 3/3] =?UTF-8?q?feat(ui-kit):=20=EC=B9=B4=EB=93=9C=20?= =?UTF-8?q?=ED=83=80=EC=9E=85=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui-kit/src/components/Card/CardImageContent.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui-kit/src/components/Card/CardImageContent.tsx b/ui-kit/src/components/Card/CardImageContent.tsx index e276dd89..32e1acfb 100644 --- a/ui-kit/src/components/Card/CardImageContent.tsx +++ b/ui-kit/src/components/Card/CardImageContent.tsx @@ -3,11 +3,11 @@ import classnames from 'classnames'; import { Combine } from 'src/types/utils'; type CardImageContentProps = Combine< - HTMLAttributes, { src: string; alt: string; - } + }, + HTMLAttributes >; const CardImageContent = ({ className, ...props }: CardImageContentProps) => { return (