import { useState, useEffect } from 'react';
import { UnorderedList } from '@pega/cosmos-react-core';
export default {
    title: 'Core/List',
    component: UnorderedList
};
export const UnorderedListDemo = (args) => {
    const [limit, setLimit] = useState(0);
    const items = [
        'Value 1',
        ['Value 2', 'Value 3', 'Value 4', ['Value 5', 'Value 6', 'Value 7', 'Value 8']],
        'Value 9',
        'Value 10',
        'Value 11',
        'Value 12'
    ];
    useEffect(() => {
        setLimit(args.itemsToShow);
    }, [args.itemsToShow]);
    const handleToggleShow = () => {
        if (limit === args.itemsToShow) {
            setLimit(items.flat().length);
        }
        else {
            setLimit(args.itemsToShow);
        }
    };
    return (<UnorderedList onToggleShow={handleToggleShow} heading={args.heading} items={items.slice(0, limit)} count={items.flat().length}/>);
};
UnorderedListDemo.args = {
    heading: 'List Heading',
    itemsToShow: 3
};
UnorderedListDemo.argTypes = {
    heading: { control: { type: 'text' } },
    itemsToShow: { control: { type: 'number' } }
};
//# sourceMappingURL=UnorderedList.stories.jsx.map