@blaze-cms/react-page-builder 0.141.0-core-styles.3 → 0.141.0-core-variants.0

package/lib-es/variants/LongformGallery/helpers/index.js

@@ -0,0 +1,5 @@
+import parseImageData from './parseImageData';
+import separateImages from './separateImages';
+import shouldSkip from './shouldSkip';
+export { parseImageData, separateImages, shouldSkip };
+//# sourceMappingURL=index.js.map

package/lib-es/variants/LongformGallery/helpers/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["parseImageData","separateImages","shouldSkip"],"sources":["../../../../src/variants/LongformGallery/helpers/index.js"],"sourcesContent":["import parseImageData from './parseImageData';\nimport separateImages from './separateImages';\nimport shouldSkip from './shouldSkip';\n\nexport { parseImageData, separateImages, shouldSkip };\n"],"mappings":"AAAA,OAAOA,cAAc,MAAM,kBAAkB;AAC7C,OAAOC,cAAc,MAAM,kBAAkB;AAC7C,OAAOC,UAAU,MAAM,cAAc;AAErC,SAASF,cAAc,EAAEC,cAAc,EAAEC,UAAU"}

package/lib-es/variants/LongformGallery/helpers/parseImageData.js

@@ -0,0 +1,26 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
+import parseHTML from 'html-react-parser';
+import { PROPS_TO_CHECK } from '../constants';
+const parseImageData = (image, index, priorityLimit, shouldDisplayCaption) => {
+  const {
+    data = {}
+  } = image;
+  const parsedData = {};
+  PROPS_TO_CHECK.forEach(dataKey => {
+    const value = data && data[dataKey];
+    if (dataKey === 'caption') {
+      parsedData[dataKey] = shouldDisplayCaption && !!value ? parseHTML(value) : '';
+      return;
+    }
+    parsedData[dataKey] = value || '';
+  });
+  return _objectSpread(_objectSpread({}, parsedData), {}, {
+    id: image.id,
+    url: image.url,
+    priority: index < priorityLimit
+  });
+};
+export default parseImageData;
+//# sourceMappingURL=parseImageData.js.map

package/lib-es/variants/LongformGallery/helpers/parseImageData.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parseImageData.js","names":["parseHTML","PROPS_TO_CHECK","parseImageData","image","index","priorityLimit","shouldDisplayCaption","data","parsedData","forEach","dataKey","value","_objectSpread","id","url","priority"],"sources":["../../../../src/variants/LongformGallery/helpers/parseImageData.js"],"sourcesContent":["import parseHTML from 'html-react-parser';\nimport { PROPS_TO_CHECK } from '../constants';\n\nconst parseImageData = (image, index, priorityLimit, shouldDisplayCaption) => {\n  const { data = {} } = image;\n  const parsedData = {};\n\n  PROPS_TO_CHECK.forEach(dataKey => {\n    const value = data && data[dataKey];\n    if (dataKey === 'caption') {\n      parsedData[dataKey] = shouldDisplayCaption && !!value ? parseHTML(value) : '';\n      return;\n    }\n    parsedData[dataKey] = value || '';\n  });\n\n  return {\n    ...parsedData,\n    id: image.id,\n    url: image.url,\n    priority: index < priorityLimit\n  };\n};\n\nexport default parseImageData;\n"],"mappings":";;;AAAA,OAAOA,SAAS,MAAM,mBAAmB;AACzC,SAASC,cAAc,QAAQ,cAAc;AAE7C,MAAMC,cAAc,GAAGA,CAACC,KAAK,EAAEC,KAAK,EAAEC,aAAa,EAAEC,oBAAoB,KAAK;EAC5E,MAAM;IAAEC,IAAI,GAAG,CAAC;EAAE,CAAC,GAAGJ,KAAK;EAC3B,MAAMK,UAAU,GAAG,CAAC,CAAC;EAErBP,cAAc,CAACQ,OAAO,CAACC,OAAO,IAAI;IAChC,MAAMC,KAAK,GAAGJ,IAAI,IAAIA,IAAI,CAACG,OAAO,CAAC;IACnC,IAAIA,OAAO,KAAK,SAAS,EAAE;MACzBF,UAAU,CAACE,OAAO,CAAC,GAAGJ,oBAAoB,IAAI,CAAC,CAACK,KAAK,GAAGX,SAAS,CAACW,KAAK,CAAC,GAAG,EAAE;MAC7E;IACF;IACAH,UAAU,CAACE,OAAO,CAAC,GAAGC,KAAK,IAAI,EAAE;EACnC,CAAC,CAAC;EAEF,OAAAC,aAAA,CAAAA,aAAA,KACKJ,UAAU;IACbK,EAAE,EAAEV,KAAK,CAACU,EAAE;IACZC,GAAG,EAAEX,KAAK,CAACW,GAAG;IACdC,QAAQ,EAAEX,KAAK,GAAGC;EAAa;AAEnC,CAAC;AAED,eAAeH,cAAc"}

