feat(ui-kit): Alert, Container 컴포넌트 추가 (#43)

* feat(ui-kit): Icon 컴포넌트가 className을 받을 수 있도록 수정 * feat(ui-kit): Column, Container 스타일 버그 수정 * feat(ui-kit): Alert 컴포넌트가 Div 속성을 상속받도록 변경 * feat(ui-kit): Alert 스토리 업데이트 * feat(ui-kit): className을 template string이 아니라 classnames 함수로만 처리하도록 변경
Lubycon · Feb 11, 2021 · 6a2a372 · 6a2a372
1 parent dc8b758
commit 6a2a372
Show file tree

Hide file tree

Showing 21 changed files with 301 additions and 81 deletions.
diff --git a/ui-kit/.storybook/preview.js b/ui-kit/.storybook/preview.js
@@ -1,9 +1,11 @@
 import '../src/sass/index.scss';
 import React from 'react';
-import { LubyconUIKitProvider } from '../src/components';
+import { LubyconUIKitProvider, Container } from '../src/components';
 
 export const decorators = [(Story => (
   <LubyconUIKitProvider>
-    <Story />
+    <Container>
+      <Story />
+    </Container>
   </LubyconUIKitProvider>
 ))];
diff --git a/ui-kit/src/components/Alert/index.tsx b/ui-kit/src/components/Alert/index.tsx
@@ -0,0 +1,71 @@
+import React, { forwardRef, HTMLAttributes } from 'react';
+import { colors, SemanticColor } from 'src/constants/colors';
+import classnames from 'classnames';
+import Text from '../Text';
+import Icon from '../Icon';
+import { informationCircle, closeCircle, alertCircle, checkmarkCircle } from 'ionicons/icons';
+import { Combine } from 'src/types/utils';
+
+interface AlertIcon {
+  icon: string;
+  color: string;
+}
+const alertIconMap: {
+  [key in SemanticColor]: AlertIcon;
+} = {
+  negative: {
+    icon: closeCircle,
+    color: colors.red50,
+  },
+  notice: {
+    icon: alertCircle,
+    color: colors.yellow50,
+  },
+  informative: {
+    icon: informationCircle,
+    color: colors.blue50,
+  },
+  positive: {
+    icon: checkmarkCircle,
+    color: colors.green50,
+  },
+};
+
+type AlertProps = Combine<
+  {
+    type?: SemanticColor;
+    title?: string;
+  },
+  HTMLAttributes<HTMLDivElement>
+>;
+
+const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
+  { type = 'informative', title, children, className, ...props },
+  ref
+) {
+  const { icon: iconName, color: iconColor } = alertIconMap[type];
+
+  return (
+    <div
+      ref={ref}
+      className={classnames('lubycon-alert', `lubycon-alert--type-${type}`, className)}
+      {...props}
+    >
+      <Icon
+        className="lubycon-alert__icon"
+        icon={iconName}
+        type="filled"
+        size={19}
+        color={iconColor}
+      ></Icon>
+      {title ? (
+        <Text fontWeight="bold" className="lubycon-alert__title">
+          {title}
+        </Text>
+      ) : null}
+      <Text className="lubycon-alert__description">{children}</Text>
+    </div>
+  );
+});
+
+export default Alert;
diff --git a/ui-kit/src/components/Card/CardImageContent.tsx b/ui-kit/src/components/Card/CardImageContent.tsx
@@ -11,7 +11,7 @@ type CardImageContentProps = Combine<
 >;
 const CardImageContent = ({ className, ...props }: CardImageContentProps) => {
   return (
-    <div className={`${classnames('lubycon-card__image-content')} ${className}`}>
+    <div className={classnames('lubycon-card__image-content', className)}>
       <img {...props} />
     </div>
   );

diff --git a/ui-kit/src/components/Container/index.tsx b/ui-kit/src/components/Container/index.tsx
@@ -1,9 +1,27 @@
 import React, { HTMLAttributes } from 'react';
-
+import classnames from 'classnames';
 interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
-  size: 'fluid' | 'sm' | 'md' | 'lg' | 'xl';
+  fluid?: boolean;
 }
 
