From 0bd9611d67a63185adc2c5b6dd4b5d8871f26c9e Mon Sep 17 00:00:00 2001 From: Corina <14900841+corinagum@users.noreply.github.com> Date: Mon, 29 Mar 2021 21:20:19 -0700 Subject: [PATCH] Add Adaptive Cards styling to full bundle options --- __tests__/adaptiveCards.js | 4 ++-- .../adaptiveCards/AdaptiveCardsStyleOptions.ts | 17 +++++++++++------ ...eCardRenderer.js => AdaptiveCardRenderer.ts} | 4 +++- ...dHostConfig.js => adaptiveCardHostConfig.ts} | 5 +++-- .../Styles/createAdaptiveCardsStyleSet.js | 5 ++--- packages/bundle/src/index.ts | 3 +++ packages/bundle/src/useComposerProps.js | 5 +++-- .../component/src/Styles/defaultStyleOptions.js | 6 +----- 8 files changed, 28 insertions(+), 21 deletions(-) rename packages/bundle/src/adaptiveCards/Styles/StyleSet/{AdaptiveCardRenderer.js => AdaptiveCardRenderer.ts} (94%) rename packages/bundle/src/adaptiveCards/Styles/{adaptiveCardHostConfig.js => adaptiveCardHostConfig.ts} (95%) diff --git a/__tests__/adaptiveCards.js b/__tests__/adaptiveCards.js index 73cf39d03c..4c36051de0 100644 --- 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 index 0e12357c4d..c153a0d04f 100644 --- 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/packages/bundle/src/adaptiveCards/Styles/StyleSet/AdaptiveCardRenderer.js b/packages/bundle/src/adaptiveCards/Styles/StyleSet/AdaptiveCardRenderer.ts similarity index 94% rename from packages/bundle/src/adaptiveCards/Styles/StyleSet/AdaptiveCardRenderer.js rename to packages/bundle/src/adaptiveCards/Styles/StyleSet/AdaptiveCardRenderer.ts index d517c0f333..9094f6c0e3 100644 --- a/packages/bundle/src/adaptiveCards/Styles/StyleSet/AdaptiveCardRenderer.js +++ b/packages/bundle/src/adaptiveCards/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/packages/bundle/src/adaptiveCards/Styles/adaptiveCardHostConfig.js b/packages/bundle/src/adaptiveCards/Styles/adaptiveCardHostConfig.ts similarity index 95% rename from packages/bundle/src/adaptiveCards/Styles/adaptiveCardHostConfig.js rename to packages/bundle/src/adaptiveCards/Styles/adaptiveCardHostConfig.ts index f107056c04..35f9df2724 100644 --- a/packages/bundle/src/adaptiveCards/Styles/adaptiveCardHostConfig.js +++ b/packages/bundle/src/adaptiveCards/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 index 94658ef4a1..9baed1f73a 100644 --- 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 index 92beb6d471..3d7caa1ffc 100644 --- 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 index c1222e68e3..a82dcafc23 100644 --- 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 index 5c069eba12..c8f0b1f212 100644 --- 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;