Guidance Update Feature

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

@@ -1,19 +1,57 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Tag } from 'grommet';
 
 import { Box, Heading, Text } from 'grommet';
 
+import { useDarkMode } from '../../../../../../aries-site/src/utils';
+
 export const Identifier = ({
   children,
   level,
   title,
   subTitle,
   size,
+  updates,
+  type,
   ...rest
-}) => (
+}) => { 
+  return(
   <Box align="center" {...rest}>
-    {children}
-    <Box>
+    <Box direction='row' justify='between' fill='horizontal'>
+      {children}
+        {updates && (type === "Update") &&
+            <Tag 
+            size='small' 
+            border={{
+              color: 'border-weak',
+              size: "xsmall",
+              style: "solid",
+              side: "all"
+            }}  
+            background={{ dark: true, color: "teal" }}
+            value="Updated"
+            a11yTitle={`There's been updates for ${title}`}/>
+        }
+        {updates && (type === "New") &&
+            <Tag 
+            size='small' 
+            border={{
+              color: 'border-weak',
+              size: "xsmall",
+              style: "solid",
+              side: "all"
+            }}  
+            background={{ dark: true, color: "purple" }}
+            value="New!"
+            a11yTitle={`There's a new item called ${title}`}/>
+        }
+    </Box>
+    <Box
+    direction='row'
+    align='center'
+    justify='center'
+    gap='xsmall'>
       {level ? (
         <Heading level={level} margin="none">
           {title}
@@ -26,7 +64,9 @@ export const Identifier = ({
       <Text size={size}>{subTitle}</Text>
     </Box>
   </Box>
-);
+  );
+      };
+
 
 Identifier.propTypes = {
   children: PropTypes.node,

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

@@ -5,11 +5,23 @@ import { Identifier } from 'aries-core';
 import { PreviewImageCard } from './PreviewCard';
 import { LinkCard } from './LinkCard';
 import { useDarkMode } from '../../utils';
+import pageVisitTracker from '../../utils/pageVisitTracker';
 
 export const ContentCard = forwardRef(
   ({ level, topic, minimal, ...rest }, ref) => {
     const { description, name, parent, preview, render } = topic;
     const darkMode = useDarkMode();
+    const history = JSON.parse(window.localStorage.getItem("update-history"));
+    let newUpdate, type;
+    if(history){
+      if(name in history){
+        newUpdate = pageVisitTracker(name);
+        type = history[name].type;
+      }else{
+        newUpdate = false;
+      }
+    }
+
     return (
       <LinkCard fill pad="medium" ref={ref} {...rest}>
         <CardBody gap="large">
@@ -49,6 +61,8 @@ export const ContentCard = forwardRef(
               align="start"
               gap="xsmall"
               level={level}
+              updates={newUpdate}
+              type={type}
             >
               {parent && parent.icon && !minimal && (
                 <Box direction="row" align="center" gap="xsmall">

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

@@ -4,6 +4,8 @@ import PropTypes from 'prop-types';
 import { Box, Button, Nav, Text } from 'grommet';
 import styled, { ThemeContext } from 'styled-components';
 import { nameToSlug } from '../../utils';
+import { StatusGoodSmall } from 'grommet-icons';
+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,9 @@ export const InPageNavigation = ({ headings }) => {
   // align "Jump to section" with page title at start
   const marginTop = `${large + medium}px`;
 
+  const {wholeViewHistory, status, setStatus} = useContext(ViewContext) || undefined;
+
+
   return (
     <Box
       pad={{ horizontal: 'xxsmall' }} // pad for keyboard focus
@@ -108,6 +113,22 @@ export const InPageNavigation = ({ headings }) => {
           if (level.length > 3) subsectionPad = 'large';
           else if (level.length === 3) subsectionPad = 'medium';
 
+          let sectionList;
+          let newUpdate = false;
+
+          if(wholeViewHistory){
+            if(title in wholeViewHistory){
+              if(wholeViewHistory[title].update && (wholeViewHistory[title].sections[0].length > 0)){ 
+              //to see if the update should be shown and if there are sections reported
+                sectionList = wholeViewHistory[title].sections;
+                Object.values(sectionList).forEach(val => {
+                  if(val === headingTitle){ 
+                    newUpdate = true;
+                  }
+                });
+              } 
+            }
+          }
           return (
             <Link key={index} href={`#${nameToSlug(headingTitle)}`} passHref>
               <SectionButton theme={theme} hoverIndicator>
@@ -123,10 +144,18 @@ 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>
+                    {newUpdate &&
+                      <Box height={'24px'} justify='center'>
+                        <StatusGoodSmall size='11px' color='#117B82'/>
+                      </Box>
+                    }
                   </Box>
                 </Box>
               </SectionButton>

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

@@ -0,0 +1,42 @@
+import { Anchor, Text, Notification } from 'grommet';
+import { CircleInformation } from 'grommet-icons';
+import { ViewContext } from '../../pages/_app';
+import { useContext } from 'react';
+
+export const UpdateTag = ({name}) => {
+    const {wholeViewHistory} = useContext(ViewContext) || undefined;
+        if(wholeViewHistory && name in wholeViewHistory){
+            return (
+                <>
+                {(wholeViewHistory[name].type === "Update") &&
+                    <Notification width='large'
+                    title={"Updated " + new Date(wholeViewHistory[name].date).toDateString()} 
+                    message={
+                        <>
+                        <Text>{wholeViewHistory[name].description + "    "}
+                        {wholeViewHistory[name].action.length > 1 && 
+                            <Anchor label='Link' href={wholeViewHistory[name].action}/> 
+                        }
+                        </Text>
+                        </>
+                    } 
+                    margin={{ bottom: 'medium' }} icon={<CircleInformation/>}
+                    />
+                }
+                {(wholeViewHistory[name].type === "New") &&
+                    <Notification width='large'
+                    title={"Added on " + new Date(wholeViewHistory[name].date).toDateString()} 
+                    message={
+                        <>
+                        <Text>
+                        This item is new. Let the Design Systems team know if you have any feedback. 
+                        </Text>
+                        </>
+                    } 
+                    margin={{ bottom: 'medium' }} icon={<CircleInformation/>}
+                    />
+                }
+                </>
+            );
+        }
+};

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

@@ -4,6 +4,7 @@ import React, {
   useContext,
   useCallback,
   useState,
+  useLayoutEffect,
 } from 'react';
 import { useRouter } from 'next/router';
 import PropTypes from 'prop-types';
@@ -34,10 +35,13 @@ import {
   FeedbackButton,
   Feedback,
   Question,
+  components,
 } from '../../components';
 import { Config } from '../../../config';
 import { getRelatedContent, getPageDetails } from '../../utils';
 import { siteContents } from '../../data/search/contentForSearch';
+import { UpdateTag } from '../content/UpdateTag';
+import { ViewContext } from '../../pages/_app';
 
 export const Layout = ({
   backgroundImage,
@@ -46,6 +50,7 @@ export const Layout = ({
   topic,
   isLanding,
 }) => {
+
   useEffect(() => {
     if (Config.gaId) {
       initialize(Config.gaId);
@@ -127,6 +132,13 @@ export const Layout = ({
     { id: 'main', label: 'Main Content' },
   ].filter(link => link !== undefined);
 
+  const {wholeViewHistory, status, setStatus} = useContext(ViewContext) || undefined;
+
+  //every time a new page loads, initalize ready state to false, until app.js declares otherwise
+  useEffect(() => {
+    setStatus(false);
+  }, [title]);
+
   return (
     <>
       {/* When a backgroundImage is present, the main page content becomes 
@@ -164,7 +176,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 +194,9 @@ export const Layout = ({
                             topic={topic}
                             render={render}
                           />
+                          {status && wholeViewHistory[title]?.update &&
+                            <UpdateTag name={title} />
+                          }
                           {children}
                         </ContentSection>
                         {relatedContent.length > 0 && (

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

@@ -1,13 +1,25 @@
 import PropTypes from 'prop-types';
-import { Box, Paragraph, Text } from 'grommet';
+import { Box, Paragraph, Text, Tag } from 'grommet';
 
 import { getPageDetails } from '../../utils';
 import { HighlightPhrase } from '../../components';
 
+import pageVisitTracker from '../../utils/pageVisitTracker';
+import { ThemeContext } from 'styled-components';
+
 export const SearchResult = ({ query, result }) => {
   const hub = result.url && result.url.split('/')[1];
   const parent = getPageDetails(hub);
 
+  const history = JSON.parse(window.localStorage.getItem("update-history"));
+  let newUpdate, type;
+  if(result.title in history){
+    newUpdate = pageVisitTracker(result.title);
+    type = history[result.title].type;
+  }else{
+    newUpdate = false;
+  }
+
   return (
     <Box gap="xsmall" pad={{ vertical: 'xxsmall' }} width="large">
       <>
@@ -20,11 +32,49 @@ export const SearchResult = ({ query, result }) => {
           </Box>
         )}
         {result.title && (
+        <Box direction='row' gap='40px' align='center'>
           <Text size="large" color="text-strong">
             <HighlightPhrase phrase={query} fade={false} size="large">
               {result.title}
             </HighlightPhrase>
           </Text>
+          {newUpdate && (type === 'New') &&
+              <Tag 
+              size='xsmall' 
+              border={{
+                color: 'border-weak',
+                size: "xsmall",
+                style: "solid",
+                side: "all"
+              }} 
+              pad={
+                {
+                  vertical: 'none',
+                }
+              } 
+              background='#6633BC'
+              value="New!"
+              a11yTitle={`There's a new item called ${result.title}`}/>
+            }
+            {newUpdate && (type === 'Update') &&
+              <Tag 
+              size='xsmall' 
+              border={{
+                color: 'border-weak',
+                size: "xsmall",
+                style: "solid",
+                side: "all"
+              }}  
+              pad={
+                {
+                  vertical: 'none',
+                }
+              }
+              background='#117B82'
+              value="Updated"
+              a11yTitle={`There's been updates for ${result.title}`}/>
+            }
+        </Box>
         )}
       </>
       {result.matches?.length > 0 ? (