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

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

@@ -0,0 +1,288 @@
+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 = {
+  "./alternate-collection-filter.m.css": {
+    "navigator": "alternate-collection-filter-m_navigator__20CE0",
+    "wrapper": "alternate-collection-filter-m_wrapper__y_0ov",
+    "arr--headline": "alternate-collection-filter-m_arr--headline__24KSK",
+    "arr--read-time": "alternate-collection-filter-m_arr--read-time__mjm5v",
+    "read-time-indicator": "alternate-collection-filter-m_read-time-indicator__kaM3d",
+    "arr--publish-time": "alternate-collection-filter-m_arr--publish-time__1nsEF",
+    "arr-separator": "alternate-collection-filter-m_arr-separator__st4TN",
+    "arr--button": "alternate-collection-filter-m_arr--button__y0_Yh",
+    "light-wrapper": "alternate-collection-filter-m_light-wrapper__1CJKq",
+    "arr--collection-name": "alternate-collection-filter-m_arr--collection-name__1EyHs",
+    "section-tag": "alternate-collection-filter-m_section-tag__4AVsa",
+    "author-name": "alternate-collection-filter-m_author-name__WPATU",
+    "collection-filter": "alternate-collection-filter-m_collection-filter__34wis",
+    "divider": "alternate-collection-filter-m_divider__Mwn0n",
+    "dark": "alternate-collection-filter-m_dark__IaLvx",
+    "light": "alternate-collection-filter-m_light__2FdRq",
+    "subCollection-wrapper": "alternate-collection-filter-m_subCollection-wrapper__3Tj-s",
+    "cards": "alternate-collection-filter-m_cards__30xpt",
+    "card": "alternate-collection-filter-m_card__1Mb8D",
+    "card-wrapper": "alternate-collection-filter-m_card-wrapper__3puyR",
+    "child-collections": "alternate-collection-filter-m_child-collections__9s0wl",
+    "child-collection": "alternate-collection-filter-m_child-collection__1SXcM",
+    "child-collection-wrapper": "alternate-collection-filter-m_child-collection-wrapper__JdK4a",
+    "open-subchild": "alternate-collection-filter-m_open-subchild__urMg0",
+    "fadein": "alternate-collection-filter-m_fadein__3-kJ6",
+    "subCollection-stories": "alternate-collection-filter-m_subCollection-stories__2o4ws",
+    "fadeIn": "alternate-collection-filter-m_fadeIn__3g-o6",
+    "no-button-wrapper": "alternate-collection-filter-m_no-button-wrapper__1auuJ"
+  }
+};
+
+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 { LoadmoreButton } from "../../Atoms/Loadmore";
+import { StoryCard } from "../../Molecules/StoryCard";
+import { StorycardContent } from "../../Molecules/StorycardContent";
+import { HeroImage } from "../../Atoms/HeroImage";
+import { getTextColor, generateNavigateSlug, navigateTo } from "../../../utils/utils";
+import { StateProvider } from "../../SharedContext";
+import { Loading } from "../../Svgs/Loading/loading";
+import "./alternate-collection-filter.m.css";
+export var AlternateCollectionFilterBase = function AlternateCollectionFilterBase(_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$borderColor = config.borderColor,
+      borderColor = _config$borderColor === void 0 ? "" : _config$borderColor,
+      _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$footerSlotCon = config.footerSlotConfig,
+      footerSlotConfig = _config$footerSlotCon === void 0 ? {} : _config$footerSlotCon,
+      _config$footerButton = config.footerButton,
+      footerButton = _config$footerButton === void 0 ? "" : _config$footerButton,
+      _config$showButton = config.showButton,
+      showButton = _config$showButton === void 0 ? true : _config$showButton;
+  var footerSlot = footerSlotConfig.footerSlot;
+
+  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 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, 9);
+  var textColor = getTextColor(theme);
+
+  var openChildCollectionItems = function openChildCollectionItems(event, index, slug) {
+    event.stopPropagation();
+    fetchSubCollectionData(slug);
+    var activeIndex = active === index ? 0 : index;
+    handleActive(activeIndex);
+  };
+
+  var footerSlotComp = footerSlot ? footerSlot() : null;
+  var getCustomStyleName = textColor === "light" ? "light-wrapper" : "";
+  return /*#__PURE__*/React.createElement("div", {
+    className: "full-width-with-padding arrow-component",
+    "data-test-id": "collection-filter",
+    style: {
+      backgroundColor: theme,
+      color: textColor
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _getClassName("wrapper ".concat(getCustomStyleName), _styleModuleImportMap)
+  }, /*#__PURE__*/React.createElement(CollectionName, {
+    collection: collection,
+    collectionNameTemplate: collectionNameTemplate,
+    collectionNameBorderColor: collectionNameBorderColor
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "alternate-collection-filter-m_collection-filter__34wis"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "alternate-collection-filter-m_child-collections__9s0wl"
+  }, getFilteredCollection.map(function (subCollections, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: ((index === active ? "open-subchild" : "") ? (index === active ? "open-subchild" : "") + " " : "") + _getClassName("child-collection-wrapper ".concat(index === active ? "open-subchild" : ""), _styleModuleImportMap)
+    }, /*#__PURE__*/React.createElement("div", {
+      onClick: function onClick(event) {
+        return openChildCollectionItems(event, index, subCollections.id);
+      },
+      className: _getClassName("child-collection ".concat(textColor), _styleModuleImportMap)
+    }, subCollections.name), /*#__PURE__*/React.createElement("span", {
+      className: ("navigator ".concat(textColor) ? "navigator ".concat(textColor) + " " : "") + _getClassName("navigator ".concat(textColor), _styleModuleImportMap)
+    }));
+  })), /*#__PURE__*/React.createElement("span", {
+    className: ("divider ".concat(textColor) ? "divider ".concat(textColor) + " " : "") + _getClassName("divider ".concat(textColor), _styleModuleImportMap)
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "alternate-collection-filter-m_subCollection-wrapper__3Tj-s"
+  }, loading ? /*#__PURE__*/React.createElement(Loading, null) : /*#__PURE__*/React.createElement("div", {
+    className: "alternate-collection-filter-m_subCollection-stories__2o4ws"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "alternate-collection-filter-m_cards__30xpt"
+  }, items.slice(0, 6).map(function (story, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "alternate-collection-filter-m_card__1Mb8D",
+      key: index
+    }, /*#__PURE__*/React.createElement(StoryCard, {
+      story: story,
+      border: border,
+      theme: theme,
+      config: config
+    }, /*#__PURE__*/React.createElement(HeroImage, {
+      story: story,
+      aspectRatio: [[16, 9]]
+    }), /*#__PURE__*/React.createElement(StorycardContent, {
+      story: story,
+      border: border,
+      borderColor: borderColor,
+      config: config
+    })));
+  }))))), items.length > 6 && /*#__PURE__*/React.createElement(LoadmoreButton, {
+    collection: getFilteredCollection[active],
+    template: footerButton,
+    config: config,
+    navigate: function navigate() {
+      return navigateTo(dispatch, url);
+    },
+    qtConfig: qtConfig
+  }), /*#__PURE__*/React.createElement("div", {
+    className: _getClassName("".concat(showButton ? "" : "no-button-wrapper"), _styleModuleImportMap)
+  }, footerSlotComp)));
+};
+AlternateCollectionFilterBase.propTypes = {
+  /**  collection is the array of objects which is returning by API  */
+  collection: PropTypes.object.isRequired,
+
+  /** The config for the Row */
+  config: PropTypes.shape({
+    //  section tag border color
+    borderColor: PropTypes.string,
+    //   background color of the row
+    theme: PropTypes.string,
+    border: PropTypes.string,
+    collectionNameTemplate: PropTypes.string,
+    footerSlotConfig: PropTypes.object,
+    footerButton: PropTypes.string,
+    collectionNameBorderColor: PropTypes.string
+  })
+};
+AlternateCollectionFilterBase.defaultProps = {
+  theme: "#ffffff",
+  slotConfig: "story",
+  border: ""
+};
+export var AlternateCollectionFilter = StateProvider(AlternateCollectionFilterBase);

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

