"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.WithoutAllVerticalPadding = exports.WithVariantBig = exports.WithComponentAsTitle = exports.IntegrationWithFadedScroll = exports.IntegrationFadedScrollWithHeightFromParent = exports.IntegrationCardWithTitleWithCustomComponentAsTitle = exports.Documentation = exports.Default = exports.CardWithTitleAsSection = exports.CardWithTitleAsArticleMostCardWithTitleShouldBeArticle = exports.CardWithHtmlProps = void 0;
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _reactMarkdown = _interopRequireDefault(require("react-markdown"));
var _CardWithTitle = _interopRequireDefault(require("./CardWithTitle.md"));
var _ = require("../..");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var Text = _styledComponents.default.span.withConfig({
  displayName: "CardWithTitlestories__Text",
  componentId: "sc-1jyecxu-0"
})(["display:inline-block;max-width:400px;"]);
var MockedContent = function MockedContent() {
  return _react.default.createElement(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac lectus aliquam, scelerisque est eget, lobortis massa. Praesent in pretium orci. Phasellus est sapien, maximus at nulla ac, condimentum dictum ante. Sed consequat erat lacinia, molestie augue vitae, efficitur purus. In venenatis elit nec tortor condimentum, sit amet elementum magna fermentum. Phasellus dictum non augue vitae pellentesque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent rutrum egestas sollicitudin. Cras semper, mi vitae vulputate aliquam, tortor ante maximus libero, vitae maximus velit dui quis augue. Aenean condimentum molestie ante, nec rhoncus nunc aliquet non. Aliquam bibendum tortor dui, eget porttitor nibh fermentum eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse nec magna lectus. Fusce posuere nisi vel purus faucibus sodales. Quisque ac ullamcorper eros, sed lobortis risus. Sed eu magna mi. Vestibulum accumsan porta velit. Donec ligula arcu, cursus eu nisl vel, molestie pretium neque. Etiam urna elit, mollis vel arcu id, vulputate mattis nisi. Fusce eget odio id ipsum consectetur feugiat vitae ut tortor. Aliquam non tempor nibh, scelerisque placerat eros. Nulla facilisi.");
};
var HeightOnCardWithTitle = (0, _styledComponents.default)(_.CardWithTitle).withConfig({
  displayName: "CardWithTitlestories__HeightOnCardWithTitle",
  componentId: "sc-1jyecxu-1"
})(["", "{height:250px;}"], function (p) {
  return p.theme.media.greaterThan(p.theme.breakpoints.md);
});
var meta = {
  title: 'Molecules / CardWithTitle',
  component: _.CardWithTitle
};
var _default = exports.default = meta;
var Documentation = exports.Documentation = function Documentation() {
  return _react.default.createElement(_reactMarkdown.default, null, _CardWithTitle.default);
};
var Default = exports.Default = {
  render: function render() {
    return _react.default.createElement(_.CardWithTitle, {
      title: "Konton"
    }, "A CardWithTitle containing content");
  }
};
var WithComponentAsTitle = exports.WithComponentAsTitle = function WithComponentAsTitle() {
  return _react.default.createElement(_.CardWithTitle, {
    title: _react.default.createElement(_.Typography, {
      type: "hero"
    }, "Hero Title")
  }, "A CardWithTitle containing content");
};
var WithVariantBig = exports.WithVariantBig = function WithVariantBig() {
  return _react.default.createElement(_.CardWithTitle, {
    variant: "big",
    title: "Title for the card"
  }, "A CardWithTitle with extra padding");
};
var CardWithTitleAsArticleMostCardWithTitleShouldBeArticle = exports.CardWithTitleAsArticleMostCardWithTitleShouldBeArticle = {
  render: function render() {
    return _react.default.createElement(_.CardWithTitle, {
      as: "article",
      title: "Konton"
    }, "A CardWithTitle as a article containing content");
  },
  name: 'CardWithTitle as article (most CardWithTitle should be article)'
};
var CardWithTitleAsSection = exports.CardWithTitleAsSection = function CardWithTitleAsSection() {
  return _react.default.createElement(_.CardWithTitle, {
    as: "section",
    title: "Konton"
  }, "A CardWithTitle as a section containing content");
};
var CardWithHtmlProps = exports.CardWithHtmlProps = function CardWithHtmlProps() {
  return _react.default.createElement(_.CardWithTitle, {
    as: "section",
    title: "HTML Props",
    "aria-label": "HTMLprops"
  }, "A CardWithTitle with HTML Props");
};
var PaddedIcon = (0, _styledComponents.default)(_.OldIcon.ArrowRight).withConfig({
  displayName: "CardWithTitlestories__PaddedIcon",
  componentId: "sc-1jyecxu-2"
})(["padding-left:", "px;"], function (p) {
  return p.theme.spacing.unit(1);
});
var IntegrationCardWithTitleWithCustomComponentAsTitle = exports.IntegrationCardWithTitleWithCustomComponentAsTitle = {
  render: function render() {
    var CustomTitle = _react.default.createElement(_.Flexbox, {
      container: true,
      justifyContent: "space-between",
      alignItems: "center",
      direction: "row"
    }, _react.default.createElement(_.Flexbox, {
      item: true
    }, _react.default.createElement(_.Typography, {
      type: "title3",
      as: "h2"
    }, "Konton")), _react.default.createElement(_.Flexbox, {
      item: true
    }, _react.default.createElement(_.Typography, {
      type: "secondary",
      color: function color(t) {
        return t.color.text;
      },
      weight: "bold"
    }, "Marknads\xF6versikt (not really a link)"), _react.default.createElement(PaddedIcon, {
      inline: true,
      color: function color(t) {
        return t.color.cta;
      },
      size: 3
    })));
    return _react.default.createElement(_.CardWithTitle, {
      title: CustomTitle
    }, _react.default.createElement(_.Box, {
      px: 5,
      pb: 5
    }, _react.default.createElement(MockedContent, null)));
  },
  name: 'Integration: CardWithTitle with custom component as title'
};
var IntegrationWithFadedScroll = exports.IntegrationWithFadedScroll = {
  render: function render() {
    var CustomTitle = _react.default.createElement(_.Typography, {
      type: "title3",
      as: "h2"
    }, "Konton");
    return _react.default.createElement(_.CardWithTitle, {
      title: CustomTitle
    }, _react.default.createElement(_.FadedScroll, {
      maxHeight: 50
    }, _react.default.createElement(_.Box, {
      px: 5
    }, _react.default.createElement(MockedContent, null))));
  },
  name: 'Integration: with FadedScroll'
};
var IntegrationFadedScrollWithHeightFromParent = exports.IntegrationFadedScrollWithHeightFromParent = {
  render: function render() {
    var CustomTitle = _react.default.createElement(_.Typography, {
      type: "title3",
      as: "h2"
    }, "Konton");
    return _react.default.createElement(HeightOnCardWithTitle, {
      title: CustomTitle
    }, _react.default.createElement(_.FadedScroll, null, _react.default.createElement(_.Box, {
      px: 5
    }, _react.default.createElement(MockedContent, null))));
  },
  name: 'Integration: with FadedScroll of content and height being whatever is available left of parents height.'
};
var WithoutAllVerticalPadding = exports.WithoutAllVerticalPadding = {
  args: {
    variant: 'normal',
    title: 'This card has neither top nor bottom padding',
    py: 0,
    children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat turpis erat, sit amet tincidunt purus tempus sit amet. Nullam porttitor lorem a nibh efficitur condimentum. Etiam ac dolor eget felis hendrerit pellentesque. Cras efficitur libero quis mattis condimentum. Vestibulum rhoncus nibh et euismod consequat. Etiam semper leo nisl, id aliquet libero consectetur in. Nunc vulputate nec mi eu iaculis. Quisque vel pellentesque odio. Donec tempus turpis nec vehicula tempor. Nulla facilisi. Suspendisse magna ex, vulputate quis risus non, eleifend tincidunt dui. Nam blandit vitae velit non consequat.'
  },
  name: 'Cards without padding'
};