wix-style-react/dist/stories/Grid/ExampleBasicGrid.js

wix-style-react

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _Grid = require('wix-style-react/Grid');

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

exports.default = function () {
  return _react2.default.createElement(
    'div',
    { style: { background: '#F0F4F7' } },
    _react2.default.createElement(
      _Grid.Container,
      null,
      _react2.default.createElement(
        _Grid.Row,
        null,
        _react2.default.createElement(
          _Grid.Col,
          null,
          text('<Col/>')
        )
      ),
      _react2.default.createElement(
        _Grid.Row,
        null,
        _react2.default.createElement(
          _Grid.Col,
          { span: 6 },
          text('<Col span={6}/>')
        ),
        _react2.default.createElement(
          _Grid.Col,
          { span: 6 },
          text('<Col span={6}/>')
        )
      ),
      _react2.default.createElement(
        _Grid.Row,
        null,
        _react2.default.createElement(
          _Grid.Col,
          { span: 8 },
          text('<Col span={8}/>')
        ),
        _react2.default.createElement(
          _Grid.Col,
          { span: 4 },
          text('<Col span={4}/>')
        )
      ),
      _react2.default.createElement(
        _Grid.Row,
        null,
        _react2.default.createElement(
          _Grid.Col,
          { span: 6 },
          text('<Col span={6}/>')
        ),
        _react2.default.createElement(
          _Grid.Col,
          { span: 3 },
          text('<Col span={3}/>')
        ),
        _react2.default.createElement(
          _Grid.Col,
          { span: 3 },
          text('<Col span={3}/>')
        )
      )
    )
  );
};

function text(children) {
  return _react2.default.createElement('div', {
    style: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      background: 'rgba(0,0,0,.1)',
      width: '100%',
      height: '50px'
    },
    children: children
  });
}