📖 [bento][amp-social-share] Clean up storybooks for social share (#30191

) * Clean up storybook for social share * Update default values in knobs from undefined to null * Update default knobs for 0.1 version as well
ampproject · Sep 14, 2020 · 23a38c4 · 23a38c4
1 parent 7910e6c
commit 23a38c4
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 72 deletions.
diff --git a/extensions/amp-social-share/0.1/storybook/Basic.amp.js b/extensions/amp-social-share/0.1/storybook/Basic.amp.js
@@ -21,7 +21,7 @@ import {withA11y} from '@storybook/addon-a11y';
 import {withAmp} from '@ampproject/storybook-addon';
 
 // eslint-disable-next-line
-storiesOf('amp-social-share v1', module)
+storiesOf('amp-social-share-0_1', module)
   .addDecorator(withKnobs)
   .addDecorator(withA11y)
   .addDecorator(withAmp)
@@ -68,14 +68,17 @@ storiesOf('amp-social-share v1', module)
       'sms',
       'system',
       'custom',
+      undefined,
     ];
     const type = select('type', typeConfigurations, typeConfigurations[0]);
-    const customEndpoint = text('data-share-endpoint', undefined);
-    const paramUrl = text('data-param-url', undefined);
-    const paramText = text('data-param-text', undefined);
-    const paramAttribution = text('data-param-attribution', undefined);
-    const paramMedia = text('data-param-media', undefined);
+    const customEndpoint = text('data-share-endpoint', null);
+    const paramUrl = text('data-param-url', null);
+    const paramText = text('data-param-text', null);
+    const paramAttribution = text('data-param-attribution', null);
+    const paramMedia = text('data-param-media', null);
     const appId = text('data-param-app_id', '254325784911610');
+    const width = text('width', null);
+    const height = text('height', null);
     return (
       <amp-social-share
         type={type}
@@ -85,6 +88,8 @@ storiesOf('amp-social-share v1', module)
         data-param-attribution={paramAttribution}
         data-param-media={paramMedia}
         data-param-app_id={appId}
+        width={width}
+        height={height}
       ></amp-social-share>
     );
   });
diff --git a/extensions/amp-social-share/1.0/storybook/Basic.amp.js b/extensions/amp-social-share/1.0/storybook/Basic.amp.js
@@ -21,7 +21,7 @@ import {withA11y} from '@storybook/addon-a11y';
 import {withAmp} from '@ampproject/storybook-addon';
 
 // eslint-disable-next-line
-storiesOf('amp-social-share 1_0', module)
+storiesOf('amp-social-share-1_0', module)
   .addDecorator(withKnobs)
   .addDecorator(withA11y)
   .addDecorator(withAmp)
@@ -72,14 +72,18 @@ storiesOf('amp-social-share 1_0', module)
       'sms',
       'system',
       'custom',
+      undefined,
     ];
     const type = select('type', typeConfigurations, typeConfigurations[0]);
-    const customEndpoint = text('data-share-endpoint', undefined);
-    const paramUrl = text('data-param-url', undefined);
-    const paramText = text('data-param-text', undefined);
-    const paramAttribution = text('data-param-attribution', undefined);
-    const paramMedia = text('data-param-media', undefined);
+    const customEndpoint = text('data-share-endpoint', null);
+    const paramUrl = text('data-param-url', null);
+    const paramText = text('data-param-text', null);
+    const paramAttribution = text('data-param-attribution', null);
+    const paramMedia = text('data-param-media', null);
     const appId = text('data-param-app_id', '254325784911610');
+    const layout = text('layout', null);
+    const width = text('width', null);
+    const height = text('height', null);
     return (
       <amp-social-share
         type={type}
@@ -89,42 +93,9 @@ storiesOf('amp-social-share 1_0', module)
         data-param-attribution={paramAttribution}
         data-param-media={paramMedia}
         data-param-app_id={appId}
-      ></amp-social-share>
-    );
-  })
-  .add('responsive', () => {
-    const typeConfigurations = [
-      'email',
-      'facebook',
-      'linkedin',
-      'pinterest',
-      'tumblr',
-      'twitter',
-      'whatsapp',
-      'line',
-      'sms',
-      'system',
-      'custom',
-    ];
-    const type = select('type', typeConfigurations, typeConfigurations[0]);
-    const customEndpoint = text('data-share-endpoint', undefined);
-    const paramUrl = text('data-param-url', undefined);
-    const paramText = text('data-param-text', undefined);
-    const paramAttribution = text('data-param-attribution', undefined);
-    const paramMedia = text('data-param-media', undefined);
-    const appId = text('data-param-app_id', '254325784911610');
-    return (
-      <amp-social-share
-        type={type}
-        data-share-endpoint={customEndpoint}
-        data-param-text={paramText}
-        data-param-url={paramUrl}
-        data-param-attribution={paramAttribution}
-        data-param-media={paramMedia}
-        data-param-app_id={appId}
-        layout="responsive"
-        width="100"
-        height="100"
+        layout={layout}
+        width={width}
+        height={height}
       ></amp-social-share>
     );
   });
diff --git a/extensions/amp-social-share/1.0/storybook/Basic.js b/extensions/amp-social-share/1.0/storybook/Basic.js
@@ -16,11 +16,11 @@
 
 import * as Preact from '../../../../src/preact';
 import {SocialShare} from '../social-share';
-import {object, select, text, withKnobs} from '@storybook/addon-knobs';
+import {color, object, select, text, withKnobs} from '@storybook/addon-knobs';
 import {withA11y} from '@storybook/addon-a11y';
 
 export default {
-  title: 'Social Share',
+  title: 'SocialShare',
   component: SocialShare,
   decorators: [withA11y, withKnobs],
 };
@@ -37,33 +37,30 @@ export const _default = () => {
     'line',
     'sms',
     'system',
-    'custom endpoint',
+    'custom',
     undefined,
-    '',
-    'random',
   ];
   const type = select('type', knobConfigurations, knobConfigurations[0]);
-  const endpoint = text('customEndpoint', undefined);
+  const endpoint = text('customEndpoint', null);
   const additionalParams = object('additionalParams', {'subject': 'test'});
-  const target = text('target', undefined);
-  const width = text('width', undefined);
-  const height = text('height', undefined);
+  const target = text('target', null);
+  const width = text('width', null);
+  const height = text('height', null);
+  const foregroundColor = color('color');
+  const background = color('background');
+  const children = text('children', null);
 
   return (
-    <div>
-      <p>
-        Click the button below to share this page using the configured provider.
-        Update the provider using storybook knobs. Choose Provider Type: 'custom
-        endpoint' to specify your own share endpoint.
-      </p>
-      <SocialShare
-        type={type}
-        endpoint={endpoint}
-        params={additionalParams}
-        target={target}
-        width={width}
-        height={height}
-      />
-    </div>
+    <SocialShare
+      type={type}
+      endpoint={endpoint}
+      params={additionalParams}
+      target={target}
+      width={width}
+      height={height}
+      color={foregroundColor}
+      background={background}
+      children={children}
+    />
   );
 };