import _extends from "@babel/runtime/helpers/extends";
import React from 'react';
import markdown from './README.mdx';
import cardTwig from './Card.twig';
import Button from '../Button';
import { Card, CardExternal } from '.';
import { StarSolidGlyph } from '@wfp/icons-react';
export default {
  title: 'Components/Content Related/Card',
  component: Card,
  subcomponents: {
    CardExternal: CardExternal
  },
  parameters: {
    componentSubtitle: 'Component',
    status: 'released',
    mdx: markdown,
    twig: cardTwig
  }
};
export var SimpleCard = function SimpleCard(args) {
  return /*#__PURE__*/React.createElement(Card, args);
};
SimpleCard.args = {
  subTitle: 'Food security and climate change analyses, adaptation planning, and good practices in food security adaptation programming.',
  title: 'The Climate Adaption Mangement and Innovation Initiative',
  kind: 'simple-card',
  metadata: 'Publication',
  url: 'https://www.wfp.org',
  isExternal: true
};
export var SimpleCardWithImage = function SimpleCardWithImage(args) {
  return /*#__PURE__*/React.createElement(Card, args);
};
SimpleCardWithImage.args = {
  subTitle: 'Food security and climate change analyses, adaptation planning, and good practices in food security adaptation programming.',
  title: 'The Climate Adaption Mangement and Innovation Initiative',
  kind: 'simple-card',
  metadata: 'Publication',
  image: 'http://www1.wfp.org/sites/default/files/images/yemen-hero-min.jpg'
};
export var Overlay = function Overlay(args) {
  return /*#__PURE__*/React.createElement(Card, args);
};
Overlay.args = {
  image: 'http://www1.wfp.org/sites/default/files/images/yemen-hero-min.jpg',
  kind: 'overlay',
  subTitle: 'Food security and climate change analyses, adaptation planning, and good practices in food security adaptation programming.',
  title: 'The Climate Adaption Mangement and Innovation Initiative',
  metadata: 'Publication',
  cardWidth: '350px',
  cardHeight: '400px'
};
export var External = function External(args) {
  return /*#__PURE__*/React.createElement(CardExternal, _extends({
    truncated: true
  }, args), /*#__PURE__*/React.createElement("div", {
    className: "wfp--card-ext__actions"
  }, /*#__PURE__*/React.createElement(Button, {
    className: "wfp--card-ext__action",
    kind: "ghost",
    small: true,
    style: {
      textTransform: 'uppercase'
    }
  }, "Action 1"), /*#__PURE__*/React.createElement(Button, {
    className: "wfp--card-ext__action",
    kind: "ghost",
    small: true
  }, "Action 2"), /*#__PURE__*/React.createElement(Button, {
    className: "wfp--card-ext__action wfp--card-ext__action--align-to-right",
    kind: "ghost",
    small: true,
    icon: StarSolidGlyph,
    iconDescription: "FavoriteOutline16"
  })));
};
External.args = {
  label: 'Label',
  heading: 'Heading',
  subHeading: 'subheading',
  caption: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae congue magna. Mauris vitae velit lacinia, porttitor tellus sit amet, hendrerit ipsum. Vivamus sagittis leo ut erat eleifend, sed',
  tag: 'tag',
  labelStatus: true,
  image: "http://www1.wfp.org/sites/default/files/images/yemen-hero-min.jpg"
};
External.story = {
  parameters: {
    docs: {
      storyDescription: 'Add a description'
    }
  }
};