@dxc-technology/halstack-react 0.0.0-e904570 → 0.0.0-e961efe

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 (247) 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 +39 -19
  17. package/dist/box/index.d.ts +25 -0
  18. package/dist/button/Button.js +84 -29
  19. package/dist/button/index.d.ts +24 -0
  20. package/dist/card/Card.js +64 -56
  21. package/dist/card/index.d.ts +22 -0
  22. package/dist/checkbox/Checkbox.js +107 -32
  23. package/dist/checkbox/index.d.ts +24 -0
  24. package/dist/chip/Chip.js +135 -40
  25. package/dist/chip/index.d.ts +22 -0
  26. package/dist/common/RequiredComponent.js +2 -8
  27. package/dist/common/utils.js +2 -22
  28. package/dist/common/variables.js +1482 -105
  29. package/dist/date/Date.js +110 -73
  30. package/dist/date/index.d.ts +27 -0
  31. package/dist/date-input/DateInput.js +400 -0
  32. package/dist/date-input/index.d.ts +95 -0
  33. package/dist/dialog/Dialog.js +61 -36
  34. package/dist/dialog/index.d.ts +18 -0
  35. package/dist/dropdown/Dropdown.js +226 -94
  36. package/dist/dropdown/index.d.ts +26 -0
  37. package/dist/file-input/FileInput.js +644 -0
  38. package/dist/file-input/FileItem.js +287 -0
  39. package/dist/file-input/index.d.ts +81 -0
  40. package/dist/footer/Footer.js +125 -45
  41. package/dist/footer/Icons.js +77 -0
  42. package/dist/footer/index.d.ts +25 -0
  43. package/dist/header/Header.js +211 -91
  44. package/dist/header/Icons.js +59 -0
  45. package/dist/header/index.d.ts +25 -0
  46. package/dist/heading/Heading.js +93 -22
  47. package/dist/heading/index.d.ts +17 -0
  48. package/dist/input-text/Icons.js +22 -0
  49. package/dist/input-text/InputText.js +292 -106
  50. package/dist/input-text/index.d.ts +36 -0
  51. package/dist/layout/ApplicationLayout.js +327 -0
  52. package/dist/layout/Icons.js +55 -0
  53. package/dist/link/Link.js +142 -34
  54. package/dist/link/index.d.ts +23 -0
  55. package/dist/main.d.ts +40 -0
  56. package/dist/main.js +112 -16
  57. package/dist/number-input/NumberInput.js +136 -0
  58. package/dist/number-input/NumberInputContext.js +16 -0
  59. package/dist/number-input/index.d.ts +113 -0
  60. package/dist/paginator/Icons.js +66 -0
  61. package/dist/paginator/Paginator.js +184 -57
  62. package/dist/paginator/index.d.ts +20 -0
  63. package/dist/password-input/PasswordInput.js +203 -0
  64. package/dist/password-input/index.d.ts +94 -0
  65. package/dist/progress-bar/ProgressBar.js +97 -44
  66. package/dist/progress-bar/index.d.ts +18 -0
  67. package/dist/radio/Radio.js +39 -21
  68. package/dist/radio/index.d.ts +23 -0
  69. package/dist/resultsetTable/ResultsetTable.js +93 -69
  70. package/dist/resultsetTable/index.d.ts +19 -0
  71. package/dist/select/Select.js +917 -263
  72. package/dist/select/index.d.ts +53 -0
  73. package/dist/sidenav/Sidenav.js +87 -125
  74. package/dist/sidenav/index.d.ts +13 -0
  75. package/dist/slider/Slider.js +219 -73
  76. package/dist/slider/index.d.ts +29 -0
  77. package/dist/spinner/Spinner.js +249 -64
  78. package/dist/spinner/index.d.ts +17 -0
  79. package/dist/stories/Button.js +71 -0
  80. package/dist/stories/Button.stories.js +55 -0
  81. package/dist/stories/Header.js +67 -0
  82. package/dist/stories/Header.stories.js +31 -0
  83. package/dist/stories/Introduction.stories.mdx +211 -0
  84. package/dist/stories/Page.js +68 -0
  85. package/dist/stories/Page.stories.js +39 -0
  86. package/dist/stories/assets/code-brackets.svg +1 -0
  87. package/dist/stories/assets/colors.svg +1 -0
  88. package/dist/stories/assets/comments.svg +1 -0
  89. package/dist/stories/assets/direction.svg +1 -0
  90. package/dist/stories/assets/flow.svg +1 -0
  91. package/dist/stories/assets/plugin.svg +1 -0
  92. package/dist/stories/assets/repo.svg +1 -0
  93. package/dist/stories/assets/stackalt.svg +1 -0
  94. package/dist/stories/button.css +30 -0
  95. package/dist/stories/header.css +26 -0
  96. package/dist/stories/page.css +69 -0
  97. package/dist/switch/Switch.js +52 -25
  98. package/dist/switch/index.d.ts +24 -0
  99. package/dist/table/Table.js +63 -15
  100. package/dist/table/index.d.ts +13 -0
  101. package/dist/tabs/Tabs.js +210 -50
  102. package/dist/tabs/index.d.ts +19 -0
  103. package/dist/tag/Tag.js +100 -35
  104. package/dist/tag/index.d.ts +24 -0
  105. package/dist/text-input/TextInput.js +974 -0
  106. package/dist/text-input/index.d.ts +135 -0
  107. package/dist/textarea/Textarea.js +250 -107
  108. package/dist/textarea/index.d.ts +117 -0
  109. package/dist/toggle/Toggle.js +16 -19
  110. package/dist/toggle/index.d.ts +21 -0
  111. package/dist/toggle-group/ToggleGroup.js +327 -0
  112. package/dist/toggle-group/index.d.ts +21 -0
  113. package/dist/upload/Upload.js +13 -8
  114. package/dist/upload/buttons-upload/ButtonsUpload.js +35 -25
  115. package/dist/upload/buttons-upload/Icons.js +40 -0
  116. package/dist/upload/dragAndDropArea/DragAndDropArea.js +84 -37
  117. package/dist/upload/dragAndDropArea/Icons.js +39 -0
  118. package/dist/upload/file-upload/FileToUpload.js +64 -33
  119. package/dist/upload/file-upload/Icons.js +66 -0
  120. package/dist/upload/files-upload/FilesToUpload.js +16 -16
  121. package/dist/upload/index.d.ts +15 -0
  122. package/dist/upload/transaction/Icons.js +160 -0
  123. package/dist/upload/transaction/Transaction.js +42 -49
  124. package/dist/upload/transactions/Transactions.js +38 -20
  125. package/dist/useTheme.js +22 -0
  126. package/dist/wizard/Icons.js +65 -0
  127. package/dist/wizard/Wizard.js +156 -61
  128. package/dist/wizard/index.d.ts +18 -0
  129. package/package.json +26 -14
  130. package/test/AccordionGroup.test.js +125 -0
  131. package/test/Date.test.js +15 -13
  132. package/test/DateInput.test.js +242 -0
  133. package/test/Dropdown.test.js +19 -4
  134. package/test/FileInput.test.js +201 -0
  135. package/test/Footer.test.js +2 -7
  136. package/test/Header.test.js +5 -10
  137. package/test/Heading.test.js +60 -12
  138. package/test/InputText.test.js +31 -28
  139. package/test/Link.test.js +25 -7
  140. package/test/NumberInput.test.js +259 -0
  141. package/test/Paginator.test.js +76 -60
  142. package/test/PasswordInput.test.js +83 -0
  143. package/test/ResultsetTable.test.js +65 -17
  144. package/test/Select.test.js +371 -147
  145. package/test/Sidenav.test.js +22 -64
  146. package/test/Slider.test.js +24 -15
  147. package/test/Spinner.test.js +5 -0
  148. package/test/Tabs.test.js +21 -0
  149. package/test/TextInput.test.js +732 -0
  150. package/test/Textarea.test.js +193 -0
  151. package/test/ToggleGroup.test.js +85 -0
  152. package/test/Upload.test.js +1 -1
  153. package/test/V3Select.test.js +212 -0
  154. package/test/{TextArea.test.js → V3TextArea.test.js} +6 -7
  155. package/dist/accordion/Accordion.stories.js +0 -207
  156. package/dist/accordion/readme.md +0 -96
  157. package/dist/alert/Alert.stories.js +0 -158
  158. package/dist/alert/close.svg +0 -4
  159. package/dist/alert/error.svg +0 -4
  160. package/dist/alert/info.svg +0 -4
  161. package/dist/alert/readme.md +0 -43
  162. package/dist/alert/success.svg +0 -4
  163. package/dist/alert/warning.svg +0 -4
  164. package/dist/button/Button.stories.js +0 -224
  165. package/dist/button/readme.md +0 -93
  166. package/dist/checkbox/Checkbox.stories.js +0 -144
  167. package/dist/checkbox/readme.md +0 -116
  168. package/dist/common/services/example-service.js +0 -10
  169. package/dist/common/services/example-service.test.js +0 -12
  170. package/dist/date/Date.stories.js +0 -205
  171. package/dist/date/calendar.svg +0 -1
  172. package/dist/date/calendar_dark.svg +0 -1
  173. package/dist/date/readme.md +0 -73
  174. package/dist/dialog/Dialog.stories.js +0 -217
  175. package/dist/dialog/readme.md +0 -32
  176. package/dist/dropdown/Dropdown.stories.js +0 -249
  177. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  178. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  179. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  180. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  181. package/dist/dropdown/readme.md +0 -69
  182. package/dist/footer/Footer.stories.js +0 -94
  183. package/dist/footer/dxc_logo_wht.png +0 -0
  184. package/dist/footer/readme.md +0 -41
  185. package/dist/header/Header.stories.js +0 -176
  186. package/dist/header/close_icon.svg +0 -1
  187. package/dist/header/dxc_logo_black.png +0 -0
  188. package/dist/header/dxc_logo_white.png +0 -0
  189. package/dist/header/hamb_menu_black.svg +0 -1
  190. package/dist/header/hamb_menu_white.svg +0 -1
  191. package/dist/header/readme.md +0 -33
  192. package/dist/input-text/InputText.stories.js +0 -209
  193. package/dist/input-text/error.svg +0 -1
  194. package/dist/input-text/readme.md +0 -91
  195. package/dist/link/readme.md +0 -51
  196. package/dist/paginator/images/next.svg +0 -3
  197. package/dist/paginator/images/nextPage.svg +0 -3
  198. package/dist/paginator/images/previous.svg +0 -3
  199. package/dist/paginator/images/previousPage.svg +0 -3
  200. package/dist/paginator/readme.md +0 -50
  201. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  202. package/dist/progress-bar/readme.md +0 -63
  203. package/dist/radio/Radio.stories.js +0 -166
  204. package/dist/radio/readme.md +0 -70
  205. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  206. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  207. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  208. package/dist/select/Select.stories.js +0 -235
  209. package/dist/select/readme.md +0 -72
  210. package/dist/sidenav/arrow_icon.svg +0 -3
  211. package/dist/slider/Slider.stories.js +0 -241
  212. package/dist/slider/readme.md +0 -64
  213. package/dist/spinner/Spinner.stories.js +0 -183
  214. package/dist/spinner/readme.md +0 -65
  215. package/dist/switch/Switch.stories.js +0 -134
  216. package/dist/switch/readme.md +0 -133
  217. package/dist/tabs/Tabs.stories.js +0 -130
  218. package/dist/tabs/readme.md +0 -78
  219. package/dist/tabs-for-sections/TabsForSections.js +0 -107
  220. package/dist/tabs-for-sections/readme.md +0 -78
  221. package/dist/toggle/Toggle.stories.js +0 -297
  222. package/dist/toggle/readme.md +0 -80
  223. package/dist/upload/Upload.stories.js +0 -72
  224. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  225. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  226. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  227. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  228. package/dist/upload/file-upload/audio-icon.svg +0 -4
  229. package/dist/upload/file-upload/close.svg +0 -4
  230. package/dist/upload/file-upload/file-icon.svg +0 -4
  231. package/dist/upload/file-upload/video-icon.svg +0 -4
  232. package/dist/upload/readme.md +0 -37
  233. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  234. package/dist/upload/transaction/audio-icon.svg +0 -4
  235. package/dist/upload/transaction/error-icon.svg +0 -4
  236. package/dist/upload/transaction/file-icon-err.svg +0 -4
  237. package/dist/upload/transaction/file-icon.svg +0 -4
  238. package/dist/upload/transaction/image-icon-err.svg +0 -4
  239. package/dist/upload/transaction/image-icon.svg +0 -4
  240. package/dist/upload/transaction/success-icon.svg +0 -4
  241. package/dist/upload/transaction/video-icon-err.svg +0 -4
  242. package/dist/upload/transaction/video-icon.svg +0 -4
  243. package/dist/wizard/invalid_icon.svg +0 -6
  244. package/dist/wizard/valid_icon.svg +0 -6
  245. package/dist/wizard/validation-wrong.svg +0 -6
  246. package/test/TabsForSections.test.js +0 -34
  247. 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>