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

package/dist/stories/Popover.stories.js

@@ -0,0 +1,836 @@
+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 { SystemIcons, Popover, COLORS, Size, Position } from '../src/index';
+export default {
+    title: 'Components/Popover',
+    component: Popover,
+    decorators: [],
+    parameter: {},
+};
+var DemoContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: fit-content;\n  height: fit-content;\n  margin: 20px 0px;\n"], ["\n  width: fit-content;\n  height: fit-content;\n  margin: 20px 0px;\n"])));
+var LargeDemoContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: fit-content;\n  height: fit-content;\n  margin: 30px 0px;\n"], ["\n  width: fit-content;\n  height: fit-content;\n  margin: 30px 0px;\n"])));
+var PopoverContent = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background: ", ";\n  height: 100%;\n  width: 100%;\n  display: block;\n  align-items: center;\n"], ["\n  background: ", ";\n  height: 100%;\n  width: 100%;\n  display: block;\n  align-items: center;\n"])), COLORS.neutral_200);
+var PopoverScrollableContent = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background: ", ";\n  height: 500px;\n  width: 100%;\n  display: block;\n  align-items: center;\n"], ["\n  background: ", ";\n  height: 500px;\n  width: 100%;\n  display: block;\n  align-items: center;\n"])), COLORS.neutral_200);
+var Content = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 100px;\n  width: 100px;\n  background: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 20px;\n"], ["\n  height: 100px;\n  width: 100px;\n  background: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 20px;\n"])), COLORS.white);
+var FlexContainer = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  height: 1000px;\n  width: 2000px;\n  flexDirection: column;\n  align-items: center;\n  background: ", ";\n"], ["\n  display: flex;\n  height: 1000px;\n  width: 2000px;\n  flexDirection: column;\n  align-items: center;\n  background: ", ";\n"])), COLORS.neutral_100);
+var SmallFlexContainer = styled(FlexContainer)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  height: 1000px;\n  width: 800px;\n"], ["\n  height: 1000px;\n  width: 800px;\n"])));
+var MediumFlexContainer = styled(FlexContainer)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: 1070px;\n  height: 1030px;\n"], ["\n  width: 1070px;\n  height: 1030px;\n"])));
+var LargeFlexContainer = styled(FlexContainer)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  height: 1200px;\n  width: 1400px;\n"], ["\n  height: 1200px;\n  width: 1400px;\n"])));
+var DemoContent = function () {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(PopoverContent, null, "Middle container / frame")));
+};
+var ScrollableContent = function () {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(PopoverScrollableContent, null, "Middle container / frame")));
+};
+export var SmallPopoverDemo = function () { return (React.createElement(SmallFlexContainer, { style: { width: '800px' } },
+    React.createElement(DemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Small, topSectionProps: {
+                text: 'Sample text',
+                note: 'Test note'
+            }, mainContent: DemoContent(), bottomSectionProps: {
+                textButton: {
+                    label: 'View more',
+                    action: function () { console.log('123 loges'); },
+                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
+                },
+                iconButtons: [
+                    {
+                        icon: React.createElement(SystemIcons.StarOutlined, null),
+                        action: function () { console.log('star outlined clicked'); }
+                    },
+                    {
+                        icon: React.createElement(SystemIcons.Share, null),
+                        action: function () { console.log('share icon clicked'); }
+                    }
+                ]
+            }, position: Position.Bottom },
+            React.createElement(Content, null, "pops bottom"))),
+    React.createElement(DemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Small, topSectionProps: {
+                text: 'Sample text',
+            }, mainContent: DemoContent(), bottomSectionProps: {
+                iconButtons: [
+                    {
+                        icon: React.createElement(SystemIcons.StarOutlined, null),
+                        action: function () { console.log('star outlined clicked'); }
+                    },
+                    {
+                        icon: React.createElement(SystemIcons.Share, null),
+                        action: function () { console.log('share icon clicked'); }
+                    }
+                ]
+            }, position: Position.Left },
+            React.createElement(Content, null, "pops left"))),
+    React.createElement(DemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Small, topSectionProps: {
+                text: 'Sample text'
+            }, mainContent: DemoContent(), bottomSectionProps: {
+                textButton: {
+                    label: 'View more',
+                    action: function () { console.log('123 loges'); },
+                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
+                }
+            }, position: Position.Right },
+            React.createElement(Content, null, "pops right"))),
+    React.createElement(DemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Small, topSectionProps: {
+                text: 'Sample text',
+                note: 'Test note',
+            }, mainContent: DemoContent(), bottomSectionProps: {
+                textButton: {
+                    label: 'View more',
+                    action: function () { console.log('123 loges'); },
+                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
+                },
+                iconButtons: [
+                    {
+                        icon: React.createElement(SystemIcons.StarOutlined, null),
+                        action: function () { console.log('star outlined clicked'); }
+                    },
+                    {
+                        icon: React.createElement(SystemIcons.Share, null),
+                        action: function () { console.log('share icon clicked'); }
+                    }
+                ]
+            }, position: Position.Top },
+            React.createElement(Content, null, "pops top"))),
+    React.createElement(DemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Small, mainContent: DemoContent(), bottomSectionProps: {
+                textButton: {
+                    label: 'View more',
+                    action: function () { console.log('123 loges'); },
+                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
+                },
+                iconButtons: [
+                    {
+                        icon: React.createElement(SystemIcons.StarOutlined, null),
+                        action: function () { console.log('star outlined clicked'); }
+                    },
+                    {
+                        icon: React.createElement(SystemIcons.Share, null),
+                        action: function () { console.log('share icon clicked'); }
+                    }
+                ]
+            }, position: Position.Right },
+            React.createElement(Content, { style: { 'flexDirection': 'column' } },
+                React.createElement("div", null, "pops right"),
+                " ",
+                React.createElement("div", null, " with no"),
+                " ",
+                React.createElement("div", null, "top")))),
+    React.createElement(DemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Small, topSectionProps: {
+                text: 'Sample text',
+                note: 'Test note'
+            }, mainContent: DemoContent(), position: Position.Top },
+            React.createElement(Content, { style: { 'flexDirection': 'column' } },
+                React.createElement("div", null, "pops top"),
+                " ",
+                React.createElement("div", null, "with no"),
+                " ",
+                React.createElement("div", null, "bottom")))),
+    React.createElement(DemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Small, mainContent: DemoContent(), position: Position.Left },
+            React.createElement(Content, { style: { 'flexDirection': 'column' } },
+                React.createElement("div", null, "pops left"),
+                " ",
+                React.createElement("div", null, "with only"),
+                " ",
+                React.createElement("div", null, "middle")))))); };
+export var SmallPopoverScrollableDemo = function () { return (React.createElement(SmallFlexContainer, null,
+    React.createElement(DemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Small, topSectionProps: {
+                text: 'Sample text',
+                note: 'Test note'
+            }, mainContent: ScrollableContent(), bottomSectionProps: {
+                textButton: {
+                    label: 'View more',
+                    action: function () { console.log('123 loges'); },
+                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
+                },
+                iconButtons: [
+                    {
+                        icon: React.createElement(SystemIcons.StarOutlined, null),
+                        action: function () { console.log('star outlined clicked'); }
+                    },
+                    {
+                        icon: React.createElement(SystemIcons.Share, null),
+                        action: function () { console.log('share icon clicked'); }
+                    }
+                ]
+            }, position: Position.Bottom },
+            React.createElement(Content, null, "pops bottom"))),
+    React.createElement(DemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Small, topSectionProps: {
+                text: 'Sample text',
+            }, mainContent: ScrollableContent(), bottomSectionProps: {
+                iconButtons: [
+                    {
+                        icon: React.createElement(SystemIcons.StarOutlined, null),
+                        action: function () { console.log('star outlined clicked'); }
+                    },
+                    {
+                        icon: React.createElement(SystemIcons.Share, null),
+                        action: function () { console.log('share icon clicked'); }
+                    }
+                ]
+            }, position: Position.Left },
+            React.createElement(Content, null, "pops left"))),
+    React.createElement(DemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Small, topSectionProps: {
+                text: 'Sample text',
+            }, mainContent: ScrollableContent(), bottomSectionProps: {
+                textButton: {
+                    label: 'View more',
+                    action: function () { console.log('123 loges'); },
+                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
+                }
+            }, position: Position.Right },
+            React.createElement(Content, null, "pops right"))),
+    React.createElement(DemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Small, topSectionProps: {
+                text: 'Sample text',
+                note: 'Test note',
+            }, mainContent: ScrollableContent(), bottomSectionProps: {
+                textButton: {
+                    label: 'View more',
+                    action: function () { console.log('123 loges'); },
+                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
+                },
+                iconButtons: [
+                    {
+                        icon: React.createElement(SystemIcons.StarOutlined, null),
+                        action: function () { console.log('star outlined clicked'); }
+                    },
+                    {
+                        icon: React.createElement(SystemIcons.Share, null),
+                        action: function () { console.log('share icon clicked'); }
+                    }
+                ]
+            }, position: Position.Top },
+            React.createElement(Content, null, "pops top"))),
+    React.createElement(DemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Small, mainContent: ScrollableContent(), bottomSectionProps: {
+                textButton: {
+                    label: 'View more',
+                    action: function () { console.log('123 loges'); },
+                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
+                },
+                iconButtons: [
+                    {
+                        icon: React.createElement(SystemIcons.StarOutlined, null),
+                        action: function () { console.log('star outlined clicked'); }
+                    },
+                    {
+                        icon: React.createElement(SystemIcons.Share, null),
+                        action: function () { console.log('share icon clicked'); }
+                    }
+                ]
+            }, position: Position.Right },
+            React.createElement(Content, { style: { 'flexDirection': 'column' } },
+                React.createElement("div", null, "pops right"),
+                " ",
+                React.createElement("div", null, " with no"),
+                " ",
+                React.createElement("div", null, "top")))),
+    React.createElement(DemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Small, topSectionProps: {
+                text: 'Sample text',
+                note: 'Test note'
+            }, mainContent: ScrollableContent(), position: Position.Top },
+            React.createElement(Content, { style: { 'flexDirection': 'column' } },
+                React.createElement("div", null, "pops top"),
+                " ",
+                React.createElement("div", null, "with no"),
+                " ",
+                React.createElement("div", null, "bottom")))),
+    React.createElement(DemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Small, mainContent: ScrollableContent(), position: Position.Left },
+            React.createElement(Content, { style: { 'flexDirection': 'column' } },
+                React.createElement("div", null, "pops left"),
+                " ",
+                React.createElement("div", null, "with only"),
+                " ",
+                React.createElement("div", null, "middle")))))); };
+export var MediumPopoverDemo = function () { return (React.createElement(MediumFlexContainer, null,
+    React.createElement(DemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Medium, topSectionProps: {
+                text: 'Sample text',
+                note: 'Test note'
+            }, mainContent: DemoContent(), bottomSectionProps: {
+                textButton: {
+                    label: 'View more',
+                    action: function () { console.log('123 loges'); },
+                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
+                },
+                iconButtons: [
+                    {
+                        icon: React.createElement(SystemIcons.StarOutlined, null),
+                        action: function () { console.log('star outlined clicked'); }
+                    },
+                    {
+                        icon: React.createElement(SystemIcons.Share, null),
+                        action: function () { console.log('share icon clicked'); }
+                    }
+                ]
+            }, position: Position.Bottom },
+            React.createElement(Content, null, "pops bottom"))),
+    React.createElement(DemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Medium, topSectionProps: {
+                text: 'Sample text',
+            }, mainContent: DemoContent(), bottomSectionProps: {
+                iconButtons: [
+                    {
+                        icon: React.createElement(SystemIcons.StarOutlined, null),
+                        action: function () { console.log('star outlined clicked'); }
+                    },
+                    {
+                        icon: React.createElement(SystemIcons.Share, null),
+                        action: function () { console.log('share icon clicked'); }
+                    }
+                ]
+            }, position: Position.Left },
+            React.createElement(Content, null, "pops left"))),
+    React.createElement(DemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Medium, topSectionProps: {
+                text: 'Sample text',
+            }, mainContent: DemoContent(), bottomSectionProps: {
+                textButton: {
+                    label: 'View more',
+                    action: function () { console.log('123 loges'); },
+                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
+                }
+            }, position: Position.Right },
+            React.createElement(Content, null, "pops right"))),
+    React.createElement(DemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Medium, topSectionProps: {
+                text: 'Sample text',
+                note: 'Test note',
+            }, mainContent: DemoContent(), bottomSectionProps: {
+                textButton: {
+                    label: 'View more',
+                    action: function () { console.log('123 loges'); },
+                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
+                },
+                iconButtons: [
+                    {
+                        icon: React.createElement(SystemIcons.StarOutlined, null),
+                        action: function () { console.log('star outlined clicked'); }
+                    },
+                    {
+                        icon: React.createElement(SystemIcons.Share, null),
+                        action: function () { console.log('share icon clicked'); }
+                    }
+                ]
+            }, position: Position.Top },
+            React.createElement(Content, null, "pops top"))),
+    React.createElement(DemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Medium, mainContent: DemoContent(), bottomSectionProps: {
+                textButton: {
+                    label: 'View more',
+                    action: function () { console.log('123 loges'); },
+                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
+                },
+                iconButtons: [
+                    {
+                        icon: React.createElement(SystemIcons.StarOutlined, null),
+                        action: function () { console.log('star outlined clicked'); }
+                    },
+                    {
+                        icon: React.createElement(SystemIcons.Share, null),
+                        action: function () { console.log('share icon clicked'); }
+                    }
+                ]
+            }, position: Position.Right },
+            React.createElement(Content, { style: { 'flexDirection': 'column' } },
+                React.createElement("div", null, "pops right"),
+                " ",
+                React.createElement("div", null, "with no"),
+                " ",
+                React.createElement("div", null, "top")))),
+    React.createElement(DemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Medium, topSectionProps: {
+                text: 'Sample text',
+                note: 'Test note'
+            }, mainContent: DemoContent(), position: Position.Top },
+            React.createElement(Content, { style: { 'flexDirection': 'column' } },
+                React.createElement("div", null, "pops top"),
+                " ",
+                React.createElement("div", null, "with no"),
+                " ",
+                React.createElement("div", null, "bottom")))),
+    React.createElement(DemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Medium, mainContent: DemoContent(), position: Position.Left },
+            React.createElement(Content, { style: { 'flexDirection': 'column' } },
+                React.createElement("div", null, "pops left"),
+                " ",
+                React.createElement("div", null, "with only"),
+                " ",
+                React.createElement("div", null, "middle")))))); };
+export var MediumPopoverScrollableDemo = function () { return (React.createElement(MediumFlexContainer, null,
+    React.createElement(DemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Medium, topSectionProps: {
+                text: 'Sample text',
+                note: 'Test note'
+            }, mainContent: ScrollableContent(), bottomSectionProps: {
+                textButton: {
+                    label: 'View more',
+                    action: function () { console.log('123 loges'); },
+                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
+                },
+                iconButtons: [
+                    {
+                        icon: React.createElement(SystemIcons.StarOutlined, null),
+                        action: function () { console.log('star outlined clicked'); }
+                    },
+                    {
+                        icon: React.createElement(SystemIcons.Share, null),
+                        action: function () { console.log('share icon clicked'); }
+                    }
+                ]
+            }, position: Position.Bottom },
+            React.createElement(Content, null, "pops bottom"))),
+    React.createElement(DemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Medium, topSectionProps: {
+                text: 'Sample text',
+            }, mainContent: ScrollableContent(), bottomSectionProps: {
+                iconButtons: [
+                    {
+                        icon: React.createElement(SystemIcons.StarOutlined, null),
+                        action: function () { console.log('star outlined clicked'); }
+                    },
+                    {
+                        icon: React.createElement(SystemIcons.Share, null),
+                        action: function () { console.log('share icon clicked'); }
+                    }
+                ]
+            }, position: Position.Left },
+            React.createElement(Content, null, "pops left"))),
+    React.createElement(DemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Medium, topSectionProps: {
+                text: 'Sample text',
+            }, mainContent: ScrollableContent(), bottomSectionProps: {
+                textButton: {
+                    label: 'View more',
+                    action: function () { console.log('123 loges'); },
+                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
+                }
+            }, position: Position.Right },
+            React.createElement(Content, null, "pops right"))),
+    React.createElement(DemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Medium, topSectionProps: {
+                text: 'Sample text',
+                note: 'Test note',
+            }, mainContent: ScrollableContent(), bottomSectionProps: {
+                textButton: {
+                    label: 'View more',
+                    action: function () { console.log('123 loges'); },
+                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
+                },
+                iconButtons: [
+                    {
+                        icon: React.createElement(SystemIcons.StarOutlined, null),
+                        action: function () { console.log('star outlined clicked'); }
+                    },
+                    {
+                        icon: React.createElement(SystemIcons.Share, null),
+                        action: function () { console.log('share icon clicked'); }
+                    }
+                ]
+            }, position: Position.Top },
+            React.createElement(Content, null, "pops top"))),
+    React.createElement(DemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Medium, mainContent: ScrollableContent(), bottomSectionProps: {
+                textButton: {
+                    label: 'View more',
+                    action: function () { console.log('123 loges'); },
+                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
+                },
+                iconButtons: [
+                    {
+                        icon: React.createElement(SystemIcons.StarOutlined, null),
+                        action: function () { console.log('star outlined clicked'); }
+                    },
+                    {
+                        icon: React.createElement(SystemIcons.Share, null),
+                        action: function () { console.log('share icon clicked'); }
+                    }
+                ]
+            }, position: Position.Right },
+            React.createElement(Content, { style: { 'flexDirection': 'column' } },
+                React.createElement("div", null, "pops right"),
+                " ",
+                React.createElement("div", null, "with no"),
+                " ",
+                React.createElement("div", null, "top")))),
+    React.createElement(DemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Medium, topSectionProps: {
+                text: 'Sample text',
+                note: 'Test note'
+            }, mainContent: ScrollableContent(), position: Position.Top },
+            React.createElement(Content, { style: { 'flexDirection': 'column' } },
+                React.createElement("div", null, "pops top"),
+                " ",
+                React.createElement("div", null, "with no"),
+                " ",
+                React.createElement("div", null, "bottom")))),
+    React.createElement(DemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Medium, mainContent: ScrollableContent(), position: Position.Left },
+            React.createElement(Content, { style: { 'flexDirection': 'column' } },
+                React.createElement("div", null, "pops left"),
+                " ",
+                React.createElement("div", null, "with only"),
+                " ",
+                React.createElement("div", null, "middle")))))); };
+export var LargePopoverDemo = function () { return (React.createElement(LargeFlexContainer, null,
+    React.createElement(LargeDemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Large, topSectionProps: {
+                text: 'Sample text',
+                note: 'Test note'
+            }, mainContent: DemoContent(), bottomSectionProps: {
+                textButton: {
+                    label: 'View more',
+                    action: function () { console.log('123 loges'); },
+                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
+                },
+                iconButtons: [
+                    {
+                        icon: React.createElement(SystemIcons.StarOutlined, null),
+                        action: function () { console.log('star outlined clicked'); }
+                    },
+                    {
+                        icon: React.createElement(SystemIcons.Share, null),
+                        action: function () { console.log('share icon clicked'); }
+                    }
+                ]
+            }, position: Position.Bottom },
+            React.createElement(Content, null, "pops bottom"))),
+    React.createElement(LargeDemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Large, topSectionProps: {
+                text: 'Sample text',
+            }, mainContent: DemoContent(), bottomSectionProps: {
+                iconButtons: [
+                    {
+                        icon: React.createElement(SystemIcons.StarOutlined, null),
+                        action: function () { console.log('star outlined clicked'); }
+                    },
+                    {
+                        icon: React.createElement(SystemIcons.Share, null),
+                        action: function () { console.log('share icon clicked'); }
+                    }
+                ]
+            }, position: Position.Left },
+            React.createElement(Content, null, "pops left"))),
+    React.createElement(LargeDemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Large, topSectionProps: {
+                text: 'Sample text',
+            }, mainContent: DemoContent(), bottomSectionProps: {
+                textButton: {
+                    label: 'View more',
+                    action: function () { console.log('123 loges'); },
+                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
+                }
+            }, position: Position.Right },
+            React.createElement(Content, null, "pops right"))),
+    React.createElement(LargeDemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Large, topSectionProps: {
+                text: 'Sample text',
+                note: 'Test note',
+            }, mainContent: DemoContent(), bottomSectionProps: {
+                textButton: {
+                    label: 'View more',
+                    action: function () { console.log('123 loges'); },
+                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
+                },
+                iconButtons: [
+                    {
+                        icon: React.createElement(SystemIcons.StarOutlined, null),
+                        action: function () { console.log('star outlined clicked'); }
+                    },
+                    {
+                        icon: React.createElement(SystemIcons.Share, null),
+                        action: function () { console.log('share icon clicked'); }
+                    }
+                ]
+            }, position: Position.Top },
+            React.createElement(Content, null, "pops top"))),
+    React.createElement(LargeDemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Large, mainContent: DemoContent(), bottomSectionProps: {
+                textButton: {
+                    label: 'View more',
+                    action: function () { console.log('123 loges'); },
+                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
+                },
+                iconButtons: [
+                    {
+                        icon: React.createElement(SystemIcons.StarOutlined, null),
+                        action: function () { console.log('star outlined clicked'); }
+                    },
+                    {
+                        icon: React.createElement(SystemIcons.Share, null),
+                        action: function () { console.log('share icon clicked'); }
+                    }
+                ]
+            }, position: Position.Right },
+            React.createElement(Content, { style: { 'flexDirection': 'column' } },
+                React.createElement("div", null, "pops right"),
+                " ",
+                React.createElement("div", null, "with no"),
+                " ",
+                React.createElement("div", null, "top")))),
+    React.createElement(LargeDemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Large, topSectionProps: {
+                text: 'Sample text',
+                note: 'Test note'
+            }, mainContent: DemoContent(), position: Position.Top },
+            React.createElement(Content, { style: { 'flexDirection': 'column' } },
+                React.createElement("div", null, "pops top"),
+                " ",
+                React.createElement("div", null, "with no"),
+                " ",
+                React.createElement("div", null, "bottom")))),
+    React.createElement(LargeDemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Large, mainContent: DemoContent(), position: Position.Left },
+            React.createElement(Content, { style: { 'flexDirection': 'column' } },
+                React.createElement("div", null, "pops left"),
+                " ",
+                React.createElement("div", null, "with only"),
+                " ",
+                React.createElement("div", null, "middle")))))); };
+export var LargePopoverScrollableDemo = function () { return (React.createElement(LargeFlexContainer, null,
+    React.createElement(LargeDemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Large, topSectionProps: {
+                text: 'Sample text',
+                note: 'Test note'
+            }, mainContent: ScrollableContent(), bottomSectionProps: {
+                textButton: {
+                    label: 'View more',
+                    action: function () { console.log('123 loges'); },
+                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
+                },
+                iconButtons: [
+                    {
+                        icon: React.createElement(SystemIcons.StarOutlined, null),
+                        action: function () { console.log('star outlined clicked'); }
+                    },
+                    {
+                        icon: React.createElement(SystemIcons.Share, null),
+                        action: function () { console.log('share icon clicked'); }
+                    }
+                ]
+            }, position: Position.Bottom },
+            React.createElement(Content, null, "pops bottom"))),
+    React.createElement(LargeDemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Large, topSectionProps: {
+                text: 'Sample text',
+            }, mainContent: ScrollableContent(), bottomSectionProps: {
+                iconButtons: [
+                    {
+                        icon: React.createElement(SystemIcons.StarOutlined, null),
+                        action: function () { console.log('star outlined clicked'); }
+                    },
+                    {
+                        icon: React.createElement(SystemIcons.Share, null),
+                        action: function () { console.log('share icon clicked'); }
+                    }
+                ]
+            }, position: Position.Left },
+            React.createElement(Content, null, "pops left"))),
+    React.createElement(LargeDemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Large, topSectionProps: {
+                text: 'Sample text',
+            }, mainContent: ScrollableContent(), bottomSectionProps: {
+                textButton: {
+                    label: 'View more',
+                    action: function () { console.log('123 loges'); },
+                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
+                }
+            }, position: Position.Right },
+            React.createElement(Content, null, "pops right"))),
+    React.createElement(LargeDemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Large, topSectionProps: {
+                text: 'Sample text',
+                note: 'Test note',
+            }, mainContent: ScrollableContent(), bottomSectionProps: {
+                textButton: {
+                    label: 'View more',
+                    action: function () { console.log('123 loges'); },
+                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
+                },
+                iconButtons: [
+                    {
+                        icon: React.createElement(SystemIcons.StarOutlined, null),
+                        action: function () { console.log('star outlined clicked'); }
+                    },
+                    {
+                        icon: React.createElement(SystemIcons.Share, null),
+                        action: function () { console.log('share icon clicked'); }
+                    }
+                ]
+            }, position: Position.Top },
+            React.createElement(Content, null, "pops top"))),
+    React.createElement(LargeDemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Large, mainContent: ScrollableContent(), bottomSectionProps: {
+                textButton: {
+                    label: 'View more',
+                    action: function () { console.log('123 loges'); },
+                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
+                },
+                iconButtons: [
+                    {
+                        icon: React.createElement(SystemIcons.StarOutlined, null),
+                        action: function () { console.log('star outlined clicked'); }
+                    },
+                    {
+                        icon: React.createElement(SystemIcons.Share, null),
+                        action: function () { console.log('share icon clicked'); }
+                    }
+                ]
+            }, position: Position.Right },
+            React.createElement(Content, { style: { 'flexDirection': 'column' } },
+                React.createElement("div", null, "pops right"),
+                " ",
+                React.createElement("div", null, "with no"),
+                " ",
+                React.createElement("div", null, "top")))),
+    React.createElement(LargeDemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Large, topSectionProps: {
+                text: 'Sample text',
+                note: 'Test note'
+            }, mainContent: ScrollableContent(), position: Position.Top },
+            React.createElement(Content, { style: { 'flexDirection': 'column' } },
+                React.createElement("div", null, "pops top"),
+                " ",
+                React.createElement("div", null, "with no"),
+                " ",
+                React.createElement("div", null, "bottom")))),
+    React.createElement(LargeDemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, showArrowPointer: true, size: Size.Large, mainContent: ScrollableContent(), position: Position.Left },
+            React.createElement(Content, { style: { 'flexDirection': 'column' } },
+                React.createElement("div", null, "pops left"),
+                " ",
+                React.createElement("div", null, "with only"),
+                " ",
+                React.createElement("div", null, "middle")))))); };
+export var SmallPopoverWithNoArrowPointerDemo = function () { return (React.createElement(SmallFlexContainer, { style: { width: '800px' } },
+    React.createElement(DemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, size: Size.Small, topSectionProps: {
+                text: 'Sample text',
+                note: 'Test note'
+            }, mainContent: DemoContent(), bottomSectionProps: {
+                textButton: {
+                    label: 'View more',
+                    action: function () { console.log('123 loges'); },
+                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
+                },
+                iconButtons: [
+                    {
+                        icon: React.createElement(SystemIcons.StarOutlined, null),
+                        action: function () { console.log('star outlined clicked'); }
+                    },
+                    {
+                        icon: React.createElement(SystemIcons.Share, null),
+                        action: function () { console.log('share icon clicked'); }
+                    }
+                ]
+            }, position: Position.Bottom },
+            React.createElement(Content, null, "pops bottom"))),
+    React.createElement(DemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, size: Size.Small, topSectionProps: {
+                text: 'Sample text',
+            }, mainContent: DemoContent(), bottomSectionProps: {
+                iconButtons: [
+                    {
+                        icon: React.createElement(SystemIcons.StarOutlined, null),
+                        action: function () { console.log('star outlined clicked'); }
+                    },
+                    {
+                        icon: React.createElement(SystemIcons.Share, null),
+                        action: function () { console.log('share icon clicked'); }
+                    }
+                ]
+            }, position: Position.Left },
+            React.createElement(Content, null, "pops left"))),
+    React.createElement(DemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, size: Size.Small, topSectionProps: {
+                text: 'Sample text',
+            }, mainContent: DemoContent(), bottomSectionProps: {
+                textButton: {
+                    label: 'View more',
+                    action: function () { console.log('123 loges'); },
+                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
+                }
+            }, position: Position.Right },
+            React.createElement(Content, null, "pops right"))),
+    React.createElement(DemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, size: Size.Small, topSectionProps: {
+                text: 'Sample text',
+                note: 'Test note',
+            }, mainContent: DemoContent(), bottomSectionProps: {
+                textButton: {
+                    label: 'View more',
+                    action: function () { console.log('123 loges'); },
+                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
+                },
+                iconButtons: [
+                    {
+                        icon: React.createElement(SystemIcons.StarOutlined, null),
+                        action: function () { console.log('star outlined clicked'); }
+                    },
+                    {
+                        icon: React.createElement(SystemIcons.Share, null),
+                        action: function () { console.log('share icon clicked'); }
+                    }
+                ]
+            }, position: Position.Top },
+            React.createElement(Content, null, "pops top"))),
+    React.createElement(DemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, size: Size.Small, mainContent: DemoContent(), bottomSectionProps: {
+                textButton: {
+                    label: 'View more',
+                    action: function () { console.log('123 loges'); },
+                    icon: React.createElement(SystemIcons.OpenNewWindow, null)
+                },
+                iconButtons: [
+                    {
+                        icon: React.createElement(SystemIcons.StarOutlined, null),
+                        action: function () { console.log('star outlined clicked'); }
+                    },
+                    {
+                        icon: React.createElement(SystemIcons.Share, null),
+                        action: function () { console.log('share icon clicked'); }
+                    }
+                ]
+            }, position: Position.Right },
+            React.createElement(Content, { style: { 'flexDirection': 'column' } },
+                React.createElement("div", null, "pops right"),
+                " ",
+                React.createElement("div", null, " with no"),
+                " ",
+                React.createElement("div", null, "top")))),
+    React.createElement(DemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, size: Size.Small, topSectionProps: {
+                text: 'Sample text',
+                note: 'Test note'
+            }, mainContent: DemoContent(), position: Position.Top },
+            React.createElement(Content, { style: { 'flexDirection': 'column' } },
+                React.createElement("div", null, "pops top"),
+                " ",
+                React.createElement("div", null, "with no"),
+                " ",
+                React.createElement("div", null, "bottom")))),
+    React.createElement(DemoContainer, null,
+        React.createElement(Popover, { showOnClick: false, size: Size.Small, mainContent: DemoContent(), position: Position.Left },
+            React.createElement(Content, { style: { 'flexDirection': 'column' } },
+                React.createElement("div", null, "pops left"),
+                " ",
+                React.createElement("div", null, "with only"),
+                " ",
+                React.createElement("div", null, "middle")))))); };
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;