@desynova-digital/components 9.0.27 → 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 (169) 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 +351 -576
  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 -299
  128. package/index.js +350 -62
  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 +106 -104
  134. package/molecules/errorScreen/errorScreen.js +41 -94
  135. package/molecules/filter/constants.js +1 -0
  136. package/molecules/filter/filter.js +378 -562
  137. package/molecules/filter/filter.story.js +79 -104
  138. package/molecules/filter/index.js +5 -9
  139. package/molecules/graphCard/graphCard.js +97 -193
  140. package/molecules/graphCard/graphCard.story.js +159 -191
  141. package/molecules/graphCard/index.js +4 -8
  142. package/molecules/graphCard/loader.js +28 -68
  143. package/molecules/graphDetailCard/graphDetailCard.js +115 -183
  144. package/molecules/graphDetailCard/graphDetailCard.story.js +218 -254
  145. package/molecules/graphDetailCard/index.js +5 -9
  146. package/molecules/pageHeader/index.js +12 -10
  147. package/molecules/pageHeader/pageHeader.js +38 -79
  148. package/molecules/pageHeader/pageHeader.story.js +34 -55
  149. package/molecules/pagination/index.js +4 -8
  150. package/molecules/pagination/pagination.js +126 -202
  151. package/molecules/pagination/pagination.story.js +40 -52
  152. package/molecules/richTextInput/RichTextInput.js +354 -0
  153. package/molecules/richTextInput/RichTextInput.story.js +50 -0
  154. package/molecules/richTextInput/index.js +9 -0
  155. package/molecules/table/index.js +4 -8
  156. package/molecules/table/table-column.js +10 -16
  157. package/molecules/table/table-header.js +31 -72
  158. package/molecules/table/table.js +743 -1075
  159. package/molecules/table/table.story.js +274 -304
  160. package/molecules/tabs/index.js +4 -8
  161. package/molecules/tabs/tabs.js +112 -184
  162. package/molecules/tabs/tabs.story.js +66 -133
  163. package/molecules/videoCardList/index.js +4 -8
  164. package/molecules/videoCardList/videoCardList.js +24 -41
  165. package/molecules/videoCardList/videoCardList.story.js +449 -664
  166. package/molecules/videoPlayer/index.js +4 -8
  167. package/molecules/videoPlayer/videoPlayer.js +1019 -1097
  168. package/molecules/videoPlayer/videoPlayer.story.js +10 -21
  169. package/package.json +2 -2
package/atoms/button/button.story.js CHANGED
@@ -1,583 +1,358 @@
1
1
  "use strict";
2
2
 
3
- var _react = require("react");
4
-
5
- var _react2 = _interopRequireDefault(_react);
6
-
7
- var _react3 = require("@storybook/react");
8
-
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _react = _interopRequireDefault(require("react"));
5
+ var _react2 = require("@storybook/react");
9
6
  var _storyHelpers = require("../../_helpers/story-helpers");
10
-
11
7
  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
