@desynova-digital/components 9.0.26 → 9.1.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 (170) hide show
  1. package/_helpers/globals.js +9 -10
  2. package/_helpers/pagination.js +10 -15
  3. package/_helpers/story-example.js +16 -39
  4. package/_helpers/story-helpers.js +15 -14
  5. package/_helpers/story-stack.js +22 -43
  6. package/_helpers/uniqueId.js +2 -5
  7. package/_helpers/utils.js +28 -4
  8. package/atoms/avatar/avatar.js +19 -42
  9. package/atoms/avatar/avatar.story.js +25 -58
  10. package/atoms/avatar/index.js +13 -11
  11. package/atoms/badge/badge.js +14 -37
  12. package/atoms/badge/badge.story.js +45 -103
  13. package/atoms/badge/index.js +12 -10
  14. package/atoms/button/button.js +85 -161
  15. package/atoms/button/button.story.js +354 -508
  16. package/atoms/button/index.js +5 -9
  17. package/atoms/card/card.js +26 -55
  18. package/atoms/card/card.story.js +39 -88
  19. package/atoms/card/index.js +12 -10
  20. package/atoms/cardStack/cardStack.js +88 -147
  21. package/atoms/cardStack/cardStack.story.js +106 -210
  22. package/atoms/cardStack/index.js +12 -10
  23. package/atoms/cardV2/cardV2.js +57 -106
  24. package/atoms/cardV2/cardV2.story.js +184 -232
  25. package/atoms/cardV2/content.js +154 -256
  26. package/atoms/cardV2/index.js +4 -8
  27. package/atoms/cardV2/thumbnail.js +138 -208
  28. package/atoms/cardV2/timeline.js +167 -123
  29. package/atoms/checkbox/checkbox.js +85 -157
  30. package/atoms/checkbox/checkbox.story.js +237 -365
  31. package/atoms/checkbox/index.js +4 -9
  32. package/atoms/customSelect/customSelect.js +136 -215
  33. package/atoms/customSelect/customSelect.story.js +745 -851
  34. package/atoms/customSelect/index.js +4 -8
  35. package/atoms/datePicker/datePicker.js +299 -431
  36. package/atoms/datePicker/datePicker.story.js +453 -501
  37. package/atoms/datePicker/index.js +4 -8
  38. package/atoms/dateTime/dateTime.js +3 -6
  39. package/atoms/dateTime/dateTime.story.js +17 -63
  40. package/atoms/dateTime/index.js +5 -9
  41. package/atoms/draftInputText/draftInputText.js +121 -189
  42. package/atoms/draftInputText/draftInputText.story.js +200 -249
  43. package/atoms/draftInputText/index.js +5 -9
  44. package/atoms/dropdown/dropdown.js +38 -66
  45. package/atoms/dropdown/dropdown.story.js +102 -262
  46. package/atoms/dropdown/index.js +4 -8
  47. package/atoms/dropdownList/dropdownList.js +78 -108
  48. package/atoms/dropdownList/dropdownList.story.js +1546 -1621
  49. package/atoms/dropdownList/index.js +4 -8
  50. package/atoms/graphs/barGraph/barGraph.js +95 -146
  51. package/atoms/graphs/barGraph/barGraph.story.js +65 -87
  52. package/atoms/graphs/barGraph/index.js +4 -8
  53. package/atoms/graphs/circleDonut/circleDonut.js +177 -229
  54. package/atoms/graphs/circleDonut/circleDonut.story.js +328 -394
  55. package/atoms/graphs/circleDonut/index.js +5 -9
  56. package/atoms/graphs/circleGraph/circleGraph.js +60 -90
  57. package/atoms/graphs/circleGraph/circleGraph.story.js +36 -54
  58. package/atoms/graphs/circleGraph/index.js +4 -8
  59. package/atoms/graphs/circleNested/circleNested.js +216 -262
  60. package/atoms/graphs/circleNested/circleNested.story.js +91 -116
  61. package/atoms/graphs/circleNested/index.js +5 -9
  62. package/atoms/graphs/pieChart/index.js +4 -8
  63. package/atoms/graphs/pieChart/pieChart.js +162 -191
  64. package/atoms/graphs/pieChart/pieChart.story.js +147 -176
  65. package/atoms/graphs/verticalBarGraph/index.js +5 -9
  66. package/atoms/graphs/verticalBarGraph/verticalBarGraph.js +75 -98
  67. package/atoms/graphs/verticalBarGraph/verticalBarGraph.story.js +26 -45
  68. package/atoms/icon/icon.js +41 -72
  69. package/atoms/icon/icon.story.js +831 -260
  70. package/atoms/icon/index.js +19 -12
  71. package/atoms/image/image.js +18 -32
  72. package/atoms/image/image.story.js +10 -19
  73. package/atoms/image/index.js +4 -8
  74. package/atoms/inputText/index.js +4 -8
  75. package/atoms/inputText/inputText.js +86 -131
  76. package/atoms/inputText/inputText.story.js +191 -255
  77. package/atoms/label/index.js +4 -8
  78. package/atoms/label/label.js +25 -50
  79. package/atoms/label/label.story.js +42 -83
  80. package/atoms/loader/CircleLoader.js +29 -63
  81. package/atoms/loader/ShimmerComponent/CollabShimmerCard.js +39 -50
  82. package/atoms/loader/ShimmerComponent/CollabShimmerCardTray.js +41 -42
  83. package/atoms/loader/ShimmerComponent/FiltersShimmer.js +30 -30
  84. package/atoms/loader/ShimmerComponent/GraphDetailShimmer.js +21 -34
  85. package/atoms/loader/ShimmerComponent/GraphTitleShimmer.js +30 -34
  86. package/atoms/loader/ShimmerComponent/GraphsComponentShimmer.js +23 -32
  87. package/atoms/loader/ShimmerComponent/Shimmer.js +24 -32
  88. package/atoms/loader/ThreeDotLoader.js +14 -29
  89. package/atoms/loader/index.js +13 -11
  90. package/atoms/loader/loader.js +34 -58
  91. package/atoms/loader/loader.story.js +48 -52
  92. package/atoms/loader/spinningLoader.js +23 -34
  93. package/atoms/popup/index.js +5 -9
  94. package/atoms/popup/popup.js +123 -208
  95. package/atoms/popup/popup.story.js +97 -131
  96. package/atoms/radio/index.js +18 -11
  97. package/atoms/radio/radio.js +58 -112
  98. package/atoms/radio/radio.story.js +197 -420
  99. package/atoms/select/index.js +4 -8
  100. package/atoms/select/select.js +48 -86
  101. package/atoms/sideBar/index.js +5 -9
  102. package/atoms/sideBar/sidebar.js +89 -140
  103. package/atoms/switch/index.js +4 -8
  104. package/atoms/switch/switch.js +56 -86
  105. package/atoms/switch/switch.story.js +268 -415
  106. package/atoms/tag/index.js +12 -10
  107. package/atoms/tag/tag.js +29 -63
  108. package/atoms/tag/tag.story.js +135 -209
  109. package/atoms/textarea/index.js +5 -9
  110. package/atoms/textarea/textarea.js +55 -99
  111. package/atoms/textarea/textarea.story.js +48 -41
  112. package/atoms/thematicBreak/index.js +12 -10
  113. package/atoms/thematicBreak/thematicBreak.js +20 -38
  114. package/atoms/thematicBreak/thematicBreak.story.js +25 -37
  115. package/atoms/timeCodeInput/index.js +4 -8
  116. package/atoms/timeCodeInput/timCodeInput.story.js +21 -35
  117. package/atoms/timeCodeInput/timeCodeInput.js +33 -51
  118. package/atoms/timer/index.js +5 -9
  119. package/atoms/timer/timer.js +57 -108
  120. package/atoms/timer/timer.story.js +13 -26
  121. package/atoms/toast/index.js +5 -9
  122. package/atoms/toast/toast.js +81 -116
  123. package/atoms/toast/toast.story.js +50 -76
  124. package/atoms/videoCard/index.js +12 -10
  125. package/atoms/videoCard/videoCard.js +265 -447
  126. package/atoms/videoCard/videoCard.story.js +495 -710
  127. package/components.js +411 -294
  128. package/index.js +350 -61
  129. package/molecules/carousel/carousel.js +121 -207
  130. package/molecules/carousel/carousel.story.js +240 -223
  131. package/molecules/carousel/index.js +5 -9
  132. package/molecules/errorScreen/CollabErrorScreen.js +35 -66
  133. package/molecules/errorScreen/TableErrorScreen.js +109 -102
  134. package/molecules/errorScreen/TableErrorScreen.jsx +7 -6
  135. package/molecules/errorScreen/errorScreen.js +41 -94
  136. package/molecules/filter/constants.js +1 -0
  137. package/molecules/filter/filter.js +378 -562
  138. package/molecules/filter/filter.story.js +79 -104
  139. package/molecules/filter/index.js +5 -9
  140. package/molecules/graphCard/graphCard.js +97 -193
  141. package/molecules/graphCard/graphCard.story.js +159 -191
  142. package/molecules/graphCard/index.js +4 -8
  143. package/molecules/graphCard/loader.js +28 -68
  144. package/molecules/graphDetailCard/graphDetailCard.js +115 -183
  145. package/molecules/graphDetailCard/graphDetailCard.story.js +218 -254
  146. package/molecules/graphDetailCard/index.js +5 -9
  147. package/molecules/pageHeader/index.js +12 -10
  148. package/molecules/pageHeader/pageHeader.js +38 -79
  149. package/molecules/pageHeader/pageHeader.story.js +34 -55
  150. package/molecules/pagination/index.js +4 -8
  151. package/molecules/pagination/pagination.js +126 -202
  152. package/molecules/pagination/pagination.story.js +40 -52
  153. package/molecules/richTextInput/RichTextInput.js +354 -0
  154. package/molecules/richTextInput/RichTextInput.story.js +50 -0
  155. package/molecules/richTextInput/index.js +9 -0
  156. package/molecules/table/index.js +4 -8
  157. package/molecules/table/table-column.js +10 -16
  158. package/molecules/table/table-header.js +31 -72
  159. package/molecules/table/table.js +743 -1075
  160. package/molecules/table/table.story.js +274 -304
  161. package/molecules/tabs/index.js +4 -8
  162. package/molecules/tabs/tabs.js +112 -184
  163. package/molecules/tabs/tabs.story.js +66 -133
  164. package/molecules/videoCardList/index.js +4 -8
  165. package/molecules/videoCardList/videoCardList.js +24 -41
  166. package/molecules/videoCardList/videoCardList.story.js +449 -664
  167. package/molecules/videoPlayer/index.js +4 -8
  168. package/molecules/videoPlayer/videoPlayer.js +1019 -1097
  169. package/molecules/videoPlayer/videoPlayer.story.js +10 -21
  170. package/package.json +2 -2
