@dtdot/lego 0.18.7 → 0.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (91) hide show
  1. package/build/components/Checklist/Checklist.component.d.ts +3 -1
  2. package/build/components/Checklist/Checklist.component.js +4 -4
  3. package/build/components/Checklist/_ChecklistItem.component.d.ts +2 -1
  4. package/build/components/Checklist/_ChecklistItem.component.js +10 -10
  5. package/build/index.d.ts +2 -0
  6. package/build/index.js +2 -0
  7. package/build/theme/providers/DarkTheme.provider.d.ts +6 -0
  8. package/build/theme/providers/DarkTheme.provider.js +8 -0
  9. package/build/theme/providers/DefaultTheme.provider.d.ts +6 -0
  10. package/build/theme/providers/DefaultTheme.provider.js +8 -0
  11. package/package.json +1 -1
  12. package/build/components/ActionMenu/ActionMenu.stories.d.ts +0 -6
  13. package/build/components/ActionMenu/ActionMenu.stories.js +0 -48
  14. package/build/components/ActionMessage/ActionMessage.stories.d.ts +0 -6
  15. package/build/components/ActionMessage/ActionMessage.stories.js +0 -19
  16. package/build/components/Alert/Alert.stories.d.ts +0 -8
  17. package/build/components/Alert/Alert.stories.js +0 -21
  18. package/build/components/Badge/Badge.stories.d.ts +0 -5
  19. package/build/components/Badge/Badge.stories.js +0 -18
  20. package/build/components/BadgeSelector/BadgeSelector.stories.d.ts +0 -6
  21. package/build/components/BadgeSelector/BadgeSelector.stories.js +0 -94
  22. package/build/components/Button/Button.stories.d.ts +0 -7
  23. package/build/components/Button/Button.stories.js +0 -27
  24. package/build/components/ButtonGroup/ButtonGroup.stories.d.ts +0 -8
  25. package/build/components/ButtonGroup/ButtonGroup.stories.js +0 -20
  26. package/build/components/Card/Card.stories.d.ts +0 -9
  27. package/build/components/Card/Card.stories.js +0 -84
  28. package/build/components/Checklist/Checklist.stories.d.ts +0 -5
  29. package/build/components/Checklist/Checklist.stories.js +0 -42
  30. package/build/components/ControlGroup/ControlGroup.stories.d.ts +0 -7
  31. package/build/components/ControlGroup/ControlGroup.stories.js +0 -24
  32. package/build/components/FancyCheckbox/FancyCheckbox.stories.d.ts +0 -5
  33. package/build/components/FancyCheckbox/FancyCheckbox.stories.js +0 -29
  34. package/build/components/Form/Form.stories.d.ts +0 -5
  35. package/build/components/Form/Form.stories.js +0 -21
  36. package/build/components/Heading/Heading.stories.d.ts +0 -7
  37. package/build/components/Heading/Heading.stories.js +0 -9
  38. package/build/components/ImageUpload/ImageUpload.stories.d.ts +0 -8
  39. package/build/components/ImageUpload/ImageUpload.stories.js +0 -49
  40. package/build/components/InlineCard/InlineCard.stories.d.ts +0 -7
  41. package/build/components/InlineCard/InlineCard.stories.js +0 -52
  42. package/build/components/Input/Input.stories.d.ts +0 -7
  43. package/build/components/Input/Input.stories.js +0 -28
  44. package/build/components/LiveInput/LiveInput.stories.d.ts +0 -6
  45. package/build/components/LiveInput/LiveInput.stories.js +0 -12
  46. package/build/components/LiveList/LiveList.stories.d.ts +0 -8
  47. package/build/components/LiveList/LiveList.stories.js +0 -57
  48. package/build/components/Loader/Loader.stories.d.ts +0 -5
  49. package/build/components/Loader/Loader.stories.js +0 -9
  50. package/build/components/Menu/Menu.stories.d.ts +0 -7
  51. package/build/components/Menu/Menu.stories.js +0 -95
  52. package/build/components/MinimalMenu/MinimalMenu.stories.d.ts +0 -5
  53. package/build/components/MinimalMenu/MinimalMenu.stories.js +0 -46
  54. package/build/components/Modal/Modal.stories.d.ts +0 -6
  55. package/build/components/Modal/Modal.stories.js +0 -55
  56. package/build/components/Notification/Notification.stories.d.ts +0 -8
  57. package/build/components/Notification/Notification.stories.js +0 -28
  58. package/build/components/Notifications/Notifications.stories.d.ts +0 -7
  59. package/build/components/Notifications/Notifications.stories.js +0 -96
  60. package/build/components/PageHeader/PageHeader.stories.d.ts +0 -6
  61. package/build/components/PageHeader/PageHeader.stories.js +0 -13
  62. package/build/components/ProfileImage/ProfileImage.stories.d.ts +0 -6
  63. package/build/components/ProfileImage/ProfileImage.stories.js +0 -8
  64. package/build/components/QrCode/QrCode.stories.d.ts +0 -5
  65. package/build/components/QrCode/QrCode.stories.js +0 -8
  66. package/build/components/SquareButton/SquareButton.stories.d.ts +0 -5
  67. package/build/components/SquareButton/SquareButton.stories.js +0 -14
  68. package/build/components/Swimlane/Swimlane.stories.d.ts +0 -6
  69. package/build/components/Swimlane/Swimlane.stories.js +0 -102
  70. package/build/components/Table/Table.stories.d.ts +0 -8
  71. package/build/components/Table/Table.stories.js +0 -75
  72. package/build/components/Text/Text.stories.d.ts +0 -6
  73. package/build/components/Text/Text.stories.js +0 -11
  74. package/build/examples/Form.stories.d.ts +0 -5
  75. package/build/examples/Form.stories.js +0 -19
  76. package/build/examples/Modal.stories.d.ts +0 -5
  77. package/build/examples/Modal.stories.js +0 -37
  78. package/build/layouts/Action/Action.stories.d.ts +0 -6
  79. package/build/layouts/Action/Action.stories.js +0 -17
  80. package/build/layouts/Centered/Centered.stories.d.ts +0 -5
  81. package/build/layouts/Centered/Centered.stories.js +0 -11
  82. package/build/layouts/Column/Column.stories.d.ts +0 -5
  83. package/build/layouts/Column/Column.stories.js +0 -11
  84. package/build/layouts/Content/Content.stories.d.ts +0 -9
  85. package/build/layouts/Content/Content.stories.js +0 -40
  86. package/build/layouts/Focus/Focus.stories.d.ts +0 -5
  87. package/build/layouts/Focus/Focus.stories.js +0 -19
  88. package/build/layouts/Padded/Padded.stories.d.ts +0 -6
  89. package/build/layouts/Padded/Padded.stories.js +0 -13
  90. package/build/layouts/WidthLimit/WidthLimit.stories.d.ts +0 -8
  91. package/build/layouts/WidthLimit/WidthLimit.stories.js +0 -43
