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

package/esm/components/Rows/AstrologyCollection/index.js

@@ -0,0 +1,272 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+var _styleModuleImportMap = {
+  "./astrology-collection.m.css": {
+    "wrapper": "astrology-collection-m_wrapper__ywsE4",
+    "collection-borderBottom": "astrology-collection-m_collection-borderBottom__14ao3",
+    "collection-borderLeft": "astrology-collection-m_collection-borderLeft__2mK72",
+    "collection-summary": "astrology-collection-m_collection-summary__1FPnb",
+    "tab": "astrology-collection-m_tab__23HlB",
+    "child-collections": "astrology-collection-m_child-collections__2RMob",
+    "child-collection": "astrology-collection-m_child-collection__28kAh",
+    "dark": "astrology-collection-m_dark__36rM-",
+    "light": "astrology-collection-m_light__3iJtV",
+    "open-subchild": "astrology-collection-m_open-subchild__HAXhU",
+    "main-wrapper": "astrology-collection-m_main-wrapper__iLjDo",
+    "main-wrapper-container": "astrology-collection-m_main-wrapper-container__14hWe",
+    "subCollection-stories": "astrology-collection-m_subCollection-stories__2CcHk",
+    "fadeIn": "astrology-collection-m_fadeIn__3nv3m",
+    "card": "astrology-collection-m_card__20FnI",
+    "nomore-stories": "astrology-collection-m_nomore-stories__1Rxb8",
+    "ads": "astrology-collection-m_ads__2XMEk"
+  }
+};
+
+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 React, { useEffect, useState } from "react";
+import axios from "axios";
+import PropTypes from "prop-types";
+import { get } from "lodash";
+import { useDispatch, useSelector } from "react-redux";
+import { collectionToStories } from "@quintype/components";
+import { CollectionName } from "../../Atoms/CollectionName";
+import { Headline } from "../../Atoms/Headline";
+import { LoadmoreButton } from "../../Atoms/Loadmore";
+import { StoryCard } from "../../Molecules/StoryCard";
+import { HeroImage } from "../../Atoms/HeroImage";
+import { getTextColor, generateNavigateSlug, navigateTo, getSlot } from "../../../utils/utils";
+import { StateProvider } from "../../SharedContext";
+import { Loading } from "../../Svgs/Loading/loading";
+import "./astrology-collection.m.css";
+export var AstrologyCollectionBase = function AstrologyCollectionBase(_ref) {
+  var collection = _ref.collection,
+      _ref$config = _ref.config,
+      config = _ref$config === void 0 ? {} : _ref$config;
+  var _config$collectionNam = config.collectionNameBorderColor,
+      collectionNameBorderColor = _config$collectionNam === void 0 ? "" : _config$collectionNam,
+      _config$theme = config.theme,
+      theme = _config$theme === void 0 ? "" : _config$theme,
+      _config$border = config.border,
+      border = _config$border === void 0 ? "" : _config$border,
+      _config$collectionNam2 = config.collectionNameTemplate,
+      collectionNameTemplate = _config$collectionNam2 === void 0 ? "" : _config$collectionNam2,
+      _config$footerButton = config.footerButton,
+      footerButton = _config$footerButton === void 0 ? "" : _config$footerButton,
+      _config$slotConfig = config.slotConfig,
+      slotConfig = _config$slotConfig === void 0 ? [] : _config$slotConfig;
+
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      subCollectionStories = _useState2[0],
+      handleApiData = _useState2[1];
+
+  var _useState3 = useState({}),
+      _useState4 = _slicedToArray(_useState3, 2),
+      cachedStories = _useState4[0],
+      updateCachedStories = _useState4[1];
+
+  var _useState5 = useState(0),
+      _useState6 = _slicedToArray(_useState5, 2),
+      active = _useState6[0],
+      handleActive = _useState6[1];
+
+  var _useState7 = useState(true),
+      _useState8 = _slicedToArray(_useState7, 2),
+      loading = _useState8[0],
+      handleLoading = _useState8[1];
+
+  var _get = get(slotConfig, [0], {}),
+      _get$type = _get.type,
+      type = _get$type === void 0 ? "story" : _get$type,
+      component = _get.component;
+
+  var isAdWidgetEnabled = type === "ad" || type === "widget";
+  var adWidgetSlot = isAdWidgetEnabled ? getSlot(type, component) : null;
+  var getFilteredCollection = get(collection, ["items"], []).filter(function (collections) {
+    return collections.type === "collection";
+  });
+
+  if (getFilteredCollection.length < 1) {
+    return null;
+  }
+
+  var filteredCollectionids = getFilteredCollection.map(function (subCol) {
+    return subCol.id;
+  });
+
+  var memoizeStories = function memoizeStories(id, data) {
+    updateCachedStories(function (cachedStories) {
+      return _objectSpread(_objectSpread({}, cachedStories), {}, _defineProperty({}, id, data));
+    });
+  };
+
+  function fetchSubCollectionData() {
+    return _fetchSubCollectionData.apply(this, arguments);
+  }
+
+  function _fetchSubCollectionData() {
+    _fetchSubCollectionData = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var id,
+          data,
+          res,
+          childCollectionItems,
+          _args = arguments;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              id = _args.length > 0 && _args[0] !== undefined ? _args[0] : filteredCollectionids[0];
+              handleLoading(true);
+              _context.prev = 2;
+              data = {};
+
+              if (id in cachedStories) {
+                _context.next = 11;
+                break;
+              }
+
+              _context.next = 7;
+              return axios.get("/api/v1/collections/".concat(id, "?limit=7"));
+
+            case 7:
+              res = _context.sent;
+              data = res.data;
+              _context.next = 12;
+              break;
+
+            case 11:
+              data = cachedStories[id];
+
+            case 12:
+              memoizeStories(id, data);
+              childCollectionItems = collectionToStories(data);
+              handleLoading(false);
+              handleApiData(childCollectionItems);
+              _context.next = 21;
+              break;
+
+            case 18:
+              _context.prev = 18;
+              _context.t0 = _context["catch"](2);
+              // eslint-disable-next-line no-console
+              console.error("API call failed", _context.t0);
+
+            case 21:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[2, 18]]);
+    }));
+    return _fetchSubCollectionData.apply(this, arguments);
+  }
+
+  useEffect(function (id) {
+    fetchSubCollectionData(id);
+  }, []);
+  var dispatch = useDispatch();
+  var qtConfig = useSelector(function (state) {
+    return get(state, ["qt", "config"], {});
+  });
+  var url = generateNavigateSlug(getFilteredCollection[active], qtConfig);
+  var items = subCollectionStories.slice(0, 12);
+  var textColor = getTextColor(theme);
+
+  var openChildCollectionItems = function openChildCollectionItems(event, index, slug) {
+    event.stopPropagation();
+    fetchSubCollectionData(slug);
+    var activeIndex = active === index ? 0 : index;
+    handleActive(activeIndex);
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "full-width-with-padding arrow-component",
+    "data-test-id": "astrology-collection",
+    style: {
+      backgroundColor: theme,
+      color: textColor
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "astrology-collection-m_wrapper__ywsE4"
+  }, /*#__PURE__*/React.createElement(CollectionName, {
+    collection: collection,
+    collectionNameTemplate: collectionNameTemplate,
+    collectionNameBorderColor: collectionNameBorderColor
+  }), collection.summary && /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "astrology-collection-summary",
+    className: _getClassName("collection-summary ".concat(textColor), _styleModuleImportMap)
+  }, collection.summary), /*#__PURE__*/React.createElement("div", {
+    className: "astrology-collection-m_tab__23HlB",
+    "data-test-id": "collection-tab"
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: "astrology-collection-m_child-collections__2RMob"
+  }, getFilteredCollection.map(function (subCollections, index) {
+    return /*#__PURE__*/React.createElement("li", {
+      key: "tab-".concat(index),
+      onClick: function onClick(event) {
+        return openChildCollectionItems(event, index, subCollections.id);
+      },
+      "data-test-id": subCollections.name,
+      className: _getClassName("child-collection ".concat(textColor, " ").concat(index === active ? "open-subchild" : ""), _styleModuleImportMap)
+    }, subCollections.name);
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: _getClassName(isAdWidgetEnabled ? "main-wrapper" : "main-wrapper-container", _styleModuleImportMap)
+  }, /*#__PURE__*/React.createElement("div", null, loading ? /*#__PURE__*/React.createElement(Loading, null) : /*#__PURE__*/React.createElement("div", {
+    className: "astrology-collection-m_subCollection-stories__2CcHk"
+  }, items.length === 0 && /*#__PURE__*/React.createElement("p", {
+    className: "astrology-collection-m_nomore-stories__1Rxb8"
+  }, "No more stories to load."), items.map(function (story, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "astrology-collection-m_card__20FnI",
+      key: "card-".concat(index)
+    }, /*#__PURE__*/React.createElement(StoryCard, {
+      story: story,
+      border: border,
+      theme: theme,
+      config: config
+    }, /*#__PURE__*/React.createElement(HeroImage, {
+      story: story,
+      aspectRatio: [[1, 1]]
+    }), /*#__PURE__*/React.createElement(Headline, {
+      story: story,
+      headerLevel: 6,
+      premiumStoryIconConfig: config
+    })));
+  }))), isAdWidgetEnabled && /*#__PURE__*/React.createElement("div", {
+    className: "astrology-collection-m_ads__2XMEk"
+  }, " ", adWidgetSlot)), items.length >= 12 && /*#__PURE__*/React.createElement(LoadmoreButton, {
+    collection: getFilteredCollection[active],
+    template: footerButton,
+    config: config,
+    navigate: function navigate() {
+      return navigateTo(dispatch, url);
+    },
+    qtConfig: qtConfig
+  })));
+};
+AstrologyCollectionBase.propTypes = {
+  /**  collection is the array of objects which is returning by API  */
+  collection: PropTypes.object.isRequired,
+
+  /** The config for the Row */
+  config: PropTypes.shape({
+    //   background color of the row
+    theme: PropTypes.string,
+    border: PropTypes.string,
+    collectionNameTemplate: PropTypes.string,
+    footerButton: PropTypes.string,
+    collectionNameBorderColor: PropTypes.string
+  })
+};
+AstrologyCollectionBase.defaultProps = {
+  theme: "#ffffff",
+  slotConfig: "story",
+  border: ""
+};
+export var AstrologyCollection = StateProvider(AstrologyCollectionBase);

