Add Adaptive Cards styling to full bundle options

microsoft · Mar 30, 2021 · 0bd9611 · 0bd9611
1 parent 5251df1
commit 0bd9611
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 21 deletions.
diff --git a/__tests__/adaptiveCards.js b/__tests__/adaptiveCards.js
@@ -7,7 +7,7 @@ import scrollToBottomCompleted from './setup/conditions/scrollToBottomCompleted'
 import uiConnected from './setup/conditions/uiConnected';
 
 import createAdaptiveCardsHostConfig from '../packages/bundle/src/adaptiveCards/Styles/adaptiveCardHostConfig';
-import defaultStyleOptions from '../packages/api/src/defaultStyleOptions';
+import fullBundleDefaultStyleOptions from '../packages/bundle/src/fullBundleDefaultStyleOptions';
 
 // selenium-webdriver API doc:
 // https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
@@ -57,7 +57,7 @@ test('action styles', async () => {
 });
 
 test('breakfast card with custom host config', async () => {
-  const adaptiveCardHostConfig = createAdaptiveCardsHostConfig({ ...defaultStyleOptions, bubbleTextColor: '#FF0000' });
+  const adaptiveCardHostConfig = createAdaptiveCardsHostConfig({ ...fullBundleDefaultStyleOptions, bubbleTextColor: '#FF0000' });
 
   const { driver, pageObjects } = await setupWebDriver({
     props: {

diff --git a/packages/bundle/src/adaptiveCards/AdaptiveCardsStyleOptions.ts b/packages/bundle/src/adaptiveCards/AdaptiveCardsStyleOptions.ts
@@ -1,16 +1,21 @@
-type AdaptiveCardStyleOptions = {
+type ADAPTIVE_CARD_DEFAULT_STYLE_OPTIONS = {
   /**
-   * Cards styling
+   * Adaptive Cards styling
    */
 
-  // TODO: Put JSDoc on every options.
+  /**
+   * Adaptive Cards styling for 'emphasis' container style
+   */
   cardEmphasisBackgroundColor?: string;
 
   /**
-   * Cards: Adaptive Card push button
+   * Adaptive Cards: background color of Adaptive Cards button with status of 'aria-pressed'
    */
-
   cardPushButtonBackgroundColor?: string;
+
+  /**
+   * Adaptive Cards: text color of Adaptive Cards button with status of 'aria-pressed'
+   */
   cardPushButtonTextColor?: string;
 
   /**
@@ -20,4 +25,4 @@ type AdaptiveCardStyleOptions = {
   richCardWrapTitle?: boolean;
 };
 
-export default AdaptiveCardStyleOptions;
+export default ADAPTIVE_CARD_DEFAULT_STYLE_OPTIONS;
diff --git a/...s/Styles/StyleSet/AdaptiveCardRenderer.js → ...s/Styles/StyleSet/AdaptiveCardRenderer.ts b/...s/Styles/StyleSet/AdaptiveCardRenderer.js → ...s/Styles/StyleSet/AdaptiveCardRenderer.ts
@@ -1,10 +1,12 @@
+import FullBundleStyleOptions from '../../../FullBundleStyleOptions';
+
 export default function ({
   cardPushButtonBackgroundColor,
   cardPushButtonTextColor,
   accent,
   paddingRegular,
   primaryFont
-}) {
+}: FullBundleStyleOptions) {
   return {
     '&.webchat__adaptive-card-renderer': {
       '& .ac-input, & .ac-inlineActionButton, & .ac-quickActionButton': {

diff --git a/...iveCards/Styles/adaptiveCardHostConfig.js → ...iveCards/Styles/adaptiveCardHostConfig.ts b/...iveCards/Styles/adaptiveCardHostConfig.js → ...iveCards/Styles/adaptiveCardHostConfig.ts
@@ -1,4 +1,5 @@
-import { defaultStyleOptions } from 'botframework-webchat-api';
+import FullBundleStyleOptions from '../../FullBundleStyleOptions';
+
 // https://docs.microsoft.com/en-us/adaptive-cards/rendering-cards/host-config
 
 export default ({
@@ -7,7 +8,7 @@ export default ({
   cardEmphasisBackgroundColor,
   primaryFont,
   subtle
-} = defaultStyleOptions) => ({
+}: FullBundleStyleOptions) => ({
   containerStyles: {
     default: {
       foregroundColors: {

diff --git a/packages/bundle/src/adaptiveCards/Styles/createAdaptiveCardsStyleSet.js b/packages/bundle/src/adaptiveCards/Styles/createAdaptiveCardsStyleSet.js
@@ -1,15 +1,14 @@
-import { defaultStyleOptions } from 'botframework-webchat-api';
-
 import createAdaptiveCardRendererStyle from './StyleSet/AdaptiveCardRenderer';
 import createAnimationCardAttachmentStyle from './StyleSet/AnimationCardAttachment';
 import createAudioCardAttachmentStyle from './StyleSet/AudioCardAttachment';
+import fullBundleStyleOptions from '../../fullBundleDefaultStyleOptions';
 
 // TODO: [P4] We should add a notice for people who want to use "styleSet" instead of "styleOptions".
 //       "styleSet" is actually CSS stylesheet and it is based on the DOM tree.
 //       DOM tree may change from time to time, thus, maintaining "styleSet" becomes a constant effort.
 
 export default function createAdaptiveCardsStyleSet(options) {
-  options = { ...defaultStyleOptions, ...options };
+  options = { ...fullBundleStyleOptions, ...options };
 
   return {
     adaptiveCardRenderer: createAdaptiveCardRendererStyle(options),

diff --git a/packages/bundle/src/index.ts b/packages/bundle/src/index.ts
@@ -18,6 +18,7 @@ import createDirectLineSpeechAdapters from './createDirectLineSpeechAdapters';
 import createStyleSet from './createFullStyleSet';
 import defaultCreateDirectLine from './createDirectLine';
 import defaultCreateDirectLineAppServiceExtension from './createDirectLineAppServiceExtension';
+import fullBundleDefaultStyleOptions from './fullBundleDefaultStyleOptions';
 import FullComposer from './FullComposer';
 import HeroCardContent from './adaptiveCards/Attachment/HeroCardContent';
 import OAuthCardContent from './adaptiveCards/Attachment/OAuthCardContent';
@@ -79,6 +80,7 @@ export {
   createCognitiveServicesSpeechServicesPonyfillFactory,
   createDirectLineSpeechAdapters,
   createStyleSet,
+  fullBundleDefaultStyleOptions,
   patchedHooks as hooks,
   renderMarkdown,
   renderWebChat
@@ -94,6 +96,7 @@ window['WebChat'] = {
   createDirectLineAppServiceExtension,
   createDirectLineSpeechAdapters,
   createStyleSet,
+  fullBundleDefaultStyleOptions,
   hooks: patchedHooks,
   ReactWebChat,
   renderMarkdown,

diff --git a/packages/bundle/src/useComposerProps.js b/packages/bundle/src/useComposerProps.js
@@ -1,9 +1,10 @@
 import { useMemo } from 'react';
 
-import { concatMiddleware, defaultStyleOptions } from 'botframework-webchat-component';
+import { concatMiddleware } from 'botframework-webchat-component';
 import createAdaptiveCardsAttachmentForScreenReaderMiddleware from './adaptiveCards/createAdaptiveCardsAttachmentForScreenReaderMiddleware';
 import createAdaptiveCardsAttachmentMiddleware from './adaptiveCards/createAdaptiveCardsAttachmentMiddleware';
 import createAdaptiveCardsStyleSet from './adaptiveCards/Styles/createAdaptiveCardsStyleSet';
+import fullBundleStyleOptions from './fullBundleDefaultStyleOptions';
 import defaultRenderMarkdown from './renderMarkdown';
 
 export default function useComposerProps({
@@ -24,7 +25,7 @@ export default function useComposerProps({
     [attachmentForScreenReaderMiddleware]
   );
 
-  const patchedStyleOptions = useMemo(() => ({ ...defaultStyleOptions, ...styleOptions }), [styleOptions]);
+  const patchedStyleOptions = useMemo(() => ({ ...fullBundleStyleOptions, ...styleOptions }), [styleOptions]);
 
   // When styleSet is not specified, the styleOptions will be used to create Adaptive Cards styleSet and merged into useStyleSet.
   const extraStyleSet = useMemo(() => (styleSet ? undefined : createAdaptiveCardsStyleSet(patchedStyleOptions)), [

diff --git a/packages/component/src/Styles/defaultStyleOptions.js b/packages/component/src/Styles/defaultStyleOptions.js
@@ -13,7 +13,6 @@ const DEFAULT_OPTIONS = {
   accent: DEFAULT_ACCENT,
   activeActivityOutlineColor: DEFAULT_SUBTLE,
   backgroundColor: 'White',
-  cardEmphasisBackgroundColor: '#F0F0F0',
   paddingRegular: PADDING_REGULAR,
   paddingWide: PADDING_REGULAR * 2,
   subtle: DEFAULT_SUBTLE,
@@ -213,10 +212,7 @@ const DEFAULT_OPTIONS = {
 
   transcriptVisualKeyboardIndicatorColor: 'Black',
   transcriptVisualKeyboardIndicatorStyle: 'solid',
-  transcriptVisualKeyboardIndicatorWidth: 2,
-  //AdaptiveCard push button
-  cardPushButtonBackgroundColor: '#0063B1',
-  cardPushButtonTextColor: 'white'
+  transcriptVisualKeyboardIndicatorWidth: 2
 };
 
 export default DEFAULT_OPTIONS;