@quintype/arrow 3.15.1-perf.3 → 3.15.1-perf.7

package/esm/components/Molecules/StoryCardWithBulletPoint/index.js

@@ -0,0 +1,43 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { StorycardContent } from "../../Molecules/StorycardContent";
+import { StoryCard } from "../../Molecules/StoryCard";
+import { AuthorWithTime } from "../../Atoms/AuthorWithTimestamp";
+import { Headline } from "../../Atoms/Headline";
+import { BulletPoint } from "../../Atoms/BulletPoint";
+import "./story-card-with-bullet-point.m.css";
+export var StoryCardWithBulletPoint = function StoryCardWithBulletPoint(_ref) {
+  var story = _ref.story,
+      config = _ref.config,
+      bulletValue = _ref.bulletValue;
+  var _config$theme = config.theme,
+      theme = _config$theme === void 0 ? "" : _config$theme,
+      _config$localizationC = config.localizationConfig,
+      localizationConfig = _config$localizationC === void 0 ? {} : _config$localizationC;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "story-card-with-bullet-point-m_card-with-bullet-wrapper__qTviw"
+  }, /*#__PURE__*/React.createElement(BulletPoint, {
+    bulletValue: bulletValue
+  }), /*#__PURE__*/React.createElement(StoryCard, {
+    story: story,
+    bgImgContentOverlap: true,
+    config: config,
+    theme: theme
+  }, /*#__PURE__*/React.createElement(StorycardContent, null, /*#__PURE__*/React.createElement(Headline, {
+    story: story,
+    headerLevel: "6",
+    premiumStoryIconConfig: config
+  }), /*#__PURE__*/React.createElement(AuthorWithTime, {
+    config: localizationConfig,
+    story: story,
+    prefix: "By"
+  }))));
+};
+StoryCardWithBulletPoint.propTypes = {
+  story: PropTypes.object.isRequired,
+  config: PropTypes.shape({
+    theme: PropTypes.string,
+    localizationConfig: PropTypes.object
+  }),
+  bulletValue: PropTypes.string
+};

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

@@ -0,0 +1,28 @@
+import React from "react";
+import { generateStory } from "../../Fixture";
+import { StoryCardWithBulletPoint } from "./index";
+import Readme from "./README.md";
+import { color, boolean as _boolean } from "@storybook/addon-knobs";
+import { withStore } from "../../../../storybook";
+var story = generateStory();
+withStore("molecules/Story Card With Bullet Point ", {
+  qt: {
+    config: {
+      "cdn-image": "thumbor-stg.assettype.com",
+      mountAt: "/sub-directory"
+    }
+  }
+}, Readme).add("Default", function () {
+  var 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 /*#__PURE__*/React.createElement(StoryCardWithBulletPoint, {
+    story: story,
+    bulletValue: "1",
+    config: contextConfig
+  });
+});

package/esm/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/esm/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/esm/components/Molecules/StoryElementCard/index.js

