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

wix-style-react

import React from 'react';

import { tab, importExample, description, liveCode, api, playground, testkit } from 'wix-storybook-utils/Sections';

import Notification from 'wix-style-react/Notification';
import Text from 'wix-style-react/Text';

import * as examples from './examples.js';
import readme from '../../src/Notification/README.md';
import typesReadme from './types.readme.md';

var exampleChildren = [{
  label: 'Just text',
  value: [React.createElement(
    Notification.TextLabel,
    null,
    'Notification text'
  ), React.createElement(Notification.CloseButton, null)]
}, {
  label: 'Text and button',
  value: [React.createElement(
    Notification.TextLabel,
    null,
    'Notification text'
  ), React.createElement(
    Notification.ActionButton,
    null,
    'Button'
  ), React.createElement(Notification.CloseButton, null)]
}];

export default {
  category: '8. Notification Bars',
  storyName: '8.1 Notification',
  component: Notification,
  componentPath: '../../src/Notification',

  componentProps: {
    theme: 'standard',
    type: 'global',
    show: true,
    children: exampleChildren[0].value
  },

  componentWrapper: function componentWrapper(_ref) {
    var component = _ref.component;
    return React.createElement(
      'div',
      null,
      component,
      React.createElement(
        Text,
        null,
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'.repeat(5)
      )
    );
  },
  exampleProps: {
    children: exampleChildren
  },

  sections: [tab({
    title: 'Description',
    sections: [description({
      text: 'A sticky toast bar that appears on top of the screen notifying about system changes.'
    }), importExample({
      source: "import Notification from 'wix-style-react/Notification';"
    }), description({
      text: readme
    }), description({
      title: 'Examples'
    }), liveCode({
      title: 'Themes',
      compact: true,
      source: examples.themes,
      components: { Notification: Notification }
    }), liveCode({
      title: 'Actions',
      compact: true,
      source: examples.actions,
      components: { Notification: Notification }
    }), description({
      title: 'Ways to display Notification',
      text: typesReadme
    })]
  }), tab({
    title: 'Playground',
    sections: [playground()]
  }), tab({
    title: 'API',
    sections: [api()]
  }), tab({
    title: 'Testkit',
    sections: [testkit()]
  })]
};