import React from 'react';
import styled from 'styled-components';
import MD from 'react-markdown';
import docs from './CardWithTitle.md';
import { Box, CardWithTitle, FadedScroll, Flexbox, OldIcon, Typography } from '../..';
var Text = styled.span.withConfig({
  displayName: "CardWithTitlestories__Text",
  componentId: "sc-1jyecxu-0"
})(["display:inline-block;max-width:400px;"]);
var MockedContent = function MockedContent() {
  return React.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 = styled(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
};
export default meta;
export var Documentation = function Documentation() {
  return React.createElement(MD, null, docs);
};
export var Default = {
  render: function render() {
    return React.createElement(CardWithTitle, {
      title: "Konton"
    }, "A CardWithTitle containing content");
  }
};
export var WithComponentAsTitle = function WithComponentAsTitle() {
  return React.createElement(CardWithTitle, {
    title: React.createElement(Typography, {
      type: "hero"
    }, "Hero Title")
  }, "A CardWithTitle containing content");
};
export var WithVariantBig = function WithVariantBig() {
  return React.createElement(CardWithTitle, {
    variant: "big",
    title: "Title for the card"
  }, "A CardWithTitle with extra padding");
};
export var CardWithTitleAsArticleMostCardWithTitleShouldBeArticle = {
  render: function render() {
    return React.createElement(CardWithTitle, {
      as: "article",
      title: "Konton"
    }, "A CardWithTitle as a article containing content");
  },
  name: 'CardWithTitle as article (most CardWithTitle should be article)'
};
export var CardWithTitleAsSection = function CardWithTitleAsSection() {
  return React.createElement(CardWithTitle, {
    as: "section",
    title: "Konton"
  }, "A CardWithTitle as a section containing content");
};
export var CardWithHtmlProps = function CardWithHtmlProps() {
  return React.createElement(CardWithTitle, {
    as: "section",
    title: "HTML Props",
    "aria-label": "HTMLprops"
  }, "A CardWithTitle with HTML Props");
};
var PaddedIcon = styled(OldIcon.ArrowRight).withConfig({
  displayName: "CardWithTitlestories__PaddedIcon",
  componentId: "sc-1jyecxu-2"
})(["padding-left:", "px;"], function (p) {
  return p.theme.spacing.unit(1);
});
export var IntegrationCardWithTitleWithCustomComponentAsTitle = {
  render: function render() {
    var CustomTitle = React.createElement(Flexbox, {
      container: true,
      justifyContent: "space-between",
      alignItems: "center",
      direction: "row"
    }, React.createElement(Flexbox, {
      item: true
    }, React.createElement(Typography, {
      type: "title3",
      as: "h2"
    }, "Konton")), React.createElement(Flexbox, {
      item: true
    }, React.createElement(Typography, {
      type: "secondary",
      color: function color(t) {
        return t.color.text;
      },
      weight: "bold"
    }, "Marknads\xF6versikt (not really a link)"), React.createElement(PaddedIcon, {
      inline: true,
      color: function color(t) {
        return t.color.cta;
      },
      size: 3
    })));
    return React.createElement(CardWithTitle, {
      title: CustomTitle
    }, React.createElement(Box, {
      px: 5,
      pb: 5
    }, React.createElement(MockedContent, null)));
  },
  name: 'Integration: CardWithTitle with custom component as title'
};
export var IntegrationWithFadedScroll = {
  render: function render() {
    var CustomTitle = React.createElement(Typography, {
      type: "title3",
      as: "h2"
    }, "Konton");
    return React.createElement(CardWithTitle, {
      title: CustomTitle
    }, React.createElement(FadedScroll, {
      maxHeight: 50
    }, React.createElement(Box, {
      px: 5
    }, React.createElement(MockedContent, null))));
  },
  name: 'Integration: with FadedScroll'
};
export var IntegrationFadedScrollWithHeightFromParent = {
  render: function render() {
    var CustomTitle = React.createElement(Typography, {
      type: "title3",
      as: "h2"
    }, "Konton");
    return React.createElement(HeightOnCardWithTitle, {
      title: CustomTitle
    }, React.createElement(FadedScroll, null, React.createElement(Box, {
      px: 5
    }, React.createElement(MockedContent, null))));
  },
  name: 'Integration: with FadedScroll of content and height being whatever is available left of parents height.'
};
export var 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'
};