@quintype/arrow 3.54.1-debug-full-bleed.4 → 3.54.1-version-upgrade.1

package/src/components/Molecules/StoryCardWithBulletPoint/stories.js

@@ -0,0 +1,31 @@
+import React from "react";
+import { generateStory } from "../../Fixture";
+import { StoryCardWithBulletPoint } from "./index";
+import Readme from "./README.md";
+import { color, boolean } from "@storybook/addon-knobs";
+import { withStore } from "../../../../storybook";
+
+const story = generateStory();
+
+withStore(
+  "molecules/Story Card With Bullet Point ",
+  {
+    qt: {
+      config: {
+        "cdn-image": "thumbor-stg.assettype.com",
+        mountAt: "/sub-directory"
+      }
+    }
+  },
+  Readme
+).add("Default", () => {
+  const contextConfig = {
+    theme: color("color", "#ffffff"),
+    showSection: boolean("Show Section", true),
+    showAuthor: boolean("Show Author", true),
+    showTime: boolean("Show Time", true),
+    showReadTime: boolean("Read time", true)
+  };
+
+  return <StoryCardWithBulletPoint story={story} bulletValue={"1"} config={contextConfig} />;
+});

package/src/components/Molecules/StoryCardWithBulletPoint/story-card-with-bullet-point.m.css

@@ -0,0 +1,7 @@
+.card-with-bullet-wrapper {
+  display: flex;
+}
+
+.card-with-bullet-wrapper :global(.arrow-component.arr--headline h6) {
+  font-weight: normal;
+}

package/src/components/Molecules/StoryElementCard/README.md

@@ -0,0 +1,9 @@
+# Story Element Card
+
+Story Element Card is used to render story elements of a story card.
+
+## Usage
+
+```jsx
+<StoryElementCard story={story} card={card} />
+```

package/src/components/Molecules/StoryElementCard/index.js

