Merge branch 'develop' into 'staging'

mobile nav and share images

See merge request !14

gatsby-config.js

@@ -2,7 +2,7 @@ module.exports = {
   siteMetadata: {
     title: `AF Enterprise Digital Transformation Services`,
     description: `C3I&N enables digital transformation across the U.S. Air Force. Explore our Networking, Compute & Store and DevSecOps services and more.`,
-    image: `/src/images/usaf-logo.png`,
+    image: `/src/images/share/ogimage-home.png`,
   },
   plugins: [
     `gatsby-plugin-react-helmet`,

src/components/app/Nav.js

 import React, { useState, useContext } from 'react';
-import { Box, Button, Text, Keyboard, Layer, ResponsiveContext } from 'grommet';
+import {
+  Box,
+  Button,
+  Text,
+  Keyboard,
+  Layer,
+  ResponsiveContext,
+  ThemeContext,
+} from 'grommet';
 import { Menu, FormUp, FormDown } from 'grommet-icons';
 import { Link } from '../core';
 import { MegaMenu, MegaMobileMenu } from '../mega-menu';
@@ -120,9 +128,23 @@ const Nav = ({ sticky }) => {
         </Keyboard>
       )}
       {menuOpen && isMobile && (
-        <Layer full onClickOutside={handleToggleMenu} onEsc={handleToggleMenu}>
-          <MegaMobileMenu onClose={handleToggleMenu} />
-        </Layer>
+        <ThemeContext.Extend
+          value={{
+            layer: {
+              extend: () => ({
+                zIndex: '50',
+              }),
+            },
+          }}
+        >
+          <Layer
+            full
+            onClickOutside={handleToggleMenu}
+            onEsc={handleToggleMenu}
+          >
+            <MegaMobileMenu onClose={handleToggleMenu} />
+          </Layer>
+        </ThemeContext.Extend>
       )}
     </>
   );

src/components/mega-menu/MegaMobileMenu.js

-import React, { useState } from 'react';
-import { Box, Button } from 'grommet';
-import { Close } from 'grommet-icons';
+import React, { useState, useContext } from 'react';
+import { Box, Button, Heading, Text, ThemeContext } from 'grommet';
+import { Close, FormPrevious, FormNext } from 'grommet-icons';
+import { Link } from '../core';
+import MenuGroup from './MenuGroup';
 
