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

package/src/components/Rows/StoryTemplates/VideoStoryTemplates/README.md

@@ -0,0 +1,31 @@
+# Video Story Template
+
+Video story template is a basic component used to represent a video story.
+
+## Usage
+
+## Default Video Story
+
+```jsx
+<VideoStoryTemplate story={story} templateConfig={templateConfig} />
+```
+
+## Hero priority Video Story
+
+```jsx
+<VideoStoryTemplate story={story} templateConfig={templateConfig} />
+```
+
+## Headline priority Video Story
+
+```jsx
+<VideoStoryTemplate story={story} templateConfig={templateConfig} />
+```
+
+## Template with Children
+
+```jsx
+<VideoStoryTemplate story={story} templateConfig={templateConfig}>
+  <Children />
+</VideoStoryTemplate>
+```

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

@@ -0,0 +1,294 @@
+import { SocialShare } from "@quintype/components";
+import PropTypes from "prop-types";
+import React, { useCallback } from "react";
+import { useSelector } from "react-redux";
+import get from "lodash.get";
+import { SocialShareTemplate } from "../../../Molecules/SocialShareTemplate";
+import { SectionTag } from "../../../Atoms/SectionTag";
+import { StoryHeadline } from "../../../Atoms/StoryHeadline";
+import { Subheadline } from "../../../Atoms/Subheadline";
+import { Video } from "../../../Atoms/StoryElements/Video";
+import AsideCollection from "../../AsideCollection";
+import { AuthorCard } from "../../../Atoms/AuthorCard";
+import { PublishDetails } from "../../../Atoms/PublishDetail";
+import { StoryTags } from "../../../Atoms/StoryTags";
+import { StoryReview } from "../../../Atoms/StoryReview";
+import { StoryElementCard, SlotAfterStory } from "../../../Molecules/StoryElementCard";
+import { StateProvider } from "../../../SharedContext";
+import "./video-story.m.css";
+import { FollowUs } from "../../../Molecules/FollowUs";
+import { SponsoredLabel } from "../../../Atoms/SponsoredLabel";
+
+const VideoStoryTemplate = ({
+  storyAccess = null,
+  story = {},
+  config = {},
+  storyElementsConfig,
+  widgetComp,
+  adComponent,
+  firstChild,
+  secondChild,
+  enableDarkMode,
+  loadRelatedStories,
+  visibleCardsRender = null,
+  meteringIndicator
+}) => {
+  const heroVideo =
+    story.cards
+      .flatMap((card) => card["story-elements"])
+      .find(
+        ({ type, subtype }) =>
+          type === "youtube-video" ||
+          subtype === "jwplayer" ||
+          (type === "jsembed" && (subtype === "dailymotion-video" || subtype === "dailymotion-embed-script")) ||
+          subtype === "brightcove-video"
+      ) || {};
+
+  const {
+    theme = "",
+    authorCard = {},
+    authorDetails = {},
+    asideCollection = {},
+    templateType = "",
+    noOfVisibleCards = 0,
+    publishedDetails = {},
+    premiumStoryIconConfig = {},
+    imageRender = "fullBleed",
+    socialShareStyle = "fixed",
+    followUsLayout = "",
+    fixedShareLayout = "partialShareIcons",
+    sectionTagSettings = {}
+  } = config;
+
+  const stickyStyle = socialShareStyle === "sticky" ? "sticky" : "";
+  const visibledCards = noOfVisibleCards < 0 ? story.cards : story.cards.slice(0, noOfVisibleCards);
+  const storyId = get(story, ["id"], "");
+
+  const qtState = useSelector((state) => get(state, ["qt"], {}));
+  const timezone = get(qtState, ["data", "timezone"], null);
+  const mountAt = get(qtState, ["config", "mountAt"], "");
+
+  const isFullWidthImage = imageRender === "fullBleed";
+  const enableRoundedCorners = get(qtState, ["config", "pagebuilder-config", "general", "enableRoundedCorners"], false);
+  const roundedCorners = enableRoundedCorners && !isFullWidthImage ? "rounded-corners" : "";
+
+  const { sponsoredStoryConfig = {} } = get(qtState, ["config", "pagebuilder-config", "general"], {});
+
+  const HeroVideo = () => {
+    const lazyLoad = get(storyElementsConfig, ["jsEmbed", "lazyLoad"], true);
+    return (
+      <div styleName={`hero-video index-2 ${roundedCorners}`} id={`video-${get(heroVideo, ["id"])}`}>
+        <Video element={heroVideo} loadIframeOnClick={lazyLoad} />
+      </div>
+    );
+  };
+
+  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 HeaderCard = () => {
+    return (
+      <div styleName="header-details">
+        <SectionTag story={story} {...sectionTagSettings} />
+        <StoryHeadline story={story} premiumStoryIconConfig={premiumStoryIconConfig} />
+        <Subheadline story={story} showFullContent />
+      </div>
+    );
+  };
+
+  const StoryData = () => {
+    const visibleCards = visibledCards.map((card) => {
+      return (
+        <StoryElementCard
+          heroVideoElementId={heroVideo.id}
+          story={story}
+          card={card}
+          key={get(card, ["id"], "")}
+          config={storyElementsConfig}
+          adComponent={adComponent}
+          widgetComp={widgetComp}
+          enableDarkMode={enableDarkMode}
+        />
+      );
+    });
+    return (
+      <div styleName="story-details">
+        <div styleName="author">
+          {authorCard && (
+            <AuthorCard story={story} template={authorDetails.template} opts={authorDetails.opts} mountAt={mountAt} />
+          )}
+        </div>
+        <div styleName="timestamp-social-share" 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>
+        <StoryReview theme={theme} story={story} />
+        {meteringIndicator}
+        {visibleCardsRender ? (
+          visibleCardsRender(visibleCards, firstChild, storyAccess)
+        ) : (
+          <>
+            {visibleCards}
+            {firstChild}
+          </>
+        )}
+        <div styleName="story-tags">
+          <StoryTags tags={story.tags} config={qtState?.config} />
+          {(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="video-story-side-column">
+          <AsideCollection
+            {...asideCollection}
+            widgetComp={widgetComp}
+            adComponent={adComponent}
+            sticky={true}
+            story={story}
+            opts={publishedDetails}
+            loadRelatedStories={loadRelatedStories}
+          />
+        </div>
+      )
+    );
+  };
+
+  // caching is done to avoid widget and Ad re-renderings
+  const CachedSideColumn = useCallback(SideColumn, [templateType, story["story-template"], asideCollection?.slots]);
+
+  const heroPriorityTemplate = () => {
+    return (
+      <>
+        <HeroVideo />
+        <div styleName="story-content-wrapper">
+          <HeaderCard />
+          <StoryData />
+        </div>
+        {asideCollection && (
+          <div styleName="aside-collection tablet-index-2">
+            <AsideCollection
+              horizontal={true}
+              {...asideCollection}
+              widgetComp={widgetComp}
+              adComponent={adComponent}
+              story={story}
+              opts={publishedDetails}
+              loadRelatedStories={loadRelatedStories}
+            />
+          </div>
+        )}
+      </>
+    );
+  };
+
+  const headlinePriorityTemplate = () => {
+    return (
+      <>
+        <div styleName="story-content-wrapper">
+          <HeaderCard />
+        </div>
+        <div styleName="story-content-wrapper index-2">
+          <HeroVideo />
+        </div>
+        <div styleName="story-content-wrapper">
+          <StoryData />
+        </div>
+        <CachedSideColumn />
+      </>
+    );
+  };
+
+  const defaultTemplate = () => {
+    return (
+      <>
+        <HeroVideo />
+        <div styleName="story-content-wrapper">
+          <HeaderCard />
+          <StoryData />
+        </div>
+        <CachedSideColumn />
+      </>
+    );
+  };
+
+  const getStoryTemplate = (templateType) => {
+    switch (templateType) {
+      case "hero-priority":
+        return heroPriorityTemplate();
+      case "headline-priority":
+        return headlinePriorityTemplate();
+      default:
+        return defaultTemplate();
+    }
+  };
+
+  const templateClass = templateType && templateType !== "default" ? templateType : "default";
+  const dataTestId = templateType ? `video-story-${templateType}` : "video-story";
+  return (
+    <div
+      data-test-id={dataTestId}
+      className="arrow-component arr--content-wrapper arr-story-grid arr--video-story-template-wrapper"
+      styleName={`${templateClass} ${isFullWidthImage ? "fullBleed" : ""} ${stickyStyle}`}
+      style={{ backgroundColor: theme || "initial" }}>
+      {getStoryTemplate(templateType)}
+    </div>
+  );
+};
+
+VideoStoryTemplate.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,
+  loadRelatedStories: PropTypes.func,
+  visibleCardsRender: PropTypes.func | undefined,
+  meteringIndicator: PropTypes.node | undefined
+};
+
+export default StateProvider(VideoStoryTemplate);

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

