import _defineProperty from "@babel/runtime/helpers/defineProperty";

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

import React from 'react';
import markdown from './README.mdx';
import { Hero, HeroExternal } from '.';
import Button from '../Button';
import { WfpHumEmergencyResponsePos } from '@wfp/pictograms-react';
import heroTwig from './Hero.twig';
export default {
  title: 'Components/Content Related/Hero',
  component: Hero,
  parameters: {
    componentSubtitle: 'Component',
    status: 'released',
    mdx: markdown,
    twig: heroTwig
  }
};
export var Regular = function Regular(args) {
  return /*#__PURE__*/React.createElement(Hero, args);
};
Regular.args = {
  href: '#',
  image: 'http://www1.wfp.org/sites/default/files/images/yemen-hero-min.jpg',
  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: 'landscape'
};
export var HeroKinds = function HeroKinds(args) {
  return /*#__PURE__*/React.createElement(React.Fragment, null);
};
var herokinds = "\nBy changing the `kind` prop you can use different styles of the card.\n\n| kind   |  Description  |\n|----------|-------------|\n| `landscape` | A card designed to highlight a link using a landscape photograph and a title with metadata above.|\n| `landscape-light` | A card designed to highlight a link using a landscape photograph and  white-background section below with a title and a subtitle.   |\n| `split` | A card of the same dimension of the landscape photo card, but split in half. One half features a landscape photograph, the other half is a white-background section with a title and a subtitle. |\n| `hero` | Hero block with title and a background image. It can feature an optional subtitle. |\n| `splash` | Page middle content section. |\n| `splash-image` | Page middle content section with background image. |\n| `splash-compact` | A card content section without space around title and subtitle. |\n| `related` | A card designed with landscape photograph and a title with metadata on right side. |\n\n\n";
HeroKinds.story = {
  name: 'Hero kinds',
  parameters: {
    markdown: 'hello',
    docs: {
      storyDescription: herokinds
    }
  }
};
export var Landscape = function Landscape(args) {
  return /*#__PURE__*/React.createElement(Hero, args);
};
Landscape.args = _objectSpread(_objectSpread({}, Regular.args), {}, {
  kind: 'landscape'
});
Landscape.story = {
  parameters: {
    docs: {
      storyDescription: "A card designed to highlight a link using a landscape photograph and a title with metadata above."
    }
  }
};
export var LandscapeLight = function LandscapeLight(args) {
  return /*#__PURE__*/React.createElement(Hero, args);
};
LandscapeLight.args = _objectSpread(_objectSpread({}, Regular.args), {}, {
  kind: 'landscape-light'
});
LandscapeLight.story = {
  parameters: {
    docs: {
      storyDescription: "A card designed to highlight a link using a landscape photograph and  white-background section below with a title and a subtitle."
    }
  }
};
export var Split = function Split(args) {
  return /*#__PURE__*/React.createElement(Hero, args);
};
Split.args = _objectSpread(_objectSpread({}, Regular.args), {}, {
  metadata: 'Climate Change, Publication',
  kind: 'split'
});
Split.story = {
  parameters: {
    docs: {
      storyDescription: "A card of the same dimension of the landscape photo card, but split in half. One half features a landscape photograph, the other half is a white-background section with a title and a subtitle."
    }
  }
};
export var HeroCard = function HeroCard(args) {
  return /*#__PURE__*/React.createElement(Hero, args);
};
HeroCard.args = _objectSpread(_objectSpread({}, Regular.args), {}, {
  kind: 'hero'
});
HeroCard.story = {
  name: 'Hero',
  parameters: {
    docs: {
      storyDescription: "Hero block with title and a background image. It can feature an optional subtitle."
    }
  }
};
export var Splash = function Splash(args) {
  return /*#__PURE__*/React.createElement(Hero, args);
};
Splash.args = _objectSpread(_objectSpread({}, Regular.args), {}, {
  kind: 'splash',
  subTitle: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    style: {
      marginBottom: '1rem'
    }
  }, "Cras dapibus. Aenean ut eros et nisl sagittis vestibulum. Fusce risus nisl, viverra et, tempor et, pretium in."), /*#__PURE__*/React.createElement(Button, {
    kind: "inverse"
  }, "Read more")),
  image: undefined
});
Splash.story = {
  parameters: {
    docs: {
      storyDescription: "Page middle content section."
    }
  }
};
export var SplashImage = function SplashImage(args) {
  return /*#__PURE__*/React.createElement(Hero, args);
};
SplashImage.args = _objectSpread(_objectSpread({}, Regular.args), {}, {
  kind: 'splash-image'
});
SplashImage.story = {
  parameters: {
    docs: {
      storyDescription: "Page middle content section with background image."
    }
  }
};
export var SplashCompact = function SplashCompact(args) {
  return /*#__PURE__*/React.createElement(Hero, args);
};
SplashCompact.args = _objectSpread(_objectSpread({}, Regular.args), {}, {
  title: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
    style: {
      marginRight: '1rem'
    }
  }, "Nulla consequat massa quis enim"), /*#__PURE__*/React.createElement(Button, {
    kind: "inverse--primary"
  }, "Read more")),
  subTitle: undefined,
  kind: 'splash-compact',
  image: undefined
});
SplashCompact.story = {
  parameters: {
    docs: {
      storyDescription: "A card content section without space around title and subtitle."
    }
  }
};
export var Related = function Related(args) {
  return /*#__PURE__*/React.createElement(Hero, args);
};
Related.args = _objectSpread(_objectSpread({}, Regular.args), {}, {
  metadata: 'Climate Change, Publication',
  kind: 'related'
});
Related.story = {
  parameters: {
    docs: {
      storyDescription: "A card designed with landscape photograph and a title with metadata on right side."
    }
  }
}; // TODO learn more about changes done to Icon component by Robert

