@dxc-technology/halstack-react 0.0.0-abf35d9 → 0.0.0-accd42b

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 (341) hide show
  1. package/README.md +46 -0
  2. package/dist/index.d.mts +6665 -0
  3. package/dist/index.d.ts +6665 -0
  4. package/dist/index.js +14521 -0
  5. package/dist/index.mjs +14463 -0
  6. package/package.json +68 -66
  7. package/BackgroundColorContext.d.ts +0 -10
  8. package/BackgroundColorContext.js +0 -47
  9. package/HalstackContext.d.ts +0 -1336
  10. package/HalstackContext.js +0 -335
  11. package/accordion/Accordion.d.ts +0 -4
  12. package/accordion/Accordion.js +0 -234
  13. package/accordion/Accordion.stories.tsx +0 -395
  14. package/accordion/Accordion.test.js +0 -71
  15. package/accordion/types.d.ts +0 -69
  16. package/accordion/types.js +0 -5
  17. package/accordion-group/AccordionGroup.d.ts +0 -7
  18. package/accordion-group/AccordionGroup.js +0 -149
  19. package/accordion-group/AccordionGroup.stories.tsx +0 -251
  20. package/accordion-group/AccordionGroup.test.js +0 -126
  21. package/accordion-group/types.d.ts +0 -79
  22. package/accordion-group/types.js +0 -5
  23. package/alert/Alert.d.ts +0 -4
  24. package/alert/Alert.js +0 -291
  25. package/alert/Alert.stories.tsx +0 -198
  26. package/alert/Alert.test.js +0 -92
  27. package/alert/types.d.ts +0 -49
  28. package/alert/types.js +0 -5
  29. package/badge/Badge.d.ts +0 -4
  30. package/badge/Badge.js +0 -61
  31. package/badge/types.d.ts +0 -5
  32. package/badge/types.js +0 -5
  33. package/bleed/Bleed.d.ts +0 -3
  34. package/bleed/Bleed.js +0 -51
  35. package/bleed/Bleed.stories.tsx +0 -341
  36. package/bleed/types.d.ts +0 -37
  37. package/bleed/types.js +0 -5
  38. package/box/Box.d.ts +0 -4
  39. package/box/Box.js +0 -114
  40. package/box/Box.stories.tsx +0 -147
  41. package/box/Box.test.js +0 -18
  42. package/box/types.d.ts +0 -44
  43. package/box/types.js +0 -5
  44. package/bulleted-list/BulletedList.d.ts +0 -7
  45. package/bulleted-list/BulletedList.js +0 -123
  46. package/bulleted-list/BulletedList.stories.tsx +0 -200
  47. package/bulleted-list/types.d.ts +0 -11
  48. package/bulleted-list/types.js +0 -5
  49. package/button/Button.d.ts +0 -4
  50. package/button/Button.js +0 -154
  51. package/button/Button.stories.tsx +0 -425
  52. package/button/Button.test.js +0 -35
  53. package/button/types.d.ts +0 -53
  54. package/button/types.js +0 -5
  55. package/card/Card.d.ts +0 -4
  56. package/card/Card.js +0 -160
  57. package/card/Card.stories.tsx +0 -200
  58. package/card/Card.test.js +0 -50
  59. package/card/ice-cream.jpg +0 -0
  60. package/card/types.d.ts +0 -68
  61. package/card/types.js +0 -5
  62. package/checkbox/Checkbox.d.ts +0 -4
  63. package/checkbox/Checkbox.js +0 -250
  64. package/checkbox/Checkbox.stories.tsx +0 -260
  65. package/checkbox/Checkbox.test.js +0 -155
  66. package/checkbox/types.d.ts +0 -68
  67. package/checkbox/types.js +0 -5
  68. package/chip/Chip.d.ts +0 -4
  69. package/chip/Chip.js +0 -153
  70. package/chip/Chip.stories.tsx +0 -206
  71. package/chip/Chip.test.js +0 -54
  72. package/chip/types.d.ts +0 -45
  73. package/chip/types.js +0 -5
  74. package/common/OpenSans.css +0 -81
  75. package/common/fonts/OpenSans-Bold.ttf +0 -0
  76. package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  77. package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  78. package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  79. package/common/fonts/OpenSans-Italic.ttf +0 -0
  80. package/common/fonts/OpenSans-Light.ttf +0 -0
  81. package/common/fonts/OpenSans-LightItalic.ttf +0 -0
  82. package/common/fonts/OpenSans-Regular.ttf +0 -0
  83. package/common/fonts/OpenSans-SemiBold.ttf +0 -0
  84. package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  85. package/common/utils.d.ts +0 -1
  86. package/common/utils.js +0 -22
  87. package/common/variables.d.ts +0 -1625
  88. package/common/variables.js +0 -1504
  89. package/date-input/Calendar.d.ts +0 -4
  90. package/date-input/Calendar.js +0 -258
  91. package/date-input/DateInput.d.ts +0 -4
  92. package/date-input/DateInput.js +0 -269
  93. package/date-input/DateInput.stories.tsx +0 -304
  94. package/date-input/DateInput.test.js +0 -835
  95. package/date-input/DatePicker.d.ts +0 -4
  96. package/date-input/DatePicker.js +0 -146
  97. package/date-input/Icons.d.ts +0 -6
  98. package/date-input/Icons.js +0 -75
  99. package/date-input/YearPicker.d.ts +0 -4
  100. package/date-input/YearPicker.js +0 -126
  101. package/date-input/types.d.ts +0 -158
  102. package/date-input/types.js +0 -5
  103. package/dialog/Dialog.d.ts +0 -4
  104. package/dialog/Dialog.js +0 -149
  105. package/dialog/Dialog.stories.tsx +0 -319
  106. package/dialog/Dialog.test.js +0 -369
  107. package/dialog/types.d.ts +0 -44
  108. package/dialog/types.js +0 -5
  109. package/dropdown/Dropdown.d.ts +0 -4
  110. package/dropdown/Dropdown.js +0 -388
  111. package/dropdown/Dropdown.stories.tsx +0 -438
  112. package/dropdown/Dropdown.test.js +0 -586
  113. package/dropdown/DropdownMenu.d.ts +0 -4
  114. package/dropdown/DropdownMenu.js +0 -70
  115. package/dropdown/DropdownMenuItem.d.ts +0 -4
  116. package/dropdown/DropdownMenuItem.js +0 -79
  117. package/dropdown/types.d.ts +0 -100
  118. package/dropdown/types.js +0 -5
  119. package/file-input/FileInput.d.ts +0 -4
  120. package/file-input/FileInput.js +0 -547
  121. package/file-input/FileInput.stories.tsx +0 -618
  122. package/file-input/FileInput.test.js +0 -457
  123. package/file-input/FileItem.d.ts +0 -4
  124. package/file-input/FileItem.js +0 -162
  125. package/file-input/types.d.ts +0 -129
  126. package/file-input/types.js +0 -5
  127. package/flex/Flex.d.ts +0 -4
  128. package/flex/Flex.js +0 -69
  129. package/flex/Flex.stories.tsx +0 -103
  130. package/flex/types.d.ts +0 -32
  131. package/flex/types.js +0 -5
  132. package/footer/Footer.d.ts +0 -4
  133. package/footer/Footer.js +0 -183
  134. package/footer/Footer.stories.tsx +0 -228
  135. package/footer/Footer.test.js +0 -97
  136. package/footer/Icons.d.ts +0 -2
  137. package/footer/Icons.js +0 -77
  138. package/footer/types.d.ts +0 -66
  139. package/footer/types.js +0 -5
  140. package/grid/Grid.d.ts +0 -7
  141. package/grid/Grid.js +0 -91
  142. package/grid/Grid.stories.tsx +0 -219
  143. package/grid/types.d.ts +0 -46
  144. package/grid/types.js +0 -5
  145. package/header/Header.d.ts +0 -8
  146. package/header/Header.js +0 -303
  147. package/header/Header.stories.tsx +0 -315
  148. package/header/Header.test.js +0 -79
  149. package/header/Icons.d.ts +0 -2
  150. package/header/Icons.js +0 -34
  151. package/header/types.d.ts +0 -48
  152. package/header/types.js +0 -5
  153. package/heading/Heading.d.ts +0 -4
  154. package/heading/Heading.js +0 -159
  155. package/heading/Heading.stories.tsx +0 -54
  156. package/heading/Heading.test.js +0 -186
  157. package/heading/types.d.ts +0 -33
  158. package/heading/types.js +0 -5
  159. package/inset/Inset.d.ts +0 -3
  160. package/inset/Inset.js +0 -51
  161. package/inset/Inset.stories.tsx +0 -229
  162. package/inset/types.d.ts +0 -37
  163. package/inset/types.js +0 -5
  164. package/layout/ApplicationLayout.d.ts +0 -20
  165. package/layout/ApplicationLayout.js +0 -171
  166. package/layout/ApplicationLayout.stories.tsx +0 -162
  167. package/layout/Icons.d.ts +0 -5
  168. package/layout/Icons.js +0 -66
  169. package/layout/SidenavContext.d.ts +0 -5
  170. package/layout/SidenavContext.js +0 -19
  171. package/layout/types.d.ts +0 -42
  172. package/layout/types.js +0 -5
  173. package/link/Link.d.ts +0 -4
  174. package/link/Link.js +0 -136
  175. package/link/Link.stories.tsx +0 -253
  176. package/link/Link.test.js +0 -81
  177. package/link/types.d.ts +0 -54
  178. package/link/types.js +0 -5
  179. package/main.d.ts +0 -45
  180. package/main.js +0 -377
  181. package/nav-tabs/NavTabs.d.ts +0 -8
  182. package/nav-tabs/NavTabs.js +0 -125
  183. package/nav-tabs/NavTabs.stories.tsx +0 -260
  184. package/nav-tabs/NavTabs.test.js +0 -82
  185. package/nav-tabs/Tab.d.ts +0 -4
  186. package/nav-tabs/Tab.js +0 -150
  187. package/nav-tabs/types.d.ts +0 -53
  188. package/nav-tabs/types.js +0 -5
  189. package/number-input/NumberInput.d.ts +0 -4
  190. package/number-input/NumberInput.js +0 -76
  191. package/number-input/NumberInput.stories.tsx +0 -115
  192. package/number-input/NumberInput.test.js +0 -542
  193. package/number-input/NumberInputContext.d.ts +0 -4
  194. package/number-input/NumberInputContext.js +0 -19
  195. package/number-input/numberInputContextTypes.d.ts +0 -19
  196. package/number-input/numberInputContextTypes.js +0 -5
  197. package/number-input/types.d.ts +0 -124
  198. package/number-input/types.js +0 -5
  199. package/paginator/Icons.d.ts +0 -5
  200. package/paginator/Icons.js +0 -54
  201. package/paginator/Paginator.d.ts +0 -4
  202. package/paginator/Paginator.js +0 -163
  203. package/paginator/Paginator.stories.tsx +0 -87
  204. package/paginator/Paginator.test.js +0 -305
  205. package/paginator/types.d.ts +0 -38
  206. package/paginator/types.js +0 -5
  207. package/paragraph/Paragraph.d.ts +0 -5
  208. package/paragraph/Paragraph.js +0 -38
  209. package/paragraph/Paragraph.stories.tsx +0 -44
  210. package/password-input/PasswordInput.d.ts +0 -4
  211. package/password-input/PasswordInput.js +0 -166
  212. package/password-input/PasswordInput.stories.tsx +0 -131
  213. package/password-input/PasswordInput.test.js +0 -181
  214. package/password-input/types.d.ts +0 -110
  215. package/password-input/types.js +0 -5
  216. package/progress-bar/ProgressBar.d.ts +0 -4
  217. package/progress-bar/ProgressBar.js +0 -176
  218. package/progress-bar/ProgressBar.stories.jsx +0 -93
  219. package/progress-bar/ProgressBar.test.js +0 -110
  220. package/progress-bar/types.d.ts +0 -37
  221. package/progress-bar/types.js +0 -5
  222. package/quick-nav/QuickNav.d.ts +0 -4
  223. package/quick-nav/QuickNav.js +0 -117
  224. package/quick-nav/QuickNav.stories.tsx +0 -356
  225. package/quick-nav/types.d.ts +0 -21
  226. package/quick-nav/types.js +0 -5
  227. package/radio-group/Radio.d.ts +0 -4
  228. package/radio-group/Radio.js +0 -156
  229. package/radio-group/RadioGroup.d.ts +0 -4
  230. package/radio-group/RadioGroup.js +0 -283
  231. package/radio-group/RadioGroup.stories.tsx +0 -214
  232. package/radio-group/RadioGroup.test.js +0 -722
  233. package/radio-group/types.d.ts +0 -114
  234. package/radio-group/types.js +0 -5
  235. package/resultsetTable/Icons.d.ts +0 -7
  236. package/resultsetTable/Icons.js +0 -51
  237. package/resultsetTable/ResultsetTable.d.ts +0 -4
  238. package/resultsetTable/ResultsetTable.js +0 -195
  239. package/resultsetTable/ResultsetTable.stories.tsx +0 -300
  240. package/resultsetTable/ResultsetTable.test.js +0 -325
  241. package/resultsetTable/types.d.ts +0 -67
  242. package/resultsetTable/types.js +0 -5
  243. package/select/Icons.d.ts +0 -10
  244. package/select/Icons.js +0 -93
  245. package/select/Listbox.d.ts +0 -4
  246. package/select/Listbox.js +0 -169
  247. package/select/Option.d.ts +0 -4
  248. package/select/Option.js +0 -97
  249. package/select/Select.d.ts +0 -4
  250. package/select/Select.js +0 -666
  251. package/select/Select.stories.tsx +0 -971
  252. package/select/Select.test.js +0 -2228
  253. package/select/types.d.ts +0 -210
  254. package/select/types.js +0 -5
  255. package/sidenav/Sidenav.d.ts +0 -10
  256. package/sidenav/Sidenav.js +0 -266
  257. package/sidenav/Sidenav.stories.tsx +0 -282
  258. package/sidenav/Sidenav.test.js +0 -44
  259. package/sidenav/types.d.ts +0 -73
  260. package/sidenav/types.js +0 -5
  261. package/slider/Slider.d.ts +0 -4
  262. package/slider/Slider.js +0 -342
  263. package/slider/Slider.stories.tsx +0 -240
  264. package/slider/Slider.test.js +0 -250
  265. package/slider/types.d.ts +0 -86
  266. package/slider/types.js +0 -5
  267. package/spinner/Spinner.d.ts +0 -4
  268. package/spinner/Spinner.js +0 -244
  269. package/spinner/Spinner.stories.jsx +0 -129
  270. package/spinner/Spinner.test.js +0 -64
  271. package/spinner/types.d.ts +0 -32
  272. package/spinner/types.js +0 -5
  273. package/switch/Switch.d.ts +0 -4
  274. package/switch/Switch.js +0 -262
  275. package/switch/Switch.stories.tsx +0 -171
  276. package/switch/Switch.test.js +0 -225
  277. package/switch/types.d.ts +0 -66
  278. package/switch/types.js +0 -5
  279. package/table/Table.d.ts +0 -4
  280. package/table/Table.js +0 -118
  281. package/table/Table.stories.jsx +0 -356
  282. package/table/Table.test.js +0 -26
  283. package/table/types.d.ts +0 -21
  284. package/table/types.js +0 -5
  285. package/tabs/Tab.d.ts +0 -4
  286. package/tabs/Tab.js +0 -133
  287. package/tabs/Tabs.d.ts +0 -4
  288. package/tabs/Tabs.js +0 -465
  289. package/tabs/Tabs.stories.tsx +0 -226
  290. package/tabs/Tabs.test.js +0 -350
  291. package/tabs/types.d.ts +0 -92
  292. package/tabs/types.js +0 -5
  293. package/tag/Tag.d.ts +0 -4
  294. package/tag/Tag.js +0 -181
  295. package/tag/Tag.stories.tsx +0 -155
  296. package/tag/Tag.test.js +0 -60
  297. package/tag/types.d.ts +0 -69
  298. package/tag/types.js +0 -5
  299. package/text-input/Icons.d.ts +0 -8
  300. package/text-input/Icons.js +0 -60
  301. package/text-input/Suggestion.d.ts +0 -4
  302. package/text-input/Suggestion.js +0 -84
  303. package/text-input/Suggestions.d.ts +0 -4
  304. package/text-input/Suggestions.js +0 -134
  305. package/text-input/TextInput.d.ts +0 -4
  306. package/text-input/TextInput.js +0 -673
  307. package/text-input/TextInput.stories.tsx +0 -569
  308. package/text-input/TextInput.test.js +0 -1723
  309. package/text-input/types.d.ts +0 -197
  310. package/text-input/types.js +0 -5
  311. package/textarea/Textarea.d.ts +0 -4
  312. package/textarea/Textarea.js +0 -277
  313. package/textarea/Textarea.stories.jsx +0 -216
  314. package/textarea/Textarea.test.js +0 -437
  315. package/textarea/types.d.ts +0 -137
  316. package/textarea/types.js +0 -5
  317. package/toggle-group/ToggleGroup.d.ts +0 -4
  318. package/toggle-group/ToggleGroup.js +0 -218
  319. package/toggle-group/ToggleGroup.stories.tsx +0 -215
  320. package/toggle-group/ToggleGroup.test.js +0 -156
  321. package/toggle-group/types.d.ts +0 -105
  322. package/toggle-group/types.js +0 -5
  323. package/typography/Typography.d.ts +0 -4
  324. package/typography/Typography.js +0 -32
  325. package/typography/Typography.stories.tsx +0 -198
  326. package/typography/types.d.ts +0 -18
  327. package/typography/types.js +0 -5
  328. package/useTheme.d.ts +0 -1235
  329. package/useTheme.js +0 -22
  330. package/useTranslatedLabels.d.ts +0 -85
  331. package/useTranslatedLabels.js +0 -20
  332. package/utils/BaseTypography.d.ts +0 -21
  333. package/utils/BaseTypography.js +0 -108
  334. package/utils/FocusLock.d.ts +0 -13
  335. package/utils/FocusLock.js +0 -139
  336. package/wizard/Wizard.d.ts +0 -4
  337. package/wizard/Wizard.js +0 -285
  338. package/wizard/Wizard.stories.tsx +0 -253
  339. package/wizard/Wizard.test.js +0 -141
  340. package/wizard/types.d.ts +0 -64
  341. package/wizard/types.js +0 -5
