@blaze-cms/react-page-builder 0.146.0-node18-core-styles.1 → 0.146.0-node18-core-styles.2

package/lib-es/variants/LiveBlogList/LiveBlogList.js

@@ -0,0 +1,90 @@
+import React, { useRef, useState, useEffect } from 'react';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import Button from '@blaze-react/button';
+import { FaPlus, FaMinus } from 'react-icons/fa';
+import { BsPinAngleFill } from 'react-icons/bs';
+dayjs.extend(relativeTime);
+const LiveBlogList = props => {
+  const {
+    children,
+    date,
+    published,
+    featured
+  } = props;
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [shouldShowButton, setShouldShowButton] = useState(false);
+  const [{
+    displayedDate,
+    displayedTime
+  }, setDisplayedDate] = useState({
+    displayedDate: ' ',
+    displayTime: ''
+  });
+  const usedDate = date || published;
+  const contentRef = useRef(null);
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      if (contentRef.current) {
+        const contentHeight = contentRef.current.scrollHeight;
+        if (contentHeight > 380) {
+          setShouldShowButton(true);
+        }
+      }
+    }, 500); // delay to wait for content load
+    // todo: change to use mutation observer
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [children]);
+  useEffect(() => {
+    // delay setting time so no SSR issues based on timezone
+    let newDate = '';
+    if (usedDate) {
+      const diffInDays = dayjs().diff(dayjs(usedDate), 'day');
+      if (diffInDays < 1) {
+        newDate = dayjs(usedDate).fromNow();
+      } else if (diffInDays < 365) {
+        newDate = dayjs(usedDate).format('DD MMM');
+      } else {
+        newDate = dayjs(usedDate).format('DD MMM YYYY');
+      }
+      setDisplayedDate({
+        displayedDate: newDate,
+        displayedTime: dayjs(usedDate).format('HH:mm')
+      });
+    }
+  }, [date, published, usedDate]);
+  const toggleExpanded = () => {
+    setIsExpanded(!isExpanded);
+  };
+  const isCollapsed = !isExpanded;
+  const baseClass = 'live-blog-container';
+  const modifier = featured ? ` ${baseClass}--featured` : '';
+  const className = `${baseClass}${modifier}`;
+  return /*#__PURE__*/React.createElement("div", {
+    className: className
+  }, usedDate && /*#__PURE__*/React.createElement("div", {
+    className: "live-blog-date"
+  }, featured && /*#__PURE__*/React.createElement(BsPinAngleFill, null), /*#__PURE__*/React.createElement("span", {
+    className: "live-blog-date--date"
+  }, displayedDate), /*#__PURE__*/React.createElement("span", {
+    className: "live-blog-date--time"
+  }, displayedTime)), /*#__PURE__*/React.createElement("div", {
+    ref: contentRef,
+    className: `live-blog-content ${isCollapsed ? 'live-blog-content--collapsed' : 'live-blog-content--opened'}`
+  }, children), shouldShowButton && /*#__PURE__*/React.createElement("div", {
+    className: "live-blog-button-wrapper"
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: "live-blog-toggle",
+    onClick: toggleExpanded,
+    type: "button"
+  }, isExpanded ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FaMinus, {
+    className: "toggle-icon"
+  }), " Show Less") : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FaPlus, {
+    className: "toggle-icon"
+  }), " Show More"))));
+};
+export default LiveBlogList;
+//# sourceMappingURL=LiveBlogList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LiveBlogList.js","names":["React","useRef","useState","useEffect","dayjs","relativeTime","Button","FaPlus","FaMinus","BsPinAngleFill","extend","LiveBlogList","props","children","date","published","featured","isExpanded","setIsExpanded","shouldShowButton","setShouldShowButton","displayedDate","displayedTime","setDisplayedDate","displayTime","usedDate","contentRef","timeout","setTimeout","current","contentHeight","scrollHeight","clearTimeout","newDate","diffInDays","diff","fromNow","format","toggleExpanded","isCollapsed","baseClass","modifier","className","createElement","ref","onClick","type","Fragment"],"sources":["../../../src/variants/LiveBlogList/LiveBlogList.js"],"sourcesContent":["import React, { useRef, useState, useEffect } from 'react';\nimport dayjs from 'dayjs';\nimport relativeTime from 'dayjs/plugin/relativeTime';\nimport Button from '@blaze-react/button';\nimport { FaPlus, FaMinus } from 'react-icons/fa';\nimport { BsPinAngleFill } from 'react-icons/bs';\n\ndayjs.extend(relativeTime);\n\nconst LiveBlogList = props => {\n  const { children, date, published, featured } = props;\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [shouldShowButton, setShouldShowButton] = useState(false);\n  const [{ displayedDate, displayedTime }, setDisplayedDate] = useState({\n    displayedDate: '&nbsp;',\n    displayTime: ''\n  });\n  const usedDate = date || published;\n\n  const contentRef = useRef(null);\n\n  useEffect(\n    () => {\n      const timeout = setTimeout(() => {\n        if (contentRef.current) {\n          const contentHeight = contentRef.current.scrollHeight;\n          if (contentHeight > 380) {\n            setShouldShowButton(true);\n          }\n        }\n      }, 500); // delay to wait for content load\n      // todo: change to use mutation observer\n\n      return () => {\n        clearTimeout(timeout);\n      };\n    },\n    [children]\n  );\n\n  useEffect(\n    () => {\n      // delay setting time so no SSR issues based on timezone\n      let newDate = '';\n      if (usedDate) {\n        const diffInDays = dayjs().diff(dayjs(usedDate), 'day');\n        if (diffInDays < 1) {\n          newDate = dayjs(usedDate).fromNow();\n        } else if (diffInDays < 365) {\n          newDate = dayjs(usedDate).format('DD MMM');\n        } else {\n          newDate = dayjs(usedDate).format('DD MMM YYYY');\n        }\n        setDisplayedDate({\n          displayedDate: newDate,\n          displayedTime: dayjs(usedDate).format('HH:mm')\n        });\n      }\n    },\n    [date, published, usedDate]\n  );\n\n  const toggleExpanded = () => {\n    setIsExpanded(!isExpanded);\n  };\n\n  const isCollapsed = !isExpanded;\n  const baseClass = 'live-blog-container';\n  const modifier = featured ? ` ${baseClass}--featured` : '';\n  const className = `${baseClass}${modifier}`;\n\n  return (\n    <div className={className}>\n      {usedDate && (\n        <div className=\"live-blog-date\">\n          {featured && <BsPinAngleFill />}\n          <span className=\"live-blog-date--date\">{displayedDate}</span>\n          <span className=\"live-blog-date--time\">{displayedTime}</span>\n        </div>\n      )}\n\n      <div\n        ref={contentRef}\n        className={`live-blog-content ${\n          isCollapsed ? 'live-blog-content--collapsed' : 'live-blog-content--opened'\n        }`}>\n        {children}\n      </div>\n\n      {shouldShowButton && (\n        <div className=\"live-blog-button-wrapper\">\n          <Button className=\"live-blog-toggle\" onClick={toggleExpanded} type=\"button\">\n            {isExpanded ? (\n              <>\n                <FaMinus className=\"toggle-icon\" /> Show Less\n              </>\n            ) : (\n              <>\n                <FaPlus className=\"toggle-icon\" /> Show More\n              </>\n            )}\n          </Button>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default LiveBlogList;\n"],"mappings":"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","ignoreList":[]}

