@wix/design-system
Version:
@wix/design-system
119 lines (118 loc) • 11.3 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _Sections = require("@wix/wix-storybook-utils/Sections");
var _storiesHierarchy = require("../../../stories/storiesHierarchy");
var _ = _interopRequireDefault(require(".."));
var _Box = _interopRequireDefault(require("../../Box"));
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/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) { (0, _defineProperty2["default"])(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; }
var example = function example(config) {
return (0, _Sections.example)(_objectSpread({
components: {
Star: _wixUiIconsCommon.Star,
Download: _wixUiIconsCommon.Download,
Hint: _wixUiIconsCommon.Hint
}
}, config));
};
var _default = exports["default"] = {
category: _storiesHierarchy.CATEGORY.FORM,
storyName: 'ListItemSelect',
component: _["default"],
componentPath: '..',
componentProps: {
prefix: /*#__PURE__*/_react["default"].createElement(_Box["default"], {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 37,
columnNumber: 7
}
}, /*#__PURE__*/_react["default"].createElement(_wixUiIconsCommon.Star, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 38,
columnNumber: 9
}
})),
title: 'List item title',
subtitle: 'List item subtitle',
suffix: 'List item suffix',
checkbox: true
},
sections: [(0, _Sections.header)({
component: /*#__PURE__*/_react["default"].createElement(_Box["default"], {
width: "500px",
backgroundColor: "#f0f4f7",
padding: "25px",
border: "1px solid #e5e5e5",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 50,
columnNumber: 9
}
}, /*#__PURE__*/_react["default"].createElement(_["default"], {
checkbox: true,
title: "List Item Select",
suffix: "Suffix",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 56,
columnNumber: 11
}
}))
}), (0, _Sections.tabs)([(0, _Sections.tab)({
title: 'Description',
sections: [(0, _Sections.columns)([(0, _Sections.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."
})]), (0, _Sections.importExample)("\n// Use directly\nimport { ListItemSelect } from '@wix/design-system';\n// Or use a builder\nimport { listItemSelectBuilder } from '@wix/design-system';\n "), (0, _Sections.divider)(), (0, _Sections.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((0, _toConsumableArray2["default"])([{
title: 'API',
sections: [(0, _Sections.api)()]
}, {
title: 'Testkit',
sections: [(0, _Sections.testkit)()]
}, {
title: 'Playground',
sections: [(0, _Sections.playground)()]
}].map(_Sections.tab))))]
};