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

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

@@ -1,291 +0,0 @@
-import { SocialShare } from "@quintype/components";
-import React from "react";
-import { useSelector } from "react-redux";
-import get from "lodash.get";
-import PropTypes from "prop-types";
-import { AuthorCard } from "../../../Atoms/AuthorCard";
-import { CaptionAttribution } from "../../../Atoms/CaptionAttribution";
-import { StoryHeadline } from "../../../Atoms/StoryHeadline";
-import { HeroImage } from "../../../Atoms/HeroImage";
-import { PublishDetails } from "../../../Atoms/PublishDetail";
-import { SectionTag } from "../../../Atoms/SectionTag";
-import { Subheadline } from "../../../Atoms/Subheadline";
-import { StateProvider } from "../../../SharedContext";
-import { SocialShareTemplate } from "../../../Molecules/SocialShareTemplate";
-import "./listicle-story.m.css";
-import { StoryElementCard, SlotAfterStory } from "../../../Molecules/StoryElementCard";
-import { StoryTags } from "../../../Atoms/StoryTags";
-import AsideCollection from "../../AsideCollection";
-
-const ListicleStoryTemplate = ({
-  story = {},
-  config = {},
-  storyElementsConfig,
-  adComponent,
-  widgetComp = () => {},
-  firstChild,
-  secondChild
-}) => {
-  const {
-    theme = "",
-    noOfVisibleCards = -1,
-    publishedDetails = {},
-    templateType = "",
-    authorDetails = {
-      template: "default"
-    },
-    asideCollection = {},
-    showSection,
-    sectionTagSettings,
-    premiumStoryIconConfig = {}
-  } = config;
-  const visibledCards = noOfVisibleCards < 0 ? story.cards : story.cards.slice(0, noOfVisibleCards);
-  const { "bullet-type": storyBulletType = "" } = story;
-  const storyId = get(story, ["id"], "");
-  const isNumberedBullet = storyBulletType !== "bullets";
-  const timezone = useSelector((state) => get(state, ["qt", "data", "timezone"], null));
-
-  // Content Blocks
-  const HeroImageBlock = (settings) => {
-    const { widths = [320, 480, 768, 1024, 1140], aspectRatio = [[16, 9]] } = settings;
-    return (
-      <HeroImage
-        defaultWidth={320}
-        story={story}
-        widths={widths}
-        aspectRatio={aspectRatio}
-        defaultFallback={false}
-        isStoryPageImage
-      />
-    );
-  };
-  const CaptionAttributionBlock = () => (
-    <div styleName="caption-attribution-block">
-      <CaptionAttribution story={story} />
-    </div>
-  );
-  const HeadlineBlock = () => (
-    <div styleName="headline-block">
-      <div styleName="section-tag">{showSection && <SectionTag story={story} {...sectionTagSettings} />}</div>
-      <StoryHeadline story={story} premiumStoryIconConfig={premiumStoryIconConfig} />
-      <Subheadline story={story} showFullContent />
-    </div>
-  );
-
-  const AuthourBlock = () => (
-    <>
-      <AuthorCard story={story} {...authorDetails} />
-      <div styleName="timestamp-social-share">
-        <PublishDetails story={story} opts={publishedDetails} template="story" timezone={timezone} />
-        <div id={`story-share-${storyId}`} className="content-style">
-          <SocialShare
-            template={SocialShareTemplate}
-            theme={theme}
-            fullUrl={encodeURI(story.url)}
-            title={story.headline}
-            shareIconId={`share-icon-story-share-${storyId}`}
-          />
-        </div>
-      </div>
-    </>
-  );
-
-  const BodyBlock = () => (
-    <div styleName={`body-block ${isNumberedBullet ? "numbered-bullet-style" : ""}`}>
-      {visibledCards.map((card, index) => {
-        return (
-          <React.Fragment key={card.id}>
-            {!isNumberedBullet ? (
-              <div styleName="bullet-style-dash" />
-            ) : (
-              <div styleName="bullet-style-number">{index + 1}.</div>
-            )}
-            <StoryElementCard
-              story={story}
-              card={card}
-              key={card.id}
-              config={storyElementsConfig}
-              adComponent={adComponent}
-              widgetComp={widgetComp}
-            />
-          </React.Fragment>
-        );
-      })}
-      {firstChild}
-      <div styleName="story-tags">
-        <StoryTags tags={story.tags} />
-        <SlotAfterStory
-          id={story.id}
-          element={story.customSlotAfterStory}
-          AdComponent={adComponent}
-          WidgetComp={widgetComp}
-        />
-      </div>
-      {secondChild}
-    </div>
-  );
-  const SideColumnBlock = () =>
-    asideCollection && (
-      <AsideCollection
-        {...asideCollection}
-        adComponent={adComponent}
-        widgetComp={widgetComp}
-        sticky={true}
-        storyId={storyId}
-        opts={publishedDetails}
-      />
-    );
-
-  // Templates
-  const DefaultTemplate = () => (
-    <>
-      <HeroImageBlock aspectRatio={[[16, 9], [16, 6]]} />
-      <div styleName="grid-container">
-        <div styleName="full-grid">
-          <CaptionAttributionBlock />
-        </div>
-        <div data-type-column="left" styleName="left-column">
-          <HeadlineBlock />
-          <AuthourBlock />
-          <BodyBlock />
-        </div>
-        <div data-type-column="right" styleName="right-column">
-          <SideColumnBlock />
-        </div>
-      </div>
-    </>
-  );
-  const HeroPriority = () => (
-    <div styleName="hero-priority-template">
-      <div styleName="grid-container">
-        <div styleName="full-grid">
-          <HeroImageBlock />
-        </div>
-        <div styleName="center-column">
-          <CaptionAttributionBlock />
-          <HeadlineBlock />
-          <AuthourBlock />
-          <BodyBlock />
-        </div>
-      </div>
-    </div>
-  );
-  const HeadlinePriority = () => (
-    <div styleName="headline-priority-template">
-      <div styleName="grid-container">
-        <div styleName="headline-priority-grid">
-          <HeadlineBlock />
-        </div>
-        <div styleName="left-column">
-          <HeroImageBlock />
-          <CaptionAttributionBlock />
-          <AuthourBlock />
-          <BodyBlock />
-        </div>
-        <div styleName="right-column">
-          <SideColumnBlock />
-        </div>
-      </div>
-    </div>
-  );
-  const HeadlineHeroPriority = () => (
-    <div styleName="headline-hero-priority-template">
-      <div styleName="grid-container">
-        <div styleName="center-column">
-          <HeadlineBlock />
-        </div>
-        <div styleName="full-grid">
-          <HeroImageBlock />
-        </div>
-        <div styleName="center-column">
-          <CaptionAttributionBlock />
-          <AuthourBlock />
-          <BodyBlock />
-        </div>
-      </div>
-    </div>
-  );
-  const HeroOverlay = () => (
-    <div styleName="hero-overlay-template">
-      <div styleName="grid-container">
-        <div styleName="full-grid hero-faded-relative">
-          <div styleName="hero-faded-wrapper">
-            <div styleName="headline-content-holder">
-              <HeadlineBlock />
-            </div>
-          </div>
-          <HeroImageBlock aspectRatio={[[2, 3], [16, 9]]} />
-        </div>
-      </div>
-      <div styleName="grid-container">
-        <div styleName="center-column">
-          <CaptionAttributionBlock />
-          <AuthourBlock />
-          <BodyBlock />
-        </div>
-      </div>
-    </div>
-  );
-  const HeadlineSideway = () => (
-    <div styleName="headline-sideway-template">
-      <div styleName="sideway-grid">
-        <div styleName="sideway-headline">
-          <HeadlineBlock />
-        </div>
-        <div styleName="sideway-hero">
-          <HeroImageBlock aspectRatio={[[16, 9], [4, 3]]} />
-          <CaptionAttributionBlock />
-        </div>
-      </div>
-      <div styleName="grid-container">
-        <div styleName="center-column">
-          <AuthourBlock />
-          <BodyBlock />
-        </div>
-      </div>
-    </div>
-  );
-
-  const renderTemplate = () => {
-    switch (templateType) {
-      case "hero-priority":
-        return <HeroPriority />;
-      case "headline-priority":
-        return <HeadlinePriority />;
-      case "headline-hero-priority":
-        return <HeadlineHeroPriority />;
-      case "hero-overlay":
-        return <HeroOverlay />;
-      case "headline-sideway":
-        return <HeadlineSideway />;
-      default:
-        return <DefaultTemplate />;
-    }
-  };
-  const dataTestId = templateType ? `listicle-story-${templateType}` : "listicle-story";
-  return (
-    <div
-      data-test-id={dataTestId}
-      className="arrow-component arr--content-wrapper arr--listicle-story-template-wrapper"
-      style={{ backgroundColor: theme }}>
-      {renderTemplate()}
-    </div>
-  );
-};
-
-ListicleStoryTemplate.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,
-  premiumStoryIconConfig: PropTypes.object
-};
-
-export default StateProvider(ListicleStoryTemplate);

