prisme-components-react/lib/components/Box/Box.story.js

React components for the Prisme Design System

"use strict";

var _react = _interopRequireDefault(require("react"));

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

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

var _Box = _interopRequireDefault(require("./Box"));

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

var description = 'A low-level layout component for setting width, margin, padding, and color';
(0, _react2.storiesOf)('Box', module).add('Layout component', (0, _addonInfo.withInfo)({
  text: description,
  inline: true
})(function () {
  return _react["default"].createElement(_Box["default"], {
    p: 3
  }, "Hello");
})).add('Background Color', function () {
  return _react["default"].createElement(_Box["default"], {
    p: 3,
    color: "white",
    bg: "black"
  }, "Hello");
}).add('Width', function () {
  return _react["default"].createElement(_Box["default"], {
    p: 3,
    width: 256,
    color: "white",
    bg: "black"
  }, "256px width");
}).add('Directional Padding', function () {
  return _react["default"].createElement(_Box["default"], {
    p: 3
  }, _react["default"].createElement(_Box["default"], {
    m: 1,
    pt: 3,
    color: "white",
    bg: "black"
  }, "Padding Top"), _react["default"].createElement(_Box["default"], {
    m: 1,
    pr: 3,
    color: "white",
    bg: "black"
  }, "Padding Right"), _react["default"].createElement(_Box["default"], {
    m: 1,
    pb: 3,
    color: "white",
    bg: "black"
  }, "Padding Bottom"), _react["default"].createElement(_Box["default"], {
    m: 1,
    pl: 3,
    color: "white",
    bg: "black"
  }, "Padding Left"), _react["default"].createElement(_Box["default"], {
    m: 1,
    px: 3,
    color: "white",
    bg: "black"
  }, "Padding X-Axis"), _react["default"].createElement(_Box["default"], {
    m: 1,
    py: 3,
    color: "white",
    bg: "black"
  }, "Padding Y-Axis"));
}).add('Directional Margin', function () {
  return _react["default"].createElement(_Box["default"], {
    p: 3
  }, _react["default"].createElement(_Box["default"], {
    mt: 3,
    color: "white",
    bg: "black"
  }, "Margin Top"), _react["default"].createElement(_Box["default"], {
    mr: 3,
    color: "white",
    bg: "black"
  }, "Margin Right"), _react["default"].createElement(_Box["default"], {
    mb: 3,
    color: "white",
    bg: "black"
  }, "Margin Bottom"), _react["default"].createElement(_Box["default"], {
    ml: 3,
    color: "white",
    bg: "black"
  }, "Margin Left"), _react["default"].createElement(_Box["default"], {
    mx: 3,
    color: "white",
    bg: "black"
  }, "Margin X-Axis"), _react["default"].createElement(_Box["default"], {
    my: 3,
    color: "white",
    bg: "black"
  }, "Margin Y-Axis"));
});