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

package/atoms/ExtendedLoadMore/index-c61a16dc.js

@@ -1,350 +0,0 @@
-import { a as get_1, c as _slicedToArray, d as clientWidth, _ as _getClassName, e as getStoryUrl, f as isExternalStory, g as getTextColor, r as rgbToHex } from './index-ad3c83c3.js';
-import { Link, ResponsiveHeroImage } from '@quintype/components';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { useSelector } from 'react-redux';
-import { u as useStateValue } from './index-1e444d20.js';
-
-var ImageFallbackIcon = function ImageFallbackIcon(_ref) {
-  var _ref$width = _ref.width,
-      width = _ref$width === void 0 ? 40 : _ref$width,
-      _ref$height = _ref.height,
-      height = _ref$height === void 0 ? 30 : _ref$height,
-      _ref$iconColor = _ref.iconColor,
-      iconColor = _ref$iconColor === void 0 ? "#99B0CB" : _ref$iconColor;
-  return /*#__PURE__*/React.createElement("svg", {
-    width: width,
-    height: height,
-    viewBox: "0 0 102 76",
-    version: "1.1"
-  }, /*#__PURE__*/React.createElement("g", {
-    id: "demo-home-copy",
-    stroke: "none",
-    strokeWidth: "1",
-    fill: "none",
-    fillRule: "evenodd",
-    transform: "translate(-377.000000, -314.000000)"
-  }, /*#__PURE__*/React.createElement("g", {
-    id: "Group-13",
-    transform: "translate(377.000000, 314.000000)"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M43.2,49.7 L62.2,19.2 L87.2,59.4 L17,59.4 L32.8,39.4 L43.2,49.7 Z M29.9,28.6 C25.8683213,28.6 22.6,25.3316787 22.6,21.3 C22.6,17.2683213 25.8683213,14 29.9,14 C33.9316787,14 37.2,17.2683213 37.2,21.3 C37.2,25.3316787 33.9316787,28.6 29.9,28.6 Z",
-    id: "Combined-Shape",
-    fill: iconColor,
-    fillRule: "nonzero"
-  }), /*#__PURE__*/React.createElement("rect", {
-    id: "Rectangle-19",
-    stroke: iconColor,
-    strokeWidth: "3",
-    x: "1.5",
-    y: "1.5",
-    width: "99",
-    height: "73",
-    rx: "3"
-  }))));
-};
-ImageFallbackIcon.propTypes = {
-  width: PropTypes.object,
-  height: PropTypes.object,
-  iconColor: PropTypes.object
-};
-
-var imageFallback = function imageFallback() {
-  return /*#__PURE__*/React.createElement("div", {
-    className: "arr--fallback-image fallback-m_image__1GYCJ fallback-m_image-position__3KddP"
-  }, /*#__PURE__*/React.createElement("figure", {
-    className: "arr--fallback-svg fallback-m_fallback-svg__tK9fL"
-  }, /*#__PURE__*/React.createElement(ImageFallbackIcon, null)));
-};
-
-var FallbackImage = function FallbackImage(_ref) {
-  var slug = _ref.slug;
-
-  if (slug) {
-    return /*#__PURE__*/React.createElement(Link, {
-      href: slug,
-      "aria-label": "image-fallback"
-    }, imageFallback());
-  } else {
-    return imageFallback();
-  }
-};
-FallbackImage.propTypes = {
-  slug: PropTypes.string
-};
-
-var HyperLinkIcon = function HyperLinkIcon() {
-  return /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "36",
-    height: "28"
-  }, /*#__PURE__*/React.createElement("g", {
-    fill: "none",
-    fillRule: "evenodd"
-  }, /*#__PURE__*/React.createElement("rect", {
-    width: "36",
-    height: "28",
-    fill: "#3D6FCF",
-    rx: "4"
-  }), /*#__PURE__*/React.createElement("path", {
-    stroke: "#FFF",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: "2",
-    d: "M22 14.667v4c0 .736-.597 1.333-1.333 1.333h-7.334A1.333 1.333 0 0112 18.667v-7.334c0-.736.597-1.333 1.333-1.333h4M20 8h4v4m-7.333 3.333L24 8"
-  })));
-};
-
-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
-};
-
-var _styleModuleImportMap$1 = {
-  "./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"
-  }
-};
-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_1(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_1(story, ["hero-image-s3-key"]) || get_1(story, ["alternative", "home", "default", "hero-image", "hero-image-s3-key"]);
-  var hyperLink = get_1(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$1)
-        }, /*#__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$1)
-      }, /*#__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$1)
-    }, /*#__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$1)
-  }, 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$1)
-  }, 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: {}
-};
-
-var _styleModuleImportMap = {
-  "./section.m.css": {
-    "section": "section-m_section__2N4S3",
-    "section-borderBottomSml": "section-m_section-borderBottomSml__2GNbo",
-    "border-bottom": "section-m_border-bottom__3cRoD",
-    "section-borderLeft": "section-m_section-borderLeft__3hKVj",
-    "border-left": "section-m_border-left__2oUyp",
-    "section-solid": "section-m_section-solid__1vB1Q",
-    "dark": "section-m_dark__1r3C4",
-    "light": "section-m_light__306hW"
-  }
-};
-var SectionTag = function SectionTag(_ref) {
-  var story = _ref.story,
-      _ref$template = _ref.template,
-      template = _ref$template === void 0 ? "" : _ref$template,
-      _ref$borderColor = _ref.borderColor,
-      borderColor = _ref$borderColor === void 0 ? "" : _ref$borderColor,
-      isLightTheme = _ref.isLightTheme;
-  var config = useStateValue() || {};
-  var isSection = get_1(config, ["showSection"], true);
-  var templateFromRowContext = get_1(config, ["sectionTagTemplate"]);
-  var section = get_1(story, ["sections", 0], "");
-  var supportedTemplates = ["borderBottomSml", "borderLeft", "solid"];
-  var getUrl = section ? section["section-url"] : "/";
-  var colorToApplyContrast = template === "solid" || templateFromRowContext === "solid" ? borderColor : config.theme;
-  var textColor = isLightTheme ? "light" : getTextColor(colorToApplyContrast);
-  var sectionTagBorderColor = rgbToHex(borderColor);
-  var templateStyle = supportedTemplates.includes(template) ? "section section-".concat(template) : "section";
-
-  if (templateFromRowContext) {
-    templateStyle = supportedTemplates.includes(templateFromRowContext) ? "section section-".concat(templateFromRowContext) : "section";
-  }
-
-  if (!isSection) return null;
-  return /*#__PURE__*/React.createElement(Link, {
-    href: getUrl,
-    className: "arrow-component arr--section-name",
-    "aria-label": "section-name"
-  }, /*#__PURE__*/React.createElement("div", {
-    "data-test-id": "sectionTag",
-    style: {
-      backgroundColor: templateStyle.includes("section-solid") ? sectionTagBorderColor : ""
-    },
-    className: "section-tag arrow-component " + _getClassName("".concat(textColor, " ").concat(templateStyle), _styleModuleImportMap)
-  }, templateStyle.includes("section-borderLeft") && /*#__PURE__*/React.createElement("span", {
-    className: "section-m_border-left__2oUyp",
-    style: {
-      color: sectionTagBorderColor
-    }
-  }), section["display-name"] || section["name"], /*#__PURE__*/React.createElement("div", {
-    className: "section-m_border-bottom__3cRoD",
-    style: {
-      backgroundColor: "".concat(template === "solid" ? "" : sectionTagBorderColor)
-    }
-  })));
-};
-SectionTag.propTypes = {
-  /** The Story Object from the API response */
-  story: PropTypes.object.isRequired,
-
-  /** The style template for section tag */
-  template: PropTypes.oneOf(["", "borderBottomSml", "borderLeft", "solid"]),
-  borderColor: PropTypes.string,
-  solidBorderColor: PropTypes.string,
-  isLightTheme: PropTypes.bool
-};
-SectionTag.defaultProps = {
-  template: "",
-  isLightTheme: false
-};
-
-export { HeroImage as H, SectionTag as S };