package/lib-es/variants/LiveBlogList/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 dynamic from 'next/dynamic';
+const liveBlogList = {
+  VariantComponent: dynamic(() => import(/* webpackChunkName: "blazePbliveBlogList" */'./LiveBlogList')),
+  getSettings: componentSettings => _objectSpread(_objectSpread({}, componentSettings), {}, {
+    modifier: 'liveBlogList'
+  })
+};
+export default liveBlogList;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["dynamic","liveBlogList","VariantComponent","getSettings","componentSettings","_objectSpread","modifier"],"sources":["../../../src/variants/LiveBlogList/index.js"],"sourcesContent":["import dynamic from 'next/dynamic';\n\nconst liveBlogList = {\n  VariantComponent: dynamic(() =>\n    import(/* webpackChunkName: \"blazePbliveBlogList\" */ './LiveBlogList')\n  ),\n  getSettings: componentSettings => ({\n    ...componentSettings,\n    modifier: 'liveBlogList'\n  })\n};\n\nexport default liveBlogList;\n"],"mappings":";;;AAAA,OAAOA,OAAO,MAAM,cAAc;AAElC,MAAMC,YAAY,GAAG;EACnBC,gBAAgB,EAAEF,OAAO,CAAC,MACxB,MAAM,CAAC,6CAA8C,gBAAgB,CACvE,CAAC;EACDG,WAAW,EAAEC,iBAAiB,IAAAC,aAAA,CAAAA,aAAA,KACzBD,iBAAiB;IACpBE,QAAQ,EAAE;EAAc;AAE5B,CAAC;AAED,eAAeL,YAAY","ignoreList":[]}

