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

package/esm/components/Fixture/index.js

@@ -0,0 +1,433 @@
+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; }
+
+/* eslint-disable no-undef */
+import configJSON from "./config.json";
+import { dummyStory, dummyPhotoStory, dummyLiveBlogStory, dummyListicleStory } from "./dummyStory";
+import { get } from "lodash";
+import { createStore } from "redux";
+export var generateConfig = function generateConfig() {
+  return configJSON;
+};
+export var generateStory = function generateStory(storyType) {
+  var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+  switch (storyType) {
+    case "photo-story":
+      return Object.assign(dummyPhotoStory, data);
+
+    case "live-blog":
+      return Object.assign(dummyLiveBlogStory, data);
+
+    case "listicle-story":
+      return Object.assign(dummyListicleStory, data);
+
+    default:
+      return Object.assign(dummyStory, data);
+  }
+};
+export var generateCollection = function generateCollection() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref$stories = _ref.stories,
+      stories = _ref$stories === void 0 ? 0 : _ref$stories,
+      _ref$subCollections = _ref.subCollections,
+      subCollections = _ref$subCollections === void 0 ? [] : _ref$subCollections,
+      _ref$itemMeta = _ref.itemMeta,
+      itemMeta = _ref$itemMeta === void 0 ? {} : _ref$itemMeta;
+
+  var items = subCollections;
+  Array(stories).fill(_objectSpread({
+    type: "story"
+  }, itemMeta)).forEach(function (item, index) {
+    var story = generateStory();
+    var itm = Object.assign({}, item, {
+      id: story.id,
+      story: story
+    });
+    items.push(itm);
+  });
+  return {
+    type: "collection",
+    name: "Politics",
+    id: parseInt(Math.random() * Math.pow(10, 10)),
+    slug: "collection-slug",
+    template: "section",
+    "created-at": 1597163351395,
+    metadata: {
+      "cover-image": {
+        "cover-image-url": "https://thumbor-stg.assettype.com/ace/2020-08/f71dd527-cbc6-4cc9-94c2-8feee917f7e9/fortune.jpg",
+        metadata: {
+          width: 914,
+          height: 1200,
+          "mime-type": "image/jpeg",
+          "file-size": 179037,
+          "file-name": "fortune.jpg"
+        },
+        "cover-image-s3-key": "ace/2020-08/f71dd527-cbc6-4cc9-94c2-8feee917f7e9/fortune.jpg",
+        caption: "Some Politician"
+      },
+      section: [{
+        id: 11181,
+        name: "Health",
+        "parent-id": null,
+        "tree-ids": [11181]
+      }]
+    },
+    summary: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquam felis sed tellus mattis ultricies. Maecenas accumsan hendrerit turpis, a sollicitudin velit viverra nec. Praesent pretium, orci ac sodales volutpat, tellus orci rutrum metus.",
+    items: items
+  };
+};
+export var generateCollections = function generateCollections() {
+  var count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+  var collections = [];
+  Array(count).fill(0).forEach(function () {
+    collections.push(generateCollection({
+      stories: 10
+    }));
+  });
+  return {
+    type: "collection",
+    name: "News",
+    id: parseInt(Math.random() * Math.pow(10, 10)),
+    slug: "collection-slug",
+    template: "section",
+    metadata: {
+      "cover-image": {
+        "cover-image-url": "http://d9zv4zsfqrm9s.cloudfront.net/ace/2017-12/c811b029-962f-4364-b376-ec1548d67494/earth.jpg",
+        "cover-image-metadata": {
+          width: 600,
+          height: 600,
+          "mime-type": "image/jpeg",
+          "focus-point": [355, 204]
+        },
+        "cover-image-s3-key": "vikatan/2019-01/f0b702ac-bfd1-4dd6-8e33-52cbb0bb3153/143203_thumb.jpg",
+        caption: "Some Politician"
+      },
+      section: [{
+        id: 11181,
+        name: "Health",
+        "parent-id": null,
+        "tree-ids": [11181]
+      }]
+    },
+    summary: "This is a collection concerned with politics",
+    items: collections
+  };
+};
+export var generateCollectionsWithStories = function generateCollectionsWithStories() {
+  var count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+  var items = generateCollection({
+    stories: 12
+  });
+  var collec = generateCollections(2);
+  var collections = [];
+  var merged = items.items.concat(collec.items);
+  Array(count).fill(0).forEach(function () {
+    collections.push(generateCollection({
+      stories: 12
+    }));
+  });
+  return {
+    type: "collection",
+    name: "News",
+    id: parseInt(Math.random() * Math.pow(10, 10)),
+    slug: "collection-slug",
+    template: "section",
+    metadata: {
+      "cover-image": {
+        "cover-image-url": "http://d9zv4zsfqrm9s.cloudfront.net/ace/2017-12/c811b029-962f-4364-b376-ec1548d67494/earth.jpg",
+        "cover-image-metadata": {
+          width: 600,
+          height: 600,
+          "mime-type": "image/jpeg",
+          "focus-point": [355, 204]
+        },
+        "cover-image-s3-key": "vikatan/2019-01/f0b702ac-bfd1-4dd6-8e33-52cbb0bb3153/143203_thumb.jpg",
+        caption: "Some Politician"
+      },
+      section: [{
+        id: 11181,
+        name: "Health",
+        "parent-id": null,
+        "tree-ids": [11181]
+      }]
+    },
+    summary: "This is a collection concerned with politics",
+    items: merged
+  };
+};
+export var generateSubMenu = function generateSubMenu() {
+  return {
+    items: [{
+      "tag-name": null,
+      "item-id": 22564,
+      rank: 5493,
+      title: "Link 1",
+      "item-type": "section",
+      "section-slug": "gurupeyarchi",
+      "tag-slug": null,
+      id: 5493,
+      "parent-id": null,
+      url: "https://vikatan-web.qtstage.io/section/gurupeyarchi",
+      "section-name": "அமெரிக்காவில்",
+      data: {
+        color: "#c7c7c7"
+      },
+      items: [{
+        "tag-name": null,
+        "item-id": 22384,
+        rank: 5494,
+        title: "Link 2",
+        "item-type": "section",
+        "section-slug": "cinema",
+        "tag-slug": null,
+        id: 5494,
+        "parent-id": 5493,
+        url: "https://vikatan-web.qtstage.io/section/cinema",
+        "section-name": "அமெரிக்காவில்",
+        data: {
+          color: "#f7f7f7"
+        }
+      }, {
+        "tag-name": null,
+        "item-id": 23089,
+        rank: 5504,
+        title: "Child 1",
+        "item-type": "section",
+        "section-slug": "dry6feb2019",
+        "tag-slug": null,
+        id: 5504,
+        "parent-id": 5493,
+        url: "https://vikatan-web.qtstage.io/section/dry6feb2019",
+        "section-name": "அமெரிக்காவில்",
+        data: {
+          color: "#000000"
+        }
+      }]
+    }]
+  };
+};
+export var authorData = {
+  slug: "parvathi-mohan-2",
+  name: "Lucy Douglas",
+  social: {
+    twitter: {
+      url: "https://twitter.com/Reena00659364",
+      handle: "Twitter"
+    },
+    youtube: {
+      url: "https://www.facebook.com/people/Reena-Singh/100005438855189",
+      handle: "Youtube"
+    },
+    facebook: {
+      url: "https://www.facebook.com/people/Reena-Singh/100005438855189",
+      handle: "Facebook"
+    },
+    linkedin: {
+      url: "https://www.facebook.com/people/Reena-Singh/100005438855189",
+      handle: "LinkedIn"
+    },
+    whatsapp: {
+      url: "https://www.facebook.com/people/Reena-Singh/100005438855189",
+      handle: "Whatsapp"
+    },
+    instagram: {
+      url: "https://www.facebook.com/people/Reena-Singh/100005438855189",
+      handle: "Instagram"
+    },
+    pinterest: {
+      url: "https://www.facebook.com/people/Reena-Singh/100005438855189",
+      handle: "Pinterest"
+    }
+  },
+  bio: "Lucy Douglas is a freelance journalist based in London. She has a particular interest in small business, startups and the founders behind them and, in a previous life, was an assistant-editor at Professional Beauty magazine, where she road-tested spas up and down the country and checked out the latest advances.",
+  id: 94985,
+  "avatar-url": "https://thumbor-stg.assettype.com/ace/2019-08/145ab200-429f-44ac-8618-00c6e4643e31/cat.jpeg",
+  "avatar-s3-key": "ace/2019-08/145ab200-429f-44ac-8618-00c6e4643e31/cat.jpeg",
+  "twitter-handle": "quintype_inc",
+  stats: {
+    contributions: null
+  },
+  metadata: {}
+};
+export var generateStoryElementData = function generateStoryElementData(elementType) {
+  var story = generateStory();
+  var storyElements = get(story, ["cards", "0", "story-elements"]);
+  return storyElements.find(function (element) {
+    var subtype = element.subtype,
+        type = element.type;
+    if (subtype) return subtype === elementType;
+    return type === elementType;
+  });
+};
+export var generateMagazineIssues = function generateMagazineIssues() {
+  return [{
+    collection: {
+      id: 106138,
+      name: "Manifique",
+      metadata: {
+        "cover-image": {
+          success: true,
+          url: "https://stg-quintype-dropbox.s3-accelerate.amazonaws.com/ace.staging.quintype.com/2020-09-09/874/aleksandra_tanasienko_oQi_UdQDkzw_unsplash.jpg",
+          metadata: {
+            width: 4000,
+            height: 6000,
+            "mime-type": "image/jpeg",
+            "file-size": 2574353,
+            "file-name": "aleksandra-tanasienko-oQi_UdQDkzw-unsplash.jpg"
+          },
+          "extracted-data": {
+            artist: ""
+          },
+          attribution: "",
+          "cover-image-url": "https://thumbor-stg.assettype.com/ace/2020-09/f20cecc2-2466-4e3d-8b04-f013d880a9d0/aleksandra_tanasienko_oQi_UdQDkzw_unsplash.jpg",
+          "cover-image-s3-key": "ace/2020-09/f20cecc2-2466-4e3d-8b04-f013d880a9d0/aleksandra_tanasienko_oQi_UdQDkzw_unsplash.jpg"
+        },
+        entities: {
+          collectionEntities: {
+            magazine: [{
+              id: 199563,
+              name: "New Magazine",
+              type: "magazine",
+              "entity-type-id": 382
+            }]
+          }
+        }
+      },
+      "collection-date": null,
+      slug: "manifique",
+      template: "collection",
+      "data-source": "manual",
+      "created-at": 1599639879798
+    }
+  }, {
+    collection: {
+      id: 106137,
+      name: "High Times",
+      metadata: {
+        "cover-image": {
+          success: true,
+          url: "https://stg-quintype-dropbox.s3-accelerate.amazonaws.com/ace.staging.quintype.com/2020-09-28/294/da90b29ce035b5a3a134da39e94d654c.jpg",
+          metadata: {
+            width: 474,
+            height: 581,
+            "mime-type": "image/jpeg",
+            "file-size": 49921,
+            "file-name": "da90b29ce035b5a3a134da39e94d654c.jpg"
+          },
+          "extracted-data": {
+            artist: ""
+          },
+          attribution: "",
+          "cover-image-url": "https://thumbor-stg.assettype.com/ace/2020-09/92f5453c-4477-40d3-9a44-3cf0c245b268/da90b29ce035b5a3a134da39e94d654c.jpg",
+          "cover-image-s3-key": "ace/2020-09/92f5453c-4477-40d3-9a44-3cf0c245b268/da90b29ce035b5a3a134da39e94d654c.jpg"
+        },
+        entities: {
+          collectionEntities: {
+            magazine: [{
+              id: 199563,
+              name: "New Magazine",
+              type: "magazine",
+              "entity-type-id": 382
+            }]
+          }
+        }
+      },
+      "collection-date": null,
+      slug: "high-times",
+      template: "collection",
+      "data-source": "manual",
+      "created-at": 1599639711992
+    }
+  }, {
+    collection: {
+      id: 106131,
+      name: "New Magazine Issue",
+      metadata: {
+        "cover-image": {
+          success: true,
+          url: "https://stg-quintype-dropbox.s3-accelerate.amazonaws.com/ace.staging.quintype.com/2020-09-09/1200/alexis_zacharko_07rXq3YroVM_unsplash.jpg",
+          metadata: {
+            width: 3456,
+            height: 5184,
+            "mime-type": "image/jpeg",
+            "file-size": 3084612,
+            "file-name": "alexis-zacharko-07rXq3YroVM-unsplash.jpg",
+            "focus-point": [2154, 2269]
+          },
+          "extracted-data": {
+            artist: ""
+          },
+          attribution: "",
+          "cover-image-url": "https://thumbor-stg.assettype.com/ace/2020-09/ed79b1ed-5d63-4ec1-8a4b-da87d8ed7edc/alexis_zacharko_07rXq3YroVM_unsplash.jpg",
+          "cover-image-s3-key": "ace/2020-09/ed79b1ed-5d63-4ec1-8a4b-da87d8ed7edc/alexis_zacharko_07rXq3YroVM_unsplash.jpg"
+        },
+        entities: {
+          collectionEntities: {
+            magazine: [{
+              id: 199563,
+              name: "New Magazine",
+              type: "magazine",
+              "entity-type-id": 382
+            }]
+          }
+        }
+      },
+      "collection-date": null,
+      slug: "new-magazine-issue",
+      template: "collection",
+      "data-source": "manual",
+      "created-at": 1599616208142
+    }
+  }, {
+    collection: {
+      id: 106089,
+      name: "First Magazine Collection",
+      metadata: {
+        "cover-image": {
+          "cover-image-s3-key": "ace/2020-07/3e3dc7df-8a1c-462d-a236-265d45c28651/evil_caat.jpg",
+          "cover-image-metadata": {
+            "mime-type": "image/jpeg",
+            "focus-point": [3444, 3222],
+            width: 6000,
+            "file-size": 10319729,
+            "file-name": "evil caat.jpg",
+            height: 4000
+          },
+          caption: null,
+          "cover-image-url": "https://thumbor-stg.assettype.com/ace/2020-07/3e3dc7df-8a1c-462d-a236-265d45c28651/evil_caat.jpg"
+        },
+        entities: {
+          collectionEntities: {
+            magazine: [{
+              id: 199563,
+              name: "New Magazine",
+              type: "magazine",
+              "entity-type-id": 382
+            }]
+          }
+        }
+      },
+      "collection-date": null,
+      slug: "first-magazine-collection",
+      template: "collection",
+      "data-source": "automated",
+      "created-at": 1599571645414
+    }
+  }];
+};
+
+var reducer = function reducer() {
+  return {
+    qt: {
+      config: {
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
+  };
+};
+
+export var generateStore = createStore(reducer);

package/esm/components/Fixture/slot-config.js

@@ -0,0 +1,26 @@
+export var slotConfig = [{
+  type: "ad"
+}];
+export var slotData = [{
+  type: "widget",
+  layout: "widget",
+  layoutLabel: "Custom Widget",
+  pageType: "story",
+  widgetCode: "V2lkZ2V0JTIwMQ==",
+  config: {
+    customCode: "V2lkZ2V0JTIwMQ=="
+  }
+}, {
+  type: "collection",
+  collectionSlug: "",
+  title: ""
+}, {
+  type: "widget",
+  layout: "widget",
+  layoutLabel: "Custom Widget",
+  pageType: "story",
+  widgetCode: "V2lkZ2V0JTIwMg==",
+  config: {
+    customCode: "V2lkZ2V0JTIwMg=="
+  }
+}];

package/esm/components/Molecules/FullScreenImages/fullscreenimages.scss

@@ -0,0 +1,56 @@
+@import "../../../../node_modules/react-image-lightbox/style.css";
+
+.arr--image-lightbox {
+  .icon.loader {
+    color: var(--arrow-c-brand1);
+  }
+
+  .ril__toolbarRightSide {
+    flex-grow: 1;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .ril__toolbar {
+    bottom: 0;
+    top: auto;
+  }
+
+  img.ril__image {
+    width: unset;
+    max-width: 100%;
+  }
+
+  .ril__zoomInButton {
+    position: relative;
+    border-right: 1px solid var(--arrow-c-mono7);
+    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNyIgaGVpZ2h0PSIxNyIgdmlld0JveD0iMCAwIDE3IDE3Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgICAgPHBhdGggZD0iTS0zLTRoMjR2MjRILTN6IiBvcGFjaXR5PSIuMzg0Ii8+CiAgICAgICAgPGcgZmlsbD0iI0ZGRiI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik04IDBoMXYxN0g4eiIvPgogICAgICAgICAgICA8cGF0aCBkPSJNMTcgOHYxSDBWOHoiLz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=")
+      no-repeat center;
+  }
+
+  .ril__zoomOutButton {
+    position: relative;
+    border-right: 1px solid var(--arrow-c-mono7);
+    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNyIgaGVpZ2h0PSIxIiB2aWV3Qm94PSIwIDAgMTcgMSI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgIDxwYXRoIGQ9Ik0tMy0xMmgyNHYyNEgtM3oiIG9wYWNpdHk9Ii4zODQiLz4KICAgICAgICA8cGF0aCBmaWxsPSIjRkZGIiBkPSJNMTcgMHYxSDBWMHoiLz4KICAgIDwvZz4KPC9zdmc+Cg==")
+      no-repeat center;
+  }
+
+  .ril__zoomInButton,
+  .ril__zoomOutButton,
+  .ril__closeButton {
+    width: 48px;
+    height: 48px;
+  }
+  .ril__navButtons {
+    outline: none;
+    border-radius: 0;
+  }
+
+  .ril__toolbarItem .arr--hyperlink-button {
+    position: unset;
+    svg {
+      position: relative;
+      top: 10px;
+    }
+  }
+}

package/esm/components/Molecules/FullScreenImages/index.js

@@ -0,0 +1,119 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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 React, { useState, Suspense, lazy } from "react";
+import { useSelector } from "react-redux";
+import { get } from "lodash";
+import PropTypes from "prop-types";
+import "./fullscreenimages.scss";
+import { Loading } from "../../Svgs/Loading/loading";
+import { HyperLink } from "../../Atoms/Hyperlink";
+var Lightbox = /*#__PURE__*/lazy(function () {
+  return import("react-image-lightbox");
+});
+export var FullScreenImages = function FullScreenImages(_ref) {
+  var _ref$imageSlug = _ref.imageSlug,
+      imageSlug = _ref$imageSlug === void 0 ? "" : _ref$imageSlug,
+      template = _ref.template,
+      _ref$element = _ref.element,
+      element = _ref$element === void 0 ? {} : _ref$element,
+      props = _ref.props;
+  var cdnImage = useSelector(function (state) {
+    return get(state, ["qt", "config", "cdn-image"]);
+  });
+
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      photoIndex = _useState2[0],
+      handleImage = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isOpen = _useState4[0],
+      handleOpen = _useState4[1];
+
+  var deviceWidth = get(global, ["innerWidth"], 0);
+  var hyperlinks = get(element, ["story-elements"], []).map(function (image) {
+    return image.hyperlink;
+  });
+  var imageUrlList = [];
+
+  if (!imageSlug) {
+    imageUrlList = get(element, ["story-elements"], []).map(function (image) {
+      return "//".concat(cdnImage, "/").concat(image["image-s3-key"], "?w=").concat(deviceWidth);
+    });
+  }
+
+  var onClickHandler = function onClickHandler(index) {
+    handleOpen(true);
+    handleImage(index);
+  };
+
+  var onClickKey = imageSlug ? "onClick" : "onClickHandler";
+  var imageUrlListLength = imageUrlList.length;
+
+  var onMoveNext = function onMoveNext(imageUrlListLength) {
+    var next = (photoIndex + 1) % imageUrlListLength;
+    handleImage(next);
+  };
+
+  var onMovePrev = function onMovePrev(imageUrlListLength) {
+    var prev = (photoIndex + imageUrlListLength - 1) % imageUrlListLength;
+    handleImage(prev);
+  };
+
+  var onClose = function onClose() {
+    handleImage(0);
+    handleOpen(false);
+  };
+
+  var getHyperLink = function getHyperLink() {
+    if (element.hyperlink || hyperlinks[photoIndex]) {
+      return /*#__PURE__*/React.createElement(HyperLink, {
+        hyperLink: element.hyperlink || hyperlinks[photoIndex]
+      });
+    }
+
+    return null;
+  };
+
+  var lightboxProps = imageSlug ? {
+    mainSrc: "//".concat(cdnImage, "/").concat(imageSlug, "?w=").concat(deviceWidth),
+    toolbarButtons: [getHyperLink()]
+  } : {
+    mainSrc: imageUrlList[photoIndex],
+    nextSrc: imageUrlList[(photoIndex + 1) % imageUrlListLength],
+    prevSrc: imageUrlList[(photoIndex + imageUrlListLength - 1) % imageUrlListLength],
+    onMoveNextRequest: function onMoveNextRequest() {
+      return onMoveNext(imageUrlListLength);
+    },
+    onMovePrevRequest: function onMovePrevRequest() {
+      return onMovePrev(imageUrlListLength);
+    },
+    toolbarButtons: [getHyperLink()]
+  };
+
+  var LoadingScreen = function LoadingScreen() {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Loading, null));
+  };
+
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(template, _objectSpread(_defineProperty({}, onClickKey, onClickHandler), props)), isOpen ? /*#__PURE__*/React.createElement(Suspense, {
+    fallback: /*#__PURE__*/React.createElement(LoadingScreen, null)
+  }, /*#__PURE__*/React.createElement(Lightbox, _extends({
+    wrapperClassName: "arr--image-lightbox",
+    onCloseRequest: onClose
+  }, lightboxProps))) : null);
+};
+FullScreenImages.propTypes = {
+  imageSlug: PropTypes.string,
+  template: PropTypes.func,
+  element: PropTypes.shape({
+    "story-elements": PropTypes.array
+  }),
+  props: PropTypes.object
+};

package/esm/components/Molecules/KeyEvents/README.md

@@ -0,0 +1,21 @@
+# Key Events
+
+Key events is used to represent the event templates for a live blog story.
+
+## Usage
+
+```jsx
+import { KeyEvents } from "@quintype/arrow";
+```
+
+### Use as a component
+
+```jsx
+
+const config = {
+   theme: #333333;
+}
+
+<KeyEvents config={config} />
+
+```