@dxc-technology/halstack-react 0.0.0-dec566a → 0.0.0-df9abc7

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 (380) hide show
  1. package/README.md +1 -2
  2. package/dist/index.d.mts +6581 -0
  3. package/dist/index.d.ts +6581 -0
  4. package/dist/index.js +14078 -0
  5. package/dist/index.mjs +14020 -0
  6. package/package.json +68 -68
  7. package/BackgroundColorContext.d.ts +0 -1
  8. package/BackgroundColorContext.js +0 -30
  9. package/HalstackContext.d.ts +0 -1249
  10. package/HalstackContext.js +0 -310
  11. package/accordion/Accordion.d.ts +0 -4
  12. package/accordion/Accordion.js +0 -169
  13. package/accordion/Accordion.stories.tsx +0 -252
  14. package/accordion/Accordion.test.js +0 -56
  15. package/accordion/types.d.ts +0 -57
  16. package/accordion/types.js +0 -5
  17. package/accordion-group/AccordionGroup.d.ts +0 -7
  18. package/accordion-group/AccordionGroup.js +0 -101
  19. package/accordion-group/AccordionGroup.stories.tsx +0 -252
  20. package/accordion-group/AccordionGroup.test.js +0 -98
  21. package/accordion-group/AccordionGroupAccordion.d.ts +0 -4
  22. package/accordion-group/AccordionGroupAccordion.js +0 -31
  23. package/accordion-group/AccordionGroupContext.d.ts +0 -3
  24. package/accordion-group/AccordionGroupContext.js +0 -8
  25. package/accordion-group/types.d.ts +0 -67
  26. package/accordion-group/types.js +0 -5
  27. package/action-icon/ActionIcon.d.ts +0 -4
  28. package/action-icon/ActionIcon.js +0 -48
  29. package/action-icon/ActionIcon.stories.tsx +0 -41
  30. package/action-icon/ActionIcon.test.js +0 -64
  31. package/action-icon/types.d.ts +0 -26
  32. package/action-icon/types.js +0 -5
  33. package/alert/Alert.d.ts +0 -4
  34. package/alert/Alert.js +0 -200
  35. package/alert/Alert.stories.tsx +0 -198
  36. package/alert/Alert.test.js +0 -75
  37. package/alert/types.d.ts +0 -49
  38. package/alert/types.js +0 -5
  39. package/badge/Badge.d.ts +0 -4
  40. package/badge/Badge.js +0 -159
  41. package/badge/Badge.stories.tsx +0 -210
  42. package/badge/Badge.test.js +0 -30
  43. package/badge/types.d.ts +0 -54
  44. package/badge/types.js +0 -5
  45. package/bleed/Bleed.d.ts +0 -3
  46. package/bleed/Bleed.js +0 -43
  47. package/bleed/Bleed.stories.tsx +0 -342
  48. package/bleed/types.d.ts +0 -37
  49. package/bleed/types.js +0 -5
  50. package/box/Box.d.ts +0 -4
  51. package/box/Box.js +0 -75
  52. package/box/Box.stories.tsx +0 -119
  53. package/box/Box.test.js +0 -13
  54. package/box/types.d.ts +0 -32
  55. package/box/types.js +0 -5
  56. package/bulleted-list/BulletedList.d.ts +0 -7
  57. package/bulleted-list/BulletedList.js +0 -92
  58. package/bulleted-list/BulletedList.stories.tsx +0 -115
  59. package/bulleted-list/types.d.ts +0 -38
  60. package/bulleted-list/types.js +0 -5
  61. package/button/Button.d.ts +0 -4
  62. package/button/Button.js +0 -121
  63. package/button/Button.stories.tsx +0 -326
  64. package/button/Button.test.js +0 -38
  65. package/button/types.d.ts +0 -57
  66. package/button/types.js +0 -5
  67. package/card/Card.d.ts +0 -4
  68. package/card/Card.js +0 -120
  69. package/card/Card.stories.tsx +0 -171
  70. package/card/Card.test.js +0 -39
  71. package/card/types.d.ts +0 -62
  72. package/card/types.js +0 -5
  73. package/checkbox/Checkbox.d.ts +0 -4
  74. package/checkbox/Checkbox.js +0 -215
  75. package/checkbox/Checkbox.stories.tsx +0 -222
  76. package/checkbox/Checkbox.test.js +0 -199
  77. package/checkbox/types.d.ts +0 -72
  78. package/checkbox/types.js +0 -5
  79. package/chip/Chip.d.ts +0 -4
  80. package/chip/Chip.js +0 -121
  81. package/chip/Chip.stories.tsx +0 -214
  82. package/chip/Chip.test.js +0 -41
  83. package/chip/types.d.ts +0 -45
  84. package/chip/types.js +0 -5
  85. package/common/coreTokens.d.ts +0 -237
  86. package/common/coreTokens.js +0 -184
  87. package/common/utils.d.ts +0 -1
  88. package/common/utils.js +0 -16
  89. package/common/variables.d.ts +0 -1395
  90. package/common/variables.js +0 -1267
  91. package/container/Container.d.ts +0 -4
  92. package/container/Container.js +0 -194
  93. package/container/Container.stories.tsx +0 -214
  94. package/container/types.d.ts +0 -74
  95. package/container/types.js +0 -5
  96. package/contextual-menu/ContextualMenu.d.ts +0 -7
  97. package/contextual-menu/ContextualMenu.js +0 -71
  98. package/contextual-menu/ContextualMenu.stories.tsx +0 -182
  99. package/contextual-menu/ContextualMenu.test.js +0 -71
  100. package/contextual-menu/MenuItemAction.d.ts +0 -4
  101. package/contextual-menu/MenuItemAction.js +0 -46
  102. package/contextual-menu/types.d.ts +0 -22
  103. package/contextual-menu/types.js +0 -5
  104. package/date-input/Calendar.d.ts +0 -4
  105. package/date-input/Calendar.js +0 -214
  106. package/date-input/DateInput.d.ts +0 -4
  107. package/date-input/DateInput.js +0 -223
  108. package/date-input/DateInput.stories.tsx +0 -285
  109. package/date-input/DateInput.test.js +0 -808
  110. package/date-input/DatePicker.d.ts +0 -4
  111. package/date-input/DatePicker.js +0 -115
  112. package/date-input/Icons.d.ts +0 -6
  113. package/date-input/Icons.js +0 -58
  114. package/date-input/YearPicker.d.ts +0 -4
  115. package/date-input/YearPicker.js +0 -100
  116. package/date-input/types.d.ts +0 -164
  117. package/date-input/types.js +0 -5
  118. package/dialog/Dialog.d.ts +0 -4
  119. package/dialog/Dialog.js +0 -104
  120. package/dialog/Dialog.stories.tsx +0 -365
  121. package/dialog/Dialog.test.js +0 -307
  122. package/dialog/types.d.ts +0 -36
  123. package/dialog/types.js +0 -5
  124. package/divider/Divider.d.ts +0 -4
  125. package/divider/Divider.js +0 -36
  126. package/divider/Divider.stories.tsx +0 -223
  127. package/divider/Divider.test.js +0 -38
  128. package/divider/types.d.ts +0 -21
  129. package/divider/types.js +0 -5
  130. package/dropdown/Dropdown.d.ts +0 -4
  131. package/dropdown/Dropdown.js +0 -319
  132. package/dropdown/Dropdown.stories.tsx +0 -427
  133. package/dropdown/Dropdown.test.js +0 -599
  134. package/dropdown/DropdownMenu.d.ts +0 -4
  135. package/dropdown/DropdownMenu.js +0 -63
  136. package/dropdown/DropdownMenuItem.d.ts +0 -4
  137. package/dropdown/DropdownMenuItem.js +0 -70
  138. package/dropdown/types.d.ts +0 -96
  139. package/dropdown/types.js +0 -5
  140. package/file-input/FileInput.d.ts +0 -4
  141. package/file-input/FileInput.js +0 -479
  142. package/file-input/FileInput.stories.tsx +0 -618
  143. package/file-input/FileInput.test.js +0 -459
  144. package/file-input/FileItem.d.ts +0 -4
  145. package/file-input/FileItem.js +0 -135
  146. package/file-input/types.d.ts +0 -129
  147. package/file-input/types.js +0 -5
  148. package/flex/Flex.d.ts +0 -4
  149. package/flex/Flex.js +0 -57
  150. package/flex/Flex.stories.tsx +0 -112
  151. package/flex/types.d.ts +0 -97
  152. package/flex/types.js +0 -5
  153. package/footer/Footer.d.ts +0 -4
  154. package/footer/Footer.js +0 -138
  155. package/footer/Footer.stories.tsx +0 -171
  156. package/footer/Footer.test.js +0 -85
  157. package/footer/Icons.d.ts +0 -3
  158. package/footer/Icons.js +0 -136
  159. package/footer/types.d.ts +0 -64
  160. package/footer/types.js +0 -5
  161. package/grid/Grid.d.ts +0 -7
  162. package/grid/Grid.js +0 -76
  163. package/grid/Grid.stories.tsx +0 -219
  164. package/grid/types.d.ts +0 -115
  165. package/grid/types.js +0 -5
  166. package/header/Header.d.ts +0 -8
  167. package/header/Header.js +0 -220
  168. package/header/Header.stories.tsx +0 -251
  169. package/header/Header.test.js +0 -66
  170. package/header/Icons.d.ts +0 -2
  171. package/header/Icons.js +0 -29
  172. package/header/types.d.ts +0 -33
  173. package/header/types.js +0 -5
  174. package/heading/Heading.d.ts +0 -4
  175. package/heading/Heading.js +0 -137
  176. package/heading/Heading.stories.tsx +0 -54
  177. package/heading/Heading.test.js +0 -169
  178. package/heading/types.d.ts +0 -33
  179. package/heading/types.js +0 -5
  180. package/icon/Icon.d.ts +0 -4
  181. package/icon/Icon.js +0 -33
  182. package/icon/Icon.stories.tsx +0 -28
  183. package/icon/types.d.ts +0 -4
  184. package/icon/types.js +0 -5
  185. package/image/Image.d.ts +0 -4
  186. package/image/Image.js +0 -70
  187. package/image/Image.stories.tsx +0 -129
  188. package/image/types.d.ts +0 -72
  189. package/image/types.js +0 -5
  190. package/inset/Inset.d.ts +0 -3
  191. package/inset/Inset.js +0 -43
  192. package/inset/Inset.stories.tsx +0 -230
  193. package/inset/types.d.ts +0 -37
  194. package/inset/types.js +0 -5
  195. package/layout/ApplicationLayout.d.ts +0 -20
  196. package/layout/ApplicationLayout.js +0 -134
  197. package/layout/ApplicationLayout.stories.tsx +0 -162
  198. package/layout/Icons.d.ts +0 -8
  199. package/layout/Icons.js +0 -58
  200. package/layout/types.d.ts +0 -41
  201. package/layout/types.js +0 -5
  202. package/link/Link.d.ts +0 -4
  203. package/link/Link.js +0 -115
  204. package/link/Link.stories.tsx +0 -253
  205. package/link/Link.test.js +0 -63
  206. package/link/types.d.ts +0 -54
  207. package/link/types.js +0 -5
  208. package/main.d.ts +0 -49
  209. package/main.js +0 -357
  210. package/nav-tabs/NavTabs.d.ts +0 -7
  211. package/nav-tabs/NavTabs.js +0 -93
  212. package/nav-tabs/NavTabs.stories.tsx +0 -276
  213. package/nav-tabs/NavTabs.test.js +0 -76
  214. package/nav-tabs/NavTabsContext.d.ts +0 -3
  215. package/nav-tabs/NavTabsContext.js +0 -8
  216. package/nav-tabs/Tab.d.ts +0 -4
  217. package/nav-tabs/Tab.js +0 -118
  218. package/nav-tabs/types.d.ts +0 -52
  219. package/nav-tabs/types.js +0 -5
  220. package/number-input/NumberInput.d.ts +0 -4
  221. package/number-input/NumberInput.js +0 -86
  222. package/number-input/NumberInput.stories.tsx +0 -131
  223. package/number-input/NumberInput.test.js +0 -989
  224. package/number-input/NumberInputContext.d.ts +0 -3
  225. package/number-input/NumberInputContext.js +0 -8
  226. package/number-input/types.d.ts +0 -136
  227. package/number-input/types.js +0 -5
  228. package/paginator/Icons.d.ts +0 -5
  229. package/paginator/Icons.js +0 -40
  230. package/paginator/Paginator.d.ts +0 -4
  231. package/paginator/Paginator.js +0 -135
  232. package/paginator/Paginator.stories.tsx +0 -87
  233. package/paginator/Paginator.test.js +0 -335
  234. package/paginator/types.d.ts +0 -38
  235. package/paginator/types.js +0 -5
  236. package/paragraph/Paragraph.d.ts +0 -5
  237. package/paragraph/Paragraph.js +0 -22
  238. package/paragraph/Paragraph.stories.tsx +0 -27
  239. package/password-input/Icons.d.ts +0 -6
  240. package/password-input/Icons.js +0 -35
  241. package/password-input/PasswordInput.d.ts +0 -4
  242. package/password-input/PasswordInput.js +0 -97
  243. package/password-input/PasswordInput.stories.tsx +0 -99
  244. package/password-input/PasswordInput.test.js +0 -198
  245. package/password-input/types.d.ts +0 -111
  246. package/password-input/types.js +0 -5
  247. package/progress-bar/ProgressBar.d.ts +0 -4
  248. package/progress-bar/ProgressBar.js +0 -144
  249. package/progress-bar/ProgressBar.stories.tsx +0 -93
  250. package/progress-bar/ProgressBar.test.js +0 -93
  251. package/progress-bar/types.d.ts +0 -37
  252. package/progress-bar/types.js +0 -5
  253. package/quick-nav/QuickNav.d.ts +0 -4
  254. package/quick-nav/QuickNav.js +0 -94
  255. package/quick-nav/QuickNav.stories.tsx +0 -356
  256. package/quick-nav/types.d.ts +0 -21
  257. package/quick-nav/types.js +0 -5
  258. package/radio-group/Radio.d.ts +0 -4
  259. package/radio-group/Radio.js +0 -124
  260. package/radio-group/RadioGroup.d.ts +0 -4
  261. package/radio-group/RadioGroup.js +0 -235
  262. package/radio-group/RadioGroup.stories.tsx +0 -214
  263. package/radio-group/RadioGroup.test.js +0 -756
  264. package/radio-group/types.d.ts +0 -114
  265. package/radio-group/types.js +0 -5
  266. package/resultset-table/Icons.d.ts +0 -7
  267. package/resultset-table/Icons.js +0 -47
  268. package/resultset-table/ResultsetTable.d.ts +0 -7
  269. package/resultset-table/ResultsetTable.js +0 -170
  270. package/resultset-table/ResultsetTable.stories.tsx +0 -401
  271. package/resultset-table/ResultsetTable.test.js +0 -381
  272. package/resultset-table/types.d.ts +0 -100
  273. package/resultset-table/types.js +0 -5
  274. package/select/Icons.d.ts +0 -10
  275. package/select/Icons.js +0 -89
  276. package/select/Listbox.d.ts +0 -4
  277. package/select/Listbox.js +0 -143
  278. package/select/Option.d.ts +0 -4
  279. package/select/Option.js +0 -87
  280. package/select/Select.d.ts +0 -4
  281. package/select/Select.js +0 -590
  282. package/select/Select.stories.tsx +0 -971
  283. package/select/Select.test.js +0 -2370
  284. package/select/types.d.ts +0 -209
  285. package/select/types.js +0 -5
  286. package/sidenav/Icons.d.ts +0 -7
  287. package/sidenav/Icons.js +0 -47
  288. package/sidenav/Sidenav.d.ts +0 -10
  289. package/sidenav/Sidenav.js +0 -197
  290. package/sidenav/Sidenav.stories.tsx +0 -282
  291. package/sidenav/Sidenav.test.js +0 -37
  292. package/sidenav/SidenavContext.d.ts +0 -5
  293. package/sidenav/SidenavContext.js +0 -13
  294. package/sidenav/types.d.ts +0 -76
  295. package/sidenav/types.js +0 -5
  296. package/slider/Slider.d.ts +0 -4
  297. package/slider/Slider.js +0 -285
  298. package/slider/Slider.test.js +0 -254
  299. package/slider/types.d.ts +0 -86
  300. package/slider/types.js +0 -5
  301. package/spinner/Spinner.d.ts +0 -4
  302. package/spinner/Spinner.js +0 -206
  303. package/spinner/Spinner.stories.tsx +0 -129
  304. package/spinner/Spinner.test.js +0 -55
  305. package/spinner/types.d.ts +0 -32
  306. package/spinner/types.js +0 -5
  307. package/status-light/StatusLight.d.ts +0 -4
  308. package/status-light/StatusLight.js +0 -51
  309. package/status-light/StatusLight.stories.tsx +0 -74
  310. package/status-light/StatusLight.test.js +0 -25
  311. package/status-light/types.d.ts +0 -17
  312. package/status-light/types.js +0 -5
  313. package/switch/Switch.d.ts +0 -4
  314. package/switch/Switch.js +0 -214
  315. package/switch/Switch.stories.tsx +0 -137
  316. package/switch/Switch.test.js +0 -180
  317. package/switch/types.d.ts +0 -66
  318. package/switch/types.js +0 -5
  319. package/table/DropdownTheme.js +0 -62
  320. package/table/Table.d.ts +0 -8
  321. package/table/Table.js +0 -161
  322. package/table/Table.stories.tsx +0 -651
  323. package/table/Table.test.js +0 -113
  324. package/table/types.d.ts +0 -49
  325. package/table/types.js +0 -5
  326. package/tabs/Tab.d.ts +0 -4
  327. package/tabs/Tab.js +0 -116
  328. package/tabs/Tabs.d.ts +0 -4
  329. package/tabs/Tabs.js +0 -384
  330. package/tabs/Tabs.stories.tsx +0 -226
  331. package/tabs/Tabs.test.js +0 -294
  332. package/tabs/types.d.ts +0 -92
  333. package/tabs/types.js +0 -5
  334. package/tag/Tag.d.ts +0 -4
  335. package/tag/Tag.js +0 -151
  336. package/tag/Tag.stories.tsx +0 -155
  337. package/tag/Tag.test.js +0 -49
  338. package/tag/types.d.ts +0 -69
  339. package/tag/types.js +0 -5
  340. package/text-input/Suggestion.d.ts +0 -4
  341. package/text-input/Suggestion.js +0 -67
  342. package/text-input/Suggestions.d.ts +0 -4
  343. package/text-input/Suggestions.js +0 -86
  344. package/text-input/TextInput.d.ts +0 -4
  345. package/text-input/TextInput.js +0 -567
  346. package/text-input/TextInput.stories.tsx +0 -465
  347. package/text-input/TextInput.test.js +0 -1756
  348. package/text-input/types.d.ts +0 -205
  349. package/text-input/types.js +0 -5
  350. package/textarea/Textarea.d.ts +0 -4
  351. package/textarea/Textarea.js +0 -234
  352. package/textarea/Textarea.stories.tsx +0 -174
  353. package/textarea/Textarea.test.js +0 -406
  354. package/textarea/types.d.ts +0 -141
  355. package/textarea/types.js +0 -5
  356. package/toggle-group/ToggleGroup.d.ts +0 -4
  357. package/toggle-group/ToggleGroup.js +0 -201
  358. package/toggle-group/ToggleGroup.stories.tsx +0 -218
  359. package/toggle-group/ToggleGroup.test.js +0 -137
  360. package/toggle-group/types.d.ts +0 -114
  361. package/toggle-group/types.js +0 -5
  362. package/typography/Typography.d.ts +0 -4
  363. package/typography/Typography.js +0 -23
  364. package/typography/Typography.stories.tsx +0 -198
  365. package/typography/types.d.ts +0 -18
  366. package/typography/types.js +0 -5
  367. package/useTheme.d.ts +0 -1148
  368. package/useTheme.js +0 -15
  369. package/useTranslatedLabels.d.ts +0 -85
  370. package/useTranslatedLabels.js +0 -14
  371. package/utils/BaseTypography.d.ts +0 -21
  372. package/utils/BaseTypography.js +0 -94
  373. package/utils/FocusLock.d.ts +0 -13
  374. package/utils/FocusLock.js +0 -124
  375. package/wizard/Wizard.d.ts +0 -4
  376. package/wizard/Wizard.js +0 -250
  377. package/wizard/Wizard.stories.tsx +0 -253
  378. package/wizard/Wizard.test.js +0 -114
  379. package/wizard/types.d.ts +0 -64
  380. package/wizard/types.js +0 -5
