import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/esm/SidebarSectionItem/docs/index.story.jsx";
import React from 'react';
import { header, tabs, tab, description, importExample, title, columns, divider, example, playground, api, testkit } from '@wix/wix-storybook-utils/Sections';
import { storySettings } from '../test/storySettings';
import * as examples from './examples';
import SidebarSectionItem from '..';
import Box from '../../Box';
import CounterBadge from '../../CounterBadge';
var childrenExamples = [{
  label: 'Text',
  value: 'Some text'
}, {
  label: 'Multiple lines',
  value: 'This is an example of multiple lines'
}];
export default {
  category: "".concat(storySettings.category, "/Sidebar"),
  storyName: 'SidebarSectionItem',
  component: SidebarSectionItem,
  componentPath: '..',
  componentProps: {
    children: childrenExamples[0].value
  },
  exampleProps: {
    children: childrenExamples,
    prefix: [{
      label: 'Green circle',
      value: /*#__PURE__*/React.createElement(Box, {
        width: "8px",
        height: "8px",
        borderRadius: "50%",
        backgroundColor: "G10",
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 50,
          columnNumber: 11
        }
      })
    }],
    suffix: [{
      label: 'Counter badge',
      value: /*#__PURE__*/React.createElement(CounterBadge, {
        skin: "standard",
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 62,
          columnNumber: 16
        }
      }, "5")
    }]
  },
  sections: [header(), tabs([tab({
    title: 'Description',
    sections: [columns([description({
      title: 'Description',
      text: 'An item for the section within the sidebar.'
    })]), importExample("import { SidebarSectionItem } from '@wix/design-system';"), divider(), title('Examples'), example({
      title: 'Plain Example',
      text: 'A simple example for section item',
      source: examples.plain
    }), example({
      title: 'Selected Item',
      text: 'An example that demonstrates a selected item',
      source: examples.selected
    }), example({
      title: 'Disabled Item',
      text: 'An example that demonstrates a disabled item',
      source: examples.disabled
    }), example({
      title: 'Drillable Item',
      text: 'An example that demonstrates an icon for drilling in when hovering the item',
      source: examples.drillable
    }), example({
      title: 'Drillable Item with always shown Chevron',
      text: 'An example that demonstrates an icon for drilling even without hovering',
      source: examples.drillableAndAlwaysShowChevron
    }), example({
      title: 'Item with Multiple Lines',
      text: 'An example that demonstrates an item with multiple lines',
      source: examples.multipleLines
    }), example({
      title: 'Item with Prefix',
      text: 'An example that demonstrates an item with provided prefix element',
      source: examples.prefix
    }), example({
      title: 'Item with Suffix (Counter Badge)',
      text: 'An example that demonstrates an item with a `<CounterBadge />` used as a suffix element',
      source: examples.counterBadgeSuffix
    }), example({
      title: 'Item with Suffix (Badge)',
      text: 'An example that demonstrates an item with a `<Badge />` used as a suffix element',
      source: examples.badgeSuffix
    }), example({
      title: 'Light Skin',
      text: 'This example uses the `<Sidebar/>` to demonstrate the "light" skin design. Notice that when `<SidebarSectionItem/>` is contained inside `<Sidebar/>`, it affected by the `skin` prop accordingly',
      source: examples.lightSkin
    })]
  })].concat(_toConsumableArray([{
    title: 'API',
    sections: [api()]
  }, {
    title: 'Testkit',
    sections: [testkit()]
  }, {
    title: 'Playground',
    sections: [playground()]
  }].map(tab))))]
};