Merge branch 'develop' into 'staging'

content update; footer finalization; mobile menu work

See merge request !22

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/MegaMenu.js

@@ -97,12 +97,13 @@ const MegaMenu = ({ sticky }) => {
                   title="Global Connectivity / WAN"
                   category="Global Connectivity / WAN"
                 />
-              </Box>
-              <Box basis="1/2">
                 <MenuGroup
                   title="Local Connectivity / BAN"
                   category="Local Connectivity / BAN"
                 />
+              </Box>
+              <Box basis="1/2">
+                <MenuGroup title="Transport" category="Transport" />
                 <MenuGroup title="Cloud Access" category="Cloud Access" />
                 <MenuGroup
                   title="Reference Architectures"

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/OfferAccordion.js

@@ -80,12 +80,13 @@ const OfferAcc = () => {
                 title="Global Connectivity / WAN"
                 category="Global Connectivity / WAN"
               />
-            </Box>
-            <Box basis="1/2" gap="medium">
               <MenuGroup
                 title="Local Connectivity / BAN"
                 category="Local Connectivity / BAN"
               />
+            </Box>
+            <Box basis="1/2" gap="medium">
+              <MenuGroup title="Transport" category="Transport" />
               <MenuGroup title="Cloud Access" category="Cloud Access" />
               <MenuGroup
                 title="Reference Architectures"

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/content/service-category/networking-connectivity.md

@@ -4,6 +4,7 @@ title: 'Networking & Connectivity'
 categories:
   - Global Connectivity / WAN
   - Local Connectivity / BAN
+  - Transport
   - Cloud Access
   - Reference Architectures
 image: '../../images/cat-header.png'

src/content/service-detail/afsen-coin.md

@@ -4,7 +4,7 @@ title: 'AFSEN-COIN'
 shortTitle: 'COIN'
 categories: 
   - Networking & Connectivity
-  - Global Connectivity / WAN
+  - Transport
 levels:
   - S-SAR
   - S-SCI

src/content/service-detail/core-rock.md

@@ -31,7 +31,7 @@ DoD, USAF and industry partners can utilize the capability.
   - Multi-level Compartmentalization
   - Adapts based on user clearances
 - 3rd Party Introduction
-  - User SAP accesses pulled from JADE
+  - User accesses pulled from JADE
   - Strips PII information for general users
 
 ## Requirements

src/content/service-detail/marvel.md

----
-slug: '/services/marvel/'
-title: 'Marvel'
-categories: 
-  - Communications
-levels: 
-  - S-SAR
-  - TS-SAR
-  - TS-SCI
-excerpt: 'Voice-over-internet-protocol (VoIP) capabilities on SAP networks.'
-share: '../../images/share/ogimage-communications.png'
-updated: March 31
----
-
-Marvel is the AF's Enterprise SAP voice network, consisting of geographically dispersed user VOSIP sites (also called endpoints) connected to call managers and operated at three security levels cleared for special access required (SAR) VOSIP CALLs: Secret//SAR Level 3, Top Secret//SAR Level 4, and Top Secret//SCI//SAR Level 5. Marvel VOSIP calls may cover any SAP or compartment, constrained only by the security level of the VOSIP call. Marvel endpoints require implementation of an encrypter, firewall, and switch as well as internal fiber drops to each phone location.  
-

src/content/service-detail/seitaas-summit.md

@@ -13,7 +13,7 @@ share: '../../images/share/ogimage-networking_and_connectivity.png'
 updated: March 23, 2021 at 2:51:35 PM EDT
 ---
 
-SEITaaS/Summit delivers End User Services, MLS applications, and NaaS to include data transport and endpoints.  These capabilities are maintained centrally and down to the desktop.  Users have the ability to select applications and new capabilities from a government service catalog or request new services to add to the government service catalog as needed.
+SEITaaS Summit delivers End User Services, MLS applications, and NaaS to include data transport and endpoints. These capabilities are maintained centrally and down to the desktop.  Users have the ability to select applications and new capabilities from a government service catalog or request new services to add to the government service catalog as needed.
 
 
 ## Benefits & Features

src/content/service-detail/svs.md

+---
+slug: '/services/svs/'
+title: 'SAP Voice Servces (SVS)'
+categories: 
+  - Communications
+levels: 
+  - S-SAR
+  - TS-SAR
+  - TS-SCI
+excerpt: 'Voice-over-internet-protocol (VoIP) capabilities on SAP networks.'
+share: '../../images/share/ogimage-communications.png'
+updated: March 31
+---
+
+SVS is the AF's Enterprise SAP voice network, consisting of geographically dispersed user VOSIP sites (also called endpoints) connected to call managers and operated at three security levels cleared for special access required (SAR) VOSIP CALLs: Secret//SAR Level 3, Top Secret//SAR Level 4, and Top Secret//SCI//SAR Level 5. SVS VOSIP calls may cover any SAP or compartment, constrained only by the security level of the VOSIP call. SVS endpoints require implementation of an encrypter, firewall, and switch as well as internal fiber drops to each phone location.  
+

src/content/service-detail/theater-deployable-comms.md

@@ -5,7 +5,6 @@ shortTitle: 'TDC'
 categories: 
   - Networking & Connectivity
   - Global Connectivity / WAN
-  - Compute & Store
 levels: 
   - U
   - S

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