@dxc-technology/halstack-react 0.0.0-22220e6 → 0.0.0-2289057

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 +1 -10
  2. package/BackgroundColorContext.js +5 -22
  3. package/HalstackContext.d.ts +1249 -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 +116 -181
  8. package/accordion/Accordion.stories.tsx +103 -127
  9. package/accordion/Accordion.test.js +32 -33
  10. package/accordion/types.d.ts +9 -16
  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 +55 -90
  15. package/accordion-group/AccordionGroupAccordion.d.ts +4 -0
  16. package/accordion-group/AccordionGroupAccordion.js +31 -0
  17. package/accordion-group/types.d.ts +15 -16
  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 +29 -46
  26. package/alert/types.d.ts +5 -5
  27. package/badge/Badge.d.ts +1 -1
  28. package/badge/Badge.js +141 -41
  29. package/badge/Badge.stories.tsx +210 -0
  30. package/badge/Badge.test.js +30 -0
  31. package/badge/types.d.ts +52 -2
  32. package/bleed/Bleed.js +14 -55
  33. package/bleed/Bleed.stories.tsx +95 -95
  34. package/bleed/types.d.ts +26 -2
  35. package/box/Box.d.ts +1 -1
  36. package/box/Box.js +30 -81
  37. package/box/Box.stories.tsx +38 -51
  38. package/box/Box.test.js +2 -7
  39. package/box/types.d.ts +3 -14
  40. package/bulleted-list/BulletedList.d.ts +7 -0
  41. package/bulleted-list/BulletedList.js +89 -0
  42. package/bulleted-list/BulletedList.stories.tsx +115 -0
  43. package/bulleted-list/types.d.ts +38 -0
  44. package/button/Button.d.ts +1 -1
  45. package/button/Button.js +62 -113
  46. package/button/Button.stories.tsx +160 -90
  47. package/button/Button.test.js +20 -17
  48. package/button/types.d.ts +12 -8
  49. package/card/Card.d.ts +1 -1
  50. package/card/Card.js +58 -102
  51. package/card/Card.stories.tsx +12 -42
  52. package/card/Card.test.js +11 -22
  53. package/card/types.d.ts +6 -11
  54. package/checkbox/Checkbox.d.ts +2 -2
  55. package/checkbox/Checkbox.js +144 -182
  56. package/checkbox/Checkbox.stories.tsx +166 -136
  57. package/checkbox/Checkbox.test.js +163 -29
  58. package/checkbox/types.d.ts +18 -6
  59. package/chip/Chip.js +39 -79
  60. package/chip/Chip.stories.tsx +121 -26
  61. package/chip/Chip.test.js +16 -31
  62. package/chip/types.d.ts +4 -4
  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 +1395 -0
  69. package/common/variables.js +1030 -1136
  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/contextual-menu/ContextualMenu.d.ts +7 -0
  75. package/contextual-menu/ContextualMenu.js +71 -0
  76. package/contextual-menu/ContextualMenu.stories.tsx +182 -0
  77. package/contextual-menu/ContextualMenu.test.js +71 -0
  78. package/contextual-menu/MenuItemAction.d.ts +4 -0
  79. package/contextual-menu/MenuItemAction.js +46 -0
  80. package/contextual-menu/types.d.ts +22 -0
  81. package/date-input/Calendar.d.ts +4 -0
  82. package/date-input/Calendar.js +214 -0
  83. package/date-input/DateInput.js +171 -306
  84. package/date-input/DateInput.stories.tsx +203 -56
  85. package/date-input/DateInput.test.js +708 -369
  86. package/date-input/DatePicker.d.ts +4 -0
  87. package/date-input/DatePicker.js +115 -0
  88. package/date-input/Icons.d.ts +6 -0
  89. package/date-input/Icons.js +58 -0
  90. package/date-input/YearPicker.d.ts +4 -0
  91. package/date-input/YearPicker.js +100 -0
  92. package/date-input/types.d.ts +86 -22
  93. package/dialog/Dialog.d.ts +1 -1
  94. package/dialog/Dialog.js +68 -130
  95. package/dialog/Dialog.stories.tsx +320 -167
  96. package/dialog/Dialog.test.js +287 -20
  97. package/dialog/types.d.ts +18 -25
  98. package/dropdown/Dropdown.d.ts +1 -1
  99. package/dropdown/Dropdown.js +248 -307
  100. package/dropdown/Dropdown.stories.tsx +245 -56
  101. package/dropdown/Dropdown.test.js +575 -165
  102. package/dropdown/DropdownMenu.d.ts +4 -0
  103. package/dropdown/DropdownMenu.js +63 -0
  104. package/dropdown/DropdownMenuItem.d.ts +4 -0
  105. package/dropdown/DropdownMenuItem.js +67 -0
  106. package/dropdown/types.d.ts +32 -14
  107. package/file-input/FileInput.d.ts +2 -2
  108. package/file-input/FileInput.js +246 -357
  109. package/file-input/FileInput.stories.tsx +123 -12
  110. package/file-input/FileInput.test.js +369 -367
  111. package/file-input/FileItem.d.ts +4 -14
  112. package/file-input/FileItem.js +50 -99
  113. package/file-input/types.d.ts +25 -8
  114. package/flex/Flex.d.ts +4 -0
  115. package/flex/Flex.js +57 -0
  116. package/flex/Flex.stories.tsx +112 -0
  117. package/flex/types.d.ts +97 -0
  118. package/footer/Footer.d.ts +1 -1
  119. package/footer/Footer.js +70 -190
  120. package/footer/Footer.stories.tsx +60 -19
  121. package/footer/Footer.test.js +33 -57
  122. package/footer/Icons.d.ts +3 -2
  123. package/footer/Icons.js +67 -8
  124. package/footer/types.d.ts +25 -26
  125. package/grid/Grid.d.ts +7 -0
  126. package/grid/Grid.js +76 -0
  127. package/grid/Grid.stories.tsx +219 -0
  128. package/grid/types.d.ts +115 -0
  129. package/header/Header.d.ts +4 -3
  130. package/header/Header.js +99 -203
  131. package/header/Header.stories.tsx +152 -63
  132. package/header/Header.test.js +31 -28
  133. package/header/Icons.d.ts +2 -2
  134. package/header/Icons.js +4 -9
  135. package/header/types.d.ts +5 -19
  136. package/heading/Heading.js +10 -32
  137. package/heading/Heading.test.js +71 -88
  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 +129 -0
  142. package/image/types.d.ts +72 -0
  143. package/image/types.js +5 -0
  144. package/inset/Inset.js +14 -55
  145. package/inset/Inset.stories.tsx +37 -36
  146. package/inset/types.d.ts +26 -2
  147. package/layout/ApplicationLayout.d.ts +16 -6
  148. package/layout/ApplicationLayout.js +84 -181
  149. package/layout/ApplicationLayout.stories.tsx +85 -94
  150. package/layout/Icons.d.ts +8 -0
  151. package/layout/Icons.js +51 -48
  152. package/layout/SidenavContext.d.ts +5 -0
  153. package/layout/SidenavContext.js +13 -0
  154. package/layout/types.d.ts +19 -35
  155. package/link/Link.d.ts +3 -2
  156. package/link/Link.js +61 -99
  157. package/link/Link.stories.tsx +155 -53
  158. package/link/Link.test.js +25 -53
  159. package/link/types.d.ts +15 -31
  160. package/main.d.ts +15 -13
  161. package/main.js +72 -101
  162. package/nav-tabs/NavTabs.d.ts +8 -0
  163. package/nav-tabs/NavTabs.js +93 -0
  164. package/nav-tabs/NavTabs.stories.tsx +276 -0
  165. package/nav-tabs/NavTabs.test.js +76 -0
  166. package/nav-tabs/Tab.d.ts +4 -0
  167. package/nav-tabs/Tab.js +118 -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 +48 -45
  172. package/number-input/NumberInput.stories.tsx +44 -28
  173. package/number-input/NumberInput.test.js +862 -381
  174. package/number-input/types.d.ts +28 -15
  175. package/package.json +46 -47
  176. package/paginator/Icons.d.ts +5 -0
  177. package/paginator/Icons.js +21 -47
  178. package/paginator/Paginator.js +34 -91
  179. package/paginator/Paginator.stories.tsx +24 -0
  180. package/paginator/Paginator.test.js +280 -211
  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 +57 -123
  188. package/password-input/PasswordInput.stories.tsx +1 -33
  189. package/password-input/PasswordInput.test.js +162 -147
  190. package/password-input/types.d.ts +21 -17
  191. package/progress-bar/ProgressBar.js +65 -91
  192. package/progress-bar/ProgressBar.stories.tsx +93 -0
  193. package/progress-bar/ProgressBar.test.js +72 -44
  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 +1 -1
  201. package/radio-group/Radio.js +59 -76
  202. package/radio-group/RadioGroup.js +72 -116
  203. package/radio-group/RadioGroup.stories.tsx +135 -17
  204. package/radio-group/RadioGroup.test.js +529 -467
  205. package/radio-group/types.d.ts +86 -9
  206. package/resultset-table/Icons.d.ts +7 -0
  207. package/resultset-table/Icons.js +47 -0
  208. package/resultset-table/ResultsetTable.d.ts +7 -0
  209. package/resultset-table/ResultsetTable.js +166 -0
  210. package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +152 -30
  211. package/resultset-table/ResultsetTable.test.js +371 -0
  212. package/{resultsetTable → resultset-table}/types.d.ts +13 -7
  213. package/resultset-table/types.js +5 -0
  214. package/select/Icons.d.ts +7 -7
  215. package/select/Icons.js +1 -5
  216. package/select/Listbox.d.ts +4 -0
  217. package/select/Listbox.js +143 -0
  218. package/select/Option.js +27 -50
  219. package/select/Select.js +212 -362
  220. package/select/Select.stories.tsx +534 -145
  221. package/select/Select.test.js +2009 -1539
  222. package/select/types.d.ts +53 -27
  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 +131 -71
  227. package/sidenav/Sidenav.stories.tsx +251 -151
  228. package/sidenav/Sidenav.test.js +26 -45
  229. package/sidenav/types.d.ts +52 -26
  230. package/slider/Slider.d.ts +2 -2
  231. package/slider/Slider.js +148 -180
  232. package/slider/Slider.test.js +198 -73
  233. package/slider/types.d.ts +11 -3
  234. package/spinner/Spinner.js +31 -75
  235. package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +53 -27
  236. package/spinner/Spinner.test.js +26 -35
  237. package/spinner/types.d.ts +3 -3
  238. package/status-light/StatusLight.d.ts +4 -0
  239. package/status-light/StatusLight.js +51 -0
  240. package/status-light/StatusLight.stories.tsx +74 -0
  241. package/status-light/StatusLight.test.js +25 -0
  242. package/status-light/types.d.ts +17 -0
  243. package/status-light/types.js +5 -0
  244. package/switch/Switch.d.ts +2 -2
  245. package/switch/Switch.js +149 -114
  246. package/switch/Switch.stories.tsx +44 -67
  247. package/switch/Switch.test.js +146 -39
  248. package/switch/types.d.ts +13 -5
  249. package/table/DropdownTheme.js +62 -0
  250. package/table/Table.d.ts +6 -2
  251. package/table/Table.js +87 -35
  252. package/table/Table.stories.tsx +658 -0
  253. package/table/Table.test.js +95 -8
  254. package/table/types.d.ts +48 -6
  255. package/tabs/Tab.d.ts +4 -0
  256. package/tabs/Tab.js +116 -0
  257. package/tabs/Tabs.d.ts +1 -1
  258. package/tabs/Tabs.js +316 -145
  259. package/tabs/Tabs.stories.tsx +120 -14
  260. package/tabs/Tabs.test.js +238 -67
  261. package/tabs/types.d.ts +29 -15
  262. package/tag/Tag.js +41 -78
  263. package/tag/Tag.stories.tsx +25 -8
  264. package/tag/Tag.test.js +20 -31
  265. package/tag/types.d.ts +7 -7
  266. package/text-input/Icons.d.ts +8 -0
  267. package/text-input/Icons.js +56 -0
  268. package/text-input/Suggestion.d.ts +4 -0
  269. package/text-input/Suggestion.js +67 -0
  270. package/text-input/Suggestions.d.ts +4 -0
  271. package/text-input/Suggestions.js +84 -0
  272. package/text-input/TextInput.js +325 -556
  273. package/text-input/TextInput.stories.tsx +272 -281
  274. package/text-input/TextInput.test.js +1442 -1377
  275. package/text-input/types.d.ts +70 -24
  276. package/textarea/Textarea.js +82 -134
  277. package/textarea/Textarea.stories.tsx +174 -0
  278. package/textarea/Textarea.test.js +168 -198
  279. package/textarea/types.d.ts +27 -16
  280. package/toggle-group/ToggleGroup.d.ts +2 -2
  281. package/toggle-group/ToggleGroup.js +92 -105
  282. package/toggle-group/ToggleGroup.stories.tsx +53 -8
  283. package/toggle-group/ToggleGroup.test.js +78 -66
  284. package/toggle-group/types.d.ts +34 -17
  285. package/typography/Typography.d.ts +4 -0
  286. package/typography/Typography.js +23 -0
  287. package/typography/Typography.stories.tsx +198 -0
  288. package/typography/types.d.ts +18 -0
  289. package/typography/types.js +5 -0
  290. package/useTheme.d.ts +1147 -1
  291. package/useTheme.js +4 -11
  292. package/useTranslatedLabels.d.ts +85 -0
  293. package/useTranslatedLabels.js +14 -0
  294. package/utils/BaseTypography.d.ts +21 -0
  295. package/utils/BaseTypography.js +94 -0
  296. package/utils/FocusLock.d.ts +13 -0
  297. package/utils/FocusLock.js +124 -0
  298. package/wizard/Wizard.d.ts +1 -1
  299. package/wizard/Wizard.js +70 -101
  300. package/wizard/Wizard.stories.tsx +48 -19
  301. package/wizard/Wizard.test.js +73 -87
  302. package/wizard/types.d.ts +12 -8
  303. package/ThemeContext.d.ts +0 -10
  304. package/ThemeContext.js +0 -243
  305. package/card/ice-cream.jpg +0 -0
  306. package/common/RequiredComponent.js +0 -32
  307. package/list/List.d.ts +0 -4
  308. package/list/List.js +0 -47
  309. package/list/List.stories.tsx +0 -95
  310. package/list/types.d.ts +0 -7
  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/Radio.test.js +0 -71
  319. package/radio/types.d.ts +0 -54
  320. package/resultsetTable/ResultsetTable.d.ts +0 -4
  321. package/resultsetTable/ResultsetTable.js +0 -254
  322. package/resultsetTable/ResultsetTable.test.js +0 -306
  323. package/row/Row.d.ts +0 -3
  324. package/row/Row.js +0 -127
  325. package/row/Row.stories.tsx +0 -237
  326. package/row/types.d.ts +0 -10
  327. package/slider/Slider.stories.tsx +0 -177
  328. package/stack/Stack.d.ts +0 -3
  329. package/stack/Stack.js +0 -97
  330. package/stack/Stack.stories.tsx +0 -164
  331. package/stack/types.d.ts +0 -9
  332. package/table/Table.stories.jsx +0 -277
  333. package/text/Text.d.ts +0 -7
  334. package/text/Text.js +0 -30
  335. package/text/Text.stories.tsx +0 -19
  336. package/textarea/Textarea.stories.jsx +0 -157
  337. /package/{list → action-icon}/types.js +0 -0
  338. /package/{radio → bulleted-list}/types.js +0 -0
  339. /package/{resultsetTable → container}/types.js +0 -0
  340. /package/{row → contextual-menu}/types.js +0 -0
  341. /package/{stack → flex}/types.js +0 -0
  342. /package/{number-input/numberInputContextTypes.js → grid/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
+ );