package/atoms/button/button.story.js CHANGED
@@ -1,512 +1,358 @@
1
- 'use strict';
1
+ "use strict";
2
2
 
3
- var _react = require('react');
4
-
5
- var _react2 = _interopRequireDefault(_react);
6
-
7
- var _react3 = require('@storybook/react');
8
-
9
- var _storyHelpers = require('../../_helpers/story-helpers');
10
-
11
- var _components = require('../../components');
12
-
13
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
-
15
- (0, _react3.storiesOf)('Button').add('light theme', function () {
16
- return _react2.default.createElement(
17
- _storyHelpers.Example,
18
- { title: 'Appearances' },
19
- _react2.default.createElement(
20
- _storyHelpers.Stack,
21
- null,
22
- _react2.default.createElement(
23
- _components.Button,
24
- null,
25
- 'Button'
26
- ),
27
- _react2.default.createElement(
28
- _components.Button,
29
- { appearance: 'default' },
30
- 'Default'
31
- ),
32
- _react2.default.createElement(
33
- _components.Button,
34
- { appearance: 'primary' },
35
- 'Primary'
36
- ),
37
- _react2.default.createElement(
38
- _components.Button,
39
- { appearance: 'bordered' },
40
- 'Bordered'
41
- ),
42
- _react2.default.createElement(
43
- _components.Button,
44
- { appearance: 'cta', display: 'rounded' },
45
- 'CTA'
46
- )
47
- ),
48
- _react2.default.createElement(
49
- _storyHelpers.Stack,
50
- null,
51
- _react2.default.createElement(
52
- _components.Button,
53
- { display: 'rounded', isLoading: true, showLoader: true, stretchWidth: true },
54
- 'Button'
55
- ),
56
- _react2.default.createElement(
57
- _components.Button,
58
- { appearance: 'primary', display: 'rounded' },
59
- 'Primary'
60
- ),
61
- _react2.default.createElement(
62
- _components.Button,
63
- { appearance: 'bordered', display: 'rounded' },
64
- 'Bordered'
65
- )
66
- ),
67
- _react2.default.createElement(
68
- _storyHelpers.Stack,
69
- null,
70
- _react2.default.createElement(
71
- _components.Button,
72
- { display: 'rounded', disabled: true },
73
- 'Disabled'
74
- ),
75
- _react2.default.createElement(
76
- _components.Button,
77
- { appearance: 'primary', disabled: true },
78
- 'Disabled'
79
- ),
80
- _react2.default.createElement(
81
- _components.Button,
82
- { appearance: 'bordered', disabled: true },
83
- 'Disabled'
84
- )
85
- ),
86
- _react2.default.createElement(
87
- _storyHelpers.Stack,
88
- null,
89
- _react2.default.createElement(
90
- _components.Button,
91
- { appearance: 'link', display: 'rounded', href: 'https://www.google.co.in/' },
92
- 'Link'
93
- ),
94
- _react2.default.createElement(
95
- _components.Button,
96
- { appearance: 'link', href: 'https://www.google.co.in/' },
97
- 'Link'
98
- ),
99
- _react2.default.createElement(
100
- _components.Button,
101
- { appearance: 'link', href: 'https://www.google.co.in/' },
102
- 'Link'
103
- )
104
- ),
105
- _react2.default.createElement(
106
- _storyHelpers.Stack,
107
- null,
108
- _react2.default.createElement(
109
- _components.Button,
110
- {
111
- display: 'rounded',
112
- icon: 'arrow-right',
113
- iconWidth: 20,
114
- iconHeight: 14,
115
- iconBackground: false
116
- },
117
- 'Next'
118
- ),
119
- _react2.default.createElement(
120
- _components.Button,
121
- { display: 'rounded', icon: 'arrow-right', iconWidth: 20, iconHeight: 14 },
122
- 'Submit'
123
- ),
124
- _react2.default.createElement(_components.Button, { display: 'rounded', icon: 'arrow-right', iconWidth: 20, iconHeight: 14 }),
125
- _react2.default.createElement(
126
- _components.Button,
127
- {
128
- appearance: 'bordered',
129
- display: 'rounded',
130
- iconLocation: 'left',
131
- iconBackground: false,
132
- iconHover: true,
133
- icon: 'okta-logo',
134
- iconWidth: 30,
135
- iconHeight: 30
136
- },
137
- 'Sign In with Okta'
138
- ),
139
- _react2.default.createElement(_components.Button, { appearance: 'cta', icon: 'search', iconWidth: 16, iconHeight: 16 }),
140
- _react2.default.createElement(_components.Button, {
141
- appearance: 'cta',
142
- icon: 'search',
143
- iconWidth: 16,
144
- iconHeight: 16,
145
- width: 40,
146
- height: 40
147
- }),
148
- _react2.default.createElement(_components.Button, {
149
- key: 'storyboard',
150
- display: 'rounded',
151
- icon: 'storyboard',
152
- width: 30,
153
- appearance: 'cta',
154
- height: 30,
155
- iconWidth: 13,
156
- iconHeight: 13
157
- }),
158
- _react2.default.createElement(_components.Button, {
159
- key: 'archive',
160
- display: 'rounded',
161
- icon: 'archive',
162
- width: 30,
163
- appearance: 'cta',
164
- height: 30,
165
- label: 'Archive',
166
- disabled: true,
167
- iconWidth: 13,
168
- iconHeight: 13
169
- })
170
- )
171
- );
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _react = _interopRequireDefault(require("react"));
5
+ var _react2 = require("@storybook/react");
6
+ var _storyHelpers = require("../../_helpers/story-helpers");
7
+ var _components = require("../../components");
8
+ (0, _react2.storiesOf)('Button').add('light theme', function () {
9
+ return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
10
+ title: "Appearances"
11
+ }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.Button, null, "Button"), /*#__PURE__*/_react["default"].createElement(_components.Button, {
12
+ appearance: "default"
13
+ }, "Default"), /*#__PURE__*/_react["default"].createElement(_components.Button, {
14
+ appearance: "primary"
15
+ }, "Primary"), /*#__PURE__*/_react["default"].createElement(_components.Button, {
16
+ appearance: "bordered"
17
+ }, "Bordered"), /*#__PURE__*/_react["default"].createElement(_components.Button, {
18
+ appearance: "cta",
19
+ display: "rounded"
20
+ }, "CTA")), /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.Button, {
21
+ display: "rounded",
22
+ isLoading: true,
23
+ showLoader: true,
24
+ stretchWidth: true
25
+ }, "Button"), /*#__PURE__*/_react["default"].createElement(_components.Button, {
26
+ appearance: "primary",
27
+ display: "rounded"
28
+ }, "Primary"), /*#__PURE__*/_react["default"].createElement(_components.Button, {
29
+ appearance: "bordered",
30
+ display: "rounded"
31
+ }, "Bordered")), /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.Button, {
32
+ display: "rounded",
33
+ disabled: true
34
+ }, "Disabled"), /*#__PURE__*/_react["default"].createElement(_components.Button, {
35
+ appearance: "primary",
36
+ disabled: true
37
+ }, "Disabled"), /*#__PURE__*/_react["default"].createElement(_components.Button, {
38
+ appearance: "bordered",
39
+ disabled: true
40
+ }, "Disabled")), /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.Button, {
41
+ appearance: "link",
42
+ display: "rounded",
43
+ href: "https://www.google.co.in/"
44
+ }, "Link"), /*#__PURE__*/_react["default"].createElement(_components.Button, {
45
+ appearance: "link",
46
+ href: "https://www.google.co.in/"
47
+ }, "Link"), /*#__PURE__*/_react["default"].createElement(_components.Button, {
48
+ appearance: "link",
49
+ href: "https://www.google.co.in/"
50
+ }, "Link")), /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.Button, {
51
+ display: "rounded",
52
+ icon: "arrow-right",
53
+ iconWidth: 20,
54
+ iconHeight: 14,
55
+ iconBackground: false
56
+ }, "Next"), /*#__PURE__*/_react["default"].createElement(_components.Button, {
57
+ display: "rounded",
58
+ icon: "arrow-right",
59
+ iconWidth: 20,
60
+ iconHeight: 14
61
+ }, "Submit"), /*#__PURE__*/_react["default"].createElement(_components.Button, {
62
+ display: "rounded",
63
+ icon: "arrow-right",
64
+ iconWidth: 20,
65
+ iconHeight: 14
66
+ }), /*#__PURE__*/_react["default"].createElement(_components.Button, {
67
+ appearance: "bordered",
68
+ display: "rounded",
69
+ iconLocation: "left",
70
+ iconBackground: false,
71
+ iconHover: true,
72
+ icon: "okta-logo",
73
+ iconWidth: 30,
74
+ iconHeight: 30
75
+ }, "Sign In with Okta"), /*#__PURE__*/_react["default"].createElement(_components.Button, {
76
+ appearance: "cta",
77
+ icon: "search",
78
+ iconWidth: 16,
79
+ iconHeight: 16
80
+ }), /*#__PURE__*/_react["default"].createElement(_components.Button, {
81
+ appearance: "cta",
82
+ icon: "search",
83
+ iconWidth: 16,
84
+ iconHeight: 16,
85
+ width: 40,
86
+ height: 40
87
+ }), /*#__PURE__*/_react["default"].createElement(_components.Button, {
88
+ key: "storyboard",
89
+ display: "rounded",
90
+ icon: "storyboard",
91
+ width: 30,
92
+ appearance: "cta",
93
+ height: 30,
94
+ iconWidth: 13,
95
+ iconHeight: 13
96
+ }), /*#__PURE__*/_react["default"].createElement(_components.Button, {
97
+ key: "archive",
98
+ display: "rounded",
99
+ icon: "archive",
100
+ width: 30,
101
+ appearance: "cta",
102
+ height: 30,
103
+ label: "Archive",
104
+ disabled: true,
105
+ iconWidth: 13,
106
+ iconHeight: 13
107
+ })));
172
108
  });
