Link to release notes is not prominent on the releases page (#2128)

adoptium · Aug 22, 2023 · fb75f63 · fb75f63
1 parent 768a4ff
commit fb75f63
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 15 deletions.
diff --git a/src/components/Layout/layout.scss b/src/components/Layout/layout.scss
@@ -153,3 +153,19 @@ iframe {
 .font-poppins {
   font-family: Poppins, sans-serif;
 }
+
+.release-notes {
+  padding: 5px 0 10px;
+  border-top: 4px solid #333;
+  background-color: #f8f9fa !important;
+  margin-bottom: 5px;
+  border-right: 1px solid var(--bs-border-color);
+
+  a:not(:last-child) {
+    padding-right: 20px;
+  }
+
+  a svg {
+      margin-right: 5px;
+  }
+}
diff --git a/...omponents/TemurinDownloadTable/__tests__/__snapshots__/TemurinDownloadTable.test.tsx.snap b/...omponents/TemurinDownloadTable/__tests__/__snapshots__/TemurinDownloadTable.test.tsx.snap
@@ -18,7 +18,9 @@ exports[`TemurinDownloadTable component > renders correctly - no data 1`] = `
 
 exports[`TemurinDownloadTable component > renders correctly - with source 1`] = `
 <div>
-  <p>
+  <p
+    class="release-notes"
+  >
     <a
       href="/temurin/release-notes?version=mock-release-name"
     >
@@ -39,7 +41,42 @@ exports[`TemurinDownloadTable component > renders correctly - with source 1`] =
           d="M3 18h12v-2H3v2zM3 6v2h18V6H3zm0 7h18v-2H3v2z"
         />
       </svg>
-       
+      Text
+    </a>
+    <a
+      href="/installation/"
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        stroke="currentColor"
+        stroke-width="0"
+        viewBox="0 0 512 512"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M256 48C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48zm61 356l-12.2-39.6c13-5.8 24.9-14 35.3-24.4 10.4-10.4 18.6-22.3 24.4-35.3l39.5 12.1c-7.9 19.3-19.7 37-34.9 52.2-15.1 15.3-32.8 27.1-52.1 35zM195 108l12.2 39.6c-13 5.8-24.9 14-35.3 24.4-10.4 10.4-18.6 22.3-24.4 35.3L108 195.2c7.9-19.3 19.7-37 34.9-52.2 15.1-15.3 32.8-27.1 52.1-35zm61 84c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zm113.1-49.1c15.2 15.2 26.9 32.9 34.9 52.1l-39.5 12.2c-5.9-13-14-24.9-24.4-35.3-10.4-10.4-22.3-18.6-35.3-24.4l12.1-39.5c19.3 7.9 37 19.7 52.2 34.9zM142.9 369.1c-15.2-15.1-27-32.8-34.9-52.1l39.5-12.2c5.9 13 14 24.9 24.4 35.3 10.4 10.4 22.3 18.6 35.3 24.4L195.1 404c-19.3-7.9-37-19.7-52.2-34.9z"
+        />
+      </svg>
+      Text
+    </a>
+    <a
+      href="https://mock-link"
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        stroke="currentColor"
+        stroke-width="0"
+        viewBox="0 0 256 256"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M213.66,66.34l-40-40A8,8,0,0,0,168,24H88A16,16,0,0,0,72,40V56H56A16,16,0,0,0,40,72V216a16,16,0,0,0,16,16H168a16,16,0,0,0,16-16V200h16a16,16,0,0,0,16-16V72A8,8,0,0,0,213.66,66.34ZM168,216H56V72h76.69L168,107.31v84.53c0,.06,0,.11,0,.16s0,.1,0,.16V216Zm32-32H184V104a8,8,0,0,0-2.34-5.66l-40-40A8,8,0,0,0,136,56H88V40h76.69L200,75.31Zm-56-32a8,8,0,0,1-8,8H88a8,8,0,0,1,0-16h48A8,8,0,0,1,144,152Zm0,32a8,8,0,0,1-8,8H88a8,8,0,0,1,0-16h48A8,8,0,0,1,144,184Z"
+        />
+      </svg>
       Text
     </a>
   </p>
@@ -398,15 +435,6 @@ exports[`TemurinDownloadTable component > renders correctly - with source 1`] =
       </tr>
     </tbody>
   </table>
-  <p>
-    <a
-      href="https://mock-link"
-    >
-      mock-release-name
-       
-      Text
-    </a>
-  </p>
 </div>
 `;
 

diff --git a/src/components/TemurinDownloadTable/index.tsx b/src/components/TemurinDownloadTable/index.tsx
@@ -5,6 +5,8 @@ import { MdNotes } from 'react-icons/md';
 import { MdVerifiedUser } from 'react-icons/md';
 import { capitalize } from '../../util/capitalize';
 import { localeDate } from '../../util/localeDate';
+import { IoMdHelpBuoy } from 'react-icons/io';
+import { PiFiles } from 'react-icons/pi';
 
 const TemurinDownloadTable = ({results}) => {
     const { language } = useI18next();
@@ -13,10 +15,15 @@ const TemurinDownloadTable = ({results}) => {
     if (results && results.source) {
         source = results.source
     }
+
     return (
     <>
         {source &&
-            <p><Link to={`/temurin/release-notes?version=${source.release_name}`}><MdNotes /> <Trans>Release Notes</Trans></Link></p>
+            <p className='release-notes'>
+                <Link to={`/temurin/release-notes?version=${source.release_name}`}><MdNotes /><Trans>Release Notes</Trans></Link> 
+                <Link to="/installation/"><IoMdHelpBuoy /><Trans>Installation Guide</Trans></Link>
+                <Link to={source.binary.package.link}><PiFiles /><Trans>Source Code</Trans></Link> 
+            </p>
         }
         <table id="download-table" className="table table-bordered releases-table" style={{borderSpacing: '0 10px', borderCollapse: 'separate'}}>
             <tbody className="table-light">
@@ -88,9 +95,6 @@ const TemurinDownloadTable = ({results}) => {
             }
             </tbody>
         </table>
-        {source &&
-            <p><a href={source.binary.package.link}>{source.release_name} <Trans>Source Code Archive</Trans></a></p>
-        }
     </>
     );
 };