adilallo
83 lines
1.8 KiB
JavaScript
83 lines
1.8 KiB
JavaScript
import React from "react";
|
|
import InputWithCounter from "../../app/components/controls/InputWithCounter";
|
|
|
|
export default {
|
|
title: "Components/Controls/InputWithCounter",
|
|
component: InputWithCounter,
|
|
parameters: {
|
|
layout: "centered",
|
|
},
|
|
argTypes: {
|
|
label: {
|
|
control: "text",
|
|
description: "Label rendered above the input",
|
|
},
|
|
placeholder: {
|
|
control: "text",
|
|
description: "Placeholder text shown when value is empty",
|
|
},
|
|
value: {
|
|
control: "text",
|
|
description: "Current value of the input (controlled)",
|
|
},
|
|
maxLength: {
|
|
control: { type: "number", min: 1, max: 500, step: 1 },
|
|
description: "Maximum number of characters allowed",
|
|
},
|
|
showHelpIcon: {
|
|
control: "boolean",
|
|
description: "Whether to show the help icon next to the label",
|
|
},
|
|
onChange: { action: "changed" },
|
|
},
|
|
};
|
|
|
|
const Template = (args) => {
|
|
const [value, setValue] = React.useState(args.value ?? "");
|
|
return (
|
|
<div style={{ width: 320 }}>
|
|
<InputWithCounter
|
|
{...args}
|
|
value={value}
|
|
onChange={(next) => {
|
|
setValue(next);
|
|
args.onChange?.(next);
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const Default = {
|
|
render: Template,
|
|
args: {
|
|
label: "Community name",
|
|
placeholder: "Enter a name",
|
|
value: "",
|
|
maxLength: 50,
|
|
showHelpIcon: false,
|
|
},
|
|
};
|
|
|
|
export const WithHelpIcon = {
|
|
render: Template,
|
|
args: {
|
|
label: "Community name",
|
|
placeholder: "Enter a name",
|
|
value: "",
|
|
maxLength: 50,
|
|
showHelpIcon: true,
|
|
},
|
|
};
|
|
|
|
export const WithInitialValue = {
|
|
render: Template,
|
|
args: {
|
|
label: "Community name",
|
|
placeholder: "Enter a name",
|
|
value: "My community",
|
|
maxLength: 30,
|
|
showHelpIcon: false,
|
|
},
|
|
};
|