package/atoms/ExtendedLoadMore/index-d0f6c865.js

@@ -1,181 +0,0 @@
-import { m as _arrayWithHoles, o as _iterableToArray, p as _unsupportedIterableToArray, q as _nonIterableRest, a as get_1, g as getTextColor, r as rgbToHex, l as getSlot, b as generateNavigateSlug, n as navigateTo } from './index-ad3c83c3.js';
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useDispatch, useSelector } from 'react-redux';
-import { H as HeroImage } from './index-c61a16dc.js';
-import { C as CollectionName, S as StateProvider, L as LoadMoreTarget, P as ProgressiveHydration, a as LoadmoreButton } from './index-1e444d20.js';
-import { collectionToStories } from '@quintype/components';
-import { S as StorycardContent } from './index-81eb3978.js';
-import 'react-timeago';
-import 'date-fns-tz';
-import 'react-dom';
-
-function _toArray(arr) {
-  return _arrayWithHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableRest();
-}
-
-var loadMore = function loadMore(_ref) {
-  var isLoading = _ref.isLoading,
-      renderStories = _ref.renderStories,
-      getMoreStories = _ref.getMoreStories,
-      _ref$subsequentLoadCo = _ref.subsequentLoadCount,
-      subsequentLoadCount = _ref$subsequentLoadCo === void 0 ? 4 : _ref$subsequentLoadCo;
-  if (isLoading) return;
-  var limit = subsequentLoadCount;
-  var offset = renderStories.length + 1;
-  getMoreStories(offset, limit);
-};
-
-var FourColFiveStoriesBase = function FourColFiveStoriesBase(_ref2) {
-  var collection = _ref2.collection,
-      config = _ref2.config,
-      getMoreStories = _ref2.getMoreStories,
-      isLoadMoreVisible = _ref2.isLoadMoreVisible,
-      isLoading = _ref2.isLoading,
-      isolatedLoadMore = _ref2.isolatedLoadMore,
-      hideFirstCard = _ref2.hideFirstCard;
-  var stories = collectionToStories(collection);
-  if (!stories.length) return null;
-  var _config$collectionNam = config.collectionNameBorderColor,
-      collectionNameBorderColor = _config$collectionNam === void 0 ? "" : _config$collectionNam,
-      _config$theme = config.theme,
-      theme = _config$theme === void 0 ? "" : _config$theme,
-      _config$slotConfig = config.slotConfig,
-      slotConfig = _config$slotConfig === void 0 ? [] : _config$slotConfig,
-      _config$collectionNam2 = config.collectionNameTemplate,
-      collectionNameTemplate = _config$collectionNam2 === void 0 ? "" : _config$collectionNam2,
-      _config$footerButton = config.footerButton,
-      footerButton = _config$footerButton === void 0 ? "" : _config$footerButton,
-      _config$borderColor = config.borderColor,
-      borderColor = _config$borderColor === void 0 ? "" : _config$borderColor,
-      _config$subsequentLoa = config.subsequentLoadCount,
-      subsequentLoadCount = _config$subsequentLoa === void 0 ? 4 : _config$subsequentLoa;
-
-  var _get = get_1(slotConfig, [0], {}),
-      _get$type = _get.type,
-      type = _get$type === void 0 ? "story" : _get$type,
-      component = _get.component;
-
-  var textColor = getTextColor(theme);
-  var sectionTagBorderColor = rgbToHex(borderColor);
-  var adWidgetSlot = type === "ad" || type === "widget" ? getSlot(type, component) : null;
-  var dispatch = useDispatch();
-  var qtConfig = useSelector(function (state) {
-    return get_1(state, ["qt", "config"], {});
-  });
-
-  var _ref3 = stories || [],
-      _ref4 = _toArray(_ref3),
-      firstStory = _ref4[0],
-      otherStories = _ref4.slice(1);
-
-  var storyCard = function storyCard(story) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HeroImage, {
-      config: config,
-      story: story,
-      aspectRatio: [[16, 9]]
-    }), /*#__PURE__*/React.createElement(StorycardContent, {
-      theme: theme,
-      story: story,
-      config: config,
-      headerLevel: 6,
-      borderColor: sectionTagBorderColor
-    }));
-  };
-
-  var otherCards = function otherCards(story, index) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "four-col-five-stories-m_card__2lzhH",
-      "data-test-id": "story-card",
-      key: "four-col-five-story-".concat(index, "-").concat(get_1(story, ["id"], "0"))
-    }, storyCard(story));
-  };
-
-  var getLoadMore = function getLoadMore(opts) {
-    if (!isLoadMoreVisible) return null;
-
-    if (isolatedLoadMore) {
-      return /*#__PURE__*/React.createElement(LoadMoreTarget, {
-        collection: collection,
-        componentName: "FourColFiveStories",
-        offset: stories.length,
-        limit: subsequentLoadCount
-      });
-    }
-
-    var url = generateNavigateSlug(collection, qtConfig);
-    return /*#__PURE__*/React.createElement(ProgressiveHydration, null, /*#__PURE__*/React.createElement(LoadmoreButton, {
-      config: config,
-      collection: collection,
-      template: footerButton,
-      onClick: function onClick() {
-        return loadMore(opts);
-      },
-      navigate: function navigate() {
-        return navigateTo(dispatch, url);
-      },
-      qtConfig: qtConfig
-    }));
-  };
-
-  var renderStories = hideFirstCard ? stories : otherStories;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "full-width-with-padding arrow-component",
-    "data-test-id": "four-col-five-stories",
-    style: {
-      backgroundColor: theme,
-      color: textColor
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "four-col-five-stories-m_four-col-five-stories__16ja_"
-  }, /*#__PURE__*/React.createElement(CollectionName, {
-    collection: collection,
-    collectionNameTemplate: collectionNameTemplate,
-    collectionNameBorderColor: collectionNameBorderColor,
-    headerLevel: 2
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "four-col-five-stories-m_wrapper__31KAU"
-  }, !hideFirstCard && /*#__PURE__*/React.createElement("div", {
-    className: "first-card four-col-five-stories-m_first-card__3dXVH",
-    "data-test-id": "story-card"
-  }, storyCard(firstStory)), /*#__PURE__*/React.createElement("div", {
-    className: "other-cards four-col-five-stories-m_other-cards__1P4k5"
-  }, renderStories.slice(0, 3).map(function (story, index) {
-    return otherCards(story, index);
-  }), adWidgetSlot, renderStories.slice(3).map(function (story, index) {
-    return otherCards(story, index);
-  }))), getLoadMore({
-    isLoading: isLoading,
-    renderStories: renderStories,
-    getMoreStories: getMoreStories,
-    subsequentLoadCount: subsequentLoadCount
-  })));
-};
-FourColFiveStoriesBase.propTypes = {
-  collection: PropTypes.object,
-  config: PropTypes.shape({
-    collectionNameBorderColor: PropTypes.string,
-    theme: PropTypes.string,
-    slotConfig: PropTypes.array,
-    collectionNameTemplate: PropTypes.string,
-    footerButton: PropTypes.string,
-    borderColor: PropTypes.string,
-    subsequentLoadCount: PropTypes.number
-  }),
-  getMoreStories: PropTypes.func,
-  isLoading: PropTypes.bool,
-  hideFirstCard: PropTypes.bool,
-  isLoadMoreVisible: PropTypes.bool,
-  isolatedLoadMore: PropTypes.bool
-};
-FourColFiveStoriesBase.defaultProps = {
-  getMoreStories: function getMoreStories() {},
-  isLoadMoreVisible: true,
-  isLoading: false,
-  collection: {},
-  config: {},
-  hideFirstCard: false
-};
-var FourColFiveStories = StateProvider(FourColFiveStoriesBase);
-
-export { FourColFiveStories, FourColFiveStoriesBase };