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

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

@@ -1,274 +0,0 @@
-import React from "react";
-import get from "lodash.get";
-import PropTypes from "prop-types";
-import { SocialShareTemplate } from "../../../Molecules/SocialShareTemplate";
-import { SocialShare } from "@quintype/components";
-import { SectionTag } from "../../../Atoms/SectionTag";
-import { StoryHeadline } from "../../../Atoms/StoryHeadline";
-import { Subheadline } from "../../../Atoms/Subheadline";
-import AsideCollection from "../../AsideCollection";
-import { AuthorCard } from "../../../Atoms/AuthorCard";
-import { CaptionAttribution } from "../../../Atoms/CaptionAttribution";
-import { HeroImage } from "../../../Atoms/HeroImage";
-import { PublishDetails } from "../../../Atoms/PublishDetail";
-import { StoryTags } from "../../../Atoms/StoryTags";
-import { StoryElementCard, SlotAfterStory } from "../../../Molecules/StoryElementCard";
-import "./text-story.m.css";
-
-export const StoryTemplate = ({
-  story = {},
-  config = {},
-  storyElementsConfig,
-  widgetComp,
-  adComponent,
-  firstChild,
-  secondChild,
-  timezone
-}) => {
-  const {
-    theme = "",
-    asideCollection = {},
-    templateType = "default",
-    noOfVisibleCards = 0,
-    publishedDetails = {},
-    authorDetails = {},
-    verticalShare = "",
-    shareIconType = "plain-color-svg",
-    premiumStoryIconConfig = {}
-  } = config;
-
-  const visibledCards = noOfVisibleCards < 0 ? story.cards : story.cards.slice(0, noOfVisibleCards);
-  const storyId = get(story, ["id"], "");
-  const HeaderCard = () => {
-    return (
-      <div styleName="header-details">
-        <SectionTag story={story} />
-        <StoryHeadline story={story} premiumStoryIconConfig={premiumStoryIconConfig} />
-        <Subheadline story={story} showFullContent />
-      </div>
-    );
-  };
-
-  const AsideCollectionCard = () => {
-    return (
-      asideCollection && (
-        <div styleName="aside-collection tablet-index-2">
-          <AsideCollection
-            horizontal={true}
-            {...asideCollection}
-            widgetComp={widgetComp}
-            adComponent={adComponent}
-            storyId={storyId}
-            opts={publishedDetails}
-          />
-        </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 StoryData = () => {
-    return (
-      <div styleName="gap-16">
-        {authorDetails && <AuthorCard story={story} template={authorDetails.template} opts={authorDetails.opts} />}
-        <div styleName="timestamp-social-share">
-          <PublishDetails story={story} opts={publishedDetails} template="story" timezone={timezone} />
-          {!verticalShare && <SocialShareComponent />}
-        </div>
-        {visibledCards.map((card) => {
-          return (
-            <StoryElementCard
-              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="text-story-side-column">
-          <AsideCollection
-            {...asideCollection}
-            widgetComp={widgetComp}
-            adComponent={adComponent}
-            sticky={true}
-            storyId={storyId}
-            opts={publishedDetails}
-          />
-        </div>
-      )
-    );
-  };
-
-  const heroPriorityCenterTemplate = () => {
-    return (
-      <>
-        <div styleName="hero-image index-2" data-test-id="hero-priority-center-image">
-          <HeroImage story={story} FullBleed={false} aspectRatio={[[16, 9]]} defaultFallback={false} isStoryPageImage />
-        </div>
-        <div styleName="story-content-inner-wrapper">
-          <CaptionAttribution story={story} config={config} />
-          <HeaderCard />
-          <StoryData />
-        </div>
-        {verticalShare && <SocialShareComponent />}
-        <AsideCollectionCard />
-      </>
-    );
-  };
-
-  const headlineHeroPriorityTemplate = () => {
-    return (
-      <>
-        <div styleName="story-content-inner-wrapper">
-          <HeaderCard />
-        </div>
-        <div styleName="hero-image index-2" data-test-id="headline-hero-priority-image">
-          <HeroImage story={story} FullBleed={false} aspectRatio={[[16, 9]]} defaultFallback={false} isStoryPageImage />
-        </div>
-        <div styleName="story-content-inner-wrapper">
-          <CaptionAttribution story={story} config={config} />
-          <StoryData />
-        </div>
-        {verticalShare && <SocialShareComponent />}
-        <AsideCollectionCard />
-      </>
-    );
-  };
-
-  const heroVerticalTemplate = () => {
-    return (
-      <>
-        <HeaderCard />
-        <div styleName="hero-image index-2" data-test-id="hero-vertical-image">
-          <HeroImage story={story} FullBleed={false} aspectRatio={[[3, 4]]} defaultFallback={false} isStoryPageImage />
-        </div>
-        <CaptionAttribution story={story} config={config} />
-        <div styleName="story-content-inner-wrapper">
-          <StoryData />
-        </div>
-        {verticalShare && <SocialShareComponent />}
-        <AsideCollectionCard />
-      </>
-    );
-  };
-
-  const heroPriorityLeftTemplate = () => {
-    return (
-      <>
-        <div styleName="hero-image index-2" data-test-id="hero-priority-left-image">
-          <HeroImage story={story} FullBleed={false} aspectRatio={[[16, 9]]} defaultFallback={false} isStoryPageImage />
-        </div>
-        <div styleName="story-content-inner-wrapper">
-          <CaptionAttribution story={story} config={config} />
-          <HeaderCard />
-          <StoryData />
-        </div>
-        {verticalShare && <SocialShareComponent />}
-        <SideColumn />
-      </>
-    );
-  };
-
-  const headlinePriorityTemplate = () => {
-    return (
-      <>
-        <HeaderCard />
-        <div styleName="story-content-inner-wrapper hero-image index-2" data-test-id="headline-priority-hero-image">
-          <HeroImage story={story} FullBleed={false} aspectRatio={[[16, 9]]} defaultFallback={false} isStoryPageImage />
-        </div>
-        <div styleName="story-content-inner-wrapper">
-          <CaptionAttribution story={story} config={config} />
-          <StoryData />
-        </div>
-        {verticalShare && <SocialShareComponent />}
-        <SideColumn />
-      </>
-    );
-  };
-
-  const headlineOverlayTemplate = () => {
-    return (
-      <>
-        <div styleName="hero-image index-2" data-test-id="headline-overlay-hero-image">
-          <HeroImage story={story} FullBleed={false} aspectRatio={[[3, 4], [16, 9]]} isStoryPageImage />
-        </div>
-        <HeaderCard />
-        <div styleName="story-content-inner-wrapper">
-          <CaptionAttribution story={story} config={config} />
-          <StoryData />
-        </div>
-        {verticalShare && <SocialShareComponent />}
-        <AsideCollectionCard />
-      </>
-    );
-  };
-
-  const getStoryTemplate = (templateType) => {
-    switch (templateType) {
-      case "hero-priority-center":
-        return heroPriorityCenterTemplate();
-      case "default":
-        return heroPriorityLeftTemplate();
-      case "headline-hero-priority":
-        return headlineHeroPriorityTemplate();
-      case "hero-vertical-priority":
-        return heroVerticalTemplate();
-      case "headline-priority":
-        return headlinePriorityTemplate();
-      case "headline-overlay-priority":
-        return headlineOverlayTemplate();
-    }
-  };
-
-  return <>{getStoryTemplate(templateType)}</>;
-};
-
-StoryTemplate.propTypes = {
-  story: PropTypes.object,
-  config: PropTypes.shape({
-    templateType: PropTypes.string,
-    authorDetails: PropTypes.object,
-    asideCollection: PropTypes.object
-  }),
-  firstChild: PropTypes.node,
-  secondChild: PropTypes.node,
-  timezone: PropTypes.string,
-  storyElementsConfig: PropTypes.object,
-  widgetComp: PropTypes.func,
-  adComponent: PropTypes.func
-};

package/src/components/Rows/StoryTemplates/TextStoryTemplates/text-story.m.css

@@ -1,449 +0,0 @@
-@import "../../../../../assets/stylesheets/mixins.scss";
-
-.header-details {
-  margin: var(--arrow-spacing-m) 0 var(--arrow-spacing-xs) 0;
-  @include tablet {
-    margin: var(--arrow-fs-huge) 0;
-  }
-}
-
-.header-details :global(.arr--sub-headline) {
-  font-size: var(--arrow-fs-s);
-  font-style: italic;
-  @include tablet {
-    font-size: var(--arrow-fs-m);
-  }
-}
-
-.timestamp-social-share {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: var(--arrow-spacing-s);
-  @include tablet {
-    margin-top: 0;
-  }
-}
-.story-tags > * {
-  margin: var(--arrow-spacing-m) 0;
-  @include tablet {
-    margin: var(--arrow-spacing-l) 0;
-  }
-}
-
-.hero-image :global(.arr--hero-image) {
-  padding: 0;
-}
-
-.dark {
-  color: var(--arrow-c-mono4);
-}
-
-.light {
-  color: var(--arrow-c-invert-mono4);
-}
-
-.hero-vertical-priority,
-.headline-hero-priority,
-.hero-priority-center,
-.headline-overlay-priority {
-  .story-content-inner-wrapper {
-    grid-column: 1/5;
-    @include tablet {
-      grid-column: 4/ 12;
-    }
-  }
-  .aside-collection {
-    grid-column: 1/5;
-    @include tablet {
-      grid-column: container-start / container-end;
-    }
-  }
-}
-
-.default :global(.section-tag) {
-  margin-bottom: var(--arrow-spacing-xs);
-}
-
-.default .story-details,
-.default .aside-collection {
-  margin: 0 var(--arrow-spacing-s);
-  @include tablet {
-    margin: unset;
-  }
-}
-
-.sticky :global(.arr--share) {
-  grid-column: 4/5;
-  justify-self: flex-end;
-  @include tablet {
-    /*  grid column value is to make the vertical share sticky */
-    grid-column: 9 / grid-end;
-    @include desktop {
-      position: sticky;
-      position: -webkit-sticky;
-      top: 120px;
-      grid-column: 3/ 4;
-      grid-row: 2/3;
-      align-self: flex-start;
-      margin-top: var(--arrow-spacing-xs);
-    }
-  }
-}
-
-.default .hero-image {
-  @include tablet {
-    grid-column: gutter-1-start/ gutter-2-end;
-  }
-}
-
-.headline-overlay-priority > .hero-image {
-  background-color: var(--arrow-c-dark);
-  overflow: hidden;
-  grid-row: 1 / 2;
-  grid-column: 1/5;
-  @include tablet {
-    grid-column: 2 / 14;
-  }
-}
-
-.headline-overlay-priority .header-details {
-  align-self: center;
-  grid-row: 1/2;
-  grid-column: 1/5;
-  padding: 0 var(--arrow-fs-l);
-  z-index: 2;
-  @include tablet {
-    grid-column: 3 / 13;
-    @include desktop {
-      grid-column: 4 / 12;
-    }
-  }
-  :global(.section-tag) {
-    color: var(--arrow-c-invert-mono4);
-  }
-  :global(.arr--sub-headline),
-  :global(.arr--story-headline) {
-    color: var(--arrow-c-invert-mono1);
-  }
-}
-
-.headline-hero-priority.sticky {
-  :global(.arr--share) {
-    @include desktop {
-      grid-row: 3/4;
-    }
-  }
-}
-
-.default.sticky,
-.headline-priority.sticky {
-  :global(.arr--share) {
-    @include desktop {
-      grid-column: grid-start / container-start;
-      grid-row: 2/3;
-    }
-  }
-}
-
-.hero-vertical-priority.container :global(.section-tag) {
-  padding: var(--arrow-spacing-xxs) 0 var(--arrow-spacing-xs);
-  @include tablet {
-    padding: unset;
-  }
-}
-
-.hero-vertical-priority.container :global(.arr--caption-attribution) {
-  margin: 0 0 var(--arrow-spacing-xs);
-}
-
-.hero-vertical-priority.fullBleed :global(.section-tag) {
-  padding-bottom: var(--arrow-spacing-xs);
-  @include tablet {
-    padding-bottom: unset;
-  }
-}
-
-.fullBleed.hero-vertical-priority :global(.arr--caption-attribution) {
-  @include mobile {
-    margin: var(--arrow-spacing-xs) var(--arrow-spacing-s);
-  }
-}
-
-.hero-vertical-priority.headline-first.sticky :global(.arr--share) {
-  @include desktop {
-    grid-row: 3/4;
-  }
-}
-
-.text-story-side-column {
-  grid-column: 1/5;
-  @include tablet {
-    grid-column: 9 / 14;
-    grid-row: 2/3;
-    @include desktop {
-      grid-column: 10 / 14;
-    }
-  }
-}
-
-.headline-priority {
-  .header-details {
-    grid-column: 1/5;
-    @include tablet {
-      grid-column: 2 / 14;
-      @include desktop {
-        grid-column: 2 / 10;
-      }
-    }
-  }
-  .story-content-inner-wrapper {
-    grid-column: 1/5;
-    @include tablet {
-      grid-column: 2 / 9;
-      @include desktop {
-        grid-column: 2 / 10;
-      }
-    }
-  }
-  .text-story-side-column {
-    @include tablet {
-      grid-row: 2/6;
-    }
-  }
-}
-
-.default.fullBleed .hero-image,
-.headline-hero-priority.fullBleed .hero-image,
-.hero-priority-center.fullBleed .hero-image {
-  grid-column: 1/5;
-  @include tablet {
-    grid-column: grid-start/ grid-end;
-  }
-}
-
-.default .story-content-inner-wrapper {
-  grid-column: 1/5;
-  @include tablet {
-    grid-column: 2 / 9;
-    @include desktop-lg {
-      grid-column: 2 / 10;
-    }
-  }
-}
-
-.default .text-story-side-column {
-  grid-column: 1/5;
-  @include tablet {
-    grid-column: 9 / 14;
-    @include desktop-lg {
-      grid-column: 10 / 14;
-    }
-  }
-}
-
-.fullBleed .story-content-inner-wrapper,
-.fullBleed.hero-vertical-priority .aside-collection,
-.fullBleed.headline-hero-priority .aside-collection .fullBleed.hero-priority-center .aside-collection,
-.fullBleed .text-story-side-column {
-  @include mobile {
-    margin: 0 var(--arrow-spacing-s);
-  }
-}
-
-.fullBleed.hero-vertical-priority .header-details {
-  margin: var(--arrow-spacing-m) var(--arrow-spacing-s) var(--arrow-spacing-xs);
-  @include tablet {
-    margin: var(--arrow-fs-huge) 0;
-  }
-}
-
-.default.container {
-  .hero-image :global(.arr--hero-image) {
-    margin-top: var(--arrow-spacing-s);
-    @include tablet {
-      grid-column: 2 / 14;
-      margin-top: unset;
-    }
-  }
-}
-
-.hero-vertical-priority.image-first .header-details {
-  padding-bottom: 20px;
-  @include tablet {
-    padding-bottom: unset;
-  }
-}
-
-.hero-vertical-priority.image-first .image-wrapper {
-  grid-row: 1/2;
-  @include tablet {
-    grid-row: unset;
-    grid-column: 8 / 14;
-    margin-bottom: var(--arrow-spacing-l);
-    @include desktop-lg {
-      grid-column: 8 / 13;
-    }
-  }
-}
-
-.hero-priority-center.container .hero-image,
-.headline-hero-priority.container .hero-image,
-.default.container .hero-image {
-  grid-column: 1/5;
-  @include tablet {
-    grid-column: 2 / 14;
-    margin-top: var(--arrow-spacing-xs);
-    @include desktop-lg {
-      margin-top: var(--arrow-spacing-m);
-    }
-  }
-}
-
-.hero-vertical-priority.fullBleed.headline-first .hero-image {
-  grid-column: 1/5;
-  @include tablet {
-    grid-column: 7 / grid-end;
-    @include desktop {
-      grid-column: 8 / grid-end;
-    }
-  }
-}
-.hero-vertical-priority.fullBleed.headline-first :global(.arr--caption-attribution) {
-  grid-column: 1/5;
-  @include tablet {
-    grid-column: 7 / grid-end;
-    @include desktop {
-      grid-column: 8 / grid-end;
-      grid-row: 2/3;
-    }
-  }
-}
-
-.hero-vertical-priority.fullBleed.headline-first .header-details {
-  grid-column: 1/5;
-  @include tablet {
-    grid-column: 2 / 7;
-    align-self: center;
-    @include desktop {
-      grid-column: 2 / 8;
-    }
-  }
-}
-
-.hero-vertical-priority.container.headline-first .header-details {
-  grid-column: 1/5;
-  @include tablet {
-    align-self: center;
-    grid-column: 2 / 8;
-    @include desktop {
-      grid-column: 3 / 8;
-    }
-  }
-}
-
-.hero-vertical-priority.container.headline-first .hero-image,
-.hero-vertical-priority.container.headline-first :global(.arr--caption-attribution) {
-  grid-column: 1/5;
-  @include tablet {
-    grid-column: 8 / 14;
-    @include desktop {
-      grid-column: 8 / 13;
-    }
-  }
-}
-
-.hero-vertical-priority.fullBleed.image-first .hero-image {
-  grid-column: 1/5;
-  @include tablet {
-    grid-row: 1 / 2;
-    grid-column: grid-start / 9;
-    @include desktop {
-      grid-column: grid-start / 8;
-    }
-  }
-}
-
-.hero-vertical-priority.fullBleed.image-first :global(.arr--caption-attribution) {
-  grid-column: 1/5;
-  @include tablet {
-    grid-row: 1 / 2;
-    grid-column: grid-start / 9;
-    @include desktop {
-      grid-column: grid-start / 8;
-    }
-  }
-}
-
-.hero-vertical-priority.fullBleed.image-first .header-details {
-  grid-column: 1/5;
-  @include tablet {
-    align-self: center;
-    grid-column: 9 / 14;
-    @include desktop {
-      grid-column: 8 / 14;
-    }
-  }
-}
-
-.hero-vertical-priority.container.image-first .header-details {
-  grid-column: 1/5;
-  @include tablet {
-    align-self: center;
-    grid-column: 8 / 14;
-    @include desktop {
-      grid-column: 8 / 13;
-    }
-  }
-}
-
-.hero-vertical-priority.container.image-first .hero-image,
-.hero-vertical-priority.container.image-first :global(.arr--caption-attribution) {
-  grid-column: 1/5;
-  @include tablet {
-    grid-column: 2 / 8;
-    grid-row: 1 / 2;
-    @include desktop {
-      grid-column: 3 / 8;
-    }
-  }
-
-  :global(.section-tag) {
-    margin-bottom: var(--arrow-spacing-xs);
-  }
-}
-
-.hero-vertical-priority.container .story-content-wrapper {
-  display: grid;
-}
-
-.headline-overlay-priority > .hero-image figure {
-  opacity: 0.5;
-}
-.headline-overlay-priority > .hero-image img {
-  -webkit-filter: blur(4px);
-  filter: blur(4px);
-}
-
-.gap-16 {
-  margin-top: var(--arrow-spacing-m);
-}
-
-.sticky .index-2 {
-  @include tablet {
-    z-index: 2;
-    @include desktop {
-      z-index: unset;
-    }
-  }
-}
-
-.tablet-index-2 {
-  @include tablet {
-    z-index: 2;
-  }
-}
-
-.fullBleed:global(.arr-story-grid) {
-  margin: unset;
-}