Move footer into Card component. Updated styles as needed

eresearchqut · Sep 9, 2024 · e7788f8 · e7788f8
1 parent 8576023
commit e7788f8
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 50 deletions.
diff --git a/src/components/footer/Footer.stories.tsx b/src/components/footer/Footer.stories.tsx
@@ -14,3 +14,21 @@ Default.args = {
   acknowledgement:
     "[Acknowledgement of Country](https://www.indigenous.gov.au/contact-us/welcome_acknowledgement-country)",
 };
+
+export const TEQSAAndCRICOS = Template.bind({});
+TEQSAAndCRICOS.args = {
+  notice:
+    "TEQSA Provider ID [PRV12079](https://www.teqsa.gov.au/national-register/provider/queensland-university-technology) Australian University | CRICOS No. 00213J",
+  acknowledgement:
+    "[Acknowledgement of Country](https://www.indigenous.gov.au/contact-us/welcome_acknowledgement-country)",
+};
+
+export const TEQSAAndCRICOSWithShortNotice = Template.bind({});
+TEQSAAndCRICOSWithShortNotice.args = {
+  notice:
+    "TEQSA Provider ID [PRV12079](https://www.teqsa.gov.au/national-register/provider/queensland-university-technology) Australian University | CRICOS No. 00213J",
+  shortNotice:
+    "TEQSA [PRV12079](https://www.teqsa.gov.au/national-register/provider/queensland-university-technology) | CRICOS 00213J",
+  acknowledgement:
+    "[Acknowledgement of Country](https://www.indigenous.gov.au/contact-us/welcome_acknowledgement-country)",
+};
diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx
@@ -1,24 +1,29 @@
-import { FunctionComponent, PropsWithChildren } from "react";
-import { Stack } from "@chakra-ui/react";
+import { Fragment, FunctionComponent, PropsWithChildren } from "react";
+import { Show, Stack } from "@chakra-ui/react";
 import { Markdown } from "../markdown";
 
 export interface FooterProps {
-  acknowledgement?: string;
-  notice?: string;
+  acknowledgement: string;
+  notice: string;
+  shortNotice?: string;
 }
 
 export const Footer: FunctionComponent<PropsWithChildren<FooterProps>> = (
   props
 ) => {
-  const { acknowledgement, notice, children } = props;
+  const { acknowledgement, notice, shortNotice, children } = props;
   return (
-    <Stack
-      direction={["column", "row"]}
-      justifyContent={["flex-start", "space-between"]}
-    >
-      {acknowledgement && <Markdown markdown={acknowledgement} />}
+    <Stack direction={["row"]} justifyContent={["space-between"]}>
+      <Markdown markdown={acknowledgement} />
       {children}
-      {notice && <Markdown markdown={notice} />}
+      <Fragment>
+        <Show below={"md"}>
+          <Markdown markdown={shortNotice ?? notice} />
+        </Show>
+        <Show above={"md"}>
+          <Markdown markdown={notice} />
+        </Show>
+      </Fragment>
     </Stack>
   );
 };

diff --git a/src/components/page/Page.tsx b/src/components/page/Page.tsx
@@ -16,6 +16,7 @@ import {
   useMultiStyleConfig,
 } from "@chakra-ui/react";
 import { Header, HeaderProps } from "../header";
+import { Footer } from "../footer";
 
 export interface PageProps {
   header: HeaderProps;
@@ -78,6 +79,19 @@ export const Page: FunctionComponent<PropsWithChildren<PageProps>> = (
                   </Link>
                 </Alert>
               </CardFooter>
+              <Box p={12} pt={6}>
+                <Footer
+                  acknowledgement={
+                    "[QUT acknowledges the Traditional Owners of the lands where QUT now stands.](https://www.qut.edu.au/about/indigenous)"
+                  }
+                  notice={
+                    "TEQSA Provider ID [PRV12079](https://www.teqsa.gov.au/national-register/provider/queensland-university-technology) Australian University | CRICOS No. 00213J"
+                  }
+                  shortNotice={
+                    "TEQSA [PRV12079](https://www.teqsa.gov.au/national-register/provider/queensland-university-technology) | CRICOS 00213J"
+                  }
+                />
+              </Box>
             </Card>
           </chakra.main>
         </Box>

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,5 +1,5 @@
 import type { NextPage } from "next";
-import { Box, Link, Stack, StackDivider } from "@chakra-ui/react";
+import { Stack } from "@chakra-ui/react";
 import Head from "next/head";
 import site from "../../public/site.json";
 import Page from "../components/page/Page";
@@ -13,7 +13,6 @@ import { PastIncidents, Incident } from "../components/pastIncidents";
 import { ServiceStatus } from "../components/operationalStatus/OperationalStatus";
 
 import { useEffect, useState } from "react";
-import { Footer } from "../components";
 
 interface StatusData {
   last_updated: string;
@@ -119,43 +118,6 @@ const Home: NextPage = () => {
           )}
         </Stack>
       </Page>
-      <Footer>
-        <Stack
-          p={6}
-          direction={{ base: "column", md: "row" }}
-          divider={<StackDivider borderColor="gray.200" />}
-          spacing={"12px"}
-        >
-          <Box>
-            <abbr title={"Tertiary Education Quality and Standards Agency"}>
-              TEQSA
-            </abbr>{" "}
-            Provider ID{" "}
-            <Link
-              href={
-                "https://www.teqsa.gov.au/provider/queensland-university-technology"
-              }
-              isExternal
-            >
-              PRV12079
-            </Link>{" "}
-            Australian University
-          </Box>
-          <Box>
-            <abbr
-              title={
-                "Commonwealth Register of Institutions and Courses for Overseas Students"
-              }
-            >
-              CRICOS
-            </abbr>{" "}
-            No. 00213J
-          </Box>
-          <Box>
-            <abbr title={"Australian Business Number"}>ABN</abbr> 83 791 724 622
-          </Box>
-        </Stack>
-      </Footer>
     </>
   );
 };