@quintype/arrow 3.54.1-version-upgrade.1 → 3.54.1-version-upgrade.2

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

@@ -1,100 +0,0 @@
-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

@@ -1,120 +0,0 @@
-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

@@ -1,413 +0,0 @@
-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
-};