From ccf9331e6fc335e4a78221b66cfcfd2d7c930163 Mon Sep 17 00:00:00 2001 From: n1b11 Date: Mon, 26 Jan 2026 23:44:00 -0500 Subject: [PATCH 1/9] Add new transcript feature announcement banner --- .../AnouncementBanner.tsx.tsx | 48 +++++++++++++++++++ .../TranscriptAnouncement.tsx | 21 ++++++++ components/HeroHeader/HeroHeader.js | 6 +++ pages/index.tsx | 1 + 4 files changed, 76 insertions(+) create mode 100644 components/AnnouncementBanner/AnouncementBanner.tsx.tsx create mode 100644 components/AnnouncementBanner/TranscriptAnouncement.tsx diff --git a/components/AnnouncementBanner/AnouncementBanner.tsx.tsx b/components/AnnouncementBanner/AnouncementBanner.tsx.tsx new file mode 100644 index 000000000..342f0bb3f --- /dev/null +++ b/components/AnnouncementBanner/AnouncementBanner.tsx.tsx @@ -0,0 +1,48 @@ +import { Row } from "react-bootstrap" +import styles from "./AnouncementBanner.module.css" +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" +import { faXmark } from "@fortawesome/free-solid-svg-icons" +import { useState } from "react" + +function AnouncementBanner({ + endDate, + children +}: { + endDate: Date + children: React.ReactElement +}) { + const isOpen = localStorage.getItem("isBannerClosed") + const [closed, setClosed] = useState(isOpen != null) + const close = () => { + setClosed(true) + localStorage.setItem("isBannerClosed", "true") + } + + const now: Date = new Date() + console.log(open, isOpen) + if (now < endDate && !closed) { + return ( + + + + {children} + + ) + } else { + return <> + } +} + +export default AnouncementBanner diff --git a/components/AnnouncementBanner/TranscriptAnouncement.tsx b/components/AnnouncementBanner/TranscriptAnouncement.tsx new file mode 100644 index 000000000..883252bdb --- /dev/null +++ b/components/AnnouncementBanner/TranscriptAnouncement.tsx @@ -0,0 +1,21 @@ +import AnouncementBanner from "./AnouncementBanner.tsx" + +function TranscriptAnouncement() { + return ( + +

+ New on MAPLE:{" "} + + Looking to learn about the latest action in a committee? +
+ MAPLE now has searchable transcripts for all legislative hearings. {} + + Try it out! + + +

