amp-twitter: Add Storybook samples (#34273)

* Add comprehensive Storybook samples for amp-twitter * Add deleted and invalid tweet-id cases * Name exported functions in PascalCase
ampproject · May 7, 2021 · 865ef77 · 865ef77
1 parent fdad648
commit 865ef77
Show file tree

Hide file tree

Showing 2 changed files with 172 additions and 6 deletions.
diff --git a/extensions/amp-twitter/0.1/storybook/Basic.amp.js b/extensions/amp-twitter/0.1/storybook/Basic.amp.js
@@ -15,7 +15,7 @@
  */
 
 import * as Preact from '../../../../src/preact';
-import {text, withKnobs} from '@storybook/addon-knobs';
+import {boolean, number, select, withKnobs} from '@storybook/addon-knobs';
 import {withAmp} from '@ampproject/storybook-addon';
 
 export default {
@@ -33,9 +33,67 @@ export default {
 };
 
 export const Default = () => {
-  const tweetId = text('tweet id', '1356304203044499462');
+  const tweetId = select(
+    'tweet id',
+    ['1356304203044499462', '495719809695621121', '463440424141459456'],
+    '1356304203044499462'
+  );
+  const cards = boolean('show cards', true) ? undefined : 'hidden';
+  const conversation = boolean('show conversation', false) ? undefined : 'none';
+  return (
+    <amp-twitter
+      width="300"
+      height="200"
+      data-tweetid={tweetId}
+      data-cards={cards}
+      data-conversation={conversation}
+    />
+  );
+};
+
+export const Moments = () => {
+  const limit = number('limit to', 2);
+  return (
+    <amp-twitter
+      data-limit={limit}
+      data-momentid="1009149991452135424"
+      width="300"
+      height="200"
+    />
+  );
+};
+
+export const Timelines = () => {
+  const tweetLimit = number('limit to', 5);
+  const timelineSourceType = select(
+    'source type',
+    ['profile', 'likes', 'list', 'source', 'collection', 'url', 'widget'],
+    'profile'
+  );
+  const timelineScreenName = 'amphtml';
+  const timelineUserId = '3450662892';
+  return (
+    <amp-twitter
+      data-tweet-limit={tweetLimit}
+      data-timeline-source-type={timelineSourceType}
+      data-timeline-scree-name={timelineScreenName}
+      data-timeline-user-id={timelineUserId}
+      width="300"
+      height="200"
+    />
+  );
+};
+
+export const DeletedTweet = () => {
+  const withFallback = boolean('include fallback?', true);
   return (
-    <amp-twitter width="300" height="200" data-tweetid={tweetId}>
+    <amp-twitter
+      width="390"
+      height="330"
+      layout="fixed"
+      data-tweetid="882818033403789316"
+      data-cards="hidden"
+    >
       <blockquote placeholder>
         <p lang="en" dir="ltr">
           In case you missed it last week, check out our recap of AMP in 2020
@@ -47,6 +105,31 @@ export const Default = () => {
           <a href="https://t.co/eaxT3MuSAK">https://t.co/eaxT3MuSAK</a>
         </p>
       </blockquote>
+      {withFallback && (
+        <div fallback>
+          An error occurred while retrieving the tweet. It might have been
+          deleted.
+        </div>
+      )}
+    </amp-twitter>
+  );
+};
+
+export const InvalidTweet = () => {
+  return (
+    <amp-twitter
+      width="390"
+      height="330"
+      layout="fixed"
+      data-tweetid="1111111111111641653602164060160"
+      data-cards="hidden"
+    >
+      <blockquote placeholder class="twitter-tweet" data-lang="en">
+        <p>
+          This placeholder should never change because given tweet-id is
+          invalid.
+        </p>
+      </blockquote>
     </amp-twitter>
   );
 };
diff --git a/extensions/amp-twitter/1.0/storybook/Basic.amp.js b/extensions/amp-twitter/1.0/storybook/Basic.amp.js
@@ -15,7 +15,7 @@
  */
 
 import * as Preact from '../../../../src/preact';
-import {text, withKnobs} from '@storybook/addon-knobs';
+import {boolean, number, select, withKnobs} from '@storybook/addon-knobs';
 import {withAmp} from '@ampproject/storybook-addon';
 
 export default {
@@ -34,9 +34,67 @@ export default {
 };
 
 export const Default = () => {
-  const tweetId = text('tweet id', '1356304203044499462');
+  const tweetId = select(
+    'tweet id',
+    ['1356304203044499462', '495719809695621121', '463440424141459456'],
+    '1356304203044499462'
+  );
+  const cards = boolean('show cards', true) ? undefined : 'hidden';
+  const conversation = boolean('show conversation', false) ? undefined : 'none';
+  return (
+    <amp-twitter
+      width="300"
+      height="200"
+      data-tweetid={tweetId}
+      data-cards={cards}
+      data-conversation={conversation}
+    />
+  );
+};
+
+export const Moments = () => {
+  const limit = number('limit to', 2);
+  return (
+    <amp-twitter
+      data-limit={limit}
+      data-momentid="1009149991452135424"
+      width="300"
+      height="200"
+    />
+  );
+};
+
+export const Timelines = () => {
+  const tweetLimit = number('limit to', 5);
+  const timelineSourceType = select(
+    'source type',
+    ['profile', 'likes', 'list', 'source', 'collection', 'url', 'widget'],
+    'profile'
+  );
+  const timelineScreenName = 'amphtml';
+  const timelineUserId = '3450662892';
+  return (
+    <amp-twitter
+      data-tweet-limit={tweetLimit}
+      data-timeline-source-type={timelineSourceType}
+      data-timeline-scree-name={timelineScreenName}
+      data-timeline-user-id={timelineUserId}
+      width="300"
+      height="200"
+    />
+  );
+};
+
+export const DeletedTweet = () => {
+  const withFallback = boolean('include fallback?', true);
   return (
-    <amp-twitter width="300" height="200" data-tweetid={tweetId}>
+    <amp-twitter
+      width="390"
+      height="330"
+      layout="fixed"
+      data-tweetid="882818033403789316"
+      data-cards="hidden"
+    >
       <blockquote placeholder>
         <p lang="en" dir="ltr">
           In case you missed it last week, check out our recap of AMP in 2020
@@ -48,6 +106,31 @@ export const Default = () => {
           <a href="https://t.co/eaxT3MuSAK">https://t.co/eaxT3MuSAK</a>
         </p>
       </blockquote>
+      {withFallback && (
+        <div fallback>
+          An error occurred while retrieving the tweet. It might have been
+          deleted.
+        </div>
+      )}
+    </amp-twitter>
+  );
+};
+
+export const InvalidTweet = () => {
+  return (
+    <amp-twitter
+      width="390"
+      height="330"
+      layout="fixed"
+      data-tweetid="1111111111111641653602164060160"
+      data-cards="hidden"
+    >
+      <blockquote placeholder class="twitter-tweet" data-lang="en">
+        <p>
+          This placeholder should never change because given tweet-id is
+          invalid.
+        </p>
+      </blockquote>
     </amp-twitter>
   );
 };