From 0c08260b39f218433b4913920d2b6a41cbf98178 Mon Sep 17 00:00:00 2001
From: Daichi Igarashi <igarashi_daichi@cyberagent.co.jp>
Date: Fri, 13 Oct 2023 11:44:07 +0900
Subject: [PATCH] docs(spindle-ui): add story of Pagination

---
 .../src/Pagination/Pagination.stories.mdx     | 157 ++++++++++++++++--
 1 file changed, 139 insertions(+), 18 deletions(-)

diff --git a/packages/spindle-ui/src/Pagination/Pagination.stories.mdx b/packages/spindle-ui/src/Pagination/Pagination.stories.mdx
index 07a3db386..b0fd221f7 100644
--- a/packages/spindle-ui/src/Pagination/Pagination.stories.mdx
+++ b/packages/spindle-ui/src/Pagination/Pagination.stories.mdx
@@ -30,15 +30,19 @@ import { Pagination } from './Pagination';
 <Description>- `current`(必須): 現在のページ数を指定してください。</Description>
 <Description>- `total`(必須): 総ページ数を指定してください。</Description>
 <Description>
-  - `createUrl`(必須): 関数を渡すことでリンクのhrefとなる値を生成することが可能です。
+  - `linkFollowType`(必須): リンクのrelに設定する値を`all`, `none`, `firstPage`
+  から選択できます。詳しくは[linkFollowTypeの設定](#link-follow-type-settings)を参照してください。
+</Description>
+<Description>
+  - `createUrl`(必須):
+  関数を渡すことでリンクのhrefとなる値を生成することが可能です。
 </Description>
 <Description>
   - `showTotal`(任意):
   現在のページ数と総ページ数を表示します。デフォルト値はfalseです。
 </Description>
 <Description>
-  - `onPageChange`(任意):
-  リンクをクリック後に処理をしたい場合に利用できます。
+  - `onPageChange`(任意): リンクをクリック後に処理をしたい場合に利用できます。
 </Description>
 
 export const url = '/detail/CURRENT.html';
@@ -54,7 +58,7 @@ export const pageNumber = 1;
 
 <Source
   code={
-    '<Pagination total={1} current={1} createUrl={(pageNumber) => `/detail/${pageNumber}.html`} />'
+    '<Pagination total={1} current={1} linkFollowType="all" createUrl={(pageNumber) => `/detail/${pageNumber}.html`} />'
   }
 />
 
@@ -65,6 +69,7 @@ export const pageNumber = 1;
     <Pagination
       total={1}
       current={1}
+      linkFollowType="all"
       createUrl={(pageNumber) => `/detail/${pageNumber}.html`}
       {...actions('onClick')}
     />
@@ -75,7 +80,7 @@ export const pageNumber = 1;
 
 <Source
   code={
-    '<Pagination total={2} current={1} createUrl={(pageNumber) => `/detail/${pageNumber}.html`} />'
+    '<Pagination total={2} current={1} linkFollowType="all" createUrl={(pageNumber) => `/detail/${pageNumber}.html`} />'
   }
 />
 
@@ -86,6 +91,7 @@ export const pageNumber = 1;
     <Pagination
       total={2}
       current={1}
+      linkFollowType="all"
       createUrl={(pageNumber) => `/detail/${pageNumber}.html`}
       {...actions('onClick')}
     />
@@ -99,6 +105,7 @@ export const pageNumber = 1;
     <Pagination
       total={2}
       current={2}
+      linkFollowType="all"
       createUrl={(pageNumber) => `/detail/${pageNumber}.html`}
       {...actions('onClick')}
     />
@@ -109,7 +116,7 @@ export const pageNumber = 1;
 
 <Source
   code={
-    '<Pagination total={3} current={1} createUrl={(pageNumber) => `/detail/${pageNumber}.html`} />'
+    '<Pagination total={3} current={1} linkFollowType="all" createUrl={(pageNumber) => `/detail/${pageNumber}.html`} />'
   }
 />
 
@@ -120,6 +127,7 @@ export const pageNumber = 1;
     <Pagination
       total={3}
       current={1}
+      linkFollowType="all"
       createUrl={(pageNumber) => `/detail/${pageNumber}.html`}
       {...actions('onClick')}
     />
@@ -133,6 +141,7 @@ export const pageNumber = 1;
     <Pagination
       total={3}
       current={2}
+      linkFollowType="all"
       createUrl={(pageNumber) => `/detail/${pageNumber}.html`}
       {...actions('onClick')}
     />
@@ -146,6 +155,7 @@ export const pageNumber = 1;
     <Pagination
       total={3}
       current={3}
+      linkFollowType="all"
       createUrl={(pageNumber) => `/detail/${pageNumber}.html`}
       {...actions('onClick')}
     />
@@ -156,7 +166,7 @@ export const pageNumber = 1;
 
 <Source
   code={
-    '<Pagination total={4} current={1} createUrl={(pageNumber) => `/detail/${pageNumber}.html`} />'
+    '<Pagination total={4} current={1} linkFollowType="all" createUrl={(pageNumber) => `/detail/${pageNumber}.html`} />'
   }
 />
 
@@ -167,6 +177,7 @@ export const pageNumber = 1;
     <Pagination
       total={4}
       current={1}
+      linkFollowType="all"
       createUrl={(pageNumber) => `/detail/${pageNumber}.html`}
       {...actions('onClick')}
     />
@@ -180,6 +191,7 @@ export const pageNumber = 1;
     <Pagination
       total={4}
       current={2}
+      linkFollowType="all"
       createUrl={(pageNumber) => `/detail/${pageNumber}.html`}
       {...actions('onClick')}
     />
@@ -193,6 +205,7 @@ export const pageNumber = 1;
     <Pagination
       total={4}
       current={3}
+      linkFollowType="all"
       createUrl={(pageNumber) => `/detail/${pageNumber}.html`}
       {...actions('onClick')}
     />
@@ -206,6 +219,7 @@ export const pageNumber = 1;
     <Pagination
       total={4}
       current={4}
+      linkFollowType="all"
       createUrl={(pageNumber) => `/detail/${pageNumber}.html`}
       {...actions('onClick')}
     />
@@ -216,7 +230,7 @@ export const pageNumber = 1;
 
 <Source
   code={
-    '<Pagination total={5} current={1} createUrl={(pageNumber) => `/detail/${pageNumber}.html`} />'
+    '<Pagination total={5} current={1} linkFollowType="all" createUrl={(pageNumber) => `/detail/${pageNumber}.html`} />'
   }
 />
 
@@ -227,6 +241,7 @@ export const pageNumber = 1;
     <Pagination
       total={5}
       current={1}
+      linkFollowType="all"
       createUrl={(pageNumber) => `/detail/${pageNumber}.html`}
       {...actions('onClick')}
     />
@@ -240,6 +255,7 @@ export const pageNumber = 1;
     <Pagination
       total={5}
       current={2}
+      linkFollowType="all"
       createUrl={(pageNumber) => `/detail/${pageNumber}.html`}
       {...actions('onClick')}
     />
@@ -253,6 +269,7 @@ export const pageNumber = 1;
     <Pagination
       total={5}
       current={3}
+      linkFollowType="all"
       createUrl={(pageNumber) => `/detail/${pageNumber}.html`}
       {...actions('onClick')}
     />
@@ -266,6 +283,7 @@ export const pageNumber = 1;
     <Pagination
       total={5}
       current={4}
+      linkFollowType="all"
       createUrl={(pageNumber) => `/detail/${pageNumber}.html`}
       {...actions('onClick')}
     />
@@ -279,6 +297,7 @@ export const pageNumber = 1;
     <Pagination
       total={5}
       current={5}
+      linkFollowType="all"
       createUrl={(pageNumber) => `/detail/${pageNumber}.html`}
       {...actions('onClick')}
     />
@@ -295,7 +314,7 @@ export const pageNumber = 1;
 
 <Source
   code={
-    '<Pagination total={6} current={1} createUrl={(pageNumber) => `/detail/${pageNumber}.html`} />'
+    '<Pagination total={6} current={1} linkFollowType="all" createUrl={(pageNumber) => `/detail/${pageNumber}.html`} />'
   }
 />
 
@@ -306,13 +325,13 @@ export const pageNumber = 1;
     <Pagination
       total={6}
       current={1}
+      linkFollowType="all"
       createUrl={(pageNumber) => `/detail/${pageNumber}.html`}
       {...actions('onClick')}
     />
   </Story>
 </Preview>
 
-
 #### current 2
 
 <Preview withSource="open">
@@ -320,6 +339,7 @@ export const pageNumber = 1;
     <Pagination
       total={6}
       current={2}
+      linkFollowType="all"
       createUrl={(pageNumber) => `/detail/${pageNumber}.html`}
       {...actions('onClick')}
     />
@@ -333,6 +353,7 @@ export const pageNumber = 1;
     <Pagination
       total={6}
       current={3}
+      linkFollowType="all"
       createUrl={(pageNumber) => `/detail/${pageNumber}.html`}
       {...actions('onClick')}
     />
@@ -346,6 +367,7 @@ export const pageNumber = 1;
     <Pagination
       total={6}
       current={4}
+      linkFollowType="all"
       createUrl={(pageNumber) => `/detail/${pageNumber}.html`}
       {...actions('onClick')}
     />
@@ -359,13 +381,13 @@ export const pageNumber = 1;
     <Pagination
       total={6}
       current={5}
+      linkFollowType="all"
       createUrl={(pageNumber) => `/detail/${pageNumber}.html`}
       {...actions('onClick')}
     />
   </Story>
 </Preview>
 
-
 #### current 6
 
 <Preview withSource="open">
@@ -373,6 +395,7 @@ export const pageNumber = 1;
     <Pagination
       total={6}
       current={6}
+      linkFollowType="all"
       createUrl={(pageNumber) => `/detail/${pageNumber}.html`}
       {...actions('onClick')}
     />
@@ -383,7 +406,7 @@ export const pageNumber = 1;
 
 <Source
   code={
-    '<Pagination total={7} current={1} createUrl={(pageNumber) => `/detail/${pageNumber}.html`} />'
+    '<Pagination total={7} current={1} linkFollowType="all" createUrl={(pageNumber) => `/detail/${pageNumber}.html`} />'
   }
 />
 
@@ -394,6 +417,7 @@ export const pageNumber = 1;
     <Pagination
       total={7}
       current={1}
+      linkFollowType="all"
       createUrl={(pageNumber) => `/detail/${pageNumber}.html`}
       {...actions('onClick')}
     />
@@ -407,6 +431,7 @@ export const pageNumber = 1;
     <Pagination
       total={7}
       current={2}
+      linkFollowType="all"
       createUrl={(pageNumber) => `/detail/${pageNumber}.html`}
       {...actions('onClick')}
     />
@@ -420,6 +445,7 @@ export const pageNumber = 1;
     <Pagination
       total={7}
       current={3}
+      linkFollowType="all"
       createUrl={(pageNumber) => `/detail/${pageNumber}.html`}
       {...actions('onClick')}
     />
@@ -433,6 +459,7 @@ export const pageNumber = 1;
     <Pagination
       total={7}
       current={4}
+      linkFollowType="all"
       createUrl={(pageNumber) => `/detail/${pageNumber}.html`}
       {...actions('onClick')}
     />
@@ -446,6 +473,7 @@ export const pageNumber = 1;
     <Pagination
       total={7}
       current={5}
+      linkFollowType="all"
       createUrl={(pageNumber) => `/detail/${pageNumber}.html`}
       {...actions('onClick')}
     />
@@ -459,6 +487,7 @@ export const pageNumber = 1;
     <Pagination
       total={7}
       current={6}
+      linkFollowType="all"
       createUrl={(pageNumber) => `/detail/${pageNumber}.html`}
       {...actions('onClick')}
     />
@@ -472,6 +501,7 @@ export const pageNumber = 1;
     <Pagination
       total={7}
       current={7}
+      linkFollowType="all"
       createUrl={(pageNumber) => `/detail/${pageNumber}.html`}
       {...actions('onClick')}
     />
@@ -486,7 +516,7 @@ export const pageNumber = 1;
 
 <Source
   code={
-    '<Pagination total={1000} current={1} createUrl={(pageNumber) => `/detail/${pageNumber}.html`} />'
+    '<Pagination total={1000} current={1} linkFollowType="all" createUrl={(pageNumber) => `/detail/${pageNumber}.html`} />'
   }
 />
 
@@ -497,6 +527,7 @@ export const pageNumber = 1;
     <Pagination
       total={1000}
       current={1}
+      linkFollowType="all"
       createUrl={(pageNumber) => `/detail/${pageNumber}.html`}
       {...actions('onClick')}
     />
@@ -510,6 +541,7 @@ export const pageNumber = 1;
     <Pagination
       total={1000}
       current={2}
+      linkFollowType="all"
       createUrl={(pageNumber) => `/detail/${pageNumber}.html`}
       {...actions('onClick')}
     />
@@ -523,6 +555,7 @@ export const pageNumber = 1;
     <Pagination
       total={1000}
       current={3}
+      linkFollowType="all"
       createUrl={(pageNumber) => `/detail/${pageNumber}.html`}
       {...actions('onClick')}
     />
@@ -536,6 +569,7 @@ export const pageNumber = 1;
     <Pagination
       total={1000}
       current={4}
+      linkFollowType="all"
       createUrl={(pageNumber) => `/detail/${pageNumber}.html`}
       {...actions('onClick')}
     />
@@ -549,6 +583,7 @@ export const pageNumber = 1;
     <Pagination
       total={1000}
       current={5}
+      linkFollowType="all"
       createUrl={(pageNumber) => `/detail/${pageNumber}.html`}
       {...actions('onClick')}
     />
@@ -562,6 +597,7 @@ export const pageNumber = 1;
     <Pagination
       total={1000}
       current={200}
+      linkFollowType="all"
       createUrl={(pageNumber) => `/detail/${pageNumber}.html`}
       {...actions('onClick')}
     />
@@ -575,6 +611,7 @@ export const pageNumber = 1;
     <Pagination
       total={1000}
       current={998}
+      linkFollowType="all"
       createUrl={(pageNumber) => `/detail/${pageNumber}.html`}
       {...actions('onClick')}
     />
@@ -588,6 +625,7 @@ export const pageNumber = 1;
     <Pagination
       total={1000}
       current={999}
+      linkFollowType="all"
       createUrl={(pageNumber) => `/detail/${pageNumber}.html`}
       {...actions('onClick')}
     />
@@ -601,6 +639,7 @@ export const pageNumber = 1;
     <Pagination
       total={1000}
       current={1000}
+      linkFollowType="all"
       createUrl={(pageNumber) => `/detail/${pageNumber}.html`}
       {...actions('onClick')}
     />
@@ -618,6 +657,7 @@ export const pageNumber = 1;
     <Pagination
       total={20}
       current={8}
+      linkFollowType="all"
       showTotal={true}
       createUrl={(pageNumber) => `/detail/${pageNumber}.html`}
       {...actions('onClick')}
@@ -627,7 +667,7 @@ export const pageNumber = 1;
 
 <Source
   code={
-    '<Pagination total={20} current={8} createUrl={(pageNumber) => `/detail/${pageNumber}.html`} />'
+    '<Pagination total={20} current={8} linkFollowType="all" createUrl={(pageNumber) => `/detail/${pageNumber}.html`} />'
   }
 />
 
@@ -646,19 +686,100 @@ export const handleClick = (event, pageNumber) => {
     <Pagination
       total={20}
       current={8}
+      linkFollowType="all"
       createUrl={(pageNumber) => `/detail/${pageNumber}.html`}
-      onPageChange={(event, pageNumber) => { handleClick(event, pageNumber); }}
+      onPageChange={(event, pageNumber) => {
+        handleClick(event, pageNumber);
+      }}
       {...actions('onClick')}
     />
   </Story>
 </Preview>
 
 <Source
-code={`
+  code={
+    `
   const handleClick = (event, pageNumber) => {
     event.preventDefault();
     // router.push などで遷移処理を記述
 };
-` +'<Pagination total={20} current={8} createUrl={(pageNumber) => `/detail/${pageNumber}.html`} onPageChange={(event, pageNumber) => { handleClick(event, pageNumber); }} />'+ `
-`}
+` +
+    '<Pagination total={20} current={8} linkFollowType="all" createUrl={(pageNumber) => `/detail/${pageNumber}.html`} onPageChange={(event, pageNumber) => { handleClick(event, pageNumber); }} />' +
+    `
+`
+  }
+/>
+
+<h2 id="link-follow-type-settings">linkFollowTypeの設定</h2>
+
+### 全てのリンクをdofollowにする
+
+<Description>
+  linkFollowTypeをallに指定することで、全てのページ遷移リンクにrel属性が設定されません。全てのページをクロールして欲しい場合に指定します。
+</Description>
+
+<Preview withSource="open">
+  <Story name="linkFollowType all">
+    <Pagination
+      total={7}
+      current={2}
+      linkFollowType="all"
+      createUrl={(pageNumber) => `/detail/${pageNumber}.html`}
+      {...actions('onClick')}
+    />
+  </Story>
+</Preview>
+
+<Source
+  code={
+    '<Pagination total={7} current={2} linkFollowType="all" createUrl={(pageNumber) => `/detail/${pageNumber}.html`} />'
+  }
+/>
+
+### 全てのリンクをnofollowにする
+
+<Description>
+  linkFollowTypeをnoneに指定することで、全てのページ遷移リンクのrel属性にnofollowが設定されます。いずれのページもクロールして欲しくない場合に指定します。
+</Description>
+
+<Preview withSource="open">
+  <Story name="linkFollowType none">
+    <Pagination
+      total={7}
+      current={2}
+      linkFollowType="none"
+      createUrl={(pageNumber) => `/detail/${pageNumber}.html`}
+      {...actions('onClick')}
+    />
+  </Story>
+</Preview>
+
+<Source
+  code={
+    '<Pagination total={7} current={2} linkFollowType="none" createUrl={(pageNumber) => `/detail/${pageNumber}.html`} />'
+  }
+/>
+
+### 1ページ目のリンク以外をnofollowにする
+
+<Description>
+  linkFollowTypeをfirstPageに指定することで、1ページ目への遷移リンク以外のrel属性にnofollowが設定されます。1ページ目のみをクロールして欲しい場合に指定します。
+</Description>
+
+<Preview withSource="open">
+  <Story name="linkFollowType firstPage">
+    <Pagination
+      total={7}
+      current={2}
+      linkFollowType="firstPage"
+      createUrl={(pageNumber) => `/detail/${pageNumber}.html`}
+      {...actions('onClick')}
+    />
+  </Story>
+</Preview>
+
+<Source
+  code={
+    '<Pagination total={7} current={2} linkFollowType="firstPage" createUrl={(pageNumber) => `/detail/${pageNumber}.html`} />'
+  }
 />