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

package/dist/stories/Tables.stories.js

@@ -0,0 +1,436 @@
+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 { SystemIcons, Table, Button, ActionChip, Size, Tag } from '../src/index';
+export default {
+    title: 'Components/Table',
+    component: Table,
+    decorators: [],
+    parameter: {},
+};
+var columns = [
+    {
+        key: 'text',
+        name: 'Text Column',
+        shortenText: true,
+        type: 'text',
+    },
+    {
+        key: 'textWithIcon',
+        name: 'Text Column With Icon and Note',
+        noteKey: 'noteText',
+        shortenText: true,
+        width: 160,
+        type: 'text',
+        icon: React.createElement(SystemIcons.Accessibility, null),
+    },
+    {
+        key: 'number',
+        name: 'Number Column',
+        type: 'number',
+        justify: 'right',
+    },
+    {
+        key: 'boolean',
+        name: 'Boolean Column',
+        type: 'boolean',
+        action: function (row, e) {
+            console.log(row);
+        },
+    },
+    {
+        key: 'link',
+        name: 'Link Column',
+        type: 'link',
+        action: function (row, e) {
+            console.log(row);
+        },
+    },
+    {
+        key: 'id',
+        name: 'Icon Button Column',
+        type: 'icon',
+        width: 68,
+        icon: React.createElement(SystemIcons.OpenNewWindow, null),
+        action: function (row, e) {
+            console.log(row);
+        },
+        additionalProps: {
+            tooltip: { label: 'Tooltip' },
+        },
+    },
+];
+var filterColumns = [
+    {
+        key: 'text',
+        name: 'Text Column',
+        sortable: true,
+        type: 'text',
+        filterValue: 'three',
+    },
+    {
+        key: 'textWithIcon',
+        name: 'Text Column With Icon',
+        shortenText: true,
+        sortable: true,
+        type: 'text',
+        icon: React.createElement(SystemIcons.Accessibility, null),
+    },
+    {
+        key: 'number',
+        name: 'Number Column',
+        type: 'number',
+        justify: 'right',
+        sortable: true,
+    },
+    {
+        key: 'boolean',
+        name: 'Boolean Column',
+        sortable: true,
+        type: 'boolean',
+        action: function (row, e) {
+            console.log(row);
+        },
+    },
+    {
+        key: 'link',
+        name: 'Link Column',
+        type: 'link',
+        action: function (row, e) {
+            console.log(row);
+        },
+    },
+    {
+        key: 'id',
+        name: 'Icon Button Column',
+        type: 'icon',
+        icon: React.createElement(SystemIcons.OpenNewWindow, null),
+        action: function (row, e) {
+            console.log(row);
+        },
+        additionalProps: {
+            tooltip: { label: 'Tooltip' },
+        },
+    },
+];
+var sortableColumns = [
+    {
+        key: 'text',
+        name: 'Text Column',
+        sortable: true,
+        type: 'text',
+    },
+    {
+        key: 'textWithIcon',
+        name: 'Text Column With Icon',
+        shortenText: true,
+        sortable: true,
+        type: 'text',
+        icon: React.createElement(SystemIcons.Accessibility, null),
+    },
+    {
+        key: 'number',
+        name: 'Number Column',
+        type: 'number',
+        justify: 'right',
+        sortable: true,
+        colorFn: function (row) {
+            if (row.number % 2 === 0) {
+                return undefined;
+            }
+            else if (row.number % 2 === 1) {
+                return 'red';
+            }
+        },
+    },
+    {
+        key: 'boolean',
+        name: 'Boolean Column',
+        sortable: true,
+        type: 'boolean',
+        action: function (row, e) {
+            console.log(row);
+        },
+    },
+    {
+        key: 'link',
+        name: 'Link Column',
+        type: 'link',
+        action: function (row, e) {
+            console.log(row);
+        },
+    },
+    {
+        key: 'id',
+        name: 'Icon Button Column',
+        type: 'icon',
+        icon: React.createElement(SystemIcons.OpenNewWindow, null),
+        action: function (row, e) {
+            console.log(row);
+        },
+        additionalProps: {
+            tooltip: { label: 'Tooltip' },
+        },
+    },
+];
+var rows = [
+    {
+        id: 'test-row-1',
+        text: 'row one text ',
+        textWithIcon: 'row one text with icon',
+        number: 1,
+        noteText: 'Some small note',
+        boolean: true,
+        link: 'link',
+    },
+    {
+        id: 'test-row-2',
+        text: 'row two text ',
+        textWithIcon: 'row two text sdfk k  fdaklkl fdasd lk afsdlk afsdkdl klfasdd lkafsdlk afsdj jlkafddsd ljkfas with icon',
+        number: 2,
+        noteText: 'Some super small note',
+        boolean: false,
+        link: 'link',
+    },
+    {
+        id: 'test-row-3',
+        text: 'row three text ',
+        textWithIcon: 'row three text with icon aaaaaaaaaaa aaaaaaa aaaaaa aaaaaaaaaa aaaaaaaaa aaaaaaa aaaaaaaaaaa aaaaaaaa',
+        noteText: 'Some super small note 3 aaaaaa aaaaaa aaaaaaa aaaaaa aaaaaaaaaa aaaaaa aaaaaa aaaa aaaa aaaa aaaa aa aaaa',
+        number: 3,
+        boolean: true,
+        link: 'link',
+    },
+    {
+        id: 'test-row-4',
+        text: 'row four text ',
+        textWithIcon: 'row four text with icon',
+        number: 4,
+        boolean: true,
+        link: 'link',
+    },
+    {
+        id: 'test-row-5',
+        text: 'row five text ',
+        textWithIcon: 'row five text with icon',
+        number: 5,
+        boolean: false,
+        link: 'link',
+    },
+    {
+        id: 'test-row-6',
+        text: 'row six text ',
+        textWithIcon: 'row six text with icon',
+        number: 6,
+        boolean: true,
+        link: 'link',
+    },
+    {
+        id: 'test-row-7',
+        text: 'row seven text ',
+        textWithIcon: 'row seven text with icon',
+        number: 7,
+        boolean: true,
+        link: 'link',
+    },
+    {
+        id: 'test-row-8',
+        text: 'row eight text ',
+        textWithIcon: 'row eight text with icon',
+        number: 8,
+        boolean: false,
+        link: 'link',
+    },
+    {
+        id: 'test-row-9',
+        text: 'row nine text ',
+        textWithIcon: 'row nine text with icon',
+        number: 9,
+        boolean: true,
+        link: 'link',
+    },
+    {
+        id: 'test-row-10',
+        text: 'row ten text ',
+        textWithIcon: 'row ten text with icon',
+        number: 10,
+        boolean: true,
+        link: 'link',
+    },
+    {
+        id: 'test-row-11',
+        text: 'row eleven text ',
+        textWithIcon: 'row eleven text with icon',
+        number: 11,
+        boolean: true,
+        link: 'link',
+    },
+    {
+        id: 'test-row-12',
+        text: 'row twelve text ',
+        textWithIcon: 'row twelve text with icon',
+        number: 12,
+        boolean: false,
+        link: 'link',
+    },
+];
+var menu = {
+    onClick: function (value) { return console.log(value); },
+    items: [{ value: 'Menu Item', displayLabel: 'Menu Item' }],
+};
+export var TableDemo = function () { return (React.createElement(React.Fragment, null,
+    React.createElement("h6", null, "Table with header row"),
+    React.createElement(Table, { title: "Title", columns: columns, menu: menu, border: true, rows: rows }),
+    React.createElement("h6", null, "Table without header row"),
+    React.createElement(Table, { columns: columns, rows: rows, border: true }),
+    React.createElement("h6", null, "Table with filters on the first column"),
+    React.createElement(Table, { title: "Filtered Table", columns: filterColumns, rows: rows }),
+    React.createElement("h6", null, "Table with no rows at all"),
+    React.createElement(Table, { title: "Filtered Table", columns: columns, rows: [] }))); };
+export var SortableTableDemo = function () {
+    var _a = useState({
+        column: 'number',
+        direction: 'desc',
+        allowClearingSort: false,
+    }), sortProp = _a[0], setSortProp = _a[1];
+    var resetSorting = function () {
+        setSortProp({
+            column: 'number',
+            direction: 'desc',
+            allowClearingSort: false,
+        });
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { onClick: resetSorting }, "Force sort"),
+        React.createElement(Table, { title: "Sortable Table", columns: sortableColumns, rows: rows, sortProps: sortProp, layout: 'fixed' })));
+};
+export var Sortable3StatesTableDemo = function () {
+    var sortProp = {
+        allowClearingSort: true,
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Table, { title: "Allow clearnig sort of column (just click on the header couple times)", columns: sortableColumns, rows: rows, sortProps: sortProp, layout: 'fixed' })));
+};
+export var TableWithLoadingIndicatorDemo = function () { return (React.createElement(React.Fragment, null,
+    React.createElement("h6", null, "Sortable Table"),
+    React.createElement(Table, { title: "Filtered Table", columns: filterColumns, rows: [], showLoadingIndicator: true }),
+    React.createElement("h6", null, "Sortable Table"),
+    React.createElement(Table, { title: "Sortable Table", columns: sortableColumns, rows: rows, selectable: true, multiSelect: true, menu: menu, showLoadingIndicator: true }))); };
+export var TableSelectable = function () { return (React.createElement(React.Fragment, null,
+    React.createElement(Table, { title: "Selectable Table", columns: sortableColumns, rows: rows, selectable: true, onSelectionChange: function (v) { return console.log(v); } }),
+    React.createElement(Table, { title: "Multi Select Table", columns: sortableColumns, rows: rows, selectable: true, multiSelect: true, keyExpr: 'id', onSelectionChange: function (v) { return console.log(v); } }))); };
+export var TableAccordion = function () { return (React.createElement(React.Fragment, null,
+    React.createElement(Table, { title: "Accordion Table", columns: sortableColumns, rows: rows.slice(0, 5), accordion: true, collapsedRows: 3 }))); };
+export var TableScrollable = function () { return (React.createElement(React.Fragment, null,
+    React.createElement(Table, { title: "Filtered Table", columns: __spreadArray(__spreadArray([], sortableColumns, true), sortableColumns, true), rows: rows }))); };
+export var TableWithCustomContent = function () {
+    var renderCustomRowContent = function (row, key) {
+        switch (key) {
+            case 'customStatusColumn1':
+                return row.customStatusText ? (React.createElement("div", { style: { maxWidth: '160px' } },
+                    React.createElement(Tag, { label: row.customStatusText, variant: row.customStatusVariant, icon: row.customStatusVariant === 'positive' ? React.createElement(SystemIcons.CheckMark, null) : row.customStatusVariant === 'critical' ? React.createElement(SystemIcons.Time, null) : undefined }))) : null;
+            case 'customChipColumn':
+                return row.customChip ? React.createElement(ActionChip, { text: row.customChip, size: Size.Small, icon: row.customChipVariant === 'invalid' ? 'Attention' : 'Mail' }) : React.createElement(React.Fragment, null);
+            default:
+                return null;
+        }
+    };
+    var columnsWithCustomContent = [
+        {
+            key: 'booleanColumn',
+            name: 'Boolean Column',
+            sortable: false,
+            type: 'boolean',
+            action: function (row, e) {
+                console.log(row);
+            },
+        },
+        {
+            key: 'textColumn1',
+            name: 'Text Column 1',
+            sortable: true,
+            type: 'text',
+        },
+        {
+            key: 'textColumn2',
+            name: 'Text Column 2',
+            sortable: true,
+            type: 'text',
+        },
+        {
+            key: 'textWithIcon',
+            name: 'Text Column With Icon',
+            shortenText: true,
+            sortable: true,
+            type: 'text',
+            icon: React.createElement(SystemIcons.Accessibility, null),
+        },
+        {
+            key: 'customStatusColumn1',
+            name: 'Custom Status',
+            sortable: false,
+            type: 'custom',
+            customContent: renderCustomRowContent,
+        },
+        {
+            key: 'customChipColumn',
+            name: 'Custom Action',
+            sortable: false,
+            type: 'custom',
+            customContent: renderCustomRowContent,
+        },
+    ];
+    var rowsCustomContent = [
+        {
+            id: 'test-row-1',
+            booleanColumn: true,
+            textColumn1: 'row one text',
+            textColumn2: 'row one text 2',
+            textWithIcon: 'row one text with icon',
+            customStatusText: 'Awaiting your reply',
+            customStatusVariant: 'warning',
+            customChip: 'Send email',
+        },
+        {
+            id: 'test-row-2',
+            booleanColumn: false,
+            textColumn1: 'row two text ',
+            textColumn2: 'row two text 2',
+            textWithIcon: 'row two text with icon',
+            customStatusText: 'Done',
+            customStatusVariant: 'positive',
+            customChip: 'Send email',
+        },
+        {
+            id: 'test-row-3',
+            booleanColumn: true,
+            textColumn1: 'row three text ',
+            textColumn2: 'row three text 2',
+            textWithIcon: 'row three text with icon',
+            customStatusText: 'Closed-no response',
+            customStatusVariant: null,
+            customChip: 'Block account',
+            customChipVariant: 'invalid',
+        },
+        {
+            id: 'test-row-4',
+            booleanColumn: true,
+            textColumn1: 'row four text ',
+            textColumn2: 'row four text 2',
+            textWithIcon: 'row four text with icon',
+            customStatusText: 'Past due',
+            customStatusVariant: 'critical',
+            customChip: null,
+            customChipVariant: null,
+        },
+    ];
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Table, { title: "Filtered Table", columns: __spreadArray([], columnsWithCustomContent, true), rows: rowsCustomContent })));
+};

