wix-style-react/dist/stories/Grid/ExampleAutoAdjustedRow.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');

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

var _Button2 = _interopRequireDefault(_Button);

var _Card = require('wix-style-react/Card');

var _Card2 = _interopRequireDefault(_Card);

var _Tooltip = require('wix-style-react/Tooltip');

var _Tooltip2 = _interopRequireDefault(_Tooltip);

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

exports.default = function () {
  return _react2.default.createElement(
    'div',
    { style: { background: '#F0F4F7', padding: 30 } },
    _react2.default.createElement(
      _Grid.Container,
      null,
      _react2.default.createElement(
        _Grid.AutoAdjustedRow,
        null,
        _react2.default.createElement(
          _Card2.default,
          { stretchVertically: true },
          _react2.default.createElement(_Card2.default.Header, {
            title: 'Stretched Card 1',
            suffix: _react2.default.createElement(
              _Tooltip2.default,
              { placement: 'top', alignment: 'center', content: 'Hi there!' },
              _react2.default.createElement(
                _Button2.default,
                {
                  theme: 'whiteblueprimary',
                  onClick: function onClick() {
                    return alert('Clicked!');
                  }
                },
                'Tooltip button!'
              )
            )
          }),
          _react2.default.createElement(
            _Card2.default.Content,
            null,
            'Here comes some AMAZING content that will blow your mind. Or just show you that the card next to me got my height.'
          )
        ),
        _react2.default.createElement(
          _Card2.default,
          { stretchVertically: true },
          _react2.default.createElement(_Card2.default.Header, {
            title: 'Stretched Card 2',
            suffix: _react2.default.createElement(
              _Tooltip2.default,
              { placement: 'top', alignment: 'center', content: 'Hi there!' },
              _react2.default.createElement(
                _Button2.default,
                {
                  theme: 'whiteblueprimary',
                  onClick: function onClick() {
                    return alert('Clicked!');
                  }
                },
                'Tooltip button!'
              )
            )
          })
        )
      ),
      _react2.default.createElement(
        _Grid.AutoAdjustedRow,
        null,
        _react2.default.createElement(
          _Card2.default,
          null,
          _react2.default.createElement(_Card2.default.Header, { title: 'Card 1' })
        ),
        _react2.default.createElement(
          _Card2.default,
          null,
          _react2.default.createElement(_Card2.default.Header, { title: 'Card 2' })
        ),
        _react2.default.createElement(
          _Card2.default,
          null,
          _react2.default.createElement(_Card2.default.Header, { title: 'Card 3' })
        ),
        _react2.default.createElement(
          _Card2.default,
          null,
          _react2.default.createElement(_Card2.default.Header, { title: 'Card 4' })
        )
      )
    )
  );
};