package/lib-es/variants/index.js

@@ -6,6 +6,7 @@ import parallaxImageTextRight from './ParallaxImageTextRight';
 import thumbnailCarousel from './ThumbnailCarousel';
 import slideSummary from './SlideSummary';
 import floatingSideButton from './FloatingSideButton';
+import liveBlogList from './LiveBlogList';
 export default {
   heroImage,
   infographic,
@@ -14,6 +15,7 @@ export default {
   parallaxImageTextRight,
   thumbnailCarousel,
   slideSummary,
-  floatingSideButton
+  floatingSideButton,
+  liveBlogList
 };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["heroImage","infographic","longformGallery","longformRow","parallaxImageTextRight","thumbnailCarousel","slideSummary","floatingSideButton"],"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';\nimport thumbnailCarousel from './ThumbnailCarousel';\nimport slideSummary from './SlideSummary';\nimport floatingSideButton from './FloatingSideButton';\n\nexport default {\n  heroImage,\n  infographic,\n  longformGallery,\n  longformRow,\n  parallaxImageTextRight,\n  thumbnailCarousel,\n  slideSummary,\n  floatingSideButton\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;AAC7D,OAAOC,iBAAiB,MAAM,qBAAqB;AACnD,OAAOC,YAAY,MAAM,gBAAgB;AACzC,OAAOC,kBAAkB,MAAM,sBAAsB;AAErD,eAAe;EACbP,SAAS;EACTC,WAAW;EACXC,eAAe;EACfC,WAAW;EACXC,sBAAsB;EACtBC,iBAAiB;EACjBC,YAAY;EACZC;AACF,CAAC","ignoreList":[]}
+{"version":3,"file":"index.js","names":["heroImage","infographic","longformGallery","longformRow","parallaxImageTextRight","thumbnailCarousel","slideSummary","floatingSideButton","liveBlogList"],"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';\nimport thumbnailCarousel from './ThumbnailCarousel';\nimport slideSummary from './SlideSummary';\nimport floatingSideButton from './FloatingSideButton';\nimport liveBlogList from './LiveBlogList';\n\nexport default {\n  heroImage,\n  infographic,\n  longformGallery,\n  longformRow,\n  parallaxImageTextRight,\n  thumbnailCarousel,\n  slideSummary,\n  floatingSideButton,\n  liveBlogList\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;AAC7D,OAAOC,iBAAiB,MAAM,qBAAqB;AACnD,OAAOC,YAAY,MAAM,gBAAgB;AACzC,OAAOC,kBAAkB,MAAM,sBAAsB;AACrD,OAAOC,YAAY,MAAM,gBAAgB;AAEzC,eAAe;EACbR,SAAS;EACTC,WAAW;EACXC,eAAe;EACfC,WAAW;EACXC,sBAAsB;EACtBC,iBAAiB;EACjBC,YAAY;EACZC,kBAAkB;EAClBC;AACF,CAAC","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blaze-cms/react-page-builder",
-  "version": "0.146.0-node18-core-styles.1",
+  "version": "0.146.0-node18-core-styles.2",
   "description": "Blaze react page builder",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
@@ -27,14 +27,14 @@
   },
   "license": "GPL-3.0",
   "dependencies": {
-    "@blaze-cms/core-auth-ui": "0.146.0-node18-core-styles.0",
-    "@blaze-cms/core-errors": "0.146.0-node18-core-styles.0",
+    "@blaze-cms/core-auth-ui": "0.146.0-node18-core-styles.2",
+    "@blaze-cms/core-errors": "0.146.0-node18-core-styles.2",
     "@blaze-cms/core-errors-ui": "0.146.0-node18-core-styles.0",
     "@blaze-cms/image-cdn-react": "0.3.0-alpha.7",
     "@blaze-cms/nextjs-components": "0.146.0-node18-core-styles.0",
-    "@blaze-cms/plugin-search-ui": "0.146.0-node18-core-styles.0",
+    "@blaze-cms/plugin-search-ui": "0.146.0-node18-core-styles.2",
     "@blaze-cms/setup-ui": "0.146.0-node18-core-styles.0",
-    "@blaze-cms/utils": "0.146.0-node18-core-styles.0",
+    "@blaze-cms/utils": "0.146.0-node18-core-styles.2",
     "@blaze-cms/utils-handlebars": "0.146.0-node18-core-styles.0",
     "@blaze-react/badge": "^0.7.0",
     "@blaze-react/breadcrumb": "0.8.0-alpha.60",
@@ -91,5 +91,5 @@
     "lib/*",
     "lib-es/*"
   ],
