@dxc-technology/halstack-react 0.0.0-335f028 → 0.0.0-33c1fd8

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 (403) hide show
  1. package/BackgroundColorContext.d.ts +1 -10
  2. package/BackgroundColorContext.js +5 -22
  3. package/HalstackContext.d.ts +1244 -6
  4. package/HalstackContext.js +182 -115
  5. package/README.md +47 -0
  6. package/accordion/Accordion.accessibility.test.js +71 -0
  7. package/accordion/Accordion.d.ts +1 -1
  8. package/accordion/Accordion.js +105 -160
  9. package/accordion/Accordion.stories.tsx +84 -140
  10. package/accordion/Accordion.test.js +25 -41
  11. package/accordion/types.d.ts +6 -17
  12. package/accordion-group/AccordionGroup.accessibility.test.js +88 -0
  13. package/accordion-group/AccordionGroup.d.ts +2 -2
  14. package/accordion-group/AccordionGroup.js +31 -98
  15. package/accordion-group/AccordionGroup.stories.tsx +94 -67
  16. package/accordion-group/AccordionGroup.test.js +52 -105
  17. package/accordion-group/AccordionGroupAccordion.d.ts +4 -0
  18. package/accordion-group/AccordionGroupAccordion.js +31 -0
  19. package/accordion-group/AccordionGroupContext.d.ts +3 -0
  20. package/accordion-group/AccordionGroupContext.js +8 -0
  21. package/accordion-group/types.d.ts +12 -17
  22. package/action-icon/ActionIcon.accessibility.test.js +63 -0
  23. package/action-icon/ActionIcon.d.ts +4 -0
  24. package/action-icon/ActionIcon.js +48 -0
  25. package/action-icon/ActionIcon.stories.tsx +41 -0
  26. package/action-icon/ActionIcon.test.js +64 -0
  27. package/action-icon/types.d.ts +26 -0
  28. package/alert/Alert.accessibility.test.js +95 -0
  29. package/alert/Alert.js +35 -125
  30. package/alert/Alert.stories.tsx +28 -0
  31. package/alert/Alert.test.js +29 -46
  32. package/alert/types.d.ts +5 -5
  33. package/badge/Badge.accessibility.test.js +129 -0
  34. package/badge/Badge.d.ts +1 -1
  35. package/badge/Badge.js +142 -40
  36. package/badge/Badge.stories.tsx +210 -0
  37. package/badge/Badge.test.js +30 -0
  38. package/badge/types.d.ts +52 -2
  39. package/bleed/Bleed.js +14 -55
  40. package/bleed/Bleed.stories.tsx +95 -95
  41. package/bleed/types.d.ts +2 -2
  42. package/box/Box.accessibility.test.js +33 -0
  43. package/box/Box.d.ts +1 -1
  44. package/box/Box.js +30 -81
  45. package/box/Box.stories.tsx +38 -51
  46. package/box/Box.test.js +2 -7
  47. package/box/types.d.ts +3 -14
  48. package/bulleted-list/BulletedList.accessibility.test.js +107 -0
  49. package/bulleted-list/BulletedList.d.ts +7 -0
  50. package/bulleted-list/BulletedList.js +92 -0
  51. package/bulleted-list/BulletedList.stories.tsx +115 -0
  52. package/bulleted-list/types.d.ts +38 -0
  53. package/button/Button.accessibility.test.js +127 -0
  54. package/button/Button.d.ts +1 -1
  55. package/button/Button.js +64 -117
  56. package/button/Button.stories.tsx +151 -100
  57. package/button/Button.test.js +20 -17
  58. package/button/types.d.ts +12 -8
  59. package/card/Card.accessibility.test.js +36 -0
  60. package/card/Card.d.ts +1 -1
  61. package/card/Card.js +64 -107
  62. package/card/Card.stories.tsx +12 -42
  63. package/card/Card.test.js +11 -22
  64. package/card/types.d.ts +6 -11
  65. package/checkbox/Checkbox.accessibility.test.js +87 -0
  66. package/checkbox/Checkbox.d.ts +2 -2
  67. package/checkbox/Checkbox.js +142 -181
  68. package/checkbox/Checkbox.stories.tsx +128 -94
  69. package/checkbox/Checkbox.test.js +160 -39
  70. package/checkbox/types.d.ts +11 -3
  71. package/chip/Chip.accessibility.test.js +67 -0
  72. package/chip/Chip.js +43 -80
  73. package/chip/Chip.stories.tsx +102 -26
  74. package/chip/Chip.test.js +18 -33
  75. package/chip/types.d.ts +4 -4
  76. package/common/coreTokens.d.ts +237 -0
  77. package/common/coreTokens.js +184 -0
  78. package/common/utils.d.ts +1 -0
  79. package/common/utils.js +6 -12
  80. package/common/variables.d.ts +1394 -0
  81. package/common/variables.js +1027 -1133
  82. package/container/Container.d.ts +4 -0
  83. package/container/Container.js +194 -0
  84. package/container/Container.stories.tsx +214 -0
  85. package/container/types.d.ts +74 -0
  86. package/contextual-menu/ContextualMenu.accessibility.test.js +86 -0
  87. package/contextual-menu/ContextualMenu.d.ts +5 -0
  88. package/contextual-menu/ContextualMenu.js +88 -0
  89. package/contextual-menu/ContextualMenu.stories.tsx +219 -0
  90. package/contextual-menu/ContextualMenu.test.js +205 -0
  91. package/contextual-menu/GroupItem.d.ts +4 -0
  92. package/contextual-menu/GroupItem.js +67 -0
  93. package/contextual-menu/ItemAction.d.ts +4 -0
  94. package/contextual-menu/ItemAction.js +52 -0
  95. package/contextual-menu/MenuItem.d.ts +4 -0
  96. package/contextual-menu/MenuItem.js +29 -0
  97. package/contextual-menu/SingleItem.d.ts +4 -0
  98. package/contextual-menu/SingleItem.js +38 -0
  99. package/contextual-menu/types.d.ts +58 -0
  100. package/date-input/Calendar.d.ts +4 -0
  101. package/date-input/Calendar.js +214 -0
  102. package/date-input/DateInput.accessibility.test.js +216 -0
  103. package/date-input/DateInput.js +151 -298
  104. package/date-input/DateInput.stories.tsx +203 -56
  105. package/date-input/DateInput.test.js +700 -371
  106. package/date-input/DatePicker.d.ts +4 -0
  107. package/date-input/DatePicker.js +121 -0
  108. package/date-input/YearPicker.d.ts +4 -0
  109. package/date-input/YearPicker.js +100 -0
  110. package/date-input/types.d.ts +72 -15
  111. package/dialog/Dialog.accessibility.test.js +69 -0
  112. package/dialog/Dialog.d.ts +1 -1
  113. package/dialog/Dialog.js +61 -107
  114. package/dialog/Dialog.stories.tsx +320 -167
  115. package/dialog/Dialog.test.js +287 -20
  116. package/dialog/types.d.ts +18 -25
  117. package/divider/Divider.accessibility.test.js +33 -0
  118. package/divider/Divider.d.ts +4 -0
  119. package/divider/Divider.js +36 -0
  120. package/divider/Divider.stories.tsx +223 -0
  121. package/divider/Divider.test.js +38 -0
  122. package/divider/types.d.ts +21 -0
  123. package/dropdown/Dropdown.accessibility.test.js +180 -0
  124. package/dropdown/Dropdown.d.ts +1 -1
  125. package/dropdown/Dropdown.js +231 -303
  126. package/dropdown/Dropdown.stories.tsx +235 -57
  127. package/dropdown/Dropdown.test.js +575 -165
  128. package/dropdown/DropdownMenu.d.ts +4 -0
  129. package/dropdown/DropdownMenu.js +63 -0
  130. package/dropdown/DropdownMenuItem.d.ts +4 -0
  131. package/dropdown/DropdownMenuItem.js +70 -0
  132. package/dropdown/types.d.ts +35 -19
  133. package/file-input/FileInput.accessibility.test.js +160 -0
  134. package/file-input/FileInput.d.ts +2 -2
  135. package/file-input/FileInput.js +246 -393
  136. package/file-input/FileInput.stories.tsx +123 -12
  137. package/file-input/FileInput.test.js +292 -367
  138. package/file-input/FileItem.d.ts +4 -14
  139. package/file-input/FileItem.js +57 -120
  140. package/file-input/types.d.ts +25 -8
  141. package/flex/Flex.d.ts +4 -0
  142. package/flex/Flex.js +57 -0
  143. package/flex/Flex.stories.tsx +112 -0
  144. package/flex/types.d.ts +97 -0
  145. package/footer/Footer.accessibility.test.js +117 -0
  146. package/footer/Footer.d.ts +1 -1
  147. package/footer/Footer.js +75 -118
  148. package/footer/Footer.stories.tsx +87 -21
  149. package/footer/Footer.test.js +33 -57
  150. package/footer/Icons.d.ts +3 -2
  151. package/footer/Icons.js +67 -8
  152. package/footer/types.d.ts +26 -27
  153. package/grid/Grid.d.ts +7 -0
  154. package/grid/Grid.js +76 -0
  155. package/grid/Grid.stories.tsx +219 -0
  156. package/grid/types.d.ts +115 -0
  157. package/grid/types.js +5 -0
  158. package/header/Header.accessibility.test.js +84 -0
  159. package/header/Header.d.ts +4 -3
  160. package/header/Header.js +93 -184
  161. package/header/Header.stories.tsx +118 -39
  162. package/header/Header.test.js +13 -26
  163. package/header/Icons.d.ts +2 -2
  164. package/header/Icons.js +4 -9
  165. package/header/types.d.ts +7 -21
  166. package/heading/Heading.accessibility.test.js +33 -0
  167. package/heading/Heading.js +10 -32
  168. package/heading/Heading.test.js +71 -88
  169. package/heading/types.d.ts +7 -7
  170. package/icon/Icon.accessibility.test.js +30 -0
  171. package/icon/Icon.d.ts +4 -0
  172. package/icon/Icon.js +33 -0
  173. package/icon/Icon.stories.tsx +28 -0
  174. package/icon/types.d.ts +4 -0
  175. package/icon/types.js +5 -0
  176. package/image/Image.accessibility.test.js +56 -0
  177. package/image/Image.d.ts +4 -0
  178. package/image/Image.js +70 -0
  179. package/image/Image.stories.tsx +129 -0
  180. package/image/types.d.ts +72 -0
  181. package/image/types.js +5 -0
  182. package/inset/Inset.js +14 -55
  183. package/inset/Inset.stories.tsx +37 -36
  184. package/inset/types.d.ts +2 -2
  185. package/layout/ApplicationLayout.d.ts +16 -6
  186. package/layout/ApplicationLayout.js +85 -166
  187. package/layout/ApplicationLayout.stories.tsx +85 -94
  188. package/layout/Icons.d.ts +7 -0
  189. package/layout/Icons.js +41 -48
  190. package/layout/types.d.ts +19 -35
  191. package/link/Link.accessibility.test.js +112 -0
  192. package/link/Link.d.ts +2 -2
  193. package/link/Link.js +46 -91
  194. package/link/Link.stories.tsx +74 -7
  195. package/link/Link.test.js +24 -44
  196. package/link/types.d.ts +14 -15
  197. package/main.d.ts +15 -13
  198. package/main.js +71 -101
  199. package/nav-tabs/NavTabs.accessibility.test.js +44 -0
  200. package/nav-tabs/NavTabs.d.ts +7 -0
  201. package/nav-tabs/NavTabs.js +93 -0
  202. package/nav-tabs/NavTabs.stories.tsx +279 -0
  203. package/nav-tabs/NavTabs.test.js +75 -0
  204. package/nav-tabs/NavTabsContext.d.ts +3 -0
  205. package/nav-tabs/NavTabsContext.js +8 -0
  206. package/nav-tabs/Tab.d.ts +4 -0
  207. package/nav-tabs/Tab.js +117 -0
  208. package/nav-tabs/types.d.ts +52 -0
  209. package/nav-tabs/types.js +5 -0
  210. package/number-input/NumberInput.accessibility.test.js +228 -0
  211. package/number-input/NumberInput.js +46 -36
  212. package/number-input/NumberInput.stories.tsx +42 -26
  213. package/number-input/NumberInput.test.js +860 -377
  214. package/number-input/NumberInputContext.d.ts +3 -4
  215. package/number-input/NumberInputContext.js +3 -14
  216. package/number-input/types.d.ts +18 -6
  217. package/package.json +49 -51
  218. package/paginator/Paginator.accessibility.test.js +79 -0
  219. package/paginator/Paginator.js +38 -96
  220. package/paginator/Paginator.stories.tsx +24 -0
  221. package/paginator/Paginator.test.js +280 -211
  222. package/paginator/types.d.ts +3 -3
  223. package/paragraph/Paragraph.accessibility.test.js +28 -0
  224. package/paragraph/Paragraph.d.ts +5 -0
  225. package/paragraph/Paragraph.js +22 -0
  226. package/paragraph/Paragraph.stories.tsx +27 -0
  227. package/password-input/PasswordInput.accessibility.test.js +153 -0
  228. package/password-input/PasswordInput.js +56 -123
  229. package/password-input/PasswordInput.stories.tsx +1 -33
  230. package/password-input/PasswordInput.test.js +160 -143
  231. package/password-input/types.d.ts +9 -8
  232. package/progress-bar/ProgressBar.accessibility.test.js +35 -0
  233. package/progress-bar/ProgressBar.js +65 -91
  234. package/progress-bar/ProgressBar.stories.tsx +93 -0
  235. package/progress-bar/ProgressBar.test.js +72 -44
  236. package/progress-bar/types.d.ts +3 -3
  237. package/quick-nav/QuickNav.accessibility.test.js +57 -0
  238. package/quick-nav/QuickNav.js +71 -41
  239. package/quick-nav/QuickNav.stories.tsx +146 -27
  240. package/quick-nav/types.d.ts +10 -10
  241. package/radio-group/Radio.d.ts +1 -1
  242. package/radio-group/Radio.js +59 -76
  243. package/radio-group/RadioGroup.accessibility.test.js +97 -0
  244. package/radio-group/RadioGroup.js +71 -116
  245. package/radio-group/RadioGroup.stories.tsx +132 -18
  246. package/radio-group/RadioGroup.test.js +518 -457
  247. package/radio-group/types.d.ts +10 -10
  248. package/resultset-table/Icons.d.ts +7 -0
  249. package/resultset-table/Icons.js +47 -0
  250. package/resultset-table/ResultsetTable.accessibility.test.js +274 -0
  251. package/resultset-table/ResultsetTable.d.ts +7 -0
  252. package/resultset-table/ResultsetTable.js +170 -0
  253. package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +156 -30
  254. package/resultset-table/ResultsetTable.test.js +381 -0
  255. package/{resultsetTable → resultset-table}/types.d.ts +44 -11
  256. package/resultset-table/types.js +5 -0
  257. package/select/Listbox.d.ts +1 -1
  258. package/select/Listbox.js +50 -53
  259. package/select/Option.js +33 -55
  260. package/select/Select.accessibility.test.js +217 -0
  261. package/select/Select.js +194 -251
  262. package/select/Select.stories.tsx +512 -187
  263. package/select/Select.test.js +1962 -1743
  264. package/select/types.d.ts +17 -21
  265. package/sidenav/Sidenav.accessibility.test.js +59 -0
  266. package/sidenav/Sidenav.d.ts +6 -5
  267. package/sidenav/Sidenav.js +136 -71
  268. package/sidenav/Sidenav.stories.tsx +246 -151
  269. package/sidenav/Sidenav.test.js +26 -45
  270. package/sidenav/SidenavContext.d.ts +5 -0
  271. package/sidenav/SidenavContext.js +13 -0
  272. package/sidenav/types.d.ts +52 -26
  273. package/slider/Slider.accessibility.test.js +104 -0
  274. package/slider/Slider.d.ts +2 -2
  275. package/slider/Slider.js +148 -181
  276. package/slider/Slider.test.js +185 -81
  277. package/slider/types.d.ts +7 -3
  278. package/spinner/Spinner.accessibility.test.js +96 -0
  279. package/spinner/Spinner.js +31 -75
  280. package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +53 -27
  281. package/spinner/Spinner.test.js +26 -35
  282. package/spinner/types.d.ts +3 -3
  283. package/status-light/StatusLight.accessibility.test.js +157 -0
  284. package/status-light/StatusLight.d.ts +4 -0
  285. package/status-light/StatusLight.js +51 -0
  286. package/status-light/StatusLight.stories.tsx +74 -0
  287. package/status-light/StatusLight.test.js +25 -0
  288. package/status-light/types.d.ts +17 -0
  289. package/status-light/types.js +5 -0
  290. package/switch/Switch.accessibility.test.js +89 -0
  291. package/switch/Switch.d.ts +2 -2
  292. package/switch/Switch.js +147 -125
  293. package/switch/Switch.stories.tsx +37 -60
  294. package/switch/Switch.test.js +138 -56
  295. package/switch/types.d.ts +7 -3
  296. package/table/DropdownTheme.js +62 -0
  297. package/table/Table.accessibility.test.js +82 -0
  298. package/table/Table.d.ts +6 -2
  299. package/table/Table.js +78 -35
  300. package/table/Table.stories.tsx +651 -0
  301. package/table/Table.test.js +95 -8
  302. package/table/types.d.ts +34 -6
  303. package/tabs/Tab.d.ts +4 -0
  304. package/tabs/Tab.js +117 -0
  305. package/tabs/Tabs.accessibility.test.js +56 -0
  306. package/tabs/Tabs.js +303 -141
  307. package/tabs/Tabs.stories.tsx +118 -6
  308. package/tabs/Tabs.test.js +213 -77
  309. package/tabs/types.d.ts +30 -20
  310. package/tag/Tag.accessibility.test.js +69 -0
  311. package/tag/Tag.js +35 -67
  312. package/tag/Tag.stories.tsx +18 -8
  313. package/tag/Tag.test.js +18 -37
  314. package/tag/types.d.ts +9 -9
  315. package/text-input/Suggestion.d.ts +4 -0
  316. package/text-input/Suggestion.js +67 -0
  317. package/text-input/Suggestions.d.ts +4 -0
  318. package/text-input/Suggestions.js +86 -0
  319. package/text-input/TextInput.accessibility.test.js +321 -0
  320. package/text-input/TextInput.js +326 -555
  321. package/text-input/TextInput.stories.tsx +266 -275
  322. package/text-input/TextInput.test.js +1420 -1376
  323. package/text-input/types.d.ts +53 -14
  324. package/textarea/Textarea.accessibility.test.js +155 -0
  325. package/textarea/Textarea.js +79 -131
  326. package/textarea/Textarea.stories.tsx +174 -0
  327. package/textarea/Textarea.test.js +152 -183
  328. package/textarea/types.d.ts +10 -6
  329. package/toggle-group/ToggleGroup.accessibility.test.js +107 -0
  330. package/toggle-group/ToggleGroup.d.ts +2 -2
  331. package/toggle-group/ToggleGroup.js +94 -107
  332. package/toggle-group/ToggleGroup.stories.tsx +52 -7
  333. package/toggle-group/ToggleGroup.test.js +69 -88
  334. package/toggle-group/types.d.ts +28 -19
  335. package/typography/Typography.accessibility.test.js +339 -0
  336. package/typography/Typography.d.ts +4 -0
  337. package/typography/Typography.js +23 -0
  338. package/typography/Typography.stories.tsx +198 -0
  339. package/typography/types.d.ts +18 -0
  340. package/typography/types.js +5 -0
  341. package/useTheme.d.ts +1146 -1
  342. package/useTheme.js +2 -9
  343. package/useTranslatedLabels.d.ts +85 -0
  344. package/useTranslatedLabels.js +14 -0
  345. package/utils/BaseTypography.d.ts +21 -0
  346. package/utils/BaseTypography.js +94 -0
  347. package/utils/FocusLock.d.ts +13 -0
  348. package/utils/FocusLock.js +124 -0
  349. package/wizard/Wizard.accessibility.test.js +55 -0
  350. package/wizard/Wizard.js +59 -102
  351. package/wizard/Wizard.stories.tsx +59 -1
  352. package/wizard/Wizard.test.js +54 -81
  353. package/wizard/types.d.ts +9 -9
  354. package/card/ice-cream.jpg +0 -0
  355. package/common/OpenSans.css +0 -81
  356. package/common/RequiredComponent.js +0 -32
  357. package/common/fonts/OpenSans-Bold.ttf +0 -0
  358. package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  359. package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  360. package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  361. package/common/fonts/OpenSans-Italic.ttf +0 -0
  362. package/common/fonts/OpenSans-Light.ttf +0 -0
  363. package/common/fonts/OpenSans-LightItalic.ttf +0 -0
  364. package/common/fonts/OpenSans-Regular.ttf +0 -0
  365. package/common/fonts/OpenSans-SemiBold.ttf +0 -0
  366. package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  367. package/list/List.d.ts +0 -4
  368. package/list/List.js +0 -47
  369. package/list/List.stories.tsx +0 -95
  370. package/list/types.d.ts +0 -7
  371. package/number-input/numberInputContextTypes.d.ts +0 -19
  372. package/paginator/Icons.js +0 -66
  373. package/progress-bar/ProgressBar.stories.jsx +0 -58
  374. package/radio/Radio.d.ts +0 -4
  375. package/radio/Radio.js +0 -173
  376. package/radio/Radio.stories.tsx +0 -192
  377. package/radio/Radio.test.js +0 -71
  378. package/radio/types.d.ts +0 -54
  379. package/resultsetTable/ResultsetTable.d.ts +0 -4
  380. package/resultsetTable/ResultsetTable.js +0 -254
  381. package/resultsetTable/ResultsetTable.test.js +0 -306
  382. package/row/Row.d.ts +0 -3
  383. package/row/Row.js +0 -127
  384. package/row/Row.stories.tsx +0 -237
  385. package/row/types.d.ts +0 -28
  386. package/select/Icons.d.ts +0 -10
  387. package/select/Icons.js +0 -93
  388. package/slider/Slider.stories.tsx +0 -177
  389. package/stack/Stack.d.ts +0 -3
  390. package/stack/Stack.js +0 -97
  391. package/stack/Stack.stories.tsx +0 -164
  392. package/stack/types.d.ts +0 -24
  393. package/table/Table.stories.jsx +0 -277
  394. package/text/Text.d.ts +0 -7
  395. package/text/Text.js +0 -30
  396. package/text/Text.stories.tsx +0 -19
  397. package/textarea/Textarea.stories.jsx +0 -157
  398. /package/{list → action-icon}/types.js +0 -0
  399. /package/{radio → bulleted-list}/types.js +0 -0
  400. /package/{resultsetTable → container}/types.js +0 -0
  401. /package/{row → contextual-menu}/types.js +0 -0
  402. /package/{stack → divider}/types.js +0 -0
  403. /package/{number-input/numberInputContextTypes.js → flex/types.js} +0 -0
