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

package/src/components/Rows/StoryTemplates/TextStoryTemplates/text-story.test.js

@@ -1,222 +0,0 @@
-import * as React from "react";
-import { mount } from "enzyme";
-import { generateStory, generateCollection, generateStore } from "../../../Fixture";
-import TextStoryTemplate from "./index";
-import { AdPlaceholder } from "../../../Atoms/AdPlaceholder";
-import { Provider } from "react-redux";
-import { mockIntersectionObserver } from "../../../../utils/testing-utils";
-
-const story = generateStory();
-const collection = generateCollection({ stories: 4 });
-const configurableSlot = () => {
-  return <AdPlaceholder height="250px" width="300px" />;
-};
-
-const child = <div>children</div>;
-
-const storyElementsConfig = {
-  summary: {},
-  blurb: {},
-  blockquote: {},
-  quote: {},
-  "also-read": {},
-  "q-and-a": {},
-  question: {},
-  answer: {}
-};
-
-const templateConfig = {
-  theme: "#ffffff",
-  sort: "image-first",
-  noOfVisibleCards: -1,
-  publishedDetails: {
-    enablePublishedTime: true,
-    enableUpdatedTime: false,
-    showReadTime: true
-  },
-  asideCollection: {
-    data: collection,
-    config: {
-      collectionNameBorderColor: "#3a9fdd",
-      title: "Trending",
-      theme: "#ffffff",
-      adSlot: [{ type: "ad", component: configurableSlot }]
-    }
-  },
-  authorDetails: {
-    template: "default",
-    opts: {
-      showBio: false,
-      showImage: true,
-      showName: true
-    }
-  }
-};
-
-beforeEach(() => {
-  mockIntersectionObserver();
-});
-
-describe("Text Story Templates", () => {
-  it("Should render text story template with image full-bleed", () => {
-    const config = { ...templateConfig, imageRender: "fullBleed" };
-    const wrapper = mount(
-      <Provider store={generateStore}>
-        <TextStoryTemplate
-          story={story}
-          config={config}
-          storyElementsConfig={storyElementsConfig}
-          firstChild={child}
-          secondChild={child}
-          adComponent={configurableSlot}
-          widgetComp={configurableSlot}
-        />
-      </Provider>
-    );
-    expect(wrapper.find({ "data-test-id": "text-story-default-full-bleed" }).prop("className")).toMatch(/fullBleed/);
-  });
-
-  it("Should render text story template with in container image", () => {
-    const config = { ...templateConfig, templateType: "hero-priority-center", imageRender: "container" };
-    const wrapper = mount(
-      <Provider store={generateStore}>
-        <TextStoryTemplate
-          story={story}
-          config={config}
-          storyElementsConfig={storyElementsConfig}
-          firstChild={child}
-          secondChild={child}
-          adComponent={configurableSlot}
-          widgetComp={configurableSlot}
-        />
-      </Provider>
-    );
-    expect(wrapper.find({ "data-test-id": "text-story-hero-priority-center-container" }).prop("className")).toMatch(
-      /container/
-    );
-  });
-
-  it("Should render hero priority center align template", () => {
-    const config = { ...templateConfig, templateType: "hero-priority-center", imageRender: "container" };
-    const wrapper = mount(
-      <Provider store={generateStore}>
-        <TextStoryTemplate
-          story={story}
-          config={config}
-          storyElementsConfig={storyElementsConfig}
-          firstChild={child}
-          secondChild={child}
-          adComponent={configurableSlot}
-          widgetComp={configurableSlot}
-        />
-      </Provider>
-    );
-    expect(wrapper.find({ "data-test-id": "text-story-hero-priority-center-container" }).prop("className")).toMatch(
-      /hero-priority-center/
-    );
-    expect(wrapper.find("AsideCollectionCard").length).toEqual(1);
-  });
-
-  it("Should render hero priority left align template", () => {
-    const config = { ...templateConfig, templateType: "default", imageRender: "container" };
-    const wrapper = mount(
-      <Provider store={generateStore}>
-        <TextStoryTemplate
-          story={story}
-          config={config}
-          storyElementsConfig={storyElementsConfig}
-          firstChild={child}
-          secondChild={child}
-          adComponent={configurableSlot}
-          widgetComp={configurableSlot}
-        />
-      </Provider>
-    );
-    expect(wrapper.find({ "data-test-id": "text-story-default-container" }).prop("className")).toMatch(/default/);
-    expect(wrapper.find("SideColumn").length).toEqual(1);
-  });
-
-  it("Should render headline hero priority template", () => {
-    const config = { ...templateConfig, templateType: "headline-hero-priority", imageRender: "container" };
-    const wrapper = mount(
-      <Provider store={generateStore}>
-        <TextStoryTemplate
-          story={story}
-          config={config}
-          storyElementsConfig={storyElementsConfig}
-          firstChild={child}
-          secondChild={child}
-          adComponent={configurableSlot}
-          widgetComp={configurableSlot}
-        />
-      </Provider>
-    );
-    expect(wrapper.find({ "data-test-id": "text-story-headline-hero-priority-container" }).prop("className")).toMatch(
-      /headline-hero-priority/
-    );
-    expect(wrapper.find("AsideCollectionCard").length).toEqual(1);
-  });
-
-  it("Should render hero vertical priority template", () => {
-    const config = { ...templateConfig, templateType: "hero-vertical-priority", imageRender: "container" };
-    const wrapper = mount(
-      <Provider store={generateStore}>
-        <TextStoryTemplate
-          story={story}
-          config={config}
-          storyElementsConfig={storyElementsConfig}
-          firstChild={child}
-          secondChild={child}
-          adComponent={configurableSlot}
-          widgetComp={configurableSlot}
-        />
-      </Provider>
-    );
-    expect(wrapper.find({ "data-test-id": "text-story-hero-vertical-priority-container" }).prop("className")).toMatch(
-      /hero-vertical-priority/
-    );
-    expect(wrapper.find("AsideCollectionCard").length).toEqual(1);
-  });
-
-  it("Should render headline priority template", () => {
-    const config = { ...templateConfig, templateType: "headline-priority" };
-    const wrapper = mount(
-      <Provider store={generateStore}>
-        <TextStoryTemplate
-          story={story}
-          config={config}
-          storyElementsConfig={storyElementsConfig}
-          firstChild={child}
-          secondChild={child}
-          adComponent={configurableSlot}
-          widgetComp={configurableSlot}
-        />
-      </Provider>
-    );
-    expect(wrapper.find({ "data-test-id": "text-story-headline-priority" }).prop("className")).toMatch(
-      /headline-priority/
-    );
-    expect(wrapper.find("SideColumn").length).toEqual(1);
-  });
-
-  it("Should render headline overlay priority template", () => {
-    const config = { ...templateConfig, templateType: "headline-overlay-priority" };
-    const wrapper = mount(
-      <Provider store={generateStore}>
-        <TextStoryTemplate
-          story={story}
-          config={config}
-          storyElementsConfig={storyElementsConfig}
-          firstChild={child}
-          secondChild={child}
-          adComponent={configurableSlot}
-          widgetComp={configurableSlot}
-        />
-      </Provider>
-    );
-    expect(wrapper.find({ "data-test-id": "text-story-headline-overlay-priority" }).prop("className")).toMatch(
-      /headline-overlay-priority/
-    );
-    expect(wrapper.find("AsideCollectionCard").length).toEqual(1);
-  });
-});

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,237 +0,0 @@
-import { SocialShare } from "@quintype/components";
-import PropTypes from "prop-types";
-import React 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 { StoryElementCard, SlotAfterStory } from "../../../Molecules/StoryElementCard";
-import { StateProvider } from "../../../SharedContext";
-import "./video-story.m.css";
-
-const VideoStoryTemplate = ({
-  story = {},
-  config = {},
-  storyElementsConfig,
-  widgetComp,
-  adComponent,
-  firstChild,
-  secondChild
-}) => {
-  const heroVideo =
-    story.cards
-      .flatMap((card) => card["story-elements"])
-      .find(
-        ({ type, subtype }) => type === "youtube-video" || (type === "jsembed" && subtype === "dailymotion-video")
-      ) || {};
-
-  const {
-    theme = "",
-    authorCard = {},
-    authorDetails = {},
-    asideCollection = {},
-    templateType = "",
-    noOfVisibleCards = 0,
-    publishedDetails = {},
-    verticalShare = "",
-    shareIconType = "plain-color-svg",
-    premiumStoryIconConfig = {}
-  } = config;
-
-  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 HeroVideo = () => {
-    return (
-      <div styleName="hero-video index-2" id={`video-${get(heroVideo, ["id"])}`}>
-        <Video element={heroVideo} loadIframeOnClick={true} />
-      </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 HeaderCard = () => {
-    return (
-      <div styleName="header-details">
-        <SectionTag story={story} />
-        <StoryHeadline story={story} premiumStoryIconConfig={premiumStoryIconConfig} />
-        <Subheadline story={story} showFullContent />
-      </div>
-    );
-  };
-
-  const StoryData = () => {
-    return (
-      <div styleName="story-details">
-        <div styleName="author">
-          {authorCard && <AuthorCard story={story} template={authorDetails.template} opts={authorDetails.opts} />}
-        </div>
-        <div styleName="timestamp-social-share">
-          <PublishDetails story={story} opts={publishedDetails} template="story" timezone={timezone} />
-          {!verticalShare && <SocialShareComponent />}
-        </div>
-        {visibledCards.map((card) => {
-          return (
-            <StoryElementCard
-              heroVideoElementId={heroVideo.id}
-              story={story}
-              card={card}
-              key={get(card, ["id"], "")}
-              config={storyElementsConfig}
-              adComponent={adComponent}
-              widgetComp={widgetComp}
-            />
-          );
-        })}
-        {firstChild}
-        <div styleName="story-tags">
-          <StoryTags tags={story.tags} />
-          <SlotAfterStory
-            id={story.id}
-            element={story.customSlotAfterStory}
-            AdComponent={adComponent}
-            WidgetComp={widgetComp}
-          />
-        </div>
-        {secondChild}
-      </div>
-    );
-  };
-
-  const SideColumn = () => {
-    return (
-      asideCollection && (
-        <div styleName="video-story-side-column">
-          <AsideCollection
-            {...asideCollection}
-            widgetComp={widgetComp}
-            adComponent={adComponent}
-            sticky={true}
-            storyId={storyId}
-            opts={publishedDetails}
-          />
-        </div>
-      )
-    );
-  };
-
-  const heroPriorityTemplate = () => {
-    return (
-      <>
-        <HeroVideo />
-        <div styleName="story-content-wrapper">
-          <HeaderCard />
-          <StoryData />
-        </div>
-        {verticalShare && <SocialShareComponent />}
-        {asideCollection && (
-          <div styleName="aside-collection tablet-index-2">
-            <AsideCollection
-              horizontal={true}
-              {...asideCollection}
-              widgetComp={widgetComp}
-              adComponent={adComponent}
-              storyId={storyId}
-              opts={publishedDetails}
-            />
-          </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>
-        {verticalShare && <SocialShareComponent />}
-        <SideColumn />
-      </>
-    );
-  };
-
-  const defaultTemplate = () => {
-    return (
-      <>
-        <HeroVideo />
-        <div styleName="story-content-wrapper">
-          <HeaderCard />
-          <StoryData />
-        </div>
-
-        {verticalShare && <SocialShareComponent />}
-        <SideColumn />
-      </>
-    );
-  };
-
-  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} ${verticalShare}`}
-      style={{ backgroundColor: theme }}>
-      {getStoryTemplate(templateType)}
-    </div>
-  );
-};
-
-VideoStoryTemplate.propTypes = {
-  story: PropTypes.object,
-  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
-};
-
-export default StateProvider(VideoStoryTemplate);

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

@@ -1,204 +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 shareType = {
-  "Vertical Share": "sticky",
-  "Horizontal Share": ""
-};
-
-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 = {
-      shareIconType: optionalSelect("Social Share Icon Type", iconTypeOptions),
-      verticalShare: optionalSelect("Share Type", shareType),
-      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
-      }
-    };
-    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 = {
-      shareIconType: optionalSelect("Social Share Icon Type", iconTypeOptions),
-      verticalShare: optionalSelect("Share Type", shareType),
-      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 = {
-      shareIconType: optionalSelect("Social Share Icon Type", iconTypeOptions),
-      verticalShare: optionalSelect("Share Type", shareType),
-      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" />}
-      />
-    );
-  });