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

package/esm/components/Rows/StoryTemplates/PhotoStoryTemplates/stories.js

@@ -0,0 +1,124 @@
+import { boolean as _boolean, color, text } from "@storybook/addon-knobs";
+import React from "react";
+import { optionalSelect, withStore } from "../../../../../storybook";
+import { AdPlaceholder } from "../../../Atoms/AdPlaceholder";
+import { generateCollection, generateStory } from "../../../Fixture";
+import { slotData } from "../../../Fixture/slot-config";
+import { PhotoStoryBase } from "./index";
+var story = generateStory("photo-story");
+var collection = generateCollection({
+  stories: 4
+});
+var collectionNameDefaultValue = "#3a9fdd";
+var collectionNameBorderColorLabel = "Aside Collection Name Border Color";
+var imageTypeOptions = {
+  "Full Bleed": "fullBleed",
+  "With In Container": "container"
+};
+var templates = {
+  "Hero Priority Left": "default",
+  "Hero Priority Center": "hero-priority-center",
+  "Headline Priority": "headline-priority"
+};
+var iconTypeOptions = {
+  "Circular Color Svg": "circular-color-svg",
+  "Circular Plain Svg": "circular-plain-svg",
+  "Plain Svg": "plain-svg",
+  "Plain Color Svg": "plain-color-svg",
+  "Square Svg": "square-svg"
+};
+var storyElementsConfig = {
+  summary: {},
+  blurb: {},
+  blockquote: {},
+  quote: {},
+  "also-read": {},
+  "q-and-a": {},
+  question: {},
+  answer: {}
+};
+var label = "BG Color";
+var defaultvalue = "#ffffff";
+var authorTemplate = {
+  "default": "default",
+  leftAligned: "leftAligned",
+  centerAligned: "centerAligned"
+};
+var shareType = {
+  "Vertical Share": "sticky",
+  "Horizontal Share": ""
+};
+
+var configurableSlot = function configurableSlot() {
+  return /*#__PURE__*/React.createElement(AdPlaceholder, {
+    height: "250px",
+    width: "300px"
+  });
+};
+
+withStore("Rows/Story Templates/Photo Story Template", {
+  qt: {
+    config: {
+      "cdn-image": "thumbor-stg.assettype.com",
+      mountAt: "/sub-directory"
+    }
+  }
+}).add("Default", function () {
+  var templateConfig = {
+    shareIconType: optionalSelect("Social Share Icon Type", iconTypeOptions),
+    verticalShare: optionalSelect("Share Type", shareType),
+    theme: color(label, defaultvalue),
+    noOfVisibleCards: -1,
+    showSection: _boolean("Show Section Tag", true),
+    templateType: optionalSelect("Template Options", templates),
+    imageRender: optionalSelect("image Options", imageTypeOptions),
+    publishedDetails: {
+      enablePublishedTime: _boolean("Show Published Time", true),
+      enableUpdatedTime: _boolean("Show Updated Time", false),
+      showReadTime: _boolean("Read time", true)
+    },
+    authorDetails: {
+      template: optionalSelect("temp", authorTemplate),
+      opts: {
+        showBio: _boolean("bio", true),
+        showImage: _boolean("image", true),
+        showName: _boolean("Author Name", true)
+      }
+    },
+    premiumStoryIconConfig: {
+      iconColor: "#F7B500",
+      iconType: "star",
+      enablePremiumStoryIcon: true
+    },
+    asideCollection: {
+      data: collection,
+      config: {
+        collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue),
+        title: text("Aside Collection Title", "Trending"),
+        theme: color(label, defaultvalue),
+        adSlot: [{
+          type: "ad",
+          component: configurableSlot
+        }],
+        showAuthor: _boolean("Author", true),
+        showTime: _boolean("Timestamp", true)
+      },
+      slots: slotData
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(PhotoStoryBase, {
+    story: story,
+    config: templateConfig,
+    storyElementsConfig: storyElementsConfig,
+    adComponent: configurableSlot,
+    widgetComp: configurableSlot,
+    firstChild: /*#__PURE__*/React.createElement(AdPlaceholder, {
+      height: "250px",
+      width: "300px"
+    }),
+    secondChild: /*#__PURE__*/React.createElement(AdPlaceholder, {
+      height: "250px",
+      width: "300px"
+    })
+  }));
+});

