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

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

@@ -0,0 +1,253 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+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 _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { get } from "lodash";
+import PropTypes from "prop-types";
+import React, { useEffect, useState } from "react";
+import { isEmpty, getCollectionData } from "../../../utils/utils";
+import { AuthorWithTime } from "../../Atoms/AuthorWithTimestamp";
+import { CollectionName } from "../../Atoms/CollectionName";
+import { Headline } from "../../Atoms/Headline";
+import { HeroImage } from "../../Atoms/HeroImage";
+import { SectionTag } from "../../Atoms/SectionTag";
+import { StoryCard } from "../../Molecules/StoryCard";
+import { StateProvider } from "../../SharedContext";
+import { KeyEvents } from "../../Molecules/KeyEvents";
+import "./aside-collection.m.css";
+var _styleModuleImportMap = {
+  "./aside-collection.m.css": {
+    "stories": "aside-collection-m_stories__9wfUs",
+    "wrapper": "aside-collection-m_wrapper__2TJi5",
+    "story": "aside-collection-m_story__17Jdm",
+    "story-hero-image": "aside-collection-m_story-hero-image__13nFY",
+    "story-byline": "aside-collection-m_story-byline__37KRG",
+    "info": "aside-collection-m_info__3p4zt",
+    "dark": "aside-collection-m_dark__2ElwM",
+    "light": "aside-collection-m_light__2lEO2",
+    "ad-slot": "aside-collection-m_ad-slot__28nE2",
+    "horizontal-wrapper": "aside-collection-m_horizontal-wrapper__3-KW0",
+    "sticky": "aside-collection-m_sticky__AZXBP"
+  }
+};
+export var StoryCollection = function StoryCollection(_ref) {
+  var data = _ref.data,
+      slotData = _ref.slotData,
+      horizontal = _ref.horizontal,
+      config = _ref.config,
+      opts = _ref.opts;
+
+  var _ref2 = slotData || config,
+      _ref2$theme = _ref2.theme,
+      theme = _ref2$theme === void 0 ? "" : _ref2$theme,
+      _ref2$title = _ref2.title,
+      title = _ref2$title === void 0 ? "" : _ref2$title,
+      _ref2$collectionSlug = _ref2.collectionSlug,
+      collectionSlug = _ref2$collectionSlug === void 0 ? "" : _ref2$collectionSlug;
+
+  var heading = title || "Related Stories";
+  var isHorizontal = horizontal ? "horizontal-wrapper" : "";
+  var mountAt = get(config, ["mountAtPrefix"], "");
+
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      storyList = _useState2[0],
+      updateStoryList = _useState2[1];
+
+  var _useState3 = useState([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      collectionData = _useState4[0],
+      updateCollectionData = _useState4[1];
+
+  var updateStoryListItems = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(slug) {
+      var collectionDataResponse, storyItems;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return getCollectionData(slug, mountAt);
+
+            case 2:
+              collectionDataResponse = _context.sent;
+              updateCollectionData(collectionDataResponse);
+              storyItems = collectionDataResponse.items;
+              updateStoryList(storyItems);
+
+            case 6:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function updateStoryListItems(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  useEffect(function () {
+    if (collectionSlug) {
+      updateStoryListItems(collectionSlug);
+    }
+  }, [collectionSlug]);
+  useEffect(function () {
+    if (!collectionSlug && data) {
+      var storyItems = data.items || data;
+      updateStoryList(storyItems);
+    }
+  }, [data, collectionSlug]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CollectionName, {
+    customCollectionName: heading,
+    textColor: true,
+    collection: collectionData
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "aside-collection-m_stories__9wfUs"
+  }, storyList && storyList.length > 0 ? storyList.slice(0, 4).map(function (item) {
+    var story = item.story || item;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "aside-collection-m_story__17Jdm",
+      key: story.id
+    }, /*#__PURE__*/React.createElement(StoryCard, {
+      story: story,
+      isHorizontal: true,
+      theme: theme,
+      config: config
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "aside-collection-m_story-hero-image__13nFY"
+    }, /*#__PURE__*/React.createElement(HeroImage, {
+      story: story,
+      aspectRatio: [[4, 3]]
+    })), /*#__PURE__*/React.createElement("div", null, isHorizontal && /*#__PURE__*/React.createElement(SectionTag, {
+      story: story
+    }), /*#__PURE__*/React.createElement(Headline, {
+      story: story
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "aside-collection-m_story-byline__37KRG"
+    }, /*#__PURE__*/React.createElement(AuthorWithTime, {
+      config: opts,
+      story: story
+    })))));
+  }) : /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "no-stories",
+    className: "aside-collection-m_info__3p4zt"
+  }, "No stories found.")));
+};
+StoryCollection.propTypes = {
+  data: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  config: PropTypes.object,
+  horizontal: PropTypes.bool,
+  slotData: PropTypes.object,
+  opts: PropTypes.object
+};
+export var AsideCollectionBase = function AsideCollectionBase(_ref4) {
+  var _ref4$data = _ref4.data,
+      data = _ref4$data === void 0 ? {} : _ref4$data,
+      _ref4$config = _ref4.config,
+      config = _ref4$config === void 0 ? {} : _ref4$config,
+      _ref4$horizontal = _ref4.horizontal,
+      horizontal = _ref4$horizontal === void 0 ? false : _ref4$horizontal,
+      _ref4$slots = _ref4.slots,
+      slots = _ref4$slots === void 0 ? [] : _ref4$slots,
+      _ref4$sticky = _ref4.sticky,
+      sticky = _ref4$sticky === void 0 ? false : _ref4$sticky,
+      _ref4$keyEventsData = _ref4.keyEventsData,
+      keyEventsData = _ref4$keyEventsData === void 0 ? {} : _ref4$keyEventsData,
+      _ref4$enableKeyEvents = _ref4.enableKeyEvents,
+      enableKeyEvents = _ref4$enableKeyEvents === void 0 ? false : _ref4$enableKeyEvents,
+      adComponent = _ref4.adComponent,
+      widgetComp = _ref4.widgetComp,
+      storyId = _ref4.storyId,
+      _ref4$opts = _ref4.opts,
+      opts = _ref4$opts === void 0 ? {} : _ref4$opts;
+  if (isEmpty(data)) return null;
+  var theme = config.theme;
+  var isHorizontal = horizontal ? "horizontal-wrapper" : "";
+
+  if (horizontal) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        backgroundColor: theme
+      },
+      "data-test-id": "aside-collection",
+      id: "aside-collection-".concat(storyId),
+      className: "arrow-component arr--aside-collection " + _getClassName("wrapper ".concat(isHorizontal), _styleModuleImportMap)
+    }, /*#__PURE__*/React.createElement(StoryCollection, {
+      data: data,
+      horizontal: horizontal,
+      config: config,
+      opts: opts
+    }));
+  }
+
+  var isSticky = sticky ? "sticky" : "";
+
+  var asideSlot = function asideSlot(type, slot, index) {
+    switch (type) {
+      case "ad":
+        return /*#__PURE__*/React.createElement("div", {
+          className: "aside-collection-ad-slot aside-collection-m_ad-slot__28nE2"
+        }, adComponent(_objectSpread(_objectSpread({}, slot), {}, {
+          id: "ad-".concat(index, "_").concat(storyId)
+        })));
+
+      case "widget":
+        return /*#__PURE__*/React.createElement("div", {
+          className: "aside-collection-ad-slot aside-collection-m_ad-slot__28nE2"
+        }, widgetComp(_objectSpread(_objectSpread({}, slot), {}, {
+          id: "widget-".concat(index, "_").concat(storyId)
+        })));
+
+      case "collection":
+        return /*#__PURE__*/React.createElement("div", {
+          id: "aside-collection-".concat(index, "_").concat(storyId)
+        }, /*#__PURE__*/React.createElement(StoryCollection, {
+          slotData: slot,
+          data: data,
+          horizontal: horizontal,
+          config: config,
+          opts: opts
+        }));
+    }
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: theme
+    },
+    "data-test-id": "aside-collection",
+    className: "arrow-component arr--aside-collection " + _getClassName(["wrapper", isHorizontal, isSticky].join(" "), _styleModuleImportMap)
+  }, enableKeyEvents && /*#__PURE__*/React.createElement(KeyEvents, {
+    story: keyEventsData.story,
+    showLoadMore: keyEventsData.showLoadMore,
+    config: keyEventsData.config
+  }), slots.map(function (slot, index) {
+    return asideSlot(slot.type, slot, index);
+  }));
+};
+AsideCollectionBase.propTypes = {
+  data: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  config: PropTypes.object,
+  opts: PropTypes.object,
+  horizontal: PropTypes.bool,
+  slots: PropTypes.array,
+  adComponent: PropTypes.func,
+  widgetComp: PropTypes.func,
+  sticky: PropTypes.bool,
+  keyEventsData: PropTypes.shape({
+    story: PropTypes.object,
+    config: PropTypes.object,
+    showLoadMore: PropTypes["boolean"]
+  }),
+  enableKeyEvents: PropTypes["boolean"],
+  storyId: PropTypes.string
+};
+export var AsideCollection = StateProvider(AsideCollectionBase);

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

