add-mvp-banner (#1813)

* DEVX-75 adding banner to point to MVP site.

* DEVX-75 visual tweak to button placement

* DEVX-75 removed reference to inaccurate "creator"

.gitignore

@@ -118,4 +118,5 @@ web/registry/registry.json
 # VSCode configs
 .vscode/
 
-web/cypress/videos
+web/cypress/videos
+/web/how_to_private.txt

web/src/components/UI/Link/ButtonLink.js

@@ -0,0 +1,47 @@
+/*
+Copyright 2019 Province of British Columbia
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import Link from './Link';
+import styled from '@emotion/styled';
+
+const ButtonLink = ({ to, children, ...rest }) => (
+  <Link to={to} {...rest}>
+    {children}
+  </Link>
+);
+
+const StyledLink = styled(ButtonLink)`
+  background-color: ${({ theme }) => theme.colors.blue};
+  font-weight: 400;
+  text-align: center;
+  color: white;
+  border-radius: 5px;
+  display: block;
+  margin: 0 auto;
+  padding: 0.5em;
+  width: 150px;
+  text-decoration: none;
+`;
+
+ButtonLink.propTypes = {
+  to: PropTypes.string.isRequired,
+  children: PropTypes.string.isRequired,
+};
+
+export default StyledLink;

web/src/components/UI/Link/index.js

@@ -1,4 +1,5 @@
 import Link from './Link';
 import SearchAwareLink from './SearchAwareLink';
 import ChevronLink from './ChevronLink';
-export { Link, SearchAwareLink, ChevronLink };
+import ButtonLink from './ButtonLink';
+export { Link, SearchAwareLink, ChevronLink, ButtonLink };

web/src/hoc/Layout.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { graphql } from 'gatsby';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import { Container } from 'reactstrap';
+import { Alert, Container } from 'reactstrap';
 import Helmet from 'react-helmet';
 
 // layout local components
@@ -11,6 +11,7 @@ import PrimaryFooter from '../components/PrimaryFooter/PrimaryFooter';
 import { Navbar } from '../components/Navbar/Navbar';
 
 import { MAIN_NAV_ROUTE_LIST } from '../constants/routes';
+import { ButtonLink } from '../components/UI/Link';
 
 const StyledContainer = styled(Container)`
   min-height: 100vh;
@@ -27,6 +28,17 @@ const Wrapper = styled.div`
   }
 `;
 
+const RetirementNotice = styled(Alert)`
+  width: 70%;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 25px;
+  margin-bottom: 15px;
+  padding: 20px;
+`;
+
+const utmLink =
+  'https://mvp.developer.gov.bc.ca/?utm_source=devhub-classic&utm_medium=web&utm_campaign=retirement-notice-oct-2023';
 export const Layout = ({ children }) => {
   const [menuToggled, setMenuToggled] = useState(false);
   return (
@@ -39,7 +51,26 @@ export const Layout = ({ children }) => {
 
       <Navbar links={MAIN_NAV_ROUTE_LIST} toggled={menuToggled} />
 
-      <Wrapper>{children}</Wrapper>
+      <Wrapper>
+        <RetirementNotice color="primary">
+          <h4 className="alert-heading">We're working on a new and improved DevHub!</h4>
+          <p>
+            Please try our MVP at{' '}
+            <a href={utmLink} className="alert-link">
+              https://mvp.developer.gov.bc.ca
+            </a>
+            , and{' '}
+            <a href="mailto:developer.experience@gov.bc.ca" className="alert-link">
+              let us know
+            </a>{' '}
+            what's missing to make it useful for you.
+          </p>
+          <div>
+            <ButtonLink to={utmLink}>Test it out!</ButtonLink>
+          </div>
+        </RetirementNotice>
+        {children}
+      </Wrapper>
       <PrimaryFooter />
     </StyledContainer>
   );