@dxc-technology/halstack-react 0.0.0-7ef55ea → 0.0.0-7f5cfb5

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 (277) hide show
  1. package/README.md +46 -0
  2. package/dist/index.d.mts +4197 -0
  3. package/dist/index.d.ts +4197 -0
  4. package/dist/index.js +16846 -0
  5. package/dist/index.mjs +16755 -0
  6. package/package.json +87 -71
  7. package/BackgroundColorContext.d.ts +0 -10
  8. package/BackgroundColorContext.js +0 -47
  9. package/ThemeContext.d.ts +0 -15
  10. package/ThemeContext.js +0 -243
  11. package/V3Select/V3Select.js +0 -455
  12. package/V3Select/index.d.ts +0 -27
  13. package/V3Textarea/V3Textarea.js +0 -260
  14. package/V3Textarea/index.d.ts +0 -27
  15. package/accordion/Accordion.d.ts +0 -4
  16. package/accordion/Accordion.js +0 -247
  17. package/accordion/Accordion.stories.tsx +0 -307
  18. package/accordion/types.d.ts +0 -64
  19. package/accordion/types.js +0 -5
  20. package/accordion-group/AccordionGroup.d.ts +0 -7
  21. package/accordion-group/AccordionGroup.js +0 -170
  22. package/accordion-group/AccordionGroup.stories.tsx +0 -225
  23. package/accordion-group/types.d.ts +0 -68
  24. package/accordion-group/types.js +0 -5
  25. package/alert/Alert.d.ts +0 -4
  26. package/alert/Alert.js +0 -290
  27. package/alert/Alert.stories.tsx +0 -170
  28. package/alert/types.d.ts +0 -49
  29. package/alert/types.js +0 -5
  30. package/badge/Badge.d.ts +0 -4
  31. package/badge/Badge.js +0 -59
  32. package/badge/types.d.ts +0 -4
  33. package/badge/types.js +0 -5
  34. package/bleed/Bleed.d.ts +0 -3
  35. package/bleed/Bleed.js +0 -84
  36. package/bleed/Bleed.stories.tsx +0 -342
  37. package/bleed/types.d.ts +0 -13
  38. package/bleed/types.js +0 -5
  39. package/box/Box.d.ts +0 -4
  40. package/box/Box.js +0 -126
  41. package/box/Box.stories.tsx +0 -132
  42. package/box/types.d.ts +0 -43
  43. package/box/types.js +0 -5
  44. package/button/Button.d.ts +0 -4
  45. package/button/Button.js +0 -171
  46. package/button/Button.stories.tsx +0 -274
  47. package/button/types.d.ts +0 -53
  48. package/button/types.js +0 -5
  49. package/card/Card.d.ts +0 -4
  50. package/card/Card.js +0 -164
  51. package/card/Card.stories.tsx +0 -201
  52. package/card/ice-cream.jpg +0 -0
  53. package/card/types.d.ts +0 -67
  54. package/card/types.js +0 -5
  55. package/checkbox/Checkbox.d.ts +0 -4
  56. package/checkbox/Checkbox.js +0 -253
  57. package/checkbox/Checkbox.stories.tsx +0 -192
  58. package/checkbox/types.d.ts +0 -60
  59. package/checkbox/types.js +0 -5
  60. package/chip/Chip.d.ts +0 -4
  61. package/chip/Chip.js +0 -161
  62. package/chip/Chip.stories.tsx +0 -119
  63. package/chip/types.d.ts +0 -45
  64. package/chip/types.js +0 -5
  65. package/common/OpenSans.css +0 -81
  66. package/common/RequiredComponent.js +0 -32
  67. package/common/fonts/OpenSans-Bold.ttf +0 -0
  68. package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  69. package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  70. package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  71. package/common/fonts/OpenSans-Italic.ttf +0 -0
  72. package/common/fonts/OpenSans-Light.ttf +0 -0
  73. package/common/fonts/OpenSans-LightItalic.ttf +0 -0
  74. package/common/fonts/OpenSans-Regular.ttf +0 -0
  75. package/common/fonts/OpenSans-SemiBold.ttf +0 -0
  76. package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  77. package/common/utils.js +0 -22
  78. package/common/variables.js +0 -1611
  79. package/date/Date.js +0 -373
  80. package/date/index.d.ts +0 -27
  81. package/date-input/DateInput.d.ts +0 -4
  82. package/date-input/DateInput.js +0 -358
  83. package/date-input/DateInput.stories.tsx +0 -138
  84. package/date-input/types.d.ts +0 -100
  85. package/date-input/types.js +0 -5
  86. package/dialog/Dialog.d.ts +0 -4
  87. package/dialog/Dialog.js +0 -166
  88. package/dialog/Dialog.stories.tsx +0 -212
  89. package/dialog/types.d.ts +0 -43
  90. package/dialog/types.js +0 -5
  91. package/dropdown/Dropdown.d.ts +0 -4
  92. package/dropdown/Dropdown.js +0 -395
  93. package/dropdown/Dropdown.stories.tsx +0 -249
  94. package/dropdown/types.d.ts +0 -80
  95. package/dropdown/types.js +0 -5
  96. package/file-input/FileInput.d.ts +0 -4
  97. package/file-input/FileInput.js +0 -590
  98. package/file-input/FileInput.stories.tsx +0 -507
  99. package/file-input/FileItem.d.ts +0 -14
  100. package/file-input/FileItem.js +0 -184
  101. package/file-input/types.d.ts +0 -112
  102. package/file-input/types.js +0 -5
  103. package/footer/Footer.d.ts +0 -4
  104. package/footer/Footer.js +0 -258
  105. package/footer/Footer.stories.tsx +0 -130
  106. package/footer/Icons.d.ts +0 -2
  107. package/footer/Icons.js +0 -77
  108. package/footer/types.d.ts +0 -65
  109. package/footer/types.js +0 -5
  110. package/header/Header.d.ts +0 -7
  111. package/header/Header.js +0 -324
  112. package/header/Header.stories.tsx +0 -162
  113. package/header/Icons.d.ts +0 -2
  114. package/header/Icons.js +0 -34
  115. package/header/types.d.ts +0 -47
  116. package/header/types.js +0 -5
  117. package/heading/Heading.d.ts +0 -4
  118. package/heading/Heading.js +0 -159
  119. package/heading/Heading.stories.tsx +0 -54
  120. package/heading/types.d.ts +0 -33
  121. package/heading/types.js +0 -5
  122. package/input-text/Icons.js +0 -22
  123. package/input-text/InputText.js +0 -611
  124. package/input-text/index.d.ts +0 -36
  125. package/inset/Inset.d.ts +0 -3
  126. package/inset/Inset.js +0 -84
  127. package/inset/Inset.stories.tsx +0 -229
  128. package/inset/types.d.ts +0 -13
  129. package/inset/types.js +0 -5
  130. package/layout/ApplicationLayout.d.ts +0 -10
  131. package/layout/ApplicationLayout.js +0 -231
  132. package/layout/ApplicationLayout.stories.tsx +0 -171
  133. package/layout/Icons.js +0 -55
  134. package/layout/types.d.ts +0 -57
  135. package/layout/types.js +0 -5
  136. package/link/Link.d.ts +0 -3
  137. package/link/Link.js +0 -153
  138. package/link/Link.stories.tsx +0 -151
  139. package/link/types.d.ts +0 -70
  140. package/link/types.js +0 -5
  141. package/list/List.d.ts +0 -4
  142. package/list/List.js +0 -47
  143. package/list/List.stories.tsx +0 -95
  144. package/list/types.d.ts +0 -7
  145. package/list/types.js +0 -5
  146. package/main.d.ts +0 -51
  147. package/main.js +0 -419
  148. package/number-input/NumberInput.d.ts +0 -4
  149. package/number-input/NumberInput.js +0 -83
  150. package/number-input/NumberInput.stories.tsx +0 -115
  151. package/number-input/NumberInputContext.d.ts +0 -4
  152. package/number-input/NumberInputContext.js +0 -19
  153. package/number-input/numberInputContextTypes.d.ts +0 -19
  154. package/number-input/numberInputContextTypes.js +0 -5
  155. package/number-input/types.d.ts +0 -117
  156. package/number-input/types.js +0 -5
  157. package/paginator/Icons.js +0 -66
  158. package/paginator/Paginator.d.ts +0 -4
  159. package/paginator/Paginator.js +0 -192
  160. package/paginator/Paginator.stories.tsx +0 -63
  161. package/paginator/types.d.ts +0 -38
  162. package/paginator/types.js +0 -5
  163. package/password-input/PasswordInput.d.ts +0 -4
  164. package/password-input/PasswordInput.js +0 -163
  165. package/password-input/PasswordInput.stories.tsx +0 -131
  166. package/password-input/types.d.ts +0 -107
  167. package/password-input/types.js +0 -5
  168. package/progress-bar/ProgressBar.d.ts +0 -4
  169. package/progress-bar/ProgressBar.js +0 -170
  170. package/progress-bar/ProgressBar.stories.jsx +0 -58
  171. package/progress-bar/types.d.ts +0 -37
  172. package/progress-bar/types.js +0 -5
  173. package/radio/Radio.d.ts +0 -4
  174. package/radio/Radio.js +0 -174
  175. package/radio/Radio.stories.tsx +0 -192
  176. package/radio/types.d.ts +0 -54
  177. package/radio/types.js +0 -5
  178. package/radio-group/Radio.d.ts +0 -4
  179. package/radio-group/Radio.js +0 -140
  180. package/radio-group/RadioGroup.d.ts +0 -4
  181. package/radio-group/RadioGroup.js +0 -273
  182. package/radio-group/RadioGroup.stories.tsx +0 -79
  183. package/radio-group/RadioGroup.test.js +0 -248
  184. package/radio-group/types.d.ts +0 -36
  185. package/radio-group/types.js +0 -5
  186. package/resultsetTable/ResultsetTable.d.ts +0 -4
  187. package/resultsetTable/ResultsetTable.js +0 -254
  188. package/resultsetTable/ResultsetTable.stories.tsx +0 -275
  189. package/resultsetTable/types.d.ts +0 -67
  190. package/resultsetTable/types.js +0 -5
  191. package/row/Row.d.ts +0 -3
  192. package/row/Row.js +0 -127
  193. package/row/Row.stories.tsx +0 -237
  194. package/row/types.d.ts +0 -10
  195. package/row/types.js +0 -5
  196. package/select/Select.d.ts +0 -4
  197. package/select/Select.js +0 -869
  198. package/select/Select.stories.tsx +0 -572
  199. package/select/types.d.ts +0 -170
  200. package/select/types.js +0 -5
  201. package/sidenav/Sidenav.d.ts +0 -9
  202. package/sidenav/Sidenav.js +0 -136
  203. package/sidenav/Sidenav.stories.tsx +0 -182
  204. package/sidenav/types.d.ts +0 -50
  205. package/sidenav/types.js +0 -5
  206. package/slider/Slider.d.ts +0 -4
  207. package/slider/Slider.js +0 -317
  208. package/slider/Slider.stories.tsx +0 -177
  209. package/slider/types.d.ts +0 -78
  210. package/slider/types.js +0 -5
  211. package/spinner/Spinner.d.ts +0 -4
  212. package/spinner/Spinner.js +0 -250
  213. package/spinner/Spinner.stories.jsx +0 -103
  214. package/spinner/types.d.ts +0 -32
  215. package/spinner/types.js +0 -5
  216. package/stack/Stack.d.ts +0 -3
  217. package/stack/Stack.js +0 -97
  218. package/stack/Stack.stories.tsx +0 -164
  219. package/stack/types.d.ts +0 -9
  220. package/stack/types.js +0 -5
  221. package/switch/Switch.d.ts +0 -4
  222. package/switch/Switch.js +0 -179
  223. package/switch/Switch.stories.tsx +0 -160
  224. package/switch/types.d.ts +0 -58
  225. package/switch/types.js +0 -5
  226. package/table/Table.d.ts +0 -4
  227. package/table/Table.js +0 -118
  228. package/table/Table.stories.jsx +0 -277
  229. package/table/types.d.ts +0 -21
  230. package/table/types.js +0 -5
  231. package/tabs/Tabs.d.ts +0 -4
  232. package/tabs/Tabs.js +0 -213
  233. package/tabs/Tabs.stories.tsx +0 -120
  234. package/tabs/types.d.ts +0 -78
  235. package/tabs/types.js +0 -5
  236. package/tag/Tag.d.ts +0 -4
  237. package/tag/Tag.js +0 -188
  238. package/tag/Tag.stories.tsx +0 -138
  239. package/tag/types.d.ts +0 -69
  240. package/tag/types.js +0 -5
  241. package/text/Text.d.ts +0 -7
  242. package/text/Text.js +0 -30
  243. package/text/Text.stories.tsx +0 -19
  244. package/text-input/TextInput.d.ts +0 -4
  245. package/text-input/TextInput.js +0 -796
  246. package/text-input/TextInput.stories.tsx +0 -456
  247. package/text-input/types.d.ts +0 -159
  248. package/text-input/types.js +0 -5
  249. package/textarea/Textarea.d.ts +0 -4
  250. package/textarea/Textarea.js +0 -286
  251. package/textarea/Textarea.stories.jsx +0 -136
  252. package/textarea/types.d.ts +0 -130
  253. package/textarea/types.js +0 -5
  254. package/toggle-group/ToggleGroup.d.ts +0 -4
  255. package/toggle-group/ToggleGroup.js +0 -214
  256. package/toggle-group/ToggleGroup.stories.tsx +0 -173
  257. package/toggle-group/types.d.ts +0 -97
  258. package/toggle-group/types.js +0 -5
  259. package/upload/Upload.js +0 -201
  260. package/upload/buttons-upload/ButtonsUpload.js +0 -111
  261. package/upload/buttons-upload/Icons.js +0 -40
  262. package/upload/dragAndDropArea/DragAndDropArea.js +0 -225
  263. package/upload/dragAndDropArea/Icons.js +0 -39
  264. package/upload/file-upload/FileToUpload.js +0 -115
  265. package/upload/file-upload/Icons.js +0 -66
  266. package/upload/files-upload/FilesToUpload.js +0 -109
  267. package/upload/index.d.ts +0 -15
  268. package/upload/transaction/Icons.js +0 -160
  269. package/upload/transaction/Transaction.js +0 -104
  270. package/upload/transactions/Transactions.js +0 -94
  271. package/useTheme.d.ts +0 -2
  272. package/useTheme.js +0 -22
  273. package/wizard/Wizard.d.ts +0 -4
  274. package/wizard/Wizard.js +0 -281
  275. package/wizard/Wizard.stories.tsx +0 -224
  276. package/wizard/types.d.ts +0 -60
  277. package/wizard/types.js +0 -5
