@dxc-technology/halstack-react 0.0.0-dfcca07 → 0.0.0-e01c6f9

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