package/lib-es/variants/LongformGallery/helpers/separateImages.js

@@ -0,0 +1,13 @@
+import parseImageData from './parseImageData';
+const separateImages = (images, priorityLimit, shouldDisplayCaption) => {
+  if (!images || !images.length) return [[], []];
+  const mainImages = images.slice(0, 2).map((image, index) => parseImageData(image, index, priorityLimit, shouldDisplayCaption));
+  const secondaryImages = [];
+  for (let i = 2; i < images.length; i += 3) {
+    const parsedImages = images.slice(i, i + 3).map((image, index) => parseImageData(image, index, priorityLimit, shouldDisplayCaption));
+    secondaryImages.push(parsedImages);
+  }
+  return [mainImages, secondaryImages];
+};
+export default separateImages;
+//# sourceMappingURL=separateImages.js.map

package/lib-es/variants/LongformGallery/helpers/separateImages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"separateImages.js","names":["parseImageData","separateImages","images","priorityLimit","shouldDisplayCaption","length","mainImages","slice","map","image","index","secondaryImages","i","parsedImages","push"],"sources":["../../../../src/variants/LongformGallery/helpers/separateImages.js"],"sourcesContent":["import parseImageData from './parseImageData';\n\nconst separateImages = (images, priorityLimit, shouldDisplayCaption) => {\n  if (!images || !images.length) return [[], []];\n\n  const mainImages = images\n    .slice(0, 2)\n    .map((image, index) => parseImageData(image, index, priorityLimit, shouldDisplayCaption));\n\n  const secondaryImages = [];\n\n  for (let i = 2; i < images.length; i += 3) {\n    const parsedImages = images\n      .slice(i, i + 3)\n      .map((image, index) => parseImageData(image, index, priorityLimit, shouldDisplayCaption));\n    secondaryImages.push(parsedImages);\n  }\n\n  return [mainImages, secondaryImages];\n};\n\nexport default separateImages;\n"],"mappings":"AAAA,OAAOA,cAAc,MAAM,kBAAkB;AAE7C,MAAMC,cAAc,GAAGA,CAACC,MAAM,EAAEC,aAAa,EAAEC,oBAAoB,KAAK;EACtE,IAAI,CAACF,MAAM,IAAI,CAACA,MAAM,CAACG,MAAM,EAAE,OAAO,CAAC,EAAE,EAAE,EAAE,CAAC;EAE9C,MAAMC,UAAU,GAAGJ,MAAM,CACtBK,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CACXC,GAAG,CAAC,CAACC,KAAK,EAAEC,KAAK,KAAKV,cAAc,CAACS,KAAK,EAAEC,KAAK,EAAEP,aAAa,EAAEC,oBAAoB,CAAC,CAAC;EAE3F,MAAMO,eAAe,GAAG,EAAE;EAE1B,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGV,MAAM,CAACG,MAAM,EAAEO,CAAC,IAAI,CAAC,EAAE;IACzC,MAAMC,YAAY,GAAGX,MAAM,CACxBK,KAAK,CAACK,CAAC,EAAEA,CAAC,GAAG,CAAC,CAAC,CACfJ,GAAG,CAAC,CAACC,KAAK,EAAEC,KAAK,KAAKV,cAAc,CAACS,KAAK,EAAEC,KAAK,EAAEP,aAAa,EAAEC,oBAAoB,CAAC,CAAC;IAC3FO,eAAe,CAACG,IAAI,CAACD,YAAY,CAAC;EACpC;EAEA,OAAO,CAACP,UAAU,EAAEK,eAAe,CAAC;AACtC,CAAC;AAED,eAAeV,cAAc"}

package/lib-es/variants/LongformGallery/helpers/shouldSkip.js

@@ -0,0 +1,3 @@
+const shouldSkip = ids => !ids || Array.isArray(ids) && !ids.length;
+export default shouldSkip;
+//# sourceMappingURL=shouldSkip.js.map

