refactor(FilterList): add files to folder, add storybook and e2e test…

…s. (#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>

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()
+        })
+      })
+    }
+  })
+})

generated/components.json

@@ -97,51 +97,6 @@
         }
       ]
     },
-    "filter_list": {
-      "id": "filter_list",
-      "name": "FilterList",
-      "status": "alpha",
-      "a11yReviewed": false,
-      "stories": [],
-      "props": [
-        {
-          "name": "sx",
-          "type": "SystemStyleObject"
-        }
-      ],
-      "subcomponents": [
-        {
-          "name": "FilterList.Item",
-          "props": [
-            {
-              "name": "count",
-              "type": "number",
-              "description": "Number to be displayed in the list item"
-            },
-            {
-              "name": "selected",
-              "type": "boolean",
-              "description": "Whether the list item is selected or not"
-            },
-            {
-              "name": "small",
-              "type": "boolean",
-              "defaultValue": "false",
-              "description": "Whether the list item is small or not"
-            },
-            {
-              "name": "as",
-              "type": "React.ElementType",
-              "defaultValue": "'a'"
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject"
-            }
-          ]
-        }
-      ]
-    },
     "filtered_search": {
       "id": "filtered_search",
       "name": "FilteredSearch",
@@ -2055,6 +2010,56 @@
       ],
       "subcomponents": []
     },
+    "filter_list": {
+      "id": "filter_list",
+      "name": "FilterList",
+      "status": "alpha",
+      "a11yReviewed": false,
+      "stories": [
+        {
+          "id": "components-filterlist--default",
+          "code": "() => {\n  const [selectedIndex, setSelectedIndex] = useState(0)\n  return (\n    <FilterList>\n      <FilterList.Item\n        selected={selectedIndex === 0}\n        onClick={() => setSelectedIndex(0)}\n        count={32}\n      >\n        First Filter\n      </FilterList.Item>\n      <FilterList.Item\n        selected={selectedIndex === 1}\n        onClick={() => setSelectedIndex(1)}\n        count={16}\n      >\n        Second Filter\n      </FilterList.Item>\n      <FilterList.Item\n        selected={selectedIndex === 2}\n        onClick={() => setSelectedIndex(2)}\n      >\n        Third Filter\n      </FilterList.Item>\n    </FilterList>\n  )\n}"
+        }
+      ],
+      "props": [
+        {
+          "name": "sx",
+          "type": "SystemStyleObject"
+        }
+      ],
+      "subcomponents": [
+        {
+          "name": "FilterList.Item",
+          "props": [
+            {
+              "name": "count",
+              "type": "number",
+              "description": "Number to be displayed in the list item"
+            },
+            {
+              "name": "selected",
+              "type": "boolean",
+              "description": "Whether the list item is selected or not"
+            },
+            {
+              "name": "small",
+              "type": "boolean",
+              "defaultValue": "false",
+              "description": "Whether the list item is small or not"
+            },
+            {
+              "name": "as",
+              "type": "React.ElementType",
+              "defaultValue": "'a'"
+            },
+            {
+              "name": "sx",
+              "type": "SystemStyleObject"
+            }
+          ]
+        }
+      ]
+    },
     "flash": {
       "id": "flash",
       "name": "Flash",

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'