-export default function Container({ ...props }: ContainerProps): JSX.Element {
-  return <div>{props.children}</div>;
+export default function Container({
+  children,
+  fluid = false,
+  className,
+  ...props
+}: ContainerProps): JSX.Element {
+  return (
+    <div
+      className={classnames(
+        'lubycon-container',
+        {
+          'lubycon-container--fluid': fluid === true,
+        },
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
 }
diff --git a/ui-kit/src/components/Container/style.scss b/ui-kit/src/components/Container/style.scss
diff --git a/ui-kit/src/components/Grid/Column.tsx b/ui-kit/src/components/Grid/Column.tsx
@@ -22,7 +22,7 @@ const Column = <T extends React.ElementType = typeof DEFAULT_ELEMENT>(
     () =>
       sizes.map((size) => {
         const { [size]: sizeValue } = props;
-        return sizeValue ? `lubycon-grid-column--${size}__${sizeValue}` : '';
+        return sizeValue ? `lubycon-grid-column--${size}--${sizeValue}` : '';
       }),
     []
   );

diff --git a/ui-kit/src/components/Grid/types.ts b/ui-kit/src/components/Grid/types.ts
@@ -1,5 +1,5 @@
 export const DEFAULT_ELEMENT = 'div' as const;
 
 type ColumnNumberSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-export type ColumnSize = boolean | 'auto' | ColumnNumberSize;
+export type ColumnSize = 'auto' | ColumnNumberSize;
 export type ColumnResponsive = 'xl' | 'lg' | 'md' | 'sm' | 'xs';
diff --git a/ui-kit/src/components/Icon/index.tsx b/ui-kit/src/components/Icon/index.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import classnames from 'classnames';
-import { Colors, colors } from 'src/constants/colors';
+import { colors } from 'src/constants/colors';
 
 /**
  * UI Kit 내부에서만 사용
@@ -10,10 +10,11 @@ interface Props {
   icon: string;
   size?: number;
   type: 'outline' | 'filled';
-  color?: Colors;
+  color?: string;
+  className?: string;
 }
 
-const Icon = ({ icon, size = 16, type, color = colors.gray100 }: Props) => {
+const Icon = ({ icon, size = 16, type, color = colors.gray100, className }: Props) => {
   const svgTag = useMemo(() => {
     return icon.replace(/data:image\/svg\+xml;utf8,/, '');
   }, [icon]);
@@ -25,10 +26,14 @@ const Icon = ({ icon, size = 16, type, color = colors.gray100 }: Props) => {
 
   return (
     <span
-      className={classnames('lubycon-icon', {
-        'lubycon-icon--outline': type === 'outline',
-        'lubycon-icon--filled': type === 'filled',
-      })}
+      className={classnames(
+        'lubycon-icon',
+        {
+          'lubycon-icon--outline': type === 'outline',
+          'lubycon-icon--filled': type === 'filled',
+        },
+        className
+      )}
       style={{ width: size, height: size }}
       dangerouslySetInnerHTML={{ __html: coloredSvg }}
     />

diff --git a/ui-kit/src/components/Text/index.tsx b/ui-kit/src/components/Text/index.tsx
@@ -18,10 +18,14 @@ const Text = <T extends ElementType = typeof DEFAULT_ELEMENT>(
   return (
     <Component
       ref={ref}
-      className={`${classnames('lubycon-text', {
-        [`lubycon-typography--${typography}`]: typography != null,
-        [`lubycon-text--font-weight--${fontWeight}`]: fontWeight != null,
-      })} ${className}`}
+      className={classnames(
+        'lubycon-text',
+        {
+          [`lubycon-typography--${typography}`]: typography != null,
+          [`lubycon-text--font-weight--${fontWeight}`]: fontWeight != null,
+        },
+        className
+      )}
       {...props}
     />
   );

diff --git a/ui-kit/src/components/index.ts b/ui-kit/src/components/index.ts
@@ -1,6 +1,8 @@
+export { default as Alert } from './Alert';
 export { default as Button } from './Button';
 export { default as Checkbox } from './Checkbox';
 export { Row, Column } from './Grid';
+export { default as Container } from './Container';
 export { default as Radio } from './Radio';
 export { default as Selection } from './Selection';
 export { default as Switch } from './Switch';

diff --git a/ui-kit/src/constants/colors.ts b/ui-kit/src/constants/colors.ts
@@ -1,29 +1,29 @@
 export const colors = {
-  green50: '#13BC4C',
-  green40: '#78CF81',
-  green60: '#0F933C',
-  blue50: '#135CE9',
-  blue40: '#87ADF5',
-  blue60: '#013CAD',
-  red50: '#CB121C',
-  red40: '#F29CA1',
-  red60: '#9B0B13',
-  yellow50: '#F0CB08',
-  yellow40: '#F9E681',
-  yellow60: '#AA8F00',
-  gray100: '#1B1B1C',
-  gray90: '#2A2A2C',
-  gray80: '#4C4D53',
-  gray70: '#76777D',
-  gray60: '#8E9095',
-  gray50: '#B5B6B9',
-  gray40: '#D0D1D3',
-  gray30: '#E3E4E5',
-  gray20: '#F3F4F5',
-  gray10: '#FCFCFD',
+  green40: '#dff6e7',
+  green50: '#13bc4c',
+  green60: '#00a438',
+  blue40: '#e6effe',
+  blue50: '#135ce9',
+  blue60: '#013cad',
+  red40: '#fae7e8',
+  red50: '#cb121c',
+  red60: '#9b0b13',
+  yellow40: '#fdf5ce',
+  yellow50: '#f0ca08',
+  yellow60: '#aa8f00',
+  gray100: '#1b1b1c',
+  gray90: '#2a2a2c',
+  gray80: '#4c4d53',
+  gray70: '#76777d',
+  gray60: '#8e9095',
+  gray50: '#b5b6b9',
+  gray40: '#d0d1d3',
+  gray30: '#e3e4e5',
+  gray20: '#f3f4f5',
+  gray10: '#fcfcfd',
 } as const;
 
-export type SemanticColorName = 'positive' | 'informative' | 'negative' | 'notice';
+export type SemanticColor = 'positive' | 'informative' | 'negative' | 'notice';
 
 export type ColorProperty = keyof typeof colors;
 

diff --git a/ui-kit/src/sass/components/_Alert.scss b/ui-kit/src/sass/components/_Alert.scss
@@ -0,0 +1,29 @@
+$alert-horizental-padding: 14px;
+
+.lubycon-alert {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  border-radius: 4px;
+  padding: 10px $alert-horizental-padding;
+
+  &--type-negative {
+    background-color: get-color('red40');
+  }
+  &--type-notice {
+    background-color: get-color('yellow40');
+  }
+  &--type-informative {
+    background-color: get-color('blue40');
+  }
+  &--type-positive {
+    background-color: get-color('green40');
+  }
+
+  &__title {
+    margin-right: 8px;
+  }
+  &__icon {
+    margin-right: $alert-horizental-padding;
+  }
+}
diff --git a/ui-kit/src/sass/components/_Column.scss b/ui-kit/src/sass/components/_Column.scss
@@ -1,15 +1,23 @@
 .lubycon-grid-column {
   position: relative;
-  width: 100%;
   padding-right: ($gutter / 2);
   padding-left: ($gutter / 2);
+  flex-basis: 0;
+  flex-grow: 1;
+  min-width: 0;
+  max-width: 100%;
+  box-sizing: border-box;
 }
 
 @each $breakpoint, $size in $breakpoints {
+  .lubycon-grid-column--#{$breakpoint}--auto {
+    flex: 0 0 auto;
+  }
+
   @for $i from 1 through $max-columns {
-    .lubycon-grid-column--#{$breakpoint}__#{$i} {
-      @include media-breakpoint($size) {
-        flex: 0 0 auto;
+    .lubycon-grid-column--#{$breakpoint}--#{$i} {
+      @include media-breakpoint($breakpoint) {
+        flex: 0 0 percentage($i / $max-columns);
         width: percentage($i / $max-columns);
       }
     }

diff --git a/ui-kit/src/sass/components/_Container.scss b/ui-kit/src/sass/components/_Container.scss
@@ -0,0 +1,11 @@
+.lubycon-container {
+  width: 100%;
+  max-width: none;
+  margin: 0 auto;
+  &--fluid {
+    max-width: auto;
+  }
+  @include media-breakpoint(sm) {
+    max-width: 1200px;
+  }
+}
diff --git a/ui-kit/src/sass/components/_Row.scss b/ui-kit/src/sass/components/_Row.scss
@@ -16,8 +16,9 @@
 
 .lubycon-grid-row {
   display: flex;
-  width: 100%;
   margin: #{-$gutter / 2};
+  flex-wrap: wrap;
+  box-sizing: border-box;
 
   @include direction(row);
   @include direction(column);

diff --git a/ui-kit/src/sass/components/_index.scss b/ui-kit/src/sass/components/_index.scss
@@ -1,3 +1,4 @@
+@import './Alert';
 @import './Button';
 @import './Text';
 @import './Radio';
@@ -12,3 +13,4 @@
 @import './Tabs';
 @import './Card';
 @import './Snackbar';
+@import './Container';
diff --git a/ui-kit/src/sass/utils/_breakpoints.scss b/ui-kit/src/sass/utils/_breakpoints.scss
@@ -7,7 +7,7 @@ $breakpoints: (
 ) !default;
 
 @mixin media-breakpoint($size) {
-  @media (min-width: $size) {
+  @media (min-width: map-get($breakpoints, $size)) {
     @content;
   }
 }