@@ -0,0 +1,494 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+import React from "react";
+import { get } from "lodash";
+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";
+var _styleModuleImportMap = {
+  "./story-element-card.m.css": {
+    "element-container": "story-element-card-m_element-container__1ZeJL",
+    "live-blog": "story-element-card-m_live-blog__JSpmI",
+    "image-share": "story-element-card-m_image-share__2V7dB",
+    "story-card": "story-element-card-m_story-card__H2VYl",
+    "table": "story-element-card-m_table__34F2c",
+    "dark": "story-element-card-m_dark__1AX15",
+    "light": "story-element-card-m_light__3T2uA"
+  }
+};
+
+var getElementType = function getElementType(element) {
+  return element["subtype"] || element["type"] || "";
+};
+
+var getElement = function getElement(story, element) {
+  var config = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var AdComponent = arguments.length > 3 ? arguments[3] : undefined;
+  var WidgetComp = arguments.length > 4 ? arguments[4] : undefined;
+  var index = arguments.length > 5 ? arguments[5] : undefined;
+  var cardId = arguments.length > 6 ? arguments[6] : undefined;
+  var _config$text = config.text,
+      text = _config$text === void 0 ? {} : _config$text,
+      _config$summary = config.summary,
+      summary = _config$summary === void 0 ? {} : _config$summary,
+      _config$blurb = config.blurb,
+      blurb = _config$blurb === void 0 ? {} : _config$blurb,
+      _config$blockquote = config.blockquote,
+      blockquote = _config$blockquote === void 0 ? {} : _config$blockquote,
+      _config$quote = config.quote,
+      quote = _config$quote === void 0 ? {} : _config$quote,
+      _config$alsoRead = config["also-read"],
+      alsoRead = _config$alsoRead === void 0 ? {} : _config$alsoRead,
+      _config$qAndA = config["q-and-a"],
+      qaElement = _config$qAndA === void 0 ? {} : _config$qAndA,
+      _config$question = config.question,
+      questionElement = _config$question === void 0 ? {} : _config$question,
+      _config$answer = config.answer,
+      answerElement = _config$answer === void 0 ? {} : _config$answer,
+      _config$references = config.references,
+      references = _config$references === void 0 ? {} : _config$references;
+  var elementType = getElementType(element);
+
+  if (elementType === "image-gallery") {
+    elementType = element.metadata["type"];
+  }
+
+  var storyElementId = get(element, ["id"]);
+
+  switch (elementType) {
+    case "ad":
+      return /*#__PURE__*/React.createElement(AdComponent, _extends({}, element, {
+        id: "ad-".concat(index, "_").concat(cardId)
+      }));
+
+    case "widget":
+      return /*#__PURE__*/React.createElement(WidgetComp, {
+        widgetCode: element.config.customCode,
+        id: "widget-".concat(index, "_").concat(cardId)
+      });
+
+    case "text":
+    case "cta":
+      var _text$css = text.css;
+      _text$css = _text$css === void 0 ? {} : _text$css;
+      var _text$css$textColor = _text$css.textColor,
+          textElementColor = _text$css$textColor === void 0 ? "#000" : _text$css$textColor,
+          _text$css$hyperlinkCo = _text$css.hyperlinkColor,
+          hyperlinkColor = _text$css$hyperlinkCo === void 0 ? "#2f81cd" : _text$css$hyperlinkCo;
+      return /*#__PURE__*/React.createElement(Text, {
+        element: element,
+        css: {
+          textColor: textElementColor,
+          hyperlinkColor: hyperlinkColor
+        }
+      });
+
+    case "summary":
+      var _summary$template = summary.template,
+          summaryTemplate = _summary$template === void 0 ? "" : _summary$template,
+          _summary$css = summary.css;
+      _summary$css = _summary$css === void 0 ? {} : _summary$css;
+      var _summary$css$headerBg = _summary$css.headerBgColor,
+          headerBgColor = _summary$css$headerBg === void 0 ? "" : _summary$css$headerBg,
+          _summary$opts = summary.opts;
+      _summary$opts = _summary$opts === void 0 ? {} : _summary$opts;
+      var _summary$opts$headlin = _summary$opts.headline,
+          headline = _summary$opts$headlin === void 0 ? "" : _summary$opts$headlin,
+          _summary$opts$hideHea = _summary$opts.hideHeadline,
+          hideHeadline = _summary$opts$hideHea === void 0 ? false : _summary$opts$hideHea;
+      return /*#__PURE__*/React.createElement(Summary, {
+        element: element,
+        template: summaryTemplate,
+        opts: {
+          headline: headline || "Summary",
+          hideHeadline: hideHeadline
+        },
+        css: {
+          headerBgColor: headerBgColor || ""
+        }
+      });
+
+    case "blurb":
+      var _blurb$template = blurb.template,
+          blurbTemplate = _blurb$template === void 0 ? "default" : _blurb$template,
+          _blurb$css = blurb.css;
+      _blurb$css = _blurb$css === void 0 ? {} : _blurb$css;
+      var _blurb$css$borderColo = _blurb$css.borderColor,
+          borderColor = _blurb$css$borderColo === void 0 ? "#2f81cd" : _blurb$css$borderColo;
+      return /*#__PURE__*/React.createElement(Blurb, {
+        element: element,
+        template: blurbTemplate,
+        css: {
+          borderColor: borderColor
+        }
+      });
+
+    case "blockquote":
+      var _blockquote$template = blockquote.template,
+          blockQuoteTemplate = _blockquote$template === void 0 ? "default" : _blockquote$template,
+          _blockquote$css = blockquote.css;
+      _blockquote$css = _blockquote$css === void 0 ? {} : _blockquote$css;
+      var _blockquote$css$iconT = _blockquote$css.iconType,
+          iconType = _blockquote$css$iconT === void 0 ? "edgeIcon" : _blockquote$css$iconT,
+          _blockquote$css$block = _blockquote$css.blockQuoteColor,
+          blockQuoteColor = _blockquote$css$block === void 0 ? "#2f81cd" : _blockquote$css$block,
+          _blockquote$css$backg = _blockquote$css.backgroundShade,
+          backgroundShade = _blockquote$css$backg === void 0 ? "" : _blockquote$css$backg;
+      return /*#__PURE__*/React.createElement(BlockQuote, {
+        element: element,
+        template: blockQuoteTemplate,
+        css: {
+          iconType: iconType,
+          blockQuoteColor: blockQuoteColor,
+          backgroundShade: backgroundShade
+        }
+      });
+
+    case "quote":
+      var _quote$template = quote.template,
+          quoteTemplate = _quote$template === void 0 ? "borderNone" : _quote$template,
+          _quote$css = quote.css;
+      _quote$css = _quote$css === void 0 ? {} : _quote$css;
+      var _quote$css$borderColo = _quote$css.borderColor,
+          quoteBorderColor = _quote$css$borderColo === void 0 ? "#2f81cd" : _quote$css$borderColo;
+      return /*#__PURE__*/React.createElement(Quote, {
+        element: element,
+        template: quoteTemplate,
+        css: {
+          borderColor: quoteBorderColor
+        }
+      });
+
+    case "bigfact":
+      return /*#__PURE__*/React.createElement(BigFact, {
+        element: element
+      });
+
+    case "also-read":
+      var _alsoRead$template = alsoRead.template,
+          alsoReadTemplate = _alsoRead$template === void 0 ? "default" : _alsoRead$template,
+          _alsoRead$css = alsoRead.css;
+      _alsoRead$css = _alsoRead$css === void 0 ? {} : _alsoRead$css;
+      var _alsoRead$css$textCol = _alsoRead$css.textColor,
+          textColor = _alsoRead$css$textCol === void 0 ? "#000" : _alsoRead$css$textCol,
+          _alsoRead$opts = alsoRead.opts;
+      _alsoRead$opts = _alsoRead$opts === void 0 ? {} : _alsoRead$opts;
+      var _alsoRead$opts$title = _alsoRead$opts.title,
+          title = _alsoRead$opts$title === void 0 ? "" : _alsoRead$opts$title;
+      return /*#__PURE__*/React.createElement(AlsoRead, {
+        story: story,
+        element: element,
+        template: alsoReadTemplate,
+        css: {
+          textColor: textColor
+        },
+        opts: {
+          title: title
+        }
+      });
+
+    case "image":
+      return /*#__PURE__*/React.createElement(Image, {
+        element: element
+      });
+
+    case "q-and-a":
+      var _qaElement$template = qaElement.template,
+          qaTemplate = _qaElement$template === void 0 ? "default" : _qaElement$template,
+          _qaElement$css = qaElement.css;
+      _qaElement$css = _qaElement$css === void 0 ? {} : _qaElement$css;
+      var _qaElement$css$iconCo = _qaElement$css.iconColor,
+          iconColor = _qaElement$css$iconCo === void 0 ? "" : _qaElement$css$iconCo,
+          _qaElement$opts = qaElement.opts;
+      _qaElement$opts = _qaElement$opts === void 0 ? {} : _qaElement$opts;
+      var _qaElement$opts$defau = _qaElement$opts.defaultIconType,
+          defaultIconType = _qaElement$opts$defau === void 0 ? "edge" : _qaElement$opts$defau;
+      return /*#__PURE__*/React.createElement(QuestionAnswer, {
+        element: element,
+        opts: {
+          type: "q-and-a",
+          defaultIconType: defaultIconType
+        },
+        template: qaTemplate,
+        css: {
+          iconColor: iconColor
+        }
+      });
+
+    case "question":
+      var _questionElement$temp = questionElement.template,
+          questionTemplate = _questionElement$temp === void 0 ? "default" : _questionElement$temp,
+          _questionElement$css = questionElement.css;
+      _questionElement$css = _questionElement$css === void 0 ? {} : _questionElement$css;
+      var _questionElement$css$ = _questionElement$css.questionIconColor,
+          questionIconColor = _questionElement$css$ === void 0 ? "" : _questionElement$css$,
+          _questionElement$opts = questionElement.opts;
+      _questionElement$opts = _questionElement$opts === void 0 ? {} : _questionElement$opts;
+      var _questionElement$opts2 = _questionElement$opts.defaultQuestionIconType,
+          defaultQuestionIconType = _questionElement$opts2 === void 0 ? "edge" : _questionElement$opts2;
+      return /*#__PURE__*/React.createElement(QuestionAnswer, {
+        element: element,
+        opts: {
+          type: "question",
+          defaultIconType: defaultQuestionIconType
+        },
+        template: questionTemplate,
+        css: {
+          iconColor: questionIconColor
+        }
+      });
+
+    case "answer":
+      var _answerElement$templa = answerElement.template,
+          answerTemplate = _answerElement$templa === void 0 ? "default" : _answerElement$templa,
+          _answerElement$css = answerElement.css;
+      _answerElement$css = _answerElement$css === void 0 ? {} : _answerElement$css;
+      var _answerElement$css$an = _answerElement$css.answerIconColor,
+          answerIconColor = _answerElement$css$an === void 0 ? "" : _answerElement$css$an,
+          _answerElement$opts = answerElement.opts;
+      _answerElement$opts = _answerElement$opts === void 0 ? {} : _answerElement$opts;
+      var _answerElement$opts$d = _answerElement$opts.defaultAnswerIconType,
+          defaultAnswerIconType = _answerElement$opts$d === void 0 ? "edge" : _answerElement$opts$d;
+      return /*#__PURE__*/React.createElement(QuestionAnswer, {
+        element: element,
+        opts: {
+          type: "answer",
+          defaultIconType: defaultAnswerIconType
+        },
+        template: answerTemplate,
+        css: {
+          iconColor: answerIconColor
+        }
+      });
+
+    case "gallery":
+      return /*#__PURE__*/React.createElement("div", {
+        className: "content-style",
+        id: "image-gallery-".concat(storyElementId)
+      }, /*#__PURE__*/React.createElement(ImageGallery, {
+        element: element
+      }));
+
+    case "slideshow":
+      return /*#__PURE__*/React.createElement("div", {
+        className: "content-style",
+        id: "image-slideshow-".concat(storyElementId)
+      }, /*#__PURE__*/React.createElement(ImageSlideshow, {
+        element: element
+      }));
+
+    case "youtube-video":
+    case "dailymotion-video":
+      return /*#__PURE__*/React.createElement("div", {
+        className: "content-style",
+        id: "video-".concat(storyElementId)
+      }, /*#__PURE__*/React.createElement(Video, {
+        element: element,
+        story: story,
+        loadIframeOnClick: true
+      }));
+
+    case "attachment":
+      return /*#__PURE__*/React.createElement(Attachment, {
+        element: element
+      });
+
+    case "tweet":
+    case "jsembed":
+      return /*#__PURE__*/React.createElement("div", {
+        className: "content-style",
+        id: "jsembed-".concat(storyElementId)
+      }, /*#__PURE__*/React.createElement(StoryElement, {
+        element: element
+      }));
+
+    case "references":
+      var _references$opts = references.opts;
+      _references$opts = _references$opts === void 0 ? {} : _references$opts;
+      var _references$opts$show = _references$opts.showHeadline,
+          showHeadline = _references$opts$show === void 0 ? true : _references$opts$show,
+          _references$opts$head = _references$opts.headlineText,
+          headlineText = _references$opts$head === void 0 ? "" : _references$opts$head;
+      return /*#__PURE__*/React.createElement(Reference, {
+        element: element,
+        opts: {
+          showHeadline: showHeadline,
+          headlineText: headlineText
+        }
+      });
+
+    default:
+      return /*#__PURE__*/React.createElement("div", {
+        className: "content-style",
+        id: "element-".concat(storyElementId)
+      }, /*#__PURE__*/React.createElement(StoryElement, {
+        element: element,
+        story: story
+      }));
+  }
+};
+
+var MainImageWrapper = function MainImageWrapper(_ref) {
+  var imageElement = _ref.imageElement,
+      story = _ref.story,
+      children = _ref.children,
+      config = _ref.config,
+      card = _ref.card;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: config.theme
+    }
+  }, /*#__PURE__*/React.createElement(Image, {
+    element: imageElement,
+    caption: false
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "story-element-card-m_image-share__2V7dB"
+  }, /*#__PURE__*/React.createElement(CaptionAttribution, {
+    element: imageElement,
+    config: config
+  }), /*#__PURE__*/React.createElement(SocialShare, {
+    template: SocialShareTemplate,
+    title: story.headline,
+    theme: config.theme,
+    fullUrl: encodeURI("".concat(get(story, ["url"], ""), "?cardId=").concat(get(card, ["id"], -1)))
+  }))));
+};
+
+MainImageWrapper.propTypes = {
+  story: PropTypes.object,
+  imageElement: PropTypes.object,
+  config: PropTypes.object,
+  children: PropTypes.node,
+  card: PropTypes.shape({
+    id: PropTypes.string
+  })
+};
+export var StoryElementCard = function StoryElementCard(_ref2) {
+  var story = _ref2.story,
+      card = _ref2.card,
+      _ref2$heroVideoElemen = _ref2.heroVideoElementId,
+      heroVideoElementId = _ref2$heroVideoElemen === void 0 ? -1 : _ref2$heroVideoElemen,
+      config = _ref2.config,
+      isLive = _ref2.isLive,
+      theme = _ref2.theme,
+      adComponent = _ref2.adComponent,
+      widgetComp = _ref2.widgetComp;
+  var textColor = getTextColor(theme);
+  var isLiveBlog = isLive ? "live-blog" : "";
+  var shouldRunFBMobileVideoFix = true;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "arr--story-page-card-wrapper"
+  }, get(card, ["story-elements"], []).map(function (element, index) {
+    if (element.id === heroVideoElementId) return false;
+
+    if (element.subtype && element.subtype === "facebook-post" && shouldRunFBMobileVideoFix) {
+      facebookMobileVideoResizeFix();
+      shouldRunFBMobileVideoFix = false;
+    }
+
+    var tableStyle = element && element.subtype === "table" ? "table" : "";
+    var cardId = get(card, ["id"], "");
+    return /*#__PURE__*/React.createElement("div", {
+      key: element.id,
+      className: "arr--element-container " + _getClassName("element-container ".concat(isLiveBlog, " ").concat(tableStyle, " ").concat(textColor), _styleModuleImportMap)
+    }, getElement(story, element, config, adComponent, widgetComp, index, cardId));
+  }));
+};
+StoryElementCard.propTypes = {
+  story: PropTypes.object,
+  card: PropTypes.array,
+  heroVideoElementId: PropTypes.number,
+  config: PropTypes.object,
+  isLive: PropTypes.bool,
+  theme: PropTypes.string,
+  adComponent: PropTypes.func,
+  widgetComp: PropTypes.func
+};
+export var PhotoStoryElement = function PhotoStoryElement(_ref3) {
+  var _ref3$card = _ref3.card,
+      card = _ref3$card === void 0 ? {} : _ref3$card,
+      config = _ref3.config,
+      story = _ref3.story,
+      adComponent = _ref3.adComponent,
+      widgetComp = _ref3.widgetComp;
+  var shouldRunFBMobileVideoFix = true;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "story-element-card-m_story-card__H2VYl"
+  }, get(card, ["story-elements"], []).map(function (element, index) {
+    var cardId = get(card, ["id"], "");
+
+    if (element.type === "image") {
+      return /*#__PURE__*/React.createElement(MainImageWrapper, {
+        imageElement: element,
+        story: story,
+        config: config,
+        card: card
+      });
+    } else {
+      if (element.subtype && element.subtype === "facebook-post" && shouldRunFBMobileVideoFix) {
+        facebookMobileVideoResizeFix();
+        shouldRunFBMobileVideoFix = false;
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: "story-element-card-m_element-container__1ZeJL",
+        key: index
+      }, getElement(story, element, config, adComponent, widgetComp, index, cardId));
+    }
+  }));
+};
+PhotoStoryElement.propTypes = {
+  story: PropTypes.object,
+  card: PropTypes.object,
+  config: PropTypes.object,
+  adComponent: PropTypes.func,
+  widgetComp: PropTypes.func
+};
+export var SlotAfterStory = function SlotAfterStory(_ref4) {
+  var _ref4$id = _ref4.id,
+      id = _ref4$id === void 0 ? "" : _ref4$id,
+      _ref4$element = _ref4.element,
+      element = _ref4$element === void 0 ? {} : _ref4$element,
+      AdComponent = _ref4.AdComponent,
+      WidgetComp = _ref4.WidgetComp;
+
+  switch (element.type) {
+    case "ad":
+      return /*#__PURE__*/React.createElement(AdComponent, _extends({}, element, {
+        id: "ad-after-story-".concat(id)
+      }));
+
+    case "widget":
+      return /*#__PURE__*/React.createElement(WidgetComp, {
+        widgetCode: element.config.customCode,
+        id: "widget-after-story-".concat(id)
+      });
+
+    default:
+      return null;
+  }
+};
+SlotAfterStory.propTypes = {
+  id: PropTypes.string,
+  element: PropTypes.object,
+  AdComponent: PropTypes.func,
+  WidgetComp: PropTypes.func
+};

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

