Addon Vitest: Add experimental vitest integration #28768
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import { fn } from '@storybook/test'; | ||
|
Contributor
There was a problem hiding this comment. style: Consider using a more descriptive name for the imported |
||
| import { FilterToggle } from './FilterToggle'; | ||
|
|
||
| export default { | ||
| component: FilterToggle, | ||
| args: { | ||
| active: false, | ||
| onClick: fn(), | ||
|
Contributor
There was a problem hiding this comment. check: Ensure that the |
||
| }, | ||
| }; | ||
|
|
||
| export const Errors = { | ||
| args: { | ||
| count: 2, | ||
| label: 'Error', | ||
| status: 'critical', | ||
| }, | ||
| }; | ||
|
|
||
| export const ErrorsActive = { | ||
| args: { | ||
| ...Errors.args, | ||
|
Contributor
There was a problem hiding this comment. style: Verify that spreading |
||
| active: true, | ||
| }, | ||
| }; | ||
|
|
||
| export const Warning = { | ||
| args: { | ||
| count: 12, | ||
| label: 'Warning', | ||
| status: 'warning', | ||
| }, | ||
| }; | ||
|
|
||
| export const WarningActive = { | ||
| args: { | ||
| ...Warning.args, | ||
|
Contributor
There was a problem hiding this comment. style: Similar to |
||
| active: true, | ||
| }, | ||
| }; | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import { Badge as BaseBadge, IconButton } from '@storybook/components'; | ||
| import { css, styled } from '@storybook/theming'; | ||
| import React, { type ComponentProps } from 'react'; | ||
|
||
|
|
||
| const Badge = styled(BaseBadge)(({ theme }) => ({ | ||
| padding: '4px 8px', | ||
| fontSize: theme.typography.size.s1, | ||
| })); | ||
|
|
||
| const Button = styled(IconButton)( | ||
|
Contributor
There was a problem hiding this comment. logic: The nested hover styles could be simplified by using a single hover selector with conditional logic for different statuses. |
||
| ({ theme }) => ({ | ||
| fontSize: theme.typography.size.s2, | ||
| '&:hover [data-badge][data-status=warning], [data-badge=true][data-status=warning]': { | ||
| background: '#E3F3FF', | ||
| borderColor: 'rgba(2, 113, 182, 0.1)', | ||
| color: '#0271B6', | ||
| }, | ||
| '&:hover [data-badge][data-status=critical], [data-badge=true][data-status=critical]': { | ||
| background: theme.background.negative, | ||
| boxShadow: `inset 0 0 0 1px rgba(182, 2, 2, 0.1)`, | ||
| color: theme.color.negativeText, | ||
| }, | ||
| }), | ||
| ({ active, theme }) => | ||
| !active && | ||
| css({ | ||
| '&:hover': { | ||
| color: theme.base === 'light' ? theme.color.defaultText : theme.color.light, | ||
| }, | ||
| }) | ||
| ); | ||
|
|
||
| const Label = styled.span(({ theme }) => ({ | ||
| color: theme.base === 'light' ? theme.color.defaultText : theme.color.light, | ||
| })); | ||
|
|
||
| interface FilterToggleProps { | ||
| active: boolean; | ||
| count: number; | ||
| label: string; | ||
| status: ComponentProps<typeof Badge>['status']; | ||
| } | ||
|
|
||
| export const FilterToggle = ({ | ||
|
Contributor
There was a problem hiding this comment. check: Ensure that the |
||
| active, | ||
| count, | ||
| label, | ||
| status, | ||
| ...props | ||
| }: FilterToggleProps & Omit<ComponentProps<typeof Button>, 'status'>) => { | ||
| return ( | ||
| <Button active={active} {...props}> | ||
| <Badge status={status} data-badge={active} data-status={status}> | ||
| {count} | ||
| </Badge> | ||
| <Label>{`${label}${count === 1 ? '' : 's'}`}</Label> | ||
| </Button> | ||
| ); | ||
| }; | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import { fn } from '@storybook/test'; | ||
|
Contributor
There was a problem hiding this comment. style: Consider using a more descriptive name for the imported |
||
|
|
||
| import { SidebarBottomBase } from './SidebarBottom'; | ||
|
|
||
| export default { | ||
| component: SidebarBottomBase, | ||
| args: { | ||
| api: { | ||
| experimental_setFilter: fn(), | ||
| emit: fn(), | ||
| }, | ||
|
Comment on lines
+8
to
+11
Contributor
There was a problem hiding this comment. check: Ensure that the mocked |
||
| }, | ||
| }; | ||
|
|
||
| export const Errors = { | ||
| args: { | ||
| status: { | ||
| one: { 'sidebar-bottom-filter': { status: 'error' } }, | ||
| two: { 'sidebar-bottom-filter': { status: 'error' } }, | ||
|
Comment on lines
+17
to
+19
Contributor
There was a problem hiding this comment. check: Verify that the status keys ( |
||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| export const Warnings = { | ||
| args: { | ||
| status: { | ||
| one: { 'sidebar-bottom-filter': { status: 'warn' } }, | ||
| two: { 'sidebar-bottom-filter': { status: 'warn' } }, | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| export const Both = { | ||
| args: { | ||
| status: { | ||
| one: { 'sidebar-bottom-filter': { status: 'warn' } }, | ||
| two: { 'sidebar-bottom-filter': { status: 'warn' } }, | ||
| three: { 'sidebar-bottom-filter': { status: 'error' } }, | ||
| four: { 'sidebar-bottom-filter': { status: 'error' } }, | ||
|
Comment on lines
+35
to
+39
Contributor
There was a problem hiding this comment. style: Consider adding more diverse status scenarios to thoroughly test the component's behavior under different conditions. |
||
| }, | ||
| }, | ||
| }; | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
check: Ensure that the new section for version 8.2.x to 8.3.x is correctly linked in the table of contents.