@cimpress/react-components/dist/esm/src/stories/InlineEdit.stories.js

React components to support the MCP styleguide

import * as React from 'react';
import { InlineEdit } from '../InlineEdit';
const meta = {
    title: 'Components/InlineEdit',
    component: InlineEdit,
};
export default meta;
function InlineEditStory(props) {
    const [, setValue] = React.useState('');
    return React.createElement(InlineEdit, Object.assign({ onSave: ({ value }) => setValue(value) }, props));
}
export const Default = {
    render: InlineEditStory,
    args: {
        placeholder: 'Enter a title',
        label: 'Title',
    },
};
export const Size = {
    render: InlineEditStory,
    args: {
        placeholder: 'Enter a title',
        label: 'Title',
        required: true,
        size: 'h1',
    },
};
export const TextArea = {
    render: InlineEditStory,
    args: {
        placeholder: 'Enter a description',
        label: 'Description',
        required: true,
        type: 'textarea',
    },
};
export const CustomValidation = {
    render: InlineEditStory,
    args: {
        placeholder: 'Enter a number',
        label: 'Number',
        required: true,
        validateInput: (value) => {
            if (/^[0-9]*$/.test(value) === false) {
                return 'Please enter a number';
            }
            return null;
        },
    },
};
export const Disabled = {
    render: InlineEditStory,
    args: {
        placeholder: 'Enter a title',
        label: 'Title',
        disabled: true,
    },
};
export const NoPlaceholder = {
    render: InlineEditStory,
    args: {
        label: 'Title',
    },
};
export const NoLabel = {
    render: InlineEditStory,
    args: {
        placeholder: 'Enter a title',
    },
};
//# sourceMappingURL=InlineEdit.stories.js.map