@wix/design-system
Version:
@wix/design-system
114 lines • 10.7 kB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/esm/ListItemSelect/docs/index.story.jsx";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React from 'react';
import { Star, Download, Hint } from '@wix/wix-ui-icons-common';
import { header, tabs, tab, description, importExample, title, columns, divider, example as baseExample, playground, api, testkit } from '@wix/wix-storybook-utils/Sections';
import { CATEGORY } from '../../../stories/storiesHierarchy';
import ListItemSelect from '..';
import Box from '../../Box';
var example = function example(config) {
return baseExample(_objectSpread({
components: {
Star: Star,
Download: Download,
Hint: Hint
}
}, config));
};
export default {
category: CATEGORY.FORM,
storyName: 'ListItemSelect',
component: ListItemSelect,
componentPath: '..',
componentProps: {
prefix: /*#__PURE__*/React.createElement(Box, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 37,
columnNumber: 7
}
}, /*#__PURE__*/React.createElement(Star, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 38,
columnNumber: 9
}
})),
title: 'List item title',
subtitle: 'List item subtitle',
suffix: 'List item suffix',
checkbox: true
},
sections: [header({
component: /*#__PURE__*/React.createElement(Box, {
width: "500px",
backgroundColor: "#f0f4f7",
padding: "25px",
border: "1px solid #e5e5e5",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 50,
columnNumber: 9
}
}, /*#__PURE__*/React.createElement(ListItemSelect, {
checkbox: true,
title: "List Item Select",
suffix: "Suffix",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 56,
columnNumber: 11
}
}))
}), tabs([tab({
title: 'Description',
sections: [columns([description({
title: 'Description',
text: "List Item Select represents a single option of any select component. It's highly configurable and can appear in Dropdown, Multiselect or Search components."
})]), importExample("\n// Use directly\nimport { ListItemSelect } from '@wix/design-system';\n// Or use a builder\nimport { listItemSelectBuilder } from '@wix/design-system';\n "), divider(), title('Examples'), example({
title: 'Size',
text: 'Component support two sizes – `small` and `medium`.',
source: "\n <Layout cols={1}>\n <ListItemSelect title=\"Medium size\"/>\n <ListItemSelect size=\"small\" title=\"Small size\"/>\n </Layout>\n "
}), example({
title: 'Checkbox',
text: 'Item can be configured for multi select components by enabling `checkbox`.',
source: "\n <Layout cols={1}>\n <ListItemSelect title=\"For single selection\"/>\n <ListItemSelect checkbox title=\"For multi selection\"/>\n </Layout>\n "
}), example({
title: 'Affix',
text: 'Component has prefix and suffix areas. If plain text or icon is inserted, component automatically inverts the color when selected.',
source: "\n <Layout cols={1}>\n <ListItemSelect\n prefix={<Box><Icons.Toolbox /></Box>}\n title=\"Title area\"\n suffix=\"Suffix area\"\n />\n <ListItemSelect\n prefix={<Avatar size=\"size24\" />}\n title=\"Title area\"\n suffix={<Box><Badge size=\"small\" skin=\"success\">Badge</Badge></Box>}\n />\n <ListItemSelect\n selected\n prefix={<Box><Icons.Toolbox /></Box>}\n title=\"Title area\"\n suffix=\"Suffix area\"\n />\n <ListItemSelect\n selected\n prefix={<Avatar size=\"size24\" />}\n title=\"Title area\"\n suffix={<Box><Badge size=\"small\" skin=\"success\">Badge</Badge></Box>}\n />\n </Layout>\n "
}), example({
title: 'Subtitle',
text: 'Additional information, like user email or address can be inserted to subtitle area.',
source: "\n <ListItemSelect\n title=\"Title area\"\n subtitle=\"subtitle area\"\n />\n "
}), example({
title: 'Disabled',
text: 'Component can be disabled, it automatically changes color of all areas if used as text or icon.',
source: "\n <Layout cols={1}>\n <ListItemSelect\n disabled\n prefix={<Box><Icons.Toolbox /></Box>}\n title=\"Title area\"\n subtitle=\"Subtitle area\"\n suffix=\"Suffix area\"\n />\n <ListItemSelect\n disabled\n checkbox\n prefix={<Box><Icons.Toolbox /></Box>}\n title=\"Title area\"\n subtitle=\"Subtitle area\"\n suffix=\"Suffix area\"\n />\n </Layout>\n "
}), example({
title: 'Text cropping',
text: 'By default component wraps the text. If needed it can be configured to show ellipsis and display full value on hover.',
source: "\n <Layout cols={1}>\n <ListItemSelect\n title=\"This is a very very very very long text that will wrap at some point\"\n suffix=\"Nice long long long long long Suffix\"\n />\n <ListItemSelect\n ellipsis\n title=\"This is a very very very very long text that will be cropped by ellipsis at some point\"\n suffix=\"Nice long long long long long Suffix\"\n />\n </Layout>\n "
}), example({
title: 'Advanced Example',
text: 'All properties work together and can be combined in various ways. It can be rendered as standalone or as part of dropdown.',
source: "\n <Box height=\"230px\">\n <DropdownLayout\n visible\n selectedId={2}\n options={[\n listItemSelectBuilder({\n id: 0,\n checkbox: true,\n prefix: <Avatar size=\"size30\" />,\n title: 'Carmel Lloyd',\n subtitle: 'Kaplan 41',\n suffix: '31 Dec 2017',\n }),\n listItemSelectBuilder({\n id: 1,\n checkbox: true,\n prefix: <Avatar size=\"size30\" />,\n title: 'Gracie-May Marsden',\n subtitle: 'Sderot Ben Gurion 75',\n suffix: '20 Jan 2000',\n }),\n listItemSelectBuilder({\n id: 2,\n checkbox: true,\n prefix: <Avatar size=\"size30\" />,\n title: 'Keisha Decker',\n subtitle: 'Aminadav 18',\n suffix: '4 Nov 2010',\n }),\n listItemSelectBuilder({\n id: 3,\n checkbox: true,\n prefix: <Avatar size=\"size30\" />,\n title: 'Ruairidh Fitzgerald',\n subtitle: 'HaYarkon 228',\n suffix: '7 Apr 2009',\n disabled: true,\n }),\n listItemSelectBuilder({\n id: 4,\n checkbox: true,\n prefix: <Avatar size=\"size30\" />,\n title: 'Sheldon Chavez',\n subtitle: 'Pinkas 2',\n suffix: '2 Dec 2019',\n }),\n listItemSelectBuilder({\n id: 5,\n checkbox: true,\n prefix: <Avatar size=\"size30\" />,\n title: 'Brandan Gibbs',\n subtitle: 'Frishman 38',\n suffix: '1 Feb 2003',\n }),\n listItemSelectBuilder({\n id: 6,\n checkbox: true,\n prefix: <Avatar size=\"size30\" />,\n title: 'Gordon Holmes',\n subtitle: 'HaShalom road 66',\n suffix: '19 Aug 2016',\n }),\n listItemSelectBuilder({\n id: 7,\n checkbox: true,\n prefix: <Avatar size=\"size30\" />,\n title: 'Aaisha Rios',\n subtitle: 'Arlozorov 101',\n suffix: '22 Jul 2018',\n }),\n ]}\n />\n </Box>\n "
})]
})].concat(_toConsumableArray([{
title: 'API',
sections: [api()]
}, {
title: 'Testkit',
sections: [testkit()]
}, {
title: 'Playground',
sections: [playground()]
}].map(tab))))]
};