package/esm/components/Rows/StoryTemplates/TextStoryTemplates/README.md

@@ -0,0 +1,49 @@
+# Text Story Template
+
+Text story template is a basic component used to represent a text story.
+
+## Usage
+
+## Hero Priority Left Align text Story
+
+```jsx
+<TextStoryTemplate story={story} templateConfig={templateConfig} />
+```
+
+## Hero Priority Center Align Text Story
+
+```jsx
+<TextStoryTemplate story={story} templateConfig={templateConfig} />
+```
+
+## Headline Hero Priority Text Story
+
+```jsx
+<TextStoryTemplate story={story} templateConfig={templateConfig} />
+```
+
+## Hero Vertical Priority Text Story
+
+```jsx
+<TextStoryTemplate story={story} templateConfig={templateConfig} />
+```
+
+## Headline Priority Text Story
+
+```jsx
+<TextStoryTemplate story={story} templateConfig={templateConfig} />
+```
+
+## Hero Overlay Priority Text Story
+
+```jsx
+<TextStoryTemplate story={story} templateConfig={templateConfig} />
+```
+
+## Template with Children
+
+```jsx
+<TextStoryTemplate story={story} templateConfig={templateConfig}>
+  <Children />
+</TextStoryTemplate>
+```

package/esm/components/Rows/StoryTemplates/TextStoryTemplates/index.js

