@blaze-cms/react-page-builder 0.124.0-alpha.21 → 0.124.0-alpha.24

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.124.0-alpha.24](https://byte9/thebyte9/blaze/compare/v0.124.0-alpha.23...v0.124.0-alpha.24) (2022-05-24)
+
+**Note:** Version bump only for package @blaze-cms/react-page-builder
+
+
+
+
+
+# [0.124.0-alpha.23](https://byte9/thebyte9/blaze/compare/v0.124.0-alpha.22...v0.124.0-alpha.23) (2022-05-24)
+
+**Note:** Version bump only for package @blaze-cms/react-page-builder
+
+
+
+
+
+# [0.124.0-alpha.22](https://byte9/thebyte9/blaze/compare/v0.124.0-alpha.21...v0.124.0-alpha.22) (2022-05-24)
+
+**Note:** Version bump only for package @blaze-cms/react-page-builder
+
+
+
+
+
 # [0.124.0-alpha.21](https://byte9/thebyte9/blaze/compare/v0.124.0-alpha.20...v0.124.0-alpha.21) (2022-05-24)
 
 **Note:** Version bump only for package @blaze-cms/react-page-builder

package/lib/components/Card/CardContainer.js

@@ -164,8 +164,7 @@ CardContainer.propTypes = {
   enableOverlay: _propTypes["default"].bool,
   overlayModifier: _propTypes["default"].string,
   titleOverlayModifier: _propTypes["default"].string,
-  autoScrollTimer: _propTypes["default"].number,
-  arrowSize: _propTypes["default"].string
+  autoScrollTimer: _propTypes["default"].number
 };
 CardContainer.defaultProps = {
   gtmChildren: [],

package/lib/components/Card/CardContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardContainer.js","names":["CardContainer","cardData","gridModifier","style","displayCategory","displayThumbnail","displayTitle","modifier","entity","propsToDisplay","gtmChildren","cardChildren","name","designConfig","itemsPerRow","enableCarousel","bannerModifier","priorityLimit","enableAutoScroll","enableOverlay","autoScrollTimer","overlayModifier","titleOverlayModifier","cardProps","entities","MainContext","itemId","propsToDisplayModifiers","dynamicWrapperSizes","cardBannerIndex","CardWrapper","CarouselWrapper","Wrapper","map","index","baseAdunit","id","entityProps","extraProps","dynamicKey","join","priority","propTypes","PropTypes","array","isRequired","string","oneOfType","arrayOf","node","bool","object","number","arrowSize","defaultProps"],"sources":["../../../src/components/Card/CardContainer.js"],"sourcesContent":["import React, { useContext } from 'react';\nimport PropTypes from 'prop-types';\nimport { MainContext } from '@blaze-cms/nextjs-components';\nimport { withTitle } from '../../HOC';\nimport Banner from '../Banner';\nimport Wrapper from '../Wrapper';\nimport CarouselWrapper from '../CarouselWrapper';\nimport Card from './Card';\nimport { getDynamicGridClasses } from './helpers';\nimport { getEntitiesWithBanner, parsePropsToDisplay } from '../../helpers';\nimport { getPropsToDisplayModifiers } from '../../utils';\n\nconst CardContainer = ({\n  cardData,\n  gridModifier,\n  style,\n  displayCategory,\n  displayThumbnail,\n  displayTitle,\n  modifier,\n  entity,\n  propsToDisplay,\n  gtmChildren,\n  cardChildren,\n  name,\n  designConfig,\n  itemsPerRow,\n  enableCarousel,\n  bannerModifier,\n  priorityLimit,\n  enableAutoScroll,\n  enableOverlay,\n  autoScrollTimer,\n  overlayModifier,\n  titleOverlayModifier,\n  ...cardProps\n}) => {\n  const entities = getEntitiesWithBanner(cardData, cardProps);\n  const { itemId } = useContext(MainContext);\n  const propsToDisplayModifiers = getPropsToDisplayModifiers(propsToDisplay);\n  const dynamicWrapperSizes = enableCarousel\n    ? ''\n    : getDynamicGridClasses('grid', itemsPerRow, designConfig);\n  let cardBannerIndex = 0;\n  const CardWrapper = enableCarousel ? CarouselWrapper : Wrapper;\n\n  return (\n    <CardWrapper\n      className={dynamicWrapperSizes}\n      modifiers={gridModifier}\n      itemsPerRow={itemsPerRow}\n      bannerModifier={bannerModifier}\n      enableAutoScroll={enableAutoScroll}\n      autoScrollTimer={autoScrollTimer}>\n      {entities.map(({ baseAdunit, id, ...entityProps }, index) => {\n        const extraProps = parsePropsToDisplay(entityProps, propsToDisplay);\n        const dynamicKey = [itemId, index].join('-');\n        if (baseAdunit) cardBannerIndex += 1;\n\n        const priority = priorityLimit > 0 && index + 1 <= priorityLimit;\n\n        return baseAdunit ? (\n          <Banner\n            key={dynamicKey}\n            entity={entity}\n            baseAdunit={baseAdunit}\n            {...entityProps}\n            modifier={modifier}\n            cardBannerIndex={cardBannerIndex}\n          />\n        ) : (\n          <Card\n            key={id}\n            id={id}\n            enableCarousel={enableCarousel}\n            entity={entity}\n            propsToDisplay={extraProps}\n            propsToDisplayModifiers={propsToDisplayModifiers}\n            modifier={modifier}\n            style={style}\n            cardChildren={cardChildren}\n            gtmChildren={gtmChildren}\n            gtmId={name}\n            gridModifier={gridModifier}\n            entityProps={entityProps}\n            displayCategory={displayCategory}\n            displayThumbnail={displayThumbnail}\n            displayTitle={displayTitle}\n            priority={priority}\n            enableOverlay={enableOverlay}\n            overlayModifier={overlayModifier}\n            titleOverlayModifier={titleOverlayModifier}\n            {...entityProps}\n          />\n        );\n      })}\n    </CardWrapper>\n  );\n};\n\nCardContainer.propTypes = {\n  cardData: PropTypes.array.isRequired,\n  name: PropTypes.string,\n  entity: PropTypes.string.isRequired,\n  gridModifier: PropTypes.string,\n  gtmChildren: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),\n  cardChildren: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),\n  propsToDisplay: PropTypes.array,\n  displayCategory: PropTypes.bool,\n  displayThumbnail: PropTypes.bool,\n  displayTitle: PropTypes.bool,\n  modifier: PropTypes.string,\n  style: PropTypes.string,\n  designConfig: PropTypes.object,\n  itemsPerRow: PropTypes.number,\n  enableCarousel: PropTypes.bool,\n  bannerModifier: PropTypes.string,\n  priorityLimit: PropTypes.number,\n  enableAutoScroll: PropTypes.bool,\n  enableOverlay: PropTypes.bool,\n  overlayModifier: PropTypes.string,\n  titleOverlayModifier: PropTypes.string,\n  autoScrollTimer: PropTypes.number,\n  arrowSize: PropTypes.string\n};\n\nCardContainer.defaultProps = {\n  gtmChildren: [],\n  cardChildren: [],\n  name: '',\n  gridModifier: '',\n  propsToDisplay: [],\n  displayCategory: true,\n  displayThumbnail: true,\n  displayTitle: true,\n  modifier: '',\n  style: 'portrait',\n  designConfig: {},\n  itemsPerRow: 1,\n  enableCarousel: false,\n  bannerModifier: '',\n  priorityLimit: 0,\n  enableAutoScroll: false,\n  enableOverlay: false,\n  autoScrollTimer: 0,\n  overlayModifier: '',\n  titleOverlayModifier: '',\n};\n\nexport default withTitle(CardContainer);\n"],"mappings":"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"}
+{"version":3,"file":"CardContainer.js","names":["CardContainer","cardData","gridModifier","style","displayCategory","displayThumbnail","displayTitle","modifier","entity","propsToDisplay","gtmChildren","cardChildren","name","designConfig","itemsPerRow","enableCarousel","bannerModifier","priorityLimit","enableAutoScroll","enableOverlay","autoScrollTimer","overlayModifier","titleOverlayModifier","cardProps","entities","MainContext","itemId","propsToDisplayModifiers","dynamicWrapperSizes","cardBannerIndex","CardWrapper","CarouselWrapper","Wrapper","map","index","baseAdunit","id","entityProps","extraProps","dynamicKey","join","priority","propTypes","PropTypes","array","isRequired","string","oneOfType","arrayOf","node","bool","object","number","defaultProps"],"sources":["../../../src/components/Card/CardContainer.js"],"sourcesContent":["import React, { useContext } from 'react';\nimport PropTypes from 'prop-types';\nimport { MainContext } from '@blaze-cms/nextjs-components';\nimport { withTitle } from '../../HOC';\nimport Banner from '../Banner';\nimport Wrapper from '../Wrapper';\nimport CarouselWrapper from '../CarouselWrapper';\nimport Card from './Card';\nimport { getDynamicGridClasses } from './helpers';\nimport { getEntitiesWithBanner, parsePropsToDisplay } from '../../helpers';\nimport { getPropsToDisplayModifiers } from '../../utils';\n\nconst CardContainer = ({\n  cardData,\n  gridModifier,\n  style,\n  displayCategory,\n  displayThumbnail,\n  displayTitle,\n  modifier,\n  entity,\n  propsToDisplay,\n  gtmChildren,\n  cardChildren,\n  name,\n  designConfig,\n  itemsPerRow,\n  enableCarousel,\n  bannerModifier,\n  priorityLimit,\n  enableAutoScroll,\n  enableOverlay,\n  autoScrollTimer,\n  overlayModifier,\n  titleOverlayModifier,\n  ...cardProps\n}) => {\n  const entities = getEntitiesWithBanner(cardData, cardProps);\n  const { itemId } = useContext(MainContext);\n  const propsToDisplayModifiers = getPropsToDisplayModifiers(propsToDisplay);\n  const dynamicWrapperSizes = enableCarousel\n    ? ''\n    : getDynamicGridClasses('grid', itemsPerRow, designConfig);\n  let cardBannerIndex = 0;\n  const CardWrapper = enableCarousel ? CarouselWrapper : Wrapper;\n\n  return (\n    <CardWrapper\n      className={dynamicWrapperSizes}\n      modifiers={gridModifier}\n      itemsPerRow={itemsPerRow}\n      bannerModifier={bannerModifier}\n      enableAutoScroll={enableAutoScroll}\n      autoScrollTimer={autoScrollTimer}>\n      {entities.map(({ baseAdunit, id, ...entityProps }, index) => {\n        const extraProps = parsePropsToDisplay(entityProps, propsToDisplay);\n        const dynamicKey = [itemId, index].join('-');\n        if (baseAdunit) cardBannerIndex += 1;\n\n        const priority = priorityLimit > 0 && index + 1 <= priorityLimit;\n\n        return baseAdunit ? (\n          <Banner\n            key={dynamicKey}\n            entity={entity}\n            baseAdunit={baseAdunit}\n            {...entityProps}\n            modifier={modifier}\n            cardBannerIndex={cardBannerIndex}\n          />\n        ) : (\n          <Card\n            key={id}\n            id={id}\n            enableCarousel={enableCarousel}\n            entity={entity}\n            propsToDisplay={extraProps}\n            propsToDisplayModifiers={propsToDisplayModifiers}\n            modifier={modifier}\n            style={style}\n            cardChildren={cardChildren}\n            gtmChildren={gtmChildren}\n            gtmId={name}\n            gridModifier={gridModifier}\n            entityProps={entityProps}\n            displayCategory={displayCategory}\n            displayThumbnail={displayThumbnail}\n            displayTitle={displayTitle}\n            priority={priority}\n            enableOverlay={enableOverlay}\n            overlayModifier={overlayModifier}\n            titleOverlayModifier={titleOverlayModifier}\n            {...entityProps}\n          />\n        );\n      })}\n    </CardWrapper>\n  );\n};\n\nCardContainer.propTypes = {\n  cardData: PropTypes.array.isRequired,\n  name: PropTypes.string,\n  entity: PropTypes.string.isRequired,\n  gridModifier: PropTypes.string,\n  gtmChildren: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),\n  cardChildren: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),\n  propsToDisplay: PropTypes.array,\n  displayCategory: PropTypes.bool,\n  displayThumbnail: PropTypes.bool,\n  displayTitle: PropTypes.bool,\n  modifier: PropTypes.string,\n  style: PropTypes.string,\n  designConfig: PropTypes.object,\n  itemsPerRow: PropTypes.number,\n  enableCarousel: PropTypes.bool,\n  bannerModifier: PropTypes.string,\n  priorityLimit: PropTypes.number,\n  enableAutoScroll: PropTypes.bool,\n  enableOverlay: PropTypes.bool,\n  overlayModifier: PropTypes.string,\n  titleOverlayModifier: PropTypes.string,\n  autoScrollTimer: PropTypes.number\n};\n\nCardContainer.defaultProps = {\n  gtmChildren: [],\n  cardChildren: [],\n  name: '',\n  gridModifier: '',\n  propsToDisplay: [],\n  displayCategory: true,\n  displayThumbnail: true,\n  displayTitle: true,\n  modifier: '',\n  style: 'portrait',\n  designConfig: {},\n  itemsPerRow: 1,\n  enableCarousel: false,\n  bannerModifier: '',\n  priorityLimit: 0,\n  enableAutoScroll: false,\n  enableOverlay: false,\n  autoScrollTimer: 0,\n  overlayModifier: '',\n  titleOverlayModifier: ''\n};\n\nexport default withTitle(CardContainer);\n"],"mappings":"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"}

