diff --git a/packages/smarthr-ui/src/components/Badge/Badge.stories.tsx b/packages/smarthr-ui/src/components/Badge/Badge.stories.tsx deleted file mode 100644 index b365e79ff0..0000000000 --- a/packages/smarthr-ui/src/components/Badge/Badge.stories.tsx +++ /dev/null @@ -1,93 +0,0 @@ -import { StoryFn } from '@storybook/react' -import React from 'react' -import styled from 'styled-components' - -import { FaBellIcon } from '../Icon' -import { Cluster, Stack } from '../Layout' -import { Text } from '../Text' -import { VisuallyHiddenText } from '../VisuallyHiddenText' - -import { Badge } from './Badge' - -export default { - title: 'States（状態）/Badge', - component: Badge, -} - -export const All: StoryFn = () => ( - - - 種類 -
- - - - - -

- dot を与えるとドットのみの表示になります。 - count を与えても無視します。 -
- 視覚情報しか持たないため、別途アクセシブルネームを与える必要があります。 -

- - - 通知があります - - 通知があります - -

- 最大値の標準は99です。必要に応じて overflowCount で変えられます。 -

- - - - - -

- children を与えると、その右肩に表示します。 -

- - - - - - - - -

- 標準ではcount=0の場合は Badge を表示しません。showZero{' '} - を与えると表示します。 -

- - - - - - - - - - - -
- - - 色 -
- - - - - - - - - - -
- - -) - -const DtText = styled(Text).attrs({ forwardedAs: 'dt', weight: 'bold', color: 'TEXT_GREY' })`` diff --git a/packages/smarthr-ui/src/components/Badge/VRTBadge.stories.tsx b/packages/smarthr-ui/src/components/Badge/VRTBadge.stories.tsx deleted file mode 100644 index 4661e52e25..0000000000 --- a/packages/smarthr-ui/src/components/Badge/VRTBadge.stories.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { StoryFn } from '@storybook/react' -import React from 'react' -import styled from 'styled-components' - -import { InformationPanel } from '../InformationPanel' - -import { Badge } from './Badge' -import { All } from './Badge.stories' - -export default { - title: 'States（状態）/Badge', - component: Badge, - parameters: { - withTheming: true, - }, -} - -export const VRTBadgeForcedColors: StoryFn = () => ( - - - Chromatic 上では強制カラーモードで表示されます - - - -) - -VRTBadgeForcedColors.parameters = { - chromatic: { forcedColors: 'active' }, -} - -const Wrapper = styled.div` - height: 100vh; - box-sizing: border-box; - padding: 24px; - color: ${({ theme }) => theme.color.TEXT_BLACK}; -` - -const VRTInformationPanel = styled(InformationPanel)` - margin-bottom: 24px; -` diff --git a/packages/smarthr-ui/src/components/Badge/stories/Badge.stories.tsx b/packages/smarthr-ui/src/components/Badge/stories/Badge.stories.tsx new file mode 100644 index 0000000000..bc793bad03 --- /dev/null +++ b/packages/smarthr-ui/src/components/Badge/stories/Badge.stories.tsx @@ -0,0 +1,92 @@ +import React from 'react' + +import { Cluster, Stack } from '../../Layout' +import { Text } from '../../Text' +import { Badge } from '../Badge' + +import type { Meta, StoryObj } from '@storybook/react' + +export default { + title: 'States（状態）/Badge', + component: Badge, + render: (args) => , + args: { + count: 0, + overflowCount: 99, + showZero: true, + type: 'blue', + dot: false, + }, + parameters: { + chromatic: { disableSnapshot: true }, + }, +} as Meta + +export const BadgeControl: StoryObj = { + name: 'Playground', + args: {}, +} + +export const Count: StoryObj = { + name: 'count', + render: (args) => ( + + {new Array(10).fill(0).map((_, i) => ( + + ))} + + ), + args: {}, +} + +export const OverflowCount: StoryObj = { + name: 'overflowCount', + render: (args) => ( + + + + + + ), + args: { + overflowCount: 99, + }, +} + +export const ShowZero: StoryObj = { + name: 'showZero', + render: (args) => ( + + + true + + + + false + + + + ), + args: { + showZero: true, + }, +} + +export const Type: StoryObj = { + name: 'type', + render: (args) => ( + + + + + + + ), + args: {}, +} + +export const Dot: StoryObj = { + name: 'dot', + render: (args) => , + args: {}, +} diff --git a/packages/smarthr-ui/src/components/Badge/stories/VRTBadge.stories.tsx b/packages/smarthr-ui/src/components/Badge/stories/VRTBadge.stories.tsx new file mode 100644 index 0000000000..7903f1b4ed --- /dev/null +++ b/packages/smarthr-ui/src/components/Badge/stories/VRTBadge.stories.tsx @@ -0,0 +1,44 @@ +import { fireEvent, within } from '@storybook/test' +import React from 'react' + +import { Cluster, Stack } from '../../Layout' +import { Badge } from '../Badge' + +import type { StoryObj } from '@storybook/react' + +export default { + title: 'States（状態）/Badge/VRT', + /* ペアワイズ法は使わずにすべての組み合わせを網羅する */ + render: (args: any) => { + const types = ['grey', 'blue', 'red', 'yellow'] as const + return ( + + {types.map((type, i) => ( + + <> + + + + + + + + + ))} + + ) + }, + parameters: { + chromatic: { disableSnapshot: false }, + }, + tags: ['!autodocs'], +} + +export const VRT = {} + +export const VRTForcedColors: StoryObj = { + ...VRT, + parameters: { + chromatic: { forcedColors: 'active' }, + }, +}