♻️ Migrate Stories 45..49 to args

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

@@ -725,10 +725,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-lightbox/1.0/storybook/Basic.js',
-      'extensions/amp-soundcloud/1.0/storybook/Basic.amp.js',
-      'extensions/amp-soundcloud/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',
       'extensions/amp-video-iframe/1.0/storybook/Basic.amp.js',

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

@@ -1,5 +1,3 @@
-import {boolean, select, text, withKnobs} from '@storybook/addon-knobs';
-
 import {BentoLightbox} from '#bento/components/bento-lightbox/1.0/component';
 
 import * as Preact from '#preact';
@@ -10,7 +8,22 @@ import '#bento/components/bento-lightbox/1.0/component.jss';
 export default {
   title: 'Lightbox',
   component: BentoLightbox,
-  decorators: [withKnobs],
+  argTypes: {
+    animation: {
+      name: 'animation',
+      defaultValue: 'fade-in',
+      options: ['fade-in', 'fly-in-top', 'fly-in-bottom'],
+      control: {type: 'select'},
+    },
+    backgroundColor: {
+      name: 'backgroundColor',
+      control: {type: 'color'},
+    },
+    color: {
+      name: 'color',
+      control: {type: 'color'},
+    },
+  },
 };
 
 /**
@@ -154,20 +167,13 @@ function BentoLightboxWithActions({children, ...rest}) {
   );
 }
 
-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 = ({backgroundColor, color, ...args}) => {
   return (
     <div>
       <BentoLightboxWithActions
         id="lightbox"
-        animation={animation}
         style={{backgroundColor, color}}
+        {...args}
       >
         <p>
           Lorem <i>ips</i>um dolor sit amet, has nisl nihil convenire et, vim at
@@ -178,23 +184,13 @@ export const _default = () => {
   );
 };
 
-export const scrollable = () => {
-  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 scrollable = boolean('scrollable', true);
-  const lotsOfText = boolean('lots of text?', true);
+export const scrollable = ({backgroundColor, color, lotsOfText, ...args}) => {
   return (
     <div>
       <BentoLightboxWithActions
         id="lightbox"
-        animation={animation}
         style={{backgroundColor, color}}
-        scrollable={scrollable}
+        {...args}
       >
         <p>
           Dessert tootsie roll marzipan pastry. Powder powder jelly beans
@@ -329,3 +325,26 @@ export const scrollable = () => {
     </div>
   );
 };
+
+scrollable.args = {
+  scrollable: true,
+  lotsOfText: true,
+};
+
+scrollable.argtypes = {
+  animation: {
+    name: 'animation',
+    defaultValue: 'fade-in',
+    options: ['fade-in', 'fly-in-top', 'fly-in-bottom'],
+    control: {type: 'select'},
+  },
+  backgroundColor: {
+    name: 'backgroundColor',
+    control: {type: 'color'},
+    defaultValue: '',
+  },
+  color: {
+    name: 'color',
+    control: {type: 'color'},
+  },
+};

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

@@ -1,50 +1,51 @@
 import {withAmp} from '@ampproject/storybook-addon';
-import {boolean, color, text, withKnobs} from '@storybook/addon-knobs';
 
 import * as Preact from '#preact';
 
 import {rgba2hex} from './converter';
 
 export default {
   title: 'amp-soundcloud-1_0',
-  decorators: [withKnobs, withAmp],
+  decorators: [withAmp],
 
   parameters: {
     extensions: [{name: 'amp-soundcloud', version: '1.0'}],
     experiments: ['bento'],
   },
 };
 
-export const TrackId = () => {
-  // Knobs
-  const componentColor = color('Color', 'RGBA(255, 85, 0, 1)');
-  const height = text('Height', '180');
-  const trackid = text('Track ID', '864765493');
-  const visual = boolean('Visual', true);
-
+export const TrackId = ({componentColor, trackId, visual, ...args}) => {
   // Convert RGBA to HEX (without Alpha Channel)
   const hex = rgba2hex(componentColor);
 
   // Render Preact Component
   return (
     <amp-soundcloud
       data-color={hex}
-      data-trackid={trackid}
+      data-trackid={trackId}
       data-visual={visual}
-      height={height}
       layout="fixed-height"
       width="auto"
+      {...args}
     />
   );
 };
 
-export const PlaylistId = () => {
-  // Knobs
-  const componentColor = color('Color', 'RGBA(255, 85, 0, 1)');
-  const height = text('Height', '180');
-  const playlistId = text('Playlist ID', '151584683');
-  const visual = boolean('Visual', true);
+TrackId.args = {
+  trackId: '864765493',
+  height: 180,
+  visual: true,
+};
+
+TrackId.argTypes = {
+  componentColor: {
+    name: 'componentColor',
+    control: {type: 'color'},
+    defaultValue: 'RGBA(255, 85, 0, 1)',
+  },
+};
 
+export const PlaylistId = ({componentColor, playlistId, visual, ...args}) => {
   // Convert RGBA to HEX (without Alpha Channel)
   const hex = rgba2hex(componentColor);
 
@@ -54,22 +55,36 @@ export const PlaylistId = () => {
       data-color={hex}
       data-playlistid={playlistId}
       data-visual={visual}
-      height={height}
       layout="fixed-height"
       width="auto"
+      {...args}
     />
   );
 };
 
-export const MediaQuery = () => {
-  // Knobs
-  const componentColor = color('Color', 'RGBA(255, 85, 0, 1)');
-  const trackid1 = text('Track ID 1', '864765493');
-  const trackid2 = text('Track ID 2', '582363801');
-  const media1 = text('Media Query 1', '(min-width: 650px)');
-  const media2 = text('Media Query 2', '(max-width: 649px)');
-  const visual = boolean('Visual', true);
+PlaylistId.args = {
+  playlistId: '151584683',
+  height: 180,
+  visual: true,
+};
 
+PlaylistId.argTypes = {
+  componentColor: {
+    name: 'componentColor',
+    control: {type: 'color'},
+    defaultValue: 'RGBA(255, 85, 0, 1)',
+  },
+};
+
+export const MediaQuery = ({
+  componentColor,
+  media1,
+  media2,
+  trackId1,
+  trackId2,
+  visual,
+  ...args
+}) => {
   // Convert RGBA to HEX (without Alpha Channel)
   const hex = rgba2hex(componentColor);
 
@@ -78,69 +93,99 @@ export const MediaQuery = () => {
     <>
       <amp-soundcloud
         data-color={hex}
-        data-trackid={trackid1}
+        data-trackid={trackId1}
         data-visual={visual}
         height="240"
         layout="fixed"
         media={media1}
         width="240"
+        {...args}
       />
       <amp-soundcloud
         data-color={hex}
-        data-trackid={trackid2}
+        data-trackid={trackId2}
         data-visual={visual}
         height="180"
         layout="responsive"
         media={media2}
         width="180"
+        {...args}
       />
     </>
   );
 };
 
-export const ResponsiveLayout = () => {
-  // Knobs
-  const componentColor = color('Color', 'RGBA(255, 85, 0, 1)');
-  const trackid = text('Track ID', '864765493');
-  const sizes = text('Sizes', '(min-width: 720px) 520px, 100vw');
-  const visual = boolean('Visual', true);
+MediaQuery.args = {
+  trackId1: '864765493',
+  trackId2: '582363801',
+  media1: '(min-width: 650px)',
+  media2: '(max-width: 649px)',
+  visual: true,
+};
+
+MediaQuery.argTypes = {
+  componentColor: {
+    name: 'componentColor',
+    control: {type: 'color'},
+    defaultValue: 'RGBA(255, 85, 0, 1)',
+  },
+};
 
+export const ResponsiveLayout = ({
+  componentColor,
+  trackId,
+  visual,
+  ...args
+}) => {
   // Convert RGBA to HEX (without Alpha Channel)
   const hex = rgba2hex(componentColor);
 
   // Render Preact Component
   return (
     <amp-soundcloud
       data-color={hex}
-      data-trackid={trackid}
+      data-trackid={trackId}
       data-visual={visual}
       height="340"
       layout="responsive"
-      sizes={sizes}
       width="520"
+      {...args}
     />
   );
 };
 
-export const WithPlaceholderAndFallback = () => {
-  // Knobs
-  const componentColor = color('Color', 'RGBA(255, 85, 0, 1)');
-  const height = text('Height', '180');
-  const trackid = text('Track ID', '864765493');
-  const visual = boolean('Visual', true);
+ResponsiveLayout.args = {
+  trackId: '864765493',
+  sizes: '(min-width: 720px) 520px, 100vw',
+  visual: true,
+};
+
+ResponsiveLayout.argTypes = {
+  componentColor: {
+    name: 'componentColor',
+    control: {type: 'color'},
+    defaultValue: 'RGBA(255, 85, 0, 1)',
+  },
+};
 
+export const WithPlaceholderAndFallback = ({
+  componentColor,
+  trackId,
+  visual,
+  ...args
+}) => {
   // Convert RGBA to HEX (without Alpha Channel)
   const hex = rgba2hex(componentColor);
 
   // Render Preact Component
   return (
     <amp-soundcloud
       data-color={hex}
-      data-trackid={trackid}
+      data-trackid={trackId}
       data-visual={visual}
-      height={height}
       layout="fixed-height"
       width="auto"
+      {...args}
     >
       <div placeholder style="background:red">
         Placeholder. Loading content...
@@ -152,3 +197,17 @@ export const WithPlaceholderAndFallback = () => {
     </amp-soundcloud>
   );
 };
+
+WithPlaceholderAndFallback.args = {
+  trackId: '864765493',
+  height: 180,
+  visual: true,
+};
+
+WithPlaceholderAndFallback.argTypes = {
+  componentColor: {
+    name: 'componentColor',
+    control: {type: 'color'},
+    defaultValue: 'RGBA(255, 85, 0, 1)',
+  },
+};