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

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 -->
+
+
+

package/esm/components/Atoms/AuthorCard/author-card.m.css

@@ -0,0 +1,174 @@
+@value viewports: "../../../../assets/stylesheets/viewports.m.css";
+@value mobile from viewports;
+
+.author-card-wrapper {
+  display: flex;
+}
+
+.author-card-wrapper.centerAligned {
+  display: block;
+  text-align: center;
+}
+
+.author-image-wrapper {
+  display: flex;
+  margin-right: var(--arrow-spacing-m);
+  margin-bottom: var(--arrow-spacing-s);
+  @media (min-width: mobile) {
+    margin-right: var(--arrow-spacing-l);
+  }
+}
+
+.default .author-image-wrapper {
+  margin: 0 12px 0 0;
+}
+
+.centerAligned .author-image-wrapper {
+  justify-content: center;
+  margin-right: 0;
+}
+
+.author-image {
+  margin-left: -100px;
+  overflow: hidden;
+}
+
+.author-image figure {
+  margin: 0;
+}
+
+.author-image img {
+  border-radius: 50%;
+  height: 72px;
+  width: 72px;
+  @media (min-width: mobile) {
+    height: 124px;
+    width: 124px;
+  }
+}
+
+.multi-author-image img {
+  border: solid 2px var(--arrow-c-light);
+}
+
+.default .author-image img {
+  height: 32px;
+  width: 32px;
+}
+
+.default .multi-author-image {
+  margin-left: -24px;
+  border-width: 1px;
+}
+
+.author-image.first-author-image {
+  margin-left: 0;
+}
+
+.author-details-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0;
+  margin-left: var(--arrow-spacing-m);
+  @media (min-width: mobile) {
+    padding: var(--arrow-spacing-xs) var(--arrow-spacing-xs) var(--arrow-spacing-xs) 0;
+    margin-left: var(--arrow-spacing-l);
+  }
+}
+
+.default .author-details-wrapper {
+  margin-left: var(--arrow-spacing-s);
+}
+
+.leftAligned .author-details-wrapper {
+  margin-left: var(--arrow-spacing-m);
+  @media (min-width: mobile) {
+    margin-left: var(--arrow-spacing-l);
+  }
+}
+
+.centerAligned .author-details-wrapper {
+  align-items: center;
+  margin-left: 0;
+}
+
+.author-name-share {
+  display: flex;
+  align-items: center;
+  font-size: var(--arrow-fs-xs);
+  line-height: var(--arrow-lh-1);
+  justify-content: center;
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-s);
+  }
+}
+
+html[dir="rtl"] {
+  .author-image-wrapper {
+    margin-left: var(--arrow-spacing-m);
+    margin-right: 0;
+    @media (min-width: mobile) {
+      margin-left: var(--arrow-spacing-l);
+    }
+  }
+
+  .leftAligned .author-details-wrapper {
+    margin-right: var(--arrow-spacing-m);
+    margin-left: 0;
+    @media (min-width: mobile) {
+      margin-right: var(--arrow-spacing-l);
+    }
+  }
+
+  .multi-author-image {
+    position: relative;
+    right: -100px;
+  }
+
+  .default .multi-author-image {
+    margin-left: -16px;
+    right: -12px;
+    @media (min-width: mobile) {
+      margin-left: -24px;
+      right: -12px;
+    }
+  }
+
+  .author-image.first-author-image {
+    position: static;
+  }
+
+  .centerAligned .author-image-wrapper {
+    margin-left: 0;
+  }
+}
+
+.multiple-author-style {
+  font-size: var(--arrow-fs-xs);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-s);
+  }
+}
+
+.dot-wrapper {
+  margin: 0 var(--arrow-spacing-xxs) 0 var(--arrow-spacing-xs);
+}
+
+.author-bio {
+  font-style: italic;
+  line-height: var(--arrow-lh-5);
+  color: var(--arrow-c-m);
+  font-size: var(--arrow-fs-tiny);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-xs);
+  }
+}
+
+.dark {
+  color: var(--arrow-c-mono2);
+}
+
+.light {
+  color: var(--arrow-c-invert-mono2);
+}

package/esm/components/Atoms/AuthorCard/author-card.test.js

@@ -0,0 +1,93 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import * as React from "react";
+import { mount } from "enzyme";
+import expect from "expect";
+import { generateStory, generateStore } from "../../Fixture/index";
+import { AuthorCard } from "./index";
+import { Provider } from "react-redux";
+var story = generateStory();
+
+var singleAuthorStory = _objectSpread(_objectSpread({}, story), {}, {
+  authors: [{
+    id: 123981,
+    name: "Ravigopal Kesari",
+    slug: "ravigopal-kesari",
+    "avatar-url": "https://lh5.googleusercontent.com/-NhNrHEp1w4M/AAAAAAAAAAI/AAAAAAAAAAs/lzYwVY1BQdQ/photo.jpg?sz=50",
+    "avatar-s3-key": null,
+    "twitter-handle": null,
+    bio: "William Shakespeare was an English poet, playwright, and actor, widely regarded as the greatest writer in the English language and the world’s greatest dramatist. He is often called England’s national poet and the “Bard of Avon”",
+    "contributor-role": {
+      id: 873,
+      name: "Author"
+    }
+  }]
+});
+
+describe("default author card", function () {
+  it("Should render leftAligned template", function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(Provider, {
+      store: generateStore
+    }, /*#__PURE__*/React.createElement(AuthorCard, {
+      story: story,
+      template: "leftAligned"
+    })));
+    expect(wrapper.find({
+      "data-test-id": "author-card-left-aligned"
+    }).prop("className")).toMatch(/leftAligned/);
+  });
+  it("Should render default template", function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(Provider, {
+      store: generateStore
+    }, /*#__PURE__*/React.createElement(AuthorCard, {
+      story: story,
+      template: "default"
+    })));
+    expect(wrapper.find({
+      "data-test-id": "author-card-default"
+    }).prop("className")).toMatch(/default/);
+  });
+  it("Should render centerAligned template", function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(Provider, {
+      store: generateStore
+    }, /*#__PURE__*/React.createElement(AuthorCard, {
+      story: story,
+      template: "centerAligned"
+    })));
+    expect(wrapper.find({
+      "data-test-id": "author-card-center-aligned"
+    }).prop("className")).toMatch(/centerAligned/);
+  });
+  it("Should render author card without image", function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(Provider, {
+      store: generateStore
+    }, /*#__PURE__*/React.createElement(AuthorCard, {
+      story: story,
+      template: "centerAligned",
+      opts: {
+        showImage: false
+      }
+    })));
+    expect(wrapper.find({
+      "data-test-id": "author-image"
+    }).length).toEqual(0);
+  });
+  it("Should render author card without author bio", function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(Provider, {
+      store: generateStore
+    }, /*#__PURE__*/React.createElement(AuthorCard, {
+      story: singleAuthorStory,
+      template: "centerAligned",
+      opts: {
+        showBio: false
+      }
+    })));
+    expect(wrapper.find({
+      "data-test-id": "author-bio"
+    }).length).toEqual(0);
+  });
+});