-  "gitHead": "be6b9b2765051031e33510cebab1d01605c26ef1"
+  "gitHead": "c124596c6b8d92f08f58c4dc004a4ea7d1703f23"
 }

package/src/application/query/index.js

@@ -29,6 +29,15 @@ const getUser = userProps => gql`
   }
 `;
 
+const getCurrentUser = userProps => gql`
+  query {
+    getUser: getCurrentUser {
+      id
+      ${userProps}
+    }
+  }
+`;
+
 const getEntitySchema = gql`
   query getEntitySchemas($identifier: String!) {
     getEntitySchemas(identifier: $identifier) {
@@ -201,5 +210,6 @@ export {
   getRecordParents,
   getItemList,
   addItemsToList,
-  removeItemsFromList
+  removeItemsFromList,
+  getCurrentUser
 };

package/src/components/Card/Card.js

@@ -284,9 +284,10 @@ const getImageDefinedProps = ({ image, displayThumbnail, name }) => {
 
 const getInitialModifiers = ({ modifier, style, otherProps }) => {
   const modifiers = [modifier, style];
-  const { sponsored, featured } = otherProps;
+  const { sponsored, featured, live } = otherProps;
   if (sponsored) modifiers.push('sponsored');
   if (featured) modifiers.push('featured');
+  if (live) modifiers.push('live');
 
   return modifiers;
 };

package/src/components/ContentGroup/ContentGroupTabs.js

@@ -44,7 +44,6 @@ const ContentGroupTabs = ({ name, contentType, groupSections, sectionsData, Vari
                 const newUrl = `${baseUrl}#${sectionName}`;
                 if (asPath === newUrl) return;
                 router.push(`/Resolver`, newUrl, { shallow: true });
-                setSelectedTab(tabId);
               }}>
               {sectioLabel}
             </button>

package/src/components/ItemList/ItemListButton/ItemListButton.js

@@ -1,12 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import {
-  BsBookmarkStarFill,
-  BsBookmarkCheckFill,
-  BsBookmarkStar,
-  BsBookmarkXFill
-} from 'react-icons/bs';
 import { useQuery, useMutation } from '@apollo/client';
+import { AddedBookmark, BaseBookmark, HoverBookmark, RemoveBookmark } from '../icons';
 import { getItemList, addItemsToList, removeItemsFromList } from '../../../application/query';
 import { getItemListData, setItemListId } from '../helpers';
 import { useItemListId } from '../hooks';
