From 77b5c22793af590a875cceb4ff30aa04f7c1e5b8 Mon Sep 17 00:00:00 2001
From: Arthur Alves <117835311+ArthurEncr@users.noreply.github.com>
Date: Tue, 27 Dec 2022 16:58:22 -0300
Subject: [PATCH] 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>
---
 src/components/Card/index.tsx                 | 12 ++-
 .../Card/{styles.css => styles.scss}          | 48 ++++++++--
 src/components/FavoriteActivities/index.tsx   | 90 ++++++++++++-------
 src/mock-data/FavoriteActivitiesCardItems.ts  | 32 +++++--
 src/theme/components-overrides.scss           | 16 ++++
 src/types/Card.ts                             |  7 +-
 6 files changed, 150 insertions(+), 55 deletions(-)
 rename src/components/Card/{styles.css => styles.scss} (58%)

diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx
index 980466a3d..d62d32e9b 100644
--- 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 b/src/components/Card/styles.scss
similarity index 58%
rename from src/components/Card/styles.css
rename to src/components/Card/styles.scss
index c0310d438..2eecb4b80 100644
--- a/src/components/Card/styles.css
+++ b/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,8 +37,8 @@
   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;
@@ -40,7 +46,7 @@
 }
 
 .card-main:hover {
-  outline: 2px solid #0073E6;
+  outline: 2px solid colors.$blue-60;
   cursor: pointer;
 }
 
@@ -49,13 +55,13 @@
   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;
@@ -63,7 +69,7 @@
   max-width: 200px;
 }
 
-.card-content > p {
+.card-content>p {
   font-family: 'BC Sans', 'IBM Plex Sans', sans-serif;
   font-style: normal;
   font-weight: 400;
@@ -71,7 +77,7 @@
   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;
@@ -79,3 +85,27 @@
   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
index eeb4e5dd8..f1c16d3d2 100644
--- 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
index 40d4d304d..8aba99e91 100644
--- 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
index 9c5d83123..458f3c79a 100644
--- 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;
+}
\ No newline at end of file
diff --git a/src/types/Card.ts b/src/types/Card.ts
index 226e5f663..898c49696 100644
--- 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;