"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))))]
};