Textarea stories

docs/content/Textarea.mdx

@@ -7,7 +7,7 @@ source: https://github.com/primer/react/blob/main/src/Textarea.tsx
 storybook: '/react/storybook?path=/story/components-forms-textarea--textarea-story'
 ---
 
-import data from '../../src/Textarea.docs.json'
+import data from '../../src/Textarea/Textarea.docs.json'
 
 import {Textarea} from '@primer/react'
 

e2e/components/Textarea.test.ts

@@ -0,0 +1,229 @@
+import {test, expect} from '@playwright/test'
+import {visit} from '../test-helpers/storybook'
+import {themes} from '../test-helpers/themes'
+
+test.describe('Textarea', () => {
+  test.describe('Default', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-textarea--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`Textarea.Default.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-textarea--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('Block', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-textarea-features--block',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`Textarea.Block.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-textarea-features--block',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('Disabled', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-textarea-features--disabled',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`Textarea.Disabled.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-textarea-features--disabled',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('Error', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-textarea-features--error',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`Textarea.Error.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-textarea-features--error',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('Success', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-textarea-features--success',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`Textarea.Success.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-textarea-features--success',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('Visually Hidden Label', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-textarea-features--visually-hidden-label',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`Textarea.Visually Hidden Label.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-textarea-features--visually-hidden-label',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('Warning', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-textarea-features--warning',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`Textarea.Warning.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-textarea-features--warning',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('With Caption', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-textarea-features--with-caption',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`Textarea.With Caption.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-textarea-features--with-caption',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+})

generated/components.json

@@ -691,69 +691,6 @@
       ],
       "subcomponents": []
     },
-    "textarea": {
-      "id": "textarea",
-      "name": "Textarea",
-      "status": "alpha",
-      "a11yReviewed": false,
-      "stories": [],
-      "props": [
-        {
-          "name": "required",
-          "type": "boolean",
-          "defaultValue": "",
-          "description": "Indicates to the user and assistive technologies that the field value is required"
-        },
-        {
-          "name": "cols",
-          "type": "number",
-          "defaultValue": "",
-          "description": "Specifies the visible width of a text area."
-        },
-        {
-          "name": "rows",
-          "type": "number",
-          "defaultValue": "",
-          "description": "Specifies the visible height of a text area."
-        },
-        {
-          "name": "block",
-          "type": "boolean",
-          "defaultValue": "false",
-          "description": "Expands with width of the component to fill the parent elements"
-        },
-        {
-          "name": "resize",
-          "type": "'both' | 'horizontal' | 'vertical' | 'none'",
-          "defaultValue": "'both'",
-          "description": "Changes background color to a higher contrast color"
-        },
-        {
-          "name": "validationStatus",
-          "type": "'success' | 'error' | undefined",
-          "defaultValue": "",
-          "description": "Style the textarea to match the current form validation status"
-        },
-        {
-          "name": "ref",
-          "type": "React.RefObject<HTMLTextAreaElement>"
-        },
-        {
-          "name": "ref",
-          "type": "React.RefObject<HTMLTextareaElement>"
-        },
-        {
-          "name": "as",
-          "type": "React.ElementType",
-          "defaultValue": "\"input\""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject"
-        }
-      ],
-      "subcomponents": []
-    },
     "tooltip": {
       "id": "tooltip",
       "name": "Tooltip",
@@ -4153,6 +4090,74 @@
       ],
       "subcomponents": []
     },
+    "textarea": {
+      "id": "textarea",
+      "name": "Textarea",
+      "status": "alpha",
+      "a11yReviewed": false,
+      "stories": [
+        {
+          "id": "components-textarea--default",
+          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Textarea />\n    </FormControl>\n  </Box>\n)"
+        }
+      ],
+      "props": [
+        {
+          "name": "required",
+          "type": "boolean",
+          "defaultValue": "",
+          "description": "Indicates to the user and assistive technologies that the field value is required"
+        },
+        {
+          "name": "cols",
+          "type": "number",
+          "defaultValue": "",
+          "description": "Specifies the visible width of a text area."
+        },
+        {
+          "name": "rows",
+          "type": "number",
+          "defaultValue": "",
+          "description": "Specifies the visible height of a text area."
+        },
+        {
+          "name": "block",
+          "type": "boolean",
+          "defaultValue": "false",
+          "description": "Expands with width of the component to fill the parent elements"
+        },
+        {
+          "name": "resize",
+          "type": "'both' | 'horizontal' | 'vertical' | 'none'",
+          "defaultValue": "'both'",
+          "description": "Changes background color to a higher contrast color"
+        },
+        {
+          "name": "validationStatus",
+          "type": "'success' | 'error' | undefined",
+          "defaultValue": "",
+          "description": "Style the textarea to match the current form validation status"
+        },
+        {
+          "name": "ref",
+          "type": "React.RefObject<HTMLTextAreaElement>"
+        },
+        {
+          "name": "ref",
+          "type": "React.RefObject<HTMLTextareaElement>"
+        },
+        {
+          "name": "as",
+          "type": "React.ElementType",
+          "defaultValue": "\"input\""
+        },
+        {
+          "name": "sx",
+          "type": "SystemStyleObject"
+        }
+      ],
+      "subcomponents": []
+    },
     "timeline": {
       "id": "timeline",
       "name": "Timeline",