@@ -0,0 +1,68 @@
+import React from "react";
+import { color, boolean as _boolean, text } from "@storybook/addon-knobs";
+import { withStore, optionalSelect, sectionTagTemplates, collectionNameTemplates, footerButton } from "../../../../storybook";
+import { AlternateCollectionFilterBase } 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: 10
+});
+var collection = generateCollections(15); // will have to reduce this number post testing
+
+var defaultvalue = "#ffffff";
+var collectionNameDefaultValue = "#3a9fdd";
+var sectionTagDefaultvalue = "#3a9fdd";
+var borderTemplate = {
+  "default": "",
+  border: "full"
+};
+
+var footerSlot = function footerSlot() {
+  return /*#__PURE__*/React.createElement(AdPlaceholder, null);
+};
+
+withStore("Rows/Alternate Collection Filter", {
+  qt: {
+    config: {
+      "cdn-image": "thumbor-stg.assettype.com",
+      mountAt: "/sub-directory"
+    }
+  }
+}, Readme).addDecorator(function (story) {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      maxWidth: "1000px",
+      margin: "auto"
+    }
+  }, story());
+}).add("Default", function () {
+  var contextConfig = {
+    collectionNameBorderColor: color("Collection Name Border Color", collectionNameDefaultValue),
+    borderColor: color("Section Tag Border Color", sectionTagDefaultvalue),
+    theme: color("color", defaultvalue),
+    border: optionalSelect("Border", borderTemplate),
+    collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+    sectionTagTemplate: optionalSelect("Section Tag Templates", sectionTagTemplates),
+    showSection: _boolean("section disable", true),
+    showAuthor: _boolean("Author disable", true),
+    showTime: _boolean("Timestamp disable", true),
+    showRowTitle: _boolean("Row title", true),
+    footerButton: optionalSelect("Footer Button", footerButton),
+    buttonText: text("Footer text", "Read More"),
+    footerSlotConfig: {
+      footerSlot: footerSlot
+    },
+    showButton: _boolean("Show button", true),
+    showReadTime: _boolean("Read time", true)
+  };
+  mock.onGet(API_REQUEST).reply(200, nestedCollection);
+  return /*#__PURE__*/React.createElement(AlternateCollectionFilterBase, {
+    collection: collection,
+    config: contextConfig
+  });
+});

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