@@ -0,0 +1,100 @@
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+import PropTypes from "prop-types";
+import React from "react";
+import { useSelector } from "react-redux";
+import { StateProvider } from "../../../SharedContext";
+import { StoryTemplate } from "./templates";
+import { get, kebabCase } from "lodash";
+import "./text-story.m.css";
+var _styleModuleImportMap = {
+  "./text-story.m.css": {
+    "header-details": "text-story-m_header-details__3D-Xf",
+    "timestamp-social-share": "text-story-m_timestamp-social-share__1tSR7",
+    "story-tags": "text-story-m_story-tags__Roh7y",
+    "hero-image": "text-story-m_hero-image__288rD",
+    "dark": "text-story-m_dark__MWiNW",
+    "light": "text-story-m_light__3G_yD",
+    "hero-vertical-priority": "text-story-m_hero-vertical-priority__2oiTi",
+    "headline-hero-priority": "text-story-m_headline-hero-priority__2oCmW",
+    "hero-priority-center": "text-story-m_hero-priority-center__3z1fN",
+    "headline-overlay-priority": "text-story-m_headline-overlay-priority__3lxqU",
+    "story-content-inner-wrapper": "text-story-m_story-content-inner-wrapper__s3KPp",
+    "aside-collection": "text-story-m_aside-collection__1hg7d",
+    "default": "text-story-m_default__3zTuW",
+    "story-details": "text-story-m_story-details__1jA86",
+    "sticky": "text-story-m_sticky__1qfLp",
+    "headline-priority": "text-story-m_headline-priority__2TsHT",
+    "container": "text-story-m_container__3EYA5",
+    "fullBleed": "text-story-m_fullBleed__vic5M",
+    "headline-first": "text-story-m_headline-first__3lY_O",
+    "text-story-side-column": "text-story-m_text-story-side-column__ChMaj",
+    "image-first": "text-story-m_image-first__2x1qs",
+    "image-wrapper": "text-story-m_image-wrapper__2iv-y",
+    "story-content-wrapper": "text-story-m_story-content-wrapper__3y_iM",
+    "gap-16": "text-story-m_gap-16__5BPKQ",
+    "index-2": "text-story-m_index-2__36i8Z",
+    "tablet-index-2": "text-story-m_tablet-index-2__1FdCR"
+  }
+};
+export var TextStoryTemplateBase = function TextStoryTemplateBase(_ref) {
+  var _ref$story = _ref.story,
+      story = _ref$story === void 0 ? {} : _ref$story,
+      _ref$config = _ref.config,
+      config = _ref$config === void 0 ? {} : _ref$config,
+      storyElementsConfig = _ref.storyElementsConfig,
+      adComponent = _ref.adComponent,
+      widgetComp = _ref.widgetComp,
+      firstChild = _ref.firstChild,
+      secondChild = _ref.secondChild;
+  var _config$theme = config.theme,
+      theme = _config$theme === void 0 ? "" : _config$theme,
+      _config$templateType = config.templateType,
+      templateType = _config$templateType === void 0 ? "default" : _config$templateType,
+      _config$imageRender = config.imageRender,
+      imageRender = _config$imageRender === void 0 ? "fullBleed" : _config$imageRender,
+      _config$sort = config.sort,
+      sort = _config$sort === void 0 ? "headline-first" : _config$sort,
+      _config$verticalShare = config.verticalShare,
+      verticalShare = _config$verticalShare === void 0 ? "" : _config$verticalShare;
+  var sortOption = templateType === "hero-vertical-priority" ? sort : "";
+  var supportImageType = {
+    "default": imageRender,
+    "hero-priority-center": imageRender,
+    "headline-hero-priority": imageRender,
+    "hero-vertical-priority": imageRender
+  };
+  var timezone = useSelector(function (state) {
+    return get(state, ["qt", "data", "timezone"], null);
+  });
+  var dataTestId = supportImageType[templateType] ? "text-story-".concat(templateType, "-").concat(kebabCase(supportImageType[templateType])) : "text-story-".concat(templateType);
+  return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": dataTestId,
+    style: {
+      backgroundColor: theme
+    },
+    className: "arrow-component arr-story-grid arr--content-wrapper arr--text-story-template-wrapper " + _getClassName("".concat(templateType, " ").concat(verticalShare, " ").concat(supportImageType[templateType] || "", " ").concat(sortOption), _styleModuleImportMap)
+  }, /*#__PURE__*/React.createElement(StoryTemplate, {
+    story: story,
+    config: config,
+    storyElementsConfig: storyElementsConfig,
+    adComponent: adComponent,
+    widgetComp: widgetComp,
+    firstChild: firstChild,
+    secondChild: secondChild,
+    timezone: timezone
+  }));
+};
+TextStoryTemplateBase.propTypes = {
+  story: PropTypes.object,
+  config: PropTypes.shape({
+    templateType: PropTypes.string,
+    authorCard: PropTypes.object,
+    asideCollection: PropTypes.object
+  }),
+  firstChild: PropTypes.node,
+  secondChild: PropTypes.node,
+  storyElementsConfig: PropTypes.object,
+  adComponent: PropTypes.func,
+  widgetComp: PropTypes.func
+};
+export var TextStoryTemplate = StateProvider(TextStoryTemplateBase);

package/esm/components/Rows/StoryTemplates/TextStoryTemplates/stories.js

