feat(AdaptiveCardsFactSet): create FactSet component

webex · Dec 21, 2021 · cd7e0ec · cd7e0ec
1 parent 61744e1
commit cd7e0ec
Show file tree

Hide file tree

Showing 6 changed files with 216 additions and 30 deletions.
diff --git a/src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.jsx b/src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.jsx
@@ -6,6 +6,7 @@ import Component from '../Component/Component';
 import '../Column/Column';
 import '../ColumnSet/ColumnSet';
 import '../Container/Container';
+import '../FactSet/FactSet';
 import '../Image/Image';
 import '../ImageSet/ImageSet';
 import '../InputDate/InputDate';

diff --git a/src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.stories.js b/src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.stories.js
@@ -1613,6 +1613,35 @@ const exampleRichTextBlock = {
   ],
 };
 
+const exampleFactSet = {
+  $schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
+  type: 'AdaptiveCard',
+  version: '1.0',
+  body: [
+    {
+      type: 'FactSet',
+      facts: [
+        {
+          title: 'Fact 1',
+          value: 'Value 1',
+        },
+        {
+          title: 'Fact 2',
+          value: 'Value 2',
+        },
+        {
+          title: 'Fact 3',
+          value: 'Value 3',
+        },
+        {
+          title: 'Fact 4',
+          value: 'Value 5',
+        },
+      ],
+    },
+  ],
+};
+
 export const Card = Template.bind({});
 Card.args = {
   data: exampleAdaptiveCard,
@@ -1652,3 +1681,8 @@ export const RichTextBlock = Template.bind({});
 RichTextBlock.args = {
   data: exampleRichTextBlock,
 };
+
+export const FactSet = Template.bind({});
+FactSet.args = {
+  data: exampleFactSet,
+};
diff --git a/src/components/adaptive-cards/AdaptiveCard/__snapshots__/AdaptiveCard.stories.storyshot b/src/components/adaptive-cards/AdaptiveCard/__snapshots__/AdaptiveCard.stories.storyshot
@@ -509,31 +509,43 @@ Array [
       <div
         className="wxc-adaptive-cards-column wxc-ac-container-style--default wxc-ac-container--vertical"
       >
-        <div>
-          <h5>
-            FactSet Component
-          </h5>
-          <pre
-            className="wxc-adaptive-cards-unknown-component"
-          >
-            {
-    "type": "FactSet",
-    "facts": [
-        {
-            "title": "ColumnSet",
-            "value": "MinHeight: 100px"
-        },
-        {
-            "title": "Column 1",
-            "value": "MinHeight: 200px"
-        },
-        {
-            "title": "Column 2",
-            "value": "MinHeight: 50px"
-        }
-    ]
-}
-          </pre>
+        <div
+          className="wxc-adaptive-cards-fact-set"
+        >
+          <table>
+            <tbody>
+              <tr>
+                <th
+                  className="wxc-adaptive-cards-fact-set__fact-title"
+                >
+                  ColumnSet
+                </th>
+                <td>
+                  MinHeight: 100px
+                </td>
+              </tr>
+              <tr>
+                <th
+                  className="wxc-adaptive-cards-fact-set__fact-title"
+                >
+                  Column 1
+                </th>
+                <td>
+                  MinHeight: 200px
+                </td>
+              </tr>
+              <tr>
+                <th
+                  className="wxc-adaptive-cards-fact-set__fact-title"
+                >
+                  Column 2
+                </th>
+                <td>
+                  MinHeight: 50px
+                </td>
+              </tr>
+            </tbody>
+          </table>
         </div>
       </div>
     </div>
@@ -1211,6 +1223,83 @@ Array [
 ]
 `;
 
+exports[`Storyshots Messaging/AdaptiveCard Fact Set 1`] = `
+Array [
+  <div
+    className="wxc-adaptive-card"
+  >
+    <div
+      className="wxc-adaptive-cards-fact-set"
+    >
+      <table>
+        <tbody>
+          <tr>
+            <th
+              className="wxc-adaptive-cards-fact-set__fact-title"
+            >
+              Fact 1
+            </th>
+            <td>
+              Value 1
+            </td>
+          </tr>
+          <tr>
+            <th
+              className="wxc-adaptive-cards-fact-set__fact-title"
+            >
+              Fact 2
+            </th>
+            <td>
+              Value 2
+            </td>
+          </tr>
+          <tr>
+            <th
+              className="wxc-adaptive-cards-fact-set__fact-title"
+            >
+              Fact 3
+            </th>
+            <td>
+              Value 3
+            </td>
+          </tr>
+          <tr>
+            <th
+              className="wxc-adaptive-cards-fact-set__fact-title"
+            >
+              Fact 4
+            </th>
+            <td>
+              Value 5
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>,
+  <video
+    autoPlay={true}
+    height="0"
+    id="remote-video"
+    loop={true}
+    muted={true}
+    playsInline={true}
+    src="./video/ongoing-meeting.mp4"
+    width="0"
+  />,
+  <video
+    autoPlay={true}
+    height="0"
+    id="remote-share"
+    loop={true}
+    muted={true}
+    playsInline={true}
+    src="./video/ongoing-share.mp4"
+    width="0"
+  />,
+]
+`;
+
 exports[`Storyshots Messaging/AdaptiveCard Image 1`] = `
 Array [
   <div
@@ -1378,7 +1467,7 @@ Array [
     className="wxc-adaptive-card"
   >
     <div
-      className="wxc-adaptive-cards-rich-text-block wxc-adaptive-cards-component "
+      className="wxc-adaptive-cards-rich-text-block"
     >
       <div>
         <h5>
@@ -1563,7 +1652,7 @@ Array [
       </div>
     </div>
     <div
-      className="wxc-adaptive-cards-rich-text-block wxc-adaptive-cards-component "
+      className="wxc-adaptive-cards-rich-text-block"
     >
       <div>
         <h5>
@@ -1580,7 +1669,7 @@ Array [
       </div>
     </div>
     <div
-      className="wxc-adaptive-cards-rich-text-block wxc-adaptive-cards-component "
+      className="wxc-adaptive-cards-rich-text-block"
     >
       <div>
         <h5>
@@ -1597,7 +1686,7 @@ Array [
       </div>
     </div>
     <div
-      className="wxc-adaptive-cards-rich-text-block wxc-adaptive-cards-component "
+      className="wxc-adaptive-cards-rich-text-block"
     >
       <div>
         <h5>
@@ -1614,7 +1703,7 @@ Array [
       </div>
     </div>
     <div
-      className="wxc-adaptive-cards-rich-text-block wxc-adaptive-cards-component "
+      className="wxc-adaptive-cards-rich-text-block"
     />
   </div>,
   <video

diff --git a/src/components/adaptive-cards/FactSet/FactSet.jsx b/src/components/adaptive-cards/FactSet/FactSet.jsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import webexComponentClasses from '../../helpers';
+import {acPropTypes, registerComponent} from '../Component/Component';
+
+/**
+ * Adaptive Cards FactSet component
+ * https://adaptivecards.io/explorer/FactSet.html
+ *
+ * @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 FactSet({data, className}) {
+  const [cssClasses, sc] = webexComponentClasses('adaptive-cards-fact-set', className);
+
+  return (
+    <div className={cssClasses}>
+      <table>
+        <tbody>
+          {data.facts.map((fact, index) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <tr key={index}>
+              <th className={sc('fact-title')}>{fact.title}</th>
+              <td>{fact.value}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+FactSet.propTypes = {
+  data: PropTypes.shape().isRequired,
+  className: PropTypes.string,
+};
+
+FactSet.defaultProps = {
+  className: '',
+};
+
+FactSet.acPropTypes = {
+  facts: acPropTypes.children,
+  id: acPropTypes.id,
+  isVisible: acPropTypes.isVisible,
+  separator: acPropTypes.separator,
+  spacing: acPropTypes.spacing,
+  type: acPropTypes.type,
+};
+
+registerComponent('FactSet', FactSet);
diff --git a/src/components/adaptive-cards/FactSet/FactSet.scss b/src/components/adaptive-cards/FactSet/FactSet.scss
@@ -0,0 +1,8 @@
+$C: #{$WEBEX_COMPONENTS_CLASS_PREFIX}-adaptive-cards-fact-set;
+
+.#{$C} {
+  .#{$C}__fact-title {
+    padding-right: 0.5rem;
+    text-align: left;
+  }
+}
diff --git a/src/components/adaptive-cards/_adaptive-cards.scss b/src/components/adaptive-cards/_adaptive-cards.scss
@@ -1,3 +1,4 @@
 @import 'AdaptiveCard/AdaptiveCard';
 @import 'Component/Component';
 @import 'ImageSet/ImageSet';
+@import 'FactSet/FactSet';