@quintype/arrow 3.20.0-perf-v2.0 → 3.20.0

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

@@ -1,378 +0,0 @@
-import React from "react";
-import get from "lodash.get";
-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";
-
-export const LiveBlogStoryTemplates = ({
-  story = {},
-  config = {},
-  storyElementsConfig,
-  adComponent,
-  widgetComp,
-  firstChild,
-  secondChild,
-  timezone
-}) => {
-  const {
-    theme = "",
-    asideCollection = {},
-    templateType,
-    noOfVisibleCards = 0,
-    publishedDetails = {},
-    verticalShare = "",
-    shareIconType = "plain-color-svg",
-    authorDetails = {
-      template: "default"
-    },
-    premiumStoryIconConfig = {}
-  } = config;
-
-  const visibleCards = noOfVisibleCards < 0 ? story.cards : story.cards.slice(0, noOfVisibleCards);
-  const textColor = getTextColor(theme);
-  const dark = "#333";
-  const light = "#fff";
-  const updateColor = textColor === "dark" ? dark : light;
-
-  const isMobile = clientWidth("mobile");
-  const storyId = get(story, ["id"], "");
-
-  const HeaderCard = () => {
-    const isBlogClosed = get(story, ["metadata", "is-closed"]);
-    return (
-      <div styleName="header-wrapper header-details">
-        <SectionTag story={story} />
-        <div styleName="live-headline">
-          {!isBlogClosed && (
-            <div styleName="live-icon">
-              <LiveIcon />
-            </div>
-          )}
-          <StoryHeadline story={story} premiumStoryIconConfig={premiumStoryIconConfig} />
-        </div>
-        <Subheadline story={story} showFullContent />
-      </div>
-    );
-  };
-  const StoryCards = () => {
-    return visibleCards.map((card = {}, index) => {
-      const borderBottom = index === visibleCards.length - 1 ? "" : `share-cards ${textColor}`;
-      const cardId = get(card, ["id"], "");
-      const { "card-added-at": cardAddedAt } = card;
-      return (
-        <div key={index} styleName={borderBottom}>
-          <div styleName="card-share">
-            <div styleName={`time-wrapper ${textColor}`}>
-              <ClockIcon color={updateColor} />
-              {getTimeStamp(cardAddedAt, timestampToFormat, { isTimeFirst: true })}
-            </div>
-            <div id={`card-share-${cardId}_${storyId}`} className="content-style">
-              <SocialShare
-                template={SocialShareTemplate}
-                fullUrl={encodeURI(story.url)}
-                title={story.headline}
-                theme={theme}
-                iconType={shareIconType}
-              />
-            </div>
-          </div>
-          <StoryElementCard
-            story={story}
-            card={card}
-            key={cardId}
-            config={storyElementsConfig}
-            isLive
-            theme={theme}
-            adComponent={adComponent}
-            widgetComp={widgetComp}
-          />
-        </div>
-      );
-    });
-  };
-
-  const keyEvents = () => {
-    return (
-      <div styleName="key-events" id={`key-events-${storyId}`}>
-        <KeyEvents story={story} showLoadMore={true} config={config} />
-      </div>
-    );
-  };
-
-  const SocialShareComponent = () => {
-    return (
-      <div id={`story-share-${storyId}`} className="content-style">
-        <SocialShare
-          template={SocialShareTemplate}
-          fullUrl={encodeURI(story.url)}
-          title={story.headline}
-          theme={theme}
-          vertical={!!verticalShare}
-          iconType={shareIconType}
-          shareIconId={`share-icon-story-share-${storyId}`}
-        />
-      </div>
-    );
-  };
-
-  const showKeyEvents = () => {
-    if ((templateType === "default" || templateType === "headline-priority") && !isMobile) {
-      return null;
-    }
-    return keyEvents();
-  };
-
-  const StoryData = () => {
-    return (
-      <>
-        <AuthorCard clazzName="gap-32" story={story} template={authorDetails.template} opts={authorDetails.opts} />
-        <div styleName="timestamp-social-share">
-          <PublishDetails story={story} opts={publishedDetails} template="story" timezone={timezone} />
-          {!verticalShare && <SocialShareComponent />}
-        </div>
-        {showKeyEvents()}
-        <StoryCards />
-        <div styleName="space-32">
-          {firstChild}
-          <StoryTags tags={story.tags} />
-          <SlotAfterStory
-            id={story.id}
-            element={story.customSlotAfterStory}
-            AdComponent={adComponent}
-            WidgetComp={widgetComp}
-          />
-          {secondChild}
-        </div>
-      </>
-    );
-  };
-
-  const DefaultTemplate = (story) => {
-    return (
-      <>
-        <div data-test-id="hero-image" styleName="grid-col-full index-2">
-          <HeroImage story={story} aspectRatio={[[16, 9], [8, 3]]} isStoryPageImage />
-        </div>
-        <div styleName="header-wrapper">
-          <CaptionAttribution story={story} config={config} />
-          <HeaderCard />
-          <StoryData />
-        </div>
-        {verticalShare && <SocialShareComponent />}
-        <div styleName="side-column">
-          {asideCollection && (
-            <AsideCollection
-              {...asideCollection}
-              adComponent={adComponent}
-              widgetComp={widgetComp}
-              sticky={true}
-              enableKeyEvents={!isMobile}
-              keyEventsData={{ story, config, showLoadMore: false }}
-              storyId={storyId}
-              opts={publishedDetails}
-            />
-          )}
-        </div>
-      </>
-    );
-  };
-
-  const HeroOverlay = (story) => {
-    return (
-      <>
-        <div styleName="overlay-hero  index-2">
-          <HeroImage story={story} aspectRatio={[[1, 2], [16, 9]]} isStoryPageImage />
-        </div>
-        <div styleName="overlay-grid">
-          <HeaderCard />
-        </div>
-        <div styleName="grid-col-4-12 ">
-          <CaptionAttribution story={story} config={config} />
-          <StoryData />
-        </div>
-        {verticalShare && <SocialShareComponent />}
-        {asideCollection && (
-          <div styleName="grid-container tablet-index-2">
-            <AsideCollection
-              horizontal={true}
-              {...asideCollection}
-              adComponent={adComponent}
-              widgetComp={widgetComp}
-              storyId={storyId}
-              opts={publishedDetails}
-            />
-          </div>
-        )}
-      </>
-    );
-  };
-
-  const HeadlineSideway = (story) => {
-    return (
-      <>
-        <div styleName="grid-col-2-9 sideway ">
-          <HeaderCard />
-        </div>
-        <div styleName="grid-col-9-15 index-2">
-          <HeroImage story={story} aspectRatio={[[4, 3]]} isStoryPageImage />
-          <CaptionAttribution story={story} config={config} />
-        </div>
-        <div styleName="grid-col-4-12 ">
-          <StoryData />
-        </div>
-        {verticalShare && <SocialShareComponent />}
-        {asideCollection && (
-          <div styleName="grid-container tablet-index-2">
-            <AsideCollection
-              horizontal={true}
-              {...asideCollection}
-              adComponent={adComponent}
-              widgetComp={widgetComp}
-              storyId={storyId}
-              opts={publishedDetails}
-            />
-          </div>
-        )}
-      </>
-    );
-  };
-
-  const HeadlinePriority = (story) => {
-    return (
-      <>
-        <div styleName="grid-col-2-9  grid-row-1-2 headline-space">
-          <HeaderCard />
-        </div>
-        <div styleName="grid-col-2-9  grid-row-2-3 index-2">
-          <HeroImage story={story} aspectRatio={[[16, 9]]} isStoryPageImage />
-        </div>
-        <div styleName="grid-col-2-9  grid-row-3-4">
-          <CaptionAttribution story={story} config={config} />
-          <StoryData />
-        </div>
-        {verticalShare && <SocialShareComponent />}
-        <div styleName="grid-col-9-14 grid-row-1-6">
-          {asideCollection && (
-            <AsideCollection
-              {...asideCollection}
-              adComponent={adComponent}
-              widgetComp={widgetComp}
-              sticky={true}
-              enableKeyEvents={!isMobile}
-              keyEventsData={{ story, config, showLoadMore: false }}
-              storyId={storyId}
-              opts={publishedDetails}
-            />
-          )}
-        </div>
-      </>
-    );
-  };
-
-  const HeroPriority = (story) => {
-    return (
-      <>
-        <div styleName="grid-container index-2">
-          <HeroImage story={story} aspectRatio={[[16, 9]]} isStoryPageImage />
-        </div>
-        <div styleName="grid-col-4-12 ">
-          <CaptionAttribution story={story} config={config} />
-          <HeaderCard />
-          <StoryData />
-        </div>
-        {verticalShare && <SocialShareComponent />}
-        {asideCollection && (
-          <div styleName="grid-container tablet-index-2">
-            <AsideCollection
-              horizontal={true}
-              {...asideCollection}
-              adComponent={adComponent}
-              widgetComp={widgetComp}
-              storyId={storyId}
-              opts={publishedDetails}
-            />
-          </div>
-        )}
-      </>
-    );
-  };
-
-  const HeadlineHeroPriority = (story) => {
-    return (
-      <>
-        <div styleName="grid-col-4-12 headline-space">
-          <HeaderCard />
-        </div>
-        <div styleName="grid-container  index-2">
-          <HeroImage story={story} aspectRatio={[[16, 9]]} isStoryPageImage />
-        </div>
-        <div styleName="grid-col-4-12 ">
-          <CaptionAttribution story={story} config={config} />
-          <StoryData />
-        </div>
-        {verticalShare && <SocialShareComponent />}
-        {asideCollection && (
-          <div styleName="grid-container tablet-index-2">
-            <AsideCollection
-              horizontal={true}
-              {...asideCollection}
-              adComponent={adComponent}
-              widgetComp={widgetComp}
-              storyId={storyId}
-              opts={publishedDetails}
-            />
-          </div>
-        )}
-      </>
-    );
-  };
-
-  const 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 <>{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
-};

package/src/components/Rows/StoryTemplates/PhotoStoryTemplates/index.js

@@ -1,249 +0,0 @@
-import { SocialShare } from "@quintype/components";
-import PropTypes from "prop-types";
-import React from "react";
-import get from "lodash.get";
-import { useSelector } from "react-redux";
-import kebabCase from "lodash.kebabcase";
-import { AuthorCard } from "../../../Atoms/AuthorCard";
-import { CaptionAttribution } from "../../../Atoms/CaptionAttribution";
-import { SocialShareTemplate } from "../../../Molecules/SocialShareTemplate";
-import { SectionTag } from "../../../Atoms/SectionTag";
-import { StoryHeadline } from "../../../Atoms/StoryHeadline";
-import { Subheadline } from "../../../Atoms/Subheadline";
-import { HeroImage } from "../../../Atoms/HeroImage";
-import { PublishDetails } from "../../../Atoms/PublishDetail";
-import { StoryTags } from "../../../Atoms/StoryTags";
-import { PhotoStoryElement, SlotAfterStory } from "../../../Molecules/StoryElementCard";
-import { StateProvider } from "../../../SharedContext";
-import AsideCollection from "../../AsideCollection";
-import "./photo.m.css";
-
-const PhotoStory = ({
-  story = {},
-  config = {},
-  storyElementsConfig,
-  widgetComp,
-  adComponent,
-  firstChild,
-  secondChild
-}) => {
-  const {
-    theme = "",
-    asideCollection = {},
-    templateType = "default",
-    noOfVisibleCards = -1,
-    publishedDetails = {},
-    verticalShare = "",
-    shareIconType = "plain-color-svg",
-    authorDetails = {
-      template: "default"
-    },
-    imageRender = "fullBleed",
-    premiumStoryIconConfig = {}
-  } = config;
-  const isFullBleed = imageRender === "fullBleed";
-  const visibledCards = noOfVisibleCards < 0 ? story.cards : story.cards.slice(0, noOfVisibleCards);
-  const storyId = get(story, ["id"], "");
-  const timezone = useSelector((state) => get(state, ["qt", "data", "timezone"], null));
-
-  const HeaderCard = () => {
-    return (
-      <div styleName="grid-col-2-10 header-details">
-        <SectionTag story={story} />
-        <StoryHeadline story={story} premiumStoryIconConfig={premiumStoryIconConfig} />
-        <Subheadline story={story} showFullContent />
-      </div>
-    );
-  };
-
-  const SocialShareComponent = () => {
-    return (
-      <div id={`story-share-${storyId}`} className="content-style">
-        <SocialShare
-          template={SocialShareTemplate}
-          fullUrl={encodeURI(story.url)}
-          title={story.headline}
-          theme={theme}
-          vertical={!!verticalShare}
-          iconType={shareIconType}
-          shareIconId={`share-icon-story-share-${storyId}`}
-        />
-      </div>
-    );
-  };
-
-  const StoryData = () => (
-    <>
-      {authorDetails && (
-        <AuthorCard clazzName="gap-32" story={story} template={authorDetails.template} opts={authorDetails.opts} />
-      )}
-      <div styleName="story-details">
-        <PublishDetails story={story} opts={publishedDetails} template="story" timezone={timezone} />
-        {!verticalShare && <SocialShareComponent />}
-      </div>
-      {visibledCards.map((card) => {
-        return (
-          <PhotoStoryElement
-            story={story}
-            card={card}
-            key={get(card, ["id"], "")}
-            config={{ ...storyElementsConfig, theme }}
-            adComponent={adComponent}
-            widgetComp={widgetComp}
-          />
-        );
-      })}
-      <div styleName="space-32">
-        {firstChild}
-        <StoryTags tags={story.tags} />
-        <SlotAfterStory
-          id={story.id}
-          element={story.customSlotAfterStory}
-          AdComponent={adComponent}
-          WidgetComp={widgetComp}
-        />
-        {secondChild}
-      </div>
-    </>
-  );
-
-  const renderImages = (imageRender) => {
-    switch (imageRender) {
-      case "fullBleed":
-        return "grid-col-full";
-      case "container":
-        return "grid-container";
-      default:
-        return "grid-col-full";
-    }
-  };
-
-  const DefaultTemplate = ({ story }) => {
-    return (
-      <>
-        <div data-test-id="hero-image" styleName={`${renderImages(imageRender)} index-2`}>
-          <HeroImage story={story} aspectRatio={[[16, 9], [8, 3]]} defaultFallback={false} isStoryPageImage />
-        </div>
-        <div styleName="grid-col-2-10 space-12">
-          <CaptionAttribution story={story} config={config} />
-          <HeaderCard />
-          <StoryData />
-        </div>
-        {verticalShare && <SocialShareComponent />}
-        {asideCollection && (
-          <div styleName="grid-col-10-14 space-12">
-            <AsideCollection
-              {...asideCollection}
-              widgetComp={widgetComp}
-              adComponent={adComponent}
-              sticky={true}
-              storyId={storyId}
-              opts={publishedDetails}
-            />
-          </div>
-        )}
-      </>
-    );
-  };
-
-  const HeroPriority = ({ story }) => {
-    return (
-      <>
-        <div data-test-id="hero-image" styleName={`${renderImages(imageRender)} index-2`}>
-          <HeroImage story={story} aspectRatio={[[16, 9]]} defaultFallback={false} isStoryPageImage />
-        </div>
-        <div styleName="grid-col-4-12 space-12">
-          <CaptionAttribution story={story} config={config} />
-          <HeaderCard />
-          <StoryData />
-        </div>
-        {verticalShare && <SocialShareComponent />}
-        {asideCollection && (
-          <div styleName="grid-container space-12 tablet-index-2">
-            <AsideCollection
-              horizontal={true}
-              {...asideCollection}
-              widgetComp={widgetComp}
-              adComponent={adComponent}
-              storyId={storyId}
-              opts={publishedDetails}
-            />
-          </div>
-        )}
-      </>
-    );
-  };
-
-  const HeadlinePriority = ({ story }) => {
-    return (
-      <>
-        <div styleName="grid-container side-space">
-          <HeaderCard />
-        </div>
-        <div styleName="grid-col-2-9 side-space index-2">
-          <HeroImage story={story} aspectRatio={[[16, 9]]} defaultFallback={false} isStoryPageImage />
-        </div>
-        <div styleName="grid-col-2-9 side-space">
-          <CaptionAttribution story={story} config={config} />
-          <StoryData />
-        </div>
-        {verticalShare && <SocialShareComponent />}
-        {asideCollection && (
-          <div styleName="grid-col-9-14">
-            <AsideCollection
-              {...asideCollection}
-              widgetComp={widgetComp}
-              adComponent={adComponent}
-              sticky={true}
-              storyId={storyId}
-              opts={publishedDetails}
-            />
-          </div>
-        )}
-      </>
-    );
-  };
-
-  const PhotoStoryTemplate = ({ templateType }) => {
-    switch (templateType) {
-      case "hero-priority-center":
-        return <HeroPriority story={story} />;
-      case "headline-priority":
-        return <HeadlinePriority story={story} />;
-      default:
-        return <DefaultTemplate story={story} />;
-    }
-  };
-  PhotoStoryTemplate.propTypes = {
-    templateType: PropTypes.string
-  };
-
-  PhotoStoryTemplate.propTypes = {
-    templateType: PropTypes.string
-  };
-
-  return (
-    <div
-      styleName={`${verticalShare} ${isFullBleed ? "fullBleed" : ""}`}
-      data-test-id={`photo-story-${templateType}-${kebabCase(imageRender)}`}
-      className={`arrow-component arr-story-grid arr--content-wrapper arr--photo-story-template-wrapper ${templateType} `}
-      style={{ backgroundColor: theme }}>
-      <PhotoStoryTemplate templateType={templateType} />
-    </div>
-  );
-};
-
-PhotoStory.propTypes = {
-  story: PropTypes.object,
-  config: PropTypes.shape({
-    templateType: PropTypes.string,
-    asideCollection: PropTypes.object
-  }),
-  firstChild: PropTypes.node,
-  secondChild: PropTypes.node,
-  storyElementsConfig: PropTypes.object,
-  adComponent: PropTypes.func,
-  widgetComp: PropTypes.func
-};
-
-export default StateProvider(PhotoStory);