package/lib-es/variants/LongformGallery/helpers/shouldSkip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shouldSkip.js","names":["shouldSkip","ids","Array","isArray","length"],"sources":["../../../../src/variants/LongformGallery/helpers/shouldSkip.js"],"sourcesContent":["const shouldSkip = ids => !ids || (Array.isArray(ids) && !ids.length);\n\nexport default shouldSkip;\n"],"mappings":"AAAA,MAAMA,UAAU,GAAGC,GAAG,IAAI,CAACA,GAAG,IAAKC,KAAK,CAACC,OAAO,CAACF,GAAG,CAAC,IAAI,CAACA,GAAG,CAACG,MAAO;AAErE,eAAeJ,UAAU"}

package/lib-es/variants/LongformGallery/index.js

@@ -0,0 +1,12 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
+import LongformGalleryComponent from './LongformGallery';
+const LongformGallery = {
+  VariantComponent: LongformGalleryComponent,
+  getSettings: componentSettings => _objectSpread(_objectSpread({}, componentSettings), {}, {
+    modifier: 'longformGallery'
+  })
+};
+export default LongformGallery;
+//# sourceMappingURL=index.js.map

package/lib-es/variants/LongformGallery/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["LongformGalleryComponent","LongformGallery","VariantComponent","getSettings","componentSettings","_objectSpread","modifier"],"sources":["../../../src/variants/LongformGallery/index.js"],"sourcesContent":["import LongformGalleryComponent from './LongformGallery';\n\nconst LongformGallery = {\n  VariantComponent: LongformGalleryComponent,\n  getSettings: componentSettings => ({\n    ...componentSettings,\n    modifier: 'longformGallery'\n  })\n};\n\nexport default LongformGallery;\n"],"mappings":";;;AAAA,OAAOA,wBAAwB,MAAM,mBAAmB;AAExD,MAAMC,eAAe,GAAG;EACtBC,gBAAgB,EAAEF,wBAAwB;EAC1CG,WAAW,EAAEC,iBAAiB,IAAAC,aAAA,CAAAA,aAAA,KACzBD,iBAAiB;IACpBE,QAAQ,EAAE;EAAiB;AAE/B,CAAC;AAED,eAAeL,eAAe"}

package/lib-es/variants/LongformGallery/useLongformGallery.js

@@ -0,0 +1,48 @@
+import { useQuery } from '@apollo/client';
+import { GET_IMAGES_QUERY } from './constants';
+import { separateImages, shouldSkip } from './helpers';
+const useLongformGallery = ({
+  imageIds = [],
+  priorityLimit = 0,
+  shouldDisplayCaption = false,
+  enableLightbox = false,
+  toggleModal = () => {},
+  handleSelectedImage = () => {}
+}) => {
+  const skip = shouldSkip(imageIds);
+  const {
+    data,
+    loading,
+    error
+  } = useQuery(GET_IMAGES_QUERY, {
+    variables: {
+      where: {
+        id: {
+          _in: imageIds
+        }
+      }
+    },
+    skip
+  });
+  const {
+    getImages
+  } = data || {};
+  const [mainImages, secondaryImages] = separateImages(getImages, priorityLimit, shouldDisplayCaption);
+  const handleImageOnClick = clickedImageId => {
+    if (!enableLightbox) return;
+    toggleModal();
+    handleSelectedImage(clickedImageId);
+  };
+  const secondaryImageClassname = imageIds.length === 4 ? 'longform-gallery__images__image secondary-image two-group' : 'longform-gallery__images__image secondary-image';
+  return {
+    data,
+    loading,
+    error,
+    mainImages,
+    secondaryImages,
+    secondaryImageClassname,
+    handleImageOnClick
+  };
+};
+export default useLongformGallery;
+//# sourceMappingURL=useLongformGallery.js.map

