fix(site): close release modal on eol link click (#7903)

* fix(site): close release modal on eol button click

* feat: review nits

* feat: reorder alertbox

Author: araujogui

apps/site/components/Downloads/ReleaseModal/index.tsx

@@ -1,5 +1,5 @@
 import AlertBox from '@node-core/ui-components/Common/AlertBox';
-import Modal from '@node-core/ui-components/Common/Modal';
+import { Modal, Title, Content } from '@node-core/ui-components/Common/Modal';
 import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 
@@ -32,15 +32,22 @@ const ReleaseModal: FC<ReleaseModalProps> = ({
   });
 
   return (
-    <Modal open={isOpen} onOpenChange={closeModal} heading={modalHeading}>
+    <Modal open={isOpen} onOpenChange={closeModal}>
       {release.status === 'End-of-life' && (
         <AlertBox
           title={t('components.common.alertBox.warning')}
           level="warning"
           size="small"
         >
           {t.rich('components.releaseModal.unsupportedVersionWarning', {
-            link: text => <Link href="/about/previous-releases/">{text}</Link>,
+            link: text => (
+              <Link
+                onClick={closeModal}
+                href="/about/previous-releases#release-schedule"
+              >
+                {text}
+              </Link>
+            ),
           })}
         </AlertBox>
       )}
@@ -57,19 +64,23 @@ const ReleaseModal: FC<ReleaseModalProps> = ({
         </AlertBox>
       )}
 
-      {release.releaseAnnounceLink && (
-        <LinkWithArrow href={release.releaseAnnounceLink}>
-          {t('components.releaseModal.releaseAnnouncement')}
-        </LinkWithArrow>
-      )}
+      <Title>{modalHeading}</Title>
+
+      <Content>
+        {release.releaseAnnounceLink && (
+          <LinkWithArrow href={release.releaseAnnounceLink}>
+            {t('components.releaseModal.releaseAnnouncement')}
+          </LinkWithArrow>
+        )}
 
-      <h5>{t('components.releaseModal.overview')}</h5>
+        <h5>{t('components.releaseModal.overview')}</h5>
 
-      <ReleaseOverview release={release} />
+        <ReleaseOverview release={release} />
 
-      <h5>{t('components.releaseModal.minorVersions')}</h5>
+        <h5>{t('components.releaseModal.minorVersions')}</h5>
 
-      <MinorReleasesTable releases={release.minorVersions} />
+        <MinorReleasesTable releases={release.minorVersions} />
+      </Content>
     </Modal>
   );
 };

packages/i18n/locales/en.json

@@ -163,12 +163,12 @@
       "details": "Details"
     },
     "releaseModal": {
-      "title": "Node.js {version} ({codename})",
-      "titleWithoutCodename": "Node.js {version}",
+      "title": "Node.js v{version} ({codename})",
+      "titleWithoutCodename": "Node.js v{version}",
       "overview": "Overview",
       "minorVersions": "Minor versions",
       "releaseAnnouncement": "Release Announcement",
-      "unsupportedVersionWarning": "This version is out of maintenance. Please use a currently supported version. <link>Understand EOL support.</link>",
+      "unsupportedVersionWarning": "This version is out of maintenance. Please use a supported version. <link>Understand EOL support.</link>",
       "ltsVersionFeaturesNotice": "Want new features sooner? Get the <link>latest Node.js version</link> instead and try the latest improvements!"
     },
     "minorReleasesTable": {

packages/ui-components/Common/Modal/index.module.css

@@ -17,6 +17,7 @@
       w-full
       max-w-3xl
       flex-col
+      gap-2
       overflow-y-auto
       rounded
       border
@@ -47,16 +48,15 @@
   }
 
   .title {
-    @apply mb-2
-      text-3xl
+    @apply text-3xl
       font-semibold
       text-neutral-900
       dark:text-white;
   }
 
   .description {
     @apply font-regular
-      mb-4
+      mb-2
       text-lg
       text-neutral-800
       dark:text-neutral-200;

packages/ui-components/Common/Modal/index.stories.tsx

@@ -1,17 +1,19 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
-import Modal from '#ui/Common/Modal';
+import { Modal, Title, Description, Content } from '#ui/Common/Modal';
 
 type Story = StoryObj<typeof Modal>;
 type Meta = MetaObj<typeof Modal>;
 
 export const Default: Story = {
   args: {
     open: true,
-    heading: 'Node.js Versions Information',
-    subheading: 'Get all information about Node.js versions and their changes.',
     children: (
-      <>
+      <Content>
+        <Title>Node.js Versions Information</Title>
+        <Description>
+          Get all information about Node.js versions and their changes.
+        </Description>
         <p>
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto
           atque sint doloremque, sapiente recusandae debitis libero nostrum
@@ -24,7 +26,7 @@ export const Default: Story = {
           amet minus sit architecto blanditiis hic sed odit cumque numquam
           dignissimos delectus.
         </p>
-      </>
+      </Content>
     ),
   },
 };

packages/ui-components/Common/Modal/index.tsx

@@ -7,15 +7,11 @@ import type { FC, PropsWithChildren } from 'react';
 import styles from './index.module.css';
 
 type ModalProps = PropsWithChildren<{
-  heading: string;
-  subheading?: string;
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
 }>;
 
 const Modal: FC<ModalProps> = ({
-  heading,
-  subheading,
   children,
   open = false,
   onOpenChange = () => {},
@@ -28,15 +24,7 @@ const Modal: FC<ModalProps> = ({
             <XMarkIcon />
           </Dialog.Trigger>
 
-          <Dialog.Title className={styles.title}>{heading}</Dialog.Title>
-
-          {subheading && (
-            <Dialog.Description className={styles.description}>
-              {subheading}
-            </Dialog.Description>
-          )}
-
-          <main className={styles.wrapper}>{children}</main>
+          {children}
 
           <Dialog.Close />
         </Dialog.Content>
@@ -45,4 +33,18 @@ const Modal: FC<ModalProps> = ({
   </Dialog.Root>
 );
 
-export default Modal;
+const Title = ({ children }: PropsWithChildren) => (
+  <Dialog.Title className={styles.title}>{children}</Dialog.Title>
+);
+
+const Description = ({ children }: PropsWithChildren) => (
+  <Dialog.Description className={styles.description}>
+    {children}
+  </Dialog.Description>
+);
+
+const Content = ({ children }: PropsWithChildren) => (
+  <main className={styles.wrapper}>{children}</main>
+);
+
+export { Modal, Title, Description, Content };