@@ -1,55 +0,0 @@
1
- import React, { useState } from 'react';
2
- import { Modal, Button } from '../..';
3
- export const Standard = () => {
4
- const [open, setOpen] = useState(true);
5
- const [loading, setLoading] = useState(false);
6
- const handleOpen = () => {
7
- setOpen(true);
8
- setLoading(true);
9
- setTimeout(() => setLoading(false), 2000);
10
- };
11
- const handleClose = () => {
12
- setOpen(false);
13
- setLoading(false);
14
- };
15
- return (React.createElement(React.Fragment, null,
16
- React.createElement(Button, { onClick: handleOpen }, "Open"),
17
- open && (React.createElement(Modal, { size: 'sm', onClose: handleClose, loading: loading },
18
- React.createElement(Modal.Header, { header: 'Small modal', subHeader: "This one shouldn't scroll" }),
19
- React.createElement(Modal.Body, null,
20
- React.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget efficitur libero. In eu gravida turpis. Nunc dictum pretium felis a vulputate. Aliquam bibendum ex sed sapien rutrum accumsan. Curabitur sed mi arcu."),
21
- React.createElement("br", null))))));
22
- };
23
- export const LotsOfContent = () => {
24
- const [open, setOpen] = useState(true);
25
- return (React.createElement(React.Fragment, null,
26
- React.createElement(Button, { onClick: () => setOpen(true) }, "Open"),
27
- open && (React.createElement(Modal, { onClose: () => setOpen(false) },
28
- React.createElement(Modal.Header, { header: 'Larger modal', subHeader: 'This one should scroll' }),
29
- React.createElement(Modal.Body, null,
30
- React.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget efficitur libero. In eu gravida turpis. Nunc dictum pretium felis a vulputate. Aliquam bibendum ex sed sapien rutrum accumsan. Curabitur sed mi arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut cursus urna. Morbi vestibulum tortor porta tortor efficitur, et semper tortor viverra. Suspendisse ac cursus lacus. Vivamus blandit, elit eu pretium rutrum, tellus orci tristique ante, vel condimentum quam nisl eget quam. Donec convallis aliquet dictum. Aliquam in sapien quis quam consequat interdum sed quis est. Phasellus dictum posuere mauris in tempor. Nulla scelerisque, risus ut dignissim gravida, ex urna vestibulum turpis, vel interdum velit nibh nec quam. Nulla non commodo odio. Proin eu justo risus."),
31
- React.createElement("br", null),
32
- React.createElement("p", null, "In volutpat nulla eros, sed vulputate urna suscipit vestibulum. Suspendisse posuere, mauris ut pellentesque aliquam, sapien leo molestie arcu, eu dapibus felis eros varius lacus. Quisque nec convallis neque. Mauris dignissim ultricies nunc, vel interdum ante elementum nec. Integer faucibus laoreet nisi. Etiam tincidunt eleifend velit, nec tempor tortor rhoncus vel. Aliquam interdum, eros euismod tincidunt tristique, lacus tellus sagittis mi, a ultricies ligula tortor quis est. Nam volutpat nisl vitae vulputate tristique. Proin consequat lacus facilisis, pretium turpis quis, faucibus nisl. Vivamus eu mauris pellentesque, pretium eros nec, blandit mauris. Nulla maximus risus a velit dapibus, quis laoreet nisl dapibus. Nullam a varius nulla."),
33
- React.createElement("br", null),
34
- React.createElement("p", null, "Aliquam vitae sollicitudin sapien, at commodo est. In hac habitasse platea dictumst. Etiam erat metus, gravida ut posuere ac, mollis quis nisi. Curabitur arcu lorem, convallis nec facilisis non, ultricies vel lectus. Suspendisse accumsan metus eu lorem dictum vestibulum sed sed lorem. Sed facilisis ultricies enim consectetur sagittis. Phasellus blandit urna vitae varius tempus. Ut molestie porta nisl id egestas. Ut bibendum ante vitae quam viverra, ut dapibus felis convallis. Fusce quam nisl, pellentesque ac turpis sed, scelerisque congue velit. Morbi vehicula ac neque et rutrum. Vivamus leo velit, accumsan at tristique a, ultricies vitae tortor. Pellentesque gravida pharetra urna. Maecenas aliquet elementum justo, id tincidunt velit."),
35
- React.createElement("br", null),
36
- React.createElement("p", null, "Proin vitae nulla porta, ullamcorper nisi at, convallis ante. Maecenas facilisis augue vel ultricies laoreet. Vivamus blandit enim ac felis consectetur, quis malesuada sem laoreet. Praesent vehicula felis tellus, at luctus ipsum suscipit at. Sed lorem felis, euismod sit amet cursus et, porttitor et mauris. Proin cursus arcu lacus, non condimentum mi consectetur eu. Suspendisse quis venenatis felis, eu facilisis dolor. Morbi laoreet egestas arcu, vel tempor nisi vehicula at. Nullam ut ligula posuere, vestibulum mi at, mollis felis. Nunc ut massa elit. Suspendisse id nunc at ipsum eleifend finibus imperdiet et lectus. Curabitur elementum, nulla sit amet interdum mollis, metus elit vulputate neque, mattis lacinia lorem purus ut odio. Morbi interdum neque sed libero molestie consequat. Sed condimentum orci facilisis tortor mollis ultrices."),
37
- React.createElement("br", null),
38
- React.createElement("p", null, "Nulla diam lorem, placerat non dui et, viverra ultrices augue. Phasellus tristique porta odio at scelerisque. Proin facilisis elit ut est faucibus rhoncus. Nunc ac auctor ante. Suspendisse consequat nulla sit amet interdum luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam vel dapibus sem. Quisque feugiat libero id maximus blandit. Duis nec urna aliquet, dapibus nibh at, scelerisque enim. Donec venenatis est dui, sit amet sollicitudin mi tempus ac. Aenean quis nunc a risus congue malesuada at vulputate metus. Integer sed efficitur libero. Aenean sit amet consequat arcu. Aliquam rhoncus porttitor vestibulum."),
39
- React.createElement("br", null),
40
- React.createElement("p", null, "Aliquam vitae sollicitudin sapien, at commodo est. In hac habitasse platea dictumst. Etiam erat metus, gravida ut posuere ac, mollis quis nisi. Curabitur arcu lorem, convallis nec facilisis non, ultricies vel lectus. Suspendisse accumsan metus eu lorem dictum vestibulum sed sed lorem. Sed facilisis ultricies enim consectetur sagittis. Phasellus blandit urna vitae varius tempus. Ut molestie porta nisl id egestas. Ut bibendum ante vitae quam viverra, ut dapibus felis convallis. Fusce quam nisl, pellentesque ac turpis sed, scelerisque congue velit. Morbi vehicula ac neque et rutrum. Vivamus leo velit, accumsan at tristique a, ultricies vitae tortor. Pellentesque gravida pharetra urna. Maecenas aliquet elementum justo, id tincidunt velit."),
41
- React.createElement("br", null),
42
- React.createElement("p", null, "Proin vitae nulla porta, ullamcorper nisi at, convallis ante. Maecenas facilisis augue vel ultricies laoreet. Vivamus blandit enim ac felis consectetur, quis malesuada sem laoreet. Praesent vehicula felis tellus, at luctus ipsum suscipit at. Sed lorem felis, euismod sit amet cursus et, porttitor et mauris. Proin cursus arcu lacus, non condimentum mi consectetur eu. Suspendisse quis venenatis felis, eu facilisis dolor. Morbi laoreet egestas arcu, vel tempor nisi vehicula at. Nullam ut ligula posuere, vestibulum mi at, mollis felis. Nunc ut massa elit. Suspendisse id nunc at ipsum eleifend finibus imperdiet et lectus. Curabitur elementum, nulla sit amet interdum mollis, metus elit vulputate neque, mattis lacinia lorem purus ut odio. Morbi interdum neque sed libero molestie consequat. Sed condimentum orci facilisis tortor mollis ultrices."),
43
- React.createElement("br", null),
44
- React.createElement("p", null, "Nulla diam lorem, placerat non dui et, viverra ultrices augue. Phasellus tristique porta odio at scelerisque. Proin facilisis elit ut est faucibus rhoncus. Nunc ac auctor ante. Suspendisse consequat nulla sit amet interdum luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam vel dapibus sem. Quisque feugiat libero id maximus blandit. Duis nec urna aliquet, dapibus nibh at, scelerisque enim. Donec venenatis est dui, sit amet sollicitudin mi tempus ac. Aenean quis nunc a risus congue malesuada at vulputate metus. Integer sed efficitur libero. Aenean sit amet consequat arcu. Aliquam rhoncus porttitor vestibulum."),
45
- React.createElement("br", null),
46
- React.createElement("p", null, "Aliquam vitae sollicitudin sapien, at commodo est. In hac habitasse platea dictumst. Etiam erat metus, gravida ut posuere ac, mollis quis nisi. Curabitur arcu lorem, convallis nec facilisis non, ultricies vel lectus. Suspendisse accumsan metus eu lorem dictum vestibulum sed sed lorem. Sed facilisis ultricies enim consectetur sagittis. Phasellus blandit urna vitae varius tempus. Ut molestie porta nisl id egestas. Ut bibendum ante vitae quam viverra, ut dapibus felis convallis. Fusce quam nisl, pellentesque ac turpis sed, scelerisque congue velit. Morbi vehicula ac neque et rutrum. Vivamus leo velit, accumsan at tristique a, ultricies vitae tortor. Pellentesque gravida pharetra urna. Maecenas aliquet elementum justo, id tincidunt velit."),
47
- React.createElement("br", null),
48
- React.createElement("p", null, "Proin vitae nulla porta, ullamcorper nisi at, convallis ante. Maecenas facilisis augue vel ultricies laoreet. Vivamus blandit enim ac felis consectetur, quis malesuada sem laoreet. Praesent vehicula felis tellus, at luctus ipsum suscipit at. Sed lorem felis, euismod sit amet cursus et, porttitor et mauris. Proin cursus arcu lacus, non condimentum mi consectetur eu. Suspendisse quis venenatis felis, eu facilisis dolor. Morbi laoreet egestas arcu, vel tempor nisi vehicula at. Nullam ut ligula posuere, vestibulum mi at, mollis felis. Nunc ut massa elit. Suspendisse id nunc at ipsum eleifend finibus imperdiet et lectus. Curabitur elementum, nulla sit amet interdum mollis, metus elit vulputate neque, mattis lacinia lorem purus ut odio. Morbi interdum neque sed libero molestie consequat. Sed condimentum orci facilisis tortor mollis ultrices."),
49
- React.createElement("br", null),
50
- React.createElement("p", null, "Nulla diam lorem, placerat non dui et, viverra ultrices augue. Phasellus tristique porta odio at scelerisque. Proin facilisis elit ut est faucibus rhoncus. Nunc ac auctor ante. Suspendisse consequat nulla sit amet interdum luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam vel dapibus sem. Quisque feugiat libero id maximus blandit. Duis nec urna aliquet, dapibus nibh at, scelerisque enim. Donec venenatis est dui, sit amet sollicitudin mi tempus ac. Aenean quis nunc a risus congue malesuada at vulputate metus. Integer sed efficitur libero. Aenean sit amet consequat arcu. Aliquam rhoncus porttitor vestibulum."))))));
51
- };
52
- export default {
53
- title: 'Components/Modal',
54
- component: Modal,
55
- };
@@ -1,8 +0,0 @@
1
- /// <reference types="react" />
2
- import { Meta } from '@storybook/react/types-6-0';
3
- export declare const Standard: () => JSX.Element;
4
- export declare const Variants: () => JSX.Element;
5
- export declare const WithCount: () => JSX.Element;
6
- export declare const WithAction: () => JSX.Element;
7
- declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
8
- export default _default;
@@ -1,28 +0,0 @@
1
- import React from 'react';
2
- import { Notification } from '../..';
3
- /* eslint-disable no-alert */
4
- export const Standard = () => (React.createElement(React.Fragment, null,
5
- React.createElement(Notification, { variant: 'info', message: 'This is a base notification' }),
6
- React.createElement("br", null),
7
- React.createElement(Notification, { variant: 'info', message: 'This is a base notification with quite a bit of content. It may wrap around to the next line...' })));
8
- export const Variants = () => (React.createElement(React.Fragment, null,
9
- React.createElement(Notification, { variant: 'info', message: 'This is an info notification' }),
10
- React.createElement("br", null),
11
- React.createElement(Notification, { variant: 'success', message: 'This is a success notification' }),
12
- React.createElement("br", null),
13
- React.createElement(Notification, { variant: 'warn', message: 'This is a warn notification' }),
14
- React.createElement("br", null),
15
- React.createElement(Notification, { variant: 'danger', message: 'This is a danger notification' })));
16
- export const WithCount = () => (React.createElement(React.Fragment, null,
17
- React.createElement(Notification, { variant: 'info', count: 5, message: 'This is a notification with a count' }),
18
- React.createElement("br", null),
19
- React.createElement(Notification, { variant: 'success', count: 5, message: 'This is a notification with a count' }),
20
- React.createElement("br", null),
21
- React.createElement(Notification, { variant: 'warn', count: 5, message: 'This is a notification with a count' }),
22
- React.createElement("br", null),
23
- React.createElement(Notification, { variant: 'danger', count: 5, message: 'This is a notification with a count' })));
24
- export const WithAction = () => (React.createElement(Notification, { variant: 'info', message: 'This is a notification with an action', action: 'Undo', onAction: () => alert('Undoing...') }));
25
- export default {
26
- title: 'Components/Notification',
27
- component: Notification,
28
- };
@@ -1,7 +0,0 @@
1
- /// <reference types="react" />
2
- import { Meta } from '@storybook/react/types-6-0';
3
- export declare const Standard: () => JSX.Element;
4
- export declare const Interactive: () => JSX.Element;
5
- export declare const OverModal: () => JSX.Element;
6
- declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
7
- export default _default;
@@ -1,96 +0,0 @@
1
- import React, { useState } from 'react';
2
- import { Button, FocusLayout, Menu, Modal, Notifications, PaddedLayout, Text } from '../..';
3
- /* eslint-disable no-alert, no-console */
4
- export const Standard = () => {
5
- const notifications = [
6
- {
7
- id: '123',
8
- message: 'User saved!',
9
- variant: 'success',
10
- },
11
- {
12
- id: '456',
13
- message: 'Error validating form',
14
- variant: 'danger',
15
- },
16
- ];
17
- return (React.createElement(React.Fragment, null,
18
- React.createElement(Notifications, { notifications: notifications }),
19
- React.createElement(Menu, { heading: 'Something Tasty' }),
20
- React.createElement(Menu.Page, null,
21
- React.createElement(FocusLayout, null,
22
- React.createElement(Text, null, "Content...")))));
23
- };
24
- export const Interactive = () => {
25
- const [notifications, setNotifications] = useState([]);
26
- const successNotification = {
27
- id: '123',
28
- message: 'User saved!',
29
- variant: 'success',
30
- count: 1,
31
- };
32
- const errorNotification = {
33
- id: '456',
34
- message: 'Error validating form',
35
- variant: 'danger',
36
- count: 1,
37
- };
38
- const addNotification = (notification) => {
39
- const exists = notifications.find((n) => n.id === notification.id);
40
- if (exists) {
41
- const newNotifications = notifications.map((n) => n.id === notification.id
42
- ? {
43
- ...n,
44
- count: (n.count || 1) + 1,
45
- }
46
- : n);
47
- setNotifications(newNotifications);
48
- return;
49
- }
50
- setNotifications([...notifications, notification]);
51
- };
52
- return (React.createElement(React.Fragment, null,
53
- React.createElement(Notifications, { notifications: notifications }),
54
- React.createElement(Menu, { heading: 'Something Tasty' }),
55
- React.createElement(Menu.Page, null,
56
- React.createElement(FocusLayout, null,
57
- React.createElement(Button, { onClick: () => addNotification(successNotification) }, "Save user"),
58
- React.createElement("br", null),
59
- React.createElement("br", null),
60
- React.createElement(Button, { onClick: () => addNotification(errorNotification) }, "Validate Form"),
61
- React.createElement("br", null),
62
- React.createElement("br", null),
63
- React.createElement(Button, { variant: 'secondary', onClick: () => setNotifications(notifications.slice(1)) }, "Clear")))));
64
- };
65
- export const OverModal = () => {
66
- const notifications = [
67
- {
68
- id: '123',
69
- message: 'User saved!',
70
- variant: 'success',
71
- },
72
- {
73
- id: '456',
74
- message: 'Error validating form',
75
- variant: 'danger',
76
- },
77
- ];
78
- return (React.createElement(React.Fragment, null,
79
- React.createElement(Notifications, { notifications: notifications }),
80
- React.createElement(Menu, { heading: 'Something Tasty' }),
81
- React.createElement(Menu.Page, null,
82
- React.createElement(Modal, { onClose: () => {
83
- console.log('close..');
84
- } },
85
- React.createElement(Modal.Header, { header: 'A test modal' }),
86
- React.createElement(Modal.Body, null,
87
- React.createElement(PaddedLayout, null,
88
- React.createElement(Text, null, "Some text...")))))));
89
- };
90
- export default {
91
- title: 'Components/Notifications',
92
- component: Notifications,
93
- parameters: {
94
- layout: 'fullscreen',
95
- },
96
- };
@@ -1,6 +0,0 @@
1
- /// <reference types="react" />
2
- import { Meta } from '@storybook/react/types-6-0';
3
- export declare const Standard: () => JSX.Element;
4
- export declare const WithActions: () => JSX.Element;
5
- declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
6
- export default _default;
@@ -1,13 +0,0 @@
1
- import React from 'react';
2
- import { Button, ButtonGroup, PageHeader } from '../../';
3
- export const Standard = () => {
4
- return React.createElement(PageHeader, { heading: 'Frank the Drummer' });
5
- };
6
- export const WithActions = () => {
7
- return (React.createElement(PageHeader, { heading: 'Frank the Drummer', actions: React.createElement(ButtonGroup, null,
8
- React.createElement(Button, { variant: 'tertiary' }, "Add")) }));
9
- };
10
- export default {
11
- title: 'Components/PageHeader',
12
- component: PageHeader,
13
- };
@@ -1,6 +0,0 @@
1
- /// <reference types="react" />
2
- import { Meta } from '@storybook/react/types-6-0';
3
- export declare const Standard: () => JSX.Element;
4
- export declare const Generated: () => JSX.Element;
5
- declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
6
- export default _default;
@@ -1,8 +0,0 @@
1
- import React from 'react';
2
- import { ProfileImage } from '../..';
3
- export const Standard = () => (React.createElement(ProfileImage, { name: 'Hungry Bear', image: 'https://i.guim.co.uk/img/media/86c3481516dce247943ac2978b4f48d16a3ac265/0_170_5120_3074/master/5120.jpg?width=1200&height=1200&quality=85&auto=format&fit=crop&s=637dc5731d52754675ef36344a6af3c8' }));
4
- export const Generated = () => React.createElement(ProfileImage, { name: 'Hungry Bear' });
5
- export default {
6
- title: 'Components/ProfileImage',
7
- component: ProfileImage,
8
- };
@@ -1,5 +0,0 @@
1
- /// <reference types="react" />
2
- import { Meta } from '@storybook/react/types-6-0';
3
- export declare const Standard: () => JSX.Element;
4
- declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
5
- export default _default;
@@ -1,8 +0,0 @@
1
- import React from 'react';
2
- import { QrCode } from '../..';
3
- export const Standard = () => (React.createElement(React.Fragment, null,
4
- React.createElement(QrCode, { value: 'http://www.google.com' })));
5
- export default {
6
- title: 'Components/QrCode',
7
- component: QrCode,
8
- };
@@ -1,5 +0,0 @@
1
- /// <reference types="react" />
2
- import { Meta } from '@storybook/react/types-6-0';
3
- export declare const Standard: () => JSX.Element;
4
- declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
5
- export default _default;
@@ -1,14 +0,0 @@
1
- import React from 'react';
2
- import { SquareButton } from '../..';
3
- export const Standard = () => (React.createElement(React.Fragment, null,
4
- React.createElement(SquareButton, null, "Primary"),
5
- React.createElement("br", null),
6
- React.createElement("br", null),
7
- React.createElement(SquareButton, { variant: 'secondary' }, "A Secondary Button"),
8
- React.createElement("br", null),
9
- React.createElement("br", null),
10
- React.createElement(SquareButton, { variant: 'tertiary' }, "A Tertiary Square Button")));
11
- export default {
12
- title: 'Components/SquareButton',
13
- component: SquareButton,
14
- };
@@ -1,6 +0,0 @@
1
- /// <reference types="react" />
2
- import { Meta } from '@storybook/react/types-6-0';
3
- export declare const Standard: () => JSX.Element;
4
- export declare const LotsOfCards: () => JSX.Element;
5
- declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
6
- export default _default;
@@ -1,102 +0,0 @@
1
- import React from 'react';
2
- import { InlineCard, Badge, Swimlane, CenteredLayout } from '../../';
3
- import InlineCardGroup from '../InlineCard/InlineCardGroup.component';
4
- export const Standard = () => {
5
- return (React.createElement(React.Fragment, null,
6
- React.createElement(Swimlane, { label: 'Jobs' },
7
- React.createElement(InlineCardGroup, { wrap: true },
8
- React.createElement(InlineCard, { size: 'xs' },
9
- React.createElement(InlineCard.Content, { center: true },
10
- React.createElement(CenteredLayout, null,
11
- "Jim",
12
- `'`,
13
- "s Mowing")),
14
- React.createElement(InlineCard.Meta, null,
15
- React.createElement(Badge, { variant: 'success' }, "Full Time"))))),
16
- React.createElement(Swimlane, { label: 'Properties' },
17
- React.createElement(InlineCardGroup, { wrap: true },
18
- React.createElement(InlineCard, { size: 'xs' },
19
- React.createElement(InlineCard.Content, { center: true },
20
- React.createElement(CenteredLayout, null, "33 Oak Street")),
21
- React.createElement(InlineCard.Meta, null,
22
- React.createElement(Badge, { variant: 'success' }, "Primary"))),
23
- React.createElement(InlineCard, { size: 'xs' },
24
- React.createElement(InlineCard.Content, { center: true },
25
- React.createElement(CenteredLayout, null, "402 Main Street")),
26
- React.createElement(InlineCard.Meta, null,
27
- React.createElement(Badge, { variant: 'info' }, "Investment"))),
28
- React.createElement(InlineCard, { size: 'xs' },
29
- React.createElement(InlineCard.Content, { center: true },
30
- React.createElement(CenteredLayout, null, "12 Heart Avenue")),
31
- React.createElement(InlineCard.Meta, null,
32
- React.createElement(Badge, { variant: 'info' }, "Investment"))))),
33
- React.createElement(Swimlane, { label: 'Investments' },
34
- React.createElement(InlineCardGroup, { wrap: true },
35
- React.createElement(InlineCard, { size: 'xs' },
36
- React.createElement(InlineCard.Content, { center: true },
37
- React.createElement(CenteredLayout, null, "ASX 200")),
38
- React.createElement(InlineCard.Meta, null,
39
- React.createElement(Badge, { variant: 'info' }, "Index Fund"))),
40
- React.createElement(InlineCard, { size: 'xs' },
41
- React.createElement(InlineCard.Content, { center: true },
42
- React.createElement(CenteredLayout, null, "AMP Super")),
43
- React.createElement(InlineCard.Meta, null,
44
- React.createElement(Badge, { variant: 'info' }, "Super Fund")))))));
45
- };
46
- export const LotsOfCards = () => {
47
- return (React.createElement(React.Fragment, null,
48
- React.createElement(Swimlane, { label: 'An Example' },
49
- React.createElement(InlineCardGroup, { wrap: true },
50
- React.createElement(InlineCard, { size: 'xs' },
51
- React.createElement(InlineCard.Content, { center: true },
52
- React.createElement(CenteredLayout, null, "Card")),
53
- React.createElement(InlineCard.Meta, null,
54
- React.createElement(Badge, { variant: 'success' }, "#1"))),
55
- React.createElement(InlineCard, { size: 'xs' },
56
- React.createElement(InlineCard.Content, { center: true },
57
- React.createElement(CenteredLayout, null, "Card")),
58
- React.createElement(InlineCard.Meta, null,
59
- React.createElement(Badge, { variant: 'success' }, "#2"))),
60
- React.createElement(InlineCard, { size: 'xs' },
61
- React.createElement(InlineCard.Content, { center: true },
62
- React.createElement(CenteredLayout, null, "Card")),
63
- React.createElement(InlineCard.Meta, null,
64
- React.createElement(Badge, { variant: 'success' }, "#3"))),
65
- React.createElement(InlineCard, { size: 'xs' },
66
- React.createElement(InlineCard.Content, { center: true },
67
- React.createElement(CenteredLayout, null, "Card")),
68
- React.createElement(InlineCard.Meta, null,
69
- React.createElement(Badge, { variant: 'success' }, "#4"))),
70
- React.createElement(InlineCard, { size: 'xs' },
71
- React.createElement(InlineCard.Content, { center: true },
72
- React.createElement(CenteredLayout, null, "Card")),
73
- React.createElement(InlineCard.Meta, null,
74
- React.createElement(Badge, { variant: 'success' }, "#5"))),
75
- React.createElement(InlineCard, { size: 'xs' },
76
- React.createElement(InlineCard.Content, { center: true },
77
- React.createElement(CenteredLayout, null, "Card")),
78
- React.createElement(InlineCard.Meta, null,
79
- React.createElement(Badge, { variant: 'success' }, "#6"))),
80
- React.createElement(InlineCard, { size: 'xs' },
81
- React.createElement(InlineCard.Content, { center: true },
82
- React.createElement(CenteredLayout, null, "Card")),
83
- React.createElement(InlineCard.Meta, null,
84
- React.createElement(Badge, { variant: 'success' }, "#7"))),
85
- React.createElement(InlineCard, { size: 'xs' },
86
- React.createElement(InlineCard.Content, { center: true },
87
- React.createElement(CenteredLayout, null, "Card")),
88
- React.createElement(InlineCard.Meta, null,
89
- React.createElement(Badge, { variant: 'success' }, "#8"))),
90
- React.createElement(InlineCard, { size: 'xs' },
91
- React.createElement(InlineCard.Content, { center: true },
92
- React.createElement(CenteredLayout, null, "Card")),
93
- React.createElement(InlineCard.Meta, null,
94
- React.createElement(Badge, { variant: 'success' }, "#9"))),
95
- React.createElement(InlineCard, { size: 'xs', onClick: () => console.log('add') },
96
- React.createElement(InlineCard.Content, { center: true },
97
- React.createElement(CenteredLayout, null, "Add")))))));
98
- };
99
- export default {
100
- title: 'Components/Swimlane',
101
- component: Swimlane,
102
- };
@@ -1,8 +0,0 @@
1
- /// <reference types="react" />
2
- import { Meta } from '@storybook/react/types-6-0';
3
- export declare const Standard: () => JSX.Element;
4
- export declare const WithActions: () => JSX.Element;
5
- export declare const InCard: () => JSX.Element;
6
- export declare const InContentCard: () => JSX.Element;
7
- declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
8
- export default _default;
@@ -1,75 +0,0 @@
1
- import React from 'react';
2
- import { Card, ProfileImage, Table } from '../..';
3
- /* eslint-disable @typescript-eslint/no-empty-function */
4
- const fakeData = [
5
- {
6
- count: 57,
7
- name: 'Hungry Caterpillar',
8
- },
9
- {
10
- count: 32,
11
- name: 'Fainting Lama',
12
- },
13
- {
14
- count: 53,
15
- name: 'Hungry Bear',
16
- },
17
- {
18
- count: 24,
19
- name: 'Panicking Squirrel',
20
- },
21
- {
22
- count: 12,
23
- name: 'High Hedgehog',
24
- },
25
- {
26
- count: 76,
27
- name: 'Lazy Tiger',
28
- },
29
- {
30
- count: 34,
31
- name: 'Wild Antelope',
32
- },
33
- ];
34
- export const Standard = () => (React.createElement(Table, null,
35
- React.createElement(Table.Row, null,
36
- React.createElement(Table.Cell, { variant: 'tight' },
37
- React.createElement(ProfileImage, { name: 'Hungry Caterpillar' })),
38
- React.createElement(Table.Cell, { width: '100%' }, "Hungry Caterpillar"),
39
- React.createElement(Table.Cell, null, "Ready")),
40
- React.createElement(Table.Row, null,
41
- React.createElement(Table.Cell, { variant: 'tight' },
42
- React.createElement(ProfileImage, { name: 'Fainting Lama' })),
43
- React.createElement(Table.Cell, { width: '100%' }, "Fainting Lama"),
44
- React.createElement(Table.Cell, null, "Pending"))));
45
- export const WithActions = () => (React.createElement(Table, null, fakeData.map((data) => (React.createElement(Table.Row, { key: data.name },
46
- React.createElement(Table.Cell, null, data.count),
47
- React.createElement(Table.Cell, null, data.name),
48
- React.createElement(Table.Cell, null,
49
- React.createElement(Table.Action, { onClick: () => { }, text: 'filter' })))))));
50
- export const InCard = () => (React.createElement(Card, { padded: true, size: 'sm' },
51
- React.createElement(Table, null,
52
- React.createElement(Table.Row, null,
53
- React.createElement(Table.Cell, { variant: 'tight' },
54
- React.createElement(ProfileImage, { name: 'Hungry Caterpillar' })),
55
- React.createElement(Table.Cell, null, "Hungry Caterpillar"),
56
- React.createElement(Table.Cell, null, "Ready")),
57
- React.createElement(Table.Row, null,
58
- React.createElement(Table.Cell, { variant: 'tight' },
59
- React.createElement(ProfileImage, { name: 'Fainting Lama' })),
60
- React.createElement(Table.Cell, null, "Fainting Lama"),
61
- React.createElement(Table.Cell, null, "Pending")))));
62
- export const InContentCard = () => (React.createElement(Card, { size: 'sm' },
63
- React.createElement(Card.Header, { heading: 'Sed do eiusmod', subHeading: 'Labore et dolore magna' }),
64
- React.createElement(Card.Content, null,
65
- React.createElement(Table, { variant: 'soft' },
66
- React.createElement(Table.Row, null,
67
- React.createElement(Table.Cell, null, "Hungry Caterpillar"),
68
- React.createElement(Table.Cell, null, "Ready")),
69
- React.createElement(Table.Row, null,
70
- React.createElement(Table.Cell, null, "Fainting Lama"),
71
- React.createElement(Table.Cell, null, "Pending"))))));
72
- export default {
73
- title: 'Components/Table',
74
- component: Table,
75
- };
@@ -1,6 +0,0 @@
1
- /// <reference types="react" />
2
- import { Meta } from '@storybook/react/types-6-0';
3
- export declare const Standard: () => JSX.Element;
4
- export declare const Secondary: () => JSX.Element;
5
- declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
6
- export default _default;
@@ -1,11 +0,0 @@
1
- import React from 'react';
2
- import { Text } from '../..';
3
- export const Standard = () => React.createElement(Text, null, "test 1");
4
- export const Secondary = () => (React.createElement(React.Fragment, null,
5
- React.createElement(Text, null, "This is not a drill"),
6
- " ",
7
- React.createElement(Text, { variant: 'secondary' }, "(no really!)")));
8
- export default {
9
- title: 'Components/Text',
10
- component: Text,
11
- };
@@ -1,5 +0,0 @@
1
- /// <reference types="react" />
2
- import { Meta } from '@storybook/react/types-6-0';
3
- export declare const Standard: () => JSX.Element;
4
- declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
5
- export default _default;
@@ -1,19 +0,0 @@
1
- import React, { useState } from 'react';
2
- import { ControlGroup, FocusLayout, Form, Heading, Input, ImageUpload } from '../';
3
- /* eslint-disable @typescript-eslint/no-empty-function */
4
- export const Standard = () => {
5
- const [value, setValue] = useState({ dragon: '' });
6
- return (React.createElement(FocusLayout, null,
7
- React.createElement(Form, { value: value, onChange: setValue },
8
- React.createElement(ControlGroup, { variation: 'comfortable' },
9
- React.createElement(ImageUpload, { name: 'image' }),
10
- React.createElement(Input, { name: 'name', placeholder: 'Something tasty..' }),
11
- React.createElement(Heading.FormHeading, null, "Components"),
12
- React.createElement(Input, { name: 'one', placeholder: 'Ingredient #1' }),
13
- React.createElement(Input, { name: 'two', placeholder: 'Ingredient #2' }),
14
- React.createElement(Input, { name: 'three', placeholder: 'Ingredient #3' })))));
15
- };
16
- export default {
17
- title: 'Examples/Forms',
18
- component: Form,
19
- };
@@ -1,5 +0,0 @@
1
- /// <reference types="react" />
2
- import { Meta } from '@storybook/react/types-6-0';
3
- export declare const Standard: () => JSX.Element;
4
- declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
5
- export default _default;
@@ -1,37 +0,0 @@
1
- import React, { useState } from 'react';
2
- import { Button, FancyCheckbox, Form, Input, Modal } from '../';
3
- import ControlGroup from '../components/ControlGroup/ControlGroup.component';
4
- /* eslint-disable @typescript-eslint/no-empty-function */
5
- const options = [
6
- {
7
- value: 'fireball',
8
- label: 'Chinese Fireball',
9
- },
10
- {
11
- value: 'longhorn',
12
- label: 'Romanian Longhorn',
13
- },
14
- {
15
- value: 'ridgeback',
16
- label: 'Norwegian Ridgeback',
17
- },
18
- {
19
- value: 'horntail',
20
- label: 'Hungarian Horntail',
21
- },
22
- ];
23
- export const Standard = () => {
24
- const [value, setValue] = useState({ dragon: '' });
25
- return (React.createElement(Modal, { onClose: () => { } },
26
- React.createElement(Modal.Header, { header: 'Add Dragon' }),
27
- React.createElement(Modal.Body, null,
28
- React.createElement(Form, { value: value, onChange: setValue },
29
- React.createElement(ControlGroup, { variation: 'comfortable' },
30
- React.createElement(Input, { name: 'name', label: 'Name' }),
31
- React.createElement(FancyCheckbox, { name: 'dragon', label: 'Type', options: options }),
32
- React.createElement(Button, null, "Submit"))))));
33
- };
34
- export default {
35
- title: 'Examples/Modals',
36
- component: FancyCheckbox,
37
- };
@@ -1,6 +0,0 @@
1
- /// <reference types="react" />
2
- import { Meta } from '@storybook/react/types-6-0';
3
- export declare const Standard: () => JSX.Element;
4
- export declare const LeftAligned: () => JSX.Element;
5
- declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
6
- export default _default;
@@ -1,17 +0,0 @@
1
- import React from 'react';
2
- import { ActionLayout, Button } from '../..';
3
- export const Standard = () => (React.createElement(ActionLayout, null,
4
- React.createElement(ActionLayout.Text, null, "Lets find something to eat..."),
5
- React.createElement(ActionLayout.Content, null,
6
- React.createElement(Button, { variant: 'secondary' }, "Get Started"))));
7
- export const LeftAligned = () => (React.createElement(ActionLayout, null,
8
- React.createElement(ActionLayout.Text, null, "Lets find something to eat..."),
9
- React.createElement(ActionLayout.Content, { left: true },
10
- React.createElement(Button, { variant: 'secondary' }, "Get Started"))));
11
- export default {
12
- title: 'Layouts/Action',
13
- component: ActionLayout,
14
- parameters: {
15
- layout: 'fullscreen',
16
- },
17
- };
@@ -1,5 +0,0 @@
1
- /// <reference types="react" />
2
- import { Meta } from '@storybook/react/types-6-0';
3
- export declare const Standard: () => JSX.Element;
4
- declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
5
- export default _default;
@@ -1,11 +0,0 @@
1
- import React from 'react';
2
- import { CenteredLayout } from '../..';
3
- export const Standard = () => (React.createElement("div", { style: { backgroundColor: 'white' } },
4
- React.createElement(CenteredLayout, null, "some content....")));
5
- export default {
6
- title: 'Layouts/Centered',
7
- component: CenteredLayout,
8
- parameters: {
9
- layout: 'fullscreen',
10
- },
11
- };