@@ -0,0 +1,217 @@
+import { boolean, color, text } from "@storybook/addon-knobs";
+import React from "react";
+import { withStore, optionalSelect } from "../../../../../storybook";
+import { AdPlaceholder } from "../../../Atoms/AdPlaceholder";
+import { generateCollection, generateStory } from "../../../Fixture";
+import { slotData } from "../../../Fixture/slot-config";
+import VideoStoryTemplate from "./index";
+import Readme from "./README.md";
+
+const story = generateStory();
+const collection = generateCollection({ stories: 4 });
+const collectionNameDefaultValue = "#3a9fdd";
+const collectionNameBorderColorLabel = "Aside Collection Name Border Color";
+const authorTemplates = {
+  default: "default",
+  leftAligned: "leftAligned",
+  centerAligned: "centerAligned"
+};
+
+const socialShareStyle = {
+  "Vertical Share": "sticky",
+  "Fixed Share": "fixed"
+};
+
+const label = "BG Color";
+const defaultvalue = "#ffffff";
+const 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"
+};
+
+const configurableSlot = () => {
+  return <AdPlaceholder height="250px" width="300px" />;
+};
+
+withStore(
+  "Rows/Story Templates/Video 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(label, defaultvalue),
+      noOfVisibleCards: 1,
+      showSection: boolean("Show Section Tag", true),
+      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(collectionNameBorderColorLabel, collectionNameDefaultValue),
+          title: text("Aside Collection Title", "Trending"),
+          theme: color(label, defaultvalue),
+          showAuthor: boolean("Author", true),
+          showTime: boolean("Timestamp", true)
+        },
+        slots: slotData
+      },
+      authorDetails: {
+        template: optionalSelect("Author Templates", authorTemplates) || "default",
+        opts: {
+          showBio: boolean("Author Bio", false),
+          showImage: boolean("Author Image", true),
+          showName: boolean("Author Name", true),
+          showLabels: boolean("show labels", true),
+          showGuestAuthorName: boolean("show guest author name", false),
+          showGuestAuthorImage: boolean("show guest author image", false)
+        }
+      }
+    };
+    const storyElementsConfig = {
+      summary: {},
+      blurb: {},
+      blockquote: {},
+      quote: {},
+      "also-read": {},
+      "q-and-a": {},
+      question: {},
+      answer: {},
+      references: {}
+    };
+    return (
+      <VideoStoryTemplate
+        story={story}
+        config={templateConfig}
+        storyElementsConfig={storyElementsConfig}
+        adComponent={configurableSlot}
+        widgetComp={configurableSlot}
+        firstChild={<AdPlaceholder height="250px" width="300px" />}
+        secondChild={<AdPlaceholder height="250px" width="300px" />}
+      />
+    );
+  })
+  .add("Hero Priority", () => {
+    const templateConfig = {
+      socialShareStyle: optionalSelect("Social Share Style", socialShareStyle),
+      theme: color(label, defaultvalue),
+      noOfVisibleCards: -1,
+      templateType: "hero-priority",
+      showSection: boolean("Show Section Tag", true),
+      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(collectionNameBorderColorLabel, collectionNameDefaultValue),
+          title: text("Aside Collection Title", "Trending"),
+          theme: color(label, defaultvalue),
+          showAuthor: boolean("Author", true),
+          showTime: boolean("Timestamp", true)
+        },
+        slots: slotData
+      }
+    };
+    const storyElementsConfig = {
+      summary: {},
+      blurb: {},
+      blockquote: {},
+      quote: {},
+      "also-read": {},
+      "q-and-a": {},
+      question: {},
+      answer: {},
+      references: {}
+    };
+    return (
+      <VideoStoryTemplate
+        story={story}
+        config={templateConfig}
+        storyElementsConfig={storyElementsConfig}
+        adComponent={configurableSlot}
+        widgetComp={configurableSlot}
+        firstChild={<AdPlaceholder height="250px" width="300px" />}
+        secondChild={<AdPlaceholder height="250px" width="300px" />}
+      />
+    );
+  })
+  .add("Headline Priority", () => {
+    const templateConfig = {
+      socialShareStyle: optionalSelect("Social Share Style", socialShareStyle),
+      theme: color(label, defaultvalue),
+      noOfVisibleCards: -1,
+      templateType: "headline-priority",
+      showSection: boolean("Show Section Tag", true),
+      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(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
+      }
+    };
+    const storyElementsConfig = {
+      summary: {},
+      blurb: {},
+      blockquote: {},
+      quote: {},
+      "also-read": {},
+      "q-and-a": {},
+      question: {},
+      answer: {},
+      references: {}
+    };
+    return (
+      <VideoStoryTemplate
+        story={story}
+        config={templateConfig}
+        storyElementsConfig={storyElementsConfig}
+        adComponent={configurableSlot}
+        widgetComp={configurableSlot}
+        firstChild={<AdPlaceholder height="250px" width="300px" />}
+        secondChild={<AdPlaceholder height="250px" width="300px" />}
+      />
+    );
+  });