package/esm/components/Rows/AstrologyCollection/stories.js

@@ -0,0 +1,61 @@
+import React from "react";
+import { color, boolean as _boolean, text } from "@storybook/addon-knobs";
+import { withStore, optionalSelect, collectionNameTemplates, footerButton } from "../../../../storybook";
+import { AstrologyCollectionBase } from "./index";
+import { AdPlaceholder } from "../../Atoms/AdPlaceholder";
+import Readme from "./README.md";
+import axios from "axios";
+import MockAdapter from "axios-mock-adapter";
+import { generateCollections, generateCollection } from "../../Fixture";
+var mock = new MockAdapter(axios);
+var API_REQUEST = new RegExp("/api/v1/collections/*");
+var nestedCollection = generateCollection({
+  stories: 12
+});
+var collection = generateCollections(3);
+var defaultvalue = "#ffffff";
+var collectionNameDefaultValue = "#3a9fdd";
+
+var CustomAdOrWidget = function CustomAdOrWidget() {
+  return /*#__PURE__*/React.createElement(AdPlaceholder, {
+    width: "300px",
+    height: "250px"
+  });
+};
+
+withStore("Rows/Astrology Collection", {
+  qt: {
+    config: {
+      "cdn-image": "thumbor-stg.assettype.com",
+      mountAt: "/sub-directory"
+    }
+  }
+}, Readme).addDecorator(function (story) {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      maxWidth: "1172px",
+      margin: "auto"
+    }
+  }, story());
+}).add("Default", function () {
+  var contextConfig = {
+    collectionNameBorderColor: color("Collection Name Border Color", collectionNameDefaultValue),
+    theme: color("color", defaultvalue),
+    collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+    showRowTitle: _boolean("Row title", true),
+    footerButton: optionalSelect("Footer Button", footerButton),
+    buttonText: text("Footer text", "Read More"),
+    showButton: _boolean("Show button", true),
+    slotConfig: [{
+      type: "ad",
+      component: function component() {
+        return /*#__PURE__*/React.createElement(CustomAdOrWidget, null);
+      }
+    }]
+  };
+  mock.onGet(API_REQUEST).reply(200, nestedCollection);
+  return /*#__PURE__*/React.createElement(AstrologyCollectionBase, {
+    collection: collection,
+    config: contextConfig
+  });
+});

