Skip to content

React Tooltips #1819

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
Open

React Tooltips #1819

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
a9251da
initial
mertbagt May 16, 2025
c71d5a3
push test
mertbagt May 16, 2025
93061ac
react tooltip
mertbagt May 16, 2025
daa7918
initial tooltip
mertbagt May 16, 2025
49e63a0
refactor
mertbagt May 16, 2025
5bcb8ec
tooltip info
mertbagt May 20, 2025
ab46eb7
translation
mertbagt May 20, 2025
87335e8
updated icon
mertbagt May 20, 2025
9c172db
clickable
mertbagt May 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions components/search/bills/useBillRefinements.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,10 @@ export const useBillRefinements = () => {
attribute: "currentCommittee",
...baseProps,
searchablePlaceholder: "Current Committee"
},
}
]

const propsList2 = [
{
attribute: "city",
searchablePlaceholder: "City",
Expand Down Expand Up @@ -69,6 +72,7 @@ export const useBillRefinements = () => {

return useRefinements({
hierarchicalMenuProps: hierarchicalPropsList,
refinementProps: propsList
refinementProps: propsList,
refinementProps2: propsList2
})
}
58 changes: 57 additions & 1 deletion components/search/useRefinements.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import { useTranslation } from "next-i18next"
import Image from "react-bootstrap/Image"
import { RefinementList, useInstantSearch } from "react-instantsearch"
import { Tooltip } from "react-tooltip"
import { faFilter } from "@fortawesome/free-solid-svg-icons"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { useCallback, useState } from "react"
Expand All @@ -17,6 +19,40 @@ export const FilterButton = styled(Button)`
align-self: flex-start;
`

export const CityTooltip = () => {
const { t } = useTranslation("billSearch")

return (
<>
<Image
src="/info2.svg"
alt=""
width="25"
height="25"
className="ms-2 mb-1"
id="clickable"
/>
<Tooltip
anchorSelect="#clickable"
clickable
place="top"
style={{ maxWidth: "220px", opacity: 1, zIndex: "6" }}
>
{t("city_tooltip1")}
<a
href="https://www.somervillecdc.org/news/what-is-a-home-rule-petition/#:~:text=A%20Home%20Rule%20Petition%20is,an%20aspect%20of%20state%20law"
target="_blank"
rel="noopener noreferrer"
style={{ color: "rgba(173, 216, 230, 1)" }}
>
{t("home_rule_petition")}
</a>
{t("city_tooltip2")}
</Tooltip>
</>
)
}

const useHasRefinements = () => {
const { results } = useInstantSearch()
const refinements = results.getRefinements()
Expand All @@ -25,10 +61,12 @@ const useHasRefinements = () => {

export const useRefinements = ({
hierarchicalMenuProps,
refinementProps
refinementProps,
refinementProps2
}: {
hierarchicalMenuProps?: any[]
refinementProps: any[]
refinementProps2?: any[]
}) => {
const inline = useMediaQuery("(min-width: 768px)")
const [show, setShow] = useState(false)
Expand All @@ -43,6 +81,18 @@ export const useRefinements = ({
</>
)

let refinements2 = <></>

if (refinementProps2) {
refinements2 = (
<>
{refinementProps2.map((p, i) => (
<RefinementList className="mb-4" key={i} {...(p as any)} />
))}
</>
)
}

let hierarchicalMenu = <></>

if (hierarchicalMenuProps) {
Expand All @@ -67,6 +117,8 @@ export const useRefinements = ({
<>
<div>{hierarchicalMenu}</div>
<div>{refinements}</div>
{refinementProps2 ? <CityTooltip /> : <></>}
<div>{refinements2}</div>
</>
) : (
<Offcanvas show={show} onHide={handleClose}>
Expand All @@ -76,6 +128,10 @@ export const useRefinements = ({
<Offcanvas.Body>
<SearchContainer>{hierarchicalMenu}</SearchContainer>
<SearchContainer>{refinements}</SearchContainer>
<SearchContainer>
{refinementProps2 ? <CityTooltip /> : <></>}
</SearchContainer>
<SearchContainer>{refinements2}</SearchContainer>
</Offcanvas.Body>
</Offcanvas>
),
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,7 @@
"react-query": "^3.39.3",
"react-redux": "^8.0.2",
"react-select": "^5.2.2",
"react-tooltip": "^5.28.1",
"redux-mock-store": "^1.5.4",
"redux-thunk": "^3.1.0",
"runtypes": "6.5.1",
Expand Down
132 changes: 132 additions & 0 deletions public/info.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions public/info2.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 9 additions & 2 deletions public/locales/en/billSearch.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,12 @@
"browse_bills" : "Browse Bills",
"filter" : "Filter",
"topics" : "Topics",
"zero_results" : "Your search has yielded zero results!"
}
"zero_results" : "Your search has yielded zero results!",
"city_tooltip1": "For a city or town in Massachusetts to create certain types of laws (for example, to adjust the voting age in their town elections), it must submit a ",
"home_rule_petition": "“Home Rule Petition”",
"city_tooltip2": " to the state legislature. This filter shows policy changes that municipalities have passed, and are awaiting state legislature approval"
}




33 changes: 33 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2024,6 +2024,13 @@
dependencies:
"@floating-ui/utils" "^0.1.3"

"@floating-ui/core@^1.7.0":
version "1.7.0"
resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.7.0.tgz#1aff27a993ea1b254a586318c29c3b16ea0f4d0a"
integrity sha512-FRdBLykrPPA6P76GGGqlex/e7fbe0F1ykgxHYNXQsH/iTEtjMj/f9bpY5oQqbjt5VgZvgz/uKXbGuROijh3VLA==
dependencies:
"@floating-ui/utils" "^0.2.9"

"@floating-ui/dom@^1.0.1", "@floating-ui/dom@^1.5.1":
version "1.5.3"
resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.3.tgz#54e50efcb432c06c23cd33de2b575102005436fa"
Expand All @@ -2032,6 +2039,14 @@
"@floating-ui/core" "^1.4.2"
"@floating-ui/utils" "^0.1.3"

"@floating-ui/dom@^1.6.1":
version "1.7.0"
resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.7.0.tgz#f9f83ee4fee78ac23ad9e65b128fc11a27857532"
integrity sha512-lGTor4VlXcesUMh1cupTUTDoCxMb0V6bm3CnxHzQcw8Eaf1jQbgQX4i02fYgT0vJ82tb5MZ4CZk1LRGkktJCzg==
dependencies:
"@floating-ui/core" "^1.7.0"
"@floating-ui/utils" "^0.2.9"

"@floating-ui/react-dom@^2.0.0", "@floating-ui/react-dom@^2.0.4":
version "2.0.4"
resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.4.tgz#b076fafbdfeb881e1d86ae748b7ff95150e9f3ec"
Expand All @@ -2044,6 +2059,11 @@
resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.6.tgz#22958c042e10b67463997bd6ea7115fe28cbcaf9"
integrity sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==

"@floating-ui/utils@^0.2.9":
version "0.2.9"
resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.9.tgz#50dea3616bc8191fb8e112283b49eaff03e78429"
integrity sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==

"@fortawesome/[email protected]":
version "6.5.1"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.1.tgz#fdb1ec4952b689f5f7aa0bffe46180bb35490032"
Expand Down Expand Up @@ -6516,6 +6536,11 @@ cjson@^0.3.1:
dependencies:
json-parse-helpfulerror "^1.0.3"

classnames@^2.3.0:
version "2.5.1"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==

classnames@^2.3.2:
version "2.3.2"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
Expand Down Expand Up @@ -14808,6 +14833,14 @@ react-style-singleton@^2.2.1:
invariant "^2.2.4"
tslib "^2.0.0"

react-tooltip@^5.28.1:
version "5.28.1"
resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-5.28.1.tgz#5b25c7c53ce008b7ad0685e9f516101d80925cbc"
integrity sha512-ZA4oHwoIIK09TS7PvSLFcRlje1wGZaxw6xHvfrzn6T82UcMEfEmHVCad16Gnr4NDNDh93HyN037VK4HDi5odfQ==
dependencies:
"@floating-ui/dom" "^1.6.1"
classnames "^2.3.0"

react-transition-group@^4.3.0, react-transition-group@^4.4.1, react-transition-group@^4.4.5:
version "4.4.5"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
Expand Down