Merge pull request #149 from newrelic/feat/nr1512

feat: NR-1512 Quickstart Tiles UI Updates
newrelic · May 2, 2022 · 684587b · 684587b
2 parents f4d8aa9 + 84bd8d8
commit 684587b
Show file tree

Hide file tree

Showing 5 changed files with 177 additions and 186 deletions.
diff --git a/src/@newrelic/gatsby-theme-newrelic/components/GlobalFooter.js b/src/@newrelic/gatsby-theme-newrelic/components/GlobalFooter.js
@@ -94,14 +94,14 @@ const GlobalFooter = ({ className }) => {
             }}
           >
             <Icon
-              name="zap"
+              name="fe-zap"
               css={css`
                 margin-right: 7px;
               `}
             />
             Build your own
             <Icon
-              name="external-link"
+              name="fe-external-link"
               css={css`
                 margin-left: 7px;
               `}

diff --git a/src/@newrelic/gatsby-theme-newrelic/icons/feather.js b/src/@newrelic/gatsby-theme-newrelic/icons/feather.js
@@ -44,6 +44,18 @@ const featherIcons = {
       <polyline points="9 18 15 12 9 6" />
     </>
   ),
+  'arrow-left': (
+    <>
+      <line x1="19" y1="12" x2="5" y2="12" />
+      <polyline points="12 19 5 12 12 5" />
+    </>
+  ),
+  'arrow-right': (
+    <>
+      <line x1="5" y1="12" x2="19" y2="12" />
+      <polyline points="12 5 19 12 12 19" />
+    </>
+  ),
   circle: (
     <>
       <circle cx="12" cy="12" r="10" />

diff --git a/src/components/QuickstartTile.js b/src/components/QuickstartTile.js
@@ -8,22 +8,16 @@ import {
   Tag,
   Link,
 } from '@newrelic/gatsby-theme-newrelic';
-import {
-  SHIELD_LEVELS,
-  RESERVED_QUICKSTART_IDS,
-  LISTVIEW_BREAKPOINT,
-} from '../data/constants';
+import { SHIELD_LEVELS, RESERVED_QUICKSTART_IDS } from '../data/constants';
 import QuickstartImg from './QuickstartImg';
 
-const VIEWS = {
-  GRID: 'Grid view',
-  LIST: 'List view',
-};
+import { QUICKSTARTS_COLLAPSE_BREAKPOINT } from '../data/constants';
+
+import './fonts.scss';
 
 const QuickstartTile = ({
   id,
   title,
-  view,
   featured,
   name,
   fields,
@@ -41,30 +35,25 @@ const QuickstartTile = ({
         tessen.track({
           eventName: 'instantObservability',
           category: 'GuidedInstallClick',
-          publicCatalogView: view,
           quickstartName: name,
         });
         break;
       case quickstartId === RESERVED_QUICKSTART_IDS.BUILD_YOUR_OWN_QUICKSTART:
         tessen.track({
           eventName: 'instantObservability',
           category: 'BuildYourOwnQuickstartClick',
-          publicCatalogView: view,
           quickstartName: name,
         });
         break;
       default:
         tessen.track({
           eventName: 'instantObservability',
           category: 'QuickstartClick',
-          publicCatalogView: view,
           quickstartName: name,
         });
     }
   };
 
-  const isListView = () => view === VIEWS.LIST;
-
   return (
     <Surface
       as={Link}
@@ -76,43 +65,51 @@ const QuickstartTile = ({
       css={css`
         --tile-image-height: 100px; /* Logo image height */
         --title-row-height: auto; /* Title height to allow space for longer string */
-        padding: 1rem;
+        padding: 0 22px 35px 24px;
         overflow: hidden;
+        height: 360px;
+        min-width: 250px;
+        margin: 0 auto;
+        border: 1px solid #e4e5e6;
+        border-radius: 8px;
+        box-shadow: none;
+
+        @media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) {
+        padding: 0 32px 24px 32px;
+          width: 100%;
+          min-width: 250px;
+        }
+
+        h4,
+        p,
+        span {
+          font-family: 'Söhne-Leicht';
+          letter-spacing: -0.5%;
+          color: #1d252c;
+          font-weight: 600;
+
+          @media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) {
+          width: 100%;
+          font-family: 'Söhne-Buch';
+          font-weight: 400;
+        }
+
+        }
 
-        /* Default grid view */
         display: grid;
+        align-items: flex-start;
         grid-gap: 0.2rem;
-        grid-template-rows: var(--tile-image-height) var(--title-row-height) 1fr auto;
+        grid-template-rows: var(--tile-image-height) 152px auto;
         grid-template-columns: auto;
         grid-template-areas:
           'logo logo'
-          'title title'
-          'summary summary'
-          '. tag';
-
-        /* List view selected by control */
-        ${
-          isListView() &&
-          css`
-            grid-template-columns: 1fr 1fr 1fr;
-            grid-template-areas:
-              'logo title title'
-              'logo summary summary'
-              'logo tag tag';
-            grid-template-rows: auto;
-          `
-        }
+          'text text'
+          'tag arrow';
 
-        /* Breakpoint triggers List view */
-        @media screen and (max-width: ${LISTVIEW_BREAKPOINT}){
-          grid-template-areas:
-            'logo title title'
-            'logo summary summary';
-            'logo summary summary';
-          grid-template-columns: 1fr 1fr 1fr;
-          grid-template-rows: 0.5fr 1fr;
-          padding: 0.2rem 0.5rem;
+          @media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) {
+        grid-template-rows: 125px; 152px auto;
         }
+
       `}
       onClick={() => handlePackClick(id)}
     >
@@ -122,21 +119,8 @@ const QuickstartTile = ({
           display: flex;
           grid-area: logo;
           height: 100%;
-          justify-content: center;
+          justify-content: flex-start;
           margin-bottom: 1rem;
-
-          .dark-mode & {
-            background: var(--color-white);
-          }
-
-          ${isListView() &&
-          css`
-            margin-right: 0.5rem;
-          `}
-
-          @media screen and (max-width: ${LISTVIEW_BREAKPOINT}) {
-            margin-right: 0.5rem;
-          }
         `}
       >
         <div
@@ -149,79 +133,107 @@ const QuickstartTile = ({
             packName={title || name}
             css={css`
               object-fit: scale-down;
-              height: 100%;
+              height: 45px;
+              margin: 35px 0 0;
+
+              @media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) {
+                margin: 20px 0 0;
+                height: 70px;
+                max-width: 240px;
+              }
             `}
           />
         </div>
       </div>
-      <h4
+
+      <div
         css={css`
-          grid-area: title;
-
-          @media screen and (max-width: ${LISTVIEW_BREAKPOINT}) {
-            align-self: end;
-            font-size: 14px;
-            font-weight: 300;
-            margin: 0;
-          }
+          grid-area: text;
         `}
       >
-        {title}{' '}
-        {SHIELD_LEVELS.includes(level) && <Icon name="nr-check-shield" />}
-      </h4>
+        <h4
+          css={css`
+            grid-area: title;
+            font-size: 24px;
+            letter-spacing: -0.5%;
+          `}
+        >
+          {title}{' '}
+          {SHIELD_LEVELS.includes(level) && <Icon name="nr-check-shield" />}
+        </h4>
+
+        <div
+          css={css`
+            grid-area: summary;
+            align-self: flex-start;
+          `}
+        >
+          <p
+            css={css`
+              font-size: 18px;
+              line-height: 24px;
+
+              /* Limits the number of lines */
+              overflow: hidden;
+              display: -webkit-box;
+              text-overflow: ellipsis;
+              -webkit-box-orient: vertical;
+              -webkit-line-clamp: 3;
+
+              @media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) {
+                -webkit-line-clamp: 2;
+              }
+            `}
+          >
+            {summary || 'No summary provided'}
+          </p>
+        </div>
+      </div>
 
       <div
         css={css`
-          grid-area: summary;
+          justify-self: start;
+          align-self: end;
+          grid-area: tag;
         `}
       >
-        <p
+        <Tag
           css={css`
-            font-size: 0.8rem;
-            color: var(--secondary-text-color);
-
-            /* Limits the number of lines */
-            overflow: hidden;
-            display: -webkit-box;
-            text-overflow: ellipsis;
-            -webkit-box-orient: vertical;
-            -webkit-line-clamp: 3;
+            background: #e4e5e6;
+            border-radius: 4px;
+            font-weight: 600;
+            height: 32px;
+            width: 100px;
+            padding: 3px 8px 5px;
+            color: red;
+            line-spacing: unset;
           `}
         >
-          {summary || 'No summary provided'}
-        </p>
+          Read more
+        </Tag>
       </div>
       <div
         css={css`
+          grid-area: arrow;
           justify-self: end;
           align-self: end;
-          span {
-            color: var(--color-brand-500);
-          }
-          grid-area: tag;
-
-          @media screen and (max-width: ${LISTVIEW_BREAKPOINT}) {
-            display: none;
-          }
         `}
       >
-        {featured && (
-          <Tag
-            css={css`
-              background-color: var(--color-brand-100);
-            `}
-          >
-            Featured
-          </Tag>
-        )}
+        <Icon
+          css={css`
+            height: 16px;
+            color: #1d252c;
+          `}
+          name="fe-arrow-right"
+          size="120%"
+        />
       </div>
     </Surface>
   );
 };
 
 QuickstartTile.propTypes = {
   id: PropTypes.string.isRequired,
-  view: PropTypes.oneOf(Object.values(VIEWS)).isRequired,
   name: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
   fields: PropTypes.shape({

diff --git a/src/data/constants.js b/src/data/constants.js
@@ -39,4 +39,3 @@ export const RESERVED_QUICKSTART_IDS = {
 };
 
 export const QUICKSTARTS_COLLAPSE_BREAKPOINT = '760px';
-export const LISTVIEW_BREAKPOINT = '1080px';
Original file line number	Diff line number	Diff line change
Expand Up		@@ -39,4 +39,3 @@ export const RESERVED_QUICKSTART_IDS = {
		};

		export const QUICKSTARTS_COLLAPSE_BREAKPOINT = '760px';
		export const LISTVIEW_BREAKPOINT = '1080px';