Remove backwards compatibility
This commit is contained in:
adilallo
@@ -13,19 +13,15 @@ export default {
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
variant: {
|
||||
buttonType: {
|
||||
control: { type: "select" },
|
||||
options: [
|
||||
"filled",
|
||||
"filled-inverse",
|
||||
"outline",
|
||||
"outline-inverse",
|
||||
"ghost",
|
||||
"ghost-inverse",
|
||||
"danger",
|
||||
"danger-inverse",
|
||||
],
|
||||
description: "The visual style variant of the button",
|
||||
options: ["filled", "outline", "ghost", "danger"],
|
||||
description: "The button type (Figma prop)",
|
||||
},
|
||||
palette: {
|
||||
control: { type: "select" },
|
||||
options: ["default", "inverse"],
|
||||
description: "The button palette (Figma prop)",
|
||||
},
|
||||
size: {
|
||||
control: { type: "select" },
|
||||
@@ -59,28 +55,28 @@ export const Variants = {
|
||||
render: (_args) => (
|
||||
<div className="space-y-4">
|
||||
<div className="space-x-4">
|
||||
<Button {..._args} variant="filled">
|
||||
<Button {..._args} buttonType="filled" palette="default">
|
||||
Filled
|
||||
</Button>
|
||||
<Button {..._args} variant="filled-inverse">
|
||||
<Button {..._args} buttonType="filled" palette="inverse">
|
||||
Filled Inverse
|
||||
</Button>
|
||||
<Button {..._args} variant="outline">
|
||||
<Button {..._args} buttonType="outline" palette="default">
|
||||
Outline
|
||||
</Button>
|
||||
<Button {..._args} variant="outline-inverse">
|
||||
<Button {..._args} buttonType="outline" palette="inverse">
|
||||
Outline Inverse
|
||||
</Button>
|
||||
<Button {..._args} variant="ghost">
|
||||
<Button {..._args} buttonType="ghost" palette="default">
|
||||
Ghost
|
||||
</Button>
|
||||
<Button {..._args} variant="ghost-inverse">
|
||||
<Button {..._args} buttonType="ghost" palette="inverse">
|
||||
Ghost Inverse
|
||||
</Button>
|
||||
<Button {..._args} variant="danger">
|
||||
<Button {..._args} buttonType="danger" palette="default">
|
||||
Danger
|
||||
</Button>
|
||||
<Button {..._args} variant="danger-inverse">
|
||||
<Button {..._args} buttonType="danger" palette="inverse">
|
||||
Danger Inverse
|
||||
</Button>
|
||||
</div>
|
||||
@@ -98,7 +94,8 @@ export const Variants = {
|
||||
export const Sizes = {
|
||||
args: {
|
||||
children: "Button",
|
||||
variant: "filled",
|
||||
buttonType: "filled",
|
||||
palette: "default",
|
||||
},
|
||||
render: (_args) => (
|
||||
<div className="space-y-4">
|
||||
@@ -134,7 +131,8 @@ export const States = {
|
||||
args: {
|
||||
children: "Button",
|
||||
size: "large",
|
||||
variant: "filled",
|
||||
buttonType: "filled",
|
||||
palette: "default",
|
||||
},
|
||||
render: (_args) => (
|
||||
<div className="space-y-4">
|
||||
@@ -162,19 +160,19 @@ export const AllVariants = {
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Filled Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<Button variant="filled" size="xsmall">
|
||||
<Button buttonType="filled" palette="default" size="xsmall">
|
||||
XSmall
|
||||
</Button>
|
||||
<Button variant="filled" size="small">
|
||||
<Button buttonType="filled" palette="default" size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="filled" size="medium">
|
||||
<Button buttonType="filled" palette="default" size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="filled" size="large">
|
||||
<Button buttonType="filled" palette="default" size="large">
|
||||
Large
|
||||
</Button>
|
||||
<Button variant="filled" size="xlarge">
|
||||
<Button buttonType="filled" palette="default" size="xlarge">
|
||||
XLarge
|
||||
</Button>
|
||||
</div>
|
||||
@@ -183,19 +181,19 @@ export const AllVariants = {
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Filled Inverse Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<Button variant="filled-inverse" size="xsmall">
|
||||
<Button buttonType="filled" palette="inverse" size="xsmall">
|
||||
XSmall
|
||||
</Button>
|
||||
<Button variant="filled-inverse" size="small">
|
||||
<Button buttonType="filled" palette="inverse" size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="filled-inverse" size="medium">
|
||||
<Button buttonType="filled" palette="inverse" size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="filled-inverse" size="large">
|
||||
<Button buttonType="filled" palette="inverse" size="large">
|
||||
Large
|
||||
</Button>
|
||||
<Button variant="filled-inverse" size="xlarge">
|
||||
<Button buttonType="filled" palette="inverse" size="xlarge">
|
||||
XLarge
|
||||
</Button>
|
||||
</div>
|
||||
@@ -204,19 +202,19 @@ export const AllVariants = {
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Outline Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<Button variant="outline" size="xsmall">
|
||||
<Button buttonType="outline" palette="default" size="xsmall">
|
||||
XSmall
|
||||
</Button>
|
||||
<Button variant="outline" size="small">
|
||||
<Button buttonType="outline" palette="default" size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="outline" size="medium">
|
||||
<Button buttonType="outline" palette="default" size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="outline" size="large">
|
||||
<Button buttonType="outline" palette="default" size="large">
|
||||
Large
|
||||
</Button>
|
||||
<Button variant="outline" size="xlarge">
|
||||
<Button buttonType="outline" palette="default" size="xlarge">
|
||||
XLarge
|
||||
</Button>
|
||||
</div>
|
||||
@@ -225,19 +223,19 @@ export const AllVariants = {
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Outline Inverse Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<Button variant="outline-inverse" size="xsmall">
|
||||
<Button buttonType="outline" palette="inverse" size="xsmall">
|
||||
XSmall
|
||||
</Button>
|
||||
<Button variant="outline-inverse" size="small">
|
||||
<Button buttonType="outline" palette="inverse" size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="outline-inverse" size="medium">
|
||||
<Button buttonType="outline" palette="inverse" size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="outline-inverse" size="large">
|
||||
<Button buttonType="outline" palette="inverse" size="large">
|
||||
Large
|
||||
</Button>
|
||||
<Button variant="outline-inverse" size="xlarge">
|
||||
<Button buttonType="outline" palette="inverse" size="xlarge">
|
||||
XLarge
|
||||
</Button>
|
||||
</div>
|
||||
@@ -246,19 +244,19 @@ export const AllVariants = {
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Ghost Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<Button variant="ghost" size="xsmall">
|
||||
<Button buttonType="ghost" palette="default" size="xsmall">
|
||||
XSmall
|
||||
</Button>
|
||||
<Button variant="ghost" size="small">
|
||||
<Button buttonType="ghost" palette="default" size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="ghost" size="medium">
|
||||
<Button buttonType="ghost" palette="default" size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="ghost" size="large">
|
||||
<Button buttonType="ghost" palette="default" size="large">
|
||||
Large
|
||||
</Button>
|
||||
<Button variant="ghost" size="xlarge">
|
||||
<Button buttonType="ghost" palette="default" size="xlarge">
|
||||
XLarge
|
||||
</Button>
|
||||
</div>
|
||||
@@ -267,19 +265,19 @@ export const AllVariants = {
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Ghost Inverse Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<Button variant="ghost-inverse" size="xsmall">
|
||||
<Button buttonType="ghost" palette="inverse" size="xsmall">
|
||||
XSmall
|
||||
</Button>
|
||||
<Button variant="ghost-inverse" size="small">
|
||||
<Button buttonType="ghost" palette="inverse" size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="ghost-inverse" size="medium">
|
||||
<Button buttonType="ghost" palette="inverse" size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="ghost-inverse" size="large">
|
||||
<Button buttonType="ghost" palette="inverse" size="large">
|
||||
Large
|
||||
</Button>
|
||||
<Button variant="ghost-inverse" size="xlarge">
|
||||
<Button buttonType="ghost" palette="inverse" size="xlarge">
|
||||
XLarge
|
||||
</Button>
|
||||
</div>
|
||||
@@ -288,19 +286,19 @@ export const AllVariants = {
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Danger Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<Button variant="danger" size="xsmall">
|
||||
<Button buttonType="danger" palette="default" size="xsmall">
|
||||
XSmall
|
||||
</Button>
|
||||
<Button variant="danger" size="small">
|
||||
<Button buttonType="danger" palette="default" size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="danger" size="medium">
|
||||
<Button buttonType="danger" palette="default" size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="danger" size="large">
|
||||
<Button buttonType="danger" palette="default" size="large">
|
||||
Large
|
||||
</Button>
|
||||
<Button variant="danger" size="xlarge">
|
||||
<Button buttonType="danger" palette="default" size="xlarge">
|
||||
XLarge
|
||||
</Button>
|
||||
</div>
|
||||
@@ -309,19 +307,19 @@ export const AllVariants = {
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Danger Inverse Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<Button variant="danger-inverse" size="xsmall">
|
||||
<Button buttonType="danger" palette="inverse" size="xsmall">
|
||||
XSmall
|
||||
</Button>
|
||||
<Button variant="danger-inverse" size="small">
|
||||
<Button buttonType="danger" palette="inverse" size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="danger-inverse" size="medium">
|
||||
<Button buttonType="danger" palette="inverse" size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="danger-inverse" size="large">
|
||||
<Button buttonType="danger" palette="inverse" size="large">
|
||||
Large
|
||||
</Button>
|
||||
<Button variant="danger-inverse" size="xlarge">
|
||||
<Button buttonType="danger" palette="inverse" size="xlarge">
|
||||
XLarge
|
||||
</Button>
|
||||
</div>
|
||||
@@ -330,28 +328,28 @@ export const AllVariants = {
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Disabled States</h3>
|
||||
<div className="space-x-4">
|
||||
<Button variant="filled" size="large" disabled>
|
||||
<Button buttonType="filled" palette="default" size="large" disabled>
|
||||
Filled Disabled
|
||||
</Button>
|
||||
<Button variant="filled-inverse" size="large" disabled>
|
||||
<Button buttonType="filled" palette="inverse" size="large" disabled>
|
||||
Filled Inverse Disabled
|
||||
</Button>
|
||||
<Button variant="outline" size="large" disabled>
|
||||
<Button buttonType="outline" palette="default" size="large" disabled>
|
||||
Outline Disabled
|
||||
</Button>
|
||||
<Button variant="outline-inverse" size="large" disabled>
|
||||
<Button buttonType="outline" palette="inverse" size="large" disabled>
|
||||
Outline Inverse Disabled
|
||||
</Button>
|
||||
<Button variant="ghost" size="large" disabled>
|
||||
<Button buttonType="ghost" palette="default" size="large" disabled>
|
||||
Ghost Disabled
|
||||
</Button>
|
||||
<Button variant="ghost-inverse" size="large" disabled>
|
||||
<Button buttonType="ghost" palette="inverse" size="large" disabled>
|
||||
Ghost Inverse Disabled
|
||||
</Button>
|
||||
<Button variant="danger" size="large" disabled>
|
||||
<Button buttonType="danger" palette="default" size="large" disabled>
|
||||
Danger Disabled
|
||||
</Button>
|
||||
<Button variant="danger-inverse" size="large" disabled>
|
||||
<Button buttonType="danger" palette="inverse" size="large" disabled>
|
||||
Danger Inverse Disabled
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -22,9 +22,13 @@ export default {
|
||||
control: { type: "select" },
|
||||
options: ["xsmall", "small", "medium", "large", "xlarge"],
|
||||
},
|
||||
variant: {
|
||||
buttonType: {
|
||||
control: { type: "select" },
|
||||
options: ["default", "home"],
|
||||
options: ["filled", "outline", "ghost", "danger"],
|
||||
},
|
||||
palette: {
|
||||
control: { type: "select" },
|
||||
options: ["default", "inverse"],
|
||||
},
|
||||
disabled: {
|
||||
control: { type: "boolean" },
|
||||
@@ -192,7 +196,8 @@ export const XLarge = {
|
||||
export const HomeVariant = {
|
||||
args: {
|
||||
children: "Home Button",
|
||||
variant: "home",
|
||||
buttonType: "filled",
|
||||
palette: "default",
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
@@ -268,8 +273,8 @@ export const StateComparison = {
|
||||
<Button disabled>Disabled</Button>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-4 items-center">
|
||||
<Button variant="home">Home Default</Button>
|
||||
<Button variant="home" disabled>
|
||||
<Button buttonType="filled" palette="default">Home Default</Button>
|
||||
<Button buttonType="filled" palette="default" disabled>
|
||||
Home Disabled
|
||||
</Button>
|
||||
</div>
|
||||
@@ -336,8 +341,8 @@ export const EdgeCases = {
|
||||
<div className="flex flex-wrap gap-4 items-center">
|
||||
<Button>Normal</Button>
|
||||
<Button disabled>Disabled</Button>
|
||||
<Button variant="home">Home</Button>
|
||||
<Button variant="home" disabled>
|
||||
<Button buttonType="filled" palette="default">Home</Button>
|
||||
<Button buttonType="filled" palette="default" disabled>
|
||||
Home Disabled
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -8,18 +8,18 @@ export default {
|
||||
layout: "centered",
|
||||
},
|
||||
argTypes: {
|
||||
checked: {
|
||||
propSwitch: {
|
||||
control: "boolean",
|
||||
description: "Whether the switch is checked (on) or not (off)",
|
||||
description: "Whether the switch is checked (on) or not (off) (Figma prop)",
|
||||
},
|
||||
state: {
|
||||
control: "select",
|
||||
options: ["default", "focus"],
|
||||
description: "Visual state of the switch",
|
||||
},
|
||||
label: {
|
||||
text: {
|
||||
control: "text",
|
||||
description: "Label text displayed next to the switch",
|
||||
description: "Label text displayed next to the switch (Figma prop)",
|
||||
},
|
||||
onChange: {
|
||||
action: "changed",
|
||||
@@ -40,28 +40,28 @@ const Template = (args) => <Switch {...args} />;
|
||||
|
||||
export const Default = Template.bind({});
|
||||
Default.args = {
|
||||
checked: false,
|
||||
label: "Switch label",
|
||||
propSwitch: false,
|
||||
text: "Switch label",
|
||||
};
|
||||
|
||||
export const Checked = Template.bind({});
|
||||
Checked.args = {
|
||||
checked: true,
|
||||
label: "Switch label",
|
||||
propSwitch: true,
|
||||
text: "Switch label",
|
||||
};
|
||||
|
||||
export const Focus = Template.bind({});
|
||||
Focus.args = {
|
||||
checked: false,
|
||||
propSwitch: false,
|
||||
state: "focus",
|
||||
label: "Switch label",
|
||||
text: "Switch label",
|
||||
};
|
||||
|
||||
export const FocusChecked = Template.bind({});
|
||||
FocusChecked.args = {
|
||||
checked: true,
|
||||
propSwitch: true,
|
||||
state: "focus",
|
||||
label: "Switch label",
|
||||
text: "Switch label",
|
||||
};
|
||||
|
||||
export const States = () => (
|
||||
@@ -69,17 +69,17 @@ export const States = () => (
|
||||
<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" />
|
||||
<Switch propSwitch={false} text="Switch label" />
|
||||
<Switch propSwitch={true} text="Switch label" />
|
||||
<Switch propSwitch={false} state="focus" text="Switch label" />
|
||||
<Switch propSwitch={true} state="focus" text="Switch label" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const Interactive = () => {
|
||||
const [checked, setChecked] = React.useState(false);
|
||||
const [propSwitch, setPropSwitch] = React.useState(false);
|
||||
const [state, setState] = React.useState("default");
|
||||
|
||||
return (
|
||||
@@ -87,10 +87,10 @@ export const Interactive = () => {
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold">Interactive Switch</h3>
|
||||
<Switch
|
||||
checked={checked}
|
||||
propSwitch={propSwitch}
|
||||
state={state}
|
||||
onChange={() => setChecked(!checked)}
|
||||
label="Enable notifications"
|
||||
onChange={() => setPropSwitch(!propSwitch)}
|
||||
text="Enable notifications"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
@@ -118,10 +118,10 @@ export const WithText = () => (
|
||||
<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" />
|
||||
<Switch propSwitch={false} text="Enable notifications" />
|
||||
<Switch propSwitch={true} text="Auto-save documents" />
|
||||
<Switch propSwitch={false} text="Dark mode" />
|
||||
<Switch propSwitch={true} text="Email updates" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -22,7 +22,7 @@ export default {
|
||||
const Template = (args) => (
|
||||
<div className="p-16 flex items-center justify-center min-h-[200px]">
|
||||
<Tooltip {...args}>
|
||||
<Button variant="default" size="medium">
|
||||
<Button buttonType="filled" palette="default" size="medium">
|
||||
Hover me
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
Reference in New Issue
Block a user