♻️ Migrate stories 30..34 to controls

build-system/test-configs/forbidden-terms.js

@@ -722,11 +722,6 @@ const forbiddenTermsGlobal = {
       'The @storybook/addon-knobs package has been deprecated. Use Controls instead (`args` and `argTypes`). https://storybook.js.org/docs/react/essentials/controls',
     allowlist: [
       // TODO(#35923): Update existing files to use Controls instead.
-      'extensions/amp-date-display/1.0/storybook/Basic.amp.js',
-      'extensions/amp-date-display/1.0/storybook/Basic.js',
-      '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-lightbox/1.0/storybook/Basic.js',
       'extensions/amp-selector/1.0/storybook/Basic.amp.js',
       'extensions/amp-selector/1.0/storybook/Basic.js',

extensions/amp-date-display/1.0/README.md

@@ -53,7 +53,7 @@ The Bento Date Display Preact/React component allows consumers to render their o
 
 #### `datetime`
 
-Required prop. Denotes the date and time as a Date, String, or Nuumber. If String, must be a standard ISO 8601 date string (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`, it will use the time the page loaded to render its template. If Number, must be a POSIX epoch value in milliseconds.
+Required prop. Denotes the date and time as a Date, String, or Number. If String, must be a standard ISO 8601 date string (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`, it will use the time the page loaded to render its template. If Number, must be a POSIX epoch value in milliseconds.
 
 #### `displayIn`
 

extensions/amp-date-display/1.0/storybook/Basic.amp.js

@@ -1,41 +1,55 @@
 import {withAmp} from '@ampproject/storybook-addon';
-import {date, select, withKnobs} from '@storybook/addon-knobs';
 
 import * as Preact from '#preact';
 
-const DISPLAY_IN_OPTIONS = ['utc', 'local'];
-const LOCALES = ['en-US', 'en-GB', 'fr', 'ru', 'ar', 'he', 'ja'];
-
 export default {
   title: 'amp-date-display-1_0',
-  decorators: [withKnobs, withAmp],
-
+  decorators: [withAmp],
   parameters: {
     extensions: [
       {name: 'amp-date-display', version: '1.0'},
       {name: 'amp-mustache', version: '0.2'},
     ],
-
     experiments: ['bento'],
   },
+  argTypes: {
+    dateTime: {
+      name: 'Date/time',
+      control: {type: 'date'},
+      defaultValue: 1234567890000,
+    },
+    displayIn: {
+      name: 'Display in',
+      defaultValue: 'utc',
+      options: ['utc', 'local'],
+      control: {type: 'select'},
+    },
+    locale: {
+      name: 'Locale',
+      defaultValue: 'en-US',
+      options: ['en-US', 'en-GB', 'fr', 'ru', 'ar', 'he', 'ja'],
+      control: {type: 'select'},
+    },
+    template: {
+      name: 'Template',
+      defaultValue: 'template1',
+      options: ['template1', 'template2'],
+      control: {type: 'select'},
+    },
+  },
 };
 
-export const Default = () => {
-  const datetime = new Date(date('Date/Time', new Date())).toISOString();
-  const displayIn = select(
-    'Display in',
-    DISPLAY_IN_OPTIONS,
-    DISPLAY_IN_OPTIONS[0]
-  );
-  const locale = select('Locale', LOCALES, LOCALES[0]);
+export const Default = ({dateTime, displayIn, locale, ...args}) => {
+  dateTime = new Date(dateTime);
   return (
     <amp-date-display
-      datetime={datetime}
+      datetime={dateTime}
       display-in={displayIn}
       locale={locale}
       layout="responsive"
       width="100"
       height="100"
+      {...args}
     >
       <template type="amp-mustache">
         <div>
@@ -47,39 +61,29 @@ export const Default = () => {
   );
 };
 
-Default.storyName = 'default';
-
-export const DefaultRenderer = () => {
-  const datetime = new Date(date('Date/Time', new Date())).toISOString();
-  const displayIn = select(
-    'Display in',
-    DISPLAY_IN_OPTIONS,
-    DISPLAY_IN_OPTIONS[0]
-  );
-  const locale = select('Locale', LOCALES, LOCALES[0]);
+export const DefaultRenderer = ({dateTime, displayIn, locale, ...args}) => {
+  dateTime = new Date(dateTime);
   return (
     <amp-date-display
-      datetime={datetime}
+      datetime={dateTime}
       display-in={displayIn}
       locale={locale}
       layout="responsive"
       width="100"
       height="100"
+      {...args}
     />
   );
 };
 
-DefaultRenderer.storyName = 'default renderer';
-
-export const ExternalTemplate = () => {
-  const datetime = new Date(date('Date/Time', new Date())).toISOString();
-  const displayIn = select(
-    'Display in',
-    DISPLAY_IN_OPTIONS,
-    DISPLAY_IN_OPTIONS[0]
-  );
-  const locale = select('Locale', LOCALES, LOCALES[0]);
-  const template = select('Template', ['template1', 'template2'], 'template1');
+export const ExternalTemplate = ({
+  dateTime,
+  displayIn,
+  locale,
+  template,
+  ...args
+}) => {
+  dateTime = new Date(dateTime);
   return (
     <div>
       <template type="amp-mustache" id="template1">
@@ -89,16 +93,15 @@ export const ExternalTemplate = () => {
         <div>{`Template2: {{day}} {{month}} {{year}}`}</div>
       </template>
       <amp-date-display
-        datetime={datetime}
+        datetime={dateTime}
         display-in={displayIn}
         locale={locale}
         template={template}
         layout="responsive"
         width="100"
         height="100"
+        {...args}
       ></amp-date-display>
     </div>
   );
 };
-
-ExternalTemplate.storyName = 'external template';

extensions/amp-date-display/1.0/storybook/Basic.js

@@ -1,51 +1,52 @@
-import {date, select, withKnobs} from '@storybook/addon-knobs';
-
 import * as Preact from '#preact';
 
 import {BentoDateDisplay} from '../component';
 
 export default {
   title: 'DateDisplay',
   component: BentoDateDisplay,
-  decorators: [withKnobs],
+  argTypes: {
+    datetime: {
+      name: 'Date/time',
+      control: {type: 'date'},
+      defaultValue: 1234567890000,
+    },
+    displayIn: {
+      name: 'Display in',
+      defaultValue: 'utc',
+      options: ['utc', 'local'],
+      control: {type: 'select'},
+    },
+    locale: {
+      name: 'Locale',
+      defaultValue: 'en-US',
+      options: ['en-US', 'en-GB', 'fr', 'ru', 'ar', 'he', 'ja'],
+      control: {type: 'select'},
+    },
+  },
 };
 
-const DISPLAY_IN_OPTIONS = ['utc', 'local'];
-const LOCALES = ['en-US', 'en-GB', 'fr', 'ru', 'ar', 'he', 'ja'];
-
-export const _default = () => {
-  const dateTime = date('Date/time', new Date());
-  const displayIn = select(
-    'Display in',
-    DISPLAY_IN_OPTIONS,
-    DISPLAY_IN_OPTIONS[0]
-  );
-  const locale = select('Locale', LOCALES, LOCALES[0]);
+export const Default = ({datetime, displayIn, locale, ...args}) => {
   return (
     <BentoDateDisplay
-      datetime={dateTime}
+      datetime={datetime}
       displayIn={displayIn}
       locale={locale}
       render={(date) => (
         <div>{`ISO: ${date.iso}; locale: ${date.localeString}`}</div>
       )}
+      {...args}
     />
   );
 };
 
-export const defaultRenderer = () => {
-  const displayIn = select(
-    'Display in',
-    DISPLAY_IN_OPTIONS,
-    DISPLAY_IN_OPTIONS[0]
-  );
-  const dateTime = date('Date/time', new Date());
-  const locale = select('Locale', LOCALES, LOCALES[0]);
+export const DefaultRenderer = ({datetime, displayIn, locale, ...args}) => {
   return (
     <BentoDateDisplay
-      datetime={dateTime}
+      datetime={datetime}
       displayIn={displayIn}
       locale={locale}
+      {...args}
     />
   );
 };

extensions/amp-iframe/0.1/storybook/Basic.amp.js

@@ -1,11 +1,10 @@
 import {withAmp} from '@ampproject/storybook-addon';
-import {withKnobs} from '@storybook/addon-knobs';
 
 import * as Preact from '#preact';
 
 export default {
   title: 'amp-iframe',
-  decorators: [withKnobs, withAmp],
+  decorators: [withAmp],
 
   parameters: {
     extensions: [{name: 'amp-iframe', version: '0.1'}],

extensions/amp-iframe/1.0/storybook/Basic.amp.js

@@ -1,32 +1,28 @@
 import {withAmp} from '@ampproject/storybook-addon';
-import {text, withKnobs} from '@storybook/addon-knobs';
 
 import * as Preact from '#preact';
 
 export default {
   title: 'amp-iframe-1_0',
-  decorators: [withKnobs, withAmp],
-
+  decorators: [withAmp],
   parameters: {
     extensions: [{name: 'amp-iframe', version: '1.0'}],
     experiments: ['bento'],
   },
+  argTypes: {
+    src: {
+      name: 'iframe src',
+      defaultValue: 'https://www.wikipedia.org/',
+      control: {type: 'text'},
+    },
+  },
 };
 
-export const WithSrc = () => {
-  return (
-    <amp-iframe
-      width="800"
-      height="600"
-      src="https://www.wikipedia.org/"
-    ></amp-iframe>
-  );
+export const WithSrc = ({src}) => {
+  return <amp-iframe width="800" height="600" src={src}></amp-iframe>;
 };
 
-WithSrc.storyName = 'amp-iframe with src attribute';
-
-export const WithPlaceholder = () => {
-  const src = text('src', `https://www.wikipedia.org/`);
+export const WithPlaceholder = ({src}) => {
   return (
     <amp-iframe width="800" height="600" src={src}>
       <h1 placeholder>Placeholder</h1>
@@ -35,8 +31,6 @@ export const WithPlaceholder = () => {
   );
 };
 
-WithPlaceholder.storyName = 'amp-iframe with placeholder';
-
 export const WithResizableIframe = () => {
   return (
     <div>
@@ -55,8 +49,6 @@ export const WithResizableIframe = () => {
   );
 };
 
-WithResizableIframe.storyName = 'resizable amp-iframe';
-
 export const WithContentBelow = () => {
   return (
     <div>
@@ -79,8 +71,6 @@ export const WithContentBelow = () => {
   );
 };
 
-WithContentBelow.storyName = 'resizeable amp-iframe with content below';
-
 export const WithOverflowButton = () => {
   return (
     <div>
@@ -99,5 +89,3 @@ export const WithOverflowButton = () => {
     </div>
   );
 };
-
-WithOverflowButton.storyName = 'resizeable amp-iframe with overflow';

extensions/amp-iframe/1.0/storybook/Basic.js

@@ -5,14 +5,21 @@ import {BentoIframe} from '../component';
 export default {
   title: 'Iframe',
   component: BentoIframe,
+  argTypes: {
+    src: {
+      name: 'iframe src',
+      defaultValue: 'https://www.wikipedia.org/',
+      control: {type: 'text'},
+    },
+  },
 };
 
-export const _default = () => {
+export const _default = ({src}) => {
   return (
     <BentoIframe
       style={{width: 800, height: 600}}
       iframeStyle={{border: '1px solid black'}}
-      src="https://www.wikipedia.org/"
+      src={src}
       title="Wikipedia"
     ></BentoIframe>
   );
@@ -42,11 +49,10 @@ export const WithIntersectingIframe = () => {
   );
 };
 
-WithIntersectingIframe.storyName = 'Resizable iframe in viewport';
-
 export const WithResizableIframe = () => {
   return (
     <div>
+      <h1>Scroll down</h1>
       <div
         style={{
           width: '100%',
@@ -68,11 +74,10 @@ export const WithResizableIframe = () => {
   );
 };
 
-WithResizableIframe.storyName = 'Resizable iframe outside viewport';
-
 export const WithSendIntersectionsPostMessage = () => {
   return (
     <div>
+      <h1>Scroll down</h1>
       <div
         style={{
           width: '100%',
@@ -91,5 +96,3 @@ export const WithSendIntersectionsPostMessage = () => {
     </div>
   );
 };
-
-WithSendIntersectionsPostMessage.storyName = 'Send intersections';