@@ -0,0 +1,48 @@
+import { boolean as _boolean, color, text } from "@storybook/addon-knobs";
+import React from "react";
+import { AsideCollectionBase } from ".";
+import { collectionNameTemplates, optionalSelect, withStore } from "../../../../storybook";
+import { AdPlaceholder } from "../../Atoms/AdPlaceholder";
+import { generateStory } from "../../Fixture";
+import { slotData } from "../../Fixture/slot-config";
+import Readme from "./README.md";
+var story = generateStory();
+var stories = [story, story, story];
+var label = "Background color";
+var defaultvalue = "#ffffff";
+var collectionNameDefaultValue = "#3a9fdd";
+var collectionNameBorderColorLabel = "Collection Name Border Color";
+
+var configurableSlot = function configurableSlot() {
+  return /*#__PURE__*/React.createElement(AdPlaceholder, {
+    height: "250px",
+    width: "300px"
+  });
+};
+
+withStore("Rows/Aside Collection", {
+  qt: {
+    config: {
+      "cdn-image": "thumbor-stg.assettype.com"
+    }
+  }
+}, Readme).add("Aside Collection template", function () {
+  var config = {
+    title: text("Title", "Recommended Stories"),
+    theme: color(label, defaultvalue),
+    showAuthor: _boolean("Author", true),
+    showTime: _boolean("Timestamp", true),
+    showReadTime: _boolean("Read time", true),
+    showRowTitle: _boolean("Collection name", true),
+    collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+    collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue)
+  };
+  return /*#__PURE__*/React.createElement(AsideCollectionBase, {
+    data: stories,
+    config: config,
+    adComp: configurableSlot,
+    widgetComp: configurableSlot,
+    slots: slotData,
+    sticky: true
+  });
+});

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

