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

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

@@ -1,31 +0,0 @@
-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

@@ -1,7 +0,0 @@
-.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

@@ -1,9 +0,0 @@
-# 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

@@ -1,511 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,102 +0,0 @@
-@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);
-}