Merge branch 'develop' into 'staging'

content updates 04-15

See merge request !23

src/components/ContactForm.js

-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   Box,
   Heading,
@@ -16,12 +16,26 @@ import { PrimaryButton } from './core';
 
 const korolevFont = 'korolev, Helvetica Neue, Helvetica, Arial, sans-serif';
 
-const ContactForm = ({ onClose }) => {
+const ContactForm = ({ onClose, defaultService, ...rest }) => {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [services, setServices] = useState('');
+  const [comments, setComments] = useState('');
+
   const [submitting, setSubmitting] = useState();
   const [success, setSuccess] = useState();
 
+  useEffect(() => {
+    setServices(defaultService);
+  }, [defaultService]);
+
   const handleSubmit = (event) => {
-    const data = new FormData(event.target);
+    const data = new FormData();
+    data.set('entry.1114584563', name);
+    data.set('emailAddress', email);
+    data.set('entry.533506743', services);
+    data.set('entry.297731592', comments);
+
     setSubmitting(true);
     fetch(
       'https://docs.google.com/forms/d/e/1FAIpQLScsfrAHD8yKJGKF-yI_T9676FR-LDmmuBG_m8uY2TmP_zmZUg/formResponse',
@@ -37,7 +51,7 @@ const ContactForm = ({ onClose }) => {
   };
 
   return (
-    <Box>
+    <Box {...rest}>
       <Box
         pad="medium"
         background="black"
@@ -54,12 +68,18 @@ const ContactForm = ({ onClose }) => {
         >
           REQUEST A CONSULTATION
         </Heading>
-        {onClose && <Button icon={<Close />} onClick={onClose}></Button>}
+        {onClose && (
+          <Button
+            icon={<Close />}
+            onClick={onClose}
+            a11yTitle="close this dialog"
+          ></Button>
+        )}
       </Box>
       <Box
         pad="medium"
         border={{ color: 'light-1', size: 'xsmall', side: 'all' }}
-        style={{ position: 'relative' }}
+        style={{ position: 'relative', overflowY: 'auto' }}
       >
         {!success && (
           <Box>
@@ -71,13 +91,13 @@ const ContactForm = ({ onClose }) => {
               in, and someone from our team will reach out soon.
             </Text>
             <Text size="small" color="accent-1">
-              Submit{' '}
+              Do{' '}
               <Text weight="bold" size="small" color="accent-1">
-                unclassified
+                not
               </Text>{' '}
-              data only.
+              submit classified or CUI data.
             </Text>
-            <Form onSubmit={handleSubmit}>
+            <Form onSubmit={handleSubmit} aria-live="assertive">
               <FormField
                 name="entry.1114584563"
                 htmlFor="text-input-name"
@@ -91,7 +111,12 @@ const ContactForm = ({ onClose }) => {
                 }
                 required
               >
-                <TextInput id="text-input-name" name="entry.1114584563" />
+                <TextInput
+                  id="text-input-name"
+                  name="entry.1114584563"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                />
               </FormField>
               <FormField
                 name="emailAddress"
@@ -106,7 +131,12 @@ const ContactForm = ({ onClose }) => {
                 }
                 required
               >
-                <TextInput id="text-input-email" name="emailAddress" />
+                <TextInput
+                  id="text-input-email"
+                  name="emailAddress"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                />
               </FormField>
               <FormField
                 name="entry.533506743"
@@ -120,7 +150,12 @@ const ContactForm = ({ onClose }) => {
                   </Text>
                 }
               >
-                <TextInput id="text-input-services" name="entry.533506743" />
+                <TextInput
+                  id="text-input-services"
+                  name="entry.533506743"
+                  value={services}
+                  onChange={(e) => setServices(e.target.value)}
+                />
               </FormField>
               <FormField
                 name="entry.297731592"
@@ -129,7 +164,7 @@ const ContactForm = ({ onClose }) => {
                   <Text weight="bold" size="small">
                     Comments or details{' '}
                     <Text weight="normal" size="small">
-                      (optional)
+                      (optional, no classified or CUI data)
                     </Text>
                   </Text>
                 }
@@ -137,6 +172,8 @@ const ContactForm = ({ onClose }) => {
                 <TextArea
                   id="text-input-comments"
                   name="entry.297731592"
+                  value={comments}
+                  onChange={(e) => setComments(e.target.value)}
                   style={{ height: '100px' }}
                 />
               </FormField>
@@ -144,7 +181,7 @@ const ContactForm = ({ onClose }) => {
                 <PrimaryButton
                   pad={{ vertical: 'large' }}
                   type="submit"
-                  a11yTitle="Submit"
+                  a11yTitle="Submit this consultation request form"
                   label="Submit"
                   style={{ width: onClose ? '250px' : '100%' }}
                 />
@@ -180,13 +217,14 @@ const ContactForm = ({ onClose }) => {
               style={{
                 fontFamily: korolevFont,
               }}
+              aria-live="polite"
             >
               REQUESTING CONSULTATION
             </Text>
           </Box>
         )}
         {success && (
-          <Box pad="large" align="center" justify="center">
+          <Box pad="large" align="center" justify="center" aria-live="polite">
             <Heading
               level={3}
               style={{ fontFamily: korolevFont }}
@@ -207,4 +245,8 @@ const ContactForm = ({ onClose }) => {
   );
 };
 
+ContactForm.defaultProps = {
+  defaultService: '',
+};
+
 export default ContactForm;

src/components/FeedbackForm.js

@@ -38,7 +38,7 @@ const FeedbackForm = ({ onClose }) => {
   };
 
   return (
-    <Box>
+    <Box role="dialog" aria-modal="true" a11yTitle="Send us your feedback">
       <Box
         pad="medium"
         background="black"
@@ -55,12 +55,16 @@ const FeedbackForm = ({ onClose }) => {
         >
           SEND US YOUR FEEDBACK
         </Heading>
-        <Button icon={<Close />} onClick={onClose}></Button>
+        <Button
+          icon={<Close />}
+          onClick={onClose}
+          a11yTitle="close this dialog"
+        ></Button>
       </Box>
-      <Box pad="medium" style={{ position: 'relative' }}>
+      <Box pad="medium" style={{ position: 'relative', overflowY: 'auto' }}>
         {!success && (
           <Box>
-            <Form onSubmit={handleSubmit}>
+            <Form onSubmit={handleSubmit} aria-live="assertive">
               <FormField
                 name="entry.675672969"
                 htmlFor="text-input-comments"
@@ -95,7 +99,7 @@ const FeedbackForm = ({ onClose }) => {
                         </Text>
                         <Text size="small">
                           Help us by volunteering an occasional hour of your
-                          time to provide insights and test ideas for ow C3I&N
+                          time to provide insights and test ideas for how C3I&N
                           can best serve our IT customers.
                         </Text>
                       </Box>
@@ -136,7 +140,7 @@ const FeedbackForm = ({ onClose }) => {
                 <PrimaryButton
                   pad={{ vertical: 'large' }}
                   type="submit"
-                  a11yTitle="Submit"
+                  a11yTitle="Submit your feedback"
                   label="Submit"
                   style={{ width: '250px' }}
                 />
@@ -172,13 +176,20 @@ const FeedbackForm = ({ onClose }) => {
               style={{
                 fontFamily: korolevFont,
               }}
+              aria-live="polite"
             >
               SENDING FEEDBACK
             </Text>
           </Box>
         )}
         {success && (
-          <Box pad="large" align="center" justify="center" gap="small">
+          <Box
+            pad="large"
+            align="center"
+            justify="center"
+            gap="small"
+            aria-live="polite"
+          >
             <Heading
               level={3}
               style={{ fontFamily: korolevFont }}
@@ -187,7 +198,11 @@ const FeedbackForm = ({ onClose }) => {
               FEEDBACK SENT
             </Heading>
             <Text textAlign="center">Thanks for sharing with us.</Text>
-            <SecondaryButton onClick={onClose} label="Close" />
+            <SecondaryButton
+              onClick={onClose}
+              label="Close"
+              a11yTitle="Close this dialog"
+            />
           </Box>
         )}
       </Box>

src/components/app/Footer.js

 import React, { useContext } from 'react';
 import { Box, ResponsiveContext } from 'grommet';
+import { Share } from 'grommet-icons';
 import { Container, Column } from '../layout';
 import { Link } from '../core';
 import AFLogo from '../../images/af-logo.svg';
@@ -29,19 +30,29 @@ const Footer = () => {
               About Us
             </Link>
             <Link
-              to="/our-other-programs/"
+              to="/other-programs/"
               color="light-1"
               size="small"
               weight="bold"
             >
               Our Other Programs
             </Link>
+
+            <Link
+              to="https://usaf.dps.mil/teams/EntInt/FrontDoor/SitePages/Home.aspx"
+              color="light-1"
+              size="small"
+              justify="center"
+            >
+              CCC IT/Cyber Services <Share size="small" />
+            </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"
+              justify="center"
             >
-              FOIA
+              FOIA <Share size="small" />
             </Link>
           </Box>
           <Box

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

@@ -29,7 +29,7 @@ const listQuery = graphql`
 `;
 
 const ServiceItem = ({ node, isMobile }) => (
-  <Box basis="1/2" pad={isMobile ? '0' : 'medium'}>
+  <Box basis="1/2" pad={{ horizontal: isMobile ? '0' : 'medium' }}>
     <Heading level={4}>{node.frontmatter.title}</Heading>
     <Classification
       levels={node.frontmatter.levels}
@@ -63,7 +63,7 @@ const ServiceList = ({ categories }) => {
   const isMobile = ['xsmall', 'small'].includes(size);
 
   return (
-    <Box pad={{ vertical: 'large' }} id="main-content">
+    <Box pad={{ vertical: 'large' }} id="main-content" gap="large">
       {catGroup.map((group, i) => (
         <Box key={categories[i]} gap="small">
           {categories.length > 1 && (
@@ -71,7 +71,12 @@ const ServiceList = ({ categories }) => {
               <Column>
                 <Box direction="row" align="center" gap="small">
                   {!isMobile && <DtSquare color="black" size="small" />}
-                  <Heading level={2}>{categories[i]}</Heading>
+                  <Heading
+                    level={2}
+                    margin={{ vertical: isMobile ? 'medium' : '0' }}
+                  >
+                    {categories[i]}
+                  </Heading>
                 </Box>
               </Column>
             </Container>

src/content/generic/about-us.md

 ---
 slug: '/about-us/'
 title: About Us
-subtitle: AFLCMC / C3I&N
+subtitle: AFLCMC / HN C3I&N
 description: Learn more about C3I&N's mission and our digital storefront.
 image: '../../images/detail-header.png'
 ---
 
 ### Our Mission
 
-The C3I&N Directorate is responsible for executing, developing, acquiring, deploying and sustaining cyberspace, communication, cryptologic and space/nuclear network capabilities across Air Force as well as Joint and inter-Agency communities. Our focus is on delivering solutions to drive dynamic integration of information/systems in support of air, space, and cyberspace domains.
+The C3I&N Directorate is responsible for executing, developing, acquiring, deploying and sustaining cyberspace, communication, and cryptologic capabilities across Air Force as well as Joint and inter-Agency communities. Our focus is on delivering solutions to drive dynamic integration of information/systems in support of air, space, and cyberspace domains.
 
 ### What We Provide
 
-To meet our mission, we offer a broad portfolio of IT services spanning networking, compute & store, digital engineering, and more. Through our scalable, enterprise services, we reduce cost and eliminate duplications of effort across the digital Air Force. Our IT solutions leverage industry best practices to deliver optimal security, performance and end-user experience. Beyond our service offerings, we also own and manage key enterprise IT initiatives, such as [EITaaS](/other-programs/), [SEITaaS](/solutions/seitaas/) and [CHES](/other-programs/). 
+To meet our mission, we offer a broad portfolio of IT services spanning networking, compute & store, digital engineering, and more. Through our scalable, enterprise services, we reduce cost and eliminate duplications of effort across the digital Air Force. Our IT solutions leverage industry best practices to deliver optimal security, performance and end-user experience. Beyond our service offerings, we also own and manage key enterprise IT initiatives, such as [Enterprise IT as a Service (EITaaS)](/other-programs/), [Special Access Program (SAP) Enterprise Information Technology as a Service (SEITaaS)](/services/seitaas-summit/) and [Cloud-Hosted Enterprise Services (CHES)](/other-programs/). 
 
 ### What is “Digital Trinity?”
 
@@ -28,7 +28,7 @@ Digital Trinity is meant to foster a virtual acquisition process that centers on
 
 Our digital storefront and engagement process is meant to enable customers to easily find and take advantage of our enterprise IT services.
 
-Our DTE Team supporting this effort is run by AFLCMC/HNJ out of Hanscom AFB. We help match your organization’s IT requirements to the best HN service offerings. Acting as a sort of concierge, our DTE Team leads the engagement from initial consultation through configuration and delivery.
+Our Digital Transformation Engagement Team supporting this effort is run by AFLCMC/HN out of Hanscom AFB. We help match your organization’s IT requirements to the best HN service offerings. Acting as a sort of concierge, our DTE Team leads the engagement from initial consultation through configuration and delivery.
 
 ### Help Improve Our Beta Website
 

src/content/other-programs/eitaas.md

@@ -2,7 +2,7 @@
 name: EITaaS
 index: 1
 ---
-## EITaaS
+## Enterprise IT as a Service (EITaaS)
 
 ###Cloud Compute & Store
 Compute & Store (C&S) provides secure access to cloud computing services, improving responsiveness to warfighter needs with faster access to systems and data for a more reliable, secure, consistent access to systems, data and just in time capacity for storage.

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

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

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

 ---
 slug: '/services/core/'
-title: 'CORE'
+title: 'Common Operating Environment (CORE)'
 categories: 
   - Communications
 levels: 
@@ -12,7 +12,7 @@ excerpt: 'A suite of multi-level web applications that provide file sharing and
 updated: April 1
 ---
 
-CORE is a suite of multi-level web applications that provide file sharing and webmail services enabling secure data and communication exchange between S//SAR, TS//SAR, and TS//SAR-SCI networks and users.
+Common Operating Environment (CORE) is a suite of multi-level web applications that provide file sharing and webmail services enabling secure data and communication exchange between S//SAR, TS//SAR, and TS//SAR-SCI networks and users.
 
 DoD, USAF and industry partners can utilize the capability.
 

src/content/service-detail/cv2.md

 ---
 slug: '/services/cv2/'
-title: 'CV2'
+title: 'Combat Air Force Networks (CV2)'
 categories:
   - Networking & Connectivity
   - Global Connectivity / WAN
@@ -9,11 +9,11 @@ levels:
   - TS
   - TS-SAR
   - TS-SCI
-excerpt: 'CV2 is a Special Access Program (SAP),  Microsoft Windows-based, Wide Area Network hosted at three security levels:  Secret//SAR Level 3, Top Secret//SAR Level 4, and Top Secret//SCI//SAR Level 5.'
+excerpt: 'Combat Air Force Networks (CV2) is a Special Access Program (SAP),  Microsoft Windows-based, Wide Area Network hosted at three security levels:  Secret//SAR Level 3, Top Secret//SAR Level 4, and Top Secret//SCI//SAR Level 5.'
 share: '../../images/share/ogimage-networking_and_connectivity.png'
 updated: March 23, 2021 at 2:54:52 PM EDT
 ---
 
-CV2 is a Special Access Program (SAP),  Microsoft Windows-based, Wide Area Network hosted at three security levels:  Secret//SAR Level 3, Top Secret//SAR Level 4, and Top Secret//SCI//SAR Level 5.
+Combat Air Force Networks (CV2) is a Special Access Program (SAP),  Microsoft Windows-based, Wide Area Network hosted at three security levels:  Secret//SAR Level 3, Top Secret//SAR Level 4, and Top Secret//SCI//SAR Level 5.
 
 There are three distinct and separate systems with one at the S//SAR and the other at the TS//SAR//SCI level.  The system is managed by the MSC and all hardware (desktop, switches, routers, servers, etc) are under a strict configuration management policy centrally implemented and enforced.

src/content/service-detail/fences.md

@@ -23,7 +23,7 @@ FENCES provides PL-2 workload templates for SAP customers that easily provide vi
 - IL-5 to TS/SCI platform accredited for ALL DoD environments
 - AWS Workspaces IL-5 and TS/SAR for Modeling and Sim
 - Parity in environments allows for replication to higher security levels
--[PlatformOne DevSecOps](/services/platform-one/) pipeline integration and tools
+- [PlatformOne DevSecOps](/services/platform-one/) pipeline integration and tools
 - Connectivity from CV2, JWICS, NPR, AppGate (Unclass) or with connection to Secure Web Services router (SWS)
 - Available managed services such as ACAS, McAfee, AD, WSUS, NTP
 - RMF inheritance over 35% with draft language to satisfy up to 80% of remaining controls

src/content/service-detail/iss.md

 ---
 slug: '/services/iss/'
-title: 'ISS'
+title: 'Information Support System (ISS)'
 categories: 
   - Networking & Connectivity
   - Global Connectivity / WAN
@@ -8,12 +8,12 @@ levels:
   - S-SAR
   - TS-SAR
   - TS-SCI
-excerpt: 'ISS is a compartmented WAN that includes trusted MLS services, specifically providing an integrated PL-4 desktop environment with Automated Information System tools and functions.'
+excerpt: 'Information Support System (ISS) 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: April 1
 ---
 
-ISS is a compartmented WAN that includes trusted MLS services, specifically providing an integrated PL-4 desktop environment with Automated Information System tools and functions.
+Information Support System (ISS) is a compartmented WAN that includes trusted MLS services, specifically providing an integrated PL-4 desktop environment with Automated Information System tools and functions.
 
 ## Benefits & Features
 
@@ -46,5 +46,5 @@ Required Documentation
 - JADE
 - [CORE](/services/core/)
 - Braces
-- Hawkeye
+- SIC
 - [FENCES](/services/fences/)
\ No newline at end of file

src/content/service-detail/sgn.md

 ---
 slug: '/services/sgn/'
-title: 'SGN'
+title: 'Secure Global Network (SGN)'
 categories: 
   - Networking & Connectivity
   - Global Connectivity / WAN
 levels:
   - TS-SCI
-excerpt: 'SGN allows sites to communicate by using VoIP phones, email, file sharing, and other capabilities.'
+excerpt: 'Secure Global Network (SGN) allows sites to communicate by using VoIP phones, email, file sharing, and other capabilities.'
 share: '../../images/share/ogimage-networking_and_connectivity.png'
 updated: April 8
 ---
 
-SGN allows sites to communicate by using VoIP phones, email, file sharing, and other capabilities.
+Secure Global Network (SGN) allows sites to communicate by using VoIP phones, email, file sharing, and other capabilities.
 
 SGN is an Air Force Special Access Program (SAP) network approved for TS//SCI processing. DoD, AF, and industry facilities can utilize the optional SGN Remote Client (SRC) console to access SGN. SRC is a fully accredited and deployable SGN network node. A separately accredited information system may be used to connect to SGN, if required.
 
@@ -36,7 +36,7 @@ SGN is an Air Force Special Access Program (SAP) network approved for TS//SCI pr
 
 ## Supported Capabilities
 
-- Email and file sharing functionality via [CORE](/services/core/) and Hawkeye services
+- Email and file sharing functionality via [CORE](/services/core/) and SIC services
 - Voice/VoIP
 - Access to JADE personnel adjudication database
 

src/pages/404.js

@@ -9,9 +9,7 @@ const NotFoundPage = () => (
     <Container>
       <Column>
         <Heading>404: Not Found</Heading>
-        <Paragraph>
-          You just hit a route that doesn&#39;t exist... the sadness.
-        </Paragraph>
+        <Paragraph>You just hit a route that doesn&#39;t exist.</Paragraph>
       </Column>
     </Container>
   </AppLayout>

src/pages/solutions.js

@@ -111,7 +111,12 @@ const Solutions = ({ data }) => {
                 }}
               >
                 <Layer animation="fadeIn">
-                  <ContactForm onClose={handleModalToggle} />
+                  <ContactForm
+                    onClose={handleModalToggle}
+                    role="dialog"
+                    aria-modal="true"
+                    a11yTitle="request a consultation"
+                  />
                 </Layer>
               </ThemeContext.Extend>
             )}

src/styles/theme.js

@@ -119,7 +119,19 @@ export const themeOverrides = {
         textTransform: 'uppercase',
       },
     level: {
-      3: { font: { family: helveticaFont } },
+      2: {
+        medium: {
+          size: '30px',
+          height: '32px',
+        },
+      },
+      3: {
+        font: { family: helveticaFont },
+        medium: {
+          size: '22px',
+          height: '26px',
+        },
+      },
       4: { font: { family: helveticaFont } },
       5: { font: { family: helveticaFont } },
       6: { font: { family: helveticaFont } },

src/templates/ServiceDetail.js

@@ -55,7 +55,7 @@ const ServiceDetailTemplate = ({ data }) => {
                   basis={breakLayout ? 'auto' : '460px'}
                   flex={{ shrink: 0 }}
                 >
-                  <ContactForm />
+                  <ContactForm defaultService={frontmatter.title} />
                 </Box>
               </Column>
             </ContentContainer>

src/templates/SolutionDetail.js

@@ -56,7 +56,7 @@ const SolutionDetailTemplate = ({ data }) => {
                     basis={breakLayout ? 'auto' : '460px'}
                     flex={{ shrink: 0 }}
                   >
-                    <ContactForm />
+                    <ContactForm defaultService={frontmatter.title} />
                   </Box>
                 </Box>
               </Column>