@desynova-digital/components 8.19.63 → 9.0.1

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 (80) hide show
  1. package/atoms/avatar/avatar.js +1 -1
  2. package/atoms/avatar/avatar.story.js +46 -14
  3. package/atoms/badge/badge.js +13 -13
  4. package/atoms/badge/badge.story.js +91 -29
  5. package/atoms/button/button.js +81 -85
  6. package/atoms/button/button.story.js +342 -2
  7. package/atoms/card/card.js +43 -39
  8. package/atoms/card/card.story.js +74 -48
  9. package/atoms/cardStack/cardStack.js +182 -155
  10. package/atoms/cardStack/cardStack.story.js +131 -18
  11. package/atoms/cardV2/cardV2.js +23 -23
  12. package/atoms/cardV2/cardV2.story.js +196 -45
  13. package/atoms/cardV2/content.js +109 -87
  14. package/atoms/cardV2/thumbnail.js +85 -72
  15. package/atoms/cardV2/timeline.js +119 -107
  16. package/atoms/checkbox/checkbox.js +41 -32
  17. package/atoms/checkbox/checkbox.story.js +220 -99
  18. package/atoms/customSelect/customSelect.story.js +820 -582
  19. package/atoms/datePicker/datePicker.js +77 -83
  20. package/atoms/datePicker/datePicker.story.js +167 -1
  21. package/atoms/dateTime/dateTime.story.js +26 -1
  22. package/atoms/draftInputText/draftInputText.js +358 -0
  23. package/atoms/draftInputText/draftInputText.story.js +251 -0
  24. package/atoms/draftInputText/index.js +13 -0
  25. package/atoms/dropdown/dropdown.story.js +146 -18
  26. package/atoms/dropdownList/dropdownList.story.js +1598 -1091
  27. package/atoms/graphs/barGraph/barGraph.js +143 -130
  28. package/atoms/graphs/barGraph/barGraph.story.js +74 -40
  29. package/atoms/graphs/circleDonut/circleDonut.story.js +374 -220
  30. package/atoms/graphs/circleGraph/circleGraph.js +84 -80
  31. package/atoms/graphs/circleGraph/circleGraph.story.js +38 -26
  32. package/atoms/graphs/circleNested/circleNested.story.js +98 -103
  33. package/atoms/graphs/pieChart/pieChart.story.js +160 -81
  34. package/atoms/graphs/verticalBarGraph/verticalBarGraph.story.js +30 -28
  35. package/atoms/icon/icon.story.js +220 -163
  36. package/atoms/inputText/inputText.js +52 -49
  37. package/atoms/label/label.js +29 -29
  38. package/atoms/label/label.story.js +42 -30
  39. package/atoms/loader/CircleLoader.js +13 -4
  40. package/atoms/loader/CircleLoader.jsx +10 -4
  41. package/atoms/loader/ThreeDotLoader.js +8 -4
  42. package/atoms/loader/ThreeDotLoader.jsx +4 -4
  43. package/atoms/loader/loader.js +29 -30
  44. package/atoms/loader/loader.story.js +38 -23
  45. package/atoms/loader/spinningLoader.js +7 -4
  46. package/atoms/loader/spinningLoader.jsx +5 -5
  47. package/atoms/popup/popup.js +11 -11
  48. package/atoms/popup/popup.story.js +36 -4
  49. package/atoms/radio/radio.story.js +140 -2
  50. package/atoms/sideBar/sidebar.js +19 -5
  51. package/atoms/sideBar/sidebar.jsx +13 -8
  52. package/atoms/switch/switch.js +72 -66
  53. package/atoms/switch/switch.story.js +323 -78
  54. package/atoms/tag/tag.js +39 -39
  55. package/atoms/tag/tag.story.js +83 -2
  56. package/atoms/textarea/textarea.js +36 -34
  57. package/atoms/timeCodeInput/timCodeInput.story.js +10 -9
  58. package/atoms/timeCodeInput/timeCodeInput.js +108 -100
  59. package/atoms/timer/timer.js +127 -126
  60. package/atoms/toast/toast.js +24 -14
  61. package/atoms/toast/toast.story.js +22 -0
  62. package/atoms/videoCard/videoCard.js +226 -203
  63. package/atoms/videoCard/videoCard.story.js +547 -186
  64. package/components.js +69 -66
  65. package/index.js +5 -4
  66. package/molecules/carousel/carousel.js +55 -67
  67. package/molecules/filter/filter.js +133 -106
  68. package/molecules/filter/filter.story.js +215 -173
  69. package/molecules/graphCard/graphCard.js +34 -24
  70. package/molecules/graphCard/graphCard.story.js +169 -82
  71. package/molecules/graphDetailCard/graphDetailCard.js +207 -182
  72. package/molecules/pageHeader/pageHeader.js +3 -2
  73. package/molecules/pageHeader/pageHeader.story.js +40 -18
  74. package/molecules/pagination/pagination.js +66 -14
  75. package/molecules/pagination/pagination.story.js +24 -2
  76. package/molecules/table/table.js +368 -316
  77. package/molecules/table/table.story.js +404 -208
  78. package/molecules/tabs/tabs.js +15 -6
  79. package/molecules/tabs/tabs.story.js +26 -0
  80. package/package.json +2 -2
package/atoms/icon/icon.story.js CHANGED
@@ -1,16 +1,16 @@
1
- "use strict";
1
+ 'use strict';
2
2
 
3
- var _react = require("react");
3
+ var _react = require('react');
4
4
 
5
5
  var _react2 = _interopRequireDefault(_react);
6
6
 
7
- var _react3 = require("@storybook/react");
7
+ var _react3 = require('@storybook/react');
8
8
 
