Merge branch 'develop' into 'staging'

april 7th punchlist, and working on fix for links to have trailing slashes

See merge request !19

gatsby-config.js

@@ -45,7 +45,7 @@ module.exports = {
         icon: `src/images/favicon@2x.png`, // This path is relative to the root of the site.
       },
     },
-    `gatsby-plugin-gatsby-cloud`,
+    `gatsby-plugin-force-trailing-slashes`,
     // this (optional) plugin enables Progressive Web App + Offline functionality
     // To learn more, visit: https://gatsby.dev/offline
     // `gatsby-plugin-offline`,

package-lock.json

 {
-  "name": "afeit-site",
+  "name": "afdigital-site",
   "version": "0.1.0",
   "lockfileVersion": 1,
   "requires": true,
@@ -8555,6 +8555,24 @@
         "micromatch": "^4.0.2"
       }
     },
+    "gatsby-plugin-force-trailing-slashes": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-force-trailing-slashes/-/gatsby-plugin-force-trailing-slashes-1.0.5.tgz",
+      "integrity": "sha512-RxRdW++bvSHv4Mho999W0LLNdiQX1OMOvY0v1TlafcaYqJ93fYV/Jp3DDD6PKS0PAKNS8Q8DRsD67cipFmZCFA==",
+      "requires": {
+        "@babel/runtime": "7.12.5"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.12.5",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.5.tgz",
+          "integrity": "sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        }
+      }
+    },
     "gatsby-plugin-gatsby-cloud": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/gatsby-plugin-gatsby-cloud/-/gatsby-plugin-gatsby-cloud-1.0.2.tgz",

package.json

