@dxc-technology/halstack-react 0.0.0-c5f6a2f → 0.0.0-c6243ef

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 (112) hide show
  1. package/dist/ThemeContext.js +130 -98
  2. package/dist/accordion/Accordion.js +80 -83
  3. package/dist/accordion-group/AccordionGroup.js +1 -3
  4. package/dist/alert/Alert.js +168 -83
  5. package/dist/alert/index.d.ts +51 -0
  6. package/dist/badge/Badge.js +3 -1
  7. package/dist/box/Box.js +1 -9
  8. package/dist/button/Button.js +30 -20
  9. package/dist/card/Card.js +15 -8
  10. package/dist/checkbox/Checkbox.js +88 -21
  11. package/dist/chip/Chip.js +63 -21
  12. package/dist/common/variables.js +1105 -418
  13. package/dist/date/Date.js +60 -40
  14. package/dist/dialog/Dialog.js +44 -29
  15. package/dist/dropdown/Dropdown.js +162 -74
  16. package/dist/file-input/FileInput.js +644 -0
  17. package/dist/file-input/FileItem.js +280 -0
  18. package/dist/file-input/index.d.ts +81 -0
  19. package/dist/footer/Footer.js +25 -35
  20. package/dist/footer/dxc_logo.svg +15 -0
  21. package/dist/header/Header.js +14 -42
  22. package/dist/header/dxc_logo_black.svg +8 -0
  23. package/dist/heading/Heading.js +1 -5
  24. package/dist/input-text/InputText.js +132 -56
  25. package/dist/layout/ApplicationLayout.js +3 -3
  26. package/dist/link/Link.js +71 -46
  27. package/dist/main.d.ts +8 -0
  28. package/dist/main.js +56 -0
  29. package/dist/new-date/NewDate.js +400 -0
  30. package/dist/new-date/index.d.ts +95 -0
  31. package/dist/new-select/NewSelect.js +836 -0
  32. package/dist/new-select/index.d.ts +53 -0
  33. package/dist/new-textarea/NewTextarea.js +369 -0
  34. package/dist/new-textarea/index.d.ts +117 -0
  35. package/dist/number/Number.js +136 -0
  36. package/dist/number/NumberContext.js +16 -0
  37. package/dist/number/index.d.ts +113 -0
  38. package/dist/paginator/Paginator.js +10 -4
  39. package/dist/password-input/PasswordInput.js +198 -0
  40. package/dist/password-input/index.d.ts +94 -0
  41. package/dist/progress-bar/ProgressBar.js +63 -27
  42. package/dist/radio/Radio.js +28 -9
  43. package/dist/resultsetTable/ResultsetTable.js +64 -38
  44. package/dist/select/Select.js +207 -148
  45. package/dist/sidenav/Sidenav.js +11 -15
  46. package/dist/slider/Slider.js +190 -63
  47. package/dist/spinner/Spinner.js +226 -59
  48. package/dist/switch/Switch.js +3 -3
  49. package/dist/table/Table.js +19 -5
  50. package/dist/tabs/Tabs.js +6 -10
  51. package/dist/tag/Tag.js +50 -36
  52. package/dist/text-input/TextInput.js +971 -0
  53. package/dist/text-input/index.d.ts +135 -0
  54. package/dist/textarea/Textarea.js +59 -33
  55. package/dist/toggle-group/ToggleGroup.js +130 -44
  56. package/dist/upload/Upload.js +1 -5
  57. package/dist/upload/buttons-upload/ButtonsUpload.js +27 -11
  58. package/dist/upload/dragAndDropArea/DragAndDropArea.js +54 -18
  59. package/dist/upload/file-upload/FileToUpload.js +37 -15
  60. package/dist/upload/files-upload/FilesToUpload.js +3 -3
  61. package/dist/upload/transaction/Transaction.js +39 -16
  62. package/dist/upload/transactions/Transactions.js +24 -8
  63. package/dist/wizard/Wizard.js +84 -56
  64. package/dist/wizard/invalid_icon.svg +4 -5
  65. package/dist/wizard/valid_icon.svg +4 -5
  66. package/package.json +4 -2
  67. package/test/Date.test.js +13 -13
  68. package/test/Dropdown.test.js +15 -0
  69. package/test/FileInput.test.js +201 -0
  70. package/test/Link.test.js +3 -2
  71. package/test/NewDate.test.js +232 -0
  72. package/test/NewTextarea.test.js +195 -0
  73. package/test/Number.test.js +257 -0
  74. package/test/Paginator.test.js +1 -1
  75. package/test/PasswordInput.test.js +83 -0
  76. package/test/ResultsetTable.test.js +1 -2
  77. package/test/Select.test.js +44 -24
  78. package/test/Spinner.test.js +5 -0
  79. package/test/TextInput.test.js +732 -0
  80. package/test/ToggleGroup.test.js +5 -1
  81. package/dist/accordion/Accordion.stories.js +0 -207
  82. package/dist/accordion/readme.md +0 -96
  83. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  84. package/dist/accordion-group/readme.md +0 -70
  85. package/dist/alert/Alert.stories.js +0 -158
  86. package/dist/alert/close.svg +0 -4
  87. package/dist/alert/error.svg +0 -4
  88. package/dist/alert/info.svg +0 -4
  89. package/dist/alert/readme.md +0 -43
  90. package/dist/alert/success.svg +0 -4
  91. package/dist/alert/warning.svg +0 -4
  92. package/dist/button/Button.stories.js +0 -224
  93. package/dist/button/readme.md +0 -93
  94. package/dist/date/calendar.svg +0 -1
  95. package/dist/date/calendar_dark.svg +0 -1
  96. package/dist/dialog/Dialog.stories.js +0 -217
  97. package/dist/dialog/readme.md +0 -32
  98. package/dist/dropdown/Dropdown.stories.js +0 -249
  99. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  100. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  101. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  102. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  103. package/dist/dropdown/readme.md +0 -69
  104. package/dist/footer/Footer.stories.js +0 -94
  105. package/dist/footer/dxc_logo_wht.png +0 -0
  106. package/dist/header/dxc_logo_black.png +0 -0
  107. package/dist/header/dxc_logo_blk_rgb.svg +0 -6
  108. package/dist/header/dxc_logo_white.png +0 -0
  109. package/dist/input-text/InputText.stories.js +0 -209
  110. package/dist/select/Select.stories.js +0 -235
  111. package/dist/select/readme.md +0 -72
  112. package/dist/toggle-group/readme.md +0 -82