- {
54
- display: "rounded",
55
- isLoading: true,
56
- showLoader: true,
57
- stretchWidth: true
58
- },
59
- "Button"
60
- ),
61
- _react2.default.createElement(
62
- _components.Button,
63
- { appearance: "primary", display: "rounded" },
64
- "Primary"
65
- ),
66
- _react2.default.createElement(
67
- _components.Button,
68
- { appearance: "bordered", display: "rounded" },
69
- "Bordered"
70
- )
71
- ),
72
- _react2.default.createElement(
73
- _storyHelpers.Stack,
74
- null,
75
- _react2.default.createElement(
76
- _components.Button,
77
- { display: "rounded", disabled: true },
78
- "Disabled"
79
- ),
80
- _react2.default.createElement(
81
- _components.Button,
82
- { appearance: "primary", disabled: true },
83
- "Disabled"
84
- ),
85
- _react2.default.createElement(
86
- _components.Button,
87
- { appearance: "bordered", disabled: true },
88
- "Disabled"
89
- )
90
- ),
91
- _react2.default.createElement(
92
- _storyHelpers.Stack,
93
- null,
94
- _react2.default.createElement(
95
- _components.Button,
96
- {
97
- appearance: "link",
98
- display: "rounded",
99
- href: "https://www.google.co.in/"
100
- },
101
- "Link"
102
- ),
103
- _react2.default.createElement(
104
- _components.Button,
105
- { appearance: "link", href: "https://www.google.co.in/" },
106
- "Link"
107
- ),
108
- _react2.default.createElement(
109
- _components.Button,
110
- { appearance: "link", href: "https://www.google.co.in/" },
111
- "Link"
112
- )
113
- ),
114
- _react2.default.createElement(
115
- _storyHelpers.Stack,
116
- null,
117
- _react2.default.createElement(
118
- _components.Button,
119
- {
120
- display: "rounded",
121
- icon: "arrow-right",
122
- iconWidth: 20,
123
- iconHeight: 14,
124
- iconBackground: false
125
- },
126
- "Next"
127
- ),
128
- _react2.default.createElement(
129
- _components.Button,
130
- {
131
- display: "rounded",
132
- icon: "arrow-right",
133
- iconWidth: 20,
134
- iconHeight: 14
135
- },
136
- "Submit"
137
- ),
138
- _react2.default.createElement(_components.Button, {
139
- display: "rounded",
140
- icon: "arrow-right",
141
- iconWidth: 20,
142
- iconHeight: 14
143
- }),
144
- _react2.default.createElement(
145
- _components.Button,
146
- {
147
- appearance: "bordered",
148
- display: "rounded",
149
- iconLocation: "left",
150
- iconBackground: false,
151
- iconHover: true,
152
- icon: "okta-logo",
153
- iconWidth: 30,
154
- iconHeight: 30
155
- },
156
- "Sign In with Okta"
157
- ),
158
- _react2.default.createElement(_components.Button, {
159
- appearance: "cta",
160
- icon: "search",
161
- iconWidth: 16,
162
- iconHeight: 16
163
- }),
164
- _react2.default.createElement(_components.Button, {
165
- appearance: "cta",
166
- icon: "search",
167
- iconWidth: 16,
168
- iconHeight: 16,
169
- width: 40,
170
- height: 40
171
- }),
172
- _react2.default.createElement(_components.Button, {
173
- key: "storyboard",
174
- display: "rounded",
175
- icon: "storyboard",
176
- width: 30,
177
- appearance: "cta",
178
- height: 30,
179
- iconWidth: 13,
180
- iconHeight: 13
181
- }),
182
- _react2.default.createElement(_components.Button, {
183
- key: "archive",
184
- display: "rounded",
185
- icon: "archive",
186
- width: 30,
187
- appearance: "cta",
188
- height: 30,
189
- label: "Archive",
190
- disabled: true,
191
- iconWidth: 13,
192
- iconHeight: 13
193
- })
194
- )
195
- );
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
+ })));
196
108
  });