package/lib-es/variants/LongformGallery/useLongformGallery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLongformGallery.js","names":["useQuery","GET_IMAGES_QUERY","separateImages","shouldSkip","useLongformGallery","imageIds","priorityLimit","shouldDisplayCaption","enableLightbox","toggleModal","handleSelectedImage","skip","data","loading","error","variables","where","id","_in","getImages","mainImages","secondaryImages","handleImageOnClick","clickedImageId","secondaryImageClassname","length"],"sources":["../../../src/variants/LongformGallery/useLongformGallery.js"],"sourcesContent":["import { useQuery } from '@apollo/client';\nimport { GET_IMAGES_QUERY } from './constants';\nimport { separateImages, shouldSkip } from './helpers';\n\nconst useLongformGallery = ({\n  imageIds = [],\n  priorityLimit = 0,\n  shouldDisplayCaption = false,\n  enableLightbox = false,\n  toggleModal = () => {},\n  handleSelectedImage = () => {}\n}) => {\n  const skip = shouldSkip(imageIds);\n\n  const { data, loading, error } = useQuery(GET_IMAGES_QUERY, {\n    variables: { where: { id: { _in: imageIds } } },\n    skip\n  });\n\n  const { getImages } = data || {};\n\n  const [mainImages, secondaryImages] = separateImages(\n    getImages,\n    priorityLimit,\n    shouldDisplayCaption\n  );\n\n  const handleImageOnClick = clickedImageId => {\n    if (!enableLightbox) return;\n    toggleModal();\n    handleSelectedImage(clickedImageId);\n  };\n\n  const secondaryImageClassname =\n    imageIds.length === 4\n      ? 'longform-gallery__images__image secondary-image two-group'\n      : 'longform-gallery__images__image secondary-image';\n\n  return {\n    data,\n    loading,\n    error,\n    mainImages,\n    secondaryImages,\n    secondaryImageClassname,\n    handleImageOnClick\n  };\n};\n\nexport default useLongformGallery;\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,gBAAgB;AACzC,SAASC,gBAAgB,QAAQ,aAAa;AAC9C,SAASC,cAAc,EAAEC,UAAU,QAAQ,WAAW;AAEtD,MAAMC,kBAAkB,GAAGA,CAAC;EAC1BC,QAAQ,GAAG,EAAE;EACbC,aAAa,GAAG,CAAC;EACjBC,oBAAoB,GAAG,KAAK;EAC5BC,cAAc,GAAG,KAAK;EACtBC,WAAW,GAAGA,CAAA,KAAM,CAAC,CAAC;EACtBC,mBAAmB,GAAGA,CAAA,KAAM,CAAC;AAC/B,CAAC,KAAK;EACJ,MAAMC,IAAI,GAAGR,UAAU,CAACE,QAAQ,CAAC;EAEjC,MAAM;IAAEO,IAAI;IAAEC,OAAO;IAAEC;EAAM,CAAC,GAAGd,QAAQ,CAACC,gBAAgB,EAAE;IAC1Dc,SAAS,EAAE;MAAEC,KAAK,EAAE;QAAEC,EAAE,EAAE;UAAEC,GAAG,EAAEb;QAAS;MAAE;IAAE,CAAC;IAC/CM;EACF,CAAC,CAAC;EAEF,MAAM;IAAEQ;EAAU,CAAC,GAAGP,IAAI,IAAI,CAAC,CAAC;EAEhC,MAAM,CAACQ,UAAU,EAAEC,eAAe,CAAC,GAAGnB,cAAc,CAClDiB,SAAS,EACTb,aAAa,EACbC,oBACF,CAAC;EAED,MAAMe,kBAAkB,GAAGC,cAAc,IAAI;IAC3C,IAAI,CAACf,cAAc,EAAE;IACrBC,WAAW,CAAC,CAAC;IACbC,mBAAmB,CAACa,cAAc,CAAC;EACrC,CAAC;EAED,MAAMC,uBAAuB,GAC3BnB,QAAQ,CAACoB,MAAM,KAAK,CAAC,GACjB,2DAA2D,GAC3D,iDAAiD;EAEvD,OAAO;IACLb,IAAI;IACJC,OAAO;IACPC,KAAK;IACLM,UAAU;IACVC,eAAe;IACfG,uBAAuB;IACvBF;EACF,CAAC;AACH,CAAC;AAED,eAAelB,kBAAkB"}

package/lib-es/variants/LongformRow/index.js

@@ -0,0 +1,10 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
+const LongformRow = {
+  getSettings: componentSettings => _objectSpread(_objectSpread({}, componentSettings), {}, {
+    modifier: 'longform-row'
+  })
+};
+export default LongformRow;
+//# sourceMappingURL=index.js.map

package/lib-es/variants/LongformRow/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["LongformRow","getSettings","componentSettings","_objectSpread","modifier"],"sources":["../../../src/variants/LongformRow/index.js"],"sourcesContent":["const LongformRow = {\n  getSettings: componentSettings => ({\n    ...componentSettings,\n    modifier: 'longform-row'\n  })\n};\n\nexport default LongformRow;\n"],"mappings":";;;AAAA,MAAMA,WAAW,GAAG;EAClBC,WAAW,EAAEC,iBAAiB,IAAAC,aAAA,CAAAA,aAAA,KACzBD,iBAAiB;IACpBE,QAAQ,EAAE;EAAc;AAE5B,CAAC;AAED,eAAeJ,WAAW"}

