Feat/highlight (#21)

* feat: initial commit from sample app * feat: remove env file * feat: add last merge related to typography * feat: changes from Nicola sample app * Fixing issues from moving to the new repo * Empty commit to trigger ci * First draft of the dashboard screen * Improving styling * Adding status item component * Styling adjustments * Fixing Lint issues * feat: bring pending pull requests from sample app * feat: bring compliance file from main * Improving styling * feat: overflow component style adjustments * feat: highlight favorite card style * feat: new field and type * feat: dehighlight added * feat: hightlight and dehighlight function created at favorite activities * fix: fixed duplicated colors import and variable * fix: style and organization fixes * fix: revert conflits * fix: removing old files * fix: reverting login protection Co-authored-by: Ricardo Campos <ricardo.campos@encora.com> Co-authored-by: Nicola Saglioni <nicola.saglioni@mobeus.com>
bcgov · May 13, 2024 · 77b5c22 · 77b5c22
1 parent 7c01301
commit 77b5c22
Show file tree

Hide file tree

Showing 6 changed files with 150 additions and 55 deletions.
diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import './styles.css';
+import './styles.scss';
 
 import { Tile, OverflowMenu, OverflowMenuItem } from '@carbon/react';
 import * as Icons from '@carbon/icons-react';
@@ -9,16 +9,20 @@ interface CardProps {
   icon: string;
   header: string;
   description: string;
+  highlighted?: boolean;
+  highlightFunction?: () => void;
 }
 
-const Card = ({ icon, header, description }: CardProps) => {
+const Card = ({
+  icon, header, description, highlighted, highlightFunction
+}: CardProps) => {
   const Icon = Icons[icon];
   return (
-    <Tile className="card-main" tabIndex="0">
+    <Tile className={highlighted ? 'card-main-highlighted' : 'card-main'}>
       <span className="card-header">
         <Icon className="card-icon" />
         <OverflowMenu className="card-overflow" ariaLabel="overflow-menu">
-          <OverflowMenuItem itemText="Item 1" />
+          <OverflowMenuItem tabIndex="0" itemText={highlighted ? 'Dehighlight shortcut' : 'Highlight shortcut'} onClick={highlightFunction} />
           <OverflowMenuItem itemText="Item 2" />
           <OverflowMenuItem itemText="Item 3" />
         </OverflowMenu>

diff --git a/src/components/Card/styles.css → src/components/Card/styles.scss b/src/components/Card/styles.css → src/components/Card/styles.scss
@@ -1,3 +1,6 @@
+@use '../../theme/variables.scss' as vars;
+@use '../../theme/colors.scss' as colors;
+
 .card-header {
   display: inline-flex;
   width: 200px;
@@ -10,7 +13,7 @@
   height: 24px !important;
   padding: 0px !important;
   margin: 0px !important;
-  color: #0073E6;
+  color: colors.$blue-60;
 }
 
 .card-overflow {
@@ -20,9 +23,12 @@
   height: 32px;
   align-items: center;
   justify-content: center;
+  border-radius: 4px;
 }
 
-.card-main {
+
+.card-main,
+.card-main-highlighted {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -31,16 +37,16 @@
   margin: 8px;
   width: 234px;
   height: 158px;
-  background: #FFFFFF;
-  border: 1px solid #DFDFE1;
+  background: colors.$white;
+  border: 1px solid colors.$gray-20;
   border-radius: 4px;
   flex: none;
   order: 0;
   flex-grow: 0;
 }
 
 .card-main:hover {
-  outline: 2px solid #0073E6;
+  outline: 2px solid colors.$blue-60;
   cursor: pointer;
 }
 
@@ -49,33 +55,57 @@
   margin-top: auto;
 }
 
-.card-content > h5 {
+.card-content>h5 {
   font-family: 'BC Sans', 'IBM Plex Sans', sans-serif;
   font-style: normal;
   font-weight: 700;
   font-size: 16px;
   line-height: 24px;
-  color: #131315;
+  color: colors.$gray-100;
   display: block;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 200px;
 }
 
-.card-content > p {
+.card-content>p {
   font-family: 'BC Sans', 'IBM Plex Sans', sans-serif;
   font-style: normal;
   font-weight: 400;
   font-size: 14px;
   line-height: 18px;
   letter-spacing: 0.16px;
   margin-bottom: auto;
-  color: #606062;
+  color: colors.$gray-70;
   display: -webkit-box;
   max-width: 200px;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+.card-main-highlighted {
+  background: colors.$blue-60;
+}
+
+.card-main-highlighted .card-icon,
+.card-main-highlighted .card-content>h5,
+.card-main-highlighted .card-content>p {
+  color: colors.$white;
+}
+
+.card-main-highlighted .card-overflow > svg{
+  fill: colors.$white;
+}
+
+.#{vars.$bcgov-prefix}--overflow-menu.#{vars.$bcgov-prefix}--overflow-menu--open >svg{
+  fill: var(--bcgov-icon-primary);
+}
+
+.card-main-highlighted:hover {
+  border-color: colors.$white;
+  box-shadow: inset 0 0 0 1px colors.$white, 0 0 0 3px colors.$blue-60 ;
+  cursor: pointer;
+}
diff --git a/src/components/FavoriteActivities/index.tsx b/src/components/FavoriteActivities/index.tsx
@@ -4,40 +4,66 @@ import { Tooltip, Row, Column } from '@carbon/react';
 import { Information } from '@carbon/icons-react';
 import Card from '../Card';
 
-import './styles.scss';
-
+import CardType from '../../types/Card';
+import './styles.css';
 import FavoriteActivitiesCardItems from '../../mock-data/FavoriteActivitiesCardItems';
 
-const cards = FavoriteActivitiesCardItems;
+const FavoriteActivities = () => {
+  const [cards, setCards] = React.useState<CardType[]>(FavoriteActivitiesCardItems);
+
+  const highlightFunction = (index:number) => {
+    const target = cards[index];
+    const newCards = [...cards];
+    if (target.highlighted === false) {
+      newCards.forEach((item, i) => {
+        const card = item;
+        if (card.id !== target.id) {
+          card.highlighted = false;
+        } else {
+          newCards.splice(i, 1);
+          newCards.unshift(item);
+          newCards[0].highlighted = true;
+        }
+      });
+    } else {
+      newCards[0].highlighted = false;
+    }
+    setCards(newCards);
+  };
 
-const FavoriteActivities = () => (
-  <Row className="favorite-activities">
-    <Column lg={4} className="favorite-activities-title">
-      <h3>My favorite activities</h3>
-      <h4>
-        Quick access to your favorite activities.
-        <Tooltip
-          align="top"
-          tabIndex={0}
-          label="You can add a shortcut to your favorite activity by clicking on the hearth icon inside each page."
-        >
-          <Information />
-        </Tooltip>
-      </h4>
-    </Column>
-    <Column lg={12}>
-      <Row>
-        {cards.map((card) => (
-          <Card
-            key={card.header}
-            icon={card.icon}
-            header={card.header}
-            description={card.description}
-          />
-        ))}
-      </Row>
-    </Column>
-  </Row>
-);
+  return (
+    <Row className="main-content">
+      <Column lg={4}>
+        <h3>My favorite activities</h3>
+        <h4>
+          Quick access to your favorite activities.
+          <Tooltip
+            align="top"
+            tabIndex={0}
+            label="You can add a shortcut to your favorite activity by clicking on the hearth icon inside each page."
+          >
+            <Information />
+          </Tooltip>
+        </h4>
+      </Column>
+      <Column lg={12}>
+        <Row>
+          {cards.map((card, index) => (
+            <Card
+              key={card.id}
+              icon={card.icon}
+              header={card.header}
+              description={card.description}
+              highlighted={card.highlighted}
+              highlightFunction={() => {
+                highlightFunction(index);
+              }}
+            />
+          ))}
+        </Row>
+      </Column>
+    </Row>
+  );
+};
 
 export default FavoriteActivities;
diff --git a/src/mock-data/FavoriteActivitiesCardItems.ts b/src/mock-data/FavoriteActivitiesCardItems.ts
@@ -1,54 +1,70 @@
 const FavoriteActivitiesCardItems = [
   {
+    id: '1',
     icon: 'SoilMoistureField',
     header: 'Seedlot registration',
     description:
       'Start a new registration or check on existing seedlots registrations',
-    link: '#'
+    link: '#',
+    highlighted: false
   },
   {
+    id: '2',
     icon: 'Tree',
     header: 'Parent tree orchard',
     description:
       'Manage the parent trees inside your orchard and look for their latest reports and the latest data. ',
-    link: '#'
+    link: '#',
+    highlighted: false
   },
   {
+    id: '3',
     icon: 'CropHealth',
     header: 'Latest sowing date recommended',
     description:
       'Check what is the latest sowing dates recommended for your seedlot.',
-    link: '#'
+    link: '#',
+    highlighted: false
   },
   {
+    id: '4',
     icon: 'CropGrowth',
     header: 'Seedling request',
     description: 'Open a new seedling request for your reforestation needs.',
-    link: '#'
+    link: '#',
+    highlighted: false
   },
   {
+    id: '5',
     icon: 'MapBoundaryVegetation',
     header: 'Orchard maintenance',
     description: 'Keep your orchard update with the orchard maintenance.',
-    link: '#'
+    link: '#',
+    highlighted: false
   },
   {
+    id: '6',
     icon: 'Sprout',
     header: 'Generic shortcut',
     description: 'Generic shortcut page description',
-    link: '#'
+    link: '#',
+    highlighted: false
   },
   {
+    id: '7',
     icon: 'Sprout',
     header: 'Generic shortcut',
     description: 'Generic shortcut page description',
-    link: '#'
+    link: '#',
+    highlighted: false
   },
   {
+    id: '8',
     icon: 'Sprout',
     header: 'Generic shortcut',
     description: 'Generic shortcut page description',
-    link: '#'
+    link: '#',
+    highlighted: false
   }
 ];
 

diff --git a/src/theme/components-overrides.scss b/src/theme/components-overrides.scss
@@ -223,3 +223,19 @@ $types: 'error', 'info', 'success', 'warning';
     border-bottom-color: var(--bcgov-notification-border-#{$notificationType});
     border-right-color: var(--bcgov-notification-border-#{$notificationType})}
 }
+
+.#{variables.$bcgov-prefix}--overflow-menu.bcgov--overflow-menu--open{
+  border-radius: 4px 4px 0 0;
+}
+
+.#{variables.$bcgov-prefix}--overflow-menu-options{
+  border-radius: 0 4px 4px 4px;
+}
+
+li.#{variables.$bcgov-prefix}--overflow-menu-options__option:first-child{
+  border-radius: 0 4px 0 0;
+}
+
+li.#{variables.$bcgov-prefix}--overflow-menu-options__option:last-child{
+  border-radius: 0 0 4px 4px;
+}
diff --git a/src/types/Card.ts b/src/types/Card.ts
@@ -1,7 +1,10 @@
-type Card = {
+type CardType = {
+  id: string;
   icon: string;
   header: string;
   description: string;
+  link: string;
+  highlighted?: boolean;
 }
 
-export default Card;
+export default CardType;