Added SuggestedAction Image Functionality (#1909)

* Added SuggestedAction imagage functionality. * Added SuggestedAction imagage functionality. * Updated CHANGELOG.md * Added conditional for image * added image size test
microsoft · Apr 17, 2019 · 4172154 · 4172154
1 parent 274988c
commit 4172154
Show file tree

Hide file tree

Showing 9 changed files with 48 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -56,6 +56,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - `component`: Added `cardActionMiddleware` to customize the behavior of card action, by [@compulim](https://github.com/compulim), in PR [#1704](https://github.com/Microsoft/BotFramework-WebChat/pull/1704)
 - `bundle`: Add `watermark` and `streamUrl` parameters to createDirectLine, by [@corinagum](https://github.com/corinagum), in PR [#1817](https://github.com/Microsoft/BotFramework-WebChat/pull/1817)
 - `component`: Added `textarea` option to `SendBox` per issues [#17](https://github.com/Microsoft/BotFramework-WebChat/issues/17) and [#124](https://github.com/Microsoft/BotFramework-WebChat/issues/124), by [@tdurnford](https://github.com/tdurnford), in PR [#1889](https://github.com/Microsoft/BotFramework-WebChat/pull/1889)
+- `component`: Added `suggestedAction` images per issue [#1739](https://github.com/Microsoft/BotFramework-WebChat/issues/1739), by [@tdurnford](https://github.com/tdurnford), in PR [#1909](https://github.com/Microsoft/BotFramework-WebChat/pull/1909)
 
 ### Changed
 

diff --git a/...how-correctly-formatted-buttons-when-suggested-actions-are-displayed-1-snap.png b/...how-correctly-formatted-buttons-when-suggested-actions-are-displayed-1-snap.png
diff --git a/...-suggested-actions-command-should-show-suggested-actions-with-images-1-snap.png b/...-suggested-actions-command-should-show-suggested-actions-with-images-1-snap.png
diff --git a/...ted-actions-command-should-show-suggested-actions-with-larger-images-1-snap.png b/...ted-actions-command-should-show-suggested-actions-with-larger-images-1-snap.png
diff --git a/__tests__/suggestedActions.js b/__tests__/suggestedActions.js
@@ -2,6 +2,7 @@ import { By } from 'selenium-webdriver';
 
 import { imageSnapshotOptions, timeouts } from './constants.json';
 
+import allImagesLoaded from './setup/conditions/allImagesLoaded';
 import allOutgoingActivitiesSent from './setup/conditions/allOutgoingActivitiesSent';
 import minNumActivitiesShown from './setup/conditions/minNumActivitiesShown';
 import suggestedActionsShowed from './setup/conditions/suggestedActionsShowed';
@@ -20,6 +21,7 @@ describe('suggested-actions command', async () => {
     await pageObjects.sendMessageViaSendBox('suggested-actions');
 
     await driver.wait(suggestedActionsShowed(), timeouts.directLine);
+    await driver.wait( allImagesLoaded(), 2000 );
 
     const base64PNG = await driver.takeScreenshot();
 
@@ -143,4 +145,34 @@ describe('suggested-actions command', async () => {
 
     expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
   });
+
+  test('should show suggested actions with images', async () => {
+    const { driver, pageObjects } = await setupWebDriver();
+
+    await driver.wait(uiConnected(), timeouts.directLine);
+    await pageObjects.sendMessageViaSendBox('emptycard');
+
+    await driver.wait(minNumActivitiesShown(1), timeouts.directLine);
+    await driver.wait( allImagesLoaded(), 2000 );
+
+    const base64PNG = await driver.takeScreenshot();
+
+    expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+  });
+
+  test('should show suggested actions with larger images', async () => {
+
+    const styleOptions = { suggestedActionHeight: 80, suggestedActionImageHeight: 60 };
+    const { driver, pageObjects } = await setupWebDriver({ props: { styleOptions } });
+
+    await driver.wait(uiConnected(), timeouts.directLine);
+    await pageObjects.sendMessageViaSendBox('emptycard');
+
+    await driver.wait(minNumActivitiesShown(1), timeouts.directLine);
+    await driver.wait( allImagesLoaded(), 2000 );
+
+    const base64PNG = await driver.takeScreenshot();
+
+    expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+  });
 });
diff --git a/packages/component/src/SendBox/SuggestedAction.js b/packages/component/src/SendBox/SuggestedAction.js
@@ -33,15 +33,17 @@ export default connectSuggestedAction(
 )(
   ({
     buttonText,
-    disabled,
     click,
+    disabled,
+    image,
     styleSet
   }) =>
     <div className={ classNames(styleSet.suggestedAction + '', SUGGESTED_ACTION_CSS) }>
       <button
         disabled={ disabled }
         onClick={ click }
       >
+        {image && <img src={ image } />}
         <nobr>{ buttonText }</nobr>
       </button>
     </div>

diff --git a/packages/component/src/SendBox/SuggestedActions.js b/packages/component/src/SendBox/SuggestedActions.js
@@ -49,6 +49,7 @@ export default connectSuggestedActions(
         suggestedActions.map((
           {
             displayText,
+            image,
             text,
             title,
             type,
@@ -61,6 +62,7 @@ export default connectSuggestedActions(
              suggestedActionText({ displayText, title, type, value })
             }
             displayText={ displayText }
+            image={ image }
             key={ index }
             text={ text }
             type={ type }

diff --git a/packages/component/src/Styles/StyleSet/SuggestedAction.js b/packages/component/src/Styles/StyleSet/SuggestedAction.js
@@ -5,6 +5,7 @@ export default function createSuggestedActionStyle({
   suggestedActionBackground,
   suggestedActionBorder,
   suggestedActionBorderRadius,
+  suggestedActionImageHeight,
   suggestedActionTextColor,
   suggestedActionDisabledBackground,
   suggestedActionDisabledBorder,
@@ -18,12 +19,14 @@ export default function createSuggestedActionStyle({
     paddingTop: paddingRegular,
 
     '& > button': {
+      alignItems: 'center',
+      borderRadius: suggestedActionBorderRadius,
+      display: 'flex',
       fontFamily: primaryFont,
       fontSize: 'inherit',
       height: suggestedActionHeight,
       paddingLeft: paddingWide,
       paddingRight: paddingWide,
-      borderRadius: suggestedActionBorderRadius,
 
       '&:disabled': {
         background: suggestedActionDisabledBackground,
@@ -35,6 +38,11 @@ export default function createSuggestedActionStyle({
         background: suggestedActionBackground,
         border: suggestedActionBorder,
         color: suggestedActionTextColor
+      },
+
+      '& > img': {
+          height: suggestedActionImageHeight,
+          paddingRight: paddingRegular
       }
     }
   };

diff --git a/packages/component/src/Styles/defaultStyleSetOptions.js b/packages/component/src/Styles/defaultStyleSetOptions.js
@@ -73,6 +73,7 @@ const DEFAULT_OPTIONS = {
   suggestedActionBackground: 'White',
   suggestedActionBorder: `solid 2px ${ DEFAULT_ACCENT }`,
   suggestedActionBorderRadius: 0,
+  suggestedActionImageHeight: 20,
   suggestedActionTextColor: DEFAULT_ACCENT,
   suggestedActionDisabledBackground: 'White',
   suggestedActionDisabledBorder: `solid 2px #E6E6E6`,