@@ -0,0 +1,124 @@
+import { boolean as _boolean, color, text } from "@storybook/addon-knobs";
+import React from "react";
+import { optionalSelect, withStore } from "../../../../../storybook";
+import { AdPlaceholder } from "../../../Atoms/AdPlaceholder";
+import { generateCollection, generateStory } from "../../../Fixture";
+import { slotData } from "../../../Fixture/slot-config";
+import { TextStoryTemplateBase } from "./index";
+import Readme from "./README.md";
+var story = generateStory();
+var collection = generateCollection({
+  stories: 4
+});
+var authorTemplate = {
+  "default": "default",
+  leftAligned: "leftAligned",
+  centerAligned: "centerAligned",
+  "No value": ""
+};
+var imageTypeOptions = {
+  "Full Bleed": "fullBleed",
+  "With In Container": "container"
+};
+var iconTypeOptions = {
+  "Circular Color Svg": "circular-color-svg",
+  "Circular Plain Svg": "circular-plain-svg",
+  "Plain Svg": "plain-svg",
+  "Plain Color Svg": "plain-color-svg",
+  "Square Svg": "square-svg"
+};
+var templates = {
+  "Hero Priority Left": "default",
+  "Hero Priority Center": "hero-priority-center",
+  "Headline Hero Priority": "headline-hero-priority",
+  "Hero Vertical Priority": "hero-vertical-priority",
+  "Headline Priority": "headline-priority",
+  "Headline Overlay Priority": "headline-overlay-priority"
+};
+var storyElementsConfig = {
+  summary: {},
+  blurb: {},
+  blockquote: {},
+  quote: {},
+  "also-read": {},
+  "q-and-a": {},
+  question: {},
+  answer: {}
+};
+
+var configurableSlot = function configurableSlot() {
+  return /*#__PURE__*/React.createElement(AdPlaceholder, {
+    height: "250px",
+    width: "300px"
+  });
+};
+
+var sortFirstOptions = {
+  "Headline First": "headline-first",
+  "Image First": "image-first"
+};
+var shareType = {
+  "Vertical Share": "sticky",
+  "Horizontal Share": ""
+};
+withStore("Rows/Story Templates/Text Story Template", {
+  qt: {
+    config: {
+      "cdn-image": "thumbor-stg.assettype.com",
+      mountAt: "/sub-directory"
+    }
+  }
+}, Readme).add("default", function () {
+  var templateConfig = {
+    shareIconType: optionalSelect("Social Share Icon Type", iconTypeOptions),
+    verticalShare: optionalSelect("Share Type", shareType),
+    theme: color("BG Color", "#ffffff"),
+    imageRender: optionalSelect("Image Type", imageTypeOptions),
+    sort: optionalSelect("Sort Options", sortFirstOptions),
+    noOfVisibleCards: -1,
+    showSection: _boolean("Show Section Tag", true),
+    templateType: optionalSelect("Template Options", templates),
+    publishedDetails: {
+      enablePublishedTime: _boolean("Show Published Time", true),
+      enableUpdatedTime: _boolean("Show Updated Time", false),
+      showReadTime: _boolean("Read time", true)
+    },
+    premiumStoryIconConfig: {
+      iconColor: "#F7B500",
+      iconType: "star",
+      enablePremiumStoryIcon: true
+    },
+    asideCollection: {
+      data: collection,
+      config: {
+        collectionNameBorderColor: color("Aside Collection Name Border Color", "#3a9fdd"),
+        title: text("Aside Collection Title", "Trending"),
+        theme: color("BG Color", "#ffffff")
+      },
+      slots: slotData
+    },
+    authorDetails: {
+      template: optionalSelect("Author Template Options", authorTemplate, "default"),
+      opts: {
+        showBio: false,
+        showImage: true,
+        showName: true
+      }
+    }
+  };
+  return /*#__PURE__*/React.createElement(TextStoryTemplateBase, {
+    story: story,
+    config: templateConfig,
+    storyElementsConfig: storyElementsConfig,
+    adComponent: configurableSlot,
+    widgetComp: configurableSlot,
+    firstChild: /*#__PURE__*/React.createElement(AdPlaceholder, {
+      height: "250px",
+      width: "300px"
+    }),
+    secondChild: /*#__PURE__*/React.createElement(AdPlaceholder, {
+      height: "250px",
+      width: "300px"
+    })
+  });
+});

package/esm/components/Rows/StoryTemplates/TextStoryTemplates/templates.js