package/src/components/Rows/StoryTemplates/ListicleStoryTemplates/listicle-story.m.css

@@ -1,249 +0,0 @@
-@import "../../../../../assets/stylesheets/mixins.scss";
-:root {
-  --grid-container-width: 1140px;
-  --fluid-grid-container-width: 1440px;
-}
-
-/*  Generinc style */
-.headline-block :global(.arr--story-headline) {
-  font-size: var(--arrow-fs-28);
-  line-height: normal;
-  @include tablet {
-    font-size: var(--arrow-fs-big);
-    line-height: var(--arrow-lh-2);
-  }
-}
-
-.headline-block :global(.arr--sub-headline) {
-  font-size: var(--arrow-fs-s);
-  font-style: italic;
-  margin: var(--arrow-spacing-xs) 0 var(--arrow-spacing-l);
-  @include tablet {
-    font-size: var(--arrow-fs-m);
-    margin-bottom: var(--arrow-spacing-xl);
-  }
-}
-
-.section-tag {
-  margin-bottom: var(--arrow-spacing-s);
-}
-.caption-attribution-block {
-  margin-bottom: var(--arrow-spacing-l);
-  @include tablet {
-    margin-bottom: var(--arrow-spacing-xl);
-  }
-}
-
-.body-block :global(.arr--element-container) {
-  margin-top: var(--arrow-spacing-s);
-  @include tablet {
-    margin-top: var(--arrow-spacing-m);
-  }
-}
-
-.body-block :global(.story-element-title) {
-  line-height: var(--arrow-lh-2);
-}
-
-.timestamp-social-share {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin: var(--arrow-spacing-xxs) 0 var(--arrow-spacing-l);
-}
-
-.bullet-style-number {
-  font-size: var(--arrow-fs-l);
-  font-weight: var(--arrow-fw-bold);
-  color: var(--arrow-c-brand1);
-  @include tablet {
-    font-size: var(--arrow-fs-huge);
-    font-weight: var(--arrow-fw-semi-bold);
-  }
-}
-
-.bullet-style-dash {
-  content: "";
-  width: 24px;
-  height: 8px;
-  background-color: var(--arrow-c-brand1);
-  @include tablet {
-    height: 12px;
-  }
-}
-
-.story-tags > * {
-  margin: var(--arrow-spacing-l) 0;
-}
-
-/* Layout */
-.grid-container {
-  max-width: var(--grid-container-width);
-  padding: 0 var(--arrow-spacing-s);
-  margin: 0 auto;
-  @include tablet {
-    display: grid;
-    grid-column-gap: 24px;
-    grid-template-columns: repeat(12, 1fr);
-    padding: 0 var(--arrow-spacing-l);
-
-    .full-grid {
-      grid-column: 1 / 13;
-      @include desktop {
-        margin: 0 -24px;
-      }
-    }
-  }
-}
-
-.left-column {
-  @include tablet {
-    grid-column: 1 / 8;
-  }
-
-  @include desktop {
-    grid-column: 1 / 9;
-  }
-}
-
-.right-column {
-  @include tablet {
-    grid-column: 8 / 13;
-  }
-
-  @include desktop {
-    grid-column: 9 / 13;
-  }
-}
-
-.right-column :global(.aside-collection-ad-slot:first-child) {
-  margin-top: 0;
-}
-
-.center-column {
-  @include tablet {
-    grid-column: 3 / 11;
-  }
-}
-
-/* Template specific */
-.hero-faded-relative {
-  position: relative;
-}
-.hero-faded-wrapper {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  z-index: var(--z-index-1);
-  background: rgb(0 0 0 / 0.5);
-
-  display: flex;
-  align-items: center;
-
-  @include tablet {
-    display: grid;
-    grid-template-columns: repeat(12, 1fr);
-  }
-}
-
-.hero-faded-wrapper .headline-content-holder {
-  padding: 0 24px;
-
-  @include tablet {
-    grid-column: 2 / 12;
-  }
-  @include desktop {
-    grid-column: 3 / 11;
-  }
-}
-
-.numbered-bullet-style :global(.arr--story-page-card-wrapper) > :last-child {
-  margin-bottom: var(--arrow-spacing-xl);
-}
-
-.hero-faded-wrapper .headline-content-holder :global(.arr--story-headline),
-.hero-faded-wrapper .headline-content-holder :global(.arr--sub-headline),
-.hero-faded-wrapper .headline-content-holder :global(.arr--section-name .section-tag) {
-  color: var(--arrow-c-light);
-}
-
-.sideway-grid {
-  padding: 0 var(--arrow-spacing-s);
-  @include tablet {
-    display: grid;
-    max-width: var(--fluid-grid-container-width);
-    margin: 0 auto var(--arrow-spacing-l);
-    padding: 0 0 0 24px;
-    grid-template-columns: repeat(12, 1fr);
-    grid-column-gap: 24px;
-  }
-
-  @include desktop {
-    padding: 0;
-  }
-}
-
-.sideway-headline {
-  @include tablet {
-    grid-column: 1 / 6;
-    display: flex;
-    align-items: center;
-  }
-  @include desktop {
-    grid-column: 2 / 7;
-  }
-}
-
-.sideway-hero {
-  @include tablet {
-    grid-column: 6 / 13;
-
-    .caption-attribution-block {
-      margin-bottom: 0;
-    }
-  }
-  @include desktop {
-    grid-column: 7 / 13;
-  }
-}
-
-.headline-priority-grid {
-  @include tablet {
-    grid-column: 1 / 13;
-  }
-
-  @include desktop {
-    grid-column: 1 / 9;
-  }
-}
-
-.hero-priority-template,
-.headline-priority-template,
-.headline-hero-priority-template,
-.hero-overlay-template,
-.headline-sideway-template {
-  margin-top: var(--arrow-spacing-s);
-  @include tablet {
-    margin-top: var(--arrow-spacing-l);
-  }
-  @include desktop {
-    margin-top: var(--arrow-spacing-xl);
-  }
-}
-
-.numbered-bullet-style :global(.arr--story-page-card-wrapper) > * {
-  margin-top: var(--arrow-spacing-xs);
-  margin-bottom: var(--arrow-spacing-s);
-  @include tablet {
-    margin-bottom: var(--arrow-spacing-20);
-    @include desktop {
-      margin-top: var(--arrow-spacing-xxs);
-    }
-  }
-}
-
-.numbered-bullet-style :global(.story-element-title) h2 {
-  padding: 0;
-}

