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

package/src/components/Rows/StoryTemplates/PhotoStoryTemplates/photo-story.test.js

@@ -1,144 +0,0 @@
-import * as React from "react";
-import { mount } from "enzyme";
-import { generateStory, generateCollection, generateStore } from "../../../Fixture";
-import PhotoStory from "./index";
-import { AdPlaceholder } from "../../../Atoms/AdPlaceholder";
-import { Provider } from "react-redux";
-import { mockIntersectionObserver } from "../../../../utils/testing-utils";
-
-const story = generateStory("photo-story");
-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",
-  noOfVisibleCards: -1,
-  publishedDetails: {
-    enablePublishedTime: true,
-    enableUpdatedTime: false,
-    showReadTime: true
-  },
-  asideCollection: {
-    data: collection,
-    config: {
-      collectionNameBorderColor: "#3a9fdd",
-      title: "Trending",
-      theme: "#ffffff",
-      adSlot: [{ type: "ad", component: configurableSlot }]
-    }
-  }
-};
-
-beforeEach(() => {
-  mockIntersectionObserver();
-});
-
-describe("photo Story Templates", () => {
-  it("Should render photo story template with image full-bleed", () => {
-    const config = Object.assign({ imageRender: "fullBleed" }, templateConfig);
-    const wrapper = mount(
-      <Provider store={generateStore}>
-        <PhotoStory
-          story={story}
-          config={config}
-          storyElementsConfig={storyElementsConfig}
-          firstChild={child}
-          secondChild={child}
-          adComponent={configurableSlot}
-          widgetComp={configurableSlot}
-        />
-      </Provider>
-    );
-    expect(wrapper.find({ "data-test-id": "hero-image" }).prop("className")).toMatch(/grid-col-full/);
-  });
-  it("Should render photo story template with image with in container", () => {
-    const config = Object.assign({ imageRender: "container" }, templateConfig);
-    const wrapper = mount(
-      <Provider store={generateStore}>
-        <PhotoStory
-          story={story}
-          config={config}
-          storyElementsConfig={storyElementsConfig}
-          firstChild={child}
-          secondChild={child}
-          adComponent={configurableSlot}
-          widgetComp={configurableSlot}
-        />
-      </Provider>
-    );
-    expect(wrapper.find({ "data-test-id": "hero-image" }).prop("className")).toMatch(/grid-containe/);
-  });
-
-  it("Should render hero priority center align template", () => {
-    const config = { ...templateConfig, templateType: "hero-priority-center", imageRender: "container" };
-    const wrapper = mount(
-      <Provider store={generateStore}>
-        <PhotoStory
-          story={story}
-          config={config}
-          storyElementsConfig={storyElementsConfig}
-          firstChild={child}
-          secondChild={child}
-          adComponent={configurableSlot}
-          widgetComp={configurableSlot}
-        />
-      </Provider>
-    );
-    expect(wrapper.find({ "data-test-id": "photo-story-hero-priority-center-container" }).prop("className")).toMatch(
-      /hero-priority-center/
-    );
-  });
-
-  it("Should render hero priority left align template", () => {
-    const config = { ...templateConfig, templateType: "default", imageRender: "container" };
-    const wrapper = mount(
-      <Provider store={generateStore}>
-        <PhotoStory
-          story={story}
-          config={config}
-          storyElementsConfig={storyElementsConfig}
-          firstChild={child}
-          secondChild={child}
-          adComponent={configurableSlot}
-          widgetComp={configurableSlot}
-        />
-      </Provider>
-    );
-    expect(wrapper.find({ "data-test-id": "photo-story-default-container" }).prop("className")).toMatch(/default/);
-  });
-
-  it("Should render headline priority template", () => {
-    const config = { ...templateConfig, templateType: "headline-priority", imageRender: "container" };
-    const wrapper = mount(
-      <Provider store={generateStore}>
-        <PhotoStory
-          story={story}
-          config={config}
-          storyElementsConfig={storyElementsConfig}
-          firstChild={child}
-          secondChild={child}
-          adComponent={configurableSlot}
-          widgetComp={configurableSlot}
-        />
-      </Provider>
-    );
-    expect(wrapper.find({ "data-test-id": "photo-story-headline-priority-container" }).prop("className")).toMatch(
-      /headline-priority/
-    );
-  });
-});

package/src/components/Rows/StoryTemplates/PhotoStoryTemplates/photo.m.css

