@moises.ai/design-system 4.18.1 → 4.18.3

package/src/components/SliderLibrary/SliderLibrary.stories.jsx

@@ -7,12 +7,36 @@ export default {
   parameters: {
     layout: 'centered',
   },
+  args: {
+    tooltipDelayDuration: 0,
+    tooltipCloseDelay: 500,
+    showTooltip: true,
+  },
   argTypes: {
     value: { control: { type: 'number' } },
     min: { control: { type: 'number' } },
     max: { control: { type: 'number' } },
     step: { control: { type: 'number' } },
     disabled: { control: { type: 'boolean' } },
+    showTooltip: {
+      control: { type: 'boolean' },
+      description: 'Shows the value tooltip on hover/focus/drag.',
+    },
+    tooltipDelayDuration: {
+      control: { type: 'number' },
+      description: 'Ms before the tooltip opens on hover.',
+      table: {
+        defaultValue: { summary: 0 },
+      },
+    },
+    tooltipCloseDelay: {
+      control: { type: 'number' },
+      description:
+        'Ms the tooltip stays open after the pointer leaves the thumb.',
+      table: {
+        defaultValue: { summary: 500 },
+      },
+    },
   },
   decorators: [
     (Story) => (
@@ -31,10 +55,11 @@ export default {
 }
 
 export const Default = {
-  render: () => {
+  render: (args) => {
     const [value, setValue] = useState(50)
     return (
       <SliderLibrary
+        {...args}
         value={value}
         onValueChange={setValue}
         formatValue={(v) => `${v}%`}
@@ -45,8 +70,9 @@ export const Default = {
 }
 
 export const Disabled = {
-  render: () => (
+  render: (args) => (
     <SliderLibrary
+      {...args}
       value={75}
       onValueChange={() => {}}
       disabled
@@ -57,10 +83,11 @@ export const Disabled = {
 
 export const CustomRange = {
   name: 'Custom range (-12 to 12 dB)',
-  render: () => {
+  render: (args) => {
     const [value, setValue] = useState(0)
     return (
       <SliderLibrary
+        {...args}
         value={value}
         onValueChange={setValue}
         min={-12}
@@ -74,26 +101,63 @@ export const CustomRange = {
 }
 
 export const WithoutTooltip = {
-  render: () => {
+  args: {
+    showTooltip: false,
+  },
+  render: (args) => {
     const [value, setValue] = useState(50)
     return (
       <SliderLibrary
+        {...args}
         value={value}
         onValueChange={setValue}
-        showTooltip={false}
         aria-label="Volume"
       />
     )
   },
 }
 
+export const TooltipTiming = {
+  name: 'Tooltip timing',
+  args: {
+    tooltipDelayDuration: 200,
+    tooltipCloseDelay: 500,
+  },
+  render: (args) => {
+    const [value, setValue] = useState(50)
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+        <SliderLibrary
+          {...args}
+          value={value}
+          onValueChange={setValue}
+          formatValue={(v) => `${v}%`}
+          aria-label="Volume"
+        />
+        <span style={{ color: '#a1a1a1', fontSize: 12 }}>
+          Opens after {args.tooltipDelayDuration}ms · closes {args.tooltipCloseDelay}ms
+          after leave
+        </span>
+      </div>
+    )
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Adjust `tooltipDelayDuration` (open) and `tooltipCloseDelay` (close grace) via controls.',
+      },
+    },
+  },
+}
+
 export const WithLabel = {
-  render: () => {
+  render: (args) => {
     const [value, setValue] = useState(30)
     return (
       <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
         <span style={{ color: '#fff', fontSize: 14 }}>Volume</span>
-        <SliderLibrary value={value} onValueChange={setValue} />
+        <SliderLibrary {...args} value={value} onValueChange={setValue} />
       </label>
     )
   },
@@ -101,12 +165,13 @@ export const WithLabel = {
 
 export const ThumbDoubleClick = {
   name: 'Thumb double-click',
-  render: () => {
+  render: (args) => {
     const defaultValue = 0
     const [value, setValue] = useState(35)
     return (
       <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
         <SliderLibrary
+          {...args}
           value={value}
           onValueChange={setValue}
           onThumbDoubleClick={() => setValue(defaultValue)}