@quintype/arrow 3.15.1-perf.5 → 3.15.1-perf.9

package/esm/components/Atoms/Headline/index.js

@@ -0,0 +1,97 @@
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+import React from "react";
+import PropTypes from "prop-types";
+import { Link } from "@quintype/components";
+import { useStateValue } from "../../SharedContext";
+import { get } from "lodash";
+import { getTextColor, isExternalStory, getStoryUrl } from "../../../utils/utils";
+import { PremiumStoryIcon } from "../PremiumStoryIcon";
+import LiveIcon from "../../Svgs/liveicon";
+import "./headline.m.css";
+var _styleModuleImportMap = {
+  "./headline.m.css": {
+    "wrapper": "headline-m_wrapper__3nUmh",
+    "headline": "headline-m_headline__3_NhV",
+    "dark": "headline-m_dark__en3hW",
+    "light": "headline-m_light__3lKJB"
+  }
+};
+export var Headline = function Headline(_ref) {
+  var story = _ref.story,
+      headerLevel = _ref.headerLevel,
+      _ref$premiumStoryIcon = _ref.premiumStoryIconConfig,
+      premiumStoryIconConfig = _ref$premiumStoryIcon === void 0 ? {} : _ref$premiumStoryIcon,
+      isLink = _ref.isLink;
+  var configData = useStateValue() || {};
+  var _premiumStoryIconConf = premiumStoryIconConfig.iconColor,
+      iconColor = _premiumStoryIconConf === void 0 ? "#F7B500" : _premiumStoryIconConf,
+      _premiumStoryIconConf2 = premiumStoryIconConfig.iconStyle,
+      iconStyle = _premiumStoryIconConf2 === void 0 ? "star" : _premiumStoryIconConf2,
+      _premiumStoryIconConf3 = premiumStoryIconConfig.enablePremiumStoryIcon,
+      enablePremiumStoryIcon = _premiumStoryIconConf3 === void 0 ? false : _premiumStoryIconConf3,
+      _premiumStoryIconConf4 = premiumStoryIconConfig.showLiveIcon,
+      showLiveIcon = _premiumStoryIconConf4 === void 0 ? false : _premiumStoryIconConf4;
+  var alternateHeadline = get(story, ["alternative", "home", "default", "headline"]);
+  var premiumStory = enablePremiumStoryIcon && get(story, ["access"]) === "subscription";
+  var headline = alternateHeadline || story.headline;
+  var HeaderTag = "h" + headerLevel;
+
+  var positionHeadline = function positionHeadline() {
+    switch (parseInt(headerLevel)) {
+      case 1:
+        return "-2px";
+
+      case 2:
+        return "2px";
+
+      case 3:
+        return "4px";
+
+      case 4:
+        return "5px";
+
+      default:
+        return "6px";
+    }
+  };
+
+  var textColor = getTextColor(configData.theme);
+  var wrapperClass = premiumStory ? "wrapper" : "";
+  var iconSize = "24px";
+  var enableLiveIcon = showLiveIcon && story["story-template"] === "live-blog" && !get(story, ["metadata", "is-closed"], false);
+  return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "headline",
+    className: "arrow-component arr--headline " + _getClassName(wrapperClass, _styleModuleImportMap)
+  }, premiumStory && /*#__PURE__*/React.createElement(PremiumStoryIcon, {
+    width: iconSize,
+    height: iconSize,
+    color: iconColor,
+    iconType: iconStyle,
+    positionTop: positionHeadline()
+  }), isLink ? /*#__PURE__*/React.createElement(Link, {
+    href: getStoryUrl(story, "/".concat(story.slug)),
+    externalLink: isExternalStory(story),
+    "aria-label": "headline"
+  }, /*#__PURE__*/React.createElement(HeaderTag, {
+    className: _getClassName("headline ".concat(textColor), _styleModuleImportMap)
+  }, enableLiveIcon && /*#__PURE__*/React.createElement(LiveIcon, null), headline)) : /*#__PURE__*/React.createElement(HeaderTag, {
+    className: _getClassName("headline ".concat(textColor), _styleModuleImportMap)
+  }, enableLiveIcon && /*#__PURE__*/React.createElement(LiveIcon, null), headline));
+};
+Headline.propTypes = {
+  /** The Story Object from the API response */
+  story: PropTypes.object.isRequired,
+
+  /** Header tags ranging h1-h6, where h[headerLevel] */
+  headerLevel: PropTypes.string,
+  premiumStoryIconConfig: PropTypes.shape({
+    iconColor: PropTypes.string,
+    iconType: PropTypes.string,
+    enablePremiumStoryIcon: PropTypes.bool
+  }),
+  isLink: PropTypes.bool
+};
+Headline.defaultProps = {
+  headerLevel: "6",
+  isLink: true
+};