@@ -1,175 +0,0 @@
-@import "../../../../../assets/stylesheets/mixins.scss";
-
-.grid-col-full {
-  grid-column: 1/5;
-  @include tablet {
-    grid-column: grid-start / grid-end;
-  }
-}
-.grid-container {
-  grid-column: 1/5;
-  @include tablet {
-    grid-column: container-start / container-end;
-  }
-}
-
-.grid-col-2-10 {
-  grid-column: 1/5;
-  @include tablet {
-    grid-column: container-start / 9;
-    @include desktop {
-      grid-column: container-start / 10;
-    }
-  }
-}
-.grid-col-10-14 {
-  grid-column: 1/5;
-  @include tablet {
-    grid-column: 9 / container-end;
-    grid-row: 2 / auto;
-    @include desktop {
-      grid-column: 10 / container-end;
-    }
-  }
-}
-.grid-col-4-12 {
-  grid-column: 1/5;
-  @include tablet {
-    grid-column: 4 / 12;
-  }
-}
-.grid-col-2-9 {
-  grid-column: 1/5;
-  @include tablet {
-    grid-column: container-start / 9;
-  }
-}
-
-.grid-col-9-14 {
-  grid-column: 1/5;
-  @include tablet {
-    grid-column: 9 / 14;
-    grid-row: 2 / 6;
-  }
-}
-.story-details {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: var(--arrow-spacing-l);
-  @include tablet {
-    margin-bottom: var(--arrow-spacing-xl);
-  }
-}
-.side-space {
-  margin-top: var(--arrow-spacing-m);
-  @include tablet {
-    margin-top: var(--arrow-spacing-l);
-  }
-}
-:global(.gap-32) {
-  margin-top: var(--arrow-spacing-l);
-  @include tablet {
-    margin-top: var(--arrow-spacing-xl);
-  }
-}
-
-.header-details {
-  :global(.arr--sub-headline) {
-    font-size: var(--arrow-fs-s);
-    font-style: italic;
-    @include tablet {
-      font-size: var(--arrow-fs-m);
-    }
-  }
-  .space-12 {
-    margin-top: var(--arrow-spacing-m);
-    @include tablet {
-      margin-top: var(--arrow-spacing-xl);
-    }
-  }
-}
-
-.story-tags {
-  margin: var(--arrow-spacing-l) 0;
-}
-
-.sticky :global(.arr--share) {
-  grid-column: 4/5;
-  justify-self: flex-end;
-  @include tablet {
-    grid-column: 8/9;
-    @include desktop {
-      position: sticky;
-      position: -webkit-sticky;
-      grid-column: grid-start/container-start;
-      grid-row: 2/3;
-      align-self: flex-start;
-      margin-top: var(--arrow-spacing-xs);
-      top: 120px;
-    }
-  }
-}
-
-.sticky:global(.hero-priority-center) {
-  :global(.arr--share) {
-    @include tablet {
-      grid-column: 9 / grid-end;
-      @include desktop {
-        grid-column: 3/4;
-      }
-    }
-  }
-}
-
-.sticky .index-2 {
-  z-index: 2;
-  @include desktop {
-    z-index: unset;
-  }
-}
-
-.tablet-index-2 {
-  @include tablet {
-    z-index: 2;
-  }
-}
-
-.fullBleed {
-  margin: unset;
-}
-
-.fullBleed:global(.headline-priority) .side-space.index-2 {
-  @include mobile {
-    margin: var(--arrow-spacing-m) 0 0;
-  }
-}
-
-.fullBleed:global(.headline-priority) .grid-container,
-.fullBleed:global(.headline-priority) .grid-col-9-14 {
-  @include mobile {
-    margin: 0 var(--arrow-spacing-s);
-  }
-}
-
-.fullBleed:global(.headline-priority) .side-space {
-  @include mobile {
-    margin: var(--arrow-spacing-m) var(--arrow-spacing-s) 0;
-  }
-}
-
-.fullBleed .space-12 {
-  @include mobile {
-    margin: 0 var(--arrow-spacing-s) 0;
-  }
-}
-
-.space-12 .header-details {
-  @include mobile {
-    margin-top: var(--arrow-spacing-xl);
-  }
-}
-
-.space-32 > * {
-  margin-top: var(--arrow-spacing-l);
-}

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

