@dxc-technology/halstack-react 0.0.0-b3404a3 → 0.0.0-b3da1a9

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 (151) hide show
  1. package/dist/ThemeContext.js +72 -62
  2. package/dist/V3Textarea/V3Textarea.js +264 -0
  3. package/dist/alert/Alert.js +6 -6
  4. package/dist/alert/index.d.ts +51 -0
  5. package/dist/button/Button.js +3 -3
  6. package/dist/checkbox/Checkbox.js +4 -5
  7. package/dist/common/variables.js +351 -140
  8. package/dist/date/Date.js +10 -12
  9. package/dist/{new-date/NewDate.js → date-input/DateInput.js} +69 -72
  10. package/dist/date-input/index.d.ts +95 -0
  11. package/dist/dropdown/Dropdown.js +8 -13
  12. package/dist/file-input/FileInput.js +644 -0
  13. package/dist/file-input/FileItem.js +280 -0
  14. package/dist/file-input/index.d.ts +81 -0
  15. package/dist/footer/Footer.js +44 -18
  16. package/dist/footer/Icons.js +77 -0
  17. package/dist/header/Header.js +122 -55
  18. package/dist/header/Icons.js +59 -0
  19. package/dist/heading/Heading.js +12 -0
  20. package/dist/input-text/Icons.js +22 -0
  21. package/dist/input-text/InputText.js +7 -9
  22. package/dist/layout/ApplicationLayout.js +5 -9
  23. package/dist/layout/Icons.js +55 -0
  24. package/dist/link/Link.js +4 -8
  25. package/dist/main.d.ts +8 -0
  26. package/dist/main.js +37 -29
  27. package/dist/new-select/NewSelect.js +1085 -0
  28. package/dist/new-select/index.d.ts +53 -0
  29. package/dist/{number/Number.js → number-input/NumberInput.js} +9 -11
  30. package/dist/{number/NumberContext.js → number-input/NumberInputContext.js} +2 -2
  31. package/dist/number-input/index.d.ts +113 -0
  32. package/dist/paginator/Icons.js +66 -0
  33. package/dist/paginator/Paginator.js +5 -11
  34. package/dist/{password/Password.js → password-input/PasswordInput.js} +11 -13
  35. package/dist/password-input/index.d.ts +94 -0
  36. package/dist/progress-bar/ProgressBar.js +1 -1
  37. package/dist/select/Select.js +122 -158
  38. package/dist/sidenav/Sidenav.js +6 -4
  39. package/dist/slider/Slider.js +104 -19
  40. package/dist/spinner/Spinner.js +217 -54
  41. package/dist/tag/Tag.js +26 -32
  42. package/dist/{new-input-text/NewInputText.js → text-input/TextInput.js} +184 -174
  43. package/dist/text-input/index.d.ts +135 -0
  44. package/dist/textarea/Textarea.js +227 -122
  45. package/dist/textarea/index.d.ts +117 -0
  46. package/dist/toggle-group/ToggleGroup.js +132 -28
  47. package/dist/upload/Upload.js +3 -3
  48. package/dist/upload/buttons-upload/ButtonsUpload.js +7 -11
  49. package/dist/upload/buttons-upload/Icons.js +40 -0
  50. package/dist/upload/dragAndDropArea/DragAndDropArea.js +14 -14
  51. package/dist/upload/dragAndDropArea/Icons.js +39 -0
  52. package/dist/upload/file-upload/FileToUpload.js +26 -21
  53. package/dist/upload/file-upload/Icons.js +66 -0
  54. package/dist/upload/transaction/Icons.js +160 -0
  55. package/dist/upload/transaction/Transaction.js +11 -38
  56. package/dist/wizard/Icons.js +65 -0
  57. package/dist/wizard/Wizard.js +3 -9
  58. package/package.json +6 -9
  59. package/test/Date.test.js +48 -44
  60. package/test/{NewDate.test.js → DateInput.test.js} +66 -27
  61. package/test/FileInput.test.js +201 -0
  62. package/test/Footer.test.js +2 -7
  63. package/test/Header.test.js +5 -10
  64. package/test/Heading.test.js +60 -12
  65. package/test/InputText.test.js +24 -16
  66. package/test/{Number.test.js → NumberInput.test.js} +84 -66
  67. package/test/Paginator.test.js +1 -1
  68. package/test/PasswordInput.test.js +83 -0
  69. package/test/ResultsetTable.test.js +1 -2
  70. package/test/Select.test.js +40 -17
  71. package/test/Slider.test.js +9 -17
  72. package/test/Spinner.test.js +5 -0
  73. package/test/{NewInputText.test.js → TextInput.test.js} +146 -231
  74. package/test/Textarea.test.js +193 -0
  75. package/test/ToggleGroup.test.js +5 -1
  76. package/test/Upload.test.js +5 -5
  77. package/test/{TextArea.test.js → V3TextArea.test.js} +6 -7
  78. package/dist/checkbox/Checkbox.stories.js +0 -144
  79. package/dist/checkbox/readme.md +0 -116
  80. package/dist/date/Date.stories.js +0 -205
  81. package/dist/date/readme.md +0 -73
  82. package/dist/footer/Footer.stories.js +0 -94
  83. package/dist/footer/dxc_logo.svg +0 -15
  84. package/dist/footer/readme.md +0 -41
  85. package/dist/header/Header.stories.js +0 -176
  86. package/dist/header/close_icon.svg +0 -1
  87. package/dist/header/dxc_logo_black.svg +0 -8
  88. package/dist/header/hamb_menu_black.svg +0 -1
  89. package/dist/header/hamb_menu_white.svg +0 -1
  90. package/dist/header/readme.md +0 -33
  91. package/dist/input-text/InputText.stories.js +0 -209
  92. package/dist/input-text/error.svg +0 -1
  93. package/dist/input-text/readme.md +0 -91
  94. package/dist/layout/facebook.svg +0 -45
  95. package/dist/layout/linkedin.svg +0 -50
  96. package/dist/layout/twitter.svg +0 -53
  97. package/dist/link/readme.md +0 -51
  98. package/dist/new-textarea/NewTextarea.js +0 -346
  99. package/dist/paginator/images/next.svg +0 -3
  100. package/dist/paginator/images/nextPage.svg +0 -3
  101. package/dist/paginator/images/previous.svg +0 -3
  102. package/dist/paginator/images/previousPage.svg +0 -3
  103. package/dist/paginator/readme.md +0 -50
  104. package/dist/password/styles.css +0 -3
  105. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  106. package/dist/progress-bar/readme.md +0 -63
  107. package/dist/radio/Radio.stories.js +0 -166
  108. package/dist/radio/readme.md +0 -70
  109. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  110. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  111. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  112. package/dist/select/Select.stories.js +0 -235
  113. package/dist/select/readme.md +0 -72
  114. package/dist/slider/Slider.stories.js +0 -241
  115. package/dist/slider/readme.md +0 -64
  116. package/dist/spinner/Spinner.stories.js +0 -183
  117. package/dist/spinner/readme.md +0 -65
  118. package/dist/switch/Switch.stories.js +0 -134
  119. package/dist/switch/readme.md +0 -133
  120. package/dist/tabs/Tabs.stories.js +0 -130
  121. package/dist/tabs/readme.md +0 -78
  122. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  123. package/dist/tabs-for-sections/readme.md +0 -78
  124. package/dist/toggle/Toggle.stories.js +0 -297
  125. package/dist/toggle/readme.md +0 -80
  126. package/dist/upload/Upload.stories.js +0 -72
  127. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  128. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  129. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  130. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  131. package/dist/upload/file-upload/audio-icon.svg +0 -4
  132. package/dist/upload/file-upload/close.svg +0 -4
  133. package/dist/upload/file-upload/file-icon.svg +0 -4
  134. package/dist/upload/file-upload/video-icon.svg +0 -4
  135. package/dist/upload/readme.md +0 -37
  136. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  137. package/dist/upload/transaction/audio-icon.svg +0 -4
  138. package/dist/upload/transaction/error-icon.svg +0 -4
  139. package/dist/upload/transaction/file-icon-err.svg +0 -4
  140. package/dist/upload/transaction/file-icon.svg +0 -4
  141. package/dist/upload/transaction/image-icon-err.svg +0 -4
  142. package/dist/upload/transaction/image-icon.svg +0 -4
  143. package/dist/upload/transaction/success-icon.svg +0 -4
  144. package/dist/upload/transaction/video-icon-err.svg +0 -4
  145. package/dist/upload/transaction/video-icon.svg +0 -4
  146. package/dist/wizard/invalid_icon.svg +0 -5
  147. package/dist/wizard/valid_icon.svg +0 -5
  148. package/dist/wizard/validation-wrong.svg +0 -6
  149. package/test/NewTextarea.test.js +0 -201
  150. package/test/Password.test.js +0 -76
  151. package/test/TabsForSections.test.js +0 -34
