@quintype/arrow 3.15.1-perf.5 → 3.15.1-perf.7

package/esm/components/Atoms/ExtendedLoadMore/index.js

@@ -0,0 +1,183 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+
+/*
+ *  ************************************************************************
+ *  *  © [2015 - 2020] Quintype Technologies India Private Limited
+ *  *  All Rights Reserved.
+ *  *************************************************************************
+ */
+import { get } from "lodash";
+import PropTypes from "prop-types";
+import React, { lazy, Suspense, useState } from "react";
+import { getTextColor } from "../../../utils/utils";
+import "./../Loadmore/load-more.m.css";
+var _styleModuleImportMap = {
+  "./../Loadmore/load-more.m.css": {
+    "button": "load-more-m_button__1mmf1",
+    "default": "load-more-m_default__2_k4V",
+    "dark": "load-more-m_dark__3dfzb",
+    "light": "load-more-m_light__ePZQI"
+  }
+};
+
+var getTemplate = function getTemplate(templateName) {
+  switch (templateName) {
+    case "ArrowFourColGrid":
+      return /*#__PURE__*/lazy(function () {
+        return import("../../Rows/FourColGrid");
+      });
+
+    case "ArrowThreeColGrid":
+      return /*#__PURE__*/lazy(function () {
+        return import("../../Rows/ThreeColGrid");
+      });
+
+    case "ArrowOneColStoryList":
+      return /*#__PURE__*/lazy(function () {
+        return import("../../Rows/OneColStoryList");
+      });
+
+    case "ArrowFourColFiveStories":
+      return /*#__PURE__*/lazy(function () {
+        return import("../../Rows/FourColFiveStories");
+      });
+
+    case "ArrowOpinionCollection":
+      return /*#__PURE__*/lazy(function () {
+        return import("../../Rows/OpinionCollection");
+      });
+
+    case "ArrowSixColSixStories":
+      return /*#__PURE__*/lazy(function () {
+        return import("../../Rows/SixColSixStories");
+      });
+
+    case "ArrowThreeColFlexStories":
+      return /*#__PURE__*/lazy(function () {
+        return import("../../Rows/ThreeColFlexStories");
+      });
+
+    case "ArrowFourColPortraitStories":
+      return /*#__PURE__*/lazy(function () {
+        return import("../../Rows/FourColPortraitStories");
+      });
+
+    default:
+      return /*#__PURE__*/lazy(function () {
+        return import("../../Rows/ThreeColGrid");
+      });
+  }
+};
+
+export var ExtendedLoadMore = function ExtendedLoadMore(_ref) {
+  var config = _ref.config,
+      componentName = _ref.componentName,
+      WithArrowConfig = _ref.WithArrowConfig,
+      withSubsequentLoad = _ref.withSubsequentLoad;
+  var showButton = get(config, ["showButton"], true);
+  var btnText = get(config, ["buttonText"], "Read More");
+  var theme = get(config, ["theme"], "");
+  var textColor = getTextColor(theme);
+  /* Open an array to maintain load-more initiated components to re-render */
+
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      components = _useState2[0],
+      setComponents = _useState2[1];
+
+  var addComponent = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event) {
+      var collectionSlug, offset, limit, Component, _yield$yield$fetch$js, items, updatedOffset, updatedCompList;
+
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              event.persist();
+              collectionSlug = event.target.parentElement.getAttribute("data-collection-slug");
+              offset = event.target.parentElement.getAttribute("data-collection-offset");
+              limit = event.target.parentElement.getAttribute("data-collection-limit");
+              Component = getTemplate(componentName);
+              _context.next = 7;
+              return fetch("/api/v1/collections/".concat(collectionSlug, "?item-type=story&offset=").concat(offset, "&limit=").concat(limit));
+
+            case 7:
+              _context.next = 9;
+              return _context.sent.json();
+
+            case 9:
+              _yield$yield$fetch$js = _context.sent;
+              items = _yield$yield$fetch$js.items;
+
+              if (items.length) {
+                updatedOffset = parseInt(offset) + parseInt(limit);
+                event.target.parentElement.setAttribute("data-collection-offset", updatedOffset);
+              }
+
+              updatedCompList = [].concat(_toConsumableArray(components), [{
+                // Passing a number below the initial collection length (which we will not know here)
+                // as the second parameter causes the Load More button to be rendered regardless of
+                // the value given to `isLoadMoreVisible`. Since this paramter will be ignored anyway,
+                // we pass in a number that is sufficiently always larger.
+                Component: WithArrowConfig(withSubsequentLoad(Component, limit || 10, true)),
+                props: {
+                  collection: {
+                    items: items
+                  },
+                  isLoadMoreVisible: false,
+                  config: config
+                },
+                componentName: componentName
+              }]);
+              setComponents(updatedCompList);
+
+            case 14:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function addComponent(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  if (!showButton) return null;
+  /* TODO: !HACK! Remove this line post deployment */
+
+  var componentStyles = function componentStyles(componentName) {
+    return componentName === "ArrowOneColStoryList" ? {
+      marginLeft: 0
+    } : {};
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, components.map(function (_ref3, index) {
+    var Component = _ref3.Component,
+        props = _ref3.props;
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        maxWidth: 1172,
+        margin: "auto"
+      },
+      key: "extendedLoadMoreBase-key-".concat(index)
+    }, /*#__PURE__*/React.createElement(Suspense, {
+      fallback: /*#__PURE__*/React.createElement("div", null, "Loading...")
+    }, /*#__PURE__*/React.createElement(Component, props)));
+  }), /*#__PURE__*/React.createElement("div", {
+    style: componentStyles(componentName),
+    onClick: addComponent,
+    className: "arr--button " + _getClassName("button ".concat(textColor, " default"), _styleModuleImportMap)
+  }, btnText));
+};
+ExtendedLoadMore.propTypes = {
+  componentName: PropTypes.string,
+  config: PropTypes.object,
+  WithArrowConfig: PropTypes.func,
+  withSubsequentLoad: PropTypes.func
+};

