@dxc-technology/halstack-react 0.0.0-891fa95 → 0.0.0-89de434

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 (359) 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 -182
  8. package/accordion/Accordion.stories.tsx +103 -127
  9. package/accordion/Accordion.test.js +25 -41
  10. package/accordion/types.d.ts +5 -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 +2 -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 +142 -174
  56. package/checkbox/Checkbox.stories.tsx +166 -136
  57. package/checkbox/Checkbox.test.js +160 -39
  58. package/checkbox/types.d.ts +14 -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/coreTokens.d.ts +237 -0
  64. package/common/coreTokens.js +184 -0
  65. package/common/utils.d.ts +1 -0
  66. package/common/utils.js +6 -12
  67. package/common/variables.d.ts +1395 -0
  68. package/common/variables.js +1031 -1137
  69. package/container/Container.d.ts +4 -0
  70. package/container/Container.js +194 -0
  71. package/container/Container.stories.tsx +214 -0
  72. package/container/types.d.ts +74 -0
  73. package/contextual-menu/ContextualMenu.d.ts +7 -0
  74. package/contextual-menu/ContextualMenu.js +71 -0
  75. package/contextual-menu/ContextualMenu.stories.tsx +182 -0
  76. package/contextual-menu/ContextualMenu.test.js +71 -0
  77. package/contextual-menu/MenuItemAction.d.ts +4 -0
  78. package/contextual-menu/MenuItemAction.js +46 -0
  79. package/contextual-menu/types.d.ts +22 -0
  80. package/date-input/Calendar.d.ts +4 -0
  81. package/date-input/Calendar.js +214 -0
  82. package/date-input/DateInput.js +167 -298
  83. package/date-input/DateInput.stories.tsx +203 -56
  84. package/date-input/DateInput.test.js +707 -391
  85. package/date-input/DatePicker.d.ts +4 -0
  86. package/date-input/DatePicker.js +115 -0
  87. package/date-input/Icons.d.ts +6 -0
  88. package/date-input/Icons.js +58 -0
  89. package/date-input/YearPicker.d.ts +4 -0
  90. package/date-input/YearPicker.js +100 -0
  91. package/date-input/types.d.ts +84 -24
  92. package/dialog/Dialog.d.ts +1 -1
  93. package/dialog/Dialog.js +68 -130
  94. package/dialog/Dialog.stories.tsx +320 -167
  95. package/dialog/Dialog.test.js +287 -20
  96. package/dialog/types.d.ts +18 -25
  97. package/divider/Divider.d.ts +4 -0
  98. package/divider/Divider.js +36 -0
  99. package/divider/Divider.stories.tsx +223 -0
  100. package/divider/Divider.test.js +38 -0
  101. package/divider/types.d.ts +19 -0
  102. package/dropdown/Dropdown.d.ts +1 -1
  103. package/dropdown/Dropdown.js +248 -307
  104. package/dropdown/Dropdown.stories.tsx +245 -56
  105. package/dropdown/Dropdown.test.js +575 -165
  106. package/dropdown/DropdownMenu.d.ts +4 -0
  107. package/dropdown/DropdownMenu.js +63 -0
  108. package/dropdown/DropdownMenuItem.d.ts +4 -0
  109. package/dropdown/DropdownMenuItem.js +67 -0
  110. package/dropdown/types.d.ts +33 -15
  111. package/file-input/FileInput.d.ts +2 -2
  112. package/file-input/FileInput.js +246 -357
  113. package/file-input/FileInput.stories.tsx +123 -12
  114. package/file-input/FileInput.test.js +369 -367
  115. package/file-input/FileItem.d.ts +4 -14
  116. package/file-input/FileItem.js +50 -99
  117. package/file-input/types.d.ts +25 -8
  118. package/flex/Flex.d.ts +4 -0
  119. package/flex/Flex.js +57 -0
  120. package/flex/Flex.stories.tsx +112 -0
  121. package/flex/types.d.ts +97 -0
  122. package/footer/Footer.d.ts +1 -1
  123. package/footer/Footer.js +70 -190
  124. package/footer/Footer.stories.tsx +60 -19
  125. package/footer/Footer.test.js +33 -57
  126. package/footer/Icons.d.ts +3 -2
  127. package/footer/Icons.js +67 -8
  128. package/footer/types.d.ts +25 -26
  129. package/grid/Grid.d.ts +7 -0
  130. package/grid/Grid.js +76 -0
  131. package/grid/Grid.stories.tsx +219 -0
  132. package/grid/types.d.ts +115 -0
  133. package/grid/types.js +5 -0
  134. package/header/Header.d.ts +4 -3
  135. package/header/Header.js +99 -203
  136. package/header/Header.stories.tsx +152 -63
  137. package/header/Header.test.js +31 -28
  138. package/header/Icons.d.ts +2 -2
  139. package/header/Icons.js +4 -9
  140. package/header/types.d.ts +7 -21
  141. package/heading/Heading.js +10 -32
  142. package/heading/Heading.test.js +71 -88
  143. package/heading/types.d.ts +7 -7
  144. package/icon/Icon.d.ts +4 -0
  145. package/icon/Icon.js +33 -0
  146. package/icon/Icon.stories.tsx +26 -0
  147. package/icon/types.d.ts +4 -0
  148. package/icon/types.js +5 -0
  149. package/image/Image.d.ts +4 -0
  150. package/image/Image.js +70 -0
  151. package/image/Image.stories.tsx +129 -0
  152. package/image/types.d.ts +72 -0
  153. package/image/types.js +5 -0
  154. package/inset/Inset.js +14 -55
  155. package/inset/Inset.stories.tsx +37 -36
  156. package/inset/types.d.ts +2 -2
  157. package/layout/ApplicationLayout.d.ts +16 -6
  158. package/layout/ApplicationLayout.js +84 -181
  159. package/layout/ApplicationLayout.stories.tsx +85 -94
  160. package/layout/Icons.d.ts +8 -0
  161. package/layout/Icons.js +51 -48
  162. package/layout/SidenavContext.d.ts +5 -0
  163. package/layout/SidenavContext.js +13 -0
  164. package/layout/types.d.ts +19 -35
  165. package/link/Link.d.ts +3 -2
  166. package/link/Link.js +61 -99
  167. package/link/Link.stories.tsx +155 -53
  168. package/link/Link.test.js +25 -53
  169. package/link/types.d.ts +15 -31
  170. package/main.d.ts +15 -13
  171. package/main.js +76 -106
  172. package/nav-tabs/NavTabs.d.ts +8 -0
  173. package/nav-tabs/NavTabs.js +93 -0
  174. package/nav-tabs/NavTabs.stories.tsx +276 -0
  175. package/nav-tabs/NavTabs.test.js +76 -0
  176. package/nav-tabs/Tab.d.ts +4 -0
  177. package/nav-tabs/Tab.js +118 -0
  178. package/nav-tabs/types.d.ts +52 -0
  179. package/nav-tabs/types.js +5 -0
  180. package/number-input/NumberInput.d.ts +7 -0
  181. package/number-input/NumberInput.js +47 -37
  182. package/number-input/NumberInput.stories.tsx +42 -26
  183. package/number-input/NumberInput.test.js +862 -381
  184. package/number-input/types.d.ts +24 -15
  185. package/package.json +45 -47
  186. package/paginator/Icons.d.ts +5 -0
  187. package/paginator/Icons.js +21 -47
  188. package/paginator/Paginator.js +34 -91
  189. package/paginator/Paginator.stories.tsx +24 -0
  190. package/paginator/Paginator.test.js +280 -211
  191. package/paginator/types.d.ts +3 -3
  192. package/paragraph/Paragraph.d.ts +5 -0
  193. package/paragraph/Paragraph.js +22 -0
  194. package/paragraph/Paragraph.stories.tsx +27 -0
  195. package/password-input/Icons.d.ts +6 -0
  196. package/password-input/Icons.js +35 -0
  197. package/password-input/PasswordInput.js +57 -123
  198. package/password-input/PasswordInput.stories.tsx +1 -33
  199. package/password-input/PasswordInput.test.js +162 -147
  200. package/password-input/types.d.ts +21 -17
  201. package/progress-bar/ProgressBar.js +65 -91
  202. package/progress-bar/ProgressBar.stories.tsx +93 -0
  203. package/progress-bar/ProgressBar.test.js +72 -44
  204. package/progress-bar/types.d.ts +3 -3
  205. package/quick-nav/QuickNav.js +71 -43
  206. package/quick-nav/QuickNav.stories.tsx +146 -27
  207. package/quick-nav/types.d.ts +10 -10
  208. package/radio-group/Radio.d.ts +1 -1
  209. package/radio-group/Radio.js +59 -76
  210. package/radio-group/RadioGroup.js +71 -116
  211. package/radio-group/RadioGroup.stories.tsx +132 -18
  212. package/radio-group/RadioGroup.test.js +518 -457
  213. package/radio-group/types.d.ts +10 -10
  214. package/resultset-table/Icons.d.ts +7 -0
  215. package/resultset-table/Icons.js +47 -0
  216. package/resultset-table/ResultsetTable.d.ts +7 -0
  217. package/resultset-table/ResultsetTable.js +166 -0
  218. package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +152 -30
  219. package/resultset-table/ResultsetTable.test.js +371 -0
  220. package/{resultsetTable → resultset-table}/types.d.ts +13 -7
  221. package/resultset-table/types.js +5 -0
  222. package/select/Icons.d.ts +7 -7
  223. package/select/Icons.js +1 -5
  224. package/select/Listbox.d.ts +4 -0
  225. package/select/Listbox.js +143 -0
  226. package/select/Option.js +27 -50
  227. package/select/Select.js +198 -340
  228. package/select/Select.stories.tsx +525 -136
  229. package/select/Select.test.js +2009 -1696
  230. package/select/types.d.ts +32 -17
  231. package/sidenav/Icons.d.ts +7 -0
  232. package/sidenav/Icons.js +47 -0
  233. package/sidenav/Sidenav.d.ts +6 -5
  234. package/sidenav/Sidenav.js +132 -71
  235. package/sidenav/Sidenav.stories.tsx +251 -151
  236. package/sidenav/Sidenav.test.js +26 -45
  237. package/sidenav/types.d.ts +52 -26
  238. package/slider/Slider.d.ts +2 -2
  239. package/slider/Slider.js +148 -181
  240. package/slider/Slider.test.js +185 -81
  241. package/slider/types.d.ts +7 -3
  242. package/spinner/Spinner.js +31 -75
  243. package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +53 -27
  244. package/spinner/Spinner.test.js +26 -35
  245. package/spinner/types.d.ts +3 -3
  246. package/status-light/StatusLight.d.ts +4 -0
  247. package/status-light/StatusLight.js +51 -0
  248. package/status-light/StatusLight.stories.tsx +74 -0
  249. package/status-light/StatusLight.test.js +25 -0
  250. package/status-light/types.d.ts +17 -0
  251. package/status-light/types.js +5 -0
  252. package/switch/Switch.d.ts +2 -2
  253. package/switch/Switch.js +143 -121
  254. package/switch/Switch.stories.tsx +41 -64
  255. package/switch/Switch.test.js +138 -56
  256. package/switch/types.d.ts +9 -5
  257. package/table/DropdownTheme.js +62 -0
  258. package/table/Table.d.ts +6 -2
  259. package/table/Table.js +87 -35
  260. package/table/Table.stories.tsx +658 -0
  261. package/table/Table.test.js +95 -8
  262. package/table/types.d.ts +48 -6
  263. package/tabs/Tab.d.ts +4 -0
  264. package/tabs/Tab.js +116 -0
  265. package/tabs/Tabs.js +314 -141
  266. package/tabs/Tabs.stories.tsx +120 -12
  267. package/tabs/Tabs.test.js +223 -69
  268. package/tabs/types.d.ts +28 -18
  269. package/tag/Tag.js +33 -68
  270. package/tag/Tag.stories.tsx +14 -1
  271. package/tag/Tag.test.js +20 -31
  272. package/tag/types.d.ts +7 -7
  273. package/text-input/Icons.d.ts +8 -0
  274. package/text-input/Icons.js +56 -0
  275. package/text-input/Suggestion.d.ts +4 -0
  276. package/text-input/Suggestion.js +67 -0
  277. package/text-input/Suggestions.d.ts +4 -0
  278. package/text-input/Suggestions.js +84 -0
  279. package/text-input/TextInput.js +325 -558
  280. package/text-input/TextInput.stories.tsx +266 -275
  281. package/text-input/TextInput.test.js +1430 -1399
  282. package/text-input/types.d.ts +66 -24
  283. package/textarea/Textarea.js +79 -131
  284. package/textarea/Textarea.stories.tsx +174 -0
  285. package/textarea/Textarea.test.js +152 -183
  286. package/textarea/types.d.ts +19 -12
  287. package/toggle-group/ToggleGroup.d.ts +2 -2
  288. package/toggle-group/ToggleGroup.js +92 -106
  289. package/toggle-group/ToggleGroup.stories.tsx +49 -4
  290. package/toggle-group/ToggleGroup.test.js +69 -88
  291. package/toggle-group/types.d.ts +26 -17
  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 +1147 -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.js +58 -94
  306. package/wizard/Wizard.stories.tsx +40 -1
  307. package/wizard/Wizard.test.js +54 -81
  308. package/wizard/types.d.ts +8 -8
  309. package/ThemeContext.d.ts +0 -10
  310. package/ThemeContext.js +0 -243
  311. package/card/ice-cream.jpg +0 -0
  312. package/common/OpenSans.css +0 -81
  313. package/common/RequiredComponent.js +0 -32
  314. package/common/fonts/OpenSans-Bold.ttf +0 -0
  315. package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  316. package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  317. package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  318. package/common/fonts/OpenSans-Italic.ttf +0 -0
  319. package/common/fonts/OpenSans-Light.ttf +0 -0
  320. package/common/fonts/OpenSans-LightItalic.ttf +0 -0
  321. package/common/fonts/OpenSans-Regular.ttf +0 -0
  322. package/common/fonts/OpenSans-SemiBold.ttf +0 -0
  323. package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  324. package/list/List.d.ts +0 -4
  325. package/list/List.js +0 -47
  326. package/list/List.stories.tsx +0 -95
  327. package/list/types.d.ts +0 -7
  328. package/number-input/NumberInputContext.d.ts +0 -4
  329. package/number-input/NumberInputContext.js +0 -19
  330. package/number-input/numberInputContextTypes.d.ts +0 -19
  331. package/progress-bar/ProgressBar.stories.jsx +0 -58
  332. package/radio/Radio.d.ts +0 -4
  333. package/radio/Radio.js +0 -174
  334. package/radio/Radio.stories.tsx +0 -192
  335. package/radio/Radio.test.js +0 -71
  336. package/radio/types.d.ts +0 -54
  337. package/resultsetTable/ResultsetTable.d.ts +0 -4
  338. package/resultsetTable/ResultsetTable.js +0 -254
  339. package/resultsetTable/ResultsetTable.test.js +0 -306
  340. package/row/Row.d.ts +0 -3
  341. package/row/Row.js +0 -127
  342. package/row/Row.stories.tsx +0 -237
  343. package/row/types.d.ts +0 -28
  344. package/slider/Slider.stories.tsx +0 -177
  345. package/stack/Stack.d.ts +0 -3
  346. package/stack/Stack.js +0 -97
  347. package/stack/Stack.stories.tsx +0 -164
  348. package/stack/types.d.ts +0 -24
  349. package/table/Table.stories.jsx +0 -277
  350. package/text/Text.d.ts +0 -7
  351. package/text/Text.js +0 -30
  352. package/text/Text.stories.tsx +0 -19
  353. package/textarea/Textarea.stories.jsx +0 -157
  354. /package/{list → action-icon}/types.js +0 -0
  355. /package/{radio → bulleted-list}/types.js +0 -0
  356. /package/{resultsetTable → container}/types.js +0 -0
  357. /package/{row → contextual-menu}/types.js +0 -0
  358. /package/{stack → divider}/types.js +0 -0
  359. /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
+ );