adilallo
129 lines
3.4 KiB
JavaScript
129 lines
3.4 KiB
JavaScript
import React from "react";
|
|
import Switch from "../app/components/Switch";
|
|
|
|
export default {
|
|
title: "Forms/Switch",
|
|
component: Switch,
|
|
parameters: {
|
|
layout: "centered",
|
|
},
|
|
argTypes: {
|
|
checked: {
|
|
control: "boolean",
|
|
description: "Whether the switch is checked (on) or not (off)",
|
|
},
|
|
state: {
|
|
control: "select",
|
|
options: ["default", "focus"],
|
|
description: "Visual state of the switch",
|
|
},
|
|
label: {
|
|
control: "text",
|
|
description: "Label text displayed next to the switch",
|
|
},
|
|
onChange: {
|
|
action: "changed",
|
|
description: "Callback fired when the switch is toggled",
|
|
},
|
|
onFocus: {
|
|
action: "focused",
|
|
description: "Callback fired when the switch receives focus",
|
|
},
|
|
onBlur: {
|
|
action: "blurred",
|
|
description: "Callback fired when the switch loses focus",
|
|
},
|
|
},
|
|
};
|
|
|
|
const Template = (args) => <Switch {...args} />;
|
|
|
|
export const Default = Template.bind({});
|
|
Default.args = {
|
|
checked: false,
|
|
label: "Switch label",
|
|
};
|
|
|
|
export const Checked = Template.bind({});
|
|
Checked.args = {
|
|
checked: true,
|
|
label: "Switch label",
|
|
};
|
|
|
|
export const Focus = Template.bind({});
|
|
Focus.args = {
|
|
checked: false,
|
|
state: "focus",
|
|
label: "Switch label",
|
|
};
|
|
|
|
export const FocusChecked = Template.bind({});
|
|
FocusChecked.args = {
|
|
checked: true,
|
|
state: "focus",
|
|
label: "Switch label",
|
|
};
|
|
|
|
export const States = () => (
|
|
<div className="space-y-4">
|
|
<div className="space-y-2">
|
|
<h3 className="text-lg font-semibold">Switch States</h3>
|
|
<div className="space-y-4">
|
|
<Switch checked={false} label="Switch label" />
|
|
<Switch checked={true} label="Switch label" />
|
|
<Switch checked={false} state="focus" label="Switch label" />
|
|
<Switch checked={true} state="focus" label="Switch label" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
export const Interactive = () => {
|
|
const [checked, setChecked] = React.useState(false);
|
|
const [state, setState] = React.useState("default");
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="space-y-4">
|
|
<h3 className="text-lg font-semibold">Interactive Switch</h3>
|
|
<Switch
|
|
checked={checked}
|
|
state={state}
|
|
onChange={() => setChecked(!checked)}
|
|
label="Enable notifications"
|
|
/>
|
|
</div>
|
|
<div className="space-y-4">
|
|
<h4 className="text-md font-semibold">Controls</h4>
|
|
<div className="space-y-2">
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1">State:</label>
|
|
<select
|
|
value={state}
|
|
onChange={(e) => setState(e.target.value)}
|
|
className="px-3 py-1 border border-gray-300 rounded"
|
|
>
|
|
<option value="default">Default</option>
|
|
<option value="focus">Focus</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const WithText = () => (
|
|
<div className="space-y-4">
|
|
<div className="space-y-2">
|
|
<h3 className="text-lg font-semibold">Switch with Different Labels</h3>
|
|
<div className="space-y-4">
|
|
<Switch checked={false} label="Enable notifications" />
|
|
<Switch checked={true} label="Auto-save documents" />
|
|
<Switch checked={false} label="Dark mode" />
|
|
<Switch checked={true} label="Email updates" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|