package/esm/components/Atoms/Headline/stories.js

@@ -0,0 +1,39 @@
+import React from "react";
+import { generateStory } from "../../Fixture";
+import { optionalSelect, withStore } from "../../../../storybook";
+import { Headline } from "./index";
+import Readme from "./README.md";
+import { boolean as _boolean, color } from "@storybook/addon-knobs";
+var story = generateStory();
+var headerLevelOptions = {
+  "No Value": "",
+  h1: 1,
+  h2: 2,
+  h3: 3,
+  h4: 4,
+  h5: 5,
+  h6: 6
+};
+var iconType = {
+  Star: "star",
+  Crown: "crown",
+  Lock: "lock",
+  Key: "key"
+};
+withStore("Atoms/Headline", {
+  qt: {
+    config: {
+      "cdn-image": "thumbor-stg.assettype.com"
+    }
+  }
+}, Readme).add("default", function () {
+  return /*#__PURE__*/React.createElement(Headline, {
+    story: story,
+    headerLevel: optionalSelect("Header level", headerLevelOptions),
+    premiumStoryIconConfig: {
+      iconColor: color("Icon color", "#F7B500"),
+      iconStyle: optionalSelect("Icon Types", iconType),
+      enablePremiumStoryIcon: _boolean("Enable Premium Icon", true)
+    }
+  });
+}, Readme);

package/esm/components/Atoms/HeroImage/README.md

@@ -0,0 +1,13 @@
+# HeroImage
+Displays the Hero Image for a story with the help of the `ResponsiveHeroImage` component from the `@quintype/components` package.
+
+## Usage
+```jsx
+<HeroImage story={story} />
+```
+
+```jsx
+<HeroImage story={story} FullBleed={false} />
+```
+
+<!-- PROPS -->

package/esm/components/Atoms/HeroImage/hero-image.m.css

@@ -0,0 +1,72 @@
+@custom-media --viewport-medium (width >= 768px);
+
+.hero-image {
+  margin-bottom: var(--arrow-spacing-xs);
+  padding-right: 0;
+  flex-grow: 1;
+  position: relative;
+}
+.right-padding {
+  margin-bottom: 0;
+  padding-right: var(--arrow-spacing-s);
+  flex-grow: 1;
+}
+
+.left-padding {
+  margin-bottom: 0;
+  padding-left: var(--arrow-spacing-s);
+  flex-grow: 1;
+}
+
+.right-padding-mob {
+  margin-bottom: 0;
+  padding-right: var(--arrow-spacing-s);
+  flex-grow: 1;
+  flex-basis: 30%;
+  @media (--viewport-medium) {
+    padding-right: 0;
+    margin-bottom: var(--arrow-spacing-xs);
+  }
+}
+
+.placeholder {
+  background-color: lightgray;
+}
+
+html[dir="rtl"] {
+  .right-padding,
+  .right-padding-mob {
+    padding-right: 0;
+    padding-left: var(--arrow-spacing-s);
+  }
+
+  .right-padding-mob {
+    @media (--viewport-medium) {
+      padding-left: 0;
+    }
+  }
+}
+
+.hero-image-mob {
+  margin-bottom: var(--arrow-spacing-xs);
+  padding-right: 0;
+  flex-grow: 1;
+  @media (--viewport-medium) {
+    /* margin-bottom: 0; */
+  }
+}
+.with-padding {
+  padding: 16px 16px 0 16px;
+}
+
+.image {
+  position: relative;
+}
+.image img {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 100%;
+}

package/esm/components/Atoms/HeroImage/index.js

