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

docs/content/FilterList.mdx

@@ -4,7 +4,7 @@ title: FilterList
 status: Alpha
 ---
 
-import data from '../../src/FilterList.docs.json'
+import data from '../../src/FilterList/FilterList.docs.json'
 
 The FilterList component is a menu with filter options that filter the main content of the page.
 

e2e/components/FilterList.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('FilterList', () => {
+  test.describe('Default', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-filterlist--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`FilterList.Default.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-filterlist--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-filterlist--playground',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`FilterList.Playground.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-filterlist--playground',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+})

script/generate-e2e-tests.js

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

src/FilterList/FilterList.stories.tsx

@@ -0,0 +1,53 @@
+import React, {useState} from 'react'
+import {Meta, ComponentStory} from '@storybook/react'
+import FilterList from './FilterList'
+
+export default {
+  title: 'Components/FilterList',
+  component: FilterList,
+} as Meta<typeof FilterList>
+
+export const Default = () => {
+  const [selectedIndex, setSelectedIndex] = useState(0)
+  return (
+    <FilterList>
+      <FilterList.Item selected={selectedIndex === 0} onClick={() => setSelectedIndex(0)} count={32}>
+        First Filter
+      </FilterList.Item>
+      <FilterList.Item selected={selectedIndex === 1} onClick={() => setSelectedIndex(1)} count={16}>
+        Second Filter
+      </FilterList.Item>
+      <FilterList.Item selected={selectedIndex === 2} onClick={() => setSelectedIndex(2)}>
+        Third Filter
+      </FilterList.Item>
+    </FilterList>
+  )
+}
+
+export const Playground: ComponentStory<typeof FilterList> = args => {
+  const [selectedIndex, setSelectedIndex] = useState(0)
+  return (
+    <FilterList {...args}>
+      <FilterList.Item selected={selectedIndex === 0} onClick={() => setSelectedIndex(0)} count={32}>
+        First Filter
+      </FilterList.Item>
+      <FilterList.Item selected={selectedIndex === 1} onClick={() => setSelectedIndex(1)} count={16}>
+        Second Filter
+      </FilterList.Item>
+      <FilterList.Item selected={selectedIndex === 2} onClick={() => setSelectedIndex(2)}>
+        Third Filter
+      </FilterList.Item>
+    </FilterList>
+  )
+}
+
+Playground.args = {}
+
+Playground.argTypes = {
+  sx: {
+    controls: false,
+    table: {
+      disabled: true,
+    },
+  },
+}

src/FilterList.tsx → src/FilterList/FilterList.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 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 FilterListBase = styled.ul<SxProp>`
   list-style-type: none;
@@ -57,7 +57,7 @@ const FilterListItemBase = styled.a<StyledFilterListItemBaseProps>`
 
 export type FilterListItemProps = {count?: number} & ComponentProps<typeof FilterListItemBase>
 
-function FilterListItem({children, count, ...rest}: React.PropsWithChildren<FilterListItemProps>) {
+const FilterListItem = ({children, count, ...rest}: React.PropsWithChildren<FilterListItemProps>) => {
   return (
     <FilterListItemBase {...rest}>
       {count && (

src/FilterList/index.ts

@@ -0,0 +1 @@
+export {default, FilterListProps, FilterListItemProps} from './FilterList'