@quintype/arrow 3.54.1-debug-full-bleed.4 → 3.54.1-version-upgrade.1

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

@@ -0,0 +1,100 @@
+import PropTypes from "prop-types";
+import React from "react";
+import { useSelector } from "react-redux";
+import kebabCase from "lodash.kebabcase";
+import { StateProvider } from "../../../SharedContext";
+import { StoryTemplate } from "./templates";
+import get from "lodash/get";
+import "./text-story.m.css";
+
+const TextStoryTemplate = ({
+  storyAccess = null,
+  story = {},
+  config = {},
+  storyElementsConfig,
+  adComponent,
+  widgetComp,
+  firstChild,
+  secondChild,
+  enableDarkMode,
+  loadRelatedStories,
+  visibleCardsRender,
+  meteringIndicator,
+  isPbStoryView = false
+}) => {
+  const {
+    theme = "",
+    templateType = "default",
+    imageRender = "fullBleed",
+    sort = "headline-first",
+    socialShareStyle = "fixed"
+  } = config;
+  const sortOption = templateType === "hero-vertical-priority" ? sort : "";
+  const supportImageType = {
+    default: imageRender,
+    "hero-priority-center": imageRender,
+    "headline-hero-priority": imageRender,
+    "hero-vertical-priority": imageRender
+  };
+  const stickyStyle = socialShareStyle === "sticky" ? "sticky" : "";
+  const qtState = useSelector((state) => get(state, ["qt"], {}));
+  const timezone = get(qtState, ["data", "timezone"], null);
+  const mountAt = get(qtState, ["config", "mountAt"], "");
+
+  const dataTestId = supportImageType[templateType]
+    ? `text-story-${templateType}-${kebabCase(supportImageType[templateType])}`
+    : `text-story-${templateType}`;
+
+  const isFullWidthImage = imageRender === "fullBleed";
+  return (
+    <div
+      data-test-id={dataTestId}
+      className="arrow-component arr-story-grid arr--content-wrapper arr--text-story-template-wrapper"
+      styleName={`${templateType} ${stickyStyle} ${supportImageType[templateType] || ""} ${sortOption}`}
+      style={{ backgroundColor: theme || "initial" }}>
+      <StoryTemplate
+        storyAccess={storyAccess}
+        story={story}
+        config={config}
+        storyElementsConfig={storyElementsConfig}
+        isFullWidthImage={isFullWidthImage}
+        imageRender={imageRender}
+        adComponent={adComponent}
+        widgetComp={widgetComp}
+        firstChild={firstChild}
+        secondChild={secondChild}
+        timezone={timezone}
+        enableDarkMode={enableDarkMode}
+        mountAt={mountAt}
+        loadRelatedStories={loadRelatedStories}
+        visibleCardsRender={visibleCardsRender}
+        meteringIndicator={meteringIndicator}
+        isPbStoryView={isPbStoryView}
+      />
+    </div>
+  );
+};
+
+TextStoryTemplate.propTypes = {
+  storyAccess: PropTypes.object,
+  story: PropTypes.object,
+  accessLoading: PropTypes.bool,
+  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,
+  enableDarkMode: PropTypes.bool,
+  mountAt: PropTypes.string,
+  loadRelatedStories: PropTypes.func,
+  visibleCardsRender: PropTypes.func | undefined,
+  meteringIndicator: PropTypes.node | undefined,
+  isPbStoryView: PropTypes.bool | undefined
+};
+
+export default StateProvider(TextStoryTemplate);

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

@@ -0,0 +1,120 @@
+import { 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 TextStoryTemplate from "./index";
+import Readme from "./README.md";
+
+const story = generateStory();
+const collection = generateCollection({ stories: 4 });
+const authorTemplate = {
+  default: "default",
+  leftAligned: "leftAligned",
+  centerAligned: "centerAligned",
+  "No value": ""
+};
+
+const imageTypeOptions = {
+  "Full Bleed": "fullBleed",
+  "With In Container": "container"
+};
+
+const socialShareStyle = {
+  "Vertical Share": "sticky",
+  "Fixed Share": "fixed"
+};
+
+const 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"
+};
+
+const storyElementsConfig = {
+  summary: {},
+  blurb: {},
+  blockquote: {},
+  quote: {},
+  "also-read": {},
+  "q-and-a": {},
+  question: {},
+  answer: {}
+};
+
+const configurableSlot = () => {
+  return <AdPlaceholder height="250px" width="300px" />;
+};
+
+const sortFirstOptions = {
+  "Headline First": "headline-first",
+  "Image First": "image-first"
+};
+
+withStore(
+  "Rows/Story Templates/Text Story Template",
+  {
+    qt: {
+      config: {
+        "cdn-image": "thumbor-stg.assettype.com",
+        mountAt: "/sub-directory"
+      }
+    }
+  },
+  Readme
+).add("default", () => {
+  const templateConfig = {
+    socialShareStyle: optionalSelect("Social Share Style", socialShareStyle),
+    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,
+        showLabels: boolean("show labels", true),
+        showGuestAuthorName: boolean("show guest author name", false),
+        showGuestAuthorImage: boolean("show guest author image", false)
+      }
+    }
+  };
+  return (
+    <TextStoryTemplate
+      story={story}
+      config={templateConfig}
+      storyElementsConfig={storyElementsConfig}
+      adComponent={configurableSlot}
+      widgetComp={configurableSlot}
+      firstChild={<AdPlaceholder height="250px" width="300px" />}
+      secondChild={<AdPlaceholder height="250px" width="300px" />}
+    />
+  );
+});

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

