"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.External = exports.Emergencies = exports.Related = exports.SplashCompact = exports.SplashImage = exports.Splash = exports.HeroCard = exports.Split = exports.LandscapeLight = exports.Landscape = exports.HeroKinds = exports.Regular = exports.default = void 0;

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

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

var _README = _interopRequireDefault(require("./README.mdx"));

var _ = require(".");

var _Button = _interopRequireDefault(require("../Button"));

var _pictogramsReact = require("@wfp/pictograms-react");

var _Hero = _interopRequireDefault(require("./Hero.twig"));

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) { (0, _defineProperty2.default)(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; }

var _default = {
  title: 'Components/Content Related/Hero',
  component: _.Hero,
  parameters: {
    componentSubtitle: 'Component',
    status: 'released',
    mdx: _README.default,
    twig: _Hero.default
  }
};
exports.default = _default;

var Regular = function Regular(args) {
  return /*#__PURE__*/_react.default.createElement(_.Hero, args);
};

exports.Regular = Regular;
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'
};

var HeroKinds = function HeroKinds(args) {
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
};

exports.HeroKinds = HeroKinds;
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
    }
  }
};

var Landscape = function Landscape(args) {
  return /*#__PURE__*/_react.default.createElement(_.Hero, args);
};

exports.Landscape = Landscape;
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."
    }
  }
};

var LandscapeLight = function LandscapeLight(args) {
  return /*#__PURE__*/_react.default.createElement(_.Hero, args);
};

exports.LandscapeLight = LandscapeLight;
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."
    }
  }
};

var Split = function Split(args) {
  return /*#__PURE__*/_react.default.createElement(_.Hero, args);
};

exports.Split = Split;
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."
    }
  }
};

var HeroCard = function HeroCard(args) {
  return /*#__PURE__*/_react.default.createElement(_.Hero, args);
};

exports.HeroCard = HeroCard;
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."
    }
  }
};

var Splash = function Splash(args) {
  return /*#__PURE__*/_react.default.createElement(_.Hero, args);
};

exports.Splash = Splash;
Splash.args = _objectSpread(_objectSpread({}, Regular.args), {}, {
  kind: 'splash',
  subTitle: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.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.default.createElement(_Button.default, {
    kind: "inverse"
  }, "Read more")),
  image: undefined
});
Splash.story = {
  parameters: {
    docs: {
      storyDescription: "Page middle content section."
    }
  }
};

var SplashImage = function SplashImage(args) {
  return /*#__PURE__*/_react.default.createElement(_.Hero, args);
};

exports.SplashImage = SplashImage;
SplashImage.args = _objectSpread(_objectSpread({}, Regular.args), {}, {
  kind: 'splash-image'
});
SplashImage.story = {
  parameters: {
    docs: {
      storyDescription: "Page middle content section with background image."
    }
  }
};

var SplashCompact = function SplashCompact(args) {
  return /*#__PURE__*/_react.default.createElement(_.Hero, args);
};

exports.SplashCompact = SplashCompact;
SplashCompact.args = _objectSpread(_objectSpread({}, Regular.args), {}, {
  title: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
    style: {
      marginRight: '1rem'
    }
  }, "Nulla consequat massa quis enim"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    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."
    }
  }
};

var Related = function Related(args) {
  return /*#__PURE__*/_react.default.createElement(_.Hero, args);
};

exports.Related = Related;
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

var Emergencies = function Emergencies(args) {
  return /*#__PURE__*/_react.default.createElement(_.Hero, args);
};

exports.Emergencies = Emergencies;
Emergencies.args = _objectSpread(_objectSpread({}, Regular.args), {}, {
  title: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_pictogramsReact.WfpHumEmergencyResponsePos, {
    fill: "#FFF",
    style: {
      marginRight: '1rem'
    }
  }), /*#__PURE__*/_react.default.createElement("span", null, "Curabitur ullamcorper ultricies nisi. Proin magna.", ' ', /*#__PURE__*/_react.default.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."
    }
  }
};

var External = function External(args) {
  return /*#__PURE__*/_react.default.createElement(_.HeroExternal, args, /*#__PURE__*/_react.default.createElement("div", {
    className: "wfp--hero-ext__actions"
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    allCaps: true,
    large: true,
    kind: "accent"
  }, "Accent action"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    allCaps: true,
    large: true,
    kind: "inverse"
  }, "Secondary action")));
};

exports.External = External;
External.args = {
  title: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "A headline that can be used  ", /*#__PURE__*/_react.default.createElement("br", null), " for the value proposition"),
  subTitle: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "A description that can contain a ", /*#__PURE__*/_react.default.createElement("a", null, "link"), " and ", /*#__PURE__*/_react.default.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'
    }
  }
};