197
-
198
- (0, _react3.storiesOf)("Button").add("dark theme", function () {
199
- return _react2.default.createElement(
200
- _storyHelpers.Example,
201
- { title: "Appearances Dark", background: "black" },
202
- _react2.default.createElement(
203
- _storyHelpers.Stack,
204
- null,
205
- _react2.default.createElement(
206
- _components.Button,
207
- { theme: "dark" },
208
- "Button"
209
- ),
210
- _react2.default.createElement(
211
- _components.Button,
212
- { theme: "dark", appearance: "default" },
213
- "Default"
214
- ),
215
- _react2.default.createElement(
216
- _components.Button,
217
- { theme: "dark", appearance: "primary" },
218
- "Primary"
219
- ),
220
- _react2.default.createElement(
221
- _components.Button,
222
- { theme: "dark", appearance: "bordered" },
223
- "Bordered"
224
- ),
225
- _react2.default.createElement(
226
- _components.Button,
227
- { theme: "dark", appearance: "cta", display: "rounded" },
228
- "CTA"
229
- )
230
- ),
231
- _react2.default.createElement(
232
- _storyHelpers.Stack,
233
- null,
234
- _react2.default.createElement(
235
- _components.Button,
236
- {
237
- theme: "dark",
238
- display: "rounded",
239
- isLoading: true,
240
- showLoader: true,
241
- stretchWidth: true
242
- },
243
- "Button"
244
- ),
245
- _react2.default.createElement(
246
- _components.Button,
247
- { theme: "dark", appearance: "primary", display: "rounded" },
248
- "Primary"
249
- ),
250
- _react2.default.createElement(
251
- _components.Button,
252
- { theme: "dark", appearance: "bordered", display: "rounded" },
253
- "Bordered"
254
- )
255
- ),
256
- _react2.default.createElement(
257
- _storyHelpers.Stack,
258
- null,
259
- _react2.default.createElement(
260
- _components.Button,
261
- { theme: "dark", display: "rounded", disabled: true },
262
- "Disabled"
263
- ),
264
- _react2.default.createElement(
265
- _components.Button,
266
- { theme: "dark", appearance: "primary", disabled: true },
267
- "Disabled"
268
- ),
269
- _react2.default.createElement(
270
- _components.Button,
271
- { theme: "dark", appearance: "bordered", disabled: true },
272
- "Disabled"
273
- )
274
- ),
275
- _react2.default.createElement(
276
- _storyHelpers.Stack,
277
- null,
278
- _react2.default.createElement(
279
- _components.Button,
280
- {
281
- theme: "dark",
282
- appearance: "link",
283
- display: "rounded",
284
- href: "https://www.google.co.in/"
285
- },
286
- "Link"
287
- ),
288
- _react2.default.createElement(
289
- _components.Button,
290
- { theme: "dark", appearance: "link", href: "https://www.google.co.in/" },
291
- "Link"
292
- ),
293
- _react2.default.createElement(
294
- _components.Button,
295
- { theme: "dark", appearance: "link", href: "https://www.google.co.in/" },
296
- "Link"
297
- )
298
- ),
299
- _react2.default.createElement(
300
- _storyHelpers.Stack,
301
- null,
302
- _react2.default.createElement(
303
- _components.Button,
304
- {
305
- theme: "dark",
306
- display: "rounded",
307
- icon: "arrow-right",
308
- iconWidth: 20,
309
- iconHeight: 14,
310
- iconBackground: false,
311
- iconLocation: "right"
312
- },
313
- "Next"
314
- ),
315
- _react2.default.createElement(
316
- _components.Button,
317
- {
318
- theme: "dark",
319
- display: "rounded",
320
- icon: "arrow-right",
321
- iconWidth: 20,
322
- iconHeight: 14
323
- },
324
- "Submit"
325
- ),
326
- _react2.default.createElement(_components.Button, {
327
- theme: "dark",
328
- display: "rounded",
329
- icon: "arrow-right",
330
- iconWidth: 20,
331
- iconHeight: 14
332
- }),
333
- _react2.default.createElement(
334
- _components.Button,
335
- {
336
- theme: "dark",
337
- appearance: "bordered",
338
- display: "rounded",
339
- iconLocation: "left",
340
- iconBackground: false,
341
- iconHover: true,
342
- icon: "okta-logo",
343
- iconWidth: 30,
344
- iconHeight: 30
345
- },
346
- "Sign In with Okta"
347
- ),
348
- _react2.default.createElement(_components.Button, {
349
- theme: "dark",
350
- appearance: "cta",
351
- icon: "search",
352
- iconWidth: 16,
353
- iconHeight: 16
354
- }),
355
- _react2.default.createElement(_components.Button, {
356
- theme: "dark",
357
- appearance: "cta",
358
- icon: "search",
359
- iconWidth: 16,
360
- iconHeight: 16,
361
- width: 40,
362
- height: 40
363
- }),
364
- _react2.default.createElement(_components.Button, {
365
- theme: "dark",
366
- key: "storyboard",
367
- display: "rounded",
368
- icon: "storyboard",
369
- width: 30,
370
- appearance: "cta",
371
- height: 30,
372
- iconWidth: 13,
373
- iconHeight: 13
374
- }),
375
- _react2.default.createElement(_components.Button, {
376
- theme: "dark",
377
- key: "archive",
378
- display: "rounded",
379
- icon: "archive",
380
- width: 30,
381
- appearance: "cta",
382
- height: 30,
383
- label: "Archive",
384
- disabled: true,
385
- iconWidth: 13,
386
- iconHeight: 13
387
- })
388
- )
389
- );
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
+ })));
390
233
  });