package/textarea/Textarea.stories.tsx ADDED
@@ -0,0 +1,174 @@
1
+ import React from "react";
2
+ import DxcTextarea from "./Textarea";
3
+ import Title from "../../.storybook/components/Title";
4
+ import ExampleContainer from "../../.storybook/components/ExampleContainer";
5
+ import { HalstackProvider } from "../HalstackContext";
6
+
7
+ export default {
8
+ title: "Textarea",
9
+ component: DxcTextarea,
10
+ };
11
+
12
+ const opinionatedTheme = {
13
+ textarea: {
14
+ fontColor: "#000000",
15
+ hoverBorderColor: "#a46ede",
16
+ },
17
+ };
18
+
19
+ export const Chromatic = () => (
20
+ <>
21
+ <ExampleContainer pseudoState="pseudo-hover">
22
+ <Title title="Hovered" theme="light" level={4} />
23
+ <DxcTextarea label="Hovered" />
24
+ </ExampleContainer>
25
+ <ExampleContainer pseudoState="pseudo-focus">
26
+ <Title title="Focused" theme="light" level={4} />
27
+ <DxcTextarea label="Focused" />
28
+ </ExampleContainer>
29
+ <ExampleContainer>
30
+ <Title title="Disabled" theme="light" level={4} />
31
+ <DxcTextarea label="Disabled" optional helperText="Sample text" placeholder="Enter your text here..." disabled />
32
+ </ExampleContainer>
33
+ <ExampleContainer>
34
+ <Title title="Disabled with value" theme="light" level={4} />
35
+ <DxcTextarea label="Disabled" defaultValue="Example text" disabled />
36
+ </ExampleContainer>
37
+ <ExampleContainer>
38
+ <Title title="Read only" theme="light" level={4} />
39
+ <DxcTextarea label="Label" readOnly defaultValue="Example text" verticalGrow="manual" />
40
+ </ExampleContainer>
41
+ <ExampleContainer pseudoState="pseudo-hover">
42
+ <Title title="Hovered read only" theme="light" level={4} />
43
+ <DxcTextarea label="Label" readOnly defaultValue="Example text" verticalGrow="manual" />
44
+ </ExampleContainer>
45
+ <ExampleContainer>
46
+ <Title title="With error" theme="light" level={4} />
47
+ <DxcTextarea
48
+ label="Textarea with error"
49
+ helperText="Helper text"
50
+ placeholder="Enter your text here..."
51
+ error="Error message."
52
+ />
53
+ </ExampleContainer>
54
+ <ExampleContainer pseudoState="pseudo-hover">
55
+ <Title title="Hovered with error" theme="light" level={4} />
56
+ <DxcTextarea
57
+ label="Hovered textarea with error"
58
+ helperText="Helper text"
59
+ placeholder="Enter your text here..."
60
+ error="Error message."
61
+ />
62
+ </ExampleContainer>
63
+ <ExampleContainer>
64
+ <Title title="Helper text and optional with value" theme="light" level={4} />
65
+ <DxcTextarea label="Helper & optional" defaultValue="Some text" helperText="Sample text" optional />
66
+ </ExampleContainer>
67
+ <ExampleContainer>
68
+ <Title title="Resizable" theme="light" level={4} />
69
+ <DxcTextarea label="With resizer" helperText="Helper text" verticalGrow="manual" />
70
+ </ExampleContainer>
71
+ <ExampleContainer>
72
+ <Title title="Grow manual" theme="light" level={4} />
73
+ <DxcTextarea
74
+ label="Manual vertical grow"
75
+ verticalGrow="manual"
76
+ defaultValue="Long textttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt"
77
+ />
78
+ </ExampleContainer>
79
+ <Title title="Sizes" theme="light" level={2} />
80
+ <ExampleContainer>
81
+ <DxcTextarea label="Small" size="small" />
82
+ </ExampleContainer>
83
+ <ExampleContainer>
84
+ <DxcTextarea label="Medium" size="medium" />
85
+ </ExampleContainer>
86
+ <ExampleContainer>
87
+ <DxcTextarea label="Large" size="large" />
88
+ </ExampleContainer>
89
+ <ExampleContainer>
90
+ <DxcTextarea label="Fill parent" size="fillParent" />
91
+ </ExampleContainer>
92
+ <Title title="Margins" theme="light" level={2} />
93
+ <ExampleContainer>
94
+ <Title title="Xxsmall margin" theme="light" level={4} />
95
+ <DxcTextarea label="Xxsmall" margin="xxsmall" />
96
+ </ExampleContainer>
97
+ <ExampleContainer>
98
+ <Title title="Xsmall margin" theme="light" level={4} />
99
+ <DxcTextarea label="xsmall" margin="xsmall" />
100
+ </ExampleContainer>
101
+ <ExampleContainer>
102
+ <Title title="Small margin" theme="light" level={4} />
103
+ <DxcTextarea label="small" margin="small" />
104
+ </ExampleContainer>
105
+ <ExampleContainer>
106
+ <Title title="Medium margin" theme="light" level={4} />
107
+ <DxcTextarea label="medium" margin="medium" />
108
+ </ExampleContainer>
109
+ <ExampleContainer>
110
+ <Title title="Large margin" theme="light" level={4} />
111
+ <DxcTextarea label="Large" margin="large" />
112
+ </ExampleContainer>
113
+ <ExampleContainer>
114
+ <Title title="Xlarge margin" theme="light" level={4} />
115
+ <DxcTextarea label="Xlarge" margin="xlarge" />
116
+ </ExampleContainer>
117
+ <ExampleContainer>
118
+ <Title title="Xxlarge margin" theme="light" level={4} />
119
+ <DxcTextarea label="Xxlarge" margin="xxlarge" />
120
+ </ExampleContainer>
121
+ <Title title="Opinionated theme" theme="light" level={2} />
122
+ <ExampleContainer pseudoState="pseudo-hover">
123
+ <Title title="Hovered" theme="light" level={4} />
124
+ <HalstackProvider theme={opinionatedTheme}>
125
+ <DxcTextarea label="Hovered" helperText="Sample text" placeholder="Placeholder" />
126
+ </HalstackProvider>
127
+ </ExampleContainer>
128
+ <ExampleContainer pseudoState="pseudo-focus">
129
+ <Title title="Focused" theme="light" level={4} />
130
+ <HalstackProvider theme={opinionatedTheme}>
131
+ <DxcTextarea label="Focused" helperText="Sample text" />
132
+ </HalstackProvider>
133
+ </ExampleContainer>
134
+ <ExampleContainer>
135
+ <Title title="Disabled" theme="light" level={4} />
136
+ <HalstackProvider theme={opinionatedTheme}>
137
+ <DxcTextarea
138
+ label="Disabled"
139
+ optional
140
+ helperText="Sample text"
141
+ placeholder="Enter your text here..."
142
+ disabled
143
+ />
144
+ </HalstackProvider>
145
+ </ExampleContainer>
146
+ <ExampleContainer>
147
+ <Title title="Disabled with value" theme="light" level={4} />
148
+ <HalstackProvider theme={opinionatedTheme}>
149
+ <DxcTextarea label="Disabled" helperText="Sample text" defaultValue="Example text" disabled />
150
+ </HalstackProvider>
151
+ </ExampleContainer>
152
+ <ExampleContainer>
153
+ <Title title="With error" theme="light" level={4} />
154
+ <HalstackProvider theme={opinionatedTheme}>
155
+ <DxcTextarea
156
+ label="Textarea with error"
157
+ helperText="Helper text"
158
+ placeholder="Enter your text here..."
159
+ error="Error message."
160
+ />
161
+ </HalstackProvider>
162
+ </ExampleContainer>
163
+ <ExampleContainer>
164
+ <Title title="Grow manual" theme="light" level={4} />{" "}
165
+ <HalstackProvider theme={opinionatedTheme}>
166
+ <DxcTextarea
167
+ label="Manual vertical grow"
168
+ verticalGrow="manual"
169
+ defaultValue="Long textttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt"
170
+ />
171
+ </HalstackProvider>
172
+ </ExampleContainer>
173
+ </>
174
+ );