package/esm/components/Atoms/FallbackImage/fallback.m.css

@@ -0,0 +1,33 @@
+.image-position {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+}
+
+.image {
+  composes: image-position;
+  background: var(--fallback-img);
+}
+
+.image::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  /* background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), transparent 50%, transparent); */
+}
+
+.fallback-svg svg {
+  object-fit: cover;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  height: 100%;
+}

package/esm/components/Atoms/FallbackImage/index.js

@@ -0,0 +1,29 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { ImageFallbackIcon } from "../../Svgs/fallbackImage";
+import { Link } from "@quintype/components";
+import "./fallback.m.css";
+
+var imageFallback = function imageFallback() {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "arr--fallback-image fallback-m_image__1GYCJ fallback-m_image-position__3KddP"
+  }, /*#__PURE__*/React.createElement("figure", {
+    className: "arr--fallback-svg fallback-m_fallback-svg__tK9fL"
+  }, /*#__PURE__*/React.createElement(ImageFallbackIcon, null)));
+};
+
+export var FallbackImage = function FallbackImage(_ref) {
+  var slug = _ref.slug;
+
+  if (slug) {
+    return /*#__PURE__*/React.createElement(Link, {
+      href: slug,
+      "aria-label": "image-fallback"
+    }, imageFallback());
+  } else {
+    return imageFallback();
+  }
+};
+FallbackImage.propTypes = {
+  slug: PropTypes.string
+};

package/esm/components/Atoms/Headline/README.md

@@ -0,0 +1,7 @@
+# Headline
+
+## Usage 
+```jsx
+<Headline story={story} headerLevel={1} />
+```
+<!-- PROPS -->

package/esm/components/Atoms/Headline/headline.m.css

@@ -0,0 +1,26 @@
+@custom-media --viewport-medium (width >= 768px);
+
+.wrapper {
+  margin-bottom: 6px;
+}
+
+.headline {
+  margin-bottom: var(--arrow-spacing-xxs);
+  color: var(--arrow-c-mono2);
+  font-weight: var(--arrow-fw-semi-bold);
+  @media (--viewport-medium) {
+    margin-bottom: var(--arrow-spacing-xs);
+  }
+}
+
+.wrapper .headline {
+  display: inline;
+  margin-bottom: var(--arrow-spacing-xs);
+}
+
+.dark {
+  color: var(--arrow-c-mono2);
+}
+.light {
+  color: var(--arrow-c-invert-mono2);
+}