@@ -0,0 +1,40 @@
+# Astrology Collection Filter
+
+The _AstrologyCollection_ component is a collection of collections in a tabbed interface.
+
+## Usage
+
+### Import
+
+```jsx
+import { AstrologyCollection } from "@quintype/arrow";
+```
+
+### Setting the Row context
+
+```jsx
+const 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),
+  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: () => <CustomAdOrWidget />
+    }
+  ]
+};
+```
+
+### Use as a component
+
+```jsx
+<AstrologyCollection collection={collection} config={contextConfig} />
+```
+

package/esm/components/Rows/AstrologyCollection/astrology-collection.m.css

@@ -0,0 +1,165 @@
+@custom-media --viewport-medium (width >= 768px);
+@custom-media --viewport-large (width >= 1024px);
+.wrapper {
+  text-align: center;
+
+  :global {
+    .collection-borderBottom {
+      display: inline-block;
+    }
+
+    .collection-borderLeft {
+      display: inline-flex;
+    }
+  }
+}
+
+.collection-summary {
+  font-size: var(--arrow-fs-xs);
+  line-height: var(--arrow-lh-3);
+  margin-bottom: var(--arrow-spacing-xl);
+  color: var(--arrow-c-mono4);
+  @media (--viewport-medium) {
+    max-width: 80%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.tab {
+  display: flex;
+  justify-content: center;
+  margin-bottom: var(--arrow-spacing-xl);
+
+  @media (--viewport-medium) {
+    margin-bottom: var(--arrow-spacing-48);
+  }
+}
+
+.child-collections {
+  display: flex;
+  font-size: var(--arrow-fs-xs);
+  scroll-snap-type: x mandatory;
+  overflow: scroll;
+  scrollbar-width: none;
+}
+
+.child-collections::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+.child-collection {
+  flex-shrink: 0;
+  list-style: none;
+  cursor: pointer;
+  font-size: var(--arrow-fs-xs);
+  font-weight: var(--arrow-fw-bold);
+  padding: var(--arrow-spacing-s);
+}
+
+.child-collection.dark {
+  color: var(--arrow-c-mono4);
+}
+
+.child-collection.light {
+  color: var(--arrow-c-invert-mono3);
+}
+
+.child-collection.dark:hover,
+.open-subchild.dark {
+  color: var(--arrow-c-mono2);
+}
+
+.child-collection.light:hover,
+.open-subchild.light,
+.collection-summary.light {
+  color: var(--arrow-c-invert-mono1);
+}
+
+.open-subchild {
+  border-bottom: var(--arrow-spacing-xxs) solid var(--arrow-c-brand1);
+}
+
+.main-wrapper {
+  @media (--viewport-medium) {
+    display: grid;
+    grid-template-columns: 9fr 3fr;
+    grid-gap: var(--arrow-spacing-s);
+  }
+}
+
+.main-wrapper-container {
+  max-width: 1000px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.subCollection-stories {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  animation-name: fadeIn;
+  animation-fill-mode: both;
+  animation-duration: 1s;
+  animation-delay: 1s;
+  justify-content: space-between;
+
+  @media (--viewport-large) {
+    grid-template-columns: repeat(6, 1fr);
+  }
+
+  :global .arr--fallback-image {
+    border-radius: 50%;
+  }
+}
+
+.card {
+  flex-basis: 32%;
+  margin-bottom: var(--arrow-spacing-l);
+  padding: 0 var(--arrow-spacing-xs);
+
+  @media (--viewport-medium) {
+    flex-basis: 16%;
+  }
+
+  :global .qt-image {
+    border-radius: 50%;
+    border: solid 1px var(--arrow-c-invert-mono7);
+  }
+
+  :global .arr--headline {
+    text-align: center;
+  }
+
+  :global .arr--hero-image {
+    flex-grow: 0;
+    width: 56px;
+    height: 56px;
+    margin-left: auto;
+    margin-right: auto;
+
+    @media (--viewport-medium) {
+      width: 88px;
+      height: 88px;
+    }
+  }
+}
+
+.nomore-stories {
+  margin: auto;
+}
+
+.ads {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}