diff --git a/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Default-dark-colorblind-linux.png new file mode 100644 index 00000000000..765514455e5 Binary files /dev/null and b/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Default-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Default-dark-dimmed-linux.png new file mode 100644 index 00000000000..9cc3da87a87 Binary files /dev/null and b/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Default-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Default-dark-high-contrast-linux.png new file mode 100644 index 00000000000..c0bc296dec9 Binary files /dev/null and b/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Default-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Default-dark-linux.png b/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Default-dark-linux.png new file mode 100644 index 00000000000..765514455e5 Binary files /dev/null and b/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Default-dark-linux.png differ diff --git a/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Default-dark-tritanopia-linux.png new file mode 100644 index 00000000000..765514455e5 Binary files /dev/null and b/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Default-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Default-light-colorblind-linux.png b/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Default-light-colorblind-linux.png new file mode 100644 index 00000000000..07cbec42362 Binary files /dev/null and b/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Default-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Default-light-high-contrast-linux.png new file mode 100644 index 00000000000..423d2cce13f Binary files /dev/null and b/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Default-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Default-light-linux.png b/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Default-light-linux.png new file mode 100644 index 00000000000..f4f6786e979 Binary files /dev/null and b/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Default-light-linux.png differ diff --git a/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Default-light-tritanopia-linux.png new file mode 100644 index 00000000000..07cbec42362 Binary files /dev/null and b/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Default-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Playground-dark-colorblind-linux.png b/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Playground-dark-colorblind-linux.png new file mode 100644 index 00000000000..765514455e5 Binary files /dev/null and b/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Playground-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Playground-dark-dimmed-linux.png b/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Playground-dark-dimmed-linux.png new file mode 100644 index 00000000000..9cc3da87a87 Binary files /dev/null and b/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Playground-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Playground-dark-high-contrast-linux.png b/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Playground-dark-high-contrast-linux.png new file mode 100644 index 00000000000..c0bc296dec9 Binary files /dev/null and b/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Playground-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Playground-dark-linux.png b/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Playground-dark-linux.png new file mode 100644 index 00000000000..765514455e5 Binary files /dev/null and b/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Playground-dark-linux.png differ diff --git a/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Playground-dark-tritanopia-linux.png b/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Playground-dark-tritanopia-linux.png new file mode 100644 index 00000000000..765514455e5 Binary files /dev/null and b/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Playground-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Playground-light-colorblind-linux.png b/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Playground-light-colorblind-linux.png new file mode 100644 index 00000000000..07cbec42362 Binary files /dev/null and b/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Playground-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Playground-light-high-contrast-linux.png b/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Playground-light-high-contrast-linux.png new file mode 100644 index 00000000000..423d2cce13f Binary files /dev/null and b/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Playground-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Playground-light-linux.png b/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Playground-light-linux.png new file mode 100644 index 00000000000..f4f6786e979 Binary files /dev/null and b/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Playground-light-linux.png differ diff --git a/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Playground-light-tritanopia-linux.png b/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Playground-light-tritanopia-linux.png new file mode 100644 index 00000000000..07cbec42362 Binary files /dev/null and b/.playwright/snapshots/components/FilteredSearch.test.ts-snapshots/FilteredSearch-Playground-light-tritanopia-linux.png differ diff --git a/docs/content/FilteredSearch.mdx b/docs/content/FilteredSearch.mdx index fbe2b014830..ba20ba88690 100644 --- a/docs/content/FilteredSearch.mdx +++ b/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. diff --git a/e2e/components/FilteredSearch.test.ts b/e2e/components/FilteredSearch.test.ts new file mode 100644 index 00000000000..5b213d7dcac --- /dev/null +++ b/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() + }) + }) + } + }) +}) diff --git a/generated/components.json b/generated/components.json index d755d856a95..5ca51d847a6 100644 --- a/generated/components.json +++ b/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 \n \n Filter\n \n \n Item 1\n Item 2\n Item 3\n \n \n \n \n \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", diff --git a/script/generate-e2e-tests.js b/script/generate-e2e-tests.js index 0e6cc420cbc..84534470bca 100644 --- a/script/generate-e2e-tests.js +++ b/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', { diff --git a/src/FilteredSearch.docs.json b/src/FilteredSearch/FilteredSearch.docs.json similarity index 100% rename from src/FilteredSearch.docs.json rename to src/FilteredSearch/FilteredSearch.docs.json diff --git a/src/FilteredSearch/FilteredSearch.stories.tsx b/src/FilteredSearch/FilteredSearch.stories.tsx new file mode 100644 index 00000000000..6bd4f045e7e --- /dev/null +++ b/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 + +export const Default = () => ( + + + Filter + + + Item 1 + Item 2 + Item 3 + + + + + +) + +export const Playground: ComponentStory = args => ( + + + Filter + + + Item 1 + Item 2 + Item 3 + + + + + +) + +Playground.args = {} + +Playground.argTypes = {} diff --git a/src/FilteredSearch.tsx b/src/FilteredSearch/FilteredSearch.tsx similarity index 83% rename from src/FilteredSearch.tsx rename to src/FilteredSearch/FilteredSearch.tsx index 73d3c280ffd..ba0172cdc78 100644 --- a/src/FilteredSearch.tsx +++ b/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` display: flex; diff --git a/src/FilteredSearch/index.ts b/src/FilteredSearch/index.ts new file mode 100644 index 00000000000..759088b2fe8 --- /dev/null +++ b/src/FilteredSearch/index.ts @@ -0,0 +1 @@ +export {default, FilteredSearchProps} from './FilteredSearch'