package/typography/Typography.d.ts DELETED
@@ -1,4 +0,0 @@
1
- /// <reference types="react" />
2
- import TypographyPropsTypes from "./types";
3
- declare const DxcTypography: ({ textOverflow, whiteSpace, children, ...props }: TypographyPropsTypes) => JSX.Element;
4
- export default DxcTypography;
package/typography/Typography.js DELETED
@@ -1,23 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports["default"] = void 0;
8
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
10
- var _react = _interopRequireDefault(require("react"));
11
- var _BaseTypography = _interopRequireDefault(require("../utils/BaseTypography"));
12
- var _excluded = ["textOverflow", "whiteSpace", "children"];
13
- var DxcTypography = function DxcTypography(_ref) {
14
- var textOverflow = _ref.textOverflow,
15
- whiteSpace = _ref.whiteSpace,
16
- children = _ref.children,
17
- props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
18
- return /*#__PURE__*/_react["default"].createElement(_BaseTypography["default"], (0, _extends2["default"])({
19
- textOverflow: textOverflow,
20
- whiteSpace: whiteSpace == null && textOverflow != null && textOverflow !== "unset" ? "nowrap" : whiteSpace
21
- }, props), children);
22
- };
23
- var _default = exports["default"] = DxcTypography;
package/typography/Typography.stories.tsx DELETED
@@ -1,198 +0,0 @@
1
- import React from "react";
2
- import Title from "../../.storybook/components/Title";
3
- import ExampleContainer from "../../.storybook/components/ExampleContainer";
4
- import DxcTypography from "./Typography";
5
-
6
- export default {
7
- title: "Typography",
8
- component: DxcTypography,
9
- };
10
-
11
- export const Chromatic = () => (
12
- <>
13
- <ExampleContainer>
14
- <Title title="Default Typography" theme="light" level={4} />
15
- <DxcTypography>Default typography.</DxcTypography>
16
- </ExampleContainer>
17
- <ExampleContainer>
18
- <Title title="Typography font sizes" theme="light" level={4} />
19
- <DxcTypography display="block" fontSize="3.75rem">
20
- 3.75rem.
21
- </DxcTypography>
22
- <DxcTypography display="block" fontSize="3rem">
23
- 3rem.
24
- </DxcTypography>
25
- <DxcTypography display="block" fontSize="2rem">
26
- 2rem.
27
- </DxcTypography>
28
- <DxcTypography display="block" fontSize="1.5rem">
29
- 1.5rem.
30
- </DxcTypography>
31
- <DxcTypography display="block" fontSize="1.25rem">
32
- 1.25rem.
33
- </DxcTypography>
34
- <DxcTypography display="block" fontSize="1rem">
35
- 1rem.
36
- </DxcTypography>
37
- <DxcTypography display="block" fontSize="0.875rem">
38
- 0.875rem.
39
- </DxcTypography>
40
- <DxcTypography display="block" fontSize="0.75rem">
41
- 0.75rem.
42
- </DxcTypography>
43
- </ExampleContainer>
44
- <ExampleContainer>
45
- <Title title="Typography letter spacing" theme="light" level={4} />
46
- <DxcTypography display="block" letterSpacing="-0.025em">
47
- -0.025em.
48
- </DxcTypography>
49
- <DxcTypography display="block" letterSpacing="-0.0125em">
50
- -0.0125em.
51
- </DxcTypography>
52
- <DxcTypography display="block" letterSpacing="0em">
53
- 0em.
54
- </DxcTypography>
55
- <DxcTypography display="block" letterSpacing="0.025em">
56
- 0.025em.
57
- </DxcTypography>
58
- <DxcTypography display="block" letterSpacing="0.05em">
59
- 0.05em.
60
- </DxcTypography>
61
- <DxcTypography display="block" letterSpacing="0.1em">
62
- 0.1em.
63
- </DxcTypography>{" "}
64
- </ExampleContainer>
65
- <ExampleContainer>
66
- <Title title="Typography line height" theme="light" level={4} />
67
- <DxcTypography display="block" lineHeight="1em">
68
- 1em.
69
- </DxcTypography>
70
- <DxcTypography display="block" lineHeight="1.25em">
71
- 1.25em.
72
- </DxcTypography>
73
- <DxcTypography display="block" lineHeight="1.365em">
74
- 1.365em.
75
- </DxcTypography>
76
- <DxcTypography display="block" lineHeight="1.5em">
77
- 1.5em.
78
- </DxcTypography>
79
- <DxcTypography display="block" lineHeight="1.715em">
80
- 1.715em.
81
- </DxcTypography>
82
- <DxcTypography display="block" lineHeight="2em">
83
- 2em.
84
- </DxcTypography>
85
- </ExampleContainer>
86
- <ExampleContainer>
87
- <Title title="Typography font weight" theme="light" level={4} />
88
- <DxcTypography display="block" fontWeight="300">
89
- 300.
90
- </DxcTypography>
91
- <DxcTypography display="block" fontWeight="400">
92
- 400.
93
- </DxcTypography>
94
- <DxcTypography display="block" fontWeight="600">
95
- 600.
96
- </DxcTypography>
97
- <DxcTypography display="block" fontWeight="700">
98
- 700.
99
- </DxcTypography>
100
- </ExampleContainer>
101
- <ExampleContainer>
102
- <Title title="Typography decoration" theme="light" level={4} />
103
- <DxcTypography display="block" textDecoration="underline">
104
- Underline.
105
- </DxcTypography>
106
- <DxcTypography display="block" textDecoration="line-through">
107
- Line-through.
108
- </DxcTypography>
109
- </ExampleContainer>
110
- <ExampleContainer>
111
- <Title title="Typography font family" theme="light" level={4} />
112
- <DxcTypography display="block" fontFamily="Open Sans, sans-serif">
113
- Open Sans, sans-serif.
114
- </DxcTypography>
115
- <DxcTypography display="block" fontFamily="Source Code Pro, monospace">
116
- Source Code Pro, monospace.
117
- </DxcTypography>
118
- </ExampleContainer>
119
- <ExampleContainer>
120
- <Title title="Typography font style" theme="light" level={4} />
121
- <DxcTypography display="block" fontStyle="italic">
122
- Italic.
123
- </DxcTypography>
124
- <DxcTypography display="block" fontStyle="normal">
125
- Normal.
126
- </DxcTypography>
127
- </ExampleContainer>
128
- <ExampleContainer>
129
- <Title title="Typography align" theme="light" level={4} />
130
- <DxcTypography display="block" textAlign="left">
131
- Left.
132
- </DxcTypography>
133
- <DxcTypography display="block" textAlign="center">
134
- Center.
135
- </DxcTypography>
136
- <DxcTypography display="block" textAlign="right">
137
- Right.
138
- </DxcTypography>
139
- </ExampleContainer>
140
- <ExampleContainer>
141
- <Title title="Typography whitespace" theme="light" level={4} />
142
- <div style={{ margin: "50px", border: "1px solid red", width: "125px" }}>
143
- <DxcTypography fontSize="2rem">
144
- {" "} Normal: A bunch of words you see.
145
- </DxcTypography>
146
- </div>
147
- <div style={{ margin: "50px", border: "1px solid red", width: "125px" }}>
148
- <DxcTypography whiteSpace="nowrap" fontSize="2rem">
149
- {" "}No-wrap: A bunch of words you see.
150
- </DxcTypography>
151
- </div>
152
- <div style={{ margin: "50px", border: "1px solid red", width: "125px" }}>
153
- <DxcTypography whiteSpace="pre" fontSize="2rem">
154
- {" "} pre: A bunch of words you see.
155
- </DxcTypography>
156
- </div>
157
- <div style={{ margin: "50px", border: "1px solid red", width: "125px" }}>
158
- <DxcTypography whiteSpace="pre-line" fontSize="2rem">
159
- {" "}pre-line: A bunch of words you see.
160
- </DxcTypography>
161
- </div>
162
- <div style={{ margin: "50px", border: "1px solid red", width: "125px" }}>
163
- <DxcTypography whiteSpace="pre-wrap" fontSize="2rem">
164
- {" "} pre-wrap: A bunch of words you see.
165
- </DxcTypography>
166
- </div>
167
- </ExampleContainer>{" "}
168
- <ExampleContainer>
169
- <Title title="Typography display" theme="light" level={4} />
170
- <DxcTypography display="block" textAlign="left">
171
- Display Block.
172
- <DxcTypography>A different text.</DxcTypography>
173
- </DxcTypography>
174
- <DxcTypography display="inline" textAlign="left">
175
- Display Inline.
176
- <DxcTypography>A different text.</DxcTypography>
177
- </DxcTypography>
178
- </ExampleContainer>
179
- <ExampleContainer>
180
- <Title title="Typography text-overflow" theme="light" level={4} />
181
- <div style={{ width: "75px" }}>
182
- <DxcTypography display="block" textOverflow="clip">
183
- Overflow clip.
184
- </DxcTypography>
185
- </div>
186
- <div style={{ width: "75px" }}>
187
- <DxcTypography display="block" textOverflow="ellipsis">
188
- Overflow ellipsis.
189
- </DxcTypography>
190
- </div>
191
- <div style={{ width: "75px" }}>
192
- <DxcTypography display="block" textOverflow="unset">
193
- Overflow unset.
194
- </DxcTypography>
195
- </div>
196
- </ExampleContainer>
197
- </>
198
- );
package/typography/types.d.ts DELETED
@@ -1,18 +0,0 @@
1
- /// <reference types="react" />
2
- type Props = {
3
- as?: keyof HTMLElementTagNameMap;
4
- display?: "inline" | "block";
5
- fontFamily?: "Open Sans, sans-serif" | "Source Code Pro, monospace";
6
- fontSize?: "0.75rem" | "0.875rem" | "1rem" | "1.25rem" | "1.5rem" | "2rem" | "3rem" | "3.75rem";
7
- fontStyle?: "italic" | "normal";
8
- fontWeight?: "300" | "400" | "600" | "700";
9
- letterSpacing?: "-0.025em" | "-0.0125em" | "0em" | "0.025em" | "0.05em" | "0.1em";
10
- lineHeight?: "1em" | "1.25em" | "1.365em" | "1.5em" | "1.715em" | "2em";
11
- textAlign?: "left" | "center" | "right";
12
- color?: string;
13
- textDecoration?: "none" | "underline" | "line-through";
14
- textOverflow?: "clip" | "ellipsis" | "unset";
15
- whiteSpace?: "normal" | "nowrap" | "pre" | "pre-line" | "pre-wrap";
16
- children: React.ReactNode;
17
- };
18
- export default Props;
package/typography/types.js DELETED
@@ -1,5 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });