wix-style-react/dist/stories/Page/ExampleEmptyState.js

wix-style-react

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _Page = require('wix-style-react/Page');

var _Page2 = _interopRequireDefault(_Page);

var _Button = require('wix-style-react/Button');

var _Button2 = _interopRequireDefault(_Button);

var _TextLink = require('wix-style-react/TextLink');

var _TextLink2 = _interopRequireDefault(_TextLink);

var _EmptyState = require('wix-style-react/EmptyState');

var _EmptyState2 = _interopRequireDefault(_EmptyState);

var _newIcons = require('wix-style-react/new-icons');

var _ImagePlaceholder = require('../assets/ImagePlaceholder');

var _ImagePlaceholder2 = _interopRequireDefault(_ImagePlaceholder);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var pageContainerStyles = {
  height: 500,
  display: 'flex',
  flexFlow: 'column',
  minHeight: 0,
  maxWidth: '90%'
};

var ExampleEmptyState = function ExampleEmptyState() {
  return _react2.default.createElement(
    'div',
    { 'data-hook': 'story-page-empty-state', style: pageContainerStyles },
    _react2.default.createElement(
      _Page2.default,
      null,
      _react2.default.createElement(_Page2.default.Header, {
        title: 'Your Product',
        actionsBar: _react2.default.createElement(
          _Button2.default,
          { withNewIcons: true, prefixIcon: _react2.default.createElement(_newIcons.Add, null) },
          'New Item'
        )
      }),
      _react2.default.createElement(
        _Page2.default.Content,
        null,
        _react2.default.createElement(
          _EmptyState2.default,
          {
            theme: 'page',
            title: 'You don\'t have any items yet',
            subtitle: 'Create your product item in an easy & fast way to display it on your website',
            image: _react2.default.createElement(_ImagePlaceholder2.default, null)
          },
          _react2.default.createElement(
            _TextLink2.default,
            { prefixIcon: _react2.default.createElement(_newIcons.Add, null) },
            'New Item'
          )
        )
      )
    )
  );
};

exports.default = ExampleEmptyState;