From a37b133d705c10dc1ad88efe7726e5bbc7c51f3d Mon Sep 17 00:00:00 2001
From: Patricia Mihut <pmihut@cisco.com>
Date: Mon, 20 Dec 2021 11:56:16 +0200
Subject: [PATCH] fix(AdaptiveCards): implement generic handling of adaptive
 card properties

---
 .../AdaptiveCard.stories.storyshot            | 497 +++++++++---------
 .../adaptive-cards/Column/Column.jsx          |  42 +-
 .../adaptive-cards/Column/Column.scss         |  15 -
 .../adaptive-cards/ColumnSet/ColumnSet.jsx    |  43 +-
 .../adaptive-cards/ColumnSet/ColumnSet.scss   |  10 -
 .../adaptive-cards/Component/Component.jsx    |  68 ++-
 .../adaptive-cards/Component/Component.scss   |  69 ++-
 .../adaptive-cards/Container/Container.jsx    |  51 +-
 .../adaptive-cards/Container/Container.scss   |  13 -
 src/components/adaptive-cards/Image/Image.jsx |  50 +-
 .../adaptive-cards/Image/Image.scss           |  14 -
 .../adaptive-cards/ImageSet/ImageSet.jsx      |  31 +-
 .../adaptive-cards/TextBlock/TextBlock.jsx    |  48 +-
 .../adaptive-cards/TextBlock/TextBlock.scss   |  35 --
 .../adaptive-cards/_adaptive-cards.scss       |   5 -
 15 files changed, 487 insertions(+), 504 deletions(-)
 delete mode 100644 src/components/adaptive-cards/Column/Column.scss
 delete mode 100644 src/components/adaptive-cards/ColumnSet/ColumnSet.scss
 delete mode 100644 src/components/adaptive-cards/Container/Container.scss
 delete mode 100644 src/components/adaptive-cards/Image/Image.scss
 delete mode 100644 src/components/adaptive-cards/TextBlock/TextBlock.scss

