Added richCardsWrapTitle to defaultStyleOptions

CHANGELOG.md

@@ -25,9 +25,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Added
 
 -  `*`: Added [`eslint`](https://npmjs.com/package/eslint/) to static code analysis, by [@compulim](https://github.com/compulim), in PR [#1970](https://github.com/microsoft/BotFramework-WebChat/pull/1970)
-- Added pt-PT language, by [@bodyzatva](https://github.com/bodyzatva) in PR [#2005](https://github.com/microsoft/BotFramework-WebChat/pull/2005) and PR [#2020](https://github.com/Microsoft/BotFramework-WebChat/pull/2020)
-- Added documentation for using Web Chat dev build, by [@corinagum](https://github.com/corinagum), in PR [#2074](https://github.com/Microsoft/BotFramework-WebChat/pull/2074)
-- Added the Web Chat version to DirectLine's botAgent option, by [@tdurnford](https://github.com/tdurnford), in PR [#2101](https://github.com/Microsoft/BotFramework-WebChat/pull/2101)
+-  Added pt-PT language, by [@bodyzatva](https://github.com/bodyzatva) in PR [#2005](https://github.com/microsoft/BotFramework-WebChat/pull/2005) and PR [#2020](https://github.com/Microsoft/BotFramework-WebChat/pull/2020)
+-  Added documentation for using Web Chat dev build, by [@corinagum](https://github.com/corinagum), in PR [#2074](https://github.com/Microsoft/BotFramework-WebChat/pull/2074)
+-  Added the Web Chat version to DirectLine's botAgent option, by [@tdurnford](https://github.com/tdurnford), in PR [#2101](https://github.com/Microsoft/BotFramework-WebChat/pull/2101)
+-  Added `richCardWrapTitle` to `defaultStyleOptions`, by [@tdurnford](https://github.com/tdurnford), in PR [#2115](https://github.com/Microsoft/BotFramework-WebChat/pull/2115)
 
 ### Changed
 

__tests__/basic.js

@@ -88,3 +88,59 @@ test('unknown activities do not render anything in the transcript', async () =>
 
   expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
 });
+
+test('hero card with a long title and richCardWrapTitle set to true', async () => {
+  const { driver, pageObjects } = await setupWebDriver({ props: { styleOptions: { richCardWrapTitle: true } } });
+
+  await driver.wait(uiConnected(), timeouts.directLine);
+  await pageObjects.sendMessageViaSendBox('herocard long title', { waitForSend: true });
+
+  await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
+  await driver.wait(allImagesLoaded(), 2000);
+
+  const base64PNG = await driver.takeScreenshot();
+
+  expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+});
+
+test('hero card with a long title and richCardWrapTitle set to default value', async () => {
+  const { driver, pageObjects } = await setupWebDriver();
+
+  await driver.wait(uiConnected(), timeouts.directLine);
+  await pageObjects.sendMessageViaSendBox('herocard long title', { waitForSend: true });
+
+  await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
+  await driver.wait(allImagesLoaded(), 2000);
+
+  const base64PNG = await driver.takeScreenshot();
+
+  expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+});
+
+test('thumbnail card with a long title and richCardWrapTitle set to true', async () => {
+  const { driver, pageObjects } = await setupWebDriver({ props: { styleOptions: { richCardWrapTitle: true } } });
+
+  await driver.wait(uiConnected(), timeouts.directLine);
+  await pageObjects.sendMessageViaSendBox('thumbnailcard long title', { waitForSend: true });
+
+  await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
+  await driver.wait(allImagesLoaded(), 2000);
+
+  const base64PNG = await driver.takeScreenshot();
+
+  expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+});
+
+test('thumbnail card with a long title and richCardWrapTitle set to default value', async () => {
+  const { driver, pageObjects } = await setupWebDriver();
+
+  await driver.wait(uiConnected(), timeouts.directLine);
+  await pageObjects.sendMessageViaSendBox('thumbnailcard long title', { waitForSend: true });
+
+  await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
+  await driver.wait(allImagesLoaded(), 2000);
+
+  const base64PNG = await driver.takeScreenshot();
+
+  expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+});

packages/bundle/src/adaptiveCards/Attachment/AdaptiveCardBuilder.ts

@@ -53,10 +53,12 @@ function addCardAction(cardAction: CardAction, includesOAuthButtons?: boolean) {
 export default class AdaptiveCardBuilder {
   card: AdaptiveCard;
   container: Container;
+  styleOptions: any;
 
-  constructor(adaptiveCards) {
+  constructor(adaptiveCards, styleOptions) {
     this.card = new adaptiveCards.AdaptiveCard();
     this.container = new Container();
+    this.styleOptions = styleOptions;
 
     this.card.addItem(this.container);
   }
@@ -104,8 +106,14 @@ export default class AdaptiveCardBuilder {
   }
 
   addCommonHeaders(content: ICommonContent) {
-    this.addTextBlock(content.title, { color: TextColor.Dark, size: TextSize.Medium, weight: TextWeight.Bolder });
-    this.addTextBlock(content.subtitle, { color: TextColor.Dark, isSubtle: true, wrap: true });
+    const { richCardWrapTitle } = this.styleOptions;
+    this.addTextBlock(content.title, {
+      color: TextColor.Dark,
+      size: TextSize.Medium,
+      weight: TextWeight.Bolder,
+      wrap: richCardWrapTitle
+    });
+    this.addTextBlock(content.subtitle, { color: TextColor.Dark, isSubtle: true, wrap: richCardWrapTitle });
     this.addTextBlock(content.text, { color: TextColor.Dark, wrap: true });
   }
 

packages/bundle/src/adaptiveCards/Attachment/AnimationCardAttachment.js

@@ -14,8 +14,8 @@ class AnimationCardAttachment extends React.Component {
   constructor(props) {
     super(props);
 
-    this.buildCard = memoize((adaptiveCards, content) => {
-      const builder = new AdaptiveCardBuilder(adaptiveCards);
+    this.buildCard = memoize((adaptiveCards, content, styleOptions) => {
+      const builder = new AdaptiveCardBuilder(adaptiveCards, styleOptions);
 
       (content.images || []).forEach(image => builder.addImage(image.url, null, image.tap));
 
@@ -71,7 +71,8 @@ AnimationCardAttachment.propTypes = {
     }).isRequired
   }).isRequired,
   styleSet: PropTypes.shape({
-    animationCardAttachment: PropTypes.any.isRequired
+    animationCardAttachment: PropTypes.any.isRequired,
+    options: PropTypes.any.isRequired
   }).isRequired
 };
 

packages/bundle/src/adaptiveCards/Attachment/AudioCardAttachment.js

@@ -47,7 +47,8 @@ AudioCardAttachment.propTypes = {
     })
   }).isRequired,
   styleSet: PropTypes.shape({
-    audioCardAttachment: PropTypes.any.isRequired
+    audioCardAttachment: PropTypes.any.isRequired,
+    options: PropTypes.any.isRequired
   }).isRequired
 };
 

packages/bundle/src/adaptiveCards/Attachment/CommonCard.js

@@ -1,15 +1,16 @@
+import { connectToWebChat } from 'botframework-webchat-component';
 import AdaptiveCardBuilder from './AdaptiveCardBuilder';
 import AdaptiveCardRenderer from './AdaptiveCardRenderer';
 import memoize from 'memoize-one';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-export default class CommonCard extends React.Component {
+class CommonCard extends React.Component {
   constructor(props) {
     super(props);
 
-    this.buildCard = memoize((adaptiveCards, content) => {
-      const builder = new AdaptiveCardBuilder(adaptiveCards);
+    this.buildCard = memoize((adaptiveCards, content, styleOptions) => {
+      const builder = new AdaptiveCardBuilder(adaptiveCards, styleOptions);
 
       builder.addCommon(content);
 
@@ -19,12 +20,17 @@ export default class CommonCard extends React.Component {
 
   render() {
     const {
-      props: { adaptiveCardHostConfig, adaptiveCards, attachment: { content } = {} }
+      props: {
+        adaptiveCardHostConfig,
+        adaptiveCards,
+        attachment: { content } = {},
+        styleSet: { options }
+      }
     } = this;
 
     return (
       <AdaptiveCardRenderer
-        adaptiveCard={content && this.buildCard(adaptiveCards, content)}
+        adaptiveCard={content && this.buildCard(adaptiveCards, content, options)}
         adaptiveCardHostConfig={adaptiveCardHostConfig}
         tapAction={content && content.tap}
       />
@@ -39,5 +45,8 @@ CommonCard.propTypes = {
     content: PropTypes.shape({
       tap: PropTypes.any
     }).isRequired
-  }).isRequired
+  }).isRequired,
+  styleSet: PropTypes.any.isRequired
 };
+
+export default connectToWebChat(({ styleSet }) => ({ styleSet }))(CommonCard);

packages/bundle/src/adaptiveCards/Attachment/HeroCardAttachment.js

@@ -2,15 +2,16 @@ import memoize from 'memoize-one';
 import PropTypes from 'prop-types';
 import React from 'react';
 
+import { connectToWebChat } from 'botframework-webchat-component';
 import AdaptiveCardBuilder from './AdaptiveCardBuilder';
 import AdaptiveCardRenderer from './AdaptiveCardRenderer';
 
-export default class HeroCardAttachment extends React.Component {
+class HeroCardAttachment extends React.Component {
   constructor(props) {
     super(props);
 
-    this.buildCard = memoize((adaptiveCards, content) => {
-      const builder = new AdaptiveCardBuilder(adaptiveCards);
+    this.buildCard = memoize((adaptiveCards, content, styleOptions) => {
+      const builder = new AdaptiveCardBuilder(adaptiveCards, styleOptions);
 
       (content.images || []).forEach(image => builder.addImage(image.url, null, image.tap));
 
@@ -22,12 +23,17 @@ export default class HeroCardAttachment extends React.Component {
 
   render() {
     const {
-      props: { adaptiveCardHostConfig, adaptiveCards, attachment: { content } = {} }
+      props: {
+        adaptiveCardHostConfig,
+        adaptiveCards,
+        attachment: { content } = {},
+        styleSet: { options }
+      }
     } = this;
 
     return (
       <AdaptiveCardRenderer
-        adaptiveCard={content && this.buildCard(adaptiveCards, content)}
+        adaptiveCard={content && this.buildCard(adaptiveCards, content, options)}
         adaptiveCardHostConfig={adaptiveCardHostConfig}
         tapAction={content && content.tap}
       />
@@ -42,5 +48,10 @@ HeroCardAttachment.propTypes = {
     content: PropTypes.shape({
       tap: PropTypes.any
     }).isRequired
+  }).isRequired,
+  styleSet: PropTypes.shape({
+    options: PropTypes.any.isRequired
   }).isRequired
 };
+
+export default connectToWebChat(({ styleSet }) => ({ styleSet }))(HeroCardAttachment);

packages/bundle/src/adaptiveCards/Attachment/OAuthCardAttachment.js

@@ -2,15 +2,16 @@ import memoize from 'memoize-one';
 import PropTypes from 'prop-types';
 import React from 'react';
 
+import { connectToWebChat } from 'botframework-webchat-component';
 import AdaptiveCardBuilder from './AdaptiveCardBuilder';
 import AdaptiveCardRenderer from './AdaptiveCardRenderer';
 
-export default class OAuthCardAttachment extends React.Component {
+class OAuthCardAttachment extends React.Component {
   constructor(props) {
     super(props);
 
-    this.buildCard = memoize((adaptiveCards, content) => {
-      const builder = new AdaptiveCardBuilder(adaptiveCards);
+    this.buildCard = memoize((adaptiveCards, content, styleOptions) => {
+      const builder = new AdaptiveCardBuilder(adaptiveCards, styleOptions);
 
       builder.addCommonHeaders(content);
       builder.addButtons((content || {}).buttons, true);
@@ -21,12 +22,17 @@ export default class OAuthCardAttachment extends React.Component {
 
   render() {
     const {
-      props: { adaptiveCardHostConfig, adaptiveCards, attachment: { content } = {} }
+      props: {
+        adaptiveCardHostConfig,
+        adaptiveCards,
+        attachment: { content } = {},
+        styleSet: { options }
+      }
     } = this;
 
     return (
       <AdaptiveCardRenderer
-        adaptiveCard={content && this.buildCard(adaptiveCards, content)}
+        adaptiveCard={content && this.buildCard(adaptiveCards, content, options)}
         adaptiveCardHostConfig={adaptiveCardHostConfig}
       />
     );
@@ -40,5 +46,10 @@ OAuthCardAttachment.propTypes = {
     content: PropTypes.shape({
       buttons: PropTypes.array
     }).isRequired
+  }).isRequired,
+  styleSet: PropTypes.shape({
+    options: PropTypes.any.isRequired
   }).isRequired
 };
+
+export default connectToWebChat(({ styleSet }) => ({ styleSet }))(OAuthCardAttachment);