@quintype/arrow 3.0.0-spike-skeleton-layout.21 → 3.0.0

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

@@ -0,0 +1,376 @@
+import React from "react";
+import get from "lodash.get";
+import PropTypes from "prop-types";
+import { SocialShare } from "@quintype/components";
+import { SocialShareTemplate } from "../../../Molecules/SocialShareTemplate";
+import { SectionTag } from "../../../Atoms/SectionTag";
+import { Subheadline } from "../../../Atoms/Subheadline";
+import AsideCollection from "../../AsideCollection";
+import { AuthorCard } from "../../../Atoms/AuthorCard";
+import { StoryElementCard, SlotAfterStory } from "../../../Molecules/StoryElementCard";
+import { PublishDetails } from "../../../Atoms/PublishDetail";
+import { StoryTags } from "../../../Atoms/StoryTags";
+import { HeroImage } from "../../../Atoms/HeroImage";
+import "./live-blog.m.css";
+import { CaptionAttribution } from "../../../Atoms/CaptionAttribution";
+import { clientWidth, getTextColor, getTimeStamp, timestampToFormat } from "../../../../utils/utils";
+import LiveIcon from "../../../Svgs/liveicon";
+import KeyEvents from "../../../Molecules/KeyEvents";
+import { ClockIcon } from "../../../Svgs/clock-icon";
+import { StoryHeadline } from "../../../Atoms/StoryHeadline";
+
+export const LiveBlogStoryTemplates = ({
+  story = {},
+  config = {},
+  storyElementsConfig,
+  adComponent,
+  widgetComp,
+  firstChild,
+  secondChild
+}) => {
+  const {
+    theme = "",
+    asideCollection = {},
+    templateType,
+    noOfVisibleCards = 0,
+    publishedDetails = {},
+    verticalShare = "",
+    shareIconType = "plain-color-svg",
+    authorDetails = {
+      template: "default"
+    },
+    premiumStoryIconConfig = {}
+  } = config;
+
+  const visibleCards = noOfVisibleCards < 0 ? story.cards : story.cards.slice(0, noOfVisibleCards);
+  const textColor = getTextColor(theme);
+  const dark = "#333";
+  const light = "#fff";
+  const updateColor = textColor === "dark" ? dark : light;
+
+  const isMobile = clientWidth("mobile");
+  const storyId = get(story, ["id"], "");
+
+  const HeaderCard = () => {
+    const isBlogClosed = get(story, ["metadata", "is-closed"]);
+    return (
+      <div styleName="header-wrapper header-details">
+        <SectionTag story={story} />
+        <div styleName="live-headline">
+          {!isBlogClosed && (
+            <div styleName="live-icon">
+              <LiveIcon />
+            </div>
+          )}
+          <StoryHeadline story={story} premiumStoryIconConfig={premiumStoryIconConfig} />
+        </div>
+        <Subheadline story={story} showFullContent />
+      </div>
+    );
+  };
+  const StoryCards = () => {
+    return visibleCards.map((card = {}, index) => {
+      const borderBottom = index === visibleCards.length - 1 ? "" : `share-cards ${textColor}`;
+      const cardId = get(card, ["id"], "");
+      const { "card-added-at": cardAddedAt } = card;
+      return (
+        <div key={index} styleName={borderBottom}>
+          <div styleName="card-share">
+            <div styleName={`time-wrapper ${textColor}`}>
+              <ClockIcon color={updateColor} />
+              {getTimeStamp(cardAddedAt, timestampToFormat, { isTimeFirst: true })}
+            </div>
+            <div id={`card-share-${cardId}_${storyId}`} className="content-style">
+              <SocialShare
+                template={SocialShareTemplate}
+                fullUrl={encodeURI(story.url)}
+                title={story.headline}
+                theme={theme}
+                iconType={shareIconType}
+              />
+            </div>
+          </div>
+          <StoryElementCard
+            story={story}
+            card={card}
+            key={cardId}
+            config={storyElementsConfig}
+            isLive
+            theme={theme}
+            adComponent={adComponent}
+            widgetComp={widgetComp}
+          />
+        </div>
+      );
+    });
+  };
+
+  const keyEvents = () => {
+    return (
+      <div styleName="key-events" id={`key-events-${storyId}`}>
+        <KeyEvents story={story} showLoadMore={true} config={config} />
+      </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 showKeyEvents = () => {
+    if ((templateType === "default" || templateType === "headline-priority") && !isMobile) {
+      return null;
+    }
+    return keyEvents();
+  };
+
+  const StoryData = () => {
+    return (
+      <>
+        <AuthorCard clazzName="gap-32" story={story} template={authorDetails.template} opts={authorDetails.opts} />
+        <div styleName="timestamp-social-share">
+          <PublishDetails story={story} opts={publishedDetails} />
+          {!verticalShare && <SocialShareComponent />}
+        </div>
+        {showKeyEvents()}
+        <StoryCards />
+        <div styleName="space-32">
+          {firstChild}
+          <StoryTags tags={story.tags} />
+          <SlotAfterStory
+            id={story.id}
+            element={story.customSlotAfterStory}
+            AdComponent={adComponent}
+            WidgetComp={widgetComp}
+          />
+          {secondChild}
+        </div>
+      </>
+    );
+  };
+
+  const DefaultTemplate = (story) => {
+    return (
+      <>
+        <div data-test-id="hero-image" styleName="grid-col-full index-2">
+          <HeroImage story={story} aspectRatio={[[16, 9], [8, 3]]} isStoryPageImage />
+        </div>
+        <div styleName="header-wrapper">
+          <CaptionAttribution story={story} config={config} />
+          <HeaderCard />
+          <StoryData />
+        </div>
+        {verticalShare && <SocialShareComponent />}
+        <div styleName="side-column">
+          {asideCollection && (
+            <AsideCollection
+              {...asideCollection}
+              adComponent={adComponent}
+              widgetComp={widgetComp}
+              sticky={true}
+              enableKeyEvents={!isMobile}
+              keyEventsData={{ story, config, showLoadMore: false }}
+              storyId={storyId}
+              opts={publishedDetails}
+            />
+          )}
+        </div>
+      </>
+    );
+  };
+
+  const HeroOverlay = (story) => {
+    return (
+      <>
+        <div styleName="overlay-hero  index-2">
+          <HeroImage story={story} aspectRatio={[[1, 2], [16, 9]]} isStoryPageImage />
+        </div>
+        <div styleName="overlay-grid">
+          <HeaderCard />
+        </div>
+        <div styleName="grid-col-4-12 ">
+          <CaptionAttribution story={story} config={config} />
+          <StoryData />
+        </div>
+        {verticalShare && <SocialShareComponent />}
+        {asideCollection && (
+          <div styleName="grid-container tablet-index-2">
+            <AsideCollection
+              horizontal={true}
+              {...asideCollection}
+              adComponent={adComponent}
+              widgetComp={widgetComp}
+              storyId={storyId}
+              opts={publishedDetails}
+            />
+          </div>
+        )}
+      </>
+    );
+  };
+
+  const HeadlineSideway = (story) => {
+    return (
+      <>
+        <div styleName="grid-col-2-9 sideway ">
+          <HeaderCard />
+        </div>
+        <div styleName="grid-col-9-15 index-2">
+          <HeroImage story={story} aspectRatio={[[4, 3]]} isStoryPageImage />
+          <CaptionAttribution story={story} config={config} />
+        </div>
+        <div styleName="grid-col-4-12 ">
+          <StoryData />
+        </div>
+        {verticalShare && <SocialShareComponent />}
+        {asideCollection && (
+          <div styleName="grid-container tablet-index-2">
+            <AsideCollection
+              horizontal={true}
+              {...asideCollection}
+              adComponent={adComponent}
+              widgetComp={widgetComp}
+              storyId={storyId}
+              opts={publishedDetails}
+            />
+          </div>
+        )}
+      </>
+    );
+  };
+
+  const HeadlinePriority = (story) => {
+    return (
+      <>
+        <div styleName="grid-col-2-9  grid-row-1-2 headline-space">
+          <HeaderCard />
+        </div>
+        <div styleName="grid-col-2-9  grid-row-2-3 index-2">
+          <HeroImage story={story} aspectRatio={[[16, 9]]} isStoryPageImage />
+        </div>
+        <div styleName="grid-col-2-9  grid-row-3-4">
+          <CaptionAttribution story={story} config={config} />
+          <StoryData />
+        </div>
+        {verticalShare && <SocialShareComponent />}
+        <div styleName="grid-col-9-14 grid-row-1-6">
+          {asideCollection && (
+            <AsideCollection
+              {...asideCollection}
+              adComponent={adComponent}
+              widgetComp={widgetComp}
+              sticky={true}
+              enableKeyEvents={!isMobile}
+              keyEventsData={{ story, config, showLoadMore: false }}
+              storyId={storyId}
+              opts={publishedDetails}
+            />
+          )}
+        </div>
+      </>
+    );
+  };
+
+  const HeroPriority = (story) => {
+    return (
+      <>
+        <div styleName="grid-container index-2">
+          <HeroImage story={story} aspectRatio={[[16, 9]]} isStoryPageImage />
+        </div>
+        <div styleName="grid-col-4-12 ">
+          <CaptionAttribution story={story} config={config} />
+          <HeaderCard />
+          <StoryData />
+        </div>
+        {verticalShare && <SocialShareComponent />}
+        {asideCollection && (
+          <div styleName="grid-container tablet-index-2">
+            <AsideCollection
+              horizontal={true}
+              {...asideCollection}
+              adComponent={adComponent}
+              widgetComp={widgetComp}
+              storyId={storyId}
+              opts={publishedDetails}
+            />
+          </div>
+        )}
+      </>
+    );
+  };
+
+  const HeadlineHeroPriority = (story) => {
+    return (
+      <>
+        <div styleName="grid-col-4-12 headline-space">
+          <HeaderCard />
+        </div>
+        <div styleName="grid-container  index-2">
+          <HeroImage story={story} aspectRatio={[[16, 9]]} isStoryPageImage />
+        </div>
+        <div styleName="grid-col-4-12 ">
+          <CaptionAttribution story={story} config={config} />
+          <StoryData />
+        </div>
+        {verticalShare && <SocialShareComponent />}
+        {asideCollection && (
+          <div styleName="grid-container tablet-index-2">
+            <AsideCollection
+              horizontal={true}
+              {...asideCollection}
+              adComponent={adComponent}
+              widgetComp={widgetComp}
+              storyId={storyId}
+              opts={publishedDetails}
+            />
+          </div>
+        )}
+      </>
+    );
+  };
+
+  const getLiveBlogStoryTemplates = (templateType) => {
+    switch (templateType) {
+      case "hero-priority":
+        return HeroPriority(story);
+      case "hero-overlay":
+        return HeroOverlay(story);
+      case "headline-sideway":
+        return HeadlineSideway(story);
+      case "headline-priority":
+        return HeadlinePriority(story);
+      case "headline-hero-priority":
+        return HeadlineHeroPriority(story);
+      default:
+        return DefaultTemplate(story);
+    }
+  };
+
+  return <>{getLiveBlogStoryTemplates(templateType)}</>;
+};
+
+LiveBlogStoryTemplates.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
+};

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

@@ -0,0 +1,246 @@
+import { SocialShare } from "@quintype/components";
+import PropTypes from "prop-types";
+import React from "react";
+import get from "lodash.get";
+import kebabCase from "lodash.kebabcase";
+import { AuthorCard } from "../../../Atoms/AuthorCard";
+import { CaptionAttribution } from "../../../Atoms/CaptionAttribution";
+import { SocialShareTemplate } from "../../../Molecules/SocialShareTemplate";
+import { SectionTag } from "../../../Atoms/SectionTag";
+import { StoryHeadline } from "../../../Atoms/StoryHeadline";
+import { Subheadline } from "../../../Atoms/Subheadline";
+import { HeroImage } from "../../../Atoms/HeroImage";
+import { PublishDetails } from "../../../Atoms/PublishDetail";
+import { StoryTags } from "../../../Atoms/StoryTags";
+import { PhotoStoryElement, SlotAfterStory } from "../../../Molecules/StoryElementCard";
+import { StateProvider } from "../../../SharedContext";
+import AsideCollection from "../../AsideCollection";
+import "./photo.m.css";
+
+const PhotoStory = ({
+  story = {},
+  config = {},
+  storyElementsConfig,
+  widgetComp,
+  adComponent,
+  firstChild,
+  secondChild
+}) => {
+  const {
+    theme = "",
+    asideCollection = {},
+    templateType = "default",
+    noOfVisibleCards = -1,
+    publishedDetails = {},
+    verticalShare = "",
+    shareIconType = "plain-color-svg",
+    authorDetails = {
+      template: "default"
+    },
+    imageRender = "fullBleed",
+    premiumStoryIconConfig = {}
+  } = config;
+  const isFullBleed = imageRender === "fullBleed";
+  const visibledCards = noOfVisibleCards < 0 ? story.cards : story.cards.slice(0, noOfVisibleCards);
+  const storyId = get(story, ["id"], "");
+  const HeaderCard = () => {
+    return (
+      <div styleName="grid-col-2-10 header-details">
+        <SectionTag story={story} />
+        <StoryHeadline story={story} premiumStoryIconConfig={premiumStoryIconConfig} />
+        <Subheadline story={story} showFullContent />
+      </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 = () => (
+    <>
+      {authorDetails && (
+        <AuthorCard clazzName="gap-32" story={story} template={authorDetails.template} opts={authorDetails.opts} />
+      )}
+      <div styleName="story-details">
+        <PublishDetails story={story} opts={publishedDetails} />
+        {!verticalShare && <SocialShareComponent />}
+      </div>
+      {visibledCards.map((card) => {
+        return (
+          <PhotoStoryElement
+            story={story}
+            card={card}
+            key={get(card, ["id"], "")}
+            config={{ ...storyElementsConfig, theme }}
+            adComponent={adComponent}
+            widgetComp={widgetComp}
+          />
+        );
+      })}
+      <div styleName="space-32">
+        {firstChild}
+        <StoryTags tags={story.tags} />
+        <SlotAfterStory
+          id={story.id}
+          element={story.customSlotAfterStory}
+          AdComponent={adComponent}
+          WidgetComp={widgetComp}
+        />
+        {secondChild}
+      </div>
+    </>
+  );
+
+  const renderImages = (imageRender) => {
+    switch (imageRender) {
+      case "fullBleed":
+        return "grid-col-full";
+      case "container":
+        return "grid-container";
+      default:
+        return "grid-col-full";
+    }
+  };
+
+  const DefaultTemplate = ({ story }) => {
+    return (
+      <>
+        <div data-test-id="hero-image" styleName={`${renderImages(imageRender)} index-2`}>
+          <HeroImage story={story} aspectRatio={[[16, 9], [8, 3]]} defaultFallback={false} isStoryPageImage />
+        </div>
+        <div styleName="grid-col-2-10 space-12">
+          <CaptionAttribution story={story} config={config} />
+          <HeaderCard />
+          <StoryData />
+        </div>
+        {verticalShare && <SocialShareComponent />}
+        {asideCollection && (
+          <div styleName="grid-col-10-14 space-12">
+            <AsideCollection
+              {...asideCollection}
+              widgetComp={widgetComp}
+              adComponent={adComponent}
+              sticky={true}
+              storyId={storyId}
+              opts={publishedDetails}
+            />
+          </div>
+        )}
+      </>
+    );
+  };
+
+  const HeroPriority = ({ story }) => {
+    return (
+      <>
+        <div data-test-id="hero-image" styleName={`${renderImages(imageRender)} index-2`}>
+          <HeroImage story={story} aspectRatio={[[16, 9]]} defaultFallback={false} isStoryPageImage />
+        </div>
+        <div styleName="grid-col-4-12 space-12">
+          <CaptionAttribution story={story} config={config} />
+          <HeaderCard />
+          <StoryData />
+        </div>
+        {verticalShare && <SocialShareComponent />}
+        {asideCollection && (
+          <div styleName="grid-container space-12 tablet-index-2">
+            <AsideCollection
+              horizontal={true}
+              {...asideCollection}
+              widgetComp={widgetComp}
+              adComponent={adComponent}
+              storyId={storyId}
+              opts={publishedDetails}
+            />
+          </div>
+        )}
+      </>
+    );
+  };
+
+  const HeadlinePriority = ({ story }) => {
+    return (
+      <>
+        <div styleName="grid-container side-space">
+          <HeaderCard />
+        </div>
+        <div styleName="grid-col-2-9 side-space index-2">
+          <HeroImage story={story} aspectRatio={[[16, 9]]} defaultFallback={false} isStoryPageImage />
+        </div>
+        <div styleName="grid-col-2-9 side-space">
+          <CaptionAttribution story={story} config={config} />
+          <StoryData />
+        </div>
+        {verticalShare && <SocialShareComponent />}
+        {asideCollection && (
+          <div styleName="grid-col-9-14">
+            <AsideCollection
+              {...asideCollection}
+              widgetComp={widgetComp}
+              adComponent={adComponent}
+              sticky={true}
+              storyId={storyId}
+              opts={publishedDetails}
+            />
+          </div>
+        )}
+      </>
+    );
+  };
+
+  const PhotoStoryTemplate = ({ templateType }) => {
+    switch (templateType) {
+      case "hero-priority-center":
+        return <HeroPriority story={story} />;
+      case "headline-priority":
+        return <HeadlinePriority story={story} />;
+      default:
+        return <DefaultTemplate story={story} />;
+    }
+  };
+  PhotoStoryTemplate.propTypes = {
+    templateType: PropTypes.string
+  };
+
+  PhotoStoryTemplate.propTypes = {
+    templateType: PropTypes.string
+  };
+
+  return (
+    <div
+      styleName={`${verticalShare} ${isFullBleed ? "fullBleed" : ""}`}
+      data-test-id={`photo-story-${templateType}-${kebabCase(imageRender)}`}
+      className={`arrow-component arr-story-grid arr--content-wrapper arr--photo-story-template-wrapper ${templateType} `}
+      style={{ backgroundColor: theme }}>
+      <PhotoStoryTemplate templateType={templateType} />
+    </div>
+  );
+};
+
+PhotoStory.propTypes = {
+  story: PropTypes.object,
+  config: PropTypes.shape({
+    templateType: PropTypes.string,
+    asideCollection: PropTypes.object
+  }),
+  firstChild: PropTypes.node,
+  secondChild: PropTypes.node,
+  storyElementsConfig: PropTypes.object,
+  adComponent: PropTypes.func,
+  widgetComp: PropTypes.func
+};
+
+export default StateProvider(PhotoStory);