@@ -0,0 +1,511 @@
+import React from "react";
+import get from "lodash.get";
+import { Text } from "../../Atoms/StoryElements/Text";
+import { Blurb } from "../../Atoms/StoryElements/Blurb";
+import "./story-element-card.m.css";
+import { Summary } from "../../Atoms/StoryElements/Summary";
+import { BlockQuote } from "../../Atoms/StoryElements/BlockQuote";
+import { BigFact } from "../../Atoms/StoryElements/BigFact";
+import { AlsoRead } from "../../Atoms/StoryElements/AlsoRead";
+import { Image } from "../../Atoms/StoryElements/Image";
+import PropTypes from "prop-types";
+import { QuestionAnswer } from "../../Atoms/StoryElements/QuestionAnswer";
+import { ImageGallery } from "../../Atoms/StoryElements/imageGallery";
+import { StoryElement } from "../../Atoms/StoryElements/StoryElement";
+import { Video } from "../../Atoms/StoryElements/Video";
+import { Quote } from "../../Atoms/StoryElements/Quote";
+import { Reference } from "../../Atoms/StoryElements/Reference";
+import { CaptionAttribution } from "../../Atoms/CaptionAttribution";
+import { Attachment } from "../../Atoms/StoryElements/Attachment";
+import { SocialShare } from "@quintype/components";
+import { SocialShareTemplate } from "../../Molecules/SocialShareTemplate";
+import { facebookMobileVideoResizeFix, getTextColor } from "../../../utils/utils";
+import { ImageSlideshow } from "../../Atoms/StoryElements/ImageSlideshow";
+import { AISummary } from "../../Atoms/StoryElements/AISummary";
+
+const getElementType = (element) => element["subtype"] || element["type"] || "";
+const getElement = (story, element, config = {}, AdComponent, WidgetComp, index, cardId, enableDarkMode) => {
+  const {
+    text = {},
+    summary = {},
+    blurb = {},
+    blockquote = {},
+    quote = {},
+    "also-read": alsoRead = {},
+    "q-and-a": qaElement = {},
+    question: questionElement = {},
+    answer: answerElement = {},
+    references = {},
+    jsEmbed = {},
+    attachment = {},
+    aiSummary = {}
+  } = config;
+
+  let elementType = getElementType(element);
+
+  if (elementType === "image-gallery") {
+    elementType = element.metadata["type"];
+  }
+
+  if (elementType === "summary" && aiSummary?.opts?.enabled) {
+    const publishedAt = get(story, ["published-at"], 0);
+    elementType = publishedAt > 1773619200000 ? "ai-summary" : "summary";
+  }
+
+  const storyElementId = get(element, ["id"]);
+  const targetId = element.targetId ? `widget-${element.targetId}-${story.id}` : `widget-${index}_${cardId}`;
+  switch (elementType) {
+    case "ad":
+      return <AdComponent {...element} id={`ad-${index}_${cardId}`} />;
+    case "widget": {
+      const customCode = get(element, ["config", "customCode"], "");
+      const { placeholderHeight: widgetHeightMobile = "", widgetHeightDesktop = "" } = get(element, ["aheadNext"], {});
+      return (
+        <WidgetComp
+          widgetCode={customCode}
+          id={targetId}
+          widgetHeightMobile={widgetHeightMobile}
+          widgetHeightDesktop={widgetHeightDesktop}
+        />
+      );
+    }
+    case "text":
+    case "cta":
+      const {
+        css: {
+          textColor: textElementColor = "#000",
+          darkTextColor: darkTextElementColor = "#fff",
+          hyperlinkColor = "#2f81cd"
+        } = {}
+      } = text;
+
+      return (
+        <Text
+          element={element}
+          css={{ textColor: enableDarkMode ? darkTextElementColor : textElementColor, hyperlinkColor: hyperlinkColor }}
+        />
+      );
+
+    case "ai-summary": {
+      const { opts: { headline, subtitle, iconType } = {}, css = {} } = aiSummary;
+      return <AISummary element={element} opts={{ headline, subtitle, iconType }} css={css} story={story} />;
+    }
+    case "summary":
+      const {
+        template: summaryTemplate = "",
+        css: { headerBgColor = "", darkHeaderBgColor } = {},
+        opts: { headline = "", hideHeadline = false } = {}
+      } = summary;
+      return (
+        <Summary
+          element={element}
+          template={summaryTemplate}
+          opts={{
+            headline: headline || "Summary",
+            hideHeadline: hideHeadline
+          }}
+          css={{ headerBgColor: enableDarkMode ? darkHeaderBgColor : headerBgColor || "" }}
+        />
+      );
+
+    case "blurb":
+      const {
+        template: blurbTemplate = "default",
+        css: { borderColor = "#3cab92", darkBorderColor = "#3cab92" } = {}
+      } = blurb;
+      return (
+        <Blurb
+          element={element}
+          template={blurbTemplate}
+          css={{ borderColor: enableDarkMode ? darkBorderColor : borderColor }}
+        />
+      );
+
+    case "blockquote":
+      const {
+        template: blockQuoteTemplate = "default",
+        css: {
+          iconType = "edgeIcon",
+          blockQuoteColor = "",
+          darkBlockQuoteColor = "",
+          backgroundShade = "",
+          darkBackgroundShade = ""
+        } = {}
+      } = blockquote;
+      return (
+        <BlockQuote
+          element={element}
+          template={blockQuoteTemplate}
+          css={{
+            iconType: iconType,
+            blockQuoteColor: enableDarkMode ? darkBlockQuoteColor : blockQuoteColor,
+            backgroundShade: enableDarkMode ? darkBackgroundShade : backgroundShade
+          }}
+        />
+      );
+
+    case "quote":
+      const {
+        template: quoteTemplate = "borderNone",
+        css: { borderColor: quoteBorderColor = "#2f81cd", darkBorderColor: darkQuoteBorderColor = "#2f81cd" } = {}
+      } = quote;
+      return (
+        <Quote
+          element={element}
+          template={quoteTemplate}
+          css={{ borderColor: enableDarkMode ? darkQuoteBorderColor : quoteBorderColor }}
+        />
+      );
+
+    case "bigfact":
+      return <BigFact element={element} />;
+
+    case "also-read":
+      const {
+        template: alsoReadTemplate = "default",
+        css: { textColor = "", darkTextColor = "" } = {},
+        opts: { title = "" } = {}
+      } = alsoRead;
+      return (
+        <AlsoRead
+          story={story}
+          element={element}
+          template={alsoReadTemplate}
+          css={{ textColor: enableDarkMode ? darkTextColor : textColor }}
+          opts={{ title }}
+        />
+      );
+
+    case "image":
+      return <Image element={element} />;
+
+    case "q-and-a": {
+      const {
+        template: qaTemplate = "default",
+        css: { iconColor = "", darkIconColor = "" } = {},
+        opts: { defaultIconType = "edge" } = {}
+      } = qaElement;
+      return (
+        <QuestionAnswer
+          element={element}
+          opts={{
+            type: "q-and-a",
+            defaultIconType: defaultIconType
+          }}
+          template={qaTemplate}
+          css={{
+            iconColor: enableDarkMode ? darkIconColor : iconColor
+          }}
+        />
+      );
+    }
+
+    case "question": {
+      const {
+        template: questionTemplate = "default",
+        css: { iconColor = "", darkIconColor = "" } = {},
+        opts: { defaultQuestionIconType = "edge" } = {}
+      } = questionElement;
+      return (
+        <QuestionAnswer
+          element={element}
+          opts={{
+            type: "question",
+            defaultIconType: defaultQuestionIconType
+          }}
+          template={questionTemplate}
+          css={{
+            iconColor: enableDarkMode ? darkIconColor : iconColor
+          }}
+        />
+      );
+    }
+
+    case "answer":
+      const {
+        template: answerTemplate = "default",
+        css: { iconColor = "", darkIconColor = "" } = {},
+        opts: { defaultAnswerIconType = "edge" } = {}
+      } = answerElement;
+      return (
+        <QuestionAnswer
+          element={element}
+          opts={{
+            type: "answer",
+            defaultIconType: defaultAnswerIconType
+          }}
+          template={answerTemplate}
+          css={{
+            iconColor: enableDarkMode ? darkIconColor : iconColor
+          }}
+        />
+      );
+
+    case "gallery":
+      return (
+        <div className="content-style" id={`image-gallery-${storyElementId}`}>
+          <ImageGallery element={element} />
+        </div>
+      );
+
+    case "slideshow":
+      return (
+        <div className="content-style" id={`image-slideshow-${storyElementId}`}>
+          <ImageSlideshow element={element} />
+        </div>
+      );
+
+    case "youtube-video":
+    case "dailymotion-video":
+    case "dailymotion-embed-script":
+    case "brightcove-video":
+    case "jwplayer":
+      const lazyLoad = get(jsEmbed, ["lazyLoad"], true);
+      return (
+        <div className="content-style" id={`video-${storyElementId}`}>
+          <Video element={element} story={story} loadIframeOnClick={lazyLoad} />
+        </div>
+      );
+    case "attachment":
+      return <Attachment element={element} opts={attachment?.["opts"]} />;
+    case "tweet":
+    case "jsembed":
+      return (
+        <div className="content-style" id={`jsembed-${storyElementId}`}>
+          <StoryElement element={element} />
+        </div>
+      );
+    case "references":
+      const { opts: { showHeadline = true, headlineText = "" } = {} } = references;
+      return (
+        <Reference
+          element={element}
+          opts={{
+            showHeadline: showHeadline,
+            headlineText: headlineText
+          }}
+        />
+      );
+    default:
+      return (
+        <div className="content-style" id={`element-${storyElementId}`} styleName={`${getTextColor(config.theme)}`}>
+          <StoryElement element={element} story={story} />
+        </div>
+      );
+  }
+};
+
+export const LiveBlogStoryElement = ({
+  story,
+  card,
+  heroVideoElementId = -1,
+  config,
+  theme,
+  adComponent,
+  widgetComp,
+  enableDarkMode,
+  CardShare
+}) => {
+  const textColor = getTextColor(theme);
+  let shouldRunFBMobileVideoFix = true;
+  const storyElements = get(card, ["story-elements"], []);
+  const firstNonAdElementIndex = storyElements.findIndex(
+    (element) => element.type !== "ad" && element.type !== "widget"
+  );
+
+  const adElementsAbove = storyElements.slice(0, firstNonAdElementIndex);
+  const restElements = storyElements.slice(firstNonAdElementIndex);
+
+  function StoryElements(storyElements) {
+    return (
+      <div className="arr--story-page-card-wrapper">
+        {storyElements.map((element, index) => {
+          if (element.id === heroVideoElementId) return false;
+          if (element.subtype && element.subtype === "facebook-post" && shouldRunFBMobileVideoFix) {
+            facebookMobileVideoResizeFix();
+            shouldRunFBMobileVideoFix = false;
+          }
+          const cardId = get(card, ["id"], "");
+
+          return (
+            <>
+              <div
+                key={element.id}
+                className="arr--element-container"
+                styleName={`element-container live-blog ${textColor}`}>
+                {getElement(story, element, config, adComponent, widgetComp, index, cardId, enableDarkMode)}
+              </div>
+            </>
+          );
+        })}
+      </div>
+    );
+  }
+
+  return (
+    <>
+      {StoryElements(adElementsAbove)}
+      <CardShare />
+      {StoryElements(restElements)}
+    </>
+  );
+};
+
+LiveBlogStoryElement.propTypes = {
+  story: PropTypes.object,
+  card: PropTypes.object,
+  heroVideoElementId: PropTypes.number,
+  config: PropTypes.object,
+  theme: PropTypes.string,
+  adComponent: PropTypes.func,
+  widgetComp: PropTypes.func,
+  enableDarkMode: PropTypes.bool,
+  CardShare: PropTypes.func
+};
+
+const MainImageWrapper = ({ imageElement, story, children, config, card }) => {
+  return (
+    <>
+      <div style={{ backgroundColor: config.theme || "initial" }}>
+        <Image element={imageElement} caption={false} />
+        <div styleName="image-share">
+          <CaptionAttribution element={imageElement} config={config} />
+          <SocialShare
+            template={SocialShareTemplate}
+            title={story.headline}
+            theme={config.theme}
+            fullUrl={encodeURI(`${get(story, ["url"], "")}?cardId=${get(card, ["id"], -1)}`)}
+            shareIconsOnly
+            socialShareStyle="fixed"
+          />
+        </div>
+      </div>
+    </>
+  );
+};
+
+MainImageWrapper.propTypes = {
+  story: PropTypes.object,
+  imageElement: PropTypes.object,
+  config: PropTypes.object,
+  children: PropTypes.node,
+  card: PropTypes.shape({
+    id: PropTypes.string
+  })
+};
+
+export const StoryElementCard = ({
+  story,
+  card,
+  heroVideoElementId = -1,
+  config,
+  isLive,
+  listicleBulletOpts = {},
+  theme,
+  adComponent,
+  widgetComp,
+  enableDarkMode
+}) => {
+  const textColor = getTextColor(theme);
+  const isLiveBlog = isLive ? "live-blog" : "";
+  let shouldRunFBMobileVideoFix = true;
+  const { isTitlePresent, firstDescriptionElementsIndex, addNonInlineBullets } = listicleBulletOpts;
+
+  return (
+    <div className="arr--story-page-card-wrapper">
+      {get(card, ["story-elements"], []).map((element, index) => {
+        if (element.id === heroVideoElementId) return false;
+        if (element.subtype && element.subtype === "facebook-post" && shouldRunFBMobileVideoFix) {
+          facebookMobileVideoResizeFix();
+          shouldRunFBMobileVideoFix = false;
+        }
+        const cardId = get(card, ["id"], "");
+        return (
+          <>
+            {!isTitlePresent && firstDescriptionElementsIndex === index && addNonInlineBullets(listicleBulletOpts)}
+            <div
+              key={element.id}
+              className="arr--element-container"
+              styleName={`element-container ${isLiveBlog} ${textColor}`}>
+              {getElement(story, element, config, adComponent, widgetComp, index, cardId, enableDarkMode)}
+            </div>
+          </>
+        );
+      })}
+    </div>
+  );
+};
+StoryElementCard.propTypes = {
+  story: PropTypes.object,
+  card: PropTypes.array,
+  heroVideoElementId: PropTypes.number,
+  config: PropTypes.object,
+  isLive: PropTypes.bool,
+  listicleBulletOpts: PropTypes.object,
+  theme: PropTypes.string,
+  adComponent: PropTypes.func,
+  widgetComp: PropTypes.func,
+  enableDarkMode: PropTypes.bool
+};
+
+export const PhotoStoryElement = ({ card = {}, config, story, adComponent, widgetComp, enableDarkMode, theme }) => {
+  let shouldRunFBMobileVideoFix = true;
+  const textColor = getTextColor(theme);
+  return (
+    <div styleName={`story-card ${textColor}`}>
+      {get(card, ["story-elements"], []).map((element, index) => {
+        const cardId = get(card, ["id"], "");
+        if (element.type === "image") {
+          return <MainImageWrapper imageElement={element} story={story} config={config} card={card} />;
+        } else {
+          if (element.subtype && element.subtype === "facebook-post" && shouldRunFBMobileVideoFix) {
+            facebookMobileVideoResizeFix();
+            shouldRunFBMobileVideoFix = false;
+          }
+          return (
+            <div styleName="element-container" key={index}>
+              {getElement(story, element, config, adComponent, widgetComp, index, cardId, enableDarkMode)}
+            </div>
+          );
+        }
+      })}
+    </div>
+  );
+};
+
+PhotoStoryElement.propTypes = {
+  story: PropTypes.object,
+  card: PropTypes.object,
+  config: PropTypes.object,
+  adComponent: PropTypes.func,
+  widgetComp: PropTypes.func,
+  enableDarkMode: PropTypes.bool,
+  theme: PropTypes.string
+};
+
+export const SlotAfterStory = ({ id = "", element = {}, AdComponent, WidgetComp }) => {
+  const targetId = element.targetId ? `widget-after-story-${element.targetId}-${id}` : `widget-after-story-${id}`;
+  const { placeholderHeight: widgetHeightMobile = "", widgetHeightDesktop = "" } = get(element, ["aheadNext"], {});
+  switch (element.type) {
+    case "ad":
+      return <AdComponent {...element} id={`ad-after-story-${id}`} />;
+    case "widget":
+      return (
+        <WidgetComp
+          widgetCode={element.config.customCode}
+          id={targetId}
+          widgetHeightMobile={widgetHeightMobile}
+          widgetHeightDesktop={widgetHeightDesktop}
+        />
+      );
+    default:
+      return null;
+  }
+};
+
+SlotAfterStory.propTypes = {
+  id: PropTypes.string,
+  element: PropTypes.object,
+  AdComponent: PropTypes.func,
+  WidgetComp: PropTypes.func
+};

