wix-style-react/src/Card/Subheader/docs/index.story.js

wix-style-react

import { storySettings } from './storySettings';
import {
  tab,
  code,
  api,
  importExample,
  testkit,
  playground,
  header,
  tabs,
} from 'wix-storybook-utils/Sections';
import * as examples from './examples';

import Subheader from '../Subheader';

export default {
  category: `${storySettings.category}/Card`,
  storyName: 'Card.Subheader',
  component: Subheader,
  componentPath: '../Subheader.js',

  componentProps: {
    title: 'Card Subheader',
    suffix: '',
    skin: 'standard',
  },

  sections: [
    header({
      issueUrl: 'https://github.com/wix-private/wix-design-systems/issues/new/choose',
      sourceUrl:
        'https://github.com/wix-private/wix-design-systems/tree/master/packages/wix-style-react/src/Card/Subheader/',
    }),

    tabs([
      tab({
        title: 'Description',
        sections: [
          importExample({
            source: `
            import Card from 'wix-style-react/Card';
const Subheader = Card.Subheader;
            `,
          }),
          code({
            title: 'Example usage',
            compact: true,
            source: examples.sampleUsage,
          }),
          code({
            title: 'With text title prop',
            compact: true,
            source: examples.textTitle,
          }),
          code({
            title: 'Neutral skin',
            compact: true,
            source: examples.neutralSkin,
          }),
          code({
            title: 'With custom node as title',
            compact: true,
            source: examples.nodeTitle,
          }),
          code({
            title: 'With custom suffix',
            compact: true,
            source: examples.suffix,
          }),
        ],
      }),

      ...[
        { title: 'API', sections: [api()] },
        { title: 'Testkit', sections: [testkit()] },
        { title: 'Playground', sections: [playground()] },
      ].map(tab),
    ]),
  ],
};