@plesk/ui-library 3.35.0 → 3.35.2

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 (183) hide show
  1. package/cjs/components/Button/Button.js +1 -2
  2. package/cjs/components/Carousel/Carousel.js +25 -39
  3. package/cjs/components/Drawer/Header.js +71 -108
  4. package/cjs/components/Form/Form.js +5 -7
  5. package/cjs/components/FormFieldCheckbox/FormFieldCheckbox.js +8 -67
  6. package/cjs/components/Grid/Grid.js +9 -71
  7. package/cjs/components/GridCol/GridCol.js +3 -54
  8. package/cjs/components/Icon/constants.js +2 -2
  9. package/cjs/components/Icon/images/symbols.svg +15 -1
  10. package/cjs/components/Link/Link.js +1 -2
  11. package/cjs/components/List/List.js +11 -8
  12. package/cjs/components/Progress/Progress.js +8 -28
  13. package/cjs/components/ProgressDialog/ProgressDialog.js +12 -85
  14. package/cjs/components/ProgressStep/ProgressStep.js +4 -46
  15. package/cjs/components/ProgressStep/index.js +36 -12
  16. package/cjs/components/Rating/Rating.js +5 -36
  17. package/cjs/components/Skeleton/index.js +2 -2
  18. package/cjs/components/SplitButton/SplitButton.js +1 -2
  19. package/cjs/components/Switch/Switch.js +43 -118
  20. package/cjs/components/SwitchesPanel/SwitchesPanel.js +3 -26
  21. package/cjs/components/SwitchesPanelItem/SwitchesPanelItem.js +3 -57
  22. package/cjs/components/Toaster/Toaster.js +3 -3
  23. package/cjs/components/Tooltip/Tooltip.js +35 -64
  24. package/cjs/components/Translate/Translate.js +10 -78
  25. package/cjs/components/Translate/index.js +4 -4
  26. package/cjs/components/Translate/isLikeText.js +27 -0
  27. package/cjs/components/index.js +14 -11
  28. package/cjs/index.js +1 -1
  29. package/cjs/tests/index.js +13 -0
  30. package/cjs/tests/renderer.js +33 -0
  31. package/dist/images/symbols.svg +15 -1
  32. package/dist/plesk-ui-library-rtl.css +1 -1
  33. package/dist/plesk-ui-library-rtl.css.map +1 -1
  34. package/dist/plesk-ui-library.css +1 -1
  35. package/dist/plesk-ui-library.css.map +1 -1
  36. package/dist/plesk-ui-library.js +567 -1139
  37. package/dist/plesk-ui-library.js.map +1 -1
  38. package/dist/plesk-ui-library.min.js +5 -5
  39. package/dist/plesk-ui-library.min.js.map +1 -1
  40. package/esm/components/Button/Button.js +1 -2
  41. package/esm/components/Carousel/Carousel.js +25 -37
  42. package/esm/components/Drawer/Header.js +70 -107
  43. package/esm/components/Form/Form.js +5 -7
  44. package/esm/components/FormFieldCheckbox/FormFieldCheckbox.js +8 -65
  45. package/esm/components/Grid/Grid.js +9 -69
  46. package/esm/components/GridCol/GridCol.js +2 -55
  47. package/esm/components/Icon/constants.js +2 -2
  48. package/esm/components/Icon/images/symbols.svg +15 -1
  49. package/esm/components/Link/Link.js +1 -2
  50. package/esm/components/List/List.js +11 -8
  51. package/esm/components/Progress/Progress.js +8 -26
  52. package/esm/components/ProgressDialog/ProgressDialog.js +12 -83
  53. package/esm/components/ProgressStep/ProgressStep.js +6 -48
  54. package/esm/components/ProgressStep/index.js +1 -2
  55. package/esm/components/Rating/Rating.js +5 -36
  56. package/esm/components/Skeleton/index.js +2 -2
  57. package/esm/components/SplitButton/SplitButton.js +1 -2
  58. package/esm/components/Switch/Switch.js +43 -116
  59. package/esm/components/SwitchesPanel/SwitchesPanel.js +3 -24
  60. package/esm/components/SwitchesPanelItem/SwitchesPanelItem.js +3 -55
  61. package/esm/components/Toaster/Toaster.js +3 -1
  62. package/esm/components/Tooltip/Tooltip.js +36 -62
  63. package/esm/components/Translate/Translate.js +9 -73
  64. package/esm/components/Translate/index.js +2 -1
  65. package/esm/components/Translate/isLikeText.js +19 -0
  66. package/esm/components/index.js +1 -2
  67. package/esm/index.js +1 -1
  68. package/esm/tests/index.js +3 -0
  69. package/esm/tests/renderer.js +25 -0
  70. package/package.json +25 -22
  71. package/styleguide/build/bundle.6318f4a5.js +2 -0
  72. package/styleguide/images/symbols.svg +15 -1
  73. package/styleguide/index.html +2 -2
  74. package/types/src/components/Button/Button.d.ts +2 -3
  75. package/types/src/components/Carousel/Carousel.d.ts +58 -0
  76. package/types/src/components/Carousel/index.d.ts +2 -0
  77. package/types/src/components/Dialog/Dialog.d.ts +1 -1
  78. package/types/src/components/Dialog/index.d.ts +1 -1
  79. package/types/src/components/Drawer/DrawerProgress.d.ts +3 -3
  80. package/types/src/components/Drawer/Header.d.ts +4 -20
  81. package/types/src/components/Form/Form.d.ts +5 -0
  82. package/types/src/components/FormFieldCheckbox/FormFieldCheckbox.d.ts +53 -0
  83. package/types/src/components/FormFieldCheckbox/index.d.ts +2 -0
  84. package/types/src/components/FormFieldPassword/generatePassword.d.ts +2 -0
  85. package/types/src/components/Grid/Grid.d.ts +97 -0
  86. package/types/src/components/Grid/index.d.ts +2 -0
  87. package/types/src/components/GridCol/GridCol.d.ts +53 -0
  88. package/types/src/components/GridCol/index.d.ts +2 -0
  89. package/types/src/components/Icon/constants.d.ts +1 -1
  90. package/types/src/components/ItemList/index.d.ts +1 -0
  91. package/types/src/components/Link/Link.d.ts +1 -2
  92. package/types/src/components/LocaleProvider/LocaleProvider.d.ts +1 -1
  93. package/types/src/components/Pagination/index.d.ts +1 -0
  94. package/types/src/components/Panel/index.d.ts +1 -0
  95. package/types/src/components/Progress/Progress.d.ts +49 -0
  96. package/types/src/components/Progress/index.d.ts +2 -0
  97. package/types/src/components/ProgressDialog/ProgressDialog.d.ts +125 -0
  98. package/types/src/components/ProgressDialog/index.d.ts +2 -0
  99. package/types/src/components/ProgressStep/ProgressStep.d.ts +69 -0
  100. package/types/src/components/ProgressStep/index.d.ts +2 -0
  101. package/types/src/components/Rating/Rating.d.ts +27 -0
  102. package/types/src/components/Rating/index.d.ts +2 -0
  103. package/types/src/components/Skeleton/Skeleton.d.ts +3 -5
  104. package/types/src/components/Skeleton/SkeletonTabs.d.ts +4 -4
  105. package/types/src/components/Skeleton/SkeletonText.d.ts +2 -2
  106. package/types/src/components/Skeleton/index.d.ts +4 -1
  107. package/types/src/components/SplitButton/SplitButton.d.ts +1 -2
  108. package/types/src/components/Switch/Switch.d.ts +58 -0
  109. package/types/src/components/Switch/index.d.ts +2 -0
  110. package/types/src/components/SwitchesPanel/SwitchesPanel.d.ts +24 -0
  111. package/types/src/components/SwitchesPanel/index.d.ts +2 -0
  112. package/types/src/components/SwitchesPanelItem/SwitchesPanelItem.d.ts +78 -0
  113. package/types/src/components/SwitchesPanelItem/index.d.ts +2 -0
  114. package/types/src/components/TextArea/index.d.ts +1 -0
  115. package/types/src/components/Tooltip/Tooltip.d.ts +61 -0
  116. package/types/src/components/Tooltip/index.d.ts +2 -0
  117. package/types/src/components/Translate/Translate.d.ts +56 -0
  118. package/types/src/components/Translate/index.d.ts +3 -0
  119. package/types/src/components/Translate/isLikeText.d.ts +2 -0
  120. package/types/src/components/index.d.ts +15 -2
  121. package/types/src/components/utils.d.ts +1 -1
  122. package/cjs/components/Alert/Alert.stories.js +0 -34
  123. package/cjs/components/Button/Button.stories.js +0 -109
  124. package/cjs/components/Cuttable/Cuttable.stories.js +0 -46
  125. package/cjs/components/Dialog/Dialog.stories.js +0 -49
  126. package/cjs/components/Drawer/Drawer.stories.js +0 -65
  127. package/cjs/components/Form/Form.stories.js +0 -35
  128. package/cjs/components/FormFieldCheckbox/FormFieldCheckbox.stories.js +0 -32
  129. package/cjs/components/Icon/Icon.stories.js +0 -32
  130. package/cjs/components/ItemLink/ItemLink.stories.js +0 -20
  131. package/cjs/components/ItemList/ItemList.stories.js +0 -122
  132. package/cjs/components/List/List.stories.js +0 -152
  133. package/cjs/components/Markdown/Markdown.stories.js +0 -51
  134. package/cjs/components/Menu/Menu.stories.js +0 -77
  135. package/cjs/components/Popover/Popover.stories.js +0 -60
  136. package/cjs/components/Select/Select.stories.js +0 -57
  137. package/cjs/components/Skeleton/Skeleton.stories.js +0 -24
  138. package/cjs/components/Skeleton/SkeletonTabs.stories.js +0 -15
  139. package/cjs/components/Skeleton/SkeletonText.stories.js +0 -33
  140. package/cjs/components/Status/Status.stories.js +0 -19
  141. package/cjs/components/Tabs/Tabs.stories.js +0 -24
  142. package/esm/components/Alert/Alert.stories.js +0 -27
  143. package/esm/components/Button/Button.stories.js +0 -99
  144. package/esm/components/Cuttable/Cuttable.stories.js +0 -39
  145. package/esm/components/Dialog/Dialog.stories.js +0 -42
  146. package/esm/components/Drawer/Drawer.stories.js +0 -56
  147. package/esm/components/Form/Form.stories.js +0 -27
  148. package/esm/components/FormFieldCheckbox/FormFieldCheckbox.stories.js +0 -23
  149. package/esm/components/Icon/Icon.stories.js +0 -23
  150. package/esm/components/ItemLink/ItemLink.stories.js +0 -12
  151. package/esm/components/ItemList/ItemList.stories.js +0 -109
  152. package/esm/components/List/List.stories.js +0 -139
  153. package/esm/components/Markdown/Markdown.stories.js +0 -43
  154. package/esm/components/Menu/Menu.stories.js +0 -65
  155. package/esm/components/Popover/Popover.stories.js +0 -52
  156. package/esm/components/Select/Select.stories.js +0 -48
  157. package/esm/components/Skeleton/Skeleton.stories.js +0 -15
  158. package/esm/components/Skeleton/SkeletonTabs.stories.js +0 -7
  159. package/esm/components/Skeleton/SkeletonText.stories.js +0 -23
  160. package/esm/components/Status/Status.stories.js +0 -11
  161. package/esm/components/Tabs/Tabs.stories.js +0 -16
  162. package/styleguide/build/bundle.2a886a79.js +0 -2
  163. package/types/src/components/Alert/Alert.stories.d.ts +0 -11
  164. package/types/src/components/Button/Button.stories.d.ts +0 -17
  165. package/types/src/components/Cuttable/Cuttable.stories.d.ts +0 -17
  166. package/types/src/components/Dialog/Dialog.stories.d.ts +0 -25
  167. package/types/src/components/Drawer/Drawer.stories.d.ts +0 -43
  168. package/types/src/components/Form/Form.stories.d.ts +0 -13
  169. package/types/src/components/FormFieldCheckbox/FormFieldCheckbox.stories.d.ts +0 -20
  170. package/types/src/components/Icon/Icon.stories.d.ts +0 -7
  171. package/types/src/components/ItemLink/ItemLink.stories.d.ts +0 -12
  172. package/types/src/components/ItemList/ItemList.stories.d.ts +0 -172
  173. package/types/src/components/List/List.stories.d.ts +0 -30
  174. package/types/src/components/Markdown/Markdown.stories.d.ts +0 -10
  175. package/types/src/components/Menu/Menu.stories.d.ts +0 -20
  176. package/types/src/components/Popover/Popover.stories.d.ts +0 -25
  177. package/types/src/components/Select/Select.stories.d.ts +0 -12
  178. package/types/src/components/Skeleton/Skeleton.stories.d.ts +0 -15
  179. package/types/src/components/Skeleton/SkeletonTabs.stories.d.ts +0 -5
  180. package/types/src/components/Skeleton/SkeletonText.stories.d.ts +0 -23
  181. package/types/src/components/Status/Status.stories.d.ts +0 -11
  182. package/types/src/components/Tabs/Tabs.stories.d.ts +0 -10
  183. /package/styleguide/build/{bundle.2a886a79.js.LICENSE.txt → bundle.6318f4a5.js.LICENSE.txt} +0 -0
