Skip to content

Commit

Permalink
refactor(FilterList): add files to folder, add storybook and e2e test…
Browse files Browse the repository at this point in the history
…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>
  • Loading branch information
radglob and radglob committed Apr 11, 2023
1 parent fcc34dc commit 7d774b1
Show file tree
Hide file tree
Showing 26 changed files with 185 additions and 50 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion docs/content/FilterList.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
61 changes: 61 additions & 0 deletions e2e/components/FilterList.test.ts
Original file line number Diff line number Diff line change
@@ -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()
})
})
}
})
})
95 changes: 50 additions & 45 deletions generated/components.json
Original file line number Diff line number Diff line change
Expand Up @@ -79,51 +79,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",
Expand Down Expand Up @@ -2060,6 +2015,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",
Expand Down
15 changes: 15 additions & 0 deletions script/generate-e2e-tests.js
Original file line number Diff line number Diff line change
Expand Up @@ -421,6 +421,21 @@ const components = new Map([
],
},
],
[
'FilterList',
{
stories: [
{
id: 'components-filterlist--default',
name: 'Default',
},
{
id: 'components-filterlist--playground',
name: 'Playground',
},
],
},
],
[
'Flash',
{
Expand Down
File renamed without changes.
53 changes: 53 additions & 0 deletions src/FilterList/FilterList.stories.tsx
Original file line number Diff line number Diff line change
@@ -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,
},
},
}
8 changes: 4 additions & 4 deletions src/FilterList.tsx → src/FilterList/FilterList.tsx
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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 && (
Expand Down
1 change: 1 addition & 0 deletions src/FilterList/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export {default, FilterListProps, FilterListItemProps} from './FilterList'

0 comments on commit 7d774b1

Please sign in to comment.