@wix/design-system/dist/cjs/ListItemAction/docs/index.story.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
exports.__esModule = true;
exports["default"] = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _Sections = require("@wix/wix-storybook-utils/Sections");
var _storiesHierarchy = require("../../../stories/storiesHierarchy");
var _iconsForStory = _interopRequireDefault(require("../../../stories/utils/icons-for-story"));
var examples = _interopRequireWildcard(require("./examples"));
var _ = _interopRequireDefault(require(".."));
var _excluded = ["children"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/ListItemAction/docs/index.story.jsx",
  _this = void 0;
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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 Link = function Link(_ref) {
  var children = _ref.children,
    rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
  return /*#__PURE__*/_react["default"].createElement("a", (0, _extends2["default"])({}, rest, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 24,
      columnNumber: 41
    }
  }), children);
};
var example = function example(config) {
  return (0, _Sections.example)(_objectSpread({
    components: {
      Link: Link
    }
  }, config));
};
var _default = exports["default"] = {
  category: _storiesHierarchy.CATEGORY.FORM,
  storyName: 'ListItemAction',
  component: _["default"],
  componentPath: '..',
  componentProps: {
    title: 'Hello World!'
  },
  exampleProps: {
    prefixIcon: _iconsForStory["default"]
  },
  sections: [(0, _Sections.header)({
    title: 'ListItemAction',
    component: /*#__PURE__*/_react["default"].createElement("div", {
      style: {
        width: '200px'
      },
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 46,
        columnNumber: 9
      }
    }, /*#__PURE__*/_react["default"].createElement(_["default"], {
      as: "button",
      title: "Option 1",
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 47,
        columnNumber: 11
      }
    }), /*#__PURE__*/_react["default"].createElement(_["default"], {
      as: "button",
      title: "Option 2",
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 48,
        columnNumber: 11
      }
    }))
  }), (0, _Sections.tabs)([(0, _Sections.tab)({
    title: 'Description',
    sections: [(0, _Sections.columns)([(0, _Sections.description)({
      title: 'Description',
      text: 'ListItemAction is an internal component which is used to build dropdown or menu like components. Usually this item should not be used by consumers, though custom options builder is exposed for usage with DropdownBase.'
    })]), (0, _Sections.importExample)("\n// Use directly\nimport { ListItemAction } from '@wix/design-system';\n// Or use a builder\nimport { listItemActionBuilder } from '@wix/design-system;,\n"), (0, _Sections.divider)(), (0, _Sections.title)('Examples'), example({
      title: 'Plain Example',
      text: 'Using options builder to render a list of items.',
      source: examples.simple
    }), example({
      title: 'Affix',
      text: 'Supports prefix icons.',
      source: examples.prefix
    }), example({
      title: 'Skin',
      text: 'Supports two skins: standard and destructive. Dark skin is deprecated.',
      source: examples.skin
    }), example({
      title: 'Size',
      text: 'Supports two sizes: small and medium',
      source: examples.size
    }), example({
      title: 'States',
      text: 'Supports disabled state.',
      source: examples.state
    }), example({
      title: 'Text Ellipsis',
      text: 'Text can be set to be ellipsed on tight container width.',
      source: examples.wrap
    }), example({
      title: 'Subtitle',
      text: 'A subtitle text can be set.',
      source: examples.subtitle
    }), example({
      title: 'Suffix',
      text: 'A suffix can be set.',
      source: examples.suffix
    }), example({
      title: 'Custom HTML tag',
      text: "\n                  This component can be rendered as any given HTML tag \u2013 `<button/>`, `<a/>`, `<Link/>` (from react router), `<div/>`, `<span/>` etc.<br/>\n                  All props/attributes will pass to the <em>rendered</em> HTML tag.<br/>\n                  <br/>\n                  For example:<br/>\n                  - as an `<a/>`, the component can have attributes like `href`, `target`, etc.<br/>\n                  - as a `<Link/>` from react router, the component can have props like `to`, `replace`, etc.\n                ",
      source: examples.custom
    })]
  })].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))))]
};