package/esm/components/Rows/AuthorIntroductionCard/README.md

@@ -0,0 +1,43 @@
+# Author Introduction Card
+
+Author Introduction card is used to display the author information which consists of name, bio with author image and social connect of the author.
+
+## Usage
+
+Import the AuthorIntroductionCard and pass authorDetails as props and config.
+
+```jsx
+import { AuthorIntroductionCard } from "@quintype/arrow";
+```
+
+### Use as a component
+
+```jsx
+const contextConfig = {
+  theme: #333333;
+  enableBio: false;
+  enableSocialLinks: true;
+};
+<AuthorIntroductionCard props={authorDetails} config={contextConfig} >
+
+```
+
+```jsx
+const contextConfig = {
+  theme: #333333;
+  enableBio: false;
+  enableSocialLinks: true;
+};
+<AuthorIntroductionCard props={authorDetails} config={contextConfig} template="square" >
+
+```
+
+```jsx
+const contextConfig = {
+  theme: #333333;
+  enableBio: false;
+  enableSocialLinks: true;
+};
+<AuthorIntroductionCard props={authorDetails} config={contextConfig} template="smallCircle" >
+
+```

package/esm/components/Rows/AuthorIntroductionCard/author-intro.m.css

@@ -0,0 +1,278 @@
+@value viewports: "../../../../assets/stylesheets/viewports.m.css";
+@value mobile from viewports;
+@value tablet from viewports;
+
+.connect {
+  font-size: var(--arrow-spacing-m);
+  line-height: var(--arrow-lh-5);
+  color: var(--arrow-c-mono4);
+  align-self: center;
+  margin-bottom: var(--arrow-spacing-xxs);
+}
+
+.social-share {
+  flex: 1;
+  padding: var(--arrow-spacing-xs);
+}
+
+.share-icon {
+  display: flex;
+  align-items: flex-end;
+  margin-right: var(--arrow-spacing-l);
+}
+
+.default .author-image {
+  align-self: center;
+  @media (min-width: mobile) {
+    grid-column: 8/12;
+  }
+}
+
+.default .author-name {
+  color: var(--arrow-c-mono2);
+  font-weight: var(--arrow-fw-bold);
+  line-height: var(--arrow-lh-5);
+  align-self: center;
+  margin: var(--arrow-spacing-xs) 0 var(--arrow-spacing-xxs);
+  @media (min-width: mobile) {
+    line-height: var(--arrow-lh-2);
+    align-self: flex-start;
+  }
+}
+
+.default .author-description {
+  margin: var(--arrow-spacing-s) 0;
+  color: var(--arrow-c-mono4);
+  font-size: var(--arrow-spacing-m);
+  line-height: var(--arrow-lh-5);
+  white-space: pre-line;
+}
+
+.default .wrapper {
+  display: flex;
+  flex-direction: column-reverse;
+  padding: 0 var(--arrow-spacing-s) var(--arrow-spacing-m) var(--arrow-spacing-s);
+  @media (min-width: mobile) {
+    display: grid;
+    grid-gap: var(--arrow-fs-l);
+    grid-template-columns: repeat(12, 1fr);
+    padding: 0 0 var(--arrow-fs-xxl) 0;
+  }
+}
+
+.default .introduction-card {
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  flex-direction: column;
+  @media (min-width: mobile) {
+    grid-column: 2/8;
+  }
+  @media (min-width: tablet) {
+    grid-column: 2/7;
+  }
+}
+
+.default .social-wrapper {
+  margin-top: var(--arrow-spacing-xs);
+  display: flex;
+  justify-content: space-between;
+  @media (min-width: mobile) {
+    align-items: center;
+  }
+  @media (min-width: tablet) {
+    margin-top: unset;
+    position: relative;
+    align-items: unset;
+  }
+}
+
+.default .connect {
+  @media (min-width: tablet) {
+    margin-bottom: var(--arrow-spacing-xs);
+  }
+}
+
+.default .linkWrapper {
+  display: flex;
+}
+
+.default .social-connect-wrapper {
+  @media (min-width: mobile) {
+    display: flex;
+  }
+  @media (min-width: tablet) {
+    margin-top: var(--arrow-spacing-xs);
+    display: block;
+  }
+}
+
+.default :global(.desktop-share-wrapper) {
+  @media (min-width: tablet) {
+    position: absolute;
+    right: 0;
+    max-width: 42px;
+  }
+}
+
+.default .social-wrapper > :nth-child(2) {
+  margin-top: var(--arrow-spacing-xxs);
+  @media (min-width: mobile) {
+    margin-top: unset;
+  }
+}
+
+.default .social-connect-wrapper > :nth-child(2) {
+  margin-left: unset;
+  @media (min-width: mobile) {
+    margin-left: var(--arrow-spacing-xs);
+  }
+  @media (min-width: tablet) {
+    margin-left: unset;
+  }
+}
+
+.default .wrapper.dark {
+  border-bottom: 1px solid var(--dark-border);
+}
+
+.default .wrapper.light {
+  border-bottom: 1px solid var(--light-border);
+}
+
+.small-circle {
+  @media (min-width: mobile) {
+    padding: var(--arrow-spacing-l) var(--arrow-spacing-s);
+    height: 100%;
+    @media (min-width: tablet) {
+      padding: var(--arrow-spacing-xl);
+    }
+  }
+}
+
+.small-circle.border {
+  border-radius: 3px;
+  padding: var(--arrow-spacing-m);
+  @media (min-width: mobile) {
+    padding: var(--arrow-spacing-l) var(--arrow-spacing-s);
+  }
+  @media (min-width: tablet) {
+    padding: var(--arrow-spacing-xl);
+  }
+}
+
+.small-circle.border.dark {
+  border: solid 1px var(--dark-border);
+}
+
+.small-circle.border.light {
+  border: solid 1px var(--light-border);
+}
+
+.small-circle .wrapper {
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.small-circle .introduction-card {
+  @media (min-width: mobile) {
+    text-align: center;
+  }
+}
+
+.small-circle .author-image {
+  display: flex;
+  align-items: center;
+  @media (min-width: mobile) {
+    justify-content: center;
+    align-items: unset;
+  }
+}
+
+.small-circle .social-wrapper {
+  @media (min-width: mobile) {
+    justify-content: center;
+  }
+}
+
+.small-circle .author-name {
+  color: var(--arrow-c-mono2);
+  font-size: var(--arrow-fs-s);
+  line-height: var(--arrow-lh-3);
+  font-weight: var(--arrow-fw-bold);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-m);
+    margin-top: var(--arrow-spacing-m);
+  }
+}
+
+.small-circle .author-image > div {
+  margin-right: var(--arrow-spacing-m);
+  @media (min-width: mobile) {
+    margin-right: unset;
+  }
+}
+
+.small-circle .author-description,
+.small-circle .connect {
+  font-size: var(--arrow-fs-tiny);
+  line-height: var(--arrow-lh-5);
+  color: var(--arrow-c-mono4);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-tiny);
+  }
+}
+
+.small-circle .author-description {
+  position: relative;
+  max-height: 63px;
+  overflow: hidden;
+  margin-top: var(--arrow-spacing-xs);
+}
+
+.small-circle .fade-out {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 90%;
+  height: 21px;
+  background-image: inherit;
+}
+
+.small-circle .social-connect-wrapper {
+  margin-top: var(--arrow-spacing-xxs);
+  @media (min-width: mobile) {
+    margin-top: var(--arrow-spacing-xs);
+  }
+}
+
+.small-circle.border .social-connect-wrapper {
+  margin-top: var(--arrow-spacing-xs);
+}
+
+.default .dark,
+.small-circle .dark {
+  color: var(--arrow-c-mono2);
+}
+
+.default .light,
+.small-circle .light {
+  color: var(--arrow-c-invert-mono2);
+}
+
+.default .social-connect-wrapper > :nth-child(2),
+.small-circle .social-connect-wrapper > :nth-child(1) {
+  padding-left: unset;
+}
+
+.small-circle .social-share {
+  padding: var(--arrow-spacing-m) var(--arrow-spacing-xs) var(--arrow-spacing-xs);
+}
+
+html[dir="rtl"] {
+  .default :global(.desktop-share-wrapper) {
+    @media (min-width: tablet) {
+      position: static;
+    }
+  }
+}