Refactor(FilteredSearch): move files to folder, add storybook and e2e…

… tests. (#3125)

* Move files to folder, add storybook and e2e tests.

* Add aria-label to TextInput, fix docs reference.

* Update generated/components.json

* test(vrt): update snapshots

* replace createRef with useRef (#3124)

* replace createRef with useRef

* changeset

* missed null

* refactor(FilterList): add files to folder, add storybook and e2e tests. (#3122)

* Reorganize FilterList files into folder, add storybook and e2e tests.

* Update generated/components.json

* test(vrt): update snapshots

---------

Co-authored-by: radglob <radglob@users.noreply.github.com>

* Fix generated components.

---------

Co-authored-by: radglob <radglob@users.noreply.github.com>
Co-authored-by: Matthew Costabile <mattcosta7@github.com>

docs/content/FilteredSearch.mdx

@@ -4,7 +4,7 @@ title: FilteredSearch
 status: Alpha
 ---
 
-import data from '../../src/FilteredSearch.docs.json'
+import data from '../../src/FilteredSearch/FilteredSearch.docs.json'
 
 The FilteredSearch component helps style an ActionMenu and a TextInput side-by-side.
 

e2e/components/FilteredSearch.test.ts

@@ -0,0 +1,61 @@
+import {test, expect} from '@playwright/test'
+import {visit} from '../test-helpers/storybook'
+import {themes} from '../test-helpers/themes'
+
+test.describe('FilteredSearch', () => {
+  test.describe('Default', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-filteredsearch--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`FilteredSearch.Default.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-filteredsearch--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('Playground', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-filteredsearch--playground',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`FilteredSearch.Playground.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-filteredsearch--playground',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+})

generated/components.json

@@ -97,25 +97,6 @@
         }
       ]
     },
-    "filtered_search": {
-      "id": "filtered_search",
-      "name": "FilteredSearch",
-      "status": "alpha",
-      "a11yReviewed": false,
-      "stories": [],
-      "props": [
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "FilteredSearch is expected to contain an `ActionMenu` followed by a `TextInput`."
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject"
-        }
-      ],
-      "subcomponents": []
-    },
     "label_group": {
       "id": "label_group",
       "name": "LabelGroup",
@@ -2060,6 +2041,30 @@
         }
       ]
     },
+    "filtered_search": {
+      "id": "filtered_search",
+      "name": "FilteredSearch",
+      "status": "alpha",
+      "a11yReviewed": false,
+      "stories": [
+        {
+          "id": "components-filteredsearch--default",
+          "code": "() => (\n  <FilteredSearch>\n    <ActionMenu>\n      <ActionMenu.Button as=\"summary\">Filter</ActionMenu.Button>\n      <ActionMenu.Overlay>\n        <ActionList>\n          <ActionList.Item>Item 1</ActionList.Item>\n          <ActionList.Item>Item 2</ActionList.Item>\n          <ActionList.Item>Item 3</ActionList.Item>\n        </ActionList>\n      </ActionMenu.Overlay>\n    </ActionMenu>\n    <TextInput aria-label=\"filtered-search\" leadingVisual={SearchIcon} />\n  </FilteredSearch>\n)"
+        }
+      ],
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "FilteredSearch is expected to contain an `ActionMenu` followed by a `TextInput`."
+        },
+        {
+          "name": "sx",
+          "type": "SystemStyleObject"
+        }
+      ],
+      "subcomponents": []
+    },
     "flash": {
       "id": "flash",
       "name": "Flash",

script/generate-e2e-tests.js

@@ -402,6 +402,21 @@ const components = new Map([
       ],
     },
   ],
+  [
+    'FilteredSearch',
+    {
+      stories: [
+        {
+          id: 'components-filteredsearch--default',
+          name: 'Default',
+        },
+        {
+          id: 'components-filteredsearch--playground',
+          name: 'Playground',
+        },
+      ],
+    },
+  ],
   [
     'FilterList',
     {

src/FilteredSearch/FilteredSearch.stories.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import {Meta, ComponentStory} from '@storybook/react'
+import FilteredSearch from './FilteredSearch'
+import {ActionList} from '../ActionList'
+import {ActionMenu} from '../ActionMenu'
+import TextInput from '../TextInput'
+import {SearchIcon} from '@primer/octicons-react'
+
+export default {
+  title: 'Components/FilteredSearch',
+  component: FilteredSearch,
+} as Meta<typeof FilteredSearch>
+
+export const Default = () => (
+  <FilteredSearch>
+    <ActionMenu>
+      <ActionMenu.Button as="summary">Filter</ActionMenu.Button>
+      <ActionMenu.Overlay>
+        <ActionList>
+          <ActionList.Item>Item 1</ActionList.Item>
+          <ActionList.Item>Item 2</ActionList.Item>
+          <ActionList.Item>Item 3</ActionList.Item>
+        </ActionList>
+      </ActionMenu.Overlay>
+    </ActionMenu>
+    <TextInput aria-label="filtered-search" leadingVisual={SearchIcon} />
+  </FilteredSearch>
+)
+
+export const Playground: ComponentStory<typeof FilteredSearch> = args => (
+  <FilteredSearch {...args}>
+    <ActionMenu>
+      <ActionMenu.Button as="summary">Filter</ActionMenu.Button>
+      <ActionMenu.Overlay>
+        <ActionList>
+          <ActionList.Item>Item 1</ActionList.Item>
+          <ActionList.Item>Item 2</ActionList.Item>
+          <ActionList.Item>Item 3</ActionList.Item>
+        </ActionList>
+      </ActionMenu.Overlay>
+    </ActionMenu>
+    <TextInput aria-label="filtered-search" leadingVisual={SearchIcon} />
+  </FilteredSearch>
+)
+
+Playground.args = {}
+
+Playground.argTypes = {}

src/FilteredSearch.tsx → src/FilteredSearch/FilteredSearch.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components'
-import {get} from './constants'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
+import {get} from '../constants'
+import sx, {SxProp} from '../sx'
+import {ComponentProps} from '../utils/types'
 
 const FilteredSearch = styled.div<SxProp>`
   display: flex;

src/FilteredSearch/index.ts

@@ -0,0 +1 @@
+export {default, FilteredSearchProps} from './FilteredSearch'