@@ -0,0 +1,175 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+import { Link, ResponsiveHeroImage } from "@quintype/components";
+import { get } from "lodash";
+import PropTypes from "prop-types";
+import React from "react";
+import { useSelector } from "react-redux";
+import { clientWidth, isExternalStory, getStoryUrl } from "../../../utils/utils";
+import { useStateValue } from "../../SharedContext";
+import { FallbackImage } from "../FallbackImage";
+import { HyperLink } from "../Hyperlink";
+import "./hero-image.m.css";
+var _styleModuleImportMap = {
+  "./hero-image.m.css": {
+    "hero-image": "hero-image-m_hero-image__3lraV",
+    "right-padding": "hero-image-m_right-padding__1LkCe",
+    "left-padding": "hero-image-m_left-padding__pYRAj",
+    "right-padding-mob": "hero-image-m_right-padding-mob__3-uOU",
+    "placeholder": "hero-image-m_placeholder__1omCm",
+    "hero-image-mob": "hero-image-m_hero-image-mob__13JJp",
+    "with-padding": "hero-image-m_with-padding__324G_",
+    "image": "hero-image-m_image__1mz0U"
+  }
+};
+export var HeroImage = function HeroImage(_ref) {
+  var story = _ref.story,
+      FullBleed = _ref.FullBleed,
+      aspectRatio = _ref.aspectRatio,
+      defaultWidth = _ref.defaultWidth,
+      widths = _ref.widths,
+      isHorizontal = _ref.isHorizontal,
+      isHorizontalMobile = _ref.isHorizontalMobile,
+      isHorizontalWithImageLast = _ref.isHorizontalWithImageLast,
+      defaultFallback = _ref.defaultFallback,
+      isStoryPageImage = _ref.isStoryPageImage,
+      config = _ref.config;
+
+  var _ref2 = useStateValue() || {},
+      _ref2$fallbackImageUr = _ref2.fallbackImageUrl,
+      fallbackImageUrl = _ref2$fallbackImageUr === void 0 ? "" : _ref2$fallbackImageUr;
+
+  var _config$StoryTemplate = config.StoryTemplateIcon,
+      StoryTemplateIcon = _config$StoryTemplate === void 0 ? function () {
+    return null;
+  } : _config$StoryTemplate;
+  var showImagePlaceholder = useSelector(function (state) {
+    return get(state, ["qt", "config", "showPlaceholder"]);
+  });
+  var getPlaceholderStyleName = showImagePlaceholder ? "placeholder" : "";
+  var fullBleed = FullBleed ? "" : "with-padding";
+  var heroImageClass = "hero-image";
+  if (isHorizontal) heroImageClass = "right-padding";else if (isHorizontalWithImageLast) heroImageClass = "left-padding";
+  var heroImageMobClasses = isHorizontalMobile ? "right-padding-mob" : "";
+
+  var getPadding = function getPadding(aspectRatio) {
+    var _aspectRatio = _slicedToArray(aspectRatio, 2),
+        height = _aspectRatio[0],
+        width = _aspectRatio[1];
+
+    if (height > 0 && width > 0) {
+      var padding = width / height * 100;
+      return padding;
+    }
+
+    return 0;
+  };
+
+  var _aspectRatio2 = _slicedToArray(aspectRatio, 2),
+      mobileAspectRatio = _aspectRatio2[0],
+      _aspectRatio2$ = _aspectRatio2[1],
+      desktopAspectRatio = _aspectRatio2$ === void 0 ? mobileAspectRatio : _aspectRatio2$;
+
+  var isMobile = clientWidth("mobile");
+  var imageAspectRatio = isMobile ? mobileAspectRatio : desktopAspectRatio;
+  var imagePadding = isMobile ? getPadding(mobileAspectRatio) : getPadding(desktopAspectRatio);
+  var slug = get(story, ["hero-image-s3-key"]) || get(story, ["alternative", "home", "default", "hero-image", "hero-image-s3-key"]);
+  var hyperLink = get(story, ["hero-image-hyperlink"], "");
+
+  var fallbackImage = function fallbackImage() {
+    if (!slug) {
+      if (fallbackImageUrl && !isStoryPageImage) {
+        return /*#__PURE__*/React.createElement("figure", {
+          style: {
+            paddingTop: imagePadding + "%"
+          },
+          className: "arr--responsive-hero-image " + _getClassName("image ".concat(getPlaceholderStyleName), _styleModuleImportMap)
+        }, /*#__PURE__*/React.createElement("img", {
+          className: "qt-image",
+          "data-src": "".concat(fallbackImageUrl),
+          alt: "image-fallback"
+        }));
+      }
+
+      return /*#__PURE__*/React.createElement(React.Fragment, null, defaultFallback ? /*#__PURE__*/React.createElement("div", {
+        "data-test-id": "arr--fallback-hero-image",
+        style: {
+          paddingTop: imagePadding + "%"
+        },
+        className: "arr--fallback-hero-image " + _getClassName("image ".concat(getPlaceholderStyleName), _styleModuleImportMap)
+      }, /*#__PURE__*/React.createElement(StoryTemplateIcon, {
+        storyTemplate: story["story-template"]
+      }), /*#__PURE__*/React.createElement(FallbackImage, null)) : null);
+    }
+
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("figure", {
+      style: {
+        paddingTop: imagePadding + "%"
+      },
+      className: "arr--responsive-hero-image " + _getClassName("image ".concat(getPlaceholderStyleName), _styleModuleImportMap)
+    }, /*#__PURE__*/React.createElement(StoryTemplateIcon, {
+      storyTemplate: story["story-template"]
+    }), /*#__PURE__*/React.createElement(ResponsiveHeroImage, {
+      story: story,
+      aspectRatio: imageAspectRatio,
+      defaultWidth: defaultWidth,
+      widths: widths,
+      imgParams: {
+        auto: ["format", "compress"],
+        fit: "max"
+      }
+    })), isStoryPageImage && hyperLink && /*#__PURE__*/React.createElement(HyperLink, {
+      hyperLink: hyperLink
+    }));
+  };
+
+  return story && (isStoryPageImage ? /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "arr--hero-image",
+    className: "arr--hero-image " + _getClassName("".concat(heroImageClass, " ").concat(fullBleed, " ").concat(heroImageMobClasses), _styleModuleImportMap)
+  }, fallbackImage()) : /*#__PURE__*/React.createElement(Link, {
+    "data-test-id": "arr--hero-image",
+    href: getStoryUrl(story, "/".concat(story.slug)),
+    externalLink: isExternalStory(story),
+    "aria-label": "fallback-hero-image",
+    className: "arr--hero-image " + _getClassName("".concat(heroImageClass, " ").concat(fullBleed, " ").concat(heroImageMobClasses), _styleModuleImportMap)
+  }, fallbackImage()));
+};
+HeroImage.propTypes = {
+  /** The Story Object from the API response */
+  story: PropTypes.object.isRequired,
+
+  /** Removes the Hero Image padding for the image to bleed over the margin */
+  FullBleed: PropTypes.bool,
+
+  /** The default width for the image, in case the browser does not support srcset */
+  defaultWidth: PropTypes.number,
+
+  /** The list of available widths */
+  widths: PropTypes.array,
+  // fatch the correct hero image
+  aspectRatio: PropTypes.array,
+  //  Hints for the browser to choose the best size
+
+  /** This prop is responsible for adding padding-right of the image and remove padding bottom of the image  */
+  isHorizontal: PropTypes.bool,
+
+  /** This prop is responsible for adding padding-bottom in desktop and padding-right in mobile */
+  isHorizontalMobile: PropTypes.bool,
+  // this prop is responsive for rendering fallback image on story page
+  defaultFallback: PropTypes.bool,
+  isHorizontalWithImageLast: PropTypes.bool,
+  isStoryPageImage: PropTypes.bool,
+  config: PropTypes.object
+};
+HeroImage.defaultProps = {
+  FullBleed: true,
+  aspectRatio: [[1, 1], [16, 9]],
+  defaultWidth: 480,
+  widths: [250, 480, 640],
+  isHorizontal: false,
+  isHorizontalMobile: false,
+  defaultFallback: true,
+  isStoryPageImage: false,
+  isHorizontalWithImageLast: false,
+  config: {}
+};