@@ -0,0 +1,27 @@
+### Aside Collection
+
+Aside collection is a template which is used to represent a collection of stories or an array of stories.
+
+It also accepts stories from a custom collection if a collection slug is passed.
+
+By default it'll render stories from related stories API.
+
+## Usage
+
+## To pass a collection with default collection name
+
+```jsx
+<AsideCollection data={collection} config={config} />
+```
+
+## To pass stories with customisable heading and horizontal style
+
+```jsx
+<AsideCollection data={stories} config={config} horizontal={true} />
+```
+
+## To make aside's last child sticky in tablet and desktop
+
+```jsx
+<AsideCollection data={stories} config={config} sticky={true} horizontal={false} />
+```

package/esm/components/Rows/AsideCollection/aside-collection.m.css

@@ -0,0 +1,103 @@
+@import "../../../../assets/stylesheets/mixins.scss";
+
+.stories {
+  margin-top: var(--arrow-spacing-m);
+}
+.wrapper :global(.arr--collection-name) {
+  margin-bottom: var(--arrow-spacing-m);
+}
+.story {
+  display: flex;
+  margin-bottom: var(--arrow-spacing-m);
+}
+
+.story-hero-image {
+  min-width: 82px;
+  max-width: 82px;
+  margin-right: var(--arrow-spacing-xs);
+}
+
+.story-byline {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: var(--arrow-spacing-xs);
+}
+
+.info {
+  text-align: center;
+}
+
+.dark {
+  color: var(--arrow-c-mono4);
+}
+.light {
+  color: var(--arrow-c-mono4);
+}
+.wrapper h3 {
+  font-size: var(--arrow-fs-m);
+}
+
+.ad-slot {
+  padding: var(--arrow-spacing-l) 0;
+  @include tablet {
+    padding: var(--arrow-spacing-xl) 0;
+  }
+}
+
+.horizontal-wrapper {
+  .stories {
+    @include tablet {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      grid-gap: var(--arrow-spacing-l);
+    }
+  }
+
+  :global .arr--story-card {
+    @include tablet {
+      flex-direction: column;
+    }
+  }
+
+  .story-hero-image {
+    @include tablet {
+      min-width: 100%;
+      margin-bottom: 8px;
+      margin-right: var(--arrow-spacing-xs);
+    }
+  }
+
+  .story-byline {
+    @include tablet {
+      margin-top: 0;
+    }
+  }
+
+  .story {
+    @include tablet {
+      display: block;
+    }
+  }
+}
+
+html[dir="rtl"] {
+  .story-hero-image {
+    margin-right: 0;
+    margin-left: var(--arrow-spacing-xs);
+  }
+}
+
+.wrapper {
+  @include tablet {
+    height: 100%;
+  }
+}
+
+.sticky > :last-child {
+  @include tablet {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 125px;
+    margin-bottom: 64px;
+  }
+}

package/esm/components/Rows/AsideCollection/aside-collection.test.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { mount, shallow } from "enzyme";
+import { AsideCollectionBase } from ".";
+import { generateCollection, generateStore, generateStory } from "../../Fixture";
+import { Provider } from "react-redux";
+var collection = generateCollection();
+var story = generateStory();
+var stories = [story, story, story];
+describe("Aside collection component", function () {
+  it("Should render default template with collection", function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(Provider, {
+      store: generateStore
+    }, /*#__PURE__*/React.createElement(AsideCollectionBase, {
+      data: collection
+    })));
+    expect(wrapper.find(AsideCollectionBase)).toHaveLength(1);
+  });
+  it("Should render template with array of stories", function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(Provider, {
+      store: generateStore
+    }, /*#__PURE__*/React.createElement(AsideCollectionBase, {
+      data: stories
+    })));
+    expect(wrapper.find({
+      "data-test-id": "aside-collection"
+    }).prop("className")).toMatch(/aside-collection/);
+  });
+  it("Should render `no stories message` if there are no stories", function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(AsideCollectionBase, null));
+    expect(wrapper.find(AsideCollectionBase)).toHaveLength(0);
+  });
+});