@@ -0,0 +1,413 @@
+import React, { useCallback } from "react";
+import { useSelector } from "react-redux";
+import get from "lodash.get";
+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 { StoryReview } from "../../../Atoms/StoryReview";
+import { roundedCornerClass } from "../../../../constants";
+import "./text-story.m.css";
+import { FollowUs } from "../../../Molecules/FollowUs";
+import { heroImageWidths, textStoryImgSize } from "../../../../utils/img-size-utils";
+import { SponsoredLabel } from "../../../Atoms/SponsoredLabel";
+import { AudioPlayer } from "../../../Atoms/AudioPlayer";
+import { shouldEnableTTS } from "../../../../utils/utils";
+
+export const StoryTemplate = ({
+  storyAccess = null,
+  story = {},
+  config = {},
+  storyElementsConfig,
+  isFullWidthImage,
+  widgetComp,
+  adComponent,
+  firstChild,
+  secondChild,
+  timezone,
+  enableDarkMode,
+  mountAt,
+  loadRelatedStories,
+  visibleCardsRender = null,
+  meteringIndicator,
+  imageRender,
+  isPbStoryView
+}) => {
+  const {
+    theme = "",
+    asideCollection = {},
+    templateType = "default",
+    noOfVisibleCards = 0,
+    publishedDetails = {},
+    authorDetails = {},
+    premiumStoryIconConfig = {},
+    socialShareStyle = "fixed",
+    followUsLayout = "",
+    fixedShareLayout = "partialShareIcons",
+    sectionTagSettings = {}
+  } = config;
+
+  const visibledCards = noOfVisibleCards < 0 ? story.cards : story.cards.slice(0, noOfVisibleCards);
+  const storyId = get(story, ["id"], "");
+  const HeaderCard = () => {
+    return (
+      <div styleName="header-details">
+        <SectionTag story={story} {...sectionTagSettings} />
+        <StoryHeadline story={story} premiumStoryIconConfig={premiumStoryIconConfig} />
+        <Subheadline story={story} showFullContent />
+      </div>
+    );
+  };
+
+  const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
+  const enableRoundedCorners = get(qtConfig, ["pagebuilder-config", "general", "enableRoundedCorners"], false);
+  const roundedCorners = enableRoundedCorners && !isFullWidthImage ? roundedCornerClass : "";
+  const { sponsoredStoryConfig = {} } = get(qtConfig, ["pagebuilder-config", "general"], {});
+
+  const cdnImage = get(qtConfig, ["cdn-image"]);
+  const audioS3key = get(story, ["story-audio", "s3-key"]);
+  const audioUrl = `//${cdnImage}/${audioS3key}`;
+
+  const { enableTTS: isPbTTSEnabled = false, listenButtonTitle, playBackSpeedTitle } = get(
+    qtConfig,
+    ["pagebuilder-config", "story", "pageSetting", "textToSpeech"],
+    {}
+  );
+
+  const languageDirection = get(qtConfig, ["language", "direction"], "ltr");
+  const enableTTS = shouldEnableTTS({ isPbTTSEnabled, audioS3key, storyAccess, languageDirection, isPbStoryView });
+
+  const AsideCollectionCard = () => {
+    return (
+      asideCollection && (
+        <div styleName="aside-collection tablet-index-2">
+          <AsideCollection
+            horizontal={true}
+            {...asideCollection}
+            widgetComp={widgetComp}
+            adComponent={adComponent}
+            opts={publishedDetails}
+            loadRelatedStories={loadRelatedStories}
+            story={story}
+          />
+        </div>
+      )
+    );
+  };
+
+  // Caching is done to avoid widget and Ad re-renderings
+  const CachedAsideCollectionCard = useCallback(AsideCollectionCard, [
+    templateType,
+    story["story-template"],
+    asideCollection?.slots
+  ]);
+
+  const SocialShareComponent = () => {
+    return (
+      <div
+        id={`story-share-${storyId}`}
+        className={socialShareStyle === "sticky" ? "arr--share-sticky-wrapper" : "content-style"}>
+        <SocialShare
+          template={SocialShareTemplate}
+          fullUrl={encodeURI(story.url)}
+          title={story.headline}
+          theme={theme}
+          socialShareStyle={socialShareStyle}
+          shareIconId={`share-icon-story-share-${storyId}`}
+          fixedShareLayout={fixedShareLayout}
+          id={story.id}
+          enableDarkMode={enableDarkMode}
+        />
+      </div>
+    );
+  };
+
+  const StoryData = () => {
+    const visibleCards = visibledCards.map((card) => {
+      return (
+        <StoryElementCard
+          story={story}
+          card={card}
+          key={get(card, ["id"], "")}
+          config={storyElementsConfig}
+          adComponent={adComponent}
+          widgetComp={widgetComp}
+          enableDarkMode={enableDarkMode}
+        />
+      );
+    });
+
+    return (
+      <div styleName="gap-16">
+        {authorDetails && (
+          <AuthorCard story={story} template={authorDetails.template} opts={authorDetails.opts} mountAt={mountAt} />
+        )}
+        <div styleName="timestamp-publish-details" id={`publish-details-container-${storyId}`}>
+          <PublishDetails story={story} opts={publishedDetails} template="story" timezone={timezone} />
+        </div>
+        <div styleName="share">
+          <SocialShareComponent />
+          {(followUsLayout === "top" || followUsLayout === "topAndEnd") && <FollowUs theme={theme} displaySingleIcon />}
+        </div>
+        {enableTTS && (
+          <AudioPlayer
+            audioUrl={audioUrl}
+            enableDarkMode={enableDarkMode}
+            listenButtonTitle={listenButtonTitle}
+            playBackSpeedTitle={playBackSpeedTitle}
+          />
+        )}
+        {meteringIndicator}
+        <StoryReview theme={theme} story={story} />
+        {visibleCardsRender ? (
+          visibleCardsRender(visibleCards, firstChild, storyAccess)
+        ) : (
+          <>
+            {visibleCards}
+            {firstChild}
+          </>
+        )}
+        <div styleName="story-tags">
+          <StoryTags tags={story.tags} config={qtConfig} />
+          {(followUsLayout === "end" || followUsLayout === "topAndEnd") && (
+            <FollowUs theme={theme} displaySingleIcon={false} />
+          )}
+          {meteringIndicator}
+          <SlotAfterStory
+            id={story.id}
+            element={story.customSlotAfterStory}
+            AdComponent={adComponent}
+            WidgetComp={widgetComp}
+          />
+        </div>
+        <SponsoredLabel story={story} sponsoredStoryConfig={sponsoredStoryConfig} isStoryPage={true} />
+        {secondChild}
+      </div>
+    );
+  };
+
+  const SideColumn = () => {
+    return (
+      asideCollection && (
+        <div styleName="text-story-side-column">
+          <AsideCollection
+            {...asideCollection}
+            widgetComp={widgetComp}
+            adComponent={adComponent}
+            sticky={true}
+            opts={publishedDetails}
+            loadRelatedStories={loadRelatedStories}
+            story={story}
+          />
+        </div>
+      )
+    );
+  };
+
+  // Caching is done to avoid widget and Ad re-renderings
+  const CachedSideColumn = useCallback(SideColumn, [templateType, story["story-template"], asideCollection?.slots]);
+
+  const heroPriorityCenterTemplate = () => {
+    return (
+      <>
+        <div styleName="hero-image index-2" data-test-id="hero-priority-center-image">
+          <HeroImage
+            story={story}
+            widths={heroImageWidths}
+            sizes={textStoryImgSize?.[imageRender]?.[templateType]}
+            FullBleed={false}
+            aspectRatio={[[16, 9]]}
+            defaultFallback={false}
+            isStoryPageImage
+            isFullWidthImage={isFullWidthImage}
+          />
+        </div>
+        <div styleName="story-content-inner-wrapper">
+          <CaptionAttribution story={story} config={config} />
+          <HeaderCard />
+          <StoryData />
+        </div>
+        <CachedAsideCollectionCard />
+      </>
+    );
+  };
+
+  const headlineHeroPriorityTemplate = () => {
+    return (
+      <>
+        <div styleName="story-content-inner-wrapper">
+          <HeaderCard />
+        </div>
+        <div styleName="hero-image index-2" data-test-id="headline-hero-priority-image">
+          <HeroImage
+            story={story}
+            widths={heroImageWidths}
+            sizes={textStoryImgSize?.[imageRender]?.[templateType]}
+            FullBleed={false}
+            aspectRatio={[[16, 9]]}
+            defaultFallback={false}
+            isStoryPageImage
+            isFullWidthImage={isFullWidthImage}
+          />
+        </div>
+        <div styleName="story-content-inner-wrapper">
+          <CaptionAttribution story={story} config={config} />
+          <StoryData />
+        </div>
+        <CachedAsideCollectionCard />
+      </>
+    );
+  };
+
+  const heroVerticalTemplate = () => {
+    return (
+      <>
+        <HeaderCard />
+        <div styleName="hero-image index-2" data-test-id="hero-vertical-image">
+          <HeroImage
+            story={story}
+            widths={heroImageWidths}
+            sizes={textStoryImgSize?.[imageRender]?.[templateType]}
+            FullBleed={false}
+            aspectRatio={[[3, 4]]}
+            defaultFallback={false}
+            isStoryPageImage
+            isFullWidthImage={isFullWidthImage}
+          />
+        </div>
+        <CaptionAttribution story={story} config={config} />
+        <div styleName="story-content-inner-wrapper">
+          <StoryData />
+        </div>
+        <CachedAsideCollectionCard />
+      </>
+    );
+  };
+
+  const heroPriorityLeftTemplate = () => {
+    return (
+      <>
+        <div styleName="hero-image index-2" data-test-id="hero-priority-left-image">
+          <HeroImage
+            story={story}
+            widths={heroImageWidths}
+            sizes={textStoryImgSize?.[imageRender]?.[templateType]}
+            FullBleed={false}
+            aspectRatio={[[16, 9]]}
+            defaultFallback={false}
+            isStoryPageImage
+            isFullWidthImage={isFullWidthImage}
+          />
+        </div>
+        <div styleName="story-content-inner-wrapper">
+          <CaptionAttribution story={story} config={config} />
+          <HeaderCard />
+          <StoryData />
+        </div>
+        <CachedSideColumn />
+      </>
+    );
+  };
+
+  const headlinePriorityTemplate = () => {
+    return (
+      <>
+        <HeaderCard />
+        <div styleName="story-content-inner-wrapper hero-image index-2" data-test-id="headline-priority-hero-image">
+          <HeroImage
+            story={story}
+            widths={heroImageWidths}
+            sizes={textStoryImgSize?.[imageRender]?.[templateType]}
+            FullBleed={false}
+            aspectRatio={[[16, 9]]}
+            defaultFallback={false}
+            isStoryPageImage
+            isFullWidthImage={isFullWidthImage}
+          />
+        </div>
+        <div styleName="story-content-inner-wrapper">
+          <CaptionAttribution story={story} config={config} />
+          <StoryData />
+        </div>
+        <CachedSideColumn />
+      </>
+    );
+  };
+
+  const headlineOverlayTemplate = () => {
+    return (
+      <>
+        <div className={roundedCorners} styleName="hero-image index-2" data-test-id="headline-overlay-hero-image">
+          <HeroImage
+            story={story}
+            sizes={textStoryImgSize?.[imageRender]?.[templateType]}
+            widths={heroImageWidths}
+            FullBleed={false}
+            aspectRatio={[[3, 4], [16, 9]]}
+            isStoryPageImage
+            isFullWidthImage={isFullWidthImage}
+          />
+        </div>
+        <HeaderCard />
+        <div styleName="story-content-inner-wrapper">
+          <CaptionAttribution story={story} config={config} />
+          <StoryData />
+        </div>
+
+        <CachedAsideCollectionCard />
+      </>
+    );
+  };
+
+  const 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 <>{getStoryTemplate(templateType)}</>;
+};
+
+StoryTemplate.propTypes = {
+  storyAccess: PropTypes.object,
+  story: PropTypes.object,
+  config: PropTypes.shape({
+    templateType: PropTypes.string,
+    authorDetails: PropTypes.object,
+    asideCollection: PropTypes.object
+  }),
+  isFullWidthImage: PropTypes.bool,
+  firstChild: PropTypes.node,
+  secondChild: PropTypes.node,
+  timezone: PropTypes.string,
+  storyElementsConfig: PropTypes.object,
+  widgetComp: PropTypes.func,
+  adComponent: PropTypes.func,
+  enableDarkMode: PropTypes.bool,
+  mountAt: PropTypes.string,
+  loadRelatedStories: PropTypes.func,
+  visibleCardsRender: PropTypes.func | undefined,
+  meteringIndicator: PropTypes.node | undefined,
+  imageRender: PropTypes.string,
+  isPbStoryView: PropTypes.bool | undefined
+};