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

package/atoms/ExtendedLoadMore/index-8462c597.js

@@ -1,363 +0,0 @@
-'use strict';
-
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var _getClassName = require('babel-plugin-react-css-modules/dist/browser/getClassName');
-var components = require('@quintype/components');
-var lodash = require('lodash');
-var PropTypes = require('prop-types');
-var React = require('react');
-var reactRedux = require('react-redux');
-var index$1 = require('./index-142f015c.js');
-var index = require('./index-93cb06d1.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-var _getClassName__default = /*#__PURE__*/_interopDefaultLegacy(_getClassName);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-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__default["default"].createElement("svg", {
-    width: width,
-    height: height,
-    viewBox: "0 0 102 76",
-    version: "1.1"
-  }, /*#__PURE__*/React__default["default"].createElement("g", {
-    id: "demo-home-copy",
-    stroke: "none",
-    strokeWidth: "1",
-    fill: "none",
-    fillRule: "evenodd",
-    transform: "translate(-377.000000, -314.000000)"
-  }, /*#__PURE__*/React__default["default"].createElement("g", {
-    id: "Group-13",
-    transform: "translate(377.000000, 314.000000)"
-  }, /*#__PURE__*/React__default["default"].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__default["default"].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__default["default"].object,
-  height: PropTypes__default["default"].object,
-  iconColor: PropTypes__default["default"].object
-};
-
-var imageFallback = function imageFallback() {
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "arr--fallback-image fallback-m_image__1GYCJ fallback-m_image-position__3KddP"
-  }, /*#__PURE__*/React__default["default"].createElement("figure", {
-    className: "arr--fallback-svg fallback-m_fallback-svg__tK9fL"
-  }, /*#__PURE__*/React__default["default"].createElement(ImageFallbackIcon, null)));
-};
-
-var FallbackImage = function FallbackImage(_ref) {
-  var slug = _ref.slug;
-
-  if (slug) {
-    return /*#__PURE__*/React__default["default"].createElement(components.Link, {
-      href: slug,
-      "aria-label": "image-fallback"
-    }, imageFallback());
-  } else {
-    return imageFallback();
-  }
-};
-FallbackImage.propTypes = {
-  slug: PropTypes__default["default"].string
-};
-
-var HyperLinkIcon = function HyperLinkIcon() {
-  return /*#__PURE__*/React__default["default"].createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "36",
-    height: "28"
-  }, /*#__PURE__*/React__default["default"].createElement("g", {
-    fill: "none",
-    fillRule: "evenodd"
-  }, /*#__PURE__*/React__default["default"].createElement("rect", {
-    width: "36",
-    height: "28",
-    fill: "#3D6FCF",
-    rx: "4"
-  }), /*#__PURE__*/React__default["default"].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__default["default"].createElement(components.Link, {
-    href: hyperLink,
-    "aria-label": "hyperlink-button",
-    className: "arr--hyperlink-button hyperlink-m_hyperlink-button__1CqWx",
-    target: "_blank",
-    rel: "noopener noreferrer"
-  }, /*#__PURE__*/React__default["default"].createElement(HyperLinkIcon, null));
-};
-HyperLink.propTypes = {
-  hyperLink: PropTypes__default["default"].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 = index.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 = reactRedux.useSelector(function (state) {
-    return lodash.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__default["default"](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__default["default"](aspectRatio, 2),
-      mobileAspectRatio = _aspectRatio2[0],
-      _aspectRatio2$ = _aspectRatio2[1],
-      desktopAspectRatio = _aspectRatio2$ === void 0 ? mobileAspectRatio : _aspectRatio2$;
-
-  var isMobile = index$1.clientWidth("mobile");
-  var imageAspectRatio = isMobile ? mobileAspectRatio : desktopAspectRatio;
-  var imagePadding = isMobile ? getPadding(mobileAspectRatio) : getPadding(desktopAspectRatio);
-  var slug = lodash.get(story, ["hero-image-s3-key"]) || lodash.get(story, ["alternative", "home", "default", "hero-image", "hero-image-s3-key"]);
-  var hyperLink = lodash.get(story, ["hero-image-hyperlink"], "");
-
-  var fallbackImage = function fallbackImage() {
-    if (!slug) {
-      if (fallbackImageUrl && !isStoryPageImage) {
-        return /*#__PURE__*/React__default["default"].createElement("figure", {
-          style: {
-            paddingTop: imagePadding + "%"
-          },
-          className: "arr--responsive-hero-image " + _getClassName__default["default"]("image ".concat(getPlaceholderStyleName), _styleModuleImportMap$1)
-        }, /*#__PURE__*/React__default["default"].createElement("img", {
-          className: "qt-image",
-          "data-src": "".concat(fallbackImageUrl),
-          alt: "image-fallback"
-        }));
-      }
-
-      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, defaultFallback ? /*#__PURE__*/React__default["default"].createElement("div", {
-        "data-test-id": "arr--fallback-hero-image",
-        style: {
-          paddingTop: imagePadding + "%"
-        },
-        className: "arr--fallback-hero-image " + _getClassName__default["default"]("image ".concat(getPlaceholderStyleName), _styleModuleImportMap$1)
-      }, /*#__PURE__*/React__default["default"].createElement(StoryTemplateIcon, {
-        storyTemplate: story["story-template"]
-      }), /*#__PURE__*/React__default["default"].createElement(FallbackImage, null)) : null);
-    }
-
-    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("figure", {
-      style: {
-        paddingTop: imagePadding + "%"
-      },
-      className: "arr--responsive-hero-image " + _getClassName__default["default"]("image ".concat(getPlaceholderStyleName), _styleModuleImportMap$1)
-    }, /*#__PURE__*/React__default["default"].createElement(StoryTemplateIcon, {
-      storyTemplate: story["story-template"]
-    }), /*#__PURE__*/React__default["default"].createElement(components.ResponsiveHeroImage, {
-      story: story,
-      aspectRatio: imageAspectRatio,
-      defaultWidth: defaultWidth,
-      widths: widths,
-      imgParams: {
-        auto: ["format", "compress"],
-        fit: "max"
-      }
-    })), isStoryPageImage && hyperLink && /*#__PURE__*/React__default["default"].createElement(HyperLink, {
-      hyperLink: hyperLink
-    }));
-  };
-
-  return story && (isStoryPageImage ? /*#__PURE__*/React__default["default"].createElement("div", {
-    "data-test-id": "arr--hero-image",
-    className: "arr--hero-image " + _getClassName__default["default"]("".concat(heroImageClass, " ").concat(fullBleed, " ").concat(heroImageMobClasses), _styleModuleImportMap$1)
-  }, fallbackImage()) : /*#__PURE__*/React__default["default"].createElement(components.Link, {
-    "data-test-id": "arr--hero-image",
-    href: index$1.getStoryUrl(story, "/".concat(story.slug)),
-    externalLink: index$1.isExternalStory(story),
-    "aria-label": "fallback-hero-image",
-    className: "arr--hero-image " + _getClassName__default["default"]("".concat(heroImageClass, " ").concat(fullBleed, " ").concat(heroImageMobClasses), _styleModuleImportMap$1)
-  }, fallbackImage()));
-};
-HeroImage.propTypes = {
-  /** The Story Object from the API response */
-  story: PropTypes__default["default"].object.isRequired,
-
-  /** Removes the Hero Image padding for the image to bleed over the margin */
-  FullBleed: PropTypes__default["default"].bool,
-
-  /** The default width for the image, in case the browser does not support srcset */
-  defaultWidth: PropTypes__default["default"].number,
-
-  /** The list of available widths */
-  widths: PropTypes__default["default"].array,
-  // fatch the correct hero image
-  aspectRatio: PropTypes__default["default"].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__default["default"].bool,
-
-  /** This prop is responsible for adding padding-bottom in desktop and padding-right in mobile */
-  isHorizontalMobile: PropTypes__default["default"].bool,
-  // this prop is responsive for rendering fallback image on story page
-  defaultFallback: PropTypes__default["default"].bool,
-  isHorizontalWithImageLast: PropTypes__default["default"].bool,
-  isStoryPageImage: PropTypes__default["default"].bool,
-  config: PropTypes__default["default"].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 = index.useStateValue() || {};
-  var isSection = lodash.get(config, ["showSection"], true);
-  var templateFromRowContext = lodash.get(config, ["sectionTagTemplate"]);
-  var section = lodash.get(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" : index$1.getTextColor(colorToApplyContrast);
-  var sectionTagBorderColor = index$1.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__default["default"].createElement(components.Link, {
-    href: getUrl,
-    className: "arrow-component arr--section-name",
-    "aria-label": "section-name"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    "data-test-id": "sectionTag",
-    style: {
-      backgroundColor: templateStyle.includes("section-solid") ? sectionTagBorderColor : ""
-    },
-    className: "section-tag arrow-component " + _getClassName__default["default"]("".concat(textColor, " ").concat(templateStyle), _styleModuleImportMap)
-  }, templateStyle.includes("section-borderLeft") && /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "section-m_border-left__2oUyp",
-    style: {
-      color: sectionTagBorderColor
-    }
-  }), section["display-name"] || section["name"], /*#__PURE__*/React__default["default"].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__default["default"].object.isRequired,
-
-  /** The style template for section tag */
-  template: PropTypes__default["default"].oneOf(["", "borderBottomSml", "borderLeft", "solid"]),
-  borderColor: PropTypes__default["default"].string,
-  solidBorderColor: PropTypes__default["default"].string,
-  isLightTheme: PropTypes__default["default"].bool
-};
-SectionTag.defaultProps = {
-  template: "",
-  isLightTheme: false
-};
-
-exports.HeroImage = HeroImage;
-exports.SectionTag = SectionTag;