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 +
+
+
, +