+ + ) +} + +export default TranscriptAnouncement diff --git a/components/HeroHeader/HeroHeader.js b/components/HeroHeader/HeroHeader.js index 28177b858..5f4f3cbcb 100644 --- a/components/HeroHeader/HeroHeader.js +++ b/components/HeroHeader/HeroHeader.js @@ -7,12 +7,16 @@ import styles from "./HeroHeader.module.css" import { useTranslation } from "next-i18next" import { capitalize } from "lodash" import { NEWSLETTER_SIGNUP_URL, TRAINING_CALENDAR_URL } from "../common" +import AnouncementBanner from "components/AnnouncementBanner/AnouncementBanner.tsx" +import TranscriptAnouncement from "components/AnnouncementBanner/TranscriptAnouncement" const HeroHeader = ({ authenticated }) => { const { t } = useTranslation("common") return ( + + { + { md={{ order: "last", span: 6 }} >
+
{t("common:let_your_voice_be_heard")}
diff --git a/pages/index.tsx b/pages/index.tsx index d28120116..29ba5852f 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -6,6 +6,7 @@ import Leaf from "../components/Leaf/Leaf" import { createPage } from "../components/page" import TestimonyCalloutSection from "../components/TestimonyCallout/TestimonyCalloutSection" import { createGetStaticTranslationProps } from "components/translations" +import { Banner } from "components/shared/StyledSharedComponents" export default createPage({ Page: () => { From 8569e81e6bf3cd96425fc22153d9a47c281f1f0f Mon Sep 17 00:00:00 2001 From: n1b11 Date: Tue, 27 Jan 2026 00:12:14 -0500 Subject: [PATCH 2/9] Format HeroHeader with Prettier --- components/HeroHeader/HeroHeader.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/components/HeroHeader/HeroHeader.js b/components/HeroHeader/HeroHeader.js index 5f4f3cbcb..eefcfc26f 100644 --- a/components/HeroHeader/HeroHeader.js +++ b/components/HeroHeader/HeroHeader.js @@ -7,16 +7,14 @@ import styles from "./HeroHeader.module.css" import { useTranslation } from "next-i18next" import { capitalize } from "lodash" import { NEWSLETTER_SIGNUP_URL, TRAINING_CALENDAR_URL } from "../common" -import AnouncementBanner from "components/AnnouncementBanner/AnouncementBanner.tsx" import TranscriptAnouncement from "components/AnnouncementBanner/TranscriptAnouncement" const HeroHeader = ({ authenticated }) => { const { t } = useTranslation("common") return ( - + - { - { md={{ order: "last", span: 6 }} >
-
{t("common:let_your_voice_be_heard")}
From 6737806cc02b47700eb14b5ee44ccb1808d025c7 Mon Sep 17 00:00:00 2001 From: n1b11 Date: Tue, 27 Jan 2026 00:14:43 -0500 Subject: [PATCH 3/9] Remove unused import --- pages/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/pages/index.tsx b/pages/index.tsx index 29ba5852f..d28120116 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -6,7 +6,6 @@ import Leaf from "../components/Leaf/Leaf" import { createPage } from "../components/page" import TestimonyCalloutSection from "../components/TestimonyCallout/TestimonyCalloutSection" import { createGetStaticTranslationProps } from "components/translations" -import { Banner } from "components/shared/StyledSharedComponents" export default createPage({ Page: () => { From 6a6ebe465aba337a482644dd6d6057c3b2094198 Mon Sep 17 00:00:00 2001 From: n1b11 Date: Tue, 27 Jan 2026 17:50:46 -0500 Subject: [PATCH 4/9] Add Story --- .../pageElements/AnouncementBanner.stories.tsx | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 stories_hold/organisms/pageElements/AnouncementBanner.stories.tsx diff --git a/stories_hold/organisms/pageElements/AnouncementBanner.stories.tsx b/stories_hold/organisms/pageElements/AnouncementBanner.stories.tsx new file mode 100644 index 000000000..a7f77d564 --- /dev/null +++ b/stories_hold/organisms/pageElements/AnouncementBanner.stories.tsx @@ -0,0 +1,17 @@ +import { StoryObj } from "@storybook/react" +import AnouncementBanner from "components/AnnouncementBanner/AnouncementBanner.tsx" +import { createMeta } from "stories/utils" + +export default createMeta({ + title: "components/AnnouncementBanner", + component: AnouncementBanner +}) + +type Story = StoryObj + +export const Primary: Story = { + args: { + endDate: new Date("2026-03-01T12:00:00.000Z") + }, + name: "AnnouncementBanner" +} From 1410f5574052080f37098b57c27e6e6d71987569 Mon Sep 17 00:00:00 2001 From: n1b11 Date: Tue, 27 Jan 2026 17:58:47 -0500 Subject: [PATCH 5/9] Fix naming issues --- .../{AnouncementBanner.tsx.tsx => AnnouncementBanner.tsx} | 6 ++---- ...TranscriptAnouncement.tsx => TranscriptAnnouncement.tsx} | 6 +++--- components/HeroHeader/HeroHeader.js | 4 ++-- ...entBanner.stories.tsx => AnnouncementBanner.stories.tsx} | 6 +++--- 4 files changed, 10 insertions(+), 12 deletions(-) rename components/AnnouncementBanner/{AnouncementBanner.tsx.tsx => AnnouncementBanner.tsx} (88%) rename components/AnnouncementBanner/{TranscriptAnouncement.tsx => TranscriptAnnouncement.tsx} (79%) rename stories_hold/organisms/pageElements/{AnouncementBanner.stories.tsx => AnnouncementBanner.stories.tsx} (64%) diff --git a/components/AnnouncementBanner/AnouncementBanner.tsx.tsx b/components/AnnouncementBanner/AnnouncementBanner.tsx similarity index 88% rename from components/AnnouncementBanner/AnouncementBanner.tsx.tsx rename to components/AnnouncementBanner/AnnouncementBanner.tsx index 342f0bb3f..715077fde 100644 --- a/components/AnnouncementBanner/AnouncementBanner.tsx.tsx +++ b/components/AnnouncementBanner/AnnouncementBanner.tsx @@ -1,10 +1,9 @@ import { Row } from "react-bootstrap" -import styles from "./AnouncementBanner.module.css" import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" import { faXmark } from "@fortawesome/free-solid-svg-icons" import { useState } from "react" -function AnouncementBanner({ +function AnnouncementBanner({ endDate, children }: { @@ -19,7 +18,6 @@ function AnouncementBanner({ } const now: Date = new Date() - console.log(open, isOpen) if (now < endDate && !closed) { return (

@@ -18,4 +18,4 @@ function TranscriptAnouncement() { ) } -export default TranscriptAnouncement +export default TranscriptAnnouncement diff --git a/components/HeroHeader/HeroHeader.js b/components/HeroHeader/HeroHeader.js index eefcfc26f..924cdf917 100644 --- a/components/HeroHeader/HeroHeader.js +++ b/components/HeroHeader/HeroHeader.js @@ -7,13 +7,13 @@ import styles from "./HeroHeader.module.css" import { useTranslation } from "next-i18next" import { capitalize } from "lodash" import { NEWSLETTER_SIGNUP_URL, TRAINING_CALENDAR_URL } from "../common" -import TranscriptAnouncement from "components/AnnouncementBanner/TranscriptAnouncement" +import TranscriptAnnouncement from "components/AnnouncementBanner/TranscriptAnnouncement" const HeroHeader = ({ authenticated }) => { const { t } = useTranslation("common") return ( - + +type Story = StoryObj export const Primary: Story = { args: { From 320bc7c0ada619047a57da344fc7bf08ba6f0d4c Mon Sep 17 00:00:00 2001 From: n1b11 Date: Tue, 27 Jan 2026 18:02:51 -0500 Subject: [PATCH 6/9] Implement useLocalStorage hook --- components/AnnouncementBanner/AnnouncementBanner.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/components/AnnouncementBanner/AnnouncementBanner.tsx b/components/AnnouncementBanner/AnnouncementBanner.tsx index 715077fde..3da80f063 100644 --- a/components/AnnouncementBanner/AnnouncementBanner.tsx +++ b/components/AnnouncementBanner/AnnouncementBanner.tsx @@ -1,7 +1,7 @@ import { Row } from "react-bootstrap" import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" import { faXmark } from "@fortawesome/free-solid-svg-icons" -import { useState } from "react" +import { useLocalStorage } from "usehooks-ts" function AnnouncementBanner({ endDate, @@ -10,15 +10,15 @@ function AnnouncementBanner({ endDate: Date children: React.ReactElement }) { - const isOpen = localStorage.getItem("isBannerClosed") - const [closed, setClosed] = useState(isOpen != null) + const [open, setOpen] = useLocalStorage("bannerOpen", true) + const close = () => { - setClosed(true) + setOpen(false) localStorage.setItem("isBannerClosed", "true") } const now: Date = new Date() - if (now < endDate && !closed) { + if (now < endDate && open) { return ( Date: Tue, 27 Jan 2026 18:24:06 -0500 Subject: [PATCH 7/9] Add translation --- .../AnnouncementBanner/TranscriptAnnouncement.tsx | 12 +++++++----- public/locales/en/common.json | 6 ++++++ 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/components/AnnouncementBanner/TranscriptAnnouncement.tsx b/components/AnnouncementBanner/TranscriptAnnouncement.tsx index 46953c194..92d14f904 100644 --- a/components/AnnouncementBanner/TranscriptAnnouncement.tsx +++ b/components/AnnouncementBanner/TranscriptAnnouncement.tsx @@ -1,16 +1,18 @@ +import { useTranslation } from "react-i18next" import AnouncementBanner from "./AnnouncementBanner" function TranscriptAnnouncement() { + const { t } = useTranslation("common") return (

- New on MAPLE:{" "} + {t("announcement.headingBold")}{" "} - Looking to learn about the latest action in a committee? + {t("announcement.headingBody")}
- MAPLE now has searchable transcripts for all legislative hearings. {} - - Try it out! + {t("announcement.description")}{" "} + + {t("announcement.link")}

diff --git a/public/locales/en/common.json b/public/locales/en/common.json index c4bfbecd1..4e50e2ec2 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -1,5 +1,11 @@ { "about": "About", + "announcement": { + "headingBold": "New on MAPLE:", + "headingBody": "Looking to learn about the latest action in a committee?", + "description": "MAPLE now has searchable transcripts for all legislative hearings.", + "link": "Try it out!" + }, "back_to_bills": "back to list of bills", "back_to_hearings": "back to list of hearings", "bill": { From 5051735b5c892b30d135f4aa0e44f31f9aa83dfb Mon Sep 17 00:00:00 2001 From: n1b11 Date: Tue, 27 Jan 2026 18:28:37 -0500 Subject: [PATCH 8/9] Remove local storage redundant code --- components/AnnouncementBanner/AnnouncementBanner.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/components/AnnouncementBanner/AnnouncementBanner.tsx b/components/AnnouncementBanner/AnnouncementBanner.tsx index 3da80f063..6e678c1c2 100644 --- a/components/AnnouncementBanner/AnnouncementBanner.tsx +++ b/components/AnnouncementBanner/AnnouncementBanner.tsx @@ -14,7 +14,6 @@ function AnnouncementBanner({ const close = () => { setOpen(false) - localStorage.setItem("isBannerClosed", "true") } const now: Date = new Date() From 0d3a282a53faf88b2e6874133244ea5c17eb110b Mon Sep 17 00:00:00 2001 From: n1b11 Date: Tue, 27 Jan 2026 19:10:53 -0500 Subject: [PATCH 9/9] fix spelling issues --- components/AnnouncementBanner/TranscriptAnnouncement.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/AnnouncementBanner/TranscriptAnnouncement.tsx b/components/AnnouncementBanner/TranscriptAnnouncement.tsx index 92d14f904..8970bbfb5 100644 --- a/components/AnnouncementBanner/TranscriptAnnouncement.tsx +++ b/components/AnnouncementBanner/TranscriptAnnouncement.tsx @@ -1,10 +1,10 @@ import { useTranslation } from "react-i18next" -import AnouncementBanner from "./AnnouncementBanner" +import AnnouncementBanner from "./AnnouncementBanner" function TranscriptAnnouncement() { const { t } = useTranslation("common") return ( - +

{t("announcement.headingBold")}{" "} @@ -16,7 +16,7 @@ function TranscriptAnnouncement() {

- + ) }