173
-
174
- (0, _react3.storiesOf)('Button').add('dark theme', function () {
175
- return _react2.default.createElement(
176
- _storyHelpers.Example,
177
- { title: 'Appearances Dark', background: 'black' },
178
- _react2.default.createElement(
179
- _storyHelpers.Stack,
180
- null,
181
- _react2.default.createElement(
182
- _components.Button,
183
- { theme: 'dark' },
184
- 'Button'
185
- ),
186
- _react2.default.createElement(
187
- _components.Button,
188
- { theme: 'dark', appearance: 'default' },
189
- 'Default'
190
- ),
191
- _react2.default.createElement(
192
- _components.Button,
193
- { theme: 'dark', appearance: 'primary' },
194
- 'Primary'
195
- ),
196
- _react2.default.createElement(
197
- _components.Button,
198
- { theme: 'dark', appearance: 'bordered' },
199
- 'Bordered'
200
- ),
201
- _react2.default.createElement(
202
- _components.Button,
203
- { theme: 'dark', appearance: 'cta', display: 'rounded' },
204
- 'CTA'
205
- )
206
- ),
207
- _react2.default.createElement(
208
- _storyHelpers.Stack,
209
- null,
210
- _react2.default.createElement(
211
- _components.Button,
212
- { theme: 'dark', display: 'rounded', isLoading: true, showLoader: true, stretchWidth: true },
213
- 'Button'
214
- ),
215
- _react2.default.createElement(
216
- _components.Button,
217
- { theme: 'dark', appearance: 'primary', display: 'rounded' },
218
- 'Primary'
219
- ),
220
- _react2.default.createElement(
221
- _components.Button,
222
- { theme: 'dark', appearance: 'bordered', display: 'rounded' },
223
- 'Bordered'
224
- )
225
- ),
226
- _react2.default.createElement(
227
- _storyHelpers.Stack,
228
- null,
229
- _react2.default.createElement(
230
- _components.Button,
231
- { theme: 'dark', display: 'rounded', disabled: true },
232
- 'Disabled'
233
- ),
234
- _react2.default.createElement(
235
- _components.Button,
236
- { theme: 'dark', appearance: 'primary', disabled: true },
237
- 'Disabled'
238
- ),
239
- _react2.default.createElement(
240
- _components.Button,
241
- { theme: 'dark', appearance: 'bordered', disabled: true },
242
- 'Disabled'
243
- )
244
- ),
245
- _react2.default.createElement(
246
- _storyHelpers.Stack,
247
- null,
248
- _react2.default.createElement(
249
- _components.Button,
250
- { theme: 'dark', appearance: 'link', display: 'rounded', href: 'https://www.google.co.in/' },
251
- 'Link'
252
- ),
253
- _react2.default.createElement(
254
- _components.Button,
255
- { theme: 'dark', appearance: 'link', href: 'https://www.google.co.in/' },
256
- 'Link'
257
- ),
258
- _react2.default.createElement(
259
- _components.Button,
260
- { theme: 'dark', appearance: 'link', href: 'https://www.google.co.in/' },
261
- 'Link'
262
- )
263
- ),
264
- _react2.default.createElement(
265
- _storyHelpers.Stack,
266
- null,
267
- _react2.default.createElement(
268
- _components.Button,
269
- {
270
- theme: 'dark',
271
- display: 'rounded',
272
- icon: 'arrow-right',
273
- iconWidth: 20,
274
- iconHeight: 14,
275
- iconBackground: false
276
- },
277
- 'Next'
278
- ),
279
- _react2.default.createElement(
280
- _components.Button,
281
- { theme: 'dark', display: 'rounded', icon: 'arrow-right', iconWidth: 20, iconHeight: 14 },
282
- 'Submit'
283
- ),
284
- _react2.default.createElement(_components.Button, {
285
- theme: 'dark',
286
- display: 'rounded',
287
- icon: 'arrow-right',
288
- iconWidth: 20,
289
- iconHeight: 14
290
- }),
291
- _react2.default.createElement(
292
- _components.Button,
293
- {
294
- theme: 'dark',
295
- appearance: 'bordered',
296
- display: 'rounded',
297
- iconLocation: 'left',
298
- iconBackground: false,
299
- iconHover: true,
300
- icon: 'okta-logo',
301
- iconWidth: 30,
302
- iconHeight: 30
303
- },
304
- 'Sign In with Okta'
305
- ),
306
- _react2.default.createElement(_components.Button, { theme: 'dark', appearance: 'cta', icon: 'search', iconWidth: 16, iconHeight: 16 }),
307
- _react2.default.createElement(_components.Button, {
308
- theme: 'dark',
309
- appearance: 'cta',
310
- icon: 'search',
311
- iconWidth: 16,
312
- iconHeight: 16,
313
- width: 40,
314
- height: 40
315
- }),
316
- _react2.default.createElement(_components.Button, {
317
- theme: 'dark',
318
- key: 'storyboard',
319
- display: 'rounded',
320
- icon: 'storyboard',
321
- width: 30,
322
- appearance: 'cta',
323
- height: 30,
324
- iconWidth: 13,
325
- iconHeight: 13
326
- }),
327
- _react2.default.createElement(_components.Button, {
328
- theme: 'dark',
329
- key: 'archive',
330
- display: 'rounded',
331
- icon: 'archive',
332
- width: 30,
333
- appearance: 'cta',
334
- height: 30,
335
- label: 'Archive',
336
- disabled: true,
337
- iconWidth: 13,
338
- iconHeight: 13
339
- })
340
- )
341
- );
109
+ (0, _react2.storiesOf)('Button').add('dark theme', function () {
110
+ return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
111
+ title: "Appearances Dark",
112
+ background: "black"
113
+ }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.Button, {
114
+ theme: "dark"
115
+ }, "Button"), /*#__PURE__*/_react["default"].createElement(_components.Button, {
116
+ theme: "dark",
117
+ appearance: "default"
118
+ }, "Default"), /*#__PURE__*/_react["default"].createElement(_components.Button, {
119
+ theme: "dark",
120
+ appearance: "primary"
121
+ }, "Primary"), /*#__PURE__*/_react["default"].createElement(_components.Button, {
122
+ theme: "dark",
123
+ appearance: "bordered"
124
+ }, "Bordered"), /*#__PURE__*/_react["default"].createElement(_components.Button, {
125
+ theme: "dark",
126
+ appearance: "cta",
127
+ display: "rounded"
128
+ }, "CTA")), /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.Button, {
129
+ theme: "dark",
130
+ display: "rounded",
131
+ isLoading: true,
132
+ showLoader: true,
133
+ stretchWidth: true
134
+ }, "Button"), /*#__PURE__*/_react["default"].createElement(_components.Button, {
135
+ theme: "dark",
136
+ appearance: "primary",
137
+ display: "rounded"
138
+ }, "Primary"), /*#__PURE__*/_react["default"].createElement(_components.Button, {
139
+ theme: "dark",
140
+ appearance: "bordered",
141
+ display: "rounded"
142
+ }, "Bordered")), /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.Button, {
143
+ theme: "dark",
144
+ display: "rounded",
145
+ disabled: true
146
+ }, "Disabled"), /*#__PURE__*/_react["default"].createElement(_components.Button, {
147
+ theme: "dark",
148
+ appearance: "primary",
149
+ disabled: true
150
+ }, "Disabled"), /*#__PURE__*/_react["default"].createElement(_components.Button, {
151
+ theme: "dark",
152
+ appearance: "bordered",
153
+ disabled: true
154
+ }, "Disabled")), /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.Button, {
155
+ theme: "dark",
156
+ appearance: "link",
157
+ display: "rounded",
158
+ href: "https://www.google.co.in/"
159
+ }, "Link"), /*#__PURE__*/_react["default"].createElement(_components.Button, {
160
+ theme: "dark",
161
+ appearance: "link",
162
+ href: "https://www.google.co.in/"
163
+ }, "Link"), /*#__PURE__*/_react["default"].createElement(_components.Button, {
164
+ theme: "dark",
165
+ appearance: "link",
166
+ href: "https://www.google.co.in/"
167
+ }, "Link")), /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.Button, {
168
+ theme: "dark",
169
+ display: "rounded",
170
+ icon: "arrow-right",
171
+ iconWidth: 20,
172
+ iconHeight: 14,
173
+ iconBackground: false
174
+ }, "Next"), /*#__PURE__*/_react["default"].createElement(_components.Button, {
175
+ theme: "dark",
176
+ display: "rounded",
177
+ icon: "arrow-right",
178
+ iconWidth: 20,
179
+ iconHeight: 14
180
+ }, "Submit"), /*#__PURE__*/_react["default"].createElement(_components.Button, {
181
+ theme: "dark",
182
+ display: "rounded",
183
+ icon: "arrow-right",
184
+ iconWidth: 20,
185
+ iconHeight: 14
186
+ }), /*#__PURE__*/_react["default"].createElement(_components.Button, {
187
+ theme: "dark",
188
+ appearance: "bordered",
189
+ display: "rounded",
190
+ iconLocation: "left",
191
+ iconBackground: false,
192
+ iconHover: true,
193
+ icon: "okta-logo",
194
+ iconWidth: 30,
195
+ iconHeight: 30
196
+ }, "Sign In with Okta"), /*#__PURE__*/_react["default"].createElement(_components.Button, {
197
+ theme: "dark",
198
+ appearance: "cta",
199
+ icon: "search",
200
+ iconWidth: 16,
201
+ iconHeight: 16
202
+ }), /*#__PURE__*/_react["default"].createElement(_components.Button, {
203
+ theme: "dark",
204
+ appearance: "cta",
205
+ icon: "search",
206
+ iconWidth: 16,
207
+ iconHeight: 16,
208
+ width: 40,
209
+ height: 40
210
+ }), /*#__PURE__*/_react["default"].createElement(_components.Button, {
211
+ theme: "dark",
212
+ key: "storyboard",
213
+ display: "rounded",
214
+ icon: "storyboard",
215
+ width: 30,
216
+ appearance: "cta",
217
+ height: 30,
218
+ iconWidth: 13,
219
+ iconHeight: 13
220
+ }), /*#__PURE__*/_react["default"].createElement(_components.Button, {
221
+ theme: "dark",
222
+ key: "archive",
223
+ display: "rounded",
224
+ icon: "archive",
225
+ width: 30,
226
+ appearance: "cta",
227
+ height: 30,
228
+ label: "Archive",
229
+ disabled: true,
230
+ iconWidth: 13,
231
+ iconHeight: 13
232
+ })));
342
233
  });
