HCBS Footer 2/x - Set up app routes (#13)

services/ui-src/src/components/accordions/AccordionItem.test.tsx

@@ -0,0 +1,31 @@
+import { render, screen } from "@testing-library/react";
+import { axe } from "jest-axe";
+import { RouterWrappedComponent } from "utils/testing/setupJest";
+import { Accordion } from "@chakra-ui/react";
+import { AccordionItem } from "components";
+
+const accordionItemComponent = (
+  <RouterWrappedComponent>
+    <Accordion>
+      <AccordionItem data-testid="accordion-item" />
+    </Accordion>
+  </RouterWrappedComponent>
+);
+
+describe("Test AccordionItem", () => {
+  beforeEach(() => {
+    render(accordionItemComponent);
+  });
+
+  test("AccordionItem is visible", () => {
+    expect(screen.getByTestId("accordion-item")).toBeVisible();
+  });
+});
+
+describe("Test AccordionItem accessibility", () => {
+  it("Should not have basic accessibility issues", async () => {
+    const { container } = render(accordionItemComponent);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

services/ui-src/src/components/accordions/AccordionItem.tsx

@@ -0,0 +1,59 @@
+import { ReactChild } from "react";
+import {
+  AccordionButton,
+  AccordionItem as AccordionItemRoot,
+  AccordionPanel,
+  Image,
+  Text,
+} from "@chakra-ui/react";
+import plusIcon from "assets/icons/icon_plus.png";
+import minusIcon from "assets/icons/icon_minus.png";
+
+export const AccordionItem = ({ label, children, ...props }: Props) => {
+  return (
+    <AccordionItemRoot sx={sx.root} {...props}>
+      {({ isExpanded }) => (
+        <>
+          <AccordionButton
+            sx={sx.accordionButton}
+            aria-label={label}
+            title="accordion-button"
+          >
+            <Text flex="1">{label}</Text>
+            <Image
+              src={isExpanded ? minusIcon : plusIcon}
+              alt={isExpanded ? "Collapse" : "Expand"}
+              sx={sx.accordionIcon}
+            />
+          </AccordionButton>
+          <AccordionPanel sx={sx.accordionPanel}>{children}</AccordionPanel>
+        </>
+      )}
+    </AccordionItemRoot>
+  );
+};
+
+interface Props {
+  children?: ReactChild | ReactChild[];
+  [key: string]: any;
+}
+
+const sx = {
+  root: {
+    borderStyle: "none",
+  },
+  accordionButton: {
+    minHeight: "3.5rem",
+    bg: "palette.gray_lightest",
+    textAlign: "left",
+  },
+  accordionPanel: {
+    padding: "1.5rem 1rem 0.5rem",
+    ".mobile &": {
+      padding: "0.5rem 0",
+    },
+  },
+  accordionIcon: {
+    width: "1rem",
+  },
+};

services/ui-src/src/components/accordions/FaqAccordion.test.tsx

@@ -0,0 +1,50 @@
+import { render, screen } from "@testing-library/react";
+import { axe } from "jest-axe";
+import userEvent from "@testing-library/user-event";
+import { RouterWrappedComponent } from "utils/testing/setupJest";
+import { FaqAccordion } from "components";
+
+const accordionItems = [
+  {
+    question: "Question?",
+    answer: "Answer!",
+  },
+];
+
+const faqAccordionComponent = (
+  <RouterWrappedComponent>
+    <FaqAccordion accordionItems={accordionItems} />
+  </RouterWrappedComponent>
+);
+
+describe("Test FaqAccordion", () => {
+  beforeEach(() => {
+    render(faqAccordionComponent);
+  });
+
+  test("FaqAccordion is visible", () => {
+    expect(screen.getByText(accordionItems[0].question)).toBeVisible();
+  });
+
+  test("FaqAccordion default closed state only shows the question", () => {
+    expect(screen.getByText(accordionItems[0].question)).toBeVisible();
+    expect(screen.getByText(accordionItems[0].answer)).not.toBeVisible();
+  });
+
+  test("FaqAccordion should show answer on click", async () => {
+    const faqQuestion = screen.getByText(accordionItems[0].question);
+    expect(faqQuestion).toBeVisible();
+    expect(screen.getByText(accordionItems[0].answer)).not.toBeVisible();
+    await userEvent.click(faqQuestion);
+    expect(faqQuestion).toBeVisible();
+    expect(screen.getByText(accordionItems[0].answer)).toBeVisible();
+  });
+});
+
+describe("Test FaqAccordion accessibility", () => {
+  it("Should not have basic accessibility issues", async () => {
+    const { container } = render(faqAccordionComponent);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

services/ui-src/src/components/accordions/FaqAccordion.tsx

@@ -0,0 +1,33 @@
+import { Accordion, Box, Text } from "@chakra-ui/react";
+import { AccordionItem } from "components";
+import { AnyObject } from "types";
+
+export const FaqAccordion = ({ accordionItems, ...props }: Props) => {
+  return (
+    <Accordion allowToggle={true} allowMultiple={true} {...props}>
+      {accordionItems.map((item: AnyObject, index: number) => (
+        <AccordionItem key={index} label={item.question} sx={sx.item}>
+          <Box sx={sx.answerBox}>
+            <Text>{item.answer}</Text>
+          </Box>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  );
+};
+
+interface Props {
+  accordionItems: AnyObject;
+}
+
+const sx = {
+  item: {
+    marginBottom: "1.5rem",
+    borderStyle: "none",
+  },
+  answerBox: {
+    ".mobile &": {
+      paddingLeft: "1rem",
+    },
+  },
+};

services/ui-src/src/components/app/App.tsx

@@ -1,13 +1,17 @@
 import { useContext } from "react";
 import { Routes, Route } from "react-router-dom";
-import { Container, Divider, Flex, Heading, Stack } from "@chakra-ui/react";
 import {
+  AppRoutes,
+  Error,
   Header,
   LoginCognito,
   LoginIDM,
   PostLogoutRedirect,
   Footer,
+  Timeout,
 } from "components";
+import { Container, Divider, Flex, Heading, Stack } from "@chakra-ui/react";
+import { ErrorBoundary } from "react-error-boundary";
 import { makeMediaQueryClasses, UserContext, useStore } from "utils";
 
 export const App = () => {
@@ -32,8 +36,14 @@ export const App = () => {
   const authenticatedRoutes = (
     <>
       {user && (
-        <Flex data-testid="app-container" sx={sx.appLayout}>
+        <Flex sx={sx.appLayout}>
+          <Timeout />
           <Header handleLogout={logout} />
+          <Container sx={sx.appContainer} data-testid="app-container">
+            <ErrorBoundary FallbackComponent={Error}>
+              <AppRoutes />
+            </ErrorBoundary>
+          </Container>
           <Footer />
         </Flex>
       )}

services/ui-src/src/components/app/AppRoutes.tsx

@@ -0,0 +1,13 @@
+import { Route, Routes } from "react-router-dom";
+import { HelpPage } from "components";
+
+export const AppRoutes = () => {
+  return (
+    <main id="main-content" tabIndex={-1}>
+      <Routes>
+        {/* General Routes */}
+        <Route path="/help" element={<HelpPage />} />
+      </Routes>
+    </main>
+  );
+};

services/ui-src/src/components/cards/Card.test.tsx

@@ -0,0 +1,27 @@
+import { render, screen } from "@testing-library/react";
+import { axe } from "jest-axe";
+import { Card } from "components";
+
+const cardComponent = (
+  <Card {...{ "data-testid": "card" }}>
+    <p>Mock child component</p>
+  </Card>
+);
+
+describe("Test Card", () => {
+  beforeEach(() => {
+    render(cardComponent);
+  });
+
+  test("Card is visible", () => {
+    expect(screen.getByTestId("card")).toBeVisible();
+  });
+});
+
+describe("Test Card accessibility", () => {
+  it("Should not have basic accessibility issues", async () => {
+    const { container } = render(cardComponent);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

services/ui-src/src/components/cards/Card.tsx

@@ -0,0 +1,25 @@
+import { ReactChild } from "react";
+import { Box } from "@chakra-ui/react";
+
+export const Card = ({ children, ...props }: Props) => {
+  return (
+    <Box {...props} sx={sx.root}>
+      {children}
+    </Box>
+  );
+};
+
+interface Props {
+  children?: ReactChild | ReactChild[];
+  [key: string]: any;
+}
+
+const sx = {
+  root: {
+    width: "100%",
+    padding: "2rem",
+    ".mobile &": {
+      padding: "1rem",
+    },
+  },
+};

services/ui-src/src/components/cards/EmailCard.test.tsx

@@ -0,0 +1,45 @@
+import { render, screen } from "@testing-library/react";
+import { axe } from "jest-axe";
+import { EmailCard } from "components";
+import { createEmailLink } from "utils/other/email";
+import verbiage from "verbiage/pages/help";
+
+const emailCardComponent = (
+  <EmailCard
+    verbiage={verbiage.cards.helpdesk}
+    icon="settings"
+    cardprops={{ "data-testid": "email-card" }}
+  />
+);
+
+describe("Test EmailCard", () => {
+  beforeEach(() => {
+    render(emailCardComponent);
+  });
+
+  test("EmailCard is visible", () => {
+    expect(screen.getByTestId("email-card")).toBeVisible();
+  });
+
+  test("Email links are created correctly", () => {
+    const mockEmailData = {
+      address: "[email protected]",
+      subject: "the subject",
+      body: "the body",
+    };
+    const expectedEmailLink = "mailto:[email protected]?the%20subject";
+    expect(createEmailLink(mockEmailData)).toEqual(expectedEmailLink);
+  });
+
+  test("Email links are visible", () => {
+    expect(screen.getByRole("link")).toBeVisible();
+  });
+});
+
+describe("Test EmailCard accessibility", () => {
+  it("Should not have basic accessibility issues", async () => {
+    const { container } = render(emailCardComponent);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});