@quintype/arrow 3.15.1-fallback-support.1 → 3.15.1-perf.1

package/atoms/ExtendedLoadMore/index-6f8c780e.js

@@ -0,0 +1,243 @@
+import { a as get_1, g as getTextColor, _ as _getClassName, t as truncate, i as isEmpty, r as rgbToHex } from './index-e39b3ca8.js';
+import React from 'react';
+import { u as useStateValue, H as Headline, A as AuthorWithTime } from './index-aa8b8ab8.js';
+import PropTypes from 'prop-types';
+import { H as HeroImage, S as SectionTag } from './index-6cb56d1a.js';
+
+var _styleModuleImportMap$1 = {
+  "./subheadline.m.css": {
+    "subheadline": "subheadline-m_subheadline__3fd7z",
+    "dark": "subheadline-m_dark__28u00",
+    "light": "subheadline-m_light__2YUOe"
+  }
+};
+var Subheadline = function Subheadline(_ref) {
+  var story = _ref.story,
+      _ref$truncateChars = _ref.truncateChars,
+      truncateChars = _ref$truncateChars === void 0 ? 200 : _ref$truncateChars,
+      lineClamp = _ref.lineClamp,
+      _ref$clazzName = _ref.clazzName,
+      clazzName = _ref$clazzName === void 0 ? "" : _ref$clazzName,
+      forceShowAtom = _ref.forceShowAtom,
+      showFullContent = _ref.showFullContent;
+  var config = useStateValue() || {};
+  var subheadline = forceShowAtom || get_1(config, ["showSubheadline"], true);
+  if (!subheadline) return null;
+  var textColor = getTextColor(config.theme);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      WebkitLineClamp: lineClamp
+    },
+    "data-test-id": "subheadline",
+    className: ("p-alt arr--sub-headline arrow-component ".concat(clazzName) ? "p-alt arr--sub-headline arrow-component ".concat(clazzName) + " " : "") + _getClassName("subheadline ".concat(textColor), _styleModuleImportMap$1)
+  }, showFullContent || typeof lineClamp === "number" ? story.subheadline : truncate(story.subheadline, truncateChars, true));
+};
+Subheadline.propTypes = {
+  /** The Story Object from the API response */
+  story: PropTypes.object.isRequired,
+  //  Restricts the number of lines for subheadline.
+  lineClamp: PropTypes.number,
+
+  /** Number of characters to truncate the subheadline */
+  truncateChars: PropTypes.number,
+  clazzName: PropTypes.string,
+  forceShowAtom: PropTypes.bool,
+  showFullContent: PropTypes.bool
+};
+Subheadline.defaultProps = {
+  forceShowAtom: false,
+  showFullContent: false
+};
+
+var _styleModuleImportMap = {
+  "./storycard.m.css": {
+    "author-timestamp-wrapper": "storycard-m_author-timestamp-wrapper__20yjp",
+    "default-card": "storycard-m_default-card__1-POn",
+    "horizontal-card": "storycard-m_horizontal-card___7afz",
+    "backgroung-img": "storycard-m_backgroung-img__1FMJT",
+    "content-overlap": "storycard-m_content-overlap__1yNHR",
+    "border-full": "storycard-m_border-full__1nhy7",
+    "light": "storycard-m_light__3EhXN",
+    "dark": "storycard-m_dark__2wCTq",
+    "border-bottom": "storycard-m_border-bottom__2_E-I",
+    "border-boxShadow": "storycard-m_border-boxShadow__2-k3Z",
+    "center-align": "storycard-m_center-align__1Sn8-",
+    "content-bottom": "storycard-m_content-bottom__1QHeC",
+    "content-full": "storycard-m_content-full__2zJmU",
+    "content-boxShadow": "storycard-m_content-boxShadow__2IAWZ",
+    "hero-image": "storycard-m_hero-image__1H3MB",
+    "right-padding": "storycard-m_right-padding__12-lQ",
+    "horizontal-mob": "storycard-m_horizontal-mob__17JG2",
+    "content": "storycard-m_content__1Q9vq",
+    "border-default": "storycard-m_border-default__PEZ1x",
+    "card": "storycard-m_card__KJwRa",
+    "horizontal-image-last": "storycard-m_horizontal-image-last__3o6LY"
+  }
+};
+var StoryCard = function StoryCard(_ref) {
+  var story = _ref.story,
+      children = _ref.children,
+      isHorizontal = _ref.isHorizontal,
+      aspectRatio = _ref.aspectRatio,
+      border = _ref.border,
+      useImageAsBackground = _ref.useImageAsBackground,
+      bgImgContentOverlap = _ref.bgImgContentOverlap,
+      theme = _ref.theme,
+      borderColor = _ref.borderColor,
+      isHorizontalMobile = _ref.isHorizontalMobile,
+      centerAlign = _ref.centerAlign,
+      headerLevel = _ref.headerLevel,
+      hideAuthorImage = _ref.hideAuthorImage,
+      prefix = _ref.prefix,
+      config = _ref.config,
+      isHorizontalWithImageLast = _ref.isHorizontalWithImageLast;
+  if (!story || isEmpty(story)) return /*#__PURE__*/React.createElement("div", null);
+  var borderOptions = ["default", "full", "bottom", "boxShadow"];
+  var borderTemplate = borderOptions.includes(border) ? "border-".concat(border) : ""; // TODO optimize conditions
+
+  var horizontalCardStyle = "default-card";
+  if (isHorizontal) horizontalCardStyle = "horizontal-card";else if (isHorizontalWithImageLast) horizontalCardStyle = "horizontal-image-last";
+  var bgImageClasses = useImageAsBackground ? "backgroung-img" : "";
+  var bgImgContentOverlapClass = bgImgContentOverlap ? "content-overlap" : "";
+  var textColor = getTextColor(theme);
+  var horizontalMobileClasses = isHorizontalMobile ? "horizontal-mob" : "";
+  var defaultStorycard = /*#__PURE__*/React.createElement(DefaultStoryCard, {
+    story: story,
+    aspectRatio: aspectRatio,
+    border: border,
+    isHorizontalMobile: isHorizontalMobile,
+    isHorizontal: isHorizontal,
+    centerAlign: centerAlign,
+    headerLevel: headerLevel,
+    borderColor: borderColor,
+    hideAuthorImage: hideAuthorImage,
+    prefix: prefix,
+    config: config,
+    isHorizontalWithImageLast: isHorizontalWithImageLast
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "story-card",
+    style: {
+      backgroundColor: theme,
+      color: textColor
+    },
+    className: "arr--story-card " + _getClassName("card ".concat(horizontalCardStyle, " ").concat(borderTemplate, " ").concat(textColor, " ").concat(bgImageClasses, " ").concat(bgImgContentOverlapClass, " ").concat(horizontalMobileClasses), _styleModuleImportMap)
+  }, children || defaultStorycard);
+};
+
+var DefaultStoryCard = function DefaultStoryCard(_ref2) {
+  var story = _ref2.story;
+      _ref2.border;
+      var isHorizontal = _ref2.isHorizontal,
+      aspectRatio = _ref2.aspectRatio,
+      headerLevel = _ref2.headerLevel,
+      _ref2$isHorizontalMob = _ref2.isHorizontalMobile,
+      isHorizontalMobile = _ref2$isHorizontalMob === void 0 ? false : _ref2$isHorizontalMob,
+      _ref2$centerAlign = _ref2.centerAlign,
+      centerAlign = _ref2$centerAlign === void 0 ? false : _ref2$centerAlign,
+      borderColor = _ref2.borderColor,
+      hideAuthorImage = _ref2.hideAuthorImage,
+      prefix = _ref2.prefix,
+      isHorizontalWithImageLast = _ref2.isHorizontalWithImageLast,
+      config = _ref2.config;
+  var alignment = centerAlign ? "center-align" : "";
+  var SectionTagborderColor = rgbToHex(borderColor);
+  var _config$localizationC = config.localizationConfig,
+      localizationConfig = _config$localizationC === void 0 ? {} : _config$localizationC;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isHorizontal ? /*#__PURE__*/React.createElement(HeroImage, {
+    config: config,
+    story: story,
+    isHorizontal: true,
+    isHorizontalMobile: isHorizontalMobile,
+    aspectRatio: aspectRatio
+  }) : isHorizontalWithImageLast ? /*#__PURE__*/React.createElement(HeroImage, {
+    config: config,
+    story: story,
+    isHorizontalWithImageLast: true,
+    isHorizontalMobile: isHorizontalMobile,
+    aspectRatio: aspectRatio
+  }) : /*#__PURE__*/React.createElement(HeroImage, {
+    story: story,
+    config: config,
+    isHorizontalMobile: isHorizontalMobile,
+    aspectRatio: aspectRatio
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "arr--story-content " + _getClassName("content ".concat(alignment), _styleModuleImportMap)
+  }, /*#__PURE__*/React.createElement(SectionTag, {
+    story: story,
+    borderColor: SectionTagborderColor
+  }), /*#__PURE__*/React.createElement(Headline, {
+    story: story,
+    headerLevel: headerLevel,
+    premiumStoryIconConfig: config
+  }), /*#__PURE__*/React.createElement(AuthorWithTime, {
+    config: localizationConfig,
+    story: story,
+    isBottom: true,
+    prefix: prefix,
+    hideAuthorImage: hideAuthorImage
+  }), /*#__PURE__*/React.createElement(Subheadline, {
+    story: story
+  })));
+};
+
+DefaultStoryCard.propTypes = {
+  story: PropTypes.object.isRequired,
+  border: PropTypes.oneOfType([PropTypes.string]),
+  isBottom: PropTypes.bool,
+  isHorizontal: PropTypes.bool,
+  aspectRatio: PropTypes.oneOfType([PropTypes.array]),
+  isHorizontalMobile: PropTypes.bool,
+  centerAlign: PropTypes.bool,
+  headerLevel: PropTypes.string,
+  borderColor: PropTypes.string,
+  hideAuthorImage: PropTypes.bool,
+  prefix: PropTypes.string,
+  config: PropTypes.object,
+  isHorizontalWithImageLast: PropTypes.bool
+};
+StoryCard.propTypes = {
+  /** The Story Object from the API response */
+  story: PropTypes.object.isRequired,
+  children: PropTypes.node,
+
+  /** Flip the Story Card to Horizonal mode */
+  isHorizontal: PropTypes.bool,
+
+  /** Add border to the Story Card  */
+  border: PropTypes.oneOfType([PropTypes.string]),
+  // story card with background image
+  useImageAsBackground: PropTypes.bool,
+  // story card  content overlap with image
+  bgImgContentOverlap: PropTypes.bool,
+
+  /** add aspect ratio for hero image  */
+  aspectRatio: PropTypes.oneOfType([PropTypes.array]),
+
+  /** add theme(dark /light/custom color) for storycard  */
+  theme: PropTypes.string,
+
+  /** flip the story card mobile design horizontal */
+  isHorizontalMobile: PropTypes.bool,
+  // make content center align in desktop and left align in mobile
+  centerAlign: PropTypes.bool,
+  headerLevel: PropTypes.string,
+  borderColor: PropTypes.string,
+  // handle author image through storycard
+  hideAuthorImage: PropTypes.bool,
+  // handle author prefix through storycard
+  prefix: PropTypes.string,
+  config: PropTypes.object,
+  isHorizontalWithImageLast: PropTypes.bool
+};
+StoryCard.defaultProps = {
+  isHorizontal: false,
+  isHorizontalMobile: false,
+  border: "default",
+  theme: "",
+  centerAlign: false,
+  borderColor: "",
+  isHorizontalWithImageLast: false
+};
+
+export { StoryCard as S, Subheadline as a };

