From 1971831f39677414445ff89a6c7ee581909f59f4 Mon Sep 17 00:00:00 2001 From: s-sasaki-0529 Date: Mon, 30 Sep 2024 21:32:46 +0900 Subject: [PATCH] =?UTF-8?q?chore:=20SegmentedControl=20=E3=81=AE=20Story?= =?UTF-8?q?=20=E3=82=92=E6=95=B4=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SegmentedControl.stories.tsx | 126 ---------------- .../VRTSegmentedControl.stories.tsx | 135 ------------------ .../stories/SegmentedControl.stories.tsx | 112 +++++++++++++++ .../stories/VRTSegmentedControl.stories.tsx | 83 +++++++++++ 4 files changed, 195 insertions(+), 261 deletions(-) delete mode 100644 packages/smarthr-ui/src/components/SegmentedControl/SegmentedControl.stories.tsx delete mode 100644 packages/smarthr-ui/src/components/SegmentedControl/VRTSegmentedControl.stories.tsx create mode 100644 packages/smarthr-ui/src/components/SegmentedControl/stories/SegmentedControl.stories.tsx create mode 100644 packages/smarthr-ui/src/components/SegmentedControl/stories/VRTSegmentedControl.stories.tsx diff --git a/packages/smarthr-ui/src/components/SegmentedControl/SegmentedControl.stories.tsx b/packages/smarthr-ui/src/components/SegmentedControl/SegmentedControl.stories.tsx deleted file mode 100644 index 8915465c43..0000000000 --- a/packages/smarthr-ui/src/components/SegmentedControl/SegmentedControl.stories.tsx +++ /dev/null @@ -1,126 +0,0 @@ -import { action } from '@storybook/addon-actions' -import { StoryFn } from '@storybook/react' -import * as React from 'react' -import styled from 'styled-components' - -import { - FaChartAreaIcon, - FaChartBarIcon, - FaChartLineIcon, - FaChartPieIcon, - FaTableIcon, -} from '../Icon' - -import { Option, SegmentedControl } from './SegmentedControl' - -export default { - title: 'Buttons（ボタン）/SegmentedControl', - component: SegmentedControl, -} - -const departmentAndCrewOptions: Option[] = [ - { value: 'departments', content: '部署' }, - { value: 'crews', content: '従業員' }, - { value: 'both', content: '部署と従業員' }, -] -const graphOptions: Option[] = [ - { value: 'table', ariaLabel: 'テーブル', content: }, - { value: 'chartBar', ariaLabel: 'バーチャート', content: }, - { value: 'chartArea', ariaLabel: 'エリアチャート', content: }, - { value: 'chartLine', ariaLabel: 'ラインチャート', content: }, - { value: 'chartPie', ariaLabel: 'パイチャート', content: }, -] - -export const All: StoryFn = () => { - const [value1, setValue1] = React.useState('departments') - const [value2, setValue2] = React.useState('both') - const [value3, setValue3] = React.useState('chartArea') - const [value4, setValue4] = React.useState(null) - const [value5, setValue5] = React.useState(null) - - return ( - -
Default
-
- { - action('clicked')(value) - setValue1(value) - }} - aria-labelledby="dt-default" - /> -
-
Small
-
- { - action('clicked')(value) - setValue2(value) - }} - size="s" - aria-labelledby="dt-small" - /> -
-
Icon
-
- { - action('clicked')(value) - setValue3(value) - }} - isSquare - aria-labelledby="dt-icon" - /> -
-
Small icon
-
- { - action('clicked')(value) - setValue4(value) - }} - size="s" - isSquare - aria-labelledby="dt-small-icon" - /> -
-
Disabled
-
- ({ - ...option, - disabled: i === 2 || i === 4, - }))} - value={value5} - onClickOption={(value) => { - action('clicked')(value) - setValue5(value) - }} - aria-labelledby="dt-disabled" - /> -
- - ) -} -All.storyName = 'all' - -const List = styled.dl` - padding: 1rem; - margin: 0; - - dt { - margin-bottom: 0.5rem; - } - dd { - margin-left: 0; - margin-bottom: 1rem; - } -` diff --git a/packages/smarthr-ui/src/components/SegmentedControl/VRTSegmentedControl.stories.tsx b/packages/smarthr-ui/src/components/SegmentedControl/VRTSegmentedControl.stories.tsx deleted file mode 100644 index 29a787ecff..0000000000 --- a/packages/smarthr-ui/src/components/SegmentedControl/VRTSegmentedControl.stories.tsx +++ /dev/null @@ -1,135 +0,0 @@ -import { action } from '@storybook/addon-actions' -import { StoryFn } from '@storybook/react' -import * as React from 'react' -import styled from 'styled-components' - -import { InformationPanel } from '../InformationPanel' - -import { All } from './SegmentedControl.stories' - -import { SegmentedControl, SegmentedControlOption } from '.' - -export default { - title: 'Buttons（ボタン）/SegmentedControl', - component: SegmentedControl, - parameters: { - withTheming: true, - }, -} - -const departmentAndCrewOptions: SegmentedControlOption[] = [ - { value: 'departments', content: '部署' }, - { value: 'crews', content: '従業員' }, - { value: 'both', content: '部署と従業員' }, -] - -export const VRTState: StoryFn = () => { - const [value1, setValue1] = React.useState('departments') - - return ( - - - hover, activeなどの状態で表示されます - - -
hover
-
- { - action('clicked')(value) - setValue1(value) - }} - aria-labelledby="dt-hover" - /> -
- -
focus
-
- { - action('clicked')(value) - setValue1(value) - }} - aria-labelledby="dt-focus" - /> -
- -
focus-visible
-
- { - action('clicked')(value) - setValue1(value) - }} - aria-labelledby="dt-focus-visible" - /> -
- -
active
-
- { - action('clicked')(value) - setValue1(value) - }} - aria-labelledby="dt-active" - /> -
- - - ) -} - -export const VRTForcedColors: StoryFn = () => ( - <> - - Chromatic 上では強制カラーモードで表示されます - - - -) - -VRTState.parameters = { - controls: { hideNoControlsWarning: true }, - pseudo: { - hover: ['#dd-hover button'], - focus: ['#dd-focus button'], - focusVisible: ['#dd-focus-visible button'], - active: ['#dd-active button'], - }, -} -VRTForcedColors.parameters = { - chromatic: { forcedColors: 'active' }, -} - -const List = styled.dl` - padding: 1rem; - margin: 0; - - dt { - margin-bottom: 0.5rem; - } - dd { - margin-left: 0; - margin-bottom: 1rem; - } -` - -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/SegmentedControl/stories/SegmentedControl.stories.tsx b/packages/smarthr-ui/src/components/SegmentedControl/stories/SegmentedControl.stories.tsx new file mode 100644 index 0000000000..68abfaa296 --- /dev/null +++ b/packages/smarthr-ui/src/components/SegmentedControl/stories/SegmentedControl.stories.tsx @@ -0,0 +1,112 @@ +import { action } from '@storybook/addon-actions' +import React from 'react' + +import { + FaChartAreaIcon, + FaChartBarIcon, + FaChartLineIcon, + FaChartPieIcon, + FaTableIcon, +} from '../../Icon' +import { Stack } from '../../Layout' +import { type Option, SegmentedControl } from '../SegmentedControl' + +import type { Meta, StoryObj } from '@storybook/react' + +const tableIcon = +const chartBarIcon = +const chartAreaIcon = +const chartLineIcon = +const chartPieIcon = + +export default { + title: 'Buttons（ボタン）/SegmentedControl', + component: SegmentedControl, + render: (args) => , + args: { + options: [ + { value: 'departments', content: '部署' }, + { value: 'crew', content: '従業員' }, + { value: 'both', content: '部署と従業員' }, + ], + value: 'departments', + onClickOption: (value) => action('onClickOption')(value), + size: 'default', + isSquare: false, + className: '', + }, + parameters: { + chromatic: { disableSnapshot: true }, + }, +} as Meta + +export const SegmentedControlControl: StoryObj = { + name: 'Playground', + args: {}, +} + +export const Options: StoryObj = { + name: 'options', + render: (args) => ( + + + + + + ), +} + +export const Value: StoryObj = { + name: 'value', + render: (args) => ( + + + + + + + ), +} + +export const Size: StoryObj = { + name: 'size', + render: (args) => ( + + + + + ), +} + +export const IsSquare: StoryObj = { + name: 'isSquare', + render: (args) => ( + + + + + ), +} diff --git a/packages/smarthr-ui/src/components/SegmentedControl/stories/VRTSegmentedControl.stories.tsx b/packages/smarthr-ui/src/components/SegmentedControl/stories/VRTSegmentedControl.stories.tsx new file mode 100644 index 0000000000..6c4732345e --- /dev/null +++ b/packages/smarthr-ui/src/components/SegmentedControl/stories/VRTSegmentedControl.stories.tsx @@ -0,0 +1,83 @@ +import { fireEvent, userEvent, within } from '@storybook/test' +import React from 'react' + +import { FaChartAreaIcon, FaChartBarIcon, FaChartLineIcon } from '../../Icon' +import { Stack } from '../../Layout' +import { Option, SegmentedControl } from '../SegmentedControl' + +import type { StoryObj } from '@storybook/react' + +const chartBarIcon = +const chartAreaIcon = +const chartLineIcon = + +const textOptions = (disabled: boolean): Option[] => [ + { value: '1', content: '部署', disabled }, + { value: '2', content: '従業員', disabled }, + { value: '3', content: '部署と従業員', disabled }, +] + +const iconOptions = (disabled: boolean): Option[] => [ + { value: '1', content: chartBarIcon, disabled }, + { value: '2', content: chartAreaIcon, disabled }, + { value: '3', content: chartLineIcon, disabled }, +] + +export default { + title: 'Buttons（ボタン）/SegmentedControl/VRT', + /* ペアワイズ法による網羅 */ + // options.content options.disabled value size isSquare + // icon true null default true + // text false null s false + // text true 3 s true + // text false 1 default false + // icon false 3 default false + // icon true 1 s false + // icon false 1 s true + render: (args: any) => ( + + + + + + + + + + ), + parameters: { + chromatic: { disableSnapshot: false }, + }, + tags: ['!autodocs'], +} + +export const VRT = {} + +export const VRTHover = { + ...VRT, + args: { + id: 'hover', + }, + parameters: { + pseudo: { + hover: ['#hover .smarthr-ui-SegmentedControl'], + }, + // MEMO: VRT として機能していないので、解決するまでスナップショットを無効化 + chromatic: { disableSnapshot: true }, + }, +} + +export const VRTKeyboardFocus: StoryObj = { + ...VRT, + play: async () => { + userEvent.tab() + userEvent.tab() + }, +} + +export const VRTForcedColors: StoryObj = { + ...VRT, + parameters: { + chromatic: { forcedColors: 'active' }, + }, +}