package/lib-es/variants/ParallaxImageTextRight/index.js

@@ -0,0 +1,11 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
+const ParallaxImageTextRight = {
+  getSettings: componentSettings => _objectSpread(_objectSpread({}, componentSettings), {}, {
+    parallax: true,
+    modifier: 'image-children-right'
+  })
+};
+export default ParallaxImageTextRight;
+//# sourceMappingURL=index.js.map

package/lib-es/variants/ParallaxImageTextRight/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ParallaxImageTextRight","getSettings","componentSettings","_objectSpread","parallax","modifier"],"sources":["../../../src/variants/ParallaxImageTextRight/index.js"],"sourcesContent":["const ParallaxImageTextRight = {\n  getSettings: componentSettings => ({\n    ...componentSettings,\n    parallax: true,\n    modifier: 'image-children-right'\n  })\n};\n\nexport default ParallaxImageTextRight;\n"],"mappings":";;;AAAA,MAAMA,sBAAsB,GAAG;EAC7BC,WAAW,EAAEC,iBAAiB,IAAAC,aAAA,CAAAA,aAAA,KACzBD,iBAAiB;IACpBE,QAAQ,EAAE,IAAI;IACdC,QAAQ,EAAE;EAAsB;AAEpC,CAAC;AAED,eAAeL,sBAAsB"}

package/lib-es/variants/index.js

@@ -1,2 +1,13 @@
-export default {};
+import heroImage from './HeroImage';
+import infographic from './Infographic';
+import longformGallery from './LongformGallery';
+import longformRow from './LongformRow';
+import parallaxImageTextRight from './ParallaxImageTextRight';
+export default {
+  heroImage,
+  infographic,
+  longformGallery,
+  longformRow,
+  parallaxImageTextRight
+};
 //# sourceMappingURL=index.js.map

package/lib-es/variants/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/variants/index.js"],"sourcesContent":["export default {};\n"],"mappings":"AAAA,eAAe,CAAC,CAAC"}
+{"version":3,"file":"index.js","names":["heroImage","infographic","longformGallery","longformRow","parallaxImageTextRight"],"sources":["../../src/variants/index.js"],"sourcesContent":["import heroImage from './HeroImage';\nimport infographic from './Infographic';\nimport longformGallery from './LongformGallery';\nimport longformRow from './LongformRow';\nimport parallaxImageTextRight from './ParallaxImageTextRight';\n\nexport default {\n  heroImage,\n  infographic,\n  longformGallery,\n  longformRow,\n  parallaxImageTextRight\n};\n"],"mappings":"AAAA,OAAOA,SAAS,MAAM,aAAa;AACnC,OAAOC,WAAW,MAAM,eAAe;AACvC,OAAOC,eAAe,MAAM,mBAAmB;AAC/C,OAAOC,WAAW,MAAM,eAAe;AACvC,OAAOC,sBAAsB,MAAM,0BAA0B;AAE7D,eAAe;EACbJ,SAAS;EACTC,WAAW;EACXC,eAAe;EACfC,WAAW;EACXC;AACF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blaze-cms/react-page-builder",
-  "version": "0.141.0-core-styles.3",
+  "version": "0.141.0-core-variants.0",
   "description": "Blaze react page builder",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
@@ -27,15 +27,15 @@
   },
   "license": "GPL-3.0",
   "dependencies": {
-    "@blaze-cms/core-auth-ui": "0.140.2-core-styles.1",
-    "@blaze-cms/core-errors": "0.140.2-core-styles.1",
-    "@blaze-cms/core-errors-ui": "0.140.2-core-styles.1",
+    "@blaze-cms/core-auth-ui": "0.141.0-core-variants.0",
+    "@blaze-cms/core-errors": "^0.139.0",
+    "@blaze-cms/core-errors-ui": "^0.139.0",
     "@blaze-cms/image-cdn-react": "0.3.0-alpha.6",
-    "@blaze-cms/nextjs-components": "0.141.0-core-styles.0",
-    "@blaze-cms/plugin-search-ui": "0.141.0-core-styles.3",
-    "@blaze-cms/setup-ui": "0.140.2-core-styles.1",
-    "@blaze-cms/utils": "0.140.2-core-styles.1",
-    "@blaze-cms/utils-handlebars": "0.141.0-core-styles.0",
+    "@blaze-cms/nextjs-components": "0.141.0-core-variants.0",
+    "@blaze-cms/plugin-search-ui": "0.141.0-core-variants.0",
+    "@blaze-cms/setup-ui": "^0.139.0",
+    "@blaze-cms/utils": "^0.139.0",
+    "@blaze-cms/utils-handlebars": "0.141.0-core-variants.0",
     "@blaze-react/breadcrumb": "0.8.0-alpha.60",
     "@blaze-react/button": "0.5.19",
     "@blaze-react/checkboxes": "0.5.31",
@@ -89,5 +89,5 @@
     "lib/*",
     "lib-es/*"
   ],
