@quintype/arrow 3.15.1-perf.4 → 3.15.1-perf.8

package/esm/components/Rows/CollectionFilter/collection-filter.m.css

@@ -0,0 +1,213 @@
+@custom-media --viewport-medium (width >= 768px);
+
+.navigator {
+  visibility: hidden;
+  position: relative;
+  @media (--viewport-medium) {
+    width: 18px;
+  }
+}
+.wrapper {
+  padding: 0 12px;
+  @media (--viewport-medium) {
+    padding: unset;
+  }
+}
+.collection-filter {
+  margin: var(--arrow-spacing-xs) 0;
+  @media (--viewport-medium) {
+    display: grid;
+    grid-template-columns: 2fr 1px 10fr;
+    grid-column-gap: var(--arrow-spacing-l);
+    margin: var(--arrow-spacing-m) 0;
+  }
+}
+
+.divider.dark {
+  @media (--viewport-medium) {
+    border-left: 1px solid var(--dark-border);
+  }
+}
+
+.divider.light {
+  @media (--viewport-medium) {
+    border-left: 1px solid var(--light-border);
+  }
+}
+
+.subCollection-wrapper {
+  position: relative;
+  min-height: 100px;
+}
+.subCollection-stories {
+  @media (--viewport-medium) {
+    display: flex;
+    align-items: flex-start;
+  }
+}
+.cards {
+  display: block;
+  @media (--viewport-medium) {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: var(--arrow-spacing-l);
+    flex-basis: 66%;
+  }
+}
+.last-column {
+  display: block;
+  @media (--viewport-medium) {
+    display: flex;
+    flex-direction: column;
+    margin-left: var(--arrow-spacing-l);
+    flex-basis: 34%;
+  }
+}
+
+.last-column .card {
+  margin-bottom: var(--arrow-spacing-l);
+}
+.cards .card {
+  margin-bottom: var(--arrow-spacing-l);
+  @media (--viewport-medium) {
+    margin-bottom: unset;
+  }
+}
+.card-wrapper {
+  @media (--viewport-medium) {
+    display: flex;
+    align-items: flex-start;
+  }
+}
+.child-collections {
+  display: flex;
+  font-size: var(--arrow-fs-xs);
+  margin-bottom: 16px;
+  scroll-snap-type: x mandatory;
+  overflow: scroll;
+  scrollbar-width: none;
+  @media (--viewport-medium) {
+    display: block;
+    font-size: var(--arrow-fs-s);
+    line-height: var(--arrow-lh-2);
+    overflow: none;
+  }
+}
+
+.child-collections::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+.child-collection.dark {
+  color: var(--arrow-c-mono4);
+}
+
+.child-collection.light {
+  color: var(--arrow-c-invert-mono4);
+}
+
+.child-collection {
+  margin: 0 11px 12px 11px;
+  cursor: pointer;
+  font-size: var(--arrow-fs-xs);
+  font-weight: var(--arrow-fw-bold);
+  @media (--viewport-medium) {
+    font-size: var(--arrow-fs-s);
+    margin: 0 0 var(--arrow-spacing-l) 0;
+  }
+}
+
+.child-collection-wrapper {
+  display: flex;
+  scroll-snap-align: start;
+}
+
+.child-collection.dark:hover,
+.open-subchild > .child-collection.dark {
+  color: var(--arrow-c-mono2);
+}
+
+.child-collection.light:hover,
+.open-subchild > .child-collection.light {
+  color: var(--arrow-c-invert-mono2);
+}
+
+.open-subchild {
+  border-bottom: 2px solid var(--arrow-c-brand1);
+  @media (--viewport-medium) {
+    border-bottom: unset;
+  }
+}
+
+.open-subchild > .navigator {
+  @media (--viewport-medium) {
+    visibility: visible;
+    width: 24px;
+    transition: width 0.35s ease-in-out;
+    animation: fadein 2s;
+  }
+}
+@keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* tringle design */
+.navigator:before {
+  @media (--viewport-medium) {
+    content: "";
+    border-style: solid;
+    border-width: 4px 4px 4px 8px;
+    border-color: transparent transparent transparent var(--arrow-c-mono2);
+    position: absolute;
+    right: 0;
+    top: 8px;
+  }
+}
+
+.navigator.dark:before {
+  @media (--viewport-medium) {
+    border-color: transparent transparent transparent var(--arrow-c-mono2);
+  }
+}
+
+.navigator.light:before {
+  @media (--viewport-medium) {
+    border-color: transparent transparent transparent var(--arrow-c-invert-mono2);
+  }
+}
+
+.collection-filter .subCollection-stories {
+  animation-name: fadeIn;
+  animation-fill-mode: both;
+  animation-duration: 1s;
+  animation-delay: 1s;
+}
+
+html[dir="rtl"] {
+  .last-column {
+    @media (--viewport-medium) {
+      margin-right: var(--arrow-spacing-l);
+      margin-left: 0;
+    }
+  }
+
+  .open-subchild > .navigator {
+    height: var(--arrow-spacing-l);
+    transform: rotate(-180deg);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

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

@@ -0,0 +1,366 @@
+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 = {
+  "./collection-filter.m.css": {
+    "navigator": "collection-filter-m_navigator__3MDUp",
+    "wrapper": "collection-filter-m_wrapper__3Nx_h",
+    "collection-filter": "collection-filter-m_collection-filter__3At2n",
+    "divider": "collection-filter-m_divider__3Nm-k",
+    "dark": "collection-filter-m_dark__2LMGY",
+    "light": "collection-filter-m_light__1wyGa",
+    "subCollection-wrapper": "collection-filter-m_subCollection-wrapper__14azF",
+    "subCollection-stories": "collection-filter-m_subCollection-stories__2RDkI",
+    "cards": "collection-filter-m_cards__1Co_7",
+    "last-column": "collection-filter-m_last-column__UP63_",
+    "card": "collection-filter-m_card__2IOTX",
+    "card-wrapper": "collection-filter-m_card-wrapper__qzzWB",
+    "child-collections": "collection-filter-m_child-collections__2-FiJ",
+    "child-collection": "collection-filter-m_child-collection__1YB-F",
+    "child-collection-wrapper": "collection-filter-m_child-collection-wrapper__2ezSh",
+    "open-subchild": "collection-filter-m_open-subchild__koie_",
+    "fadein": "collection-filter-m_fadein__Dxs8G",
+    "fadeIn": "collection-filter-m_fadeIn__1AtGp"
+  }
+};
+
+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, { Fragment, useEffect, useState } from "react";
+import axios from "axios";
+import PropTypes from "prop-types";
+import { get } from "lodash";
+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, getSlot, generateNavigateSlug, navigateTo } from "../../../utils/utils";
+import { StateProvider } from "../../SharedContext";
+import { Loading } from "../../Svgs/Loading/loading";
+import { collectionToStories } from "@quintype/components";
+import "./collection-filter.m.css";
+import { useDispatch, useSelector } from "react-redux";
+export var CollectionFilterBase = function CollectionFilterBase(_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$slotConfig = config.slotConfig,
+      slotConfig = _config$slotConfig === void 0 ? [] : _config$slotConfig,
+      _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;
+
+  var _get = get(slotConfig, [0], {}),
+      _get$type = _get.type,
+      type = _get$type === void 0 ? "story" : _get$type,
+      component = _get.component;
+
+  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));
+
+            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 getVerticalCard = function getVerticalCard(story, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "collection-filter-m_card__2IOTX",
+      key: index
+    }, /*#__PURE__*/React.createElement(StoryCard, {
+      story: story,
+      isHorizontalMobile: true,
+      theme: theme,
+      border: border,
+      borderColor: borderColor,
+      config: config
+    }, /*#__PURE__*/React.createElement(HeroImage, {
+      story: story,
+      isHorizontalMobile: true
+    }), /*#__PURE__*/React.createElement(StorycardContent, {
+      story: story,
+      border: border,
+      borderColor: borderColor,
+      config: config
+    })));
+  };
+
+  var getHorizontalCard = function getHorizontalCard(story, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "collection-filter-m_card__2IOTX",
+      key: index
+    }, /*#__PURE__*/React.createElement(StoryCard, {
+      story: story,
+      isHorizontal: true,
+      theme: theme,
+      border: border,
+      borderColor: borderColor,
+      config: config
+    }, /*#__PURE__*/React.createElement(HeroImage, {
+      story: story,
+      isHorizontal: true,
+      aspectRatio: [[1, 1]]
+    }), /*#__PURE__*/React.createElement(StorycardContent, {
+      story: story,
+      isHorizontal: true,
+      border: border,
+      borderColor: borderColor,
+      config: config
+    })));
+  };
+
+  var storySlot = function storySlot(items) {
+    return /*#__PURE__*/React.createElement("div", null, items.slice(6, 9).map(function (story, index) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "collection-filter-m_card__2IOTX",
+        key: index
+      }, /*#__PURE__*/React.createElement(StoryCard, {
+        story: story,
+        isHorizontal: true,
+        theme: theme,
+        border: border,
+        borderColor: borderColor,
+        config: config
+      }, /*#__PURE__*/React.createElement(HeroImage, {
+        story: story,
+        isHorizontal: true,
+        aspectRatio: [[1, 1]]
+      }), /*#__PURE__*/React.createElement(StorycardContent, {
+        story: story,
+        border: border,
+        borderColor: borderColor,
+        config: config
+      })));
+    }));
+  };
+
+  var footerSlotComp = footerSlot ? footerSlot() : null;
+  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: "collection-filter-m_wrapper__3Nx_h"
+  }, /*#__PURE__*/React.createElement(CollectionName, {
+    collection: collection,
+    collectionNameTemplate: collectionNameTemplate,
+    collectionNameBorderColor: collectionNameBorderColor
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "collection-filter-m_collection-filter__3At2n"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "collection-filter-m_child-collections__2-FiJ"
+  }, getFilteredCollection.map(function (subCollections, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: _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: _getClassName("navigator ".concat(textColor), _styleModuleImportMap)
+    }));
+  })), /*#__PURE__*/React.createElement("span", {
+    className: _getClassName("divider ".concat(textColor), _styleModuleImportMap)
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "collection-filter-m_subCollection-wrapper__14azF"
+  }, loading ? /*#__PURE__*/React.createElement(Loading, null) : /*#__PURE__*/React.createElement("div", {
+    className: "collection-filter-m_subCollection-stories__2RDkI"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "collection-filter-m_cards__1Co_7"
+  }, items.slice(0, 1).map(function (story, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "collection-filter-m_card__2IOTX",
+      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.slice(1, 4).map(function (story, index) {
+    return /*#__PURE__*/React.createElement(Fragment, {
+      key: index
+    }, getVerticalCard(story, index));
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "collection-filter-m_last-column__UP63_"
+  }, items.slice(4, 6).map(function (story, index) {
+    return /*#__PURE__*/React.createElement(Fragment, {
+      key: index
+    }, getHorizontalCard(story, index));
+  }), getSlot(type, component, function () {
+    return storySlot(items);
+  }))))), /*#__PURE__*/React.createElement(LoadmoreButton, {
+    collection: getFilteredCollection[active],
+    template: footerButton,
+    config: config,
+    navigate: function navigate() {
+      return navigateTo(dispatch, url);
+    },
+    qtConfig: qtConfig
+  }), footerSlotComp));
+};
+CollectionFilterBase.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,
+    // configure ad slot widget and story
+    slotConfig: PropTypes.array,
+    collectionNameTemplate: PropTypes.string,
+    footerSlotConfig: PropTypes.object,
+    footerButton: PropTypes.string,
+    collectionNameBorderColor: PropTypes.string
+  })
+};
+CollectionFilterBase.defaultProps = {
+  theme: "#ffffff",
+  slotConfig: "story",
+  border: ""
+};
+export var CollectionFilter = StateProvider(CollectionFilterBase);

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

@@ -0,0 +1,78 @@
+import React from "react";
+import { color, boolean as _boolean, text } from "@storybook/addon-knobs";
+import { withStore, optionalSelect, sectionTagTemplates, collectionNameTemplates, footerButton } from "../../../../storybook";
+import { CollectionFilterBase } 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(5);
+var defaultvalue = "#ffffff";
+var collectionNameDefaultValue = "#3a9fdd";
+var sectionTagDefaultvalue = "#3a9fdd";
+var borderTemplate = {
+  "default": "",
+  border: "full"
+};
+
+var configurableSlot = function configurableSlot() {
+  return /*#__PURE__*/React.createElement(AdPlaceholder, {
+    height: "250px",
+    width: "300px"
+  });
+};
+
+var footerSlot = function footerSlot() {
+  return /*#__PURE__*/React.createElement(AdPlaceholder, null);
+};
+
+withStore("Rows/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),
+    slotConfig: [{
+      type: "story",
+      component: configurableSlot
+    }],
+    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(CollectionFilterBase, {
+    collection: collection,
+    config: contextConfig
+  });
+});