diff --git a/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Default-dark-colorblind-linux.png
new file mode 100644
index 00000000000..66c0aa3c6a9
Binary files /dev/null and b/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Default-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Default-dark-dimmed-linux.png
new file mode 100644
index 00000000000..6b6e6b711bf
Binary files /dev/null and b/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Default-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Default-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..1aa6277b03d
Binary files /dev/null and b/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Default-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Default-dark-linux.png b/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Default-dark-linux.png
new file mode 100644
index 00000000000..66c0aa3c6a9
Binary files /dev/null and b/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Default-dark-linux.png differ
diff --git a/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Default-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..66c0aa3c6a9
Binary files /dev/null and b/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Default-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Default-light-colorblind-linux.png b/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Default-light-colorblind-linux.png
new file mode 100644
index 00000000000..031d26b8eac
Binary files /dev/null and b/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Default-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Default-light-high-contrast-linux.png
new file mode 100644
index 00000000000..77ff372a463
Binary files /dev/null and b/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Default-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Default-light-linux.png b/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Default-light-linux.png
new file mode 100644
index 00000000000..031d26b8eac
Binary files /dev/null and b/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Default-light-linux.png differ
diff --git a/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Default-light-tritanopia-linux.png
new file mode 100644
index 00000000000..031d26b8eac
Binary files /dev/null and b/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Default-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Playground-dark-colorblind-linux.png b/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Playground-dark-colorblind-linux.png
new file mode 100644
index 00000000000..66c0aa3c6a9
Binary files /dev/null and b/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Playground-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Playground-dark-dimmed-linux.png b/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Playground-dark-dimmed-linux.png
new file mode 100644
index 00000000000..6b6e6b711bf
Binary files /dev/null and b/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Playground-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Playground-dark-high-contrast-linux.png b/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Playground-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..1aa6277b03d
Binary files /dev/null and b/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Playground-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Playground-dark-linux.png b/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Playground-dark-linux.png
new file mode 100644
index 00000000000..66c0aa3c6a9
Binary files /dev/null and b/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Playground-dark-linux.png differ
diff --git a/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Playground-dark-tritanopia-linux.png b/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Playground-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..66c0aa3c6a9
Binary files /dev/null and b/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Playground-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Playground-light-colorblind-linux.png b/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Playground-light-colorblind-linux.png
new file mode 100644
index 00000000000..031d26b8eac
Binary files /dev/null and b/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Playground-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Playground-light-high-contrast-linux.png b/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Playground-light-high-contrast-linux.png
new file mode 100644
index 00000000000..77ff372a463
Binary files /dev/null and b/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Playground-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Playground-light-linux.png b/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Playground-light-linux.png
new file mode 100644
index 00000000000..031d26b8eac
Binary files /dev/null and b/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Playground-light-linux.png differ
diff --git a/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Playground-light-tritanopia-linux.png b/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Playground-light-tritanopia-linux.png
new file mode 100644
index 00000000000..031d26b8eac
Binary files /dev/null and b/.playwright/snapshots/components/FilterList.test.ts-snapshots/FilterList-Playground-light-tritanopia-linux.png differ
diff --git a/docs/content/FilterList.mdx b/docs/content/FilterList.mdx
index 547aad27195..687243fcb4c 100644
--- a/docs/content/FilterList.mdx
+++ b/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.
diff --git a/e2e/components/FilterList.test.ts b/e2e/components/FilterList.test.ts
new file mode 100644
index 00000000000..b2aaa6493b0
--- /dev/null
+++ b/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()
+ })
+ })
+ }
+ })
+})
diff --git a/generated/components.json b/generated/components.json
index 6d3a67ca306..d755d856a95 100644
--- a/generated/components.json
+++ b/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 \n setSelectedIndex(0)}\n count={32}\n >\n First Filter\n \n setSelectedIndex(1)}\n count={16}\n >\n Second Filter\n \n setSelectedIndex(2)}\n >\n Third Filter\n \n \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",
diff --git a/script/generate-e2e-tests.js b/script/generate-e2e-tests.js
index 76ff402cb72..0e6cc420cbc 100644
--- a/script/generate-e2e-tests.js
+++ b/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',
{
diff --git a/src/FilterList.docs.json b/src/FilterList/FilterList.docs.json
similarity index 100%
rename from src/FilterList.docs.json
rename to src/FilterList/FilterList.docs.json
diff --git a/src/FilterList/FilterList.stories.tsx b/src/FilterList/FilterList.stories.tsx
new file mode 100644
index 00000000000..c98fac8907a
--- /dev/null
+++ b/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
+
+export const Default = () => {
+ const [selectedIndex, setSelectedIndex] = useState(0)
+ return (
+
+ setSelectedIndex(0)} count={32}>
+ First Filter
+
+ setSelectedIndex(1)} count={16}>
+ Second Filter
+
+ setSelectedIndex(2)}>
+ Third Filter
+
+
+ )
+}
+
+export const Playground: ComponentStory = args => {
+ const [selectedIndex, setSelectedIndex] = useState(0)
+ return (
+
+ setSelectedIndex(0)} count={32}>
+ First Filter
+
+ setSelectedIndex(1)} count={16}>
+ Second Filter
+
+ setSelectedIndex(2)}>
+ Third Filter
+
+
+ )
+}
+
+Playground.args = {}
+
+Playground.argTypes = {
+ sx: {
+ controls: false,
+ table: {
+ disabled: true,
+ },
+ },
+}
diff --git a/src/FilterList.tsx b/src/FilterList/FilterList.tsx
similarity index 90%
rename from src/FilterList.tsx
rename to src/FilterList/FilterList.tsx
index 99979f92e1d..8fee74ce2a1 100644
--- a/src/FilterList.tsx
+++ b/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`
list-style-type: none;
@@ -57,7 +57,7 @@ const FilterListItemBase = styled.a`
export type FilterListItemProps = {count?: number} & ComponentProps
-function FilterListItem({children, count, ...rest}: React.PropsWithChildren) {
+const FilterListItem = ({children, count, ...rest}: React.PropsWithChildren) => {
return (
{count && (
diff --git a/src/FilterList/index.ts b/src/FilterList/index.ts
new file mode 100644
index 00000000000..967ba6cf4af
--- /dev/null
+++ b/src/FilterList/index.ts
@@ -0,0 +1 @@
+export {default, FilterListProps, FilterListItemProps} from './FilterList'