package/dist/stories/Tabs.stories.js

@@ -0,0 +1,92 @@
+import React from 'react';
+import { VerticalTabs, SystemIcons, Size } from '../src/index';
+import { Route, Routes } from 'react-router';
+export default {
+    title: 'Components/Vertical Tabs',
+    component: VerticalTabs,
+    decorators: [],
+    parameter: {},
+};
+var demo = [
+    {
+        requiredLine: 'My Organization',
+        to: '/myorganization',
+        onClick: function () {
+            console.log('My Organization');
+        },
+    },
+    {
+        requiredLine: 'User Management',
+        showNotificationDot: false,
+        endLineIcon: React.createElement(SystemIcons.ArrowDropRight, { size: "24px" }),
+        to: '/management',
+        onClick: function () {
+            console.log('User Management');
+        },
+    },
+    {
+        requiredLine: 'License Management',
+        to: '/license-management',
+        onClick: function () {
+            console.log('License Management');
+        },
+        disabled: true,
+    },
+];
+var demoDouble = [
+    { requiredLine: 'My Organization', optionalLine: 'Additional info', to: '/myorganization' },
+    { requiredLine: 'User Management', optionalLine: 'Additional info', to: '/management' },
+    { requiredLine: 'License Management', optionalLine: 'Additional info', to: '/license-management', disabled: true },
+];
+var demoDoubleWithIcon = [
+    {
+        requiredLine: 'My Organization',
+        optionalLine: 'Additional info',
+        optionalLineIcon: React.createElement(SystemIcons.Team, { size: "16px" }),
+        to: '/myorganization',
+    },
+    {
+        requiredLine: 'User Management',
+        optionalLine: 'Additional info',
+        optionalLineIcon: React.createElement(SystemIcons.Team, { size: "16px" }),
+        to: '/management',
+    },
+    {
+        requiredLine: 'License Management',
+        optionalLine: 'Additional info',
+        optionalLineIcon: React.createElement(SystemIcons.Team, { size: "16px" }),
+        to: '/license-management',
+        disabled: true,
+    },
+];
+var demoWithNotification = [
+    { requiredLine: 'My Organization', to: '/myorganization' },
+    { requiredLine: 'User Management', to: '/management', showNotificationDot: true, variant: 'critical' },
+    {
+        requiredLine: 'License Management',
+        to: '/license-management',
+        showNotificationDot: true,
+        variant: 'positive',
+        disabled: true,
+    },
+];
+var demoDoubleWithNotification = [
+    {
+        requiredLine: 'My Organization',
+        optionalLine: 'Additional info',
+        to: '/myorganization',
+        showNotificationDot: true,
+        variant: 'positive',
+    },
+    {
+        requiredLine: 'User Management',
+        optionalLine: 'Additional info',
+        to: '/management',
+        showNotificationDot: true,
+        variant: 'critical',
+    },
+    { requiredLine: 'License Management', optionalLine: 'Additional info', to: '/license-management', disabled: true },
+];
+export var Large = function () { return (React.createElement(React.Fragment, null,
+    React.createElement(Routes, null,
+        React.createElement(Route, { index: true, element: React.createElement(VerticalTabs, { size: Size.Large, entries: demo }) })))); };

