grommet/components/Box/stories/Background.stories.js

focus on the essential experience

"use strict";

exports.__esModule = true;
exports["default"] = exports.Background = void 0;
var _react = _interopRequireDefault(require("react"));
var _grommet = require("grommet");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
var Background = exports.Background = function Background() {
  return (
    /*#__PURE__*/
    // Uncomment <Grommet> lines when using outside of storybook
    // <Grommet theme={...}>
    _react["default"].createElement(_grommet.Box, {
      pad: "small",
      gap: "small",
      align: "start"
    }, /*#__PURE__*/_react["default"].createElement(_grommet.Box, {
      pad: "small",
      background: {
        color: 'brand',
        opacity: true
      },
      elevation: "large"
    }, "brand opacity"), /*#__PURE__*/_react["default"].createElement(_grommet.Box, {
      pad: "small",
      background: "brand",
      elevation: "large"
    }, "brand"), /*#__PURE__*/_react["default"].createElement(_grommet.Box, {
      pad: "small",
      background: {
        color: 'brand'
      },
      elevation: "large"
    }, "brand object"), /*#__PURE__*/_react["default"].createElement(_grommet.Box, {
      pad: "small",
      background: {
        image: 'url(https://images.unsplash.com/photo-1487088678257-3a541e6e3922?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2167&q=80)',
        opacity: 'strong'
      }
    }, "image"), /*#__PURE__*/_react["default"].createElement(_grommet.Box, {
      pad: "small",
      background: {
        color: 'accent-2',
        image: 'url(https://images.unsplash.com/photo-1487088678257-3a541e6e3922?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2167&q=80)'
      }
    }, "image + color"), /*#__PURE__*/_react["default"].createElement(_grommet.Box, {
      background: "dark-1",
      pad: "medium"
    }, /*#__PURE__*/_react["default"].createElement(_grommet.Box, {
      background: "#FFFFFF08",
      pad: "small"
    }, "low opacity on dark background")), /*#__PURE__*/_react["default"].createElement(_grommet.Box, {
      background: "light-5",
      pad: "medium"
    }, /*#__PURE__*/_react["default"].createElement(_grommet.Box, {
      background: "#11111108",
      pad: "small"
    }, "low opacity on light background")), /*#__PURE__*/_react["default"].createElement(_grommet.Box, {
      background: {
        color: 'background-front',
        dark: true
      },
      pad: "medium"
    }, /*#__PURE__*/_react["default"].createElement(_grommet.Text, null, "force dark background")), /*#__PURE__*/_react["default"].createElement(_grommet.Box, {
      background: "dark-1",
      pad: "medium"
    }, /*#__PURE__*/_react["default"].createElement(_grommet.Box, {
      background: {
        color: 'background',
        dark: false
      },
      pad: "medium"
    }, /*#__PURE__*/_react["default"].createElement(_grommet.Text, {
      color: "brand"
    }, "force light background"))), /*#__PURE__*/_react["default"].createElement(_grommet.Box, {
      background: {
        color: {
          dark: 'dark-2',
          light: 'lightgrey'
        },
        dark: true
      },
      pad: "medium"
    }, /*#__PURE__*/_react["default"].createElement(_grommet.Text, null, "force dark background with color as object")), /*#__PURE__*/_react["default"].createElement(_grommet.Box, {
      background: "dark-1",
      pad: "medium"
    }, /*#__PURE__*/_react["default"].createElement(_grommet.Box, {
      background: {
        color: {
          dark: 'darkgrey',
          light: 'lightgrey'
        },
        dark: false
      },
      pad: "medium"
    }, /*#__PURE__*/_react["default"].createElement(_grommet.Text, null, "force light background with color as object"))))
    // </Grommet>
  );
};
var _default = exports["default"] = {
  title: 'Layout/Box/Background'
};