feat: new release card design

docs/004_release-notes/index.mdx

@@ -4,18 +4,18 @@ sidebar_label: 'Latest Release'
 id: 'latest-release'
 ---
 
-import ReleaseCard from '@site/src/components/ReleaseCard';
+import ReleaseCard from '@site/src/components/ReleaseCard/ReleaseCard';
 import { Grid } from '@mui/material'
 
 ## Platform
 
 <Grid container>
-    <Grid item xs={12} md={12} sx={{padding: '1%'}}>
-        <ReleaseCard
-          blog_link="https://genesis.global/blog/genesis-release-8-4/"
-          rn_link="../release-notes/platform/8/8.4/"
-          img_url="Release-8.4.webp"
-          alt_text="8.4 Release"
-        />
-    </Grid>
+  <Grid item xs={12} md={12} sx={{padding: '1%'}}>
+    <ReleaseCard
+      blogLink="https://genesis.global/blog/genesis-release-8-4/"
+      releaseNotesLink="/8/8.4/"
+      imageName="Release-8.4.webp"
+      imageAltText="8.4 Release"
+    />
+  </Grid>
 </Grid>

src/components/Card/Card.css

@@ -37,7 +37,8 @@
   background: var(--white);
 }
 
-.card-outer .card-inner .card-main-image-wrapper {
+.card-outer .card-inner .card-main-image-wrapper,
+.card-outer .card-inner .card-main-children-wrapper {
   height: 80px;
   width: 100%;
   display: flex;
@@ -51,12 +52,19 @@
   max-height: 100%;
 }
 
+.card-outer .card-inner .card-main-children-wrapper {
+  display: contents;
+  overflow: hidden
+
+}
+
 .card-outer .card-inner .card-main-content {
   width: 100%;
   flex: 1;
   display: flex;
   align-items: center;
   flex-direction: column;
+  justify-content: flex-start;
 }
 
 .card-outer .card-inner .card-main-content svg {

src/components/Card/Card.js

@@ -2,46 +2,63 @@ import React from "react";
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import './Card.css'
 
-export default function Card({ heading, text, link, imageUrl = '/svg/categories-icons/document-svgrepo-com.svg', children }) {
+export default function Card (props) {
+  const { link, heading, text, children, imageUrl, imageAlt, imageLink, footer, className } = props;
   const relativeLink = useBaseUrl(link);
   const relativeImageSrc = useBaseUrl(imageUrl);
-  const wrapperStyle = !children ? {} : {
-		display: 'contents',
-	};
 
-	// Stops the link working when interacting with the live examples
+  const imageElement = 
+    <img
+      className="card-main-image"
+      src={relativeImageSrc}
+      alt={imageAlt || heading}
+    />;
+
+  const imageWithWrapper = imageLink ? (
+    <a href={imageLink} title={heading} className="card-main-image-wrapper">
+      {imageElement}
+    </a>
+  ) : (
+    <div className="card-main-image-wrapper">
+      {imageElement}
+    </div>
+  );
+
+  // Stops the link working when interacting with the live examples
   const handleChildClick = (e) => {
     e.preventDefault();
     e.stopPropagation();
   };
 
-  return (
-    <a href={relativeLink} title={heading} className="card-outer">
-      <div className="card-inner" style={{overflow: 'hidden'}}>
-        <div
-          className="card-main-image-wrapper"
-          style={wrapperStyle}
-          onClick={children ? handleChildClick : undefined}
-        >
-          {children ? (
-						<div style={{overflow: 'hidden'}}>
-						{children}
-						</div>
-          ) : (
-            imageUrl && (
-              <img
-                className="card-main-image"
-                src={relativeImageSrc}
-                alt={heading}
-              />
-            )
-          )}
-        </div>
-        <div className="card-main-content" style={{ display: 'flex', flexDirection: 'column', justifyContent: 'flex-top' }}>
-          <h3>{heading}</h3>
-          <p>{text}</p>
-        </div>
+  const content = (
+    <div className="card-inner" style={{ overflow: 'hidden' }}>
+      { imageUrl ? imageWithWrapper : null }
+      { children && (
+        <div className="card-main-children-wrapper" onClick={handleChildClick}>
+          {children}
+        </div> )
+      }
+      { (heading || text) && (
+      <div className="card-main-content">
+        { heading && <h3>{heading}</h3> }
+        { text && <p>{text}</p> } 
       </div>
+      )}
+      {footer && (
+        <div className="card-footer">
+          {footer}
+        </div>
+      )}
+    </div>
+  );
+
+  return relativeLink ? (
+    <a href={relativeLink} title={heading} className={`card-outer ${className}`}>
+      {content}
     </a>
-  )
-}
+  ) : (
+    <div className={`card-outer ${className}`}>
+      {content}
+    </div>
+  );
+};

src/components/ReleaseCard/ReleaseCard.css

@@ -0,0 +1,52 @@
+
+.release-card {
+  height: 95%;
+  width: 550px;
+}
+
+.release-card .card-inner .card-main-image-wrapper {
+  width: 100%;
+  height: auto;
+  max-width: 500px;
+}
+
+.release-card-footer {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  justify-content: space-between;
+  flex-direction: row;
+  align-items: center;
+  padding: 12px 0;
+}
+
+@media (max-width: 1199px) {
+  .release-card {
+    width: 100%;
+  }
+
+  .release-card .card-inner .card-main-image-wrapper {
+    width: 100%;
+    max-width: 500px;
+    margin: 0 auto;
+  }
+}
+
+.release-card .release-card-button {
+  background-color: var(--warm-gray-3);
+  color: var(--black);
+  border: none;
+  border-radius: 6px;
+  padding: 3px 12px;
+  font-size: 1rem;
+  font-family: var(--medium-font);
+  font-weight: 400;
+  cursor: pointer;
+  transition: background-color 0.3s, color 0.3s;
+  white-space: nowrap;
+}
+
+.release-card .release-card-button:hover {
+  background-color: var(--primary-blue);
+  color: #ffffff;
+}

src/components/ReleaseCard/ReleaseCard.js

@@ -0,0 +1,34 @@
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import { ArrowForward } from '@mui/icons-material';
+import Card from '@site/src/components/Card/Card';
+import './ReleaseCard.css'
+
+const RELEASE_PAGE_URL_PREFIX = '/release-notes/platform';
+
+export default function ReleaseCard({ blogLink, releaseNotesLink, imageName, imageAltText }) {
+  const relativeReleaseNoteLink = useBaseUrl(`${RELEASE_PAGE_URL_PREFIX}${releaseNotesLink}`);
+  const imageSrc = imageName ? `/img/release-notes/${imageName}` : null;
+
+  const footerContent = (
+    <nav className="release-card-footer">
+      <a href={blogLink} target="_blank" title="Blog" className="release-card-button">
+        Blog
+        <ArrowForward sx={{ height: '10px', width: 'auto', paddingLeft: '1%' }} />
+      </a>
+      <a href={relativeReleaseNoteLink} title="Release notes" className="release-card-button">
+        Release notes
+        <ArrowForward sx={{ height: '10px', width: 'auto', paddingLeft: '1%' }} />
+      </a>
+    </nav>
+  )
+
+  return (
+    <Card 
+      className="release-card"
+      imageUrl={imageSrc}
+      imageAlt={imageAltText}
+      imageLink ={blogLink}
+      footer={footerContent}
+    />
+  );
+}

src/css/custom.css

@@ -803,29 +803,6 @@ a.table-of-contents__link--active {
   border-bottom: 2px solid;
 }
 
-/* Release card */
-.release-card {
-  height: 95%;
-  width: 550px;
-}
-
-.release-card-image {
-  width:100%;
-  max-width:500px;
-}
-
-@media (max-width: 1199px) {
-  .release-card {
-    width: 100%;
-  }
-
-  .release-card-image {
-    width: 100%;
-    max-width: 500px;
-    margin: 0 auto;
-  }
-}
-
 /** Card **/
 .card .MuiCard-root {
  margin: 0;