Add ProgressBar stories (#3047)

* Add ProgressBar story

* Update docs path

* Add Playground

* Add Features

* Enable test

* Add e2e tests

* Update generated/components.json

* Add width when inline

* test(e2e): update story ids for ProgressBar

* test(vrt): update snapshots

---------

Co-authored-by: simurai <simurai@users.noreply.github.com>
Co-authored-by: Josh Black <joshblack@users.noreply.github.com>

docs/content/ProgressBar.mdx

@@ -5,7 +5,7 @@ status: Alpha
 source: https://github.com/primer/react/blob/main/src/ProgressBar.tsx
 ---
 
-import data from '../../src/ProgressBar.docs.json'
+import data from '../../src/ProgressBar/ProgressBar.docs.json'
 
 ```js
 import {ProgressBar} from '@primer/react'

e2e/components/ProgressBar.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('ProgressBar', () => {
+  test.describe('Default', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-progressbar--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`ProgressBar.Default.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-progressbar--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('Progress Zero', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-progressbar-features--progress-zero',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`ProgressBar.Progress Zero.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-progressbar-features--progress-zero',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('Progress Half', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-progressbar-features--progress-half',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`ProgressBar.Progress Half.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-progressbar-features--progress-half',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('Progress Done', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-progressbar-features--progress-done',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`ProgressBar.Progress Done.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-progressbar-features--progress-done',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('Size Small', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-progressbar-features--size-small',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`ProgressBar.Size Small.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-progressbar-features--size-small',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('Size Large', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-progressbar-features--size-large',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`ProgressBar.Size Large.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-progressbar-features--size-large',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('Inline', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-progressbar-features--inline',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`ProgressBar.Inline.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-progressbar-features--inline',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('Color', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-progressbar-features--color',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`ProgressBar.Color.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-progressbar-features--color',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+})

generated/components.json

@@ -466,44 +466,6 @@
         }
       ]
     },
-    "progress_bar": {
-      "id": "progress_bar",
-      "name": "ProgressBar",
-      "status": "alpha",
-      "a11yReviewed": false,
-      "stories": [],
-      "props": [
-        {
-          "name": "progress",
-          "type": "number",
-          "defaultValue": "0",
-          "description": "Used to set the size of the green bar"
-        },
-        {
-          "name": "barSize",
-          "type": "| 'small' | 'large' | 'default'",
-          "defaultValue": "'default'",
-          "description": "Controls the height of the progress bar. If omitted, height is set to the default height."
-        },
-        {
-          "name": "inline",
-          "type": "boolean",
-          "defaultValue": "false",
-          "description": "Styles the progress bar inline"
-        },
-        {
-          "name": "bg",
-          "type": "string",
-          "defaultValue": "'bg.successInverse'",
-          "description": "Set the progress bar color"
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject"
-        }
-      ],
-      "subcomponents": []
-    },
     "styled_octicon": {
       "id": "styled_octicon",
       "name": "StyledOcticon",
@@ -3191,6 +3153,49 @@
       ],
       "subcomponents": []
     },
+    "progress_bar": {
+      "id": "progress_bar",
+      "name": "ProgressBar",
+      "status": "alpha",
+      "a11yReviewed": false,
+      "stories": [
+        {
+          "id": "components-progressbar--default",
+          "code": "() => <ProgressBar />"
+        }
+      ],
+      "props": [
+        {
+          "name": "progress",
+          "type": "number",
+          "defaultValue": "0",
+          "description": "Used to set the size of the green bar"
+        },
+        {
+          "name": "barSize",
+          "type": "| 'small' | 'large' | 'default'",
+          "defaultValue": "'default'",
+          "description": "Controls the height of the progress bar. If omitted, height is set to the default height."
+        },
+        {
+          "name": "inline",
+          "type": "boolean",
+          "defaultValue": "false",
+          "description": "Styles the progress bar inline"
+        },
+        {
+          "name": "bg",
+          "type": "string",
+          "defaultValue": "'bg.successInverse'",
+          "description": "Set the progress bar color"
+        },
+        {
+          "name": "sx",
+          "type": "SystemStyleObject"
+        }
+      ],
+      "subcomponents": []
+    },
     "radio": {
       "id": "radio",
       "name": "Radio",

script/generate-e2e-tests.js

@@ -708,6 +708,45 @@ const components = new Map([
       ],
     },
   ],
+  [
+    'ProgressBar',
+    {
+      stories: [
+        {
+          id: 'components-progressbar--default',
+          name: 'Default',
+        },
+        {
+          id: 'components-progressbar-features--progress-zero',
+          name: 'Progress Zero',
+        },
+        {
+          id: 'components-progressbar-features--progress-half',
+          name: 'Progress Half',
+        },
+        {
+          id: 'components-progressbar-features--progress-done',
+          name: 'Progress Done',
+        },
+        {
+          id: 'components-progressbar-features--size-small',
+          name: 'Size Small',
+        },
+        {
+          id: 'components-progressbar-features--size-large',
+          name: 'Size Large',
+        },
+        {
+          id: 'components-progressbar-features--inline',
+          name: 'Inline',
+        },
+        {
+          id: 'components-progressbar-features--color',
+          name: 'Color',
+        },
+      ],
+    },
+  ],
   [
     'Radio',
     {

src/ProgressBar/ProgressBar.features.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import {ComponentMeta} from '@storybook/react'
+import ProgressBar from './ProgressBar'
+
+export default {
+  title: 'Components/ProgressBar/Features',
+  component: ProgressBar,
+} as ComponentMeta<typeof ProgressBar>
+
+export const ProgressZero = () => <ProgressBar progress="0" />
+export const ProgressHalf = () => <ProgressBar progress="50" />
+export const ProgressDone = () => <ProgressBar progress="100" />
+
+export const SizeSmall = () => <ProgressBar progress="66" barSize="small" />
+export const SizeLarge = () => <ProgressBar progress="66" barSize="large" />
+
+export const Inline = () => <ProgressBar inline progress="66" sx={{width: '100px'}} />
+
+export const Color = () => <ProgressBar progress="66" bg="done.emphasis" />