feat: external layout component

bcgov · Feb 23, 2023 · e612f1c · e612f1c
1 parent f020a42
commit e612f1c
Show file tree

Hide file tree

Showing 7 changed files with 169 additions and 9 deletions.
diff --git a/app/components/Layout/DefaultLayout.tsx b/app/components/Layout/DefaultLayout.tsx
@@ -8,6 +8,8 @@ import UserProfile from "components/User/UserProfile";
 import GlobalAlert from "./GlobalAlert";
 import { useContext } from "react";
 import { ErrorContext } from "contexts/ErrorContext";
+import footerLinks from "data/dashboardLinks/footerLinks";
+import subHeaderLinks from "data/dashboardLinks/subHeaderLinks";
 
 const runtimeConfig = getConfig()?.publicRuntimeConfig ?? {};
 
@@ -39,6 +41,7 @@ const DefaultLayout: React.FC<Props> = ({
   return (
     <div id="page-wrap">
       <Navigation
+        links={subHeaderLinks}
         isLoggedIn={Boolean(session)}
         title={title}
         userProfileComponent={
@@ -54,7 +57,7 @@ const DefaultLayout: React.FC<Props> = ({
         {leftSideNav && <nav aria-label="side navigation">{leftSideNav}</nav>}
         <main>{children}</main>
       </div>
-      <Footer />
+      <Footer links={footerLinks} />
       <style jsx>
         {`
           #page-wrap {

diff --git a/app/components/Layout/ExternalLayout.tsx b/app/components/Layout/ExternalLayout.tsx
@@ -0,0 +1,111 @@
+import { graphql, useFragment } from "react-relay";
+import type { ExternalLayout_session$key } from "ExternalLayout_session.graphql";
+import getConfig from "next/config";
+import Navigation from "components/Layout/Navigation";
+import Footer from "components/Layout/Footer";
+import SiteNoticeBanner from "components/Layout/SiteNoticeBanner";
+import UserProfile from "components/User/UserProfile";
+import GlobalAlert from "./GlobalAlert";
+import { useContext } from "react";
+import { ErrorContext } from "contexts/ErrorContext";
+
+import footerLinks from "data/externalLinks/footerLinks";
+import subHeaderLinks from "data/externalLinks/subHeaderLinks";
+const runtimeConfig = getConfig()?.publicRuntimeConfig ?? {};
+
+interface Props {
+  title?: string;
+  session: ExternalLayout_session$key;
+  leftSideNav?: React.ReactNode;
+}
+
+const ExternalLayout: React.FC<Props> = ({
+  children,
+  title,
+  session: sessionFragment,
+  leftSideNav,
+}) => {
+  const session = useFragment(
+    graphql`
+      fragment ExternalLayout_session on KeycloakJwt {
+        cifUserBySub {
+          ...UserProfile_user
+        }
+      }
+    `,
+    sessionFragment
+  );
+
+  const { error } = useContext(ErrorContext);
+
+  return (
+    <div id="page-wrap">
+      <Navigation
+        links={subHeaderLinks}
+        isLoggedIn={Boolean(session)}
+        title={title}
+        userProfileComponent={
+          <UserProfile user={session ? session.cifUserBySub : null} />
+        }
+      >
+        {runtimeConfig.SITEWIDE_NOTICE && (
+          <SiteNoticeBanner content={runtimeConfig.SITEWIDE_NOTICE} />
+        )}
+      </Navigation>
+      {error && <GlobalAlert error={error} />}
+      <div id="page-content">
+        {leftSideNav && <nav aria-label="side navigation">{leftSideNav}</nav>}
+        <main>{children}</main>
+      </div>
+      <Footer links={footerLinks} />
+      <style jsx>
+        {`
+          #page-wrap {
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            background-color: #fafafc;
+          }
+
+          #page-content {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: flex-start;
+            margin: auto;
+            margin-top: 0;
+          }
+
+          main,
+          nav {
+            padding: 30px 40px;
+            flex-grow: 1;
+          }
+
+          main {
+            width: 100vw;
+          }
+
+          @media (min-width: 1024px) {
+            #page-content {
+              flex-direction: row;
+            }
+
+            nav {
+              position: sticky;
+              top: 30px;
+              padding-right: 0;
+            }
+
+            main {
+              min-width: 700px;
+              width: 100%;
+            }
+          }
+        `}
+      </style>
+    </div>
+  );
+};
+
+export default ExternalLayout;
diff --git a/app/components/Layout/Footer.tsx b/app/components/Layout/Footer.tsx
@@ -1,15 +1,18 @@
 import Link from "next/link";
 import BCGovFooter from "@button-inc/bcgov-theme/Footer";
-import footerLinks from "data/dashboardLinks/footerLinks";
 import BCGovLink from "@button-inc/bcgov-theme/Link";
 
-const Footer = () => {
+interface Props {
+  links: { name: string; href: string }[];
+}
+
+const Footer = (props: Props) => {
   return (
     <>
       <div>
         <BCGovFooter>
           <ul>
-            {footerLinks.map(({ name, href }) => (
+            {props.links?.map(({ name, href }) => (
               <li key={name}>
                 <Link passHref href={href}>
                   <BCGovLink target="_blank">{name}</BCGovLink>

diff --git a/app/components/Layout/Navigation.tsx b/app/components/Layout/Navigation.tsx
@@ -14,6 +14,7 @@ interface Props {
   title?: string;
   userProfileComponent?: React.ReactNode;
   hideLoginButton?: boolean;
+  links: { name: string; href: { pathname: string }; highlightOn: string[] }[];
 }
 
 const DEFAULT_MOBILE_BREAK_POINT = "900";
@@ -24,6 +25,7 @@ const Navigation: React.FC<Props> = ({
   title = "CleanBC Industry Fund",
   userProfileComponent,
   hideLoginButton,
+  links,
 }) => {
   let rightSide = isLoggedIn ? (
     <>
@@ -68,7 +70,7 @@ const Navigation: React.FC<Props> = ({
             {rightSide}
           </BaseHeader.Group>
         </BaseHeader>
-        {(isLoggedIn || alwaysShowSubheader) && <SubHeader />}
+        {(isLoggedIn || alwaysShowSubheader) && <SubHeader links={links} />}
       </BaseNavigation>
       <style jsx>{`
         h1 {

diff --git a/app/components/Layout/SubHeader.tsx b/app/components/Layout/SubHeader.tsx
@@ -1,15 +1,18 @@
 import { BaseHeader } from "@button-inc/bcgov-theme/Header";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import subHeaderLinks from "data/dashboardLinks/subHeaderLinks";
 import { useMemo } from "react";
 import { match } from "path-to-regexp";
 
-export default function SubHeader() {
+interface Props {
+  links: { name: string; href: { pathname: string }; highlightOn: string[] }[];
+}
+
+export default function SubHeader(props: Props) {
   const router = useRouter();
 
   const highlightedLinkName = useMemo(() => {
-    const highlightedLink = subHeaderLinks.find(({ highlightOn }) =>
+    const highlightedLink = props.links?.find(({ highlightOn }) =>
       highlightOn.some((routePath) =>
         match(routePath, { decode: decodeURIComponent, endsWith: "?" })(
           router?.asPath
@@ -30,7 +33,7 @@ export default function SubHeader() {
             </a>
           </Link>
         </li>
-        {subHeaderLinks.map(({ name, href }) => (
+        {props.links?.map(({ name, href }) => (
           <li key={name}>
             <Link href={href}>
               <a className={highlightedLinkName === name ? "highlight" : ""}>

diff --git a/app/data/externalLinks/footerLinks.ts b/app/data/externalLinks/footerLinks.ts
@@ -0,0 +1,24 @@
+const footerLinks = [
+  {
+    name: "Program Details",
+    href: "https://alpha.gov.bc.ca/gov/content/environment/climate-change/industry/cleanbc-industry-fund",
+  },
+  {
+    name: "Disclaimer",
+    href: "https://www2.gov.bc.ca/gov/content/home/disclaimer",
+  },
+  {
+    name: "Privacy",
+    href: "https://www2.gov.bc.ca/gov/content/home/privacy",
+  },
+  {
+    name: "Accessibility",
+    href: "https://www2.gov.bc.ca/gov/content/home/accessible-government",
+  },
+  {
+    name: "Copywrite",
+    href: "https://www2.gov.bc.ca/gov/content/home/copyright",
+  },
+];
+
+export default footerLinks;
diff --git a/app/data/externalLinks/subHeaderLinks.ts b/app/data/externalLinks/subHeaderLinks.ts
@@ -0,0 +1,14 @@
+const subHeaderLinks = [
+  {
+    name: "Email Us",
+    href: { pathname: "mailto:[email protected]" },
+    highlightOn: ["/cif/operator(.*)"],
+  },
+  {
+    name: "Contact Information",
+    href: { pathname: "#" },
+    highlightOn: ["/cif/contact(.*)"],
+  },
+];
+
+export default subHeaderLinks;