@@ -1,94 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _react = _interopRequireDefault(require("react"));
6
-
7
- var _react2 = require("@storybook/react");
8
-
9
- var _addonActions = require("@storybook/addon-actions");
10
-
11
- require("../common/OpenSans.css");
12
-
13
- var _addonKnobs = require("@storybook/addon-knobs");
14
-
15
- var _linkedin = _interopRequireDefault(require("../../.storybook/public/linkedin.svg"));
16
-
17
- var _facebook = _interopRequireDefault(require("../../.storybook/public/facebook.svg"));
18
-
19
- var _twitter = _interopRequireDefault(require("../../.storybook/public/twitter.svg"));
20
-
21
- var _InputText = _interopRequireDefault(require("../input-text/InputText"));
22
-
23
- var _readme = _interopRequireDefault(require("./readme.md"));
24
-
25
- var _Footer = _interopRequireDefault(require("./Footer"));
26
-
27
- var social = [{
28
- href: "https://www.linkedin.com/company/dxctechnology",
29
- logoSrc: _linkedin["default"]
30
- }, {
31
- href: "https://twitter.com/dxctechnology",
32
- logoSrc: _twitter["default"]
33
- }, {
34
- href: "https://www.facebook.com/DXCTechnology/",
35
- logoSrc: _facebook["default"]
36
- }];
37
- var bottom = [{
38
- href: "https://www.linkedin.com/company/dxctechnology",
39
- text: "Linkedin"
40
- }, {
41
- href: "https://twitter.com/dxctechnology",
42
- text: "Twitter"
43
- }, {
44
- href: "https://www.facebook.com/DXCTechnology/",
45
- text: "Facebook"
46
- }];
47
- (0, _react2.storiesOf)("Form Components|Footer", module).add("Component", function () {
48
- return _react["default"].createElement("div", null, _react["default"].createElement(_Footer["default"], {
49
- copyright: "\xA9 DXC Technology 2019. All rights reserved.",
50
- bottomLinks: bottom,
51
- socialLinks: social
52
- }), _react["default"].createElement("div", {
53
- style: {
54
- marginTop: "20px"
55
- }
56
- }, _react["default"].createElement(_Footer["default"], {
57
- copyright: "\xA9 DXC Technology 2019. All rights reserved.",
58
- bottomLinks: bottom,
59
- socialLinks: social
60
- }, _react["default"].createElement(_InputText["default"], {
61
- assistiveText: "text input component",
62
- label: "Footer Child",
63
- theme: "dark"
64
- }), _react["default"].createElement(_InputText["default"], {
65
- assistiveText: "text input component",
66
- label: "Footer Child",
67
- theme: "dark"
68
- }), _react["default"].createElement(_InputText["default"], {
69
- assistiveText: "text input component",
70
- label: "Footer Child",
71
- theme: "dark"
72
- }), _react["default"].createElement(_InputText["default"], {
73
- assistiveText: "text input component",
74
- label: "Footer Child",
75
- theme: "dark"
76
- }))));
77
- }, {
78
- notes: {
79
- markdown: _readme["default"]
80
- }
81
- });
82
-
83
- var knobProps = function knobProps() {
84
- return {};
85
- };
86
-
87
- (0, _react2.storiesOf)("Form Components|Footer", module).add("Knobs example", function () {
88
- var props = knobProps();
89
- return _react["default"].createElement("div", null);
90
- }, {
91
- notes: {
92
- markdown: _readme["default"]
93
- }
94
- });
Binary file
Binary file
@@ -1,6 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="300.5" height="48" viewBox="0 0 300.5 48">
2
- <g id="Grupo_1" data-name="Grupo 1" transform="translate(-38 103)">
3
- <rect id="Rectángulo_1" data-name="Rectángulo 1" width="300.5" height="48" transform="translate(38 -103)" fill="none"/>
4
- <path id="Trazado_2" data-name="Trazado 2" d="M49.867,46.715a8.248,8.248,0,0,0-8.284-8.3h-3.6V55h3.6a8.244,8.244,0,0,0,8.284-8.285m6.476,2.693L50.476,59.54h11.7Zm0-5.386,5.835-10.131h-11.7Zm6.444,2.693A8.244,8.244,0,0,0,71.071,55h3.605V38.412H71.071a8.248,8.248,0,0,0-8.284,8.3M330.638,60.21c-1.337,3.391-3.016,5.008-6.842,5.008a13.99,13.99,0,0,1-2.208-.156V60.8a11.909,11.909,0,0,0,1.679.187c1.275,0,2.084-.5,2.737-2.084l.4-.995-6.9-16.142h5.536l4.012,9.921,3.7-9.89h5.226L330.638,60.21M308.869,53.9a4.1,4.1,0,0,1,0-8.18,4.1,4.1,0,0,1,0,8.18m8.988,4.261V41.767H312.85v2.364a5.837,5.837,0,0,0-5.07-2.769c-4.7,0-7.806,3.639-7.806,8.46,0,4.79,3.234,8.18,7.868,8.18a5.85,5.85,0,0,0,4.946-2.488v2.768c0,2.3-1.213,3.577-3.639,3.577-2.146,0-3.328-1-3.546-2.457h-5.039c.28,3.576,3.111,6.127,8.46,6.127,5.941,0,8.833-2.675,8.833-7.371M289.43,53.9a3.821,3.821,0,0,1-3.795-4.075A3.819,3.819,0,1,1,289.43,53.9m0,4.385c5.6,0,8.926-3.888,8.926-8.46,0-4.6-3.328-8.491-8.926-8.491-5.536,0-8.895,3.888-8.895,8.491,0,4.572,3.359,8.46,8.895,8.46m-16.422-.435h5.07V34.52h-5.07ZM261.624,53.9a3.82,3.82,0,0,1-3.794-4.075,3.819,3.819,0,1,1,3.794,4.075m0,4.385c5.6,0,8.927-3.888,8.927-8.46,0-4.6-3.328-8.491-8.927-8.491-5.536,0-8.895,3.888-8.895,8.491,0,4.572,3.359,8.46,8.895,8.46m-27.37-.435h5.07v-8.4c0-2.27,1.058-3.732,3.11-3.732,2.178,0,2.862,1.337,2.862,3.265v8.865h5.069V48.609c0-4.541-1.99-7.247-6.064-7.247a5.4,5.4,0,0,0-5.039,2.737V41.767h-5.008Zm-19.314,0h5.07v-8.4c0-2.27,1.057-3.732,3.11-3.732,2.177,0,2.861,1.337,2.861,3.265v8.865h5.07V48.609c0-4.541-1.991-7.247-6.065-7.247A5.333,5.333,0,0,0,220.01,44.1V34.52h-5.07Zm-2.271-9.891c-.622-3.732-3.39-6.625-8.242-6.625a8.479,8.479,0,1,0,0,16.951c4.852,0,7.62-2.892,8.242-6.625h-5.1a3.122,3.122,0,0,1-3.11,2.333c-2.24,0-3.671-1.9-3.671-4.168s1.431-4.2,3.671-4.2a3.087,3.087,0,0,1,3.079,2.333Zm-26.934-3.017a3.2,3.2,0,0,1,3.359,3.11h-6.811a3.255,3.255,0,0,1,3.452-3.11m7.931,8.025h-4.821a3.19,3.19,0,0,1-3.048,1.648,3.315,3.315,0,0,1-3.546-3.483h11.695a14.55,14.55,0,0,0,.124-1.9c0-4.261-2.954-7.9-8.273-7.9-5.474,0-8.46,3.826-8.46,8.491,0,4.634,3.017,8.46,8.522,8.46,4.386,0,7-2.333,7.807-5.318m-29.454-11.2v3.981h2.519v6.531c0,4.417,2.115,5.816,5.941,5.816a18.617,18.617,0,0,0,3.172-.248V53.772a17.282,17.282,0,0,1-2.021.187c-1.307,0-2.022-.436-2.022-2.053V45.748h3.67V41.767H171.8V37.008h-5.07v4.759Zm-6.871,13.125a3.233,3.233,0,1,0,3.232-3.235,3.231,3.231,0,0,0-3.232,3.235m-12.41,3.359c6.438,0,9.952-3.857,10.637-8.771h-5.319a5.088,5.088,0,0,1-5.194,4.074c-4.012,0-6.1-3.2-6.1-6.9s2.084-6.905,6.1-6.905a5.089,5.089,0,0,1,5.194,4.074h5.319c-.685-4.914-4.2-8.77-10.637-8.77-7.185,0-11.353,5.474-11.353,11.6s4.168,11.6,11.353,11.6m-17.449-.4h6.159l-7.247-11.259,7.184-11.135h-6.033L123.1,42.824l-4.51-7.371H112.46l7.216,11.135L112.4,57.847h6l4.573-7.465ZM100.765,39.994a6.392,6.392,0,0,1,6.5,6.656,6.409,6.409,0,0,1-6.5,6.656H98.06V39.994ZM92.8,57.847h8.211c7.465,0,11.633-5.474,11.633-11.2s-4.2-11.2-11.633-11.2H92.8Z" transform="translate(0.021 -126.891)"/>
5
- </g>
6
- </svg>
Binary file
@@ -1,209 +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 _amazon = _interopRequireDefault(require("../../.storybook/public/amazon.svg"));
16
-
17
- var _readme = _interopRequireDefault(require("./readme.md"));
18
-
19
- var _InputText = _interopRequireDefault(require("./InputText"));
20
-
21
- var onChange = (0, _addonActions.action)("onChange");
22
-
23
- onChange.toString = function () {
24
- return "onChangeHandler";
25
- };
26
-
27
- var onBlur = (0, _addonActions.action)("onBlur");
28
-
29
- onBlur.toString = function () {
30
- return "onBlurHandler";
31
- };
32
-
33
- var onClickIcon = (0, _addonActions.action)("onClickIcon");
34
-
35
- onClickIcon.toString = function () {
36
- return "onClickIconHandler";
37
- };
38
-
39
- (0, _react2.storiesOf)("Form Components|Text", module).add("Component", function () {
40
- return _react["default"].createElement("div", null, _react["default"].createElement("h3", null, "Light"), _react["default"].createElement("div", null, _react["default"].createElement(_InputText["default"], {
41
- disabled: false,
42
- label: "Normal Input",
43
- error: false,
44
- value: "Test Value",
45
- onChange: onChange,
46
- onBlur: onBlur,
47
- required: true,
48
- assistiveText: "Assistive Text Here"
49
- }), _react["default"].createElement(_InputText["default"], {
50
- disabled: false,
51
- label: "With Assistive Text",
52
- assistiveText: "Assistive Text Here",
53
- error: true,
54
- onChange: onChange,
55
- onBlur: onBlur,
56
- required: true
57
- }), _react["default"].createElement(_InputText["default"], {
58
- disabled: false,
59
- label: "With Prefix text",
60
- prefijo: "Kg",
61
- onChange: onChange,
62
- onBlur: onBlur,
63
- assistiveText: "Assistive Text Here"
64
- }), _react["default"].createElement(_InputText["default"], {
65
- disabled: true,
66
- label: "With Sufix text",
67
- sufix: "\u20AC",
68
- onChange: onChange,
69
- onBlur: onBlur
70
- }), _react["default"].createElement(_InputText["default"], {
71
- disabled: true,
72
- label: "With Prefix icon",
73
- prefijoIconSrc: _amazon["default"],
74
- onChange: onChange,
75
- onBlur: onBlur,
76
- onClickIcon: onClickIcon
77
- }), _react["default"].createElement(_InputText["default"], {
78
- disabled: true,
79
- label: "With Sufix icon",
80
- sufixIconSrc: _amazon["default"],
81
- onChange: onChange,
82
- onBlur: onBlur,
83
- onClickIcon: onClickIcon
84
- }), _react["default"].createElement(_InputText["default"], {
85
- disabled: false,
86
- label: "With Sufix icon",
87
- sufixIconSrc: _amazon["default"],
88
- onChange: onChange,
89
- onBlur: onBlur,
90
- onClickIcon: onClickIcon
91
- }), _react["default"].createElement(_InputText["default"], {
92
- disabled: false,
93
- label: "Multiline",
94
- multiline: true,
95
- onChange: onChange,
96
- onBlur: onBlur,
97
- onClickIcon: onClickIcon
98
- })), _react["default"].createElement("h3", null, "Dark"), _react["default"].createElement("div", {
99
- style: {
100
- background: "black"
101
- }
102
- }, _react["default"].createElement(_InputText["default"], {
103
- disabled: false,
104
- theme: "dark",
105
- label: "Normal Input",
106
- error: false,
107
- value: "Test Value",
108
- onChange: onChange,
109
- onBlur: onBlur,
110
- required: true,
111
- assistiveText: "Assistive Text Here"
112
- }), _react["default"].createElement(_InputText["default"], {
113
- disabled: false,
114
- theme: "dark",
115
- label: "With Assistive Text",
116
- assistiveText: "Assistive Text Here",
117
- error: true,
118
- onChange: onChange,
119
- onBlur: onBlur,
120
- required: true
121
- }), _react["default"].createElement(_InputText["default"], {
122
- disabled: false,
123
- theme: "dark",
124
- label: "With Prefix text",
125
- prefijo: "Kg",
126
- onChange: onChange,
127
- onBlur: onBlur,
128
- assistiveText: "Assistive Text Here"
129
- }), _react["default"].createElement(_InputText["default"], {
130
- disabled: true,
131
- label: "With Sufix text",
132
- sufix: "\u20AC",
133
- theme: "dark",
134
- onChange: onChange,
135
- onBlur: onBlur
136
- }), _react["default"].createElement(_InputText["default"], {
137
- disabled: false,
138
- theme: "dark",
139
- label: "With Prefix icon",
140
- prefijoIconSrc: _amazon["default"],
141
- onChange: onChange,
142
- onBlur: onBlur,
143
- onClickIcon: onClickIcon
144
- }), _react["default"].createElement(_InputText["default"], {
145
- disabled: false,
146
- theme: "dark",
147
- label: "With Sufix icon",
148
- sufixIconSrc: _amazon["default"],
149
- onChange: onChange,
150
- onBlur: onBlur,
151
- onClickIcon: onClickIcon
152
- }), _react["default"].createElement(_InputText["default"], {
153
- disabled: false,
154
- theme: "dark",
155
- label: "With Sufix icon",
156
- sufixIconSrc: _amazon["default"],
157
- onChange: onChange,
158
- onBlur: onBlur,
159
- onClickIcon: onClickIcon
160
- }), _react["default"].createElement(_InputText["default"], {
161
- disabled: false,
162
- label: "Multiline",
163
- multiline: true,
164
- sufix: "\u20AC",
165
- prefijo: "Kg",
166
- theme: "dark",
167
- onChange: onChange,
168
- onBlur: onBlur,
169
- onClickIcon: onClickIcon
170
- })));
171
- }, {
172
- notes: {
173
- markdown: _readme["default"]
174
- }
175
- });
176
-
177
- var knobProps = function knobProps() {
178
- return {
179
- label: (0, _addonKnobs.text)("Label", "Test Label"),
180
- theme: (0, _addonKnobs.select)("Theme", {
181
- light: "light",
182
- dark: "dark"
183
- }, "light"),
184
- assistiveText: (0, _addonKnobs.text)("Assistive text", "Helper text"),
185
- disabled: (0, _addonKnobs["boolean"])("Disabled", false),
186
- prefijo: (0, _addonKnobs.text)("Prefix word", ""),
187
- sufix: (0, _addonKnobs.text)("Sufix word", ""),
188
- required: (0, _addonKnobs["boolean"])("Required", false),
189
- error: (0, _addonKnobs["boolean"])("Error", false),
190
- multiline: (0, _addonKnobs["boolean"])("Multiline", false)
191
- };
192
- };
193
-
194
- (0, _react2.storiesOf)("Form Components|Text", module).add("Knobs example", function () {
195
- var props = knobProps();
196
- return _react["default"].createElement("div", {
197
- style: {
198
- background: props.theme === "dark" && "black" || "transparent"
199
- }
200
- }, _react["default"].createElement(_InputText["default"], (0, _extends2["default"])({}, props, {
201
- onChange: onChange,
202
- onBlur: onBlur,
203
- onClickIcon: onClickIcon
204
- })));
205
- }, {
206
- notes: {
207
- markdown: _readme["default"]
208
- }
209
- });
@@ -1,235 +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 _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
8
-
9
- var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
10
-
11
- var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
12
-
13
- var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
14
-
15
- var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
16
-
17
- var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
18
-
19
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
20
-
21
- var _react = _interopRequireDefault(require("react"));
22
-
23
- var _react2 = require("@storybook/react");
24
-
25
- var _addonActions = require("@storybook/addon-actions");
26
-
27
- var _amazon = _interopRequireDefault(require("../../.storybook/public/amazon.svg"));
28
-
29
- var _ebay = _interopRequireDefault(require("../../.storybook/public/ebay.svg"));
30
-
31
- var _apple = _interopRequireDefault(require("../../.storybook/public/apple.svg"));
32
-
33
- var _addonKnobs = require("@storybook/addon-knobs");
34
-
35
- var _readme = _interopRequireDefault(require("./readme.md"));
36
-
37
- var _Select = _interopRequireDefault(require("./Select"));
38
-
39
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
40
-
41
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
42
-
43
- var onChange = (0, _addonActions.action)("onChange");
44
-
45
- onChange.toString = function () {
46
- return "onChangeHandler";
47
- };
48
-
49
- var selectOptions = [{
50
- value: 1,
51
- label: "Amazon",
52
- iconSrc: _amazon["default"]
53
- }, {
54
- value: 2,
55
- label: "Ebay",
56
- iconSrc: _ebay["default"]
57
- }, {
58
- value: 3,
59
- label: "Apple",
60
- iconSrc: _apple["default"]
61
- }];
62
- var selectOptionsWithoutIcon = [{
63
- value: 1,
64
- label: "Amazon"
65
- }, {
66
- value: 2,
67
- label: "Ebay"
68
- }, {
69
- value: 3,
70
- label: "Apple"
71
- }];
72
- var selectOptionsWithoutLabel = [{
73
- value: 1,
74
- label: "",
75
- iconSrc: _amazon["default"]
76
- }, {
77
- value: 2,
78
- label: "",
79
- iconSrc: _ebay["default"]
80
- }, {
81
- value: 3,
82
- label: "",
83
- iconSrc: _apple["default"]
84
- }];
85
- (0, _react2.storiesOf)("Form Components|Select", module).add("Component", function () {
86
- return _react["default"].createElement("div", null, _react["default"].createElement("h2", null, "Light"), _react["default"].createElement("div", null, _react["default"].createElement(_Select["default"], {
87
- disabled: false,
88
- theme: "light",
89
- name: "selectName",
90
- label: "Select Label",
91
- options: selectOptionsWithoutIcon,
92
- required: false,
93
- onChange: onChange,
94
- iconPosition: "before"
95
- })), _react["default"].createElement("h4", null, "Multiple"), _react["default"].createElement("div", null, _react["default"].createElement(_Select["default"], {
96
- disabled: false,
97
- theme: "light",
98
- multiple: true,
99
- name: "selectNameMultiple",
100
- label: "Select Multiple",
101
- options: selectOptionsWithoutIcon,
102
- required: false,
103
- onChange: onChange,
104
- iconPosition: "after"
105
- })), _react["default"].createElement("h4", null, "Only Icons"), _react["default"].createElement("div", null, _react["default"].createElement(_Select["default"], {
106
- disabled: false,
107
- theme: "light",
108
- multiple: true,
109
- name: "selectNameOnlyIcons",
110
- label: "Only icons",
111
- options: selectOptionsWithoutLabel,
112
- required: false,
113
- onChange: onChange,
114
- iconPosition: "before"
115
- })), _react["default"].createElement("h2", null, "Dark"), _react["default"].createElement("div", {
116
- style: {
117
- background: "black"
118
- }
119
- }, _react["default"].createElement(_Select["default"], {
120
- disabled: false,
121
- theme: "dark",
122
- name: "selectNameDark",
123
- label: "Select Label Dark",
124
- options: selectOptions,
125
- required: false,
126
- onChange: onChange,
127
- iconPosition: "before"
128
- }), _react["default"].createElement("h4", null, "Multiple"), _react["default"].createElement("div", null, _react["default"].createElement(_Select["default"], {
129
- disabled: false,
130
- theme: "dark",
131
- multiple: true,
132
- name: "selectNameMultipleDark",
133
- label: "Select Multiple",
134
- options: selectOptions,
135
- required: false,
136
- onChange: onChange,
137
- iconPosition: "after"
138
- })), _react["default"].createElement("h4", null, "Only Icons"), _react["default"].createElement("div", null, _react["default"].createElement(_Select["default"], {
139
- disabled: false,
140
- theme: "dark",
141
- multiple: true,
142
- name: "selectNameOnlyIcons",
143
- label: "Only icons",
144
- options: selectOptionsWithoutLabel,
145
- required: false,
146
- onChange: onChange,
147
- iconPosition: "before"
148
- }))));
149
- }, {
150
- notes: {
151
- markdown: _readme["default"]
152
- }
153
- });
154
- (0, _react2.storiesOf)("Form Components|Select", module).add("Controlled Component", function () {
155
- var ControlledStory =
156
- /*#__PURE__*/
157
- function (_React$Component) {
158
- (0, _inherits2["default"])(ControlledStory, _React$Component);
159
-
160
- function ControlledStory(props) {
161
- var _this;
162
-
163
- (0, _classCallCheck2["default"])(this, ControlledStory);
164
- _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(ControlledStory).call(this, props));
165
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onValueChange", function (value) {
166
- return _this.setState({
167
- value: value
168
- });
169
- });
170
- _this.state = {
171
- value: []
172
- };
173
- return _this;
174
- }
175
-
176
- (0, _createClass2["default"])(ControlledStory, [{
177
- key: "render",
178
- value: function render() {
179
- var props = _objectSpread({}, this.props, {
180
- onChange: this.onValueChange,
181
- value: this.state.value
182
- });
183
-
184
- return _react["default"].createElement(_Select["default"], props);
185
- }
186
- }]);
187
- return ControlledStory;
188
- }(_react["default"].Component);
189
-
190
- var props = {
191
- disabled: false,
192
- theme: "light",
193
- name: "selectName",
194
- multiple: true,
195
- options: selectOptions,
196
- required: false,
197
- iconPosition: "before",
198
- label: "Select label"
199
- };
200
- return _react["default"].createElement(ControlledStory, props);
201
- });
202
-
203
- var knobProps = function knobProps() {
204
- return {
205
- label: (0, _addonKnobs.text)("label", "Test Select"),
206
- theme: (0, _addonKnobs.select)("theme", {
207
- light: "light",
208
- dark: "dark"
209
- }, "light"),
210
- disabled: (0, _addonKnobs["boolean"])("disabled", false),
211
- required: (0, _addonKnobs["boolean"])("required", false),
212
- iconPosition: (0, _addonKnobs.select)("icon poistion", {
213
- before: "before",
214
- after: "after"
215
- }, "before") // ,
216
- // multiple: boolean("multiple", false)
217
-
218
- };
219
- };
220
-
221
- (0, _react2.storiesOf)("Form Components|Select", module).add("Knobs example", function () {
222
- var props = knobProps();
223
- return _react["default"].createElement("div", {
224
- style: {
225
- background: props.theme === "dark" && "black" || "transparent"
226
- }
227
- }, _react["default"].createElement(_Select["default"], (0, _extends2["default"])({}, props, {
228
- options: selectOptions,
229
- onChange: onChange
230
- })));
231
- }, {
232
- notes: {
233
- markdown: _readme["default"]
234
- }
235
- });
@@ -1,72 +0,0 @@
1
- # DXC Select 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>options: object[]</td>
13
- <td><code>[]</code></td>
14
- <td>An array of objects representing the selectable options. Each object has the following properties:
15
- <ul>
16
- <li><b>value</b>: Option inner value</li>
17
- <li><b>label</b>: Option display value</li>
18
- <li><b>iconSrc</b>: URL of the icon that will be placed next to the option label</li>
19
- </ul>
20
- </td>
21
- </tr>
22
- <tr>
23
- <td>iconPosition: 'before' | 'after'</td>
24
- <td><code>'before'</code></td>
25
- <td>In case options include an icon, whether the icon should appear after or before the label.</td>
26
- </tr>
27
- <tr>
28
- <td>value: string | string[]</td>
29
- <td><code>[]</code></td>
30
- <td>The key of the selected value/values. If the select component doesn't allow multiple selection, value must be a string. If the select component allows multiple selection, value must be an array of strings</td>
31
- </tr>
32
- <tr>
33
- <td>multiple: boolean</td>
34
- <td><code>false</code></td>
35
- <td>If true, the select component will support multiple selection. In that case, value must be an array of strings with the keys of the selected values, otherwise value must be a string.</td>
36
- </tr>
37
- <tr>
38
- <td>label: string</td>
39
- <td></td>
40
- <td>Text to be placed next to the select.</td>
41
- </tr>
42
- <tr>
43
- <td>theme: 'light' | 'dark'</td>
44
- <td><code>'light'</code></td>
45
- <td>Uses one of the available component themes.</td>
46
- </tr>
47
- <tr>
48
- <td>name: string</td>
49
- <td></td>
50
- <td>Name attribute of the input element.</td>
51
- </tr>
52
- <tr>
53
- <td>disabled: boolean</td>
54
- <td><code>false</code></td>
55
- <td>If true, the component will be disabled.</td>
56
- </tr>
57
- <tr>
58
- <td>required: boolean</td>
59
- <td><code>false</code></td>
60
- <td>If true, a red asterisk will appear before the label to indicate to the user that the field is required.</td>
61
- </tr>
62
- <tr>
63
- <td>disableRipple: boolean</td>
64
- <td><code>false</code></td>
65
- <td>If true, the ripple effect will be disabled.</td>
66
- </tr>
67
- <tr>
68
- <td>onChange: function</td>
69
- <td></td>
70
- <td>This function will be called every time the selection changes. The string with the key of the selected value will be passed as a parameter to this function. If multiple selection is allowed, an array of keys will be passed</td>
71
- </tr>
72
- </table>