@wix/design-system/dist/esm/SidebarHeader/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/SidebarHeader/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 SidebarHeader from '..';
import Box from '../../Box';
import LinearProgressBar from '../../LinearProgressBar';
var titleExamples = [{
  label: 'Short',
  value: 'Site Name'
}, {
  label: 'Long',
  value: 'This is a very long title which exceeds the maximum width of its container'
}];
var subtitleExamples = [{
  label: 'Short',
  value: 'Role: Owner'
}, {
  label: 'Long',
  value: 'This is a very long subtitle which exceeds the maximum width of its container'
}];
var childrenExamples = [{
  label: 'Progress bar',
  value: /*#__PURE__*/React.createElement(Box, {
    marginTop: 3,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 47,
      columnNumber: 7
    }
  }, /*#__PURE__*/React.createElement(LinearProgressBar, {
    showProgressIndication: true,
    value: 50,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 48,
      columnNumber: 9
    }
  }))
}];
export default {
  category: "".concat(storySettings.category, "/Sidebar"),
  storyName: 'SidebarHeader',
  component: SidebarHeader,
  componentPath: '..',
  componentProps: {
    title: titleExamples[0].value,
    subtitle: subtitleExamples[0].value
  },
  exampleProps: {
    title: titleExamples,
    subtitle: subtitleExamples,
    children: childrenExamples
  },
  sections: [header(), tabs([tab({
    title: 'Description',
    sections: [columns([description({
      title: 'Description',
      text: 'A header within the sidebar with title, subtitle and custom content at the bottom.'
    })]), importExample("import { SidebarHeader } from '@wix/design-system';"), divider(), title('Examples'), example({
      title: 'Plain Example',
      text: 'A simple example for a header with title and subtitle',
      source: examples.plain
    }), example({
      title: 'Header with Title, Subtitle and Children',
      text: 'An example that demonstrates a header with a title, subtitle and custom node child',
      source: examples.titlesWithChildren
    }), example({
      title: 'Header with Children',
      text: 'An example that demonstrates a header with just a custom node child',
      source: examples.onlyChildren
    }), example({
      title: 'Header with Ellipsis',
      text: 'An example that demonstrates a header with a very long title which exceeds the maximum width of its container',
      source: examples.ellipsis
    }), example({
      title: 'Light Skin',
      text: 'This example uses the `<Sidebar/>` to demonstrate the "light" skin design. Notice that when `<SidebarHeader/>` 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))))]
};