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

package/dist/stories/GlobalNavigationBar.stories.js

@@ -0,0 +1,477 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React, { useState } from 'react';
+import { Size } from '../src/types';
+import { SystemIcons } from '../src/icons';
+import SiteFooter from '../src/Footer/SiteFooter';
+import GlobalNavigationBar from '../src/GlobalNavigationBar/GlobalNavigationBar';
+import SearchBar from '../src/InputFields/SearchBar';
+import { ProfileComponent } from '@laerdal/navigation';
+export default {
+    title: 'Components/GlobalNavigationBar',
+    component: GlobalNavigationBar,
+    decorators: [],
+};
+var desktopGroupItem = {
+    id: 'group',
+    label: 'Group Menu',
+    pinned: false,
+    type: 'desktopgroup',
+    items: [
+        {
+            id: 'submenu1id',
+            label: 'SubMenu 1',
+            to: '/submenu1',
+            type: 'item'
+        },
+        {
+            id: 'submenu2id',
+            label: 'SubMenu 2',
+            to: '/submenu2',
+            type: 'item'
+        },
+        {
+            id: 'group2',
+            label: 'Group Menu2',
+            pinned: false,
+            type: 'desktopgroup',
+            items: [
+                {
+                    id: 'submenu3id',
+                    label: 'SubMenu 3',
+                    to: '/submenu3',
+                    type: 'item'
+                },
+                {
+                    id: 'submenu4id',
+                    label: 'SubMenu 4',
+                    to: '/submenu4',
+                    type: 'item'
+                },
+                {
+                    id: 'group3',
+                    label: 'Group Menu3',
+                    pinned: false,
+                    type: 'desktopgroup',
+                    items: [
+                        {
+                            id: 'submenu5id',
+                            label: 'SubMenu 5',
+                            to: '/submenu5',
+                            type: 'item'
+                        },
+                        {
+                            id: 'submenu6id',
+                            label: 'SubMenu 6',
+                            to: '/submenu6',
+                            type: 'item'
+                        },
+                    ]
+                }
+            ]
+        },
+    ],
+};
+var mainNavigationOptions = [
+    {
+        id: 'overviewLink',
+        label: 'Overview',
+        to: '/',
+        exact: true,
+        type: 'item',
+        onClick: function () {
+            console.log('Clicked on overview page');
+        }
+    },
+    {
+        id: 'servicesLink',
+        label: 'Services',
+        to: '/services',
+        exact: true,
+        type: 'item',
+        onClick: function () {
+            console.log('Clicked on services page');
+        }
+    },
+];
+var secondaryNavigationOptions = [
+    {
+        label: 'Pinned Tab',
+        to: 'pinned',
+        pinned: true,
+    },
+];
+var headerActions = [
+    {
+        type: 'action',
+        action: function () {
+            console.log('search');
+        },
+        icon: React.createElement(SystemIcons.Search, null),
+    },
+    {
+        type: 'action',
+        action: function () {
+            console.log('notifications');
+        },
+        icon: React.createElement(SystemIcons.Notification, null),
+    },
+    {
+        type: 'action',
+        action: function () {
+            console.log('language');
+        },
+        icon: React.createElement(SystemIcons.Language, null),
+    },
+    {
+        type: 'action',
+        id: 'settingsButton',
+        action: function () {
+            console.log('settings');
+        },
+        icon: React.createElement(SystemIcons.GearSettings, null),
+    },
+    {
+        type: 'profile',
+        id: 'profileButton',
+    },
+    {
+        type: 'action',
+        action: function () {
+            console.log('shop');
+        },
+        icon: React.createElement(SystemIcons.ShoppingCart, null),
+    },
+    {
+        type: 'switcher',
+        action: function () {
+            // @ts-ignore
+            window.portalNav.toggle();
+            console.log('switcher');
+        },
+    },
+];
+var notifications = [
+    {
+        label: 'First',
+        note: 'This is a note',
+        to: '/n7',
+    },
+    {
+        label: 'Second',
+        note: 'This is a note',
+        to: '/n6',
+    },
+    {
+        label: 'Third',
+        note: 'This is a note',
+        to: '/n5',
+    },
+    {
+        label: 'Fourth',
+        note: 'This is a note',
+        to: '/n4',
+    },
+    {
+        label: 'Fifth',
+        note: 'This is a note',
+        to: '/n3',
+    },
+    {
+        label: 'Sixth',
+        note: 'This is a note',
+        to: '/n2',
+    },
+    {
+        label: 'Seventh',
+        note: 'This is a note',
+        to: '/n1',
+    },
+];
+var mobileActions = [
+    {
+        type: 'submenu',
+        menu: {
+            type: 'group',
+            label: 'Notifications',
+            items: notifications,
+        },
+        icon: React.createElement(SystemIcons.Notification, null),
+    },
+    {
+        type: 'action',
+        action: function (e) {
+            console.log('language');
+            return true;
+        },
+        icon: React.createElement(SystemIcons.Language, null),
+    },
+    {
+        type: 'profile',
+        placement: 'left',
+    },
+    {
+        type: 'switcher',
+        action: function () {
+            // @ts-ignore
+            window.portalNav.toggle();
+            console.log('switcher');
+        },
+    },
+];
+var mobileStickyNav = [
+    {
+        label: 'Help',
+        to: '/help',
+        pinned: true,
+        icon: React.createElement(SystemIcons.Help, null),
+    },
+    {
+        label: 'Support',
+        to: '/support',
+        pinned: true,
+        icon: React.createElement(SystemIcons.Support, null),
+    },
+];
+var accountSection = [
+    { label: 'My Account', to: '/account/myaccount', icon: React.createElement(SystemIcons.User, null), external: false },
+    { label: 'Language & Region', to: '/account/language', icon: React.createElement(SystemIcons.Language, null), external: false },
+    { label: 'Settings', to: '/account/settings', icon: React.createElement(SystemIcons.GearSettings, null), external: false },
+];
+var organizationSection = [
+    { label: 'Organization details', to: '/organization/myorganization', icon: React.createElement(SystemIcons.Institute, null), external: false },
+    { label: 'People', to: '/organization/user-management', icon: React.createElement(SystemIcons.Team, null), external: false },
+];
+var supportSection = [
+    { label: 'Help', to: 'https://laerdal.force.com/HelpCenter', icon: React.createElement(SystemIcons.Help, null), external: true, pinned: true },
+    {
+        label: 'Support',
+        to: 'https://www.laerdal.com/support/',
+        icon: React.createElement(SystemIcons.Support, null),
+        external: true,
+        pinned: true,
+    },
+];
+var mobileNavigationSubGroup = {
+    type: 'group',
+    items: __spreadArray(__spreadArray([], organizationSection, true), supportSection, true),
+    note: 'This is a note',
+    header: {
+        header: 'Title',
+        note: 'Note Text',
+    },
+    footer: {
+        header: 'Title',
+        note: 'Note text',
+        link: {
+            label: 'Link text',
+            href: '#',
+            external: false,
+        },
+    },
+    action: {
+        label: 'Sign out',
+        action: function () {
+            console.log('Sign out');
+        },
+        icon: React.createElement(SystemIcons.Logout, null),
+    },
+    label: 'Organization',
+    icon: React.createElement(SystemIcons.Institute, null),
+};
+var bottomLinks = [
+    { label: 'Link 1', to: '/', target: '_self' },
+    { label: 'Link 2', to: '/', target: '_self' },
+    { label: 'Link 3', to: '/' },
+    { label: 'Link 4', to: '/' },
+    { label: 'Link 5', to: '/' },
+];
+export var GlobalNavBarHomeDefaultDemo = function () {
+    var _a = useState([]), buttons = _a[0], setButtons = _a[1];
+    setTimeout(function () { return setButtons(headerActions); }, 1000);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(GlobalNavigationBar, { name: "Some very nice and long long long name", logo: {
+                showBetaTag: true,
+                to: '/main',
+            }, desktop: {
+                buttons: buttons,
+                items: __spreadArray(__spreadArray([], mainNavigationOptions, true), [desktopGroupItem], false),
+            }, profile: {
+                label: 'Account',
+                user: {
+                    firstName: 'John',
+                    lastName: 'Doe',
+                    email: 'emsadasdasdasdasdasdasdasdasdail@email.com',
+                    link: {
+                        label: 'Manage your account',
+                        icon: React.createElement(SystemIcons.OpenNewWindow, null),
+                        href: '/account/myaccount',
+                    },
+                },
+                signOut: {
+                    label: 'Sign out',
+                    action: function () {
+                        console.log('Sign out');
+                    },
+                },
+                sections: [
+                    {
+                        items: __spreadArray([], accountSection, true),
+                    },
+                    {
+                        label: 'Laerdal Medical AS',
+                        items: __spreadArray([], organizationSection, true),
+                    },
+                    {
+                        items: __spreadArray([], supportSection, true),
+                        pinned: true,
+                    },
+                ],
+            }, mobile: {
+                buttons: mobileActions,
+                items: __spreadArray(__spreadArray(__spreadArray([], mainNavigationOptions, true), [mobileNavigationSubGroup], false), mobileStickyNav, true),
+            }, isAuthenticated: true }),
+        React.createElement(SiteFooter, { id: "NewFooterWithoutNav", sitename: "Test", bottomLinks: bottomLinks, copyrightText: "Copyright \u00A9 2021 Laerdal Medical. All Rights Reserved.", includeNewsletterAndSocialSection: false, toTopText: "TOP" })));
+};
+export var GlobalNavBarFixedWidthDemo = function () { return (React.createElement(React.Fragment, null,
+    React.createElement(GlobalNavigationBar, { name: "Home", logo: {
+            showBetaTag: true,
+            to: '/main'
+        }, desktop: {
+            buttons: headerActions,
+            items: __spreadArray(__spreadArray([], mainNavigationOptions, true), [desktopGroupItem], false),
+        }, profile: {
+            label: 'Account',
+            user: {
+                firstName: 'John',
+                lastName: 'Doe',
+                email: 'dasdasdasdasdasdasdasdasdemail@email.com',
+            },
+            signOut: {
+                label: 'Sign out',
+                action: function () {
+                    console.log('Sign out');
+                },
+            },
+            sections: [
+                {
+                    items: __spreadArray([], accountSection, true),
+                },
+                {
+                    label: 'Laerdal Medical AS',
+                    items: __spreadArray([], organizationSection, true),
+                },
+                {
+                    items: __spreadArray([], supportSection, true),
+                    pinned: true,
+                },
+            ],
+        }, mobile: {
+            buttons: mobileActions,
+            items: __spreadArray(__spreadArray([], mainNavigationOptions, true), mobileStickyNav, true),
+        }, isAuthenticated: true, useMaxWidth: true, maxWidth: 1152 }),
+    React.createElement("div", { style: { display: 'flex', flex: '1' } }),
+    React.createElement(SiteFooter, { id: "NewFooterWithoutNav", sitename: "Test", bottomLinks: bottomLinks, copyrightText: "Copyright \u00A9 2021 Laerdal Medical. All Rights Reserved.", includeNewsletterAndSocialSection: false, toTopText: "TOP", useMaxWidth: true, maxWidth: 1152 }))); };
+export var GlobalNavBarSecondaryNavItemsDemo = function () { return (React.createElement(React.Fragment, null,
+    React.createElement(GlobalNavigationBar, { name: "Home", logo: {
+            showBetaTag: true,
+            to: '/main',
+        }, desktop: {
+            buttons: headerActions,
+            items: __spreadArray(__spreadArray([], mainNavigationOptions, true), secondaryNavigationOptions, true),
+            action: {
+                label: 'Sign in',
+                action: function () {
+                    console.log('Sign in');
+                },
+            },
+        }, mobile: {
+            label: 'Sign in',
+            buttons: mobileActions,
+            items: __spreadArray(__spreadArray([], mainNavigationOptions, true), mobileStickyNav, true),
+        }, isAuthenticated: true }),
+    React.createElement("div", { style: { display: 'flex', flex: '1' } }),
+    React.createElement(SiteFooter, { id: "NewFooterWithoutNav", sitename: "Test", bottomLinks: bottomLinks, copyrightText: "Copyright \u00A9 2021 Laerdal Medical. All Rights Reserved.", includeNewsletterAndSocialSection: false, toTopText: "TOP" }))); };
+var CustomSubMenu = function () {
+    return (React.createElement("div", { style: { display: 'flex', padding: '8px', flexDirection: 'column' } },
+        React.createElement(SearchBar, { id: '1', placeholder: 'Type to search', size: Size.Small, setSearchTerm: function () { }, enterSearch: function () { }, removeSearch: function () { } })));
+};
+export var GlobalNavBarHomeWithProfileComponentDemo = function () { return (React.createElement(React.Fragment, null,
+    React.createElement(GlobalNavigationBar, { name: "Home", logo: {
+            showBetaTag: true,
+            to: '/main',
+        }, desktop: {
+            buttons: headerActions,
+            items: __spreadArray([], mainNavigationOptions, true),
+        }, profile: {
+            label: 'Account',
+            user: {
+                firstName: 'John',
+                lastName: 'Doe',
+                email: 'dasdasdasdasdasdasdasdasdemail@email.com',
+            },
+            signOut: {
+                label: 'Sign out',
+                action: function () {
+                    console.log('Sign out');
+                },
+            },
+            sections: [
+                {
+                    items: __spreadArray([], accountSection, true),
+                },
+                {
+                    label: 'Laerdal Medical AS',
+                    items: __spreadArray([], organizationSection, true),
+                },
+                {
+                    items: __spreadArray([], supportSection, true),
+                    pinned: true,
+                },
+            ],
+        }, mobile: {
+            buttons: mobileActions,
+            items: __spreadArray(__spreadArray([], mainNavigationOptions, true), mobileStickyNav, true),
+        }, isAuthenticated: true, border: false, useMaxWidth: false, profileComponent: React.createElement(ProfileComponent, { organizationName: 'Organization', user: {
+                firstName: "John",
+                lastName: "Doe",
+                email: "john.doe@mail.com"
+            }, customContent: {
+                title: 'Account',
+                items: [
+                    {
+                        icon: React.createElement(SystemIcons.AddUser, null),
+                        label: 'SystemIcons',
+                        onClick: function () {
+                            console.log('SystemIcons');
+                        },
+                    },
+                    {
+                        icon: React.createElement(SystemIcons.Add, null),
+                        label: 'SystemIcon string',
+                        onClick: function () {
+                            console.log('SystemIcons string');
+                        },
+                    },
+                    {
+                        icon: React.createElement(SystemIcons.Add, null),
+                        label: 'ContentIcon - Add',
+                        onClick: function () {
+                            console.log('ContentIcon - Add');
+                        },
+                    },
+                ],
+            }, 
+            //@ts-ignore
+            env: 'dev', locale: 'en', onSignOut: function () {
+                console.log('onSignOut');
+            }, hideLaguage: false }) }),
+    React.createElement("div", { style: { display: 'flex', flex: '1' } }),
+    React.createElement(SiteFooter, { id: "NewFooterWithoutNav", sitename: "Test", bottomLinks: bottomLinks, copyrightText: "Copyright \u00A9 2021 Laerdal Medical. All Rights Reserved.", includeNewsletterAndSocialSection: false, toTopText: "TOP" }))); };

