migrate inline-gallery, stream-gallery, and lightbox-gallery (#37727)

ampproject · Feb 24, 2022 · 265e0b0 · 265e0b0
1 parent 8b1516c
commit 265e0b0
Show file tree

Hide file tree

Showing 7 changed files with 325 additions and 104 deletions.
diff --git a/build-system/test-configs/forbidden-terms.js b/build-system/test-configs/forbidden-terms.js
@@ -727,20 +727,14 @@ const forbiddenTermsGlobal = {
       'extensions/amp-iframe/0.1/storybook/Basic.amp.js',
       'extensions/amp-iframe/1.0/storybook/Basic.amp.js',
       'extensions/amp-image-slider/0.1/storybook/Basic.amp.js',
-      'extensions/amp-inline-gallery/1.0/storybook/Basic.js',
-      'extensions/amp-lightbox/1.0/storybook/Basic.amp.js',
       'extensions/amp-lightbox/1.0/storybook/Basic.js',
-      'extensions/amp-lightbox-gallery/1.0/storybook/Basic.amp.js',
-      'extensions/amp-lightbox-gallery/1.0/storybook/Basic.js',
       'extensions/amp-selector/1.0/storybook/Basic.amp.js',
       'extensions/amp-selector/1.0/storybook/Basic.js',
       'extensions/amp-sidebar/0.1/storybook/Basic.amp.js',
       'extensions/amp-sidebar/1.0/storybook/Basic.amp.js',
       'extensions/amp-sidebar/1.0/storybook/Basic.js',
       'extensions/amp-soundcloud/1.0/storybook/Basic.amp.js',
       'extensions/amp-soundcloud/1.0/storybook/Basic.js',
-      'extensions/amp-stream-gallery/1.0/storybook/Basic.amp.js',
-      'extensions/amp-stream-gallery/1.0/storybook/Basic.js',
       'extensions/amp-timeago/1.0/storybook/Basic.js',
       'extensions/amp-video/1.0/storybook/Basic.amp.js',
       'extensions/amp-video/1.0/storybook/Basic.js',

diff --git a/extensions/amp-inline-gallery/1.0/storybook/Basic.js b/extensions/amp-inline-gallery/1.0/storybook/Basic.js
@@ -1,5 +1,3 @@
-import {boolean, number, select, withKnobs} from '@storybook/addon-knobs';
-
 import * as Preact from '#preact';
 
 import {BentoBaseCarousel} from '../../../amp-base-carousel/1.0/component';
@@ -12,31 +10,89 @@ import {
 export default {
   title: 'InlineGallery',
   component: BentoInlineGallery,
-  decorators: [withKnobs],
+  argTypes: {
+    aspectRatio: {
+      name: 'thumbnail aspect ratio (w/h)',
+      defaultValue: 3 / 2,
+      control: {type: 'number'},
+    },
+    topInset: {
+      name: 'top indicator inset?',
+      defaultValue: false,
+      control: {type: 'boolean'},
+    },
+    bottomInset: {
+      name: 'bottom indicator inset?',
+      defaultValue: false,
+      control: {type: 'boolean'},
+    },
+    autoAdvance: {
+      name: 'auto advance',
+      defaultValue: false,
+      control: {type: 'boolean'},
+    },
+    loop: {
+      name: 'thumbnail loop',
+      defaultValue: false,
+      control: {type: 'boolean'},
+    },
+    paginationHeight: {
+      name: 'top indicator height',
+      control: {type: 'number'},
+      defaultValue: 20,
+    },
+    autoAdvanceCount: {
+      name: 'auto advance count',
+      control: {type: 'number'},
+      defaultValue: 1,
+    },
+    autoAdvanceInterval: {
+      name: 'auto advance interval',
+      control: {type: 'number'},
+      defaultValue: 1000,
+    },
+    autoAdvanceLoops: {
+      name: 'auto advance loops',
+      control: {type: 'number'},
+      defaultValue: 3,
+    },
+    thumbnailHeight: {
+      name: 'thumbnail height',
+      control: {type: 'number'},
+      defaultValue: 50,
+    },
+    width: {type: 'number'},
+    height: {type: 'number'},
+    orientation: {
+      name: 'orientation',
+      control: {type: 'select'},
+      options: ['horizontal', 'vertical'],
+      defaultValue: 'vertical',
+    },
+  },
 };
 
-export const _default = () => {
-  const width = 360;
-  const height = 240;
-  const paginationHeight = number('top indicator height', 20);
-  const topInset = boolean('top indicator inset?', false);
-  const bottomInset = boolean('bottom indicator inset?', false);
-  const autoAdvance = boolean('auto advance', false);
-  const autoAdvanceCount = number('auto advance count', 1);
-  const autoAdvanceInterval = number('auto advance interval', 1000);
-  const autoAdvanceLoops = number('auto advance loops', 3);
-  const thumbnailHeight = number('thumbnail height', 50);
-  const loop = boolean('thumbnail loop', false);
-  const aspectRatio = number('thumbnail aspect ratio (w/h)', 3 / 2);
-  const orientation = select(
-    'orientation',
-    ['horizontal', 'vertical'],
-    'vertical'
-  );
-
+export const Default = ({
+  aspectRatio,
+  autoAdvance,
+  autoAdvanceCount,
+  autoAdvanceInterval,
+  autoAdvanceLoops,
+  bottomInset,
+  height,
+  loop,
+  orientation,
+  paginationHeight,
+  thumbnailHeight,
+  topInset,
+  width,
+  ...args
+}) => {
+  width = width ?? 360;
+  height = height ?? 240;
   return (
     <>
-      <BentoInlineGallery style={{width}}>
+      <BentoInlineGallery style={{width}} {...args}>
         <BentoInlineGalleryPagination
           style={{height: paginationHeight}}
           inset={topInset}
@@ -89,14 +145,19 @@ export const _default = () => {
   );
 };
 
-export const WithLooping = () => {
-  const width = number('width', 440);
-  const height = number('height', 225);
-  const paginationHeight = number('indicator height', 20);
-  const inset = boolean('inset?', false);
-  const thumbnailHeight = number('thumbnail height', 50);
-  const loop = boolean('thumbnail loop', true);
-  const aspectRatio = number('thumbnail aspect ratio', 2);
+export const WithLooping = ({
+  aspectRatio,
+  height,
+  inset,
+  loop,
+  paginationHeight,
+  thumbnailHeight,
+  width,
+  ...args
+}) => {
+  width = width ?? 440;
+  height = height ?? 225;
+
   const slides = [
     'lightpink',
     'lightcoral',
@@ -120,7 +181,7 @@ export const WithLooping = () => {
   ));
 
   return (
-    <BentoInlineGallery style={{width, position: 'relative'}}>
+    <BentoInlineGallery style={{width, position: 'relative'}} {...args}>
       <BentoBaseCarousel loop style={{height, position: 'relative'}}>
         {slides}
       </BentoBaseCarousel>

diff --git a/extensions/amp-lightbox-gallery/1.0/storybook/Basic.amp.js b/extensions/amp-lightbox-gallery/1.0/storybook/Basic.amp.js
@@ -1,18 +1,18 @@
 import {withAmp} from '@ampproject/storybook-addon';
-import {withKnobs} from '@storybook/addon-knobs';
 
 import * as Preact from '#preact';
 
 export default {
   title: 'amp-lightbox-gallery-1_0',
-  decorators: [withKnobs, withAmp],
+  decorators: [withAmp],
 
   parameters: {
     extensions: [
       {name: 'amp-base-carousel', version: '1.0'},
       {name: 'amp-stream-gallery', version: '1.0'},
       {name: 'amp-lightbox-gallery', version: '1.0'},
     ],
+    argTypes: {},
     experiments: ['bento'],
   },
 };

diff --git a/extensions/amp-lightbox-gallery/1.0/storybook/Basic.js b/extensions/amp-lightbox-gallery/1.0/storybook/Basic.js
@@ -1,5 +1,3 @@
-import {withKnobs} from '@storybook/addon-knobs';
-
 import * as Preact from '#preact';
 
 import {BentoBaseCarousel} from '../../../amp-base-carousel/1.0/component';
@@ -15,7 +13,7 @@ import '../../../amp-base-carousel/1.0/component.jss';
 export default {
   title: 'LightboxGallery',
   component: BentoLightboxGalleryProvider,
-  decorators: [withKnobs],
+  argTypes: {},
 };
 
 export const _default = () => {

diff --git a/extensions/amp-lightbox/1.0/storybook/Basic.amp.js b/extensions/amp-lightbox/1.0/storybook/Basic.amp.js
@@ -1,25 +1,39 @@
 import {withAmp} from '@ampproject/storybook-addon';
-import {boolean, select, text, withKnobs} from '@storybook/addon-knobs';
 
 import * as Preact from '#preact';
 
 export default {
   title: 'amp-lightbox-1_0',
-  decorators: [withKnobs, withAmp],
+  decorators: [withAmp],
 
   parameters: {
     extensions: [{name: 'amp-lightbox', version: '1.0'}],
   },
+  argTypes: {
+    animation: {
+      name: 'animation',
+      control: {type: 'select'},
+      options: ['fade-in', 'fly-in-top', 'fly-in-bottom'],
+    },
+    backgroundColor: {
+      name: 'background color',
+      control: {type: 'text'},
+      defaultValue: '',
+    },
+    color: {
+      name: 'font color',
+      control: {type: 'text'},
+      defaultValue: '',
+    },
+    lotsOfText: {
+      name: 'lotsOfText',
+      control: {type: 'boolean'},
+      defaultValue: true,
+    },
+  },
 };
 
-export const Default = () => {
-  const animation = select('animation', [
-    'fade-in',
-    'fly-in-top',
-    'fly-in-bottom',
-  ]);
-  const backgroundColor = text('background color', '');
-  const color = text('font color', '');
+export const Default = ({animation, backgroundColor, color, ...args}) => {
   return (
     <>
       <style>{`
@@ -29,7 +43,12 @@ export const Default = () => {
         }
       `}</style>
       <div style="height: 300px;">
-        <amp-lightbox id="lightbox" layout="nodisplay" animation={animation}>
+        <amp-lightbox
+          id="lightbox"
+          layout="nodisplay"
+          animation={animation}
+          {...args}
+        >
           <p>Test</p>
           <button slot="close-button">Close</button>
         </amp-lightbox>
@@ -41,15 +60,13 @@ export const Default = () => {
   );
 };
 
-export const overflowAuto = () => {
-  const animation = select('animation', [
-    'fade-in',
-    'fly-in-top',
-    'fly-in-bottom',
-  ]);
-  const backgroundColor = text('background color', 'rgba(0,0,0,0.5)');
-  const color = text('font color', '');
-  const lotsOfText = boolean('lots of text?', true);
+export const OverflowAuto = ({
+  animation,
+  backgroundColor,
+  color,
+  lotsOfText,
+  ...args
+}) => {
   return (
     <>
       <style>{`
@@ -59,7 +76,12 @@ export const overflowAuto = () => {
         }
       `}</style>
       <div style="height: 300px;">
-        <amp-lightbox id="lightbox" layout="nodisplay" animation={animation}>
+        <amp-lightbox
+          id="lightbox"
+          layout="nodisplay"
+          animation={animation}
+          {...args}
+        >
           <p>
             Dessert tootsie roll marzipan pastry. Powder powder jelly beans
             chocolate bar candy sugar plum. Jelly-o gummi bears jelly icing