391
-
392
- (0, _react3.storiesOf)("Button").add("nexc theme", function () {
393
- return _react2.default.createElement(
394
- _storyHelpers.Example,
395
- { title: "Appearances Dark", background: "black" },
396
- _react2.default.createElement(
397
- _storyHelpers.Stack,
398
- null,
399
- _react2.default.createElement(
400
- _components.Button,
401
- { theme: "nexc" },
402
- "Button"
403
- ),
404
- _react2.default.createElement(
405
- _components.Button,
406
- { theme: "nexc", appearance: "default" },
407
- "Default"
408
- ),
409
- _react2.default.createElement(
410
- _components.Button,
411
- { theme: "nexc", appearance: "primary" },
412
- "Primary"
413
- ),
414
- _react2.default.createElement(
415
- _components.Button,
416
- { theme: "nexc", appearance: "bordered" },
417
- "Bordered"
418
- ),
419
- _react2.default.createElement(
420
- _components.Button,
421
- { theme: "nexc", appearance: "cta", display: "rounded" },
422
- "CTA"
423
- )
424
- ),
425
- _react2.default.createElement(
426
- _storyHelpers.Stack,
427
- null,
428
- _react2.default.createElement(
429
- _components.Button,
430
- {
431
- theme: "nexc",
432
- display: "rounded",
433
- isLoading: true,
434
- showLoader: true,
435
- stretchWidth: true
436
- },
437
- "Button"
438
- ),
439
- _react2.default.createElement(
440
- _components.Button,
441
- { theme: "nexc", appearance: "primary", display: "rounded" },
442
- "Primary"
443
- ),
444
- _react2.default.createElement(
445
- _components.Button,
446
- { theme: "nexc", appearance: "bordered", display: "rounded" },
447
- "Bordered"
448
- )
449
- ),
450
- _react2.default.createElement(
451
- _storyHelpers.Stack,
452
- null,
453
- _react2.default.createElement(
454
- _components.Button,
455
- { theme: "nexc", display: "rounded", disabled: true },
456
- "Disabled"
457
- ),
458
- _react2.default.createElement(
459
- _components.Button,
460
- { theme: "nexc", appearance: "primary", disabled: true },
461
- "Disabled"
462
- ),
463
- _react2.default.createElement(
464
- _components.Button,
465
- { theme: "nexc", appearance: "bordered", disabled: true },
466
- "Disabled"
467
- )
468
- ),
469
- _react2.default.createElement(
470
- _storyHelpers.Stack,
471
- null,
472
- _react2.default.createElement(
473
- _components.Button,
474
- {
475
- theme: "nexc",
476
- appearance: "link",
477
- display: "rounded",
478
- href: "https://www.google.co.in/"
479
- },
480
- "Link"
481
- ),
482
- _react2.default.createElement(
483
- _components.Button,
484
- { theme: "nexc", appearance: "link", href: "https://www.google.co.in/" },
485
- "Link"
486
- ),
487
- _react2.default.createElement(
488
- _components.Button,
489
- { theme: "nexc", appearance: "link", href: "https://www.google.co.in/" },
490
- "Link"
491
- )
492
- ),
493
- _react2.default.createElement(
494
- _storyHelpers.Stack,
495
- null,
496
- _react2.default.createElement(
497
- _components.Button,
498
- {
499
- theme: "nexc",
500
- display: "rounded",
501
- icon: "arrow-right",
502
- iconWidth: 20,
503
- iconHeight: 14,
504
- iconBackground: false
505
- },
506
- "Next"
507
- ),
508
- _react2.default.createElement(
509
- _components.Button,
510
- {
511
- theme: "nexc",
512
- display: "rounded",
513
- icon: "arrow-right",
514
- iconWidth: 20,
515
- iconHeight: 14
516
- },
517
- "Submit"
518
- ),
519
- _react2.default.createElement(_components.Button, {
520
- theme: "nexc",
521
- display: "rounded",
522
- icon: "arrow-right",
523
- iconWidth: 20,
524
- iconHeight: 14
525
- }),
526
- _react2.default.createElement(
527
- _components.Button,
528
- {
529
- theme: "nexc",
530
- appearance: "bordered",
531
- display: "rounded",
532
- iconLocation: "left",
533
- iconBackground: false,
534
- iconHover: true,
535
- icon: "okta-logo",
536
- iconWidth: 30,
537
- iconHeight: 30
538
- },
539
- "Sign In with Okta"
540
- ),
541
- _react2.default.createElement(_components.Button, {
542
- theme: "nexc",
543
- appearance: "cta",
544
- icon: "search",
545
- iconWidth: 16,
546
- iconHeight: 16
547
- }),
548
- _react2.default.createElement(_components.Button, {
549
- theme: "nexc",
550
- appearance: "cta",
551
- icon: "search",
552
- iconWidth: 16,
553
- iconHeight: 16,
554
- width: 40,
555
- height: 40
556
- }),
557
- _react2.default.createElement(_components.Button, {
558
- theme: "nexc",
559
- key: "storyboard",
560
- display: "rounded",
561
- icon: "storyboard",
562
- width: 30,
563
- appearance: "cta",
564
- height: 30,
565
- iconWidth: 13,
566
- iconHeight: 13
567
- }),
568
- _react2.default.createElement(_components.Button, {
569
- theme: "nexc",
570
- key: "archive",
571
- display: "rounded",
572
- icon: "archive",
573
- width: 30,
574
- appearance: "cta",
575
- height: 30,
576
- label: "Archive",
577
- disabled: true,
578
- iconWidth: 13,
579
- iconHeight: 13
580
- })
581
- )
582
- );
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
+ })));
583
358
  });