@quintype/arrow 3.15.1-perf.4 → 3.15.1-perf.8

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

@@ -0,0 +1,418 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+import React from "react";
+import { get } from "lodash";
+import PropTypes from "prop-types";
+import { SocialShare } from "@quintype/components";
+import { SocialShareTemplate } from "../../../Molecules/SocialShareTemplate";
+import { SectionTag } from "../../../Atoms/SectionTag";
+import { Subheadline } from "../../../Atoms/Subheadline";
+import { AsideCollection } from "../../AsideCollection";
+import { AuthorCard } from "../../../Atoms/AuthorCard";
+import { StoryElementCard, SlotAfterStory } from "../../../Molecules/StoryElementCard";
+import { PublishDetails } from "../../../Atoms/PublishDetail";
+import { StoryTags } from "../../../Atoms/StoryTags";
+import { HeroImage } from "../../../Atoms/HeroImage";
+import "./live-blog.m.css";
+import { CaptionAttribution } from "../../../Atoms/CaptionAttribution";
+import { clientWidth, getTextColor, getTimeStamp, timestampToFormat } from "../../../../utils/utils";
+import LiveIcon from "../../../Svgs/liveicon";
+import { KeyEvents } from "../../../Molecules/KeyEvents";
+import { ClockIcon } from "../../../Svgs/clock-icon";
+import { StoryHeadline } from "../../../Atoms/StoryHeadline";
+var _styleModuleImportMap = {
+  "./live-blog.m.css": {
+    "header-details": "live-blog-m_header-details__1VbwD",
+    "wrapper": "live-blog-m_wrapper__3kmc6",
+    "container": "live-blog-m_container__2Eru6",
+    "live-headline": "live-blog-m_live-headline__1Y1iT",
+    "time-wrapper": "live-blog-m_time-wrapper__Pv8u4",
+    "card-share": "live-blog-m_card-share__nvSEx",
+    "live-icon": "live-blog-m_live-icon__zzBV_",
+    "blink": "live-blog-m_blink__1USEE",
+    "timestamp-social-share": "live-blog-m_timestamp-social-share__2siNN",
+    "header-wrapper": "live-blog-m_header-wrapper__3rFRU",
+    "grid-col-full": "live-blog-m_grid-col-full__3iWHn",
+    "grid-container": "live-blog-m_grid-container__1b98H",
+    "top-space": "live-blog-m_top-space__2NpBq",
+    "grid-col-9-15": "live-blog-m_grid-col-9-15__MwtUq",
+    "grid-col-2-9": "live-blog-m_grid-col-2-9__IJ4Ok",
+    "sideway": "live-blog-m_sideway__1j2fD",
+    "grid-col-9-14": "live-blog-m_grid-col-9-14__2oCwT",
+    "grid-col-4-12": "live-blog-m_grid-col-4-12__XeqdX",
+    "side-column": "live-blog-m_side-column__Ss2sl",
+    "story-details": "live-blog-m_story-details__2uwo9",
+    "headline-space": "live-blog-m_headline-space__2Dhkq",
+    "overlay-hero": "live-blog-m_overlay-hero__30Yoo",
+    "overlay-grid": "live-blog-m_overlay-grid__1-XBm",
+    "key-events": "live-blog-m_key-events__2YDJ3",
+    "share-cards": "live-blog-m_share-cards__96lnW",
+    "dark": "live-blog-m_dark__1dgpM",
+    "light": "live-blog-m_light__3GyWj",
+    "space-32": "live-blog-m_space-32__3J4JJ",
+    "sticky": "live-blog-m_sticky__2c9ke",
+    "index-2": "live-blog-m_index-2__2f0tW",
+    "grid-row-1-2": "live-blog-m_grid-row-1-2__2t7wA",
+    "grid-row-2-3": "live-blog-m_grid-row-2-3__32fm_",
+    "grid-row-3-4": "live-blog-m_grid-row-3-4__2LIEm",
+    "grid-row-1-6": "live-blog-m_grid-row-1-6__3CH8o",
+    "tablet-index-2": "live-blog-m_tablet-index-2__2WqZJ"
+  }
+};
+export var LiveBlogStoryTemplates = function LiveBlogStoryTemplates(_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,
+      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,
+      templateType = 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$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$authorDetails = config.authorDetails,
+      authorDetails = _config$authorDetails === void 0 ? {
+    template: "default"
+  } : _config$authorDetails,
+      _config$premiumStoryI = config.premiumStoryIconConfig,
+      premiumStoryIconConfig = _config$premiumStoryI === void 0 ? {} : _config$premiumStoryI;
+  var visibleCards = noOfVisibleCards < 0 ? story.cards : story.cards.slice(0, noOfVisibleCards);
+  var textColor = getTextColor(theme);
+  var dark = "#333";
+  var light = "#fff";
+  var updateColor = textColor === "dark" ? dark : light;
+  var isMobile = clientWidth("mobile");
+  var storyId = get(story, ["id"], "");
+
+  var HeaderCard = function HeaderCard() {
+    var isBlogClosed = get(story, ["metadata", "is-closed"]);
+    return /*#__PURE__*/React.createElement("div", {
+      className: "live-blog-m_header-wrapper__3rFRU live-blog-m_header-details__1VbwD"
+    }, /*#__PURE__*/React.createElement(SectionTag, {
+      story: story
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "live-blog-m_live-headline__1Y1iT"
+    }, !isBlogClosed && /*#__PURE__*/React.createElement("div", {
+      className: "live-blog-m_live-icon__zzBV_"
+    }, /*#__PURE__*/React.createElement(LiveIcon, null)), /*#__PURE__*/React.createElement(StoryHeadline, {
+      story: story,
+      premiumStoryIconConfig: premiumStoryIconConfig
+    })), /*#__PURE__*/React.createElement(Subheadline, {
+      story: story,
+      showFullContent: true
+    }));
+  };
+
+  var StoryCards = function StoryCards() {
+    return visibleCards.map(function () {
+      var card = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      var index = arguments.length > 1 ? arguments[1] : undefined;
+      var borderBottom = index === visibleCards.length - 1 ? "" : "share-cards ".concat(textColor);
+      var cardId = get(card, ["id"], "");
+      var cardAddedAt = card["card-added-at"];
+      return /*#__PURE__*/React.createElement("div", {
+        key: index,
+        className: _getClassName(borderBottom, _styleModuleImportMap)
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "live-blog-m_card-share__nvSEx"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: _getClassName("time-wrapper ".concat(textColor), _styleModuleImportMap)
+      }, /*#__PURE__*/React.createElement(ClockIcon, {
+        color: updateColor
+      }), getTimeStamp(cardAddedAt, timestampToFormat, {
+        isTimeFirst: true
+      })), /*#__PURE__*/React.createElement("div", {
+        id: "card-share-".concat(cardId, "_").concat(storyId),
+        className: "content-style"
+      }, /*#__PURE__*/React.createElement(SocialShare, {
+        template: SocialShareTemplate,
+        fullUrl: encodeURI(story.url),
+        title: story.headline,
+        theme: theme,
+        iconType: shareIconType
+      }))), /*#__PURE__*/React.createElement(StoryElementCard, {
+        story: story,
+        card: card,
+        key: cardId,
+        config: storyElementsConfig,
+        isLive: true,
+        theme: theme,
+        adComponent: adComponent,
+        widgetComp: widgetComp
+      }));
+    });
+  };
+
+  var keyEvents = function keyEvents() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "live-blog-m_key-events__2YDJ3",
+      id: "key-events-".concat(storyId)
+    }, /*#__PURE__*/React.createElement(KeyEvents, {
+      story: story,
+      showLoadMore: true,
+      config: config
+    }));
+  };
+
+  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 showKeyEvents = function showKeyEvents() {
+    if ((templateType === "default" || templateType === "headline-priority") && !isMobile) {
+      return null;
+    }
+
+    return keyEvents();
+  };
+
+  var StoryData = function StoryData() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AuthorCard, {
+      clazzName: "gap-32",
+      story: story,
+      template: authorDetails.template,
+      opts: authorDetails.opts
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "live-blog-m_timestamp-social-share__2siNN"
+    }, /*#__PURE__*/React.createElement(PublishDetails, {
+      story: story,
+      opts: publishedDetails,
+      template: "story",
+      timezone: timezone
+    }), !verticalShare && /*#__PURE__*/React.createElement(SocialShareComponent, null)), showKeyEvents(), /*#__PURE__*/React.createElement(StoryCards, null), /*#__PURE__*/React.createElement("div", {
+      className: "live-blog-m_space-32__3J4JJ"
+    }, firstChild, /*#__PURE__*/React.createElement(StoryTags, {
+      tags: story.tags
+    }), /*#__PURE__*/React.createElement(SlotAfterStory, {
+      id: story.id,
+      element: story.customSlotAfterStory,
+      AdComponent: adComponent,
+      WidgetComp: widgetComp
+    }), secondChild));
+  };
+
+  var DefaultTemplate = function DefaultTemplate(story) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      "data-test-id": "hero-image",
+      className: "live-blog-m_grid-col-full__3iWHn live-blog-m_index-2__2f0tW"
+    }, /*#__PURE__*/React.createElement(HeroImage, {
+      story: story,
+      aspectRatio: [[16, 9], [8, 3]],
+      isStoryPageImage: true
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "live-blog-m_header-wrapper__3rFRU"
+    }, /*#__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("div", {
+      className: "live-blog-m_side-column__Ss2sl"
+    }, asideCollection && /*#__PURE__*/React.createElement(AsideCollection, _extends({}, asideCollection, {
+      adComponent: adComponent,
+      widgetComp: widgetComp,
+      sticky: true,
+      enableKeyEvents: !isMobile,
+      keyEventsData: {
+        story: story,
+        config: config,
+        showLoadMore: false
+      },
+      storyId: storyId,
+      opts: publishedDetails
+    }))));
+  };
+
+  var HeroOverlay = function HeroOverlay(story) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: "live-blog-m_overlay-hero__30Yoo live-blog-m_index-2__2f0tW"
+    }, /*#__PURE__*/React.createElement(HeroImage, {
+      story: story,
+      aspectRatio: [[1, 2], [16, 9]],
+      isStoryPageImage: true
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "live-blog-m_overlay-grid__1-XBm"
+    }, /*#__PURE__*/React.createElement(HeaderCard, null)), /*#__PURE__*/React.createElement("div", {
+      className: "live-blog-m_grid-col-4-12__XeqdX"
+    }, /*#__PURE__*/React.createElement(CaptionAttribution, {
+      story: story,
+      config: config
+    }), /*#__PURE__*/React.createElement(StoryData, null)), verticalShare && /*#__PURE__*/React.createElement(SocialShareComponent, null), asideCollection && /*#__PURE__*/React.createElement("div", {
+      className: "live-blog-m_grid-container__1b98H live-blog-m_tablet-index-2__2WqZJ"
+    }, /*#__PURE__*/React.createElement(AsideCollection, _extends({
+      horizontal: true
+    }, asideCollection, {
+      adComponent: adComponent,
+      widgetComp: widgetComp,
+      storyId: storyId,
+      opts: publishedDetails
+    }))));
+  };
+
+  var HeadlineSideway = function HeadlineSideway(story) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: "live-blog-m_grid-col-2-9__IJ4Ok live-blog-m_sideway__1j2fD"
+    }, /*#__PURE__*/React.createElement(HeaderCard, null)), /*#__PURE__*/React.createElement("div", {
+      className: "live-blog-m_grid-col-9-15__MwtUq live-blog-m_index-2__2f0tW"
+    }, /*#__PURE__*/React.createElement(HeroImage, {
+      story: story,
+      aspectRatio: [[4, 3]],
+      isStoryPageImage: true
+    }), /*#__PURE__*/React.createElement(CaptionAttribution, {
+      story: story,
+      config: config
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "live-blog-m_grid-col-4-12__XeqdX"
+    }, /*#__PURE__*/React.createElement(StoryData, null)), verticalShare && /*#__PURE__*/React.createElement(SocialShareComponent, null), asideCollection && /*#__PURE__*/React.createElement("div", {
+      className: "live-blog-m_grid-container__1b98H live-blog-m_tablet-index-2__2WqZJ"
+    }, /*#__PURE__*/React.createElement(AsideCollection, _extends({
+      horizontal: true
+    }, asideCollection, {
+      adComponent: adComponent,
+      widgetComp: widgetComp,
+      storyId: storyId,
+      opts: publishedDetails
+    }))));
+  };
+
+  var HeadlinePriority = function HeadlinePriority(story) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: "live-blog-m_grid-col-2-9__IJ4Ok live-blog-m_grid-row-1-2__2t7wA live-blog-m_headline-space__2Dhkq"
+    }, /*#__PURE__*/React.createElement(HeaderCard, null)), /*#__PURE__*/React.createElement("div", {
+      className: "live-blog-m_grid-col-2-9__IJ4Ok live-blog-m_grid-row-2-3__32fm_ live-blog-m_index-2__2f0tW"
+    }, /*#__PURE__*/React.createElement(HeroImage, {
+      story: story,
+      aspectRatio: [[16, 9]],
+      isStoryPageImage: true
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "live-blog-m_grid-col-2-9__IJ4Ok live-blog-m_grid-row-3-4__2LIEm"
+    }, /*#__PURE__*/React.createElement(CaptionAttribution, {
+      story: story,
+      config: config
+    }), /*#__PURE__*/React.createElement(StoryData, null)), verticalShare && /*#__PURE__*/React.createElement(SocialShareComponent, null), /*#__PURE__*/React.createElement("div", {
+      className: "live-blog-m_grid-col-9-14__2oCwT live-blog-m_grid-row-1-6__3CH8o"
+    }, asideCollection && /*#__PURE__*/React.createElement(AsideCollection, _extends({}, asideCollection, {
+      adComponent: adComponent,
+      widgetComp: widgetComp,
+      sticky: true,
+      enableKeyEvents: !isMobile,
+      keyEventsData: {
+        story: story,
+        config: config,
+        showLoadMore: false
+      },
+      storyId: storyId,
+      opts: publishedDetails
+    }))));
+  };
+
+  var HeroPriority = function HeroPriority(story) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: "live-blog-m_grid-container__1b98H live-blog-m_index-2__2f0tW"
+    }, /*#__PURE__*/React.createElement(HeroImage, {
+      story: story,
+      aspectRatio: [[16, 9]],
+      isStoryPageImage: true
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "live-blog-m_grid-col-4-12__XeqdX"
+    }, /*#__PURE__*/React.createElement(CaptionAttribution, {
+      story: story,
+      config: config
+    }), /*#__PURE__*/React.createElement(HeaderCard, null), /*#__PURE__*/React.createElement(StoryData, null)), verticalShare && /*#__PURE__*/React.createElement(SocialShareComponent, null), asideCollection && /*#__PURE__*/React.createElement("div", {
+      className: "live-blog-m_grid-container__1b98H live-blog-m_tablet-index-2__2WqZJ"
+    }, /*#__PURE__*/React.createElement(AsideCollection, _extends({
+      horizontal: true
+    }, asideCollection, {
+      adComponent: adComponent,
+      widgetComp: widgetComp,
+      storyId: storyId,
+      opts: publishedDetails
+    }))));
+  };
+
+  var HeadlineHeroPriority = function HeadlineHeroPriority(story) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: "live-blog-m_grid-col-4-12__XeqdX live-blog-m_headline-space__2Dhkq"
+    }, /*#__PURE__*/React.createElement(HeaderCard, null)), /*#__PURE__*/React.createElement("div", {
+      className: "live-blog-m_grid-container__1b98H live-blog-m_index-2__2f0tW"
+    }, /*#__PURE__*/React.createElement(HeroImage, {
+      story: story,
+      aspectRatio: [[16, 9]],
+      isStoryPageImage: true
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "live-blog-m_grid-col-4-12__XeqdX"
+    }, /*#__PURE__*/React.createElement(CaptionAttribution, {
+      story: story,
+      config: config
+    }), /*#__PURE__*/React.createElement(StoryData, null)), verticalShare && /*#__PURE__*/React.createElement(SocialShareComponent, null), asideCollection && /*#__PURE__*/React.createElement("div", {
+      className: "live-blog-m_grid-container__1b98H live-blog-m_tablet-index-2__2WqZJ"
+    }, /*#__PURE__*/React.createElement(AsideCollection, _extends({
+      horizontal: true
+    }, asideCollection, {
+      adComponent: adComponent,
+      widgetComp: widgetComp,
+      storyId: storyId,
+      opts: publishedDetails
+    }))));
+  };
+
+  var getLiveBlogStoryTemplates = function getLiveBlogStoryTemplates(templateType) {
+    switch (templateType) {
+      case "hero-priority":
+        return HeroPriority(story);
+
+      case "hero-overlay":
+        return HeroOverlay(story);
+
+      case "headline-sideway":
+        return HeadlineSideway(story);
+
+      case "headline-priority":
+        return HeadlinePriority(story);
+
+      case "headline-hero-priority":
+        return HeadlineHeroPriority(story);
+
+      default:
+        return DefaultTemplate(story);
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, getLiveBlogStoryTemplates(templateType));
+};
+LiveBlogStoryTemplates.propTypes = {
+  story: PropTypes.object,
+  config: PropTypes.shape({
+    templateType: PropTypes.string,
+    authorCard: PropTypes.object,
+    asideCollection: PropTypes.object
+  }),
+  timezone: PropTypes.string,
+  firstChild: PropTypes.node,
+  secondChild: PropTypes.node,
+  storyElementsConfig: PropTypes.object,
+  adComponent: PropTypes.func,
+  widgetComp: PropTypes.func
+};