@wix/design-system
Version:
@wix/design-system
72 lines • 2.92 kB
JavaScript
import React from 'react';
import { Delete, Edit, FolderMove, More } from '@wix/wix-ui-icons-common';
import NestableList from './NestableList';
import Text from '../Text';
import Box from '../Box';
import PopoverMenu from '../PopoverMenu';
import IconButton from '../IconButton';
export default {
title: 'NestableList',
component: NestableList,
};
const Template = args => (React.createElement(NestableList, { ...args }));
const TableListItemContent = ({ title, description, }) => (React.createElement(Box, { align: "space-between", verticalAlign: "middle" },
React.createElement(Box, { marginLeft: "SP3", direction: "vertical" },
React.createElement(Text, { weight: "normal" }, title),
React.createElement(Text, { size: "small", secondary: true }, description)),
React.createElement(PopoverMenu, { placement: "left", triggerElement: React.createElement(IconButton, { skin: "light" },
React.createElement(More, null)) },
React.createElement(PopoverMenu.MenuItem, { text: "Edit Category", prefixIcon: React.createElement(Edit, null) }),
React.createElement(PopoverMenu.MenuItem, { text: "Move Category", prefixIcon: React.createElement(FolderMove, null) }),
React.createElement(PopoverMenu.MenuItem, { text: "Delete Category", prefixIcon: React.createElement(Delete, null) }))));
const commonItemProps = {
verticalPadding: 'tiny',
};
const commonProps = {
items: [
{
...commonItemProps,
id: '1',
options: [
{
value: (React.createElement(TableListItemContent, { title: "Sports", description: "1 post \u00B7 60 views" })),
},
],
children: [
{
...commonItemProps,
id: '2',
options: [
{
value: (React.createElement(TableListItemContent, { title: "Equipment", description: "5 posts \u00B7 100 views" })),
},
],
},
{
...commonItemProps,
id: '3',
options: [
{
value: (React.createElement(TableListItemContent, { title: "Courts", description: "3 posts \u00B7 120 views" })),
},
],
},
],
},
{
...commonItemProps,
id: '4',
options: [
{
value: (React.createElement(TableListItemContent, { title: "Tournaments", description: "15 posts \u00B7 160 views" })),
},
],
},
],
onChange: () => { },
};
export const Basic = Template.bind({});
Basic.args = {
...commonProps,
};
//# sourceMappingURL=NestableList.story.js.map