@blaze-cms/react-page-builder 0.139.0-core-styles.3 → 0.139.0-core-styles.6

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.139.0-core-styles.6](https://github.com/thebyte9/blaze/compare/v0.139.0-core-styles.5...v0.139.0-core-styles.6) (2024-01-19)
+
+
+### Features
+
+* component variants ([#4218](https://github.com/thebyte9/blaze/issues/4218)) ([8e36664](https://github.com/thebyte9/blaze/commit/8e366642ba7cbc07672b70b0809034b96e9a2a55))
+* updated mongodb package v4 to v5 ([#4217](https://github.com/thebyte9/blaze/issues/4217)) ([c4eefc0](https://github.com/thebyte9/blaze/commit/c4eefc032a05fd62a689cd620f0b5e95a7894fb3))
+
+
+
+
+
+# [0.139.0-core-styles.4](https://github.com/thebyte9/blaze/compare/v0.139.0-core-styles.3...v0.139.0-core-styles.4) (2024-01-10)
+
+**Note:** Version bump only for package @blaze-cms/react-page-builder
+
+
+
+
+
 # [0.139.0-core-styles.3](https://github.com/thebyte9/blaze/compare/v0.139.0-core-styles.2...v0.139.0-core-styles.3) (2024-01-09)
 
 

package/README.md

@@ -322,6 +322,15 @@ Meaning if a card is placed on a page, but it's rendering children, those childr
 
 When rendering cards in order to make the queries as cacheable as possible if the card entity is the same as the current entity we increase the limit by 1. Then use this function to remove the current item if it is in the results or reduce the array to the correct size.
 
+
+# utils
+
+## variantHandler
+The variantHandler is a Map object responsible for loading all existing variants within the project.
+It uses a key, variant validation to make sure the variant exists before loading
+Has the following internal functions that can be accessed `get` `getAll` `add`
+
+
 # Hooks
 
 ## helpers

package/lib/components/Carousel/Carousel.js

@@ -10,32 +10,41 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _CarouselImage = _interopRequireDefault(require("./CarouselImage"));
 var _CarouselRender = _interopRequireDefault(require("./CarouselRender"));
-var _excluded = ["caption", "imageIds", "isCaptionDisplayed"];
-var Carousel = function Carousel(_ref) {
-  var caption = _ref.caption,
-    imageIds = _ref.imageIds,
-    isCaptionDisplayed = _ref.isCaptionDisplayed,
-    otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+var _useCarouselNavigation = require("./hooks/useCarouselNavigation");
+var _helpers = require("../../helpers");
+var _excluded = ["caption", "imageIds", "isCaptionDisplayed", "VariantComponent"];
+var Carousel = function Carousel(props) {
+  var caption = props.caption,
+    imageIds = props.imageIds,
+    isCaptionDisplayed = props.isCaptionDisplayed,
+    VariantComponent = props.VariantComponent,
+    otherProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var navigationProps = (0, _useCarouselNavigation.useCarouselNavigation)(props);
   if (!imageIds || !imageIds.length) return null;
   var shouldDisplayCaption = isCaptionDisplayed && caption;
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "carousel"
-  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_CarouselRender["default"], (0, _extends2["default"])({
-    imageIds: imageIds
-  }, otherProps))), shouldDisplayCaption && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "carousel__details",
-    "data-testid": "carousel-details"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "caption"
-  }, caption)));
+  var _getDisplayCountData = (0, _helpers.getDisplayCountData)(navigationProps.showCount, imageIds),
+    shouldDisplayCount = _getDisplayCountData.shouldDisplayCount,
+    countMessage = _getDisplayCountData.countMessage;
+  var ComponentToRender = VariantComponent || _CarouselRender["default"];
+  return /*#__PURE__*/_react["default"].createElement(ComponentToRender, (0, _extends2["default"])({
+    caption: caption,
+    imageIds: imageIds,
+    CarouselImage: _CarouselImage["default"],
+    shouldDisplayCaption: shouldDisplayCaption,
+    shouldDisplayCount: shouldDisplayCount,
+    countMessage: countMessage
+  }, navigationProps, otherProps));
 };
 Carousel.propTypes = {
   caption: _propTypes["default"].string,
   imageIds: _propTypes["default"].array,
-  isCaptionDisplayed: _propTypes["default"].bool
+  isCaptionDisplayed: _propTypes["default"].bool,
+  VariantComponent: _propTypes["default"].func
 };
 Carousel.defaultProps = {
+  VariantComponent: null,
   caption: '',
   imageIds: [],
   isCaptionDisplayed: false

package/lib/components/Carousel/Carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.js","names":["_react","_interopRequireDefault","require","_propTypes","_CarouselRender","_excluded","Carousel","_ref","caption","imageIds","isCaptionDisplayed","otherProps","_objectWithoutProperties2","length","shouldDisplayCaption","createElement","className","_extends2","propTypes","PropTypes","string","array","bool","defaultProps","_default","exports"],"sources":["../../../src/components/Carousel/Carousel.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport CarouselRender from './CarouselRender';\n\nconst Carousel = ({ caption, imageIds, isCaptionDisplayed, ...otherProps }) => {\n  if (!imageIds || !imageIds.length) return null;\n  const shouldDisplayCaption = isCaptionDisplayed && caption;\n\n  return (\n    <div className=\"carousel\">\n      <div>\n        <CarouselRender imageIds={imageIds} {...otherProps} />\n      </div>\n      {shouldDisplayCaption && (\n        <div className=\"carousel__details\" data-testid=\"carousel-details\">\n          <div className=\"caption\">{caption}</div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nCarousel.propTypes = {\n  caption: PropTypes.string,\n  imageIds: PropTypes.array,\n  isCaptionDisplayed: PropTypes.bool\n};\n\nCarousel.defaultProps = {\n  caption: '',\n  imageIds: [],\n  isCaptionDisplayed: false\n};\n\nexport default Carousel;\n"],"mappings":";;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,eAAA,GAAAH,sBAAA,CAAAC,OAAA;AAA8C,IAAAG,SAAA;AAE9C,IAAMC,QAAQ,GAAG,SAAXA,QAAQA,CAAAC,IAAA,EAAiE;EAAA,IAA3DC,OAAO,GAAAD,IAAA,CAAPC,OAAO;IAAEC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAEC,kBAAkB,GAAAH,IAAA,CAAlBG,kBAAkB;IAAKC,UAAU,OAAAC,yBAAA,aAAAL,IAAA,EAAAF,SAAA;EACtE,IAAI,CAACI,QAAQ,IAAI,CAACA,QAAQ,CAACI,MAAM,EAAE,OAAO,IAAI;EAC9C,IAAMC,oBAAoB,GAAGJ,kBAAkB,IAAIF,OAAO;EAE1D,oBACER,MAAA,YAAAe,aAAA;IAAKC,SAAS,EAAC;EAAU,gBACvBhB,MAAA,YAAAe,aAAA,2BACEf,MAAA,YAAAe,aAAA,CAACX,eAAA,WAAc,MAAAa,SAAA;IAACR,QAAQ,EAAEA;EAAS,GAAKE,UAAU,CAAG,CAClD,CAAC,EACLG,oBAAoB,iBACnBd,MAAA,YAAAe,aAAA;IAAKC,SAAS,EAAC,mBAAmB;IAAC,eAAY;EAAkB,gBAC/DhB,MAAA,YAAAe,aAAA;IAAKC,SAAS,EAAC;EAAS,GAAER,OAAa,CACpC,CAEJ,CAAC;AAEV,CAAC;AAEDF,QAAQ,CAACY,SAAS,GAAG;EACnBV,OAAO,EAAEW,qBAAS,CAACC,MAAM;EACzBX,QAAQ,EAAEU,qBAAS,CAACE,KAAK;EACzBX,kBAAkB,EAAES,qBAAS,CAACG;AAChC,CAAC;AAEDhB,QAAQ,CAACiB,YAAY,GAAG;EACtBf,OAAO,EAAE,EAAE;EACXC,QAAQ,EAAE,EAAE;EACZC,kBAAkB,EAAE;AACtB,CAAC;AAAC,IAAAc,QAAA,GAEalB,QAAQ;AAAAmB,OAAA,cAAAD,QAAA"}
+{"version":3,"file":"Carousel.js","names":["_react","_interopRequireDefault","require","_propTypes","_CarouselImage","_CarouselRender","_useCarouselNavigation","_helpers","_excluded","Carousel","props","caption","imageIds","isCaptionDisplayed","VariantComponent","otherProps","_objectWithoutProperties2","navigationProps","useCarouselNavigation","length","shouldDisplayCaption","_getDisplayCountData","getDisplayCountData","showCount","shouldDisplayCount","countMessage","ComponentToRender","CarouselRender","createElement","_extends2","CarouselImage","propTypes","PropTypes","string","array","bool","func","defaultProps","_default","exports"],"sources":["../../../src/components/Carousel/Carousel.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport CarouselImage from './CarouselImage';\nimport CarouselRender from './CarouselRender';\nimport { useCarouselNavigation } from './hooks/useCarouselNavigation';\nimport { getDisplayCountData } from '../../helpers';\n\nconst Carousel = props => {\n  const { caption, imageIds, isCaptionDisplayed, VariantComponent, ...otherProps } = props;\n\n  const navigationProps = useCarouselNavigation(props);\n\n  if (!imageIds || !imageIds.length) return null;\n  const shouldDisplayCaption = isCaptionDisplayed && caption;\n\n  const { shouldDisplayCount, countMessage } = getDisplayCountData(\n    navigationProps.showCount,\n    imageIds\n  );\n\n  const ComponentToRender = VariantComponent || CarouselRender;\n\n  return (\n    <ComponentToRender\n      caption={caption}\n      imageIds={imageIds}\n      CarouselImage={CarouselImage}\n      shouldDisplayCaption={shouldDisplayCaption}\n      shouldDisplayCount={shouldDisplayCount}\n      countMessage={countMessage}\n      {...navigationProps}\n      {...otherProps}\n    />\n  );\n};\n\nCarousel.propTypes = {\n  caption: PropTypes.string,\n  imageIds: PropTypes.array,\n  isCaptionDisplayed: PropTypes.bool,\n  VariantComponent: PropTypes.func\n};\n\nCarousel.defaultProps = {\n  VariantComponent: null,\n  caption: '',\n  imageIds: [],\n  isCaptionDisplayed: false\n};\n\nexport default Carousel;\n"],"mappings":";;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,cAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,eAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,sBAAA,GAAAJ,OAAA;AACA,IAAAK,QAAA,GAAAL,OAAA;AAAoD,IAAAM,SAAA;AAEpD,IAAMC,QAAQ,GAAG,SAAXA,QAAQA,CAAGC,KAAK,EAAI;EACxB,IAAQC,OAAO,GAAoED,KAAK,CAAhFC,OAAO;IAAEC,QAAQ,GAA0DF,KAAK,CAAvEE,QAAQ;IAAEC,kBAAkB,GAAsCH,KAAK,CAA7DG,kBAAkB;IAAEC,gBAAgB,GAAoBJ,KAAK,CAAzCI,gBAAgB;IAAKC,UAAU,OAAAC,yBAAA,aAAKN,KAAK,EAAAF,SAAA;EAExF,IAAMS,eAAe,GAAG,IAAAC,4CAAqB,EAACR,KAAK,CAAC;EAEpD,IAAI,CAACE,QAAQ,IAAI,CAACA,QAAQ,CAACO,MAAM,EAAE,OAAO,IAAI;EAC9C,IAAMC,oBAAoB,GAAGP,kBAAkB,IAAIF,OAAO;EAE1D,IAAAU,oBAAA,GAA6C,IAAAC,4BAAmB,EAC9DL,eAAe,CAACM,SAAS,EACzBX,QACF,CAAC;IAHOY,kBAAkB,GAAAH,oBAAA,CAAlBG,kBAAkB;IAAEC,YAAY,GAAAJ,oBAAA,CAAZI,YAAY;EAKxC,IAAMC,iBAAiB,GAAGZ,gBAAgB,IAAIa,0BAAc;EAE5D,oBACE3B,MAAA,YAAA4B,aAAA,CAACF,iBAAiB,MAAAG,SAAA;IAChBlB,OAAO,EAAEA,OAAQ;IACjBC,QAAQ,EAAEA,QAAS;IACnBkB,aAAa,EAAEA,yBAAc;IAC7BV,oBAAoB,EAAEA,oBAAqB;IAC3CI,kBAAkB,EAAEA,kBAAmB;IACvCC,YAAY,EAAEA;EAAa,GACvBR,eAAe,EACfF,UAAU,CACf,CAAC;AAEN,CAAC;AAEDN,QAAQ,CAACsB,SAAS,GAAG;EACnBpB,OAAO,EAAEqB,qBAAS,CAACC,MAAM;EACzBrB,QAAQ,EAAEoB,qBAAS,CAACE,KAAK;EACzBrB,kBAAkB,EAAEmB,qBAAS,CAACG,IAAI;EAClCrB,gBAAgB,EAAEkB,qBAAS,CAACI;AAC9B,CAAC;AAED3B,QAAQ,CAAC4B,YAAY,GAAG;EACtBvB,gBAAgB,EAAE,IAAI;EACtBH,OAAO,EAAE,EAAE;EACXC,QAAQ,EAAE,EAAE;EACZC,kBAAkB,EAAE;AACtB,CAAC;AAAC,IAAAyB,QAAA,GAEa7B,QAAQ;AAAA8B,OAAA,cAAAD,QAAA"}

package/lib/components/Carousel/CarouselRender/CarouselRender.js

@@ -1,80 +1,37 @@
 "use strict";
 
-require("core-js/modules/es.array.iterator.js");
-require("core-js/modules/es.object.to-string.js");
-require("core-js/modules/es.string.iterator.js");
-require("core-js/modules/es.weak-map.js");
-require("core-js/modules/web.dom-collections.iterator.js");
 require("core-js/modules/es.object.define-property.js");
-require("core-js/modules/es.object.get-own-property-descriptor.js");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
 require("core-js/modules/es.array.map.js");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _CarouselImage = _interopRequireDefault(require("../CarouselImage"));
 var _HOC = require("../../../HOC");
-var _helpers = require("../../../helpers");
-var _excluded = ["imageIds", "displayCount", "priorityLimit"];
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _excluded = ["handleNavigation", "imageIds", "listRef", "shouldDisplayCount", "shouldDisplayCaption", "caption", "countMessage", "direction", "priorityLimit"];
 var CarouselRender = function CarouselRender(_ref) {
-  var imageIds = _ref.imageIds,
-    displayCount = _ref.displayCount,
+  var handleNavigation = _ref.handleNavigation,
+    imageIds = _ref.imageIds,
+    listRef = _ref.listRef,
+    shouldDisplayCount = _ref.shouldDisplayCount,
+    shouldDisplayCaption = _ref.shouldDisplayCaption,
+    caption = _ref.caption,
+    countMessage = _ref.countMessage,
+    direction = _ref.direction,
     priorityLimit = _ref.priorityLimit,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var _useState = (0, _react.useState)(displayCount),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    showCount = _useState2[0],
-    setShowCount = _useState2[1];
-  var listRef = (0, _react.useRef)(null);
-  var getListElement = function getListElement() {
-    if (!listRef) return null;
-    var current = listRef.current;
-    return current;
-  };
-  var moveScroll = function moveScroll(numberOfPixels, isNext) {
-    var listElement = getListElement();
-    if (!listElement) return;
-    var totalDistance = listElement.scrollLeft + numberOfPixels;
-    var scrollLeft = listElement.scrollLeft,
-      offsetWidth = listElement.offsetWidth,
-      scrollWidth = listElement.scrollWidth;
-    if (isNext && offsetWidth + scrollLeft >= scrollWidth) return;
-    var leftPosition = totalDistance < 0 ? 0 : Math.max(-scrollLeft, totalDistance);
-    listElement.scrollTo({
-      top: 0,
-      left: leftPosition,
-      behavior: 'smooth'
-    });
-  };
-  var handleNavigation = function handleNavigation(direction) {
-    setShowCount(false);
-    var listElement = getListElement();
-    if (!listElement) return;
-    var scrollWidth = listElement.scrollWidth;
-    var offset = scrollWidth / imageIds.length;
-    direction ? moveScroll(offset, direction) : moveScroll(-offset, direction);
-  };
-  var navigation = {
-    next: true,
-    back: false
-  };
-  var _getDisplayCountData = (0, _helpers.getDisplayCountData)(showCount, imageIds),
-    shouldDisplayCount = _getDisplayCountData.shouldDisplayCount,
-    countMessage = _getDisplayCountData.countMessage;
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "carousel"
+  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
     className: "carousel__button carousel__button--previous",
     role: "button",
     onClick: function onClick() {
-      return handleNavigation(navigation.back);
+      return handleNavigation(direction.back);
     }
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "arrow arrow--left"
@@ -91,20 +48,37 @@ var CarouselRender = function CarouselRender(_ref) {
     className: "carousel__button carousel__button--next",
     role: "button",
     onClick: function onClick() {
-      return handleNavigation(navigation.next);
+      return handleNavigation(direction.next);
     }
-  }, shouldDisplayCount && /*#__PURE__*/_react["default"].createElement("p", null, countMessage), /*#__PURE__*/_react["default"].createElement("div", {
+  }, shouldDisplayCount && /*#__PURE__*/_react["default"].createElement("p", {
+    "data-testid": "count"
+  }, countMessage), /*#__PURE__*/_react["default"].createElement("div", {
     className: "arrow arrow--right"
-  })));
+  }))), shouldDisplayCaption && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "carousel__details",
+    "data-testid": "carousel-details"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "caption"
+  }, caption)));
 };
 CarouselRender.propTypes = {
+  caption: _propTypes["default"].string,
+  shouldDisplayCaption: _propTypes["default"].bool.isRequired,
   imageIds: _propTypes["default"].array,
   displayCount: _propTypes["default"].bool,
+  listRef: _propTypes["default"].object,
+  countMessage: _propTypes["default"].number,
+  direction: _propTypes["default"].object.isRequired,
+  handleNavigation: _propTypes["default"].func.isRequired,
+  shouldDisplayCount: _propTypes["default"].bool.isRequired,
   priorityLimit: _propTypes["default"].number
 };
 CarouselRender.defaultProps = {
+  listRef: null,
   imageIds: [],
+  caption: '',
   displayCount: false,
+  countMessage: null,
   priorityLimit: 0
 };
 var _default = (0, _HOC.withTitle)(CarouselRender);