package/esm/components/Atoms/HeroImage/stories.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { generateStory } from "../../Fixture";
+import { HeroImage } from "./index";
+import Readme from "./README.md";
+import { withStore } from "../../../../storybook";
+var story = generateStory();
+withStore("Atoms/Hero Image", {
+  qt: {
+    config: {
+      "cdn-image": "thumbor-stg.assettype.com"
+    }
+  }
+}, Readme).add("Full Bleed Image", function () {
+  return /*#__PURE__*/React.createElement(HeroImage, {
+    story: story
+  });
+}).add("With Padding Image", function () {
+  return /*#__PURE__*/React.createElement(HeroImage, {
+    story: story,
+    FullBleed: false,
+    aspectRatio: [[1, 1], [16, 9]]
+  });
+});

package/esm/components/Atoms/Hyperlink/hyperlink.m.css

@@ -0,0 +1,10 @@
+.hyperlink-button {
+  position: absolute;
+  right: var(--arrow-spacing-xxs);
+  bottom: var(--arrow-spacing-xxs);
+  z-index: 10;
+}
+
+.hyperlink-button svg rect {
+  fill: var(--arrow-c-brand1);
+}

package/esm/components/Atoms/Hyperlink/index.js

@@ -0,0 +1,20 @@
+import { Link } from "@quintype/components";
+import React from "react";
+import PropTypes from "prop-types";
+import { HyperLinkIcon } from "../../Svgs/hyperlink";
+import "./hyperlink.m.css";
+export var HyperLink = function HyperLink(_ref) {
+  var _ref$hyperLink = _ref.hyperLink,
+      hyperLink = _ref$hyperLink === void 0 ? "" : _ref$hyperLink;
+  if (!hyperLink) return null;
+  return /*#__PURE__*/React.createElement(Link, {
+    href: hyperLink,
+    "aria-label": "hyperlink-button",
+    className: "arr--hyperlink-button hyperlink-m_hyperlink-button__1CqWx",
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, /*#__PURE__*/React.createElement(HyperLinkIcon, null));
+};
+HyperLink.propTypes = {
+  hyperLink: PropTypes.string
+};

package/esm/components/Atoms/LoadMoreTarget/index.js

@@ -0,0 +1,24 @@
+import React from "react";
+import PropTypes from "prop-types";
+export var LoadMoreTarget = function LoadMoreTarget(_ref) {
+  var collection = _ref.collection,
+      componentName = _ref.componentName,
+      offset = _ref.offset,
+      limit = _ref.limit;
+  return /*#__PURE__*/React.createElement("div", {
+    id: "ELM-".concat(collection.id),
+    "data-collection-slug": collection["slug"],
+    "data-component-name": componentName,
+    "data-collection-offset": offset,
+    "data-collection-limit": limit
+  });
+};
+LoadMoreTarget.propTypes = {
+  collection: PropTypes.shape({
+    id: PropTypes.string,
+    slug: PropTypes.string
+  }),
+  componentName: PropTypes.string,
+  offset: PropTypes.number,
+  limit: PropTypes.number
+};

package/esm/components/Atoms/Loadmore/__snapshots__/load-more.test.js.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Load more button Should render button and load items subsequently with SubsequentLoadCount as template property. 1`] = `
+<div
+  className="arr--button load-more-m_button__1mmf1 load-more-m_dark__3dfzb load-more-m_default__2_k4V"
+  data-test-id="load-more"
+>
+  Read More
+</div>
+`;
+
+exports[`Load more button Should render button and navigate to the corresponding url with NavigateToPage as template property. 1`] = `
+<a
+  aria-label="load-more"
+  data-test-id="load-more"
+  href="/"
+  onClick={[Function]}
+>
+  <div
+    className="arr--button load-more-m_button__1mmf1 load-more-m_dark__3dfzb load-more-m_default__2_k4V"
+  >
+    Read More
+  </div>
+</a>
+`;

package/esm/components/Atoms/Loadmore/index.js

@@ -0,0 +1,61 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+var _styleModuleImportMap = {
+  "./load-more.m.css": {
+    "button": "load-more-m_button__1mmf1",
+    "default": "load-more-m_default__2_k4V",
+    "dark": "load-more-m_dark__3dfzb",
+    "light": "load-more-m_light__ePZQI"
+  }
+};
+
+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 from "react";
+import { LinkBase } from "@quintype/components";
+import PropTypes from "prop-types";
+import { getTextColor, generateNavigateSlug } from "../../../utils/utils";
+import "./load-more.m.css";
+export var LoadmoreButton = function LoadmoreButton(_ref) {
+  var _ref$config = _ref.config,
+      config = _ref$config === void 0 ? {} : _ref$config,
+      collection = _ref.collection,
+      _ref$template = _ref.template,
+      template = _ref$template === void 0 ? "SubsequentLoadCount" : _ref$template,
+      onClick = _ref.onClick,
+      navigate = _ref.navigate,
+      qtConfig = _ref.qtConfig;
+  var _config$showButton = config.showButton,
+      showButton = _config$showButton === void 0 ? true : _config$showButton,
+      _config$buttonText = config.buttonText,
+      buttonText = _config$buttonText === void 0 ? "Read More" : _config$buttonText,
+      _config$theme = config.theme,
+      theme = _config$theme === void 0 ? "" : _config$theme,
+      _config$customUrlPath = config.customUrlPath,
+      customUrlPath = _config$customUrlPath === void 0 ? "" : _config$customUrlPath;
+  if (!showButton) return null;
+  var textColor = getTextColor(theme);
+  var slug = customUrlPath ? "/".concat(customUrlPath) : generateNavigateSlug(collection, _objectSpread(_objectSpread({}, qtConfig), config));
+  return template === "SubsequentLoadCount" ? /*#__PURE__*/React.createElement("div", {
+    onClick: onClick,
+    "data-test-id": "load-more",
+    className: "arr--button " + _getClassName("button ".concat(textColor, " default"), _styleModuleImportMap)
+  }, buttonText) : /*#__PURE__*/React.createElement(LinkBase, {
+    href: slug,
+    navigateTo: navigate,
+    "data-test-id": "load-more",
+    "aria-label": "load-more"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "arr--button " + _getClassName("button ".concat(textColor, " default"), _styleModuleImportMap)
+  }, buttonText));
+};
+LoadmoreButton.propTypes = {
+  collection: PropTypes.object,
+  template: PropTypes.string,
+  config: PropTypes.object,
+  onClick: PropTypes.func,
+  navigate: PropTypes.func,
+  qtConfig: PropTypes.object
+};

package/esm/components/Atoms/Loadmore/load-more.m.css

@@ -0,0 +1,23 @@
+.button {
+  padding: var(--arrow-spacing-xs) var(--arrow-spacing-l);
+  border: 1px solid;
+  display: flex;
+  margin: var(--arrow-spacing-m) auto var(--arrow-spacing-xs) auto;
+  font-size: var(--arrow-fs-xs);
+  border-radius: var(--arrow-spacing-xxs);
+  background-color: transparent;
+  width: fit-content;
+  cursor: pointer;
+}
+
+.default {
+  display: block;
+}
+
+.dark {
+  color: var(--arrow-c-mono2);
+}
+
+.light {
+  color: var(--arrow-c-invert-mono2);
+}

package/esm/components/Atoms/Loadmore/load-more.test.js

@@ -0,0 +1,26 @@
+import * as React from "react";
+import renderer from "react-test-renderer";
+import { LoadmoreButton } from "./index";
+import { Provider } from "react-redux";
+import { generateStore, generateCollection } from "../../Fixture";
+var collection = generateCollection();
+describe("Load more button", function () {
+  it("Should render button and load items subsequently with SubsequentLoadCount as template property.", function () {
+    var wrapper = renderer.create( /*#__PURE__*/React.createElement(Provider, {
+      store: generateStore
+    }, /*#__PURE__*/React.createElement(LoadmoreButton, {
+      template: "SubsequentLoadCount",
+      collection: collection
+    }))).toJSON();
+    expect(wrapper).toMatchSnapshot();
+  });
+  it("Should render button and navigate to the corresponding url with NavigateToPage as template property.", function () {
+    var wrapper = renderer.create( /*#__PURE__*/React.createElement(Provider, {
+      store: generateStore
+    }, /*#__PURE__*/React.createElement(LoadmoreButton, {
+      template: "NavigateToPage",
+      collection: collection
+    }))).toJSON();
+    expect(wrapper).toMatchSnapshot();
+  });
+});

package/esm/components/Atoms/Loadmore/stories.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { withStore, optionalSelect } from "../../../../storybook";
+import { LoadmoreButton } from "./index";
+import Readme from "./README.md";
+import { generateCollection } from "../../Fixture";
+var collection = generateCollection();
+var buttonOptions = {
+  NavigateToPage: "NavigateToPage",
+  SubsequentLoadCount: "SubsequentLoadCount",
+  CustomUrlPath: "CustomUrlPath"
+};
+withStore("Atoms/Button", {}, Readme).add("Buttons Options", function () {
+  return /*#__PURE__*/React.createElement(LoadmoreButton, {
+    collection: collection,
+    template: optionalSelect("Button Options", buttonOptions)
+  });
+});

package/esm/components/Atoms/MagazineCoverImage/README.md

@@ -0,0 +1,21 @@
+# MagazineCoverImage
+
+Magazine cover image is used to represent the cover of the magazine.
+
+## Usage
+
+Import the MagazineCoverImage and pass collection, props and the config.
+
+```jsx
+import { MagazineCoverImage } from "@quintype/arrow";
+```
+
+### Use as a component
+
+```jsx
+const contextConfig = {
+  theme: #333333;
+};
+<MagazineCoverImage collection={collection} config={contextConfig} >
+
+```