From 17ac5cc3dc106c9b1eec7f5423953960dd2b32b9 Mon Sep 17 00:00:00 2001 From: Katie Green Date: Wed, 23 Oct 2024 19:36:01 -0700 Subject: [PATCH 1/2] added that this is a project of SF Civic Tech to README --- README.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 4ae340c0..0f7ffe1e 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,6 @@ +### This is a project of SF Civic Tech [https://www.sfcivictech.org/](https://www.sfcivictech.org/) + +

@@ -111,4 +114,4 @@ To stop and shut down the application: - Remove the containers, but it will **not** delete volumes (so the database data will persist). -Some versions of this code contain a streamlit app that uses an imprecise measure which may introduce errors in the output. The streamlit app should not be relied upon to determine any property’s safety or compliance with the soft story program. Please consult DataSF for most up to date information. +#### Some versions of this code contain a streamlit app that uses an imprecise measure which may introduce errors in the output. The streamlit app should not be relied upon to determine any property’s safety or compliance with the soft story program. Please consult DataSF for most up to date information. From 87648894f1c09c84d333c40ccf9224f1538b6335 Mon Sep 17 00:00:00 2001 From: mantuok Date: Mon, 28 Oct 2024 10:49:44 -0700 Subject: [PATCH 2/2] Add Responsive Heading and Search Bar Components (#68) * heading and SearchBar created * Heading styled * Heading responsive styles updated * search bar style in process * styling search bar done * update components test lib, add search bar * updated styling of components test lib * tests for search bar are added * tests for heading are added --- app/components-test-lib/page.tsx | 66 +++++++------------- app/components/__tests__/heading.test.tsx | 27 ++++++++ app/components/__tests__/search-bar.test.tsx | 27 ++++++++ app/components/heading.tsx | 17 +++++ app/components/mock-button.test.tsx | 18 ------ app/components/mock-button.tsx | 23 ------- app/components/search-bar.tsx | 29 +++++++++ app/page.tsx | 14 ++--- package-lock.json | 16 +++++ package.json | 3 +- styles/theme.ts | 1 + 11 files changed, 149 insertions(+), 92 deletions(-) create mode 100644 app/components/__tests__/heading.test.tsx create mode 100644 app/components/__tests__/search-bar.test.tsx create mode 100644 app/components/heading.tsx delete mode 100644 app/components/mock-button.test.tsx delete mode 100644 app/components/mock-button.tsx create mode 100644 app/components/search-bar.tsx diff --git a/app/components-test-lib/page.tsx b/app/components-test-lib/page.tsx index c7c5a15d..2dd9c30f 100644 --- a/app/components-test-lib/page.tsx +++ b/app/components-test-lib/page.tsx @@ -1,59 +1,39 @@ "use client"; -import { Box, Heading, VStack, useToast, Text, HStack } from "@chakra-ui/react"; -import MockButton from "../components/mock-button"; +import { Box, Heading, VStack, Text, HStack, Divider } from "@chakra-ui/react"; +import SearchBar from "../components/search-bar"; const ComponentsTestLib = () => { - const toast = useToast(); - - const showToast = (message: string) => { - toast({ - title: "Action Successful.", - description: message, - status: "success", - duration: 5000, - isClosable: true, - }); - }; - return ( - - + + Components Test Library - - Button Variants + + + Search Bar - This section demonstrates different states of the Button component + This section demonstrates different states of the Search Bar component - - + + Default - showToast("Default Button Clicked")} - /> - - - - Disabled - - {}} disabled={true} /> - - - - Loading - - showToast("Loading Button Clicked")} - isLoading={true} - /> - - + + + + ); }; diff --git a/app/components/__tests__/heading.test.tsx b/app/components/__tests__/heading.test.tsx new file mode 100644 index 00000000..164e8f47 --- /dev/null +++ b/app/components/__tests__/heading.test.tsx @@ -0,0 +1,27 @@ +import { render, screen } from "@testing-library/react"; +import "@testing-library/jest-dom"; +import Heading from "../heading"; +import { ChakraProvider } from "@chakra-ui/react"; + +describe("Heading component", () => { + const renderComponent = () => + render( + + + + ); + + test("renders the heading with the correct text", () => { + renderComponent(); + const firstPart = screen.getByText(/Learn about/i); + const secondPart = screen.getByText(/your home’s earthquake readiness\./i); + expect(firstPart).toBeInTheDocument(); + expect(secondPart).toBeInTheDocument(); + }); + + test("highlights the correct text with yellow color", () => { + renderComponent(); + const highlightedText = screen.getByText(/Learn about/i); + expect(highlightedText).toHaveStyle({ color: "yellow" }); + }); +}); diff --git a/app/components/__tests__/search-bar.test.tsx b/app/components/__tests__/search-bar.test.tsx new file mode 100644 index 00000000..6a5ba235 --- /dev/null +++ b/app/components/__tests__/search-bar.test.tsx @@ -0,0 +1,27 @@ +import { render, screen } from "@testing-library/react"; +import "@testing-library/jest-dom"; +import SearchBar from "../search-bar"; +import { ChakraProvider } from "@chakra-ui/react"; + +describe("SearchBar component", () => { + const renderComponent = () => + render( + + + + ); + + test("renders search icon with correct color", () => { + renderComponent(); + const icon = screen.getByTestId("search-icon"); + expect(icon).toHaveStyle({ color: "#2C5282" }); + }); + + test("renders the input field with the correct placeholder", () => { + renderComponent(); + const inputElement = screen.getByPlaceholderText( + "Search San Francisco address" + ); + expect(inputElement).toBeInTheDocument(); + }); +}); diff --git a/app/components/heading.tsx b/app/components/heading.tsx new file mode 100644 index 00000000..56381145 --- /dev/null +++ b/app/components/heading.tsx @@ -0,0 +1,17 @@ +import { Highlight, Text } from "@chakra-ui/react"; + +const Heading = () => { + return ( + + + Learn about your home’s earthquake readiness. + + + ); +}; + +export default Heading; diff --git a/app/components/mock-button.test.tsx b/app/components/mock-button.test.tsx deleted file mode 100644 index fcab7c76..00000000 --- a/app/components/mock-button.test.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { render, screen, fireEvent } from "@testing-library/react"; -import "@testing-library/jest-dom"; -import MockButton from "./mock-button"; -describe("MockButton Component", () => { - it("renders with default label", () => { - render(); - const button = screen.getByRole("button", { name: /click me/i }); - expect(button).toBeInTheDocument(); - }); - - it("calls onClick handler when clicked", () => { - const handleClick = jest.fn(); - render(); - const button = screen.getByRole("button", { name: /click me/i }); - fireEvent.click(button); - expect(handleClick).toHaveBeenCalledTimes(1); - }); -}); diff --git a/app/components/mock-button.tsx b/app/components/mock-button.tsx deleted file mode 100644 index fa4562b7..00000000 --- a/app/components/mock-button.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { Button, Spinner } from "@chakra-ui/react"; - -interface MockButtonProps { - label?: string; - onClick?: () => void; - disabled?: boolean; - isLoading?: boolean; -} - -const MockButton = ({ - label = "Click Me", - onClick, - isLoading = false, - disabled = false, -}: MockButtonProps) => { - return ( - - ); -}; - -export default MockButton; diff --git a/app/components/search-bar.tsx b/app/components/search-bar.tsx new file mode 100644 index 00000000..17f0617d --- /dev/null +++ b/app/components/search-bar.tsx @@ -0,0 +1,29 @@ +import { Input, InputGroup, InputLeftElement } from "@chakra-ui/react"; +import { IoSearchSharp } from "react-icons/io5"; + +const SearchBar = () => { + return ( + + + + + + + ); +}; + +export default SearchBar; diff --git a/app/page.tsx b/app/page.tsx index 91bb4519..e2cd2788 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,22 +1,22 @@ -import { Box, Flex, Text } from "@chakra-ui/react"; +import { Box, Flex, Highlight, Text } from "@chakra-ui/react"; +import SearchBar from "./components/search-bar"; +import Heading from "./components/heading"; const Home = () => { return ( - - Header and search box - + +