wix-style-react/dist/stories/FormField/ExampleWithinGrid.js

wix-style-react

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _MessageBox = require('wix-style-react/MessageBox');

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

var _FormField = require('wix-style-react/FormField');

var _FormField2 = _interopRequireDefault(_FormField);

var _Input = require('wix-style-react/Input');

var _Input2 = _interopRequireDefault(_Input);

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

var verticalAlignColStyle = {
  height: '100%',
  display: 'flex',
  alignItems: 'center'
};

exports.default = function () {
  return _react2.default.createElement(
    _MessageBox.MessageBoxFunctionalLayout,
    {
      title: 'User Details',
      confirmText: 'Save',
      cancelText: 'Cancel'
    },
    _react2.default.createElement(
      _Grid.Container,
      { fluid: true },
      _react2.default.createElement(
        _Grid.Row,
        { stretchViewsVertically: true },
        _react2.default.createElement(
          _Grid.Col,
          { span: 3 },
          _react2.default.createElement(
            'span',
            { style: verticalAlignColStyle },
            _react2.default.createElement(_FormField2.default, {
              dataHook: 'storybook-formfield-grid',
              label: 'User',
              required: true
            })
          )
        ),
        _react2.default.createElement(
          _Grid.Col,
          { span: 9 },
          _react2.default.createElement(_Input2.default, null)
        )
      ),
      _react2.default.createElement(
        _Grid.Row,
        { stretchViewsVertically: true },
        _react2.default.createElement(
          _Grid.Col,
          { span: 3 },
          _react2.default.createElement(
            'span',
            { style: verticalAlignColStyle },
            _react2.default.createElement(_FormField2.default, { label: 'Email' })
          )
        ),
        _react2.default.createElement(
          _Grid.Col,
          { span: 9 },
          _react2.default.createElement(_Input2.default, null)
        )
      ),
      _react2.default.createElement(
        _Grid.Row,
        { stretchViewsVertically: true },
        _react2.default.createElement(
          _Grid.Col,
          { span: 3 },
          _react2.default.createElement(
            'span',
            { style: verticalAlignColStyle },
            _react2.default.createElement(_FormField2.default, { label: 'Address', infoContent: 'I help you to fill info' })
          )
        ),
        _react2.default.createElement(
          _Grid.Col,
          { span: 9 },
          _react2.default.createElement(_Input2.default, null)
        )
      )
    )
  );
};