export var Emergencies = function Emergencies(args) {
  return /*#__PURE__*/React.createElement(Hero, args);
};
Emergencies.args = _objectSpread(_objectSpread({}, Regular.args), {}, {
  title: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(WfpHumEmergencyResponsePos, {
    fill: "#FFF",
    style: {
      marginRight: '1rem'
    }
  }), /*#__PURE__*/React.createElement("span", null, "Curabitur ullamcorper ultricies nisi. Proin magna.", ' ', /*#__PURE__*/React.createElement("a", null, "Etiam iaculis nunc ac metus"))),
  subTitle: undefined,
  image: undefined,
  kind: 'emergencies'
});
Emergencies.story = {
  parameters: {
    docs: {
      storyDescription: "A global card for highlighting important events, such as emergencies."
    }
  }
};
export var External = function External(args) {
  return /*#__PURE__*/React.createElement(HeroExternal, args, /*#__PURE__*/React.createElement("div", {
    className: "wfp--hero-ext__actions"
  }, /*#__PURE__*/React.createElement(Button, {
    allCaps: true,
    large: true,
    kind: "accent"
  }, "Accent action"), /*#__PURE__*/React.createElement(Button, {
    allCaps: true,
    large: true,
    kind: "inverse"
  }, "Secondary action")));
};
External.args = {
  title: /*#__PURE__*/React.createElement(React.Fragment, null, "A headline that can be used  ", /*#__PURE__*/React.createElement("br", null), " for the value proposition"),
  subTitle: /*#__PURE__*/React.createElement(React.Fragment, null, "A description that can contain a ", /*#__PURE__*/React.createElement("a", null, "link"), " and ", /*#__PURE__*/React.createElement("strong", null, "a bold text"), " to highlight important content. We have room for one or more sentences. Like this."),
  image: 'http://www1.wfp.org/sites/default/files/images/yemen-hero-min.jpg'
};
External.story = {
  parameters: {
    docs: {
      storyDescription: 'Add a description'
    }
  }
};