-const MenuItem = ({ label, onClick }) => (
-  <Box background="white" pad="large" flex={{ shrink: 0 }}>
-    <Button label={label} onClick={onClick} />
-  </Box>
-);
+const mainLinks = [
+  // Services doesnt have a link, just goes deeper in menu
+  // "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' },
+];
+
+const MenuItem = ({ name, to, onNavigate }) => {
+  const isLink = to.indexOf('#') === -1;
+
+  return (
+    <Box flex={{ shrink: 0 }} basis="60px" background="white" justify="center">
+      {isLink ? (
+        <Box background="white" pad="medium" align="center" direction="row">
+          <Link to={to}>
+            <Text weight="bold" color="black" size="small">
+              {name}
+            </Text>
+          </Link>
+        </Box>
+      ) : (
+        <Button onClick={() => onNavigate(name)}>
+          <Box
+            direction="row"
+            justify="between"
+            align="center"
+            background="white"
+            pad="medium"
+          >
+            <Text weight="bold" size="small">
+              {name}
+            </Text>{' '}
+            <FormNext color="accent-1" />
+          </Box>
+        </Button>
+      )}
+    </Box>
+  );
+};
 
 const MenuHome = ({ onNavigate }) => (
-  <Box gap="xsmall" fill>
-    {[
-      'Available Services',
-      'Solutions',
-      'About Us',
-      'Our Other Programs',
-      '1',
-      '2',
-      '3',
-      '4',
-      '5',
-      '6',
-      '10',
-      '20',
-      '30',
-      '40',
-      '50',
-      '60',
-    ].map((item) => (
-      <MenuItem label={item} key={item} onClick={() => onNavigate(item)} />
+  <Box gap="1px" fill pad="xsmall">
+    {mainLinks.map((item) => (
+      <MenuItem
+        key={item.name}
+        name={item.name}
+        to={item.to}
+        onNavigate={onNavigate}
+      />
     ))}
   </Box>
 );
 
-const MenuCategory = ({ onNavigate }) => (
+const MenuServices = ({ onNavigate }) => (
   <Box
-    gap="xsmall"
+    gap="1px"
     background="black"
-    border={{ color: 'green' }}
     style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}
+    pad="xsmall"
   >
+    <Box pad={{ bottom: 'large' }} flex={{ shrink: 0 }}>
+      <Heading level={2} margin={{ top: '0', bottom: 'small' }}>
+        Available Services
+      </Heading>
+      <Text size="xsmall" color="light-1">
+        The following services are available to your organization through C3I&N
+      </Text>
+    </Box>
     {[
-      'Networking & Connectivity',
-      'Compute & Store',
-      'Software Development & DevSecOps',
-      'Communications',
-      'Data Analysis',
+      { name: 'Networking & Connectivity', to: '#categories' },
+      { name: 'Compute & Store', to: '#categories' },
+      { name: 'Software Development & DevSecOps', to: '#categories' },
+      { name: 'Digital Engineering', to: '#categories' },
+      { name: 'Communications', to: '#categories' },
+      { name: 'Data Analysis', to: '#categories' },
     ].map((item) => (
-      <MenuItem label={item} key={item} onClick={() => onNavigate(item)} />
+      <MenuItem
+        key={item.name}
+        name={item.name}
+        to={item.to}
+        onNavigate={onNavigate}
+      />
     ))}
   </Box>
 );
 
+const MenuCategory = ({ category, onNavigate }) => (
+  <Box
+    gap="1px"
+    background="black"
+    style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}
+    pad="xsmall"
+  >
+    <Box background="white" pad="large" flex={{ shrink: 0 }}>
+      <Heading margin="0" level={4}>
+        {category}
+      </Heading>
+    </Box>
+    <Box background="white" pad="large">
+      <MenuGroup category={category} />
+    </Box>
+  </Box>
+);
+
 const MegaMobileMenu = ({ onClose }) => {
   const [depth, setDepth] = useState(0);
+  const [category, setCategory] = useState();
+  const theme = useContext(ThemeContext);
 
   const handleNavigate = (name) => {
-    console.log('handle nav', name);
     setDepth(depth + 1);
   };
 
+  const handleBack = () => {
+    setDepth(depth - 1);
+  };
+
+  const handleToCategory = (name) => {
+    setDepth(depth + 1);
+    setCategory(name);
+  };
+
   return (
-    <Box background="black" pad="medium">
-      <Box height="100px" justify="end" direction="row">
-        <Button icon={<Close />} onClick={onClose} />
-      </Box>
+    <Box background="black" pad="medium" fill>
       <Box
-        border={{ color: 'red' }}
-        overflow="scroll"
-        fill
-        style={{ position: 'relative' }}
+        height={theme.custom.header.stickyHeight}
+        justify="between"
+        direction="row"
       >
+        <Box justify="center">
+          {depth !== 0 && (
+            <Button onClick={handleBack}>
+              {' '}
+              <Box direction="row" align="center">
+                <FormPrevious color="accent-1" />{' '}
+                <Text size="small" weight="bold">
+                  Back
+                </Text>
+              </Box>
+            </Button>
+          )}
+        </Box>
+        <Button icon={<Close />} onClick={onClose} />
+      </Box>
+      <Box overflow="auto" style={{ position: 'relative' }} fill>
         <MenuHome onNavigate={handleNavigate} />
-        {depth === 1 && <MenuCategory />}
+        {depth === 1 && <MenuServices onNavigate={handleToCategory} />}
+        {depth === 2 && (
+          <MenuCategory category={category} onNavigate={() => {}} />
+        )}
       </Box>
     </Box>
   );

src/components/mega-menu/MenuGroup.js

@@ -30,7 +30,7 @@ const MenuGroup = ({ category, title }) => {
   );
 
   return (
-    <Box gap="xsmall">
+    <Box gap="small">
       {title && (
         <Heading level={6} margin={{ vertical: 'small', horizontal: 'medium' }}>
           {title}

src/content/service-category/hosting-infrastructure.md

@@ -4,6 +4,7 @@ title: 'Compute and Store'
 categories:
   - Compute & Store
 image: '../../images/cat-header-comp-store.png'
+share: '../../images/share/ogimage-compute_and_store.png'
 icon: DtComputeStore
 ---
 

src/content/service-category/networking-connectivity.md

@@ -8,6 +8,7 @@ categories:
   - Reference Architectures
   - Virtual Private Connections
 image: '../../images/cat-header.png'
+share: '../../images/share/ogimage-networking_and_connectivity.png'
 icon: DtNetConn
 ---
 

src/content/service-detail/af7.md

@@ -9,6 +9,7 @@ levels:
   - TS-SAR
   - TS-SCI
 excerpt: 'AF7 provides users the latest in secure video technology to allow real-time video and audio communications around the world.'
+share: '../../images/share/ogimage-communications.png'
 updated: March 23, 2021 at 2:54:52 PM EDT
 ---
 

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

@@ -11,6 +11,7 @@ levels:
   - TS-SAR
   - TS-SCI
 excerpt: 'AFSEN-COIN is designed to provide a standardized means of information transportation to improve service and connectivity between locations.'
+share: '../../images/share/ogimage-networking_and_connectivity.png'
 updated: March 26
 ---
 

src/content/service-detail/base-it.md

@@ -10,6 +10,7 @@ levels:
   - U
   - S
 excerpt: 'Base IT Infrastructure services are centrally managed to provide both wired and wireless WAN and BAN capabilities.'
+share: '../../images/share/ogimage-networking_and_connectivity.png'
 updated: March 26
 ---
 

src/content/service-detail/cloud-gateway.md

@@ -12,6 +12,7 @@ levels:
   - TS-SAR
   - TS-SCI
 excerpt: 'Cloud Gateway provides access to approved SAP Clouds & Services, SAP Meet Me Point (MMPs), and COMSEC collocation by offering high speed Cloud access and leverages common transports. It is tailored towards DoD SAP and ICON Defense Industrial Based (DIB) participants'
+share: '../../images/share/ogimage-networking_and_connectivity.png'
 updated: March 26
 ---
 

src/content/service-detail/cloud-one-pipeline.md

@@ -2,8 +2,8 @@
 slug: '/services/cloud-one-pipeline'
 title: 'Cloud One Pipeline'
 categories:
-  - Software Development
-  - DevSecOps
+  - Software Development & DevSecOps
+share: '../../images/share/ogimage-software_development_and_devsecops.png'
 updated: March 23, 2021 at 2:54:52 PM EDT
 ---
 

src/content/service-detail/cloud-one.md

@@ -7,6 +7,7 @@ levels:
   - U
   - S
 excerpt: 'The ‘one-stop-shop’ for Air Force cloud computing, Cloud One provides cloud environments in AWS and Azure.  As the enterprise solution, Cloud One embraces automated deployments to stand-up cloud environments at scale. '
+share: '../../images/share/ogimage-compute_and_store.png'
 updated: March 23, 2021 at 2:54:52 PM EDT
 ---
 

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

@@ -8,6 +8,7 @@ levels:
   - TS-SAR
   - TS-SCI
 excerpt: 'CORE is a suite of multi level web applications that provide file share and webmail services enabling secure data and communication exchange between S//SAR, TS//SAR, and TS//SAR-SCI networks and users.'
+share: '../../images/share/ogimage-communications.png'
 updated: March 23, 2021 at 2:54:52 PM EDT
 ---
 

src/content/service-detail/d1scovery.md

@@ -6,6 +6,7 @@ categories:
 levels: 
   - U
 excerpt: 'An enterprise Big Data Analytics platform hosted on Cloud One that provides advanced data analytics and data management tools up to IL4.'
+share: '../../images/share/ogimage-data_analysis.png'
 updated: March 26
 ---
 

src/content/service-detail/digital-engineering-platform.md

@@ -7,6 +7,7 @@ categories:
 levels: 
   - U
 excerpt: 'Popular Digital Engineering and collaboration software tools offered in a platform-as-a-service (PaaS) model.'
+share: '../../images/share/ogimage-digital_engineering.png'
 updated: March 23, 2021 at 2:54:52 PM EDT
 ---
 

src/content/service-detail/enterprise-virtual-environment-eve.md

@@ -9,6 +9,7 @@ levels:
   - TS-SAR
   - TS-SCI
 excerpt: 'A government owned/government operated hardware solution that provides a basic compute and store capability in a PL-3 environment.'
+share: '../../images/share/ogimage-compute_and_store.png'
 updated: March 23, 2021 at 2:54:52 PM EDT
 ---
 

src/content/service-detail/fences.md

@@ -11,6 +11,7 @@ levels:
   - TS-SAR
   - TS-SCI
 excerpt: 'FENCES is the only SAP-compliant enterprise cloud solution for the DoD at independent levels of security.'
+share: '../../images/share/ogimage-compute_and_store.png'
 updated: March 26
 ---
 

src/content/service-detail/icon.md

@@ -13,6 +13,7 @@ levels:
   - TS-SAR
   - TS-SCI
 excerpt: 'ICON is a reference architecture for industry partners to build out their own PL-3 networks to connect to FENCES or Summit.'
+share: '../../images/share/ogimage-networking_and_connectivity.png'
 updated: March 26
 ---
 

src/content/service-detail/mattermost.md

@@ -6,6 +6,7 @@ categories:
 levels: 
   - U
 excerpt: 'Mattermost is an FOUO chat/messaging client developed by Platform One primarily to allow communication between developers on its platform without requiring CAC. Available for use by all of DoD.'
+share: '../../images/share/ogimage-communications.png'
 updated: March 23, 2021 at 2:54:52 PM EDT
 ---
 

src/content/service-detail/misty-sierra.md

@@ -9,6 +9,7 @@ levels:
   - TS-SAR
   - TS-SCI
 excerpt: 'Misty Sierra is a compartmented WAN that includes trusted MLS services, specifically providing an integrated PL-4 desktop environment with Automated Information System tools and functions.'
+share: '../../images/share/ogimage-networking_and_connectivity.png'
 updated: March 23, 2021 at 2:54:52 PM EDT
 ---