package/atoms/ExtendedLoadMore/index-7eb05b3d.js

@@ -0,0 +1,199 @@
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { i as isEmpty, g as getTextColor, a as get_1, b as generateNavigateSlug, n as navigateTo } from './index-e39b3ca8.js';
+import PropTypes from 'prop-types';
+import { collectionToStories } from '@quintype/components';
+import { S as StateProvider, C as CollectionName, L as LoadMoreTarget, P as ProgressiveHydration, a as LoadmoreButton } from './index-aa8b8ab8.js';
+import { S as StoryCard } from './index-6f8c780e.js';
+import { S as StorycardContent } from './index-f6e578e3.js';
+import { H as HeroImage } from './index-6cb56d1a.js';
+import 'react-timeago';
+import 'date-fns-tz';
+import 'react-dom';
+
+var PortraitStoryCardBase = function PortraitStoryCardBase(_ref) {
+  var story = _ref.story,
+      _ref$border = _ref.border,
+      border = _ref$border === void 0 ? "" : _ref$border,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? "" : _ref$theme,
+      _ref$headerLevel = _ref.headerLevel,
+      headerLevel = _ref$headerLevel === void 0 ? "6" : _ref$headerLevel,
+      _ref$separator = _ref.separator,
+      separator = _ref$separator === void 0 ? "" : _ref$separator,
+      _ref$config = _ref.config,
+      config = _ref$config === void 0 ? {} : _ref$config,
+      _ref$borderColor = _ref.borderColor,
+      borderColor = _ref$borderColor === void 0 ? "" : _ref$borderColor;
+  if (isEmpty(story)) return null;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "portrait-story-card-m_wrapper__3nche"
+  }, /*#__PURE__*/React.createElement(StoryCard, {
+    story: story,
+    border: border,
+    theme: theme,
+    config: config,
+    useImageAsBackground: true
+  }, /*#__PURE__*/React.createElement(HeroImage, {
+    story: story,
+    aspectRatio: [[9, 16]]
+  }), /*#__PURE__*/React.createElement(StorycardContent, {
+    story: story,
+    config: config,
+    separator: separator,
+    borderColor: borderColor,
+    headerLevel: headerLevel
+  })));
+};
+PortraitStoryCardBase.propTypes = {
+  border: PropTypes.string,
+  theme: PropTypes.string,
+  headerLevel: PropTypes.string,
+  separator: PropTypes.string,
+  borderColor: PropTypes.string,
+  config: PropTypes.object,
+  story: PropTypes.object
+};
+var PortraitStoryCard = StateProvider(PortraitStoryCardBase);
+
+var loadMore = function loadMore(_ref) {
+  var isLoading = _ref.isLoading,
+      storyItems = _ref.storyItems,
+      getMoreStories = _ref.getMoreStories,
+      _ref$subsequentLoadCo = _ref.subsequentLoadCount,
+      subsequentLoadCount = _ref$subsequentLoadCo === void 0 ? 4 : _ref$subsequentLoadCo;
+  if (isLoading) return; // prevent multiple clicks/calls
+
+  var limit = subsequentLoadCount;
+  var offset = storyItems.length;
+  getMoreStories(offset, limit);
+};
+
+var FourColPortraitStoriesBase = function FourColPortraitStoriesBase(_ref2) {
+  var collection = _ref2.collection,
+      _ref2$config = _ref2.config,
+      config = _ref2$config === void 0 ? {} : _ref2$config,
+      getMoreStories = _ref2.getMoreStories,
+      isLoadMoreVisible = _ref2.isLoadMoreVisible,
+      isLoading = _ref2.isLoading,
+      isolatedLoadMore = _ref2.isolatedLoadMore;
+  var storyItems = collectionToStories(collection);
+  if (!storyItems.length) return null;
+  var _config$collectionNam = config.collectionNameBorderColor,
+      collectionNameBorderColor = _config$collectionNam === void 0 ? "" : _config$collectionNam,
+      _config$borderColor = config.borderColor,
+      borderColor = _config$borderColor === void 0 ? "" : _config$borderColor,
+      _config$theme = config.theme,
+      theme = _config$theme === void 0 ? "" : _config$theme,
+      _config$border = config.border,
+      border = _config$border === void 0 ? "" : _config$border,
+      _config$collectionNam2 = config.collectionNameTemplate,
+      collectionNameTemplate = _config$collectionNam2 === void 0 ? "" : _config$collectionNam2,
+      _config$footerSlotCon = config.footerSlotConfig,
+      footerSlotConfig = _config$footerSlotCon === void 0 ? {} : _config$footerSlotCon,
+      _config$footerButton = config.footerButton,
+      footerButton = _config$footerButton === void 0 ? "" : _config$footerButton,
+      customCollectionName = config.customCollectionName,
+      _config$navigate = config.navigate,
+      navigate = _config$navigate === void 0 ? true : _config$navigate,
+      _config$subsequentLoa = config.subsequentLoadCount,
+      subsequentLoadCount = _config$subsequentLoa === void 0 ? 4 : _config$subsequentLoa;
+  var footerSlot = footerSlotConfig.footerSlot;
+  var footerSlotComp = typeof footerSlot === "function" ? footerSlot() : null;
+  var textColor = getTextColor(theme);
+  var dispatch = useDispatch();
+  var qtConfig = useSelector(function (state) {
+    return get_1(state, ["qt", "config"], {});
+  });
+
+  var getLoadMore = function getLoadMore(opts) {
+    if (!isLoadMoreVisible) return null;
+
+    if (isolatedLoadMore) {
+      return /*#__PURE__*/React.createElement(LoadMoreTarget, {
+        collection: collection,
+        componentName: "FourColPortraitStories",
+        offset: storyItems.length,
+        limit: subsequentLoadCount
+      });
+    }
+
+    var url = generateNavigateSlug(collection, qtConfig);
+    return /*#__PURE__*/React.createElement(ProgressiveHydration, null, /*#__PURE__*/React.createElement(LoadmoreButton, {
+      config: config,
+      collection: collection,
+      template: footerButton,
+      onClick: function onClick() {
+        return loadMore(opts);
+      },
+      navigate: function navigate() {
+        return navigateTo(dispatch, url);
+      },
+      qtConfig: qtConfig
+    }));
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "full-width-with-padding arrow-component",
+    "data-test-id": "four-col-portrait-stories",
+    style: {
+      backgroundColor: theme,
+      color: textColor
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "four-col-portrait-stories-m_four-col-portrait__AtWub"
+  }, /*#__PURE__*/React.createElement(CollectionName, {
+    collection: collection,
+    collectionNameTemplate: collectionNameTemplate,
+    collectionNameBorderColor: collectionNameBorderColor,
+    customCollectionName: customCollectionName,
+    navigate: navigate
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "four-col-portrait-stories-m_wrapper__1BX02"
+  }, storyItems.map(function (story, index) {
+    return /*#__PURE__*/React.createElement(PortraitStoryCard, {
+      story: story,
+      border: border,
+      theme: theme,
+      config: Object.assign({
+        showSection: false,
+        showAuthor: false,
+        showReadTime: false
+      }, config),
+      borderColor: borderColor,
+      key: "story-card-".concat(index)
+    });
+  })), getLoadMore({
+    isLoading: isLoading,
+    storyItems: storyItems,
+    getMoreStories: getMoreStories,
+    subsequentLoadCount: subsequentLoadCount
+  }), footerSlotComp));
+};
+FourColPortraitStoriesBase.propTypes = {
+  /**  collection is the array of objects which is returning by API  */
+  collection: PropTypes.object.isRequired,
+
+  /** The config for the Row */
+  config: PropTypes.shape({
+    borderColor: PropTypes.string,
+    theme: PropTypes.string,
+    border: PropTypes.bool,
+    collectionNameTemplate: PropTypes.string,
+    footerButton: PropTypes.string,
+    collectionNameBorderColor: PropTypes.string,
+    subsequentLoadCount: PropTypes.number
+  }),
+  getMoreStories: PropTypes.func,
+  isLoadMoreVisible: PropTypes.bool,
+  isLoading: PropTypes.bool,
+  isolatedLoadMore: PropTypes.bool
+};
+FourColPortraitStoriesBase.defaultProps = {
+  getMoreStories: function getMoreStories() {},
+  isLoadMoreVisible: true,
+  isLoading: false
+};
+var FourColPortraitStories = StateProvider(FourColPortraitStoriesBase);
+
+export { FourColPortraitStories, FourColPortraitStoriesBase };

