bbm-component-library-test/dist/Common/styles/grid/grid.stories.js

React based component library for all BBM web applications

"use strict";

var _templateObject = _taggedTemplateLiteral(["\n  background: #ffc1c1;\n\n  p {\n    background: #e4eff3;\n    width: 100%;\n    line-height: ", ";\n    text-align: center;\n    font-family: \"Arial\";\n    font-weight: bold;\n    font-size: 0.8rem;\n    text-transform: uppercase;\n    margin: ", " 0;\n  }\n"], ["\n  background: #ffc1c1;\n\n  p {\n    background: #e4eff3;\n    width: 100%;\n    line-height: ", ";\n    text-align: center;\n    font-family: \"Arial\";\n    font-weight: bold;\n    font-size: 0.8rem;\n    text-transform: uppercase;\n    margin: ", " 0;\n  }\n"]);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _styledComponents = require("styled-components");

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _react3 = require("@storybook/react");

var _addonInfo = require("@storybook/addon-info");

var _index = require("./index");

var _tools = require("../tools");

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

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); } // eslint-disable-line
// eslint-disable-line

var Theme = function Theme(_ref) {
  var children = _ref.children;
  return _react2.default.createElement(
    _styledComponents.ThemeProvider,
    {
      theme: {
        space: [0, (0, _tools.rem)(5), (0, _tools.rem)(10), (0, _tools.rem)(15), (0, _tools.rem)(20)],
        breakpoints: [32, 48, 64]
      }
    },
    children
  );
};

var StyledRow = (0, _styledComponents2.default)(_index.Row)(_templateObject, (0, _tools.rem)(50), (0, _tools.rem)(10));

StyledRow.displayName = "Row";
StyledRow.propTypes = _index.Row.propTypes;

(0, _react3.storiesOf)("Grid System", module).add("default", (0, _addonInfo.withInfo)()(function () {
  return _react2.default.createElement(
    Theme,
    null,
    _react2.default.createElement(
      _index.Container,
      { my: 3 },
      _react2.default.createElement(
        StyledRow,
        null,
        _react2.default.createElement(
          _index.Column,
          null,
          _react2.default.createElement(
            "p",
            null,
            "auto"
          )
        ),
        _react2.default.createElement(
          _index.Column,
          null,
          _react2.default.createElement(
            "p",
            null,
            "auto"
          )
        ),
        _react2.default.createElement(
          _index.Column,
          null,
          _react2.default.createElement(
            "p",
            null,
            "auto"
          )
        )
      )
    )
  );
})).add("with custom width", (0, _addonInfo.withInfo)()(function () {
  return _react2.default.createElement(
    Theme,
    null,
    _react2.default.createElement(
      _index.Container,
      { my: 3 },
      _react2.default.createElement(
        StyledRow,
        null,
        _react2.default.createElement(
          _index.Column,
          { w: 3 / 12 },
          _react2.default.createElement(
            "p",
            null,
            "3/12"
          )
        ),
        _react2.default.createElement(
          _index.Column,
          { w: 6 / 12 },
          _react2.default.createElement(
            "p",
            null,
            "6/12"
          )
        ),
        _react2.default.createElement(
          _index.Column,
          { w: 3 / 12 },
          _react2.default.createElement(
            "p",
            null,
            "3/12"
          )
        )
      )
    )
  );
})).add("with responsive settings", (0, _addonInfo.withInfo)()(function () {
  return _react2.default.createElement(
    Theme,
    null,
    _react2.default.createElement(
      _index.Container,
      { my: 3 },
      _react2.default.createElement(
        StyledRow,
        { wrap: true },
        _react2.default.createElement(
          _index.Column,
          { w: [1, 1 / 2, 8 / 12] },
          _react2.default.createElement(
            "p",
            null,
            "responsive: [1, 1/2, 8/12]"
          )
        ),
        _react2.default.createElement(
          _index.Column,
          { w: [1, 1 / 2, 4 / 12] },
          _react2.default.createElement(
            "p",
            null,
            "responsive: [1, 1/2, 4/12]"
          )
        )
      )
    )
  );
}));