@dxc-technology/halstack-react 0.0.0-2455fac → 0.0.0-2499c33

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