@@ -1,205 +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 _moment = _interopRequireDefault(require("moment"));
16
-
17
- var _readme = _interopRequireDefault(require("./readme.md"));
18
-
19
- var _Date = _interopRequireDefault(require("./Date"));
20
-
21
- var onChange = (0, _addonActions.action)("onChange");
22
-
23
- onChange.toString = function () {
24
- return "onChangeHandler";
25
- };
26
-
27
- (0, _react2.storiesOf)("Form Components|Date", module).add("Component", function () {
28
- return _react["default"].createElement("div", null, _react["default"].createElement("div", null, _react["default"].createElement(_Date["default"], {
29
- name: "date1",
30
- format: "dd-MM-yyyy",
31
- label: "Date",
32
- theme: "light",
33
- assistiveText: "Assistive text",
34
- onInputChange: function onInputChange(event) {
35
- return console.log(event);
36
- },
37
- onChange: onChange
38
- }), _react["default"].createElement(_Date["default"], {
39
- name: "date2",
40
- format: "dd-MM-yy",
41
- value: (0, _moment["default"])("03/12/1995", "DD/MM/YYYY"),
42
- label: "Default value",
43
- theme: "light",
44
- assistiveText: "Assistive text",
45
- onInputChange: function onInputChange(event) {
46
- return console.log(event);
47
- },
48
- onChange: onChange
49
- }), _react["default"].createElement(_Date["default"], {
50
- name: "date3",
51
- format: "dd/MM/yy",
52
- label: "Invalid Date",
53
- theme: "light",
54
- assistiveText: "Assistive text",
55
- onInputChange: function onInputChange(event) {
56
- return console.log(event);
57
- },
58
- onChange: onChange,
59
- invalid: true
60
- }), _react["default"].createElement(_Date["default"], {
61
- name: "date4",
62
- format: "dd/MM/yy",
63
- label: "Disabled Date",
64
- theme: "light",
65
- assistiveText: "Assistive text",
66
- onInputChange: function onInputChange(event) {
67
- return console.log(event);
68
- },
69
- onChange: onChange,
70
- invalid: true,
71
- disabled: true
72
- }), _react["default"].createElement(_Date["default"], {
73
- name: "date5",
74
- format: "dd/MM/yy",
75
- value: (0, _moment["default"])("03/12/1995", "DD/MM/YYYY"),
76
- label: "Disabled Default Date",
77
- theme: "light",
78
- assistiveText: "Assistive text",
79
- onInputChange: function onInputChange(event) {
80
- return console.log(event);
81
- },
82
- onChange: onChange,
83
- invalid: true,
84
- disabled: true
85
- }), _react["default"].createElement(_Date["default"], {
86
- name: "date6",
87
- format: "dd/MM/yy",
88
- label: "Required Date",
89
- theme: "light",
90
- assistiveText: "Assistive text",
91
- onInputChange: function onInputChange(event) {
92
- return console.log(event);
93
- },
94
- onChange: onChange,
95
- required: true
96
- })), _react["default"].createElement("div", {
97
- style: {
98
- background: "black",
99
- height: "150px"
100
- }
101
- }, _react["default"].createElement(_Date["default"], {
102
- name: "date1",
103
- format: "dd/MM/yyyy",
104
- label: "Date",
105
- theme: "dark",
106
- assistiveText: "Assistive text",
107
- onInputChange: function onInputChange(event) {
108
- return console.log(event);
109
- },
110
- onChange: onChange
111
- }), _react["default"].createElement(_Date["default"], {
112
- name: "date2",
113
- format: "dd/MM/yyyy",
114
- value: (0, _moment["default"])("03/12/1995", "DD/MM/YYYY"),
115
- label: "Default value",
116
- theme: "dark",
117
- assistiveText: "Assistive text",
118
- onInputChange: function onInputChange(event) {
119
- return console.log(event);
120
- },
121
- onChange: onChange
122
- }), _react["default"].createElement(_Date["default"], {
123
- name: "date3",
124
- format: "dd/MM/yy",
125
- label: "Invalid Date",
126
- theme: "dark",
127
- assistiveText: "Assistive text",
128
- onInputChange: function onInputChange(event) {
129
- return console.log(event);
130
- },
131
- onChange: onChange,
132
- invalid: true
133
- }), _react["default"].createElement(_Date["default"], {
134
- name: "date4",
135
- format: "dd/MM/yy",
136
- label: "Disabled Date",
137
- theme: "dark",
138
- assistiveText: "Assistive text",
139
- onInputChange: function onInputChange(event) {
140
- return console.log(event);
141
- },
142
- onChange: onChange,
143
- invalid: true,
144
- disabled: true
145
- }), _react["default"].createElement(_Date["default"], {
146
- name: "date5",
147
- format: "dd/MM/yy",
148
- value: (0, _moment["default"])("03/12/1995", "DD/MM/YYYY"),
149
- label: "Disabled Default Date",
150
- theme: "dark",
151
- assistiveText: "Assistive text",
152
- onInputChange: function onInputChange(event) {
153
- return console.log(event);
154
- },
155
- onChange: onChange,
156
- invalid: true,
157
- disabled: true
158
- }), _react["default"].createElement(_Date["default"], {
159
- name: "date6",
160
- format: "dd/MM/yy",
161
- label: "Required Date",
162
- theme: "dark",
163
- assistiveText: "Assistive text",
164
- onInputChange: function onInputChange(event) {
165
- return console.log(event);
166
- },
167
- onChange: onChange,
168
- required: true
169
- })));
170
- }, {
171
- notes: {
172
- markdown: _readme["default"]
173
- }
174
- });
175
-
176
- var knobProps = function knobProps() {
177
- return {
178
- label: (0, _addonKnobs.text)("Label", "Label"),
179
- assistiveText: (0, _addonKnobs.text)("Assistive Text", "Assistive Text"),
180
- format: (0, _addonKnobs.text)("Format", "dd/MM/yyyy"),
181
- theme: (0, _addonKnobs.select)("Theme", {
182
- light: "light",
183
- dark: "dark"
184
- }, "light"),
185
- disabled: (0, _addonKnobs["boolean"])("Disabled", false),
186
- dissableRipple: (0, _addonKnobs["boolean"])("Disable Ripple", false),
187
- invalid: (0, _addonKnobs["boolean"])("Invalid", false),
188
- required: (0, _addonKnobs["boolean"])("Required", false)
189
- };
190
- };
191
-
192
- (0, _react2.storiesOf)("Form Components|Date", module).add("Knobs example", function () {
193
- var props = knobProps();
194
- return _react["default"].createElement("div", {
195
- style: {
196
- background: props.theme === "dark" && "black" || "transparent"
197
- }
198
- }, _react["default"].createElement(_Date["default"], (0, _extends2["default"])({}, props, {
199
- onChange: onChange
200
- })));
201
- }, {
202
- notes: {
203
- markdown: _readme["default"]
204
- }
205
- });
@@ -1,73 +0,0 @@
1
- # DXC Date 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>value: string</td>
13
- <td></td>
14
- <td>The value of the input element.</td>
15
- </tr>
16
- <tr>
17
- <td>format: string</td>
18
- <td></td>
19
- <td>The format in which the date value will be displayed. User must use this format when editing the input.</td>
20
- </tr>
21
- <tr>
22
- <td>label: string</td>
23
- <td></td>
24
- <td>Text to be placed next to the date component.</td>
25
- </tr>
26
- <tr>
27
- <td>theme: 'light' | 'dark'</td>
28
- <td><code>'light'</code></td>
29
- <td>Uses one of the available component themes.</td>
30
- </tr>
31
- <tr>
32
- <td>name: string</td>
33
- <td></td>
34
- <td>Name attribute of the input element.</td>
35
- </tr>
36
- <tr>
37
- <td>iconSrc: string</td>
38
- <td></td>
39
- <td>The path of an icon to replace the default calendar icon.</td>
40
- </tr>
41
- <tr>
42
- <td>disabled: boolean</td>
43
- <td><code>false</code></td>
44
- <td>If true, the component will be disabled.</td>
45
- </tr>
46
- <tr>
47
- <td>required: boolean</td>
48
- <td><code>false</code></td>
49
- <td>If true, a red asterisk will appear before the label to indicate to the user that the field is required.</td>
50
- </tr>
51
- <tr>
52
- <td>assistiveText: string</td>
53
- <td></td>
54
- <td>Assistive text to be placed at the bottom of the input.</td>
55
- </tr>
56
- <tr>
57
- <td>invalid: boolean</td>
58
- <td><code>false</code></td>
59
- <td>If true, the input will change its appearence, showing that the value is not valid.</td>
60
- </tr>
61
- <tr>
62
- <td>disableRipple: boolean</td>
63
- <td><code>false</code></td>
64
- <td>If true, the ripple effect will be disabled.</td>
65
- </tr>
66
- <tr>
67
- <td>onChange: function</td>
68
- <td></td>
69
- <td>This function will be called when the user types within the input. A string with the current value will be passed to this function and also a date object if the string typed is a valid date<br>
70
- </td>
71
- </tr>
72
- </table>
73
-
@@ -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
- });
@@ -1,15 +0,0 @@
1
- <svg id="g10" xmlns="http://www.w3.org/2000/svg" width="280.781" height="32" viewBox="0 0 280.781 32">
2
- <g id="g12">
3
- <path id="path14" d="M171.5-54.124v12.539h-3.6V-54.124h-4.973v-3.191h13.54v3.191H171.5" transform="translate(-68.528 65.45)" fill="#fff"/>
4
- <path id="path16" d="M189.96-41.585V-57.315h12.326v3.079h-8.753v3.191h7.7v3.078h-7.7v3.3h8.87v3.078H189.96" transform="translate(-77.56 65.45)" fill="#fff"/>
5
- <path id="path18" d="M223.558-41.438a8.1,8.1,0,0,1-8.382-8.1v-.045a8.161,8.161,0,0,1,8.522-8.146,8.6,8.6,0,0,1,6.444,2.431l-2.289,2.543a6.133,6.133,0,0,0-4.178-1.778,4.743,4.743,0,0,0-4.738,4.905v.045a4.752,4.752,0,0,0,4.738,4.95,6,6,0,0,0,4.295-1.845l2.288,2.228a8.491,8.491,0,0,1-6.7,2.813" transform="translate(-86.019 65.583)" fill="#fff"/>
6
- <path id="path20" d="M254.988-41.585V-47.9h-6.63v6.315h-3.6V-57.315h3.6v6.225h6.63v-6.225h3.594v15.731h-3.594" transform="translate(-95.903 65.45)" fill="#fff"/>
7
- <path id="path22" d="M285.991-41.585l-7.914-10v10h-3.549V-57.315h3.316l7.657,9.685v-9.685h3.549v15.731h-3.058" transform="translate(-105.869 65.45)" fill="#fff"/>
8
- <path id="path24" d="M317.2-49.583a4.869,4.869,0,0,0-4.949-4.95,4.793,4.793,0,0,0-4.9,4.905v.045a4.869,4.869,0,0,0,4.949,4.95,4.793,4.793,0,0,0,4.9-4.905Zm-4.949,8.145c-5.043,0-8.661-3.623-8.661-8.1v-.045c0-4.478,3.666-8.146,8.708-8.146s8.66,3.623,8.66,8.1v.045c0,4.477-3.664,8.145-8.708,8.145" transform="translate(-115.631 65.583)" fill="#fff"/>
9
- <path id="path26" d="M336.786-41.585V-57.315h3.6v12.584h8.148v3.146H336.786" transform="translate(-126.654 65.45)" fill="#fff"/>
10
- <path id="path28" d="M372.78-49.583a4.87,4.87,0,0,0-4.949-4.95,4.794,4.794,0,0,0-4.9,4.905v.045a4.869,4.869,0,0,0,4.949,4.95,4.794,4.794,0,0,0,4.9-4.905Zm-4.949,8.145c-5.043,0-8.662-3.623-8.662-8.1v-.045c0-4.478,3.666-8.146,8.708-8.146s8.661,3.623,8.661,8.1v.045c0,4.477-3.666,8.145-8.708,8.145" transform="translate(-135.016 65.583)" fill="#fff"/>
11
- <path id="path30" d="M399.735-41.438c-5.09,0-8.592-3.443-8.592-8.1v-.045a8.243,8.243,0,0,1,8.568-8.146,9.18,9.18,0,0,1,6.42,2.16l-2.265,2.634a6.141,6.141,0,0,0-4.272-1.6,4.807,4.807,0,0,0-4.692,4.905v.045a4.8,4.8,0,0,0,4.949,4.995,5.89,5.89,0,0,0,3.384-.945v-2.25h-3.618v-2.992h7.1v6.841a10.837,10.837,0,0,1-6.98,2.5" transform="translate(-145.284 65.583)" fill="#fff"/>
12
- <path id="path32" d="M428.664-47.855v6.27h-3.6v-6.2l-6.28-9.528h4.2L426.89-51l3.968-6.315h4.085l-6.28,9.46" transform="translate(-154.162 65.45)" fill="#fff"/>
13
- <path id="path34" d="M84.218-55.737a10.063,10.063,0,0,1,2.589-4.4,9.792,9.792,0,0,1,6.985-2.77h11.328V-69.3H93.792a17.041,17.041,0,0,0-11.8,4.759,16.344,16.344,0,0,0-3.547,5.115,13.247,13.247,0,0,0-1.122,3.688Zm0,4.877a10.065,10.065,0,0,0,2.589,4.4,9.793,9.793,0,0,0,6.985,2.77h11.328V-37.3H93.792a17.042,17.042,0,0,1-11.8-4.759,16.339,16.339,0,0,1-3.547-5.114,13.251,13.251,0,0,1-1.122-3.688ZM63.1-47.98,54.45-37.3H45.873l12.957-16-12.957-16H54.45L63.1-58.619l8.65-10.68h8.578l-12.957,16,12.957,16H71.749ZM48.875-55.737a13.212,13.212,0,0,0-1.122-3.688,16.359,16.359,0,0,0-3.546-5.115,17.043,17.043,0,0,0-11.8-4.759H21.08v6.393H32.408a9.79,9.79,0,0,1,6.985,2.77,10.072,10.072,0,0,1,2.59,4.4Zm0,4.877a13.215,13.215,0,0,1-1.122,3.688,16.353,16.353,0,0,1-3.546,5.114,17.044,17.044,0,0,1-11.8,4.759H21.08v-6.393H32.408a9.791,9.791,0,0,0,6.985-2.77,10.074,10.074,0,0,0,2.59-4.4h6.892" transform="translate(-21.08 69.298)" fill="#fff"/>
14
- </g>
15
- </svg>
@@ -1,41 +0,0 @@
1
- # DXC Footer 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>logoSrc: string</td>
13
- <td></td>
14
- <td>The path of an icon to replace the theme logo.</td>
15
- </tr>
16
- <tr>
17
- <td>socialLinks: object[]</td>
18
- <td><code>[]</code></td>
19
- <td>An array of objects representing the links that will be rendered at the bottom part of the footer. Each object has the following properties:
20
- <ul>
21
- <li><b>logoSrc</b>: The path of an icon for the link</li>
22
- <li><b>href</b>: URL of the page the link goes to</li>
23
- </ul>
24
- </td>
25
- </tr>
26
- <tr>
27
- <td>bottomLinks: object[]</td>
28
- <td><code>[]</code></td>
29
- <td>An array of objects representing the incon links that will be rendered at the top-right side of the footer. Each object has the following properties:
30
- <ul>
31
- <li><b>text</b>: Text for the link</li>
32
- <li><b>href</b>: URL of the page the link goes to</li>
33
- </ul>
34
- </td>
35
- </tr>
36
- <tr>
37
- <td>copyright: string</td>
38
- <td></td>
39
- <td>The text that will be displayed as copyright disclaimer.</td>
40
- </tr>
41
- </table>
@@ -1,176 +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 _readme = _interopRequireDefault(require("./readme.md"));
16
-
17
- var _Header = _interopRequireDefault(require("./Header"));
18
-
19
- var _Dropdown = _interopRequireDefault(require("../dropdown/Dropdown"));
20
-
21
- var _Switch = _interopRequireDefault(require("../switch/Switch"));
22
-
23
- var selectOption = function selectOption(option) {
24
- console.log(option);
25
- };
26
-
27
- var onChange = (0, _addonActions.action)("onChange");
28
- var onClick = (0, _addonActions.action)("headerLogo Clicked");
29
- var optionsWithoutIcon = [{
30
- value: 1,
31
- label: "Amazon"
32
- }, {
33
- value: 2,
34
- label: "Ebay"
35
- }, {
36
- value: 3,
37
- label: "Apple"
38
- }];
39
- (0, _react2.storiesOf)("Form Components|Header", module).add("Component", function () {
40
- return _react["default"].createElement("div", {
41
- style: {
42
- background: "lightgrey"
43
- }
44
- }, _react["default"].createElement("div", null, _react["default"].createElement("div", {
45
- style: {
46
- marginBottom: "20px"
47
- }
48
- }, _react["default"].createElement(_Header["default"], {
49
- theme: "light",
50
- underlined: false,
51
- onClick: onClick
52
- }, _react["default"].createElement(_Dropdown["default"], {
53
- theme: "light",
54
- onSelectOption: selectOption,
55
- options: optionsWithoutIcon
56
- }), _react["default"].createElement(_Dropdown["default"], {
57
- theme: "light",
58
- onSelectOption: selectOption,
59
- label: "Dropdown",
60
- options: optionsWithoutIcon
61
- }), _react["default"].createElement(_Switch["default"], {
62
- checked: false,
63
- label: "Switch component",
64
- labelPosition: "after",
65
- theme: "dark",
66
- onChange: onChange
67
- }))), _react["default"].createElement("div", null, _react["default"].createElement(_Header["default"], {
68
- theme: "light",
69
- underlined: true,
70
- onClick: onClick
71
- }, _react["default"].createElement(_Dropdown["default"], {
72
- theme: "light",
73
- onSelectOption: selectOption,
74
- options: optionsWithoutIcon,
75
- mode: "outlined"
76
- }), _react["default"].createElement(_Dropdown["default"], {
77
- theme: "light",
78
- onSelectOption: selectOption,
79
- label: "Dropdown",
80
- options: optionsWithoutIcon,
81
- mode: "outlined"
82
- }), _react["default"].createElement(_Switch["default"], {
83
- checked: false,
84
- label: "Switch component",
85
- labelPosition: "after",
86
- theme: "light",
87
- onChange: onChange
88
- })))), _react["default"].createElement("div", {
89
- style: {
90
- paddingTop: "20px",
91
- height: "200px"
92
- }
93
- }, _react["default"].createElement("div", null, _react["default"].createElement(_Header["default"], {
94
- theme: "dark",
95
- underlined: false
96
- }, _react["default"].createElement(_Dropdown["default"], {
97
- theme: "dark",
98
- onSelectOption: selectOption,
99
- options: optionsWithoutIcon,
100
- mode: "basic"
101
- }), _react["default"].createElement(_Dropdown["default"], {
102
- theme: "dark",
103
- onSelectOption: selectOption,
104
- label: "Dropdown",
105
- options: optionsWithoutIcon,
106
- mode: "basic"
107
- }), _react["default"].createElement(_Switch["default"], {
108
- checked: false,
109
- label: "Switch component",
110
- labelPosition: "after",
111
- theme: "light",
112
- onChange: onChange
113
- }))), _react["default"].createElement("div", {
114
- style: {
115
- marginTop: "20px"
116
- }
117
- }, _react["default"].createElement(_Header["default"], {
118
- theme: "dark",
119
- underlined: true
120
- }, _react["default"].createElement(_Dropdown["default"], {
121
- theme: "dark",
122
- onSelectOption: selectOption,
123
- options: optionsWithoutIcon,
124
- mode: "outlined"
125
- }), _react["default"].createElement(_Dropdown["default"], {
126
- theme: "dark",
127
- onSelectOption: selectOption,
128
- label: "Dropdown",
129
- options: optionsWithoutIcon,
130
- mode: "outlined"
131
- }), _react["default"].createElement(_Switch["default"], {
132
- checked: false,
133
- label: "Switch component",
134
- labelPosition: "after",
135
- theme: "dark",
136
- onChange: onChange
137
- })))));
138
- }, {
139
- notes: {
140
- markdown: _readme["default"]
141
- }
142
- });
143
-
144
- var knobProps = function knobProps() {
145
- return {
146
- theme: (0, _addonKnobs.select)("Theme", {
147
- light: "light",
148
- dark: "dark"
149
- }, "light"),
150
- underlined: (0, _addonKnobs["boolean"])("Underlined", false)
151
- };
152
- };
153
-
154
- (0, _react2.storiesOf)("Form Components|Header", module).add("Knobs example", function () {
155
- var props = knobProps();
156
- return _react["default"].createElement("div", {
157
- style: {
158
- height: "250px",
159
- background: props.theme === "dark" && "black" || "transparent"
160
- }
161
- }, _react["default"].createElement(_Header["default"], props, _react["default"].createElement(_Dropdown["default"], {
162
- theme: props.theme,
163
- mode: props.underlined ? "outlined" : "basic",
164
- onSelectOption: selectOption,
165
- options: optionsWithoutIcon,
166
- label: "Dropdown"
167
- })), _react["default"].createElement("div", {
168
- style: {
169
- marginTop: "20px"
170
- }
171
- }, _react["default"].createElement(_Header["default"], props)));
172
- }, {
173
- notes: {
174
- markdown: _readme["default"]
175
- }
176
- });
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><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"/><path d="M0 0h24v24H0z" fill="none"/></svg>
@@ -1,8 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="73" height="40" viewBox="0 0 73 40">
2
- <g id="g10" transform="translate(0)">
3
- <g id="g12">
4
- <path id="path14" d="M91.613-28.177v2.514H90.231V-28.15l-2.415-3.82h1.616l1.5,2.532,1.526-2.532h1.571ZM83.9-25.555A3.15,3.15,0,0,1,80.6-28.8v-.018a3.231,3.231,0,0,1,3.294-3.262,3.442,3.442,0,0,1,2.469.865l-.87,1.054a2.311,2.311,0,0,0-1.643-.64,1.891,1.891,0,0,0-1.8,1.964v.018a1.886,1.886,0,0,0,1.9,2,2.2,2.2,0,0,0,1.3-.378v-.9H83.858v-1.2h2.729v2.738A4.071,4.071,0,0,1,83.9-25.555Zm-6.416-3.261a1.913,1.913,0,0,0-1.9-1.982A1.883,1.883,0,0,0,73.7-28.835v.018a1.913,1.913,0,0,0,1.9,1.982A1.883,1.883,0,0,0,77.486-28.8Zm-1.9,3.261a3.225,3.225,0,0,1-3.33-3.243v-.018A3.255,3.255,0,0,1,75.6-32.078a3.225,3.225,0,0,1,3.331,3.243v.018A3.255,3.255,0,0,1,75.583-25.555Zm-9.173-.108V-31.97h1.382v5.045h3.133v1.261Zm-3.433-3.153a1.913,1.913,0,0,0-1.9-1.982,1.883,1.883,0,0,0-1.886,1.964v.018a1.913,1.913,0,0,0,1.9,1.982A1.883,1.883,0,0,0,62.978-28.8Zm-1.9,3.261a3.225,3.225,0,0,1-3.33-3.243v-.018a3.255,3.255,0,0,1,3.348-3.262,3.225,3.225,0,0,1,3.331,3.243v.018A3.255,3.255,0,0,1,61.075-25.555Zm-6.508-.108-3.043-4.009v4.009H50.159V-31.97h1.275l2.944,3.883V-31.97h1.364v6.306Zm-8.246,0v-2.531h-2.55v2.531H42.389V-31.97h1.382v2.5h2.55v-2.5H47.7v6.306Zm-8.432.108A3.178,3.178,0,0,1,34.666-28.8v-.018a3.2,3.2,0,0,1,3.276-3.262,3.237,3.237,0,0,1,2.478.973l-.88,1.018a2.315,2.315,0,0,0-1.606-.712,1.866,1.866,0,0,0-1.822,1.964v.018a1.87,1.87,0,0,0,1.822,1.982,2.265,2.265,0,0,0,1.651-.739l.88.891A3.206,3.206,0,0,1,37.889-25.555Zm-9.805-.108V-31.97h4.739v1.235H29.458v1.279h2.962v1.234H29.458V-26.9h3.411v1.234ZM24.322-30.69v5.027H22.939V-30.69H21.028v-1.28h5.206v1.28H24.322" transform="translate(-21.028 65.555)" fill="#100f0d"/>
5
- <path id="path16" d="M75.836-76.712a8.975,8.975,0,0,1,2.246-3.9,8.393,8.393,0,0,1,6.058-2.457h9.824v-5.67H84.139a14.611,14.611,0,0,0-10.232,4.221,14.509,14.509,0,0,0-3.076,4.536,11.913,11.913,0,0,0-.973,3.271Zm0,4.325a8.978,8.978,0,0,0,2.246,3.9,8.394,8.394,0,0,0,6.058,2.457h9.824v5.67H84.139A14.611,14.611,0,0,1,73.907-64.58a14.506,14.506,0,0,1-3.076-4.536,11.91,11.91,0,0,1-.973-3.271ZM57.522-69.832l-7.5,9.473H42.581L53.818-74.55,42.581-88.739H50.02l7.5,9.472,7.5-9.472h7.439L61.225-74.55l11.237,14.19H65.023Zm-12.336-6.88a11.935,11.935,0,0,0-.973-3.271,14.515,14.515,0,0,0-3.076-4.536A14.612,14.612,0,0,0,30.9-88.739H21.081v5.67H30.9a8.394,8.394,0,0,1,6.058,2.457,8.978,8.978,0,0,1,2.246,3.9Zm0,4.325a11.932,11.932,0,0,1-.973,3.271,14.511,14.511,0,0,1-3.076,4.536A14.611,14.611,0,0,1,30.9-60.359H21.081v-5.67H30.9a8.4,8.4,0,0,0,6.058-2.457,8.981,8.981,0,0,0,2.246-3.9h5.978" transform="translate(-21.049 88.739)" fill="#100f0d"/>
6
- </g>
7
- </g>
8
- </svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3,8H21a1,1,0,0,0,0-2H3A1,1,0,0,0,3,8Zm18,8H3a1,1,0,0,0,0,2H21a1,1,0,0,0,0-2Zm0-5H3a1,1,0,0,0,0,2H21a1,1,0,0,0,0-2Z" fill="black"/></svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3,8H21a1,1,0,0,0,0-2H3A1,1,0,0,0,3,8Zm18,8H3a1,1,0,0,0,0,2H21a1,1,0,0,0,0-2Zm0-5H3a1,1,0,0,0,0,2H21a1,1,0,0,0,0-2Z" fill="white"/></svg>
@@ -1,33 +0,0 @@
1
- # DXC Header 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>theme: 'light' | 'dark'</td>
13
- <td><code>'light'</code></td>
14
- <td>Uses one of the available component themes.</td>
15
- </tr>
16
- <tr>
17
- <td>underline: boolean</td>
18
- <td><code>false</code></td>
19
- <td>Wether a contrast line should appear at the bottom of the header.</td>
20
- </tr>
21
- <tr>
22
- <td>logoSrc: string</td>
23
- <td><code>'default'</code></td>
24
- <td>The path of an icon to replace the theme logo.</td>
25
- </tr>
26
- <tr>
27
- <td>onClick: function</td>
28
- <td></td>
29
- <td>This function will be called when the user clicks the header logo.<br>
30
- </td>
31
- </tr>
32
- </table>
33
-