9
- var _storyHelpers = require("../../_helpers/story-helpers");
9
+ var _storyHelpers = require('../../_helpers/story-helpers');
10
10
 
11
- var _components = require("../../components");
11
+ var _components = require('../../components');
12
12
 
13
- var _icons = require("./icons.json");
13
+ var _icons = require('./icons.json');
14
14
 
15
15
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
16
16
 
@@ -23,196 +23,253 @@ var iconsArr = Object.keys(_icons.icons).map(function (icon) {
23
23
  return iconObj;
24
24
  });
25
25
  console.log(iconsArr);
26
- (0, _react3.storiesOf)("Icon").add("default", function () {
26
+ (0, _react3.storiesOf)('Icon').add('default', function () {
27
27
  return _react2.default.createElement(
28
28
  _storyHelpers.Example,
29
- { title: "Icons", background: "dark" },
29
+ { title: 'Icons', background: 'dark' },
30
30
  _react2.default.createElement(
31
31
  _storyHelpers.Stack,
32
32
  null,
33
33
  iconsArr.map(function (icon) {
34
- return _react2.default.createElement(_components.Icon, { name: icon.name, width: icon.width, height: icon.height, color: "#fff" });
34
+ return _react2.default.createElement(_components.Icon, { name: icon.name, width: icon.width, height: icon.height, color: '#fff' });
35
35
  })
36
36
  )
37
37
  );
38
38
  });
39
- (0, _react3.storiesOf)("Icon").add("default 1", function () {
39
+ (0, _react3.storiesOf)('Icon').add('default 1', function () {
40
40
  return _react2.default.createElement(
41
41
  _storyHelpers.Example,
42
- { title: "Icons", background: "dark" },
42
+ { title: 'Icons', background: 'dark' },
43
43
  _react2.default.createElement(
44
44
  _storyHelpers.Stack,
45
45
  null,
46
- _react2.default.createElement(_components.Icon, { name: "stitching", width: 24, height: 24 }),
47
- _react2.default.createElement(_components.Icon, { name: "publishing", width: 24, height: 24 }),
48
- _react2.default.createElement(_components.Icon, { name: "hes", width: 24, height: 24 }),
49
- _react2.default.createElement(_components.Icon, { name: "add", width: 14, height: 14 }),
50
- _react2.default.createElement(_components.Icon, { name: "add-circle", width: 18, height: 18 }),
51
- _react2.default.createElement(_components.Icon, { name: "arrow-left", width: 14, height: 14 }),
52
- _react2.default.createElement(_components.Icon, { name: "arrow-right", width: 14, height: 14 }),
53
- _react2.default.createElement(_components.Icon, { name: "chevron-down", width: 14, height: 14 }),
54
- _react2.default.createElement(_components.Icon, { name: "calender", width: 14, height: 14 }),
55
- _react2.default.createElement(_components.Icon, { name: "clip", width: 20, height: 15 }),
56
- _react2.default.createElement(_components.Icon, { name: "cross", width: 15, height: 15 }),
57
- _react2.default.createElement(_components.Icon, { name: "high-quality", width: 15, height: 15 }),
58
- _react2.default.createElement(_components.Icon, { name: "info-filled", width: 18, height: 18, color: "#07D5CD" }),
59
- _react2.default.createElement(_components.Icon, { name: "info", width: 18, height: 18, color: "#07D5CD" }),
60
- _react2.default.createElement(_components.Icon, { name: "movie", width: 18, height: 18 }),
61
- _react2.default.createElement(_components.Icon, { name: "okta-logo", width: 30, height: 30, color: "#07D5CD" }),
62
- _react2.default.createElement(_components.Icon, { name: "topaz-logo", width: 12, height: 36, color: "#07D5CD" }),
63
- _react2.default.createElement(_components.Icon, { name: "search", width: 16, height: 16 }),
64
- _react2.default.createElement(_components.Icon, { name: "dashboard", width: 18, height: 17 }),
65
- _react2.default.createElement(_components.Icon, { name: "connect", width: 18, height: 17 }),
66
- _react2.default.createElement(_components.Icon, { name: "ingest-angle-right", width: 8, height: 11 }),
67
- _react2.default.createElement(_components.Icon, { name: "notification", width: 24, height: 24, color: "#00cec6" }),
68
- _react2.default.createElement(_components.Icon, { name: "programs", width: 18, height: 18 }),
69
- _react2.default.createElement(_components.Icon, { name: "onboard", width: 18, height: 18 }),
70
- _react2.default.createElement(_components.Icon, { name: "upload", width: 12, height: 14, color: "#afb2ba" }),
71
- _react2.default.createElement(_components.Icon, { name: "manageAccess", width: 15, height: 18 }),
72
- _react2.default.createElement(_components.Icon, { name: "schedular", width: 19, height: 19 }),
73
- _react2.default.createElement(_components.Icon, { name: "storyboard", width: 14, height: 12 }),
74
- _react2.default.createElement(_components.Icon, { name: "ott", width: 15, height: 15 }),
75
- _react2.default.createElement(_components.Icon, { name: "manage-user", width: 17, height: 17 }),
76
- _react2.default.createElement(_components.Icon, { name: "user-avatar", width: 14, height: 14 }),
77
- _react2.default.createElement(_components.Icon, { name: "users-avatar", width: 16, height: 11 }),
78
- _react2.default.createElement(_components.Icon, { name: "stack-vertical", width: 14, height: 14 }),
79
- _react2.default.createElement(_components.Icon, { name: "permission-checked", width: 14, height: 14 }),
80
- _react2.default.createElement(_components.Icon, { name: "angle-left", color: "none", stroke: "#fff" }),
81
- _react2.default.createElement(_components.Icon, { name: "angle-right", color: "none", stroke: "#fff" }),
82
- _react2.default.createElement(_components.Icon, { name: "angle-left-double", color: "none", stroke: "#fff" }),
83
- _react2.default.createElement(_components.Icon, { name: "angle-right-double", color: "none", stroke: "#fff" }),
84
- _react2.default.createElement(_components.Icon, {
85
- name: "angle-bottom",
86
- width: 14,
87
- height: 9,
88
- color: "none",
89
- stroke: "#fff"
90
- }),
91
- _react2.default.createElement(_components.Icon, { name: "first-page", color: "#fff", stroke: "#fff" }),
92
- _react2.default.createElement(_components.Icon, { name: "last-page", color: "#fff", stroke: "#fff" }),
93
- _react2.default.createElement(_components.Icon, { name: "play", width: 20, height: 26 }),
94
- _react2.default.createElement(_components.Icon, { name: "pause", width: 25, height: 25 }),
95
- _react2.default.createElement(_components.Icon, { name: "tablet", width: 18, height: 13 }),
96
- _react2.default.createElement(_components.Icon, { name: "tv", width: 14, height: 14 }),
97
- _react2.default.createElement(_components.Icon, { name: "triangle-double-left", width: 14, height: 13 }),
98
- _react2.default.createElement(_components.Icon, { name: "triangle-double-right", width: 14, height: 13 }),
99
- _react2.default.createElement(_components.Icon, { name: "delete", width: 12, height: 14 }),
100
- _react2.default.createElement(_components.Icon, { name: "promo_review", width: 16, height: 14 }),
101
- _react2.default.createElement(_components.Icon, { name: "data-refresh", width: 16, height: 18 }),
102
- _react2.default.createElement(_components.Icon, { name: "back-to-back", width: 16, height: 18 }),
103
- _react2.default.createElement(_components.Icon, { name: "enhance", width: 16, height: 16 })
46
+ _react2.default.createElement(_components.Icon, { name: 'stitching', width: 24, height: 24 }),
47
+ _react2.default.createElement(_components.Icon, { name: 'publishing', width: 24, height: 24 }),
48
+ _react2.default.createElement(_components.Icon, { name: 'hes', width: 24, height: 24 }),
49
+ _react2.default.createElement(_components.Icon, { name: 'add', width: 14, height: 14 }),
50
+ _react2.default.createElement(_components.Icon, { name: 'add-circle', width: 18, height: 18 }),
51
+ _react2.default.createElement(_components.Icon, { name: 'arrow-left', width: 14, height: 14 }),
52
+ _react2.default.createElement(_components.Icon, { name: 'arrow-right', width: 14, height: 14 }),
53
+ _react2.default.createElement(_components.Icon, { name: 'chevron-down', width: 14, height: 14 }),
54
+ _react2.default.createElement(_components.Icon, { name: 'calender', width: 14, height: 14 }),
55
+ _react2.default.createElement(_components.Icon, { name: 'clip', width: 20, height: 15 }),
56
+ _react2.default.createElement(_components.Icon, { name: 'cross', width: 15, height: 15 }),
57
+ _react2.default.createElement(_components.Icon, { name: 'high-quality', width: 15, height: 15 }),
58
+ _react2.default.createElement(_components.Icon, { name: 'info-filled', width: 18, height: 18, color: '#07D5CD' }),
59
+ _react2.default.createElement(_components.Icon, { name: 'info', width: 18, height: 18, color: '#07D5CD' }),
60
+ _react2.default.createElement(_components.Icon, { name: 'movie', width: 18, height: 18 }),
61
+ _react2.default.createElement(_components.Icon, { name: 'okta-logo', width: 30, height: 30, color: '#07D5CD' }),
62
+ _react2.default.createElement(_components.Icon, { name: 'topaz-logo', width: 12, height: 36, color: '#07D5CD' }),
63
+ _react2.default.createElement(_components.Icon, { name: 'search', width: 16, height: 16 }),
64
+ _react2.default.createElement(_components.Icon, { name: 'dashboard', width: 18, height: 17 }),
65
+ _react2.default.createElement(_components.Icon, { name: 'connect', width: 18, height: 17 }),
66
+ _react2.default.createElement(_components.Icon, { name: 'ingest-angle-right', width: 8, height: 11 }),
67
+ _react2.default.createElement(_components.Icon, { name: 'notification', width: 24, height: 24, color: '#00cec6' }),
68
+ _react2.default.createElement(_components.Icon, { name: 'programs', width: 18, height: 18 }),
69
+ _react2.default.createElement(_components.Icon, { name: 'onboard', width: 18, height: 18 }),
70
+ _react2.default.createElement(_components.Icon, { name: 'upload', width: 12, height: 14, color: '#afb2ba' }),
71
+ _react2.default.createElement(_components.Icon, { name: 'manageAccess', width: 15, height: 18 }),
72
+ _react2.default.createElement(_components.Icon, { name: 'schedular', width: 19, height: 19 }),
73
+ _react2.default.createElement(_components.Icon, { name: 'storyboard', width: 14, height: 12 }),
74
+ _react2.default.createElement(_components.Icon, { name: 'ott', width: 15, height: 15 }),
75
+ _react2.default.createElement(_components.Icon, { name: 'manage-user', width: 17, height: 17 }),
76
+ _react2.default.createElement(_components.Icon, { name: 'user-avatar', width: 14, height: 14 }),
77
+ _react2.default.createElement(_components.Icon, { name: 'users-avatar', width: 16, height: 11 }),
78
+ _react2.default.createElement(_components.Icon, { name: 'stack-vertical', width: 14, height: 14 }),
79
+ _react2.default.createElement(_components.Icon, { name: 'permission-checked', width: 14, height: 14 }),
80
+ _react2.default.createElement(_components.Icon, { name: 'angle-left', color: 'none', stroke: '#fff' }),
81
+ _react2.default.createElement(_components.Icon, { name: 'angle-right', color: 'none', stroke: '#fff' }),
82
+ _react2.default.createElement(_components.Icon, { name: 'angle-left-double', color: 'none', stroke: '#fff' }),
83
+ _react2.default.createElement(_components.Icon, { name: 'angle-right-double', color: 'none', stroke: '#fff' }),
84
+ _react2.default.createElement(_components.Icon, { name: 'angle-bottom', width: 14, height: 9, color: 'none', stroke: '#fff' }),
85
+ _react2.default.createElement(_components.Icon, { name: 'first-page', color: '#fff', stroke: '#fff' }),
86
+ _react2.default.createElement(_components.Icon, { name: 'last-page', color: '#fff', stroke: '#fff' }),
87
+ _react2.default.createElement(_components.Icon, { name: 'play', width: 20, height: 26 }),
88
+ _react2.default.createElement(_components.Icon, { name: 'pause', width: 25, height: 25 }),
89
+ _react2.default.createElement(_components.Icon, { name: 'tablet', width: 18, height: 13 }),
90
+ _react2.default.createElement(_components.Icon, { name: 'tv', width: 14, height: 14 }),
91
+ _react2.default.createElement(_components.Icon, { name: 'triangle-double-left', width: 14, height: 13 }),
92
+ _react2.default.createElement(_components.Icon, { name: 'triangle-double-right', width: 14, height: 13 }),
93
+ _react2.default.createElement(_components.Icon, { name: 'delete', width: 12, height: 14 }),
94
+ _react2.default.createElement(_components.Icon, { name: 'promo_review', width: 16, height: 14 }),
95
+ _react2.default.createElement(_components.Icon, { name: 'data-refresh', width: 16, height: 18 }),
96
+ _react2.default.createElement(_components.Icon, { name: 'back-to-back', width: 16, height: 18 }),
97
+ _react2.default.createElement(_components.Icon, { name: 'enhance', width: 16, height: 16 })
104
98
  )
105
99
  );
106
100
  });
107
101
 
108
- (0, _react3.storiesOf)("Icon").add("default 2", function () {
102
+ (0, _react3.storiesOf)('Icon').add('default 2', function () {
109
103
  return _react2.default.createElement(
110
104
  _storyHelpers.Example,
111
- { title: "Icons", background: "dark" },
105
+ { title: 'Icons', background: 'dark' },
112
106
  _react2.default.createElement(
113
107
  _storyHelpers.Stack,
114
108
  null,
115
- _react2.default.createElement(_components.Icon, { name: "dialogue-miss", width: 24, height: 24 }),
116
- _react2.default.createElement(_components.Icon, { name: "voice-mismatch", width: 20, height: 20 }),
117
- _react2.default.createElement(_components.Icon, { name: "me-issue", width: 24, height: 24 }),
118
- _react2.default.createElement(_components.Icon, { name: "av-cut", width: 20, height: 20 }),
119
- _react2.default.createElement(_components.Icon, { name: "short-replacement", width: 24, height: 24 }),
120
- _react2.default.createElement(_components.Icon, { name: "meaning-error", width: 20, height: 20 }),
121
- _react2.default.createElement(_components.Icon, { name: "pronunciation", width: 24, height: 24 }),
122
- _react2.default.createElement(_components.Icon, { name: "volume", width: 18, height: 18 }),
123
- _react2.default.createElement(_components.Icon, { name: "share", width: 18, height: 18 }),
124
- _react2.default.createElement(_components.Icon, { name: "settings", width: 16, height: 16 }),
125
- _react2.default.createElement(_components.Icon, { name: "fullscreen", width: 14, height: 14 }),
126
- _react2.default.createElement(_components.Icon, { name: "send", width: 25, height: 25 }),
127
- _react2.default.createElement(_components.Icon, { name: "reply", width: 25, height: 25 }),
128
- _react2.default.createElement(_components.Icon, { name: "rewind-10", width: 24, height: 30 }),
129
- _react2.default.createElement(_components.Icon, { name: "forward-10", width: 24, height: 30 }),
130
- _react2.default.createElement(_components.Icon, { name: "pending", width: 12, height: 12 }),
131
- _react2.default.createElement(_components.Icon, { name: "warning", width: 12, height: 12 }),
132
- _react2.default.createElement(_components.Icon, { name: "tick", width: 12, height: 9 }),
133
- _react2.default.createElement(_components.Icon, { name: "timeline", width: 12, height: 12 }),
134
- _react2.default.createElement(_components.Icon, { name: "in-marker", width: 10, height: 18 }),
135
- _react2.default.createElement(_components.Icon, { name: "out-marker", width: 10, height: 18 }),
136
- _react2.default.createElement(_components.Icon, { name: "magnifier", width: 20, height: 20 }),
137
- _react2.default.createElement(_components.Icon, { name: "tagging", width: 12, height: 13 }),
138
- _react2.default.createElement(_components.Icon, { name: "restore", width: 18, height: 16 }),
139
- _react2.default.createElement(_components.Icon, { name: "archive", width: 10, height: 10 }),
140
- _react2.default.createElement(_components.Icon, { name: "update", width: 12, height: 14 }),
141
- _react2.default.createElement(_components.Icon, { name: "marker", width: 9, height: 8 }),
142
- _react2.default.createElement(_components.Icon, { name: "request", width: 14, height: 11 }),
143
- _react2.default.createElement(_components.Icon, { name: "safe-area", width: 24, height: 24 }),
144
- _react2.default.createElement(_components.Icon, { name: "playback-rate", width: 12, height: 12 }),
145
- _react2.default.createElement(_components.Icon, { name: "subtitle-cc", width: 14, height: 13 }),
146
- _react2.default.createElement(_components.Icon, { name: "audio-track", width: 16, height: 16 }),
147
- _react2.default.createElement(_components.Icon, { name: "mic", width: 10, height: 17 }),
148
- _react2.default.createElement(_components.Icon, { name: "check", width: 16, height: 13 }),
149
- _react2.default.createElement(_components.Icon, { name: "error", width: 24, height: 24 }),
150
- _react2.default.createElement(_components.Icon, { name: "clipping", width: 20, height: 16 }),
151
- _react2.default.createElement(_components.Icon, { name: "qc", width: 20, height: 20 }),
152
- _react2.default.createElement(_components.Icon, { name: "subtitle", width: 20, height: 16 }),
153
- _react2.default.createElement(_components.Icon, { name: "align_bottom", width: 16, height: 16 }),
154
- _react2.default.createElement(_components.Icon, { name: "align_center", width: 16, height: 16 }),
155
- _react2.default.createElement(_components.Icon, { name: "align_top", width: 16, height: 16 }),
156
- _react2.default.createElement(_components.Icon, { name: "align_left", width: 16, height: 16 }),
157
- _react2.default.createElement(_components.Icon, { name: "align_middle", width: 16, height: 16 }),
158
- _react2.default.createElement(_components.Icon, { name: "align_right", width: 16, height: 16 }),
159
- _react2.default.createElement(_components.Icon, { name: "comment", width: 13, height: 13 }),
160
- _react2.default.createElement(_components.Icon, { name: "cut", width: 14, height: 15 }),
161
- _react2.default.createElement(_components.Icon, { name: "back-to-back", width: 14, height: 15 })
109
+ _react2.default.createElement(_components.Icon, { name: 'dialogue-miss', width: 24, height: 24 }),
110
+ _react2.default.createElement(_components.Icon, { name: 'voice-mismatch', width: 20, height: 20 }),
111
+ _react2.default.createElement(_components.Icon, { name: 'me-issue', width: 24, height: 24 }),
112
+ _react2.default.createElement(_components.Icon, { name: 'av-cut', width: 20, height: 20 }),
113
+ _react2.default.createElement(_components.Icon, { name: 'short-replacement', width: 24, height: 24 }),
114
+ _react2.default.createElement(_components.Icon, { name: 'meaning-error', width: 20, height: 20 }),
115
+ _react2.default.createElement(_components.Icon, { name: 'pronunciation', width: 24, height: 24 }),
116
+ _react2.default.createElement(_components.Icon, { name: 'volume', width: 18, height: 18 }),
117
+ _react2.default.createElement(_components.Icon, { name: 'share', width: 18, height: 18 }),
118
+ _react2.default.createElement(_components.Icon, { name: 'settings', width: 16, height: 16 }),
119
+ _react2.default.createElement(_components.Icon, { name: 'fullscreen', width: 14, height: 14 }),
120
+ _react2.default.createElement(_components.Icon, { name: 'send', width: 25, height: 25 }),
121
+ _react2.default.createElement(_components.Icon, { name: 'reply', width: 25, height: 25 }),
122
+ _react2.default.createElement(_components.Icon, { name: 'rewind-10', width: 24, height: 30 }),
123
+ _react2.default.createElement(_components.Icon, { name: 'forward-10', width: 24, height: 30 }),
124
+ _react2.default.createElement(_components.Icon, { name: 'pending', width: 12, height: 12 }),
125
+ _react2.default.createElement(_components.Icon, { name: 'warning', width: 12, height: 12 }),
126
+ _react2.default.createElement(_components.Icon, { name: 'tick', width: 12, height: 9 }),
127
+ _react2.default.createElement(_components.Icon, { name: 'timeline', width: 12, height: 12 }),
128
+ _react2.default.createElement(_components.Icon, { name: 'in-marker', width: 10, height: 18 }),
129
+ _react2.default.createElement(_components.Icon, { name: 'out-marker', width: 10, height: 18 }),
130
+ _react2.default.createElement(_components.Icon, { name: 'magnifier', width: 20, height: 20 }),
131
+ _react2.default.createElement(_components.Icon, { name: 'tagging', width: 12, height: 13 }),
132
+ _react2.default.createElement(_components.Icon, { name: 'restore', width: 18, height: 16 }),
133
+ _react2.default.createElement(_components.Icon, { name: 'archive', width: 10, height: 10 }),
134
+ _react2.default.createElement(_components.Icon, { name: 'update', width: 12, height: 14 }),
135
+ _react2.default.createElement(_components.Icon, { name: 'marker', width: 9, height: 8 }),
136
+ _react2.default.createElement(_components.Icon, { name: 'request', width: 14, height: 11 }),
137
+ _react2.default.createElement(_components.Icon, { name: 'safe-area', width: 24, height: 24 }),
138
+ _react2.default.createElement(_components.Icon, { name: 'playback-rate', width: 12, height: 12 }),
139
+ _react2.default.createElement(_components.Icon, { name: 'subtitle-cc', width: 14, height: 13 }),
140
+ _react2.default.createElement(_components.Icon, { name: 'audio-track', width: 16, height: 16 }),
141
+ _react2.default.createElement(_components.Icon, { name: 'mic', width: 10, height: 17 }),
142
+ _react2.default.createElement(_components.Icon, { name: 'check', width: 16, height: 13 }),
143
+ _react2.default.createElement(_components.Icon, { name: 'error', width: 24, height: 24 }),
144
+ _react2.default.createElement(_components.Icon, { name: 'clipping', width: 20, height: 16 }),
145
+ _react2.default.createElement(_components.Icon, { name: 'qc', width: 20, height: 20 }),
146
+ _react2.default.createElement(_components.Icon, { name: 'subtitle', width: 20, height: 16 }),
147
+ _react2.default.createElement(_components.Icon, { name: 'align_bottom', width: 16, height: 16 }),
148
+ _react2.default.createElement(_components.Icon, { name: 'align_center', width: 16, height: 16 }),
149
+ _react2.default.createElement(_components.Icon, { name: 'align_top', width: 16, height: 16 }),
150
+ _react2.default.createElement(_components.Icon, { name: 'align_left', width: 16, height: 16 }),
151
+ _react2.default.createElement(_components.Icon, { name: 'align_middle', width: 16, height: 16 }),
152
+ _react2.default.createElement(_components.Icon, { name: 'align_right', width: 16, height: 16 }),
153
+ _react2.default.createElement(_components.Icon, { name: 'comment', width: 13, height: 13 }),
154
+ _react2.default.createElement(_components.Icon, { name: 'cut', width: 14, height: 15 }),
155
+ _react2.default.createElement(_components.Icon, { name: 'back-to-back', width: 14, height: 15 })
162
156
  )
163
157
  );
164
158
  });
165
159
 
166
- (0, _react3.storiesOf)("Icon").add("default 3", function () {
160
+ (0, _react3.storiesOf)('Icon').add('default 3', function () {
167
161
  return _react2.default.createElement(
168
162
  _storyHelpers.Example,
169
- { title: "Icons", background: "dark" },
163
+ { title: 'Icons', background: 'dark' },
170
164
  _react2.default.createElement(
171
165
  _storyHelpers.Stack,
172
166
  null,
173
- _react2.default.createElement(_components.Icon, { name: "mute", width: 10, height: 18 }),
174
- _react2.default.createElement(_components.Icon, { name: "mute-beep", width: 17, height: 18 }),
175
- _react2.default.createElement(_components.Icon, { name: "collab", width: 16, height: 16 }),
176
- _react2.default.createElement(_components.Icon, { name: "central", width: 16, height: 16 }),
177
- _react2.default.createElement(_components.Icon, { name: "control", width: 16, height: 16 }),
178
- _react2.default.createElement(_components.Icon, { name: "refresh", width: 14, height: 14 }),
179
- _react2.default.createElement(_components.Icon, { name: "dots", width: 14, height: 4 }),
180
- _react2.default.createElement(_components.Icon, { name: "snp_edit", width: 14, height: 14 }),
181
- _react2.default.createElement(_components.Icon, { name: "more-ver", width: 12, height: 12 }),
182
- _react2.default.createElement(_components.Icon, { name: "controls", width: 13, height: 12 }),
183
- _react2.default.createElement(_components.Icon, { name: "default", width: 21, height: 21 }),
184
- _react2.default.createElement(_components.Icon, { name: "blur", width: 14, height: 14 }),
185
- _react2.default.createElement(_components.Icon, { name: "editor", width: 14, height: 14 }),
186
- _react2.default.createElement(_components.Icon, { name: "expand", color: "none", stroke: "#fff" }),
187
- _react2.default.createElement(_components.Icon, { name: "collapse", color: "none", stroke: "#fff" }),
188
- _react2.default.createElement(_components.Icon, { name: "avatar", width: 24, height: 24, color: "#afb2ba" }),
189
- _react2.default.createElement(_components.Icon, { name: "filter", color: "#afb2ba" }),
190
- _react2.default.createElement(_components.Icon, { name: "request-access", width: 20, height: 18 }),
191
- _react2.default.createElement(_components.Icon, { name: "lock", width: 18, height: 18 }),
192
- _react2.default.createElement(_components.Icon, { name: "move", width: 12, height: 12 }),
193
- _react2.default.createElement(_components.Icon, { name: "copy", width: 11, height: 13 }),
194
- _react2.default.createElement(_components.Icon, { name: "approval", width: 18, height: 10 }),
195
- _react2.default.createElement(_components.Icon, { name: "import", color: "#afb2ba" }),
196
- _react2.default.createElement(_components.Icon, { name: "download", width: 10, height: 13 }),
197
- _react2.default.createElement(_components.Icon, { name: "add-users", width: 19, height: 10 }),
198
- _react2.default.createElement(_components.Icon, { name: "collaborate", width: 20, height: 14 }),
199
- _react2.default.createElement(_components.Icon, { name: "task", width: 19, height: 19 }),
200
- _react2.default.createElement(_components.Icon, { name: "edit", width: 14, height: 14 }),
201
- _react2.default.createElement(_components.Icon, { name: "carousel", width: 24, height: 24 }),
202
- _react2.default.createElement(_components.Icon, { name: "date-picker", color: "#afb2ba" }),
203
- _react2.default.createElement(_components.Icon, { name: "show-password", color: "#999" }),
204
- _react2.default.createElement(_components.Icon, { name: "hide-password", color: "#999" }),
205
- _react2.default.createElement(_components.Icon, { name: "upload-image", width: 20, height: 19, color: "#fff" }),
206
- _react2.default.createElement(_components.Icon, { name: "cloud", width: 22, height: 16 }),
207
- _react2.default.createElement(_components.Icon, { name: "long-arrow", width: 18, height: 12 }),
208
- _react2.default.createElement(_components.Icon, { name: "upload-arrow", width: 12, height: 18 }),
209
- _react2.default.createElement(_components.Icon, { name: "log-out", width: 12, height: 12 }),
210
- _react2.default.createElement(_components.Icon, { name: "brief", width: 14, height: 12 }),
211
- _react2.default.createElement(_components.Icon, { name: "upload-asset", width: 24, height: 24 }),
212
- _react2.default.createElement(_components.Icon, { name: "back-to-back", width: 14, height: 15 }),
213
- _react2.default.createElement(_components.Icon, { name: "clevr", width: 16, height: 16, color: "#999" }),
214
- _react2.default.createElement(_components.Icon, { name: "craft", width: 16, height: 16, color: "#999" }),
215
- _react2.default.createElement(_components.Icon, { name: "check-module", width: 16, height: 16, color: "#999" })
167
+ _react2.default.createElement(_components.Icon, { name: 'mute', width: 10, height: 18 }),
168
+ _react2.default.createElement(_components.Icon, { name: 'mute-beep', width: 17, height: 18 }),
169
+ _react2.default.createElement(_components.Icon, { name: 'collab', width: 16, height: 16 }),
170
+ _react2.default.createElement(_components.Icon, { name: 'central', width: 16, height: 16 }),
171
+ _react2.default.createElement(_components.Icon, { name: 'control', width: 16, height: 16 }),
172
+ _react2.default.createElement(_components.Icon, { name: 'refresh', width: 14, height: 14 }),
173
+ _react2.default.createElement(_components.Icon, { name: 'dots', width: 14, height: 4 }),
174
+ _react2.default.createElement(_components.Icon, { name: 'snp_edit', width: 14, height: 14 }),
175
+ _react2.default.createElement(_components.Icon, { name: 'more-ver', width: 12, height: 12 }),
176
+ _react2.default.createElement(_components.Icon, { name: 'controls', width: 13, height: 12 }),
177
+ _react2.default.createElement(_components.Icon, { name: 'default', width: 21, height: 21 }),
178
+ _react2.default.createElement(_components.Icon, { name: 'blur', width: 14, height: 14 }),
179
+ _react2.default.createElement(_components.Icon, { name: 'editor', width: 14, height: 14 }),
180
+ _react2.default.createElement(_components.Icon, { name: 'expand', color: 'none', stroke: '#fff' }),
181
+ _react2.default.createElement(_components.Icon, { name: 'collapse', color: 'none', stroke: '#fff' }),
182
+ _react2.default.createElement(_components.Icon, { name: 'avatar', width: 24, height: 24, color: '#afb2ba' }),
183
+ _react2.default.createElement(_components.Icon, { name: 'filter', color: '#afb2ba' }),
184
+ _react2.default.createElement(_components.Icon, { name: 'request-access', width: 20, height: 18 }),
185
+ _react2.default.createElement(_components.Icon, { name: 'lock', width: 18, height: 18 }),
186
+ _react2.default.createElement(_components.Icon, { name: 'move', width: 12, height: 12 }),
187
+ _react2.default.createElement(_components.Icon, { name: 'copy', width: 11, height: 13 }),
188
+ _react2.default.createElement(_components.Icon, { name: 'approval', width: 18, height: 10 }),
189
+ _react2.default.createElement(_components.Icon, { name: 'import', color: '#afb2ba' }),
190
+ _react2.default.createElement(_components.Icon, { name: 'download', width: 10, height: 13 }),
191
+ _react2.default.createElement(_components.Icon, { name: 'add-users', width: 19, height: 10 }),
192
+ _react2.default.createElement(_components.Icon, { name: 'collaborate', width: 20, height: 14 }),
193
+ _react2.default.createElement(_components.Icon, { name: 'task', width: 19, height: 19 }),
194
+ _react2.default.createElement(_components.Icon, { name: 'edit', width: 14, height: 14 }),
195
+ _react2.default.createElement(_components.Icon, { name: 'carousel', width: 24, height: 24 }),
196
+ _react2.default.createElement(_components.Icon, { name: 'date-picker', color: '#afb2ba' }),
197
+ _react2.default.createElement(_components.Icon, { name: 'show-password', color: '#999' }),
198
+ _react2.default.createElement(_components.Icon, { name: 'hide-password', color: '#999' }),
199
+ _react2.default.createElement(_components.Icon, { name: 'upload-image', width: 20, height: 19, color: '#fff' }),
200
+ _react2.default.createElement(_components.Icon, { name: 'cloud', width: 22, height: 16 }),
201
+ _react2.default.createElement(_components.Icon, { name: 'long-arrow', width: 18, height: 12 }),
202
+ _react2.default.createElement(_components.Icon, { name: 'upload-arrow', width: 12, height: 18 }),
203
+ _react2.default.createElement(_components.Icon, { name: 'log-out', width: 12, height: 12 }),
204
+ _react2.default.createElement(_components.Icon, { name: 'brief', width: 14, height: 12 }),
205
+ _react2.default.createElement(_components.Icon, { name: 'upload-asset', width: 24, height: 24 }),
206
+ _react2.default.createElement(_components.Icon, { name: 'back-to-back', width: 14, height: 15 }),
207
+ _react2.default.createElement(_components.Icon, { name: 'clevr', width: 16, height: 16, color: '#999' }),
208
+ _react2.default.createElement(_components.Icon, { name: 'craft', width: 16, height: 16, color: '#999' }),
209
+ _react2.default.createElement(_components.Icon, { name: 'check-module', width: 16, height: 16, color: '#999' })
210
+ )
211
+ );
212
+ });
213
+
214
+ (0, _react3.storiesOf)('Icon').add('nexc', function () {
215
+ return _react2.default.createElement(
216
+ _storyHelpers.Example,
217
+ { title: 'Icons', background: 'dark' },
218
+ _react2.default.createElement(
219
+ _storyHelpers.Stack,
220
+ null,
221
+ _react2.default.createElement(_components.Icon, { name: 'stitching', width: 24, height: 24 }),
222
+ _react2.default.createElement(_components.Icon, { name: 'publishing', width: 24, height: 24 }),
223
+ _react2.default.createElement(_components.Icon, { name: 'hes', width: 24, height: 24 }),
224
+ _react2.default.createElement(_components.Icon, { name: 'add', width: 14, height: 14 }),
225
+ _react2.default.createElement(_components.Icon, { name: 'add-circle', width: 18, height: 18 }),
226
+ _react2.default.createElement(_components.Icon, { name: 'arrow-left', width: 14, height: 14 }),
227
+ _react2.default.createElement(_components.Icon, { name: 'arrow-right', width: 14, height: 14 }),
228
+ _react2.default.createElement(_components.Icon, { name: 'chevron-down', width: 14, height: 14 }),
229
+ _react2.default.createElement(_components.Icon, { name: 'calender', width: 14, height: 14 }),
230
+ _react2.default.createElement(_components.Icon, { name: 'clip', width: 20, height: 15 }),
231
+ _react2.default.createElement(_components.Icon, { name: 'cross', width: 15, height: 15 }),
232
+ _react2.default.createElement(_components.Icon, { name: 'high-quality', width: 15, height: 15 }),
233
+ _react2.default.createElement(_components.Icon, { name: 'info-filled', width: 18, height: 18, color: '#60BEF8' }),
234
+ _react2.default.createElement(_components.Icon, { name: 'info', width: 18, height: 18, color: '#60BEF8' }),
235
+ _react2.default.createElement(_components.Icon, { name: 'movie', width: 18, height: 18 }),
236
+ _react2.default.createElement(_components.Icon, { name: 'okta-logo', width: 30, height: 30, color: '#60BEF8' }),
237
+ _react2.default.createElement(_components.Icon, { name: 'topaz-logo', width: 12, height: 36, color: '#60BEF8' }),
238
+ _react2.default.createElement(_components.Icon, { name: 'search', width: 16, height: 16 }),
239
+ _react2.default.createElement(_components.Icon, { name: 'dashboard', width: 18, height: 17 }),
240
+ _react2.default.createElement(_components.Icon, { name: 'connect', width: 18, height: 17 }),
241
+ _react2.default.createElement(_components.Icon, { name: 'ingest-angle-right', width: 8, height: 11 }),
242
+ _react2.default.createElement(_components.Icon, { name: 'notification', width: 24, height: 24, color: '#60BEF8' }),
243
+ _react2.default.createElement(_components.Icon, { name: 'programs', width: 18, height: 18 }),
244
+ _react2.default.createElement(_components.Icon, { name: 'onboard', width: 18, height: 18 }),
245
+ _react2.default.createElement(_components.Icon, { name: 'upload', width: 12, height: 14, color: '#afb2ba' }),
246
+ _react2.default.createElement(_components.Icon, { name: 'manageAccess', width: 15, height: 18 }),
247
+ _react2.default.createElement(_components.Icon, { name: 'schedular', width: 19, height: 19 }),
248
+ _react2.default.createElement(_components.Icon, { name: 'storyboard', width: 14, height: 12 }),
249
+ _react2.default.createElement(_components.Icon, { name: 'ott', width: 15, height: 15 }),
250
+ _react2.default.createElement(_components.Icon, { name: 'manage-user', width: 17, height: 17 }),
251
+ _react2.default.createElement(_components.Icon, { name: 'user-avatar', width: 14, height: 14 }),
252
+ _react2.default.createElement(_components.Icon, { name: 'users-avatar', width: 16, height: 11 }),
253
+ _react2.default.createElement(_components.Icon, { name: 'stack-vertical', width: 14, height: 14 }),
254
+ _react2.default.createElement(_components.Icon, { name: 'permission-checked', width: 14, height: 14 }),
255
+ _react2.default.createElement(_components.Icon, { name: 'angle-left', color: 'none', stroke: '#fff' }),
256
+ _react2.default.createElement(_components.Icon, { name: 'angle-right', color: 'none', stroke: '#fff' }),
257
+ _react2.default.createElement(_components.Icon, { name: 'angle-left-double', color: 'none', stroke: '#fff' }),
258
+ _react2.default.createElement(_components.Icon, { name: 'angle-right-double', color: 'none', stroke: '#fff' }),
259
+ _react2.default.createElement(_components.Icon, { name: 'angle-bottom', width: 14, height: 9, color: 'none', stroke: '#fff' }),
260
+ _react2.default.createElement(_components.Icon, { name: 'first-page', color: '#fff', stroke: '#fff' }),
261
+ _react2.default.createElement(_components.Icon, { name: 'last-page', color: '#fff', stroke: '#fff' }),
262
+ _react2.default.createElement(_components.Icon, { name: 'play', width: 20, height: 26 }),
263
+ _react2.default.createElement(_components.Icon, { name: 'pause', width: 25, height: 25 }),
264
+ _react2.default.createElement(_components.Icon, { name: 'tablet', width: 18, height: 13 }),
265
+ _react2.default.createElement(_components.Icon, { name: 'tv', width: 14, height: 14 }),
266
+ _react2.default.createElement(_components.Icon, { name: 'triangle-double-left', width: 14, height: 13 }),
267
+ _react2.default.createElement(_components.Icon, { name: 'triangle-double-right', width: 14, height: 13 }),
268
+ _react2.default.createElement(_components.Icon, { name: 'delete', width: 12, height: 14 }),
269
+ _react2.default.createElement(_components.Icon, { name: 'promo_review', width: 16, height: 14 }),
270
+ _react2.default.createElement(_components.Icon, { name: 'data-refresh', width: 16, height: 18 }),
271
+ _react2.default.createElement(_components.Icon, { name: 'back-to-back', width: 16, height: 18 }),
272
+ _react2.default.createElement(_components.Icon, { name: 'enhance', width: 16, height: 16 })
216
273
  )
217
274
  );
218
275
  });