@@ -0,0 +1,25 @@
+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";
+var story = generateStory();
+var cards = story.cards;
+withStore("Molecules/Story Element Card", {
+  qt: {
+    config: {
+      "cdn-image": "thumbor-stg.assettype.com",
+      mountAt: "/sub-directory"
+    }
+  }
+}, Readme).add("Default", function () {
+  var config = {
+    theme: color("Background Color", "#fff")
+  };
+  return /*#__PURE__*/React.createElement(StoryElementCard, {
+    story: story,
+    card: cards[0],
+    config: config
+  });
+});

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

@@ -0,0 +1,78 @@
+@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 {
+  border-bottom: 1px solid var(--arrow-c-mono5);
+  margin-bottom: var(--arrow-spacing-xl);
+}
+
+.element-container :global(.story-element-jsembed) iframe {
+  max-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));
+  }
+}
+
+.table :global(.story-element-data-table) {
+  max-width: calc(100vw - 24px);
+  @include tablet {
+    max-width: calc(calc(calc(1024px / 12) * 8) - 24px);
+    @include desktop {
+      max-width: calc(calc(calc(1025px / 12) * 8) - 24px);
+    }
+  }
+}
+
+.dark {
+  color: var(--arrow-c-mono2);
+}
+.light {
+  color: var(--arrow-c-invert-mono2);
+}