feat: CXPUI-11 featured and most popular slide changes

newrelic · Feb 28, 2022 · fd67fa4 · fd67fa4
1 parent 1adf974
commit fd67fa4
Show file tree

Hide file tree

Showing 6 changed files with 13,277 additions and 12,619 deletions.
diff --git a/package.json b/package.json
@@ -44,7 +44,9 @@
     "react-dom": "^17.0.1",
     "react-helmet": "^6.1.0",
     "react-markdown": "^6.0.0",
+    "react-slick": "^0.28.1",
     "sharp": "^0.29.1",
+    "slick-carousel": "^1.8.1",
     "use-mobile-detect-hook": "^1.0.4",
     "use-query-params": "^1.2.2"
   },

diff --git a/src/components/IOBanner.js b/src/components/IOBanner.js
@@ -1,12 +1,21 @@
-import React from 'react';
+import React, {useState} from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
 import bannerOverlayRight from '../images/io-banner/banner-style-right.svg';
 import bannerOverlayLeft from '../images/io-banner/banner-style-left.svg';
 import { SearchInput } from '@newrelic/gatsby-theme-newrelic';
 import { QUICKSTARTS_COLLAPSE_BREAKPOINT } from '../data/constants';
 
-const BannerHeaderContent = ({ search, setSearch }) => (
+const BannerHeaderContent = ({ search, setSearch,  setIsSearchInputEmpty}) => {
+
+  const handleSearchInput = (e) => {
+    let searchInputValue = e.target.value;
+    setSearch(searchInputValue);
+    searchInputValue.length >0 ? setIsSearchInputEmpty(false) : setIsSearchInputEmpty(true);
+  }
+
+
+return(
   <div
     css={css`
       position: static;
@@ -65,8 +74,11 @@ const BannerHeaderContent = ({ search, setSearch }) => (
         size={SearchInput.SIZE.LARGE}
         value={search || ''}
         placeholder="What do you want to monitor?"
-        onClear={() => setSearch('')}
-        onChange={(e) => setSearch(e.target.value)}
+        onClear={() => {
+          setSearch('');
+          setIsSearchInputEmpty(true);
+        }}
+        onChange={handleSearchInput}
         css={css`
             --svg-color: var(--color-neutrals-700);
             box-shadow: none;
@@ -111,8 +123,8 @@ const BannerHeaderContent = ({ search, setSearch }) => (
     </div>
   </div>
 );
-
-const IOBanner = ({ search, setSearch }) => {
+}
+const IOBanner = ({ search, setSearch ,setIsSearchInputEmpty}) => {
   return (
     <div
       css={css`
@@ -160,7 +172,7 @@ const IOBanner = ({ search, setSearch }) => {
             loading="lazy"
           />
         </div>
-        <BannerHeaderContent search={search} setSearch={setSearch} />
+        <BannerHeaderContent search={search} setSearch={setSearch} setIsSearchInputEmpty={setIsSearchInputEmpty} />
         <div
           css={css`
             margin-left: auto;

diff --git a/src/components/styles.scss b/src/components/styles.scss
@@ -25,3 +25,31 @@ input[type='text'] {
     }
   }
 }
+.slide {
+  height: 100%;
+}
+.slick-prev:before,
+.slick-next:before {
+  color: var(--primary-text-color) !important;
+}
+
+.slick-initialized .slick-slide{
+  justify-content: space-between;
+  padding:0 8px;
+
+  &:first-child {
+    padding-left: 0;
+  }
+}
+
+.slick-track {
+  display: flex !important;
+  margin-top:2px;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+}
+.slick-slide
+{
+    height: inherit !important;
+} 
diff --git a/src/data/instant-observability-categories.json b/src/data/instant-observability-categories.json
@@ -4,11 +4,6 @@
     "displayName": "All",
     "associatedKeywords": []
   },
-  {
-    "value": "featured",
-    "displayName": "Featured",
-    "associatedKeywords": ["featured"]
-  },
   {
     "value": "application-monitoring",
     "displayName": "Application monitoring",

diff --git a/src/pages/index.jsx b/src/pages/index.jsx
@@ -22,6 +22,10 @@ import CATEGORIES from '../data/instant-observability-categories';
 
 import SuperTiles from '../components/SuperTiles';
 
+import Slider from 'react-slick';
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
+
 const VIEWS = {
   GRID: 'Grid view',
   LIST: 'List view',
@@ -86,6 +90,7 @@ const QuickstartsPage = ({ data, location }) => {
   const [category, setCategory] = useState('');
 
   const [isCategoriesOverlayOpen, setIsCategoriesOverlayOpen] = useState(false);
+  const [isSearchInputEmpty, setIsSearchInputEmpty] = useState(true);
 
   useEffect(() => {
     const params = new URLSearchParams(location.search);
@@ -138,6 +143,14 @@ const QuickstartsPage = ({ data, location }) => {
 
   const quickstarts = data.allQuickstarts.nodes;
 
+  const featuredQuickStarts = quickstarts?.filter((product) =>
+    product.keywords.includes('featured')
+  );
+
+  const mostPopularQuickStarts = quickstarts?.filter((product) =>
+    product.keywords.includes('most popular')
+  );
+
   const alphaSort = quickstarts.sort((a, b) => a.title.localeCompare(b.title));
   let sortedQuickstarts = sortFeaturedQuickstarts(alphaSort);
 
@@ -180,15 +193,60 @@ const QuickstartsPage = ({ data, location }) => {
 
     return found.displayName;
   };
-
+  const buildYourOwn = (url) => {
+    window.open(url);
+  }
+  const settings = {
+    dots: false,
+    infinite: false,
+    speed: 300,
+    slidesToShow: 4,
+    slidesToScroll: 4,
+    adaptiveHeight:false,
+    adaptiveWidth:true,
+    responsive: [
+      {
+        breakpoint: 1024,
+        settings: {
+          slidesToShow: 3,
+          slidesToScroll: 3,
+          infinite: true,
+          dots: false,
+        },
+      },
+      {
+        breakpoint: 820,
+        settings: {
+          slidesToShow: 1,
+          slidesToScroll: 1,
+          infinite: true,
+          dots: false,
+        },
+      },
+      {
+        breakpoint: 600,
+        settings: {
+          slidesToShow: 2,
+          slidesToScroll: 2,
+        },
+      },
+      {
+        breakpoint: 480,
+        settings: {
+          slidesToShow: 1,
+          slidesToScroll: 1,
+        },
+      },
+    ],
+  };
   return (
     <>
       <IOSeo
         title="Instant Observability"
         location={location}
         type="quickstarts"
       />
-      <IOBanner search={search} setSearch={setSearch} />
+      <IOBanner search={search} setSearch={setSearch}  setIsSearchInputEmpty={setIsSearchInputEmpty}/>
       <div
         css={css`
           --sidebar-width: 300px;
@@ -375,6 +433,155 @@ const QuickstartsPage = ({ data, location }) => {
               </div>
             </Overlay>
           </div>
+
+          {
+            isSearchInputEmpty &&
+            <>
+          <div
+            css={css`
+              --text-color: var(--primary-text-color);
+              font-size: 16px;
+              color: var(--color-neutrals-800);
+              align-text: center;
+              span {
+                color: var(--text-color);
+                /* target inner children of parent span */
+                span,
+                strong {
+                  @media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) {
+                    display: none;
+                  }
+                }
+              }
+              strong {
+                color: var(--text-color);
+              }
+              @media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) {
+                padding: 0 0 0.5rem;
+              }
+            `}
+          >
+            <span>
+              <strong>Most Popular</strong>
+            </span>
+          </div>
+          <div
+            css={css`
+              display: block;
+              grid-gap: 1.25rem;
+              padding:10px;
+              grid-template-columns: repeat(4, 1fr);
+              grid-auto-rows: 1fr;
+              ${view === VIEWS.GRID &&
+              css`
+                @media (max-width: ${TRIPLE_COLUMN_BREAKPOINT}) {
+                  grid-template-columns: repeat(3, 1fr);
+                }
+                @media (max-width: ${DOUBLE_COLUMN_BREAKPOINT}) {
+                  grid-template-columns: repeat(2, 1fr);
+                }
+                @media (max-width: ${SINGLE_COLUMN_BREAKPOINT}) {
+                  grid-template-columns: repeat(1, 1fr);
+                }
+              `}
+              ${view === VIEWS.LIST &&
+              css`
+                grid-auto-rows: 1fr;
+                grid-template-columns: 1fr;
+                grid-gap: 1.25rem;
+              `};
+            `}
+          >
+            <Slider {...settings} css={css`
+              display: flex;
+            `}>
+              <SuperTiles/>
+              {mostPopularQuickStarts.map((pack) => (
+                <QuickstartTile
+                  key={pack.id}
+                  view={view}
+                  featured={false}
+                  css = {css`
+                   grid-template-rows:var(--tile-image-height) var(--title-row-height) 80px auto;
+                   min-height: 280px;
+                  `}
+                  {...pack}
+                />
+              ))}
+            </Slider>
+          </div>
+          <div
+            css={css`
+              --text-color: var(--primary-text-color);
+              font-size: 16px;
+              color: var(--color-neutrals-800);
+              align-text: center;
+              span {
+                color: var(--text-color);
+                /* target inner children of parent span */
+                span,
+                strong {
+                  @media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) {
+                    display: none;
+                  }
+                }
+              }
+              strong {
+                color: var(--text-color);
+              }
+              @media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) {
+                padding: 0 0 0.5rem;
+              }
+            `}
+          >
+            <span>
+              <strong>Featured</strong>
+            </span>
+          </div>
+          <div
+            css={css`
+              display: block;
+              padding:10px;
+              grid-gap: 1.25rem;
+              grid-template-columns: repeat(4, 1fr);
+              grid-auto-rows: 1fr;
+              ${view === VIEWS.GRID &&
+              css`
+                @media (max-width: ${TRIPLE_COLUMN_BREAKPOINT}) {
+                  grid-template-columns: repeat(3, 1fr);
+                }
+                @media (max-width: ${DOUBLE_COLUMN_BREAKPOINT}) {
+                  grid-template-columns: repeat(2, 1fr);
+                }
+                @media (max-width: ${SINGLE_COLUMN_BREAKPOINT}) {
+                  grid-template-columns: repeat(1, 1fr);
+                }
+              `}
+              ${view === VIEWS.LIST &&
+              css`
+                grid-auto-rows: 1fr;
+                grid-template-columns: 1fr;
+                grid-gap: 1.25rem;
+              `};
+            `}
+          >
+            <Slider {...settings}>
+              {featuredQuickStarts.map((pack) => (
+                <QuickstartTile
+                  key={pack.id}
+                  view={view}
+                  featured={false}
+                  css = {css`
+                   grid-template-rows:var(--tile-image-height) var(--title-row-height) 80px auto;
+                   min-height:280px;
+                  `}
+                  {...pack}
+                />
+              ))}
+            </Slider>
+          </div>
+          </>
+          }
           <div
             css={css`
               --text-color: var(--primary-text-color);
@@ -441,7 +648,10 @@ const QuickstartsPage = ({ data, location }) => {
               `};
             `}
           >
-            <SuperTiles />
+            {
+            !isSearchInputEmpty &&
+              <SuperTiles />            
+            }
             {filteredQuickstarts.map((pack) => (
               <QuickstartTile
                 key={pack.id}