From 5ab92bba9e45278f37e1064dfcd6d1b3439022ef Mon Sep 17 00:00:00 2001
From: Evan Moon <bboydart91@gmail.com>
Date: Wed, 9 Jun 2021 23:16:08 +0900
Subject: [PATCH] =?UTF-8?q?docs:=20tooltip,=20text=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20mdx=20=EB=A7=88=EC=9D=B4=EA=B7=B8=EB=A0=88?=
 =?UTF-8?q?=EC=9D=B4=EC=85=98=20(#89)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/stories/Components/Text.stories.tsx   | 67 -------------------
 .../stories/Components/Text/index.stories.mdx | 57 ++++++++++++++++
 .../Components.tsx}                           | 40 ++++-------
 ui-kit/src/stories/Components/Tooltip/data.ts | 12 ++++
 .../Components/Tooltip/index.stories.mdx      | 31 +++++++++
 5 files changed, 112 insertions(+), 95 deletions(-)
 delete mode 100644 ui-kit/src/stories/Components/Text.stories.tsx
 create mode 100644 ui-kit/src/stories/Components/Text/index.stories.mdx
 rename ui-kit/src/stories/Components/{Tooltip.stories.tsx => Tooltip/Components.tsx} (78%)
 create mode 100644 ui-kit/src/stories/Components/Tooltip/data.ts
 create mode 100644 ui-kit/src/stories/Components/Tooltip/index.stories.mdx

diff --git a/ui-kit/src/stories/Components/Text.stories.tsx b/ui-kit/src/stories/Components/Text.stories.tsx
deleted file mode 100644
index fc51738d..00000000
--- a/ui-kit/src/stories/Components/Text.stories.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import React from 'react';
-import { Text } from 'src';
-import { Meta } from '@storybook/react/types-6-0';
-import { typographys, Typographys, FontWeights, fontWeights } from 'components/Text/types';
-
-export default {
-  title: 'Components/Text',
-  component: Text,
-} as Meta;
-
-const typographyNames: { [key in Typographys]: string } = {
-  h1: '머릿말 1',
-  h2: '머릿말 2',
-  h3: '머릿말 3',
-  h4: '머릿말 4',
-  h5: '머릿말 5',
-  h6: '머릿말 6',
-  subtitle: '부제',
-  p1: '본문 1',
-  p2: '본문 2',
-  caption: '캡션',
-};
-
-const fontWeightNames: { [key in FontWeights]: string } = {
-  light: '노토 산스 KR Light',
-  regular: '노토 산스 KR Regular',
-  bold: '노토 산스 KR Bold',
-  black: '노토 산스 KR Black',
-};
-
-export const Default = () => {
-  return (
-    <ul>
-      {typographys.map((typography) => (
-        <li style={{ listStyle: 'none' }} key={typography}>
-          <Text typography={typography}>{typographyNames[typography]}</Text>
-        </li>
-      ))}
-    </ul>
-  );
-};
-
-export const FontWeight = () => {
-  return (
-    <ul>
-      {fontWeights.map((fontWeight) => (
-        <li style={{ listStyle: 'none' }} key={fontWeight}>
-          <Text fontWeight={fontWeight}>{fontWeightNames[fontWeight]}</Text>
-        </li>
-      ))}
-    </ul>
-  );
-};
-
-export const As = () => {
-  return (
-    <ul>
-      <li style={{ listStyle: 'none' }}>
-        <Text as="a" href="https://github.com" target="blank">
-          앵커 태그를 사용해보자
-        </Text>
-        <Text as="h1">h1으로 렌더해도 기본적으로는 Typography: p1이 적용됩니다</Text>
-        <Text as="button">버튼도 가능하기는 함</Text>
-      </li>
-    </ul>
-  );
-};
diff --git a/ui-kit/src/stories/Components/Text/index.stories.mdx b/ui-kit/src/stories/Components/Text/index.stories.mdx
new file mode 100644
index 00000000..a9a6d9d2
--- /dev/null
+++ b/ui-kit/src/stories/Components/Text/index.stories.mdx
@@ -0,0 +1,57 @@
+import { Text } from 'src';
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+
+<Meta title="components/Text" components={Text} />
+
+# Text
+
+## Preview
+
+<Canvas>
+  <Story name="Preview">
+    <Text>텍스트 컴포넌트 입니다</Text>
+  </Story>
+</Canvas>
+
+## Block
+
+<Canvas>
+  <Story name="Block">
+    <Text as="p">이 텍스트는 p태그로 렌더되며, display: block이 적용됩니다</Text>
+    <Text as="p">이 텍스트는 p태그로 렌더되며, display: block이 적용됩니다</Text>
+  </Story>
+</Canvas>
+
+## Font Weight
+
+<Canvas>
+  <Story name="Font Weight">
+    <Text as="p">폰트 굵기 보통</Text>
+    <Text as="p" fontWeight="bold">
+      폰트 굵기 굵게
+    </Text>
+  </Story>
+</Canvas>
+
+## Typography
+
+<Canvas>
+  <Story name="Typography">
+    <Text as="p">Lubycon UI Kit의 타이포그래피를 사용해보세요</Text>
+    <Text typography="h1" as="p">
+      타이포그래피는 h1이지만, 실제로는 p태그로 렌더됩니다{' '}
+    </Text>
+  </Story>
+</Canvas>
+
+## As
+
+<Canvas>
+  <Story name="As">
+    <Text as="a" href="https://github.com" target="blank">
+      앵커 태그를 사용해보자
+    </Text>
+    <Text as="h1">h1으로 렌더해도 기본적으로는 Typography: p1이 적용됩니다</Text>
+    <Text as="button">버튼도 가능하기는 함</Text>
+  </Story>
+</Canvas>
diff --git a/ui-kit/src/stories/Components/Tooltip.stories.tsx b/ui-kit/src/stories/Components/Tooltip/Components.tsx
similarity index 78%
rename from ui-kit/src/stories/Components/Tooltip.stories.tsx
rename to ui-kit/src/stories/Components/Tooltip/Components.tsx
index 9deaea5d..e8cf881c 100644
--- a/ui-kit/src/stories/Components/Tooltip.stories.tsx
+++ b/ui-kit/src/stories/Components/Tooltip/Components.tsx
@@ -1,33 +1,7 @@
 import React, { useState } from 'react';