@@ -7,6 +7,7 @@
   "dependencies": {
     "gatsby": "^2.32.8",
     "gatsby-image": "^2.11.0",
+    "gatsby-plugin-force-trailing-slashes": "^1.0.5",
     "gatsby-plugin-gatsby-cloud": "^1.0.2",
     "gatsby-plugin-manifest": "^2.12.1",
     "gatsby-plugin-offline": "^3.10.2",

src/components/ContactForm.js

@@ -8,12 +8,15 @@ import {
   TextInput,
   TextArea,
   Spinner,
+  Button,
 } from 'grommet';
+import { Close } from 'grommet-icons';
+
 import { PrimaryButton } from './core';
 
 const korolevFont = 'korolev, Helvetica Neue, Helvetica, Arial, sans-serif';
 
-const ContactForm = () => {
+const ContactForm = ({ onClose }) => {
   const [submitting, setSubmitting] = useState();
   const [success, setSuccess] = useState();
 
@@ -35,7 +38,13 @@ const ContactForm = () => {
 
   return (
     <Box>
-      <Box pad="medium" background="black">
+      <Box
+        pad="medium"
+        background="black"
+        direction="row"
+        justify="between"
+        align="center"
+      >
         <Heading
           level={3}
           margin="0"
@@ -45,6 +54,7 @@ const ContactForm = () => {
         >
           REQUEST A CONSULTATION
         </Heading>
+        {onClose && <Button icon={<Close />} onClick={onClose}></Button>}
       </Box>
       <Box
         pad="medium"
@@ -130,11 +140,12 @@ const ContactForm = () => {
                   style={{ height: '100px' }}
                 />
               </FormField>
-              <Box pad={{ top: 'medium' }}>
+              <Box pad={{ top: 'medium' }} align="center" justify="center">
                 <PrimaryButton
                   pad={{ vertical: 'large' }}
                   type="submit"
                   label="Submit"
+                  style={{ width: onClose ? '250px' : '100%' }}
                 />
               </Box>
             </Form>
@@ -187,6 +198,7 @@ const ContactForm = () => {
               <br />
               reach out soon.
             </Text>
+            {onClose && <Button onClick={onClose} label="Close" />}
           </Box>
         )}
       </Box>

src/components/DownHex.js

@@ -30,9 +30,9 @@ const DownHex = () => (
           }}
         />
         <FormDown
-          color="accent-1"
+          color="accent-2"
           size="30"
-          style={{ position: 'relative', top: '7px' }}
+          style={{ position: 'relative', top: '12px' }}
         />
       </Box>
     </Column>

src/components/FeedbackFooter.js

@@ -27,7 +27,7 @@ const FeedbackFooter = () => {
             gap="medium"
           >
             <Box justify="center" align={isMobile ? 'center' : 'start'}>
-              <Text weight="bold">We could use your feedback!</Text>
+              <Text weight="bold">We could use your help!</Text>
               <Text size="small">
                 Send us feedback on this website or, better,
                 <br />
@@ -38,7 +38,7 @@ const FeedbackFooter = () => {
             <Box justify="center" align="center">
               <Box width="200px">
                 <SecondaryButton
-                  label="SEND FEEDBACK"
+                  label="CUSTOMER FEEDBACK"
                   onClick={handleToggleOpen}
                 />
               </Box>

src/components/FeedbackForm.js

@@ -13,13 +13,13 @@ import {
   ThemeContext,
 } from 'grommet';
 import { Close } from 'grommet-icons';
-import { PrimaryButton } from './core';
+import { PrimaryButton, SecondaryButton } from './core';
 
 const korolevFont = 'korolev, Helvetica Neue, Helvetica, Arial, sans-serif';
 
 const FeedbackForm = ({ onClose }) => {
   const [submitting, setSubmitting] = useState();
-  const [success, setSuccess] = useState();
+  const [success, setSuccess] = useState(true);
 
   const handleSubmit = (event) => {
     const data = new FormData(event.target);
@@ -90,7 +90,7 @@ const FeedbackForm = ({ onClose }) => {
                     value="volunteer"
                     label={
                       <Box>
-                        <Text weight="bold">
+                        <Text weight="bold" size="small">
                           Join our Customer Advisory Panel
                         </Text>
                         <Text size="small">
@@ -177,16 +177,16 @@ const FeedbackForm = ({ onClose }) => {
           </Box>
         )}
         {success && (
-          <Box pad="large" align="center" justify="center">
+          <Box pad="large" align="center" justify="center" gap="small">
             <Heading
               level={3}
               style={{ fontFamily: korolevFont }}
-              margin={{ top: '0', bottom: 'small' }}
+              margin={{ vertical: '0' }}
             >
               FEEDBACK SENT
             </Heading>
             <Text textAlign="center">Thanks for sharing with us.</Text>
-            <Button onClick={onClose}>Close</Button>
+            <SecondaryButton onClick={onClose} label="Close" />
           </Box>
         )}
       </Box>

src/components/app/Header.js

@@ -21,7 +21,7 @@ const StyledHeader = styled(GHeader)`
   right: 0;
   background: ${(props) =>
     props.transparent && !props.sticky
-      ? 'linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0))'
+      ? 'linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))'
       : 'black'};
   display: flex;
   height: ${(props) =>

src/components/app/Nav.js

@@ -43,7 +43,7 @@ const Nav = ({ sticky }) => {
           >
             <Box justify="center">
               <Link
-                to="/about-us"
+                to="/about-us/"
                 size="xsmall"
                 color={sticky ? 'light-1' : 'white'}
                 style={{ textTransform: 'uppercase' }}
@@ -53,7 +53,7 @@ const Nav = ({ sticky }) => {
             </Box>
             <Box justify="center">
               <Link
-                to="/other-programs"
+                to="/other-programs/"
                 size="xsmall"
                 color={sticky ? 'light-1' : 'white'}
                 style={{ textTransform: 'uppercase' }}
@@ -110,7 +110,7 @@ const Nav = ({ sticky }) => {
 
             <Box justify="center" margin={{ left: 'medium' }}>
               <Link
-                to="/solutions"
+                to="/solutions/"
                 size="small"
                 weight="bold"
                 color="white"

src/components/core/PrimaryButton.js

@@ -14,17 +14,12 @@ const themeExtend = {
  * Application specific button component, using Grommet Button
  * @see https://v2.grommet.io/button
  * @param {object} props - React props
+ * @param {string} props.label - Text for button
  * @returns {Component}
  */
 const PrimaryButton = ({ label, ...rest }) => (
   <ThemeContext.Extend value={themeExtend}>
-    <Button
-      primary
-      color="accent-1"
-      style={{ textTransform: 'uppercase' }}
-      size="small"
-      {...rest}
-    >
+    <Button primary color="accent-1" size="small" {...rest}>
       <Box direction="row" align="center" justify="between" pad="small">
         <Box>{/* Nothing */}</Box>
         <Text size="small" weight="bold">

src/components/core/SecondaryButton.js

 import React from 'react';
-import { Button } from 'grommet';
+import { Button, Box, Text, ThemeContext } from 'grommet';
 import { FormNext } from 'grommet-icons';
 
+const themeExtend = {
+  text: {
+    font: {
+      family: 'korolev, Helvetica Neue, Helvetica, Arial, sans-serif',
+    },
+    extend: () => ({ textTransform: 'uppercase', letterSpacing: '0.05em' }),
+  },
+};
+
 /**
  * Application specific button component, using Grommet Button
  * @see https://v2.grommet.io/button
  * @param {object} props - React props
+ * @param {string} props.label - Text for button
  * @returns {Component}
  */
-const SecondaryButton = ({ ...rest }) => (
-  <Button
-    secondary
-    color="dark-1"
-    style={{ textTransform: 'uppercase' }}
-    icon={<FormNext color="accent-1" />}
-    reverse
-    size="small"
-    {...rest}
-  />
+const SecondaryButton = ({ label, ...rest }) => (
+  <ThemeContext.Extend value={themeExtend}>
+    <Button secondary size="small" {...rest}>
+      <Box
+        direction="row"
+        align="center"
+        justify="between"
+        border={{ color: 'dark-1', size: 'small' }}
+        pad={{ vertical: 'xsmall' }}
+      >
+        <Box>{/* Nothing */}</Box>
+        <Text size="small" weight="bold" color="black">
+          {label}
+        </Text>{' '}
+        <FormNext color="accent-1" />
+      </Box>
+    </Button>
+  </ThemeContext.Extend>
 );
 
 export default SecondaryButton;

src/components/hero/Hero.js

@@ -104,7 +104,7 @@ const Slide = ({ title, subtitle, core, cta, slug, logo }) => {
         </Box>
         {cta && (
           <Box direction="row" justify="start" pad={{ vertical: 'medium' }}>
-            <PrimaryButton label={cta} to={slug} style={{ width: '300px' }} />
+            <PrimaryButton label={cta} href={slug} style={{ width: '300px' }} />
           </Box>
         )}
       </Box>

src/components/hero/ServiceHero.js

@@ -5,15 +5,12 @@ import { Container, Column } from '../layout';
 import DownHex from '../DownHex';
 import theme from '../../styles/theme';
 
-const addDivider = (arr, divider) =>
-  [].concat(...arr.map((n) => [n, divider])).slice(0, -1);
-
 const ServiceHero = ({ title, subtitle, pretitle, categories, imageFluid }) => {
   const size = useContext(ResponsiveContext);
 
   const isMobile = ['xsmall', 'small'].includes(size);
 
-  const catWithDivider = categories && addDivider(categories, '|');
+  const catWithDivider = categories && categories.join('   |   '); // addDivider(categories, '|');
 
   return (
     <Container
@@ -36,7 +33,7 @@ const ServiceHero = ({ title, subtitle, pretitle, categories, imageFluid }) => {
       )}
       <Column
         direction="row"
-        pad={{ vertical: 'large' }}
+        pad={{ bottom: 'large' }}
         style={{ position: 'relative' }}
       >
         <Box pad="large">
@@ -50,11 +47,15 @@ const ServiceHero = ({ title, subtitle, pretitle, categories, imageFluid }) => {
                 {subtitle}
               </Text>
             )}
-            {catWithDivider?.map((t, i) => (
-              <Text size="small" color="accent-2" key={`${t}-${i}`}>
-                {t}
+            {catWithDivider && (
+              <Text
+                size="small"
+                color="accent-2"
+                style={{ whiteSpace: 'pre-wrap' }}
+              >
+                {catWithDivider}
               </Text>
-            ))}
+            )}
           </Box>
         </Box>
       </Column>

src/components/mega-menu/MegaMenu.js

@@ -97,21 +97,17 @@ 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="Cloud Access" category="Cloud Access" />
                 <MenuGroup
                   title="Reference Architectures"
                   category="Reference Architectures"
                 />
-                <MenuGroup
-                  title="Virtual Private Connections"
-                  category="Virtual Private Connections"
-                />
               </Box>
             </Box>
           </Box>

src/components/pages/home/OfferAccordion.js

@@ -79,21 +79,17 @@ 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="Cloud Access" category="Cloud Access" />
               <MenuGroup
                 title="Reference Architectures"
                 category="Reference Architectures"
               />
-              <MenuGroup
-                title="Virtual Private Connections"
-                category="Virtual Private Connections"
-              />
             </Box>
           </Box>
         </AccordionPanel>

src/components/pages/home/Solutions.js

@@ -104,7 +104,7 @@ const Solutions = () => {
         <SolutionGroup node={s2} isMobile={isMobile} />
       </Box>
       <Box width="300px" margin="large">
-        <PrimaryButton label="SEE MORE SOLUTIONS" />
+        <PrimaryButton label="SEE MORE SOLUTIONS" href="/solutions" />
       </Box>
     </Box>
   );

src/components/pages/home/Steps.js

@@ -3,46 +3,60 @@ import { Box, Text, ResponsiveContext } from 'grommet';
 import { DtHex } from '../../icons';
 
 const Step = ({ number, isMobile, children }) => (
-  <Box
-    basis="1/4"
-    pad={{ horizontal: 'small' }}
-    align="center"
-    direction={isMobile ? 'row' : 'column'}
-    gap="medium"
-  >
+  <Box style={{ position: 'relative' }}>
+    {/* TODO: Add this line
     <Box
-      height="65px"
-      width="80px"
-      flex={{ shrink: 0 }}
-      style={{ position: 'relative' }}
+      height="1px"
+      background="dark-1"
+      width="100%"
+      style={{ position: 'absolute', top: '32px' }}
+    /> */}
+    <Box
+      basis="1/4"
+      pad={{ horizontal: 'small' }}
       align="center"
-      justify="center"
+      direction={isMobile ? 'row' : 'column'}
+      gap="medium"
     >
-      <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
+        height="65px"
+        width="80px"
+        flex={{ shrink: 0 }}
+        style={{ position: 'relative' }}
+        align="center"
+        justify="center"
+      >
+        <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>
 );
 

src/content/other-programs/eitaas.md

@@ -2,9 +2,10 @@
 name: EITaaS
 index: 1
 ---
-### EITaaS
+## EITaaS
+
+#### Cloud Compute & Store
 
-**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.
 
 **End-User Devices**

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

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

src/content/service-detail/seitaas-remote-connect.md

----
-slug: '/services/seitaas-remote-connect'
-title: 'SEITaaS Remote Connect'
-categories: 
-  - Networking & Connectivity
-  - Virtual Private Connections
-levels: 
-  - S-SAR
-  - S-SCI
-  - TS-SAR
-  - TS-SCI
-excerpt: 'SEITaaS will enable enterprise capabilities to be provided as a service to users accessing thin client, zero client, or connected self sustained performer LANs.'
-share: '../../images/share/ogimage-networking_and_connectivity.png'
-updated: April 6
----
-
-SEITaaS will enable enterprise capabilities to be provided as a service to users accessing thin client, zero client, or connected self sustained performer LANs.
-
-SEITaaS/Summit endpoints will be available to meet differing end-user needs. The network will offer thin client or zero client to users for a small form factor to support  a network-agnostic solution. Additionally, Summit enterprise services, including MLS applications and cybersecurity services, will be made available to some user-maintained networks that will be designated as performer LANs. These LANs would be connected to and consume services from SEITaaS/Summit until they can be transitioned over to SEITaaS/Summit-managed endpoints.
\ No newline at end of file