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

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

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

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

@@ -1,217 +0,0 @@
-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" />}
-      />
-    );
-  });