package/dist/stories/Tag.stories.d.ts

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

package/dist/stories/Tag.stories.js

@@ -0,0 +1,52 @@
+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, Tag } from '../src/index';
+var meta = {
+    title: 'Components/Tag',
+    component: Tag,
+    decorators: [],
+    tags: ['autodocs'],
+    parameters: {},
+};
+export default meta;
+export var Primary = {
+    args: {
+        label: 'Label'
+    },
+};
+var DemoContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  > div {\n    margin: 20px;\n  }\n"], ["\n  > div {\n    margin: 20px;\n  }\n"])));
+export var TagWithLabelAndIconDemo = function () { return (React.createElement(React.Fragment, null,
+    React.createElement(DemoContainer, null,
+        React.createElement(Tag, { label: 'sample text', variant: 'positive', icon: React.createElement(SystemIcons.Time, null) }),
+        React.createElement(Tag, { label: 'sample text', variant: 'warning', icon: React.createElement(SystemIcons.Time, null) }),
+        React.createElement(Tag, { label: 'short text', variant: 'critical', icon: React.createElement(SystemIcons.Time, null) }),
+        React.createElement(Tag, { label: 'shorter', variant: 'accent1', icon: React.createElement(SystemIcons.Time, null) }),
+        React.createElement(Tag, { label: 's..', variant: 'accent2', icon: React.createElement(SystemIcons.Time, null) }),
+        React.createElement(Tag, { label: 'sample text', icon: React.createElement(SystemIcons.Time, null) })))); };
+export var TagWithLabelOnlyDemo = function () { return (React.createElement(React.Fragment, null,
+    React.createElement(DemoContainer, null,
+        React.createElement(Tag, { label: 'sample text', variant: 'positive' }),
+        React.createElement(Tag, { label: 'sample text', variant: 'warning' }),
+        React.createElement(Tag, { label: 'sample text', variant: 'critical' }),
+        React.createElement(Tag, { label: 'sample text', variant: 'accent1' }),
+        React.createElement(Tag, { label: 'sample text', variant: 'accent2' }),
+        React.createElement(Tag, { label: 'sample text' }),
+        React.createElement(Tag, { label: 'text', variant: 'positive' }),
+        React.createElement(Tag, { label: 'text', variant: 'warning' }),
+        React.createElement(Tag, { label: 'text', variant: 'critical' }),
+        React.createElement(Tag, { label: 'text', variant: 'accent1' }),
+        React.createElement(Tag, { label: 'text', variant: 'accent2' }),
+        React.createElement(Tag, { label: 'text' })))); };
+export var TagWithIconOnlyDemo = function () { return (React.createElement(React.Fragment, null,
+    React.createElement(DemoContainer, null,
+        React.createElement(Tag, { variant: 'positive', icon: React.createElement(SystemIcons.Time, null) }),
+        React.createElement(Tag, { variant: 'warning', icon: React.createElement(SystemIcons.Time, null) }),
+        React.createElement(Tag, { variant: 'critical', icon: React.createElement(SystemIcons.Time, null) }),
+        React.createElement(Tag, { variant: 'accent1', icon: React.createElement(SystemIcons.Time, null) }),
+        React.createElement(Tag, { variant: 'accent2', icon: React.createElement(SystemIcons.Time, null) }),
+        React.createElement(Tag, { icon: React.createElement(SystemIcons.Time, null) })))); };
+var templateObject_1;

package/dist/stories/Tile.stories.d.ts

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