@dxc-technology/halstack-react 0.0.0-c908d78 → 0.0.0-c9c1158

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 (355) hide show
  1. package/BackgroundColorContext.d.ts +10 -0
  2. package/BackgroundColorContext.js +7 -22
  3. package/HalstackContext.d.ts +1353 -0
  4. package/HalstackContext.js +310 -0
  5. package/README.md +47 -0
  6. package/accordion/Accordion.d.ts +1 -1
  7. package/accordion/Accordion.js +119 -192
  8. package/accordion/Accordion.stories.tsx +283 -0
  9. package/accordion/Accordion.test.js +56 -0
  10. package/accordion/types.d.ts +12 -23
  11. package/accordion-group/AccordionGroup.d.ts +5 -4
  12. package/accordion-group/AccordionGroup.js +39 -108
  13. package/accordion-group/AccordionGroup.stories.tsx +252 -0
  14. package/accordion-group/AccordionGroup.test.js +98 -0
  15. package/accordion-group/AccordionGroupAccordion.d.ts +4 -0
  16. package/accordion-group/AccordionGroupAccordion.js +31 -0
  17. package/accordion-group/types.d.ts +18 -23
  18. package/alert/Alert.js +24 -57
  19. package/alert/Alert.stories.tsx +198 -0
  20. package/alert/Alert.test.js +75 -0
  21. package/alert/types.d.ts +6 -6
  22. package/badge/Badge.d.ts +4 -0
  23. package/badge/Badge.js +9 -20
  24. package/badge/types.d.ts +5 -0
  25. package/bleed/Bleed.d.ts +3 -0
  26. package/bleed/Bleed.js +43 -0
  27. package/bleed/Bleed.stories.tsx +342 -0
  28. package/bleed/types.d.ts +37 -0
  29. package/bleed/types.js +5 -0
  30. package/box/Box.d.ts +1 -1
  31. package/box/Box.js +32 -83
  32. package/box/Box.stories.tsx +38 -51
  33. package/box/Box.test.js +13 -0
  34. package/box/types.d.ts +3 -18
  35. package/bulleted-list/BulletedList.d.ts +7 -0
  36. package/bulleted-list/BulletedList.js +99 -0
  37. package/bulleted-list/BulletedList.stories.tsx +116 -0
  38. package/bulleted-list/types.d.ts +38 -0
  39. package/bulleted-list/types.js +5 -0
  40. package/button/Button.d.ts +1 -1
  41. package/button/Button.js +64 -120
  42. package/button/Button.stories.tsx +328 -277
  43. package/button/Button.test.js +36 -0
  44. package/button/types.d.ts +14 -14
  45. package/card/Card.d.ts +1 -1
  46. package/card/Card.js +59 -104
  47. package/card/Card.stories.tsx +171 -0
  48. package/card/Card.test.js +39 -0
  49. package/card/types.d.ts +8 -15
  50. package/checkbox/Checkbox.d.ts +2 -2
  51. package/checkbox/Checkbox.js +147 -180
  52. package/checkbox/Checkbox.stories.tsx +166 -136
  53. package/checkbox/Checkbox.test.js +199 -0
  54. package/checkbox/types.d.ts +20 -8
  55. package/chip/Chip.d.ts +4 -0
  56. package/chip/Chip.js +48 -148
  57. package/chip/Chip.stories.tsx +214 -0
  58. package/chip/Chip.test.js +41 -0
  59. package/chip/types.d.ts +45 -0
  60. package/chip/types.js +5 -0
  61. package/common/OpenSans.css +68 -80
  62. package/common/coreTokens.d.ts +237 -0
  63. package/common/coreTokens.js +184 -0
  64. package/common/utils.d.ts +1 -0
  65. package/common/utils.js +6 -12
  66. package/common/variables.d.ts +1499 -0
  67. package/common/variables.js +1119 -1317
  68. package/container/Container.d.ts +4 -0
  69. package/container/Container.js +198 -0
  70. package/container/Container.stories.tsx +229 -0
  71. package/container/types.d.ts +74 -0
  72. package/container/types.js +5 -0
  73. package/date-input/Calendar.d.ts +4 -0
  74. package/date-input/Calendar.js +214 -0
  75. package/date-input/DateInput.js +175 -313
  76. package/date-input/DateInput.stories.tsx +285 -0
  77. package/date-input/DateInput.test.js +808 -0
  78. package/date-input/DatePicker.d.ts +4 -0
  79. package/date-input/DatePicker.js +115 -0
  80. package/date-input/Icons.d.ts +6 -0
  81. package/date-input/Icons.js +58 -0
  82. package/date-input/YearPicker.d.ts +4 -0
  83. package/date-input/YearPicker.js +100 -0
  84. package/date-input/types.d.ts +86 -22
  85. package/dialog/Dialog.d.ts +1 -1
  86. package/dialog/Dialog.js +72 -130
  87. package/dialog/Dialog.stories.tsx +195 -0
  88. package/dialog/Dialog.test.js +307 -0
  89. package/dialog/types.d.ts +18 -25
  90. package/dropdown/Dropdown.d.ts +1 -1
  91. package/dropdown/Dropdown.js +245 -328
  92. package/dropdown/Dropdown.stories.tsx +438 -0
  93. package/dropdown/Dropdown.test.js +599 -0
  94. package/dropdown/DropdownMenu.d.ts +4 -0
  95. package/dropdown/DropdownMenu.js +63 -0
  96. package/dropdown/DropdownMenuItem.d.ts +4 -0
  97. package/dropdown/DropdownMenuItem.js +67 -0
  98. package/dropdown/types.d.ts +37 -28
  99. package/file-input/FileInput.d.ts +4 -0
  100. package/file-input/FileInput.js +274 -327
  101. package/file-input/FileInput.stories.tsx +618 -0
  102. package/file-input/FileInput.test.js +459 -0
  103. package/file-input/FileItem.d.ts +4 -0
  104. package/file-input/FileItem.js +54 -112
  105. package/file-input/types.d.ts +129 -0
  106. package/file-input/types.js +5 -0
  107. package/flex/Flex.d.ts +4 -0
  108. package/flex/Flex.js +57 -0
  109. package/flex/Flex.stories.tsx +112 -0
  110. package/flex/types.d.ts +97 -0
  111. package/flex/types.js +5 -0
  112. package/footer/Footer.d.ts +1 -1
  113. package/footer/Footer.js +61 -192
  114. package/footer/{Footer.stories.jsx → Footer.stories.tsx} +38 -37
  115. package/footer/Footer.test.js +85 -0
  116. package/footer/Icons.d.ts +2 -0
  117. package/footer/Icons.js +4 -9
  118. package/footer/types.d.ts +36 -33
  119. package/grid/Grid.d.ts +7 -0
  120. package/grid/Grid.js +76 -0
  121. package/grid/Grid.stories.tsx +219 -0
  122. package/grid/types.d.ts +115 -0
  123. package/grid/types.js +5 -0
  124. package/header/Header.d.ts +4 -3
  125. package/header/Header.js +106 -199
  126. package/header/Header.stories.tsx +251 -0
  127. package/header/Header.test.js +66 -0
  128. package/header/Icons.d.ts +2 -0
  129. package/header/Icons.js +4 -9
  130. package/header/types.d.ts +4 -17
  131. package/heading/Heading.d.ts +4 -0
  132. package/heading/Heading.js +16 -55
  133. package/heading/Heading.stories.tsx +54 -0
  134. package/heading/Heading.test.js +169 -0
  135. package/heading/types.d.ts +33 -0
  136. package/heading/types.js +5 -0
  137. package/image/Image.d.ts +4 -0
  138. package/image/Image.js +70 -0
  139. package/image/Image.stories.tsx +127 -0
  140. package/image/types.d.ts +72 -0
  141. package/image/types.js +5 -0
  142. package/inset/Inset.d.ts +3 -0
  143. package/inset/Inset.js +43 -0
  144. package/inset/Inset.stories.tsx +230 -0
  145. package/inset/types.d.ts +37 -0
  146. package/inset/types.js +5 -0
  147. package/layout/ApplicationLayout.d.ts +20 -0
  148. package/layout/ApplicationLayout.js +83 -184
  149. package/layout/ApplicationLayout.stories.tsx +162 -0
  150. package/layout/Icons.d.ts +8 -0
  151. package/layout/Icons.js +51 -48
  152. package/layout/SidenavContext.d.ts +5 -0
  153. package/layout/SidenavContext.js +13 -0
  154. package/layout/types.d.ts +41 -0
  155. package/layout/types.js +5 -0
  156. package/link/Link.d.ts +3 -2
  157. package/link/Link.js +65 -111
  158. package/link/Link.stories.tsx +253 -0
  159. package/link/Link.test.js +63 -0
  160. package/link/types.d.ts +15 -35
  161. package/main.d.ts +16 -13
  162. package/main.js +71 -91
  163. package/nav-tabs/NavTabs.d.ts +8 -0
  164. package/nav-tabs/NavTabs.js +90 -0
  165. package/nav-tabs/NavTabs.stories.tsx +274 -0
  166. package/nav-tabs/NavTabs.test.js +75 -0
  167. package/nav-tabs/Tab.d.ts +4 -0
  168. package/nav-tabs/Tab.js +117 -0
  169. package/nav-tabs/types.d.ts +52 -0
  170. package/nav-tabs/types.js +5 -0
  171. package/number-input/NumberInput.d.ts +11 -0
  172. package/number-input/NumberInput.js +28 -89
  173. package/number-input/{NumberInput.stories.jsx → NumberInput.stories.tsx} +44 -28
  174. package/number-input/NumberInput.test.js +830 -0
  175. package/number-input/types.d.ts +130 -0
  176. package/number-input/types.js +5 -0
  177. package/package.json +46 -45
  178. package/paginator/Icons.d.ts +5 -0
  179. package/paginator/Icons.js +21 -47
  180. package/paginator/Paginator.js +35 -95
  181. package/paginator/Paginator.stories.tsx +24 -0
  182. package/paginator/Paginator.test.js +335 -0
  183. package/paginator/types.d.ts +3 -3
  184. package/paragraph/Paragraph.d.ts +5 -0
  185. package/paragraph/Paragraph.js +27 -0
  186. package/paragraph/Paragraph.stories.tsx +27 -0
  187. package/password-input/Icons.d.ts +6 -0
  188. package/password-input/Icons.js +35 -0
  189. package/password-input/PasswordInput.js +60 -125
  190. package/password-input/PasswordInput.stories.tsx +3 -34
  191. package/password-input/PasswordInput.test.js +198 -0
  192. package/password-input/types.d.ts +35 -24
  193. package/progress-bar/ProgressBar.js +69 -89
  194. package/progress-bar/ProgressBar.stories.tsx +93 -0
  195. package/progress-bar/ProgressBar.test.js +93 -0
  196. package/progress-bar/types.d.ts +3 -3
  197. package/quick-nav/QuickNav.d.ts +4 -0
  198. package/quick-nav/QuickNav.js +94 -0
  199. package/quick-nav/QuickNav.stories.tsx +356 -0
  200. package/quick-nav/types.d.ts +21 -0
  201. package/quick-nav/types.js +5 -0
  202. package/radio-group/Radio.d.ts +4 -0
  203. package/radio-group/Radio.js +124 -0
  204. package/radio-group/RadioGroup.d.ts +4 -0
  205. package/radio-group/RadioGroup.js +235 -0
  206. package/radio-group/RadioGroup.stories.tsx +214 -0
  207. package/radio-group/RadioGroup.test.js +756 -0
  208. package/radio-group/types.d.ts +114 -0
  209. package/radio-group/types.js +5 -0
  210. package/resultset-table/Icons.d.ts +7 -0
  211. package/resultset-table/Icons.js +47 -0
  212. package/resultset-table/ResultsetTable.d.ts +4 -0
  213. package/resultset-table/ResultsetTable.js +159 -0
  214. package/resultset-table/ResultsetTable.stories.tsx +300 -0
  215. package/resultset-table/ResultsetTable.test.js +305 -0
  216. package/resultset-table/types.d.ts +67 -0
  217. package/resultset-table/types.js +5 -0
  218. package/select/Icons.d.ts +10 -0
  219. package/select/Icons.js +89 -0
  220. package/select/Listbox.d.ts +4 -0
  221. package/select/Listbox.js +143 -0
  222. package/select/Option.d.ts +4 -0
  223. package/select/Option.js +80 -0
  224. package/select/Select.d.ts +4 -0
  225. package/select/Select.js +221 -504
  226. package/select/Select.stories.tsx +971 -0
  227. package/select/Select.test.js +2334 -0
  228. package/select/types.d.ts +209 -0
  229. package/select/types.js +5 -0
  230. package/sidenav/Icons.d.ts +7 -0
  231. package/sidenav/Icons.js +47 -0
  232. package/sidenav/Sidenav.d.ts +10 -0
  233. package/sidenav/Sidenav.js +135 -81
  234. package/sidenav/Sidenav.stories.tsx +282 -0
  235. package/sidenav/Sidenav.test.js +37 -0
  236. package/sidenav/types.d.ts +76 -0
  237. package/sidenav/types.js +5 -0
  238. package/slider/Slider.d.ts +2 -2
  239. package/slider/Slider.js +168 -180
  240. package/slider/Slider.test.js +254 -0
  241. package/slider/types.d.ts +13 -10
  242. package/spinner/Spinner.js +30 -66
  243. package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +53 -26
  244. package/spinner/Spinner.test.js +55 -0
  245. package/spinner/types.d.ts +3 -3
  246. package/switch/Switch.d.ts +2 -2
  247. package/switch/Switch.js +154 -114
  248. package/switch/Switch.stories.tsx +45 -68
  249. package/switch/Switch.test.js +180 -0
  250. package/switch/types.d.ts +13 -5
  251. package/table/Table.js +10 -29
  252. package/table/{Table.stories.jsx → Table.stories.tsx} +81 -1
  253. package/table/Table.test.js +21 -0
  254. package/table/types.d.ts +8 -8
  255. package/tabs/Tab.d.ts +4 -0
  256. package/tabs/Tab.js +113 -0
  257. package/tabs/Tabs.d.ts +1 -1
  258. package/tabs/Tabs.js +319 -145
  259. package/tabs/Tabs.stories.tsx +226 -0
  260. package/tabs/Tabs.test.js +294 -0
  261. package/tabs/types.d.ts +48 -27
  262. package/tag/Tag.d.ts +1 -1
  263. package/tag/Tag.js +44 -86
  264. package/tag/Tag.stories.tsx +38 -28
  265. package/tag/Tag.test.js +49 -0
  266. package/tag/types.d.ts +25 -16
  267. package/text-input/Icons.d.ts +8 -0
  268. package/text-input/Icons.js +56 -0
  269. package/text-input/Suggestion.d.ts +4 -0
  270. package/text-input/Suggestion.js +67 -0
  271. package/text-input/Suggestions.d.ts +4 -0
  272. package/text-input/Suggestions.js +89 -0
  273. package/text-input/TextInput.d.ts +4 -0
  274. package/text-input/TextInput.js +310 -543
  275. package/text-input/TextInput.stories.tsx +465 -0
  276. package/text-input/TextInput.test.js +1739 -0
  277. package/text-input/types.d.ts +205 -0
  278. package/text-input/types.js +5 -0
  279. package/textarea/Textarea.d.ts +4 -0
  280. package/textarea/Textarea.js +94 -171
  281. package/textarea/Textarea.stories.tsx +175 -0
  282. package/textarea/Textarea.test.js +406 -0
  283. package/textarea/types.d.ts +141 -0
  284. package/textarea/types.js +5 -0
  285. package/toggle-group/ToggleGroup.d.ts +4 -0
  286. package/toggle-group/ToggleGroup.js +103 -142
  287. package/toggle-group/ToggleGroup.stories.tsx +218 -0
  288. package/toggle-group/ToggleGroup.test.js +137 -0
  289. package/toggle-group/types.d.ts +114 -0
  290. package/toggle-group/types.js +5 -0
  291. package/typography/Typography.d.ts +4 -0
  292. package/typography/Typography.js +23 -0
  293. package/typography/Typography.stories.tsx +198 -0
  294. package/typography/types.d.ts +18 -0
  295. package/typography/types.js +5 -0
  296. package/useTheme.d.ts +1252 -0
  297. package/useTheme.js +4 -11
  298. package/useTranslatedLabels.d.ts +85 -0
  299. package/useTranslatedLabels.js +14 -0
  300. package/utils/BaseTypography.d.ts +21 -0
  301. package/utils/BaseTypography.js +94 -0
  302. package/utils/FocusLock.d.ts +13 -0
  303. package/utils/FocusLock.js +114 -0
  304. package/wizard/Wizard.d.ts +4 -0
  305. package/wizard/Wizard.js +130 -151
  306. package/wizard/Wizard.stories.tsx +253 -0
  307. package/wizard/Wizard.test.js +114 -0
  308. package/wizard/types.d.ts +64 -0
  309. package/wizard/types.js +5 -0
  310. package/ThemeContext.js +0 -246
  311. package/V3Select/V3Select.js +0 -455
  312. package/V3Select/index.d.ts +0 -27
  313. package/V3Textarea/V3Textarea.js +0 -260
  314. package/V3Textarea/index.d.ts +0 -27
  315. package/chip/index.d.ts +0 -22
  316. package/common/RequiredComponent.js +0 -32
  317. package/date/Date.js +0 -373
  318. package/date/index.d.ts +0 -27
  319. package/file-input/index.d.ts +0 -81
  320. package/heading/index.d.ts +0 -17
  321. package/input-text/Icons.js +0 -22
  322. package/input-text/InputText.js +0 -611
  323. package/input-text/index.d.ts +0 -36
  324. package/number-input/NumberInputContext.js +0 -16
  325. package/number-input/index.d.ts +0 -113
  326. package/progress-bar/ProgressBar.stories.jsx +0 -58
  327. package/radio/Radio.d.ts +0 -4
  328. package/radio/Radio.js +0 -174
  329. package/radio/Radio.stories.tsx +0 -192
  330. package/radio/types.d.ts +0 -54
  331. package/resultsetTable/ResultsetTable.js +0 -274
  332. package/resultsetTable/index.d.ts +0 -19
  333. package/select/index.d.ts +0 -131
  334. package/sidenav/index.d.ts +0 -13
  335. package/text-input/index.d.ts +0 -135
  336. package/textarea/Textarea.stories.jsx +0 -135
  337. package/textarea/index.d.ts +0 -117
  338. package/toggle/Toggle.js +0 -186
  339. package/toggle/index.d.ts +0 -21
  340. package/toggle-group/index.d.ts +0 -21
  341. package/upload/Upload.js +0 -201
  342. package/upload/buttons-upload/ButtonsUpload.js +0 -111
  343. package/upload/buttons-upload/Icons.js +0 -40
  344. package/upload/dragAndDropArea/DragAndDropArea.js +0 -225
  345. package/upload/dragAndDropArea/Icons.js +0 -39
  346. package/upload/file-upload/FileToUpload.js +0 -115
  347. package/upload/file-upload/Icons.js +0 -66
  348. package/upload/files-upload/FilesToUpload.js +0 -109
  349. package/upload/index.d.ts +0 -15
  350. package/upload/transaction/Icons.js +0 -160
  351. package/upload/transaction/Transaction.js +0 -104
  352. package/upload/transactions/Transactions.js +0 -94
  353. package/wizard/Icons.js +0 -65
  354. package/wizard/index.d.ts +0 -18
  355. /package/{radio → badge}/types.js +0 -0
package/typography/Typography.stories.tsx ADDED
@@ -0,0 +1,198 @@
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 ADDED
@@ -0,0 +1,18 @@
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 ADDED
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });