♻️ Use Storybook args (second round)

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

@@ -1,5 +1,3 @@
-import {boolean, withKnobs} from '@storybook/addon-knobs';
-
 import * as Preact from '#preact';
 
 import {
@@ -10,16 +8,19 @@ import {
 } from '../component';
 
 export default {
-  title: 'Accordion',
+  title: 'BentoAccordion',
   component: BentoAccordion,
-  decorators: [withKnobs],
+  args: {
+    expandSingleSection: false,
+    animate: false,
+  },
 };
 
 /**
  * @param {!Object} props
  * @return {*}
  */
-function AccordionWithActions(props) {
+function BentoAccordionWithActions(props) {
   // TODO(#30447): replace imperative calls with "button" knobs when the
   // Storybook 6.1 is released.
   const ref = Preact.useRef();
@@ -44,15 +45,10 @@ function AccordionWithActions(props) {
   );
 }
 
-export const _default = () => {
-  const expandSingleSection = boolean('expandSingleSection', false);
-  const animate = boolean('animate', false);
+export const _default = (args) => {
   return (
     <main>
-      <AccordionWithActions
-        expandSingleSection={expandSingleSection}
-        animate={animate}
-      >
+      <BentoAccordionWithActions {...args}>
         <BentoAccordionSection id="section1" key={1}>
           <BentoAccordionHeader>
             <h2>Section 1</h2>
@@ -73,7 +69,7 @@ export const _default = () => {
             Elephants have great memory.
           </BentoAccordionContent>
         </BentoAccordionSection>
-      </AccordionWithActions>
+      </BentoAccordionWithActions>
     </main>
   );
 };
@@ -82,7 +78,7 @@ export const _default = () => {
  * @param {!Object} props
  * @return {*}
  */
-function AccordionWithEvents(props) {
+function BentoAccordionWithEvents(props) {
   // TODO(#30447): replace imperative calls with "button" knobs when the
   // Storybook 6.1 is released.
   const ref = Preact.useRef();
@@ -139,15 +135,10 @@ function AccordionWithEvents(props) {
   );
 }
 
-export const events = () => {
-  const expandSingleSection = boolean('expandSingleSection', false);
-  const animate = boolean('animate', false);
+export const events = (args) => {
   return (
     <main>
-      <AccordionWithEvents
-        expandSingleSection={expandSingleSection}
-        animate={animate}
-      ></AccordionWithEvents>
+      <BentoAccordionWithEvents {...args}></BentoAccordionWithEvents>
     </main>
   );
 };

extensions/amp-accordion/1.0/storybook/Bind.amp.js

@@ -1,30 +1,27 @@
 import {withAmp} from '@ampproject/storybook-addon';
-import {boolean, withKnobs} from '@storybook/addon-knobs';
 
 import * as Preact from '#preact';
 
 export default {
   title: 'amp-accordion-1_0',
-  decorators: [withKnobs, withAmp],
-
+  decorators: [withAmp],
   parameters: {
     extensions: [
       {name: 'amp-bind', version: '0.1'},
       {name: 'amp-accordion', version: '1.0'},
     ],
     experiments: ['bento'],
   },
+  args: {
+    'expand-single-section': false,
+    animate: false,
+  },
 };
 
-export const withAmpBind = () => {
-  const expandSingleSection = boolean('expandSingleSection', false);
-  const animate = boolean('animate', false);
+export const withAmpBind = (args) => {
   return (
     <main>
-      <amp-accordion
-        expand-single-section={expandSingleSection}
-        animate={animate}
-      >
+      <amp-accordion {...args}>
         <section data-amp-bind-expanded="section1">
           <h2>Section 1</h2>
           <div>Puppies are cute.</div>

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

@@ -1,5 +1,4 @@
 import {withAmp} from '@ampproject/storybook-addon';
-import {select, text, withKnobs} from '@storybook/addon-knobs';
 
 import * as Preact from '#preact';
 
@@ -29,6 +28,8 @@ const KEYFRAMES_OPTIONS = {
   },
 };
 
+const keyframesOptions = Object.keys(KEYFRAMES_OPTIONS);
+
 const BLOCK_STYLE = {
   background: 'blue',
   width: '100px',
@@ -37,22 +38,24 @@ const BLOCK_STYLE = {
 
 export default {
   title: 'Animation',
-  decorators: [withKnobs, withAmp],
-
+  decorators: [withAmp],
   parameters: {
     extensions: [{name: 'amp-animation', version: 0.1}],
   },
+  argTypes: {
+    keyframesName: {
+      control: {type: 'select'},
+      options: keyframesOptions,
+    },
+  },
+  args: {
+    keyframesName: keyframesOptions[0],
+    easing: 'cubic-bezier(0,0,.21,1)',
+  },
 };
 
-export const Default = () => {
-  const keyframesOptions = Object.keys(KEYFRAMES_OPTIONS);
-  const keyframesName = select(
-    'Keyframes',
-    keyframesOptions,
-    keyframesOptions[0]
-  );
+export const Default = ({easing, keyframesName}) => {
   const keyframes = KEYFRAMES_OPTIONS[keyframesName];
-  const easing = text('Easing', 'cubic-bezier(0,0,.21,1)');
   const spec = {
     animations: {
       selector: '#block',

extensions/amp-animation/0.1/storybook/Random.amp.js

@@ -1,5 +1,4 @@
 import {withAmp} from '@ampproject/storybook-addon';
-import {withKnobs} from '@storybook/addon-knobs';
 
 import * as Preact from '#preact';
 
@@ -28,8 +27,7 @@ const DROP_STYLE = {
 
 export default {
   title: 'Animation',
-  decorators: [withKnobs, withAmp],
-
+  decorators: [withAmp],
   parameters: {
     extensions: [{name: 'amp-animation', version: 0.1}],
   },