Extend style options to support basic adaptive cards style (#1670)

* add font styles to style options

* allow some basic adaptive cards styling from style options

* change all references of fonts to the style options

* update changelog

* revert adaptive card accent:subtle color

* fix whitespace

* update snapshots with new adaptive cards config

* update all image snapshots

* fix snapshot with sending timestamp

CHANGELOG.md

@@ -27,6 +27,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Added missing Spanish (es-ES) locale by [@schgressive](https://github.com/schgressive) in PR [#1615](https://github.com/Microsoft/BotFramework-WebChat/pull/1615)
 - Fix [#1602](https://github.com/Microsoft/BotFramework-WebChat/issues/1602). Fix suggested actions regression of buttons, by [@corinagum](https://github.com/corinagum) in PR [#1616](https://github.com/Microsoft/BotFramework-WebChat/pull/1616)
 - `core`: Send `conversationUpdate` activity on connect, by [@compulim](https://github.com/compulim), in PR [#1608](https://github.com/Microsoft/BotFramework-WebChat/pull/1608)
+- `component`: Allow font family and adaptive cards text color to be set via styleOptions, by [@a-b-r-o-w-n](https://github.com/a-b-r-o-w-n), in PR [#1670](https://github.com/Microsoft/BotFramework-WebChat/pull/1670)
 
 ### Changed
 - Moved `botAvatarImage` and `userAvatarImage` to `styleOptions.botAvatarImage` and `styleOptions.userAvatarImage` respectively, in PR [#1486](https://github.com/Microsoft/BotFramework-WebChat/pull/1486)

packages/component/src/Styles/StyleSet/Avatar.js

@@ -1,19 +1,15 @@
-import {
-  primaryFont
-} from '../Fonts';
-
 export default function createAvatarStyle({
   accent,
-  avatarSize
+  avatarSize,
+  primaryFont
 }) {
   return {
-    ...primaryFont,
-
     alignItems: 'center',
     backgroundColor: accent,
     borderRadius: '50%',
     color: 'White',
     display: 'flex',
+    fontFamily: primaryFont,
     height: avatarSize,
     justifyContent: 'center',
     overflow: 'hidden',

packages/component/src/Styles/StyleSet/DictationInterims.js

@@ -1,10 +1,9 @@
-import { primaryFont } from '../Fonts';
-
 export default function createDictationInterimsStyle({
-  paddingRegular
+  paddingRegular,
+  primaryFont
 }) {
   return {
-    ...primaryFont,
+    fontFamily: primaryFont,
     margin: 0,
     paddingBottom: 0,
     paddingLeft: paddingRegular,

packages/component/src/Styles/StyleSet/DownloadAttachment.js

@@ -1,12 +1,11 @@
-import { primaryFont } from '../Fonts';
-
 export default function ({
   accent,
   bubbleTextColor,
-  paddingRegular
+  paddingRegular,
+  primaryFont
 }) {
   return {
-    ...primaryFont,
+    fontFamily: primaryFont,
 
     '& > a': {
       alignItems: 'center',

packages/component/src/Styles/StyleSet/ErrorBox.js

@@ -1,13 +1,11 @@
-import {
-  monospaceSmallFont,
+export default function createErrorBoxStyle({
+  monospaceFont,
   primaryFont
-} from '../Fonts';
-
-export default function createErrorBoxStyle() {
+}) {
   return {
-    ...primaryFont,
     display: 'flex',
     flexDirection: 'column',
+    fontFamily: primaryFont,
     margin: 0,
     minHeight: 20,
     maxHeight: 200,
@@ -32,7 +30,7 @@ export default function createErrorBoxStyle() {
       padding: 10,
 
       '& > pre': {
-        ...monospaceSmallFont,
+        fontFamily: monospaceFont,
         fontSize: '60%',
         margin: 0
       }

packages/component/src/Styles/StyleSet/SendBoxTextBox.js

@@ -1,15 +1,11 @@
-import {
-  primaryFont
-} from '../Fonts';
-
 export default function createSendBoxTextBoxStyle({
   paddingRegular,
+  primaryFont,
   sendBoxTextColor
 }) {
   return  {
-    ...primaryFont,
-
     alignItems: 'center',
+    fontFamily: primaryFont,
 
     '& > input': {
       border: 0,

packages/component/src/Styles/StyleSet/SendStatus.js

@@ -1,15 +1,13 @@
-import {
-  primarySmallFont
-} from '../Fonts';
-
 export default function createSendStatusStyle({
   accent,
+  fontSizeSmall,
+  primaryFont,
   timestampColor
 }) {
   return {
-    ...primarySmallFont,
-
     color: timestampColor,
+    fontFamily: primaryFont,
+    fontSize: fontSizeSmall,
     paddingTop: 5,
 
     '& > button': {

packages/component/src/Styles/StyleSet/SuggestedAction.js

@@ -1,8 +1,7 @@
-import { primaryFont } from  '../Fonts';
-
 export default function createSuggestedActionStyle({
   paddingRegular,
   paddingWide,
+  primaryFont,
   suggestedActionBackground,
   suggestedActionBorder,
   suggestedActionBorderRadius,
@@ -19,8 +18,7 @@ export default function createSuggestedActionStyle({
     paddingTop: paddingRegular,
 
     '& > button': {
-      ...primaryFont,
-
+      fontFamily: primaryFont,
       fontSize: 'inherit',
       height: suggestedActionHeight,
       paddingLeft: paddingWide,

packages/component/src/Styles/StyleSet/TextContent.js

@@ -1,13 +1,10 @@
-import {
-  primaryFont
-} from '../Fonts';
-
 export default function ({
   bubbleMinHeight,
+  primaryFont,
   paddingRegular
 }) {
   return {
-    ...primaryFont,
+    fontFamily: primaryFont,
     margin: 0,
     minHeight: bubbleMinHeight - paddingRegular * 2,
     padding: paddingRegular,

packages/component/src/Styles/StyleSet/Timestamp.js

@@ -1,14 +1,12 @@
-import {
-  primarySmallFont
-} from '../Fonts';
-
 export default function createTimestampStyle({
-  timestampColor
+  timestampColor,
+  primaryFont,
+  fontSizeSmall
 }) {
   return {
-    ...primarySmallFont,
-
     color: timestampColor,
+    fontFamily: primaryFont,
+    fontSize: fontSizeSmall,
     paddingTop: 5
   };
 }

packages/component/src/Styles/adaptiveCardHostConfig.js

@@ -1,99 +1,35 @@
 import { HostConfig } from 'adaptivecards';
 import defaultStyleSetOptions from './defaultStyleSetOptions';
-import { primaryFont } from './Fonts';
-
 // https://docs.microsoft.com/en-us/adaptive-cards/rendering-cards/host-config
 
-export default ({ accent } = defaultStyleSetOptions) => new HostConfig({
+export default ({
+  accent,
+  bubbleTextColor,
+  primaryFont,
+  subtle
+} = defaultStyleSetOptions) => new HostConfig({
   containerStyles: {
     default: {
       foregroundColors: {
+        default: {
+          default: bubbleTextColor,
+          subtle: subtle
+        },
         accent: {
           default: accent,
           subtle: accent
         }
       }
+    },
+    emphasis: {
+      default: {
+        default: bubbleTextColor,
+        subtle: subtle
+      }
     }
   },
-
   supportsInteractivity: true,
-  // spacing: {
-  //   default: 8,
-  //   extraLarge: 32,
-  //   large: 24,
-  //   medium: 16,
-  //   padding: 8,
-  //   small: 4
-  // },
-  // separator: {
-  //   lineThickness: 1,
-  //   lineColor: '#cccccc'
-  // },
-  fontFamily: primaryFont.fontFamily,
-  // fontSizes: {
-  //   small: 12,
-  //   default: 13,
-  //   medium: 15,
-  //   large: 17,
-  //   extraLarge: 19
-  // },
-  // "fontWeights": {
-  //   "lighter": 200,
-  //   "default": 400,
-  //   "bolder": 700
-  // },
-  // "containerStyles": {
-  //   "default": {
-  //     "backgroundColor": "#00000000",
-  //     "foregroundColors": {
-  //       "default": {
-  //         "default": "#000000",
-  //         "subtle": "#808c95"
-  //       },
-  //       "accent": {
-  //         "default": "#2e89fc",
-  //         "subtle": "#802E8901"
-  //       },
-  //       "attention": {
-  //         "default": "#ffd800",
-  //         "subtle": "#CCFFD800"
-  //       },
-  //       "good": {
-  //         "default": "#00ff00",
-  //         "subtle": "#CC00FF00"
-  //       },
-  //       "warning": {
-  //         "default": "#ff0000",
-  //         "subtle": "#CCFF0000"
-  //       }
-  //     }
-  //   },
-  //   "emphasis": {
-  //     "backgroundColor": "#08000000",
-  //     "foregroundColors": {
-  //       "default": {
-  //         "default": "#333333",
-  //         "subtle": "#EE333333"
-  //       },
-  //       "accent": {
-  //         "default": "#2e89fc",
-  //         "subtle": "#882E89FC"
-  //       },
-  //       "attention": {
-  //         "default": "#cc3300",
-  //         "subtle": "#DDCC3300"
-  //       },
-  //       "good": {
-  //         "default": "#54a254",
-  //         "subtle": "#DD54A254"
-  //       },
-  //       "warning": {
-  //         "default": "#e69500",
-  //         "subtle": "#DDE69500"
-  //       }
-  //     }
-  //   }
-  // },
+  fontFamily: primaryFont,
   imageSizes: {
     small: 40,
     medium: 80,

packages/component/src/Styles/defaultStyleSetOptions.js

@@ -1,4 +1,7 @@
-// TODO: [P4] Rename styleSetOptions to styleOptions
+function fontFamily(fonts) {
+  return fonts.map(font => `'${ font }'`).join(', ');
+}
+
 const DEFAULT_ACCENT = '#0063B1';
 const DEFAULT_SUBTLE = '#767676'; // With contrast 4.5:1 to white
 
@@ -10,6 +13,11 @@ const DEFAULT_OPTIONS = {
   paddingWide: 20,
   subtle: DEFAULT_SUBTLE,
 
+  // fonts
+  primaryFont: fontFamily(['Calibri', 'Helvetica Neue', 'Arial', 'sans-serif']),
+  monospaceFont: fontFamily(['Consolas', 'Courier New', 'monospace']),
+  fontSizeSmall: '80%',
+
   // Avatar
   avatarSize: 40,
   botAvatarImage: '',