fix(AdaptiveCards): implement generic handling of adaptive card prope…

…rties

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');

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');

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: {},
 };

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;
 }