feat: pack list view

Added alternate List view for all packs which is responsive to view size

Changed the name of a couple of components to keep them in line with functionality:

`PackList` -> `PackGrid` (the list view uses `PackList` and vice-versa
`PackTile` -> `PackGridTile` (to differentiate from `PackListTile`

src/components/PackGrid.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { css } from '@emotion/react';
+import PropTypes from 'prop-types';
+
+const PackGrid = ({ children, className }) => {
+  return (
+    <div
+      className={className}
+      css={css`
+        display: grid;
+        grid-template-columns: repeat(4, minmax(260px, 1fr));
+        grid-gap: 1rem;
+        grid-auto-rows: minmax(var(--guide-list-row-height, 150px), auto);
+        align-items: stretch;
+        width: 100%;
+
+        @media (max-width: 1180px) {
+          grid-template-columns: 1fr;
+          grid-gap: 3rem;
+        }
+      `}
+    >
+      {children}
+    </div>
+  );
+};
+
+PackGrid.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+};
+
+export default PackGrid;

src/components/PackTile.js → src/components/PackGridTile.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
 import { Link, Icon, Surface } from '@newrelic/gatsby-theme-newrelic';
 
-const PackTile = ({
+const PackGridTile = ({
   name,
   description,
   featuredImageUrl,
@@ -85,7 +85,7 @@ const PackTile = ({
   </Surface>
 );
 
-PackTile.propTypes = {
+PackGridTile.propTypes = {
   name: PropTypes.string.isRequired,
   description: PropTypes.string.isRequired,
   featuredImageUrl: PropTypes.string,
@@ -94,4 +94,4 @@ PackTile.propTypes = {
   className: PropTypes.string,
 };
 
-export default PackTile;
+export default PackGridTile;

src/components/PackList.js

@@ -7,17 +7,9 @@ const PackList = ({ children, className }) => {
     <div
       className={className}
       css={css`
-        display: grid;
-        grid-template-columns: repeat(4, minmax(260px, 1fr));
-        grid-gap: 1rem;
-        grid-auto-rows: minmax(var(--guide-list-row-height, 150px), auto);
+        display: list-item;
         align-items: stretch;
         width: 100%;
-
-        @media (max-width: 1180px) {
-          grid-template-columns: 1fr;
-          grid-gap: 3rem;
-        }
       `}
     >
       {children}

src/components/PackListTile.js

@@ -0,0 +1,120 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css } from '@emotion/react';
+import { Link, Icon, Surface } from '@newrelic/gatsby-theme-newrelic';
+
+const PackListTile = ({
+  name,
+  description,
+  featuredImageUrl,
+  supportLevel,
+  to,
+  className,
+}) => (
+  <Surface
+    as={Link}
+    to={to}
+    className={className}
+    base={Surface.BASE.PRIMARY}
+    interactive
+    css={css`
+      display: grid;
+      border-radius: 0.25rem;
+      position: relative;
+      transition: all 0.15s ease-out;
+      margin-bottom: 1rem;
+    `}
+  >
+    <div
+      css={css`
+        display: grid;
+        grid-template-columns: 1fr 3fr;
+        grid-auto-rows: minmax(var(--guide-list-row-height, 150px), auto);
+
+        @media (max-width: 1080px) {
+          grid-template-columns: 1fr;
+        }
+      `}
+    >
+      <div
+        css={css`
+          padding: 1rem;
+          max-height: 150px;
+          @media (max-width: 1080px) {
+            display: none;
+          }
+        `}
+      >
+        {featuredImageUrl && (
+          <img
+            src={featuredImageUrl}
+            alt="Preview of the pack in action"
+            css={css`
+              display: block;
+              object-fit: cover;
+              width: 100%;
+              height: 100%;
+
+              @media (max-width: 1080px) {
+                display: none;
+              }
+            `}
+          />
+        )}
+      </div>
+      <div
+        css={css`
+          padding: 1rem;
+          width: 100%;
+        `}
+      >
+        <div
+          css={css`
+            display: grid;
+            grid-template-columns: 1fr auto;
+            grid-gap: 0.5rem;
+            align-items: baseline;
+          `}
+        >
+          <h4>
+            {name}{' '}
+            {supportLevel === 'NEWRELIC' && (
+              <span title="New Relic supported">
+                <Icon
+                  css={css`
+                    stroke: none;
+                    width: 2rem;
+                    height: 2rem;
+                  `}
+                  name="nr-check-shield"
+                />
+              </span>
+            )}
+          </h4>
+        </div>
+        <p
+          css={css`
+            font-size: 0.875rem;
+            color: var(--secondary-text-color);
+            flex: 1;
+            text-align: left;
+            padding: 0;
+          `}
+        >
+          {description}
+        </p>
+      </div>
+    </div>
+  </Surface>
+);
+
+PackListTile.propTypes = {
+  name: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  featuredImageUrl: PropTypes.string,
+  supportLevel: PropTypes.string,
+  to: PropTypes.string.isRequired,
+  className: PropTypes.string,
+};
+
+export default PackListTile;

src/pages/observability-packs.js

@@ -3,7 +3,9 @@ import { graphql } from 'gatsby';
 import React, { useState, useEffect } from 'react';
 import DevSiteSeo from '../components/DevSiteSeo';
 import { css } from '@emotion/react';
-import PackTile from '../components/PackTile';
+import PackGrid from '../components/PackGrid';
+import PackGridTile from '../components/PackGridTile';
+import PackListTile from '../components/PackListTile';
 import PackList from '../components/PackList';
 import { SearchInput, Button, Dropdown } from '@newrelic/gatsby-theme-newrelic';
 import { useQueryParam, StringParam } from 'use-query-params';
@@ -34,6 +36,11 @@ const ObservabilityPacksPage = ({ data, location }) => {
     }
   }, [querySearch, queryFilter, querySort]);
 
+  const [packView, setPackView] = useState('GRID_VIEW');
+
+  useEffect(() => {
+    setPackView(packView);
+  }, [packView]);
   useEffect(() => {
     let tempFilteredPacks = o11yPacks.filter(
       (pack) =>
@@ -239,30 +246,72 @@ const ObservabilityPacksPage = ({ data, location }) => {
           </div>
         </div>
         <div>
-          <Button variant={Button.VARIANT.PRIMARY}>Grid view</Button>
-          <Button variant={Button.VARIANT.OUTLINE}>List view</Button>
+          <Button
+            variant={
+              packView === 'GRID_VIEW'
+                ? Button.VARIANT.PRIMARY
+                : Button.VARIANT.OUTLINE
+            }
+            onClick={() => setPackView('GRID_VIEW')}
+          >
+            Grid view
+          </Button>
+          <Button
+            variant={
+              packView === 'LIST_VIEW'
+                ? Button.VARIANT.PRIMARY
+                : Button.VARIANT.OUTLINE
+            }
+            onClick={() => setPackView('LIST_VIEW')}
+          >
+            List view
+          </Button>
         </div>
       </div>
       <div>
-        <PackList>
-          {filteredPacks.map((pack) => {
-            // TODO: Figure out what image should be shown
-            // if not added to API explicitly
-            const imgSrc = pack.dashboards?.[0]?.screenshots?.[0];
-            return (
-              <PackTile
-                name={pack.name}
-                key={pack.id}
-                supportLevel={pack.level}
-                description={pack.description}
-                featuredImageUrl={
-                  imgSrc || 'https://via.placeholder.com/400x275.png?text=Image'
-                }
-                to={`${pack.fields.slug}`}
-              />
-            );
-          })}
-        </PackList>
+        {packView === 'GRID_VIEW' ? (
+          <PackGrid>
+            {filteredPacks.map((pack) => {
+              // TODO: Figure out what image should be shown
+              // if not added to API explicitly
+              const imgSrc = pack.dashboards?.[0]?.screenshots?.[0];
+              return (
+                <PackGridTile
+                  name={pack.name}
+                  key={pack.id}
+                  supportLevel={pack.level}
+                  description={pack.description}
+                  featuredImageUrl={
+                    imgSrc ||
+                    'https://via.placeholder.com/400x275.png?text=Image'
+                  }
+                  to={`${pack.fields.slug}`}
+                />
+              );
+            })}
+          </PackGrid>
+        ) : (
+          <PackList>
+            {filteredPacks.map((pack) => {
+              // TODO: Figure out what image should be shown
+              // if not added to API explicitly
+              const imgSrc = pack.dashboards?.[0]?.screenshots?.[0];
+              return (
+                <PackListTile
+                  name={pack.name}
+                  key={pack.id}
+                  supportLevel={pack.level}
+                  description={pack.description}
+                  featuredImageUrl={
+                    imgSrc ||
+                    'https://via.placeholder.com/400x275.png?text=Image'
+                  }
+                  to={`${pack.fields.slug}`}
+                />
+              );
+            })}
+          </PackList>
+        )}
       </div>
     </>
   );