diff --git a/src/components/adaptive-cards/AdaptiveCard/__snapshots__/AdaptiveCard.stories.storyshot b/src/components/adaptive-cards/AdaptiveCard/__snapshots__/AdaptiveCard.stories.storyshot
index 69c3544f1..58a47bbd4 100644
--- a/src/components/adaptive-cards/AdaptiveCard/__snapshots__/AdaptiveCard.stories.storyshot
+++ b/src/components/adaptive-cards/AdaptiveCard/__snapshots__/AdaptiveCard.stories.storyshot
@@ -6,13 +6,13 @@ Array [
     className="wxc-adaptive-card"
   >
     <div
-      className="wxc-adaptive-cards-column-set wxc-adaptive-cards-component wxc-adaptive-cards-component__container--vertical "
+      className="wxc-adaptive-cards-column-set wxc-ac-container--horizontal"
     >
       <div
-        className="wxc-column "
+        className="wxc-adaptive-cards-column wxc-ac-container--vertical"
       >
         <img
-          className="wxc-adaptive-cards-image wxc-adaptive-cards-image__style--Person wxc-adaptive-cards-image__size--Medium"
+          className="wxc-adaptive-cards-image wxc-ac-image-style--Person wxc-ac-image-size--Medium"
           src="https://developer.webex.com/images/webex-teams-logo.png"
           style={
             Object {
@@ -24,81 +24,81 @@ Array [
         />
       </div>
       <div
-        className="wxc-column "
+        className="wxc-adaptive-cards-column wxc-ac-container--vertical"
       >
         <div
-          className="wxc-text-block wxc-text-block__weight--Lighter"
+          className="wxc-adaptive-cards-text-block wxc-ac-weight--Lighter"
         >
           Cisco Webex Teams
         </div>
         <div
-          className="wxc-text-block wxc-text-block__weight--Bolder wxc-text-block__horizontalAlignment--Left wxc-text-block__wrap--true wxc-text-block__size--Large"
+          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"
         >
           Buttons and Cards Release
         </div>
       </div>
     </div>
     <div
-      className="wxc-adaptive-cards-column-set wxc-adaptive-cards-component wxc-adaptive-cards-component__spacing--Padding wxc-adaptive-cards-component__container--vertical "
+      className="wxc-adaptive-cards-column-set wxc-ac-spacing--Padding wxc-ac-horizontal-alignment--Center wxc-ac-container--horizontal"
     >
       <div
-        className="wxc-column "
+        className="wxc-adaptive-cards-column wxc-ac-container--vertical"
       >
         <div
-          className="wxc-text-block "
+          className="wxc-adaptive-cards-text-block"
         >
           Release Date:
         </div>
         <div
-          className="wxc-text-block wxc-text-block__weight--Lighter"
+          className="wxc-adaptive-cards-text-block wxc-ac-weight--Lighter wxc-ac-spacing--Small"
         >
           Product:
         </div>
         <div
-          className="wxc-text-block wxc-text-block__weight--Lighter"
+          className="wxc-adaptive-cards-text-block wxc-ac-weight--Lighter wxc-ac-spacing--Small"
         >
           OS:
         </div>
       </div>
       <div
-        className="wxc-column "
+        className="wxc-adaptive-cards-column wxc-ac-container--vertical"
       >
         <div
-          className="wxc-text-block "
+          className="wxc-adaptive-cards-text-block"
         >
           Aug 6, 2019
         </div>
         <div
-          className="wxc-text-block wxc-text-block__weight--Lighter"
+          className="wxc-adaptive-cards-text-block wxc-ac-weight--Lighter wxc-ac-spacing--Small"
         >
           Webex Teams
         </div>
         <div
-          className="wxc-text-block wxc-text-block__weight--Lighter"
+          className="wxc-adaptive-cards-text-block wxc-ac-weight--Lighter wxc-ac-spacing--Small"
         >
           Mac, Windows, Web
         </div>
       </div>
     </div>
     <div
-      className="wxc-text-block wxc-text-block__wrap--true"
+      className="wxc-adaptive-cards-text-block wxc-ac-wrap--true"
     >
       We're making it easier for you to interact with bots and integrations in Webex Teams. When your bot sends information in a space that includes a card with buttons, you can now easily interact with it.
     </div>
     <div
-      className="wxc-text-block "
+      className="wxc-adaptive-cards-text-block"
     >
       Buttons and Cards Resources:
     </div>
     <div
-      className="wxc-adaptive-cards-column-set wxc-adaptive-cards-component wxc-adaptive-cards-component__container--vertical "
+      className="wxc-adaptive-cards-column-set wxc-ac-container--horizontal"
     >
       <div
-        className="wxc-column "
+        className="wxc-adaptive-cards-column wxc-ac-spacing--Small wxc-ac-container--vertical"
       >
         <img
           alt=""
-          className="wxc-adaptive-cards-image wxc-adaptive-cards-image__size--Small"
+          className="wxc-adaptive-cards-image wxc-ac-image-size--Small"
           src="https://developer.webex.com/images/link-icon.png"
           style={
             Object {
@@ -110,10 +110,10 @@ Array [
         />
       </div>
       <div
-        className="wxc-column "
+        className="wxc-adaptive-cards-column wxc-ac-spacing--Small wxc-ac-container--vertical"
       >
         <div
-          className="wxc-text-block wxc-text-block__horizontalAlignment--Left wxc-text-block__size--Medium"
+          className="wxc-adaptive-cards-text-block wxc-ac-horizontal-alignment--Left wxc-ac-size--Medium"
         >
           [Developer Portal Buttons and Cards Guide]()
         </div>
@@ -137,7 +137,8 @@ Array [
             }
         }
     ],
-    "horizontalAlignment": "Left"
+    "horizontalAlignment": "Left",
+    "spacing": "None"
 }
       </pre>
     </div>
@@ -171,18 +172,18 @@ Array [
     className="wxc-adaptive-card"
   >
     <div
-      className="wxc-adaptive-cards-column-set wxc-adaptive-cards-component wxc-adaptive-cards-component__container--vertical "
+      className="wxc-adaptive-cards-column-set wxc-ac-container--horizontal"
     >
       <div
-        className="wxc-column "
+        className="wxc-adaptive-cards-column wxc-ac-container--vertical"
       >
         <div
-          className="wxc-text-block "
+          className="wxc-adaptive-cards-text-block"
         >
           Column 1
         </div>
         <img
-          className="wxc-adaptive-cards-image wxc-adaptive-cards-image__size--medium"
+          className="wxc-adaptive-cards-image"
           src="https://adaptivecards.io/content/cats/1.png"
           style={
             Object {
@@ -194,15 +195,15 @@ Array [
         />
       </div>
       <div
-        className="wxc-column "
+        className="wxc-adaptive-cards-column wxc-ac-container--vertical"
       >
         <div
-          className="wxc-text-block "
+          className="wxc-adaptive-cards-text-block"
         >
           Column 2
         </div>
         <img
-          className="wxc-adaptive-cards-image wxc-adaptive-cards-image__size--medium"
+          className="wxc-adaptive-cards-image"
           src="https://adaptivecards.io/content/cats/1.png"
           style={
             Object {
@@ -214,15 +215,15 @@ Array [
         />
       </div>
       <div
-        className="wxc-column "
+        className="wxc-adaptive-cards-column wxc-ac-container--vertical"
       >
         <div
-          className="wxc-text-block "
+          className="wxc-adaptive-cards-text-block"
         >
           Column 3
         </div>
         <img
-          className="wxc-adaptive-cards-image wxc-adaptive-cards-image__size--medium"
+          className="wxc-adaptive-cards-image"
           src="https://adaptivecards.io/content/cats/1.png"
           style={
             Object {
@@ -235,224 +236,224 @@ Array [
       </div>
     </div>
     <div
-      className="wxc-adaptive-cards-column-set wxc-adaptive-cards-component wxc-adaptive-cards-component__container--vertical "
+      className="wxc-adaptive-cards-column-set wxc-ac-container--horizontal"
     >
       <div
-        className="wxc-column "
+        className="wxc-adaptive-cards-column wxc-ac-container--vertical"
       />
       <div
-        className="wxc-column "
+        className="wxc-adaptive-cards-column wxc-ac-container--vertical"
       />
       <div
-        className="wxc-column "
+        className="wxc-adaptive-cards-column wxc-ac-container--vertical"
       />
     </div>
     <div
-      className="wxc-text-block "
+      className="wxc-adaptive-cards-text-block"
     >
       You can even repeat the background image...
     </div>
     <div
-      className="wxc-adaptive-cards-column-set wxc-adaptive-cards-component wxc-adaptive-cards-component__container--vertical "
+      className="wxc-adaptive-cards-column-set wxc-ac-container--horizontal"
     >
       <div
-        className="wxc-column "
+        className="wxc-adaptive-cards-column wxc-ac-container--vertical"
       />
       <div
-        className="wxc-column "
+        className="wxc-adaptive-cards-column wxc-ac-container--vertical"
       >
         <div
-          className="wxc-text-block wxc-text-block__horizontalAlignment--Center wxc-text-block__wrap--true"
+          className="wxc-adaptive-cards-text-block wxc-ac-horizontal-alignment--Center wxc-ac-wrap--true"
         >
           Those are some neat arrows
         </div>
       </div>
     </div>
     <div
-      className="wxc-text-block "
+      className="wxc-adaptive-cards-text-block"
     >
       Horizontal repeat...
     </div>
     <div
-      className="wxc-adaptive-cards-column-set wxc-adaptive-cards-component wxc-adaptive-cards-component__container--vertical "
+      className="wxc-adaptive-cards-column-set wxc-ac-container--horizontal"
     >
       <div
-        className="wxc-column "
+        className="wxc-adaptive-cards-column wxc-ac-container--vertical"
       />
       <div
-        className="wxc-column "
+        className="wxc-adaptive-cards-column wxc-ac-container--vertical"
       />
       <div
-        className="wxc-column "
+        className="wxc-adaptive-cards-column wxc-ac-container--vertical"
       />
     </div>
     <div
-      className="wxc-text-block "
+      className="wxc-adaptive-cards-text-block"
     >
       Vertical repeat...
     </div>
     <div
-      className="wxc-adaptive-cards-column-set wxc-adaptive-cards-component wxc-adaptive-cards-component__container--vertical "
+      className="wxc-adaptive-cards-column-set wxc-ac-container--horizontal"
     >
       <div
-        className="wxc-column "
+        className="wxc-adaptive-cards-column wxc-ac-container--vertical"
       />
       <div
-        className="wxc-column "
+        className="wxc-adaptive-cards-column wxc-ac-container--vertical"
       />
       <div
-        className="wxc-column "
+        className="wxc-adaptive-cards-column wxc-ac-container--vertical"
       />
     </div>
     <div
-      className="wxc-text-block "
+      className="wxc-adaptive-cards-text-block"
     >
       Bleed left
     </div>
     <div
-      className="wxc-adaptive-cards-column-set wxc-adaptive-cards-component wxc-adaptive-cards-component__container--vertical wxc-adaptive-cards-column-set__style--emphasis"
+      className="wxc-adaptive-cards-column-set wxc-ac-container-style--emphasis wxc-ac-container--horizontal"
     >
       <div
-        className="wxc-column wxc-column__style--good wxc-column__bleed--true"
+        className="wxc-adaptive-cards-column wxc-ac-container-style--good wxc-ac-container--vertical"
       >
         <div
-          className="wxc-text-block "
+          className="wxc-adaptive-cards-text-block"
         >
           Column 1
         </div>
       </div>
       <div
-        className="wxc-column wxc-column__style--attention"
+        className="wxc-adaptive-cards-column wxc-ac-container-style--attention wxc-ac-container--vertical"
       >
         <div
-          className="wxc-text-block "
+          className="wxc-adaptive-cards-text-block"
         >
           Column 2
         </div>
       </div>
       <div
-        className="wxc-column wxc-column__style--warning"
+        className="wxc-adaptive-cards-column wxc-ac-container-style--warning wxc-ac-container--vertical"
       >
         <div
-          className="wxc-text-block "
+          className="wxc-adaptive-cards-text-block"
         >
           Column 3
         </div>
       </div>
     </div>
     <div
-      className="wxc-text-block "
+      className="wxc-adaptive-cards-text-block"
     >
       Bleed center
     </div>
     <div
-      className="wxc-adaptive-cards-column-set wxc-adaptive-cards-component wxc-adaptive-cards-component__container--vertical wxc-adaptive-cards-column-set__style--emphasis"
+      className="wxc-adaptive-cards-column-set wxc-ac-container-style--emphasis wxc-ac-container--horizontal"
     >
       <div
-        className="wxc-column wxc-column__style--good"
+        className="wxc-adaptive-cards-column wxc-ac-container-style--good wxc-ac-container--vertical"
       >
         <div
-          className="wxc-text-block "
+          className="wxc-adaptive-cards-text-block"
         >
           Column 1
         </div>
       </div>
       <div
-        className="wxc-column wxc-column__style--attention wxc-column__bleed--true"
+        className="wxc-adaptive-cards-column wxc-ac-container-style--attention wxc-ac-container--vertical"
       >
         <div
-          className="wxc-text-block "
+          className="wxc-adaptive-cards-text-block"
         >
           Column 2
         </div>
       </div>
       <div
-        className="wxc-column wxc-column__style--warning"
+        className="wxc-adaptive-cards-column wxc-ac-container-style--warning wxc-ac-container--vertical"
       >
         <div
-          className="wxc-text-block "
+          className="wxc-adaptive-cards-text-block"
         >
           Column 3
         </div>
       </div>
     </div>
     <div
-      className="wxc-text-block "
+      className="wxc-adaptive-cards-text-block"
     >
       Bleed right
     </div>
     <div
-      className="wxc-adaptive-cards-column-set wxc-adaptive-cards-component wxc-adaptive-cards-component__container--vertical wxc-adaptive-cards-column-set__style--emphasis"
+      className="wxc-adaptive-cards-column-set wxc-ac-container-style--emphasis wxc-ac-container--horizontal"
     >
       <div
-        className="wxc-column wxc-column__style--good"
+        className="wxc-adaptive-cards-column wxc-ac-container-style--good wxc-ac-container--vertical"
       >
         <div
-          className="wxc-text-block "
+          className="wxc-adaptive-cards-text-block"
         >
           Column 1
         </div>
       </div>
       <div
-        className="wxc-column wxc-column__style--attention"
+        className="wxc-adaptive-cards-column wxc-ac-container-style--attention wxc-ac-container--vertical"
       >
         <div
-          className="wxc-text-block "
+          className="wxc-adaptive-cards-text-block"
         >
           Column 2
         </div>
       </div>
       <div
-        className="wxc-column wxc-column__style--warning wxc-column__bleed--true"
+        className="wxc-adaptive-cards-column wxc-ac-container-style--warning wxc-ac-container--vertical"
       >
         <div
-          className="wxc-text-block "
+          className="wxc-adaptive-cards-text-block"
         >
           Column 3
         </div>
       </div>
     </div>
     <div
-      className="wxc-text-block "
+      className="wxc-adaptive-cards-text-block"
     >
       Bleed all
     </div>
     <div
-      className="wxc-adaptive-cards-column-set wxc-adaptive-cards-component wxc-adaptive-cards-component__container--vertical wxc-adaptive-cards-column-set__style--emphasis"
+      className="wxc-adaptive-cards-column-set wxc-ac-container-style--emphasis wxc-ac-container--horizontal"
     >
       <div
-        className="wxc-column wxc-column__style--good wxc-column__bleed--true"
+        className="wxc-adaptive-cards-column wxc-ac-container-style--good wxc-ac-container--vertical"
       >
         <div
-          className="wxc-text-block "
+          className="wxc-adaptive-cards-text-block"
         >
           Column 1
         </div>
       </div>
       <div
-        className="wxc-column wxc-column__style--attention wxc-column__bleed--true"
+        className="wxc-adaptive-cards-column wxc-ac-container-style--attention wxc-ac-container--vertical"
       >
         <div
-          className="wxc-text-block "
+          className="wxc-adaptive-cards-text-block"
         >
           Column 2
         </div>
       </div>
       <div
-        className="wxc-column wxc-column__style--warning wxc-column__bleed--true"
+        className="wxc-adaptive-cards-column wxc-ac-container-style--warning wxc-ac-container--vertical"
       >
         <div
-          className="wxc-text-block "
+          className="wxc-adaptive-cards-text-block"
         >
           Column 3
         </div>
       </div>
     </div>
     <div
-      className="wxc-adaptive-cards-column-set wxc-adaptive-cards-component wxc-adaptive-cards-component__container--vertical "
+      className="wxc-adaptive-cards-column-set wxc-ac-container--horizontal"
     >
       <div
-        className="wxc-column "
+        className="wxc-adaptive-cards-column wxc-ac-container--vertical"
       >
         <div>
           <h5>
@@ -468,7 +469,7 @@ Array [
         </div>
       </div>
       <div
-        className="wxc-column "
+        className="wxc-adaptive-cards-column wxc-ac-container--vertical"
       >
         <div>
           <h5>
@@ -484,29 +485,29 @@ Array [
         </div>
       </div>
       <div
-        className="wxc-column "
+        className="wxc-adaptive-cards-column wxc-ac-container--vertical"
       >
         <div
-          className="wxc-text-block wxc-text-block__wrap--true"
+          className="wxc-adaptive-cards-text-block wxc-ac-wrap--true"
         >
           This is a column
         </div>
       </div>
     </div>
     <div
-      className="wxc-adaptive-cards-column-set wxc-adaptive-cards-component wxc-adaptive-cards-component__container--vertical wxc-adaptive-cards-column-set__style--emphasis"
+      className="wxc-adaptive-cards-column-set wxc-ac-container-style--emphasis wxc-ac-container--horizontal"
     >
       <div
-        className="wxc-column wxc-column__style--default"
+        className="wxc-adaptive-cards-column wxc-ac-container-style--default wxc-ac-container--vertical"
       >
         <div
-          className="wxc-text-block wxc-text-block__wrap--true"
+          className="wxc-adaptive-cards-text-block wxc-ac-wrap--true"
         >
           The columnset has a minHeight of 100px while this column has a minHeight of 200px so it should override
         </div>
       </div>
       <div
-        className="wxc-column wxc-column__style--default"
+        className="wxc-adaptive-cards-column wxc-ac-container-style--default wxc-ac-container--vertical"
       >
         <div>
           <h5>
@@ -537,52 +538,52 @@ Array [
       </div>
     </div>
     <div
-      className="wxc-text-block wxc-text-block__wrap--true wxc-text-block__size--Medium"
+      className="wxc-adaptive-cards-text-block wxc-ac-wrap--true wxc-ac-size--Medium"
     >
       The middle column is set to rtl
     </div>
     <div
-      className="wxc-adaptive-cards-column-set wxc-adaptive-cards-component wxc-adaptive-cards-component__spacing--Medium wxc-adaptive-cards-component__container--vertical "
+      className="wxc-adaptive-cards-column-set wxc-ac-spacing--Medium wxc-ac-container--horizontal"
     >
       <div
-        className="wxc-column "
+        className="wxc-adaptive-cards-column wxc-ac-container--vertical"
       >
         <div
-          className="wxc-text-block wxc-text-block__wrap--true"
+          className="wxc-adaptive-cards-text-block wxc-ac-wrap--true"
         >
           Column One
         </div>
       </div>
       <div
-        className="wxc-column wxc-column__rtl--true"
+        className="wxc-adaptive-cards-column wxc-ac-rtl--true wxc-ac-container--vertical"
       >
         <div
-          className="wxc-text-block wxc-text-block__wrap--true"
+          className="wxc-adaptive-cards-text-block wxc-ac-wrap--true"
         >
           العمود الثاني
         </div>
       </div>
       <div
-        className="wxc-column "
+        className="wxc-adaptive-cards-column wxc-ac-container--vertical"
       >
         <div
-          className="wxc-text-block wxc-text-block__wrap--true"
+          className="wxc-adaptive-cards-text-block wxc-ac-wrap--true"
         >
           Column three
         </div>
       </div>
     </div>
     <div
-      className="wxc-container"
+      className="wxc-container wxc-ac-container--vertical"
     >
       <div
-        className="wxc-adaptive-cards-column-set wxc-adaptive-cards-component wxc-adaptive-cards-component__container--vertical "
+        className="wxc-adaptive-cards-column-set wxc-ac-container--horizontal"
       >
         <div
-          className="wxc-column "
+          className="wxc-adaptive-cards-column wxc-ac-container--vertical"
         >
           <img
-            className="wxc-adaptive-cards-image wxc-adaptive-cards-image__size--medium"
+            className="wxc-adaptive-cards-image wxc-ac-image-size--medium"
             src="https://adaptivecards.io/content/cats/3.png"
             style={
               Object {
@@ -593,35 +594,35 @@ Array [
             }
           />
           <div
-            className="wxc-text-block wxc-text-block__horizontalAlignment--center wxc-text-block__weight--bolder"
+            className="wxc-adaptive-cards-text-block wxc-ac-horizontal-alignment--center wxc-ac-weight--bolder"
           >
             SHADES
           </div>
         </div>
         <div
-          className="wxc-column "
+          className="wxc-adaptive-cards-column wxc-ac-separator--true wxc-ac-spacing--medium wxc-ac-container--vertical"
         >
           <div
-            className="wxc-text-block wxc-text-block__horizontalAlignment--center"
+            className="wxc-adaptive-cards-text-block wxc-ac-horizontal-alignment--center"
           >
             Dec 4
           </div>
           <div
-            className="wxc-text-block wxc-text-block__horizontalAlignment--center"
+            className="wxc-adaptive-cards-text-block wxc-ac-spacing--none wxc-ac-horizontal-alignment--center"
           >
             Final
           </div>
           <div
-            className="wxc-text-block wxc-text-block__size--extraLarge wxc-text-block__horizontalAlignment--center"
+            className="wxc-adaptive-cards-text-block wxc-ac-size--extraLarge wxc-ac-horizontal-alignment--center"
           >
             7 - 40
           </div>
         </div>
         <div
-          className="wxc-column "
+          className="wxc-adaptive-cards-column wxc-ac-separator--true wxc-ac-spacing--medium wxc-ac-container--vertical"
         >
           <img
-            className="wxc-adaptive-cards-image wxc-adaptive-cards-image__horizontalAlignment--center wxc-adaptive-cards-image__size--medium"
+            className="wxc-adaptive-cards-image wxc-ac-image-size--medium wxc-ac-horizontal-alignment--center"
             src="https://adaptivecards.io/content/cats/2.png"
             style={
               Object {
@@ -632,7 +633,7 @@ Array [
             }
           />
           <div
-            className="wxc-text-block wxc-text-block__horizontalAlignment--center wxc-text-block__weight--bolder"
+            className="wxc-adaptive-cards-text-block wxc-ac-horizontal-alignment--center wxc-ac-weight--bolder"
           >
             SKINS
           </div>
@@ -640,23 +641,23 @@ Array [
       </div>
     </div>
     <div
-      className="wxc-text-block wxc-text-block__weight--bolder"
+      className="wxc-adaptive-cards-text-block wxc-ac-weight--bolder"
     >
       Try clicking a column!
     </div>
     <div
-      className="wxc-adaptive-cards-column-set wxc-adaptive-cards-component wxc-adaptive-cards-component__container--vertical "
+      className="wxc-adaptive-cards-column-set wxc-ac-container--horizontal"
     >
       <div
-        className="wxc-column "
+        className="wxc-adaptive-cards-column wxc-ac-container--vertical"
       >
         <div
-          className="wxc-text-block "
+          className="wxc-adaptive-cards-text-block"
         >
           Column 1
         </div>
         <img
-          className="wxc-adaptive-cards-image wxc-adaptive-cards-image__size--medium"
+          className="wxc-adaptive-cards-image"
           src="https://adaptivecards.io/content/cats/1.png"
           style={
             Object {
@@ -668,15 +669,15 @@ Array [
         />
       </div>
       <div
-        className="wxc-column "
+        className="wxc-adaptive-cards-column wxc-ac-container--vertical"
       >
         <div
-          className="wxc-text-block "
+          className="wxc-adaptive-cards-text-block"
         >
           Column 2
         </div>
         <img
-          className="wxc-adaptive-cards-image wxc-adaptive-cards-image__size--medium"
+          className="wxc-adaptive-cards-image"
           src="https://adaptivecards.io/content/cats/1.png"
           style={
             Object {
@@ -688,15 +689,15 @@ Array [
         />
       </div>
       <div
-        className="wxc-column "
+        className="wxc-adaptive-cards-column wxc-ac-container--vertical"
       >
         <div
-          className="wxc-text-block "
+          className="wxc-adaptive-cards-text-block"
         >
           Column 3
         </div>
         <img
-          className="wxc-adaptive-cards-image wxc-adaptive-cards-image__size--medium"
+          className="wxc-adaptive-cards-image"
           src="https://adaptivecards.io/content/cats/1.png"
           style={
             Object {
@@ -709,57 +710,57 @@ Array [
       </div>
     </div>
     <div
-      className="wxc-adaptive-cards-column-set wxc-adaptive-cards-component wxc-adaptive-cards-component__container--vertical "
+      className="wxc-adaptive-cards-column-set wxc-ac-container--horizontal"
     >
       <div
-        className="wxc-column "
+        className="wxc-adaptive-cards-column wxc-ac-container--vertical"
       >
         <div
-          className="wxc-text-block "
+          className="wxc-adaptive-cards-text-block"
         >
           No Style
         </div>
       </div>
       <div
-        className="wxc-column wxc-column__style--default"
+        className="wxc-adaptive-cards-column wxc-ac-container-style--default wxc-ac-container--vertical"
       >
         <div
-          className="wxc-text-block "
+          className="wxc-adaptive-cards-text-block"
         >
           Default Style
         </div>
       </div>
       <div
-        className="wxc-column wxc-column__style--emphasis"
+        className="wxc-adaptive-cards-column wxc-ac-container-style--emphasis wxc-ac-container--vertical"
       >
         <div
-          className="wxc-text-block "
+          className="wxc-adaptive-cards-text-block"
         >
           Emphasis Style
         </div>
         <div
-          className="wxc-container"
+          className="wxc-container wxc-ac-container--vertical"
         >
           <div
-            className="wxc-text-block "
+            className="wxc-adaptive-cards-text-block"
           >
             Container no style
           </div>
         </div>
         <div
-          className="wxc-container wxc-container__style--default"
+          className="wxc-container wxc-ac-container-style--default wxc-ac-container--vertical"
         >
           <div
-            className="wxc-text-block "
+            className="wxc-adaptive-cards-text-block"
           >
             Container default style
           </div>
         </div>
         <div
-          className="wxc-container wxc-container__style--emphasis"
+          className="wxc-container wxc-ac-container-style--emphasis wxc-ac-container--vertical"
         >
           <div
-            className="wxc-text-block "
+            className="wxc-adaptive-cards-text-block"
           >
             Container emphasis style
           </div>
@@ -767,41 +768,41 @@ Array [
       </div>
     </div>
     <div
-      className="wxc-text-block "
+      className="wxc-adaptive-cards-text-block"
     >
       Hi,
     </div>
     <div
-      className="wxc-text-block "
+      className="wxc-adaptive-cards-text-block"
     >
       MasterHip
     </div>
     <div
-      className="wxc-adaptive-cards-column-set wxc-adaptive-cards-component wxc-adaptive-cards-component__container--vertical "
+      className="wxc-adaptive-cards-column-set wxc-ac-container--horizontal"
     >
       <div
-        className="wxc-column "
+        className="wxc-adaptive-cards-column wxc-ac-container--vertical"
       >
         <div
-          className="wxc-text-block "
+          className="wxc-adaptive-cards-text-block"
         >
           Column 1
         </div>
       </div>
     </div>
     <div
-      className="wxc-adaptive-cards-column-set wxc-adaptive-cards-component wxc-adaptive-cards-component__container--vertical "
+      className="wxc-adaptive-cards-column-set wxc-ac-container--horizontal"
     >
       <div
-        className="wxc-column "
+        className="wxc-adaptive-cards-column wxc-ac-container--vertical"
       >
         <div
-          className="wxc-text-block "
+          className="wxc-adaptive-cards-text-block"
         >
           (auto)
         </div>
         <img
-          className="wxc-adaptive-cards-image wxc-adaptive-cards-image__size--medium"
+          className="wxc-adaptive-cards-image"
           src="https://adaptivecards.io/content/adaptive-card-50.png"
           style={
             Object {
@@ -813,15 +814,15 @@ Array [
         />
       </div>
       <div
-        className="wxc-column "
+        className="wxc-adaptive-cards-column wxc-ac-container--vertical"
       >
         <div
-          className="wxc-text-block wxc-text-block__horizontalAlignment--center"
+          className="wxc-adaptive-cards-text-block wxc-ac-horizontal-alignment--center"
         >
           (stretch)
         </div>
         <img
-          className="wxc-adaptive-cards-image wxc-adaptive-cards-image__horizontalAlignment--center wxc-adaptive-cards-image__size--medium"
+          className="wxc-adaptive-cards-image wxc-ac-horizontal-alignment--center"
           src="https://adaptivecards.io/content/adaptive-card-50.png"
           style={
             Object {
@@ -833,15 +834,15 @@ Array [
         />
       </div>
       <div
-        className="wxc-column "
+        className="wxc-adaptive-cards-column wxc-ac-container--vertical"
       >
         <div
-          className="wxc-text-block "
+          className="wxc-adaptive-cards-text-block"
         >
           (auto)
         </div>
         <img
-          className="wxc-adaptive-cards-image wxc-adaptive-cards-image__size--medium"
+          className="wxc-adaptive-cards-image"
           src="https://adaptivecards.io/content/adaptive-card-50.png"
           style={
             Object {
@@ -883,18 +884,18 @@ Array [
     className="wxc-adaptive-card"
   >
     <div
-      className="wxc-text-block wxc-text-block__weight--bolder"
+      className="wxc-adaptive-cards-text-block wxc-ac-weight--bolder"
     >
       Pick up where you left off?
     </div>
     <div
-      className="wxc-adaptive-cards-column-set wxc-adaptive-cards-component wxc-adaptive-cards-component__spacing--medium wxc-adaptive-cards-component__container--vertical "
+      className="wxc-adaptive-cards-column-set wxc-ac-spacing--medium wxc-ac-container--horizontal"
     >
       <div
-        className="wxc-column "
+        className="wxc-adaptive-cards-column wxc-ac-container--vertical"
       >
         <img
-          className="wxc-adaptive-cards-image wxc-adaptive-cards-image__size--medium"
+          className="wxc-adaptive-cards-image wxc-ac-image-size--medium"
           src="https://unsplash.it/80?image=1083"
           style={
             Object {
@@ -906,28 +907,28 @@ Array [
         />
       </div>
       <div
-        className="wxc-column "
+        className="wxc-adaptive-cards-column wxc-ac-container--vertical"
       >
         <div
-          className="wxc-text-block "
+          className="wxc-adaptive-cards-text-block"
         >
           Silver Star Mountain
         </div>
         <div
-          className="wxc-text-block "
+          className="wxc-adaptive-cards-text-block wxc-ac-spacing--none"
         >
           Maps
         </div>
       </div>
     </div>
     <div
-      className="wxc-adaptive-cards-column-set wxc-adaptive-cards-component wxc-adaptive-cards-component__container--vertical "
+      className="wxc-adaptive-cards-column-set wxc-ac-container--horizontal"
     >
       <div
-        className="wxc-column "
+        className="wxc-adaptive-cards-column wxc-ac-container--vertical"
       >
         <img
-          className="wxc-adaptive-cards-image wxc-adaptive-cards-image__size--medium"
+          className="wxc-adaptive-cards-image wxc-ac-image-size--medium"
           src="https://unsplash.it/80?image=1082"
           style={
             Object {
@@ -939,28 +940,28 @@ Array [
         />
       </div>
       <div
-        className="wxc-column wxc-column__style--emphasis"
+        className="wxc-adaptive-cards-column wxc-ac-container-style--emphasis wxc-ac-container--vertical"
       >
         <div
-          className="wxc-text-block "
+          className="wxc-adaptive-cards-text-block"
         >
           Kitchen Remodel
         </div>
         <div
-          className="wxc-text-block "
+          className="wxc-adaptive-cards-text-block wxc-ac-spacing--none"
         >
           With EMPHASIS
         </div>
       </div>
     </div>
     <div
-      className="wxc-adaptive-cards-column-set wxc-adaptive-cards-component wxc-adaptive-cards-component__container--vertical "
+      className="wxc-adaptive-cards-column-set wxc-ac-container--horizontal"
     >
       <div
-        className="wxc-column "
+        className="wxc-adaptive-cards-column wxc-ac-container--vertical"
       >
         <img
-          className="wxc-adaptive-cards-image wxc-adaptive-cards-image__size--medium"
+          className="wxc-adaptive-cards-image wxc-ac-image-size--medium"
           src="https://unsplash.it/80?image=1080"
           style={
             Object {
@@ -972,15 +973,15 @@ Array [
         />
       </div>
       <div
-        className="wxc-column "
+        className="wxc-adaptive-cards-column wxc-ac-container--vertical"
       >
         <div
-          className="wxc-text-block "
+          className="wxc-adaptive-cards-text-block"
         >
           The Witcher
         </div>
         <div
-          className="wxc-text-block "
+          className="wxc-adaptive-cards-text-block wxc-ac-spacing--none"
         >
           Netflix
         </div>
@@ -1016,15 +1017,15 @@ Array [
     className="wxc-adaptive-card"
   >
     <div
-      className="wxc-container"
+      className="wxc-container wxc-ac-container--vertical"
     >
       <div
-        className="wxc-text-block "
+        className="wxc-adaptive-cards-text-block"
       >
         This is some text
       </div>
       <img
-        className="wxc-adaptive-cards-image wxc-adaptive-cards-image__size--large"
+        className="wxc-adaptive-cards-image wxc-ac-image-size--large"
         src="https://adaptivecards.io/content/cats/1.png"
         style={
           Object {
@@ -1036,151 +1037,151 @@ Array [
       />
     </div>
     <div
-      className="wxc-container wxc-container__style--default"
+      className="wxc-container wxc-ac-container-style--default wxc-ac-container--vertical"
     >
       <div
-        className="wxc-text-block "
+        className="wxc-adaptive-cards-text-block"
       >
         This container has the default style
       </div>
       <div
-        className="wxc-text-block "
+        className="wxc-adaptive-cards-text-block"
       >
         color: default
       </div>
       <div
-        className="wxc-text-block "
+        className="wxc-adaptive-cards-text-block"
       >
         color: accent
       </div>
       <div
-        className="wxc-text-block "
+        className="wxc-adaptive-cards-text-block"
       >
         color: good
       </div>
       <div
-        className="wxc-text-block "
+        className="wxc-adaptive-cards-text-block"
       >
         color: warning
       </div>
       <div
-        className="wxc-text-block "
+        className="wxc-adaptive-cards-text-block"
       >
         color: attention
       </div>
       <div
-        className="wxc-text-block "
+        className="wxc-adaptive-cards-text-block"
       >
         color: light
       </div>
       <div
-        className="wxc-text-block "
+        className="wxc-adaptive-cards-text-block"
       >
         color: dark
       </div>
     </div>
     <div
-      className="wxc-container wxc-container__style--accent"
+      className="wxc-container wxc-ac-container-style--accent wxc-ac-container--vertical"
     >
       <div
-        className="wxc-text-block "
+        className="wxc-adaptive-cards-text-block"
       >
         This container has the accent style
       </div>
       <div
-        className="wxc-text-block "
+        className="wxc-adaptive-cards-text-block"
       >
         color: default
       </div>
       <div
-        className="wxc-text-block "
+        className="wxc-adaptive-cards-text-block"
       >
         color: accent
       </div>
       <div
-        className="wxc-text-block "
+        className="wxc-adaptive-cards-text-block"
       >
         color: good
       </div>
       <div
-        className="wxc-text-block "
+        className="wxc-adaptive-cards-text-block"
       >
         color: warning
       </div>
       <div
-        className="wxc-text-block "
+        className="wxc-adaptive-cards-text-block"
       >
         color: attention
       </div>
       <div
-        className="wxc-text-block "
+        className="wxc-adaptive-cards-text-block"
       >
         color: light
       </div>
       <div
-        className="wxc-text-block "
+        className="wxc-adaptive-cards-text-block"
       >
         color: dark
       </div>
       <div
-        className="wxc-container"
+        className="wxc-container wxc-ac-container--vertical"
       >
         <div
-          className="wxc-text-block "
+          className="wxc-adaptive-cards-text-block"
         >
           Contained container - no style
         </div>
       </div>
       <div
-        className="wxc-container wxc-container__style--emphasis"
+        className="wxc-container wxc-ac-container-style--emphasis wxc-ac-container--vertical"
       >
         <div
-          className="wxc-text-block "
+          className="wxc-adaptive-cards-text-block"
         >
           Contained container - emphasis
         </div>
       </div>
       <div
-        className="wxc-container wxc-container__style--default"
+        className="wxc-container wxc-ac-container-style--default wxc-ac-container--vertical"
       >
         <div
-          className="wxc-text-block "
+          className="wxc-adaptive-cards-text-block"
         >
           Contained container - default
         </div>
       </div>
       <div
-        className="wxc-container wxc-container__style--good"
+        className="wxc-container wxc-ac-container-style--good wxc-ac-container--vertical"
       >
         <div
-          className="wxc-text-block "
+          className="wxc-adaptive-cards-text-block"
         >
           Contained container - good
         </div>
       </div>
       <div
-        className="wxc-container wxc-container__style--warning"
+        className="wxc-container wxc-ac-container-style--warning wxc-ac-container--vertical"
       >
         <div
-          className="wxc-text-block "
+          className="wxc-adaptive-cards-text-block"
         >
           Contained container - warning
         </div>
       </div>
       <div
-        className="wxc-container wxc-container__style--attention"
+        className="wxc-container wxc-ac-container-style--attention wxc-ac-container--vertical"
       >
         <div
-          className="wxc-text-block "
+          className="wxc-adaptive-cards-text-block"
         >
           Contained container - attention
         </div>
       </div>
       <div
-        className="wxc-container wxc-container__style--accent"
+        className="wxc-container wxc-ac-container-style--accent wxc-ac-container--vertical"
       >
         <div
-          className="wxc-text-block "
+          className="wxc-adaptive-cards-text-block"
         >
           Contained container - accent
         </div>
@@ -1216,7 +1217,7 @@ Array [
     className="wxc-adaptive-card"
   >
     <img
-      className="wxc-adaptive-cards-image wxc-adaptive-cards-image__style--person wxc-adaptive-cards-image__size--medium"
+      className="wxc-adaptive-cards-image wxc-ac-image-size--medium wxc-ac-image-style--person"
       src="https://adaptivecards.io/content/cats/1.png"
       style={
         Object {
@@ -1227,7 +1228,7 @@ Array [
       }
     />
     <img
-      className="wxc-adaptive-cards-image wxc-adaptive-cards-image__size--small"
+      className="wxc-adaptive-cards-image wxc-ac-image-size--small"
       src="https://adaptivecards.io/content/cats/1.png"
       style={
         Object {
@@ -1238,7 +1239,7 @@ Array [
       }
     />
     <img
-      className="wxc-adaptive-cards-image wxc-adaptive-cards-image__size--large"
+      className="wxc-adaptive-cards-image wxc-ac-image-size--large"
       src="https://adaptivecards.io/content/cats/2.png"
       style={
         Object {
@@ -1249,7 +1250,7 @@ Array [
       }
     />
     <img
-      className="wxc-adaptive-cards-image wxc-adaptive-cards-image__size--medium"
+      className="wxc-adaptive-cards-image"
       src="https://adaptivecards.io/content/cats/3.png"
       style={
         Object {
@@ -1289,10 +1290,10 @@ Array [
     className="wxc-adaptive-card"
   >
     <div
-      className="wxc-adaptive-cards-image-set"
+      className="wxc-adaptive-cards-image-set wxc-ac-container--horizontal"
     >
       <img
-        className="wxc-adaptive-cards-image wxc-adaptive-cards-image__style--person wxc-adaptive-cards-image__size--large"
+        className="wxc-adaptive-cards-image wxc-ac-image-size--large wxc-ac-image-style--person"
         src="https://adaptivecards.io/content/cats/1.png"
         style={
           Object {
@@ -1303,7 +1304,7 @@ Array [
         }
       />
       <img
-        className="wxc-adaptive-cards-image wxc-adaptive-cards-image__size--medium"
+        className="wxc-adaptive-cards-image wxc-ac-image-size--medium"
         src="https://adaptivecards.io/content/cats/3.png"
         style={
           Object {
@@ -1314,7 +1315,7 @@ Array [
         }
       />
       <img
-        className="wxc-adaptive-cards-image wxc-adaptive-cards-image__size--small"
+        className="wxc-adaptive-cards-image wxc-ac-image-size--small"
         src="https://adaptivecards.io/content/cats/1.png"
         style={
           Object {
@@ -1325,7 +1326,7 @@ Array [
         }
       />
       <img
-        className="wxc-adaptive-cards-image wxc-adaptive-cards-image__size--medium"
+        className="wxc-adaptive-cards-image wxc-ac-image-size--medium"
         src="https://adaptivecards.io/content/cats/1.png"
         style={
           Object {
@@ -1336,7 +1337,7 @@ Array [
         }
       />
       <img
-        className="wxc-adaptive-cards-image wxc-adaptive-cards-image__size--medium"
+        className="wxc-adaptive-cards-image wxc-ac-image-size--medium"
         src="https://adaptivecards.io/content/cats/2.png"
         style={
           Object {
@@ -1377,164 +1378,164 @@ Array [
     className="wxc-adaptive-card"
   >
     <div
-      className="wxc-text-block "
+      className="wxc-adaptive-cards-text-block"
     >
       color: default
     </div>
     <div
-      className="wxc-text-block "
+      className="wxc-adaptive-cards-text-block"
     >
       color: accent
     </div>
     <div
-      className="wxc-text-block "
+      className="wxc-adaptive-cards-text-block"
     >
       color: good
     </div>
     <div
-      className="wxc-text-block "
+      className="wxc-adaptive-cards-text-block"
     >
       color: warning
     </div>
     <div
-      className="wxc-text-block "
+      className="wxc-adaptive-cards-text-block"
     >
       color: attention
     </div>
     <div
-      className="wxc-text-block "
+      className="wxc-adaptive-cards-text-block"
     >
       color: light
     </div>
     <div
-      className="wxc-text-block "
+      className="wxc-adaptive-cards-text-block"
     >
       color: dark
     </div>
     <div
-      className="wxc-text-block "
+      className="wxc-adaptive-cards-text-block"
     >
       Font type not set.
     </div>
     <div
-      className="wxc-text-block wxc-text-block__fontType--default"
+      className="wxc-adaptive-cards-text-block wxc-ac-font-type--default"
     >
       Font type set to *default*.
     </div>
     <div
-      className="wxc-text-block wxc-text-block__fontType--monospace"
+      className="wxc-adaptive-cards-text-block wxc-ac-font-type--monospace"
     >
       Font type set to *monospace*.
     </div>
     <div
-      className="wxc-text-block wxc-text-block__horizontalAlignment--left"
+      className="wxc-adaptive-cards-text-block wxc-ac-horizontal-alignment--left"
     >
       **horizontalAlignment:left**
     </div>
     <div
-      className="wxc-text-block wxc-text-block__horizontalAlignment--center"
+      className="wxc-adaptive-cards-text-block wxc-ac-horizontal-alignment--center"
     >
       **horizontalAlignment:center**
     </div>
     <div
-      className="wxc-text-block wxc-text-block__horizontalAlignment--right"
+      className="wxc-adaptive-cards-text-block wxc-ac-horizontal-alignment--right"
     >
       **horizontalAlignment:right**
     </div>
     <div
-      className="wxc-text-block "
+      className="wxc-adaptive-cards-text-block"
     >
       isSubtle:false
     </div>
     <div
-      className="wxc-text-block "
+      className="wxc-adaptive-cards-text-block"
     >
       isSubtle:true
     </div>
     <div
-      className="wxc-text-block wxc-text-block__wrap--true"
+      className="wxc-adaptive-cards-text-block wxc-ac-wrap--true"
     >
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </div>
     <div
-      className="wxc-text-block wxc-text-block__wrap--true"
+      className="wxc-adaptive-cards-text-block wxc-ac-wrap--true"
     >
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </div>
     <div
-      className="wxc-text-block "
+      className="wxc-adaptive-cards-text-block"
     >
       size:default
     </div>
     <div
-      className="wxc-text-block wxc-text-block__size--small"
+      className="wxc-adaptive-cards-text-block wxc-ac-size--small"
     >
       size:small
     </div>
     <div
-      className="wxc-text-block wxc-text-block__size--default"
+      className="wxc-adaptive-cards-text-block wxc-ac-size--default"
     >
       size:default
     </div>
     <div
-      className="wxc-text-block wxc-text-block__size--medium"
+      className="wxc-adaptive-cards-text-block wxc-ac-size--medium"
     >
       size:medium
     </div>
     <div
-      className="wxc-text-block wxc-text-block__size--large"
+      className="wxc-adaptive-cards-text-block wxc-ac-size--large"
     >
       size:large
     </div>
     <div
-      className="wxc-text-block wxc-text-block__size--extraLarge"
+      className="wxc-adaptive-cards-text-block wxc-ac-size--extraLarge"
     >
       size:extraLarge
     </div>
     <div
-      className="wxc-text-block wxc-text-block__weight--lighter"
+      className="wxc-adaptive-cards-text-block wxc-ac-weight--lighter"
     >
       weight: lighter
     </div>
     <div
-      className="wxc-text-block wxc-text-block__weight--default"
+      className="wxc-adaptive-cards-text-block wxc-ac-weight--default"
     >
       weight: default
     </div>
     <div
-      className="wxc-text-block wxc-text-block__weight--bolder"
+      className="wxc-adaptive-cards-text-block wxc-ac-weight--bolder"
     >
       weight: bolder
     </div>
     <div
-      className="wxc-text-block wxc-text-block__wrap--false"
+      className="wxc-adaptive-cards-text-block wxc-ac-wrap--false"
     >
       **wrap: false** Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
     </div>
     <div
-      className="wxc-text-block wxc-text-block__wrap--true"
+      className="wxc-adaptive-cards-text-block wxc-ac-wrap--true"
     >
       **wrap: true** Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </div>
     <div
-      className="wxc-text-block wxc-text-block__style--heading wxc-text-block__wrap--true"
+      className="wxc-adaptive-cards-text-block wxc-ac-container-style--heading wxc-ac-wrap--true"
       role="heading"
     >
       Style set to heading
     </div>
     <div
-      className="wxc-text-block wxc-text-block__style--heading wxc-text-block__wrap--true"
+      className="wxc-adaptive-cards-text-block wxc-ac-container-style--heading wxc-ac-wrap--true"
       role="heading"
     >
       Style set to heading, color set to good
     </div>
     <div
-      className="wxc-text-block wxc-text-block__style--default wxc-text-block__wrap--true"
+      className="wxc-adaptive-cards-text-block wxc-ac-container-style--default wxc-ac-wrap--true"
     >
       Style set to default
     </div>
     <div
-      className="wxc-text-block wxc-text-block__wrap--true"
+      className="wxc-adaptive-cards-text-block wxc-ac-wrap--true"
     >
       Style unset
     </div>
diff --git a/src/components/adaptive-cards/Column/Column.jsx b/src/components/adaptive-cards/Column/Column.jsx
index 1960be725..cddc4bec3 100644
--- a/src/components/adaptive-cards/Column/Column.jsx
+++ b/src/components/adaptive-cards/Column/Column.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Component, {registerComponent} from '../Component/Component';
+import Component, {acPropTypes, registerComponent} from '../Component/Component';
 import webexComponentClasses from '../../helpers';
 
 /**
@@ -9,28 +9,14 @@ import webexComponentClasses from '../../helpers';
  *
  * @param {object} props  React props passed to the component
  * @param {object} props.data  Active cards definition
+ * @param {string} props.className  Custom CSS class to apply
  * @returns {object} JSX of the component
  */
-export default function Column({data}) {
-  const [cssClasses, sc] = webexComponentClasses('column');
-  const classes = [];
-  const getClass = (key, value) => sc(`${key}--${value}`);
-
-  for (const [key, value] of Object.entries(data)) {
-    switch (key) {
-      case 'items': break;
-      case 'bleed':
-      case 'rtl':
-      case 'style':
-        classes.push(getClass(key, value));
-        break;
-      default:
-        console.log('[Column]', 'Unknown property:', key, value);
-    }
-  }
+export default function Column({data, className}) {
+  const [cssClasses] = webexComponentClasses('adaptive-cards-column', className);
 
   return (
-    <div className={`${cssClasses} ${classes.join(' ')}`}>
+    <div className={cssClasses}>
       {/* eslint-disable react/no-array-index-key */}
       {data.items?.map((item, index) => <Component data={item} key={index} />)}
     </div>
@@ -39,6 +25,22 @@ export default function Column({data}) {
 
 Column.propTypes = {
   data: PropTypes.shape().isRequired,
+  className: PropTypes.string,
+};
+
+Column.defaultProps = {
+  className: '',
+};
+
+Column.acPropTypes = {
+  id: acPropTypes.id,
+  isVisible: acPropTypes.isVisible,
+  items: acPropTypes.children,
+  rtl: acPropTypes.rtl,
+  separator: acPropTypes.separator,
+  spacing: acPropTypes.spacing,
+  style: acPropTypes.containerStyle,
+  type: acPropTypes.type,
 };
 
-registerComponent('Column', Column);
+registerComponent('Column', Column, 'vertical');
diff --git a/src/components/adaptive-cards/Column/Column.scss b/src/components/adaptive-cards/Column/Column.scss
deleted file mode 100644
index 27d108291..000000000
--- a/src/components/adaptive-cards/Column/Column.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-$C: #{$WEBEX_COMPONENTS_CLASS_PREFIX}-column;
-
-.#{$C}__bleed--false { padding: 0.625rem; }
-
-.#{$C}__rtl--true { direction: rtl; }
-.#{$C}__rtl--false { direction: ltr; }
-
-.#{$C}__style {
-  &--default { background-color: var(--wxc-adaptive-cards--background-color--default); }
-  &--emphasis { background-color: var(--wxc-adaptive-cards--background-color--emphasis); }
-  &--good { background-color: var(--wxc-adaptive-cards--background-color--good); }
-  &--attention { background-color: var(--wxc-adaptive-cards--background-color--attention); }
-  &--warning { background-color: var(--wxc-adaptive-cards--background-color--warning); }
-  &--accent { background-color: var(--wxc-adaptive-cards--background-color--accent); }
-}
diff --git a/src/components/adaptive-cards/ColumnSet/ColumnSet.jsx b/src/components/adaptive-cards/ColumnSet/ColumnSet.jsx
index 2cb4f81cc..9a66f1b72 100644
--- a/src/components/adaptive-cards/ColumnSet/ColumnSet.jsx
+++ b/src/components/adaptive-cards/ColumnSet/ColumnSet.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Component, {registerComponent} from '../Component/Component';
+import Component, {acPropTypes, registerComponent} from '../Component/Component';
 import webexComponentClasses from '../../helpers';
 
 /**
@@ -13,27 +13,18 @@ import webexComponentClasses from '../../helpers';
  * @returns {object} JSX of the component
  */
 export default function ColumnSet({data, className}) {
-  const [cssClasses, sc] = webexComponentClasses('adaptive-cards-column-set', className);
-  const classes = [];
-  const getClass = (key, value) => sc(`${key}--${value}`);
-
-  for (const [key, value] of Object.entries(data)) {
-    switch (key) {
-      case 'columns': break;
-      case 'style':
-        classes.push(getClass(key, value));
-        break;
-      default:
-        console.log('[ColumnSet]', 'Unknown property:', key, value);
-    }
-  }
+  const [cssClasses] = webexComponentClasses('adaptive-cards-column-set', className);
 
   return (
-    <div className={`${cssClasses} ${classes.join(' ')}`}>
+    <div className={cssClasses}>
       {/* eslint-disable react/no-array-index-key */}
-      {data.columns.map((item, index) => (
-        <Component data={item} type="Column" key={index} style={{minHeight: data.minHeight}} />
-      ))}
+      {data.columns.map((item, index) => {
+        const itemData = {type: 'Column', ...item};
+
+        return (
+          <Component data={itemData} key={index} />
+        );
+      })}
     </div>
   );
 }
@@ -47,4 +38,16 @@ ColumnSet.defaultProps = {
   className: '',
 };
 
-registerComponent('ColumnSet', ColumnSet, 'vertical');
+ColumnSet.acPropTypes = {
+  columns: acPropTypes.children,
+  horizontalAlignment: acPropTypes.horizontalAlignment,
+  id: acPropTypes.id,
+  isVisible: acPropTypes.isVisible,
+  minHeight: acPropTypes.minHeight,
+  separator: acPropTypes.separator,
+  spacing: acPropTypes.spacing,
+  style: acPropTypes.containerStyle,
+  type: acPropTypes.type,
+};
+
+registerComponent('ColumnSet', ColumnSet, 'horizontal');
diff --git a/src/components/adaptive-cards/ColumnSet/ColumnSet.scss b/src/components/adaptive-cards/ColumnSet/ColumnSet.scss
deleted file mode 100644
index f3ae997e7..000000000
--- a/src/components/adaptive-cards/ColumnSet/ColumnSet.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-$C: #{$WEBEX_COMPONENTS_CLASS_PREFIX}-adaptive-cards-column-set;
-
-.#{$C}__style {
-  &--default { background-color: var(--wxc-adaptive-cards--background-color--default); }
-  &--emphasis { background-color: var(--wxc-adaptive-cards--background-color--emphasis); }
-  &--good { background-color: var(--wxc-adaptive-cards--background-color--good); }
-  &--attention { background-color: var(--wxc-adaptive-cards--background-color--attention); }
-  &--warning { background-color: var(--wxc-adaptive-cards--background-color--warning); }
-  &--accent { background-color: var(--wxc-adaptive-cards--background-color--accent); }
-}
diff --git a/src/components/adaptive-cards/Component/Component.jsx b/src/components/adaptive-cards/Component/Component.jsx
index 23aeda298..8eee61156 100644
--- a/src/components/adaptive-cards/Component/Component.jsx
+++ b/src/components/adaptive-cards/Component/Component.jsx
@@ -5,6 +5,26 @@ import webexComponentClasses from '../../helpers';
 const componentTypes = {};
 const containerTypes = {};
 
+export const acPropTypes = {
+  children: 'children',
+  containerStyle: 'container-style',
+  defaultImageSize: 'default-image-size',
+  fontType: 'font-type',
+  horizontalAlignment: 'horizontal-alignment',
+  id: 'id',
+  imageSize: 'image-size',
+  imageStyle: 'image-style',
+  isVisible: 'is-visible',
+  rtl: 'rtl',
+  separator: 'separator',
+  size: 'size',
+  spacing: 'spacing',
+  text: 'text',
+  type: 'type',
+  weight: 'weight',
+  wrap: 'wrap',
+};
+
 /**
  * Registers a component
  *
@@ -47,29 +67,29 @@ UnknownComponent.defaultProps = {
  *
  * @param {object} props  React properties
  * @param {object} props.data  Active Cards definition
- * @param {string} [props.type]  Active Cards type definition
- * @param {object} props.parentData  Parent Card definition
  * @returns {object} JSX of the component
  */
-export default function Component({data, type, parentData}) {
-  const [cssClasses, sc] = webexComponentClasses('adaptive-cards-component');
+export default function Component({data}) {
+  const C = componentTypes[data.type] || UnknownComponent;
   const classes = [];
-  const getClass = (key, value) => sc(`${key}--${value}`);
-  const {
-    separator,
-    spacing,
-    isVisible,
-    ...compData
-  } = data;
+  const getClass = (propType, value) => `wxc-ac-${propType}--${value}`;
 
-  for (const [key, value] of Object.entries(data)) {
-    switch (key) {
-      case 'separator':
-      case 'spacing':
-      case 'isVisible':
-        classes.push(getClass(key, value));
+  for (const [prop, value] of Object.entries(data)) {
+    const propType = (C.acPropTypes && C.acPropTypes[prop]) || undefined;
+
+    switch (propType) {
+      case undefined:
+        console.log('Unknown property', prop);
+        break;
+      case acPropTypes.action:
+      case acPropTypes.children:
+      case acPropTypes.defaultImageSize:
+      case acPropTypes.id:
+      case acPropTypes.text:
+      case acPropTypes.type:
         break;
       default:
+        classes.push(getClass(propType, value));
         break;
     }
   }
@@ -80,24 +100,14 @@ export default function Component({data, type, parentData}) {
     classes.push(getClass('container', containerType));
   }
 
-  const C = componentTypes[data.type || type] || UnknownComponent;
-
   return (
     <C
-      data={compData}
-      className={`${cssClasses} ${classes.join(' ')}`}
-      parentData={parentData}
+      data={data}
+      className={classes.join(' ')}
     />
   );
 }
 
 Component.propTypes = {
   data: PropTypes.shape().isRequired,
-  type: PropTypes.string,
-  parentData: PropTypes.shape(),
-};
-
-Component.defaultProps = {
-  type: undefined,
-  parentData: {},
 };
diff --git a/src/components/adaptive-cards/Component/Component.scss b/src/components/adaptive-cards/Component/Component.scss
index 0b3f7a5c3..993d8526d 100644
--- a/src/components/adaptive-cards/Component/Component.scss
+++ b/src/components/adaptive-cards/Component/Component.scss
@@ -1,15 +1,68 @@
-$C: #{$WEBEX_COMPONENTS_CLASS_PREFIX}-adaptive-cards-component;
+$C: #{$WEBEX_COMPONENTS_CLASS_PREFIX}-ac;
 
-.#{$C}__container--horizontal {
+.#{$C}-font-type--monospace { font-family: #{$font-family-monospace}; }
+.#{$C}-font-type--default { font-family: #{$brand-font-regular}; }
+
+.#{$C}-horizontal-alignment {
+  &--left { text-align: left; }
+  &--center { text-align: center; }
+  &--right { text-align: right; }
+}
+
+.#{$C}-size {
+  &--default { font-size: 0.875rem; }
+  &--small { font-size: 0.75rem; }
+  &--medium { font-size: 1rem; }
+  &--large { font-size: 1.25rem; }
+  &--extraLarge { font-size: 1.5rem; }
+}
+
+.#{$C}-weight {
+  &--default { font-weight: 400; }
+  &--lighter { font-weight: lighter; }
+  &--bolder { font-weight: bolder; }
+}
+
+.#{$C}-wrap--false {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.#{$C}-rtl--true { direction: rtl; }
+.#{$C}-rtl--false { direction: ltr; }
+
+.#{$C}-container-style {
+  &--heading {
+    font-weight: bold;
+    font-size: 200%;
+  }
+  &--default { background-color: var(--wxc-adaptive-cards--background-color--default); }
+  &--emphasis { background-color: var(--wxc-adaptive-cards--background-color--emphasis); }
+  &--good { background-color: var(--wxc-adaptive-cards--background-color--good); }
+  &--attention { background-color: var(--wxc-adaptive-cards--background-color--attention); }
+  &--warning { background-color: var(--wxc-adaptive-cards--background-color--warning); }
+  &--accent { background-color: var(--wxc-adaptive-cards--background-color--accent); }
+}
+
+.#{$C}-image-style--person { border-radius: 50%; }
+
+.#{$C}-image-size {
+  &--small { width: 40px; height: 40px; }
+  &--medium { width: 80px; height: 80px; }
+  &--large { width: 160px; height: 160px; }
+}
+
+.#{$C}-container--horizontal {
   display: flex;
 
-  > .#{$C}__separator--true:not(:first-child) {
+  > .#{$C}-separator--true:not(:first-child) {
      border-left: 1px solid var(--wxc-adaptive-cards--separator-color);
   }
 
   > :not(:first-child) { margin-left: 0.5rem; }
 
-  > .#{$C}__spacing:not(:first-child) {
+  > .#{$C}-spacing:not(:first-child) {
     &--none { margin-left: 0; }
     &--small { margin-top: 0.188rem; }
     &--medium { margin-left: 1.125rem; }
@@ -19,17 +72,17 @@ $C: #{$WEBEX_COMPONENTS_CLASS_PREFIX}-adaptive-cards-component;
   }
 }
 
-.#{$C}__container--vertical {
+.#{$C}-container--vertical {
   display: flex;
   flex-direction: column;
 
-  > .#{$C}__separator--true:not(:first-child) {
+  > .#{$C}-separator--true:not(:first-child) {
      border-top: 1px solid var(--wxc-adaptive-cards--separator-color);;
   }
 
   > :not(:first-child) { margin-top: 0.5rem; }
 
-  > .#{$C}__spacing:not(:first-child) {
+  > .#{$C}-spacing:not(:first-child) {
     &--none { margin-top: 0; }
     &--small { margin-top: 0.188rem; }
     &--medium { margin-top: 1.125rem; }
@@ -39,7 +92,7 @@ $C: #{$WEBEX_COMPONENTS_CLASS_PREFIX}-adaptive-cards-component;
   }
 }
 
-.#{$C}__isVisible--false {
+.#{$C}-is-visible--false {
   display: none;
 }
 
diff --git a/src/components/adaptive-cards/Container/Container.jsx b/src/components/adaptive-cards/Container/Container.jsx
index 2faf35775..cb2d33ce3 100644
--- a/src/components/adaptive-cards/Container/Container.jsx
+++ b/src/components/adaptive-cards/Container/Container.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import webexComponentClasses from '../../helpers';
-import Component, {registerComponent} from '../Component/Component';
+import Component, {acPropTypes, registerComponent} from '../Component/Component';
 
 /**
  * Adaptive Cards Container component
@@ -9,43 +9,40 @@ import Component, {registerComponent} from '../Component/Component';
  *
  * @param {object} props  React props passed to the component
  * @param {object} props.data  Active cards definition
+ * @param {string} props.className  Custom CSS class to apply
  * @returns {object} JSX of the component
  */
-export default function Container({data}) {
-  const [, sc] = webexComponentClasses('container');
-  const classes = [];
-
-  const getClass = (key, value) => sc(`${key}--${value}`);
-
-  for (const [key, value] of Object.entries(data)) {
-    switch (key) {
-      case 'backgroundImage':
-      case 'bleed':
-      case 'items':
-      case 'minHeight':
-      case 'verticalContentAlignment':
-      case 'type':
-        break;
-      case 'style':
-        classes.push(getClass(key, value));
-        break;
-      default:
-        console.log('[Container]', 'Unknown property', key, value);
-    }
-  }
-
-  const [cssClasses] = webexComponentClasses('container', classes.join(' '));
+export default function Container({data, className}) {
+  const [cssClasses] = webexComponentClasses('container', className);
 
   return (
     <div className={cssClasses}>
-      {/* eslint-disable-next-line react/no-array-index-key */}
-      {data.items.map((item, index) => <Component data={item} key={index} />)}
+      {/* eslint-disable react/no-array-index-key */}
+      {data.items.map((item, index) => (
+        <Component data={item} key={index} />
+      ))}
     </div>
   );
 }
 
 Container.propTypes = {
   data: PropTypes.shape().isRequired,
+  className: PropTypes.string,
+};
+
+Container.defaultProps = {
+  className: '',
+};
+
+Container.acPropTypes = {
+  id: acPropTypes.id,
+  isVisible: acPropTypes.isVisible,
+  items: acPropTypes.children,
+  rtl: acPropTypes.rtl,
+  separator: acPropTypes.separator,
+  spacing: acPropTypes.spacing,
+  style: acPropTypes.containerStyle,
+  type: acPropTypes.type,
 };
 
 registerComponent('Container', Container, 'vertical');
diff --git a/src/components/adaptive-cards/Container/Container.scss b/src/components/adaptive-cards/Container/Container.scss
deleted file mode 100644
index 869c4c6b0..000000000
--- a/src/components/adaptive-cards/Container/Container.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-$C: #{$WEBEX_COMPONENTS_CLASS_PREFIX}-container;
-
-.#{$C} {
-  background-color: var(--wxc-adaptive-cards--background-color--default);
-
-  &__style{
-    &--emphasis { background-color: var(--wxc-adaptive-cards--background-color--emphasis); }
-    &--accent { background-color: var(--wxc-adaptive-cards--background-color--accent) ;}
-    &--good { background-color: var(--wxc-adaptive-cards--background-color--good); }
-    &--attention { background-color: var(--wxc-adaptive-cards--background-color--attention); }
-    &--warning { background-color: var(--wxc-adaptive-cards--background-color--warning); }
-  }
-}
diff --git a/src/components/adaptive-cards/Image/Image.jsx b/src/components/adaptive-cards/Image/Image.jsx
index bb661fa7c..8a058a624 100644
--- a/src/components/adaptive-cards/Image/Image.jsx
+++ b/src/components/adaptive-cards/Image/Image.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import webexComponentClasses from '../../helpers';
-import {registerComponent} from '../Component/Component';
+import {acPropTypes, registerComponent} from '../Component/Component';
 
 /**
  * Adaptive Cards Image component
@@ -9,38 +9,11 @@ import {registerComponent} from '../Component/Component';
  *
  * @param {object} props  React props passed to the component
  * @param {object} props.data  Active cards definition
- * @param {object} props.parentData  Parent card definition
+ * @param {string} props.className  Custom CSS class to apply
  * @returns {object} JSX of the component
  */
-export default function Image({data, parentData}) {
-  const [, sc] = webexComponentClasses('adaptive-cards-image');
-  const classes = [];
-
-  const getClass = (key, value) => sc(`${key}--${value}`);
-
-  for (const [key, value] of Object.entries(data)) {
-    switch (key) {
-      case 'type':
-      case 'url':
-      case 'altText':
-      case 'backgroundColor':
-      case 'size':
-        break;
-      case 'horizontalAlignment':
-      case 'isVisible':
-      case 'separator':
-      case 'spacing':
-      case 'style':
-        classes.push(getClass(key, value));
-        break;
-      default:
-        console.log('[Image]', 'Unknown property', key, value);
-    }
-  }
-
-  classes.push(getClass('size', data.size || parentData.size || 'medium'));
-
-  const [cssClasses] = webexComponentClasses('adaptive-cards-image', classes.join(' '));
+export default function Image({data, className}) {
+  const [cssClasses] = webexComponentClasses('adaptive-cards-image', className);
 
   return (
     <img
@@ -58,11 +31,22 @@ export default function Image({data, parentData}) {
 
 Image.propTypes = {
   data: PropTypes.shape().isRequired,
-  parentData: PropTypes.shape(),
+  className: PropTypes.string,
 };
 
 Image.defaultProps = {
-  parentData: {},
+  className: '',
+};
+
+Image.acPropTypes = {
+  horizontalAlignment: acPropTypes.horizontalAlignment,
+  id: acPropTypes.id,
+  isVisible: acPropTypes.isVisible,
+  type: acPropTypes.type,
+  separator: acPropTypes.separator,
+  size: acPropTypes.imageSize,
+  spacing: acPropTypes.spacing,
+  style: acPropTypes.imageStyle,
 };
 
 registerComponent('Image', Image);
diff --git a/src/components/adaptive-cards/Image/Image.scss b/src/components/adaptive-cards/Image/Image.scss
deleted file mode 100644
index cfae4ed04..000000000
--- a/src/components/adaptive-cards/Image/Image.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-$C: #{$WEBEX_COMPONENTS_CLASS_PREFIX}-adaptive-cards-image;
-
-
-.#{$C} {
-  &__size {
-    &--small { width: 40px; height: 40px; }
-
-    &--medium { width: 80px; height: 80px; }
-
-    &--large { width: 160px; height: 160px; }
-  }
-
-  &__style--person { border-radius: 50%; }
-}
diff --git a/src/components/adaptive-cards/ImageSet/ImageSet.jsx b/src/components/adaptive-cards/ImageSet/ImageSet.jsx
index 19b45c265..4c778d2bb 100644
--- a/src/components/adaptive-cards/ImageSet/ImageSet.jsx
+++ b/src/components/adaptive-cards/ImageSet/ImageSet.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import webexComponentClasses from '../../helpers';
-import Component, {registerComponent} from '../Component/Component';
+import Component, {acPropTypes, registerComponent} from '../Component/Component';
 
 /**
  * Adaptive Cards ImageSet component
@@ -9,20 +9,43 @@ import Component, {registerComponent} from '../Component/Component';
  *
  * @param {object} props  React props passed to the component
  * @param {object} props.data  Active cards definition
+ * @param {string} props.className  Custom CSS class to apply
  * @returns {object} JSX of the component
  */
-export default function ImageSet({data}) {
-  const [cssClasses] = webexComponentClasses('adaptive-cards-image-set');
+export default function ImageSet({data, className}) {
+  const [cssClasses] = webexComponentClasses('adaptive-cards-image-set', className);
 
   return (
     <div className={cssClasses}>
-      {data.images.map((item) => <Component data={item} parentData={data} />)}
+      {/* eslint-disable react/no-array-index-key */}
+      {data.images.map((item, index) => {
+        const itemData = {size: item.size || data.imageSize || 'medium', ...item};
+
+        return (
+          <Component data={itemData} key={index} />
+        );
+      })}
     </div>
   );
 }
 
 ImageSet.propTypes = {
   data: PropTypes.shape().isRequired,
+  className: PropTypes.string,
+};
+
+ImageSet.defaultProps = {
+  className: '',
+};
+
+ImageSet.acPropTypes = {
+  images: acPropTypes.children,
+  id: acPropTypes.id,
+  imageSize: acPropTypes.defaultImageSize,
+  isVisible: acPropTypes.isVisible,
+  separator: acPropTypes.separator,
+  spacing: acPropTypes.spacing,
+  type: acPropTypes.type,
 };
 
 registerComponent('ImageSet', ImageSet, 'horizontal');
diff --git a/src/components/adaptive-cards/TextBlock/TextBlock.jsx b/src/components/adaptive-cards/TextBlock/TextBlock.jsx
index 79cfb7d2a..39c04946e 100644
--- a/src/components/adaptive-cards/TextBlock/TextBlock.jsx
+++ b/src/components/adaptive-cards/TextBlock/TextBlock.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import webexComponentClasses from '../../helpers';
-import {registerComponent} from '../Component/Component';
+import {acPropTypes, registerComponent} from '../Component/Component';
 
 /**
  * Adaptive Cards TextBlock component
@@ -9,33 +9,15 @@ import {registerComponent} from '../Component/Component';
  *
  * @param {object} props  React props passed to the component
  * @param {object} props.data  Active cards definition
+ * @param {string} props.className  Custom CSS class to apply
  * @returns {object} JSX of the component
  */
-export default function TextBlock({data}) {
-  const [cssClasses, sc] = webexComponentClasses('text-block', undefined);
-  const classes = [];
-  const getClass = (key, value) => sc(`${key}--${value}`);
-
-  for (const [key, value] of Object.entries(data)) {
-    switch (key) {
-      case 'type': break;
-      case 'text': break;
-      case 'fontType':
-      case 'horizontalAlignment':
-      case 'size':
-      case 'weight':
-      case 'wrap':
-      case 'style':
-        classes.push(getClass(key, value));
-        break;
-      default:
-        console.log('[TextBlock]', 'Unknown property:', key, value);
-    }
-  }
+export default function TextBlock({data, className}) {
+  const [cssClasses] = webexComponentClasses('adaptive-cards-text-block', className);
 
   return (
     <div
-      className={`${cssClasses} ${classes.join(' ')}`}
+      className={cssClasses}
       role={data.style === 'heading' ? 'heading' : undefined}
     >
       {data.text}
@@ -45,6 +27,26 @@ export default function TextBlock({data}) {
 
 TextBlock.propTypes = {
   data: PropTypes.shape().isRequired,
+  className: PropTypes.string,
+};
+
+TextBlock.defaultProps = {
+  className: '',
+};
+
+TextBlock.acPropTypes = {
+  fontType: acPropTypes.fontType,
+  horizontalAlignment: acPropTypes.horizontalAlignment,
+  id: acPropTypes.id,
+  isVisible: acPropTypes.isVisible,
+  separator: acPropTypes.separator,
+  size: acPropTypes.size,
+  spacing: acPropTypes.spacing,
+  style: acPropTypes.containerStyle,
+  text: acPropTypes.text,
+  type: acPropTypes.type,
+  weight: acPropTypes.weight,
+  wrap: acPropTypes.wrap,
 };
 
 registerComponent('TextBlock', TextBlock);
diff --git a/src/components/adaptive-cards/TextBlock/TextBlock.scss b/src/components/adaptive-cards/TextBlock/TextBlock.scss
deleted file mode 100644
index fdf3483cb..000000000
--- a/src/components/adaptive-cards/TextBlock/TextBlock.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-$C: #{$WEBEX_COMPONENTS_CLASS_PREFIX}-text-block;
-
-.#{$C}__fontType--monospace { font-family: #{$font-family-monospace}; }
-.#{$C}__fontType--default { font-family: #{$brand-font-regular}; }
-
-.#{$C}__horizontalAlignment {
-  &--left { text-align: left; }
-  &--center { text-align: center; }
-  &--right { text-align: right; }
-}
-
-.#{$C}__size {
-  &--default { font-size: 0.875rem; }
-  &--small { font-size: 0.75rem; }
-  &--medium { font-size: 1rem; }
-  &--large { font-size: 1.25rem; }
-  &--extraLarge { font-size: 1.5rem; }
-}
-
-.#{$C}__weight {
-  &--default { font-weight: 400; }
-  &--lighter { font-weight: lighter; }
-  &--bolder { font-weight: bolder; }
-}
-
-.#{$C}__wrap--false {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.#{$C}__style--heading {
-  font-weight: bold;
-  font-size: 200%;
-}
diff --git a/src/components/adaptive-cards/_adaptive-cards.scss b/src/components/adaptive-cards/_adaptive-cards.scss
index 2ae67332b..02851dd30 100644
--- a/src/components/adaptive-cards/_adaptive-cards.scss
+++ b/src/components/adaptive-cards/_adaptive-cards.scss
@@ -1,8 +1,3 @@
 @import 'AdaptiveCard/AdaptiveCard';
-@import 'Column/Column';
-@import 'ColumnSet/ColumnSet';
 @import 'Component/Component';
-@import 'Container/Container';
-@import 'Image/Image';
 @import 'ImageSet/ImageSet';
-@import 'TextBlock/TextBlock';