diff --git a/src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.jsx b/src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.jsx
index 3bc3d6263..88d22653d 100644
--- 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
index 5297d888b..a4282394b 100644
--- 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
index dceb2d6ec..a36af956c 100644
--- 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 [
-
-
- FactSet Component
-
-
- {
- "type": "FactSet",
- "facts": [
- {
- "title": "ColumnSet",
- "value": "MinHeight: 100px"
- },
- {
- "title": "Column 1",
- "value": "MinHeight: 200px"
- },
- {
- "title": "Column 2",
- "value": "MinHeight: 50px"
- }
- ]
-}
-
+
+
+
+
+
+ ColumnSet
+ |
+
+ MinHeight: 100px
+ |
+
+
+
+ Column 1
+ |
+
+ MinHeight: 200px
+ |
+
+
+
+ Column 2
+ |
+
+ MinHeight: 50px
+ |
+
+
+
@@ -1211,6 +1223,83 @@ Array [
]
`;
+exports[`Storyshots Messaging/AdaptiveCard Fact Set 1`] = `
+Array [
+
+
+
+
+
+
+ Fact 1
+ |
+
+ Value 1
+ |
+
+
+
+ Fact 2
+ |
+
+ Value 2
+ |
+
+
+
+ Fact 3
+ |
+
+ Value 3
+ |
+
+
+
+ Fact 4
+ |
+
+ Value 5
+ |
+
+
+
+
+
,
+ ,
+ ,
+]
+`;
+
exports[`Storyshots Messaging/AdaptiveCard Image 1`] = `
Array [
@@ -1563,7 +1652,7 @@ Array [
@@ -1580,7 +1669,7 @@ Array [
@@ -1597,7 +1686,7 @@ Array [
@@ -1614,7 +1703,7 @@ Array [
,