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

@wix/design-system

import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["children"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/esm/ListItemAction/docs/index.story.jsx",
  _this = this;
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 { 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 icons from '../../../stories/utils/icons-for-story';
import * as examples from './examples';
import ListItemAction from '..';
var Link = function Link(_ref) {
  var children = _ref.children,
    rest = _objectWithoutProperties(_ref, _excluded);
  return /*#__PURE__*/React.createElement("a", _extends({}, rest, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 24,
      columnNumber: 41
    }
  }), children);
};
var example = function example(config) {
  return baseExample(_objectSpread({
    components: {
      Link: Link
    }
  }, config));
};
export default {
  category: CATEGORY.FORM,
  storyName: 'ListItemAction',
  component: ListItemAction,
  componentPath: '..',
  componentProps: {
    title: 'Hello World!'
  },
  exampleProps: {
    prefixIcon: icons
  },
  sections: [header({
    title: 'ListItemAction',
    component: /*#__PURE__*/React.createElement("div", {
      style: {
        width: '200px'
      },
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 46,
        columnNumber: 9
      }
    }, /*#__PURE__*/React.createElement(ListItemAction, {
      as: "button",
      title: "Option 1",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 47,
        columnNumber: 11
      }
    }), /*#__PURE__*/React.createElement(ListItemAction, {
      as: "button",
      title: "Option 2",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 48,
        columnNumber: 11
      }
    }))
  }), tabs([tab({
    title: 'Description',
    sections: [columns([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.'
    })]), importExample("\n// Use directly\nimport { ListItemAction } from '@wix/design-system';\n// Or use a builder\nimport { listItemActionBuilder } from '@wix/design-system;,\n"), divider(), 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(_toConsumableArray([{
    title: 'API',
    sections: [api()]
  }, {
    title: 'Testkit',
    sections: [testkit()]
  }, {
    title: 'Playground',
    sections: [playground()]
  }].map(tab))))]
};