package/esm/components/Atoms/Headline/index.js

@@ -0,0 +1,97 @@
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+import React from "react";
+import PropTypes from "prop-types";
+import { Link } from "@quintype/components";
+import { useStateValue } from "../../SharedContext";
+import { get } from "lodash";
+import { getTextColor, isExternalStory, getStoryUrl } from "../../../utils/utils";
+import { PremiumStoryIcon } from "../PremiumStoryIcon";
+import LiveIcon from "../../Svgs/liveicon";
+import "./headline.m.css";
+var _styleModuleImportMap = {
+  "./headline.m.css": {
+    "wrapper": "headline-m_wrapper__3nUmh",
+    "headline": "headline-m_headline__3_NhV",
+    "dark": "headline-m_dark__en3hW",
+    "light": "headline-m_light__3lKJB"
+  }
+};
+export var Headline = function Headline(_ref) {
+  var story = _ref.story,
+      headerLevel = _ref.headerLevel,
+      _ref$premiumStoryIcon = _ref.premiumStoryIconConfig,
+      premiumStoryIconConfig = _ref$premiumStoryIcon === void 0 ? {} : _ref$premiumStoryIcon,
+      isLink = _ref.isLink;
+  var configData = useStateValue() || {};
+  var _premiumStoryIconConf = premiumStoryIconConfig.iconColor,
+      iconColor = _premiumStoryIconConf === void 0 ? "#F7B500" : _premiumStoryIconConf,
+      _premiumStoryIconConf2 = premiumStoryIconConfig.iconStyle,
+      iconStyle = _premiumStoryIconConf2 === void 0 ? "star" : _premiumStoryIconConf2,
+      _premiumStoryIconConf3 = premiumStoryIconConfig.enablePremiumStoryIcon,
+      enablePremiumStoryIcon = _premiumStoryIconConf3 === void 0 ? false : _premiumStoryIconConf3,
+      _premiumStoryIconConf4 = premiumStoryIconConfig.showLiveIcon,
+      showLiveIcon = _premiumStoryIconConf4 === void 0 ? false : _premiumStoryIconConf4;
+  var alternateHeadline = get(story, ["alternative", "home", "default", "headline"]);
+  var premiumStory = enablePremiumStoryIcon && get(story, ["access"]) === "subscription";
+  var headline = alternateHeadline || story.headline;
+  var HeaderTag = "h" + headerLevel;
+
+  var positionHeadline = function positionHeadline() {
+    switch (parseInt(headerLevel)) {
+      case 1:
+        return "-2px";
+
+      case 2:
+        return "2px";
+
+      case 3:
+        return "4px";
+
+      case 4:
+        return "5px";
+
+      default:
+        return "6px";
+    }
+  };
+
+  var textColor = getTextColor(configData.theme);
+  var wrapperClass = premiumStory ? "wrapper" : "";
+  var iconSize = "24px";
+  var enableLiveIcon = showLiveIcon && story["story-template"] === "live-blog" && !get(story, ["metadata", "is-closed"], false);
+  return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "headline",
+    className: "arrow-component arr--headline " + _getClassName(wrapperClass, _styleModuleImportMap)
+  }, premiumStory && /*#__PURE__*/React.createElement(PremiumStoryIcon, {
+    width: iconSize,
+    height: iconSize,
+    color: iconColor,
+    iconType: iconStyle,
+    positionTop: positionHeadline()
+  }), isLink ? /*#__PURE__*/React.createElement(Link, {
+    href: getStoryUrl(story, "/".concat(story.slug)),
+    externalLink: isExternalStory(story),
+    "aria-label": "headline"
+  }, /*#__PURE__*/React.createElement(HeaderTag, {
+    className: _getClassName("headline ".concat(textColor), _styleModuleImportMap)
+  }, enableLiveIcon && /*#__PURE__*/React.createElement(LiveIcon, null), headline)) : /*#__PURE__*/React.createElement(HeaderTag, {
+    className: _getClassName("headline ".concat(textColor), _styleModuleImportMap)
+  }, enableLiveIcon && /*#__PURE__*/React.createElement(LiveIcon, null), headline));
+};
+Headline.propTypes = {
+  /** The Story Object from the API response */
+  story: PropTypes.object.isRequired,
+
+  /** Header tags ranging h1-h6, where h[headerLevel] */
+  headerLevel: PropTypes.string,
+  premiumStoryIconConfig: PropTypes.shape({
+    iconColor: PropTypes.string,
+    iconType: PropTypes.string,
+    enablePremiumStoryIcon: PropTypes.bool
+  }),
+  isLink: PropTypes.bool
+};
+Headline.defaultProps = {
+  headerLevel: "6",
+  isLink: true
+};

