import React from 'react';
import Color from 'color';
import styled from 'styled-components';
import { Box, Typography } from '../..';
var Outer = styled.div.withConfig({
  displayName: "Boxstories__Outer",
  componentId: "sc-1599xyf-0"
})(["display:inline-block;", ""], function (p) {
  var stripes = p.theme.color.warning;
  var stripesDark = Color(stripes).lighten(0.5);
  return "\n      background: repeating-linear-gradient(\n        -45deg,\n        ".concat(stripes, ",\n        ").concat(stripes, " ").concat(p.theme.spacing.unit(2), "px,\n        ").concat(stripesDark, " ").concat(p.theme.spacing.unit(2), "px,\n        ").concat(stripesDark, " ").concat(p.theme.spacing.unit(4), "px\n      );\n    ");
});
var StyledBox = styled(Box).withConfig({
  displayName: "Boxstories__StyledBox",
  componentId: "sc-1599xyf-1"
})(["background-color:", ";"], function (p) {
  return p.theme.color.background;
});
var withOuter = function withOuter(storyFn) {
  return React.createElement(Outer, null, storyFn());
};
var text = React.createElement(StyledBox, {
  p: 2
}, React.createElement(Typography, {
  color: function color(t) {
    return t.color.text;
  }
}, "Some random content here"));
export default {
  title: 'Atoms / Box',
  decorators: [withOuter],
  parameters: {
    component: Box
  }
};
export var Margin = function Margin() {
  return React.createElement(Box, {
    m: 4
  }, text);
};
export var MarginAndDifferentMarginYAxis = {
  render: function render() {
    return React.createElement(Box, {
      m: 8,
      my: 4
    }, text);
  },
  name: 'Margin and different margin Y-axis'
};
export var Padding = {
  render: function render() {
    return React.createElement(Outer, null, React.createElement(Box, {
      p: 8
    }, text));
  },
  name: 'Padding '
};
export var PaddingAndDifferentXAxisAndLeft = {
  render: function render() {
    return React.createElement(Outer, null, React.createElement(Box, {
      p: 8,
      px: 4,
      pl: 0
    }, text));
  },
  name: 'Padding and different X-axis and left '
};
export var DifferentPaddingForDifferentScreenSizes = {
  render: function render() {
    return React.createElement(Outer, null, React.createElement(Box, {
      p: 0,
      sm: {
        p: 4
      }
    }, text));
  },
  name: 'Different padding for different screen sizes '
};
export var WithBackgroundColor = {
  render: function render() {
    return React.createElement(Outer, null, React.createElement(Box, {
      p: 0,
      sm: {
        p: 4
      },
      backgroundColor: function backgroundColor(t) {
        return t.color.cta;
      }
    }, React.createElement(Typography, {
      type: "primary",
      color: function color(t) {
        return t.color.textLight;
      }
    }, "Lorem ipsum dolor sit amet.")));
  },
  name: 'With background color'
};