@dxc-technology/halstack-react 0.0.0-eb2a4cc → 0.0.0-ebb089f

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 (229) hide show
  1. package/README.md +2 -2
  2. package/babel.config.js +5 -2
  3. package/dist/BackgroundColorContext.js +46 -0
  4. package/dist/ThemeContext.js +237 -2
  5. package/dist/V3Select/V3Select.js +549 -0
  6. package/dist/V3Select/index.d.ts +27 -0
  7. package/dist/V3Textarea/V3Textarea.js +264 -0
  8. package/dist/V3Textarea/index.d.ts +27 -0
  9. package/dist/accordion/Accordion.js +170 -81
  10. package/dist/accordion/index.d.ts +28 -0
  11. package/dist/accordion-group/AccordionGroup.js +186 -0
  12. package/dist/accordion-group/index.d.ts +16 -0
  13. package/dist/alert/Alert.js +184 -83
  14. package/dist/alert/index.d.ts +51 -0
  15. package/dist/badge/Badge.js +63 -0
  16. package/dist/box/Box.js +31 -23
  17. package/dist/box/index.d.ts +25 -0
  18. package/dist/button/Button.js +84 -29
  19. package/dist/button/Button.stories.js +14 -211
  20. package/dist/button/index.d.ts +24 -0
  21. package/dist/card/Card.js +72 -35
  22. package/dist/card/index.d.ts +22 -0
  23. package/dist/checkbox/Checkbox.js +107 -32
  24. package/dist/checkbox/index.d.ts +24 -0
  25. package/dist/chip/Chip.js +135 -40
  26. package/dist/chip/index.d.ts +22 -0
  27. package/dist/common/RequiredComponent.js +2 -8
  28. package/dist/common/utils.js +2 -22
  29. package/dist/common/variables.js +1472 -159
  30. package/dist/date/Date.js +81 -59
  31. package/dist/date/index.d.ts +27 -0
  32. package/dist/date-input/DateInput.js +400 -0
  33. package/dist/date-input/index.d.ts +95 -0
  34. package/dist/dialog/Dialog.js +61 -36
  35. package/dist/dialog/index.d.ts +18 -0
  36. package/dist/dropdown/Dropdown.js +226 -94
  37. package/dist/dropdown/index.d.ts +26 -0
  38. package/dist/file-input/FileInput.js +644 -0
  39. package/dist/file-input/FileItem.js +287 -0
  40. package/dist/file-input/index.d.ts +81 -0
  41. package/dist/footer/Footer.js +122 -47
  42. package/dist/footer/Icons.js +77 -0
  43. package/dist/footer/index.d.ts +25 -0
  44. package/dist/header/Header.js +211 -91
  45. package/dist/header/Icons.js +59 -0
  46. package/dist/header/index.d.ts +25 -0
  47. package/dist/heading/Heading.js +93 -22
  48. package/dist/heading/index.d.ts +17 -0
  49. package/dist/input-text/Icons.js +22 -0
  50. package/dist/input-text/InputText.js +290 -104
  51. package/dist/input-text/index.d.ts +36 -0
  52. package/dist/layout/ApplicationLayout.js +327 -0
  53. package/dist/layout/Icons.js +55 -0
  54. package/dist/link/Link.js +136 -35
  55. package/dist/link/index.d.ts +23 -0
  56. package/dist/main.d.ts +40 -0
  57. package/dist/main.js +112 -16
  58. package/dist/number-input/NumberInput.js +136 -0
  59. package/dist/number-input/NumberInputContext.js +16 -0
  60. package/dist/number-input/index.d.ts +113 -0
  61. package/dist/paginator/Icons.js +66 -0
  62. package/dist/paginator/Paginator.js +184 -57
  63. package/dist/paginator/index.d.ts +20 -0
  64. package/dist/password-input/PasswordInput.js +203 -0
  65. package/dist/password-input/index.d.ts +94 -0
  66. package/dist/progress-bar/ProgressBar.js +97 -44
  67. package/dist/progress-bar/index.d.ts +18 -0
  68. package/dist/radio/Radio.js +39 -21
  69. package/dist/radio/index.d.ts +23 -0
  70. package/dist/resultsetTable/ResultsetTable.js +93 -69
  71. package/dist/resultsetTable/index.d.ts +19 -0
  72. package/dist/select/Select.js +957 -262
  73. package/dist/select/index.d.ts +131 -0
  74. package/dist/sidenav/Sidenav.js +87 -125
  75. package/dist/sidenav/index.d.ts +13 -0
  76. package/dist/slider/Slider.js +219 -73
  77. package/dist/slider/index.d.ts +29 -0
  78. package/dist/spinner/Spinner.js +249 -64
  79. package/dist/spinner/index.d.ts +17 -0
  80. package/dist/switch/Switch.js +51 -26
  81. package/dist/switch/index.d.ts +24 -0
  82. package/dist/table/Table.js +63 -15
  83. package/dist/table/index.d.ts +13 -0
  84. package/dist/tabs/Tabs.js +208 -35
  85. package/dist/tabs/index.d.ts +19 -0
  86. package/dist/tag/Tag.js +100 -35
  87. package/dist/tag/index.d.ts +24 -0
  88. package/dist/text-input/TextInput.js +974 -0
  89. package/dist/text-input/index.d.ts +135 -0
  90. package/dist/textarea/Textarea.js +250 -107
  91. package/dist/textarea/index.d.ts +117 -0
  92. package/dist/toggle/Toggle.js +16 -19
  93. package/dist/toggle/index.d.ts +21 -0
  94. package/dist/toggle-group/ToggleGroup.js +327 -0
  95. package/dist/toggle-group/index.d.ts +21 -0
  96. package/dist/upload/Upload.js +13 -8
  97. package/dist/upload/buttons-upload/ButtonsUpload.js +35 -25
  98. package/dist/upload/buttons-upload/Icons.js +40 -0
  99. package/dist/upload/dragAndDropArea/DragAndDropArea.js +84 -37
  100. package/dist/upload/dragAndDropArea/Icons.js +39 -0
  101. package/dist/upload/file-upload/FileToUpload.js +64 -33
  102. package/dist/upload/file-upload/Icons.js +66 -0
  103. package/dist/upload/files-upload/FilesToUpload.js +16 -16
  104. package/dist/upload/index.d.ts +15 -0
  105. package/dist/upload/transaction/Icons.js +160 -0
  106. package/dist/upload/transaction/Transaction.js +42 -49
  107. package/dist/upload/transactions/Transactions.js +38 -20
  108. package/dist/useTheme.js +22 -0
  109. package/dist/wizard/Icons.js +65 -0
  110. package/dist/wizard/Wizard.js +156 -61
  111. package/dist/wizard/index.d.ts +18 -0
  112. package/package.json +26 -14
  113. package/test/AccordionGroup.test.js +125 -0
  114. package/test/Date.test.js +15 -13
  115. package/test/DateInput.test.js +242 -0
  116. package/test/Dropdown.test.js +19 -4
  117. package/test/FileInput.test.js +201 -0
  118. package/test/Footer.test.js +2 -7
  119. package/test/Header.test.js +5 -10
  120. package/test/Heading.test.js +60 -12
  121. package/test/InputText.test.js +31 -28
  122. package/test/Link.test.js +25 -7
  123. package/test/NumberInput.test.js +259 -0
  124. package/test/Paginator.test.js +76 -60
  125. package/test/PasswordInput.test.js +83 -0
  126. package/test/ResultsetTable.test.js +65 -17
  127. package/test/Select.test.js +869 -132
  128. package/test/Sidenav.test.js +22 -64
  129. package/test/Slider.test.js +24 -15
  130. package/test/Spinner.test.js +5 -0
  131. package/test/Tabs.test.js +21 -0
  132. package/test/TextInput.test.js +731 -0
  133. package/test/Textarea.test.js +193 -0
  134. package/test/ToggleGroup.test.js +85 -0
  135. package/test/Upload.test.js +1 -1
  136. package/test/V3Select.test.js +212 -0
  137. package/test/{TextArea.test.js → V3TextArea.test.js} +6 -7
  138. package/dist/accordion/Accordion.stories.js +0 -207
  139. package/dist/accordion/readme.md +0 -96
  140. package/dist/alert/Alert.stories.js +0 -158
  141. package/dist/alert/close.svg +0 -4
  142. package/dist/alert/error.svg +0 -4
  143. package/dist/alert/info.svg +0 -4
  144. package/dist/alert/readme.md +0 -43
  145. package/dist/alert/success.svg +0 -4
  146. package/dist/alert/warning.svg +0 -4
  147. package/dist/button/readme.md +0 -93
  148. package/dist/checkbox/Checkbox.stories.js +0 -144
  149. package/dist/checkbox/readme.md +0 -116
  150. package/dist/common/services/example-service.js +0 -10
  151. package/dist/common/services/example-service.test.js +0 -12
  152. package/dist/date/Date.stories.js +0 -205
  153. package/dist/date/calendar.svg +0 -1
  154. package/dist/date/calendar_dark.svg +0 -1
  155. package/dist/date/readme.md +0 -73
  156. package/dist/dialog/Dialog.stories.js +0 -217
  157. package/dist/dialog/readme.md +0 -32
  158. package/dist/dropdown/Dropdown.stories.js +0 -249
  159. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  160. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  161. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  162. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  163. package/dist/dropdown/readme.md +0 -69
  164. package/dist/footer/Footer.stories.js +0 -94
  165. package/dist/footer/dxc_logo_wht.png +0 -0
  166. package/dist/footer/readme.md +0 -41
  167. package/dist/header/Header.stories.js +0 -176
  168. package/dist/header/close_icon.svg +0 -1
  169. package/dist/header/dxc_logo_black.png +0 -0
  170. package/dist/header/dxc_logo_white.png +0 -0
  171. package/dist/header/hamb_menu_black.svg +0 -1
  172. package/dist/header/hamb_menu_white.svg +0 -1
  173. package/dist/header/readme.md +0 -33
  174. package/dist/input-text/InputText.stories.js +0 -209
  175. package/dist/input-text/error.svg +0 -1
  176. package/dist/input-text/readme.md +0 -91
  177. package/dist/link/readme.md +0 -51
  178. package/dist/paginator/images/next.svg +0 -3
  179. package/dist/paginator/images/nextPage.svg +0 -3
  180. package/dist/paginator/images/previous.svg +0 -3
  181. package/dist/paginator/images/previousPage.svg +0 -3
  182. package/dist/paginator/readme.md +0 -50
  183. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  184. package/dist/progress-bar/readme.md +0 -63
  185. package/dist/radio/Radio.stories.js +0 -166
  186. package/dist/radio/readme.md +0 -70
  187. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  188. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  189. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  190. package/dist/select/Select.stories.js +0 -235
  191. package/dist/select/readme.md +0 -72
  192. package/dist/sidenav/arrow_icon.svg +0 -3
  193. package/dist/slider/Slider.stories.js +0 -241
  194. package/dist/slider/readme.md +0 -64
  195. package/dist/spinner/Spinner.stories.js +0 -183
  196. package/dist/spinner/readme.md +0 -65
  197. package/dist/switch/Switch.stories.js +0 -134
  198. package/dist/switch/readme.md +0 -133
  199. package/dist/tabs/Tabs.stories.js +0 -130
  200. package/dist/tabs/readme.md +0 -78
  201. package/dist/tabs-for-sections/TabsForSections.js +0 -107
  202. package/dist/tabs-for-sections/readme.md +0 -78
  203. package/dist/toggle/Toggle.stories.js +0 -297
  204. package/dist/toggle/readme.md +0 -80
  205. package/dist/upload/Upload.stories.js +0 -72
  206. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  207. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  208. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  209. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  210. package/dist/upload/file-upload/audio-icon.svg +0 -4
  211. package/dist/upload/file-upload/close.svg +0 -4
  212. package/dist/upload/file-upload/file-icon.svg +0 -4
  213. package/dist/upload/file-upload/video-icon.svg +0 -4
  214. package/dist/upload/readme.md +0 -37
  215. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  216. package/dist/upload/transaction/audio-icon.svg +0 -4
  217. package/dist/upload/transaction/error-icon.svg +0 -4
  218. package/dist/upload/transaction/file-icon-err.svg +0 -4
  219. package/dist/upload/transaction/file-icon.svg +0 -4
  220. package/dist/upload/transaction/image-icon-err.svg +0 -4
  221. package/dist/upload/transaction/image-icon.svg +0 -4
  222. package/dist/upload/transaction/success-icon.svg +0 -4
  223. package/dist/upload/transaction/video-icon-err.svg +0 -4
  224. package/dist/upload/transaction/video-icon.svg +0 -4
  225. package/dist/wizard/invalid_icon.svg +0 -6
  226. package/dist/wizard/valid_icon.svg +0 -6
  227. package/dist/wizard/validation-wrong.svg +0 -6
  228. package/test/TabsForSections.test.js +0 -34
  229. package/test/Toggle.test.js +0 -43
