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'