fix(SILVA-494): disabling home buttons (#434)

bcgov · Oct 30, 2024 · 15457bc · 15457bc
1 parent ca02291
commit 15457bc
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 12 deletions.
diff --git a/frontend/src/components/FavouriteCard/index.tsx b/frontend/src/components/FavouriteCard/index.tsx
@@ -1,6 +1,4 @@
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
-import { Tile } from '@carbon/react';
+import { ClickableTile } from '@carbon/react';
 import * as Icons from '@carbon/icons-react';
 import './styles.scss';
 
@@ -9,7 +7,8 @@ interface FavouriteCardProps {
   title: string,
   link: string,
   icon: string,
-  description:String
+  description:string
+  disabled?: boolean
 }
 
 /**
@@ -28,16 +27,18 @@ function FavouriteCard ({
   title,
   link,
   icon,
-  description
+  description,
+  disabled = false
 }: FavouriteCardProps): JSX.Element {
   const Icon = Icons[String(icon)];
-  const navigate = useNavigate();
 
   return (
-    <Tile
+    <ClickableTile
+      id={`fav-card-${index}`}
       className={'fav-card-main' }
       tabIndex={index}
-      onClick={() => navigate(link)}
+      href={link}
+      disabled={disabled}
     >
       <div className="fav-card-header">
         <Icon className="fav-card-icon" />
@@ -49,7 +50,7 @@ function FavouriteCard ({
         <p className="fav-card-title-large">{title}</p>
         <p className="fav-card-content-description">{description}</p>
       </div>
-    </Tile>
+    </ClickableTile>
   );
 };
 

diff --git a/frontend/src/components/FavouriteCard/styles.scss b/frontend/src/components/FavouriteCard/styles.scss
@@ -116,6 +116,12 @@ p.fav-card-title-small {
   display: none;
 }
 
+.bx--tile--clickable.bx--link--disabled, .bx--tile--clickable:hover.bx--link--disabled {
+  display: flex;
+  margin: 0.5rem;
+  padding: 1.25rem 1rem;
+}
+
 @media only screen and (max-width: 671px) {
   .fav-card-main,
   .fav-card-main-highlighted {

diff --git a/frontend/src/screens/Opening/index.tsx b/frontend/src/screens/Opening/index.tsx
@@ -53,29 +53,32 @@ const Opening: React.FC = () => {
             </div>
             <div className="col-sm-6 col-md-6 col-lg-6 col-xl-6 col-xxl-3">
               <FavouriteCard
-                index={1}
+                index={2}
                 title={'Create an opening'}
                 link="#"
                 icon={'MapBoundary'}
                 description={'Create different opening types to track silviculture activities, treatments and generate their identifier (ID)'}
+                disabled
               />
             </div>
             <div className="col-sm-6 col-md-6 col-lg-6 col-xl-6 col-xxl-3">
               <FavouriteCard
-                index={1}
+                index={3}
                 title={'Reports'}
                 link="#"
                 icon={'ReportData'}
                 description={'Consult and manage opening reports'}
+                disabled
               />
             </div>
             <div className="col-sm-6 col-md-6 col-lg-6 col-xl-6 col-xxl-3">
               <FavouriteCard
-                index={1}
+                index={4}
                 title={'Upcoming activities'}
                 link="#"
                 icon={'Activity'}
                 description={'Track opening activities and milestones'}
+                disabled
               />
             </div>
           </div>