@bolio-ui/core 1.1.6 → 1.1.8
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.
- package/README.md +0 -4
- package/dist/Popover/Popover.d.ts +8 -9
- package/dist/Popover/index.js +35 -18
- package/dist/index.js +54 -37
- package/esm/Popover/Popover.d.ts +8 -9
- package/esm/Popover/Popover.js +32 -15
- package/package.json +26 -24
- package/esm/Avatar/stories.js +0 -113
- package/esm/Badge/stories.js +0 -92
- package/esm/Breadcrumbs/stories.js +0 -51
- package/esm/Button/stories.js +0 -221
- package/esm/ButtonDropdown/stories.js +0 -92
- package/esm/ButtonGroup/stories.js +0 -66
- package/esm/Capacity/stories.js +0 -85
- package/esm/Card/stories.js +0 -175
- package/esm/Checkbox/stories.js +0 -84
- package/esm/Code/stories.js +0 -53
- package/esm/Collapse/stories.js +0 -48
- package/esm/Description/stories.js +0 -23
- package/esm/Divider/stories.js +0 -41
- package/esm/Dot/stories.js +0 -40
- package/esm/Drawer/stories.js +0 -79
- package/esm/Fieldset/stories.js +0 -72
- package/esm/Grid/stories.js +0 -212
- package/esm/Icon/stories.js +0 -36
- package/esm/Image/stories.js +0 -73
- package/esm/Input/stories.js +0 -145
- package/esm/Keyboard/stories.js +0 -43
- package/esm/Link/stories.js +0 -59
- package/esm/Loading/stories.js +0 -75
- package/esm/Modal/stories.js +0 -165
- package/esm/Note/stories.js +0 -68
- package/esm/Page/stories.js +0 -54
- package/esm/Pagination/stories.js +0 -49
- package/esm/Popover/stories.js +0 -84
- package/esm/Progress/stories.js +0 -114
- package/esm/Radio/stories.js +0 -98
- package/esm/Rating/stories.js +0 -72
- package/esm/Select/stories.js +0 -239
- package/esm/Slider/stories.js +0 -134
- package/esm/Snippet/stories.js +0 -177
- package/esm/Spacer/stories.js +0 -54
- package/esm/Spinner/stories.js +0 -13
- package/esm/Table/stories.js +0 -269
- package/esm/Tabs/stories.js +0 -92
- package/esm/Tag/stories.js +0 -58
- package/esm/Text/stories.js +0 -104
- package/esm/Textarea/stories.js +0 -104
- package/esm/Toggle/stories.js +0 -55
- package/esm/Tooltip/stories.js +0 -183
- package/examples/create-redwoodjs/.redwood/README.md +0 -44
package/esm/Loading/stories.js
DELETED
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
import Loading from '.';
|
|
2
|
-
import Grid from '../Grid';
|
|
3
|
-
export default {
|
|
4
|
-
title: 'Feedback/Loading',
|
|
5
|
-
component: Loading
|
|
6
|
-
};
|
|
7
|
-
export var Default = function Default() {
|
|
8
|
-
return /*#__PURE__*/React.createElement(Grid.Container, {
|
|
9
|
-
gap: 2
|
|
10
|
-
}, /*#__PURE__*/React.createElement(Grid, {
|
|
11
|
-
xs: 12,
|
|
12
|
-
md: 12
|
|
13
|
-
}, /*#__PURE__*/React.createElement(Loading, null)));
|
|
14
|
-
};
|
|
15
|
-
export var WithText = function WithText() {
|
|
16
|
-
return /*#__PURE__*/React.createElement(Grid.Container, {
|
|
17
|
-
gap: 2
|
|
18
|
-
}, /*#__PURE__*/React.createElement(Grid, {
|
|
19
|
-
xs: 12,
|
|
20
|
-
md: 12
|
|
21
|
-
}, /*#__PURE__*/React.createElement(Loading, null, "Loading")));
|
|
22
|
-
};
|
|
23
|
-
export var Types = function Types() {
|
|
24
|
-
return /*#__PURE__*/React.createElement(Grid.Container, {
|
|
25
|
-
gap: 2
|
|
26
|
-
}, /*#__PURE__*/React.createElement(Grid, {
|
|
27
|
-
xs: 3,
|
|
28
|
-
md: 3
|
|
29
|
-
}, /*#__PURE__*/React.createElement(Loading, null)), /*#__PURE__*/React.createElement(Grid, {
|
|
30
|
-
xs: 3,
|
|
31
|
-
md: 3
|
|
32
|
-
}, /*#__PURE__*/React.createElement(Loading, {
|
|
33
|
-
type: "primary"
|
|
34
|
-
})), /*#__PURE__*/React.createElement(Grid, {
|
|
35
|
-
xs: 3,
|
|
36
|
-
md: 3
|
|
37
|
-
}, /*#__PURE__*/React.createElement(Loading, {
|
|
38
|
-
type: "secondary"
|
|
39
|
-
})), /*#__PURE__*/React.createElement(Grid, {
|
|
40
|
-
xs: 3,
|
|
41
|
-
md: 3
|
|
42
|
-
}, /*#__PURE__*/React.createElement(Loading, {
|
|
43
|
-
type: "success"
|
|
44
|
-
})), /*#__PURE__*/React.createElement(Grid, {
|
|
45
|
-
xs: 3,
|
|
46
|
-
md: 3
|
|
47
|
-
}, /*#__PURE__*/React.createElement(Loading, {
|
|
48
|
-
type: "warning"
|
|
49
|
-
})), /*#__PURE__*/React.createElement(Grid, {
|
|
50
|
-
xs: 3,
|
|
51
|
-
md: 3
|
|
52
|
-
}, /*#__PURE__*/React.createElement(Loading, {
|
|
53
|
-
type: "error"
|
|
54
|
-
})), /*#__PURE__*/React.createElement(Grid, {
|
|
55
|
-
xs: 3,
|
|
56
|
-
md: 3
|
|
57
|
-
}, /*#__PURE__*/React.createElement(Loading, {
|
|
58
|
-
type: "info"
|
|
59
|
-
})));
|
|
60
|
-
};
|
|
61
|
-
export var Spaces = function Spaces() {
|
|
62
|
-
return /*#__PURE__*/React.createElement(Grid.Container, {
|
|
63
|
-
gap: 2
|
|
64
|
-
}, /*#__PURE__*/React.createElement(Grid, {
|
|
65
|
-
xs: 6,
|
|
66
|
-
md: 6
|
|
67
|
-
}, /*#__PURE__*/React.createElement(Loading, {
|
|
68
|
-
spaceRatio: 10
|
|
69
|
-
})), /*#__PURE__*/React.createElement(Grid, {
|
|
70
|
-
xs: 6,
|
|
71
|
-
md: 6
|
|
72
|
-
}, /*#__PURE__*/React.createElement(Loading, {
|
|
73
|
-
spaceRatio: 5
|
|
74
|
-
})));
|
|
75
|
-
};
|
package/esm/Modal/stories.js
DELETED
|
@@ -1,165 +0,0 @@
|
|
|
1
|
-
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
-
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
3
|
-
import React, { useState } from 'react';
|
|
4
|
-
import Modal from '.';
|
|
5
|
-
import Button from '../Button';
|
|
6
|
-
import Grid from '../Grid';
|
|
7
|
-
import useModal from '../use-modal';
|
|
8
|
-
export default {
|
|
9
|
-
title: 'Feedback/Modal',
|
|
10
|
-
component: Modal
|
|
11
|
-
};
|
|
12
|
-
export var Default = function Default() {
|
|
13
|
-
var _useState = useState(false),
|
|
14
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
15
|
-
state = _useState2[0],
|
|
16
|
-
setState = _useState2[1];
|
|
17
|
-
|
|
18
|
-
var handler = function handler() {
|
|
19
|
-
return setState(true);
|
|
20
|
-
};
|
|
21
|
-
|
|
22
|
-
return /*#__PURE__*/React.createElement(Grid.Container, {
|
|
23
|
-
gap: 2
|
|
24
|
-
}, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
|
|
25
|
-
auto: true,
|
|
26
|
-
onClick: handler
|
|
27
|
-
}, "Show Modal"), /*#__PURE__*/React.createElement(Modal, {
|
|
28
|
-
visible: state,
|
|
29
|
-
onClose: function onClose() {
|
|
30
|
-
return setState(false);
|
|
31
|
-
}
|
|
32
|
-
}, /*#__PURE__*/React.createElement(Modal.Title, null, "Modal"), /*#__PURE__*/React.createElement(Modal.Subtitle, null, "Example of a modal"), /*#__PURE__*/React.createElement(Modal.Content, null, /*#__PURE__*/React.createElement("p", null, "Demo content for the modal.")), /*#__PURE__*/React.createElement(Modal.Action, {
|
|
33
|
-
passive: true,
|
|
34
|
-
onClick: function onClick() {
|
|
35
|
-
return setState(false);
|
|
36
|
-
}
|
|
37
|
-
}, "Cancel"), /*#__PURE__*/React.createElement(Modal.Action, null, "Accepted"))));
|
|
38
|
-
};
|
|
39
|
-
export var UseModal = function UseModal() {
|
|
40
|
-
var _useModal = useModal(),
|
|
41
|
-
setVisible = _useModal.setVisible,
|
|
42
|
-
bindings = _useModal.bindings;
|
|
43
|
-
|
|
44
|
-
return /*#__PURE__*/React.createElement(Grid.Container, {
|
|
45
|
-
gap: 2
|
|
46
|
-
}, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
|
|
47
|
-
auto: true,
|
|
48
|
-
onClick: function onClick() {
|
|
49
|
-
return setVisible(true);
|
|
50
|
-
}
|
|
51
|
-
}, "Show Modal"), /*#__PURE__*/React.createElement(Modal, bindings, /*#__PURE__*/React.createElement(Modal.Title, null, "Modal"), /*#__PURE__*/React.createElement(Modal.Subtitle, null, "Example of a modal"), /*#__PURE__*/React.createElement(Modal.Content, null, /*#__PURE__*/React.createElement("p", null, "Demo content for the modal.")), /*#__PURE__*/React.createElement(Modal.Action, {
|
|
52
|
-
passive: true,
|
|
53
|
-
onClick: function onClick() {
|
|
54
|
-
return setVisible(false);
|
|
55
|
-
}
|
|
56
|
-
}, "Cancel"), /*#__PURE__*/React.createElement(Modal.Action, null, "Accepted"))));
|
|
57
|
-
};
|
|
58
|
-
export var WithoutActions = function WithoutActions() {
|
|
59
|
-
var _useState3 = useState(false),
|
|
60
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
61
|
-
state = _useState4[0],
|
|
62
|
-
setState = _useState4[1];
|
|
63
|
-
|
|
64
|
-
var handler = function handler() {
|
|
65
|
-
return setState(true);
|
|
66
|
-
};
|
|
67
|
-
|
|
68
|
-
return /*#__PURE__*/React.createElement(Grid.Container, {
|
|
69
|
-
gap: 2
|
|
70
|
-
}, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
|
|
71
|
-
auto: true,
|
|
72
|
-
onClick: handler
|
|
73
|
-
}, "Show Modal"), /*#__PURE__*/React.createElement(Modal, {
|
|
74
|
-
visible: state,
|
|
75
|
-
onClose: function onClose() {
|
|
76
|
-
return setState(false);
|
|
77
|
-
}
|
|
78
|
-
}, /*#__PURE__*/React.createElement(Modal.Title, null, "Modal"), /*#__PURE__*/React.createElement(Modal.Subtitle, null, "Example of a modal"), /*#__PURE__*/React.createElement(Modal.Content, null, /*#__PURE__*/React.createElement("p", null, "Demo content for the modal.")))));
|
|
79
|
-
};
|
|
80
|
-
export var DisabledAction = function DisabledAction() {
|
|
81
|
-
var _useState5 = useState(false),
|
|
82
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
83
|
-
state = _useState6[0],
|
|
84
|
-
setState = _useState6[1];
|
|
85
|
-
|
|
86
|
-
var handler = function handler() {
|
|
87
|
-
return setState(true);
|
|
88
|
-
};
|
|
89
|
-
|
|
90
|
-
var closeHandler = function closeHandler() {
|
|
91
|
-
setState(false);
|
|
92
|
-
console.log('closed');
|
|
93
|
-
};
|
|
94
|
-
|
|
95
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
|
|
96
|
-
auto: true,
|
|
97
|
-
onClick: handler
|
|
98
|
-
}, "Show Modal"), /*#__PURE__*/React.createElement(Modal, {
|
|
99
|
-
visible: state,
|
|
100
|
-
onClose: closeHandler
|
|
101
|
-
}, /*#__PURE__*/React.createElement(Modal.Title, null, "Modal"), /*#__PURE__*/React.createElement(Modal.Subtitle, null, "Example of a modal"), /*#__PURE__*/React.createElement(Modal.Content, null, /*#__PURE__*/React.createElement("p", null, "Demo content for the modal.")), /*#__PURE__*/React.createElement(Modal.Action, {
|
|
102
|
-
passive: true,
|
|
103
|
-
onClick: function onClick() {
|
|
104
|
-
return setState(false);
|
|
105
|
-
}
|
|
106
|
-
}, "Cancel"), /*#__PURE__*/React.createElement(Modal.Action, {
|
|
107
|
-
disabled: true
|
|
108
|
-
}, "Submit")));
|
|
109
|
-
};
|
|
110
|
-
export var Customized = function Customized() {
|
|
111
|
-
var _useModal2 = useModal(),
|
|
112
|
-
setVisible = _useModal2.setVisible,
|
|
113
|
-
bindings = _useModal2.bindings;
|
|
114
|
-
|
|
115
|
-
return /*#__PURE__*/React.createElement(Grid.Container, {
|
|
116
|
-
gap: 2
|
|
117
|
-
}, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
|
|
118
|
-
auto: true,
|
|
119
|
-
onClick: function onClick() {
|
|
120
|
-
return setVisible(true);
|
|
121
|
-
}
|
|
122
|
-
}, "Show Modal"), /*#__PURE__*/React.createElement(Modal, _extends({
|
|
123
|
-
width: "35rem"
|
|
124
|
-
}, bindings), /*#__PURE__*/React.createElement(Modal.Title, null, "My Favorites"), /*#__PURE__*/React.createElement(Modal.Content, null, /*#__PURE__*/React.createElement("p", null, "This is the width I want.")))));
|
|
125
|
-
};
|
|
126
|
-
export var Loading = function Loading() {
|
|
127
|
-
var _useModal3 = useModal(),
|
|
128
|
-
setVisible = _useModal3.setVisible,
|
|
129
|
-
bindings = _useModal3.bindings;
|
|
130
|
-
|
|
131
|
-
return /*#__PURE__*/React.createElement(Grid.Container, {
|
|
132
|
-
gap: 2
|
|
133
|
-
}, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
|
|
134
|
-
auto: true,
|
|
135
|
-
onClick: function onClick() {
|
|
136
|
-
return setVisible(true);
|
|
137
|
-
}
|
|
138
|
-
}, "Show Modal"), /*#__PURE__*/React.createElement(Modal, bindings, /*#__PURE__*/React.createElement(Modal.Title, null, "Modal"), /*#__PURE__*/React.createElement(Modal.Subtitle, null, "Example of a modal"), /*#__PURE__*/React.createElement(Modal.Content, null, /*#__PURE__*/React.createElement("p", null, "Demo content for the modal.")), /*#__PURE__*/React.createElement(Modal.Action, {
|
|
139
|
-
passive: true,
|
|
140
|
-
onClick: function onClick() {
|
|
141
|
-
return setVisible(false);
|
|
142
|
-
}
|
|
143
|
-
}, "Cancel"), /*#__PURE__*/React.createElement(Modal.Action, {
|
|
144
|
-
loading: true
|
|
145
|
-
}, "Accepted"))));
|
|
146
|
-
};
|
|
147
|
-
export var Overlong = function Overlong() {
|
|
148
|
-
var _useModal4 = useModal(),
|
|
149
|
-
setVisible = _useModal4.setVisible,
|
|
150
|
-
bindings = _useModal4.bindings;
|
|
151
|
-
|
|
152
|
-
return /*#__PURE__*/React.createElement(Grid.Container, {
|
|
153
|
-
gap: 2
|
|
154
|
-
}, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
|
|
155
|
-
auto: true,
|
|
156
|
-
onClick: function onClick() {
|
|
157
|
-
return setVisible(true);
|
|
158
|
-
}
|
|
159
|
-
}, "Show Modal"), /*#__PURE__*/React.createElement(Modal, bindings, /*#__PURE__*/React.createElement(Modal.Title, null, "Modal"), /*#__PURE__*/React.createElement(Modal.Subtitle, null, "Modal with a very large content"), /*#__PURE__*/React.createElement(Modal.Content, null, /*#__PURE__*/React.createElement("p", null, "React has been designed from the start for gradual adoption, and you can use as little or as much React as you need. Whether you want to get a taste of React, add some interactivity to a simple HTML page, or start a complex React-powered app, the links in this section will help you get started."), /*#__PURE__*/React.createElement("p", null, "React has been designed from the start for gradual adoption, and you can use as little or as much React as you need. Whether you want to get a taste of React, add some interactivity to a simple HTML page, or start a complex React-powered app, the links in this section will help you get started."), /*#__PURE__*/React.createElement("p", null, "React has been designed from the start for gradual adoption, and you can use as little or as much React as you need. Whether you want to get a taste of React, add some interactivity to a simple HTML page, or start a complex React-powered app, the links in this section will help you get started."), /*#__PURE__*/React.createElement("p", null, "React has been designed from the start for gradual adoption, and you can use as little or as much React as you need. Whether you want to get a taste of React, add some interactivity to a simple HTML page, or start a complex React-powered app, the links in this section will help you get started."), /*#__PURE__*/React.createElement("p", null, "React has been designed from the start for gradual adoption, and you can use as little or as much React as you need. Whether you want to get a taste of React, add some interactivity to a simple HTML page, or start a complex React-powered app, the links in this section will help you get started."), /*#__PURE__*/React.createElement("p", null, "React has been designed from the start for gradual adoption, and you can use as little or as much React as you need. Whether you want to get a taste of React, add some interactivity to a simple HTML page, or start a complex React-powered app, the links in this section will help you get started."), /*#__PURE__*/React.createElement("p", null, "React has been designed from the start for gradual adoption, and you can use as little or as much React as you need. Whether you want to get a taste of React, add some interactivity to a simple HTML page, or start a complex React-powered app, the links in this section will help you get started.")), /*#__PURE__*/React.createElement(Modal.Action, {
|
|
160
|
-
passive: true,
|
|
161
|
-
onClick: function onClick() {
|
|
162
|
-
return setVisible(false);
|
|
163
|
-
}
|
|
164
|
-
}, "Cancel"), /*#__PURE__*/React.createElement(Modal.Action, null, "Accepted"))));
|
|
165
|
-
};
|
package/esm/Note/stories.js
DELETED
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
import Note from '.';
|
|
2
|
-
import Grid from '../Grid';
|
|
3
|
-
export default {
|
|
4
|
-
title: 'Feedback/Note',
|
|
5
|
-
component: Note
|
|
6
|
-
};
|
|
7
|
-
export var Default = function Default() {
|
|
8
|
-
return /*#__PURE__*/React.createElement(Grid.Container, {
|
|
9
|
-
gap: 2
|
|
10
|
-
}, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Note, null, "Check payment pending.")));
|
|
11
|
-
};
|
|
12
|
-
export var Types = function Types() {
|
|
13
|
-
return /*#__PURE__*/React.createElement(Grid.Container, {
|
|
14
|
-
gap: 2
|
|
15
|
-
}, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Note, null, "Check payment pending.")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Note, {
|
|
16
|
-
type: "primary"
|
|
17
|
-
}, "Check payment pending.")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Note, {
|
|
18
|
-
type: "secondary"
|
|
19
|
-
}, "Check payment pending.")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Note, {
|
|
20
|
-
type: "success"
|
|
21
|
-
}, "Check payment pending.")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Note, {
|
|
22
|
-
type: "warning"
|
|
23
|
-
}, "Check payment pending.")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Note, {
|
|
24
|
-
type: "error"
|
|
25
|
-
}, "Check payment pending.")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Note, {
|
|
26
|
-
type: "info"
|
|
27
|
-
}, "Check payment pending.")));
|
|
28
|
-
};
|
|
29
|
-
export var HiddenLabel = function HiddenLabel() {
|
|
30
|
-
return /*#__PURE__*/React.createElement(Grid.Container, {
|
|
31
|
-
gap: 2
|
|
32
|
-
}, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Note, {
|
|
33
|
-
label: false
|
|
34
|
-
}, "Demo note!")));
|
|
35
|
-
};
|
|
36
|
-
export var CustomLabel = function CustomLabel() {
|
|
37
|
-
return /*#__PURE__*/React.createElement(Grid.Container, {
|
|
38
|
-
gap: 2
|
|
39
|
-
}, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Note, {
|
|
40
|
-
label: "custom"
|
|
41
|
-
}, "Customize a note.")));
|
|
42
|
-
};
|
|
43
|
-
export var FilledVariant = function FilledVariant() {
|
|
44
|
-
return /*#__PURE__*/React.createElement(Grid.Container, {
|
|
45
|
-
gap: 2
|
|
46
|
-
}, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Note, {
|
|
47
|
-
label: "custom",
|
|
48
|
-
filled: true
|
|
49
|
-
}, "Customize a note.")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Note, {
|
|
50
|
-
label: false,
|
|
51
|
-
filled: true
|
|
52
|
-
}, "Demo note!")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Note, {
|
|
53
|
-
type: "success",
|
|
54
|
-
label: "success",
|
|
55
|
-
filled: true
|
|
56
|
-
}, "Check payment pending.")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Note, {
|
|
57
|
-
type: "warning",
|
|
58
|
-
label: "warning",
|
|
59
|
-
filled: true
|
|
60
|
-
}, "Check payment pending.")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Note, {
|
|
61
|
-
type: "error",
|
|
62
|
-
label: "error",
|
|
63
|
-
filled: true
|
|
64
|
-
}, "Check payment pending.")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Note, {
|
|
65
|
-
type: "secondary",
|
|
66
|
-
filled: true
|
|
67
|
-
}, "Check payment pending.")));
|
|
68
|
-
};
|
package/esm/Page/stories.js
DELETED
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
2
|
-
import React, { useState } from 'react';
|
|
3
|
-
import Page from '.';
|
|
4
|
-
import Button from '../Button';
|
|
5
|
-
import Grid from '../Grid';
|
|
6
|
-
import MockPage from '../MdxWidgets/MockPage';
|
|
7
|
-
export default {
|
|
8
|
-
title: 'Layout/Page',
|
|
9
|
-
component: Page
|
|
10
|
-
};
|
|
11
|
-
export var Default = function Default() {
|
|
12
|
-
var Child = function Child() {
|
|
13
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h2", null, "Hi my dear!"), /*#__PURE__*/React.createElement("p", null, "This is an example to show the body of a page."));
|
|
14
|
-
};
|
|
15
|
-
|
|
16
|
-
var _useState = useState(false),
|
|
17
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
18
|
-
visible = _useState2[0],
|
|
19
|
-
setVisible = _useState2[1];
|
|
20
|
-
|
|
21
|
-
return /*#__PURE__*/React.createElement(Grid.Container, {
|
|
22
|
-
gap: 2
|
|
23
|
-
}, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
|
|
24
|
-
onClick: function onClick() {
|
|
25
|
-
return setVisible(true);
|
|
26
|
-
},
|
|
27
|
-
auto: true
|
|
28
|
-
}, "View Page"), /*#__PURE__*/React.createElement(MockPage, {
|
|
29
|
-
visible: visible,
|
|
30
|
-
onClose: function onClose() {
|
|
31
|
-
return setVisible(false);
|
|
32
|
-
}
|
|
33
|
-
}, /*#__PURE__*/React.createElement(Page, null, /*#__PURE__*/React.createElement(Child, null)))));
|
|
34
|
-
};
|
|
35
|
-
export var Content = function Content() {
|
|
36
|
-
var _React$useState = React.useState(false),
|
|
37
|
-
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
38
|
-
visible = _React$useState2[0],
|
|
39
|
-
setVisible = _React$useState2[1];
|
|
40
|
-
|
|
41
|
-
return /*#__PURE__*/React.createElement(Grid.Container, {
|
|
42
|
-
gap: 2
|
|
43
|
-
}, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
|
|
44
|
-
onClick: function onClick() {
|
|
45
|
-
return setVisible(true);
|
|
46
|
-
},
|
|
47
|
-
auto: true
|
|
48
|
-
}, "Header, Body and Footer"), /*#__PURE__*/React.createElement(MockPage, {
|
|
49
|
-
visible: visible,
|
|
50
|
-
onClose: function onClose() {
|
|
51
|
-
return setVisible(false);
|
|
52
|
-
}
|
|
53
|
-
}, /*#__PURE__*/React.createElement(Page, null, /*#__PURE__*/React.createElement(Page.Header, null, /*#__PURE__*/React.createElement("h2", null, "Header")), /*#__PURE__*/React.createElement(Page.Content, null, /*#__PURE__*/React.createElement("h2", null, "Hi my dear!"), /*#__PURE__*/React.createElement("p", null, "This is an example to show the body of a page.")), /*#__PURE__*/React.createElement(Page.Footer, null, /*#__PURE__*/React.createElement("h2", null, "Footer"))))));
|
|
54
|
-
};
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import Pagination from '.';
|
|
2
|
-
import Grid from '../Grid';
|
|
3
|
-
import { ChevronRight, ChevronLeft, ArrowRight, ArrowLeft, ArrowRightCircle, ArrowLeftCircle } from '@bolio-ui/icons';
|
|
4
|
-
export default {
|
|
5
|
-
title: 'Navigation/Pagination',
|
|
6
|
-
component: Pagination
|
|
7
|
-
};
|
|
8
|
-
export var Default = function Default() {
|
|
9
|
-
return /*#__PURE__*/React.createElement(Grid.Container, {
|
|
10
|
-
gap: 2
|
|
11
|
-
}, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Pagination, {
|
|
12
|
-
count: 20,
|
|
13
|
-
initialPage: 3
|
|
14
|
-
})));
|
|
15
|
-
};
|
|
16
|
-
export var Limit = function Limit() {
|
|
17
|
-
return /*#__PURE__*/React.createElement(Grid.Container, {
|
|
18
|
-
gap: 2,
|
|
19
|
-
direction: "column"
|
|
20
|
-
}, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Pagination, {
|
|
21
|
-
count: 10,
|
|
22
|
-
limit: 10
|
|
23
|
-
})), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Pagination, {
|
|
24
|
-
count: 5
|
|
25
|
-
})), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Pagination, {
|
|
26
|
-
count: 10,
|
|
27
|
-
initialPage: 6,
|
|
28
|
-
limit: 5
|
|
29
|
-
})), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Pagination, {
|
|
30
|
-
count: 10,
|
|
31
|
-
initialPage: 6
|
|
32
|
-
})), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Pagination, {
|
|
33
|
-
count: 30,
|
|
34
|
-
initialPage: 6,
|
|
35
|
-
limit: 10
|
|
36
|
-
})));
|
|
37
|
-
};
|
|
38
|
-
export var Icon = function Icon() {
|
|
39
|
-
return /*#__PURE__*/React.createElement(Grid.Container, {
|
|
40
|
-
gap: 2,
|
|
41
|
-
direction: "column"
|
|
42
|
-
}, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Pagination, {
|
|
43
|
-
count: 5
|
|
44
|
-
}, /*#__PURE__*/React.createElement(Pagination.Next, null, /*#__PURE__*/React.createElement(ChevronRight, null)), /*#__PURE__*/React.createElement(Pagination.Previous, null, /*#__PURE__*/React.createElement(ChevronLeft, null)))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Pagination, {
|
|
45
|
-
count: 5
|
|
46
|
-
}, /*#__PURE__*/React.createElement(Pagination.Next, null, /*#__PURE__*/React.createElement(ArrowRight, null)), /*#__PURE__*/React.createElement(Pagination.Previous, null, /*#__PURE__*/React.createElement(ArrowLeft, null)))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Pagination, {
|
|
47
|
-
count: 5
|
|
48
|
-
}, /*#__PURE__*/React.createElement(Pagination.Next, null, /*#__PURE__*/React.createElement(ArrowRightCircle, null)), /*#__PURE__*/React.createElement(Pagination.Previous, null, /*#__PURE__*/React.createElement(ArrowLeftCircle, null)))));
|
|
49
|
-
};
|
package/esm/Popover/stories.js
DELETED
|
@@ -1,84 +0,0 @@
|
|
|
1
|
-
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
2
|
-
import React, { useState } from 'react';
|
|
3
|
-
import Popover from '.';
|
|
4
|
-
import Link from '../Link';
|
|
5
|
-
import Spacer from '../Spacer';
|
|
6
|
-
import Grid from '../Grid';
|
|
7
|
-
export default {
|
|
8
|
-
title: 'Data Display/Popover',
|
|
9
|
-
component: Popover
|
|
10
|
-
};
|
|
11
|
-
export var Default = function Default() {
|
|
12
|
-
var content = function content() {
|
|
13
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
14
|
-
style: {
|
|
15
|
-
padding: '0 10px'
|
|
16
|
-
}
|
|
17
|
-
}, /*#__PURE__*/React.createElement(Link, {
|
|
18
|
-
href: "#"
|
|
19
|
-
}, "A hyperlink"), /*#__PURE__*/React.createElement(Spacer, {
|
|
20
|
-
h: 0.5
|
|
21
|
-
}), /*#__PURE__*/React.createElement(Link, {
|
|
22
|
-
color: true,
|
|
23
|
-
href: "#"
|
|
24
|
-
}, "External link"));
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
return /*#__PURE__*/React.createElement(Grid.Container, {
|
|
28
|
-
gap: 2
|
|
29
|
-
}, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Popover, {
|
|
30
|
-
content: content
|
|
31
|
-
}, "Menu")));
|
|
32
|
-
};
|
|
33
|
-
export var PresetItem = function PresetItem() {
|
|
34
|
-
var content = function content() {
|
|
35
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Popover.Item, {
|
|
36
|
-
title: true
|
|
37
|
-
}, /*#__PURE__*/React.createElement("span", null, "User Settings")), /*#__PURE__*/React.createElement(Popover.Item, null, /*#__PURE__*/React.createElement(Link, {
|
|
38
|
-
href: "#"
|
|
39
|
-
}, "A hyperlink")), /*#__PURE__*/React.createElement(Popover.Item, null, /*#__PURE__*/React.createElement(Link, {
|
|
40
|
-
color: true,
|
|
41
|
-
href: "#"
|
|
42
|
-
}, "A hyperlink for edit profile")), /*#__PURE__*/React.createElement(Popover.Item, {
|
|
43
|
-
line: true
|
|
44
|
-
}), /*#__PURE__*/React.createElement(Popover.Item, null, /*#__PURE__*/React.createElement("span", null, "Command-Line")));
|
|
45
|
-
};
|
|
46
|
-
|
|
47
|
-
return /*#__PURE__*/React.createElement(Grid.Container, {
|
|
48
|
-
gap: 2
|
|
49
|
-
}, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Popover, {
|
|
50
|
-
content: content
|
|
51
|
-
}, "Menu")));
|
|
52
|
-
};
|
|
53
|
-
export var CloseManual = function CloseManual() {
|
|
54
|
-
var _useState = useState(false),
|
|
55
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
56
|
-
visible = _useState2[0],
|
|
57
|
-
setVisible = _useState2[1];
|
|
58
|
-
|
|
59
|
-
var changeHandler = function changeHandler(next) {
|
|
60
|
-
setVisible(next);
|
|
61
|
-
};
|
|
62
|
-
|
|
63
|
-
var content = function content() {
|
|
64
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
65
|
-
style: {
|
|
66
|
-
padding: '0 10px'
|
|
67
|
-
}
|
|
68
|
-
}, /*#__PURE__*/React.createElement("span", {
|
|
69
|
-
onClick: function onClick() {
|
|
70
|
-
return setVisible(false);
|
|
71
|
-
}
|
|
72
|
-
}, "Click to close"), /*#__PURE__*/React.createElement(Spacer, {
|
|
73
|
-
h: 0.5
|
|
74
|
-
}), /*#__PURE__*/React.createElement("span", null, "Nothing"));
|
|
75
|
-
};
|
|
76
|
-
|
|
77
|
-
return /*#__PURE__*/React.createElement(Grid.Container, {
|
|
78
|
-
gap: 2
|
|
79
|
-
}, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Popover, {
|
|
80
|
-
content: content,
|
|
81
|
-
visible: visible,
|
|
82
|
-
onVisibleChange: changeHandler
|
|
83
|
-
}, "Menu")));
|
|
84
|
-
};
|
package/esm/Progress/stories.js
DELETED
|
@@ -1,114 +0,0 @@
|
|
|
1
|
-
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
2
|
-
import React, { useState } from 'react';
|
|
3
|
-
import useTheme from '../use-theme';
|
|
4
|
-
import Progress from '.';
|
|
5
|
-
import Grid from '../Grid';
|
|
6
|
-
import Button from '../Button';
|
|
7
|
-
export default {
|
|
8
|
-
title: 'Feedback/Progress',
|
|
9
|
-
component: Progress
|
|
10
|
-
};
|
|
11
|
-
export var Default = function Default() {
|
|
12
|
-
return /*#__PURE__*/React.createElement(Grid.Container, {
|
|
13
|
-
gap: 2
|
|
14
|
-
}, /*#__PURE__*/React.createElement(Grid, {
|
|
15
|
-
xs: 12,
|
|
16
|
-
md: 12
|
|
17
|
-
}, /*#__PURE__*/React.createElement(Progress, {
|
|
18
|
-
value: 50
|
|
19
|
-
})));
|
|
20
|
-
};
|
|
21
|
-
export var CustomMax = function CustomMax() {
|
|
22
|
-
return /*#__PURE__*/React.createElement(Grid.Container, {
|
|
23
|
-
gap: 2
|
|
24
|
-
}, /*#__PURE__*/React.createElement(Grid, {
|
|
25
|
-
xs: 12,
|
|
26
|
-
md: 12
|
|
27
|
-
}, /*#__PURE__*/React.createElement(Progress, {
|
|
28
|
-
value: 45,
|
|
29
|
-
max: 50
|
|
30
|
-
})));
|
|
31
|
-
};
|
|
32
|
-
export var DynamicColors = function DynamicColors() {
|
|
33
|
-
var theme = useTheme();
|
|
34
|
-
|
|
35
|
-
var _useState = useState(20),
|
|
36
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
37
|
-
value = _useState2[0],
|
|
38
|
-
setValue = _useState2[1];
|
|
39
|
-
|
|
40
|
-
var colors = {
|
|
41
|
-
20: theme.palette.error,
|
|
42
|
-
40: theme.palette.warning,
|
|
43
|
-
60: theme.palette.success,
|
|
44
|
-
80: '#000'
|
|
45
|
-
};
|
|
46
|
-
return /*#__PURE__*/React.createElement(Grid.Container, {
|
|
47
|
-
gap: 2
|
|
48
|
-
}, /*#__PURE__*/React.createElement(Grid, {
|
|
49
|
-
xs: 12,
|
|
50
|
-
md: 12
|
|
51
|
-
}, /*#__PURE__*/React.createElement(Progress, {
|
|
52
|
-
value: value,
|
|
53
|
-
colors: colors
|
|
54
|
-
})), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
|
|
55
|
-
onClick: function onClick() {
|
|
56
|
-
return setValue(value + 20);
|
|
57
|
-
},
|
|
58
|
-
auto: true,
|
|
59
|
-
scale: 0.5
|
|
60
|
-
}, "Add")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
|
|
61
|
-
onClick: function onClick() {
|
|
62
|
-
return setValue(20);
|
|
63
|
-
},
|
|
64
|
-
auto: true,
|
|
65
|
-
scale: 0.5,
|
|
66
|
-
type: "error"
|
|
67
|
-
}, "Remove")));
|
|
68
|
-
};
|
|
69
|
-
export var Type = function Type() {
|
|
70
|
-
return /*#__PURE__*/React.createElement(Grid.Container, {
|
|
71
|
-
gap: 2
|
|
72
|
-
}, /*#__PURE__*/React.createElement(Grid, {
|
|
73
|
-
xs: 12,
|
|
74
|
-
md: 12
|
|
75
|
-
}, /*#__PURE__*/React.createElement(Progress, {
|
|
76
|
-
value: 3
|
|
77
|
-
})), /*#__PURE__*/React.createElement(Grid, {
|
|
78
|
-
xs: 12,
|
|
79
|
-
md: 12
|
|
80
|
-
}, /*#__PURE__*/React.createElement(Progress, {
|
|
81
|
-
type: "primary",
|
|
82
|
-
value: 74
|
|
83
|
-
})), /*#__PURE__*/React.createElement(Grid, {
|
|
84
|
-
xs: 12,
|
|
85
|
-
md: 12
|
|
86
|
-
}, /*#__PURE__*/React.createElement(Progress, {
|
|
87
|
-
type: "secondary",
|
|
88
|
-
value: 10
|
|
89
|
-
})), /*#__PURE__*/React.createElement(Grid, {
|
|
90
|
-
xs: 12,
|
|
91
|
-
md: 12
|
|
92
|
-
}, /*#__PURE__*/React.createElement(Progress, {
|
|
93
|
-
type: "success",
|
|
94
|
-
value: 45
|
|
95
|
-
})), /*#__PURE__*/React.createElement(Grid, {
|
|
96
|
-
xs: 12,
|
|
97
|
-
md: 12
|
|
98
|
-
}, /*#__PURE__*/React.createElement(Progress, {
|
|
99
|
-
type: "warning",
|
|
100
|
-
value: 100
|
|
101
|
-
})), /*#__PURE__*/React.createElement(Grid, {
|
|
102
|
-
xs: 12,
|
|
103
|
-
md: 12
|
|
104
|
-
}, /*#__PURE__*/React.createElement(Progress, {
|
|
105
|
-
type: "error",
|
|
106
|
-
value: 21
|
|
107
|
-
})), /*#__PURE__*/React.createElement(Grid, {
|
|
108
|
-
xs: 12,
|
|
109
|
-
md: 12
|
|
110
|
-
}, /*#__PURE__*/React.createElement(Progress, {
|
|
111
|
-
type: "info",
|
|
112
|
-
value: 34
|
|
113
|
-
})));
|
|
114
|
-
};
|