Guidance Update Feature

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { NotifTag } from '../../../../../../aries-site/src/layouts/content/NotifTag';
 
 import { Box, Heading, Text } from 'grommet';
 
@@ -9,24 +10,46 @@ export const Identifier = ({
   title,
   subTitle,
   size,
+  updates,
+  type,
   ...rest
-}) => (
-  <Box align="center" {...rest}>
-    {children}
-    <Box>
-      {level ? (
-        <Heading level={level} margin="none">
-          {title}
-        </Heading>
-      ) : (
-        <Text size={size} weight="bold" color="text-strong">
-          {title}
-        </Text>
-      )}
-      <Text size={size}>{subTitle}</Text>
+}) => {
+  return (
+    <Box align="center" {...rest}>
+      <Box direction="row" justify="between" fill="horizontal">
+        {children}
+        {updates && type === 'Update' && (
+          <NotifTag
+            color="teal"
+            allyDes={`There's been updates for ${title}`}
+            textVal="Updated"
+            size="small"
+          />
+        )}
+        {updates && type === 'New' && (
+          <NotifTag
+            color="purple"
+            allyDes={`There's a new item called ${title}`}
+            textVal="New!"
+            size="small"
+          />
+        )}
+      </Box>
+      <Box direction="row" align="center" justify="center" gap="xsmall">
+        {level ? (
+          <Heading level={level} margin="none">
+            {title}
+          </Heading>
+        ) : (
+          <Text size={size} weight="bold" color="text-strong">
+            {title}
+          </Text>
+        )}
+        <Text size={size}>{subTitle}</Text>
+      </Box>
     </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,20 @@ 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 = false;
+    let type;
+    if (history && name in history) {
+      newUpdate = pageVisitTracker(name);
+      type = history[name].type;
+    }
+
     return (
       <LinkCard fill pad="medium" ref={ref} {...rest}>
         <CardBody gap="large">
@@ -49,6 +58,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,8 @@ export const InPageNavigation = ({ headings }) => {
   // align "Jump to section" with page title at start
   const marginTop = `${large + medium}px`;
 
+  const { wholeViewHistory } = useContext(ViewContext) || undefined;
+
   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 newUpdate = false;
+
+          if (
+            wholeViewHistory &&
+            title in wholeViewHistory &&
+            wholeViewHistory[title].update &&
+            wholeViewHistory[title].sections[0].length > 0
+          ) {
+            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,20 @@ 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 justify="top">
+                        <Text>
+                          <StatusGoodSmall size="10px" color="#117B82" />
+                        </Text>
+                      </Box>
+                    )}
                   </Box>
                 </Box>
               </SectionButton>

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

@@ -0,0 +1,18 @@
+import { Tag } from 'grommet';
+
+export const NotifTag = ({ size, color, allyDes, textVal }) => {
+  return (
+    <Tag
+      size={size}
+      border={{
+        color: 'border-weak',
+        size: 'xsmall',
+        style: 'solid',
+        side: 'all',
+      }}
+      background={{ dark: true, color: color }}
+      value={textVal}
+      a11yTitle={allyDes}
+    />
+  );
+};

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

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

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

@@ -34,10 +34,13 @@ import {
   FeedbackButton,
   Feedback,
   Question,
+  components,
 } from '../../components';
 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 +130,14 @@ export const Layout = ({
     { id: 'main', label: 'Main Content' },
   ].filter(link => link !== undefined);
 
+  const { wholeViewHistory, pageUpdateReady, setPageUpdateReady } =
+    useContext(ViewContext) || undefined;
+
+  //every time a new page loads, initalize ready state to false, until app.js declares otherwise
+  useEffect(() => {
+    setPageUpdateReady(false);
+  }, [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,10 @@ export const Layout = ({
                             topic={topic}
                             render={render}
                           />
+                          {pageUpdateReady &&
+                            wholeViewHistory[title]?.update && (
+                              <UpdateNotification 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 { NotifTag } from '../content/NotifTag';
+
 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,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>
+            {newUpdate && type === 'New' && (
+              <NotifTag
+                size="xsmall"
+                color="purple"
+                textVal="New!"
+                allyDes={`There's a new item called ${result.title}`}
+              />
+            )}
+            {newUpdate && type === 'Update' && (
+              <NotifTag
+                size="xsmall"
+                color="teal"
+                textVal="Updated"
+                allyDes={`There's been updates for ${result.title}`}
+              />
+            )}
+          </Box>
         )}
       </>
       {result.matches?.length > 0 ? (