@dxc-technology/halstack-react 0.0.0-b39a1d2 → 0.0.0-b3b8a35

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