Hazards card component created (#87)

* hazard component populated

* hazard component styled, pill added

* Responsive paddings added

* added tests for hazards card

* components test lib style updated

app/components-test-lib/page.tsx

@@ -2,6 +2,7 @@
 
 import { Box, Heading, VStack, Text, HStack, Divider } from "@chakra-ui/react";
 import SearchBar from "../components/search-bar";
+import CardHazard from "../components/card-hazard";
 
 const ComponentsTestLib = () => {
   return (
@@ -15,22 +16,28 @@ const ComponentsTestLib = () => {
       }}
       m="auto"
     >
-      <Heading as="h1" size="xl" mb={4} color="blue">
+      <Heading as="h1" size="xl" mb={4} bgColor="blue" color="white" p="10px">
         Components Test Library
       </Heading>
-      <Divider mb={2} />
       <Heading as="h2" size="md" mb={2}>
         Search Bar
       </Heading>
-      <Text mb={4}>
-        This section demonstrates different states of the Search Bar component
-      </Text>
+      <Text mb={4}>This section demonstrates the Search Bar component</Text>
       <VStack spacing={4} align="start">
         <HStack w="100%">
-          <Heading as="h3" size="sm">
-            Default
-          </Heading>
-          <SearchBar />
+          <Box w="400px">
+            <SearchBar />
+          </Box>
+        </HStack>
+        <Divider mb={2} />
+      </VStack>
+      <Heading as="h2" size="md" mb={2}>
+        Hazards Card
+      </Heading>
+      <Text mb={4}>This section demonstrates Hazard Card component</Text>
+      <VStack spacing={4} align="start">
+        <HStack w="100%">
+          <CardHazard />
         </HStack>
         <Divider mb={2} />
       </VStack>

app/components/__mocks__/address-data.js

@@ -0,0 +1,6 @@
+export const AddressData = {
+  softStory: "Non-compliant",
+  seismic: "No data",
+  tsunami: "Compliant",
+  address: "1000 Great Highway",
+};

app/components/__mocks__/hazards.js

@@ -0,0 +1,23 @@
+export const Hazards = [
+  {
+    title: "Soft story",
+    description:
+      "Soft story buildings have less structural integrity in an earthquake",
+    update: "00-00-0000",
+    color: "#171923",
+  },
+  {
+    title: "Seismic",
+    description:
+      "This region is known to experience more focused seismic activity",
+    update: "00-00-0000",
+    color: "#F6AD55",
+  },
+  {
+    title: "Tsunami",
+    description:
+      "These coastal areas can be at risk of flooding in the event of a tsunami",
+    update: "00-00-0000",
+    color: "#ED64A6",
+  },
+];

app/components/__tests__/card-hazard.test.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import CardHazard from "../card-hazard";
+import { Hazards } from "../__mocks__/hazards";
+import "@testing-library/jest-dom";
+
+// eslint-disable-next-line react/display-name
+jest.mock("../pill.tsx", () => () => (
+  <div data-testid="pill-mock">Pill Component</div>
+));
+
+describe("CardHazard Component", () => {
+  beforeEach(() => {
+    Hazards[0] = {
+      title: "Earthquake",
+      description: "Potential hazard in the area.",
+      color: "#FF0000",
+      update: "2 days ago",
+    };
+  });
+
+  it("renders without crashing", () => {
+    render(<CardHazard />);
+    expect(screen.getByText("Earthquake")).toBeInTheDocument();
+  });
+
+  it("displays the hazard title and description", () => {
+    render(<CardHazard />);
+    expect(screen.getByText("Earthquake")).toBeInTheDocument();
+    expect(
+      screen.getByText("Potential hazard in the area.")
+    ).toBeInTheDocument();
+  });
+
+  it("displays the hazard's updated time", () => {
+    render(<CardHazard />);
+    expect(screen.getByText("Updated 2 days ago")).toBeInTheDocument();
+  });
+
+  it("displays the hazard's color in the SVG circle", () => {
+    render(<CardHazard />);
+    const svgCircle = screen.getByRole("img", { hidden: true });
+    expect(svgCircle).toHaveAttribute("fill", "#FF0000");
+  });
+});

app/components/card-hazard.tsx

@@ -0,0 +1,63 @@
+import {
+  Card,
+  CardHeader,
+  CardBody,
+  CardFooter,
+  Text,
+  HStack,
+} from "@chakra-ui/react";
+import { Hazards } from "./__mocks__/hazards";
+import Pill from "./pill";
+
+const CardHazard = () => {
+  const hazard = Hazards[0];
+
+  return (
+    <Card maxW={332}>
+      <CardHeader
+        p={{
+          base: "10px 23px 0px 23px",
+          md: "17px 16px 0px 16px",
+          xl: "22px 22px 0px 22px",
+        }}
+      >
+        <HStack justifyContent="space-between">
+          <Text textStyle="textBig">{hazard.title}</Text>
+          <Pill />
+        </HStack>
+      </CardHeader>
+      <CardBody
+        p={{
+          base: "10px 23px 0px 23px",
+          md: "17px 16px 0px 16px",
+          xl: "14px 22px 0px 22px",
+        }}
+      >
+        <Text textStyle="textMedium">{hazard.description}</Text>
+      </CardBody>
+      <CardFooter
+        p={{
+          base: "10px 23px 10px 23px",
+          md: "17px 16px 17px 16px",
+          xl: "14px 22px 22px 22px",
+        }}
+      >
+        <HStack>
+          <svg width="19" height="18" viewBox="0 0 19 18" fill="none">
+            <circle
+              cx="9.5"
+              cy="9"
+              r="8.5"
+              fill={hazard.color}
+              stroke="white"
+              role="img"
+            />
+          </svg>
+          <Text textStyle="textSmall">{"Updated " + hazard.update}</Text>
+        </HStack>
+      </CardFooter>
+    </Card>
+  );
+};
+
+export default CardHazard;

app/components/pill.tsx

@@ -0,0 +1,32 @@
+import { Box, Text } from "@chakra-ui/react";
+import { AddressData } from "./__mocks__/address-data";
+
+const Pill = () => {
+  const getBgColor = (status: string) => {
+    switch (status) {
+      case "No data":
+        return "gray.400";
+      case "Compliant":
+        return "green";
+      case "Non-compliant":
+        return "red";
+      default:
+        return "gray.400";
+    }
+  };
+
+  return (
+    <Box>
+      <Text
+        bgColor={getBgColor(AddressData.softStory)}
+        color="white"
+        p="2px 12px 2px 12px"
+        borderRadius="25"
+      >
+        {AddressData.softStory}
+      </Text>
+    </Box>
+  );
+};
+
+export default Pill;

styles/theme.ts

@@ -27,6 +27,11 @@ const customTheme = extendTheme({
       fontWeight: "bold",
       color: "white",
     },
+    textBig: {
+      fontSize: "xl",
+      fontWeight: "bold",
+      color: "blue",
+    },
     textMedium: {
       fontSize: "md",
       fontWeight: "normal",