Merge pull request #49 in USAFHNI/digital-trinity from feature/various-04-09 to develop

* commit '0a197bf8':
  Adding larger click area to mobile menu links
  Adding new logos and lings to footers Updates to some hero logo images A11y titles for hero logo images Lines for home step component
  Adjusting spacing for service category list Removing black background at mobile size for service hero Fixing scroll for service category hero icon
  Fixing zindex on the feedback form modals Adding trailing slash for mobile menu

src/components/Classification.js

@@ -46,7 +46,7 @@ const Classification = ({ levels, serviceName }) => {
     <Box
       direction="row"
       align="start"
-      style={{ minWidth: '380px', maxWidth: '500px' }}
+      style={{ maxWidth: '500px' }}
       a11yTitle={`Classification levels supported by ${serviceName}: ${supportedLevels}`}
     >
       <Box

src/components/FeedbackFooter.js

 import React, { useContext, useState } from 'react';
-import { Box, Text, Layer, ResponsiveContext } from 'grommet';
+import { Box, Text, Layer, ResponsiveContext, ThemeContext } from 'grommet';
 import FeedbackForm from './FeedbackForm';
 import { Container, Column } from './layout';
 import { SecondaryButton } from './core';
@@ -53,9 +53,19 @@ const FeedbackFooter = () => {
         </Column>
       </Container>
       {isOpen && (
-        <Layer animation="fadeIn">
-          <FeedbackForm onClose={handleToggleOpen} />
-        </Layer>
+        <ThemeContext.Extend
+          value={{
+            layer: {
+              extend: () => ({
+                zIndex: '50',
+              }),
+            },
+          }}
+        >
+          <Layer animation="fadeIn">
+            <FeedbackForm onClose={handleToggleOpen} />
+          </Layer>
+        </ThemeContext.Extend>
       )}
     </>
   );

src/components/app/Footer.js

@@ -4,6 +4,7 @@ import { Container, Column } from '../layout';
 import { Link } from '../core';
 import AFLogo from '../../images/af-logo.svg';
 import C3Logo from '../../images/c3.png';
+import AFMCLogo from '../../images/AFMC.png';
 
 const Footer = () => {
   const size = useContext(ResponsiveContext);
@@ -18,29 +19,55 @@ const Footer = () => {
           justify="between"
           direction={isMobile ? 'column' : 'row'}
           gap="large"
-          aria-hidden="true"
         >
           <Box
-            gap="medium"
-            justify="center"
+            gap="small"
+            justify="start"
             align={isMobile ? 'center' : 'start'}
           >
             <Link to="/about-us/" color="light-1" size="small" weight="bold">
               About Us
             </Link>
+            <Link
+              to="/our-other-programs/"
+              color="light-1"
+              size="small"
+              weight="bold"
+            >
+              Our Other Programs
+            </Link>
+            <Link
+              to="https://www.wpafb.af.mil/Welcome/Fact-Sheets/Display/Article/835716/88-abw-freedom-of-information-act-foia-88-abw-installation-privacy-office/"
+              color="light-1"
+              size="small"
+            >
+              FOIA
+            </Link>
           </Box>
           <Box
             direction={isMobile ? 'column' : 'row'}
             gap="medium"
             align="center"
           >
-            <img
-              src={C3Logo}
-              width="117"
-              height="117"
-              alt="C3I & Networks Directorate logo"
-            />
-            <AFLogo height="117" />
+            <Link to="https://www.aflcmc.af.mil/WELCOME/Organizations/Command-Control-Communications-Intelligence-Networks-Directorate/">
+              <img
+                src={C3Logo}
+                width="117"
+                height="117"
+                alt="C3I & Networks Directorate"
+              />
+            </Link>
+            <Link to="https://www.afmc.af.mil/">
+              <img
+                src={AFMCLogo}
+                width="117"
+                height="117"
+                alt="Air Force Material Command"
+              />
+            </Link>
+            <Link to="https://www.af.mil/">
+              <AFLogo height="117" width="150" />
+            </Link>
           </Box>
         </Box>
       </Column>

src/components/hero/Hero.js

@@ -84,7 +84,8 @@ const Slide = ({ title, subtitle, core, cta, slug, logo, isMobile, size }) => {
             <Box style={{ maxWidth: '600px', maxHeight: '250px' }}>
               <Img
                 fluid={logo.childImageSharp.fluid}
-                imgStyle={{ objectFit: 'contain' }}
+                imgStyle={{ objectFit: 'contain', objectPosition: '0 50%' }}
+                alt={title}
               />
             </Box>
           )}
@@ -253,7 +254,7 @@ const Hero = () => {
   return (
     <Box
       height="85vh"
-      style={{ position: 'relative', minHeight: '500px' }}
+      style={{ position: 'relative', minHeight: '680px' }}
       background="brand"
     >
       <Container fill="vertical">

src/components/hero/ServiceCatHero.js

@@ -16,8 +16,8 @@ const ServiceCatHero = ({ title, description, imageFluid, iconName }) => {
   return (
     <Container
       background="black"
-      style={{ position: 'relative' }}
-      pad={{
+      style={{ position: 'relative', overflow: 'hidden' }}
+      margin={{
         top: isMobile
           ? theme.custom.header.stickyHeight
           : theme.custom.header.height,
@@ -56,7 +56,11 @@ const ServiceCatHero = ({ title, description, imageFluid, iconName }) => {
               {title}
             </Heading>
             <Box width={isMobile ? 'auto' : '500px'}>
-              {description && <Markdown>{description}</Markdown>}
+              {description && (
+                <Markdown size="small" margin="0">
+                  {description}
+                </Markdown>
+              )}
             </Box>
           </Box>
           {!isMobile && (
@@ -67,24 +71,24 @@ const ServiceCatHero = ({ title, description, imageFluid, iconName }) => {
               gap="medium"
               flex={{ grow: 1 }}
             >
-              <IconComponent size="300" color={isMobile ? 'dark-4' : 'white'} />
+              <IconComponent size="200" color={isMobile ? 'dark-4' : 'white'} />
             </Box>
           )}
         </Box>
-        {isMobile && (
-          <IconComponent
-            size="300"
-            color="dark-4"
-            style={{
-              position: 'fixed',
-              right: '-150px',
-              top: '100px',
-              zIndex: 2,
-            }}
-          />
-        )}
       </Column>
-
+      {isMobile && (
+        <IconComponent
+          size="250"
+          color="dark-4"
+          style={{
+            position: 'absolute',
+            right: '0',
+            top: '50%',
+            zIndex: 2,
+            transform: 'translate(50%, -50%)',
+          }}
+        />
+      )}
       <DownHex />
     </Container>
   );

src/components/hero/ServiceHero.js

@@ -16,24 +16,26 @@ const ServiceHero = ({ title, subtitle, pretitle, categories, imageFluid }) => {
     <Container
       background="black"
       style={{ position: 'relative' }}
-      pad={{ top: theme.custom.header.height }}
+      pad={{
+        top: isMobile
+          ? theme.custom.header.stickyHeight
+          : theme.custom.header.height,
+      }}
     >
-      {!isMobile && (
-        <Img
-          fluid={imageFluid}
-          alt="Hero"
-          style={{
-            position: 'absolute',
-            top: '0',
-            left: '0',
-            right: '0',
-            bottom: '0',
-          }}
-        />
-      )}
+      <Img
+        fluid={imageFluid}
+        alt="Hero"
+        style={{
+          position: 'absolute',
+          top: '0',
+          left: '0',
+          right: '0',
+          bottom: '0',
+        }}
+      />
       <Column
         direction="row"
-        pad={{ bottom: 'large' }}
+        pad={{ bottom: 'xlarge' }}
         style={{ position: 'relative' }}
       >
         <Box pad="large">

src/components/layout/Column.js

 import React, { useContext } from 'react';
-import { Box } from 'grommet';
+import { Box, ResponsiveContext } from 'grommet';
 import DebugContext from '../../DebugContext';
 
 const Column = (props) => {
   const debug = useContext(DebugContext);
+  const size = useContext(ResponsiveContext);
+  const isMobile = ['xsmall'].includes(size);
   return (
     <Box
       width="xxlarge"
       border={debug && { color: 'blue' }}
-      pad={{ horizontal: 'large' }}
+      pad={{ horizontal: isMobile ? 'medium' : 'large' }}
       flex="grow"
       {...props}
     />

src/components/mega-menu/MegaMobileMenu.js

@@ -9,9 +9,9 @@ const mainLinks = [
   // "to" property is no special syntax "#" just signifying
   // its not a link.
   { name: 'Available Services', to: '#services' },
-  { name: 'Solutions', to: '/solutions' },
-  { name: 'About Us', to: '/about-us' },
-  { name: 'Our Other Programs', to: '/other-programs' },
+  { name: 'Solutions', to: '/solutions/' },
+  { name: 'About Us', to: '/about-us/' },
+  { name: 'Our Other Programs', to: '/other-programs/' },
 ];
 
 const serviceLinks = [
@@ -37,13 +37,13 @@ const MenuItem = ({ name, to, onNavigate }) => {
   return (
     <Box flex={{ shrink: 0 }} basis="60px" background="white" justify="center">
       {isLink ? (
-        <Box background="white" pad="medium" align="center" direction="row">
-          <Link to={to}>
+        <Link to={to} border={{ color: 'red' }}>
+          <Box background="white" pad="medium" align="center" direction="row">
             <Text weight="bold" color="black" size="small">
               {name}
             </Text>
-          </Link>
-        </Box>
+          </Box>
+        </Link>
       ) : (
         <Button onClick={() => onNavigate(name)} aria-haspopup="menu">
           <Box

src/components/pages/home/Steps.js

@@ -2,63 +2,76 @@ import React, { useContext } from 'react';
 import { Box, Text, ResponsiveContext } from 'grommet';
 import { DtHex } from '../../icons';
 
-const Step = ({ number, isMobile, children }) => (
-  <Box style={{ position: 'relative' }}>
-    {/* TODO: Add this line
-    <Box
-      height="1px"
-      background="dark-1"
-      width="100%"
-      style={{ position: 'absolute', top: '32px' }}
-    /> */}
-    <Box
-      basis="1/4"
-      pad={{ horizontal: 'small' }}
-      align="center"
-      direction={isMobile ? 'row' : 'column'}
-      gap="medium"
-    >
+const Step = ({ number, isMobile, children }) => {
+  const hzLineStyle = { position: 'absolute', top: '32px', width: '100%' };
+  const vtLineStyle = { position: 'absolute', left: '45px', height: '100%' };
+  if (number === 1) {
+    hzLineStyle.left = '50%';
+    hzLineStyle.width = '50%';
+    vtLineStyle.top = '50%';
+    vtLineStyle.height = '50%';
+  }
+  if (number === 4) {
+    hzLineStyle.right = '50%';
+    hzLineStyle.width = '50%';
+    vtLineStyle.bottom = '50%';
+    vtLineStyle.height = '50%';
+  }
+  return (
+    <Box style={{ position: 'relative' }}>
+      {!isMobile && (
+        <Box height="1px" background="light-1" style={hzLineStyle} />
+      )}
+      {isMobile && <Box width="1px" background="light-1" style={vtLineStyle} />}
       <Box
-        height="65px"
-        width="80px"
-        flex={{ shrink: 0 }}
-        style={{ position: 'relative' }}
+        basis="1/4"
+        pad={{ horizontal: 'small', vertical: isMobile ? 'medium' : '0' }}
         align="center"
-        justify="center"
+        direction={isMobile ? 'row' : 'column'}
+        gap="medium"
       >
-        <Text
-          size="xlarge"
-          weight="bold"
-          color="accent-2"
-          style={{ zIndex: 2 }}
+        <Box
+          height="65px"
+          width="80px"
+          flex={{ shrink: 0 }}
+          style={{ position: 'relative' }}
+          align="center"
+          justify="center"
         >
-          {number}
-        </Text>
-        <DtHex
-          color="accent-2"
-          size="65"
-          style={{
-            position: 'absolute',
-            top: '50%',
-            zIndex: 0,
-            transform: 'translateY(-50%)',
-          }}
-        />
-        <DtHex
-          color="black"
-          size="59"
-          style={{
-            position: 'absolute',
-            top: '50%',
-            zIndex: 0,
-            transform: 'translateY(-50%)',
-          }}
-        />
+          <Text
+            size="xlarge"
+            weight="bold"
+            color="accent-2"
+            style={{ zIndex: 2 }}
+          >
+            {number}
+          </Text>
+          <DtHex
+            color="accent-2"
+            size="65"
+            style={{
+              position: 'absolute',
+              top: '50%',
+              zIndex: 0,
+              transform: 'translateY(-50%)',
+            }}
+          />
+          <DtHex
+            color="black"
+            size="59"
+            style={{
+              position: 'absolute',
+              top: '50%',
+              zIndex: 0,
+              transform: 'translateY(-50%)',
+            }}
+          />
+        </Box>
+        <Box align="center">{children}</Box>
       </Box>
-      <Box align="center">{children}</Box>
     </Box>
-  </Box>
-);
+  );
+};
 
 const Steps = () => {
   const size = useContext(ResponsiveContext);
@@ -70,7 +83,6 @@ const Steps = () => {
       direction={isMobile ? 'column' : 'row'}
       width={isMobile ? 'medium' : 'large'}
       pad={{ vertical: 'large' }}
-      gap={isMobile ? 'large' : 'none'}
     >
       <Step number={1} isMobile={isMobile}>
         <Text size="small" textAlign={isMobile ? 'start' : 'center'}>

src/components/pages/service-category/ServiceList.js

@@ -28,15 +28,15 @@ const listQuery = graphql`
   }
 `;
 
-const ServiceItem = ({ node, pad }) => (
-  <Box basis="1/2" pad="medium">
+const ServiceItem = ({ node, isMobile }) => (
+  <Box basis="1/2" pad={isMobile ? '0' : 'medium'}>
     <Heading level={4}>{node.frontmatter.title}</Heading>
     <Classification
       levels={node.frontmatter.levels}
       serviceName={node.frontmatter.title}
     />
     {/* Undo this "flex" if we don't want learn more to line up */}
-    <Box flex="grow" pad={{ vertical: pad }}>
+    <Box flex="grow" pad={{ vertical: isMobile ? '0' : 'small' }}>
       <Paragraph fill>{node.frontmatter.excerpt || node.excerpt}</Paragraph>
     </Box>
 
@@ -49,14 +49,6 @@ const ServiceItem = ({ node, pad }) => (
   </Box>
 );
 
-const rowPad = {
-  xsmall: '0',
-  small: '0',
-  medium: 'medium',
-  large: 'medium',
-  xlarge: 'medium',
-};
-
 const ServiceList = ({ categories }) => {
   const {
     allMarkdownRemark: { nodes },
@@ -71,12 +63,7 @@ const ServiceList = ({ categories }) => {
   const isMobile = ['xsmall', 'small'].includes(size);
 
   return (
-    <Box
-      pad={{ vertical: 'large' }}
-      background="white"
-      style={{ zIndex: 5 }}
-      id="main-content"
-    >
+    <Box pad={{ vertical: 'large' }} id="main-content">
       {catGroup.map((group, i) => (
         <Box key={categories[i]} gap="small">
           {categories.length > 1 && (
@@ -107,8 +94,12 @@ const ServiceList = ({ categories }) => {
                       gap="large"
                       key={item1.id}
                     >
-                      {item1 && <ServiceItem node={item1} pad={rowPad[size]} />}
-                      {item2 && <ServiceItem node={item2} pad={rowPad[size]} />}
+                      {item1 && (
+                        <ServiceItem node={item1} isMobile={isMobile} />
+                      )}
+                      {item2 && (
+                        <ServiceItem node={item2} isMobile={isMobile} />
+                      )}
                     </Box>
                   );
                 })}

src/data/hero/4_summit.yaml

-name: Summit
-title: Summit
+name: SEITaaS Summit
+title: SEITaaS Summit
 subtitle: SAP network-as-a-service
 core: true
 cta: Learn More

src/images/af-logo.svg

 <svg id="AF_LOGO" data-name="AF LOGO" xmlns="http://www.w3.org/2000/svg" width="189.115" height="147.431" viewBox="0 0 189.115 147.431" role="img">
-<title>U.S Air Force logo</title>
+  <title>U.S Air Force</title>
   <g id="Group_50" data-name="Group 50" transform="translate(31.865)">
     <path id="Path_501" data-name="Path 501" d="M-449.651,114.53l-11.987,8.708,14.6,10.606,4.577-14.09Z" transform="translate(495.628 -32.302)" fill="#fff"/>
     <path id="Path_502" data-name="Path 502" d="M-429.749,146.409l11.986,8.707,11.979-8.707-11.979-8.711Z" transform="translate(480.491 -43.299)" fill="#fff"/>

src/pages/solutions.js

 import React, { useState } from 'react';
 import { graphql } from 'gatsby';
-import { Box, Heading, Text, ResponsiveContext, Layer } from 'grommet';
+import {
+  Box,
+  Heading,
+  Text,
+  Layer,
+  ResponsiveContext,
+  ThemeContext,
+} from 'grommet';
 import { AppLayout, SEO } from '../components/app';
 import { Container, Column } from '../components/layout';
 import { ServiceHero } from '../components/hero';
@@ -94,9 +101,19 @@ const Solutions = ({ data }) => {
               </Box>
             </Column>
             {modalOpen && (
-              <Layer animation="fadeIn">
-                <ContactForm onClose={handleModalToggle} />
-              </Layer>
+              <ThemeContext.Extend
+                value={{
+                  layer: {
+                    extend: () => ({
+                      zIndex: '50',
+                    }),
+                  },
+                }}
+              >
+                <Layer animation="fadeIn">
+                  <ContactForm onClose={handleModalToggle} />
+                </Layer>
+              </ThemeContext.Extend>
             )}
           </Container>
         )}