"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.MixinsStackee = exports.MixinsStacked = exports.MixinsSpacing = exports.CardWithClickableSections = exports.CardWithSections = exports.WithOnClick = exports.WithHref = exports.Default = exports["default"] = void 0;

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

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

var _card = require("./card.component");

var _section = require("./section/section.component");

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

var _marginChecker = require("../../../mixins/spacing/story-support/margin-checker");

var _paddingChecker = require("../../../mixins/spacing/story-support/padding-checker");

var _stackedChecker = require("../../../mixins/stacking/story-support/stacked-checker");

var _stackeeChecker = require("../../../mixins/stackee/story-support/stackee-checker");

var _card2 = _interopRequireDefault(require("./card.mdx"));

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

var _default = {
  component: _card.Card,
  title: 'Components/Layout Containers/Card',
  parameters: {
    docs: {
      page: _card2["default"]
    }
  }
};
exports["default"] = _default;

var Default = function Default() {
  return /*#__PURE__*/_react["default"].createElement(_card.Card, {
    spacing: "p2"
  }, "Hello I am a card");
};

exports.Default = Default;

var WithHref = function WithHref() {
  return /*#__PURE__*/_react["default"].createElement(_card.Card, {
    spacing: "p2",
    href: "http://my.wealthsimple.com"
  }, "Hello I am a card with a HREF");
};

exports.WithHref = WithHref;

var WithOnClick = function WithOnClick() {
  return /*#__PURE__*/_react["default"].createElement(_card.Card, {
    spacing: "p2",
    onClick: (0, _addonActions.action)('onClick')
  }, "Hello I am a clickable card");
};

exports.WithOnClick = WithOnClick;

var CardWithSections = function CardWithSections() {
  return /*#__PURE__*/_react["default"].createElement(_card.Card, null, /*#__PURE__*/_react["default"].createElement(_section.CardSection, {
    spacing: "p3"
  }, "Section one"), /*#__PURE__*/_react["default"].createElement(_section.CardSection, {
    spacing: "p3"
  }, "Section two"));
};

exports.CardWithSections = CardWithSections;

var CardWithClickableSections = function CardWithClickableSections() {
  return /*#__PURE__*/_react["default"].createElement(_card.Card, null, /*#__PURE__*/_react["default"].createElement(_text.Text, {
    spacing: ['ph3', 'pt2', 'm0']
  }, "This card's sections are clickable"), /*#__PURE__*/_react["default"].createElement(_section.CardSection, {
    spacing: "p3",
    onClick: (0, _addonActions.action)('click section one')
  }, "Click me 1"), /*#__PURE__*/_react["default"].createElement(_section.CardSection, {
    spacing: "p3",
    onClick: (0, _addonActions.action)('click section two')
  }, "Click me 2"), /*#__PURE__*/_react["default"].createElement(_section.CardSection, {
    spacing: "p3",
    onClick: (0, _addonActions.action)('click section two')
  }, "Click me 3"));
};

exports.CardWithClickableSections = CardWithClickableSections;

var MixinsSpacing = function MixinsSpacing() {
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_marginChecker.MarginChecker, {
    Component: _card.Card
  }, "Hello"), /*#__PURE__*/_react["default"].createElement(_paddingChecker.PaddingChecker, {
    Component: _card.Card
  }, "Hello"));
};

exports.MixinsSpacing = MixinsSpacing;

var MixinsStacked = function MixinsStacked() {
  return /*#__PURE__*/_react["default"].createElement(_stackedChecker.StackedChecker, {
    Component: _card.Card
  });
};

exports.MixinsStacked = MixinsStacked;

var MixinsStackee = function MixinsStackee() {
  return /*#__PURE__*/_react["default"].createElement(_stackeeChecker.StackeeChecker, {
    Component: _card.Card,
    spacing: "m0"
  }, "Hello");
};

exports.MixinsStackee = MixinsStackee;