package/dist/stories/HorizontalTabs.stories.d.ts

@@ -3,7 +3,7 @@ import HorizontalTabs from '../src/Tabs/HorizontalTabs';
 import { Meta, StoryObj } from "@storybook/react/*";
 declare const meta: Meta<typeof HorizontalTabs>;
 export default meta;
-type Story = StoryObj<typeof HorizontalTabs>;
+declare type Story = StoryObj<typeof HorizontalTabs>;
 export declare const Primary: Story;
 export declare const Default: () => React.JSX.Element;
 export declare const Floating: () => React.JSX.Element;

package/dist/stories/HorizontalTabs.stories.js

@@ -0,0 +1,161 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import HorizontalTabs from '../src/Tabs/HorizontalTabs';
+import { Size } from '../src/types';
+import styled from 'styled-components';
+var meta = {
+    title: 'Components/Horizontal Tabs',
+    component: HorizontalTabs,
+    decorators: [],
+    tags: ['autodocs'],
+    parameters: {},
+};
+export default meta;
+var tabs = [
+    {
+        value: 'Institutions',
+        selected: false,
+        to: 'institutions',
+        id: 'institutions-tab'
+    },
+    {
+        value: 'Departments',
+        selected: true,
+        to: 'departments',
+        id: 'departments-tab'
+    },
+    {
+        value: 'Wards',
+        selected: false,
+        to: 'wards',
+        id: 'wards-tab'
+    },
+    {
+        value: 'Jobs',
+        selected: false,
+        to: 'jobs',
+        id: 'jobs-tab'
+    },
+    {
+        value: 'Admin Panel',
+        selected: false,
+        disabled: true,
+        to: 'admin panel',
+        id: 'admin-panel-tab'
+    },
+];
+var cloneTabs = function () { return tabs.map(function (x) { return (__assign({}, x)); }); };
+export var Primary = {
+    args: {
+        tabs: cloneTabs(),
+        size: Size.Medium
+    },
+};
+var TabContent = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width:100%;\n  height:200px;\n\n"], ["\n  width:100%;\n  height:200px;\n\n"])));
+export var Default = function () {
+    var _a = React.useState("departments"), curTab = _a[0], setCurTab = _a[1];
+    var memoTabs = React.useMemo(function () { return cloneTabs(); }, []);
+    return React.createElement(React.Fragment, null,
+        React.createElement("p", null,
+            React.createElement("b", null, "ARIA (Accessibility Rich Internet Aplication) NOTE:"),
+            " ",
+            React.createElement("br", null),
+            "Developers need to make sure that tab content will be focused after 'tab' is pressed while HorizontalTabs container is in focused state. ",
+            React.createElement("br", null),
+            "In other words need to make sure that in 'tabindex' order tabcontent is located next to HorizontalTabs."),
+        React.createElement("h5", null, "Extra Small Horizontal Tabs"),
+        React.createElement(HorizontalTabs, { size: Size.XSmall, tabs: cloneTabs(), onTabChange: function (to) { return console.log("Navigate to ".concat(to)); } }),
+        React.createElement("h5", null, "Small Horizontal Tabs"),
+        React.createElement(HorizontalTabs, { size: Size.Small, tabs: cloneTabs(), onTabChange: function (to) { return console.log("Navigate to ".concat(to)); } }),
+        React.createElement("h5", null, "Medium Horizontal Tabs"),
+        React.createElement(HorizontalTabs, { size: Size.Medium, tabs: cloneTabs(), onTabChange: function (to) { return console.log("Navigate to ".concat(to)); } }),
+        React.createElement("h5", null, "Large Horizontal Tabs"),
+        React.createElement(HorizontalTabs, { size: Size.Large, tabs: cloneTabs(), onTabChange: function (to) { return console.log("Navigate to ".concat(to)); } }),
+        React.createElement("h5", null, "Full Width Extra Small Horizontal Tabs"),
+        React.createElement(HorizontalTabs, { size: Size.XSmall, fullWidth: true, tabs: cloneTabs(), onTabChange: function (to) { return console.log("Navigate to ".concat(to)); } }),
+        React.createElement("h5", null, "Full Width Small Horizontal Tabs"),
+        React.createElement(HorizontalTabs, { size: Size.Small, fullWidth: true, tabs: cloneTabs(), onTabChange: function (to) { return console.log("Navigate to ".concat(to)); } }),
+        React.createElement("h5", null, "Full Width Medium Horizontal Tabs"),
+        React.createElement(HorizontalTabs, { size: Size.Medium, fullWidth: true, tabs: cloneTabs(), onTabChange: function (to) { return console.log("Navigate to ".concat(to)); } }),
+        React.createElement("h5", null, "Full Width Large Horizontal Tabs"),
+        React.createElement(HorizontalTabs, { size: Size.Large, fullWidth: true, tabs: cloneTabs(), onTabChange: function (to) { return console.log("Navigate to ".concat(to)); } }),
+        React.createElement("h5", null, "Demo with tab panels"),
+        React.createElement("div", null,
+            React.createElement(HorizontalTabs, { size: Size.Large, fullWidth: true, tabs: memoTabs, onTabChange: function (to) { return setCurTab(to); } }),
+            React.createElement(TabContent, { "aria-labelledby": "institutions-tab", tabIndex: 0, style: { display: curTab != "institutions" ? "none" : "block" } },
+                React.createElement("p", null, "Tab institutions. "),
+                React.createElement("p", null, "Tab institutions content.")),
+            React.createElement(TabContent, { "aria-labelledby": "departments-tab", tabIndex: 0, style: { display: curTab != "departments" ? "none" : "block" } },
+                React.createElement("p", null, "Tab departments. "),
+                React.createElement("p", null, "Tab departments content.")),
+            React.createElement(TabContent, { "aria-labelledby": "wards-tab", tabIndex: 0, style: { display: curTab != "wards" ? "none" : "block" } },
+                React.createElement("p", null, "Tab wards. "),
+                React.createElement("p", null, "Tab wards content.")),
+            React.createElement(TabContent, { "aria-labelledby": "jobs-tab", tabIndex: 0, style: { display: curTab != "jobs" ? "none" : "block" } },
+                React.createElement("p", null, "Tab jobs. "),
+                React.createElement("p", null, "Tab jobs content.")),
+            React.createElement(TabContent, { "aria-labelledby": "admin-panel-tab", tabIndex: 0, style: { display: curTab != "admin panel" ? "none" : "block" } },
+                React.createElement("p", null, "Tab admin panel. "),
+                React.createElement("p", null, "Tab admin panel content."))));
+};
+export var Floating = function () {
+    var _a = React.useState("departments"), curTab = _a[0], setCurTab = _a[1];
+    var memoTabs = React.useMemo(function () { return cloneTabs(); }, []);
+    return React.createElement("div", { style: { background: '#DEDADA' } },
+        React.createElement("p", null,
+            React.createElement("b", null, "ARIA (Accessibility Rich Internet Aplication) NOTE:"),
+            " ",
+            React.createElement("br", null),
+            "Developers need to make sure that tab content will be focused after 'tab' is pressed while HorizontalTabs container is in focused state. ",
+            React.createElement("br", null),
+            "In other words need to make sure that in 'tabindex' order tabcontent is located next to HorizontalTabs."),
+        React.createElement("h5", null, "Extra Small Horizontal Tabs"),
+        React.createElement(HorizontalTabs, { size: Size.XSmall, tabs: cloneTabs(), variant: 'floating', onTabChange: function (to) { return console.log("Navigate to ".concat(to)); } }),
+        React.createElement("h5", null, "Small Horizontal Tabs"),
+        React.createElement(HorizontalTabs, { size: Size.Small, tabs: cloneTabs(), variant: 'floating', onTabChange: function (to) { return console.log("Navigate to ".concat(to)); } }),
+        React.createElement("h5", null, "Medium Horizontal Tabs"),
+        React.createElement(HorizontalTabs, { size: Size.Medium, tabs: cloneTabs(), variant: 'floating', onTabChange: function (to) { return console.log("Navigate to ".concat(to)); } }),
+        React.createElement("h5", null, "Large Horizontal Tabs"),
+        React.createElement(HorizontalTabs, { size: Size.Large, tabs: cloneTabs(), variant: 'floating', onTabChange: function (to) { return console.log("Navigate to ".concat(to)); } }),
+        React.createElement("h5", null, "Full Width Extra Small Horizontal Tabs"),
+        React.createElement(HorizontalTabs, { size: Size.XSmall, fullWidth: true, tabs: cloneTabs(), variant: 'floating', onTabChange: function (to) { return console.log("Navigate to ".concat(to)); } }),
+        React.createElement("h5", null, "Full Width Small Horizontal Tabs"),
+        React.createElement(HorizontalTabs, { size: Size.Small, fullWidth: true, tabs: cloneTabs(), variant: 'floating', onTabChange: function (to) { return console.log("Navigate to ".concat(to)); } }),
+        React.createElement("h5", null, "Full Width Medium Horizontal Tabs"),
+        React.createElement(HorizontalTabs, { size: Size.Medium, fullWidth: true, tabs: cloneTabs(), variant: 'floating', onTabChange: function (to) { return console.log("Navigate to ".concat(to)); } }),
+        React.createElement("h5", null, "Full Width Large Horizontal Tabs"),
+        React.createElement(HorizontalTabs, { size: Size.Large, fullWidth: true, tabs: cloneTabs(), variant: 'floating', onTabChange: function (to) { return console.log("Navigate to ".concat(to)); } }),
+        React.createElement("h5", null, "Demo with tab panels"),
+        React.createElement("div", null,
+            React.createElement(HorizontalTabs, { size: Size.Large, fullWidth: true, tabs: memoTabs, variant: 'floating', onTabChange: function (to) { return setCurTab(to); } }),
+            React.createElement(TabContent, { "aria-labelledby": "institutions-tab", tabIndex: 0, style: { display: curTab != "institutions" ? "none" : "block" } },
+                React.createElement("p", null, "Tab institutions. "),
+                React.createElement("p", null, "Tab institutions content.")),
+            React.createElement(TabContent, { "aria-labelledby": "departments-tab", tabIndex: 0, style: { display: curTab != "departments" ? "none" : "block" } },
+                React.createElement("p", null, "Tab departments. "),
+                React.createElement("p", null, "Tab departments content.")),
+            React.createElement(TabContent, { "aria-labelledby": "wards-tab", tabIndex: 0, style: { display: curTab != "wards" ? "none" : "block" } },
+                React.createElement("p", null, "Tab wards. "),
+                React.createElement("p", null, "Tab wards content.")),
+            React.createElement(TabContent, { "aria-labelledby": "jobs-tab", tabIndex: 0, style: { display: curTab != "jobs" ? "none" : "block" } },
+                React.createElement("p", null, "Tab jobs. "),
+                React.createElement("p", null, "Tab jobs content.")),
+            React.createElement(TabContent, { "aria-labelledby": "admin-panel-tab", tabIndex: 0, style: { display: curTab != "admin panel" ? "none" : "block" } },
+                React.createElement("p", null, "Tab admin panel. "),
+                React.createElement("p", null, "Tab admin panel content."))));
+};
+var templateObject_1;