wix-style-react/dist/stories/Box/index.story.js

wix-style-react

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _Sections = require('wix-storybook-utils/Sections');

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

var _storySettings = require('./storySettings');

var _Box = require('../../src/Box');

var _Box2 = _interopRequireDefault(_Box);

var _Text = require('../../src/Text');

var _Text2 = _interopRequireDefault(_Text);

var _IconButton = require('../../src/IconButton');

var _IconButton2 = _interopRequireDefault(_IconButton);

var _Button = require('../../src/Button');

var _Button2 = _interopRequireDefault(_Button);

var _propExplanations = require('./propExplanations');

var _propExplanations2 = _interopRequireDefault(_propExplanations);

var _ExampleEventItem = require('!raw-loader!./examples/ExampleEventItem');

var _ExampleEventItem2 = _interopRequireDefault(_ExampleEventItem);

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

var childrenExamples = [{
  label: 'Text',
  value: _react2.default.createElement(
    'span',
    null,
    'Here is a simple text'
  )
}, {
  label: 'Multiple direct children',
  value: [_react2.default.createElement(
    _Box2.default,
    {
      align: 'center',
      verticalAlign: 'middle',
      margin: 1,
      width: 80,
      height: 80,
      color: 'D70',
      backgroundColor: 'B10',
      borderRadius: 3,
      key: 1
    },
    'Blue'
  ), _react2.default.createElement(
    _Box2.default,
    {
      align: 'center',
      verticalAlign: 'middle',
      margin: 1,
      width: 80,
      height: 80,
      color: 'D70',
      backgroundColor: 'R10',
      borderRadius: 3,
      key: 2
    },
    'Red'
  ), _react2.default.createElement(
    _Box2.default,
    {
      align: 'center',
      verticalAlign: 'middle',
      margin: 1,
      width: 80,
      height: 80,
      color: 'D70',
      backgroundColor: 'G10',
      borderRadius: 3,
      key: 3
    },
    'Green'
  )]
}];

var propExplanationLiveExample = function propExplanationLiveExample(source) {
  return (0, _Sections.liveCode)({
    compact: true,
    source: source,
    components: { Box: _Box2.default, Button: _Button2.default }
  });
};

exports.default = {
  category: _storySettings.storySettings.category,
  storyName: _storySettings.storySettings.storyName,
  component: _Box2.default,
  componentPath: '../../src/Box',

  componentProps: function componentProps() {
    return {
      children: childrenExamples[0].value,
      inline: false,
      direction: 'horizontal',
      align: 'center',
      verticalAlign: 'middle',
      padding: 1,
      minHeight: 200,
      color: 'P00',
      backgroundColor: 'B50',
      dataHook: _storySettings.storySettings.dataHook
    };
  },

  exampleProps: {
    children: childrenExamples
  },

  sections: [(0, _Sections.tab)({
    title: 'Description',
    sections: [(0, _Sections.description)({
      text: '\uD83D\uDCE6  Box is a wrapper component that provides a way to align, space, resize and style - easily and straightforwardly.'
    }), (0, _Sections.importExample)({
      source: "import Box from 'wix-style-react/Box';"
    }),

    // Children
    (0, _Sections.description)({ text: _propExplanations2.default.children.description }), propExplanationLiveExample(_propExplanations2.default.children.example),

    // Alignment
    (0, _Sections.description)({ text: _propExplanations2.default.alignment.description }), propExplanationLiveExample(_propExplanations2.default.alignment.example),

    // Spacing
    (0, _Sections.description)({ text: _propExplanations2.default.spacing.description }), propExplanationLiveExample(_propExplanations2.default.spacing.example),

    // Sizing
    (0, _Sections.description)({ text: _propExplanations2.default.sizing.description }), propExplanationLiveExample(_propExplanations2.default.sizing.example),

    // Styling
    (0, _Sections.description)({ text: _propExplanations2.default.styling.description }), propExplanationLiveExample(_propExplanations2.default.styling.example), (0, _Sections.description)({
      title: 'Examples'
    }), (0, _Sections.liveCode)({
      title: 'Event Item (multiple boxes)',
      compact: true,
      source: _ExampleEventItem2.default,
      components: { Box: _Box2.default, Image: _newIcons.Image, Text: _Text2.default, Hint: _newIcons.Hint, IconButton: _IconButton2.default, More: _newIcons.More, Button: _Button2.default }
    })]
  }), (0, _Sections.tab)({
    title: 'Playground',
    sections: [(0, _Sections.playground)()]
  }), (0, _Sections.tab)({
    title: 'API',
    sections: [(0, _Sections.api)()]
  }), (0, _Sections.tab)({
    title: 'Testkit',
    sections: [(0, _Sections.testkit)()]
  })]
};