@@ -16,11 +11,6 @@ const ItemListButton = ({ listName, parent, modifier }) => {
   const [isHover, setIsHover] = useState(false);
   const { listId } = useItemListId({ listName });
 
-  const getIcon = () => {
-    if (isInList) return isHover ? BsBookmarkXFill : BsBookmarkCheckFill;
-    return isHover ? BsBookmarkStarFill : BsBookmarkStar;
-  };
-
   const { data, error, loading } = useQuery(getItemList, {
     variables: { id: listId },
     skip: !listId
@@ -61,6 +51,14 @@ const ItemListButton = ({ listName, parent, modifier }) => {
     ({ itemId: idToCheck, itemEntity: entityToCheck }) =>
       idToCheck === itemId && entityToCheck === itemEntity
   );
+
+  const getIcon = () => {
+    if (isInList) {
+      return isHover ? RemoveBookmark : AddedBookmark;
+    }
+    return isHover ? HoverBookmark : BaseBookmark;
+  };
+
   const Icon = getIcon();
   const stateClassName = isInList ? 'item-list-button--selected' : '';
   const className = ['item-list-button', stateClassName, modifier].filter(Boolean).join(' ');
@@ -69,10 +67,10 @@ const ItemListButton = ({ listName, parent, modifier }) => {
     <div
       className={className}
       role="button"
+      tabIndex="0"
       onClick={clickHandler}
       onMouseEnter={() => setIsHover(true)}
-      onMouseLeave={() => setIsHover(false)}
-      aria-label={`Add to ${listName}`}>
+      onMouseLeave={() => setIsHover(false)}>
       <i>
         <Icon />
       </i>

package/src/components/ItemList/ItemListCounter/ItemListCounter.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useRouter } from 'next/router';
 import { useQuery } from '@apollo/client';
-import { BsBookmarkStarFill, BsBookmarkStar } from 'react-icons/bs';
+import { HoverBookmark, BaseBookmark } from '../icons';
 import { getItemList } from '../../../application/query';
 import { useItemListId } from '../hooks';
 import { getItemListData } from '../helpers';
@@ -21,7 +21,7 @@ const ItemListCounter = ({ listName, modifier, url }) => {
 
   const listItems = getItemListData(data);
   const listLength = listItems.length;
-  const CounterIcon = listLength ? BsBookmarkStarFill : BsBookmarkStar;
+  const CounterIcon = listLength ? HoverBookmark : BaseBookmark;
 
   const handleClick = () => router.push('/Resolver', `${url}?itemListId=${listId}`);
 

package/src/components/ItemList/icons/AddedBookmark.js

@@ -0,0 +1,33 @@
+import React from 'react';
+
+function AddedBookmark() {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 29"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg">
+      <title>wishlist-button/added</title>
+      <g id="Wishlist" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <g id="components" transform="translate(-417, -433)">
+          <g id="wishlist-button/added" transform="translate(417, 433.0588)">
+            <path
+              d="M1.33333333,5.68434189e-14 L22.6666667,5.68434189e-14 C23.4030667,5.68434189e-14 24,0.59696 24,1.33333333 L24,27.0350667 C24,27.4033333 23.7014667,27.7019336 23.3333333,27.7019336 C23.2397333,27.7019336 23.1472,27.682 23.0617333,27.6438667 L12,22.7084 L0.938306667,27.6438667 C0.602066667,27.794 0.20788,27.6429333 0.0578533333,27.3068 C0.0197066667,27.2212 0,27.1286667 0,27.0350667 L0,1.33333333 C0,0.59696 0.59696,5.68434189e-14 1.33333333,5.68434189e-14 Z"
+              id="Shape"
+              fill="currentColor"
+              fillRule="nonzero"
+            />
+            <path
+              d="M18.6268424,8.17492183 C19.1243859,7.67737836 19.1243859,6.87070105 18.6268424,6.3731576 C18.129299,5.87561415 17.3226216,5.87561413 16.8250782,6.37315756 L10.0913659,13.1094147 L7.1749509,10.1904547 C6.85309671,9.86860055 6.38398401,9.74290217 5.94432301,9.86070898 C5.50466201,9.97851579 5.16124768,10.3219301 5.04344087,10.7615911 C4.92563406,11.2012521 5.05133243,11.6703648 5.37318663,11.992219 L9.19048381,15.8095162 C9.42920298,16.0488396 9.75333852,16.183341 10.0913659,16.183341 C10.4293934,16.183341 10.7535289,16.0488396 10.9922481,15.8095162 L18.6268424,8.17492183 Z"
+              id="Path"
+              fill="#FFFFFF"
+            />
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export default AddedBookmark;

package/src/components/ItemList/icons/BaseBookmark.js

@@ -0,0 +1,33 @@
+import React from 'react';
+
+function BaseBookmark() {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 26 30"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg">
+      <title>wishlist-button/base</title>
+      <g id="Wishlist" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <g id="components" transform="translate(-416, -236)" fillRule="nonzero">
+          <g id="wishlist-button/base" transform="translate(417, 237)">
+            <g id="Group" fill="#FFFFFF" stroke="currentColor" strokeWidth="2">
+              <path
+                d="M1.33333333,0 L22.6666667,0 C23.4030667,0 24,0.59696 24,1.33333333 L24,27.0350667 C24,27.4033333 23.7014667,27.7019336 23.3333333,27.7019336 C23.2397333,27.7019336 23.1472,27.682 23.0617333,27.6438667 L12,22.7084 L0.938306667,27.6438667 C0.602066667,27.794 0.20788,27.6429333 0.0578533333,27.3068 C0.0197066667,27.2212 0,27.1286667 0,27.0350667 L0,1.33333333 C0,0.59696 0.59696,0 1.33333333,0 Z"
+                id="Shape"
+              />
+            </g>
+            <path
+              d="M18.5475051,9.70770608 L14.3505774,9.09775478 L12.4744399,5.29423737 C12.4231974,5.19009934 12.3388952,5.10579713 12.2347571,5.05455461 C11.9735856,4.92562182 11.6562126,5.03306581 11.5256268,5.29423737 L9.64948934,9.09775478 L5.4525616,9.70770608 C5.33685268,9.72423592 5.23106167,9.77878441 5.15006543,9.86143364 C4.94616811,10.0710041 4.95060698,10.406139 5.15998334,10.6102356 L8.19651593,13.5707309 L7.47912064,17.7511288 C7.44480011,17.9495157 7.52626118,18.150158 7.68916287,18.2684724 C7.85206456,18.3867868 8.06806465,18.4021884 8.24610546,18.3081846 L12.0000333,16.3345211 L15.7539612,18.3081846 C15.8564463,18.3627331 15.9754612,18.3809159 16.0895171,18.3610801 C16.3771364,18.3114906 16.5705356,18.0387481 16.5209461,17.7511288 L15.8035508,13.5707309 L18.8400834,10.6102356 C18.9227326,10.5292394 18.9772811,10.4234484 18.9938109,10.3077395 C19.0384415,10.0184672 18.8367774,9.75068367 18.5475051,9.70770608 Z"
+              id="Path"
+              fill="currentColor"
+            />
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export default BaseBookmark;

package/src/components/ItemList/icons/HoverBookmark.js

@@ -0,0 +1,33 @@
+import React from 'react';
+
+function HoverBookmark() {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 29"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg">
+      <title>wishlist-button/hover</title>
+      <g id="Wishlist" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <g id="components" transform="translate(-566, -237)" fillRule="nonzero">
+          <g id="wishlist-button/hover" transform="translate(566, 237.3529)">
+            <g id="Group" fill="currentColor">
+              <path
+                d="M1.33333333,0 L22.6666667,0 C23.4030667,0 24,0.59696 24,1.33333333 L24,27.0350667 C24,27.4033333 23.7014667,27.7019336 23.3333333,27.7019336 C23.2397333,27.7019336 23.1472,27.682 23.0617333,27.6438667 L12,22.7084 L0.938306667,27.6438667 C0.602066667,27.794 0.20788,27.6429333 0.0578533333,27.3068 C0.0197066667,27.2212 0,27.1286667 0,27.0350667 L0,1.33333333 C0,0.59696 0.59696,0 1.33333333,0 Z"
+                id="Shape"
+              />
+            </g>
+            <path
+              d="M18.5475051,9.70770608 L14.3505774,9.09775478 L12.4744399,5.29423737 C12.4231974,5.19009934 12.3388952,5.10579713 12.2347571,5.05455461 C11.9735856,4.92562182 11.6562126,5.03306581 11.5256268,5.29423737 L9.64948934,9.09775478 L5.4525616,9.70770608 C5.33685268,9.72423592 5.23106167,9.77878441 5.15006543,9.86143364 C4.94616811,10.0710041 4.95060698,10.406139 5.15998334,10.6102356 L8.19651593,13.5707309 L7.47912064,17.7511288 C7.44480011,17.9495157 7.52626118,18.150158 7.68916287,18.2684724 C7.85206456,18.3867868 8.06806465,18.4021884 8.24610546,18.3081846 L12.0000333,16.3345211 L15.7539612,18.3081846 C15.8564463,18.3627331 15.9754612,18.3809159 16.0895171,18.3610801 C16.3771364,18.3114906 16.5705356,18.0387481 16.5209461,17.7511288 L15.8035508,13.5707309 L18.8400834,10.6102356 C18.9227326,10.5292394 18.9772811,10.4234484 18.9938109,10.3077395 C19.0384415,10.0184672 18.8367774,9.75068367 18.5475051,9.70770608 Z"
+              id="Path"
+              fill="#FFFFFF"
+            />
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export default HoverBookmark;

package/src/components/ItemList/icons/RemoveBookmark.js

@@ -0,0 +1,33 @@
+import React from 'react';
+
+function RemoveBookmark() {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 29"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg">
+      <title>wishlist-button/remove</title>
+      <g id="Wishlist" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <g id="components" transform="translate(-566, -433)">
+          <g id="Group" transform="translate(566, 433.4118)">
+            <path
+              d="M1.33333333,0 L22.6666667,0 C23.4030667,0 24,0.59696 24,1.33333333 L24,27.0350667 C24,27.4033333 23.7014667,27.7019336 23.3333333,27.7019336 C23.2397333,27.7019336 23.1472,27.682 23.0617333,27.6438667 L12,22.7084 L0.938306667,27.6438667 C0.602066667,27.794 0.20788,27.6429333 0.0578533333,27.3068 C0.0197066667,27.2212 0,27.1286667 0,27.0350667 L0,1.33333333 C0,0.59696 0.59696,0 1.33333333,0 Z"
+              id="Shape"
+              fill="currentColor"
+              fillRule="nonzero"
+            />
+            <path
+              d="M8.56311228,6.43978889 C8.18381709,6.06049368 7.6309823,5.91236204 7.11285543,6.05119372 C6.59472855,6.19002539 6.19002539,6.59472855 6.05119372,7.11285543 C5.91236204,7.6309823 6.06049368,8.18381709 6.43978889,8.56311228 L9.87969275,12.0000171 L6.43978889,15.4369219 C6.06049368,15.8162171 5.91236204,16.3690519 6.05119372,16.8871788 C6.19002539,17.4053057 6.59472855,17.8100088 7.11285543,17.9488405 C7.6309823,18.0876722 8.18381709,17.9395405 8.56311228,17.5602453 L12.0000171,14.1203415 L15.4369219,17.5602453 C16.0232615,18.1465849 16.9739058,18.1465849 17.5602453,17.5602453 C18.1465849,16.9739058 18.1465849,16.0232615 17.5602453,15.4369219 L14.1203415,12.0000171 L17.5602453,8.56311228 C18.1465849,7.97677272 18.1465849,7.02612845 17.5602453,6.43978889 C16.9739058,5.85344932 16.0232615,5.85344932 15.4369219,6.43978889 L12.0000171,9.87969275 L8.56311228,6.43978889 Z"
+              id="Path"
+              fill="#FFFFFF"
+            />
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export default RemoveBookmark;

package/src/components/ItemList/icons/index.js

@@ -0,0 +1,4 @@
+export { default as AddedBookmark } from './AddedBookmark';
+export { default as BaseBookmark } from './BaseBookmark';
+export { default as HoverBookmark } from './HoverBookmark';
+export { default as RemoveBookmark } from './RemoveBookmark';

package/src/components/List/ListFactory.js

@@ -31,6 +31,8 @@ import { getItemListId, getItemListIds } from '../ItemList/helpers';
 import { useGetEntitySchemasAsObj } from '../../hooks';
 import { AND_OPERATOR, TEXT_SEARCH, ID, AND, FULL } from '../../constants';
 
+export const VariantContext = React.createContext(null);
+
 const ListFactory = props => {
   const {
     entity: legacyEntity,
@@ -46,7 +48,8 @@ const ListFactory = props => {
     allSearchFilters,
     operator: filterOperator,
     sortProperties,
-    itemListName
+    itemListName,
+    VariantComponent // extracted from props
   } = props;
   const { isPreview } = useContext(MainContext);
   const router = useRouter();
@@ -175,7 +178,11 @@ const ListFactory = props => {
     mainSchemas
   };
 
-  return <ListBuilder {...listProps} />;
+  return (
+    <VariantContext.Provider value={VariantComponent}>
+      <ListBuilder {...listProps} />
+    </VariantContext.Provider>
+  );
 };
 
 ListFactory.propTypes = {
@@ -192,7 +199,8 @@ ListFactory.propTypes = {
   sort: PropTypes.string,
   allSearchFilters: PropTypes.array,
   sortProperties: PropTypes.array,
-  itemListName: PropTypes.string
+  itemListName: PropTypes.string,
+  VariantComponent: PropTypes.func
 };
 
 ListFactory.defaultProps = {
@@ -207,7 +215,8 @@ ListFactory.defaultProps = {
   sort: '',
   operator: AND,
   allSearchFilters: [],
-  itemListName: ''
+  itemListName: '',
+  VariantComponent: null
 };
 
 export default ListFactory;

package/src/components/List/components/Full/FullRenderItem.js

@@ -2,35 +2,56 @@ import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { Waypoint } from 'react-waypoint';
 import { MainContext } from '@blaze-cms/nextjs-components';
+import { VariantContext } from '../../ListFactory';
 import BuildPBComponents from '../../../../hooks/helpers/buildPBComponents';
 import Banner from '../../../Banner';
 import { parsePropsToDisplay, shouldRenderWaypoint } from '../../../../helpers';
 
-const FullRenderItem = ({
-  isInfinite,
-  pageBuilderComponents,
-  entityProps,
-  propsToDisplay,
-  entity,
-  index,
-  itemId,
-  listTotal,
-  initialOffset,
-  currentListLength,
-  triggerInfiniteScroll,
-  parent,
-  pageBuilderID,
-  displayCount,
-  shouldRenderBanner,
-  bannerProps,
-  bannerIndex
-}) => {
+const FullRenderItem = props => {
+  const {
+    isInfinite,
+    pageBuilderComponents,
+    entityProps,
+    propsToDisplay,
+    entity,
+    index,
+    itemId,
+    listTotal,
+    initialOffset,
+    currentListLength,
+    triggerInfiniteScroll,
+    parent,
+    pageBuilderID,
+    displayCount,
+    shouldRenderBanner,
+    bannerProps,
+    bannerIndex
+  } = props;
   const { hasGTM } = useContext(MainContext);
+  const VariantComponent = useContext(VariantContext);
+
   if (!pageBuilderComponents) return null;
   const parsedPropsToDisplay = parsePropsToDisplay(entityProps, propsToDisplay);
   const currentItemIndex = initialOffset + index;
   const renderWaypoint =
     isInfinite && shouldRenderWaypoint(index, currentListLength, currentItemIndex, listTotal);
+
+  const defaultContent = (
+    <>
+      <div className="list__item list__item--full">
+        {BuildPBComponents(pageBuilderComponents, {
+          parent: { ...parent, itemId, itemEntity: entity },
+          hasGTM,
+          pageBuilderID
+        })}
+      </div>
+      {!VariantComponent &&
+        !!parsedPropsToDisplay.length && (
+          <>{parsedPropsToDisplay.map(prop => (prop ? <span key={prop}>{prop}</span> : null))}</>
+        )}
+    </>
+  );
+
   return (
     <>
       {renderWaypoint && <Waypoint onEnter={triggerInfiniteScroll} />}
@@ -40,16 +61,12 @@ const FullRenderItem = ({
           <span className="section-total">/{listTotal}</span>
         </div>
       )}
-      <div className="list__item list__item--full">
-        {BuildPBComponents(pageBuilderComponents, {
-          parent: { ...parent, itemId, itemEntity: entity },
-          hasGTM,
-          pageBuilderID
-        })}
-      </div>
-      {!!parsedPropsToDisplay.length && (
-        <>{parsedPropsToDisplay.map(prop => (prop ? <span key={prop}>{prop}</span> : null))}</>
+      {VariantComponent ? (
+        <VariantComponent {...props}>{defaultContent}</VariantComponent>
+      ) : (
+        defaultContent
       )}
+
       {shouldRenderBanner && <Banner {...bannerProps} renderCounter={bannerIndex} />}
     </>
   );

package/src/helpers/build-props-query.js

@@ -79,7 +79,7 @@ const getTypeBaseProps = (entitySchema, cardOptions, extraPropsHaveCategory) =>
 
   const { interfaces, properties, dynamicProperties, relations } = entitySchema;
 
-  const isContent = !!interfaces.includes('content/content');
+  const isContent = !!interfaces.includes('content/content-base');
   const hasCategory = checkProps(properties) || checkProps(dynamicProperties);
   const hasPreheader = properties[PREHEADER_PROP];
 
@@ -97,7 +97,8 @@ const getTypeBaseProps = (entitySchema, cardOptions, extraPropsHaveCategory) =>
   return { typeBasedProps, shouldAddCategoryProps };
 };
 
-const getContentProps = isContent => (isContent ? ['url', 'sponsored', 'featured'] : []);
+// make sure all props are supported by content/content-base interface
+const getContentProps = isContent => (isContent ? ['url', 'sponsored', 'featured', 'live'] : []);
 
 const getCategoyProps = (shouldAddCategoryProps, hasCategory, hasPreheader) => {
   if (!shouldAddCategoryProps) return [];

package/src/index.js

@@ -13,7 +13,8 @@ export {
   generateMultiItemQuery,
   getEntitySchema,
   getSingleEntitySchema,
-  getUser
+  getUser,
+  getCurrentUser
 } from './application/query';
 export {
   getInheritedFilters,