@@ -1,253 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _typeof3 = require("@babel/runtime/helpers/typeof");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports["default"] = void 0;
11
-
12
- var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
13
-
14
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
15
-
16
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
17
-
18
- var _react = _interopRequireWildcard(require("react"));
19
-
20
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
21
-
22
- var _Checkbox = _interopRequireDefault(require("@material-ui/core/Checkbox"));
23
-
24
- var _RequiredComponent = _interopRequireDefault(require("../common/RequiredComponent"));
25
-
26
- var _variables = require("../common/variables.js");
27
-
28
- var _utils = require("../common/utils.js");
29
-
30
- var _useTheme = _interopRequireDefault(require("../useTheme"));
31
-
32
- var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext"));
33
-
34
- var _templateObject, _templateObject2, _templateObject3;
35
-
36
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
37
-
38
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
39
-
40
- var DxcCheckbox = function DxcCheckbox(_ref) {
41
- var checked = _ref.checked,
42
- value = _ref.value,
43
- _ref$label = _ref.label,
44
- label = _ref$label === void 0 ? "" : _ref$label,
45
- _ref$labelPosition = _ref.labelPosition,
46
- labelPosition = _ref$labelPosition === void 0 ? "before" : _ref$labelPosition,
47
- _ref$name = _ref.name,
48
- name = _ref$name === void 0 ? "" : _ref$name,
49
- _ref$disabled = _ref.disabled,
50
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
51
- onChange = _ref.onChange,
52
- _ref$required = _ref.required,
53
- required = _ref$required === void 0 ? false : _ref$required,
54
- margin = _ref.margin,
55
- _ref$size = _ref.size,
56
- size = _ref$size === void 0 ? "fitContent" : _ref$size,
57
- _ref$tabIndex = _ref.tabIndex,
58
- tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
59
-
60
- var _useState = (0, _react.useState)(false),
61
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
62
- innerChecked = _useState2[0],
63
- setInnerChecked = _useState2[1];
64
-
65
- var _useState3 = (0, _react.useState)(false),
66
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
67
- isLabelHovered = _useState4[0],
68
- setIsLabelHovered = _useState4[1];
69
-
70
- var colorsTheme = (0, _useTheme["default"])();
71
- var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
72
-
73
- var handlerCheckboxChange = function handlerCheckboxChange(checkboxValue) {
74
- if (checked === undefined) {
75
- var isChecked = checkboxValue.target.checked === undefined ? !innerChecked : checkboxValue.target.checked;
76
- setInnerChecked(isChecked);
77
-
78
- if (typeof onChange === "function") {
79
- onChange(isChecked);
80
- }
81
- } else {
82
- if (typeof onChange === "function") {
83
- onChange(!checked);
84
- }
85
- }
86
- };
87
-
88
- var handleLabelHover = function handleLabelHover() {
89
- setIsLabelHovered(!isLabelHovered);
90
- };
91
-
92
- return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
93
- theme: colorsTheme.checkbox
94
- }, /*#__PURE__*/_react["default"].createElement(CheckboxContainer, {
95
- id: name,
96
- brightness: _variables.componentTokens,
97
- label: label,
98
- labelPosition: labelPosition,
99
- disabled: disabled,
100
- margin: margin,
101
- size: size,
102
- backgroundType: backgroundType,
103
- isLabelHovered: isLabelHovered
104
- }, /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
105
- checked: checked != undefined ? checked : innerChecked,
106
- inputProps: {
107
- name: name,
108
- "aria-label": label,
109
- role: "checkbox",
110
- "aria-checked": checked != undefined ? checked : innerChecked
111
- },
112
- onChange: handlerCheckboxChange,
113
- value: value,
114
- disabled: disabled,
115
- disableRipple: true,
116
- className: "test",
117
- tabIndex: tabIndex
118
- }), /*#__PURE__*/_react["default"].createElement(CheckboxBlackBack, {
119
- labelPosition: labelPosition,
120
- disabled: disabled,
121
- checked: checked != undefined ? checked : innerChecked,
122
- backgroundType: backgroundType
123
- }), required && /*#__PURE__*/_react["default"].createElement(_RequiredComponent["default"], null), label && /*#__PURE__*/_react["default"].createElement(LabelContainer, {
124
- labelPosition: labelPosition,
125
- onClick: disabled === true ? function (e) {} : handlerCheckboxChange,
126
- disabled: disabled,
127
- className: "labelContainer",
128
- backgroundType: backgroundType,
129
- onMouseOver: handleLabelHover,
130
- onMouseOut: handleLabelHover
131
- }, label)));
132
- };
133
-
134
- var sizes = {
135
- small: "120px",
136
- medium: "240px",
137
- large: "480px",
138
- fillParent: "100%",
139
- fitContent: "unset"
140
- };
141
-
142
- var calculateWidth = function calculateWidth(margin, size) {
143
- if (size === "fillParent") {
144
- return "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
145
- }
146
-
147
- return sizes[size];
148
- };
149
-
150
- var getDisabledColor = function getDisabledColor(props, element) {
151
- switch (element) {
152
- case "check":
153
- return props.backgroundType && props.backgroundType === "dark" ? props.theme.disabledCheckColorOnDark : props.theme.disabledCheckColor;
154
- break;
155
-
156
- case "background":
157
- return props.backgroundType && props.backgroundType === "dark" ? props.theme.disabledBackgroundColorCheckedOnDark : props.theme.disabledBackgroundColorChecked;
158
- break;
159
-
160
- case "border":
161
- return props.backgroundType && props.backgroundType === "dark" ? props.theme.disabledBorderColorOnDark : props.theme.disabledBorderColor;
162
- break;
163
-
164
- case "label":
165
- return props.backgroundType && props.backgroundType === "dark" ? props.theme.disabledFontColorOnDark : props.theme.disabledFontColor;
166
- break;
167
- }
168
- };
169
-
170
- var getNotDisabledColor = function getNotDisabledColor(props, element) {
171
- switch (element) {
172
- case "check":
173
- return props.backgroundType && props.backgroundType === "dark" ? props.theme.checkColorOnDark : props.theme.checkColor;
174
- break;
175
-
176
- case "background":
177
- return props.backgroundType && props.backgroundType === "dark" ? props.theme.backgroundColorCheckedOnDark : props.theme.backgroundColorChecked;
178
- break;
179
-
180
- case "border":
181
- return props.backgroundType && props.backgroundType === "dark" ? props.theme.borderColorOnDark : props.theme.borderColor;
182
- break;
183
-
184
- case "label":
185
- return props.backgroundType && props.backgroundType === "dark" ? props.theme.fontColorOnDark : props.theme.fontColor;
186
- break;
187
- }
188
- };
189
-
190
- var LabelContainer = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n"])), function (props) {
191
- return props.disabled ? getDisabledColor(props, "label") : getNotDisabledColor(props, "label");
192
- }, function (props) {
193
- return props.disabled ? "not-allowed" : "pointer";
194
- }, function (props) {
195
- return props.theme.fontFamily;
196
- }, function (props) {
197
- return props.theme.fontSize;
198
- }, function (props) {
199
- return props.theme.fontWeight;
200
- });
201
-
202
- var CheckboxContainer = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n width: ", ";\n display: inline-flex;\n align-items: center;\n cursor: ", ";\n position: relative;\n flex-direction: ", ";\n .MuiCheckbox-colorSecondary {\n .MuiIconButton-label {\n & > .MuiSvgIcon-root {\n color: ", ";\n }\n }\n &.Mui-disabled {\n .MuiIconButton-label {\n & > .MuiSvgIcon-root {\n color: ", ";\n opacity: 0.34;\n }\n }\n }\n &.Mui-checked {\n .MuiIconButton-label {\n & > .MuiSvgIcon-root {\n color: ", ";\n }\n }\n\n &:hover {\n background-color: transparent;\n .MuiIconButton-label {\n & > .MuiSvgIcon-root {\n background-color: transparent;\n color: ", ";\n }\n }\n }\n }\n .MuiIconButton-label {\n & > .MuiSvgIcon-root {\n width: 24px;\n height: 24px;\n }\n }\n }\n\n .MuiIconButton-colorSecondary {\n &:hover {\n background-color: transparent;\n }\n }\n .MuiButtonBase-root {\n &:hover {\n .MuiIconButton-label {\n & > .MuiSvgIcon-root {\n color: ", ";\n }\n }\n }\n\n &.Mui-focusVisible {\n .MuiIconButton-label {\n box-shadow: 0 0 0 2px\n ", ";\n }\n }\n z-index: 1;\n margin-left: ", ";\n margin-right: ", ";\n padding: 0px;\n left: ", ";\n right: ", ";\n }\n"])), function (props) {
203
- return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
204
- }, function (props) {
205
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
206
- }, function (props) {
207
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
208
- }, function (props) {
209
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
210
- }, function (props) {
211
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
212
- }, function (props) {
213
- return calculateWidth(props.margin, props.size);
214
- }, function (props) {
215
- return props.disabled ? "not-allowed" : "pointer";
216
- }, function (props) {
217
- return props.labelPosition === "before" ? "row-reverse" : "row";
218
- }, function (props) {
219
- return props.isLabelHovered ? props.backgroundType === "dark" ? props.theme.hoverBorderColorOnDark : props.theme.hoverBorderColor : getNotDisabledColor(props, "border");
220
- }, function (props) {
221
- return getDisabledColor(props, "border");
222
- }, function (props) {
223
- return props.disabled ? getDisabledColor(props, "background") : getNotDisabledColor(props, "background");
224
- }, function (props) {
225
- return props.backgroundType === "dark" ? props.theme.hoverBackgroundColorCheckedOnDark : props.theme.hoverBackgroundColorChecked;
226
- }, function (props) {
227
- return props.backgroundType === "dark" ? props.theme.hoverBorderColorOnDark : props.theme.hoverBorderColor;
228
- }, function (props) {
229
- return props.backgroundType === "dark" ? props.theme.focusColorOnDark : props.theme.focusColor;
230
- }, function (props) {
231
- return props.labelPosition === "before" && props.label ? props.theme.checkLabelSpacing : "0";
232
- }, function (props) {
233
- return props.labelPosition === "after" && props.label ? props.theme.checkLabelSpacing : "0";
234
- }, function (props) {
235
- return props.labelPosition === "before" ? "unset" : "1px";
236
- }, function (props) {
237
- return props.labelPosition === "before" ? "1px" : "unset";
238
- });
239
-
240
- var CheckboxBlackBack = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n background-color: ", ";\n width: 16px;\n height: 16px;\n position: absolute;\n left: ", ";\n right: ", ";\n z-index: 0;\n margin-left: ", ";\n margin-right: ", ";\n"])), function (props) {
241
- return !props.checked ? "transparent" : props.disabled ? getDisabledColor(props, "check") : getNotDisabledColor(props, "check");
242
- }, function (props) {
243
- return props.labelPosition === "before" ? "unset" : "5px";
244
- }, function (props) {
245
- return props.labelPosition === "before" ? "5px" : "unset";
246
- }, function (props) {
247
- return props.labelPosition === "after" ? "0px" : "";
248
- }, function (props) {
249
- return props.labelPosition === "before" ? "0px" : "";
250
- });
251
-
252
- var _default = DxcCheckbox;
253
- exports["default"] = _default;
@@ -1,192 +0,0 @@
1
- import React from "react";
2
- import DxcCheckbox from "./Checkbox";
3
- import { BackgroundColorProvider } from "../BackgroundColorContext";
4
- import Title from "../../.storybook/components/Title";
5
- import ExampleContainer from "../../.storybook/components/ExampleContainer";
6
- import DarkContainer from "../../.storybook/components/DarkSection";
7
- import { userEvent, within } from "@storybook/testing-library";
8
-
9
- export default {
10
- title: "Checkbox",
11
- component: DxcCheckbox,
12
- };
13
-
14
- const Checkbox = () => (
15
- <>
16
- <>
17
- <ExampleContainer>
18
- <Title title="Default" theme="light" level={4} />
19
- <DxcCheckbox label="Checkbox" />
20
- </ExampleContainer>
21
- <ExampleContainer>
22
- <Title title="Focused" theme="light" level={4} />
23
- <DxcCheckbox label="Focused" />
24
- </ExampleContainer>
25
- <ExampleContainer>
26
- <Title title="Checked" theme="light" level={4} />
27
- <DxcCheckbox label="Checkbox" checked />
28
- </ExampleContainer>
29
- <ExampleContainer>
30
- <Title title="Required" theme="light" level={4} />
31
- <DxcCheckbox label="Checkbox" required />
32
- </ExampleContainer>
33
- <ExampleContainer>
34
- <Title title="Disabled and checked" theme="light" level={4} />
35
- <DxcCheckbox label="Checkbox" disabled checked />
36
- </ExampleContainer>
37
- <ExampleContainer>
38
- <Title title="Disabled and required" theme="light" level={4} />
39
- <DxcCheckbox label="Checkbox" disabled required />
40
- </ExampleContainer>
41
- <ExampleContainer>
42
- <Title title="Disabled, required and checked" theme="light" level={4} />
43
- <DxcCheckbox label="Checkbox" disabled required checked />
44
- </ExampleContainer>
45
- <ExampleContainer>
46
- <Title title="Label after" theme="light" level={4} />
47
- <DxcCheckbox label="Checkbox" labelPosition="after" />
48
- </ExampleContainer>
49
- <ExampleContainer>
50
- <Title title="Checked with label after" theme="light" level={4} />
51
- <DxcCheckbox label="Checkbox" checked labelPosition="after" />
52
- </ExampleContainer>
53
- <ExampleContainer>
54
- <Title title="Required with label after" theme="light" level={4} />
55
- <DxcCheckbox label="Checkbox" required labelPosition="after" />
56
- </ExampleContainer>
57
- <ExampleContainer>
58
- <Title title="Disabled and checked with label after" theme="light" level={4} />
59
- <DxcCheckbox label="Checkbox" disabled checked labelPosition="after" />
60
- </ExampleContainer>
61
- <ExampleContainer>
62
- <Title title="Disabled and required with label after" theme="light" level={4} />
63
- <DxcCheckbox label="Checkbox" disabled required labelPosition="after" />
64
- </ExampleContainer>
65
- <ExampleContainer>
66
- <Title title="Disabled, required and checked with label after" theme="light" level={4} />
67
- <DxcCheckbox label="Checkbox" disabled required checked labelPosition="after" />
68
- </ExampleContainer>
69
- <ExampleContainer pseudoState="pseudo-hover">
70
- <Title title="Hovered" theme="light" level={4} />
71
- <DxcCheckbox label="Hovered" />
72
- </ExampleContainer>
73
- <ExampleContainer pseudoState="pseudo-hover">
74
- <Title title="Hovered and checked" theme="light" level={4} />
75
- <DxcCheckbox label="Hovered" checked />
76
- </ExampleContainer>
77
- </>
78
- <BackgroundColorProvider color="#333333">
79
- <DarkContainer>
80
- <>
81
- <ExampleContainer>
82
- <Title title="Default" theme="dark" level={4} />
83
- <DxcCheckbox label="Checkbox" />
84
- </ExampleContainer>
85
- <ExampleContainer>
86
- <Title title="Checked" theme="dark" level={4} />
87
- <DxcCheckbox label="Checkbox" checked />
88
- </ExampleContainer>
89
- <ExampleContainer>
90
- <Title title="Required" theme="dark" level={4} />
91
- <DxcCheckbox label="Checkbox" required />
92
- </ExampleContainer>
93
- <ExampleContainer>
94
- <Title title="Disabled and checked" theme="dark" level={4} />
95
- <DxcCheckbox label="Checkbox" disabled checked />
96
- </ExampleContainer>
97
- <ExampleContainer>
98
- <Title title="Disabled and required" theme="dark" level={4} />
99
- <DxcCheckbox label="Checkbox" disabled required />
100
- </ExampleContainer>
101
- <ExampleContainer>
102
- <Title title="Disabled, required and checked" theme="dark" level={4} />
103
- <DxcCheckbox label="Checkbox" disabled required checked />
104
- </ExampleContainer>
105
- <ExampleContainer>
106
- <Title title="Label after" theme="dark" level={4} />
107
- <DxcCheckbox label="Checkbox" labelPosition="after" />
108
- </ExampleContainer>
109
- <ExampleContainer>
110
- <Title title="Checked with label after" theme="dark" level={4} />
111
- <DxcCheckbox label="Checkbox" checked labelPosition="after" />
112
- </ExampleContainer>
113
- <ExampleContainer>
114
- <Title title="Required with label after" theme="dark" level={4} />
115
- <DxcCheckbox label="Checkbox" required labelPosition="after" />
116
- </ExampleContainer>
117
- <ExampleContainer>
118
- <Title title="Disabled and checked with label after" theme="dark" level={4} />
119
- <DxcCheckbox label="Checkbox" disabled checked labelPosition="after" />
120
- </ExampleContainer>
121
- <ExampleContainer>
122
- <Title title="Disabled and required with label after" theme="dark" level={4} />
123
- <DxcCheckbox label="Checkbox" disabled required labelPosition="after" />
124
- </ExampleContainer>
125
- <ExampleContainer>
126
- <Title title="Disabled, required and checked with label after" theme="dark" level={4} />
127
- <DxcCheckbox label="Checkbox" disabled required checked labelPosition="after" />
128
- </ExampleContainer>
129
- <ExampleContainer pseudoState="pseudo-hover">
130
- <Title title="Hovered" theme="dark" level={4} />
131
- <DxcCheckbox label="Hovered" />
132
- </ExampleContainer>
133
- <ExampleContainer pseudoState="pseudo-hover">
134
- <Title title="Hovered and checked" theme="dark" level={4} />
135
- <DxcCheckbox label="Hovered" checked />
136
- </ExampleContainer>
137
- </>
138
- </DarkContainer>
139
- </BackgroundColorProvider>
140
- <Title title="Sizes" theme="light" level={2} />
141
- <ExampleContainer>
142
- <DxcCheckbox label="Small" size="small" />
143
- </ExampleContainer>
144
- <ExampleContainer>
145
- <DxcCheckbox label="Medium" size="medium" />
146
- </ExampleContainer>
147
- <ExampleContainer>
148
- <DxcCheckbox label="Large" size="large" />
149
- </ExampleContainer>
150
- <ExampleContainer>
151
- <DxcCheckbox label="FitContent" size="fitContent" />
152
- </ExampleContainer>
153
- <ExampleContainer>
154
- <DxcCheckbox label="FillParent" size="fillParent" />
155
- </ExampleContainer>
156
- <Title title="Margins" theme="light" level={2} />
157
- <ExampleContainer>
158
- <Title title="Xxsmall" theme="light" level={4} />
159
- <DxcCheckbox label="Xxsmall" margin={"xxsmall"} />
160
- </ExampleContainer>
161
- <ExampleContainer>
162
- <Title title="Xsmall" theme="light" level={4} />
163
- <DxcCheckbox label="Xsmall" margin={"xsmall"} />
164
- </ExampleContainer>
165
- <ExampleContainer>
166
- <Title title="Small" theme="light" level={4} />
167
- <DxcCheckbox label="Small" margin={"small"} />
168
- </ExampleContainer>
169
- <ExampleContainer>
170
- <Title title="Medium" theme="light" level={4} />
171
- <DxcCheckbox label="Medium" margin={"medium"} />
172
- </ExampleContainer>
173
- <ExampleContainer>
174
- <Title title="Large" theme="light" level={4} />
175
- <DxcCheckbox label="Large" margin={"large"} />
176
- </ExampleContainer>
177
- <ExampleContainer>
178
- <Title title="Xlarge" theme="light" level={4} />
179
- <DxcCheckbox label="Xlarge" margin={"xlarge"} />
180
- </ExampleContainer>
181
- <ExampleContainer>
182
- <Title title="Xxlarge" theme="light" level={4} />
183
- <DxcCheckbox label="Xxlarge" margin={"xxlarge"} />
184
- </ExampleContainer>
185
- </>
186
- );
187
-
188
- export const Chromatic = Checkbox.bind({});
189
- Chromatic.play = async () => {
190
- await userEvent.tab();
191
- await userEvent.tab();
192
- };
@@ -1,60 +0,0 @@
1
- declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2
- declare type Margin = {
3
- top?: Space;
4
- bottom?: Space;
5
- left?: Space;
6
- right?: Space;
7
- };
8
- declare type Props = {
9
- /**
10
- * If true, the component is checked. If undefined the component will be
11
- * uncontrolled and the value will be managed internally by the component.
12
- */
13
- checked?: boolean;
14
- /**
15
- * Will be passed to the value attribute of the html input element.
16
- * When inside a form, this value will be only submitted if the checkbox is checked.
17
- */
18
- value?: string;
19
- /**
20
- * Text to be placed next to the checkbox.
21
- */
22
- label?: string;
23
- /**
24
- * Whether the label should appear after or before the checkbox.
25
- */
26
- labelPosition?: "before" | "after";
27
- /**
28
- * Name attribute of the input element.
29
- */
30
- name?: string;
31
- /**
32
- * If true, the component will be disabled.
33
- */
34
- disabled?: boolean;
35
- /**
36
- * If true, the checkbox will change its appearence, showing that the value is required.
37
- */
38
- required?: boolean;
39
- /**
40
- * This function will be called when the user clicks the checkbox.
41
- * The new value will be passed as a parameter.
42
- */
43
- onChange?: (val: boolean) => void;
44
- /**
45
- * Size of the margin to be applied to the component
46
- * ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
47
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties
48
- * in order to specify different margin sizes.
49
- */
50
- margin?: Space | Margin;
51
- /**
52
- * Size of the component.
53
- */
54
- size?: "small" | "medium" | "large" | "fillParent" | "fitContent";
55
- /**
56
- * Value of the tabindex.
57
- */
58
- tabIndex?: number;
59
- };
60
- export default Props;
package/checkbox/types.js DELETED
@@ -1,5 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
package/chip/Chip.d.ts DELETED
@@ -1,4 +0,0 @@
1
- /// <reference types="react" />
2
- import ChipPropsType from "./types";
3
- declare const DxcChip: ({ label, suffixIcon, prefixIcon, onClickSuffix, onClickPrefix, disabled, margin, tabIndex, }: ChipPropsType) => JSX.Element;
4
- export default DxcChip;