feat(banner): add x for closing

apps/site/components/withBanner.tsx

@@ -1,24 +1,45 @@
+'use client';
+
 import { ArrowUpRightIcon } from '@heroicons/react/24/outline';
 import Banner from '@node-core/ui-components/Common/Banner';
 import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
 
 import Link from '#site/components/Link';
 import { siteConfig } from '#site/next.json.mjs';
 import { dateIsBetween } from '#site/util/date';
 
 import type { FC } from 'react';
 
+const STORAGE_KEY = 'banner-dismissal';
+
 const WithBanner: FC<{ section: string }> = ({ section }) => {
   const banner = siteConfig.websiteBanners[section];
   const t = useTranslations();
 
-  if (banner && dateIsBetween(banner.startDate, banner.endDate)) {
+  const [dismissed, setDismissed] = useState(false);
+
+  // localStorage is only available on the client, so the banner is always
+  // rendered on the server and hidden after hydration if previously dismissed
+  useEffect(() => {
+    if (banner) {
+      setDismissed(localStorage.getItem(STORAGE_KEY) === banner.text);
+    }
+  }, [banner]);
+
+  if (banner && !dismissed && dateIsBetween(banner.startDate, banner.endDate)) {
     const bannerType = banner.type || 'default';
 
+    const onClose = () => {
+      localStorage.setItem(STORAGE_KEY, banner.text);
+      setDismissed(true);
+    };
+
     return (
       <Banner
         type={banner.type}
         aria-label={t(`components.banner.${bannerType}`)}
+        onClose={onClose}
       >
         {banner.link ? (
           <Link href={banner.link}>{banner.text}</Link>

packages/ui-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@node-core/ui-components",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "type": "module",
   "exports": {
     "./*": {

packages/ui-components/src/Common/Banner/index.module.css

@@ -1,7 +1,8 @@
 @reference "../../styles/index.css";
 
 .banner {
-  @apply flex
+  @apply relative
+    flex
     w-full
     flex-row
     items-center
@@ -40,3 +41,15 @@
 .warning {
   @apply bg-warning-600;
 }
+
+.closeButton {
+  @apply absolute
+    right-4
+    text-lg;
+
+  span {
+    @apply text-white/60
+      transition-colors
+      hover:text-white;
+  }
+}

packages/ui-components/src/Common/Banner/index.stories.tsx

@@ -26,4 +26,12 @@ export const Warning: Story = {
   },
 };
 
+export const Dismissible: Story = {
+  args: {
+    children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    type: 'default',
+    onClose: () => {},
+  },
+};
+
 export default { component: Banner } as Meta;

packages/ui-components/src/Common/Banner/index.tsx

@@ -1,21 +1,40 @@
-import type { FC, HTMLAttributes, PropsWithChildren } from 'react';
+import classNames from 'classnames';
+
+import type {
+  FC,
+  HTMLAttributes,
+  MouseEventHandler,
+  PropsWithChildren,
+} from 'react';
 
 import styles from './index.module.css';
 
 export type BannerProps = {
   type?: 'default' | 'warning' | 'error';
+  onClose?: MouseEventHandler<HTMLButtonElement>;
 } & HTMLAttributes<HTMLElement>;
 
 const Banner: FC<PropsWithChildren<BannerProps>> = ({
   type = 'default',
+  onClose,
   children,
   ...props
 }) => (
   <section
-    className={`${styles.banner} ${styles[type] || styles.default}`}
+    className={classNames(styles.banner, styles[type] || styles.default)}
     {...props}
   >
     {children}
+    {onClose && (
+      <button
+        type="button"
+        className={styles.closeButton}
+        aria-label="Close banner"
+        onClick={onClose}
+      >
+        <span aria-hidden="true">&times;</span>
+      </button>
+    )}
   </section>
 );