feat(ui-kit): Text 컴포넌트 디자인 변경 (#20)

* feat(ui-kit): Text 컴포넌트 디자인 변경 * chore(ui-kit): 스토리북에 깃 유저 정보 추가 * fix(ui-kit): 레퍼런스 타입이 이상하게 들어가 있던 부분 수정
Lubycon · Nov 30, 2020 · ed86aad · ed86aad
1 parent 3020f6b
commit ed86aad
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 18 deletions.
diff --git a/.github/workflows/publish-storybook.yml b/.github/workflows/publish-storybook.yml
@@ -10,6 +10,10 @@ jobs:
       - uses: actions/setup-node@v1
         with:
           node-version: 12
+      - name: Set Git Configulations
+        run: |
+          git config --global user.email "[email protected]"
+          git config --global user.name "lubycon"
       - name: Install depedencies
         run: yarn
       - name: Build Storybook

diff --git a/ui-kit/src/components/Text/index.stories.tsx b/ui-kit/src/components/Text/index.stories.tsx
@@ -16,7 +16,6 @@ const typographyNames: { [key in Typographys]: string } = {
   h5: '머릿말 5',
   h6: '머릿말 6',
   subtitle: '부제',
-  button: '버튼',
   content: '본문 1',
   content2: '본문 2',
   caption: '캡션',

diff --git a/ui-kit/src/components/Text/index.tsx b/ui-kit/src/components/Text/index.tsx
@@ -11,8 +11,8 @@ interface TextBaseProps {
 type TextProps<T extends ElementType = typeof DEFAULT_ELEMENT> = OverridableProps<T, TextBaseProps>;
 
 const Text = <T extends ElementType = typeof DEFAULT_ELEMENT>(
-  { typography = 'content', fontWeight, as, ...props }: TextProps<T>,
-  ref: Ref<HTMLButtonElement>
+  { typography = 'content', fontWeight = 'regular', as, ...props }: TextProps<T>,
+  ref: Ref<any>
 ) => {
   const target = as ?? DEFAULT_ELEMENT;
   const Component = target;

diff --git a/ui-kit/src/components/Text/types.ts b/ui-kit/src/components/Text/types.ts
@@ -6,7 +6,6 @@ export const typographys = [
   'h5',
   'h6',
   'subtitle',
-  'button',
   'content',
   'content2',
   'caption',

diff --git a/ui-kit/src/sass/utils/_typography.scss b/ui-kit/src/sass/utils/_typography.scss
@@ -1,4 +1,4 @@
-@mixin _typography($name, $font-size, $font-weight, $line-height) {
+@mixin _typography($name, $font-size, $line-height) {
   $font-size-number: strip-unit($font-size);
 
   :root {
@@ -15,19 +15,16 @@
 
   .lubycon-typography--#{$name} {
     @extend .lubycon-font-size--#{$font-size-number};
-    @extend .lubycon-font-weight--#{$font-weight};
   }
 }
 
-@include _typography('h1', 42px, 'light', 63px);
-@include _typography('h2', 32px, 'light', 48px);
-@include _typography('h3', 28px, 'regular', 42px);
-@include _typography('h4', 26px, 'regular', 40px);
-@include _typography('h5', 24px, 'bold', 40px);
-@include _typography('h6', 20px, 'bold', 40px);
-
-@include _typography('subtitle', 18px, 'regular', 31px);
-@include _typography('button', 16px, 'bold', 28px);
-@include _typography('content', 15px, 'regular', 26px);
-@include _typography('content2', 13px, 'regular', 22px);
-@include _typography('caption', 12px, 'regular', 21px);
+@include _typography('h1', 42px, 63px);
+@include _typography('h2', 32px, 48px);
+@include _typography('h3', 28px, 42px);
+@include _typography('h4', 26px, 40px);
+@include _typography('h5', 24px, 36px);
+@include _typography('h6', 20px, 30px);
+@include _typography('subtitle', 18px, 31px);
+@include _typography('content', 16px, 28px);
+@include _typography('content2', 15px, 26px);
+@include _typography('caption', 12px, 21px);