343
-
344
- (0, _react3.storiesOf)('Button').add('nexc theme', function () {
345
- return _react2.default.createElement(
346
- _storyHelpers.Example,
347
- { title: 'Appearances Dark', background: 'black' },
348
- _react2.default.createElement(
349
- _storyHelpers.Stack,
350
- null,
351
- _react2.default.createElement(
352
- _components.Button,
353
- { theme: 'nexc' },
354
- 'Button'
355
- ),
356
- _react2.default.createElement(
357
- _components.Button,
358
- { theme: 'nexc', appearance: 'default' },
359
- 'Default'
360
- ),
361
- _react2.default.createElement(
362
- _components.Button,
363
- { theme: 'nexc', appearance: 'primary' },
364
- 'Primary'
365
- ),
366
- _react2.default.createElement(
367
- _components.Button,
368
- { theme: 'nexc', appearance: 'bordered' },
369
- 'Bordered'
370
- ),
371
- _react2.default.createElement(
372
- _components.Button,
373
- { theme: 'nexc', appearance: 'cta', display: 'rounded' },
374
- 'CTA'
375
- )
376
- ),
377
- _react2.default.createElement(
378
- _storyHelpers.Stack,
379
- null,
380
- _react2.default.createElement(
381
- _components.Button,
382
- { theme: 'nexc', display: 'rounded', isLoading: true, showLoader: true, stretchWidth: true },
383
- 'Button'
384
- ),
385
- _react2.default.createElement(
386
- _components.Button,
387
- { theme: 'nexc', appearance: 'primary', display: 'rounded' },
388
- 'Primary'
389
- ),
390
- _react2.default.createElement(
391
- _components.Button,
392
- { theme: 'nexc', appearance: 'bordered', display: 'rounded' },
393
- 'Bordered'
394
- )
395
- ),
396
- _react2.default.createElement(
397
- _storyHelpers.Stack,
398
- null,
399
- _react2.default.createElement(
400
- _components.Button,
401
- { theme: 'nexc', display: 'rounded', disabled: true },
402
- 'Disabled'
403
- ),
404
- _react2.default.createElement(
405
- _components.Button,
406
- { theme: 'nexc', appearance: 'primary', disabled: true },
407
- 'Disabled'
408
- ),
409
- _react2.default.createElement(
410
- _components.Button,
411
- { theme: 'nexc', appearance: 'bordered', disabled: true },
412
- 'Disabled'
413
- )
414
- ),
415
- _react2.default.createElement(
416
- _storyHelpers.Stack,
417
- null,
418
- _react2.default.createElement(
419
- _components.Button,
420
- { theme: 'nexc', appearance: 'link', display: 'rounded', href: 'https://www.google.co.in/' },
421
- 'Link'
422
- ),
423
- _react2.default.createElement(
424
- _components.Button,
425
- { theme: 'nexc', appearance: 'link', href: 'https://www.google.co.in/' },
426
- 'Link'
427
- ),
428
- _react2.default.createElement(
429
- _components.Button,
430
- { theme: 'nexc', appearance: 'link', href: 'https://www.google.co.in/' },
431
- 'Link'
432
- )
433
- ),
434
- _react2.default.createElement(
435
- _storyHelpers.Stack,
436
- null,
437
- _react2.default.createElement(
438
- _components.Button,
439
- {
440
- theme: 'nexc',
441
- display: 'rounded',
442
- icon: 'arrow-right',
443
- iconWidth: 20,
444
- iconHeight: 14,
445
- iconBackground: false
446
- },
447
- 'Next'
448
- ),
449
- _react2.default.createElement(
450
- _components.Button,
451
- { theme: 'nexc', display: 'rounded', icon: 'arrow-right', iconWidth: 20, iconHeight: 14 },
452
- 'Submit'
453
- ),
454
- _react2.default.createElement(_components.Button, {
455
- theme: 'nexc',
456
- display: 'rounded',
457
- icon: 'arrow-right',
458
- iconWidth: 20,
459
- iconHeight: 14
460
- }),
461
- _react2.default.createElement(
462
- _components.Button,
463
- {
464
- theme: 'nexc',
465
- appearance: 'bordered',
466
- display: 'rounded',
467
- iconLocation: 'left',
468
- iconBackground: false,
469
- iconHover: true,
470
- icon: 'okta-logo',
471
- iconWidth: 30,
472
- iconHeight: 30
473
- },
474
- 'Sign In with Okta'
475
- ),
476
- _react2.default.createElement(_components.Button, { theme: 'nexc', appearance: 'cta', icon: 'search', iconWidth: 16, iconHeight: 16 }),
477
- _react2.default.createElement(_components.Button, {
478
- theme: 'nexc',
479
- appearance: 'cta',
480
- icon: 'search',
481
- iconWidth: 16,
482
- iconHeight: 16,
483
- width: 40,
484
- height: 40
485
- }),
486
- _react2.default.createElement(_components.Button, {
487
- theme: 'nexc',
488
- key: 'storyboard',
489
- display: 'rounded',
490
- icon: 'storyboard',
491
- width: 30,
492
- appearance: 'cta',
493
- height: 30,
494
- iconWidth: 13,
495
- iconHeight: 13
496
- }),
497
- _react2.default.createElement(_components.Button, {
498
- theme: 'nexc',
499
- key: 'archive',
500
- display: 'rounded',
501
- icon: 'archive',
502
- width: 30,
503
- appearance: 'cta',
504
- height: 30,
505
- label: 'Archive',
506
- disabled: true,
507
- iconWidth: 13,
508
- iconHeight: 13
509
- })
510
- )
511
- );
234
+ (0, _react2.storiesOf)('Button').add('nexc theme', function () {
235
+ return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
236
+ title: "Appearances Dark",
237
+ background: "black"
238
+ }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.Button, {
239
+ theme: "nexc"
240
+ }, "Button"), /*#__PURE__*/_react["default"].createElement(_components.Button, {
241
+ theme: "nexc",
242
+ appearance: "default"
243
+ }, "Default"), /*#__PURE__*/_react["default"].createElement(_components.Button, {
244
+ theme: "nexc",
245
+ appearance: "primary"
246
+ }, "Primary"), /*#__PURE__*/_react["default"].createElement(_components.Button, {
247
+ theme: "nexc",
248
+ appearance: "bordered"
249
+ }, "Bordered"), /*#__PURE__*/_react["default"].createElement(_components.Button, {
250
+ theme: "nexc",
251
+ appearance: "cta",
252
+ display: "rounded"
253
+ }, "CTA")), /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.Button, {
254
+ theme: "nexc",
255
+ display: "rounded",
256
+ isLoading: true,
257
+ showLoader: true,
258
+ stretchWidth: true
259
+ }, "Button"), /*#__PURE__*/_react["default"].createElement(_components.Button, {
260
+ theme: "nexc",
261
+ appearance: "primary",
262
+ display: "rounded"
263
+ }, "Primary"), /*#__PURE__*/_react["default"].createElement(_components.Button, {
264
+ theme: "nexc",
265
+ appearance: "bordered",
266
+ display: "rounded"
267
+ }, "Bordered")), /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.Button, {
268
+ theme: "nexc",
269
+ display: "rounded",
270
+ disabled: true
271
+ }, "Disabled"), /*#__PURE__*/_react["default"].createElement(_components.Button, {
272
+ theme: "nexc",
273
+ appearance: "primary",
274
+ disabled: true
275
+ }, "Disabled"), /*#__PURE__*/_react["default"].createElement(_components.Button, {
276
+ theme: "nexc",
277
+ appearance: "bordered",
278
+ disabled: true
279
+ }, "Disabled")), /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.Button, {
280
+ theme: "nexc",
281
+ appearance: "link",
282
+ display: "rounded",
283
+ href: "https://www.google.co.in/"
284
+ }, "Link"), /*#__PURE__*/_react["default"].createElement(_components.Button, {
285
+ theme: "nexc",
286
+ appearance: "link",
287
+ href: "https://www.google.co.in/"
288
+ }, "Link"), /*#__PURE__*/_react["default"].createElement(_components.Button, {
289
+ theme: "nexc",
290
+ appearance: "link",
291
+ href: "https://www.google.co.in/"
292
+ }, "Link")), /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.Button, {
293
+ theme: "nexc",
294
+ display: "rounded",
295
+ icon: "arrow-right",
296
+ iconWidth: 20,
297
+ iconHeight: 14,
298
+ iconBackground: false
299
+ }, "Next"), /*#__PURE__*/_react["default"].createElement(_components.Button, {
300
+ theme: "nexc",
301
+ display: "rounded",
302
+ icon: "arrow-right",
303
+ iconWidth: 20,
304
+ iconHeight: 14
305
+ }, "Submit"), /*#__PURE__*/_react["default"].createElement(_components.Button, {
306
+ theme: "nexc",
307
+ display: "rounded",
308
+ icon: "arrow-right",
309
+ iconWidth: 20,
310
+ iconHeight: 14
311
+ }), /*#__PURE__*/_react["default"].createElement(_components.Button, {
312
+ theme: "nexc",
313
+ appearance: "bordered",
314
+ display: "rounded",
315
+ iconLocation: "left",
316
+ iconBackground: false,
317
+ iconHover: true,
318
+ icon: "okta-logo",
319
+ iconWidth: 30,
320
+ iconHeight: 30
321
+ }, "Sign In with Okta"), /*#__PURE__*/_react["default"].createElement(_components.Button, {
322
+ theme: "nexc",
323
+ appearance: "cta",
324
+ icon: "search",
325
+ iconWidth: 16,
326
+ iconHeight: 16
327
+ }), /*#__PURE__*/_react["default"].createElement(_components.Button, {
328
+ theme: "nexc",
329
+ appearance: "cta",
330
+ icon: "search",
331
+ iconWidth: 16,
332
+ iconHeight: 16,
333
+ width: 40,
334
+ height: 40
335
+ }), /*#__PURE__*/_react["default"].createElement(_components.Button, {
336
+ theme: "nexc",
337
+ key: "storyboard",
338
+ display: "rounded",
339
+ icon: "storyboard",
340
+ width: 30,
341
+ appearance: "cta",
342
+ height: 30,
343
+ iconWidth: 13,
344
+ iconHeight: 13
345
+ }), /*#__PURE__*/_react["default"].createElement(_components.Button, {
346
+ theme: "nexc",
347
+ key: "archive",
348
+ display: "rounded",
349
+ icon: "archive",
350
+ width: 30,
351
+ appearance: "cta",
352
+ height: 30,
353
+ label: "Archive",
354
+ disabled: true,
355
+ iconWidth: 13,
356
+ iconHeight: 13
357
+ })));
512
358
  });