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

wix-style-react

'use strict';

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

var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }(); /* eslint-disable react/jsx-key, react/prop-types */


var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

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

var _styles2 = _interopRequireDefault(_styles);

var _storySettings = require('./story-settings');

var _storySettings2 = _interopRequireDefault(_storySettings);

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

var GreyBox = function GreyBox(_ref) {
  var children = _ref.children,
      height = _ref.height;
  return _react2.default.createElement('div', { className: _styles2.default.greyBox, style: { height: height }, children: children });
};
GreyBox.displayName = 'GreyBox';

var childrenExample = [{
  label: 'single cell',
  value: _react2.default.createElement(
    _Layout.Cell,
    null,
    _react2.default.createElement(GreyBox, { children: 'hello' })
  )
}, {
  label: 'two cells',
  value: [_react2.default.createElement(
    _Layout.Cell,
    null,
    _react2.default.createElement(GreyBox, { children: 'hello' })
  ), _react2.default.createElement(
    _Layout.Cell,
    null,
    _react2.default.createElement(GreyBox, { children: 'hello again' })
  )]
}, {
  label: 'two cells as columns',
  value: [_react2.default.createElement(
    _Layout.Cell,
    { span: 6 },
    _react2.default.createElement(GreyBox, { children: 'hello' })
  ), _react2.default.createElement(
    _Layout.Cell,
    { span: 6 },
    _react2.default.createElement(GreyBox, { children: 'hello again' })
  )]
}, {
  label: 'three cells and one row',
  value: [_react2.default.createElement(
    _Layout.Cell,
    { span: 4 },
    _react2.default.createElement(GreyBox, { children: 'left' })
  ), _react2.default.createElement(
    _Layout.Cell,
    { span: 4 },
    _react2.default.createElement(GreyBox, { children: 'middle' })
  ), _react2.default.createElement(
    _Layout.Cell,
    { span: 4 },
    _react2.default.createElement(GreyBox, { children: 'right' })
  ), _react2.default.createElement(
    _Layout.Cell,
    null,
    _react2.default.createElement(GreyBox, { children: 'full' })
  )]
}, {
  label: 'various height cells',
  value: [[2, 30], [3, 60], [7, 90]].map(function (_ref2) {
    var _ref3 = _slicedToArray(_ref2, 2),
        span = _ref3[0],
        height = _ref3[1];

    return _react2.default.createElement(
      _Layout.Cell,
      { span: span },
      _react2.default.createElement(GreyBox, { height: height, children: height + 'px' })
    );
  })
}, {
  label: 'vertically aligned cells',
  value: [[2, 30], [3, 60], [7, 90]].map(function (_ref4) {
    var _ref5 = _slicedToArray(_ref4, 2),
        span = _ref5[0],
        height = _ref5[1];

    return _react2.default.createElement(
      _Layout.Cell,
      { span: span, vertical: true },
      _react2.default.createElement(GreyBox, { height: height, children: height + 'px' })
    );
  })
}];

exports.default = {
  category: _storySettings2.default.category,
  storyName: 'Usage',
  component: _Layout.Layout,
  componentPath: '../../src/Layout/Layout',
  exampleImport: 'import { Layout, Cell } from \'wix-style-react/Layout\';',

  componentProps: {
    children: childrenExample[0].value
  },

  exampleProps: {
    children: childrenExample
  }
};