feat(AdaptiveCardsComponent): implement properties 'color' and 'isSub…

…tle'
webex · Dec 20, 2021 · 61744e1 · 61744e1
1 parent 416232d
commit 61744e1
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 43 deletions.
diff --git a/src/components/adaptive-cards/AdaptiveCard/__snapshots__/AdaptiveCard.stories.storyshot b/src/components/adaptive-cards/AdaptiveCard/__snapshots__/AdaptiveCard.stories.storyshot
@@ -27,12 +27,12 @@ Array [
         className="wxc-adaptive-cards-column wxc-ac-container--vertical"
       >
         <div
-          className="wxc-adaptive-cards-text-block wxc-ac-weight--Lighter"
+          className="wxc-adaptive-cards-text-block wxc-ac-weight--Lighter wxc-ac-color--Accent"
         >
           Cisco Webex Teams
         </div>
         <div
-          className="wxc-adaptive-cards-text-block wxc-ac-weight--Bolder wxc-ac-horizontal-alignment--Left wxc-ac-wrap--true wxc-ac-size--Large wxc-ac-spacing--Small"
+          className="wxc-adaptive-cards-text-block wxc-ac-weight--Bolder wxc-ac-horizontal-alignment--Left wxc-ac-wrap--true wxc-ac-color--Light wxc-ac-size--Large wxc-ac-spacing--Small"
         >
           Buttons and Cards Release
         </div>
@@ -45,17 +45,17 @@ Array [
         className="wxc-adaptive-cards-column wxc-ac-container--vertical"
       >
         <div
-          className="wxc-adaptive-cards-text-block"
+          className="wxc-adaptive-cards-text-block wxc-ac-color--Light"
         >
           Release Date:
         </div>
         <div
-          className="wxc-adaptive-cards-text-block wxc-ac-weight--Lighter wxc-ac-spacing--Small"
+          className="wxc-adaptive-cards-text-block wxc-ac-weight--Lighter wxc-ac-color--Light wxc-ac-spacing--Small"
         >
           Product:
         </div>
         <div
-          className="wxc-adaptive-cards-text-block wxc-ac-weight--Lighter wxc-ac-spacing--Small"
+          className="wxc-adaptive-cards-text-block wxc-ac-weight--Lighter wxc-ac-color--Light wxc-ac-spacing--Small"
         >
           OS:
         </div>
@@ -64,17 +64,17 @@ Array [
         className="wxc-adaptive-cards-column wxc-ac-container--vertical"
       >
         <div
-          className="wxc-adaptive-cards-text-block"
+          className="wxc-adaptive-cards-text-block wxc-ac-color--Light"
         >
           Aug 6, 2019
         </div>
         <div
-          className="wxc-adaptive-cards-text-block wxc-ac-weight--Lighter wxc-ac-spacing--Small"
+          className="wxc-adaptive-cards-text-block wxc-ac-color--Light wxc-ac-weight--Lighter wxc-ac-spacing--Small"
         >
           Webex Teams
         </div>
         <div
-          className="wxc-adaptive-cards-text-block wxc-ac-weight--Lighter wxc-ac-spacing--Small"
+          className="wxc-adaptive-cards-text-block wxc-ac-weight--Lighter wxc-ac-color--Light wxc-ac-spacing--Small"
         >
           Mac, Windows, Web
         </div>
@@ -773,7 +773,7 @@ Array [
       Hi,
     </div>
     <div
-      className="wxc-adaptive-cards-text-block"
+      className="wxc-adaptive-cards-text-block wxc-ac-is-subtle--true"
     >
       MasterHip
     </div>
@@ -915,7 +915,7 @@ Array [
           Silver Star Mountain
         </div>
         <div
-          className="wxc-adaptive-cards-text-block wxc-ac-spacing--none"
+          className="wxc-adaptive-cards-text-block wxc-ac-is-subtle--true wxc-ac-spacing--none"
         >
           Maps
         </div>
@@ -948,7 +948,7 @@ Array [
           Kitchen Remodel
         </div>
         <div
-          className="wxc-adaptive-cards-text-block wxc-ac-spacing--none"
+          className="wxc-adaptive-cards-text-block wxc-ac-is-subtle--true wxc-ac-spacing--none"
         >
           With EMPHASIS
         </div>
@@ -981,7 +981,7 @@ Array [
           The Witcher
         </div>
         <div
-          className="wxc-adaptive-cards-text-block wxc-ac-spacing--none"
+          className="wxc-adaptive-cards-text-block wxc-ac-is-subtle--true wxc-ac-spacing--none"
         >
           Netflix
         </div>
@@ -1045,37 +1045,37 @@ Array [
         This container has the default style
       </div>
       <div
-        className="wxc-adaptive-cards-text-block"
+        className="wxc-adaptive-cards-text-block wxc-ac-color--default"
       >
         color: default
       </div>
       <div
-        className="wxc-adaptive-cards-text-block"
+        className="wxc-adaptive-cards-text-block wxc-ac-color--accent"
       >
         color: accent
       </div>
       <div
-        className="wxc-adaptive-cards-text-block"
+        className="wxc-adaptive-cards-text-block wxc-ac-color--good"
       >
         color: good
       </div>
       <div
-        className="wxc-adaptive-cards-text-block"
+        className="wxc-adaptive-cards-text-block wxc-ac-color--warning"
       >
         color: warning
       </div>
       <div
-        className="wxc-adaptive-cards-text-block"
+        className="wxc-adaptive-cards-text-block wxc-ac-color--attention"
       >
         color: attention
       </div>
       <div
-        className="wxc-adaptive-cards-text-block"
+        className="wxc-adaptive-cards-text-block wxc-ac-color--light"
       >
         color: light
       </div>
       <div
-        className="wxc-adaptive-cards-text-block"
+        className="wxc-adaptive-cards-text-block wxc-ac-color--dark"
       >
         color: dark
       </div>
@@ -1089,45 +1089,45 @@ Array [
         This container has the accent style
       </div>
       <div
-        className="wxc-adaptive-cards-text-block"
+        className="wxc-adaptive-cards-text-block wxc-ac-color--default"
       >
         color: default
       </div>
       <div
-        className="wxc-adaptive-cards-text-block"
+        className="wxc-adaptive-cards-text-block wxc-ac-color--accent"
       >
         color: accent
       </div>
       <div
-        className="wxc-adaptive-cards-text-block"
+        className="wxc-adaptive-cards-text-block wxc-ac-color--good"
       >
         color: good
       </div>
       <div
-        className="wxc-adaptive-cards-text-block"
+        className="wxc-adaptive-cards-text-block wxc-ac-color--warning"
       >
         color: warning
       </div>
       <div
-        className="wxc-adaptive-cards-text-block"
+        className="wxc-adaptive-cards-text-block wxc-ac-color--attention"
       >
         color: attention
       </div>
       <div
-        className="wxc-adaptive-cards-text-block"
+        className="wxc-adaptive-cards-text-block wxc-ac-color--light"
       >
         color: light
       </div>
       <div
-        className="wxc-adaptive-cards-text-block"
+        className="wxc-adaptive-cards-text-block wxc-ac-color--dark"
       >
         color: dark
       </div>
       <div
         className="wxc-container wxc-ac-container--vertical"
       >
         <div
-          className="wxc-adaptive-cards-text-block"
+          className="wxc-adaptive-cards-text-block wxc-ac-color--dark"
         >
           Contained container - no style
         </div>
@@ -1136,7 +1136,7 @@ Array [
         className="wxc-container wxc-ac-container-style--emphasis wxc-ac-container--vertical"
       >
         <div
-          className="wxc-adaptive-cards-text-block"
+          className="wxc-adaptive-cards-text-block wxc-ac-color--dark"
         >
           Contained container - emphasis
         </div>
@@ -1145,7 +1145,7 @@ Array [
         className="wxc-container wxc-ac-container-style--default wxc-ac-container--vertical"
       >
         <div
-          className="wxc-adaptive-cards-text-block"
+          className="wxc-adaptive-cards-text-block wxc-ac-color--dark"
         >
           Contained container - default
         </div>
@@ -1154,7 +1154,7 @@ Array [
         className="wxc-container wxc-ac-container-style--good wxc-ac-container--vertical"
       >
         <div
-          className="wxc-adaptive-cards-text-block"
+          className="wxc-adaptive-cards-text-block wxc-ac-color--dark"
         >
           Contained container - good
         </div>
@@ -1163,7 +1163,7 @@ Array [
         className="wxc-container wxc-ac-container-style--warning wxc-ac-container--vertical"
       >
         <div
-          className="wxc-adaptive-cards-text-block"
+          className="wxc-adaptive-cards-text-block wxc-ac-color--dark"
         >
           Contained container - warning
         </div>
@@ -1172,7 +1172,7 @@ Array [
         className="wxc-container wxc-ac-container-style--attention wxc-ac-container--vertical"
       >
         <div
-          className="wxc-adaptive-cards-text-block"
+          className="wxc-adaptive-cards-text-block wxc-ac-color--dark"
         >
           Contained container - attention
         </div>
@@ -1181,7 +1181,7 @@ Array [
         className="wxc-container wxc-ac-container-style--accent wxc-ac-container--vertical"
       >
         <div
-          className="wxc-adaptive-cards-text-block"
+          className="wxc-adaptive-cards-text-block wxc-ac-color--dark"
         >
           Contained container - accent
         </div>
@@ -1646,37 +1646,37 @@ Array [
     className="wxc-adaptive-card"
   >
     <div
-      className="wxc-adaptive-cards-text-block"
+      className="wxc-adaptive-cards-text-block wxc-ac-color--default"
     >
       color: default
     </div>
     <div
-      className="wxc-adaptive-cards-text-block"
+      className="wxc-adaptive-cards-text-block wxc-ac-color--accent"
     >
       color: accent
     </div>
     <div
-      className="wxc-adaptive-cards-text-block"
+      className="wxc-adaptive-cards-text-block wxc-ac-color--good"
     >
       color: good
     </div>
     <div
-      className="wxc-adaptive-cards-text-block"
+      className="wxc-adaptive-cards-text-block wxc-ac-color--warning"
     >
       color: warning
     </div>
     <div
-      className="wxc-adaptive-cards-text-block"
+      className="wxc-adaptive-cards-text-block wxc-ac-color--attention"
     >
       color: attention
     </div>
     <div
-      className="wxc-adaptive-cards-text-block"
+      className="wxc-adaptive-cards-text-block wxc-ac-color--light"
     >
       color: light
     </div>
     <div
-      className="wxc-adaptive-cards-text-block"
+      className="wxc-adaptive-cards-text-block wxc-ac-color--dark"
     >
       color: dark
     </div>
@@ -1711,12 +1711,12 @@ Array [
       **horizontalAlignment:right**
     </div>
     <div
-      className="wxc-adaptive-cards-text-block"
+      className="wxc-adaptive-cards-text-block wxc-ac-is-subtle--false"
     >
       isSubtle:false
     </div>
     <div
-      className="wxc-adaptive-cards-text-block"
+      className="wxc-adaptive-cards-text-block wxc-ac-is-subtle--true"
     >
       isSubtle:true
     </div>
@@ -1792,7 +1792,7 @@ Array [
       Style set to heading
     </div>
     <div
-      className="wxc-adaptive-cards-text-block wxc-ac-container-style--heading wxc-ac-wrap--true"
+      className="wxc-adaptive-cards-text-block wxc-ac-container-style--heading wxc-ac-color--good wxc-ac-wrap--true"
       role="heading"
     >
       Style set to heading, color set to good

diff --git a/src/components/adaptive-cards/Component/Component.jsx b/src/components/adaptive-cards/Component/Component.jsx
@@ -7,13 +7,15 @@ const containerTypes = {};
 
 export const acPropTypes = {
   children: 'children',
+  color: 'color',
   containerStyle: 'container-style',
   defaultImageSize: 'default-image-size',
   fontType: 'font-type',
   horizontalAlignment: 'horizontal-alignment',
   id: 'id',
   imageSize: 'image-size',
   imageStyle: 'image-style',
+  isSubtle: 'is-subtle',
   isVisible: 'is-visible',
   rtl: 'rtl',
   separator: 'separator',

diff --git a/src/components/adaptive-cards/Component/Component.scss b/src/components/adaptive-cards/Component/Component.scss
@@ -96,6 +96,26 @@ $C: #{$WEBEX_COMPONENTS_CLASS_PREFIX}-ac;
   display: none;
 }
 
+.#{$C}-is-subtle--true {
+  color: var(--wxc-adaptive-cards--subtle-color--default);
+  &.#{$C}-color--dark { color: var(--wxc-adaptive-cards--subtle-color--dark); }
+  &.#{$C}-color--light { color: var(--wxc-adaptive-cards--subtle-color--light); }
+  &.#{$C}-color--accent { color: var(--wxc-adaptive-cards--subtle-color--accent); }
+  &.#{$C}-color--good { color: var(--wxc-adaptive-cards--subtle-color--good); }
+  &.#{$C}-color--warning { color: var(--wxc-adaptive-cards--subtle-color--warning); }
+  &.#{$C}-color--attention { color: var(--wxc-adaptive-cards--subtle-color--attention); }
+}
+
+:not(.#{$C}-is-subtle--true) {
+  &.#{$C}-color--default { color: var(--wxc-adaptive-cards--color--default); }
+  &.#{$C}-color--dark { color: var(--wxc-adaptive-cards--color--dark); }
+  &.#{$C}-color--light { color: var(--wxc-adaptive-cards--color--light); }
+  &.#{$C}-color--accent { color: var(--wxc-adaptive-cards--color--accent); }
+  &.#{$C}-color--good { color: var(--wxc-adaptive-cards--color--good); }
+  &.#{$C}-color--warning { color: var(--wxc-adaptive-cards--color--warning); }
+  &.#{$C}-color--attention { color: var(--wxc-adaptive-cards--color--attention); }
+}
+
 .#{$WEBEX_COMPONENTS_CLASS_PREFIX}-adaptive-cards-unknown-component {
   white-space: pre-wrap;
 }
diff --git a/src/components/adaptive-cards/TextBlock/TextBlock.jsx b/src/components/adaptive-cards/TextBlock/TextBlock.jsx
@@ -35,9 +35,11 @@ TextBlock.defaultProps = {
 };
 
 TextBlock.acPropTypes = {
+  color: acPropTypes.color,
   fontType: acPropTypes.fontType,
   horizontalAlignment: acPropTypes.horizontalAlignment,
   id: acPropTypes.id,
+  isSubtle: acPropTypes.isSubtle,
   isVisible: acPropTypes.isVisible,
   separator: acPropTypes.separator,
   size: acPropTypes.size,

diff --git a/src/themes/dark.scss b/src/themes/dark.scss
@@ -194,4 +194,20 @@
   --wxc-adaptive-cards--background-color--warning: #{$wxc-yellow-80};
 
   --wxc-adaptive-cards--separator-color: #{$wxc-black-alpha-60};
+
+  --wxc-adaptive-cards--color--default: #{$wxc-white-alpha-95};
+  --wxc-adaptive-cards--color--dark: #{$wxc-white-alpha-95};
+  --wxc-adaptive-cards--color--light: #{$wxc-white-alpha-70};
+  --wxc-adaptive-cards--color--accent: #{$wxc-blue-40};
+  --wxc-adaptive-cards--color--good: #{$wxc-green-40};
+  --wxc-adaptive-cards--color--warning: #{$wxc-yellow-40};
+  --wxc-adaptive-cards--color--attention: #{$wxc-red-40};
+
+  --wxc-adaptive-cards--subtle-color--default: #{$wxc-white-alpha-70};
+  --wxc-adaptive-cards--subtle-color--dark: #{$wxc-white-alpha-70};
+  --wxc-adaptive-cards--subtle-color--light: #{$wxc-white-alpha-60};
+  --wxc-adaptive-cards--subtle-color--accent: #{$wxc-blue-30};
+  --wxc-adaptive-cards--subtle-color--good: #{$wxc-green-30};
+  --wxc-adaptive-cards--subtle-color--warning: #{$wxc-yellow-30};
+  --wxc-adaptive-cards--subtle-color--attention: #{$wxc-red-30};
 }