@laerdal/life-react-components 3.5.1-dev.10 → 3.5.1-dev.12

package/dist/stories/Card/Card.stories.js

@@ -0,0 +1,710 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import styled from 'styled-components';
+import Image from '../assets/PlaceholderModalImage.png';
+import { LaerdalLogo } from '../../src/assets';
+import { Card } from '../../src/Card';
+import { SystemIcons, ContentIcons } from '../../src/icons';
+import COLORS from '../../src/styles/colors';
+var meta = {
+    title: 'Components/Card/Card',
+    component: Card,
+    decorators: [],
+    tags: ['autodocs'],
+    parameters: {},
+};
+export default meta;
+export var Primary = {
+    args: {
+        variant: 'outline',
+        onSelect: function () { return console.log('card selected'); },
+        onCardClicked: function () { console.log('Card clicked'); },
+        maxWidth: '300px',
+        topSectionProps: {
+            tagLabel: 'Tag1',
+            tagIcon: React.createElement(SystemIcons.TimeLimited, null),
+            highlightRibbonText: 'Ribbon',
+            highlightRibbonIcon: React.createElement(SystemIcons.StarOutlined, null),
+            highlightRibbonContentColor: COLORS.white,
+            highlightRibbonBgColor: COLORS.neutral_500,
+            image: { src: 'bla bla', fallbackSrc: Image, height: '160px', alt: "alt text" }
+        },
+        middleSectionProps: {
+            colorBandColor: COLORS.warning_100,
+            categoryIcon: React.createElement(ContentIcons.Calendar, { size: "32px" }),
+            categoryLabel: 'Learning activity category',
+            title: ' Title',
+            description: ' This description is quite long. So long, in fact, that it spans multiple lines, causing the height of the card to increase further and further.',
+            tags: [{ label: 'Label1', variant: 'critical' },
+                { label: 'Label2', variant: 'critical' },
+                { label: 'Label3', variant: 'critical' }]
+        },
+        bottomSectionProps: {
+            progressLevel: 100,
+            progressMax: 350,
+            noteLeft: "Note left",
+            noteLeftIcon: React.createElement(SystemIcons.Home, { size: "16px" }),
+            noteRight: "Note right",
+            noteRightIcon: React.createElement(SystemIcons.Information, { size: "16px" }),
+            authorName: "Laerdal Medical",
+            logo: React.createElement(LaerdalLogo, null),
+            actions: [{
+                    icon: React.createElement(SystemIcons.BookmarkOff, { size: "24px" }),
+                    onClick: function () {
+                    }
+                },
+                {
+                    icon: React.createElement(SystemIcons.Share, { size: "24px" }),
+                    onClick: function () {
+                    }
+                },
+                {
+                    icon: React.createElement(SystemIcons.Notification, { size: "24px" }),
+                    onClick: function () {
+                    }
+                }]
+        }
+    }
+};
+var CardsDemo = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: row;\n  padding: 16px;\n  justify-content: space-evenly;\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: row;\n  padding: 16px;\n  justify-content: space-evenly;\n"])));
+export var Outline = function () {
+    return React.createElement("div", { style: { backgroundColor: COLORS.white } },
+        React.createElement(CardsDemo, null,
+            React.createElement(Card, { variant: 'outline', onSelect: function () { return console.log('card selected'); }, onCardClicked: function () { console.log('Card clicked'); }, maxWidth: '300px', topSectionProps: {
+                    tagLabel: 'Tag1',
+                    tagIcon: React.createElement(SystemIcons.TimeLimited, null),
+                    highlightRibbonText: 'Ribbon',
+                    highlightRibbonIcon: React.createElement(SystemIcons.StarOutlined, null),
+                    highlightRibbonContentColor: COLORS.white,
+                    highlightRibbonBgColor: COLORS.neutral_500,
+                    image: { src: 'bla bla', fallbackSrc: Image, height: '160px', alt: "alt text" }
+                }, middleSectionProps: {
+                    colorBandColor: COLORS.warning_100,
+                    categoryIcon: React.createElement(ContentIcons.Calendar, { size: "32px" }),
+                    categoryLabel: 'Learning activity category',
+                    title: ' Title',
+                    description: ' This description is quite long. So long, in fact, that it spans multiple lines, causing the height of the card to increase further and further.',
+                    tags: [{ label: 'Label1', variant: 'critical' },
+                        { label: 'Label2', variant: 'critical' },
+                        { label: 'Label3', variant: 'critical' }]
+                }, bottomSectionProps: {
+                    progressLevel: 100,
+                    progressMax: 350,
+                    noteLeft: "Note left",
+                    noteLeftIcon: React.createElement(SystemIcons.Home, { size: "16px" }),
+                    noteRight: "Note right",
+                    noteRightIcon: React.createElement(SystemIcons.Information, { size: "16px" }),
+                    authorName: "Laerdal Medical",
+                    logo: React.createElement(LaerdalLogo, null),
+                    actions: [{
+                            icon: React.createElement(SystemIcons.BookmarkOff, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        },
+                        {
+                            icon: React.createElement(SystemIcons.Share, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        },
+                        {
+                            icon: React.createElement(SystemIcons.Notification, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        }]
+                } }),
+            React.createElement(Card, { variant: 'outline', onCardClicked: function () { return console.log('Card clicked'); }, topSectionProps: {
+                    setSelected: function () { return console.log('Card selected'); },
+                    tagLabel: 'Tag2',
+                    tagIcon: React.createElement(SystemIcons.Timeline, null),
+                    highlightRibbonText: 'Ribbon',
+                    highlightRibbonIcon: React.createElement(SystemIcons.Sort, null),
+                    highlightRibbonContentColor: COLORS.white,
+                    highlightRibbonBgColor: COLORS.accent1_500,
+                    image: { src: Image, alt: "alt text" }
+                }, middleSectionProps: {
+                    colorBandColor: COLORS.primary_300,
+                    categoryIcon: React.createElement(ContentIcons.Calendar, { size: "32px" }),
+                    categoryLabel: 'Learning activity category',
+                    title: ' Title',
+                    description: 'Description text',
+                    tags: [{ label: 'Label2' }]
+                }, bottomSectionProps: {
+                    progressLevel: 200,
+                    progressMax: 350,
+                    noteLeft: "Note left",
+                    noteLeftIcon: React.createElement(SystemIcons.Attachment, { size: "16px" }),
+                    noteRight: "Note right",
+                    noteRightIcon: React.createElement(SystemIcons.Assignments, { size: "16px" }),
+                    authorName: "Laerdal Medical",
+                    logo: React.createElement(LaerdalLogo, null),
+                    actions: [{
+                            icon: React.createElement(SystemIcons.BookmarkOff, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        },
+                        {
+                            icon: React.createElement(SystemIcons.Share, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        },
+                        {
+                            icon: React.createElement(SystemIcons.Notification, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        }]
+                } }),
+            React.createElement(Card, { variant: 'outline', onCardClicked: function () { return console.log('Card clicked'); }, disabled: true, topSectionProps: {
+                    setSelected: function () { return console.log('Card selected'); },
+                    tagLabel: 'Label',
+                    tagIcon: React.createElement(SystemIcons.Time, null),
+                    highlightRibbonText: 'Ribbon',
+                    highlightRibbonIcon: React.createElement(SystemIcons.StarFilled, null),
+                    highlightRibbonContentColor: COLORS.white,
+                    highlightRibbonBgColor: COLORS.correct_500,
+                    image: { src: Image, alt: "alt text" }
+                }, middleSectionProps: {
+                    colorBandColor: COLORS.warning_300,
+                    categoryIcon: React.createElement(ContentIcons.Calendar, { size: "32px" }),
+                    categoryLabel: 'Learning activity category',
+                    title: ' Title',
+                    description: 'Description text',
+                    tags: [{ label: 'Label1' },
+                        { label: 'Label2', variant: 'critical' },
+                        { label: 'Label3', variant: 'accent1' }],
+                    row2Tags: [{ label: 'Label4', variant: 'accent1' }, { label: 'Label17', variant: 'accent2' }]
+                }, bottomSectionProps: {
+                    progressLevel: 30,
+                    progressMax: 350,
+                    noteLeft: "Note left",
+                    noteLeftIcon: React.createElement(SystemIcons.Notification, { size: "16px" }),
+                    noteRight: "Note right",
+                    noteRightIcon: React.createElement(SystemIcons.NotificationNew, { size: "16px" }),
+                    authorName: "Laerdal Medical",
+                    logo: React.createElement(LaerdalLogo, null),
+                    actions: [{
+                            icon: React.createElement(SystemIcons.BookmarkOff, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        },
+                        {
+                            icon: React.createElement(SystemIcons.Share, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        },
+                        {
+                            icon: React.createElement(SystemIcons.Notification, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        }]
+                } })),
+        React.createElement(CardsDemo, null,
+            React.createElement(Card, { variant: 'outline', onCardClicked: function () { return console.log('Card clicked'); }, topSectionProps: {
+                    selected: true,
+                    setSelected: function () {
+                        console.log('Card selected');
+                    },
+                    highlightRibbonText: 'Ribbon',
+                    highlightRibbonIcon: React.createElement(SystemIcons.StarOutlined, null),
+                    highlightRibbonContentColor: COLORS.white,
+                    highlightRibbonBgColor: COLORS.neutral_500,
+                    image: { src: Image, alt: "alt text" }
+                }, middleSectionProps: {
+                    title: ' Title',
+                    description: 'Description text',
+                    tags: []
+                }, bottomSectionProps: {
+                    authorName: "Laerdal Medical",
+                    logo: React.createElement(LaerdalLogo, null),
+                    actions: [{
+                            icon: React.createElement(SystemIcons.BookmarkOff, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        },
+                        {
+                            icon: React.createElement(SystemIcons.Share, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        },
+                        {
+                            icon: React.createElement(SystemIcons.Notification, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        }]
+                } }),
+            React.createElement(Card, { variant: 'outline', onCardClicked: function () { return console.log('Card clicked'); }, topSectionProps: {
+                    selected: false,
+                    setSelected: function () {
+                    },
+                    highlightRibbonText: 'Ribbon',
+                    highlightRibbonIcon: React.createElement(SystemIcons.Sort, null),
+                    highlightRibbonContentColor: COLORS.white,
+                    highlightRibbonBgColor: COLORS.accent1_500,
+                    image: { src: Image, alt: "alt text" }
+                }, middleSectionProps: {
+                    title: ' Title',
+                    description: 'Perfect',
+                    tags: []
+                }, bottomSectionProps: {
+                    authorName: "Laerdal Medical",
+                    logo: React.createElement(LaerdalLogo, null),
+                    actions: [{
+                            icon: React.createElement(SystemIcons.BookmarkOff, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        },
+                        {
+                            icon: React.createElement(SystemIcons.Share, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        },
+                        {
+                            icon: React.createElement(SystemIcons.Notification, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        }]
+                } }),
+            React.createElement(Card, { variant: 'outline', onCardClicked: function () { return console.log('Card clicked'); }, topSectionProps: {
+                    selected: false,
+                    setSelected: function () {
+                    },
+                    highlightRibbonText: 'Ribbon',
+                    highlightRibbonIcon: React.createElement(SystemIcons.StarFilled, null),
+                    highlightRibbonContentColor: COLORS.white,
+                    highlightRibbonBgColor: COLORS.correct_500,
+                    image: { src: Image, alt: "alt text" }
+                }, middleSectionProps: {
+                    title: ' Title',
+                    description: 'Description text',
+                    tags: []
+                }, bottomSectionProps: {
+                    authorName: "Laerdal Medical",
+                    logo: React.createElement(LaerdalLogo, null),
+                    actions: [{
+                            icon: React.createElement(SystemIcons.BookmarkOff, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        },
+                        {
+                            icon: React.createElement(SystemIcons.Share, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        },
+                        {
+                            icon: React.createElement(SystemIcons.Notification, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        }]
+                } })),
+        React.createElement(CardsDemo, null,
+            React.createElement(Card, { variant: 'outline', onCardClicked: function () { return console.log('Card clicked'); }, topSectionProps: {
+                    image: { src: Image, alt: "alt text" }
+                }, middleSectionProps: {
+                    title: 'Title',
+                    tags: []
+                }, bottomSectionProps: {
+                    actions: [{
+                            icon: React.createElement(SystemIcons.BookmarkOff, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        },
+                        {
+                            icon: React.createElement(SystemIcons.Share, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        },
+                        {
+                            icon: React.createElement(SystemIcons.Notification, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        }]
+                } }),
+            React.createElement(Card, { variant: 'outline', onCardClicked: function () { return console.log('Card clicked'); }, topSectionProps: {
+                    image: { src: Image, alt: "alt text" }
+                }, middleSectionProps: {
+                    title: 'Title',
+                    tags: []
+                }, bottomSectionProps: {
+                    progressLevel: 20,
+                    progressMax: 500
+                } }),
+            React.createElement(Card, { variant: 'outline', onCardClicked: function () { return console.log('Card clicked'); }, topSectionProps: {
+                    image: { src: Image, alt: "alt text" }
+                }, middleSectionProps: {
+                    title: 'Title',
+                    tags: []
+                }, bottomSectionProps: {
+                    authorName: "Laerdal",
+                    logo: React.createElement(LaerdalLogo, null)
+                } })),
+        React.createElement(CardsDemo, null,
+            React.createElement(Card, { variant: 'outline', topSectionProps: {
+                    highlightRibbonText: 'Ribbon',
+                    highlightRibbonIcon: React.createElement(SystemIcons.StarOutlined, null),
+                    highlightRibbonContentColor: COLORS.white,
+                    highlightRibbonBgColor: COLORS.neutral_500,
+                    image: { src: Image, alt: "alt text" }
+                }, middleSectionProps: {
+                    title: 'Title',
+                    tags: []
+                }, bottomSectionProps: {
+                    authorName: "Laerdal Medical",
+                    logo: React.createElement(LaerdalLogo, null),
+                    actions: [{
+                            icon: React.createElement(SystemIcons.Search, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        },
+                        {
+                            icon: React.createElement(SystemIcons.Asterisk, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        },
+                        {
+                            icon: React.createElement(SystemIcons.Clear, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        }]
+                } }),
+            React.createElement(Card, { variant: 'outline', topSectionProps: {
+                    highlightRibbonText: 'Ribbon',
+                    highlightRibbonIcon: React.createElement(SystemIcons.Sort, null),
+                    highlightRibbonContentColor: COLORS.white,
+                    highlightRibbonBgColor: COLORS.accent1_500,
+                    image: { src: Image, alt: "alt text" }
+                }, middleSectionProps: {
+                    title: 'Title',
+                    tags: []
+                } }),
+            React.createElement(Card, { variant: 'outline', topSectionProps: {
+                    highlightRibbonText: 'Ribbon',
+                    highlightRibbonIcon: React.createElement(SystemIcons.StarFilled, null),
+                    highlightRibbonContentColor: COLORS.white,
+                    highlightRibbonBgColor: COLORS.correct_500,
+                    image: { src: Image, alt: "alt text" }
+                }, middleSectionProps: {
+                    title: ' Title',
+                    description: 'Description text',
+                    tags: []
+                } })));
+};
+export var Elevated = function () {
+    return React.createElement("div", { style: { backgroundColor: COLORS.white } },
+        React.createElement(CardsDemo, null,
+            React.createElement(Card, { variant: 'elevated', onCardClicked: function () { return console.log('Card clicked'); }, topSectionProps: {
+                    tagLabel: 'Tag1',
+                    tagIcon: React.createElement(SystemIcons.TimeLimited, null),
+                    highlightRibbonText: 'Ribbon',
+                    highlightRibbonIcon: React.createElement(SystemIcons.StarOutlined, null),
+                    highlightRibbonContentColor: COLORS.white,
+                    highlightRibbonBgColor: COLORS.neutral_500,
+                    image: { src: Image, alt: "alt text" }
+                }, middleSectionProps: {
+                    colorBandColor: COLORS.warning_100,
+                    categoryIcon: React.createElement(ContentIcons.Calendar, { size: "32px" }),
+                    categoryLabel: 'Learning activity category',
+                    title: ' Title',
+                    description: 'Description text',
+                    tags: [{ label: 'Label1', variant: 'critical' },
+                        { label: 'Label2', variant: 'critical' },
+                        { label: 'Label3', variant: 'critical' }]
+                }, bottomSectionProps: {
+                    progressLevel: 100,
+                    progressMax: 350,
+                    noteLeft: "Note left",
+                    noteLeftIcon: React.createElement(SystemIcons.Home, { size: "16px" }),
+                    noteRight: "Note right",
+                    noteRightIcon: React.createElement(SystemIcons.Information, { size: "16px" }),
+                    authorName: "Laerdal Medical",
+                    logo: React.createElement(LaerdalLogo, null),
+                    actions: [{
+                            icon: React.createElement(SystemIcons.BookmarkOff, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        },
+                        {
+                            icon: React.createElement(SystemIcons.Share, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        },
+                        {
+                            icon: React.createElement(SystemIcons.Notification, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        }]
+                } }),
+            React.createElement(Card, { variant: 'elevated', onCardClicked: function () { return console.log('Card clicked'); }, topSectionProps: {
+                    tagLabel: 'Tag2',
+                    tagIcon: React.createElement(SystemIcons.Timeline, null),
+                    highlightRibbonText: 'Ribbon',
+                    highlightRibbonIcon: React.createElement(SystemIcons.Sort, null),
+                    highlightRibbonContentColor: COLORS.white,
+                    highlightRibbonBgColor: COLORS.accent1_500,
+                    image: { src: Image, alt: "alt text" }
+                }, middleSectionProps: {
+                    colorBandColor: COLORS.primary_300,
+                    categoryIcon: React.createElement(ContentIcons.Calendar, { size: "32px" }),
+                    categoryLabel: 'Learning activity category',
+                    title: ' Title',
+                    description: 'Description text',
+                    tags: [{ label: 'Label2' }]
+                }, bottomSectionProps: {
+                    progressLevel: 200,
+                    progressMax: 350,
+                    noteLeft: "Note left",
+                    noteLeftIcon: React.createElement(SystemIcons.Attachment, { size: "16px" }),
+                    noteRight: "Note right",
+                    noteRightIcon: React.createElement(SystemIcons.Assignments, { size: "16px" }),
+                    authorName: "Laerdal Medical",
+                    logo: React.createElement(LaerdalLogo, null),
+                    actions: [{
+                            icon: React.createElement(SystemIcons.BookmarkOff, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        },
+                        {
+                            icon: React.createElement(SystemIcons.Share, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        },
+                        {
+                            icon: React.createElement(SystemIcons.Notification, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        }]
+                } }),
+            React.createElement(Card, { variant: 'elevated', onCardClicked: function () { return console.log('Card clicked'); }, disabled: true, topSectionProps: {
+                    tagLabel: 'Label',
+                    tagIcon: React.createElement(SystemIcons.Time, null),
+                    highlightRibbonText: 'Ribbon',
+                    highlightRibbonIcon: React.createElement(SystemIcons.StarFilled, null),
+                    highlightRibbonContentColor: COLORS.white,
+                    highlightRibbonBgColor: COLORS.correct_500,
+                    image: { src: Image, alt: "alt text" }
+                }, middleSectionProps: {
+                    colorBandColor: COLORS.warning_300,
+                    categoryIcon: React.createElement(ContentIcons.Calendar, { size: "32px" }),
+                    categoryLabel: 'Learning activity category',
+                    title: ' Title',
+                    description: 'Description text',
+                    tags: [{ label: 'Label1' },
+                        { label: 'Label2', variant: 'critical' },
+                        { label: 'Label3', variant: 'accent1' }],
+                    row2Tags: [{ label: 'Label4', variant: 'accent1' }, { label: 'Label17', variant: 'accent2' }]
+                }, bottomSectionProps: {
+                    progressLevel: 30,
+                    progressMax: 350,
+                    noteLeft: "Note left",
+                    noteLeftIcon: React.createElement(SystemIcons.Notification, { size: "16px" }),
+                    noteRight: "Note right",
+                    noteRightIcon: React.createElement(SystemIcons.NotificationNew, { size: "16px" }),
+                    authorName: "Laerdal Medical",
+                    logo: React.createElement(LaerdalLogo, null),
+                    actions: [{
+                            icon: React.createElement(SystemIcons.BookmarkOff, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        },
+                        {
+                            icon: React.createElement(SystemIcons.Share, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        },
+                        {
+                            icon: React.createElement(SystemIcons.Notification, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        }]
+                } })),
+        React.createElement(CardsDemo, null,
+            React.createElement(Card, { variant: 'elevated', onCardClicked: function () { return console.log('Card clicked'); }, topSectionProps: {
+                    selected: true,
+                    setSelected: function () {
+                    },
+                    highlightRibbonText: 'Ribbon',
+                    highlightRibbonIcon: React.createElement(SystemIcons.StarOutlined, null),
+                    highlightRibbonContentColor: COLORS.white,
+                    highlightRibbonBgColor: COLORS.neutral_500,
+                    image: { src: Image, alt: "alt text" }
+                }, middleSectionProps: {
+                    title: ' Title',
+                    description: 'Description text',
+                    tags: []
+                }, bottomSectionProps: {
+                    authorName: "Laerdal Medical",
+                    logo: React.createElement(LaerdalLogo, null),
+                    actions: [{
+                            icon: React.createElement(SystemIcons.BookmarkOff, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        },
+                        {
+                            icon: React.createElement(SystemIcons.Share, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        },
+                        {
+                            icon: React.createElement(SystemIcons.Notification, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        }]
+                } }),
+            React.createElement(Card, { variant: 'elevated', onCardClicked: function () { return console.log('Card clicked'); }, topSectionProps: {
+                    selected: false,
+                    setSelected: function () {
+                    },
+                    highlightRibbonText: 'Ribbon',
+                    highlightRibbonIcon: React.createElement(SystemIcons.Sort, null),
+                    highlightRibbonContentColor: COLORS.white,
+                    highlightRibbonBgColor: COLORS.accent1_500,
+                    image: { src: Image, alt: "alt text" }
+                }, middleSectionProps: {
+                    title: ' Title',
+                    description: 'Description text',
+                    tags: []
+                }, bottomSectionProps: {
+                    authorName: "Laerdal Medical",
+                    logo: React.createElement(LaerdalLogo, null),
+                    actions: [{
+                            icon: React.createElement(SystemIcons.BookmarkOff, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        },
+                        {
+                            icon: React.createElement(SystemIcons.Share, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        },
+                        {
+                            icon: React.createElement(SystemIcons.Notification, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        }]
+                } }),
+            React.createElement(Card, { variant: 'elevated', onCardClicked: function () { return console.log('Card clicked'); }, topSectionProps: {
+                    selected: false,
+                    setSelected: function () {
+                    },
+                    highlightRibbonText: 'Ribbon',
+                    highlightRibbonIcon: React.createElement(SystemIcons.StarFilled, null),
+                    highlightRibbonContentColor: COLORS.white,
+                    highlightRibbonBgColor: COLORS.correct_500,
+                    image: { src: Image, alt: "alt text" }
+                }, middleSectionProps: {
+                    title: ' Title',
+                    description: 'Description text',
+                    tags: []
+                }, bottomSectionProps: {
+                    authorName: "Laerdal Medical",
+                    logo: React.createElement(LaerdalLogo, null),
+                    actions: [{
+                            icon: React.createElement(SystemIcons.BookmarkOff, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        },
+                        {
+                            icon: React.createElement(SystemIcons.Share, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        },
+                        {
+                            icon: React.createElement(SystemIcons.Notification, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        }]
+                } })),
+        React.createElement(CardsDemo, null,
+            React.createElement(Card, { variant: 'elevated', onCardClicked: function () { return console.log('Card clicked'); }, topSectionProps: {
+                    image: { src: Image, alt: "alt text" }
+                }, middleSectionProps: {
+                    title: 'Title',
+                    tags: []
+                }, bottomSectionProps: {
+                    actions: [{
+                            icon: React.createElement(SystemIcons.BookmarkOff, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        },
+                        {
+                            icon: React.createElement(SystemIcons.Share, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        },
+                        {
+                            icon: React.createElement(SystemIcons.Notification, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        }]
+                } }),
+            React.createElement(Card, { variant: 'elevated', onCardClicked: function () { return console.log('Card clicked'); }, topSectionProps: {
+                    image: { src: Image, alt: "alt text" }
+                }, middleSectionProps: {
+                    title: 'Title',
+                    tags: []
+                }, bottomSectionProps: {
+                    progressLevel: 20,
+                    progressMax: 500
+                } }),
+            React.createElement(Card, { variant: 'elevated', onCardClicked: function () { return console.log('Card clicked'); }, topSectionProps: {
+                    image: { src: Image, alt: "alt text" }
+                }, middleSectionProps: {
+                    title: 'Title',
+                    tags: []
+                }, bottomSectionProps: {
+                    authorName: "Laerdal Medical",
+                    logo: React.createElement(LaerdalLogo, null)
+                } })),
+        React.createElement(CardsDemo, null,
+            React.createElement(Card, { variant: 'elevated', topSectionProps: {
+                    highlightRibbonText: 'Ribbon',
+                    highlightRibbonIcon: React.createElement(SystemIcons.StarOutlined, null),
+                    highlightRibbonContentColor: COLORS.white,
+                    highlightRibbonBgColor: COLORS.neutral_500,
+                    image: { src: Image, alt: "alt text" }
+                }, middleSectionProps: {
+                    title: 'Title',
+                    tags: []
+                }, bottomSectionProps: {
+                    authorName: "Laerdal Medical",
+                    logo: React.createElement(LaerdalLogo, null),
+                    actions: [{
+                            icon: React.createElement(SystemIcons.Search, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        },
+                        {
+                            icon: React.createElement(SystemIcons.Asterisk, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        },
+                        {
+                            icon: React.createElement(SystemIcons.Clear, { size: "24px" }),
+                            onClick: function () {
+                            }
+                        }]
+                } }),
+            React.createElement(Card, { variant: 'elevated', topSectionProps: {
+                    highlightRibbonText: 'Ribbon',
+                    highlightRibbonIcon: React.createElement(SystemIcons.Sort, null),
+                    highlightRibbonContentColor: COLORS.white,
+                    highlightRibbonBgColor: COLORS.accent1_500,
+                    image: { src: Image, alt: "alt text" }
+                }, middleSectionProps: {
+                    title: 'Title',
+                    tags: []
+                } }),
+            React.createElement(Card, { variant: 'elevated', topSectionProps: {
+                    highlightRibbonText: 'Ribbon',
+                    highlightRibbonIcon: React.createElement(SystemIcons.StarFilled, null),
+                    highlightRibbonContentColor: COLORS.white,
+                    highlightRibbonBgColor: COLORS.correct_500,
+                    image: { src: 'blabla', fallbackSrc: Image, alt: "alt text" }
+                }, middleSectionProps: {
+                    title: ' Title',
+                    description: 'Description text',
+                    tags: []
+                } })));
+};
+var templateObject_1;