@@ -1,68 +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
- * Initial state of the checkbox, only when it is uncontrolled.
11
- */
12
- defaultChecked?: boolean;
13
- /**
14
- * If true, the component is checked. If undefined the component will be
15
- * uncontrolled and the value will be managed internally by the component.
16
- */
17
- checked?: boolean;
18
- /**
19
- * Will be passed to the value attribute of the html input element.
20
- * When inside a form, this value will be only submitted if the checkbox is checked.
21
- */
22
- value?: string;
23
- /**
24
- * Text to be placed next to the checkbox.
25
- */
26
- label?: string;
27
- /**
28
- * Whether the label should appear after or before the checkbox.
29
- */
30
- labelPosition?: "before" | "after";
31
- /**
32
- * Name attribute of the input element.
33
- */
34
- name?: string;
35
- /**
36
- * If true, the component will be disabled.
37
- */
38
- disabled?: boolean;
39
- /**
40
- * If true, the component will display '(Optional)' next to the label.
41
- */
42
- optional?: boolean;
43
- /**
44
- * This function will be called when the user clicks the checkbox.
45
- * The new value will be passed as a parameter.
46
- */
47
- onChange?: (value: boolean) => void;
48
- /**
49
- * Size of the margin to be applied to the component
50
- * ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
51
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties
52
- * in order to specify different margin sizes.
53
- */
54
- margin?: Space | Margin;
55
- /**
56
- * Size of the component.
57
- */
58
- size?: "small" | "medium" | "large" | "fillParent" | "fitContent";
59
- /**
60
- * Value of the tabindex.
61
- */
62
- tabIndex?: number;
63
- };
64
- /**
65
- * Reference to the component.
66
- */
67
- export declare type RefType = HTMLDivElement;
68
- 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;
package/chip/Chip.js DELETED
@@ -1,153 +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 _react = _interopRequireDefault(require("react"));
17
-
18
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
19
-
20
- var _variables = require("../common/variables");
21
-
22
- var _utils = require("../common/utils");
23
-
24
- var _useTheme = _interopRequireDefault(require("../useTheme"));
25
-
26
- var _templateObject, _templateObject2, _templateObject3;
27
-
28
- 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); }
29
-
30
- 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; }
31
-
32
- var DxcChip = function DxcChip(_ref) {
33
- var label = _ref.label,
34
- suffixIcon = _ref.suffixIcon,
35
- prefixIcon = _ref.prefixIcon,
36
- onClickSuffix = _ref.onClickSuffix,
37
- onClickPrefix = _ref.onClickPrefix,
38
- disabled = _ref.disabled,
39
- margin = _ref.margin,
40
- _ref$tabIndex = _ref.tabIndex,
41
- tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
42
- var colorsTheme = (0, _useTheme["default"])();
43
- return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
44
- theme: colorsTheme.chip
45
- }, /*#__PURE__*/_react["default"].createElement(StyledDxcChip, {
46
- disabled: disabled,
47
- margin: margin
48
- }, prefixIcon && /*#__PURE__*/_react["default"].createElement(IconContainer, {
49
- disabled: disabled,
50
- prefixIcon: true,
51
- label: label,
52
- tabIndex: typeof onClickPrefix === "function" && !disabled ? tabIndex : -1,
53
- onClick: function onClick() {
54
- return onClickPrefix && !disabled && onClickPrefix();
55
- },
56
- interactuable: typeof onClickPrefix === "function" && !disabled
57
- }, typeof prefixIcon === "string" ? /*#__PURE__*/_react["default"].createElement("img", {
58
- src: prefixIcon
59
- }) : prefixIcon), label && /*#__PURE__*/_react["default"].createElement(ChipTextContainer, {
60
- disabled: disabled
61
- }, label), suffixIcon && /*#__PURE__*/_react["default"].createElement(IconContainer, {
62
- disabled: disabled,
63
- suffixIcon: true,
64
- label: label,
65
- tabIndex: typeof onClickSuffix === "function" && !disabled ? tabIndex : -1,
66
- onClick: function onClick() {
67
- return onClickSuffix && !disabled && onClickSuffix();
68
- },
69
- interactuable: typeof onClickSuffix === "function" && !disabled
70
- }, typeof suffixIcon === "string" ? /*#__PURE__*/_react["default"].createElement("img", {
71
- src: suffixIcon
72
- }) : suffixIcon)));
73
- };
74
-
75
- var getCursor = function getCursor(interactuable, disabled) {
76
- if (disabled) return "cursor: not-allowed;";else if (interactuable) return "cursor: pointer;";else return "cursor: default; outline:none;";
77
- };
78
-
79
- var StyledDxcChip = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n align-items: center;\n min-height: 40px;\n max-width: ", ";\n background-color: ", ";\n border-radius: ", ";\n border-width: ", ";\n border-style: ", ";\n border-color: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n cursor: ", ";\n"])), function (_ref2) {
80
- var margin = _ref2.margin;
81
- return "calc(100% - 40px - ".concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
82
- }, function (props) {
83
- return props.disabled && props.theme.disabledBackgroundColor || props.theme.backgroundColor;
84
- }, function (props) {
85
- return props.theme.borderRadius;
86
- }, function (props) {
87
- return props.theme.borderThickness;
88
- }, function (props) {
89
- return props.theme.borderStyle;
90
- }, function (props) {
91
- return props.theme.borderColor;
92
- }, function (props) {
93
- return props.theme.contentPaddingTop;
94
- }, function (props) {
95
- return props.theme.contentPaddingBottom;
96
- }, function (props) {
97
- return props.theme.contentPaddingLeft;
98
- }, function (props) {
99
- return props.theme.contentPaddingRight;
100
- }, function (props) {
101
- return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
102
- }, function (props) {
103
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
104
- }, function (props) {
105
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
106
- }, function (props) {
107
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
108
- }, function (props) {
109
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
110
- }, function (_ref3) {
111
- var disabled = _ref3.disabled;
112
- return disabled && "not-allowed";
113
- });
114
-
115
- var ChipTextContainer = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n font-size: ", ";\n font-family: ", ";\n font-weight: ", ";\n font-style: ", ";\n color: ", ";\n cursor: ", ";\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n"])), function (props) {
116
- return props.theme.fontSize;
117
- }, function (props) {
118
- return props.theme.fontFamily;
119
- }, function (props) {
120
- return props.theme.fontWeight;
121
- }, function (props) {
122
- return props.theme.fontStyle;
123
- }, function (props) {
124
- return props.disabled ? props.theme.disabledFontColor : props.theme.fontColor;
125
- }, function (_ref4) {
126
- var disabled = _ref4.disabled;
127
- return disabled && "not-allowed" || "default";
128
- });
129
-
130
- var IconContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n ", "\n color: ", ";\n ", "\n\n &:hover {\n color: ", ";\n }\n &:focus {\n outline-color: ", ";\n outline-width: ", ";\n ", "\n }\n &:active {\n color: ", ";\n }\n img,\n svg {\n width: ", ";\n height: ", ";\n }\n"])), function (props) {
131
- return props.prefixIcon ? "margin-right: ".concat((props.label || props.suffixIcon) && props.theme.iconSpacing || props.prefixIcon && "0", ";") : "margin-left: ".concat((props.label || props.prefixIcon) && props.theme.iconSpacing || props.prefixIcon && "0", ";");
132
- }, function (props) {
133
- return props.disabled ? props.theme.disabledIconColor : props.theme.iconColor;
134
- }, function (props) {
135
- return getCursor(props.interactuable, props.disabled);
136
- }, function (props) {
137
- return !props.disabled && props.theme.hoverIconColor;
138
- }, function (props) {
139
- return !props.disabled && props.theme.focusColor;
140
- }, function (props) {
141
- return !props.disabled && props.theme.focusBorderThickness;
142
- }, function (props) {
143
- return props.disabled && "outline: none;";
144
- }, function (props) {
145
- return !props.disabled && props.theme.activeIconColor;
146
- }, function (props) {
147
- return props.theme.iconSize;
148
- }, function (props) {
149
- return props.theme.iconSize;
150
- });
151
-
152
- var _default = DxcChip;
153
- exports["default"] = _default;
@@ -1,206 +0,0 @@
1
- import React from "react";
2
- import { userEvent, within } from "@storybook/testing-library";
3
- import DxcChip from "./Chip";
4
- import Title from "../../.storybook/components/Title";
5
- import ExampleContainer from "../../.storybook/components/ExampleContainer";
6
- import { HalstackProvider } from "../HalstackContext";
7
-
8
- export default {
9
- title: "Chip",
10
- component: DxcChip,
11
- };
12
-
13
- const iconSVG = (
14
- <svg
15
- version="1.1"
16
- id="Capa_1"
17
- x="0px"
18
- y="0px"
19
- width="438.536px"
20
- height="438.536px"
21
- viewBox="0 0 438.536 438.536"
22
- fill="currentColor"
23
- >
24
- <g>
25
- <path
26
- d="M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123
27
- C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126
28
- h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225
29
- C438.532,59.576,430.49,40.204,414.41,24.123z M373.155,225.548h-49.963V406.84h-74.802V225.548H210.99V163.02h37.401v-37.402
30
- c0-26.838,6.283-47.107,18.843-60.813c12.559-13.706,33.304-20.555,62.242-20.555h49.963v62.526h-31.401
31
- c-10.663,0-17.467,1.853-20.417,5.568c-2.949,3.711-4.428,10.23-4.428,19.558v31.119h56.534L373.155,225.548z"
32
- />
33
- </g>
34
- </svg>
35
- );
36
-
37
- const smallIconSVG = (
38
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" height="20" width="20">
39
- <path d="m10 17-1.042-.938q-2.083-1.854-3.437-3.177-1.354-1.323-2.136-2.354Q2.604 9.5 2.302 8.646 2 7.792 2 6.896q0-1.854 1.271-3.125T6.396 2.5q1.021 0 1.979.438.958.437 1.625 1.229.667-.792 1.625-1.229.958-.438 1.979-.438 1.854 0 3.125 1.271T18 6.896q0 .896-.292 1.729-.291.833-1.073 1.854-.781 1.021-2.145 2.365-1.365 1.344-3.49 3.26Zm0-2.021q1.938-1.729 3.188-2.948 1.25-1.219 1.989-2.125.74-.906 1.031-1.614.292-.709.292-1.396 0-1.229-.833-2.063Q14.833 4 13.604 4q-.729 0-1.364.302-.636.302-1.094.844L10.417 6h-.834l-.729-.854q-.458-.542-1.114-.844Q7.083 4 6.396 4q-1.229 0-2.063.833-.833.834-.833 2.063 0 .687.271 1.364.271.678.989 1.573.719.896 1.98 2.125Q8 13.188 10 14.979Zm0-5.5Z" />
40
- </svg>
41
- );
42
-
43
- const opinionatedTheme = {
44
- chip: {
45
- baseColor: "#e6e6e6",
46
- fontColor: "#000000",
47
- iconColor: "#4d4d4d",
48
- },
49
- };
50
-
51
- export const Chromatic = () => (
52
- <>
53
- <ExampleContainer>
54
- <Title title="Basic chip" theme="light" level={4} />
55
- <DxcChip label="Default Chip" />
56
- </ExampleContainer>
57
- <ExampleContainer>
58
- <Title title="Chip with prefix SVG (small icon)" theme="light" level={4} />
59
- <DxcChip label="Chip with prefix" prefixIcon={smallIconSVG} />
60
- </ExampleContainer>
61
- <ExampleContainer>
62
- <Title title="Chip with suffix SVG (large icon)" theme="light" level={4} />
63
- <DxcChip label="Chip with suffix" suffixIcon={iconSVG} />
64
- </ExampleContainer>
65
- <ExampleContainer>
66
- <Title title="Chip with prefix (SVG) and suffix (URL)" theme="light" level={4} />
67
- <DxcChip
68
- label="Chip with prefix and suffix"
69
- prefixIcon={iconSVG}
70
- suffixIcon="https://upload.wikimedia.org/wikipedia/commons/e/e0/Check_green_icon.svg"
71
- />
72
- </ExampleContainer>
73
- <ExampleContainer>
74
- <Title title="Disabled chip" theme="light" level={4} />
75
- <DxcChip
76
- label="Disabled"
77
- disabled
78
- prefixIcon={iconSVG}
79
- suffixIcon="https://upload.wikimedia.org/wikipedia/commons/e/e0/Check_green_icon.svg"
80
- />
81
- </ExampleContainer>
82
- <ExampleContainer>
83
- <Title title="Chip with ellipsis" theme="light" level={4} />
84
- <DxcChip label="With ellipsis asdfasdf asdf asdfasdf asdf asdfasdf asdfasdf asdf asdf adfasrfasf afsdg afgasfg asdf asdf asdf asdf asdf asdf asdf afdg asfg asdfg asdf asdf asdf asdfasdf asd fas df asd asdf asdf asdfasd fg ssssssssssss ssss" />
85
- </ExampleContainer>
86
- <ExampleContainer>
87
- <Title title="Chip with ellipsis and suffix" theme="light" level={4} />
88
- <DxcChip
89
- suffixIcon={iconSVG}
90
- label="With ellipsis asdfasdf asdf asdfasdf asdf asdfasdf asdfasdf asdf asdf adfasrfasf afsdg afgasfg asdf asdf asdf asdf asdf asdf asdf afdg asfg asdfg asdf asdf asdf asdfasdf asd fas df asd asdf asdf asdfasd fgsss"
91
- />
92
- </ExampleContainer>
93
- <ExampleContainer>
94
- <Title title="Chip with ellipsis and prefix" theme="light" level={4} />
95
- <DxcChip
96
- prefixIcon={iconSVG}
97
- label="With ellipsis asdfasdf asdf asdfasdf asdf asdfasdf asdfasdf asdf asdf adfasrfasf afsdg afgasfg asdf asdf asdf asdf asdf asdf asdf afdg asfg asdfg asdf asdf asdf asdfasdf asd fas df asd asdf asdf asdfasd fgsss"
98
- />
99
- </ExampleContainer>
100
- <ExampleContainer>
101
- <Title title="Chip with ellipsis, suffix and prefix" theme="light" level={4} />
102
- <DxcChip
103
- prefixIcon={iconSVG}
104
- suffixIcon={iconSVG}
105
- label="With ellipsis asdfasdf asdf asdfasdf asdf asdfasdf asdfasdf asdf asdf adfasrfasf afsdg afgasfg asdf asdf asdf asdf asdf asdf asdf afdg asfg asdfg asdf asdf asdf asdfasdf asd fas df asd asdf asdf asdfasdf"
106
- />
107
- </ExampleContainer>
108
- <Title title="Margins" theme="light" level={2} />
109
- <ExampleContainer>
110
- <Title title="Xxsmall margin" theme="light" level={4} />
111
- <DxcChip label="xxsmall" margin="xxsmall" />
112
- </ExampleContainer>
113
- <ExampleContainer>
114
- <Title title="Xsmall margin" theme="light" level={4} />
115
- <DxcChip label="xsmall" margin="xsmall" />
116
- </ExampleContainer>
117
- <ExampleContainer>
118
- <Title title="Small margin" theme="light" level={4} />
119
- <DxcChip label="small" margin="small" />
120
- </ExampleContainer>
121
- <ExampleContainer>
122
- <Title title="Medium margin" theme="light" level={4} />
123
- <DxcChip label="medium" margin="medium" />
124
- </ExampleContainer>
125
- <ExampleContainer>
126
- <Title title="Large margin" theme="light" level={4} />
127
- <DxcChip label="large" margin="large" />
128
- </ExampleContainer>
129
- <ExampleContainer>
130
- <Title title="Xlarge margin" theme="light" level={4} />
131
- <DxcChip label="xlarge" margin="xlarge" />
132
- </ExampleContainer>
133
- <ExampleContainer>
134
- <Title title="Xxlarge margin" theme="light" level={4} />
135
- <DxcChip label="xxlarge" margin="xxlarge" />
136
- </ExampleContainer>
137
- <Title title="Opinionated theme" theme="light" level={2} />
138
- <ExampleContainer>
139
- <Title title="Chip with prefix and suffix" theme="light" level={4} />
140
- <HalstackProvider theme={opinionatedTheme}>
141
- <DxcChip
142
- label="Chip"
143
- prefixIcon={iconSVG}
144
- suffixIcon="https://upload.wikimedia.org/wikipedia/commons/e/e0/Check_green_icon.svg"
145
- />
146
- </HalstackProvider>
147
- </ExampleContainer>
148
- <ExampleContainer>
149
- <Title title="Chip with prefix and suffix" theme="light" level={4} />
150
- <HalstackProvider theme={opinionatedTheme}>
151
- <DxcChip
152
- label="Chip"
153
- disabled
154
- prefixIcon={iconSVG}
155
- suffixIcon="https://upload.wikimedia.org/wikipedia/commons/e/e0/Check_green_icon.svg"
156
- />
157
- </HalstackProvider>
158
- </ExampleContainer>
159
- <ExampleContainer pseudoState="pseudo-hover">
160
- <Title title="Hovered" theme="light" level={4} />
161
- <HalstackProvider theme={opinionatedTheme}>
162
- <DxcChip
163
- label="Chip"
164
- prefixIcon={iconSVG}
165
- suffixIcon={iconSVG}
166
- onClickPrefix={() => {}}
167
- onClickSuffix={() => {}}
168
- />
169
- </HalstackProvider>
170
- </ExampleContainer>
171
- <ExampleContainer pseudoState="pseudo-active">
172
- <Title title="Actived" theme="light" level={4} />
173
- <HalstackProvider theme={opinionatedTheme}>
174
- <DxcChip
175
- label="Chip"
176
- prefixIcon={iconSVG}
177
- suffixIcon={iconSVG}
178
- onClickPrefix={() => {}}
179
- onClickSuffix={() => {}}
180
- />
181
- </HalstackProvider>
182
- </ExampleContainer>
183
- </>
184
- );
185
- const ChipPrefixFocused = () => (
186
- <ExampleContainer>
187
- <Title title="Chip with prefix" theme="light" level={4} />
188
- <DxcChip label="Chip with prefix" prefixIcon={iconSVG} onClickPrefix={() => {}} />
189
- </ExampleContainer>
190
- );
191
- const ChipSuffixFocused = () => (
192
- <ExampleContainer>
193
- <Title title="Chip with suffix" theme="light" level={4} />
194
- <DxcChip label="Chip with suffix" suffixIcon={iconSVG} onClickSuffix={() => {}} />
195
- </ExampleContainer>
196
- );
197
-
198
- export const PrefixFocused = ChipPrefixFocused.bind({});
199
- PrefixFocused.play = async ({ canvasElement }) => {
200
- await userEvent.tab();
201
- };
202
-
203
- export const SuffixFocused = ChipSuffixFocused.bind({});
204
- SuffixFocused.play = async ({ canvasElement }) => {
205
- await userEvent.tab();
206
- };
package/chip/Chip.test.js DELETED
@@ -1,54 +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("@testing-library/react");
8
-
9
- var _Chip = _interopRequireDefault(require("./Chip.tsx"));
10
-
11
- describe("Chip component tests", function () {
12
- test("Chip renders with correct text", function () {
13
- var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Chip["default"], {
14
- label: "Chip"
15
- })),
16
- getByText = _render.getByText;
17
-
18
- expect(getByText("Chip")).toBeTruthy();
19
- });
20
- test("Calls correct function when clicking on prefix icon", function () {
21
- var onClick = jest.fn();
22
-
23
- var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Chip["default"], {
24
- label: "Chip",
25
- prefixIcon: "https://developer.apple.com/design/human-interface-guidelines/foundations/app-icons/images/icon-and-image-large-icon-settings_2x.png",
26
- onClickPrefix: onClick
27
- })),
28
- getByText = _render2.getByText,
29
- getByRole = _render2.getByRole;
30
-
31
- expect(getByText("Chip")).toBeTruthy();
32
-
33
- _react2.fireEvent.click(getByRole("img"));
34
-
35
- expect(onClick).toHaveBeenCalled();
36
- });
37
- test("Calls correct function when clicking on suffix icon", function () {
38
- var onClick = jest.fn();
39
-
40
- var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Chip["default"], {
41
- label: "Chip",
42
- suffixIcon: "https://developer.apple.com/design/human-interface-guidelines/foundations/app-icons/images/icon-and-image-large-icon-settings_2x.png",
43
- onClickSuffix: onClick
44
- })),
45
- getByText = _render3.getByText,
46
- getByRole = _render3.getByRole;
47
-
48
- expect(getByText("Chip")).toBeTruthy();
49
-
50
- _react2.fireEvent.click(getByRole("img"));
51
-
52
- expect(onClick).toHaveBeenCalled();
53
- });
54
- });
package/chip/types.d.ts DELETED
@@ -1,45 +0,0 @@
1
- /// <reference types="react" />
2
- declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
- declare type Margin = {
4
- top?: Space;
5
- bottom?: Space;
6
- left?: Space;
7
- right?: Space;
8
- };
9
- declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
10
- declare type Props = {
11
- /**
12
- * Text to be placed on the chip.
13
- */
14
- label?: string;
15
- /**
16
- * Element or path used as icon to be placed after the chip label.
17
- */
18
- suffixIcon?: string | SVG;
19
- /**
20
- * Element or path used as icon to be placed before the chip label.
21
- */
22
- prefixIcon?: string | SVG;
23
- /**
24
- * This function will be called when the suffix is clicked.
25
- */
26
- onClickSuffix?: () => void;
27
- /**
28
- * This function will be called when the prefix is clicked.
29
- */
30
- onClickPrefix?: () => void;
31
- /**
32
- * If true, the component will be disabled.
33
- */
34
- disabled?: boolean;
35
- /**
36
- * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
37
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
38
- */
39
- margin?: Space | Margin;
40
- /**
41
- * Value of the tabindex attribute.
42
- */
43
- tabIndex?: number;
44
- };
45
- export default Props;
package/chip/types.js DELETED
@@ -1,5 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
@@ -1,81 +0,0 @@
1
-
2
- @font-face {
3
- font-family: 'Open Sans';
4
- src: url('./fonts/OpenSans-Light.ttf')
5
- format('truetype');
6
- font-style: normal;
7
- font-weight: 200;
8
- }
9
-
10
- @font-face {
11
- font-family: 'Open Sans';
12
- src: url('./fonts/OpenSans-Regular.ttf')
13
- format('truetype');
14
- font-style: normal;
15
- font-weight: 400;
16
- }
17
-
18
- @font-face {
19
- font-family: 'Open Sans';
20
- src: url('./fonts/OpenSans-SemiBold.ttf')
21
- format('truetype');
22
- font-style: normal;
23
- font-weight: 600;
24
- }
25
-
26
- @font-face {
27
- font-family: 'Open Sans';
28
- src: url('./fonts/OpenSans-Bold.ttf')
29
- format('truetype');
30
- font-style: normal;
31
- font-weight: 700;
32
- }
33
-
34
- @font-face {
35
- font-family: 'Open Sans';
36
- src: url('./fonts/OpenSans-ExtraBold.ttf')
37
- format('truetype');
38
- font-style: normal;
39
- font-weight: 800;
40
- }
41
-
42
- @font-face {
43
- font-family: 'Open Sans';
44
- src: url('./fonts/OpenSans-LightItalic.ttf')
45
- format('truetype');
46
- font-style: italic;
47
- font-weight: 200;
48
- }
49
-
50
- @font-face {
51
- font-family: 'Open Sans';
52
- src: url('./fonts/OpenSans-Italic.ttf')
53
- format('truetype');
54
- font-style: italic;
55
- font-weight: 400;
56
- }
57
-
58
- @font-face {
59
- font-family: 'Open Sans';
60
- src: url('./fonts/OpenSans-SemiBoldItalic.ttf')
61
- format('truetype');
62
- font-style: italic;
63
- font-weight: 600;
64
- }
65
-
66
- @font-face {
67
- font-family: 'Open Sans';
68
- src: url('./fonts/OpenSans-BoldItalic.ttf')
69
- format('truetype');
70
- font-style: italic;
71
- font-weight: 700;
72
- }
73
-
74
- @font-face {
75
- font-family: 'Open Sans';
76
- src: url('./fonts/OpenSans-ExtraBoldItalic.ttf')
77
- format('truetype');
78
- font-style: italic;
79
- font-weight: 800;
80
- }
81
-
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
package/common/utils.d.ts DELETED
@@ -1 +0,0 @@
1
- export declare const getMargin: (marginProp: string | object, side: string) => any;