diff --git a/components/search/bills/useBillRefinements.tsx b/components/search/bills/useBillRefinements.tsx
index cbd560579..cd04bc47a 100644
--- a/components/search/bills/useBillRefinements.tsx
+++ b/components/search/bills/useBillRefinements.tsx
@@ -38,7 +38,10 @@ export const useBillRefinements = () => {
attribute: "currentCommittee",
...baseProps,
searchablePlaceholder: "Current Committee"
- },
+ }
+ ]
+
+ const propsList2 = [
{
attribute: "city",
searchablePlaceholder: "City",
@@ -69,6 +72,7 @@ export const useBillRefinements = () => {
return useRefinements({
hierarchicalMenuProps: hierarchicalPropsList,
- refinementProps: propsList
+ refinementProps: propsList,
+ refinementProps2: propsList2
})
}
diff --git a/components/search/useRefinements.tsx b/components/search/useRefinements.tsx
index c07374160..3098c7718 100644
--- a/components/search/useRefinements.tsx
+++ b/components/search/useRefinements.tsx
@@ -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"
@@ -17,6 +19,40 @@ export const FilterButton = styled(Button)`
align-self: flex-start;
`
+export const CityTooltip = () => {
+ const { t } = useTranslation("billSearch")
+
+ return (
+ <>
+
+
+ {t("city_tooltip1")}
+
+ {t("home_rule_petition")}
+
+ {t("city_tooltip2")}
+
+
+ )
+}
+
const useHasRefinements = () => {
const { results } = useInstantSearch()
const refinements = results.getRefinements()
@@ -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)
@@ -43,6 +81,18 @@ export const useRefinements = ({
)
+ let refinements2 = <>
+
+ if (refinementProps2) {
+ refinements2 = (
+ <>
+ {refinementProps2.map((p, i) => (
+
+ ))}
+
+ )
+ }
+
let hierarchicalMenu = <>
if (hierarchicalMenuProps) {
@@ -67,6 +117,8 @@ export const useRefinements = ({
<>
{hierarchicalMenu}
{refinements}
+ {refinementProps2 ? : <>}
+ {refinements2}
) : (
@@ -76,6 +128,10 @@ export const useRefinements = ({
{hierarchicalMenu}
{refinements}
+
+ {refinementProps2 ? : <>}
+
+ {refinements2}
),
diff --git a/package.json b/package.json
index a0b3465a8..3b4653b31 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/public/info.svg b/public/info.svg
new file mode 100644
index 000000000..e6d32f444
--- /dev/null
+++ b/public/info.svg
@@ -0,0 +1,132 @@
+
+
diff --git a/public/info2.svg b/public/info2.svg
new file mode 100644
index 000000000..f132e43c7
--- /dev/null
+++ b/public/info2.svg
@@ -0,0 +1,4 @@
+
diff --git a/public/locales/en/billSearch.json b/public/locales/en/billSearch.json
index 7d9e4c1a4..eb990040f 100644
--- a/public/locales/en/billSearch.json
+++ b/public/locales/en/billSearch.json
@@ -3,5 +3,12 @@
"browse_bills" : "Browse Bills",
"filter" : "Filter",
"topics" : "Topics",
- "zero_results" : "Your search has yielded zero results!"
-}
\ No newline at end of file
+ "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"
+}
+
+
+
+
diff --git a/yarn.lock b/yarn.lock
index a46d16150..14ce21d94 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -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"
@@ -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"
@@ -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/fontawesome-common-types@6.5.1":
version "6.5.1"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.1.tgz#fdb1ec4952b689f5f7aa0bffe46180bb35490032"
@@ -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"
@@ -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"