wix-style-react/dist/stories/Layout/examples/Form.js

wix-style-react

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _Layout = require('wix-style-react/Layout');

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

var _Card2 = _interopRequireDefault(_Card);

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

var _FormField2 = _interopRequireDefault(_FormField);

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

var _Input2 = _interopRequireDefault(_Input);

var _InputArea = require('wix-style-react/InputArea');

var _InputArea2 = _interopRequireDefault(_InputArea);

var _Checkbox = require('wix-style-react/Checkbox');

var _Checkbox2 = _interopRequireDefault(_Checkbox);

var _Text = require('wix-style-react/Text');

var _Text2 = _interopRequireDefault(_Text);

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

var _Button2 = _interopRequireDefault(_Button);

var _RadioGroup = require('wix-style-react/RadioGroup');

var _RadioGroup2 = _interopRequireDefault(_RadioGroup);

var _styles = require('../styles.scss');

var _styles2 = _interopRequireDefault(_styles);

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

exports.default = function () {
  return _react2.default.createElement(
    'div',
    { className: _styles2.default.exampleContainer },
    _react2.default.createElement(
      _Layout.Layout,
      null,
      _react2.default.createElement(
        _Layout.Cell,
        { span: 8 },
        _react2.default.createElement(
          _Layout.Layout,
          null,
          _react2.default.createElement(
            _Layout.Cell,
            null,
            _react2.default.createElement(
              _Card2.default,
              null,
              _react2.default.createElement(_Card2.default.Header, { title: 'Various Inputs' }),
              _react2.default.createElement(
                _Card2.default.Content,
                null,
                _react2.default.createElement(
                  _Layout.Layout,
                  null,
                  _react2.default.createElement(
                    _Layout.Cell,
                    null,
                    field('Your Best Joke:', _InputArea2.default)
                  ),
                  _react2.default.createElement(
                    _Layout.Cell,
                    null,
                    field('Your Email:')
                  )
                ),
                divider(),
                _react2.default.createElement(
                  _Layout.Layout,
                  null,
                  _react2.default.createElement(
                    _Layout.Cell,
                    { span: 6 },
                    field('First Name:')
                  ),
                  _react2.default.createElement(
                    _Layout.Cell,
                    { span: 6 },
                    field('Second Name:')
                  )
                ),
                divider(),
                _react2.default.createElement(
                  _Layout.Layout,
                  { gap: '10' },
                  _react2.default.createElement(
                    _Layout.Cell,
                    { span: 3, vertical: true },
                    _react2.default.createElement(
                      _Text2.default,
                      null,
                      'Home Address:'
                    )
                  ),
                  _react2.default.createElement(
                    _Layout.Cell,
                    { span: 9, vertical: true },
                    field('')
                  )
                ),
                divider(),
                _react2.default.createElement(
                  _Layout.Layout,
                  { gap: '10' },
                  _react2.default.createElement(
                    _Layout.Cell,
                    null,
                    _react2.default.createElement(
                      _Text2.default,
                      null,
                      'Get In Touch'
                    )
                  ),
                  ['Name', 'Email', 'Phone No.'].map(function (label) {
                    return _react2.default.createElement(_Layout.Cell, {
                      key: label,
                      span: 4,
                      vertical: true,
                      children: _react2.default.createElement(_Input2.default, { placeholder: label })
                    });
                  })
                ),
                divider(),
                _react2.default.createElement(
                  _Layout.Layout,
                  null,
                  _react2.default.createElement(
                    _Layout.Cell,
                    { span: 8, vertical: true },
                    _react2.default.createElement(
                      _Checkbox2.default,
                      null,
                      'I Accept to Decline'
                    )
                  ),
                  _react2.default.createElement(
                    _Layout.Cell,
                    { span: 4 },
                    _react2.default.createElement(
                      _Button2.default,
                      null,
                      'Useless Button'
                    )
                  )
                )
              )
            )
          ),
          ['left', 'right'].map(function (direction) {
            return _react2.default.createElement(
              _Layout.Cell,
              { span: 6, key: direction },
              card('something on the ' + direction, 'Anything goes')
            );
          }),
          ['left', 'middle', 'right'].map(function (direction) {
            return _react2.default.createElement(
              _Layout.Cell,
              { span: 4, key: direction },
              card('something on the ' + direction, 'Anything goes')
            );
          })
        )
      ),
      _react2.default.createElement(
        _Layout.Cell,
        { span: 4 },
        _react2.default.createElement(
          _Card2.default,
          null,
          _react2.default.createElement(_Card2.default.Header, { title: 'Additional Info' }),
          _react2.default.createElement(
            _Card2.default.Content,
            null,
            _react2.default.createElement(
              _Text2.default,
              null,
              'No need for <Layout> for just column'
            ),
            divider(),
            _react2.default.createElement(
              _RadioGroup2.default,
              null,
              'Mixing and matching components is easy!'.split(' ').map(function (word) {
                return _react2.default.createElement(
                  _RadioGroup2.default.Button,
                  { key: word },
                  word
                );
              })
            ),
            divider(),
            _react2.default.createElement(
              _Button2.default,
              null,
              'I Agree!'
            )
          )
        )
      )
    )
  );
};

function field(label) {
  var component = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _Input2.default;

  return _react2.default.createElement(
    _FormField2.default,
    { label: label },
    _react2.default.createElement(component)
  );
}

function divider() {
  return _react2.default.createElement('div', { style: { height: 30 } });
}

function card(title, children) {
  return _react2.default.createElement(
    _Card2.default,
    null,
    _react2.default.createElement(_Card2.default.Header, { title: title }),
    _react2.default.createElement(_Card2.default.Content, { children: children })
  );
}