@@ -1,42 +0,0 @@
1
- // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
2
-
3
- import { useState } from 'react';
4
- import Button from '../Button';
5
- import Dialog from './Dialog';
6
- import image from '../../docs/public/placeholders/placeholder_400x400.svg';
7
- import { jsx as _jsx } from "react/jsx-runtime";
8
- import { Fragment as _Fragment } from "react/jsx-runtime";
9
- import { jsxs as _jsxs } from "react/jsx-runtime";
10
- export const Basic = args => {
11
- const [isOpen, setIsOpen] = useState(false);
12
- return /*#__PURE__*/_jsxs(_Fragment, {
13
- children: [/*#__PURE__*/_jsx(Button, {
14
- onClick: () => setIsOpen(true),
15
- "data-id": "trigger",
16
- children: 'Open'
17
- }), /*#__PURE__*/_jsx(Dialog, {
18
- ...args,
19
- "data-type": "test",
20
- isOpen: isOpen,
21
- onClose: () => setIsOpen(false)
22
- })]
23
- });
24
- };
25
- Basic.args = {
26
- children: 'Dialog content.',
27
- title: 'Title',
28
- subtitle: 'Subtitle'
29
- };
30
- export const WithSideBanner = args => /*#__PURE__*/_jsx(Basic, {
31
- ...args
32
- });
33
- WithSideBanner.args = {
34
- ...Basic.args,
35
- size: 'xs',
36
- sideBanner: /*#__PURE__*/_jsx("img", {
37
- src: image
38
- }),
39
- sideBannerContainer: {
40
- background: 'skyblue'
41
- }
42
- };
@@ -1,56 +0,0 @@
1
- // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
2
-
3
- import { useState } from 'react';
4
- import Button from '../Button';
5
- import Drawer from './Drawer';
6
- import image from '../../docs/public/placeholders/placeholder_400x400.svg';
7
- import { jsx as _jsx } from "react/jsx-runtime";
8
- import { Fragment as _Fragment } from "react/jsx-runtime";
9
- import { jsxs as _jsxs } from "react/jsx-runtime";
10
- export const Basic = args => {
11
- const [isOpen, setIsOpen] = useState(false);
12
- return /*#__PURE__*/_jsxs(_Fragment, {
13
- children: [/*#__PURE__*/_jsx(Button, {
14
- onClick: () => setIsOpen(true),
15
- "data-id": "trigger",
16
- children: 'Open'
17
- }), /*#__PURE__*/_jsx(Drawer, {
18
- ...args,
19
- "data-type": "test",
20
- isOpen: isOpen,
21
- onClose: () => setIsOpen(false)
22
- })]
23
- });
24
- };
25
- Basic.args = {
26
- children: 'Drawer content.',
27
- title: 'Title',
28
- subtitle: 'Subtitle'
29
- };
30
- export const WithForm = args => /*#__PURE__*/_jsx(Basic, {
31
- ...args
32
- });
33
- WithForm.args = {
34
- ...Basic.args,
35
- form: {}
36
- };
37
- export const WithSideBanner = args => /*#__PURE__*/_jsx(Basic, {
38
- ...args
39
- });
40
- WithSideBanner.args = {
41
- ...Basic.args,
42
- size: 'xs',
43
- sideBanner: /*#__PURE__*/_jsx("img", {
44
- src: image
45
- }),
46
- sideBannerContainer: {
47
- background: 'skyblue'
48
- }
49
- };
50
- export const WithClosingConfirmation = args => /*#__PURE__*/_jsx(Basic, {
51
- ...args
52
- });
53
- WithClosingConfirmation.args = {
54
- ...Basic.args,
55
- closingConfirmation: true
56
- };
@@ -1,27 +0,0 @@
1
- // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
2
-
3
- import Form from './Form';
4
- import FormFieldText from '../FormFieldText';
5
- import FormFieldPassword from '../FormFieldPassword';
6
- import FormFieldCheckbox from '../FormFieldCheckbox';
7
- import { jsx as _jsx } from "react/jsx-runtime";
8
- export const Basic = args => /*#__PURE__*/_jsx(Form, {
9
- ...args
10
- });
11
- Basic.args = {
12
- values: {
13
- field1: 'Value 1',
14
- field2: 'Value 2',
15
- field3: true
16
- },
17
- children: [/*#__PURE__*/_jsx(FormFieldText, {
18
- label: "Field 1",
19
- name: "field1"
20
- }, "1"), /*#__PURE__*/_jsx(FormFieldPassword, {
21
- label: "Field 2",
22
- name: "field2"
23
- }, "2"), /*#__PURE__*/_jsx(FormFieldCheckbox, {
24
- label: "Field 3",
25
- name: "field3"
26
- }, "3")]
27
- };
@@ -1,23 +0,0 @@
1
- // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
2
-
3
- import Form from '../Form';
4
- import FormFieldCheckbox from './FormFieldCheckbox';
5
- import { jsx as _jsx } from "react/jsx-runtime";
6
- export const Basic = args => /*#__PURE__*/_jsx(Form, {
7
- children: /*#__PURE__*/_jsx(FormFieldCheckbox, {
8
- ...args
9
- })
10
- });
11
- Basic.args = {
12
- name: 'name',
13
- label: 'Lorem ipsum dolor sit amet.'
14
- };
15
- export const WithFullDescription = args => /*#__PURE__*/_jsx(Basic, {
16
- ...args
17
- });
18
- WithFullDescription.args = {
19
- ...Basic.args,
20
- label: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac justo sed neque interdum varius. Aenean sollicitudin placerat orci, quis viverra libero mattis a. Morbi ac erat sed elit ullamcorper laoreet sed eget tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.',
21
- fullDescription: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac justo sed neque interdum varius. Aenean sollicitudin placerat orci, quis viverra libero mattis a.',
22
- required: true
23
- };
@@ -1,23 +0,0 @@
1
- // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
2
-
3
- import Icon from './Icon';
4
- import { NAMES_12 } from './constants';
5
- import { jsx as _jsx } from "react/jsx-runtime";
6
- export const Basic = args => /*#__PURE__*/_jsx(Icon, {
7
- ...args
8
- });
9
- Basic.args = {};
10
- export const All = () => /*#__PURE__*/_jsx("div", {
11
- style: {
12
- display: 'inline-block'
13
- },
14
- id: "icons",
15
- children: NAMES_12.map(name => /*#__PURE__*/_jsx("div", {
16
- style: {
17
- margin: 16
18
- },
19
- children: /*#__PURE__*/_jsx(Icon, {
20
- name: name
21
- })
22
- }, name))
23
- });
@@ -1,12 +0,0 @@
1
- // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
2
-
3
- import ItemLink from './ItemLink';
4
- import { jsx as _jsx } from "react/jsx-runtime";
5
- export const Basic = args => /*#__PURE__*/_jsx(ItemLink, {
6
- ...args
7
- });
8
- Basic.args = {
9
- children: 'Add new item',
10
- onClick: () => {},
11
- 'data-test': 'item-link'
12
- };
@@ -1,109 +0,0 @@
1
- // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
2
-
3
- import { cloneElement } from 'react';
4
- import ItemList from './ItemList';
5
- import Item from '../Item';
6
- import Icon from '../Icon';
7
- import { jsx as _jsx } from "react/jsx-runtime";
8
- export const Basic = args => /*#__PURE__*/_jsx(ItemList, {
9
- ...args
10
- });
11
- Basic.args = {
12
- minColumnWidth: 220,
13
- gap: 'md',
14
- children: [/*#__PURE__*/_jsx(Item, {
15
- value: "1",
16
- title: "Title 1",
17
- description: "Description 1",
18
- "data-test": "item1",
19
- icon: /*#__PURE__*/_jsx(Icon, {
20
- name: "star-circle-filled",
21
- intent: "info"
22
- }),
23
- onClick: () => {},
24
- children: 'Content 1'
25
- }, "1"), /*#__PURE__*/_jsx(Item, {
26
- value: "2",
27
- title: "Title 2",
28
- description: "Description 2",
29
- "data-test": "item2",
30
- icon: /*#__PURE__*/_jsx(Icon, {
31
- name: "star-circle-filled",
32
- intent: "success"
33
- }),
34
- onClick: () => {},
35
- children: 'Content 2'
36
- }, "2"), /*#__PURE__*/_jsx(Item, {
37
- value: "3",
38
- title: "Title 3",
39
- description: "Description 3",
40
- "data-test": "item3",
41
- icon: /*#__PURE__*/_jsx(Icon, {
42
- name: "star-circle-filled",
43
- intent: "warning"
44
- }),
45
- onClick: () => {},
46
- hoverable: true,
47
- children: 'Content 3'
48
- }, "3"), /*#__PURE__*/_jsx(Item, {
49
- value: "4",
50
- title: "Title 4",
51
- description: "Description 4",
52
- "data-test": "item4",
53
- icon: /*#__PURE__*/_jsx(Icon, {
54
- name: "star-circle-filled",
55
- intent: "danger"
56
- }),
57
- onClick: () => {},
58
- disabled: true,
59
- hoverable: true,
60
- children: 'Content 4'
61
- }, "4")]
62
- };
63
- export const Cards = Basic.bind(null);
64
- Cards.args = {
65
- ...Basic.args,
66
- children: Basic.args.children.map(child => child ? /*#__PURE__*/cloneElement(child, {
67
- view: 'card',
68
- footer: `Footer ${child.props.value}`
69
- }) : null)
70
- };
71
- export const Reorderables = Basic.bind(null);
72
- Reorderables.args = {
73
- ...Basic.args,
74
- reorderable: true
75
- };
76
- export const Selectables = Basic.bind(null);
77
- Selectables.args = {
78
- ...Basic.args,
79
- selectable: true,
80
- defaultValue: '2'
81
- };
82
- export const HoverableItemList = Basic.bind(null);
83
- HoverableItemList.args = {
84
- ...Basic.args,
85
- hoverable: true,
86
- defaultValue: '2',
87
- children: Basic.args.children.map((child, index) => {
88
- if (!child) {
89
- return null;
90
- }
91
- return /*#__PURE__*/cloneElement(child, {
92
- hoverable: index === 0 ? false : undefined
93
- });
94
- })
95
- };
96
- export const HoverableItems = Basic.bind(null);
97
- HoverableItems.args = {
98
- ...Basic.args,
99
- hoverable: false,
100
- defaultValue: '2',
101
- children: Basic.args.children.map((child, index) => {
102
- if (!child) {
103
- return null;
104
- }
105
- return /*#__PURE__*/cloneElement(child, {
106
- hoverable: index % 2 === 0
107
- });
108
- })
109
- };
@@ -1,139 +0,0 @@
1
- // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
2
-
3
- import { useState } from 'react';
4
- import List from './List';
5
- import ListActions from './ListActions';
6
- import ListAction from './ListAction';
7
- import { jsx as _jsx } from "react/jsx-runtime";
8
- import { jsxs as _jsxs } from "react/jsx-runtime";
9
- export const Basic = args => /*#__PURE__*/_jsx(List, {
10
- ...args
11
- });
12
- Basic.args = {
13
- columns: [{
14
- key: 'col1',
15
- title: 'Countr 2',
16
- type: 'title'
17
- }, {
18
- key: 'col2',
19
- title: 'Population',
20
- align: 'right'
21
- }],
22
- data: [{
23
- key: '1',
24
- col1: 'China',
25
- col2: '1 433 783 686'
26
- }, {
27
- key: '2',
28
- col1: 'India',
29
- col2: '1 366 417 754'
30
- }, {
31
- key: '3',
32
- col1: 'United States',
33
- col2: '329 064 917'
34
- }, {
35
- key: '4',
36
- col1: ' Indonesia',
37
- col2: '270 625 568'
38
- }, {
39
- key: '5',
40
- col1: 'Pakistan',
41
- col2: '216 565 318'
42
- }]
43
- };
44
- export const Vertical = Basic.bind(null);
45
- Vertical.args = {
46
- ...Basic.args,
47
- vertical: 480
48
- };
49
- export const Nested = Basic.bind(null);
50
- Nested.args = {
51
- ...Basic.args,
52
- data: [{
53
- key: '1',
54
- col1: 'China',
55
- col2: '1 433 783 686',
56
- data: [{
57
- key: '2',
58
- col1: 'Guangdong',
59
- col2: '113 460 126'
60
- }, {
61
- key: '3',
62
- col1: 'Shandong',
63
- col2: '100 471 831'
64
- }]
65
- }, {
66
- key: '4',
67
- col1: 'India',
68
- col2: '1 366 417 754',
69
- data: [{
70
- key: '5',
71
- col1: 'Uttar Pradesh',
72
- col2: '237 882 725'
73
- }, {
74
- key: '6',
75
- col1: 'Bihar',
76
- col2: '124 799 926'
77
- }]
78
- }]
79
- };
80
- export const NestedFullFeatured = Nested.bind(null);
81
- NestedFullFeatured.args = {
82
- ...Nested.args,
83
- onSelectionChange: () => {},
84
- renderRowBody: () => null
85
- };
86
- export const ExpandedList = Nested.bind(null);
87
- ExpandedList.args = {
88
- ...Nested.args,
89
- onSelectionChange: () => {},
90
- renderRowBody: () => 'row body',
91
- expandedRows: ['1', '2', '4', '6']
92
- };
93
- export const Reorderable = args => {
94
- const {
95
- data: initialData,
96
- ...props
97
- } = args;
98
- const [data, setData] = useState(initialData);
99
- const handleReorderEnd = _ref => {
100
- let {
101
- oldIndex,
102
- newIndex
103
- } = _ref;
104
- const nextData = [...data];
105
- nextData.splice(newIndex, 0, nextData.splice(oldIndex, 1)[0]);
106
- setData(nextData);
107
- };
108
- return /*#__PURE__*/_jsx(Basic, {
109
- data: data,
110
- reorderable: true,
111
- onReorderEnd: handleReorderEnd,
112
- ...props
113
- });
114
- };
115
- Reorderable.args = {
116
- ...Basic.args
117
- };
118
- export const ReorderableFullFeatured = Reorderable.bind(null);
119
- ReorderableFullFeatured.args = {
120
- ...Reorderable.args,
121
- columns: [...Reorderable.args.columns, {
122
- key: 'actions',
123
- type: 'actions',
124
- render: () => /*#__PURE__*/_jsxs(ListActions, {
125
- children: [/*#__PURE__*/_jsx(ListAction, {
126
- icon: "clip",
127
- primary: true
128
- }), /*#__PURE__*/_jsx(ListAction, {
129
- icon: "clock",
130
- primary: true
131
- }), /*#__PURE__*/_jsx(ListAction, {
132
- icon: "clone",
133
- primary: true
134
- })]
135
- })
136
- }],
137
- onSelectionChange: () => {},
138
- renderRowBody: () => null
139
- };
@@ -1,43 +0,0 @@
1
- // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
2
-
3
- import Markdown from './Markdown';
4
- import { jsx as _jsx } from "react/jsx-runtime";
5
- export const Basic = args => /*#__PURE__*/_jsx(Markdown, {
6
- ...args
7
- });
8
- Basic.args = {
9
- children: `
10
- # Heading
11
-
12
- ## Sub-heading
13
-
14
- ### Another deeper heading
15
-
16
- Paragraphs are separated
17
- by a blank line.
18
-
19
- Two spaces at the end of a line leave a
20
- line break.
21
-
22
- Text attributes _italic_, *italic*, __bold__, **bold**, \`monospace\`.
23
-
24
- Horizontal rule:
25
-
26
- ---
27
-
28
- Bullet list:
29
-
30
- * apples
31
- * oranges
32
- * pears
33
-
34
- Numbered list:
35
-
36
- 1. apples
37
- 2. oranges
38
- 3. pears
39
-
40
- A [link](http://example.com).
41
-
42
- <b>Sanitize</b>`
43
- };
@@ -1,65 +0,0 @@
1
- // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
2
-
3
- import { cloneElement } from 'react';
4
- import Menu, { MenuItem, MenuDivider, MenuHeader } from '.';
5
- import Label from '../Label';
6
- import { jsx as _jsx } from "react/jsx-runtime";
7
- export const Basic = args => /*#__PURE__*/_jsx(Menu, {
8
- ...args
9
- });
10
- Basic.args = {
11
- children: [/*#__PURE__*/_jsx(MenuItem, {
12
- "data-test": "one",
13
- children: 'One'
14
- }, "1"), /*#__PURE__*/_jsx(MenuItem, {
15
- "data-test": "two",
16
- children: 'Two'
17
- }, "2"), /*#__PURE__*/_jsx(MenuItem, {
18
- "data-test": "three",
19
- disabled: true,
20
- children: 'Three'
21
- }, "3")]
22
- };
23
- export const Tooltip = Basic.bind(null);
24
- Tooltip.args = {
25
- children: Basic.args.children.map((item, index) => {
26
- if (index === 0) {
27
- return /*#__PURE__*/cloneElement(item, {
28
- tooltip: 'One tooltip!'
29
- });
30
- }
31
- return item;
32
- })
33
- };
34
- export const FullFeatured = Basic.bind(null);
35
- FullFeatured.args = {
36
- children: [/*#__PURE__*/_jsx(MenuHeader, {
37
- children: 'Header 1'
38
- }, "1"), /*#__PURE__*/_jsx(MenuItem, {
39
- "data-test": "2",
40
- onClick: () => {},
41
- icon: "folder-open",
42
- children: 'One'
43
- }, "2"), /*#__PURE__*/_jsx(MenuItem, {
44
- "data-test": "3",
45
- onClick: () => {},
46
- icon: "folder-open",
47
- label: /*#__PURE__*/_jsx(Label, {
48
- intent: "danger",
49
- children: '99'
50
- }),
51
- children: 'Two'
52
- }, "3"), /*#__PURE__*/_jsx(MenuDivider, {}, "4"), /*#__PURE__*/_jsx(MenuHeader, {
53
- children: 'Header 2'
54
- }, "5"), /*#__PURE__*/_jsx(MenuItem, {
55
- "data-test": "6",
56
- onClick: () => {},
57
- icon: "folder-open",
58
- children: 'Three'
59
- }, "6"), /*#__PURE__*/_jsx(MenuItem, {
60
- "data-test": "7",
61
- onClick: () => {},
62
- icon: "folder-open",
63
- children: 'Four'
64
- }, "7")]
65
- };
@@ -1,52 +0,0 @@
1
- // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
2
-
3
- import Link from '../Link';
4
- import Button from '../Button';
5
- import Paragraph from '../Paragraph';
6
- import Popover from './Popover';
7
- import { jsx as _jsx } from "react/jsx-runtime";
8
- import { Fragment as _Fragment } from "react/jsx-runtime";
9
- import { jsxs as _jsxs } from "react/jsx-runtime";
10
- export const Basic = args => /*#__PURE__*/_jsx(Popover, {
11
- ...args
12
- });
13
- Basic.args = {
14
- target: /*#__PURE__*/_jsx(Link, {
15
- "data-id": "trigger",
16
- children: 'Trigger'
17
- }),
18
- children: 'Content'
19
- };
20
- export const ThreeButtons = args => /*#__PURE__*/_jsx(Basic, {
21
- ...args
22
- });
23
- ThreeButtons.args = {
24
- ...Basic.args,
25
- children: /*#__PURE__*/_jsxs(_Fragment, {
26
- children: [/*#__PURE__*/_jsx(Paragraph, {
27
- children: 'Enim ea occaecat dolor veniam.'
28
- }), /*#__PURE__*/_jsx(Button, {
29
- "data-id": "button-1",
30
- children: 'Button 1'
31
- }), /*#__PURE__*/_jsx(Paragraph, {
32
- children: 'Incididunt ipsum nulla officia adipisicing voluptate enim reprehenderit.'
33
- }), /*#__PURE__*/_jsx(Button, {
34
- "data-id": "button-2",
35
- children: 'Button 2'
36
- }), ` `, /*#__PURE__*/_jsx(Button, {
37
- "data-id": "button-3",
38
- children: 'Button 3'
39
- }), /*#__PURE__*/_jsx(Paragraph, {
40
- children: 'Cillum sunt nisi aute amet elit ut sit dolor in aliqua minim.'
41
- })]
42
- })
43
- };
44
- export const Autofocus = args => /*#__PURE__*/_jsx(Basic, {
45
- ...args
46
- });
47
- Autofocus.args = {
48
- ...Basic.args,
49
- children: /*#__PURE__*/_jsx("input", {
50
- autoFocus: true
51
- })
52
- };
@@ -1,48 +0,0 @@
1
- // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
2
-
3
- import Select from './Select';
4
- import SelectOption from './SelectOption';
5
- import { jsx as _jsx } from "react/jsx-runtime";
6
- export const Basic = args => /*#__PURE__*/_jsx(Select, {
7
- ...args
8
- });
9
- Basic.args = {
10
- children: [/*#__PURE__*/_jsx(SelectOption, {
11
- children: 'One'
12
- }, "1"), /*#__PURE__*/_jsx(SelectOption, {
13
- children: 'Two'
14
- }, "2"), /*#__PURE__*/_jsx(SelectOption, {
15
- children: 'Three'
16
- }, "3"), /*#__PURE__*/_jsx(SelectOption, {
17
- children: 'Four'
18
- }, "4"), /*#__PURE__*/_jsx(SelectOption, {
19
- children: 'Five'
20
- }, "5"), /*#__PURE__*/_jsx(SelectOption, {
21
- children: 'Six'
22
- }, "6"), /*#__PURE__*/_jsx(SelectOption, {
23
- children: 'Seven'
24
- }, "7"), /*#__PURE__*/_jsx(SelectOption, {
25
- children: 'Eight'
26
- }, "8"), /*#__PURE__*/_jsx(SelectOption, {
27
- children: 'Nine'
28
- }, "9"), /*#__PURE__*/_jsx(SelectOption, {
29
- children: 'Ten'
30
- }, "10"), /*#__PURE__*/_jsx(SelectOption, {
31
- children: 'Eleven'
32
- }, "11"), /*#__PURE__*/_jsx(SelectOption, {
33
- children: 'Twelve'
34
- }, "12")],
35
- 'data-test': 'select'
36
- };
37
- export const SearchableAtBottom = () => /*#__PURE__*/_jsx("div", {
38
- style: {
39
- position: 'absolute',
40
- left: 0,
41
- bottom: 0,
42
- padding: 16
43
- },
44
- children: /*#__PURE__*/_jsx(Basic, {
45
- searchable: true,
46
- ...Basic.args
47
- })
48
- });
@@ -1,15 +0,0 @@
1
- // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
2
-
3
- import Skeleton from './Skeleton';
4
- import { jsx as _jsx } from "react/jsx-runtime";
5
- export const Basic = args => /*#__PURE__*/_jsx(Skeleton, {
6
- ...args
7
- });
8
- Basic.args = {};
9
- export const CustomSize = args => /*#__PURE__*/_jsx(Basic, {
10
- ...args
11
- });
12
- CustomSize.args = {
13
- width: 200,
14
- height: 100
15
- };
@@ -1,7 +0,0 @@
1
- // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
2
-
3
- import SkeletonTabs from './SkeletonTabs';
4
- import { jsx as _jsx } from "react/jsx-runtime";
5
- export const Basic = args => /*#__PURE__*/_jsx(SkeletonTabs, {
6
- ...args
7
- });