wix-style-react/dist/es/stories/Breadcrumbs/index.story.js

wix-style-react

import React from 'react';
import CodeExample from 'wix-storybook-utils/CodeExample';
import Breadcrumbs from 'wix-style-react/Breadcrumbs';

import ExampleStandardRow from '!raw-loader!../Breadcrumbs/ExampleStandard';
import ExampleStandard from './ExampleStandard';

import ExampleSizesRow from '!raw-loader!../Breadcrumbs/ExampleSizes';
import ExampleSizes from './ExampleSizes';

import ExampleThemesRow from '!raw-loader!../Breadcrumbs/ExampleThemes';
import ExampleThemes from './ExampleThemes';

import ExampleWithOnClickRow from '!raw-loader!../Breadcrumbs/ExampleWithOnClick';
import ExampleWithOnClick from './ExampleWithOnClick';

import ExampleWithChosenActiveElementRaw from '!raw-loader!../Breadcrumbs/ExampleWithChosenActiveElement';
import ExampleWithChosenActiveElement from './ExampleWithChosenActiveElement';

import ExampleUsingURLRaw from '!raw-loader!../Breadcrumbs/ExampleUsingURL';
import ExampleUsingURL from './ExampleUsingURL';

var items = [{
  id: '1',
  value: 'First item'
}, {
  id: '2',
  link: 'http://www.wix.com',
  value: 'Linked item'
}, {
  id: '3',
  value: 'Third item'
}];

export default {
  category: '6. Navigation',
  storyName: '6.2 Breadcrumbs',
  component: Breadcrumbs,
  componentPath: '../../src/Breadcrumbs',
  componentProps: {
    activeId: '1',
    items: items,
    size: 'medium'
  },
  exampleProps: {
    activeId: ['1', '2', '3'],
    items: [{ label: 'One item', value: [{ id: 0, value: 'Homepage' }] }, { label: 'Three items', value: items }]
  },
  examples: React.createElement(
    'div',
    null,
    React.createElement(
      CodeExample,
      { title: 'Standard', code: ExampleStandardRow },
      React.createElement(ExampleStandard, null)
    ),
    React.createElement(
      CodeExample,
      { title: 'Sizes', code: ExampleSizesRow },
      React.createElement(ExampleSizes, null)
    ),
    React.createElement(
      CodeExample,
      { title: 'Example using path factory', code: ExampleUsingURLRaw },
      React.createElement(ExampleUsingURL, null)
    ),
    React.createElement(
      CodeExample,
      { title: 'Themes', code: ExampleThemesRow },
      React.createElement(ExampleThemes, null)
    ),
    React.createElement(
      CodeExample,
      { title: 'On click callback', code: ExampleWithOnClickRow },
      React.createElement(ExampleWithOnClick, null)
    ),
    React.createElement(
      CodeExample,
      {
        title: 'Chosen active element',
        code: ExampleWithChosenActiveElementRaw
      },
      React.createElement(ExampleWithChosenActiveElement, null)
    )
  )
};