-
Notifications
You must be signed in to change notification settings - Fork 25
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
FCT-1188: filters: quick filters: create quick filters component (#2954)
* feat: deprecate Tag's `type` property, introduce `tone` as replacement * chore(tag): add visual tests for new 'tone' prop * chore: add more docs * chore: changeset added * fix(tag): layout adjustments (font-size, spacings, gaps) * fix(tag): disable text-selection (cause ui-component) * fix(tag): fix html semantics + add missing focus outlines * chore(quick-filters): add visual test * test(quick-filters): add unit-test * fix(tag): display as regular flex-element again, to prevent side-effects * fix: fix visual test * fix(tag): fix visual test * fix: visualtest for QuickFilters * fix: remove Tag reference from QuickFilters test * fix: Update packages/components/quick-filters/src/quick-filters.stories.tsx Co-authored-by: Byron Wall <[email protected]> * fix(tag): ux review fixes (revert font-size change, add missing gap between drag-icon & label) * fix(tag): add not-allowed cursor when isDisabled is true * fix(quick-filters): remove leftover comment * fix(quick-filters): update handleItemClick in QuickFilters test * fix(quick-filters): update tone prop in QuickFilters component --------- Co-authored-by: Byron Wall <[email protected]>
- Loading branch information
1 parent
38c2dfe
commit 7b68886
Showing
18 changed files
with
433 additions
and
121 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| '@commercetools-uikit/tag': minor | ||
| --- | ||
|
|
||
| Deprecated 'type' property in favor of 'tone' for better clarity and flexibility. New tone 'surface' added. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1 @@ | ||
| The `QuickFilters` component displays a selection of `Tag` components that represent the available filter actions. | ||
|
|
||
| This description is a stub and shold be expanded as development continues. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,31 @@ | ||
| import { useState } from 'react'; | ||
| import QuickFilters from '@commercetools-uikit/quick-filters'; | ||
|
|
||
| /**TODO: EXPAND THIS */ | ||
| const Example = () => <QuickFilters />; | ||
| const App = () => { | ||
| const [items, setItems] = useState([ | ||
| { | ||
| id: '1', | ||
| label: 'Accepted', | ||
| isActive: true, | ||
| }, | ||
| { | ||
| id: '2', | ||
| label: 'Rejected', | ||
| isActive: false, | ||
| }, | ||
| ]); | ||
|
|
||
| export default Example; | ||
| const onItemClick = (clickedItem) => { | ||
| const updatedItems = items.map((item) => { | ||
| return { | ||
| ...item, | ||
| isActive: item.id === clickedItem.id ? !item.isActive : false, | ||
| }; | ||
| }); | ||
| setItems(updatedItems); | ||
| }; | ||
|
|
||
| return <QuickFilters items={items} onItemClick={onItemClick} />; | ||
| }; | ||
|
|
||
| export default App; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| import { Meta, Markdown } from '@storybook/blocks'; | ||
| import ReadMe from './../README.md?raw' | ||
|
|
||
| <Meta tags={['local-dev']} title="components/QuickFilters/Readme" /> | ||
| <Meta title="components/QuickFilters/Readme" /> | ||
|
|
||
| <Markdown>{ReadMe}</Markdown> |
26 changes: 20 additions & 6 deletions
26
packages/components/quick-filters/src/quick-filters.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,26 @@ | ||
| import { screen, render } from '../../../../test/test-utils'; | ||
| import QuickFilters from './quick-filters'; | ||
|
|
||
| /** | ||
| * THIS IS A PLACEHOLDER, PLEASE UPDATE IT | ||
| */ | ||
| describe('QuickFilters', () => { | ||
| it('should render the quick-filters', async () => { | ||
| await render(<QuickFilters label="quickfilters" />); | ||
| await screen.findByText('quickfilters'); | ||
| it('should render items and propagate item-clicks', async () => { | ||
| const items = [ | ||
| { id: '1', label: 'Foo', isActive: true }, | ||
| { id: '2', label: 'Bar', isActive: false }, | ||
| ]; | ||
|
|
||
| const handleItemClick = jest.fn(); | ||
|
|
||
| await render(<QuickFilters items={items} onItemClick={handleItemClick} />); | ||
|
|
||
| const button1 = (await screen.findByText('Foo')).closest('button'); | ||
| const button2 = (await screen.findByText('Bar')).closest('button'); | ||
|
|
||
| expect(button1).toBeInTheDocument(); | ||
| expect(button2).toBeInTheDocument(); | ||
|
|
||
| button2?.click(); | ||
| expect(handleItemClick).toHaveBeenCalledWith(items[1]); | ||
| button1?.click(); | ||
| expect(handleItemClick).toHaveBeenCalledWith(items[0]); | ||
| }); | ||
| }); |
53 changes: 44 additions & 9 deletions
53
packages/components/quick-filters/src/quick-filters.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,22 +1,57 @@ | ||
| import type { Meta, StoryObj } from '@storybook/react'; | ||
| import QuickFilters from './quick-filters'; | ||
| import QuickFilters, { | ||
| TQuickFiltersItem, | ||
| TQuickFiltersProps, | ||
| } from './quick-filters'; | ||
| import { useState } from 'react'; | ||
|
|
||
| const meta: Meta<typeof QuickFilters> = { | ||
| title: 'components/QuickFilters', | ||
| component: QuickFilters, | ||
| tags: ['local-dev'], | ||
| argTypes: { | ||
| label: { | ||
| control: 'text', | ||
| }, | ||
| }, | ||
| //tags: ['local-dev'], | ||
| }; | ||
| export default meta; | ||
|
|
||
| type Story = StoryObj<typeof QuickFilters>; | ||
|
|
||
| /** The `QuickFilters` component displays a selection of `Tag` components that represent the available filter actions. */ | ||
| export const BasicExample: Story = { | ||
| args: { | ||
| label: 'A component for applying static filter controls', | ||
| render: (args) => { | ||
| // eslint-disable-next-line react-hooks/rules-of-hooks | ||
| const [items, setItems] = useState<TQuickFiltersProps['items']>([ | ||
| { | ||
| id: '1', | ||
| label: 'Accepted (234)', | ||
| isActive: true, | ||
| }, | ||
| { | ||
| id: '2', | ||
| label: 'Rejected (25)', | ||
| isActive: false, | ||
| }, | ||
| { | ||
| id: '3', | ||
| label: 'Canceled (3)', | ||
| isActive: false, | ||
| }, | ||
| { | ||
| id: '4', | ||
| label: 'Drafts (58)', | ||
| isActive: false, | ||
| }, | ||
| ]); | ||
|
|
||
| const onItemClick = (clickedItem: TQuickFiltersItem) => { | ||
| const updatedItems = items.map((item) => { | ||
| return { | ||
| ...item, | ||
| isActive: item.id === clickedItem.id ? !item.isActive : false, | ||
| }; | ||
| }); | ||
| setItems(updatedItems); | ||
| }; | ||
|
|
||
| return <QuickFilters {...args} items={items} onItemClick={onItemClick} />; | ||
| }, | ||
| args: {}, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,56 @@ | ||
| import Tag from '@commercetools-uikit/tag'; | ||
| import { css } from '@emotion/react'; | ||
| import { designTokens } from '@commercetools-uikit/design-system'; | ||
|
|
||
| export type TQuickFiltersItem = { | ||
| /** unique identifier for the item. */ | ||
| id: string; | ||
| /* label to display */ | ||
| label: string; | ||
| /* the current active state of the item */ | ||
| isActive: boolean; | ||
| }; | ||
|
|
||
| export type TQuickFiltersProps = { | ||
| /** | ||
| * This is a stub prop! | ||
| * collection of quick filter items | ||
| * | ||
| * @param item.id unique identifier for the item. | ||
| * @param item.label label to display | ||
| * @param item.isActive the current active state of the item | ||
| */ | ||
| label: string; | ||
| items: TQuickFiltersItem[]; | ||
|
|
||
| /** callback fn, executed when an item is clicked */ | ||
| onItemClick: (item: TQuickFiltersItem) => void; | ||
| }; | ||
|
|
||
| function QuickFilters(props: TQuickFiltersProps) { | ||
| return <div>{props.label}</div>; | ||
| const listStyles = css` | ||
| all: unset; | ||
| display: inline-flex; | ||
| flex-wrap: wrap; | ||
| gap: ${designTokens.spacing20}; | ||
| `; | ||
|
|
||
| const listItemStyles = css` | ||
| all: unset; | ||
| `; | ||
|
|
||
| function QuickFilters({ items, onItemClick }: TQuickFiltersProps) { | ||
| return ( | ||
| <ul css={listStyles}> | ||
| {items.map((item) => ( | ||
| <li key={item.id} css={listItemStyles}> | ||
| <Tag | ||
| tone={item.isActive ? 'primary' : 'surface'} | ||
| onClick={() => onItemClick(item)} | ||
| > | ||
| {item.label} | ||
| </Tag> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| ); | ||
| } | ||
|
|
||
| export default QuickFilters; |
19 changes: 17 additions & 2 deletions
19
packages/components/quick-filters/src/quick-filters.visualroute.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,26 @@ | ||
| import { Suite, Spec } from '../../../../test/percy'; | ||
| import QuickFilters from './quick-filters'; | ||
|
|
||
| export const routePath = '/quick-filters'; | ||
|
|
||
| export const component = () => ( | ||
| <Suite> | ||
| <Spec label="this is a placeholder test"> | ||
| {/**ACTUAL TEST GOES HERE */} | ||
| <Spec label="Renders an active + inactive item"> | ||
| <QuickFilters | ||
| items={[ | ||
| { | ||
| id: '1', | ||
| label: 'Accepted', | ||
| isActive: true, | ||
| }, | ||
| { | ||
| id: '2', | ||
| label: 'Rejected', | ||
| isActive: false, | ||
| }, | ||
| ]} | ||
| onItemClick={() => {}} | ||
| /> | ||
| </Spec> | ||
| </Suite> | ||
| ); |
8 changes: 4 additions & 4 deletions
8
packages/components/quick-filters/src/quick-filters.visualspec.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,12 @@ | ||
| import percySnapshot from '@percy/puppeteer'; | ||
| import { getDocument, queries } from 'pptr-testing-library'; | ||
|
|
||
| describe('FiltersList', () => { | ||
| describe('QuickFilters', () => { | ||
| beforeAll(async () => { | ||
| await page.goto(`${globalThis.HOST}/quick-filters`); | ||
| }); | ||
|
|
||
| it.skip('Default', async () => { | ||
| // THIS IS A STUB | ||
| it('Default', async () => { | ||
| await page.waitForSelector('text/Renders an active + inactive item'); | ||
| await percySnapshot(page, 'QuickFilters'); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.