Guidance Update Feature

aries-core/src/js/components/core/Identifier/Identifier.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-
 import { Box, Heading, Text } from 'grommet';
 
 export const Identifier = ({
@@ -13,7 +12,7 @@ export const Identifier = ({
 }) => (
   <Box align="center" {...rest}>
     {children}
-    <Box>
+    <Box direction="row" align="center" justify="center" gap="xsmall">
       {level ? (
         <Heading level={level} margin="none">
           {title}

aries-site/package.json

@@ -6,10 +6,10 @@
   "main": "src/pages/index.js",
   "private": true,
   "dependencies": {
-    "aries-core": "*",
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
     "@next/mdx": "^13.4.4",
+    "aries-core": "*",
     "next": "13.4.4",
     "react-ga": "^2.7.0",
     "react-syntax-highlighter": "^15.4.4",

aries-site/src/components/cards/ContentCard.js

@@ -1,15 +1,28 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { Box, CardBody, Image, Text } from 'grommet';
 import { Identifier } from 'aries-core';
 import { PreviewImageCard } from './PreviewCard';
 import { LinkCard } from './LinkCard';
 import { useDarkMode } from '../../utils';
+import { pageVisitTracker } from '../../utils/pageVisitTracker';
+import { NotificationTag } from '../../layouts/content/NotificationTag';
+import { ViewContext } from '../../pages/_app';
 
 export const ContentCard = forwardRef(
   ({ level, topic, minimal, ...rest }, ref) => {
     const { description, name, parent, preview, render } = topic;
     const darkMode = useDarkMode();
+
+    const { contentHistory } = useContext(ViewContext);
+    let showUpdate = false;
+    let changeKind;
+    if (contentHistory && name in contentHistory) {
+      // still run pageVisitTracker on it
+      showUpdate = pageVisitTracker(name, contentHistory);
+      changeKind = contentHistory[name].changeKind;
+    }
+
     return (
       <LinkCard fill pad="medium" ref={ref} {...rest}>
         <CardBody gap="large">
@@ -51,9 +64,34 @@ export const ContentCard = forwardRef(
               level={level}
             >
               {parent && parent.icon && !minimal && (
-                <Box direction="row" align="center" gap="xsmall">
-                  {parent.icon('small', parent.color)}
-                  <Text>{parent.name}</Text>
+                <Box
+                  direction="row"
+                  align="center"
+                  fill="horizontal"
+                  justify="between"
+                >
+                  <Box gap="xsmall" direction="row" align="center">
+                    {parent.icon('small', parent.color)}
+                    <Text>{parent.name}</Text>
+                  </Box>
+                  {showUpdate && changeKind === 'Update' && (
+                    <NotificationTag
+                      backgroundColor="teal"
+                      a11yTitle={`There have been updates for ${
+                        render || name
+                      }`}
+                      value="Updated"
+                      size="small"
+                    />
+                  )}
+                  {showUpdate && changeKind === 'New' && (
+                    <NotificationTag
+                      backgroundColor="purple"
+                      a11yTitle={`There's a new item called ${render || name}`}
+                      value="New!"
+                      size="small"
+                    />
+                  )}
                 </Box>
               )}
             </Identifier>

aries-site/src/components/seo/Meta.js

@@ -19,7 +19,7 @@ export const Meta = ({
   const pageContent = 'products';
   const csp = `default-src 'self' 'unsafe-eval'; 
   style-src 'self' *.hpe.com/hfws-static/5/css/ 'unsafe-inline';
-  connect-src 'self' *.githubusercontent.com/grommet/hpe-design-system/ https://www.google-analytics.com https://www.github.com/grommet/ https://eyes.applitools.com *.hpe.com/hpe/api/ https://ca1.qualtrics.com/API/v3/surveys/ https://api.spacexdata.com/;
+  connect-src 'self' *.githubusercontent.com/grommet/hpe-design-system/ https://api.github.com/repos/grommet/hpe-design-system/pulls https://api.github.com/repos/grommet/hpe-design-system/commits https://www.google-analytics.com https://www.github.com/grommet/ https://eyes.applitools.com *.hpe.com/hpe/api/ https://ca1.qualtrics.com/API/v3/surveys/ https://api.spacexdata.com/;
   media-src 'self' https://d3hq6blov2iije.cloudfront.net/media/;
   img-src 'self' data: https://www.google-analytics.com https://images.unsplash.com/ http://s.gravatar.com/avatar/ *.hpe.com/hfws-static/5/ https://d3hq6blov2iije.cloudfront.net/images/textures/ https://d3hq6blov2iije.cloudfront.net/images/gradients/ https://d3hq6blov2iije.cloudfront.net/images/hpe-greenlake/;
   script-src 'self' *.hpe.com https://www.google-analytics.com/analytics.js https://netlify-cdp-loader.netlify.app/netlify.js ${

aries-site/src/layouts/content/InPageNavigation.js

@@ -3,7 +3,9 @@ import Link from 'next/link';
 import PropTypes from 'prop-types';
 import { Box, Button, Nav, Text } from 'grommet';
 import styled, { ThemeContext } from 'styled-components';
+import { StatusGoodSmall } from 'grommet-icons';
 import { nameToSlug } from '../../utils';
+import { ViewContext } from '../../pages/_app';
 
 const SectionButton = styled(Button)`
   border-radius: 0 ${props => props.theme.global.edgeSize.xsmall}
@@ -44,7 +46,7 @@ const useActiveHeadingId = (headings, options) => {
   return activeHeadingId;
 };
 
-export const InPageNavigation = ({ headings }) => {
+export const InPageNavigation = ({ headings, title }) => {
   const theme = useContext(ThemeContext);
 
   let { large, medium } = theme.global.edgeSize;
@@ -61,6 +63,8 @@ export const InPageNavigation = ({ headings }) => {
   // align "Jump to section" with page title at start
   const marginTop = `${large + medium}px`;
 
+  const { pageUpdateReady, contentHistory } = useContext(ViewContext);
+
   return (
     <Box
       pad={{ horizontal: 'xxsmall' }} // pad for keyboard focus
@@ -108,6 +112,23 @@ export const InPageNavigation = ({ headings }) => {
           if (level.length > 3) subsectionPad = 'large';
           else if (level.length === 3) subsectionPad = 'medium';
 
+          let sectionList;
+          let showUpdate = false;
+
+          if (
+            contentHistory &&
+            title in contentHistory &&
+            contentHistory[title].update &&
+            contentHistory[title].sections[0].length > 0
+          ) {
+            sectionList = contentHistory[title].sections;
+            Object.values(sectionList).forEach(val => {
+              if (val.toLowerCase() === headingTitle.toLowerCase()) {
+                showUpdate = true;
+              }
+            });
+          }
+
           return (
             <Link key={index} href={`#${nameToSlug(headingTitle)}`} passHref>
               <SectionButton theme={theme} hoverIndicator>
@@ -123,10 +144,23 @@ export const InPageNavigation = ({ headings }) => {
                         ? undefined
                         : { left: theme.global.borderSize.small }
                     }
+                    direction="row"
+                    align="top"
+                    gap="small"
                   >
                     <Text color="text-strong" size="small" weight="normal">
                       {headingTitle}
                     </Text>
+                    {showUpdate && pageUpdateReady && (
+                      <Box background={{ dark: true }} justify="top">
+                        <StatusGoodSmall
+                          a11yTitle="Section has been updated"
+                          size="10px"
+                          color="teal"
+                          height="small"
+                        />
+                      </Box>
+                    )}
                   </Box>
                 </Box>
               </SectionButton>
@@ -140,4 +174,5 @@ export const InPageNavigation = ({ headings }) => {
 
 InPageNavigation.propTypes = {
   headings: PropTypes.arrayOf(PropTypes.array),
+  title: PropTypes.string,
 };

aries-site/src/layouts/content/NotificationTag.js

@@ -0,0 +1,21 @@
+import PropTypes from 'prop-types';
+import { Tag } from 'grommet';
+
+export const NotificationTag = ({ backgroundColor, ...rest }) => {
+  return (
+    <Tag
+      border={{
+        color: 'border-weak',
+        size: 'xsmall',
+        style: 'solid',
+        side: 'all',
+      }}
+      background={{ dark: true, color: backgroundColor }}
+      {...rest}
+    />
+  );
+};
+
+NotificationTag.propTypes = {
+  backgroundColor: PropTypes.string,
+};

aries-site/src/layouts/content/UpdateNotification.js

@@ -0,0 +1,49 @@
+import PropTypes from 'prop-types';
+import { Anchor, Text, Notification } from 'grommet';
+import { useContext } from 'react';
+import { ViewContext } from '../../pages/_app';
+
+export const UpdateNotification = ({ name }) => {
+  const { contentHistory } = useContext(ViewContext);
+  const updateDate = contentHistory[name]?.date;
+
+  if (contentHistory && name in contentHistory) {
+    return (
+      <Notification
+        status="info"
+        margin={{ bottom: 'medium' }}
+        width="large"
+        message={
+          contentHistory[name]?.changeKind === 'Update' ? (
+            <Text>
+              {`${contentHistory[name]?.description}    `}
+              {contentHistory[name]?.action?.length > 1 && (
+                <Anchor
+                  label="Jump to section"
+                  href={contentHistory[name]?.action}
+                />
+              )}
+            </Text>
+          ) : (
+            <Text>
+              This item is new. Let the Design System team know if you have any
+              feedback.
+            </Text>
+          )
+        }
+        title={`${
+          contentHistory[name]?.changeKind === 'Update'
+            ? 'Updated '
+            : 'Added on '
+        }${Intl.DateTimeFormat(undefined, { dateStyle: 'long' }).format(
+          new Date(updateDate),
+        )}`}
+      />
+    );
+  }
+  return null;
+};
+
+UpdateNotification.propTypes = {
+  name: PropTypes.string,
+};

aries-site/src/layouts/main/Layout.js

@@ -38,6 +38,8 @@ import {
 import { Config } from '../../../config';
 import { getRelatedContent, getPageDetails } from '../../utils';
 import { siteContents } from '../../data/search/contentForSearch';
+import { UpdateNotification } from '../content/UpdateNotification';
+import { ViewContext } from '../../pages/_app';
 
 export const Layout = ({
   backgroundImage,
@@ -127,6 +129,15 @@ export const Layout = ({
     { id: 'main', label: 'Main Content' },
   ].filter(link => link !== undefined);
 
+  const { contentHistory, pageUpdateReady, setPageUpdateReady } =
+    useContext(ViewContext);
+
+  // every time a new page loads, initalize ready
+  // state to false, until app.js declares otherwise
+  useEffect(() => {
+    setPageUpdateReady(false);
+  }, [setPageUpdateReady, title]);
+
   return (
     <>
       {/* When a backgroundImage is present, the main page content becomes 
@@ -164,7 +175,7 @@ export const Layout = ({
                       {showInPageNav ? (
                         <Box pad={{ left: 'large' }}>
                           <SkipLinkTarget id="toc" />
-                          <InPageNavigation headings={headings} />
+                          <InPageNavigation title={title} headings={headings} />
                         </Box>
                       ) : undefined}
                       <Box
@@ -182,6 +193,9 @@ export const Layout = ({
                             topic={topic}
                             render={render}
                           />
+                          {pageUpdateReady && contentHistory[title]?.update && (
+                            <UpdateNotification name={title} />
+                          )}
                           {children}
                         </ContentSection>
                         {relatedContent.length > 0 && (

aries-site/src/layouts/navigation/SearchResult.js

@@ -1,13 +1,28 @@
 import PropTypes from 'prop-types';
 import { Box, Paragraph, Text } from 'grommet';
 
+import { useContext } from 'react';
 import { getPageDetails } from '../../utils';
 import { HighlightPhrase } from '../../components';
 
+import { pageVisitTracker } from '../../utils/pageVisitTracker';
+import { NotificationTag } from '../content/NotificationTag';
+import { ViewContext } from '../../pages/_app';
+
 export const SearchResult = ({ query, result }) => {
   const hub = result.url && result.url.split('/')[1];
   const parent = getPageDetails(hub);
 
+  const { contentHistory } = useContext(ViewContext);
+  let showUpdate;
+  let changeKind;
+  if (result.title in contentHistory) {
+    showUpdate = pageVisitTracker(result.title, contentHistory);
+    changeKind = contentHistory[result.title].changeKind;
+  } else {
+    showUpdate = false;
+  }
+
   return (
     <Box gap="xsmall" pad={{ vertical: 'xxsmall' }} width="large">
       <>
@@ -20,11 +35,29 @@ export const SearchResult = ({ query, result }) => {
           </Box>
         )}
         {result.title && (
-          <Text size="large" color="text-strong">
-            <HighlightPhrase phrase={query} fade={false} size="large">
-              {result.title}
-            </HighlightPhrase>
-          </Text>
+          <Box direction="row" gap="medium" align="center">
+            <Text size="large" color="text-strong">
+              <HighlightPhrase phrase={query} fade={false} size="large">
+                {result.title}
+              </HighlightPhrase>
+            </Text>
+            {showUpdate && changeKind === 'New' && (
+              <NotificationTag
+                size="xsmall"
+                backgroundColor="purple"
+                value="New!"
+                a11yTitle={`There's a new item called ${result.title}`}
+              />
+            )}
+            {showUpdate && changeKind === 'Update' && (
+              <NotificationTag
+                size="xsmall"
+                backgroundColor="teal"
+                value="Updated"
+                a11yTitle={`There have been updates for ${result.title}`}
+              />
+            )}
+          </Box>
         )}
       </>
       {result.matches?.length > 0 ? (