From 23a38c425fcc43f2e65099c3ce3ab6cf38b20e4c Mon Sep 17 00:00:00 2001
From: Kevin Dwan <25626770+krdwan@users.noreply.github.com>
Date: Mon, 14 Sep 2020 12:10:52 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=96=20[bento][amp-social-share]=20Clea?=
 =?UTF-8?q?n=20up=20storybooks=20for=20social=20share=20(#30191)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Clean up storybook for social share

* Update default values in knobs from undefined to null

* Update default knobs for 0.1 version as well
---
 .../0.1/storybook/Basic.amp.js                | 17 ++++--
 .../1.0/storybook/Basic.amp.js                | 55 +++++--------------
 .../amp-social-share/1.0/storybook/Basic.js   | 45 +++++++--------
 3 files changed, 45 insertions(+), 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
index 522bd4e92d44..8fa1b6c6763f 100644
--- 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
index 2262d7783c46..e39dc93e18be 100644
--- 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
index b0a30ae0edfc..3247b2cabda3 100644
--- 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}
+    />
   );
 };