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

@wix/design-system

import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/esm/Sidebar/docs/index.story.jsx";
import { header, tabs, tab, description, importExample, title, columns, divider, code, testkit, example, api } from '@wix/wix-storybook-utils/Sections';
import { storySettings } from '../test/storySettings';
import SimpleSidebarRaw from '!raw-loader!./SimpleExample';
import InnerMenuExampleRaw from '!raw-loader!./InnerMenuExample';
import SidebarItemContext from './SidebarItemContextExample';
import SidebarItemContextRaw from '!raw-loader!./SidebarItemContextExample';
import compoundReadmeApi from '../COMPOUND_README.API.md';
import contextReadmeApi from '../CONTEXT_README.API.md';
import Sidebar from '..';
import React from 'react';
var importDeclaration = "\n### For basic compositions:\nimport { Sidebar } from '@wix/design-system';\nconst { Item, BackButton, PersistentFooter, PersistentHeader } = Sidebar;\n\n### For advanced usages:\nimport { SidebarContextConsumer, SidebarItemContextConsumer } from '@wix/design-system';\n";
export default {
  category: "".concat(storySettings.category, "/Sidebar"),
  storyName: 'Sidebar',
  component: Sidebar,
  componentPath: '..',
  componentProps: {},
  sections: [header({
    sourceUrl: 'https://github.com/wix-private/wix-design-systems/tree/master/packages/wix-design-system/src/Sidebar/'
  }), tabs([tab({
    title: 'Description',
    sections: [description({
      title: 'Description',
      text: 'A sidebar menu container component, created to display a drill in menu and persistent elements'
    }), importExample(importDeclaration), divider(), title('Examples'), example({
      title: 'Basic example',
      text: 'In its very basic simple form - the `Sidebar` component provides a container for elements',
      source: SimpleSidebarRaw
    }), example({
      title: 'Inner menu',
      text: 'Sidebar supports inner menus, `NOTE:` We support only 1st level hierarchy.',
      source: InnerMenuExampleRaw
    }),
    // This example is built differently because <SidebarItemContext/> loose context when it's raw
    columns([description({
      title: 'Custom Context Usage',
      text: 'Items can get internal selection logic from the `SidebarItemContextConsumer` context component. Check the source code for more information about how to use the context components, for example `<SidebarContextConsumer/>` allows achieving custom back button behavior`'
    }), description(/*#__PURE__*/React.createElement(SidebarItemContext, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 78,
        columnNumber: 25
      }
    }))]), code({
      interactive: false,
      source: SidebarItemContextRaw
    })]
  })].concat(_toConsumableArray([{
    title: 'Sidebar API',
    sections: [api()]
  }, tab({
    title: 'Compound components API',
    sections: [description(compoundReadmeApi)]
  }), tab({
    title: 'Context API',
    sections: [description(contextReadmeApi)]
  }), {
    title: 'Testkit',
    sections: [testkit()]
  }
  // { title: 'Playground', sections: [playground()] }, //TODO - not in use at the moment
  ].map(tab))))]
};