"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.MinimumHeight = exports.Default = exports["default"] = void 0;

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

var _addonActions = require("@storybook/addon-actions");

var _placeholderCard = _interopRequireDefault(require("./placeholder-card.mdx"));

var _box = require("../../../primitives/box");

var _placeholderCard2 = require("./placeholder-card.component");

var _tertiaryButton = require("../../actions/tertiary-button");

var _text = require("../../typography/text");

var _grid = require("../grid");

var _gridItem = require("../grid/grid-item");

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

var Decorator = function Decorator(Story) {
  return /*#__PURE__*/_react["default"].createElement(_grid.Grid, null, /*#__PURE__*/_react["default"].createElement(_gridItem.GridItem, {
    sm: 12,
    lg: 6
  }, /*#__PURE__*/_react["default"].createElement(_box.Box, {
    colorName: "background",
    spacing: "p4"
  }, /*#__PURE__*/_react["default"].createElement(Story, null))));
};

var _default = {
  component: _placeholderCard2.PlaceholderCard,
  title: 'Core/Structures/PlaceholderCard',
  decorators: [Decorator],
  parameters: {
    docs: {
      page: _placeholderCard["default"]
    }
  }
};
exports["default"] = _default;

var Default = function Default() {
  return /*#__PURE__*/_react["default"].createElement(_placeholderCard2.PlaceholderCard, null, /*#__PURE__*/_react["default"].createElement(_text.Text, {
    fontSize: "f1",
    colorName: "greyscale-dark",
    bold: true
  }, "Hello!"), /*#__PURE__*/_react["default"].createElement(_text.Text, {
    fontSize: "f1",
    colorName: "greyscale-dark"
  }, "I am a placeholder card"), /*#__PURE__*/_react["default"].createElement(_box.Box, {
    spacing: "mt3"
  }, /*#__PURE__*/_react["default"].createElement(_tertiaryButton.TertiaryButton, {
    onClick: (0, _addonActions.action)('no-op')
  }, "Click me")));
};

exports.Default = Default;

var MinimumHeight = function MinimumHeight() {
  return /*#__PURE__*/_react["default"].createElement(_placeholderCard2.PlaceholderCard, {
    stacked: "column",
    justify: "center",
    minHeight: "300px",
    minHeightMd: "500px",
    minHeightLg: "700px",
    spacing: "p3"
  }, /*#__PURE__*/_react["default"].createElement(_text.Text, {
    fontSize: "f1",
    colorName: "greyscale-dark",
    bold: true
  }, "Hello!"), /*#__PURE__*/_react["default"].createElement(_text.Text, {
    fontSize: "f1",
    colorName: "greyscale-dark"
  }, "I am a placeholder card with customizable height!"), /*#__PURE__*/_react["default"].createElement(_text.Text, {
    fontSize: "f1",
    colorName: "greyscale-dark"
  }, "Change the screen size to see."), /*#__PURE__*/_react["default"].createElement(_box.Box, {
    spacing: "mt3"
  }, /*#__PURE__*/_react["default"].createElement(_tertiaryButton.TertiaryButton, {
    onClick: (0, _addonActions.action)('no-op')
  }, "Click me")));
};

exports.MinimumHeight = MinimumHeight;