package/lib/components/Carousel/CarouselRender/CarouselRender.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselRender.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_CarouselImage","_HOC","_helpers","_excluded","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","CarouselRender","_ref","imageIds","displayCount","priorityLimit","otherProps","_objectWithoutProperties2","_useState","useState","_useState2","_slicedToArray2","showCount","setShowCount","listRef","useRef","getListElement","current","moveScroll","numberOfPixels","isNext","listElement","totalDistance","scrollLeft","offsetWidth","scrollWidth","leftPosition","Math","max","scrollTo","top","left","behavior","handleNavigation","direction","offset","length","navigation","next","back","_getDisplayCountData","getDisplayCountData","shouldDisplayCount","countMessage","createElement","Fragment","className","role","onClick","ref","map","imageId","index","_extends2","priority","propTypes","PropTypes","array","bool","number","defaultProps","_default","withTitle","exports"],"sources":["../../../../src/components/Carousel/CarouselRender/CarouselRender.js"],"sourcesContent":["import React, { useRef, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport CarouselImage from '../CarouselImage';\nimport { withTitle } from '../../../HOC';\nimport { getDisplayCountData } from '../../../helpers';\n\nconst CarouselRender = ({ imageIds, displayCount, priorityLimit, ...otherProps }) => {\n  const [showCount, setShowCount] = useState(displayCount);\n  const listRef = useRef(null);\n\n  const getListElement = () => {\n    if (!listRef) return null;\n    const { current } = listRef;\n    return current;\n  };\n\n  const moveScroll = (numberOfPixels, isNext) => {\n    const listElement = getListElement();\n    if (!listElement) return;\n\n    const totalDistance = listElement.scrollLeft + numberOfPixels;\n    const { scrollLeft, offsetWidth, scrollWidth } = listElement;\n    if (isNext && offsetWidth + scrollLeft >= scrollWidth) return;\n\n    const leftPosition = totalDistance < 0 ? 0 : Math.max(-scrollLeft, totalDistance);\n\n    listElement.scrollTo({\n      top: 0,\n      left: leftPosition,\n      behavior: 'smooth'\n    });\n  };\n\n  const handleNavigation = direction => {\n    setShowCount(false);\n\n    const listElement = getListElement();\n    if (!listElement) return;\n\n    const { scrollWidth } = listElement;\n    const offset = scrollWidth / imageIds.length;\n\n    direction ? moveScroll(offset, direction) : moveScroll(-offset, direction);\n  };\n\n  const navigation = {\n    next: true,\n    back: false\n  };\n\n  const { shouldDisplayCount, countMessage } = getDisplayCountData(showCount, imageIds);\n\n  return (\n    <>\n      <div\n        className=\"carousel__button carousel__button--previous\"\n        role=\"button\"\n        onClick={() => handleNavigation(navigation.back)}>\n        <div className=\"arrow arrow--left\" />\n      </div>\n      <div className=\"carousel__list\" ref={listRef}>\n        {imageIds.map((imageId, index) => (\n          <CarouselImage\n            key={imageId}\n            priority={index < priorityLimit}\n            imageId={imageId}\n            {...otherProps}\n          />\n        ))}\n      </div>\n      <div\n        className=\"carousel__button carousel__button--next\"\n        role=\"button\"\n        onClick={() => handleNavigation(navigation.next)}>\n        {shouldDisplayCount && <p>{countMessage}</p>}\n        <div className=\"arrow arrow--right\" />\n      </div>\n    </>\n  );\n};\n\nCarouselRender.propTypes = {\n  imageIds: PropTypes.array,\n  displayCount: PropTypes.bool,\n  priorityLimit: PropTypes.number\n};\n\nCarouselRender.defaultProps = {\n  imageIds: [],\n  displayCount: false,\n  priorityLimit: 0\n};\n\nexport default withTitle(CarouselRender);\n"],"mappings":"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"}
+{"version":3,"file":"CarouselRender.js","names":["_react","_interopRequireDefault","require","_propTypes","_CarouselImage","_HOC","_excluded","CarouselRender","_ref","handleNavigation","imageIds","listRef","shouldDisplayCount","shouldDisplayCaption","caption","countMessage","direction","priorityLimit","otherProps","_objectWithoutProperties2","createElement","className","role","onClick","back","ref","map","imageId","index","_extends2","key","priority","next","propTypes","PropTypes","string","bool","isRequired","array","displayCount","object","number","func","defaultProps","_default","withTitle","exports"],"sources":["../../../../src/components/Carousel/CarouselRender/CarouselRender.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport CarouselImage from '../CarouselImage';\nimport { withTitle } from '../../../HOC';\n\nconst CarouselRender = ({\n  handleNavigation,\n  imageIds,\n  listRef,\n  shouldDisplayCount,\n  shouldDisplayCaption,\n  caption,\n  countMessage,\n  direction,\n  priorityLimit,\n  ...otherProps\n}) => (\n  <div className=\"carousel\">\n    <div>\n      <div\n        className=\"carousel__button carousel__button--previous\"\n        role=\"button\"\n        onClick={() => handleNavigation(direction.back)}>\n        <div className=\"arrow arrow--left\" />\n      </div>\n      <div className=\"carousel__list\" ref={listRef}>\n        {imageIds.map((imageId, index) => (\n          <CarouselImage\n            key={imageId}\n            priority={index < priorityLimit}\n            imageId={imageId}\n            {...otherProps}\n          />\n        ))}\n      </div>\n      <div\n        className=\"carousel__button carousel__button--next\"\n        role=\"button\"\n        onClick={() => handleNavigation(direction.next)}>\n        {shouldDisplayCount && <p data-testid=\"count\">{countMessage}</p>}\n        <div className=\"arrow arrow--right\" />\n      </div>\n    </div>\n    {shouldDisplayCaption && (\n      <div className=\"carousel__details\" data-testid=\"carousel-details\">\n        <div className=\"caption\">{caption}</div>\n      </div>\n    )}\n  </div>\n);\n\nCarouselRender.propTypes = {\n  caption: PropTypes.string,\n  shouldDisplayCaption: PropTypes.bool.isRequired,\n  imageIds: PropTypes.array,\n  displayCount: PropTypes.bool,\n  listRef: PropTypes.object,\n  countMessage: PropTypes.number,\n  direction: PropTypes.object.isRequired,\n  handleNavigation: PropTypes.func.isRequired,\n  shouldDisplayCount: PropTypes.bool.isRequired,\n  priorityLimit: PropTypes.number\n};\n\nCarouselRender.defaultProps = {\n  listRef: null,\n  imageIds: [],\n  caption: '',\n  displayCount: false,\n  countMessage: null,\n  priorityLimit: 0\n};\n\nexport default withTitle(CarouselRender);\n"],"mappings":"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"}

package/lib/components/Carousel/hooks/useCarouselNavigation.js

@@ -0,0 +1,56 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCarouselNavigation = useCarouselNavigation;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+function useCarouselNavigation(_ref) {
+  var imageIds = _ref.imageIds,
+    displayCount = _ref.displayCount;
+  var _useState = (0, _react.useState)(displayCount),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    showCount = _useState2[0],
+    setShowCount = _useState2[1];
+  var listRef = (0, _react.useRef)(null);
+  var getListElement = function getListElement() {
+    if (!listRef.current) return null;
+    return listRef.current;
+  };
+  var moveScroll = function moveScroll(numberOfPixels, isNext) {
+    var listElement = getListElement();
+    if (!listElement) return;
+    var totalDistance = listElement.scrollLeft + numberOfPixels;
+    var scrollLeft = listElement.scrollLeft,
+      offsetWidth = listElement.offsetWidth,
+      scrollWidth = listElement.scrollWidth;
+    if (isNext && offsetWidth + scrollLeft >= scrollWidth) return;
+    var leftPosition = totalDistance < 0 ? 0 : Math.max(-scrollLeft, totalDistance);
+    listElement.scrollTo({
+      top: 0,
+      left: leftPosition,
+      behavior: 'smooth'
+    });
+  };
+  var handleNavigation = function handleNavigation(direction) {
+    setShowCount(false);
+    var listElement = getListElement();
+    if (!listElement) return;
+    var scrollWidth = listElement.scrollWidth;
+    var offset = scrollWidth / imageIds.length;
+    direction ? moveScroll(offset, direction) : moveScroll(-offset, direction);
+  };
+  return {
+    listRef: listRef,
+    showCount: showCount,
+    handleNavigation: handleNavigation,
+    direction: {
+      next: true,
+      back: false
+    }
+  };
+}
+//# sourceMappingURL=useCarouselNavigation.js.map

package/lib/components/Carousel/hooks/useCarouselNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCarouselNavigation.js","names":["_react","require","useCarouselNavigation","_ref","imageIds","displayCount","_useState","useState","_useState2","_slicedToArray2","showCount","setShowCount","listRef","useRef","getListElement","current","moveScroll","numberOfPixels","isNext","listElement","totalDistance","scrollLeft","offsetWidth","scrollWidth","leftPosition","Math","max","scrollTo","top","left","behavior","handleNavigation","direction","offset","length","next","back"],"sources":["../../../../src/components/Carousel/hooks/useCarouselNavigation.js"],"sourcesContent":["import { useState, useRef } from 'react';\n\nexport function useCarouselNavigation({ imageIds, displayCount }) {\n  const [showCount, setShowCount] = useState(displayCount);\n  const listRef = useRef(null);\n\n  const getListElement = () => {\n    if (!listRef.current) return null;\n    return listRef.current;\n  };\n\n  const moveScroll = (numberOfPixels, isNext) => {\n    const listElement = getListElement();\n    if (!listElement) return;\n\n    const totalDistance = listElement.scrollLeft + numberOfPixels;\n    const { scrollLeft, offsetWidth, scrollWidth } = listElement;\n    if (isNext && offsetWidth + scrollLeft >= scrollWidth) return;\n\n    const leftPosition = totalDistance < 0 ? 0 : Math.max(-scrollLeft, totalDistance);\n\n    listElement.scrollTo({\n      top: 0,\n      left: leftPosition,\n      behavior: 'smooth'\n    });\n  };\n\n  const handleNavigation = direction => {\n    setShowCount(false);\n\n    const listElement = getListElement();\n    if (!listElement) return;\n\n    const { scrollWidth } = listElement;\n    const offset = scrollWidth / imageIds.length;\n\n    direction ? moveScroll(offset, direction) : moveScroll(-offset, direction);\n  };\n\n  return {\n    listRef,\n    showCount,\n    handleNavigation,\n    direction: {\n      next: true,\n      back: false\n    }\n  };\n}\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEO,SAASC,qBAAqBA,CAAAC,IAAA,EAA6B;EAAA,IAA1BC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAEC,YAAY,GAAAF,IAAA,CAAZE,YAAY;EAC5D,IAAAC,SAAA,GAAkC,IAAAC,eAAQ,EAACF,YAAY,CAAC;IAAAG,UAAA,OAAAC,eAAA,aAAAH,SAAA;IAAjDI,SAAS,GAAAF,UAAA;IAAEG,YAAY,GAAAH,UAAA;EAC9B,IAAMI,OAAO,GAAG,IAAAC,aAAM,EAAC,IAAI,CAAC;EAE5B,IAAMC,cAAc,GAAG,SAAjBA,cAAcA,CAAA,EAAS;IAC3B,IAAI,CAACF,OAAO,CAACG,OAAO,EAAE,OAAO,IAAI;IACjC,OAAOH,OAAO,CAACG,OAAO;EACxB,CAAC;EAED,IAAMC,UAAU,GAAG,SAAbA,UAAUA,CAAIC,cAAc,EAAEC,MAAM,EAAK;IAC7C,IAAMC,WAAW,GAAGL,cAAc,CAAC,CAAC;IACpC,IAAI,CAACK,WAAW,EAAE;IAElB,IAAMC,aAAa,GAAGD,WAAW,CAACE,UAAU,GAAGJ,cAAc;IAC7D,IAAQI,UAAU,GAA+BF,WAAW,CAApDE,UAAU;MAAEC,WAAW,GAAkBH,WAAW,CAAxCG,WAAW;MAAEC,WAAW,GAAKJ,WAAW,CAA3BI,WAAW;IAC5C,IAAIL,MAAM,IAAII,WAAW,GAAGD,UAAU,IAAIE,WAAW,EAAE;IAEvD,IAAMC,YAAY,GAAGJ,aAAa,GAAG,CAAC,GAAG,CAAC,GAAGK,IAAI,CAACC,GAAG,CAAC,CAACL,UAAU,EAAED,aAAa,CAAC;IAEjFD,WAAW,CAACQ,QAAQ,CAAC;MACnBC,GAAG,EAAE,CAAC;MACNC,IAAI,EAAEL,YAAY;MAClBM,QAAQ,EAAE;IACZ,CAAC,CAAC;EACJ,CAAC;EAED,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAGC,SAAS,EAAI;IACpCrB,YAAY,CAAC,KAAK,CAAC;IAEnB,IAAMQ,WAAW,GAAGL,cAAc,CAAC,CAAC;IACpC,IAAI,CAACK,WAAW,EAAE;IAElB,IAAQI,WAAW,GAAKJ,WAAW,CAA3BI,WAAW;IACnB,IAAMU,MAAM,GAAGV,WAAW,GAAGnB,QAAQ,CAAC8B,MAAM;IAE5CF,SAAS,GAAGhB,UAAU,CAACiB,MAAM,EAAED,SAAS,CAAC,GAAGhB,UAAU,CAAC,CAACiB,MAAM,EAAED,SAAS,CAAC;EAC5E,CAAC;EAED,OAAO;IACLpB,OAAO,EAAPA,OAAO;IACPF,SAAS,EAATA,SAAS;IACTqB,gBAAgB,EAAhBA,gBAAgB;IAChBC,SAAS,EAAE;MACTG,IAAI,EAAE,IAAI;MACVC,IAAI,EAAE;IACR;EACF,CAAC;AACH"}

package/lib/components/Layout/Layout.js

@@ -27,7 +27,7 @@ var _hooks = require("../../hooks");
 var _helpers = require("./helpers");
 var _helpers2 = require("../../helpers");
 var _constants = require("../../constants");
-var _excluded = ["type", "children", "settings", "modifier", "backgroundImage", "tagType", "dataNoSnippet", "sticky"];
+var _excluded = ["type", "children", "settings", "modifier", "backgroundImage", "tagType", "dataNoSnippet", "sticky", "VariantComponent"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Layout = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
@@ -39,6 +39,7 @@ var Layout = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     tagType = _ref.tagType,
     dataNoSnippet = _ref.dataNoSnippet,
     sticky = _ref.sticky,
+    VariantComponent = _ref.VariantComponent,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var _useGetImages = (0, _hooks.useGetImages)(backgroundImage),
     _useGetImages$data$ge = _useGetImages.data.getFile,
@@ -57,7 +58,8 @@ var Layout = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   if (type === _constants.COLUMN && !(0, _helpers2.hasChildren)(children)) return null;
   var otherWrapperProps = {};
   if (dataNoSnippet) otherWrapperProps['data-nosnippet'] = true;
-  return /*#__PURE__*/_react["default"].createElement(_Wrapper["default"], (0, _extends2["default"])({
+  var WrapperComponent = VariantComponent || _Wrapper["default"];
+  return /*#__PURE__*/_react["default"].createElement(WrapperComponent, (0, _extends2["default"])({
     ref: ref,
     tagType: tagType,
     className: type,
@@ -77,6 +79,7 @@ Layout.propTypes = {
   backgroundImage: _propTypes["default"].string,
   tagType: _propTypes["default"].string,
   dataNoSnippet: _propTypes["default"].bool,
+  VariantComponent: _propTypes["default"].func,
   children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]).isRequired
 };
 Layout.defaultProps = {
@@ -87,7 +90,8 @@ Layout.defaultProps = {
   modifier: '',
   tagType: '',
   dataNoSnippet: false,
-  sticky: false
+  sticky: false,
+  VariantComponent: null
 };
 var _default = Layout;
 exports["default"] = _default;

package/lib/components/Layout/Layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Layout.js","names":["_react","_interopRequireDefault","require","_propTypes","_Wrapper","_utils","_hooks","_helpers","_helpers2","_constants","_excluded","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","Layout","React","forwardRef","_ref","ref","type","children","settings","modifier","backgroundImage","tagType","dataNoSnippet","sticky","otherProps","_objectWithoutProperties2","_useGetImages","useGetImages","_useGetImages$data$ge","data","getFile","_useGetImages$data$ge2","_useGetImages$data$ge3","url","style","getStylesToUpdate","title","classModifiers","getClassModifiers","additionalRowModifier","checkIfRowHasColumns","COLUMN","hasChildren","otherWrapperProps","createElement","_extends2","className","modifiers","concat","renderChildren","propTypes","PropTypes","string","isRequired","bool","shape","oneOfType","arrayOf","node","defaultProps","_default","exports"],"sources":["../../../src/components/Layout/Layout.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Wrapper from '../Wrapper';\nimport { getClassModifiers } from '../../utils';\nimport { useGetImages } from '../../hooks';\nimport { getStylesToUpdate, checkIfRowHasColumns } from './helpers';\nimport { renderChildren, hasChildren } from '../../helpers';\nimport { COLUMN } from '../../constants';\n\nconst Layout = React.forwardRef(\n  (\n    {\n      type,\n      children,\n      settings,\n      modifier,\n      backgroundImage,\n      tagType,\n      dataNoSnippet,\n      sticky,\n      ...otherProps\n    },\n    ref\n  ) => {\n    const {\n      data: { getFile: { url = null } = {} }\n    } = useGetImages(backgroundImage);\n\n    const style = getStylesToUpdate({ backgroundImage: url });\n    const { title } = settings;\n\n    const classModifiers = getClassModifiers(type, { modifier, sticky, ...otherProps });\n    const additionalRowModifier = checkIfRowHasColumns(type, children) ? ' display-row' : '';\n\n    if (type === COLUMN && !hasChildren(children)) return null;\n\n    const otherWrapperProps = {};\n    if (dataNoSnippet) otherWrapperProps['data-nosnippet'] = true;\n\n    return (\n      <Wrapper\n        ref={ref}\n        tagType={tagType}\n        className={type}\n        modifiers={`${classModifiers}${additionalRowModifier}`}\n        style={style}\n        {...otherWrapperProps}>\n        {title && <h2 className=\"heading heading--section\">{title}</h2>}\n        {renderChildren(children, otherProps)}\n      </Wrapper>\n    );\n  }\n);\n\nLayout.propTypes = {\n  type: PropTypes.string.isRequired,\n  sticky: PropTypes.bool,\n  settings: PropTypes.shape({\n    title: PropTypes.string\n  }),\n  modifier: PropTypes.string,\n  backgroundImage: PropTypes.string,\n  tagType: PropTypes.string,\n  dataNoSnippet: PropTypes.bool,\n  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired\n};\n\nLayout.defaultProps = {\n  settings: {\n    title: ''\n  },\n  backgroundImage: '',\n  modifier: '',\n  tagType: '',\n  dataNoSnippet: false,\n  sticky: false\n};\n\nexport default Layout;\n"],"mappings":"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"}
+{"version":3,"file":"Layout.js","names":["_react","_interopRequireDefault","require","_propTypes","_Wrapper","_utils","_hooks","_helpers","_helpers2","_constants","_excluded","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","Layout","React","forwardRef","_ref","ref","type","children","settings","modifier","backgroundImage","tagType","dataNoSnippet","sticky","VariantComponent","otherProps","_objectWithoutProperties2","_useGetImages","useGetImages","_useGetImages$data$ge","data","getFile","_useGetImages$data$ge2","_useGetImages$data$ge3","url","style","getStylesToUpdate","title","classModifiers","getClassModifiers","additionalRowModifier","checkIfRowHasColumns","COLUMN","hasChildren","otherWrapperProps","WrapperComponent","Wrapper","createElement","_extends2","className","modifiers","concat","renderChildren","propTypes","PropTypes","string","isRequired","bool","shape","func","oneOfType","arrayOf","node","defaultProps","_default","exports"],"sources":["../../../src/components/Layout/Layout.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Wrapper from '../Wrapper';\nimport { getClassModifiers } from '../../utils';\nimport { useGetImages } from '../../hooks';\nimport { getStylesToUpdate, checkIfRowHasColumns } from './helpers';\nimport { renderChildren, hasChildren } from '../../helpers';\nimport { COLUMN } from '../../constants';\n\nconst Layout = React.forwardRef(\n  (\n    {\n      type,\n      children,\n      settings,\n      modifier,\n      backgroundImage,\n      tagType,\n      dataNoSnippet,\n      sticky,\n      VariantComponent,\n      ...otherProps\n    },\n    ref\n  ) => {\n    const {\n      data: { getFile: { url = null } = {} }\n    } = useGetImages(backgroundImage);\n    const style = getStylesToUpdate({ backgroundImage: url });\n    const { title } = settings;\n    const classModifiers = getClassModifiers(type, { modifier, sticky, ...otherProps });\n    const additionalRowModifier = checkIfRowHasColumns(type, children) ? ' display-row' : '';\n\n    if (type === COLUMN && !hasChildren(children)) return null;\n\n    const otherWrapperProps = {};\n    if (dataNoSnippet) otherWrapperProps['data-nosnippet'] = true;\n\n    const WrapperComponent = VariantComponent || Wrapper;\n\n    return (\n      <WrapperComponent\n        ref={ref}\n        tagType={tagType}\n        className={type}\n        modifiers={`${classModifiers}${additionalRowModifier}`}\n        style={style}\n        {...otherWrapperProps}>\n        {title && <h2 className=\"heading heading--section\">{title}</h2>}\n        {renderChildren(children, otherProps)}\n      </WrapperComponent>\n    );\n  }\n);\n\nLayout.propTypes = {\n  type: PropTypes.string.isRequired,\n  sticky: PropTypes.bool,\n  settings: PropTypes.shape({\n    title: PropTypes.string\n  }),\n  modifier: PropTypes.string,\n  backgroundImage: PropTypes.string,\n  tagType: PropTypes.string,\n  dataNoSnippet: PropTypes.bool,\n  VariantComponent: PropTypes.func,\n  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired\n};\n\nLayout.defaultProps = {\n  settings: {\n    title: ''\n  },\n  backgroundImage: '',\n  modifier: '',\n  tagType: '',\n  dataNoSnippet: false,\n  sticky: false,\n  VariantComponent: null\n};\n\nexport default Layout;\n"],"mappings":"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"}

package/lib/hooks/helpers/RenderComponent.js

@@ -10,11 +10,13 @@ require("core-js/modules/es.function.name.js");
 require("core-js/modules/es.array.includes.js");
 require("core-js/modules/es.string.includes.js");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _coreErrorsUi = _interopRequireDefault(require("@blaze-cms/core-errors-ui"));
 var _getComponent = _interopRequireDefault(require("./getComponent"));
+var _getVariant3 = _interopRequireDefault(require("./getVariant"));
 var _appendGtmClassname = _interopRequireDefault(require("./append-gtm-classname"));
 var _constants = require("./constants");
 var _BannerContext = require("../../BannerContext");
@@ -38,10 +40,15 @@ var RenderComponent = function RenderComponent(_ref) {
   var imageOptions = isImage ? imageProps : {};
   if (!Component) return null;
   var updatedSettings = (0, _appendGtmClassname["default"])(settings, childComponents);
+  var _getVariant = (0, _getVariant3["default"])(settings),
+    _getVariant2 = (0, _slicedToArray2["default"])(_getVariant, 2),
+    VariantComponent = _getVariant2[0],
+    variantSettings = _getVariant2[1];
   return /*#__PURE__*/_react["default"].createElement(_coreErrorsUi["default"], null, /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({
     key: id,
-    type: type
-  }, options, imageOptions, nestedComponentsProps, updatedSettings, {
+    type: type,
+    VariantComponent: VariantComponent
+  }, options, imageOptions, nestedComponentsProps, updatedSettings, variantSettings, {
     name: name || settings.name
   }), hasTextBlockBanners ? /*#__PURE__*/_react["default"].createElement(_BannerContext.BannerContextProvider, {
     siblings: siblings,

package/lib/hooks/helpers/RenderComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"RenderComponent.js","names":["_react","_interopRequireDefault","require","_propTypes","_coreErrorsUi","_getComponent","_appendGtmClassname","_constants","_BannerContext","_excluded","RenderComponent","_ref","component","imageProps","childComponents","_ref$options","options","textBlockBanners","hasTextBlockBanners","siblings","nestedComponentsProps","_objectWithoutProperties2","type","settings","id","name","Component","getComponent","isImage","PB_TYPE_IMAGE","PB_TYPE_BANNER","PB_TYPE_TEXTBLOCK","PB_TYPE_CAROUSEL","includes","imageOptions","updatedSettings","appendGtmClassName","createElement","_extends2","key","BannerContextProvider","banners","pbOptions","propTypes","PropTypes","shape","string","object","items","array","isRequired","node","bool","defaultProps","_default","exports"],"sources":["../../../src/hooks/helpers/RenderComponent.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport ErrorBoundary from '@blaze-cms/core-errors-ui';\nimport getComponent from './getComponent';\nimport appendGtmClassName from './append-gtm-classname';\nimport { PB_TYPE_IMAGE, PB_TYPE_BANNER, PB_TYPE_TEXTBLOCK, PB_TYPE_CAROUSEL } from './constants';\nimport { BannerContextProvider } from '../../BannerContext';\n\nconst RenderComponent = ({\n  component,\n  imageProps,\n  childComponents,\n  options = {},\n  textBlockBanners,\n  hasTextBlockBanners,\n  siblings,\n  ...nestedComponentsProps\n}) => {\n  const { type, settings, id, name } = component;\n  const Component = getComponent(type);\n  const isImage = [PB_TYPE_IMAGE, PB_TYPE_BANNER, PB_TYPE_TEXTBLOCK, PB_TYPE_CAROUSEL].includes(\n    type\n  );\n  const imageOptions = isImage ? imageProps : {};\n  if (!Component) return null;\n  const updatedSettings = appendGtmClassName(settings, childComponents);\n\n  return (\n    <ErrorBoundary>\n      <Component\n        key={id}\n        type={type}\n        {...options}\n        {...imageOptions}\n        {...nestedComponentsProps}\n        {...updatedSettings}\n        name={name || settings.name}>\n        {hasTextBlockBanners ? (\n          <BannerContextProvider siblings={siblings} banners={textBlockBanners} pbOptions={options}>\n            {childComponents}\n          </BannerContextProvider>\n        ) : (\n          childComponents\n        )}\n      </Component>\n    </ErrorBoundary>\n  );\n};\n\nRenderComponent.propTypes = {\n  component: PropTypes.shape({\n    type: PropTypes.string,\n    id: PropTypes.string,\n    name: PropTypes.string,\n    settings: PropTypes.object,\n    items: PropTypes.array\n  }).isRequired,\n  imageProps: PropTypes.object.isRequired,\n  options: PropTypes.object.isRequired,\n  childComponents: PropTypes.node.isRequired,\n  textBlockBanners: PropTypes.array,\n  hasTextBlockBanners: PropTypes.bool,\n  siblings: PropTypes.array\n};\n\nRenderComponent.defaultProps = { textBlockBanners: null, hasTextBlockBanners: false, siblings: [] };\n\nexport default RenderComponent;\n"],"mappings":"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"}
+{"version":3,"file":"RenderComponent.js","names":["_react","_interopRequireDefault","require","_propTypes","_coreErrorsUi","_getComponent","_getVariant3","_appendGtmClassname","_constants","_BannerContext","_excluded","RenderComponent","_ref","component","imageProps","childComponents","_ref$options","options","textBlockBanners","hasTextBlockBanners","siblings","nestedComponentsProps","_objectWithoutProperties2","type","settings","id","name","Component","getComponent","isImage","PB_TYPE_IMAGE","PB_TYPE_BANNER","PB_TYPE_TEXTBLOCK","PB_TYPE_CAROUSEL","includes","imageOptions","updatedSettings","appendGtmClassName","_getVariant","getVariant","_getVariant2","_slicedToArray2","VariantComponent","variantSettings","createElement","_extends2","key","BannerContextProvider","banners","pbOptions","propTypes","PropTypes","shape","string","object","items","array","isRequired","node","bool","defaultProps","_default","exports"],"sources":["../../../src/hooks/helpers/RenderComponent.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport ErrorBoundary from '@blaze-cms/core-errors-ui';\nimport getComponent from './getComponent';\nimport getVariant from './getVariant';\nimport appendGtmClassName from './append-gtm-classname';\nimport { PB_TYPE_IMAGE, PB_TYPE_BANNER, PB_TYPE_TEXTBLOCK, PB_TYPE_CAROUSEL } from './constants';\nimport { BannerContextProvider } from '../../BannerContext';\n\nconst RenderComponent = ({\n  component,\n  imageProps,\n  childComponents,\n  options = {},\n  textBlockBanners,\n  hasTextBlockBanners,\n  siblings,\n  ...nestedComponentsProps\n}) => {\n  const { type, settings, id, name } = component;\n  const Component = getComponent(type);\n  const isImage = [PB_TYPE_IMAGE, PB_TYPE_BANNER, PB_TYPE_TEXTBLOCK, PB_TYPE_CAROUSEL].includes(\n    type\n  );\n  const imageOptions = isImage ? imageProps : {};\n  if (!Component) return null;\n  const updatedSettings = appendGtmClassName(settings, childComponents);\n  const [VariantComponent, variantSettings] = getVariant(settings);\n\n  return (\n    <ErrorBoundary>\n      <Component\n        key={id}\n        type={type}\n        VariantComponent={VariantComponent}\n        {...options}\n        {...imageOptions}\n        {...nestedComponentsProps}\n        {...updatedSettings}\n        {...variantSettings}\n        name={name || settings.name}>\n        {hasTextBlockBanners ? (\n          <BannerContextProvider siblings={siblings} banners={textBlockBanners} pbOptions={options}>\n            {childComponents}\n          </BannerContextProvider>\n        ) : (\n          childComponents\n        )}\n      </Component>\n    </ErrorBoundary>\n  );\n};\n\nRenderComponent.propTypes = {\n  component: PropTypes.shape({\n    type: PropTypes.string,\n    id: PropTypes.string,\n    name: PropTypes.string,\n    settings: PropTypes.object,\n    items: PropTypes.array\n  }).isRequired,\n  imageProps: PropTypes.object.isRequired,\n  options: PropTypes.object.isRequired,\n  childComponents: PropTypes.node.isRequired,\n  textBlockBanners: PropTypes.array,\n  hasTextBlockBanners: PropTypes.bool,\n  siblings: PropTypes.array\n};\n\nRenderComponent.defaultProps = { textBlockBanners: null, hasTextBlockBanners: false, siblings: [] };\n\nexport default RenderComponent;\n"],"mappings":"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"}

package/lib/hooks/helpers/getVariant.js

@@ -0,0 +1,18 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = getVariant;
+var _utils = require("../../utils");
+function getVariant(settings) {
+  var variant = settings.variant;
+  if (!variant) return [null, {}];
+  var _ref = _utils.variantHandler.get(variant) || {},
+    VariantComponent = _ref.VariantComponent,
+    getSettings = _ref.getSettings;
+  var variantSettings = !!getSettings && typeof getSettings === 'function' ? getSettings(settings) : settings;
+  return [VariantComponent, variantSettings];
+}
+//# sourceMappingURL=getVariant.js.map

package/lib/hooks/helpers/getVariant.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getVariant.js","names":["_utils","require","getVariant","settings","variant","_ref","variantHandler","get","VariantComponent","getSettings","variantSettings"],"sources":["../../../src/hooks/helpers/getVariant.js"],"sourcesContent":["import { variantHandler } from '../../utils';\n\nexport default function getVariant(settings) {\n  const { variant } = settings;\n  if (!variant) return [null, {}];\n  const { VariantComponent, getSettings } = variantHandler.get(variant) || {};\n  const variantSettings =\n    !!getSettings && typeof getSettings === 'function' ? getSettings(settings) : settings;\n\n  return [VariantComponent, variantSettings];\n}\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEe,SAASC,UAAUA,CAACC,QAAQ,EAAE;EAC3C,IAAQC,OAAO,GAAKD,QAAQ,CAApBC,OAAO;EACf,IAAI,CAACA,OAAO,EAAE,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;EAC/B,IAAAC,IAAA,GAA0CC,qBAAc,CAACC,GAAG,CAACH,OAAO,CAAC,IAAI,CAAC,CAAC;IAAnEI,gBAAgB,GAAAH,IAAA,CAAhBG,gBAAgB;IAAEC,WAAW,GAAAJ,IAAA,CAAXI,WAAW;EACrC,IAAMC,eAAe,GACnB,CAAC,CAACD,WAAW,IAAI,OAAOA,WAAW,KAAK,UAAU,GAAGA,WAAW,CAACN,QAAQ,CAAC,GAAGA,QAAQ;EAEvF,OAAO,CAACK,gBAAgB,EAAEE,eAAe,CAAC;AAC5C"}

package/lib/index.js

@@ -131,6 +131,18 @@ Object.defineProperty(exports, "useGetSingleEntitySchema", {
     return _hooks.useGetSingleEntitySchema;
   }
 });
+Object.defineProperty(exports, "variantHandler", {
+  enumerable: true,
+  get: function get() {
+    return _utils.variantHandler;
+  }
+});
+Object.defineProperty(exports, "variants", {
+  enumerable: true,
+  get: function get() {
+    return _variants["default"];
+  }
+});
 Object.defineProperty(exports, "withTitle", {
   enumerable: true,
   get: function get() {
@@ -142,6 +154,7 @@ var _getLightboxImages = _interopRequireDefault(require("./hooks/helpers/get-lig
 var _getComponent = _interopRequireDefault(require("./hooks/helpers/getComponent"));
 var _utils = require("./utils");
 var _components = _interopRequireDefault(require("./components"));
+var _variants = _interopRequireDefault(require("./variants"));
 var _query = require("./application/query");
 var _helpers = require("./helpers");
 var _HOC = require("./HOC");

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_buildPBComponents","_interopRequireDefault","require","_getLightboxImages","_getComponent","_utils","_components","_query","_helpers","_HOC","_hooks","_DataSummaryTypes","_helpers2"],"sources":["../src/index.js"],"sourcesContent":["export { default as buildPBComponents } from './hooks/helpers/buildPBComponents';\nexport { default as getLightboxImages } from './hooks/helpers/get-lightbox-images';\nexport { default as getComponent } from './hooks/helpers/getComponent';\nexport { componentMap, getClassModifiers } from './utils';\nexport { default as components } from './components';\nexport {\n  getAction,\n  generateSingleItemQuery,\n  generateMultiItemQuery,\n  getEntitySchema,\n  getSingleEntitySchema,\n  getUser\n} from './application/query';\nexport { buildPropsQuery, getUnpublishedEntityName, renderChildren, hasChildren } from './helpers';\nexport { withTitle } from './HOC';\nexport { useGetEntitySchema, useGetEntitySchemasAsObj, useGetSingleEntitySchema } from './hooks';\nexport { summaryComponents } from './components/DataSummary/DataSummaryTypes';\nexport { buildPropsToDisplayWithContent } from './components/DataSummary/helpers';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,kBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,kBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,aAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,WAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,MAAA,GAAAL,OAAA;AAQA,IAAAM,QAAA,GAAAN,OAAA;AACA,IAAAO,IAAA,GAAAP,OAAA;AACA,IAAAQ,MAAA,GAAAR,OAAA;AACA,IAAAS,iBAAA,GAAAT,OAAA;AACA,IAAAU,SAAA,GAAAV,OAAA"}
+{"version":3,"file":"index.js","names":["_buildPBComponents","_interopRequireDefault","require","_getLightboxImages","_getComponent","_utils","_components","_variants","_query","_helpers","_HOC","_hooks","_DataSummaryTypes","_helpers2"],"sources":["../src/index.js"],"sourcesContent":["export { default as buildPBComponents } from './hooks/helpers/buildPBComponents';\nexport { default as getLightboxImages } from './hooks/helpers/get-lightbox-images';\nexport { default as getComponent } from './hooks/helpers/getComponent';\nexport { componentMap, variantHandler, getClassModifiers } from './utils';\nexport { default as components } from './components';\nexport { default as variants } from './variants';\nexport {\n  getAction,\n  generateSingleItemQuery,\n  generateMultiItemQuery,\n  getEntitySchema,\n  getSingleEntitySchema,\n  getUser\n} from './application/query';\nexport { buildPropsQuery, getUnpublishedEntityName, renderChildren, hasChildren } from './helpers';\nexport { withTitle } from './HOC';\nexport { useGetEntitySchema, useGetEntitySchemasAsObj, useGetSingleEntitySchema } from './hooks';\nexport { summaryComponents } from './components/DataSummary/DataSummaryTypes';\nexport { buildPropsToDisplayWithContent } from './components/DataSummary/helpers';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,kBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,kBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,aAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,WAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,SAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AAQA,IAAAO,QAAA,GAAAP,OAAA;AACA,IAAAQ,IAAA,GAAAR,OAAA;AACA,IAAAS,MAAA,GAAAT,OAAA;AACA,IAAAU,iBAAA,GAAAV,OAAA;AACA,IAAAW,SAAA,GAAAX,OAAA"}