feat(AdaptiveCardsComponent): add default props for adaptive cards

webex · Dec 21, 2021 · 222fd98 · 222fd98
1 parent bfba17b
commit 222fd98
Show file tree

Hide file tree

Showing 9 changed files with 280 additions and 243 deletions.
diff --git a/src/components/adaptive-cards/AdaptiveCard/__snapshots__/AdaptiveCard.stories.storyshot b/src/components/adaptive-cards/AdaptiveCard/__snapshots__/AdaptiveCard.stories.storyshot
diff --git a/src/components/adaptive-cards/Column/Column.jsx b/src/components/adaptive-cards/Column/Column.jsx
@@ -49,4 +49,8 @@ Column.acPropTypes = {
   verticalContentAlignment: acPropTypes.verticalContentAlignment,
 };
 
+Column.acDefaultProps = {
+  verticalContentAlignment: 'top',
+};
+
 registerComponent('Column', Column, 'vertical');
diff --git a/src/components/adaptive-cards/ColumnSet/ColumnSet.jsx b/src/components/adaptive-cards/ColumnSet/ColumnSet.jsx
@@ -55,4 +55,8 @@ ColumnSet.acPropTypes = {
   type: acPropTypes.type,
 };
 
+ColumnSet.acDefaultProps = {
+  horizontalAlignment: 'left',
+};
+
 registerComponent('ColumnSet', ColumnSet, 'horizontal');
diff --git a/src/components/adaptive-cards/Component/Component.jsx b/src/components/adaptive-cards/Component/Component.jsx
@@ -81,7 +81,9 @@ export default function Component({data}) {
   const getClass = (propType, value) => `wxc-ac-${propType}--${value}`;
   const style = {};
 
-  for (const [prop, value] of Object.entries(data)) {
+  const dataWithDefaults = {...C.acDefaultProps, ...data};
+
+  for (const [prop, value] of Object.entries(dataWithDefaults)) {
     const propType = (C.acPropTypes && C.acPropTypes[prop]) || undefined;
 
     switch (propType) {

diff --git a/src/components/adaptive-cards/Container/Container.jsx b/src/components/adaptive-cards/Container/Container.jsx
@@ -52,4 +52,8 @@ Container.acPropTypes = {
   verticalContentAlignment: acPropTypes.verticalContentAlignment,
 };
 
+Container.acDefaultProps = {
+  verticalContentAlignment: 'top',
+};
+
 registerComponent('Container', Container, 'vertical');
diff --git a/src/components/adaptive-cards/Image/Image.jsx b/src/components/adaptive-cards/Image/Image.jsx
@@ -53,4 +53,9 @@ Image.acPropTypes = {
   style: acPropTypes.imageStyle,
 };
 
+Image.acDefaultProps = {
+  horizontalAlignment: 'left',
+  size: 'medium',
+};
+
 registerComponent('Image', Image);
diff --git a/src/components/adaptive-cards/ImageSet/ImageSet.jsx b/src/components/adaptive-cards/ImageSet/ImageSet.jsx
@@ -18,8 +18,8 @@ export default function ImageSet({data, className}) {
   return (
     <div className={cssClasses}>
       {/* eslint-disable react/no-array-index-key */}
-      {data.images.map((item, index) => {
-        const itemData = {size: item.size || data.imageSize || 'medium', ...item};
+      {data.images.map((image, index) => {
+        const itemData = {size: data.imageSize, ...image};
 
         return (
           <Component data={itemData} key={index} />

diff --git a/src/components/adaptive-cards/RichTextBlock/RichTextBlock.jsx b/src/components/adaptive-cards/RichTextBlock/RichTextBlock.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 RichTextBlock component
@@ -40,4 +40,18 @@ RichTextBlock.defaultProps = {
   className: '',
 };
 
+RichTextBlock.acPropTypes = {
+  horizontalAlignment: acPropTypes.horizontalAlignment,
+  id: acPropTypes.id,
+  inlines: acPropTypes.children,
+  isVisible: acPropTypes.isVisible,
+  separator: acPropTypes.separator,
+  spacing: acPropTypes.spacing,
+  type: acPropTypes.type,
+};
+
+RichTextBlock.acDefaultProps = {
+  horizontalAlignment: 'left',
+};
+
 registerComponent('RichTextBlock', RichTextBlock);
diff --git a/src/components/adaptive-cards/TextBlock/TextBlock.jsx b/src/components/adaptive-cards/TextBlock/TextBlock.jsx
@@ -52,4 +52,8 @@ TextBlock.acPropTypes = {
   wrap: acPropTypes.wrap,
 };
 
+TextBlock.acDefaultProps = {
+  horizontalAlignment: 'left',
+};
+
 registerComponent('TextBlock', TextBlock);