Convert knobs to controls in stories for lightbox, soundcloud, and

timeago.
ampproject · Mar 10, 2022 · 1760d9f · 1760d9f
1 parent 2af18ce
commit 1760d9f
Show file tree

Hide file tree

Showing 5 changed files with 287 additions and 124 deletions.
diff --git a/build-system/test-configs/forbidden-terms.js b/build-system/test-configs/forbidden-terms.js
@@ -722,10 +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-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',

diff --git a/extensions/amp-lightbox/1.0/storybook/Basic.js b/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,47 +167,28 @@ 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', '');
-  return (
-    <div>
-      <BentoLightboxWithActions
-        id="lightbox"
-        animation={animation}
-        style={{backgroundColor, color}}
-      >
-        <p>
-          Lorem <i>ips</i>um dolor sit amet, has nisl nihil convenire et, vim at
-          aeque inermis reprehendunt.
-        </p>
-      </BentoLightboxWithActions>
-    </div>
-  );
+export const _default = ({backgroundColor, color, ...args}) => {
+  <div>
+    <BentoLightboxWithActions
+      id="lightbox"
+      style={{backgroundColor, color}}
+      {...args}
+    >
+      <p>
+        Lorem <i>ips</i>um dolor sit amet, has nisl nihil convenire et, vim at
+        aeque inermis reprehendunt.
+      </p>
+    </BentoLightboxWithActions>
+  </div>;
 };
 
-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 +323,31 @@ export const scrollable = () => {
     </div>
   );
 };
+
+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'},
+  },
+  scrollable: {
+    name: 'scrollable',
+    control: {type: 'boolean'},
+    defaultValue: true,
+  },
+  lotsOfText: {
+    name: 'lotsOfText',
+    control: {type: 'boolean'},
+    defaultValue: true,
+  },
+};