@@ -1,123 +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 PhotoStory from "./index";
-
-const story = generateStory("photo-story");
-const collection = generateCollection({ stories: 4 });
-const collectionNameDefaultValue = "#3a9fdd";
-const collectionNameBorderColorLabel = "Aside Collection Name Border Color";
-
-const imageTypeOptions = {
-  "Full Bleed": "fullBleed",
-  "With In Container": "container"
-};
-
-const templates = {
-  "Hero Priority Left": "default",
-  "Hero Priority Center": "hero-priority-center",
-  "Headline Priority": "headline-priority"
-};
-
-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 storyElementsConfig = {
-  summary: {},
-  blurb: {},
-  blockquote: {},
-  quote: {},
-  "also-read": {},
-  "q-and-a": {},
-  question: {},
-  answer: {}
-};
-
-const label = "BG Color";
-const defaultvalue = "#ffffff";
-
-const authorTemplate = {
-  default: "default",
-  leftAligned: "leftAligned",
-  centerAligned: "centerAligned"
-};
-
-const shareType = {
-  "Vertical Share": "sticky",
-  "Horizontal Share": ""
-};
-
-const configurableSlot = () => {
-  return <AdPlaceholder height="250px" width="300px" />;
-};
-
-withStore("Rows/Story Templates/Photo Story Template", {
-  qt: {
-    config: {
-      "cdn-image": "thumbor-stg.assettype.com",
-      mountAt: "/sub-directory"
-    }
-  }
-}).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),
-    templateType: optionalSelect("Template Options", templates),
-    imageRender: optionalSelect("image Options", imageTypeOptions),
-    publishedDetails: {
-      enablePublishedTime: boolean("Show Published Time", true),
-      enableUpdatedTime: boolean("Show Updated Time", false),
-      showReadTime: boolean("Read time", true)
-    },
-    authorDetails: {
-      template: optionalSelect("temp", authorTemplate),
-      opts: {
-        showBio: boolean("bio", true),
-        showImage: boolean("image", true),
-        showName: boolean("Author Name", 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
-    }
-  };
-
-  return (
-    <div>
-      <PhotoStory
-        story={story}
-        config={templateConfig}
-        storyElementsConfig={storyElementsConfig}
-        adComponent={configurableSlot}
-        widgetComp={configurableSlot}
-        firstChild={<AdPlaceholder height="250px" width="300px" />}
-        secondChild={<AdPlaceholder height="250px" width="300px" />}
-      />
-    </div>
-  );
-});

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

@@ -1,49 +0,0 @@
-# Text Story Template
-
-Text story template is a basic component used to represent a text story.
-
-## Usage
-
-## Hero Priority Left Align text Story
-
-```jsx
-<TextStoryTemplate story={story} templateConfig={templateConfig} />
-```
-
-## Hero Priority Center Align Text Story
-
-```jsx
-<TextStoryTemplate story={story} templateConfig={templateConfig} />
-```
-
-## Headline Hero Priority Text Story
-
-```jsx
-<TextStoryTemplate story={story} templateConfig={templateConfig} />
-```
-
-## Hero Vertical Priority Text Story
-
-```jsx
-<TextStoryTemplate story={story} templateConfig={templateConfig} />
-```
-
-## Headline Priority Text Story
-
-```jsx
-<TextStoryTemplate story={story} templateConfig={templateConfig} />
-```
-
-## Hero Overlay Priority Text Story
-
-```jsx
-<TextStoryTemplate story={story} templateConfig={templateConfig} />
-```
-
-## Template with Children
-
-```jsx
-<TextStoryTemplate story={story} templateConfig={templateConfig}>
-  <Children />
-</TextStoryTemplate>
-```

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

@@ -1,74 +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 = ({
-  story = {},
-  config = {},
-  storyElementsConfig,
-  adComponent,
-  widgetComp,
-  firstChild,
-  secondChild
-}) => {
-  const {
-    theme = "",
-    templateType = "default",
-    imageRender = "fullBleed",
-    sort = "headline-first",
-    verticalShare = ""
-  } = 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 timezone = useSelector((state) => get(state, ["qt", "data", "timezone"], null));
-
-  const dataTestId = supportImageType[templateType]
-    ? `text-story-${templateType}-${kebabCase(supportImageType[templateType])}`
-    : `text-story-${templateType}`;
-  return (
-    <div
-      data-test-id={dataTestId}
-      className="arrow-component arr-story-grid arr--content-wrapper arr--text-story-template-wrapper"
-      styleName={`${templateType} ${verticalShare} ${supportImageType[templateType] || ""} ${sortOption}`}
-      style={{ backgroundColor: theme }}>
-      <StoryTemplate
-        story={story}
-        config={config}
-        storyElementsConfig={storyElementsConfig}
-        adComponent={adComponent}
-        widgetComp={widgetComp}
-        firstChild={firstChild}
-        secondChild={secondChild}
-        timezone={timezone}
-      />
-    </div>
-  );
-};
-
-TextStoryTemplate.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(TextStoryTemplate);

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

@@ -1,125 +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 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 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"
-};
-
-const shareType = {
-  "Vertical Share": "sticky",
-  "Horizontal Share": ""
-};
-
-withStore(
-  "Rows/Story Templates/Text 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("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
-      }
-    }
-  };
-  return (
-    <TextStoryTemplate
-      story={story}
-      config={templateConfig}
-      storyElementsConfig={storyElementsConfig}
-      adComponent={configurableSlot}
-      widgetComp={configurableSlot}
-      firstChild={<AdPlaceholder height="250px" width="300px" />}
-      secondChild={<AdPlaceholder height="250px" width="300px" />}
-    />
-  );
-});