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

wix-style-react

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 */
import React from 'react';

import { Layout, Cell } from 'wix-style-react/Layout';

import styles from './styles.scss';
import storySettings from './story-settings';

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

var childrenExample = [{
  label: 'single cell',
  value: React.createElement(
    Cell,
    null,
    React.createElement(GreyBox, { children: 'hello' })
  )
}, {
  label: 'two cells',
  value: [React.createElement(
    Cell,
    null,
    React.createElement(GreyBox, { children: 'hello' })
  ), React.createElement(
    Cell,
    null,
    React.createElement(GreyBox, { children: 'hello again' })
  )]
}, {
  label: 'two cells as columns',
  value: [React.createElement(
    Cell,
    { span: 6 },
    React.createElement(GreyBox, { children: 'hello' })
  ), React.createElement(
    Cell,
    { span: 6 },
    React.createElement(GreyBox, { children: 'hello again' })
  )]
}, {
  label: 'three cells and one row',
  value: [React.createElement(
    Cell,
    { span: 4 },
    React.createElement(GreyBox, { children: 'left' })
  ), React.createElement(
    Cell,
    { span: 4 },
    React.createElement(GreyBox, { children: 'middle' })
  ), React.createElement(
    Cell,
    { span: 4 },
    React.createElement(GreyBox, { children: 'right' })
  ), React.createElement(
    Cell,
    null,
    React.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 React.createElement(
      Cell,
      { span: span },
      React.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 React.createElement(
      Cell,
      { span: span, vertical: true },
      React.createElement(GreyBox, { height: height, children: height + 'px' })
    );
  })
}];

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

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

  exampleProps: {
    children: childrenExample
  }
};