From 104ad850905b42821272ea025719c81ede57a47c Mon Sep 17 00:00:00 2001 From: Dominika Hustinova Date: Mon, 9 Sep 2024 13:03:47 +0200 Subject: [PATCH] chore(Slider): migrate stories from CSF2 to CSF3 --- .../src/Slider/Slider.stories.tsx | 578 ++++++------------ 1 file changed, 195 insertions(+), 383 deletions(-) diff --git a/packages/orbit-components/src/Slider/Slider.stories.tsx b/packages/orbit-components/src/Slider/Slider.stories.tsx index 09be7e0ecb..d5b94972b9 100644 --- a/packages/orbit-components/src/Slider/Slider.stories.tsx +++ b/packages/orbit-components/src/Slider/Slider.stories.tsx @@ -1,4 +1,5 @@ import * as React from "react"; +import type { Meta, StoryObj } from "@storybook/react"; import { action } from "@storybook/addon-actions"; import type { Value } from "./types"; @@ -6,471 +7,282 @@ import RenderInRtl from "../utils/rtl/RenderInRtl"; import Slider from "."; -export default { +const meta: Meta = { title: "Slider", -}; - -export const Default = ({ label, valueDescription, minValue, maxValue, dataTest }) => { - return ( - - ); -}; + component: Slider, + + args: { + label: "Depart from Prague", + valueDescription: "01:00 PM – 11:59 PM", + minValue: 1, + maxValue: 100, + step: 1, + defaultValue: 1, + onChange: action("onChange"), + }, -Default.story = { parameters: { - info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.", + controls: { + exclude: ["onChange"], + }, }, }; -Default.args = { - label: "Depart from Prague", - valueDescription: "01:00 PM – 11:59 PM", - minValue: 1, - maxValue: 100, - dataTest: "01:00 PM – 11:59 PM", -}; - -export const SliderWithHistogram = ({ - label, - valueDescription, - histogramDescription, - defaultValue, - minValue, - maxValue, - histogramData, -}) => { - return ( -
- parseInt(v, 10))} - /> -
- ); -}; - -SliderWithHistogram.story = { - name: "Slider with Histogram", +export default meta; +type Story = StoryObj; +export const Default: Story = { parameters: { - info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.", + info: "This is the default configuration of this component. Visit Orbit.Kiwi for more detailed guidelines.", }, }; -SliderWithHistogram.args = { - label: "Depart from Prague", - valueDescription: "01:00 PM – 11:59 PM", - defaultValue: 12, - minValue: 1, - maxValue: 24, - histogramData: [ - 11, 25, 37, 5, 21, 27, 24, 33, 16, 21, 22, 2, 11, 25, 37, 5, 21, 27, 24, 33, 16, 21, 22, 2, - ].map(v => v.toString()), - histogramDescription: "20 of 133 flights", -}; - -export const RangeSlider = ({ label, defaultValue, minValue, maxValue, step }) => { - const [times, setTimes] = React.useState(defaultValue); - const valueDescription = `${times[0]}:00 - ${times[1]}:00`; - - return ( - { - setTimes(v); - action("onChange")(v); - }} - label={label} - valueDescription={valueDescription} - defaultValue={defaultValue} - minValue={minValue} - maxValue={maxValue} - step={step} - /> - ); -}; - -RangeSlider.story = { - parameters: { - info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.", +export const SliderWithHistogram: Story = { + render: args => ( +
+ +
+ ), + + args: { + defaultValue: 12, + maxValue: 24, + histogramData: [ + 11, 25, 37, 5, 21, 27, 24, 33, 16, 21, 22, 2, 11, 25, 37, 5, 21, 27, 24, 33, 16, 21, 22, 2, + ], + histogramDescription: "20 of 133 flights", }, }; -RangeSlider.args = { - label: "Depart from Prague", - defaultValue: ["1", "5"].map(v => parseInt(v, 10)), - minValue: 1, - maxValue: 24, - step: 1, -}; +export const RangeSlider: Story = { + render: ({ defaultValue, ...args }) => { + const [times, setTimes] = React.useState(defaultValue as Value); + const valueDescription = `${times[0]}:00 - ${times[1]}:00`; -export const RangeSliderWithHistogram = ({ - label, - defaultValue, - histogramData, - histogramDescription, - minValue, - maxValue, - step, -}) => { - const [times, setTimes] = React.useState(defaultValue); - const valueDescription = `${times[0]}:00 - ${times[1]}:00`; - return ( -
+ return ( { setTimes(v); action("onChange")(v); }} - label={label} - valueDescription={valueDescription} - histogramDescription={histogramDescription} defaultValue={defaultValue} - histogramData={histogramData.map(v => parseInt(v, 10))} - minValue={minValue} - maxValue={maxValue} - step={step} + valueDescription={valueDescription} /> -
- ); -}; - -RangeSliderWithHistogram.story = { - name: "Range Slider with Histogram", + ); + }, parameters: { - info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.", + controls: { + exclude: ["onChange", "valueDescription"], + }, }, -}; - -RangeSliderWithHistogram.args = { - label: "Depart from Prague", - defaultValue: ["0", "24"].map(v => parseInt(v, 10)), - minValue: 0, - maxValue: 48, - step: 2, - histogramData: [ - 11, 25, 37, 5, 21, 27, 24, 33, 16, 21, 22, 2, 11, 25, 37, 5, 21, 27, 24, 33, 16, 21, 22, 2, 11, - ].map(v => v.toString()), - histogramDescription: "20 of 133 flights", -}; -export const SliderWithLoadingHistogram = ({ - histogramDescription, - histogramLoading, - histogramLoadingText, -}) => { - return ( -
- -
- ); + args: { + defaultValue: [1, 5], + maxValue: 24, + }, }; -SliderWithLoadingHistogram.story = { - name: "Slider with loading Histogram", +export const RangeSliderWithHistogram: Story = { + render: ({ defaultValue, ...args }) => { + const [times, setTimes] = React.useState(defaultValue as Value); + const valueDescription = `${times[0]}:00 - ${times[1]}:00`; + return ( +
+ { + setTimes(v); + action("onChange")(v); + }} + defaultValue={defaultValue} + valueDescription={valueDescription} + /> +
+ ); + }, parameters: { - info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.", + controls: { + exclude: ["onChange", "valueDescription"], + }, }, -}; -SliderWithLoadingHistogram.args = { - histogramDescription: "20 of 133 flights", - histogramLoading: true, - histogramLoadingText: "Loading connection data...", + args: { + minValue: 0, + maxValue: 48, + step: 2, + defaultValue: [0, 24], + histogramData: [ + 11, 25, 37, 5, 21, 27, 24, 33, 16, 21, 22, 2, 11, 25, 37, 5, 21, 27, 24, 33, 16, 21, 22, 2, + 11, + ], + histogramDescription: "20 of 133 flights", + }, }; -export const RangeSliderWithLoadingHistogram = ({ - histogramDescription, - histogramLoading, - histogramLoadingText, -}) => { - return ( +export const SliderWithLoadingHistogram: Story = { + render: args => (
- +
- ); -}; - -RangeSliderWithLoadingHistogram.story = { - name: "Range Slider with loading Histogram", + ), - parameters: { - info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.", + args: { + ...SliderWithHistogram.args, + histogramLoading: true, + histogramLoadingText: "Loading connection data...", }, }; -RangeSliderWithLoadingHistogram.args = { - histogramDescription: "20 of 133 flights", - histogramLoading: true, - histogramLoadingText: "Loading connection data...", -}; - -export const SliderPlayground = ({ - ariaLabel, - ariaValueText, - dataTest, - defaultValue, - label, - maxValue, - minValue, - step, - valueDescription, -}) => { - return ( +export const RangeSliderWithLoadingHistogram: Story = { + render: args => (
- +
- ); -}; + ), -SliderPlayground.story = { - name: "Slider playground", - - parameters: { - info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.", + args: { + ...SliderWithLoadingHistogram.args, + defaultValue: [1, 10], }, }; -SliderPlayground.args = { - ariaLabel: "Label of handle", - ariaValueText: "Text alternative of actual value", - dataTest: "test", - defaultValue: 12, - label: "Depart from Prague", - maxValue: 24, - minValue: 1, - step: 1, - valueDescription: "From midnight to 12:00 pm", -}; - -export const RangeSliderPlayground = ({ - ariaLabel, - ariaValueText, - dataTest, - defaultValue, - histogramData, - histogramDescription, - histogramLoading, - histogramLoadingText, - label, - maxValue, - minValue, - step, - valueDescription, -}) => { - return ( +export const SliderPlayground: Story = { + render: args => (
parseInt(v, 10))} - histogramData={histogramData.map(v => parseInt(v, 10))} - histogramDescription={histogramDescription} - histogramLoading={histogramLoading} - histogramLoadingText={histogramLoadingText} - label={label} - maxValue={maxValue} - minValue={minValue} - step={step} - onChange={action("onChange")} onChangeBefore={action("onChangeBefore")} onChangeAfter={action("onChangeAfter")} - valueDescription={valueDescription} + {...args} />
- ); -}; - -RangeSliderPlayground.story = { - name: "Range Slider playground", + ), parameters: { info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.", + controls: { + exclude: ["onChange", "onChangeBefore", "onChangeAfter"], + }, }, -}; -RangeSliderPlayground.args = { - ariaLabel: ["First handle", "Second handle"], - ariaValueText: "Text alternative of actual value", - dataTest: "test", - defaultValue: [1, 12].map(v => v.toString()), - histogramData: [ - 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, - ].map(v => v.toString()), - histogramDescription: "28 of 90 flights", - histogramLoading: false, - histogramLoadingText: "", - label: "Depart from Prague", - maxValue: 24, - minValue: 1, - step: 1, - valueDescription: "From midnight to 12:00 pm", -}; - -export const RtlDefaultSlider = () => { - return ( - - - - ); -}; - -RtlDefaultSlider.story = { - name: "RTL default Slider", - - parameters: { - info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.", + args: { + ...SliderWithLoadingHistogram.args, + ariaLabel: "Label of handle", + ariaValueText: "Text alternative of actual value", + valueDescription: "From midnight to 12:00 pm", }, }; -export const RtlSliderWithHistogram = () => { - return ( - +export const RangeSliderPlayground: Story = { + render: args => { + return (
- - ); -}; - -RtlSliderWithHistogram.story = { - name: "RTL Slider with Histogram", + ); + }, parameters: { info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.", }, -}; -export const RtlRangeSliderWithHistogram = () => { - return ( - -
- -
- - ); + args: { + ariaLabel: ["First handle", "Second handle"], + ariaValueText: "Text alternative of actual value", + defaultValue: [1, 12], + histogramData: [ + 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, + ], + histogramDescription: "28 of 90 flights", + histogramLoading: false, + histogramLoadingText: "", + maxValue: 24, + valueDescription: "From midnight to 12:00 pm", + }, }; -RtlRangeSliderWithHistogram.story = { - name: "RTL Range Slider with Histogram", +export const RtlDefaultSlider: Story = { + render: args => { + return ( + + + + ); + }, parameters: { - info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.", + info: "This is a preview of this component in RTL setup.", + }, + + args: { + defaultValue: 50, }, }; -export const RtlSliderWithLoadingHistogram = ({ - histogramDescription, - histogramLoading, - histogramLoadingText, -}) => { - return ( - -
- -
- - ); +export const RtlSliderWithHistogram = { + render: args => { + return ( + +
+ +
+ + ); + }, + + parameters: { + info: "This is a preview of this component in RTL setup.", + }, + + args: { + ...SliderWithHistogram.args, + }, }; -RtlSliderWithLoadingHistogram.story = { - name: "RTL Slider with loading Histogram", +export const RtlRangeSliderWithHistogram: Story = { + render: args => { + return ( + +
+ +
+ + ); + }, parameters: { - info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.", + info: "This is a preview of this component in RTL setup.", + }, + + args: { + ...RangeSliderWithHistogram.args, }, }; -RtlSliderWithLoadingHistogram.args = { - histogramDescription: "20 of 133 flights", - histogramLoading: true, - histogramLoadingText: "Loading connection data...", +export const RtlSliderWithLoadingHistogram: Story = { + render: args => { + return ( + +
+ +
+ + ); + }, + + parameters: { + info: "This is a preview of this component in RTL setup.", + }, + + args: { + ...SliderWithLoadingHistogram.args, + }, };