@@ -0,0 +1,285 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from "react";
+import { get } from "lodash";
+import PropTypes from "prop-types";
+import { SocialShareTemplate } from "../../../Molecules/SocialShareTemplate";
+import { SocialShare } from "@quintype/components";
+import { SectionTag } from "../../../Atoms/SectionTag";
+import { StoryHeadline } from "../../../Atoms/StoryHeadline";
+import { Subheadline } from "../../../Atoms/Subheadline";
+import { AsideCollection } from "../../AsideCollection";
+import { AuthorCard } from "../../../Atoms/AuthorCard";
+import { CaptionAttribution } from "../../../Atoms/CaptionAttribution";
+import { HeroImage } from "../../../Atoms/HeroImage";
+import { PublishDetails } from "../../../Atoms/PublishDetail";
+import { StoryTags } from "../../../Atoms/StoryTags";
+import { StoryElementCard, SlotAfterStory } from "../../../Molecules/StoryElementCard";
+import "./text-story.m.css";
+export var StoryTemplate = function StoryTemplate(_ref) {
+  var _ref$story = _ref.story,
+      story = _ref$story === void 0 ? {} : _ref$story,
+      _ref$config = _ref.config,
+      config = _ref$config === void 0 ? {} : _ref$config,
+      storyElementsConfig = _ref.storyElementsConfig,
+      widgetComp = _ref.widgetComp,
+      adComponent = _ref.adComponent,
+      firstChild = _ref.firstChild,
+      secondChild = _ref.secondChild,
+      timezone = _ref.timezone;
+  var _config$theme = config.theme,
+      theme = _config$theme === void 0 ? "" : _config$theme,
+      _config$asideCollecti = config.asideCollection,
+      asideCollection = _config$asideCollecti === void 0 ? {} : _config$asideCollecti,
+      _config$templateType = config.templateType,
+      templateType = _config$templateType === void 0 ? "default" : _config$templateType,
+      _config$noOfVisibleCa = config.noOfVisibleCards,
+      noOfVisibleCards = _config$noOfVisibleCa === void 0 ? 0 : _config$noOfVisibleCa,
+      _config$publishedDeta = config.publishedDetails,
+      publishedDetails = _config$publishedDeta === void 0 ? {} : _config$publishedDeta,
+      _config$authorDetails = config.authorDetails,
+      authorDetails = _config$authorDetails === void 0 ? {} : _config$authorDetails,
+      _config$verticalShare = config.verticalShare,
+      verticalShare = _config$verticalShare === void 0 ? "" : _config$verticalShare,
+      _config$shareIconType = config.shareIconType,
+      shareIconType = _config$shareIconType === void 0 ? "plain-color-svg" : _config$shareIconType,
+      _config$premiumStoryI = config.premiumStoryIconConfig,
+      premiumStoryIconConfig = _config$premiumStoryI === void 0 ? {} : _config$premiumStoryI;
+  var visibledCards = noOfVisibleCards < 0 ? story.cards : story.cards.slice(0, noOfVisibleCards);
+  var storyId = get(story, ["id"], "");
+
+  var HeaderCard = function HeaderCard() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "text-story-m_header-details__3D-Xf"
+    }, /*#__PURE__*/React.createElement(SectionTag, {
+      story: story
+    }), /*#__PURE__*/React.createElement(StoryHeadline, {
+      story: story,
+      premiumStoryIconConfig: premiumStoryIconConfig
+    }), /*#__PURE__*/React.createElement(Subheadline, {
+      story: story,
+      showFullContent: true
+    }));
+  };
+
+  var AsideCollectionCard = function AsideCollectionCard() {
+    return asideCollection && /*#__PURE__*/React.createElement("div", {
+      className: "text-story-m_aside-collection__1hg7d text-story-m_tablet-index-2__1FdCR"
+    }, /*#__PURE__*/React.createElement(AsideCollection, _extends({
+      horizontal: true
+    }, asideCollection, {
+      widgetComp: widgetComp,
+      adComponent: adComponent,
+      storyId: storyId,
+      opts: publishedDetails
+    })));
+  };
+
+  var SocialShareComponent = function SocialShareComponent() {
+    return /*#__PURE__*/React.createElement("div", {
+      id: "story-share-".concat(storyId),
+      className: "content-style"
+    }, /*#__PURE__*/React.createElement(SocialShare, {
+      template: SocialShareTemplate,
+      fullUrl: encodeURI(story.url),
+      title: story.headline,
+      theme: theme,
+      vertical: !!verticalShare,
+      iconType: shareIconType,
+      shareIconId: "share-icon-story-share-".concat(storyId)
+    }));
+  };
+
+  var StoryData = function StoryData() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "text-story-m_gap-16__5BPKQ"
+    }, authorDetails && /*#__PURE__*/React.createElement(AuthorCard, {
+      story: story,
+      template: authorDetails.template,
+      opts: authorDetails.opts
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "text-story-m_timestamp-social-share__1tSR7"
+    }, /*#__PURE__*/React.createElement(PublishDetails, {
+      story: story,
+      opts: publishedDetails,
+      template: "story",
+      timezone: timezone
+    }), !verticalShare && /*#__PURE__*/React.createElement(SocialShareComponent, null)), visibledCards.map(function (card) {
+      return /*#__PURE__*/React.createElement(StoryElementCard, {
+        story: story,
+        card: card,
+        key: get(card, ["id"], ""),
+        config: storyElementsConfig,
+        adComponent: adComponent,
+        widgetComp: widgetComp
+      });
+    }), firstChild, /*#__PURE__*/React.createElement("div", {
+      className: "text-story-m_story-tags__Roh7y"
+    }, /*#__PURE__*/React.createElement(StoryTags, {
+      tags: story.tags
+    }), /*#__PURE__*/React.createElement(SlotAfterStory, {
+      id: story.id,
+      element: story.customSlotAfterStory,
+      AdComponent: adComponent,
+      WidgetComp: widgetComp
+    })), secondChild);
+  };
+
+  var SideColumn = function SideColumn() {
+    return asideCollection && /*#__PURE__*/React.createElement("div", {
+      className: "text-story-m_text-story-side-column__ChMaj"
+    }, /*#__PURE__*/React.createElement(AsideCollection, _extends({}, asideCollection, {
+      widgetComp: widgetComp,
+      adComponent: adComponent,
+      sticky: true,
+      storyId: storyId,
+      opts: publishedDetails
+    })));
+  };
+
+  var heroPriorityCenterTemplate = function heroPriorityCenterTemplate() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: "text-story-m_hero-image__288rD text-story-m_index-2__36i8Z",
+      "data-test-id": "hero-priority-center-image"
+    }, /*#__PURE__*/React.createElement(HeroImage, {
+      story: story,
+      FullBleed: false,
+      aspectRatio: [[16, 9]],
+      defaultFallback: false,
+      isStoryPageImage: true
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "text-story-m_story-content-inner-wrapper__s3KPp"
+    }, /*#__PURE__*/React.createElement(CaptionAttribution, {
+      story: story,
+      config: config
+    }), /*#__PURE__*/React.createElement(HeaderCard, null), /*#__PURE__*/React.createElement(StoryData, null)), verticalShare && /*#__PURE__*/React.createElement(SocialShareComponent, null), /*#__PURE__*/React.createElement(AsideCollectionCard, null));
+  };
+
+  var headlineHeroPriorityTemplate = function headlineHeroPriorityTemplate() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: "text-story-m_story-content-inner-wrapper__s3KPp"
+    }, /*#__PURE__*/React.createElement(HeaderCard, null)), /*#__PURE__*/React.createElement("div", {
+      className: "text-story-m_hero-image__288rD text-story-m_index-2__36i8Z",
+      "data-test-id": "headline-hero-priority-image"
+    }, /*#__PURE__*/React.createElement(HeroImage, {
+      story: story,
+      FullBleed: false,
+      aspectRatio: [[16, 9]],
+      defaultFallback: false,
+      isStoryPageImage: true
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "text-story-m_story-content-inner-wrapper__s3KPp"
+    }, /*#__PURE__*/React.createElement(CaptionAttribution, {
+      story: story,
+      config: config
+    }), /*#__PURE__*/React.createElement(StoryData, null)), verticalShare && /*#__PURE__*/React.createElement(SocialShareComponent, null), /*#__PURE__*/React.createElement(AsideCollectionCard, null));
+  };
+
+  var heroVerticalTemplate = function heroVerticalTemplate() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HeaderCard, null), /*#__PURE__*/React.createElement("div", {
+      className: "text-story-m_hero-image__288rD text-story-m_index-2__36i8Z",
+      "data-test-id": "hero-vertical-image"
+    }, /*#__PURE__*/React.createElement(HeroImage, {
+      story: story,
+      FullBleed: false,
+      aspectRatio: [[3, 4]],
+      defaultFallback: false,
+      isStoryPageImage: true
+    })), /*#__PURE__*/React.createElement(CaptionAttribution, {
+      story: story,
+      config: config
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "text-story-m_story-content-inner-wrapper__s3KPp"
+    }, /*#__PURE__*/React.createElement(StoryData, null)), verticalShare && /*#__PURE__*/React.createElement(SocialShareComponent, null), /*#__PURE__*/React.createElement(AsideCollectionCard, null));
+  };
+
+  var heroPriorityLeftTemplate = function heroPriorityLeftTemplate() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: "text-story-m_hero-image__288rD text-story-m_index-2__36i8Z",
+      "data-test-id": "hero-priority-left-image"
+    }, /*#__PURE__*/React.createElement(HeroImage, {
+      story: story,
+      FullBleed: false,
+      aspectRatio: [[16, 9]],
+      defaultFallback: false,
+      isStoryPageImage: true
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "text-story-m_story-content-inner-wrapper__s3KPp"
+    }, /*#__PURE__*/React.createElement(CaptionAttribution, {
+      story: story,
+      config: config
+    }), /*#__PURE__*/React.createElement(HeaderCard, null), /*#__PURE__*/React.createElement(StoryData, null)), verticalShare && /*#__PURE__*/React.createElement(SocialShareComponent, null), /*#__PURE__*/React.createElement(SideColumn, null));
+  };
+
+  var headlinePriorityTemplate = function headlinePriorityTemplate() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HeaderCard, null), /*#__PURE__*/React.createElement("div", {
+      className: "text-story-m_story-content-inner-wrapper__s3KPp text-story-m_hero-image__288rD text-story-m_index-2__36i8Z",
+      "data-test-id": "headline-priority-hero-image"
+    }, /*#__PURE__*/React.createElement(HeroImage, {
+      story: story,
+      FullBleed: false,
+      aspectRatio: [[16, 9]],
+      defaultFallback: false,
+      isStoryPageImage: true
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "text-story-m_story-content-inner-wrapper__s3KPp"
+    }, /*#__PURE__*/React.createElement(CaptionAttribution, {
+      story: story,
+      config: config
+    }), /*#__PURE__*/React.createElement(StoryData, null)), verticalShare && /*#__PURE__*/React.createElement(SocialShareComponent, null), /*#__PURE__*/React.createElement(SideColumn, null));
+  };
+
+  var headlineOverlayTemplate = function headlineOverlayTemplate() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: "text-story-m_hero-image__288rD text-story-m_index-2__36i8Z",
+      "data-test-id": "headline-overlay-hero-image"
+    }, /*#__PURE__*/React.createElement(HeroImage, {
+      story: story,
+      FullBleed: false,
+      aspectRatio: [[3, 4], [16, 9]],
+      isStoryPageImage: true
+    })), /*#__PURE__*/React.createElement(HeaderCard, null), /*#__PURE__*/React.createElement("div", {
+      className: "text-story-m_story-content-inner-wrapper__s3KPp"
+    }, /*#__PURE__*/React.createElement(CaptionAttribution, {
+      story: story,
+      config: config
+    }), /*#__PURE__*/React.createElement(StoryData, null)), verticalShare && /*#__PURE__*/React.createElement(SocialShareComponent, null), /*#__PURE__*/React.createElement(AsideCollectionCard, null));
+  };
+
+  var getStoryTemplate = function getStoryTemplate(templateType) {
+    switch (templateType) {
+      case "hero-priority-center":
+        return heroPriorityCenterTemplate();
+
+      case "default":
+        return heroPriorityLeftTemplate();
+
+      case "headline-hero-priority":
+        return headlineHeroPriorityTemplate();
+
+      case "hero-vertical-priority":
+        return heroVerticalTemplate();
+
+      case "headline-priority":
+        return headlinePriorityTemplate();
+
+      case "headline-overlay-priority":
+        return headlineOverlayTemplate();
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, getStoryTemplate(templateType));
+};
+StoryTemplate.propTypes = {
+  story: PropTypes.object,
+  config: PropTypes.shape({
+    templateType: PropTypes.string,
+    authorDetails: PropTypes.object,
+    asideCollection: PropTypes.object
+  }),
+  firstChild: PropTypes.node,
+  secondChild: PropTypes.node,
+  timezone: PropTypes.string,
+  storyElementsConfig: PropTypes.object,
+  widgetComp: PropTypes.func,
+  adComponent: PropTypes.func
+};