-import { Meta } from '@storybook/react/types-6-0';
 import { Tooltip, Button } from 'src';
 import { TooltipPosition } from 'src/components/Tooltip/types';
-
-export default {
-  title: 'Components/Tooltip',
-  component: Tooltip,
-} as Meta;
-
-const positions: TooltipPosition[] = [
-  'top-left',
-  'top-center',
-  'top-right',
-  'left',
-  'right',
-  'bottom-left',
-  'bottom-center',
-  'bottom-right',
-];
-
-export const Default = () => {
-  return (
-    <div style={{ paddingTop: 40 }}>
-      <Tooltip show={true} message="툴팁입니다.">
-        <Button type="informative">버튼입니다</Button>
-      </Tooltip>
-    </div>
-  );
-};
+import { positions } from './data';
 
 const TooltipButton = ({ children }: { children: TooltipPosition }) => {
   const [show, setShow] = useState(false);
@@ -44,7 +18,17 @@ const TooltipButton = ({ children }: { children: TooltipPosition }) => {
   );
 };
 
-export const Position = () => {
+export const Preview = () => {
+  return (
+    <div style={{ paddingTop: 40 }}>
+      <Tooltip show={true} message="툴팁입니다.">
+        <Button type="informative">버튼입니다</Button>
+      </Tooltip>
+    </div>
+  );
+};
+
+export const Positions = () => {
   return (
     <ul style={{ padding: 100, margin: 0 }}>
       {positions.map((p) => (
diff --git a/ui-kit/src/stories/Components/Tooltip/data.ts b/ui-kit/src/stories/Components/Tooltip/data.ts
new file mode 100644
index 00000000..657a6f75
--- /dev/null
+++ b/ui-kit/src/stories/Components/Tooltip/data.ts
@@ -0,0 +1,12 @@
+import { TooltipPosition } from 'src/components/Tooltip/types';
+
+export const positions: TooltipPosition[] = [
+  'top-left',
+  'top-center',
+  'top-right',
+  'left',
+  'right',
+  'bottom-left',
+  'bottom-center',
+  'bottom-right',
+];
diff --git a/ui-kit/src/stories/Components/Tooltip/index.stories.mdx b/ui-kit/src/stories/Components/Tooltip/index.stories.mdx
new file mode 100644
index 00000000..30084d8c
--- /dev/null
+++ b/ui-kit/src/stories/Components/Tooltip/index.stories.mdx
@@ -0,0 +1,31 @@
+import { Tooltip } from 'src';
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import { Preview, Positions, AbsolutePositionTest } from './Components';
+
+<Meta title="Components/Tooltip" />
+
+# Tooltip
+
+## Preview
+
+<Canvas>
+  <Story name="Preview">
+    <Preview />
+  </Story>
+</Canvas>
+
+## Positions
+
+<Canvas>
+  <Story name="Positions">
+    <Positions />
+  </Story>
+</Canvas>
+
+## Position with Absolute
+
+<Canvas>
+  <Story name="Position with Absolute">
+    <AbsolutePositionTest />
+  </Story>
+</Canvas>