@dxc-technology/halstack-react 0.0.0-aea2c74 → 0.0.0-af3aa81

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 (251) hide show
  1. package/README.md +46 -0
  2. package/dist/index.d.mts +6553 -0
  3. package/dist/index.d.ts +6553 -0
  4. package/dist/index.js +14547 -0
  5. package/dist/index.mjs +14489 -0
  6. package/package.json +69 -68
  7. package/BackgroundColorContext.d.ts +0 -10
  8. package/BackgroundColorContext.js +0 -48
  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 -258
  17. package/accordion/Accordion.stories.tsx +0 -300
  18. package/accordion/types.d.ts +0 -68
  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 -72
  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.js +0 -59
  31. package/box/Box.d.ts +0 -4
  32. package/box/Box.js +0 -126
  33. package/box/Box.stories.tsx +0 -132
  34. package/box/types.d.ts +0 -43
  35. package/box/types.js +0 -5
  36. package/button/Button.d.ts +0 -4
  37. package/button/Button.js +0 -179
  38. package/button/Button.stories.tsx +0 -276
  39. package/button/types.d.ts +0 -57
  40. package/button/types.js +0 -5
  41. package/card/Card.d.ts +0 -4
  42. package/card/Card.js +0 -164
  43. package/card/Card.stories.tsx +0 -201
  44. package/card/ice-cream.jpg +0 -0
  45. package/card/types.d.ts +0 -67
  46. package/card/types.js +0 -5
  47. package/checkbox/Checkbox.d.ts +0 -4
  48. package/checkbox/Checkbox.js +0 -253
  49. package/checkbox/Checkbox.stories.tsx +0 -192
  50. package/checkbox/types.d.ts +0 -60
  51. package/checkbox/types.js +0 -5
  52. package/chip/Chip.d.ts +0 -4
  53. package/chip/Chip.js +0 -199
  54. package/chip/Chip.stories.tsx +0 -121
  55. package/chip/types.d.ts +0 -53
  56. package/chip/types.js +0 -5
  57. package/common/OpenSans.css +0 -81
  58. package/common/RequiredComponent.js +0 -32
  59. package/common/fonts/OpenSans-Bold.ttf +0 -0
  60. package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  61. package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  62. package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  63. package/common/fonts/OpenSans-Italic.ttf +0 -0
  64. package/common/fonts/OpenSans-Light.ttf +0 -0
  65. package/common/fonts/OpenSans-LightItalic.ttf +0 -0
  66. package/common/fonts/OpenSans-Regular.ttf +0 -0
  67. package/common/fonts/OpenSans-SemiBold.ttf +0 -0
  68. package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  69. package/common/utils.js +0 -22
  70. package/common/variables.js +0 -1574
  71. package/date/Date.js +0 -373
  72. package/date/index.d.ts +0 -27
  73. package/date-input/DateInput.d.ts +0 -4
  74. package/date-input/DateInput.js +0 -358
  75. package/date-input/DateInput.stories.tsx +0 -138
  76. package/date-input/types.d.ts +0 -100
  77. package/date-input/types.js +0 -5
  78. package/dialog/Dialog.d.ts +0 -4
  79. package/dialog/Dialog.js +0 -165
  80. package/dialog/Dialog.stories.tsx +0 -212
  81. package/dialog/types.d.ts +0 -43
  82. package/dialog/types.js +0 -5
  83. package/dropdown/Dropdown.d.ts +0 -4
  84. package/dropdown/Dropdown.js +0 -417
  85. package/dropdown/Dropdown.stories.tsx +0 -247
  86. package/dropdown/types.d.ts +0 -89
  87. package/dropdown/types.js +0 -5
  88. package/file-input/FileInput.d.ts +0 -4
  89. package/file-input/FileInput.js +0 -590
  90. package/file-input/FileItem.d.ts +0 -14
  91. package/file-input/FileItem.js +0 -184
  92. package/file-input/types.d.ts +0 -112
  93. package/file-input/types.js +0 -5
  94. package/footer/Footer.d.ts +0 -4
  95. package/footer/Footer.js +0 -260
  96. package/footer/Footer.stories.tsx +0 -130
  97. package/footer/Icons.d.ts +0 -2
  98. package/footer/Icons.js +0 -77
  99. package/footer/types.d.ts +0 -65
  100. package/footer/types.js +0 -5
  101. package/header/Header.d.ts +0 -7
  102. package/header/Header.js +0 -324
  103. package/header/Header.stories.tsx +0 -162
  104. package/header/Icons.d.ts +0 -2
  105. package/header/Icons.js +0 -34
  106. package/header/types.d.ts +0 -47
  107. package/header/types.js +0 -5
  108. package/heading/Heading.d.ts +0 -4
  109. package/heading/Heading.js +0 -159
  110. package/heading/Heading.stories.tsx +0 -53
  111. package/heading/types.d.ts +0 -33
  112. package/heading/types.js +0 -5
  113. package/input-text/Icons.js +0 -22
  114. package/input-text/InputText.js +0 -611
  115. package/input-text/index.d.ts +0 -36
  116. package/layout/ApplicationLayout.d.ts +0 -10
  117. package/layout/ApplicationLayout.js +0 -225
  118. package/layout/ApplicationLayout.stories.tsx +0 -171
  119. package/layout/Icons.js +0 -55
  120. package/layout/types.d.ts +0 -57
  121. package/layout/types.js +0 -5
  122. package/link/Link.d.ts +0 -3
  123. package/link/Link.js +0 -161
  124. package/link/Link.stories.tsx +0 -146
  125. package/link/types.d.ts +0 -74
  126. package/link/types.js +0 -5
  127. package/list/List.d.ts +0 -8
  128. package/list/List.js +0 -47
  129. package/list/List.stories.tsx +0 -85
  130. package/main.d.ts +0 -48
  131. package/main.js +0 -395
  132. package/number-input/NumberInput.d.ts +0 -4
  133. package/number-input/NumberInput.js +0 -83
  134. package/number-input/NumberInput.stories.tsx +0 -115
  135. package/number-input/NumberInputContext.d.ts +0 -4
  136. package/number-input/NumberInputContext.js +0 -19
  137. package/number-input/numberInputContextTypes.d.ts +0 -19
  138. package/number-input/numberInputContextTypes.js +0 -5
  139. package/number-input/types.d.ts +0 -117
  140. package/number-input/types.js +0 -5
  141. package/paginator/Icons.js +0 -66
  142. package/paginator/Paginator.d.ts +0 -4
  143. package/paginator/Paginator.js +0 -192
  144. package/paginator/Paginator.stories.tsx +0 -63
  145. package/paginator/types.d.ts +0 -38
  146. package/paginator/types.js +0 -5
  147. package/password-input/PasswordInput.d.ts +0 -4
  148. package/password-input/PasswordInput.js +0 -163
  149. package/password-input/PasswordInput.stories.tsx +0 -131
  150. package/password-input/types.d.ts +0 -107
  151. package/password-input/types.js +0 -5
  152. package/progress-bar/ProgressBar.d.ts +0 -4
  153. package/progress-bar/ProgressBar.js +0 -170
  154. package/progress-bar/ProgressBar.stories.jsx +0 -58
  155. package/progress-bar/types.d.ts +0 -37
  156. package/progress-bar/types.js +0 -5
  157. package/radio/Radio.d.ts +0 -4
  158. package/radio/Radio.js +0 -174
  159. package/radio/Radio.stories.tsx +0 -192
  160. package/radio/types.d.ts +0 -54
  161. package/radio/types.js +0 -5
  162. package/resultsetTable/ResultsetTable.d.ts +0 -4
  163. package/resultsetTable/ResultsetTable.js +0 -251
  164. package/resultsetTable/ResultsetTable.stories.tsx +0 -276
  165. package/resultsetTable/types.d.ts +0 -67
  166. package/resultsetTable/types.js +0 -5
  167. package/row/Row.d.ts +0 -11
  168. package/row/Row.js +0 -124
  169. package/row/Row.stories.tsx +0 -223
  170. package/select/Select.d.ts +0 -4
  171. package/select/Select.js +0 -863
  172. package/select/Select.stories.tsx +0 -572
  173. package/select/types.d.ts +0 -170
  174. package/select/types.js +0 -5
  175. package/sidenav/Sidenav.d.ts +0 -9
  176. package/sidenav/Sidenav.js +0 -136
  177. package/sidenav/Sidenav.stories.tsx +0 -165
  178. package/sidenav/types.d.ts +0 -50
  179. package/sidenav/types.js +0 -5
  180. package/slider/Slider.d.ts +0 -4
  181. package/slider/Slider.js +0 -317
  182. package/slider/Slider.stories.tsx +0 -177
  183. package/slider/types.d.ts +0 -78
  184. package/slider/types.js +0 -5
  185. package/spinner/Spinner.d.ts +0 -4
  186. package/spinner/Spinner.js +0 -250
  187. package/spinner/Spinner.stories.jsx +0 -102
  188. package/spinner/types.d.ts +0 -32
  189. package/spinner/types.js +0 -5
  190. package/stack/Stack.d.ts +0 -10
  191. package/stack/Stack.js +0 -94
  192. package/stack/Stack.stories.tsx +0 -150
  193. package/switch/Switch.d.ts +0 -4
  194. package/switch/Switch.js +0 -179
  195. package/switch/Switch.stories.tsx +0 -160
  196. package/switch/types.d.ts +0 -58
  197. package/switch/types.js +0 -5
  198. package/table/Table.d.ts +0 -4
  199. package/table/Table.js +0 -118
  200. package/table/Table.stories.jsx +0 -276
  201. package/table/types.d.ts +0 -21
  202. package/table/types.js +0 -5
  203. package/tabs/Tabs.d.ts +0 -4
  204. package/tabs/Tabs.js +0 -213
  205. package/tabs/Tabs.stories.tsx +0 -121
  206. package/tabs/types.d.ts +0 -70
  207. package/tabs/types.js +0 -5
  208. package/tag/Tag.d.ts +0 -4
  209. package/tag/Tag.js +0 -193
  210. package/tag/Tag.stories.tsx +0 -145
  211. package/tag/types.d.ts +0 -60
  212. package/tag/types.js +0 -5
  213. package/text/Text.d.ts +0 -7
  214. package/text/Text.js +0 -30
  215. package/text/Text.stories.tsx +0 -19
  216. package/text-input/TextInput.d.ts +0 -4
  217. package/text-input/TextInput.js +0 -786
  218. package/text-input/TextInput.stories.tsx +0 -456
  219. package/text-input/types.d.ts +0 -159
  220. package/text-input/types.js +0 -5
  221. package/textarea/Textarea.d.ts +0 -4
  222. package/textarea/Textarea.js +0 -284
  223. package/textarea/Textarea.stories.jsx +0 -135
  224. package/textarea/types.d.ts +0 -130
  225. package/textarea/types.js +0 -5
  226. package/toggle/Toggle.js +0 -186
  227. package/toggle/index.d.ts +0 -21
  228. package/toggle-group/ToggleGroup.d.ts +0 -4
  229. package/toggle-group/ToggleGroup.js +0 -214
  230. package/toggle-group/ToggleGroup.stories.tsx +0 -173
  231. package/toggle-group/types.d.ts +0 -97
  232. package/toggle-group/types.js +0 -5
  233. package/upload/Upload.js +0 -201
  234. package/upload/buttons-upload/ButtonsUpload.js +0 -111
  235. package/upload/buttons-upload/Icons.js +0 -40
  236. package/upload/dragAndDropArea/DragAndDropArea.js +0 -225
  237. package/upload/dragAndDropArea/Icons.js +0 -39
  238. package/upload/file-upload/FileToUpload.js +0 -115
  239. package/upload/file-upload/Icons.js +0 -66
  240. package/upload/files-upload/FilesToUpload.js +0 -109
  241. package/upload/index.d.ts +0 -15
  242. package/upload/transaction/Icons.js +0 -160
  243. package/upload/transaction/Transaction.js +0 -104
  244. package/upload/transactions/Transactions.js +0 -94
  245. package/useTheme.d.ts +0 -2
  246. package/useTheme.js +0 -22
  247. package/wizard/Wizard.d.ts +0 -4
  248. package/wizard/Wizard.js +0 -281
  249. package/wizard/Wizard.stories.tsx +0 -224
  250. package/wizard/types.d.ts +0 -60
  251. 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, suffixIconSrc, onClickSuffix, prefixIconSrc, onClickPrefix, disabled, margin, tabIndex, }: ChipPropsType) => JSX.Element;
4
- export default DxcChip;