@dxc-technology/halstack-react 0.0.0-1bf97dd → 0.0.0-1bfe223

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