package/lib/components/SearchContent/SearchContent.js

@@ -35,6 +35,8 @@ var _pluginSearchUi = require("@blaze-cms/plugin-search-ui");
 
 var _SearchContentResults = _interopRequireDefault(require("./SearchContentResults"));
 
+var _SearchContentToggleIcon = _interopRequireDefault(require("./SearchContentToggleIcon"));
+
 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; }
@@ -60,12 +62,10 @@ var SearchContent = function SearchContent(_ref) {
     initialSearchTerm: '',
     resultKeys: 'id, name, image { url }, url'
   }),
-      loading = _useDebounceSearch.loading,
       results = _useDebounceSearch.results,
       setSearchTerm = _useDebounceSearch.setSearchTerm,
       debouncedSearchTerm = _useDebounceSearch.debouncedSearchTerm;
 
-  if (loading) return null;
   var responsiveClasses = isMobile ? searchInputWrapperMobile : searchInputWrapperDesktop;
 
   var handleClick = function handleClick(e, url) {
@@ -84,6 +84,10 @@ var SearchContent = function SearchContent(_ref) {
     if (!debouncedSearchTerm || debouncedSearchTerm === '') setCollapsed(true);
   };
 
+  var handleClearSearchResults = function handleClearSearchResults() {
+    setSearchTerm('');
+  };
+
   return collapsed ? /*#__PURE__*/_react["default"].createElement("div", {
     className: responsiveClasses
   }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -117,14 +121,10 @@ var SearchContent = function SearchContent(_ref) {
     className: "search-content--expanded__label"
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: "search-content--expanded__icon_wrapper"
-  }, /*#__PURE__*/_react["default"].createElement("svg", {
-    className: "search-content--expanded__icon",
-    viewBox: "0 0 20 20"
-  }, /*#__PURE__*/_react["default"].createElement("path", {
-    fillRule: "evenodd",
-    d: "M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z",
-    clipRule: "evenodd"
-  }))), /*#__PURE__*/_react["default"].createElement("input", {
+  }, /*#__PURE__*/_react["default"].createElement(_SearchContentToggleIcon["default"], {
+    results: results,
+    onClear: handleClearSearchResults
+  })), /*#__PURE__*/_react["default"].createElement("input", {
     type: "text",
     name: "search",
     onChange: function onChange(e) {

package/lib/components/SearchContent/SearchContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchContent.js","names":["SearchContent","entities","searchInputAlignment","searchInputWrapperMobile","searchInputWrapperDesktop","collapsible","isMobile","placeholder","collapsed","setCollapsed","router","initialSearchTerm","resultKeys","loading","results","setSearchTerm","debouncedSearchTerm","responsiveClasses","handleClick","e","url","preventDefault","push","handleKeyPress","key","target","value","handleOnBlur","propTypes","PropTypes","string","bool","array","isRequired","defaultProps"],"sources":["../../../src/components/SearchContent/SearchContent.js"],"sourcesContent":["import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { useRouter } from 'next/router';\nimport { useDebounceSearch } from '@blaze-cms/plugin-search-ui';\nimport SearchContentResults from './SearchContentResults';\n\nconst SearchContent = ({\n  entities,\n  searchInputAlignment,\n  searchInputWrapperMobile,\n  searchInputWrapperDesktop,\n  collapsible,\n  isMobile,\n  placeholder\n}) => {\n  const [collapsed, setCollapsed] = useState(false);\n  const router = useRouter();\n\n  const { loading, results, setSearchTerm, debouncedSearchTerm } = useDebounceSearch({\n    entities,\n    initialSearchTerm: '',\n    resultKeys: 'id, name, image { url }, url'\n  });\n\n  if (loading) return null;\n\n  const responsiveClasses = isMobile ? searchInputWrapperMobile : searchInputWrapperDesktop;\n\n  const handleClick = (e, url) => {\n    e.preventDefault();\n    router.push(url);\n  };\n\n  const handleKeyPress = e => {\n    if (e.key === 'Enter' && e.target.value !== '') {\n      router.push(`/search?search_term=${e.target.value}`);\n    }\n  };\n\n  const handleOnBlur = () => {\n    if (!collapsible) return;\n    if (!debouncedSearchTerm || debouncedSearchTerm === '') setCollapsed(true);\n  };\n\n  return collapsed ? (\n    <div className={responsiveClasses}>\n      <div className=\"search-content--collapse__wrapper\">\n        <label className=\"search-content--collapse__label\">\n          <span className=\"search-content--collapse__icon_wrapper\">\n            <svg className=\"search-content--collapse__icon\" viewBox=\"0 0 20 20\">\n              <path\n                fillRule=\"evenodd\"\n                d=\"M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z\"\n                clipRule=\"evenodd\"\n              />\n            </svg>\n          </span>\n          <input\n            onFocus={() => setCollapsed(false)}\n            onChange={e => setSearchTerm(e.target.value)}\n            type=\"text\"\n            name=\"search\"\n            className=\"search-content--collapse__input\"\n          />\n        </label>\n      </div>\n    </div>\n  ) : (\n    <>\n      <div className={responsiveClasses}>\n        <div className=\"search-content--expanded__wrapper\">\n          <label className=\"search-content--expanded__label\">\n            <span className=\"search-content--expanded__icon_wrapper\">\n              <svg className=\"search-content--expanded__icon\" viewBox=\"0 0 20 20\">\n                <path\n                  fillRule=\"evenodd\"\n                  d=\"M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z\"\n                  clipRule=\"evenodd\"\n                />\n              </svg>\n            </span>\n            <input\n              type=\"text\"\n              name=\"search\"\n              onChange={e => setSearchTerm(e.target.value)}\n              onKeyPress={handleKeyPress}\n              className=\"search-content--expanded__input\"\n              placeholder={placeholder}\n              onBlur={handleOnBlur}\n            />\n          </label>\n        </div>\n        <SearchContentResults\n          results={results}\n          debouncedSearchTerm={debouncedSearchTerm}\n          handleClick={handleClick}\n        />\n      </div>\n    </>\n  );\n};\n\nSearchContent.propTypes = {\n  searchInputAlignment: PropTypes.string,\n  searchInputWrapperMobile: PropTypes.string,\n  searchInputWrapperDesktop: PropTypes.string,\n  placeholder: PropTypes.string,\n  isMobile: PropTypes.bool,\n  collapsible: PropTypes.bool,\n  entities: PropTypes.array.isRequired\n};\n\nSearchContent.defaultProps = {\n  searchInputAlignment: '',\n  searchInputWrapperMobile: '',\n  searchInputWrapperDesktop: '',\n  placeholder: '',\n  isMobile: false,\n  collapsible: false\n};\n\nexport default SearchContent;\n"],"mappings":"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"}
+{"version":3,"file":"SearchContent.js","names":["SearchContent","entities","searchInputAlignment","searchInputWrapperMobile","searchInputWrapperDesktop","collapsible","isMobile","placeholder","collapsed","setCollapsed","router","initialSearchTerm","resultKeys","results","setSearchTerm","debouncedSearchTerm","responsiveClasses","handleClick","e","url","preventDefault","push","handleKeyPress","key","target","value","handleOnBlur","handleClearSearchResults","propTypes","PropTypes","string","bool","array","isRequired","defaultProps"],"sources":["../../../src/components/SearchContent/SearchContent.js"],"sourcesContent":["import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { useRouter } from 'next/router';\nimport { useDebounceSearch } from '@blaze-cms/plugin-search-ui';\nimport SearchContentResults from './SearchContentResults';\nimport SearchContentToggleIcon from './SearchContentToggleIcon';\n\nconst SearchContent = ({\n  entities,\n  searchInputAlignment,\n  searchInputWrapperMobile,\n  searchInputWrapperDesktop,\n  collapsible,\n  isMobile,\n  placeholder\n}) => {\n  const [collapsed, setCollapsed] = useState(false);\n  const router = useRouter();\n\n  const { results, setSearchTerm, debouncedSearchTerm } = useDebounceSearch({\n    entities,\n    initialSearchTerm: '',\n    resultKeys: 'id, name, image { url }, url'\n  });\n\n  const responsiveClasses = isMobile ? searchInputWrapperMobile : searchInputWrapperDesktop;\n\n  const handleClick = (e, url) => {\n    e.preventDefault();\n    router.push(url);\n  };\n\n  const handleKeyPress = e => {\n    if (e.key === 'Enter' && e.target.value !== '') {\n      router.push(`/search?search_term=${e.target.value}`);\n    }\n  };\n\n  const handleOnBlur = () => {\n    if (!collapsible) return;\n    if (!debouncedSearchTerm || debouncedSearchTerm === '') setCollapsed(true);\n  };\n\n  const handleClearSearchResults = () => {\n    setSearchTerm('');\n  };\n\n  return collapsed ? (\n    <div className={responsiveClasses}>\n      <div className=\"search-content--collapse__wrapper\">\n        <label className=\"search-content--collapse__label\">\n          <span className=\"search-content--collapse__icon_wrapper\">\n            <svg className=\"search-content--collapse__icon\" viewBox=\"0 0 20 20\">\n              <path\n                fillRule=\"evenodd\"\n                d=\"M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z\"\n                clipRule=\"evenodd\"\n              />\n            </svg>\n          </span>\n          <input\n            onFocus={() => setCollapsed(false)}\n            onChange={e => setSearchTerm(e.target.value)}\n            type=\"text\"\n            name=\"search\"\n            className=\"search-content--collapse__input\"\n          />\n        </label>\n      </div>\n    </div>\n  ) : (\n    <>\n      <div className={responsiveClasses}>\n        <div className=\"search-content--expanded__wrapper\">\n          <label className=\"search-content--expanded__label\">\n            <span className=\"search-content--expanded__icon_wrapper\">\n              <SearchContentToggleIcon results={results} onClear={handleClearSearchResults} />\n            </span>\n            <input\n              type=\"text\"\n              name=\"search\"\n              onChange={e => setSearchTerm(e.target.value)}\n              onKeyPress={handleKeyPress}\n              className=\"search-content--expanded__input\"\n              placeholder={placeholder}\n              onBlur={handleOnBlur}\n            />\n          </label>\n        </div>\n        <SearchContentResults\n          results={results}\n          debouncedSearchTerm={debouncedSearchTerm}\n          handleClick={handleClick}\n        />\n      </div>\n    </>\n  );\n};\n\nSearchContent.propTypes = {\n  searchInputAlignment: PropTypes.string,\n  searchInputWrapperMobile: PropTypes.string,\n  searchInputWrapperDesktop: PropTypes.string,\n  placeholder: PropTypes.string,\n  isMobile: PropTypes.bool,\n  collapsible: PropTypes.bool,\n  entities: PropTypes.array.isRequired\n};\n\nSearchContent.defaultProps = {\n  searchInputAlignment: '',\n  searchInputWrapperMobile: '',\n  searchInputWrapperDesktop: '',\n  placeholder: '',\n  isMobile: false,\n  collapsible: false\n};\n\nexport default SearchContent;\n"],"mappings":"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"}

package/lib/components/SearchContent/SearchContentToggleIcon.js

@@ -0,0 +1,42 @@
+"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["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var SearchContentToggleIcon = function SearchContentToggleIcon(_ref) {
+  var results = _ref.results,
+      onClear = _ref.onClear;
+
+  if (results && results.length > 0) {
+    return /*#__PURE__*/_react["default"].createElement("svg", {
+      className: "search-content--expanded__icon",
+      viewBox: "0 0 20 20",
+      onClick: onClear
+    }, /*#__PURE__*/_react["default"].createElement("path", {
+      fillRule: "evenodd",
+      d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
+      clipRule: "evenodd"
+    }));
+  }
+
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    className: "search-content--expanded__icon",
+    viewBox: "0 0 20 20"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    fillRule: "evenodd",
+    d: "M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z",
+    clipRule: "evenodd"
+  }));
+};
+
+var _default = SearchContentToggleIcon;
+exports["default"] = _default;
+//# sourceMappingURL=SearchContentToggleIcon.js.map

package/lib/components/SearchContent/SearchContentToggleIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchContentToggleIcon.js","names":["SearchContentToggleIcon","results","onClear","length"],"sources":["../../../src/components/SearchContent/SearchContentToggleIcon.js"],"sourcesContent":["import React from 'react';\n\nconst SearchContentToggleIcon = ({ results, onClear }) => {\n  if (results && results.length > 0) {\n    return (\n      <svg className=\"search-content--expanded__icon\" viewBox=\"0 0 20 20\" onClick={onClear}>\n        <path\n          fillRule=\"evenodd\"\n          d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n          clipRule=\"evenodd\"\n        />\n      </svg>\n    );\n  }\n\n  return (\n    <svg className=\"search-content--expanded__icon\" viewBox=\"0 0 20 20\">\n      <path\n        fillRule=\"evenodd\"\n        d=\"M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  );\n};\n\nexport default SearchContentToggleIcon;\n"],"mappings":";;;;;;;;;;;AAAA;;AAEA,IAAMA,uBAAuB,GAAG,SAA1BA,uBAA0B,OAA0B;EAAA,IAAvBC,OAAuB,QAAvBA,OAAuB;EAAA,IAAdC,OAAc,QAAdA,OAAc;;EACxD,IAAID,OAAO,IAAIA,OAAO,CAACE,MAAR,GAAiB,CAAhC,EAAmC;IACjC,oBACE;MAAK,SAAS,EAAC,gCAAf;MAAgD,OAAO,EAAC,WAAxD;MAAoE,OAAO,EAAED;IAA7E,gBACE;MACE,QAAQ,EAAC,SADX;MAEE,CAAC,EAAC,oMAFJ;MAGE,QAAQ,EAAC;IAHX,EADF,CADF;EASD;;EAED,oBACE;IAAK,SAAS,EAAC,gCAAf;IAAgD,OAAO,EAAC;EAAxD,gBACE;IACE,QAAQ,EAAC,SADX;IAEE,CAAC,EAAC,kHAFJ;IAGE,QAAQ,EAAC;EAHX,EADF,CADF;AASD,CAtBD;;eAwBeF,uB"}

package/lib-es/components/Card/CardContainer.js

@@ -121,8 +121,7 @@ CardContainer.propTypes = {
   enableOverlay: PropTypes.bool,
   overlayModifier: PropTypes.string,
   titleOverlayModifier: PropTypes.string,
-  autoScrollTimer: PropTypes.number,
-  arrowSize: PropTypes.string
+  autoScrollTimer: PropTypes.number
 };
 CardContainer.defaultProps = {
   gtmChildren: [],

package/lib-es/components/Card/CardContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardContainer.js","names":["React","useContext","PropTypes","MainContext","withTitle","Banner","Wrapper","CarouselWrapper","Card","getDynamicGridClasses","getEntitiesWithBanner","parsePropsToDisplay","getPropsToDisplayModifiers","CardContainer","cardData","gridModifier","style","displayCategory","displayThumbnail","displayTitle","modifier","entity","propsToDisplay","gtmChildren","cardChildren","name","designConfig","itemsPerRow","enableCarousel","bannerModifier","priorityLimit","enableAutoScroll","enableOverlay","autoScrollTimer","overlayModifier","titleOverlayModifier","cardProps","entities","itemId","propsToDisplayModifiers","dynamicWrapperSizes","cardBannerIndex","CardWrapper","map","index","baseAdunit","id","entityProps","extraProps","dynamicKey","join","priority","propTypes","array","isRequired","string","oneOfType","arrayOf","node","bool","object","number","arrowSize","defaultProps"],"sources":["../../../src/components/Card/CardContainer.js"],"sourcesContent":["import React, { useContext } from 'react';\nimport PropTypes from 'prop-types';\nimport { MainContext } from '@blaze-cms/nextjs-components';\nimport { withTitle } from '../../HOC';\nimport Banner from '../Banner';\nimport Wrapper from '../Wrapper';\nimport CarouselWrapper from '../CarouselWrapper';\nimport Card from './Card';\nimport { getDynamicGridClasses } from './helpers';\nimport { getEntitiesWithBanner, parsePropsToDisplay } from '../../helpers';\nimport { getPropsToDisplayModifiers } from '../../utils';\n\nconst CardContainer = ({\n  cardData,\n  gridModifier,\n  style,\n  displayCategory,\n  displayThumbnail,\n  displayTitle,\n  modifier,\n  entity,\n  propsToDisplay,\n  gtmChildren,\n  cardChildren,\n  name,\n  designConfig,\n  itemsPerRow,\n  enableCarousel,\n  bannerModifier,\n  priorityLimit,\n  enableAutoScroll,\n  enableOverlay,\n  autoScrollTimer,\n  overlayModifier,\n  titleOverlayModifier,\n  ...cardProps\n}) => {\n  const entities = getEntitiesWithBanner(cardData, cardProps);\n  const { itemId } = useContext(MainContext);\n  const propsToDisplayModifiers = getPropsToDisplayModifiers(propsToDisplay);\n  const dynamicWrapperSizes = enableCarousel\n    ? ''\n    : getDynamicGridClasses('grid', itemsPerRow, designConfig);\n  let cardBannerIndex = 0;\n  const CardWrapper = enableCarousel ? CarouselWrapper : Wrapper;\n\n  return (\n    <CardWrapper\n      className={dynamicWrapperSizes}\n      modifiers={gridModifier}\n      itemsPerRow={itemsPerRow}\n      bannerModifier={bannerModifier}\n      enableAutoScroll={enableAutoScroll}\n      autoScrollTimer={autoScrollTimer}>\n      {entities.map(({ baseAdunit, id, ...entityProps }, index) => {\n        const extraProps = parsePropsToDisplay(entityProps, propsToDisplay);\n        const dynamicKey = [itemId, index].join('-');\n        if (baseAdunit) cardBannerIndex += 1;\n\n        const priority = priorityLimit > 0 && index + 1 <= priorityLimit;\n\n        return baseAdunit ? (\n          <Banner\n            key={dynamicKey}\n            entity={entity}\n            baseAdunit={baseAdunit}\n            {...entityProps}\n            modifier={modifier}\n            cardBannerIndex={cardBannerIndex}\n          />\n        ) : (\n          <Card\n            key={id}\n            id={id}\n            enableCarousel={enableCarousel}\n            entity={entity}\n            propsToDisplay={extraProps}\n            propsToDisplayModifiers={propsToDisplayModifiers}\n            modifier={modifier}\n            style={style}\n            cardChildren={cardChildren}\n            gtmChildren={gtmChildren}\n            gtmId={name}\n            gridModifier={gridModifier}\n            entityProps={entityProps}\n            displayCategory={displayCategory}\n            displayThumbnail={displayThumbnail}\n            displayTitle={displayTitle}\n            priority={priority}\n            enableOverlay={enableOverlay}\n            overlayModifier={overlayModifier}\n            titleOverlayModifier={titleOverlayModifier}\n            {...entityProps}\n          />\n        );\n      })}\n    </CardWrapper>\n  );\n};\n\nCardContainer.propTypes = {\n  cardData: PropTypes.array.isRequired,\n  name: PropTypes.string,\n  entity: PropTypes.string.isRequired,\n  gridModifier: PropTypes.string,\n  gtmChildren: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),\n  cardChildren: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),\n  propsToDisplay: PropTypes.array,\n  displayCategory: PropTypes.bool,\n  displayThumbnail: PropTypes.bool,\n  displayTitle: PropTypes.bool,\n  modifier: PropTypes.string,\n  style: PropTypes.string,\n  designConfig: PropTypes.object,\n  itemsPerRow: PropTypes.number,\n  enableCarousel: PropTypes.bool,\n  bannerModifier: PropTypes.string,\n  priorityLimit: PropTypes.number,\n  enableAutoScroll: PropTypes.bool,\n  enableOverlay: PropTypes.bool,\n  overlayModifier: PropTypes.string,\n  titleOverlayModifier: PropTypes.string,\n  autoScrollTimer: PropTypes.number,\n  arrowSize: PropTypes.string\n};\n\nCardContainer.defaultProps = {\n  gtmChildren: [],\n  cardChildren: [],\n  name: '',\n  gridModifier: '',\n  propsToDisplay: [],\n  displayCategory: true,\n  displayThumbnail: true,\n  displayTitle: true,\n  modifier: '',\n  style: 'portrait',\n  designConfig: {},\n  itemsPerRow: 1,\n  enableCarousel: false,\n  bannerModifier: '',\n  priorityLimit: 0,\n  enableAutoScroll: false,\n  enableOverlay: false,\n  autoScrollTimer: 0,\n  overlayModifier: '',\n  titleOverlayModifier: '',\n};\n\nexport default withTitle(CardContainer);\n"],"mappings":";;;;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,SAASC,WAAT,QAA4B,8BAA5B;AACA,SAASC,SAAT,QAA0B,WAA1B;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,OAAP,MAAoB,YAApB;AACA,OAAOC,eAAP,MAA4B,oBAA5B;AACA,OAAOC,IAAP,MAAiB,QAAjB;AACA,SAASC,qBAAT,QAAsC,WAAtC;AACA,SAASC,qBAAT,EAAgCC,mBAAhC,QAA2D,eAA3D;AACA,SAASC,0BAAT,QAA2C,aAA3C;;AAEA,MAAMC,aAAa,GAAG,QAwBhB;EAAA,IAxBiB;IACrBC,QADqB;IAErBC,YAFqB;IAGrBC,KAHqB;IAIrBC,eAJqB;IAKrBC,gBALqB;IAMrBC,YANqB;IAOrBC,QAPqB;IAQrBC,MARqB;IASrBC,cATqB;IAUrBC,WAVqB;IAWrBC,YAXqB;IAYrBC,IAZqB;IAarBC,YAbqB;IAcrBC,WAdqB;IAerBC,cAfqB;IAgBrBC,cAhBqB;IAiBrBC,aAjBqB;IAkBrBC,gBAlBqB;IAmBrBC,aAnBqB;IAoBrBC,eApBqB;IAqBrBC,eArBqB;IAsBrBC;EAtBqB,CAwBjB;EAAA,IADDC,SACC;;EACJ,MAAMC,QAAQ,GAAG3B,qBAAqB,CAACI,QAAD,EAAWsB,SAAX,CAAtC;EACA,MAAM;IAAEE;EAAF,IAAarC,UAAU,CAACE,WAAD,CAA7B;EACA,MAAMoC,uBAAuB,GAAG3B,0BAA0B,CAACU,cAAD,CAA1D;EACA,MAAMkB,mBAAmB,GAAGZ,cAAc,GACtC,EADsC,GAEtCnB,qBAAqB,CAAC,MAAD,EAASkB,WAAT,EAAsBD,YAAtB,CAFzB;EAGA,IAAIe,eAAe,GAAG,CAAtB;EACA,MAAMC,WAAW,GAAGd,cAAc,GAAGrB,eAAH,GAAqBD,OAAvD;EAEA,oBACE,oBAAC,WAAD;IACE,SAAS,EAAEkC,mBADb;IAEE,SAAS,EAAEzB,YAFb;IAGE,WAAW,EAAEY,WAHf;IAIE,cAAc,EAAEE,cAJlB;IAKE,gBAAgB,EAAEE,gBALpB;IAME,eAAe,EAAEE;EANnB,GAOGI,QAAQ,CAACM,GAAT,CAAa,QAAqCC,KAArC,KAA+C;IAAA,IAA9C;MAAEC,UAAF;MAAcC;IAAd,CAA8C;IAAA,IAAzBC,WAAyB;;IAC3D,MAAMC,UAAU,GAAGrC,mBAAmB,CAACoC,WAAD,EAAczB,cAAd,CAAtC;IACA,MAAM2B,UAAU,GAAG,CAACX,MAAD,EAASM,KAAT,EAAgBM,IAAhB,CAAqB,GAArB,CAAnB;IACA,IAAIL,UAAJ,EAAgBJ,eAAe,IAAI,CAAnB;IAEhB,MAAMU,QAAQ,GAAGrB,aAAa,GAAG,CAAhB,IAAqBc,KAAK,GAAG,CAAR,IAAad,aAAnD;IAEA,OAAOe,UAAU,gBACf,oBAAC,MAAD;MACE,GAAG,EAAEI,UADP;MAEE,MAAM,EAAE5B,MAFV;MAGE,UAAU,EAAEwB;IAHd,GAIME,WAJN;MAKE,QAAQ,EAAE3B,QALZ;MAME,eAAe,EAAEqB;IANnB,GADe,gBAUf,oBAAC,IAAD;MACE,GAAG,EAAEK,EADP;MAEE,EAAE,EAAEA,EAFN;MAGE,cAAc,EAAElB,cAHlB;MAIE,MAAM,EAAEP,MAJV;MAKE,cAAc,EAAE2B,UALlB;MAME,uBAAuB,EAAET,uBAN3B;MAOE,QAAQ,EAAEnB,QAPZ;MAQE,KAAK,EAAEJ,KART;MASE,YAAY,EAAEQ,YAThB;MAUE,WAAW,EAAED,WAVf;MAWE,KAAK,EAAEE,IAXT;MAYE,YAAY,EAAEV,YAZhB;MAaE,WAAW,EAAEgC,WAbf;MAcE,eAAe,EAAE9B,eAdnB;MAeE,gBAAgB,EAAEC,gBAfpB;MAgBE,YAAY,EAAEC,YAhBhB;MAiBE,QAAQ,EAAEgC,QAjBZ;MAkBE,aAAa,EAAEnB,aAlBjB;MAmBE,eAAe,EAAEE,eAnBnB;MAoBE,oBAAoB,EAAEC;IApBxB,GAqBMY,WArBN,EAVF;EAkCD,CAzCA,CAPH,CADF;AAoDD,CAtFD;;AAwFAlC,aAAa,CAACuC,SAAd,GAA0B;EACxBtC,QAAQ,EAAEZ,SAAS,CAACmD,KAAV,CAAgBC,UADF;EAExB7B,IAAI,EAAEvB,SAAS,CAACqD,MAFQ;EAGxBlC,MAAM,EAAEnB,SAAS,CAACqD,MAAV,CAAiBD,UAHD;EAIxBvC,YAAY,EAAEb,SAAS,CAACqD,MAJA;EAKxBhC,WAAW,EAAErB,SAAS,CAACsD,SAAV,CAAoB,CAACtD,SAAS,CAACuD,OAAV,CAAkBvD,SAAS,CAACwD,IAA5B,CAAD,EAAoCxD,SAAS,CAACwD,IAA9C,CAApB,CALW;EAMxBlC,YAAY,EAAEtB,SAAS,CAACsD,SAAV,CAAoB,CAACtD,SAAS,CAACuD,OAAV,CAAkBvD,SAAS,CAACwD,IAA5B,CAAD,EAAoCxD,SAAS,CAACwD,IAA9C,CAApB,CANU;EAOxBpC,cAAc,EAAEpB,SAAS,CAACmD,KAPF;EAQxBpC,eAAe,EAAEf,SAAS,CAACyD,IARH;EASxBzC,gBAAgB,EAAEhB,SAAS,CAACyD,IATJ;EAUxBxC,YAAY,EAAEjB,SAAS,CAACyD,IAVA;EAWxBvC,QAAQ,EAAElB,SAAS,CAACqD,MAXI;EAYxBvC,KAAK,EAAEd,SAAS,CAACqD,MAZO;EAaxB7B,YAAY,EAAExB,SAAS,CAAC0D,MAbA;EAcxBjC,WAAW,EAAEzB,SAAS,CAAC2D,MAdC;EAexBjC,cAAc,EAAE1B,SAAS,CAACyD,IAfF;EAgBxB9B,cAAc,EAAE3B,SAAS,CAACqD,MAhBF;EAiBxBzB,aAAa,EAAE5B,SAAS,CAAC2D,MAjBD;EAkBxB9B,gBAAgB,EAAE7B,SAAS,CAACyD,IAlBJ;EAmBxB3B,aAAa,EAAE9B,SAAS,CAACyD,IAnBD;EAoBxBzB,eAAe,EAAEhC,SAAS,CAACqD,MApBH;EAqBxBpB,oBAAoB,EAAEjC,SAAS,CAACqD,MArBR;EAsBxBtB,eAAe,EAAE/B,SAAS,CAAC2D,MAtBH;EAuBxBC,SAAS,EAAE5D,SAAS,CAACqD;AAvBG,CAA1B;AA0BA1C,aAAa,CAACkD,YAAd,GAA6B;EAC3BxC,WAAW,EAAE,EADc;EAE3BC,YAAY,EAAE,EAFa;EAG3BC,IAAI,EAAE,EAHqB;EAI3BV,YAAY,EAAE,EAJa;EAK3BO,cAAc,EAAE,EALW;EAM3BL,eAAe,EAAE,IANU;EAO3BC,gBAAgB,EAAE,IAPS;EAQ3BC,YAAY,EAAE,IARa;EAS3BC,QAAQ,EAAE,EATiB;EAU3BJ,KAAK,EAAE,UAVoB;EAW3BU,YAAY,EAAE,EAXa;EAY3BC,WAAW,EAAE,CAZc;EAa3BC,cAAc,EAAE,KAbW;EAc3BC,cAAc,EAAE,EAdW;EAe3BC,aAAa,EAAE,CAfY;EAgB3BC,gBAAgB,EAAE,KAhBS;EAiB3BC,aAAa,EAAE,KAjBY;EAkB3BC,eAAe,EAAE,CAlBU;EAmB3BC,eAAe,EAAE,EAnBU;EAoB3BC,oBAAoB,EAAE;AApBK,CAA7B;AAuBA,eAAe/B,SAAS,CAACS,aAAD,CAAxB"}
+{"version":3,"file":"CardContainer.js","names":["React","useContext","PropTypes","MainContext","withTitle","Banner","Wrapper","CarouselWrapper","Card","getDynamicGridClasses","getEntitiesWithBanner","parsePropsToDisplay","getPropsToDisplayModifiers","CardContainer","cardData","gridModifier","style","displayCategory","displayThumbnail","displayTitle","modifier","entity","propsToDisplay","gtmChildren","cardChildren","name","designConfig","itemsPerRow","enableCarousel","bannerModifier","priorityLimit","enableAutoScroll","enableOverlay","autoScrollTimer","overlayModifier","titleOverlayModifier","cardProps","entities","itemId","propsToDisplayModifiers","dynamicWrapperSizes","cardBannerIndex","CardWrapper","map","index","baseAdunit","id","entityProps","extraProps","dynamicKey","join","priority","propTypes","array","isRequired","string","oneOfType","arrayOf","node","bool","object","number","defaultProps"],"sources":["../../../src/components/Card/CardContainer.js"],"sourcesContent":["import React, { useContext } from 'react';\nimport PropTypes from 'prop-types';\nimport { MainContext } from '@blaze-cms/nextjs-components';\nimport { withTitle } from '../../HOC';\nimport Banner from '../Banner';\nimport Wrapper from '../Wrapper';\nimport CarouselWrapper from '../CarouselWrapper';\nimport Card from './Card';\nimport { getDynamicGridClasses } from './helpers';\nimport { getEntitiesWithBanner, parsePropsToDisplay } from '../../helpers';\nimport { getPropsToDisplayModifiers } from '../../utils';\n\nconst CardContainer = ({\n  cardData,\n  gridModifier,\n  style,\n  displayCategory,\n  displayThumbnail,\n  displayTitle,\n  modifier,\n  entity,\n  propsToDisplay,\n  gtmChildren,\n  cardChildren,\n  name,\n  designConfig,\n  itemsPerRow,\n  enableCarousel,\n  bannerModifier,\n  priorityLimit,\n  enableAutoScroll,\n  enableOverlay,\n  autoScrollTimer,\n  overlayModifier,\n  titleOverlayModifier,\n  ...cardProps\n}) => {\n  const entities = getEntitiesWithBanner(cardData, cardProps);\n  const { itemId } = useContext(MainContext);\n  const propsToDisplayModifiers = getPropsToDisplayModifiers(propsToDisplay);\n  const dynamicWrapperSizes = enableCarousel\n    ? ''\n    : getDynamicGridClasses('grid', itemsPerRow, designConfig);\n  let cardBannerIndex = 0;\n  const CardWrapper = enableCarousel ? CarouselWrapper : Wrapper;\n\n  return (\n    <CardWrapper\n      className={dynamicWrapperSizes}\n      modifiers={gridModifier}\n      itemsPerRow={itemsPerRow}\n      bannerModifier={bannerModifier}\n      enableAutoScroll={enableAutoScroll}\n      autoScrollTimer={autoScrollTimer}>\n      {entities.map(({ baseAdunit, id, ...entityProps }, index) => {\n        const extraProps = parsePropsToDisplay(entityProps, propsToDisplay);\n        const dynamicKey = [itemId, index].join('-');\n        if (baseAdunit) cardBannerIndex += 1;\n\n        const priority = priorityLimit > 0 && index + 1 <= priorityLimit;\n\n        return baseAdunit ? (\n          <Banner\n            key={dynamicKey}\n            entity={entity}\n            baseAdunit={baseAdunit}\n            {...entityProps}\n            modifier={modifier}\n            cardBannerIndex={cardBannerIndex}\n          />\n        ) : (\n          <Card\n            key={id}\n            id={id}\n            enableCarousel={enableCarousel}\n            entity={entity}\n            propsToDisplay={extraProps}\n            propsToDisplayModifiers={propsToDisplayModifiers}\n            modifier={modifier}\n            style={style}\n            cardChildren={cardChildren}\n            gtmChildren={gtmChildren}\n            gtmId={name}\n            gridModifier={gridModifier}\n            entityProps={entityProps}\n            displayCategory={displayCategory}\n            displayThumbnail={displayThumbnail}\n            displayTitle={displayTitle}\n            priority={priority}\n            enableOverlay={enableOverlay}\n            overlayModifier={overlayModifier}\n            titleOverlayModifier={titleOverlayModifier}\n            {...entityProps}\n          />\n        );\n      })}\n    </CardWrapper>\n  );\n};\n\nCardContainer.propTypes = {\n  cardData: PropTypes.array.isRequired,\n  name: PropTypes.string,\n  entity: PropTypes.string.isRequired,\n  gridModifier: PropTypes.string,\n  gtmChildren: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),\n  cardChildren: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),\n  propsToDisplay: PropTypes.array,\n  displayCategory: PropTypes.bool,\n  displayThumbnail: PropTypes.bool,\n  displayTitle: PropTypes.bool,\n  modifier: PropTypes.string,\n  style: PropTypes.string,\n  designConfig: PropTypes.object,\n  itemsPerRow: PropTypes.number,\n  enableCarousel: PropTypes.bool,\n  bannerModifier: PropTypes.string,\n  priorityLimit: PropTypes.number,\n  enableAutoScroll: PropTypes.bool,\n  enableOverlay: PropTypes.bool,\n  overlayModifier: PropTypes.string,\n  titleOverlayModifier: PropTypes.string,\n  autoScrollTimer: PropTypes.number\n};\n\nCardContainer.defaultProps = {\n  gtmChildren: [],\n  cardChildren: [],\n  name: '',\n  gridModifier: '',\n  propsToDisplay: [],\n  displayCategory: true,\n  displayThumbnail: true,\n  displayTitle: true,\n  modifier: '',\n  style: 'portrait',\n  designConfig: {},\n  itemsPerRow: 1,\n  enableCarousel: false,\n  bannerModifier: '',\n  priorityLimit: 0,\n  enableAutoScroll: false,\n  enableOverlay: false,\n  autoScrollTimer: 0,\n  overlayModifier: '',\n  titleOverlayModifier: ''\n};\n\nexport default withTitle(CardContainer);\n"],"mappings":"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"}

package/lib-es/components/SearchContent/SearchContent.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { useRouter } from 'next/router';
 import { useDebounceSearch } from '@blaze-cms/plugin-search-ui';
 import SearchContentResults from './SearchContentResults';
+import SearchContentToggleIcon from './SearchContentToggleIcon';
 
 const SearchContent = ({
   entities,
@@ -16,7 +17,6 @@ const SearchContent = ({
   const [collapsed, setCollapsed] = useState(false);
   const router = useRouter();
   const {
-    loading,
     results,
     setSearchTerm,
     debouncedSearchTerm
@@ -25,7 +25,6 @@ const SearchContent = ({
     initialSearchTerm: '',
     resultKeys: 'id, name, image { url }, url'
   });
-  if (loading) return null;
   const responsiveClasses = isMobile ? searchInputWrapperMobile : searchInputWrapperDesktop;
 
   const handleClick = (e, url) => {
@@ -44,6 +43,10 @@ const SearchContent = ({
     if (!debouncedSearchTerm || debouncedSearchTerm === '') setCollapsed(true);
   };
 
+  const handleClearSearchResults = () => {
+    setSearchTerm('');
+  };
+
   return collapsed ? /*#__PURE__*/React.createElement("div", {
     className: responsiveClasses
   }, /*#__PURE__*/React.createElement("div", {
@@ -73,14 +76,10 @@ const SearchContent = ({
     className: "search-content--expanded__label"
   }, /*#__PURE__*/React.createElement("span", {
     className: "search-content--expanded__icon_wrapper"
-  }, /*#__PURE__*/React.createElement("svg", {
-    className: "search-content--expanded__icon",
-    viewBox: "0 0 20 20"
-  }, /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z",
-    clipRule: "evenodd"
-  }))), /*#__PURE__*/React.createElement("input", {
+  }, /*#__PURE__*/React.createElement(SearchContentToggleIcon, {
+    results: results,
+    onClear: handleClearSearchResults
+  })), /*#__PURE__*/React.createElement("input", {
     type: "text",
     name: "search",
     onChange: e => setSearchTerm(e.target.value),

package/lib-es/components/SearchContent/SearchContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchContent.js","names":["React","useState","PropTypes","useRouter","useDebounceSearch","SearchContentResults","SearchContent","entities","searchInputAlignment","searchInputWrapperMobile","searchInputWrapperDesktop","collapsible","isMobile","placeholder","collapsed","setCollapsed","router","loading","results","setSearchTerm","debouncedSearchTerm","initialSearchTerm","resultKeys","responsiveClasses","handleClick","e","url","preventDefault","push","handleKeyPress","key","target","value","handleOnBlur","propTypes","string","bool","array","isRequired","defaultProps"],"sources":["../../../src/components/SearchContent/SearchContent.js"],"sourcesContent":["import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { useRouter } from 'next/router';\nimport { useDebounceSearch } from '@blaze-cms/plugin-search-ui';\nimport SearchContentResults from './SearchContentResults';\n\nconst SearchContent = ({\n  entities,\n  searchInputAlignment,\n  searchInputWrapperMobile,\n  searchInputWrapperDesktop,\n  collapsible,\n  isMobile,\n  placeholder\n}) => {\n  const [collapsed, setCollapsed] = useState(false);\n  const router = useRouter();\n\n  const { loading, results, setSearchTerm, debouncedSearchTerm } = useDebounceSearch({\n    entities,\n    initialSearchTerm: '',\n    resultKeys: 'id, name, image { url }, url'\n  });\n\n  if (loading) return null;\n\n  const responsiveClasses = isMobile ? searchInputWrapperMobile : searchInputWrapperDesktop;\n\n  const handleClick = (e, url) => {\n    e.preventDefault();\n    router.push(url);\n  };\n\n  const handleKeyPress = e => {\n    if (e.key === 'Enter' && e.target.value !== '') {\n      router.push(`/search?search_term=${e.target.value}`);\n    }\n  };\n\n  const handleOnBlur = () => {\n    if (!collapsible) return;\n    if (!debouncedSearchTerm || debouncedSearchTerm === '') setCollapsed(true);\n  };\n\n  return collapsed ? (\n    <div className={responsiveClasses}>\n      <div className=\"search-content--collapse__wrapper\">\n        <label className=\"search-content--collapse__label\">\n          <span className=\"search-content--collapse__icon_wrapper\">\n            <svg className=\"search-content--collapse__icon\" viewBox=\"0 0 20 20\">\n              <path\n                fillRule=\"evenodd\"\n                d=\"M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z\"\n                clipRule=\"evenodd\"\n              />\n            </svg>\n          </span>\n          <input\n            onFocus={() => setCollapsed(false)}\n            onChange={e => setSearchTerm(e.target.value)}\n            type=\"text\"\n            name=\"search\"\n            className=\"search-content--collapse__input\"\n          />\n        </label>\n      </div>\n    </div>\n  ) : (\n    <>\n      <div className={responsiveClasses}>\n        <div className=\"search-content--expanded__wrapper\">\n          <label className=\"search-content--expanded__label\">\n            <span className=\"search-content--expanded__icon_wrapper\">\n              <svg className=\"search-content--expanded__icon\" viewBox=\"0 0 20 20\">\n                <path\n                  fillRule=\"evenodd\"\n                  d=\"M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z\"\n                  clipRule=\"evenodd\"\n                />\n              </svg>\n            </span>\n            <input\n              type=\"text\"\n              name=\"search\"\n              onChange={e => setSearchTerm(e.target.value)}\n              onKeyPress={handleKeyPress}\n              className=\"search-content--expanded__input\"\n              placeholder={placeholder}\n              onBlur={handleOnBlur}\n            />\n          </label>\n        </div>\n        <SearchContentResults\n          results={results}\n          debouncedSearchTerm={debouncedSearchTerm}\n          handleClick={handleClick}\n        />\n      </div>\n    </>\n  );\n};\n\nSearchContent.propTypes = {\n  searchInputAlignment: PropTypes.string,\n  searchInputWrapperMobile: PropTypes.string,\n  searchInputWrapperDesktop: PropTypes.string,\n  placeholder: PropTypes.string,\n  isMobile: PropTypes.bool,\n  collapsible: PropTypes.bool,\n  entities: PropTypes.array.isRequired\n};\n\nSearchContent.defaultProps = {\n  searchInputAlignment: '',\n  searchInputWrapperMobile: '',\n  searchInputWrapperDesktop: '',\n  placeholder: '',\n  isMobile: false,\n  collapsible: false\n};\n\nexport default SearchContent;\n"],"mappings":"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"}
+{"version":3,"file":"SearchContent.js","names":["React","useState","PropTypes","useRouter","useDebounceSearch","SearchContentResults","SearchContentToggleIcon","SearchContent","entities","searchInputAlignment","searchInputWrapperMobile","searchInputWrapperDesktop","collapsible","isMobile","placeholder","collapsed","setCollapsed","router","results","setSearchTerm","debouncedSearchTerm","initialSearchTerm","resultKeys","responsiveClasses","handleClick","e","url","preventDefault","push","handleKeyPress","key","target","value","handleOnBlur","handleClearSearchResults","propTypes","string","bool","array","isRequired","defaultProps"],"sources":["../../../src/components/SearchContent/SearchContent.js"],"sourcesContent":["import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { useRouter } from 'next/router';\nimport { useDebounceSearch } from '@blaze-cms/plugin-search-ui';\nimport SearchContentResults from './SearchContentResults';\nimport SearchContentToggleIcon from './SearchContentToggleIcon';\n\nconst SearchContent = ({\n  entities,\n  searchInputAlignment,\n  searchInputWrapperMobile,\n  searchInputWrapperDesktop,\n  collapsible,\n  isMobile,\n  placeholder\n}) => {\n  const [collapsed, setCollapsed] = useState(false);\n  const router = useRouter();\n\n  const { results, setSearchTerm, debouncedSearchTerm } = useDebounceSearch({\n    entities,\n    initialSearchTerm: '',\n    resultKeys: 'id, name, image { url }, url'\n  });\n\n  const responsiveClasses = isMobile ? searchInputWrapperMobile : searchInputWrapperDesktop;\n\n  const handleClick = (e, url) => {\n    e.preventDefault();\n    router.push(url);\n  };\n\n  const handleKeyPress = e => {\n    if (e.key === 'Enter' && e.target.value !== '') {\n      router.push(`/search?search_term=${e.target.value}`);\n    }\n  };\n\n  const handleOnBlur = () => {\n    if (!collapsible) return;\n    if (!debouncedSearchTerm || debouncedSearchTerm === '') setCollapsed(true);\n  };\n\n  const handleClearSearchResults = () => {\n    setSearchTerm('');\n  };\n\n  return collapsed ? (\n    <div className={responsiveClasses}>\n      <div className=\"search-content--collapse__wrapper\">\n        <label className=\"search-content--collapse__label\">\n          <span className=\"search-content--collapse__icon_wrapper\">\n            <svg className=\"search-content--collapse__icon\" viewBox=\"0 0 20 20\">\n              <path\n                fillRule=\"evenodd\"\n                d=\"M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z\"\n                clipRule=\"evenodd\"\n              />\n            </svg>\n          </span>\n          <input\n            onFocus={() => setCollapsed(false)}\n            onChange={e => setSearchTerm(e.target.value)}\n            type=\"text\"\n            name=\"search\"\n            className=\"search-content--collapse__input\"\n          />\n        </label>\n      </div>\n    </div>\n  ) : (\n    <>\n      <div className={responsiveClasses}>\n        <div className=\"search-content--expanded__wrapper\">\n          <label className=\"search-content--expanded__label\">\n            <span className=\"search-content--expanded__icon_wrapper\">\n              <SearchContentToggleIcon results={results} onClear={handleClearSearchResults} />\n            </span>\n            <input\n              type=\"text\"\n              name=\"search\"\n              onChange={e => setSearchTerm(e.target.value)}\n              onKeyPress={handleKeyPress}\n              className=\"search-content--expanded__input\"\n              placeholder={placeholder}\n              onBlur={handleOnBlur}\n            />\n          </label>\n        </div>\n        <SearchContentResults\n          results={results}\n          debouncedSearchTerm={debouncedSearchTerm}\n          handleClick={handleClick}\n        />\n      </div>\n    </>\n  );\n};\n\nSearchContent.propTypes = {\n  searchInputAlignment: PropTypes.string,\n  searchInputWrapperMobile: PropTypes.string,\n  searchInputWrapperDesktop: PropTypes.string,\n  placeholder: PropTypes.string,\n  isMobile: PropTypes.bool,\n  collapsible: PropTypes.bool,\n  entities: PropTypes.array.isRequired\n};\n\nSearchContent.defaultProps = {\n  searchInputAlignment: '',\n  searchInputWrapperMobile: '',\n  searchInputWrapperDesktop: '',\n  placeholder: '',\n  isMobile: false,\n  collapsible: false\n};\n\nexport default SearchContent;\n"],"mappings":"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"}

package/lib-es/components/SearchContent/SearchContentToggleIcon.js

@@ -0,0 +1,30 @@
+import React from 'react';
+
+const SearchContentToggleIcon = ({
+  results,
+  onClear
+}) => {
+  if (results && results.length > 0) {
+    return /*#__PURE__*/React.createElement("svg", {
+      className: "search-content--expanded__icon",
+      viewBox: "0 0 20 20",
+      onClick: onClear
+    }, /*#__PURE__*/React.createElement("path", {
+      fillRule: "evenodd",
+      d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
+      clipRule: "evenodd"
+    }));
+  }
+
+  return /*#__PURE__*/React.createElement("svg", {
+    className: "search-content--expanded__icon",
+    viewBox: "0 0 20 20"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z",
+    clipRule: "evenodd"
+  }));
+};
+
+export default SearchContentToggleIcon;
+//# sourceMappingURL=SearchContentToggleIcon.js.map

package/lib-es/components/SearchContent/SearchContentToggleIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchContentToggleIcon.js","names":["React","SearchContentToggleIcon","results","onClear","length"],"sources":["../../../src/components/SearchContent/SearchContentToggleIcon.js"],"sourcesContent":["import React from 'react';\n\nconst SearchContentToggleIcon = ({ results, onClear }) => {\n  if (results && results.length > 0) {\n    return (\n      <svg className=\"search-content--expanded__icon\" viewBox=\"0 0 20 20\" onClick={onClear}>\n        <path\n          fillRule=\"evenodd\"\n          d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n          clipRule=\"evenodd\"\n        />\n      </svg>\n    );\n  }\n\n  return (\n    <svg className=\"search-content--expanded__icon\" viewBox=\"0 0 20 20\">\n      <path\n        fillRule=\"evenodd\"\n        d=\"M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  );\n};\n\nexport default SearchContentToggleIcon;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,MAAMC,uBAAuB,GAAG,CAAC;EAAEC,OAAF;EAAWC;AAAX,CAAD,KAA0B;EACxD,IAAID,OAAO,IAAIA,OAAO,CAACE,MAAR,GAAiB,CAAhC,EAAmC;IACjC,oBACE;MAAK,SAAS,EAAC,gCAAf;MAAgD,OAAO,EAAC,WAAxD;MAAoE,OAAO,EAAED;IAA7E,gBACE;MACE,QAAQ,EAAC,SADX;MAEE,CAAC,EAAC,oMAFJ;MAGE,QAAQ,EAAC;IAHX,EADF,CADF;EASD;;EAED,oBACE;IAAK,SAAS,EAAC,gCAAf;IAAgD,OAAO,EAAC;EAAxD,gBACE;IACE,QAAQ,EAAC,SADX;IAEE,CAAC,EAAC,kHAFJ;IAGE,QAAQ,EAAC;EAHX,EADF,CADF;AASD,CAtBD;;AAwBA,eAAeF,uBAAf"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blaze-cms/react-page-builder",
-  "version": "0.124.0-alpha.21",
+  "version": "0.124.0-alpha.24",
   "description": "Blaze react page builder",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
@@ -84,5 +84,5 @@
     "lib/*",
     "lib-es/*"
   ],
-  "gitHead": "6c17771cbc704bc1bc0943f71a0b8f8e3eb531fa"
+  "gitHead": "dcf7d39568a7d606e549b9d1106840304613e534"
 }

package/src/components/Card/CardContainer.js

@@ -120,8 +120,7 @@ CardContainer.propTypes = {
   enableOverlay: PropTypes.bool,
   overlayModifier: PropTypes.string,
   titleOverlayModifier: PropTypes.string,
-  autoScrollTimer: PropTypes.number,
-  arrowSize: PropTypes.string
+  autoScrollTimer: PropTypes.number
 };
 
 CardContainer.defaultProps = {
@@ -144,7 +143,7 @@ CardContainer.defaultProps = {
   enableOverlay: false,
   autoScrollTimer: 0,
   overlayModifier: '',
-  titleOverlayModifier: '',
+  titleOverlayModifier: ''
 };
 
 export default withTitle(CardContainer);

package/src/components/SearchContent/SearchContent.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { useRouter } from 'next/router';
 import { useDebounceSearch } from '@blaze-cms/plugin-search-ui';
 import SearchContentResults from './SearchContentResults';
+import SearchContentToggleIcon from './SearchContentToggleIcon';
 
 const SearchContent = ({
   entities,
@@ -16,14 +17,12 @@ const SearchContent = ({
   const [collapsed, setCollapsed] = useState(false);
   const router = useRouter();
 
-  const { loading, results, setSearchTerm, debouncedSearchTerm } = useDebounceSearch({
+  const { results, setSearchTerm, debouncedSearchTerm } = useDebounceSearch({
     entities,
     initialSearchTerm: '',
     resultKeys: 'id, name, image { url }, url'
   });
 
-  if (loading) return null;
-
   const responsiveClasses = isMobile ? searchInputWrapperMobile : searchInputWrapperDesktop;
 
   const handleClick = (e, url) => {
@@ -42,6 +41,10 @@ const SearchContent = ({
     if (!debouncedSearchTerm || debouncedSearchTerm === '') setCollapsed(true);
   };
 
+  const handleClearSearchResults = () => {
+    setSearchTerm('');
+  };
+
   return collapsed ? (
     <div className={responsiveClasses}>
       <div className="search-content--collapse__wrapper">
@@ -71,13 +74,7 @@ const SearchContent = ({
         <div className="search-content--expanded__wrapper">
           <label className="search-content--expanded__label">
             <span className="search-content--expanded__icon_wrapper">
-              <svg className="search-content--expanded__icon" viewBox="0 0 20 20">
-                <path
-                  fillRule="evenodd"
-                  d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
-                  clipRule="evenodd"
-                />
-              </svg>
+              <SearchContentToggleIcon results={results} onClear={handleClearSearchResults} />
             </span>
             <input
               type="text"

package/src/components/SearchContent/SearchContentToggleIcon.js

@@ -0,0 +1,27 @@
+import React from 'react';
+
+const SearchContentToggleIcon = ({ results, onClear }) => {
+  if (results && results.length > 0) {
+    return (
+      <svg className="search-content--expanded__icon" viewBox="0 0 20 20" onClick={onClear}>
+        <path
+          fillRule="evenodd"
+          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+          clipRule="evenodd"
+        />
+      </svg>
+    );
+  }
+
+  return (
+    <svg className="search-content--expanded__icon" viewBox="0 0 20 20">
+      <path
+        fillRule="evenodd"
+        d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export default SearchContentToggleIcon;