package/src/components/Rows/StoryTemplates/ListicleStoryTemplates/listicle-story.test.js

@@ -1,47 +0,0 @@
-import * as React from "react";
-import { shallow } from "enzyme";
-import { generateStory } from "../../../Fixture";
-import ListicleStoryTemplate from "./index";
-import { mockIntersectionObserver } from "../../../../utils/testing-utils";
-
-const story = generateStory("listicle-story");
-
-const storyElementsConfig = {
-  summary: {},
-  blurb: {},
-  blockquote: {},
-  quote: {},
-  "also-read": {},
-  "q-and-a": {},
-  question: {},
-  answer: {},
-  references: {}
-};
-
-beforeEach(() => {
-  mockIntersectionObserver();
-});
-
-describe("Listicle Story Templates", () => {
-  it("Should render listicle story template with section tag", () => {
-    const templateConfig = {
-      templateType: "default",
-      showSection: true
-    };
-    const wrapper = shallow(
-      <ListicleStoryTemplate story={story} config={templateConfig} storyElementsConfig={storyElementsConfig} />
-    );
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("Should render listicle story template without section tag", () => {
-    const templateConfig = {
-      templateType: "default",
-      showSection: false
-    };
-    const wrapper = shallow(
-      <ListicleStoryTemplate story={story} config={templateConfig} storyElementsConfig={storyElementsConfig} />
-    );
-    expect(wrapper).toMatchSnapshot();
-  });
-});

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

@@ -1,116 +0,0 @@
-import { boolean, color, text } from "@storybook/addon-knobs";
-import React from "react";
-import ListicleStoryTemplate from ".";
-import { optionalSelect, withStore } from "../../../../../storybook";
-import { AdPlaceholder } from "../../../Atoms/AdPlaceholder";
-import { generateCollection, generateStory } from "../../../Fixture";
-import { slotData } from "../../../Fixture/slot-config";
-import Readme from "./README.md";
-
-const story = generateStory("listicle-story");
-const collection = generateCollection({ stories: 4 });
-const label = "BG Color";
-const defaultvalue = "#ffffff";
-
-const configurableSlot = () => {
-  return <AdPlaceholder height="250px" width="300px" />;
-};
-
-const storyTemplates = {
-  Default: "default",
-  "Hero Priority": "hero-priority",
-  "Headline Priority": "headline-priority",
-  "Headline Hero Priority": "headline-hero-priority",
-  "Hero Overlay": "hero-overlay",
-  "Headline Sideway": "headline-sideway"
-};
-
-const sectionTagTemplates = {
-  Default: "",
-  "Border Bottom Small": "borderBottomSml",
-  Solid: "solid",
-  "Border Left": "borderLeft"
-};
-
-const authorTemplates = {
-  default: "default",
-  leftAligned: "leftAligned",
-  centerAligned: "centerAligned"
-};
-
-withStore(
-  "Rows/Story Templates/Listicle Story Template",
-  {
-    qt: {
-      config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-        mountAt: "/sub-directory"
-      }
-    }
-  },
-  Readme
-).add("Default", () => {
-  const templateConfig = {
-    templateType: optionalSelect("Template Options", storyTemplates),
-    theme: color(label, defaultvalue),
-    noOfVisibleCards: -1,
-    showSection: boolean("Show Section Tag", true),
-    publishedDetails: {
-      showReadTime: boolean("Read time", true),
-      enablePublishedTime: boolean("Show Published Time", true),
-      enableUpdatedTime: boolean("Show Updated Time", false)
-    },
-    authorDetails: {
-      template: optionalSelect("Author Templates", authorTemplates) || "default",
-      opts: {
-        showBio: boolean("Author Bio", false),
-        showImage: boolean("Author Image", true),
-        showName: boolean("Author Name", true)
-      }
-    },
-    sectionTagSettings: {
-      template: optionalSelect("Section Template", sectionTagTemplates) || "borderBottomSml",
-      borderColor: color("Section Tag Border Color", "#ff214b")
-    },
-    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(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 (
-    <ListicleStoryTemplate
-      story={story}
-      config={templateConfig}
-      storyElementsConfig={storyElementsConfig}
-      firstChild={<AdPlaceholder height="250px" width="300px" />}
-      secondChild={<AdPlaceholder height="250px" width="300px" />}
-      adComponent={configurableSlot}
-      widgetComp={configurableSlot}
-    />
-  );
-});