package/esm/components/Atoms/Headline/stories.js

@@ -0,0 +1,39 @@
+import React from "react";
+import { generateStory } from "../../Fixture";
+import { optionalSelect, withStore } from "../../../../storybook";
+import { Headline } from "./index";
+import Readme from "./README.md";
+import { boolean as _boolean, color } from "@storybook/addon-knobs";
+var story = generateStory();
+var headerLevelOptions = {
+  "No Value": "",
+  h1: 1,
+  h2: 2,
+  h3: 3,
+  h4: 4,
+  h5: 5,
+  h6: 6
+};
+var iconType = {
+  Star: "star",
+  Crown: "crown",
+  Lock: "lock",
+  Key: "key"
+};
+withStore("Atoms/Headline", {
+  qt: {
+    config: {
+      "cdn-image": "thumbor-stg.assettype.com"
+    }
+  }
+}, Readme).add("default", function () {
+  return /*#__PURE__*/React.createElement(Headline, {
+    story: story,
+    headerLevel: optionalSelect("Header level", headerLevelOptions),
+    premiumStoryIconConfig: {
+      iconColor: color("Icon color", "#F7B500"),
+      iconStyle: optionalSelect("Icon Types", iconType),
+      enablePremiumStoryIcon: _boolean("Enable Premium Icon", true)
+    }
+  });
+}, Readme);

package/esm/components/Atoms/HeroImage/README.md

@@ -0,0 +1,13 @@
+# HeroImage
+Displays the Hero Image for a story with the help of the `ResponsiveHeroImage` component from the `@quintype/components` package.
+
+## Usage
+```jsx
+<HeroImage story={story} />
+```
+
+```jsx
+<HeroImage story={story} FullBleed={false} />
+```
+
+<!-- PROPS -->

package/esm/components/Atoms/HeroImage/hero-image.m.css

@@ -0,0 +1,72 @@
+@custom-media --viewport-medium (width >= 768px);
+
+.hero-image {
+  margin-bottom: var(--arrow-spacing-xs);
+  padding-right: 0;
+  flex-grow: 1;
+  position: relative;
+}
+.right-padding {
+  margin-bottom: 0;
+  padding-right: var(--arrow-spacing-s);
+  flex-grow: 1;
+}
+
+.left-padding {
+  margin-bottom: 0;
+  padding-left: var(--arrow-spacing-s);
+  flex-grow: 1;
+}
+
+.right-padding-mob {
+  margin-bottom: 0;
+  padding-right: var(--arrow-spacing-s);
+  flex-grow: 1;
+  flex-basis: 30%;
+  @media (--viewport-medium) {
+    padding-right: 0;
+    margin-bottom: var(--arrow-spacing-xs);
+  }
+}
+
+.placeholder {
+  background-color: lightgray;
+}
+
+html[dir="rtl"] {
+  .right-padding,
+  .right-padding-mob {
+    padding-right: 0;
+    padding-left: var(--arrow-spacing-s);
+  }
+
+  .right-padding-mob {
+    @media (--viewport-medium) {
+      padding-left: 0;
+    }
+  }
+}
+
+.hero-image-mob {
+  margin-bottom: var(--arrow-spacing-xs);
+  padding-right: 0;
+  flex-grow: 1;
+  @media (--viewport-medium) {
+    /* margin-bottom: 0; */
+  }
+}
+.with-padding {
+  padding: 16px 16px 0 16px;
+}
+
+.image {
+  position: relative;
+}
+.image img {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 100%;
+}

package/esm/components/Atoms/HeroImage/index.js