package/src/components/Molecules/StoryElementCard/stories.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { generateStory } from "../../Fixture";
+import { withStore } from "../../../../storybook";
+import Readme from "./README.md";
+import { StoryElementCard } from "./index";
+import { color } from "@storybook/addon-knobs";
+
+const story = generateStory();
+const { cards } = story;
+
+withStore(
+  "Molecules/Story Element Card",
+  {
+    qt: {
+      config: {
+        "cdn-image": "thumbor-stg.assettype.com",
+        mountAt: "/sub-directory"
+      }
+    }
+  },
+  Readme
+).add("Default", () => {
+  const config = {
+    theme: color("Background Color", "#fff")
+  };
+  return <StoryElementCard story={story} card={cards[0]} config={config} />;
+});

package/src/components/Molecules/StoryElementCard/story-element-card.m.css

@@ -0,0 +1,102 @@
+@import "../../../../assets/stylesheets/mixins.scss";
+
+.element-container {
+  margin: var(--arrow-spacing-l) 0;
+  @include tablet {
+    margin: var(--arrow-spacing-xl) 0;
+  }
+}
+
+.live-blog {
+  margin: var(--arrow-spacing-m) 0 var(--arrow-spacing-l);
+  @include tablet {
+    margin: var(--arrow-spacing-m) 0 var(--arrow-spacing-xl);
+  }
+}
+
+.image-share {
+  display: flex;
+  justify-content: space-between;
+  padding: var(--arrow-spacing-xs) 0 var(--arrow-spacing-l);
+}
+.image-share :global(.arr--caption-attribution) {
+  margin: unset;
+}
+
+.image-share :global(.desktop-share-wrapper) {
+  @include desktop {
+    max-width: 42px;
+  }
+}
+
+.story-card {
+  margin-bottom: var(--arrow-spacing-xl);
+}
+
+.story-card.dark {
+  border-bottom: 1px solid var(--arrow-c-mono2);
+}
+
+.story-card.light {
+  border-bottom: 1px solid var(--arrow-c-invert-mono2);
+}
+
+.element-container :global(.story-element-jsembed) iframe {
+  max-width: 100%;
+  width: 100%;
+}
+
+.element-container :global(.story-element-jsembed) img {
+  width: fit-content;
+}
+
+.element-container :global(.story-element-jsembed-dailymotion-video) iframe {
+  width: 100%;
+  height: 100%;
+}
+
+:global(.story-element-jsembed.story-element-jsembed-facebook-post *) {
+  @include mobile {
+    max-width: 100%;
+    position: relative;
+  }
+}
+
+:global(.story-element-jsembed.story-element-jsembed-facebook-post) {
+  @include mobile {
+    max-width: calc(100vw - var(--arrow-spacing-l));
+  }
+}
+
+.element-container :global(.dailymotion-embed-wrapper) {
+  padding-bottom: 56.25%;
+  position: relative;
+}
+
+.element-container :global(.story-element-jsembed-instagram > .jsembed-wrapper) {
+  /* fix instagram overflowing container on safari */
+  position: relative;
+}
+
+.element-container :global(.story-element-jsembed > .jsembed-wrapper.facebook-jsembed) iframe {
+  max-width: 100%;
+  width: revert-layer;
+  display: block;
+  margin: auto;
+}
+
+.element-container :global(.dailymotion-embed-wrapper .dailymotion-player-root) {
+  padding-bottom: 0 !important;
+  position: absolute !important;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.dark {
+  color: var(--arrow-c-mono2);
+}
+.light {
+  color: var(--arrow-c-invert-mono2);
+}