@@ -1,207 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
6
-
7
- var _react = _interopRequireDefault(require("react"));
8
-
9
- var _react2 = require("@storybook/react");
10
-
11
- var _addonActions = require("@storybook/addon-actions");
12
-
13
- var _addonKnobs = require("@storybook/addon-knobs");
14
-
15
- var _readme = _interopRequireDefault(require("./readme.md"));
16
-
17
- var _Accordion = _interopRequireDefault(require("./Accordion"));
18
-
19
- var _run_icon_black = _interopRequireDefault(require("../../.storybook/public/run_icon_black.png"));
20
-
21
- var onChange = (0, _addonActions.action)("onChange");
22
-
23
- onChange.toString = function () {
24
- return "onChangeHandler";
25
- };
26
-
27
- (0, _react2.storiesOf)("Form Components|Accordion", module).add("Types", function () {
28
- return _react["default"].createElement("div", null, _react["default"].createElement("h3", null, "Light"), _react["default"].createElement("div", {
29
- style: {
30
- marginBottom: "50px"
31
- }
32
- }, _react["default"].createElement(_Accordion["default"], {
33
- label: "First accordion",
34
- onChange: onChange
35
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
36
- theme: "light",
37
- disabled: true,
38
- label: "Second accordion",
39
- onChange: onChange
40
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
41
- label: "Third accordion",
42
- onChange: onChange,
43
- assistiveText: "Extra information"
44
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
45
- theme: "light",
46
- label: "Fourth accordion",
47
- assistiveText: "Extra information",
48
- iconPosition: "before",
49
- iconSrc: _run_icon_black["default"],
50
- onChange: onChange
51
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
52
- theme: "light",
53
- label: "Fifth accordion",
54
- assistiveText: "Extra information",
55
- iconPosition: "after",
56
- iconSrc: _run_icon_black["default"],
57
- onChange: onChange
58
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."))), _react["default"].createElement("div", {
59
- style: {
60
- marginBottom: "50px"
61
- }
62
- }, _react["default"].createElement(_Accordion["default"], {
63
- theme: "light",
64
- mode: "alternative",
65
- label: "First accordion",
66
- onChange: onChange
67
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
68
- theme: "light",
69
- mode: "alternative",
70
- disabled: true,
71
- label: "Second accordion",
72
- onChange: onChange
73
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
74
- theme: "light",
75
- mode: "alternative",
76
- label: "Third accordion",
77
- assistiveText: "Extra information",
78
- onChange: onChange
79
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
80
- theme: "light",
81
- mode: "alternative",
82
- label: "Fourth accordion",
83
- assistiveText: "Extra information",
84
- iconPosition: "before",
85
- iconSrc: _run_icon_black["default"],
86
- onChange: onChange
87
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
88
- theme: "light",
89
- mode: "alternative",
90
- label: "Fifth accordion",
91
- assistiveText: "Extra information",
92
- iconPosition: "after",
93
- iconSrc: _run_icon_black["default"],
94
- onChange: onChange
95
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."))), _react["default"].createElement("h3", null, "Dark"), _react["default"].createElement("div", null, _react["default"].createElement("div", {
96
- style: {
97
- background: "black",
98
- paddingTop: "50px",
99
- paddingBottom: "50px"
100
- }
101
- }, _react["default"].createElement(_Accordion["default"], {
102
- label: "First accordion",
103
- onChange: onChange
104
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
105
- theme: "dark",
106
- disabled: true,
107
- label: "Second accordion",
108
- onChange: onChange
109
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
110
- theme: "dark",
111
- label: "Third accordion",
112
- onChange: onChange,
113
- assistiveText: "Extra information"
114
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
115
- theme: "dark",
116
- label: "Fourth accordion",
117
- assistiveText: "Extra information",
118
- iconPosition: "before",
119
- iconSrc: _run_icon_black["default"],
120
- onChange: onChange
121
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
122
- theme: "dark",
123
- label: "Fifth accordion",
124
- assistiveText: "Extra information",
125
- iconPosition: "after",
126
- iconSrc: _run_icon_black["default"],
127
- onChange: onChange
128
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."))), _react["default"].createElement("div", {
129
- style: {
130
- background: "black",
131
- paddingBottom: "50px"
132
- }
133
- }, _react["default"].createElement(_Accordion["default"], {
134
- theme: "dark",
135
- mode: "alternative",
136
- label: "First accordion",
137
- onChange: onChange
138
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
139
- theme: "dark",
140
- mode: "alternative",
141
- disabled: true,
142
- label: "Second accordion",
143
- onChange: onChange
144
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
145
- theme: "dark",
146
- mode: "alternative",
147
- label: "Third accordion",
148
- assistiveText: "Extra information",
149
- onChange: onChange
150
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
151
- theme: "dark",
152
- mode: "alternative",
153
- label: "Fourth accordion",
154
- assistiveText: "Extra information",
155
- iconPosition: "before",
156
- iconSrc: _run_icon_black["default"],
157
- onChange: onChange
158
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
159
- theme: "dark",
160
- mode: "alternative",
161
- label: "Fifth accordion",
162
- assistiveText: "Extra information",
163
- iconPosition: "after",
164
- iconSrc: _run_icon_black["default"],
165
- onChange: onChange
166
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")))));
167
- }, {
168
- notes: {
169
- markdown: _readme["default"]
170
- }
171
- });
172
-
173
- var knobProps = function knobProps() {
174
- return {
175
- mode: (0, _addonKnobs.select)("mode", {
176
- "default": "default",
177
- alternative: "alternative"
178
- }, "default"),
179
- label: (0, _addonKnobs.text)("label", "Test Accordion"),
180
- assistiveText: (0, _addonKnobs.text)("assistive text", "Extra information"),
181
- theme: (0, _addonKnobs.select)("theme", {
182
- light: "light",
183
- dark: "dark"
184
- }, "light"),
185
- disabled: (0, _addonKnobs["boolean"])("disabled", false),
186
- iconPosition: (0, _addonKnobs.select)("icon position", {
187
- before: "before",
188
- after: "after"
189
- }, "before")
190
- };
191
- };
192
-
193
- (0, _react2.storiesOf)("Form Components|Accordion", module).add("Knobs example", function () {
194
- var props = knobProps();
195
- return _react["default"].createElement("div", {
196
- style: {
197
- background: props.theme === "dark" && "black" || "transparent"
198
- }
199
- }, _react["default"].createElement(_Accordion["default"], (0, _extends2["default"])({}, props, {
200
- onChange: onChange,
201
- iconSrc: _run_icon_black["default"]
202
- }), _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")));
203
- }, {
204
- notes: {
205
- markdown: _readme["default"]
206
- }
207
- });
@@ -1,96 +0,0 @@
1
- # DXC Accordion Component
2
-
3
- ## Usage
4
-
5
- ```js
6
- import { DxcAccordion } from "@dxc-technology/halstack-react";
7
-
8
- <DxcAccordion onChange={handleOnChange} label="Test Accordion" />;
9
- ```
10
-
11
- ## Props
12
-
13
- <table>
14
- <tr style="background-color: grey">
15
- <td>Name</td>
16
- <td>Default</td>
17
- <td>Description</td>
18
- </tr>
19
- <tr>
20
- <td>mode: 'default'|'alternative'</td>
21
- <td><code>'default'</code></td>
22
- <td>Mode for the color of the accordion.</td>
23
- </tr>
24
- <tr>
25
- <td>label: string</td>
26
- <td></td>
27
- <td>The panel label.</td>
28
- </tr>
29
- <tr>
30
- <td>iconSrc: string</td>
31
- <td></td>
32
- <td>URL of the icon that will be placed next to panel label.</td>
33
- </tr>
34
- <tr>
35
- <td>iconPosition: 'before' | 'after'</td>
36
- <td><code>'before'</code></td>
37
- <td>Whether the icon should appear after or before the label.</td>
38
- </tr>
39
- <tr>
40
- <td>assistiveText: string</td>
41
- <td></td>
42
- <td>Assistive text to be placed on the right side of the panel.</td>
43
- </tr>
44
- <tr>
45
- <td>disabled: boolean</td>
46
- <td><code>false</code></td>
47
- <td>If true, the component will be disabled.</td>
48
- </tr>
49
- <tr>
50
- <td>onChange: function</td>
51
- <td></td>
52
- <td>This function will be called when the user clicks the icon to open/close the panel. The state of the panel(opened/closed) should be passed as a parameter.</td>
53
- </tr>
54
- <tr>
55
- <td>theme: 'light' |'dark'</td>
56
- <td><code>'light'</code></td>
57
- <td>Uses one of the available button modes.</td>
58
- </tr>
59
-
60
- </table>
61
-
62
- ## Examples
63
-
64
- - Basic accordion - Light theme - Enabled - With assistive text - Icon after label
65
-
66
- ```js
67
- import React from "react";
68
-
69
- import { DxcAccordion } from "@dxc-technology/halstack-react";
70
-
71
- function App() {
72
- const handleOnChange = event => {
73
- console.log("Accordion clicked");
74
- };
75
-
76
- return (
77
- <div>
78
- <Accordion
79
- theme="light"
80
- label="Fifth accordion"
81
- assistiveText="Extra information"
82
- iconPosition="after"
83
- iconSrc={logo}
84
- onChange={onChange}
85
- >
86
- <div>
87
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
88
- lobortis eget.
89
- </div>
90
- </Accordion>
91
- </div>
92
- );
93
- }
94
-
95
- export default App;
96
- ```
@@ -1,158 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
6
-
7
- var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
8
-
9
- var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
10
-
11
- var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
12
-
13
- var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
14
-
15
- var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
16
-
17
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
18
-
19
- var _react = _interopRequireDefault(require("react"));
20
-
21
- var _react2 = require("@storybook/react");
22
-
23
- var _addonActions = require("@storybook/addon-actions");
24
-
25
- var _addonKnobs = require("@storybook/addon-knobs");
26
-
27
- var _readme = _interopRequireDefault(require("./readme.md"));
28
-
29
- var _Alert = _interopRequireDefault(require("./Alert"));
30
-
31
- var _Button = _interopRequireDefault(require("../button/Button"));
32
-
33
- var _propTypes = require("prop-types");
34
-
35
- (0, _react2.storiesOf)("Form Components|Alert", module).add("Types", function () {
36
- var ControlledStory =
37
- /*#__PURE__*/
38
- function (_React$Component) {
39
- (0, _inherits2["default"])(ControlledStory, _React$Component);
40
-
41
- function ControlledStory(props) {
42
- var _this;
43
-
44
- (0, _classCallCheck2["default"])(this, ControlledStory);
45
- _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(ControlledStory).call(this, props));
46
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setVisibleInfoAlert", function () {
47
- _this.setState({
48
- isVisibleInfoAlert: !_this.state.isVisibleInfoAlert
49
- });
50
- });
51
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setVisibleWarningAlert", function () {
52
- _this.setState({
53
- isVisibleWarningAlert: !_this.state.isVisibleWarningAlert
54
- });
55
- });
56
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setVisibleSuccessAlert", function () {
57
- _this.setState({
58
- isVisibleSuccessAlert: !_this.state.isVisibleSuccessAlert
59
- });
60
- });
61
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setVisibleErrorAlert", function () {
62
- _this.setState({
63
- isVisibleErrorAlert: !_this.state.isVisibleErrorAlert
64
- });
65
- });
66
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setVisibleModalAlert", function () {
67
- _this.setState({
68
- isVisibleModalAlert: !_this.state.isVisibleModalAlert
69
- });
70
- });
71
- _this.state = {
72
- isVisibleInfoAlert: true,
73
- isVisibleWarningAlert: true,
74
- isVisibleSuccessAlert: true,
75
- isVisibleErrorAlert: true,
76
- isVisibleModalAlert: false
77
- };
78
- return _this;
79
- }
80
-
81
- (0, _createClass2["default"])(ControlledStory, [{
82
- key: "render",
83
- value: function render() {
84
- return _react["default"].createElement("div", null, _react["default"].createElement("div", {
85
- style: {
86
- display: "flex",
87
- flexDirection: "column",
88
- position: "static"
89
- }
90
- }, this.state.isVisibleInfoAlert && _react["default"].createElement(_Alert["default"], {
91
- type: "info",
92
- mode: "inline",
93
- inlineText: " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."
94
- }), this.state.isVisibleWarningAlert && _react["default"].createElement(_Alert["default"], {
95
- type: "warning",
96
- mode: "inline",
97
- inlineText: " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.",
98
- onClose: this.setVisibleWarningAlert
99
- }), this.state.isVisibleSuccessAlert && _react["default"].createElement(_Alert["default"], {
100
- type: "confirm",
101
- mode: "inline",
102
- inlineText: " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."
103
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), this.state.isVisibleErrorAlert && _react["default"].createElement(_Alert["default"], {
104
- type: "error",
105
- mode: "inline",
106
- inlineText: " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.",
107
- onClose: this.setVisibleErrorAlert
108
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."))), _react["default"].createElement("div", {
109
- style: {
110
- marginLeft: "33px"
111
- }
112
- }, _react["default"].createElement(_Button["default"], {
113
- mode: "basic",
114
- theme: "light",
115
- label: "Overlay Alert",
116
- onClick: this.setVisibleModalAlert
117
- })), this.state.isVisibleModalAlert && _react["default"].createElement(_Alert["default"], {
118
- type: "info",
119
- mode: "modal",
120
- inlineText: " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.",
121
- onClose: this.setVisibleModalAlert
122
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")));
123
- }
124
- }]);
125
- return ControlledStory;
126
- }(_react["default"].Component);
127
-
128
- return _react["default"].createElement(ControlledStory, null);
129
- }, {
130
- notes: {
131
- markdown: _readme["default"]
132
- }
133
- });
134
-
135
- var knobProps = function knobProps() {
136
- return {
137
- type: (0, _addonKnobs.select)("type", {
138
- info: "info",
139
- confirm: "confirm",
140
- warning: "warning",
141
- error: "error"
142
- }, "info"),
143
- mode: (0, _addonKnobs.select)("mode", {
144
- inline: "inline",
145
- modal: "modal"
146
- }, "inline"),
147
- inlineText: (0, _addonKnobs.text)("inlineText", "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")
148
- };
149
- };
150
-
151
- (0, _react2.storiesOf)("Form Components|Alert", module).add("Knobs example", function () {
152
- var props = knobProps();
153
- return _react["default"].createElement("div", null, _react["default"].createElement(_Alert["default"], props, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")));
154
- }, {
155
- notes: {
156
- markdown: _readme["default"]
157
- }
158
- });
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
2
- <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
3
- <path d="M0 0h24v24H0z" fill="none"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 24 24">
2
- <path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z" fill="#EE2222"/>
3
- <path d="M0 0h24v24H0z" fill="none"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 24 24" fill="#4A90E2">
2
- <path d="M0 0h24v24H0z" fill="none"/>
3
- <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
4
- </svg>
@@ -1,43 +0,0 @@
1
- # DXC Alert Component
2
-
3
- ## Props
4
-
5
- <table>
6
- <tr style="background-color: grey">
7
- <td>Name</td>
8
- <td>Default</td>
9
- <td>Description</td>
10
- </tr>
11
- <tr>
12
- <td>type: 'info' | 'confirm' | 'warning' | 'error'</td>
13
- <td><code>'info'</code></td>
14
- <td>Uses on of the available alert types.</td>
15
- </tr>
16
- <tr>
17
- <td>mode: 'inline' | 'modal'</td>
18
- <td><code>'inline'</code></td>
19
- <td>Uses on of the available alert modes:
20
- <ul>
21
- <li>
22
- <strong>inline:</strong> if onClose function is received, close button should be visible and the function should be executed whe its clicked.
23
- There is no overlay layer.
24
- Position should be decided by the user.
25
- </li>
26
- <li>
27
- <strong>modal:</strong> In this mode it will be always an overlay layer behind the alert.
28
- If onClose function is received it will be called if the X button is clicked or if the user clicks outside of the component. The alert should be displayed in the middle of the screen.
29
- </li>
30
- </ul>
31
- </td>
32
- </tr>
33
- <tr>
34
- <td>inlineText: string</td>
35
- <td></td>
36
- <td>Text to display after icon and alert type and before content.</td>
37
- </tr>
38
- <tr>
39
- <td>onClose: function</td>
40
- <td></td>
41
- <td>This function will be called when the user clicks the close button. If there is no function we should close the alert by default.</td>
42
- </tr>
43
- </table>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 24 24" fill="#7ED321">
2
- <path d="M0 0h24v24H0z" fill="none"/>
3
- <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 24 24" fill="#FFD806">
2
- <path d="M0 0h24v24H0z" fill="none"/>
3
- <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
4
- </svg>
@@ -1,93 +0,0 @@
1
- # DXC Button Component
2
-
3
- ## Usage
4
-
5
- ```js
6
- import { DxcButton } from "@dxc-technology/halstack-react";
7
-
8
- <DxcButton onClick={handleClick} label="Test Button" />;
9
- ```
10
-
11
- ## Props
12
-
13
- <table>
14
- <tr style="background-color: grey">
15
- <td>Name</td>
16
- <td>Default</td>
17
- <td>Description</td>
18
- </tr>
19
- <tr>
20
- <td>mode: 'basic' | 'outlined' | 'raised' | 'flat'</td>
21
- <td><code>'basic'</code></td>
22
- <td>Uses on of the available button modes.</td>
23
- </tr>
24
- <tr>
25
- <td>theme: 'light' |'dark'</td>
26
- <td><code>'light'</code></td>
27
- <td>Uses one of the available button modes.</td>
28
- </tr>
29
- <tr>
30
- <td>label: string</td>
31
- <td><code>'basic'</code></td>
32
- <td>Text to be placed next to the button.</td>
33
- </tr>
34
- <tr>
35
- <td>iconSrc: string</td>
36
- <td></td>
37
- <td>URL of the icon that will be placed next to the button label.</td>
38
- </tr>
39
- <tr>
40
- <td>iconPosition: 'before' | 'after'</td>
41
- <td><code>'before'</code></td>
42
- <td>Whether the icon should appear after or before the label.</td>
43
- </tr>
44
- <tr>
45
- <td>disabled: boolean</td>
46
- <td><code>false</code></td>
47
- <td>If true, the component will be disabled.</td>
48
- </tr>
49
- <tr>
50
- <td>disableRipple: boolean</td>
51
- <td><code>false</code></td>
52
- <td>If true, the ripple effect will be disabled.</td>
53
- </tr>
54
- <tr>
55
- <td>onClick: function</td>
56
- <td></td>
57
- <td>This function will be called when the user clicks the button. The event object will be passed as a parameter.</td>
58
- </tr>
59
-
60
- </table>
61
-
62
- ## Examples
63
-
64
- - Basic button - Light theme - Enabled - Icon after label - With ripple
65
-
66
- ```js
67
- import React from "react";
68
-
69
- import { DxcButton } from "@dxc-technology/halstack-react";
70
-
71
- function App() {
72
- const handleOnClick = event => {
73
- console.log("Button clicked");
74
- };
75
-
76
- return (
77
- <div>
78
- <DxcButton
79
- label="Basic"
80
- mode="basic"
81
- disabled={false}
82
- theme="light"
83
- disableRipple={false}
84
- iconPosition="after"
85
- iconSrc="/images/run_icon.png"
86
- onClick={handleOnClick}
87
- />
88
- </div>
89
- );
90
- }
91
-
92
- export default App;
93
- ```