@@ -0,0 +1,175 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+import { Link, ResponsiveHeroImage } from "@quintype/components";
+import { get } from "lodash";
+import PropTypes from "prop-types";
+import React from "react";
+import { useSelector } from "react-redux";
+import { clientWidth, isExternalStory, getStoryUrl } from "../../../utils/utils";
+import { useStateValue } from "../../SharedContext";
+import { FallbackImage } from "../FallbackImage";
+import { HyperLink } from "../Hyperlink";
+import "./hero-image.m.css";
+var _styleModuleImportMap = {
+  "./hero-image.m.css": {
+    "hero-image": "hero-image-m_hero-image__3lraV",
+    "right-padding": "hero-image-m_right-padding__1LkCe",
+    "left-padding": "hero-image-m_left-padding__pYRAj",
+    "right-padding-mob": "hero-image-m_right-padding-mob__3-uOU",
+    "placeholder": "hero-image-m_placeholder__1omCm",
+    "hero-image-mob": "hero-image-m_hero-image-mob__13JJp",
+    "with-padding": "hero-image-m_with-padding__324G_",
+    "image": "hero-image-m_image__1mz0U"
+  }
+};
+export var HeroImage = function HeroImage(_ref) {
+  var story = _ref.story,
+      FullBleed = _ref.FullBleed,
+      aspectRatio = _ref.aspectRatio,
+      defaultWidth = _ref.defaultWidth,
+      widths = _ref.widths,
+      isHorizontal = _ref.isHorizontal,
+      isHorizontalMobile = _ref.isHorizontalMobile,
+      isHorizontalWithImageLast = _ref.isHorizontalWithImageLast,
+      defaultFallback = _ref.defaultFallback,
+      isStoryPageImage = _ref.isStoryPageImage,
+      config = _ref.config;
+
+  var _ref2 = useStateValue() || {},
+      _ref2$fallbackImageUr = _ref2.fallbackImageUrl,
+      fallbackImageUrl = _ref2$fallbackImageUr === void 0 ? "" : _ref2$fallbackImageUr;
+
+  var _config$StoryTemplate = config.StoryTemplateIcon,
+      StoryTemplateIcon = _config$StoryTemplate === void 0 ? function () {
+    return null;
+  } : _config$StoryTemplate;
+  var showImagePlaceholder = useSelector(function (state) {
+    return get(state, ["qt", "config", "showPlaceholder"]);
+  });
+  var getPlaceholderStyleName = showImagePlaceholder ? "placeholder" : "";
+  var fullBleed = FullBleed ? "" : "with-padding";
+  var heroImageClass = "hero-image";
+  if (isHorizontal) heroImageClass = "right-padding";else if (isHorizontalWithImageLast) heroImageClass = "left-padding";
+  var heroImageMobClasses = isHorizontalMobile ? "right-padding-mob" : "";
+
+  var getPadding = function getPadding(aspectRatio) {
+    var _aspectRatio = _slicedToArray(aspectRatio, 2),
+        height = _aspectRatio[0],
+        width = _aspectRatio[1];
+
+    if (height > 0 && width > 0) {
+      var padding = width / height * 100;
+      return padding;
+    }
+
+    return 0;
+  };
+
+  var _aspectRatio2 = _slicedToArray(aspectRatio, 2),
+      mobileAspectRatio = _aspectRatio2[0],
+      _aspectRatio2$ = _aspectRatio2[1],
+      desktopAspectRatio = _aspectRatio2$ === void 0 ? mobileAspectRatio : _aspectRatio2$;
+
+  var isMobile = clientWidth("mobile");
+  var imageAspectRatio = isMobile ? mobileAspectRatio : desktopAspectRatio;
+  var imagePadding = isMobile ? getPadding(mobileAspectRatio) : getPadding(desktopAspectRatio);
+  var slug = get(story, ["hero-image-s3-key"]) || get(story, ["alternative", "home", "default", "hero-image", "hero-image-s3-key"]);
+  var hyperLink = get(story, ["hero-image-hyperlink"], "");
+
+  var fallbackImage = function fallbackImage() {
+    if (!slug) {
+      if (fallbackImageUrl && !isStoryPageImage) {
+        return /*#__PURE__*/React.createElement("figure", {
+          style: {
+            paddingTop: imagePadding + "%"
+          },
+          className: "arr--responsive-hero-image " + _getClassName("image ".concat(getPlaceholderStyleName), _styleModuleImportMap)
+        }, /*#__PURE__*/React.createElement("img", {
+          className: "qt-image",
+          "data-src": "".concat(fallbackImageUrl),
+          alt: "image-fallback"
+        }));
+      }
+
+      return /*#__PURE__*/React.createElement(React.Fragment, null, defaultFallback ? /*#__PURE__*/React.createElement("div", {
+        "data-test-id": "arr--fallback-hero-image",
+        style: {
+          paddingTop: imagePadding + "%"
+        },
+        className: "arr--fallback-hero-image " + _getClassName("image ".concat(getPlaceholderStyleName), _styleModuleImportMap)
+      }, /*#__PURE__*/React.createElement(StoryTemplateIcon, {
+        storyTemplate: story["story-template"]
+      }), /*#__PURE__*/React.createElement(FallbackImage, null)) : null);
+    }
+
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("figure", {
+      style: {
+        paddingTop: imagePadding + "%"
+      },
+      className: "arr--responsive-hero-image " + _getClassName("image ".concat(getPlaceholderStyleName), _styleModuleImportMap)
+    }, /*#__PURE__*/React.createElement(StoryTemplateIcon, {
+      storyTemplate: story["story-template"]
+    }), /*#__PURE__*/React.createElement(ResponsiveHeroImage, {
+      story: story,
+      aspectRatio: imageAspectRatio,
+      defaultWidth: defaultWidth,
+      widths: widths,
+      imgParams: {
+        auto: ["format", "compress"],
+        fit: "max"
+      }
+    })), isStoryPageImage && hyperLink && /*#__PURE__*/React.createElement(HyperLink, {
+      hyperLink: hyperLink
+    }));
+  };
+
+  return story && (isStoryPageImage ? /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "arr--hero-image",
+    className: "arr--hero-image " + _getClassName("".concat(heroImageClass, " ").concat(fullBleed, " ").concat(heroImageMobClasses), _styleModuleImportMap)
+  }, fallbackImage()) : /*#__PURE__*/React.createElement(Link, {
+    "data-test-id": "arr--hero-image",
+    href: getStoryUrl(story, "/".concat(story.slug)),
+    externalLink: isExternalStory(story),
+    "aria-label": "fallback-hero-image",
+    className: "arr--hero-image " + _getClassName("".concat(heroImageClass, " ").concat(fullBleed, " ").concat(heroImageMobClasses), _styleModuleImportMap)
+  }, fallbackImage()));
+};
+HeroImage.propTypes = {
+  /** The Story Object from the API response */
+  story: PropTypes.object.isRequired,
+
+  /** Removes the Hero Image padding for the image to bleed over the margin */
+  FullBleed: PropTypes.bool,
+
+  /** The default width for the image, in case the browser does not support srcset */
+  defaultWidth: PropTypes.number,
+
+  /** The list of available widths */
+  widths: PropTypes.array,
+  // fatch the correct hero image
+  aspectRatio: PropTypes.array,
+  //  Hints for the browser to choose the best size
+
+  /** This prop is responsible for adding padding-right of the image and remove padding bottom of the image  */
+  isHorizontal: PropTypes.bool,
+
+  /** This prop is responsible for adding padding-bottom in desktop and padding-right in mobile */
+  isHorizontalMobile: PropTypes.bool,
+  // this prop is responsive for rendering fallback image on story page
+  defaultFallback: PropTypes.bool,
+  isHorizontalWithImageLast: PropTypes.bool,
+  isStoryPageImage: PropTypes.bool,
+  config: PropTypes.object
+};
+HeroImage.defaultProps = {
+  FullBleed: true,
+  aspectRatio: [[1, 1], [16, 9]],
+  defaultWidth: 480,
+  widths: [250, 480, 640],
+  isHorizontal: false,
+  isHorizontalMobile: false,
+  defaultFallback: true,
+  isStoryPageImage: false,
+  isHorizontalWithImageLast: false,
+  config: {}
+};