feat: implement hover state for NewsCard

acid-info · May 14, 2024 · 0d0adcb · 0d0adcb
1 parent 0be1623
commit 0d0adcb
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 17 deletions.
diff --git a/packages/docusaurus-playground/root-pages/news/index.mdx b/packages/docusaurus-playground/root-pages/news/index.mdx
@@ -17,7 +17,6 @@ import { NewsCardList, Grid, Box } from '@site/src/components/mdx'
 <NewsCardList
   data={[
     {
-      thumbnail: '/img/news-thumbnail.png',
       title:
         "Decentralized Uber: Here's How I Built It With Status.im, Waku, and Vue.js",
       author: 'Laszlo Fazekas',

diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/NewsCard/NewsCard.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/NewsCard/NewsCard.scss
@@ -9,6 +9,16 @@
   text-decoration: none !important;
 }
 
+.mdx-news-card:hover {
+  .mdx-news-card__title {
+    text-decoration: underline !important;
+  }
+
+  .mdx-news-card__external-link-icon {
+    display: flex !important;
+  }
+}
+
 .mdx-grid > .mdx-grid__content .mdx-news-card {
   .mdx-news-card__title {
     margin-top: 0 !important;
@@ -23,14 +33,10 @@
 }
 
 .mdx-news-card__thumbnail {
+  display: flex !important;
   height: 144px;
   border: 1px solid rgba(var(--lsd-border-primary), 0.2);
-}
-
-.mdx-news-card__title {
-  &:hover {
-    text-decoration: underline !important;
-  }
+  width: 100%;
 }
 
 .mdx-news-card__info {
@@ -49,15 +55,50 @@
   margin-top: 4px;
 }
 
+.mdx-news-card-thumbnail__container {
+  width: 100%;
+  position: relative;
+  height: 144px;
+}
+
+.mdx-news-card__external-link-icon {
+  display: none;
+  width: 28px;
+  height: 28px;
+  box-sizing: border-box;
+
+  justify-content: center;
+  align-items: center;
+
+  position: absolute;
+  right: 8px;
+  bottom: 8px;
+
+  border: 1px solid rgb(var(--lsd-border-primary));
+  z-index: 9999;
+
+  & > div {
+    margin: unset;
+  }
+}
+
 @include utils.responsive('lg', 'down') {
   .mdx-news-card__thumbnail {
     height: 128px;
   }
+
+  .mdx-news-card-thumbnail__container {
+    height: 128px;
+  }
 }
 
 @include utils.responsive('md', 'down') {
   .mdx-news-card__thumbnail {
-    height: unset;
+    height: 100%;
+  }
+
+  .mdx-news-card-thumbnail__container {
+    height: 100%;
   }
 }
 

diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/NewsCard/NewsCard.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/NewsCard/NewsCard.tsx
@@ -3,9 +3,10 @@ import ThemedImage from '@theme/ThemedImage'
 import clsx from 'clsx'
 import React from 'react'
 import './NewsCard.scss'
+import { IconExternalLink } from '@logos-theme/components/Icon/Icon'
 
 export type NewsCardProps = React.HTMLProps<HTMLAnchorElement> & {
-  thumbnail: string
+  thumbnail?: string
   title: string
   date: React.ReactNode
   author: string
@@ -28,14 +29,22 @@ export const NewsCard: React.FC<NewsCardProps> = ({
       {...props}
       className={clsx(props.className, 'mdx-news-card')}
     >
-      <ThemedImage
-        sources={{
-          dark: thumbnail,
-          light: thumbnail,
-        }}
-        alt={title ?? 'news thumbnail'}
-        className="mdx-news-card__thumbnail"
-      />
+      {thumbnail && (
+        <div className="mdx-news-card-thumbnail__container">
+          <ThemedImage
+            sources={{
+              dark: thumbnail,
+              light: thumbnail,
+            }}
+            alt={title ?? 'news thumbnail'}
+            className="mdx-news-card__thumbnail"
+          />
+          <div className="mdx-news-card__external-link-icon">
+            <IconExternalLink className="mdx-jpd__external-link-icon" />
+          </div>
+        </div>
+      )}
+
       <Typography component="h3" variant="h4" className="mdx-news-card__title">
         {title}
       </Typography>