feat: UI modifications to the article template (#856)

* Update query to include byline, labels, location and tags * Update types * Update query for labels and display byline and location * Add tags * Remove labels * Make byline, location and tags optional * Remove unnecessary <span> from <BreadcrumbNav /> * Add id for tags * Add Label * Add Category and change display order for labels and tags * Remove comments and update destructuring * Add a default category tag to display * Add category to mock
USSF-ORBIT · Nov 18, 2022 · dc7402c · dc7402c
1 parent 7d50a12
commit dc7402c
Show file tree

Hide file tree

Showing 11 changed files with 113 additions and 24 deletions.
diff --git a/src/components/SingleArticle/SingleArticle.module.scss b/src/components/SingleArticle/SingleArticle.module.scss
@@ -12,9 +12,19 @@
     margin-top: units(3);
   }
 
+  .tagAndLabelContainer {
+    display: flex;
+    align-items: center;
+  }
+
   .metadata {
+    display: flex;
     margin-bottom: units(4);
 
+    div {
+      padding-right: 4rem;
+    }
+
     dt {
       font-size: size('body', 1);
     }

diff --git a/src/components/SingleArticle/SingleArticle.stories.tsx b/src/components/SingleArticle/SingleArticle.stories.tsx
@@ -20,6 +20,7 @@ const testArticle = {
   slug: 'test-article',
   title:
     'Version 2.8.5 released! Includes MVP search experience and a way to filter the news.',
+  category: 'InternalNews',
   publishedDate: '2022-05-17T13:44:39.796Z',
   body: {
     document: [

diff --git a/src/components/SingleArticle/SingleArticle.test.tsx b/src/components/SingleArticle/SingleArticle.test.tsx
@@ -12,6 +12,7 @@ const testArticle = {
   slug: 'test-article',
   title:
     'Version 2.8.5 released! Includes MVP search experience and a way to filter the news.',
+  category: 'InternalNews',
   publishedDate: '2022-05-17T13:44:39.796Z',
   body: {
     document: [

diff --git a/src/components/SingleArticle/SingleArticle.tsx b/src/components/SingleArticle/SingleArticle.tsx
@@ -1,15 +1,23 @@
 import React from 'react'
 import { DocumentRenderer } from '@keystone-6/document-renderer'
-
+import { Tag } from '@trussworks/react-uswds'
+import tagStyles from '../Tag/Tag.module.scss'
 import styles from './SingleArticle.module.scss'
-
+import { Category, Label } from 'components/Tag/Tag'
 import type { ArticleRecord } from 'types'
+import { CONTENT_CATEGORIES } from 'constants/index'
+import colors from 'styles/sfds/colors.module.scss'
 
 export const SingleArticle = ({ article }: { article: ArticleRecord }) => {
   const {
     title,
+    category,
     publishedDate,
     body: { document },
+    byline,
+    location,
+    labels,
+    tags,
   } = article
 
   const dateFormatter = new Intl.DateTimeFormat('en-us', {
@@ -21,16 +29,58 @@ export const SingleArticle = ({ article }: { article: ArticleRecord }) => {
 
   return (
     <article className={styles.SingleArticle}>
-      <div className={styles.title}>
+      <div>
+        <div className={styles.tagAndLabelContainer}>
+          {category === 'InternalNews' ? (
+            <Category category={CONTENT_CATEGORIES.INTERNAL_NEWS} />
+          ) : (
+            <Tag className={`${tagStyles.Category}`}>{category}</Tag>
+          )}
+
+          {labels &&
+            labels.map((label) => {
+              return (
+                <Label type={label.type} key={`${label.id}`}>
+                  {label.name}
+                </Label>
+              )
+            })}
+
+          {tags &&
+            tags.map((tag) => {
+              return (
+                <Tag key={`${tag.id}`} background={colors['theme-mars-base']}>
+                  {tag.name}
+                </Tag>
+              )
+            })}
+        </div>
+
         <h2>{title}</h2>
 
         <dl className={styles.metadata}>
-          <dt>Post date:</dt>
-          <dd>
-            <time dateTime={publishedDateObj.toLocaleString()}>
-              {dateFormatter.format(publishedDateObj)}
-            </time>
-          </dd>
+          <div>
+            <dt>Post date:</dt>
+            <dd>
+              <time dateTime={publishedDateObj.toLocaleString()}>
+                {dateFormatter.format(publishedDateObj)}
+              </time>
+            </dd>
+          </div>
+
+          {byline && (
+            <div>
+              <dt>Written by:</dt>
+              <dd>{byline.name}</dd>
+            </div>
+          )}
+
+          {location && (
+            <div>
+              <dt>Posted from:</dt>
+              <dd>{location.name}</dd>
+            </div>
+          )}
         </dl>
       </div>
 

diff --git a/src/operations/cms/queries/getArticle.ts b/src/operations/cms/queries/getArticle.ts
@@ -12,6 +12,21 @@ export const GET_ARTICLE = gql`
       }
       publishedDate
       status
+      byline {
+        name
+      }
+      labels {
+        id
+        name
+        type
+      }
+      location {
+        name
+      }
+      tags {
+        id
+        name
+      }
     }
   }
 `
diff --git a/src/pages/about-us/index.tsx b/src/pages/about-us/index.tsx
@@ -170,10 +170,10 @@ AboutUs.getLayout = (page: React.ReactNode) =>
       <h1>About us</h1>
       <BreadcrumbNav
         navItems={[
-          { path: '/', label: <span>Service portal home</span> },
+          { path: '/', label: 'Service portal home' },
           {
             path: '/about-us',
-            label: <span>About Us</span>,
+            label: 'About Us',
             current: true,
           },
         ]}

diff --git a/src/pages/about-us/orbit-blog.tsx b/src/pages/about-us/orbit-blog.tsx
@@ -48,11 +48,11 @@ PortalNews.getLayout = (page: React.ReactNode) =>
       <h1>ORBIT Blog</h1>
       <BreadcrumbNav
         navItems={[
-          { path: '/', label: <span>Service portal home</span> },
-          { path: '/about-us', label: <span>About Us</span> },
+          { path: '/', label: 'Service portal home' },
+          { path: '/about-us', label: 'About Us' },
           {
             path: '/orbit-blog',
-            label: <span>ORBIT Blog</span>,
+            label: 'ORBIT Blog',
             current: true,
           },
         ]}

diff --git a/src/pages/articles/[article].tsx b/src/pages/articles/[article].tsx
@@ -17,11 +17,11 @@ const ORBITBlogArticleHeader = () => (
       <h1>ORBIT Blog</h1>
       <BreadcrumbNav
         navItems={[
-          { path: '/', label: <span>Service portal home</span> },
-          { path: '/about-us', label: <span>About Us</span> },
+          { path: '/', label: 'Service portal home' },
+          { path: '/about-us', label: 'About Us' },
           {
             path: '/about-us/orbit-blog',
-            label: <span>ORBIT Blog</span>,
+            label: 'ORBIT Blog',
             current: true,
           },
         ]}
@@ -36,10 +36,10 @@ const InternalNewsArticleHeader = () => (
       <h1>News</h1>
       <BreadcrumbNav
         navItems={[
-          { path: '/', label: <span>Service portal home</span> },
+          { path: '/', label: 'Service portal home' },
           {
             path: '/news',
-            label: <span>News</span>,
+            label: 'News',
             current: true,
           },
         ]}

diff --git a/src/pages/news.tsx b/src/pages/news.tsx
@@ -43,15 +43,15 @@ InternalNews.getLayout = (page: React.ReactNode) =>
         navItems={[
           {
             path: '/',
-            label: <span>Service portal home</span>,
+            label: 'Service portal home',
           },
           {
             path: '/about-us',
-            label: <span>About Us</span>,
+            label: 'About Us',
           },
           {
             path: '/news',
-            label: <span>Internal News</span>,
+            label: 'Internal News',
             current: true,
           },
         ]}

diff --git a/src/pages/search.tsx b/src/pages/search.tsx
@@ -37,11 +37,11 @@ const Search = ({
             navItems={[
               {
                 path: '/',
-                label: <span>Service portal home</span>,
+                label: 'Service portal home',
               },
               {
                 path: '/search',
-                label: <span>Search</span>,
+                label: 'Search',
                 current: true,
               },
               {

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -62,10 +62,22 @@ export type ArticleRecord = {
   id: string
   slug: string
   title: string
+  category: string
   publishedDate: string
   body: {
     document: Element[]
   }
+  byline?: {
+    name: string
+  }
+  labels?: LabelRecord[]
+  location?: {
+    name: string
+  }
+  tags?: {
+    id: string
+    name: string
+  }[]
 }
 
 /* LabelRecord is a label managed by the CMS */