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

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,

package/src/variants/LiveBlogList/LiveBlogList.js

@@ -0,0 +1,109 @@
+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 (
+    <div className={className}>
+      {usedDate && (
+        <div className="live-blog-date">
+          {featured && <BsPinAngleFill />}
+          <span className="live-blog-date--date">{displayedDate}</span>
+          <span className="live-blog-date--time">{displayedTime}</span>
+        </div>
+      )}
+
+      <div
+        ref={contentRef}
+        className={`live-blog-content ${
+          isCollapsed ? 'live-blog-content--collapsed' : 'live-blog-content--opened'
+        }`}>
+        {children}
+      </div>
+
+      {shouldShowButton && (
+        <div className="live-blog-button-wrapper">
+          <Button className="live-blog-toggle" onClick={toggleExpanded} type="button">
+            {isExpanded ? (
+              <>
+                <FaMinus className="toggle-icon" /> Show Less
+              </>
+            ) : (
+              <>
+                <FaPlus className="toggle-icon" /> Show More
+              </>
+            )}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default LiveBlogList;

package/src/variants/LiveBlogList/index.js

@@ -0,0 +1,13 @@
+import dynamic from 'next/dynamic';
+
+const liveBlogList = {
+  VariantComponent: dynamic(() =>
+    import(/* webpackChunkName: "blazePbliveBlogList" */ './LiveBlogList')
+  ),
+  getSettings: componentSettings => ({
+    ...componentSettings,
+    modifier: 'liveBlogList'
+  })
+};
+
+export default liveBlogList;

package/src/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,
@@ -15,5 +16,6 @@ export default {
   parallaxImageTextRight,
   thumbnailCarousel,
   slideSummary,
-  floatingSideButton
+  floatingSideButton,
+  liveBlogList
 };

package/tests/unit/src/components/ItemList/__snapshots__/ItemListButton.test.js.snap

@@ -3,24 +3,50 @@
 exports[`ItemListButton component should add and remove item to the list on click 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Add to list_name"
     class="item-list-button item-list-button--selected modifier"
     role="button"
+    tabindex="0"
   >
     <i>
       <svg
-        fill="currentColor"
         height="1em"
-        stroke="currentColor"
-        stroke-width="0"
-        viewBox="0 0 16 16"
+        version="1.1"
+        viewBox="0 0 24 29"
         width="1em"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <path
-          d="M2 15.5V2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.74.439L8 13.069l-5.26 2.87A.5.5 0 0 1 2 15.5zm8.854-9.646a.5.5 0 0 0-.708-.708L7.5 7.793 6.354 6.646a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0l3-3z"
+        <title>
+          wishlist-button/added
+        </title>
+        <g
+          fill="none"
           fill-rule="evenodd"
-        />
+          id="Wishlist"
+          stroke="none"
+          stroke-width="1"
+        >
+          <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"
+                fill="currentColor"
+                fill-rule="nonzero"
+                id="Shape"
+              />
+              <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"
+                fill="#FFFFFF"
+                id="Path"
+              />
+            </g>
+          </g>
+        </g>
       </svg>
     </i>
   </div>
@@ -30,24 +56,50 @@ exports[`ItemListButton component should add and remove item to the list on clic
 exports[`ItemListButton component should add and remove item to the list on click 2`] = `
 <DocumentFragment>
   <div
-    aria-label="Add to list_name"
     class="item-list-button item-list-button--selected modifier"
     role="button"
+    tabindex="0"
   >
     <i>
       <svg
-        fill="currentColor"
         height="1em"
-        stroke="currentColor"
-        stroke-width="0"
-        viewBox="0 0 16 16"
+        version="1.1"
+        viewBox="0 0 24 29"
         width="1em"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <path
-          d="M2 15.5V2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.74.439L8 13.069l-5.26 2.87A.5.5 0 0 1 2 15.5zm8.854-9.646a.5.5 0 0 0-.708-.708L7.5 7.793 6.354 6.646a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0l3-3z"
+        <title>
+          wishlist-button/added
+        </title>
+        <g
+          fill="none"
           fill-rule="evenodd"
-        />
+          id="Wishlist"
+          stroke="none"
+          stroke-width="1"
+        >
+          <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"
+                fill="currentColor"
+                fill-rule="nonzero"
+                id="Shape"
+              />
+              <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"
+                fill="#FFFFFF"
+                id="Path"
+              />
+            </g>
+          </g>
+        </g>
       </svg>
     </i>
   </div>
@@ -57,24 +109,50 @@ exports[`ItemListButton component should add and remove item to the list on clic
 exports[`ItemListButton component should render button marked selected when current parent is in the list 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Add to list_name"
     class="item-list-button item-list-button--selected modifier"
     role="button"
+    tabindex="0"
   >
     <i>
       <svg
-        fill="currentColor"
         height="1em"
-        stroke="currentColor"
-        stroke-width="0"
-        viewBox="0 0 16 16"
+        version="1.1"
+        viewBox="0 0 24 29"
         width="1em"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <path
-          d="M2 15.5V2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.74.439L8 13.069l-5.26 2.87A.5.5 0 0 1 2 15.5zm8.854-9.646a.5.5 0 0 0-.708-.708L7.5 7.793 6.354 6.646a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0l3-3z"
+        <title>
+          wishlist-button/added
+        </title>
+        <g
+          fill="none"
           fill-rule="evenodd"
-        />
+          id="Wishlist"
+          stroke="none"
+          stroke-width="1"
+        >
+          <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"
+                fill="currentColor"
+                fill-rule="nonzero"
+                id="Shape"
+              />
+              <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"
+                fill="#FFFFFF"
+                id="Path"
+              />
+            </g>
+          </g>
+        </g>
       </svg>
     </i>
   </div>
@@ -84,26 +162,56 @@ exports[`ItemListButton component should render button marked selected when curr
 exports[`ItemListButton component should render button not marked selected when current parent is not in the list 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Add to list_name"
     class="item-list-button modifier"
     role="button"
+    tabindex="0"
   >
     <i>
       <svg
-        fill="currentColor"
         height="1em"
-        stroke="currentColor"
-        stroke-width="0"
-        viewBox="0 0 16 16"
+        version="1.1"
+        viewBox="0 0 26 30"
         width="1em"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <path
-          d="M7.84 4.1a.178.178 0 0 1 .32 0l.634 1.285a.178.178 0 0 0 .134.098l1.42.206c.145.021.204.2.098.303L9.42 6.993a.178.178 0 0 0-.051.158l.242 1.414a.178.178 0 0 1-.258.187l-1.27-.668a.178.178 0 0 0-.165 0l-1.27.668a.178.178 0 0 1-.257-.187l.242-1.414a.178.178 0 0 0-.05-.158l-1.03-1.001a.178.178 0 0 1 .098-.303l1.42-.206a.178.178 0 0 0 .134-.098L7.84 4.1z"
-        />
-        <path
-          d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z"
-        />
+        <title>
+          wishlist-button/base
+        </title>
+        <g
+          fill="none"
+          fill-rule="evenodd"
+          id="Wishlist"
+          stroke="none"
+          stroke-width="1"
+        >
+          <g
+            fill-rule="nonzero"
+            id="components"
+            transform="translate(-416, -236)"
+          >
+            <g
+              id="wishlist-button/base"
+              transform="translate(417, 237)"
+            >
+              <g
+                fill="#FFFFFF"
+                id="Group"
+                stroke="currentColor"
+                stroke-width="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"
+                fill="currentColor"
+                id="Path"
+              />
+            </g>
+          </g>
+        </g>
       </svg>
     </i>
   </div>

package/tests/unit/src/components/ItemList/__snapshots__/ItemListCounter.test.js.snap

@@ -9,18 +9,48 @@ exports[`ItemListCounter component should display listItem count and route to ur
     type="button"
   >
     <svg
-      fill="currentColor"
       height="1em"
-      stroke="currentColor"
-      stroke-width="0"
-      viewBox="0 0 16 16"
+      version="1.1"
+      viewBox="0 0 24 29"
       width="1em"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path
-        d="M2 15.5V2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.74.439L8 13.069l-5.26 2.87A.5.5 0 0 1 2 15.5zM8.16 4.1a.178.178 0 0 0-.32 0l-.634 1.285a.178.178 0 0 1-.134.098l-1.42.206a.178.178 0 0 0-.098.303L6.58 6.993c.042.041.061.1.051.158L6.39 8.565a.178.178 0 0 0 .258.187l1.27-.668a.178.178 0 0 1 .165 0l1.27.668a.178.178 0 0 0 .257-.187L9.368 7.15a.178.178 0 0 1 .05-.158l1.028-1.001a.178.178 0 0 0-.098-.303l-1.42-.206a.178.178 0 0 1-.134-.098L8.16 4.1z"
+      <title>
+        wishlist-button/hover
+      </title>
+      <g
+        fill="none"
         fill-rule="evenodd"
-      />
+        id="Wishlist"
+        stroke="none"
+        stroke-width="1"
+      >
+        <g
+          fill-rule="nonzero"
+          id="components"
+          transform="translate(-566, -237)"
+        >
+          <g
+            id="wishlist-button/hover"
+            transform="translate(566, 237.3529)"
+          >
+            <g
+              fill="currentColor"
+              id="Group"
+            >
+              <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"
+              fill="#FFFFFF"
+              id="Path"
+            />
+          </g>
+        </g>
+      </g>
     </svg>
     <span
       class="item-list-counter__badge"