docs(seed-docs): change actionable callout usage spec (#356)

* actionable callout 상호작용 문서 작성 * actionable callout 상호작용 문서 작성 * primitive 링크가 이상한 것들 수정 * actionable callout 오타수정 * 터치/마우스 description 추가 * dismissable callout 상호작용 가이드 * callout 상호작용 섹션 제거 --------- Co-authored-by: junghyeonsu <[email protected]>
daangn · Oct 11, 2023 · 5b1cb47 · 5b1cb47
1 parent 18fa111
commit 5b1cb47
Show file tree

Hide file tree

Showing 22 changed files with 104 additions and 33 deletions.
diff --git a/docs/.eslintrc.js b/docs/.eslintrc.js
@@ -21,7 +21,8 @@ module.exports = {
       useTabs: false,
       trailingComma: "all",
       printWidth: 80,
-      arrowParens: "always"
+      arrowParens: "always",
+      proseWrap: "never",
     }, {
       usePrettierrc: false
     }],

diff --git a/docs/content/component/action-sheet/component-meta.json b/docs/content/component/action-sheet/component-meta.json
@@ -3,7 +3,6 @@
   "name": "Action Sheet",
   "description": "OS 시스템 액션시트를 대체하는 커스텀 액션시트입니다.",
   "thumbnail": "./thumbnail.png",
