React Tooltips

components/search/bills/useBillRefinements.tsx

@@ -36,8 +36,29 @@ export const useBillRefinements = () => {
 
             attribute: "court"
           },
-          { attribute: "currentCommittee" },
-          { attribute: "city" },
+          { attribute: "currentCommittee" }
+        ].map(props => ({
+          limit: 500,
+          searchable: true,
+          searchablePlaceholder: t(`refinements.bill.${props.attribute}`),
+          ...props
+        })),
+      [t]
+    ),
+    refinementProps2: useMemo(
+      () =>
+        [
+          {
+            transformItems: (items: RefinementListItem[]) =>
+              items
+                .map(i => ({
+                  ...i,
+                  label: generalCourts[parseInt(i.value, 10)]?.Name ?? i.label
+                }))
+                .sort((a, b) => Number(b.value) - Number(a.value)),
+
+            attribute: "city"
+          },
           { attribute: "primarySponsor" },
           { attribute: "cosponsors" }
         ].map(props => ({

components/search/useRefinements.tsx

@@ -1,9 +1,11 @@
 import { useTranslation } from "next-i18next"
+import Image from "react-bootstrap/Image"
 import {
   RefinementList,
   RefinementListProps,
   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"
@@ -24,6 +26,46 @@ export const FilterButton = styled(Button)`
   align-self: flex-start;
 `
 
+const TooltipSpan = styled.span`
+  position: relative;
+  right: 37px;
+  top: 33px;
+`
+
+export const CityTooltip = () => {
+  const { t } = useTranslation("billSearch")
+
+  return (
+    <TooltipSpan>
+      <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>
+    </TooltipSpan>
+  )
+}
+
 const useHasRefinements = () => {
   const { results } = useInstantSearch()
   const refinements = results.getRefinements()
@@ -32,10 +74,12 @@ const useHasRefinements = () => {
 
 export const useRefinements = ({
   hierarchicalMenuProps,
-  refinementProps
+  refinementProps,
+  refinementProps2
 }: {
   hierarchicalMenuProps?: MultiselectHierarchicalMenuParams
   refinementProps: RefinementListProps[]
+  refinementProps2?: RefinementListProps[]
 }) => {
   const inline = useMediaQuery("(min-width: 768px)")
   const [show, setShow] = useState(false)
@@ -50,6 +94,18 @@ export const useRefinements = ({
     </>
   )
 
+  let refinements2 = <></>
+
+  if (refinementProps2) {
+    refinements2 = (
+      <>
+        {refinementProps2.map((p, i) => (
+          <RefinementList className="mb-4" key={i} {...(p as any)} />
+        ))}
+      </>
+    )
+  }
+
   const hierarchicalMenu = hierarchicalMenuProps ? (
     <MultiselectHierarchicalMenu {...hierarchicalMenuProps} />
   ) : (
@@ -65,6 +121,8 @@ export const useRefinements = ({
       <>
         <div>{hierarchicalMenu}</div>
         <div>{refinements}</div>
+        {refinementProps2 ? <CityTooltip /> : <></>}
+        <div>{refinements2}</div>
       </>
     ) : (
       <Offcanvas show={show} onHide={handleClose}>
@@ -74,6 +132,10 @@ export const useRefinements = ({
         <Offcanvas.Body>
           <SearchContainer>{hierarchicalMenu}</SearchContainer>
           <SearchContainer>{refinements}</SearchContainer>
+          <SearchContainer>
+            {refinementProps2 ? <CityTooltip /> : <></>}
+          </SearchContainer>
+          <SearchContainer>{refinements2}</SearchContainer>
         </Offcanvas.Body>
       </Offcanvas>
     ),

package.json

@@ -126,6 +126,8 @@
     "react-query": "^3.39.3",
     "react-redux": "^8.0.2",
     "react-select": "^5.2.2",
+    "react-tooltip": "^5.28.1",
+    "react-tooltips": "^0.4.6",
     "redux-mock-store": "^1.5.4",
     "redux-thunk": "^3.1.0",
     "runtypes": "6.5.1",

pages/bills/index.tsx

@@ -23,5 +23,6 @@ export const getStaticProps = createGetStaticTranslationProps([
   "search",
   "common",
   "footer",
-  "testimony"
+  "testimony",
+  "billSearch"
 ])

public/locales/en/billSearch.json

@@ -0,0 +1,14 @@
+{
+  "another_term" : "Try another search term",
+  "browse_bills" : "Browse Bills",
+  "filter" : "Filter",
+  "topics" : "Topics",
+  "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"
+}
+
+
+
+

yarn.lock

@@ -2054,6 +2054,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"
@@ -2062,6 +2069,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"
@@ -2074,6 +2089,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"
@@ -6622,6 +6642,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"
@@ -7468,6 +7493,11 @@ deep-is@^0.1.3, deep-is@~0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
+deepmerge@^2.1.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
+  integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
+
 deepmerge@^4.2.2:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
@@ -10860,6 +10890,11 @@ is-lambda@^1.0.1:
   resolved "https://registry.yarnpkg.com/is-lambda/-/is-lambda-1.0.1.tgz#3d9877899e6a53efc0160504cde15f82e6f061d5"
   integrity sha512-z7CMFGNrENq5iFB9Bqo64Xk6Y9sg+epq1myIcdHaGnbMTYOxvzsEtdYqQUylB7LxfkvgrrjP32T6Ywciio9UIQ==
 
+is-lite@^0.2.0:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/is-lite/-/is-lite-0.2.2.tgz#e4c6dee53871f26fa7743a469db12fa6158d732e"
+  integrity sha512-CnO9kJOQvaXa9lJK4OSgnpao2XG9EGQHCaaPDCK9gTEqz+duD2hPXtl69Rgq879TUs+76Fuz87XBJ5H9FgYRNA==
+
 is-map@^2.0.1, is-map@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.2.tgz#00922db8c9bf73e81b7a335827bc2a43f2b91127"
@@ -14257,6 +14292,11 @@ polished@^4.2.2:
   dependencies:
     "@babel/runtime" "^7.17.8"
 
+popper.js@^1.14.0:
+  version "1.16.1"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
+  integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
+
 portfinder@^1.0.32:
   version "1.0.32"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.32.tgz#2fe1b9e58389712429dc2bea5beb2146146c7f81"
@@ -15171,6 +15211,11 @@ react-overlays@^5.1.1:
     uncontrollable "^7.2.1"
     warning "^4.0.3"
 
+react-proptype-conditional-require@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/react-proptype-conditional-require/-/react-proptype-conditional-require-1.0.4.tgz#69c2d5741e6df5e08f230f36bbc2944ee1222555"
+  integrity sha512-nopsRn7KnGgazBe2c3H2+Kf+Csp6PGDRLiBkYEDMKY8o/EIgft/WnIm/OnAKTawZiLnJXHAqhpFBddvs6NiXlw==
+
 react-query@^3.32.1, react-query@^3.39.3:
   version "3.39.3"
   resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.39.3.tgz#4cea7127c6c26bdea2de5fb63e51044330b03f35"
@@ -15255,6 +15300,25 @@ 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-tooltips@^0.4.6:
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/react-tooltips/-/react-tooltips-0.4.6.tgz#de942e2cca3901b539c90e862f5f518f8ce36b3e"
+  integrity sha512-RhfgAGYuFrL6RGKDZv/STXgZOW56LU1pXM3pnn3QVs9iq8QcoJJ/XpEg1QpOQEDaDm3PML7JPvR5kEnS7VnoEw==
+  dependencies:
+    deepmerge "^2.1.0"
+    exenv "^1.2.2"
+    is-lite "^0.2.0"
+    popper.js "^1.14.0"
+    react-proptype-conditional-require "^1.0.4"
+
 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"