test(textarea/stories): improve stacked textaread visualization

vtex · Sep 27, 2024 · b01d4e9 · b01d4e9
1 parent 285d29e
commit b01d4e9
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 101 deletions.
diff --git a/packages/shoreline/src/components/textarea/stories/examples.stories.tsx b/packages/shoreline/src/components/textarea/stories/examples.stories.tsx
@@ -1,8 +1,7 @@
-import './style.css'
 import React from 'react'
 
-import { Textarea } from '../index'
 import { Stack } from '../../stack'
+import { Textarea } from '../index'
 
 export default {
   title: 'components/textarea',
@@ -15,84 +14,40 @@ export function NoResize() {
   const [value, setValue] = React.useState('')
 
   return (
-    <>
-      <Textarea
-        value={value}
-        onChange={setValue}
-        className="textarea-container"
-        resizable={false}
-        optional
-      />
-      <Textarea
-        value={value}
-        onChange={setValue}
-        className="textarea-container"
-        resizable={false}
-      />
-      <Textarea
-        value={value}
-        onChange={setValue}
-        className="textarea-container"
-        error
-        resizable={false}
-      />
-      <Textarea
-        value={value}
-        onChange={setValue}
-        className="textarea-container"
-        disabled
-        resizable={false}
-      />
+    <Stack>
+      <Textarea value={value} onChange={setValue} resizable={false} optional />
+      <Textarea value={value} onChange={setValue} resizable={false} />
+      <Textarea value={value} onChange={setValue} error resizable={false} />
+      <Textarea value={value} onChange={setValue} disabled resizable={false} />
       <Textarea
         value="The quick brown fox is tired right now"
-        className="textarea-container"
         disabled
         resizable={false}
       />
       <Textarea
         value={value}
         onChange={setValue}
-        className="textarea-container"
         maxLength={120}
         resizable={false}
       />
-    </>
+    </Stack>
   )
 }
 
 export function FormField() {
   const [value, setValue] = React.useState('')
 
-  return (
-    <Textarea
-      error
-      className="textarea-container"
-      value={value}
-      onChange={setValue}
-      maxLength={120}
-    />
-  )
+  return <Textarea error value={value} onChange={setValue} maxLength={120} />
 }
 
 export function LongText() {
   const [value, setValue] = React.useState('')
 
   return (
     <Stack>
-      <Textarea
-        error
-        className="textarea-container"
-        value={value}
-        onChange={setValue}
-        maxLength={120}
-      />
+      <Textarea error value={value} onChange={setValue} maxLength={120} />
 
-      <Textarea
-        error
-        className="textarea-container"
-        value={value}
-        onChange={setValue}
-      />
+      <Textarea error value={value} onChange={setValue} />
     </Stack>
   )
 }
diff --git a/packages/shoreline/src/components/textarea/stories/show.stories.tsx b/packages/shoreline/src/components/textarea/stories/show.stories.tsx
@@ -1,6 +1,6 @@
-import './style.css'
 import React from 'react'
 
+import { Stack } from '../../stack'
 import { Textarea } from '../index'
 
 export default {
@@ -11,47 +11,14 @@ export function Show() {
   const [value, setValue] = React.useState('')
 
   return (
-    <>
-      <Textarea
-        value={value}
-        onChange={setValue}
-        className="textarea-container"
-        maxLength={120}
-      />
-      <Textarea
-        value={value}
-        onChange={setValue}
-        className="textarea-container"
-        optional
-      />
-      <Textarea
-        value={value}
-        onChange={setValue}
-        className="textarea-container"
-      />
-      <Textarea
-        value={value}
-        onChange={setValue}
-        className="textarea-container"
-        error
-      />
-      <Textarea
-        value={value}
-        onChange={setValue}
-        className="textarea-container"
-        disabled
-      />
-      <Textarea
-        value="The quick brown fox is tired right now"
-        className="textarea-container"
-        disabled
-      />
-      <Textarea
-        value={value}
-        onChange={setValue}
-        className="textarea-container"
-        maxLength={120}
-      />
-    </>
+    <Stack>
+      <Textarea value={value} onChange={setValue} maxLength={120} />
+      <Textarea value={value} onChange={setValue} optional />
+      <Textarea value={value} onChange={setValue} />
+      <Textarea value={value} onChange={setValue} error />
+      <Textarea value={value} onChange={setValue} disabled />
+      <Textarea value="The quick brown fox is tired right now" disabled />
+      <Textarea value={value} onChange={setValue} maxLength={120} />
+    </Stack>
   )
 }
diff --git a/packages/shoreline/src/components/textarea/stories/style.css b/packages/shoreline/src/components/textarea/stories/style.css