adilallo
130 lines
2.8 KiB
JavaScript
130 lines
2.8 KiB
JavaScript
import React from "react";
|
|
import Upload from "../../app/components/controls/Upload";
|
|
|
|
export default {
|
|
title: "Components/Controls/Upload",
|
|
component: Upload,
|
|
parameters: {
|
|
layout: "centered",
|
|
docs: {
|
|
description: {
|
|
component:
|
|
"An upload component with active/inactive states. Displays a label, upload button with icon, and description text.",
|
|
},
|
|
},
|
|
},
|
|
argTypes: {
|
|
active: {
|
|
control: { type: "boolean" },
|
|
description: "Whether the upload component is in active state",
|
|
},
|
|
label: {
|
|
control: { type: "text" },
|
|
description: "Label text displayed above the upload component",
|
|
},
|
|
showHelpIcon: {
|
|
control: { type: "boolean" },
|
|
description: "Whether to show help icon next to label",
|
|
},
|
|
onClick: { action: "clicked" },
|
|
},
|
|
tags: ["autodocs"],
|
|
};
|
|
|
|
const Template = (args) => <Upload {...args} />;
|
|
|
|
// Default story
|
|
export const Default = Template.bind({});
|
|
Default.args = {
|
|
label: "Upload",
|
|
active: true,
|
|
showHelpIcon: true,
|
|
};
|
|
|
|
// Active state
|
|
export const Active = Template.bind({});
|
|
Active.args = {
|
|
label: "Upload",
|
|
active: true,
|
|
showHelpIcon: true,
|
|
};
|
|
Active.parameters = {
|
|
docs: {
|
|
description: {
|
|
story: "Upload component in active state with white button and black text.",
|
|
},
|
|
},
|
|
};
|
|
|
|
// Inactive state
|
|
export const Inactive = Template.bind({});
|
|
Inactive.args = {
|
|
label: "Upload",
|
|
active: false,
|
|
showHelpIcon: true,
|
|
};
|
|
Inactive.parameters = {
|
|
docs: {
|
|
description: {
|
|
story: "Upload component in inactive state with dark button and gray text.",
|
|
},
|
|
},
|
|
};
|
|
|
|
// Without help icon
|
|
export const WithoutHelpIcon = Template.bind({});
|
|
WithoutHelpIcon.args = {
|
|
label: "Upload",
|
|
active: true,
|
|
showHelpIcon: false,
|
|
};
|
|
WithoutHelpIcon.parameters = {
|
|
docs: {
|
|
description: {
|
|
story: "Upload component without help icon.",
|
|
},
|
|
},
|
|
};
|
|
|
|
// Without label
|
|
export const WithoutLabel = Template.bind({});
|
|
WithoutLabel.args = {
|
|
active: true,
|
|
showHelpIcon: false,
|
|
};
|
|
WithoutLabel.parameters = {
|
|
docs: {
|
|
description: {
|
|
story: "Upload component without label.",
|
|
},
|
|
},
|
|
};
|
|
|
|
// Custom label
|
|
export const CustomLabel = Template.bind({});
|
|
CustomLabel.args = {
|
|
label: "Upload Files",
|
|
active: true,
|
|
showHelpIcon: true,
|
|
};
|
|
CustomLabel.parameters = {
|
|
docs: {
|
|
description: {
|
|
story: "Upload component with custom label text.",
|
|
},
|
|
},
|
|
};
|
|
|
|
// All states comparison
|
|
export const AllStates = () => (
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h3 className="text-lg font-semibold mb-4">Upload States</h3>
|
|
<div className="space-y-4">
|
|
<Upload label="Active State" active={true} showHelpIcon={true} />
|
|
<Upload label="Inactive State" active={false} showHelpIcon={true} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|