-  "primitive": "../../primitive/menu/primitive-meta.json",
   "platform": {
     "ios": {
       "status": "done",

diff --git a/docs/content/component/actionable-callout/actionablecallout-usage-click-touch.png b/docs/content/component/actionable-callout/actionablecallout-usage-click-touch.png
diff --git a/docs/content/component/actionable-callout/actionablecallout-usage-enter-action.png b/docs/content/component/actionable-callout/actionablecallout-usage-enter-action.png
diff --git a/docs/content/component/actionable-callout/component-meta.json b/docs/content/component/actionable-callout/component-meta.json
@@ -4,7 +4,6 @@
   "description": "사용자의 주목을 끌어 중요한 정보를 강조하는 요소입니다. 사용자가 누르는 것으로 액션이 발생합니다.",
   "thumbnail": "./thumbnail.png",
   "group": "Callouts",
-  "primitive": "../../primitive/callout/primitive-meta.json",
   "platform": {
     "ios": {
       "status": "done",

diff --git a/docs/content/component/actionable-callout/usage.mdx b/docs/content/component/actionable-callout/usage.mdx
@@ -41,7 +41,8 @@ slug: /component/actionable-callout/usage
 
 <HalfCard>
   <HalfCardImageCell>
-    ![actionable callout options warning](./actionablecallout-options-warning.png)
+    ![actionable callout options
+    warning](./actionablecallout-options-warning.png)
   </HalfCardImageCell>
   <HalfCardDescriptionCell>
     <HalfCardDescriptionTitle>Warning</HalfCardDescriptionTitle>
@@ -89,7 +90,31 @@ slug: /component/actionable-callout/usage
 
 ## 상호작용
 
-Working In Progress
+### 터치 / 마우스
+
+<FullCard>
+  <FullCardImageCell>
+    ![actionablecallout-usage-click-touch](./actionablecallout-usage-click-touch.png)
+  </FullCardImageCell>
+  <FullCardDescription>
+    마우스 클릭 또는 터치로 Actionable Callout과 상호작용할 수 있습니다.
+  </FullCardDescription>
+</FullCard>
+
+### 키보드
+
+<HalfCard>
+  <HalfCardImageCell>
+    ![actionablecallout-usage-enter-action](./actionablecallout-usage-enter-action.png)
+  </HalfCardImageCell>
+  <HalfCardDescriptionCell>
+    <HalfCardDescriptionTitle>Action</HalfCardDescriptionTitle>
+    <HalfCardDescription>
+      <Keyboard>Space</Keyboard> 또는 <Keyboard>Enter</Keyboard>키를 통해
+      Actionable Callout의 액션을 실행시킬 수 있습니다.
+    </HalfCardDescription>
+  </HalfCardDescriptionCell>
+</HalfCard>
 
 ## 가이드라인
 

diff --git a/docs/content/component/alert-dialog/component-meta.json b/docs/content/component/alert-dialog/component-meta.json
@@ -3,6 +3,7 @@
   "name": "Alert Dialog",
   "description": "사용자에게 중요한 정보를 전달하고, 필요하면 응답을 요구하는 컴포넌트입니다.",
   "thumbnail": "./thumbnail.png",
+  "primitive": "../../primitive/dialog/primitive-meta.json",
   "platform": {
     "ios": {
       "status": "done",

diff --git a/docs/content/component/alert-dialog/usage.mdx b/docs/content/component/alert-dialog/usage.mdx
@@ -19,7 +19,6 @@ slug: /component/alert-dialog/usage
 
 ## 옵션
 
-
 <HalfCard>
   <HalfCardImageCell>
     ![alert dialog options title](./alertdialog-options-title.png)
@@ -30,7 +29,8 @@ slug: /component/alert-dialog/usage
       Title은 Alert Dialog가 어떤 정보를 담고 있는지 요약된 내용으로 제공합니다.
       유저에게 경고의 원인 또는 맥락을 명확하게 전달함으로써, Alert Dialog의
       목적과 중요성을 전달합니다. 또한 Bold 스타일을 적용하여, Description 보다
-      주목도를 높여 중요한 정보를 빨리 인지할 수 있도록 합니다. Title을 필수적으로 작성하기를 권장합니다. 
+      주목도를 높여 중요한 정보를 빨리 인지할 수 있도록 합니다. Title을
+      필수적으로 작성하기를 권장합니다.
     </HalfCardDescription>
   </HalfCardDescriptionCell>
 </HalfCard>
@@ -124,6 +124,9 @@ slug: /component/alert-dialog/usage
   <FullCardImageCell>
     ![alert-dialog-usage-click-touch](./alert-dialog-usage-click-touch.png)
   </FullCardImageCell>
+  <FullCardDescription>
+    마우스 클릭 또는 터치로 Alert Dialog와 상호작용할 수 있습니다.
+  </FullCardDescription>
 </FullCard>
 
 ### 키보드
@@ -181,7 +184,8 @@ slug: /component/alert-dialog/usage
 
 <HalfCard>
   <HalfCardImageCell>
-    ![alert dialog guideline](./alertdialog-options-action-secondary-neutral.png)
+    ![alert dialog
+    guideline](./alertdialog-options-action-secondary-neutral.png)
   </HalfCardImageCell>
   <HalfCardDescriptionCell>
     <HalfCardDescriptionTitle>간결한 문구</HalfCardDescriptionTitle>
@@ -198,11 +202,12 @@ slug: /component/alert-dialog/usage
     ![alert dialog guideline](./alertdialog-guideline-2.png)
   </HalfCardImageCell>
   <HalfCardDescriptionCell>
-    <HalfCardDescriptionTitle>경고 또는 데이터 손실 알림</HalfCardDescriptionTitle>
+    <HalfCardDescriptionTitle>
+      경고 또는 데이터 손실 알림
+    </HalfCardDescriptionTitle>
     <HalfCardDescription>
-      Alert Dialog는 유저에게 경고나 주의 사항을 강조하는 역할을 합니다.
-      돌이킬 수 없는 데이터 유실이 발생하는 경우, 유저에게 경고의 메시지를
-      전달합니다.
+      Alert Dialog는 유저에게 경고나 주의 사항을 강조하는 역할을 합니다. 돌이킬
+      수 없는 데이터 유실이 발생하는 경우, 유저에게 경고의 메시지를 전달합니다.
     </HalfCardDescription>
   </HalfCardDescriptionCell>
 </HalfCard>
@@ -219,14 +224,19 @@ slug: /component/alert-dialog/usage
       ![alert dialog guideline](./alertdialog-guideline-do-2.png)
     </DoImage>
     <DoText>
-      Title은 명확한 정보 전달을 위한 중요한 요소입니다. 어떤 유형의 메시지, 알림인지 신속하게 파악할 수 있도록 합니다. 또한 스크린 리더와 같은 접근성 보조 기술에서도 Title은 중요한 역할을 합니다.
+      Title은 명확한 정보 전달을 위한 중요한 요소입니다. 어떤 유형의 메시지,
+      알림인지 신속하게 파악할 수 있도록 합니다. 또한 스크린 리더와 같은 접근성
+      보조 기술에서도 Title은 중요한 역할을 합니다.
     </DoText>
   </DoBox>
   <DontBox>
     <DontImage>
       ![alert dialog guideline](./alertdialog-guideline-dont-5.png)
     </DontImage>
-    <DontText>Title 요소 없이 Description으로만 내용을 서술하지 않습니다. Title을 통해 Description이 어떤 정보를 전달하는지 미리 파악할 수 있도록 합니다.</DontText>
+    <DontText>
+      Title 요소 없이 Description으로만 내용을 서술하지 않습니다. Title을 통해
+      Description이 어떤 정보를 전달하는지 미리 파악할 수 있도록 합니다.
+    </DontText>
   </DontBox>
 </DoDontLayout>
 
@@ -258,15 +268,18 @@ slug: /component/alert-dialog/usage
       ![alert dialog guideline](./alertdialog-guideline-do-3.png)
     </DoImage>
     <DoText>
-      Alert Dialog의 버튼 Label은 간결한 단어로 제공합니다. 짧은 레이블은 유저가 원하는 작업을 빠르게 결정하고 선택할 수 있도록 도와줍니다. 
+      Alert Dialog의 버튼 Label은 간결한 단어로 제공합니다. 짧은 레이블은 유저가
+      원하는 작업을 빠르게 결정하고 선택할 수 있도록 도와줍니다.
     </DoText>
   </DoBox>
   <DontBox>
     <DontImage>
       ![alert dialog guideline](./alertdialog-guideline-dont-6.png)
     </DontImage>
     <DontText>
-    서술형 Label은 유저가 읽고 이해해야 하므로 결정 행동을 지연시킬 수 있습니다. 버튼 레이블을 간결하게 전달함으로써 유저가 빠른 결정을 내릴 수 있도록 도와줍니다.
+      서술형 Label은 유저가 읽고 이해해야 하므로 결정 행동을 지연시킬 수
+      있습니다. 버튼 레이블을 간결하게 전달함으로써 유저가 빠른 결정을 내릴 수
+      있도록 도와줍니다.
     </DontText>
   </DontBox>
 </DoDontLayout>

diff --git a/docs/content/component/callout/component-meta.json b/docs/content/component/callout/component-meta.json
@@ -4,7 +4,6 @@
   "description": "사용자의 주목을 끌어 중요한 정보를 강조하는 요소입니다.",
   "thumbnail": "./thumbnail.png",
   "group": "Callouts",
-  "primitive": "../../primitive/callout/primitive-meta.json",
   "platform": {
     "ios": {
       "status": "done",

diff --git a/docs/content/component/callout/usage.mdx b/docs/content/component/callout/usage.mdx
@@ -102,10 +102,6 @@ slug: /component/callout/usage
 | description | text                          |        |
 | icon        | Icon                          |        |
 
-## 상호작용
-
-Working In Progress
-
 ## 가이드라인
 
 Working In Progress
diff --git a/docs/content/component/dismissable-callout/component-meta.json b/docs/content/component/dismissable-callout/component-meta.json
@@ -4,7 +4,6 @@
   "description": "사용자의 주목을 끌어 중요한 정보를 강조하는 요소입니다. 사용자가 닫을 수 있습니다.",
   "thumbnail": "./thumbnail.png",
   "group": "Callouts",
-  "primitive": "../../primitive/callout/primitive-meta.json",
   "platform": {
     "ios": {
       "status": "done",

diff --git a/.../content/component/dismissable-callout/dismissablecallout-usage-click-touch.png b/.../content/component/dismissable-callout/dismissablecallout-usage-click-touch.png
diff --git a/docs/content/component/dismissable-callout/dismissablecallout-usage-close.png b/docs/content/component/dismissable-callout/dismissablecallout-usage-close.png
diff --git a/docs/content/component/dismissable-callout/dismissablecallout-usage-focus.png b/docs/content/component/dismissable-callout/dismissablecallout-usage-focus.png
diff --git a/docs/content/component/dismissable-callout/usage.mdx b/docs/content/component/dismissable-callout/usage.mdx
@@ -15,7 +15,8 @@ slug: /component/dismissable-callout/usage
 
 <HalfCard>
   <HalfCardImageCell>
-    ![dismissable callout options normal](./dismissablecallout-options-normal.png)
+    ![dismissable callout options
+    normal](./dismissablecallout-options-normal.png)
   </HalfCardImageCell>
   <HalfCardDescriptionCell>
     <HalfCardDescriptionTitle>Normal</HalfCardDescriptionTitle>
@@ -41,7 +42,8 @@ slug: /component/dismissable-callout/usage
 
 <HalfCard>
   <HalfCardImageCell>
-    ![dismissable callout options warning](./dismissablecallout-options-warning.png)
+    ![dismissable callout options
+    warning](./dismissablecallout-options-warning.png)
   </HalfCardImageCell>
   <HalfCardDescriptionCell>
     <HalfCardDescriptionTitle>Warning</HalfCardDescriptionTitle>
@@ -54,7 +56,8 @@ slug: /component/dismissable-callout/usage
 
 <HalfCard>
   <HalfCardImageCell>
-    ![dismissable callout options danger](./dismissablecallout-options-danger.png)
+    ![dismissable callout options
+    danger](./dismissablecallout-options-danger.png)
   </HalfCardImageCell>
   <HalfCardDescriptionCell>
     <HalfCardDescriptionTitle>Danger</HalfCardDescriptionTitle>
@@ -89,7 +92,45 @@ slug: /component/dismissable-callout/usage
 
 ## 상호작용
 
-Working In Progress
+### 터치 / 마우스
+
+<FullCard>
+  <FullCardImageCell>
+    ![dismissablecallout-usage-click-touch](./dismissablecallout-usage-click-touch.png)
+  </FullCardImageCell>
+  <FullCardDescription>
+    마우스 클릭 또는 터치로 Dismissable Callout과 상호작용할 수 있는 영역입니다.
+  </FullCardDescription>
+</FullCard>
+
+### 키보드
+
+<HalfCard>
+  <HalfCardImageCell>
+    ![dismissablecallout-usage-focus](./dismissablecallout-usage-focus.png)
+  </HalfCardImageCell>
+  <HalfCardDescriptionCell>
+    <HalfCardDescriptionTitle>Focus</HalfCardDescriptionTitle>
+    <HalfCardDescription>
+      <Keyboard>Tab</Keyboard>키를 통해 Close Button에 Focus할 수 있습니다.
+    </HalfCardDescription>
+  </HalfCardDescriptionCell>
+</HalfCard>
+
+<HalfCard>
+  <HalfCardImageCell>
+    ![dismissablecallout-usage-close](./dismissablecallout-usage-close.png)
+  </HalfCardImageCell>
+  <HalfCardDescriptionCell>
+    <HalfCardDescriptionTitle>Dismiss</HalfCardDescriptionTitle>
+    <HalfCardDescription>
+      <Keyboard>Esc</Keyboard>키, 또는 Close Button에 Focus된 상태에서
+      <Keyboard>Space</Keyboard> 또는
+      <Keyboard>Enter</Keyboard>키를 통해 Dismissable Callout을 닫을 수
+      있습니다.
+    </HalfCardDescription>
+  </HalfCardDescriptionCell>
+</HalfCard>
 
 ## 가이드라인
 

diff --git a/docs/content/component/extended-floating-action-button/component-meta.json b/docs/content/component/extended-floating-action-button/component-meta.json
@@ -4,7 +4,6 @@
   "alias": "Extended FAB",
   "description": "화면 계층 최상위에 위치해 액션을 일으킬 수 있는 확장된 형태의 요소입니다.",
   "thumbnail": "./thumbnail.png",
-  "primitive": "../../primitive/button/primitive-meta.json",
   "group": "FABs",
   "platform": {
     "ios": {

diff --git a/docs/content/component/floating-action-button/component-meta.json b/docs/content/component/floating-action-button/component-meta.json
@@ -4,7 +4,6 @@
   "alias": "FAB",
   "description": "화면 계층 최상위에 위치해 액션을 일으킬 수 있는 요소입니다.",
   "thumbnail": "./thumbnail.png",
-  "primitive": "../../primitive/button/primitive-meta.json",
   "group": "FABs",
   "platform": {
     "ios": {

diff --git a/docs/content/component/menu-floating-action-button/component-meta.json b/docs/content/component/menu-floating-action-button/component-meta.json
@@ -4,7 +4,6 @@
   "alias": "Menu FAB",
   "description": "화면 계층 최상위에 위치해 메뉴를 표시 여부를 결정할 수 있는 요소입니다.",
   "thumbnail": "./thumbnail.png",
-  "primitive": "../../primitive/button/primitive-meta.json",
   "group": "FABs",
   "platform": {
     "ios": {

diff --git a/docs/content/component/slider/component-meta.json b/docs/content/component/slider/component-meta.json
@@ -3,6 +3,7 @@
   "name": "Slider",
   "description": "범위 내 값을 조정할 수 있는 요소입니다.",
   "thumbnail": "./thumbnail.png",
+  "primitive": "../../primitive/slider/primitive-meta.json",
   "platform": {
     "ios": {
       "status": "todo",

diff --git a/docs/src/templates/ComponentOverviewDoc.tsx b/docs/src/templates/ComponentOverviewDoc.tsx
@@ -73,8 +73,6 @@ const DocsTemplate: React.FC<PageProps<GatsbyTypes.ComponentOverviewQuery>> = ({
   const primitiveLink =
     primitive?.childPrimitiveMetaJson?.primitive?.childMdx?.frontmatter?.slug!;
 
-  console.log("primitiveLink", primitiveLink);
-
   return (
     <>
       <article className={style.content}>

diff --git a/docs/src/templates/ComponentStyleDoc.tsx b/docs/src/templates/ComponentStyleDoc.tsx
@@ -52,7 +52,7 @@ const DocsTemplate: React.FC<PageProps<GatsbyTypes.ComponentStyleQuery>> = ({
     <>
       <article className={style.content}>
         <ComponentDocumentTopContent
-          primitiveLink={primitiveLink!}
+          primitiveLink={primitiveLink}
           title={name!}
           description={description!}
           path={path}

diff --git a/docs/src/templates/ComponentUsageDoc.tsx b/docs/src/templates/ComponentUsageDoc.tsx
@@ -48,11 +48,13 @@ const DocsTemplate: React.FC<PageProps<GatsbyTypes.ComponentUsageQuery>> = ({
   const primitiveLink =
     primitive?.childPrimitiveMetaJson?.primitive?.childMdx?.frontmatter?.slug!;
 
+  console.log("primitiveLink", primitiveLink);
+
   return (
     <>
       <article className={style.content}>
         <ComponentDocumentTopContent
-          primitiveLink={primitiveLink!}
+          primitiveLink={primitiveLink}
           title={name!}
           description={description!}
           path={path}