@quintype/arrow 3.15.1-perf.5 → 3.15.1-perf.9

package/cjs/index.js

@@ -2222,7 +2222,7 @@ styleInject(css_248z$1c);
 var _excluded$d = ["element", "opts", "css", "story", "config"];
 var _styleModuleImportMap$S = {
   "./text.m.css": {
-    "viewports": "\"../../../../../assets/stylesheets/viewports.m.css\"",
+    "viewports": "\"../../../../stylesheets/viewports.m.css\"",
     "mobile": "768px",
     "promotionalMessage": "text-m_promotionalMessage__CUsPM",
     "textElement": "text-m_textElement__e3QEt",
@@ -2288,7 +2288,7 @@ styleInject(css_248z$1b);
 var _excluded$c = ["element", "template", "css", "story", "config", "render"];
 var _styleModuleImportMap$R = {
   "./quote.m.css": {
-    "viewports": "\"../../../../../assets/stylesheets/viewports.m.css\"",
+    "viewports": "\"../../../../stylesheets/viewports.m.css\"",
     "mobile": "768px",
     "quote": "quote-m_quote__13tTt",
     "text": "quote-m_text__2hXSE",
@@ -2368,7 +2368,7 @@ styleInject(css_248z$1a);
 var _excluded$b = ["element", "template", "opts", "css", "story", "config", "render"];
 var _styleModuleImportMap$Q = {
   "./blurb.m.css": {
-    "viewports": "\"../../../../../assets/stylesheets/viewports.m.css\"",
+    "viewports": "\"../../../../stylesheets/viewports.m.css\"",
     "mobile": "768px",
     "blurb": "blurb-m_blurb__3pXi5",
     "blurb-default": "blurb-m_blurb-default__JR86y",
@@ -2456,7 +2456,7 @@ styleInject(css_248z$19);
 var _excluded$a = ["story", "element", "template", "opts", "css", "config", "render"];
 var _styleModuleImportMap$P = {
   "./also-read.m.css": {
-    "viewports": "\"../../../../../assets/stylesheets/viewports.m.css\"",
+    "viewports": "\"../../../../stylesheets/viewports.m.css\"",
     "mobile": "768px",
     "card-image": "also-read-m_card-image__3CwAv",
     "default-text": "also-read-m_default-text__hp2dp",
@@ -2603,7 +2603,7 @@ styleInject(css_248z$18);
 var _excluded$9 = ["element", "template", "opts", "css", "story", "config", "render"];
 var _styleModuleImportMap$O = {
   "./summary.m.css": {
-    "viewports": "\"../../../../../assets/stylesheets/viewports.m.css\"",
+    "viewports": "\"../../../../stylesheets/viewports.m.css\"",
     "mobile": "768px",
     "headline": "summary-m_headline__30sie",
     "summary": "summary-m_summary__3-CnO",
@@ -2757,7 +2757,7 @@ styleInject(css_248z$16);
 var _excluded$8 = ["element", "template", "css", "story", "config", "render"];
 var _styleModuleImportMap$N = {
   "./block-quote.m.css": {
-    "viewports": "\"../../../../../assets/stylesheets/viewports.m.css\"",
+    "viewports": "\"../../../../stylesheets/viewports.m.css\"",
     "mobile": "768px",
     "blockquote-withBackground": "block-quote-m_blockquote-withBackground__1yW-u",
     "icon": "block-quote-m_icon__m-EIZ",
@@ -3152,7 +3152,7 @@ styleInject(css_248z$12);
 
 var _styleModuleImportMap$M = {
   "./caption-attribution.m.css": {
-    "viewports": "\"../../../../assets/stylesheets/viewports.m.css\"",
+    "viewports": "\"../../../stylesheets/viewports.m.css\"",
     "mobile": "768px",
     "caption": "caption-attribution-m_caption__BM5NN",
     "wrapper": "caption-attribution-m_wrapper__oHBX7",
@@ -3322,7 +3322,7 @@ styleInject(css_248z$10);
 var _excluded$5 = ["element", "story", "config"];
 var _styleModuleImportMap$L = {
   "./big-fact.m.css": {
-    "viewports": "\"../../../../../assets/stylesheets/viewports.m.css\"",
+    "viewports": "\"../../../../stylesheets/viewports.m.css\"",
     "mobile": "768px",
     "bigfact-element": "big-fact-m_bigfact-element__3uAwv",
     "light": "big-fact-m_light__ha49M",
@@ -3395,7 +3395,7 @@ styleInject(css_248z$$);
 var _excluded$3 = ["element", "template", "css", "story", "config", "opts", "render"];
 var _styleModuleImportMap$K = {
   "./question-answer.m.css": {
-    "viewports": "\"../../../../../assets/stylesheets/viewports.m.css\"",
+    "viewports": "\"../../../../stylesheets/viewports.m.css\"",
     "mobile": "768px",
     "qa-withAuthorImage": "question-answer-m_qa-withAuthorImage__1JB3N",
     "a-element": "question-answer-m_a-element__BTxfl",
@@ -3563,7 +3563,7 @@ styleInject(css_248z$_);
 var _excluded$2 = ["element", "template", "opts", "story", "config"];
 var _styleModuleImportMap$J = {
   "./image-gallery.m.css": {
-    "viewports": "\"../../../../../assets/stylesheets/viewports.m.css\"",
+    "viewports": "\"../../../../stylesheets/viewports.m.css\"",
     "mobile": "768px",
     "image-gallery": "image-gallery-m_image-gallery__1Q7if",
     "image": "image-gallery-m_image__3qwSJ",
@@ -3656,7 +3656,7 @@ styleInject(css_248z$Z);
 var _excluded$1 = ["element", "config", "opts"];
 var _styleModuleImportMap$I = {
   "./reference.m.css": {
-    "viewports": "\"../../../../../assets/stylesheets/viewports.m.css\"",
+    "viewports": "\"../../../../stylesheets/viewports.m.css\"",
     "mobile": "768px",
     "tablet": "992px",
     "wrapper": "reference-m_wrapper__1C4Ot",
@@ -3729,7 +3729,7 @@ styleInject(css_248z$Y);
 var _excluded = ["element", "render"];
 var _styleModuleImportMap$H = {
   "./attachment.m.css": {
-    "viewports": "\"../../../../../assets/stylesheets/viewports.m.css\"",
+    "viewports": "\"../../../../stylesheets/viewports.m.css\"",
     "mobile": "768px",
     "tablet": "992px",
     "headline": "attachment-m_headline__kP7Hs",
@@ -5241,7 +5241,7 @@ styleInject(css_248z$Q);
 
 var _styleModuleImportMap$A = {
   "./page-intro-card.m.css": {
-    "viewports": "\"../../../../assets/stylesheets/viewports.m.css\"",
+    "viewports": "\"../../../stylesheets/viewports.m.css\"",
     "mobile": "768px",
     "tablet": "992px",
     "author-page-wrapper": "page-intro-card-m_author-page-wrapper__2HiAv",
@@ -5650,7 +5650,7 @@ styleInject(css_248z$M);
 
 var _styleModuleImportMap$x = {
   "./author-card.m.css": {
-    "viewports": "\"../../../../assets/stylesheets/viewports.m.css\"",
+    "viewports": "\"../../../stylesheets/viewports.m.css\"",
     "mobile": "768px",
     "author-card-wrapper": "author-card-m_author-card-wrapper__2tErR",
     "centerAligned": "author-card-m_centerAligned__2h4Yq",
@@ -5777,7 +5777,7 @@ styleInject(css_248z$L);
 
 var _styleModuleImportMap$w = {
   "./publish-details.m.css": {
-    "viewports": "\"../../../../assets/stylesheets/viewports.m.css\"",
+    "viewports": "\"../../../stylesheets/viewports.m.css\"",
     "mobile": "768px",
     "timeStamp": "publish-details-m_timeStamp__2yL0k",
     "dark": "publish-details-m_dark__1L30z",
@@ -10790,7 +10790,7 @@ styleInject(css_248z$n);
 
 var _styleModuleImportMap$g = {
   "./tag-intro-card.module.css": {
-    "viewports": "\"../../../../assets/stylesheets/viewports.m.css\"",
+    "viewports": "\"../../../stylesheets/viewports.m.css\"",
     "mobile": "768px",
     "description": "tag-intro-card-module_description__2PKNY",
     "wrapper": "tag-intro-card-module_wrapper__2bz6X",
@@ -10855,7 +10855,7 @@ styleInject(css_248z$m);
 
 var _styleModuleImportMap$f = {
   "./author-image.m.css": {
-    "viewports": "\"../../../../assets/stylesheets/viewports.m.css\"",
+    "viewports": "\"../../../stylesheets/viewports.m.css\"",
     "mobile": "768px",
     "tablet": "992px",
     "image-container": "author-image-m_image-container__19WNd",
@@ -10984,7 +10984,7 @@ var Pinterest = function Pinterest() {
 
 var _styleModuleImportMap$e = {
   "./author-intro.m.css": {
-    "viewports": "\"../../../../assets/stylesheets/viewports.m.css\"",
+    "viewports": "\"../../../stylesheets/viewports.m.css\"",
     "mobile": "768px",
     "tablet": "992px",
     "connect": "author-intro-m_connect__15zIX",
@@ -11406,7 +11406,7 @@ styleInject(css_248z$h);
 
 var _styleModuleImportMap$d = {
   "./magazine-editions.m.css": {
-    "viewports": "\"../../../../assets/stylesheets/viewports.m.css\"",
+    "viewports": "\"../../../stylesheets/viewports.m.css\"",
     "mobile": "768px",
     "tablet": "992px",
     "container": "magazine-editions-m_container__25yef",
@@ -11520,7 +11520,7 @@ styleInject(css_248z$g);
 
 var _styleModuleImportMap$c = {
   "../MagazineHeaderCard/magazine-cards.m.css": {
-    "viewports": "\"../../../../assets/stylesheets/viewports.m.css\"",
+    "viewports": "\"../../../stylesheets/viewports.m.css\"",
     "mobile": "768px",
     "tablet": "992px",
     "magazine-header": "magazine-cards-m_magazine-header__2pSI3",
@@ -11680,7 +11680,7 @@ var MagazineWidget = StateProvider(MagazineWidgetBase);
 
 var _styleModuleImportMap$b = {
   "./magazine-cards.m.css": {
-    "viewports": "\"../../../../assets/stylesheets/viewports.m.css\"",
+    "viewports": "\"../../../stylesheets/viewports.m.css\"",
     "mobile": "768px",
     "tablet": "992px",
     "magazine-header": "magazine-cards-m_magazine-header__2pSI3",
@@ -11788,7 +11788,7 @@ styleInject(css_248z$f);
 
 var _styleModuleImportMap$a = {
   "./four-col-sixteen-stories.m.css": {
-    "viewports": "\"../../../../assets/stylesheets/viewports.m.css\"",
+    "viewports": "\"../../../stylesheets/viewports.m.css\"",
     "mobile": "768px",
     "desktop": "1025px",
     "componentWrapper": "four-col-sixteen-stories-m_componentWrapper__uBwJ6",
@@ -12105,7 +12105,7 @@ styleInject(css_248z$d);
 
 var _styleModuleImportMap$9 = {
   "./two-col-six-stories.m.css": {
-    "viewports": "\"../../../../assets/stylesheets/viewports.m.css\"",
+    "viewports": "\"../../../stylesheets/viewports.m.css\"",
     "mobile": "768px",
     "desktop": "1025px",
     "two-col-six-stories": "two-col-six-stories-m_two-col-six-stories__2L-D_",
@@ -12275,7 +12275,7 @@ styleInject(css_248z$c);
 
 var _styleModuleImportMap$8 = {
   "./two-col-four-story-highlight.m.css": {
-    "viewports": "\"../../../../assets/stylesheets/viewports.m.css\"",
+    "viewports": "\"../../../stylesheets/viewports.m.css\"",
     "mobile": "768px",
     "desktop": "1025px",
     "componentWrapper": "two-col-four-story-highlight-m_componentWrapper__1MNn3",
@@ -12424,7 +12424,7 @@ styleInject(css_248z$b);
 
 var _styleModuleImportMap$7 = {
   "./opinion-collection.m.css": {
-    "viewports": "\"../../../../assets/stylesheets/viewports.m.css\"",
+    "viewports": "\"../../../stylesheets/viewports.m.css\"",
     "mobile": "768px",
     "desktop": "1025px",
     "opinion-collection": "opinion-collection-m_opinion-collection__1Bc7h",
@@ -12839,7 +12839,7 @@ styleInject(css_248z$9);
 
 var _styleModuleImportMap$6 = {
   "./six-col-six-stories.m.css": {
-    "viewports": "\"../../../../assets/stylesheets/viewports.m.css\"",
+    "viewports": "\"../../../stylesheets/viewports.m.css\"",
     "mobile": "768px",
     "desktop": "1025px",
     "wrapper": "six-col-six-stories-m_wrapper__2k2bf",
@@ -13074,7 +13074,7 @@ styleInject(css_248z$6);
 
 var _styleModuleImportMap$4 = {
   "./two-col-ten-stories-sidebar.m.css": {
-    "viewports": "\"../../../../assets/stylesheets/viewports.m.css\"",
+    "viewports": "\"../../../stylesheets/viewports.m.css\"",
     "mobile": "768px",
     "desktop": "1025px",
     "component-wrapper": "two-col-ten-stories-sidebar-m_component-wrapper__2R--T",
@@ -13406,7 +13406,7 @@ styleInject(css_248z$4);
 
 var _styleModuleImportMap$3 = {
   "./four-tabbed-big-story-slider.m.css": {
-    "viewports": "\"../../../../assets/stylesheets/viewports.m.css\"",
+    "viewports": "\"../../../stylesheets/viewports.m.css\"",
     "mobile": "768px",
     "desktop": "1025px",
     "four-tabbed-big-story-slider": "four-tabbed-big-story-slider-m_four-tabbed-big-story-slider__2DfBf",

package/esm/components/Atoms/AdPlaceholder/ads.m.css

@@ -0,0 +1,13 @@
+.ads {
+  background-color: var(--arrow-c-mono5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.ad-text {
+  color: var(--arrow-c-mono3);
+}
+.ad-wrapper {
+  display: flex;
+  justify-content: center;
+}

package/esm/components/Atoms/AdPlaceholder/index.js

@@ -0,0 +1,28 @@
+import React from "react";
+import PropTypes from "prop-types";
+import "./ads.m.css";
+export var AdPlaceholder = function AdPlaceholder(_ref) {
+  var height = _ref.height,
+      width = _ref.width;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "arr--ad-wrapper ads-m_ad-wrapper__3QXiQ"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ads-m_ads__3PzYg",
+    style: {
+      height: height,
+      width: width
+    }
+  }, /*#__PURE__*/React.createElement("h3", {
+    className: "ads-m_ad-text__3TdhV"
+  }, "LEADERBOARD ")));
+};
+AdPlaceholder.propTypes = {
+  // height of ad
+  height: PropTypes.string,
+  // width of ad
+  width: PropTypes.string
+};
+AdPlaceholder.defaultProps = {
+  width: "720px",
+  height: "90px"
+};

package/esm/components/Atoms/Author/README.md

@@ -0,0 +1,19 @@
+# Author
+
+Displays the author for the story card based on the first author from the Story API reponse.
+
+## Usage
+
+```jsx
+<Author story={story} />
+```
+
+```jsx
+<Author story={story} hideAuthorImage />
+```
+
+```jsx
+<Author story={story} prefix="By" />
+```
+
+<!-- PROPS -->

package/esm/components/Atoms/Author/author.m.css

@@ -0,0 +1,65 @@
+@custom-media --viewport-medium (width >= 768px);
+
+.author {
+  display: flex;
+  align-items: center;
+  color: var(--arrow-c-mono4);
+  margin-bottom: var(--arrow-spacing-xs);
+}
+
+.author-image {
+  border-radius: 100%;
+  width: var(--arrow-spacing-l);
+  height: var(--arrow-spacing-l);
+  margin-right: var(--arrow-spacing-xs);
+  overflow: hidden;
+}
+
+.author-image figure,
+.author-image img {
+  /* width & height need to be explicitly set for improving CLS */
+  height: 100%;
+  width: 100%;
+}
+
+.author-name {
+  margin: auto var(--arrow-spacing-xs) auto 0;
+}
+
+.bottom-fix {
+  margin-top: auto;
+}
+
+.prefix {
+  margin: auto var(--arrow-spacing-xxs) auto 0;
+}
+
+.rtl-image {
+  display: none;
+}
+
+html[dir="rtl"] {
+  .author-name {
+    margin-right: 0;
+  }
+
+  .prefix {
+    margin-right: 0;
+    margin-left: var(--arrow-spacing-xxs);
+  }
+
+  .ltr-image {
+    display: none;
+  }
+
+  .rtl-image {
+    display: block;
+  }
+}
+
+.dark {
+  color: var(--arrow-c-mono4);
+}
+.light {
+  color: var(--arrow-c-invert-mono4);
+}

package/esm/components/Atoms/Author/index.js

@@ -0,0 +1,109 @@
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+import React from "react";
+import PropTypes from "prop-types";
+import { get } from "lodash";
+import { useStateValue } from "../../SharedContext";
+import { ResponsiveImage, Link } from "@quintype/components";
+import { getTextColor } from "../../../utils/utils";
+import { connect } from "react-redux";
+import "./author.m.css";
+var _styleModuleImportMap = {
+  "./author.m.css": {
+    "author": "author-m_author__WRuLm",
+    "author-image": "author-m_author-image__3q2oc",
+    "author-name": "author-m_author-name__3WP-O",
+    "bottom-fix": "author-m_bottom-fix__223TT",
+    "prefix": "author-m_prefix__YSInK",
+    "rtl-image": "author-m_rtl-image__2nglD",
+    "ltr-image": "author-m_ltr-image__3bc0L",
+    "dark": "author-m_dark__2TTlp",
+    "light": "author-m_light__3y8_x"
+  }
+};
+
+var AuthorBase = function AuthorBase(_ref) {
+  var story = _ref.story,
+      hideAuthorImage = _ref.hideAuthorImage,
+      isBottom = _ref.isBottom,
+      _ref$prefix = _ref.prefix,
+      prefix = _ref$prefix === void 0 ? "" : _ref$prefix,
+      _ref$config = _ref.config,
+      config = _ref$config === void 0 ? {} : _ref$config;
+  var configData = useStateValue() || {};
+  var isAuthor = get(configData, ["showAuthor"], true);
+
+  var _get = get(story, ["authors", "0"], ""),
+      avatarUrl = _get["avatar-url"],
+      avatarS3Key = _get["avatar-s3-key"],
+      authorName = _get.name,
+      slug = _get.slug;
+
+  var isBottomClasses = isBottom ? "bottom-fix" : "";
+  var textColor = getTextColor(configData.theme);
+  var mountAt = get(config, ["mountAt"], "");
+
+  var authorImage = function authorImage(dir) {
+    if (!avatarUrl && !avatarS3Key) {
+      return null;
+    }
+
+    return /*#__PURE__*/React.createElement("div", {
+      "data-test-id": "author-image",
+      className: _getClassName("author-image ".concat(dir, "-image"), _styleModuleImportMap)
+    }, /*#__PURE__*/React.createElement("figure", null, avatarS3Key ? /*#__PURE__*/React.createElement(ResponsiveImage, {
+      slug: avatarS3Key,
+      "aspect-ratio": [1, 1],
+      defaultWidth: 400,
+      imgParams: {
+        auto: ["format", "compress"]
+      },
+      alt: authorName
+    }) : /*#__PURE__*/React.createElement("img", {
+      src: avatarUrl
+    })));
+  };
+
+  var isPrefix = function isPrefix(dir) {
+    if (prefix) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "arr-author-prefix " + _getClassName("prefix ".concat(textColor), _styleModuleImportMap)
+      }, prefix);
+    }
+
+    return !hideAuthorImage && authorImage(dir);
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isAuthor && /*#__PURE__*/React.createElement(Link, {
+    href: "".concat(mountAt, "/author/") + slug,
+    "aria-label": "author-name",
+    className: "author-name arr-author-name arrow-component " + _getClassName("author ".concat(isBottomClasses), _styleModuleImportMap)
+  }, isPrefix("ltr"), /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "author-name",
+    className: "author-name " + _getClassName("author-name ".concat(textColor), _styleModuleImportMap)
+  }, authorName || story["author-name"]), !prefix && isPrefix("rtl")));
+};
+
+function mapStateToProps(state) {
+  return {
+    config: get(state, ["qt", "config"], {})
+  };
+}
+
+export var Author = connect(mapStateToProps)(AuthorBase);
+AuthorBase.propTypes = {
+  /** The Story Object from the API response */
+  story: PropTypes.object.isRequired,
+
+  /** Hide Author Avatar Image */
+  hideAuthorImage: PropTypes.bool,
+  // fix Author bottom of the storyCard
+  isBottom: PropTypes.bool,
+  // fix prefix before the author name
+  prefix: PropTypes.string,
+  config: PropTypes.object
+};
+AuthorBase.defaultProps = {
+  hideAuthorImage: false,
+  isBottom: false,
+  prefix: ""
+};

package/esm/components/Atoms/Author/stories.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { generateStory } from "../../Fixture";
+import { withStore } from "../../../../storybook";
+import { Author } from "./index";
+import Readme from "./README.md";
+var story = generateStory();
+withStore("Atoms/Author", {
+  qt: {
+    config: {
+      "cdn-image": "thumbor-stg.assettype.com",
+      mountAt: "/sub-directory"
+    }
+  }
+}, Readme).add("With Author Image", function () {
+  return /*#__PURE__*/React.createElement(Author, {
+    story: story
+  });
+}).add("With Prefix", function () {
+  return /*#__PURE__*/React.createElement(Author, {
+    story: story,
+    prefix: "By"
+  });
+}).add("Without Author Image", function () {
+  return /*#__PURE__*/React.createElement(Author, {
+    story: story,
+    hideAuthorImage: true
+  });
+});

package/esm/components/Atoms/AuthorCard/README.md

@@ -0,0 +1,47 @@
+# Author Card
+
+Displays the author details as a card for the story page
+
+### Use as a component
+
+
+####  default template
+
+```jsx
+ <AuthorCard story={story}/>
+```
+
+#### Author card with right align template
+
+```jsx
+<AuthorCard story={story} template="rightAligned" />
+```
+
+#### Author card with center align template
+
+```jsx
+<AuthorCard story={story} template="centerAligned" />
+```
+
+#### Author card with default align template
+
+```jsx
+<AuthorCard story={story}  template="default" />
+```
+
+#### Author card with left align template
+
+```jsx
+<AuthorCard story={story}  template="leftAligned" />
+```
+#### Author card with options
+
+```jsx
+<AuthorCard story={story}  template="default" opts={hideImage: true, hideBio: true}/>
+```
+
+
+<!-- PROPS -->
+
+
+