package/atoms/ExtendedLoadMore/index-8345922c.js

@@ -0,0 +1,175 @@
+import React, { Fragment } from 'react';
+import { g as getTextColor, a as get_1, l as getSlot, b as generateNavigateSlug, n as navigateTo } from './index-e39b3ca8.js';
+import { S as StoryCard } from './index-6f8c780e.js';
+import { H as HeroImage } from './index-6cb56d1a.js';
+import { S as StorycardContent } from './index-f6e578e3.js';
+import { C as CollectionName, S as StateProvider, L as LoadMoreTarget, P as ProgressiveHydration, a as LoadmoreButton } from './index-aa8b8ab8.js';
+import { collectionToStories } from '@quintype/components';
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import 'react-timeago';
+import 'date-fns-tz';
+import 'react-dom';
+
+var loadMore = function loadMore(_ref) {
+  var isLoading = _ref.isLoading,
+      storyItems = _ref.storyItems,
+      getMoreStories = _ref.getMoreStories,
+      _ref$subsequentLoadCo = _ref.subsequentLoadCount,
+      subsequentLoadCount = _ref$subsequentLoadCo === void 0 ? 3 : _ref$subsequentLoadCo;
+  if (isLoading) return;
+  var limit = subsequentLoadCount;
+  var offset = storyItems.length;
+  getMoreStories(offset, limit);
+};
+
+var ThreeColGridBase = function ThreeColGridBase(_ref2) {
+  var collection = _ref2.collection,
+      _ref2$config = _ref2.config,
+      config = _ref2$config === void 0 ? {} : _ref2$config,
+      getMoreStories = _ref2.getMoreStories,
+      isLoadMoreVisible = _ref2.isLoadMoreVisible,
+      isLoading = _ref2.isLoading,
+      isolatedLoadMore = _ref2.isolatedLoadMore;
+  var _config$collectionNam = config.collectionNameBorderColor,
+      collectionNameBorderColor = _config$collectionNam === void 0 ? "" : _config$collectionNam,
+      _config$borderColor = config.borderColor,
+      borderColor = _config$borderColor === void 0 ? "" : _config$borderColor,
+      _config$theme = config.theme,
+      theme = _config$theme === void 0 ? "" : _config$theme,
+      _config$slotConfig = config.slotConfig,
+      slotConfig = _config$slotConfig === void 0 ? [] : _config$slotConfig,
+      _config$border = config.border,
+      border = _config$border === void 0 ? "" : _config$border,
+      _config$collectionNam2 = config.collectionNameTemplate,
+      collectionNameTemplate = _config$collectionNam2 === void 0 ? "" : _config$collectionNam2,
+      _config$footerSlotCon = config.footerSlotConfig,
+      footerSlotConfig = _config$footerSlotCon === void 0 ? {} : _config$footerSlotCon,
+      _config$footerButton = config.footerButton,
+      footerButton = _config$footerButton === void 0 ? "" : _config$footerButton,
+      _config$subsequentLoa = config.subsequentLoadCount,
+      subsequentLoadCount = _config$subsequentLoa === void 0 ? 3 : _config$subsequentLoa;
+  var storyItems = collectionToStories(collection);
+  if (!storyItems.length) return null;
+  var textColor = getTextColor(theme);
+  var footerSlot = footerSlotConfig.footerSlot;
+  var footerSlotComp = footerSlot ? footerSlot() : null;
+
+  var _get = get_1(slotConfig, [0], {}),
+      _get$type = _get.type,
+      type = _get$type === void 0 ? "" : _get$type,
+      component = _get.component;
+
+  var adWidgetSlot = type === "ad" || type === "widget" ? getSlot(type, component) : null;
+  var dispatch = useDispatch();
+  var qtConfig = useSelector(function (state) {
+    return get_1(state, ["qt", "config"], {});
+  });
+
+  var getLoadMore = function getLoadMore(opts) {
+    if (!isLoadMoreVisible) return null;
+
+    if (isolatedLoadMore) {
+      return /*#__PURE__*/React.createElement(LoadMoreTarget, {
+        collection: collection,
+        componentName: "ThreeColGrid",
+        offset: storyItems.length,
+        limit: subsequentLoadCount
+      });
+    }
+
+    var url = generateNavigateSlug(collection, qtConfig);
+    return /*#__PURE__*/React.createElement(ProgressiveHydration, null, /*#__PURE__*/React.createElement(LoadmoreButton, {
+      config: config,
+      collection: collection,
+      template: footerButton,
+      onClick: function onClick() {
+        return loadMore(opts);
+      },
+      navigate: function navigate() {
+        return navigateTo(dispatch, url);
+      },
+      qtConfig: qtConfig
+    }));
+  };
+
+  var storyCard = function storyCard(story) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "three-col-m_cards__2HyyK"
+    }, /*#__PURE__*/React.createElement(StoryCard, {
+      story: story,
+      border: border,
+      theme: theme,
+      isHorizontalMobile: true,
+      config: config
+    }, /*#__PURE__*/React.createElement(HeroImage, {
+      aspectRatio: [[16, 9]],
+      story: story,
+      isHorizontalMobile: true
+    }), /*#__PURE__*/React.createElement(StorycardContent, {
+      theme: theme,
+      border: border,
+      story: story,
+      isHorizontalMobile: true,
+      borderColor: borderColor,
+      config: config
+    })));
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "full-width-with-padding arrow-component",
+    "data-test-id": "three-col-grid",
+    style: {
+      backgroundColor: theme,
+      color: textColor
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "three-col-m_three-col-grid__y7rZK"
+  }, /*#__PURE__*/React.createElement(CollectionName, {
+    collection: collection,
+    collectionNameTemplate: collectionNameTemplate,
+    collectionNameBorderColor: collectionNameBorderColor
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "three-col-m_wrapper__20m5m"
+  }, storyItems.slice(0, 2).map(function (story, index) {
+    return /*#__PURE__*/React.createElement(Fragment, {
+      key: "story-3col1-".concat(index, "-").concat(get_1(story, ["id"], "0"))
+    }, storyCard(story));
+  }), storyItems.length < 2 && /*#__PURE__*/React.createElement("div", null), adWidgetSlot, storyItems.slice(2).map(function (story, index) {
+    return /*#__PURE__*/React.createElement(Fragment, {
+      key: "story-3col1-".concat(index, "-").concat(get_1(story, ["id"], "0"))
+    }, storyCard(story));
+  })), getLoadMore({
+    isLoading: isLoading,
+    storyItems: storyItems,
+    getMoreStories: getMoreStories,
+    subsequentLoadCount: subsequentLoadCount
+  }), footerSlotComp));
+};
+ThreeColGridBase.propTypes = {
+  /**  collection is the array of objects which is returning by API  */
+  collection: PropTypes.object.isRequired,
+
+  /** The config for the Row */
+  config: PropTypes.shape({
+    theme: PropTypes.string,
+    border: PropTypes.bool,
+    slotConfig: PropTypes.array,
+    footerButton: PropTypes.string,
+    collectionNameTemplate: PropTypes.string,
+    collectionNameBorderColor: PropTypes.string,
+    subsequentLoadCount: PropTypes.number
+  }),
+  getMoreStories: PropTypes.func,
+  isLoadMoreVisible: PropTypes.bool,
+  isLoading: PropTypes.bool,
+  isolatedLoadMore: PropTypes.bool
+};
+ThreeColGridBase.defaultProps = {
+  getMoreStories: function getMoreStories() {},
+  isLoadMoreVisible: true,
+  isLoading: false
+};
+var ThreeColGrid = StateProvider(ThreeColGridBase);
+
+export { ThreeColGrid, ThreeColGridBase };