-  "gitHead": "d0eaddbf6a1e2cca4c955c0e95345354c24e7fd0"
+  "gitHead": "575e2c9a6dcb15af4072847bd66677affb1abedc"
 }

package/src/components/ContentGroup/ContentGroupTabs.js

@@ -4,7 +4,7 @@ import { useRouter } from 'next/router';
 import { getActiveTab } from './helpers';
 import { TAB, TABS, SIDEPANEL, CONTENT_GROUP, PANEL } from './constants';
 
-const ContentGroupTabs = ({ name, contentType, modifier, groupSections, sectionsData }) => {
+const ContentGroupTabs = ({ name, contentType, groupSections, sectionsData, VariantComponent }) => {
   const router = useRouter();
   const [selectedTab, setSelectedTab] = useState(getActiveTab(sectionsData, ''));
   const { asPath } = router;
@@ -21,10 +21,12 @@ const ContentGroupTabs = ({ name, contentType, modifier, groupSections, sections
     [asPath, sectionsData, selectedTab]
   );
 
+  const WrapperComponent = VariantComponent || 'div';
+
   return (
     <div className={mainDivClass}>
       <ul className={contentGroupClass} role="tablist" aria-label={name}>
-        {groupSections.map((groupSection, index) => {
+        {groupSections.map((_, index) => {
           const [sectionName, sectioLabel] = sectionsData[index];
           const tabId = `${TAB}-${sectionName}`;
           const panelId = `${PANEL}-${sectionName}`;
@@ -61,14 +63,15 @@ const ContentGroupTabs = ({ name, contentType, modifier, groupSections, sections
         if (selectedTab !== tabId) return null;
 
         return (
-          <div
-            id={sectionName}
+          <WrapperComponent
             key={panelId}
+            id={sectionName}
             className={sectionClass}
             role="tabpanel"
+            tabId={tabId}
             aria-labelledby={tabId}>
             {groupSection}
-          </div>
+          </WrapperComponent>
         );
       })}
     </div>
@@ -78,13 +81,13 @@ const ContentGroupTabs = ({ name, contentType, modifier, groupSections, sections
 ContentGroupTabs.propTypes = {
   name: PropTypes.string.isRequired,
   contentType: PropTypes.string.isRequired,
-  modifier: PropTypes.string,
   groupSections: PropTypes.array.isRequired,
-  sectionsData: PropTypes.array.isRequired
+  sectionsData: PropTypes.array.isRequired,
+  VariantComponent: PropTypes.func
 };
 
 ContentGroupTabs.defaultProps = {
-  modifier: ''
+  VariantComponent: null
 };
 
 export default ContentGroupTabs;

package/src/hooks/helpers/getVariant.js

@@ -3,6 +3,7 @@ import { variantHandler } from '../../utils';
 export default function getVariant(settings) {
   const { variant } = settings;
   if (!variant) return [null, {}];
+
   const { VariantComponent, getSettings } = variantHandler.get(variant) || {};
   const variantSettings =
     !!getSettings && typeof getSettings === 'function' ? getSettings(settings) : settings;

package/src/variants/HeroImage/index.js

@@ -0,0 +1,8 @@
+const HeroImage = {
+  getSettings: componentSettings => ({
+    ...componentSettings,
+    modifier: 'hero-image'
+  })
+};
+
+export default HeroImage;

package/src/variants/Infographic/Infographic.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import useInfographic from './useInfographic';
+
+const Infographic = props => {
+  const { contentRef, id, className, tabId, children } = useInfographic(props);
+
+  return (
+    <div ref={contentRef} id={id} className={className} role="tabpanel" aria-labelledby={tabId}>
+      {children}
+    </div>
+  );
+};
+
+export default Infographic;

package/src/variants/Infographic/index.js

@@ -0,0 +1,10 @@
+import InfographicComponent from './Infographic';
+
+const Infographic = {
+  getSettings: componentSettings => ({
+    ...componentSettings
+  }),
+  VariantComponent: InfographicComponent
+};
+
+export default Infographic;

package/src/variants/Infographic/useInfographic.js

@@ -0,0 +1,18 @@
+import { useInView } from '@blaze-react/utils/lib/customHooks';
+
+const useInfographic = ({ className: _className, ...props }) => {
+  const [isIntersecting, contentRef] = useInView({
+    once: true,
+    offset: '200px'
+  });
+
+  const className = `${_className} infographic${isIntersecting ? ' infographic__active' : ''}`;
+
+  return {
+    ...props,
+    className,
+    contentRef
+  };
+};
+
+export default useInfographic;

package/src/variants/LongformGallery/LongformGallery.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import useLongformGallery from './useLongformGallery';
+import LongformGalleryImage from './LongformGalleryImage';
+
+const LongformGallery = props => {
+  const {
+    error,
+    mainImages,
+    secondaryImages,
+    secondaryImageClassname,
+    handleImageOnClick
+  } = useLongformGallery(props);
+
+  if (error) return null;
+
+  return (
+    <div className="longform-gallery" data-testid="longform-gallery">
+      <div className="longform-gallery__images main-images">
+        {mainImages.map(mainImageData => (
+          <LongformGalleryImage
+            key={mainImageData.id}
+            {...mainImageData}
+            className="longform-gallery__images__image main-image"
+            handleImageOnClick={handleImageOnClick}
+          />
+        ))}
+      </div>
+      {secondaryImages.map((secondaryImagesGroup, i) => (
+        <div
+          // eslint-disable-next-line react/no-array-index-key
+          key={i}
+          data-testid="secondary-images"
+          className="longform-gallery__images secondary-images">
+          {secondaryImagesGroup.map(secondaryImage => (
+            <LongformGalleryImage
+              key={secondaryImage.id}
+              {...secondaryImage}
+              className={secondaryImageClassname}
+              handleImageOnClick={handleImageOnClick}
+            />
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default LongformGallery;

package/src/variants/LongformGallery/LongformGalleryImage.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Head from 'next/head';
+import { useInView } from '@blaze-react/utils/lib/customHooks';
+import { ResponsiveImage } from '@blaze-cms/image-cdn-react';
+import { IN_VIEW_CONFIG } from './constants';
+
+const LongformGalleryImage = ({
+  id,
+  url,
+  caption,
+  altText,
+  priority,
+  className,
+  handleImageOnClick,
+  ...props
+}) => {
+  const [isIntersecting, outerRef] = useInView(IN_VIEW_CONFIG);
+  const shouldRender = priority || isIntersecting;
+  const HeadComponent = priority ? Head : null;
+
+  return (
+    <div ref={outerRef} className={className}>
+      <div
+        role="button"
+        className="longform-gallery__images__image__container"
+        data-testid="longform-gallery__images__image__container"
+        onClick={() => handleImageOnClick(id)}>
+        {shouldRender && (
+          <ResponsiveImage
+            sizeKey="carousel"
+            role="button"
+            src={url}
+            alt={altText}
+            priority={priority}
+            HeadComponent={HeadComponent}
+            {...props}
+          />
+        )}
+      </div>
+      {!!caption && (
+        <div
+          className="longform-gallery__images__image__details"
+          data-testid="longform-gallery__images__image__details">
+          <div className="longform-gallery__images__image__details__caption">{caption}</div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+LongformGalleryImage.propTypes = {
+  id: PropTypes.string.isRequired,
+  url: PropTypes.string.isRequired,
+  caption: PropTypes.string.isRequired,
+  altText: PropTypes.string.isRequired,
+  priority: PropTypes.bool.isRequired,
+  className: PropTypes.string.isRequired,
+  handleImageOnClick: PropTypes.func.isRequired
+};
+
+export default LongformGalleryImage;

package/src/variants/LongformGallery/constants.js

@@ -0,0 +1,21 @@
+import { gql } from '@apollo/client';
+
+const GET_IMAGES_QUERY = gql`
+  query getImages($where: JSON!) {
+    getImages: getFiles(where: $where) {
+      id
+      url
+      data
+    }
+  }
+`;
+
+const PROPS_TO_CHECK = ['altText', 'caption', 'hrefUrl', 'credits'];
+
+const IN_VIEW_CONFIG = {
+  once: true,
+  offset: '200px',
+  bottomOffset: '-200px'
+};
+
+export { GET_IMAGES_QUERY, IN_VIEW_CONFIG, PROPS_TO_CHECK };

package/src/variants/LongformGallery/helpers/index.js

@@ -0,0 +1,5 @@
+import parseImageData from './parseImageData';
+import separateImages from './separateImages';
+import shouldSkip from './shouldSkip';
+
+export { parseImageData, separateImages, shouldSkip };

package/src/variants/LongformGallery/helpers/parseImageData.js

@@ -0,0 +1,25 @@
+import parseHTML from 'html-react-parser';
+import { PROPS_TO_CHECK } from '../constants';
+
+const parseImageData = (image, index, priorityLimit, shouldDisplayCaption) => {
+  const { data = {} } = image;
+  const parsedData = {};
+
+  PROPS_TO_CHECK.forEach(dataKey => {
+    const value = data && data[dataKey];
+    if (dataKey === 'caption') {
+      parsedData[dataKey] = shouldDisplayCaption && !!value ? parseHTML(value) : '';
+      return;
+    }
+    parsedData[dataKey] = value || '';
+  });
+
+  return {
+    ...parsedData,
+    id: image.id,
+    url: image.url,
+    priority: index < priorityLimit
+  };
+};
+
+export default parseImageData;

package/src/variants/LongformGallery/helpers/separateImages.js

@@ -0,0 +1,22 @@
+import parseImageData from './parseImageData';
+
+const separateImages = (images, priorityLimit, shouldDisplayCaption) => {
+  if (!images || !images.length) return [[], []];
+
+  const mainImages = images
+    .slice(0, 2)
+    .map((image, index) => parseImageData(image, index, priorityLimit, shouldDisplayCaption));
+
+  const secondaryImages = [];
+
+  for (let i = 2; i < images.length; i += 3) {
+    const parsedImages = images
+      .slice(i, i + 3)
+      .map((image, index) => parseImageData(image, index, priorityLimit, shouldDisplayCaption));
+    secondaryImages.push(parsedImages);
+  }
+
+  return [mainImages, secondaryImages];
+};
+
+export default separateImages;

package/src/variants/LongformGallery/helpers/shouldSkip.js

@@ -0,0 +1,3 @@
+const shouldSkip = ids => !ids || (Array.isArray(ids) && !ids.length);
+
+export default shouldSkip;

package/src/variants/LongformGallery/index.js

@@ -0,0 +1,11 @@
+import LongformGalleryComponent from './LongformGallery';
+
+const LongformGallery = {
+  VariantComponent: LongformGalleryComponent,
+  getSettings: componentSettings => ({
+    ...componentSettings,
+    modifier: 'longformGallery'
+  })
+};
+
+export default LongformGallery;

package/src/variants/LongformGallery/useLongformGallery.js

@@ -0,0 +1,50 @@
+import { useQuery } from '@apollo/client';
+import { GET_IMAGES_QUERY } from './constants';
+import { separateImages, shouldSkip } from './helpers';
+
+const useLongformGallery = ({
+  imageIds = [],
+  priorityLimit = 0,
+  shouldDisplayCaption = false,
+  enableLightbox = false,
+  toggleModal = () => {},
+  handleSelectedImage = () => {}
+}) => {
+  const skip = shouldSkip(imageIds);
+
+  const { data, loading, error } = useQuery(GET_IMAGES_QUERY, {
+    variables: { where: { id: { _in: imageIds } } },
+    skip
+  });
+
+  const { getImages } = data || {};
+
+  const [mainImages, secondaryImages] = separateImages(
+    getImages,
+    priorityLimit,
+    shouldDisplayCaption
+  );
+
+  const handleImageOnClick = clickedImageId => {
+    if (!enableLightbox) return;
+    toggleModal();
+    handleSelectedImage(clickedImageId);
+  };
+
+  const secondaryImageClassname =
+    imageIds.length === 4
+      ? 'longform-gallery__images__image secondary-image two-group'
+      : 'longform-gallery__images__image secondary-image';
+
+  return {
+    data,
+    loading,
+    error,
+    mainImages,
+    secondaryImages,
+    secondaryImageClassname,
+    handleImageOnClick
+  };
+};
+
+export default useLongformGallery;

package/src/variants/LongformRow/index.js

@@ -0,0 +1,8 @@
+const LongformRow = {
+  getSettings: componentSettings => ({
+    ...componentSettings,
+    modifier: 'longform-row'
+  })
+};
+
+export default LongformRow;