feat: CQDG-696 use ferlab components in landing page (#271)

cypress/e2e/Consultation/Landing.cy.ts

@@ -25,27 +25,27 @@ describe('Page Landing - Vérifier les informations affichées', () => {
     cy.get('[class*="Studies_container"] [class*="ant-carousel"] [class*="Carousel_dots"]').should('exist');
 
     cy.get('[class*="Studies_container"] [class*="ant-carousel"] [class*="Carousel_title"] [src*="/static/media/cartagene."]').should('exist');
-    cy.get('[class*="Studies_container"] [class*="ant-carousel"] [class*="Carousel_subTitle"]').contains('CARTaGENE').should('exist');
+    cy.get('[class*="Studies_container"] [class*="ant-carousel"] [class*="Carousel_subtitle"]').contains('CARTaGENE').should('exist');
     cy.get('[class*="Studies_container"] [class*="ant-carousel"] [class*="Carousel_description"]').contains(/(CARTaGENE est une plateforme publique de recherche du CHU Sainte-Justine créée pour accélérer la recherche en santé. CARTaGENE est constitué à la fois d'échantillons biologiques et de données de santé provenant de 43 000 résidents du Québec âgés de 40 à 69 ans.|CARTaGENE is a public research platform of the CHU Sainte-Justine created to accelerate health research. CARTaGENE consists of both biological samples and health data from 43,000 Quebec residents aged between 40 to 69 years.)/).should('exist');
     cy.get('[class*="Studies_container"] [class*="ant-carousel"] [class*="Carousel_description"]').contains(/(Le jeu de données présentement hébergé au CQDG comprend les données de séquençage du génome entier \(WGS\) de 2 179 individus.|The dataset currently available in the CQDG contains whole genome sequencing \(WGS\) data for 2,179 individuals.)/).should('exist');
 
     cy.get('[class*="Studies_container"] [class*="ant-carousel"] [class*="Carousel_title"]').contains('DEE').should('exist');
-    cy.get('[class*="Studies_container"] [class*="ant-carousel"] [class*="Carousel_subTitle"]').contains(/(Investigation des causes génétiques des encéphalopathies épileptogènes|Investigating the genetic causes of epileptogenic encephalopathies)/).should('exist');
+    cy.get('[class*="Studies_container"] [class*="ant-carousel"] [class*="Carousel_subtitle"]').contains(/(Investigation des causes génétiques des encéphalopathies épileptogènes|Investigating the genetic causes of epileptogenic encephalopathies)/).should('exist');
     cy.get('[class*="Studies_container"] [class*="ant-carousel"] [class*="Carousel_description"]').contains(/(Étude de séquençage du génome entier \(WGS\) chez des enfants atteints d'encéphalopathies épileptogènes.|Whole Genome Sequencing \(WGS\) study in children with epileptogenic encephalopathies.)/).should('exist');
     cy.get('[class*="Studies_container"] [class*="ant-carousel"] [class*="Carousel_description"]').contains(/(Le jeu de données présentement hébergé au CQDG comprend les données de séquençage du génome entier de 588 individus appartenant à 196 familles.|The dataset currently available in the CQDG contains whole genome sequencing data for 588 individuals belonging to 196 families.)/).should('exist');
 
     cy.get('[class*="Studies_container"] [class*="ant-carousel"] [class*="Carousel_title"]').contains('BACQ').should('exist');
-    cy.get('[class*="Studies_container"] [class*="ant-carousel"] [class*="Carousel_subTitle"]').contains(/(Biobanque des anomalies congénitales au Québec|Quebec congenital malformation biobank)/).should('exist');
+    cy.get('[class*="Studies_container"] [class*="ant-carousel"] [class*="Carousel_subtitle"]').contains(/(Biobanque des anomalies congénitales au Québec|Quebec congenital malformation biobank)/).should('exist');
     cy.get('[class*="Studies_container"] [class*="ant-carousel"] [class*="Carousel_description"]').contains(/(Biobanque de cas affectés bien caractérisés ainsi que de leurs parents permettant de mener des études de génétique moléculaire pour identifier les gènes associés à ces malformations.|Biobank of well-characterized affected cases as well as their parents allowing molecular genetic studies to be carried out to identify the genes associated with these malformations.)/).should('exist');
     cy.get('[class*="Studies_container"] [class*="ant-carousel"] [class*="Carousel_description"]').contains(/(Le jeu de données présentement hébergé au CQDG comprend les données de séquençage de l’exome entier \(WXS\) de 386 individus appartenant à 124 familles.|The dataset currently available in the CQDG contains whole exome sequencing \(WXS\) data for 386 individuals belonging to 124 families.)/).should('exist');
 
     cy.get('[class*="Studies_container"] [class*="ant-carousel"] [class*="Carousel_title"]').contains('PRAGMatIQ').should('exist');
-    cy.get('[class*="Studies_container"] [class*="ant-carousel"] [class*="Carousel_subTitle"]').contains(/(Pratique rapide de la génomique pédiatrique au Québec|Applying rapid pediatric genomics in Quebec)/).should('exist');
+    cy.get('[class*="Studies_container"] [class*="ant-carousel"] [class*="Carousel_subtitle"]').contains(/(Pratique rapide de la génomique pédiatrique au Québec|Applying rapid pediatric genomics in Quebec)/).should('exist');
     cy.get('[class*="Studies_container"] [class*="ant-carousel"] [class*="Carousel_description"]').contains(/(L'objectif du projet est d'offrir un séquençage clinique rapide du génome entier \(WGS\) à tous les nouveau-nés et nourrissons gravement malades qui pourraient bénéficier de ce test au Québec.|The objective of the project is to offer rapid clinical Whole Genome Sequencing \(WGS\) to all critically ill newborns and infants who could benefit from this test in Quebec.)/).should('exist');
     cy.get('[class*="Studies_container"] [class*="ant-carousel"] [class*="Carousel_description"]').contains(/(Les données de 257 individus ont été soumises au CQDG. Le jeu de données présentement hébergé au CQDG comprend les données de séquençage du génome entier de 110 individus appartenant à 38 familles.|Data for 257 individuals has been submitted to the CQDG. The dataset currently available in the CQDG contains whole genome sequencing data for 110 individuals belonging to 38 families.)/).should('exist');
 
     cy.get('[class*="Studies_container"] [class*="ant-carousel"] [class*="Carousel_title"]').contains('NeuroDev').should('exist');
-    cy.get('[class*="Studies_container"] [class*="ant-carousel"] [class*="Carousel_subTitle"]').contains(/(Troubles du neuro-développement|Neurodevelopmental disorders)/).should('exist');
+    cy.get('[class*="Studies_container"] [class*="ant-carousel"] [class*="Carousel_subtitle"]').contains(/(Troubles du neuro-développement|Neurodevelopmental disorders)/).should('exist');
     cy.get('[class*="Studies_container"] [class*="ant-carousel"] [class*="Carousel_description"]').contains(/(L'objectif principal de ce projet est de constituer une banque d'échantillons et de données provenant d'enfants et d'adultes atteints d'un retard global de développement, d'épilepsie et\/ou de malformations et de membres de leur famille pour alimenter divers projets de recherche qui visent à identifier les gènes impliqués dans ces pathologies.|The main objective of this project is to constitute a bank of samples and data from children and adults with global developmental delay, epilepsy and\/or malformations and members of their family to supply various research projects which aim to identify the genes involved in these conditions.)/).should('exist');
     cy.get('[class*="Studies_container"] [class*="ant-carousel"] [class*="Carousel_description"]').contains(/(Les données de 382 individus ont été soumises au CQDG. Le jeu de données présentement hébergé au CQDG comprend les données de séquençage du génome entier de 67 individus appartenant à 22 familles.|Data for 382 individuals has been submitted to the CQDG. The dataset currently available in the CQDG contains whole genome sequencing data for 67 individuals belonging to 22 families.)/).should('exist');
   });
@@ -92,11 +92,11 @@ describe('Page Landing - Vérifier les informations affichées', () => {
   });
 
   it('Section Variant Tile', () => {
-    cy.get('[class*="Variants_container"] [id="gene"]').should('exist');
-    cy.get('[class*="Variants_container"] [class*="TextIcon_title"]').contains(/\d{3}K/).should('exist');
-    cy.get('[class*="Variants_container"] [class*="TextIcon_subTitle"]').contains(/(Variants germinaux|Germline Variants)/).should('exist');
-    cy.get('[class*="Variants_container"] [class*="Variants_description"]').contains(/(Notre explorateur de variants offre des fonctions de recherche avancées. En quelques clics, vous pouvez explorer des millions de variants germinaux annotés issus des génomes et exomes des participants du CQDG.|Our variant explorer offers advanced searching capabilities. With just a few clicks, you can explore millions of annotated germline variants from genomes and exomes of the CQDG participants.)/).should('exist');
-    cy.get('[class*="Variants_container"] [type="button"]').contains(/(Explorer les données de variants|Explore variant data)/).should('exist');
+    cy.get('[class*="VariantCard_container"] [id="gene"]').should('exist');
+    cy.get('[class*="VariantCard_container"] [class*="TextIcon_title"]').contains(/\d{3}K/).should('exist');
+    cy.get('[class*="VariantCard_container"] [class*="TextIcon_subtitle"]').contains(/(Variants germinaux|Germline Variants)/).should('exist');
+    cy.get('[class*="VariantCard_container"] [class*="VariantCard_description"]').contains(/(Notre explorateur de variants offre des fonctions de recherche avancées. En quelques clics, vous pouvez explorer des millions de variants germinaux annotés issus des génomes et exomes des participants du CQDG.|Our variant explorer offers advanced searching capabilities. With just a few clicks, you can explore millions of annotated germline variants from genomes and exomes of the CQDG participants.)/).should('exist');
+    cy.get('[class*="VariantCard_container"] [type="button"]').contains(/(Explorer les données de variants|Explore variant data)/).should('exist');
   });
 
   it('Section Documentation Tiles', () => {

cypress/e2e/Navigation/Logout.cy.ts

@@ -28,7 +28,7 @@ describe('Page Logout', () => {
     cy.get('[class*="Stats_wrapper"] [class*="ant-card-body"] [class*="TextIcon_layout"]').eq(5).find('[id="exomes"]').should('exist');
     cy.get('[class*="Rare_container"] [src*="/static/media/RARE."]').should('exist');
     cy.get('[class*="SecureData_container"] [src*="data:image/png"]').should('exist');
-    cy.get('[class*="Variants_container"] [id="gene"]').should('exist');
+    cy.get('[class*="VariantCard_container"] [id="gene"]').should('exist');
     cy.get('[class*="BannerItem_container"]').eq(0).find('[id="information"]').should('exist');
     cy.get('[class*="BannerItem_container"]').eq(1).find('[id="cloud-database"]').should('exist');
     cy.get('[src*="/static/media/logos-genome_qc."]').should('exist');

package.json

@@ -58,7 +58,7 @@
     "@apollo/client": "^3.7.11",
     "@dnd-kit/core": "^4.0.3",
     "@dnd-kit/sortable": "^5.1.0",
-    "@ferlab/ui": "9.12.2",
+    "@ferlab/ui": "9.13.1",
     "@loadable/component": "^5.15.2",
     "@nivo/bar": "^0.84.0",
     "@nivo/pie": "^0.84.0",

src/style/themes/cqdg/_theme.template.scss

@@ -63,7 +63,7 @@ $sidebar-menu-item-border-focus-color: $gray-1;
 
 $sidebar-quick-filter-input-box-shadow-hover: 0 0 0 2px $blue-8;
 $sidebar-quick-filter-input-box-shadow-focus: 0 0 0 2px $gray-8,
-  0 0 0 3px $gray-1;
+0 0 0 3px $gray-1;
 $sidebar-quick-filter-input-placeholder-color: $gray-6;
 $sidebar-quick-filter-input-text-color: $gray-8;
 
@@ -93,3 +93,11 @@ $prolabel-required-mark-color: $red-8;
 
 // UploadIds
 $file-upload-item-color: $blue-8;
+
+// LandingPage
+$landing-card-gradient: linear-gradient(343deg, #008FC7 23.91%, #016195 102.01%);
+$landing-text-color: $gray-1;
+$landing-text-icon-color-light: $gray-1;
+$landing-text-icon-color-dark: $gray-8;
+$landing-spot-icon-color-light: $blue-7;
+$landing-spot-icon-color-dark: $blue-3;

src/views/Login/BottomBanner/index.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import CloudDatabaseIcon from '@ferlab/ui/core/components/Icons/FuturoSpot/CloudDatabaseSpotIcon';
 import InformationIcon from '@ferlab/ui/core/components/Icons/FuturoSpot/InformationSpotIcon';
-
-import BannerItem from './BannerItem';
+import BannerItem from '@ferlab/ui/core/pages/LandingPage/BannerItem';
+import EnvVariables from 'helpers/EnvVariables';
 
 import styles from './index.module.scss';
 
@@ -12,17 +12,31 @@ const BottomBanner = () => (
     <div className={styles.content}>
       <BannerItem
         IconComponent={InformationIcon}
-        title={intl.get('screen.loginPage.documentation.title')}
-        description={intl.get('screen.loginPage.documentation.description')}
-        buttonText={intl.get('screen.loginPage.documentation.button')}
-        buttonUrl="https://docs.cqdg.ca/"
+        dictionary={{
+          title: intl.get('screen.loginPage.documentation.title'),
+          description: intl.get('screen.loginPage.documentation.description'),
+          button: intl.get('screen.loginPage.documentation.button'),
+        }}
+        buttonProps={{
+          ghost: true,
+          target: '_blank',
+          href: EnvVariables.configFor('CQDG_DOCUMENTATION'),
+        }}
       />
       <BannerItem
         IconComponent={CloudDatabaseIcon}
-        title={intl.get('screen.loginPage.hosting.title')}
-        description={intl.get('screen.loginPage.hosting.description')}
-        buttonText={intl.get('screen.loginPage.hosting.button')}
-        buttonUrl="https://docs.cqdg.ca/docs/comment-soumettre-vos-donn%C3%A9es"
+        dictionary={{
+          title: intl.get('screen.loginPage.hosting.title'),
+          description: intl.get('screen.loginPage.hosting.description'),
+          button: intl.get('screen.loginPage.hosting.button'),
+        }}
+        buttonProps={{
+          ghost: true,
+          target: '_blank',
+          href: `${EnvVariables.configFor(
+            'CQDG_DOCUMENTATION',
+          )}/docs/comment-soumettre-vos-donn%C3%A9es`,
+        }}
       />
     </div>
   </div>

src/views/Login/Cards/SecureData/index.tsx

@@ -14,12 +14,7 @@ const SecureData = () => (
     <div className={styles.title}>{intl.get('screen.loginPage.cards.secureData.title')}</div>
     <div className={styles.text}>{intl.get('screen.loginPage.cards.secureData.description')}</div>
     <div>
-      <Button
-        type="default"
-        size="large"
-        href={`mailto:${SUPPORT_EMAIL}`}
-        className={styles.contactButton}
-      >
+      <Button type="default" size="large" href={`mailto:${SUPPORT_EMAIL}`}>
         {intl.get('screen.loginPage.cards.secureData.contact')}
         <MailOutlined />
       </Button>

src/views/Login/Cards/Stats/index.tsx

@@ -6,14 +6,13 @@ import FileIcon from '@ferlab/ui/core/components/Icons/Futuro/FileIcon';
 import GeneIcon from '@ferlab/ui/core/components/Icons/Futuro/GeneIcon';
 import ParticipantIcon from '@ferlab/ui/core/components/Icons/Futuro/ParticipantIcon';
 import StudyIcon from '@ferlab/ui/core/components/Icons/Futuro/StudyIcon';
+import TextIcon from '@ferlab/ui/core/pages/LandingPage/TextIcon';
 import { numberFormat } from '@ferlab/ui/core/utils/numberUtils';
 import GridCard from '@ferlab/ui/core/view/v2/GridCard/index';
 import { Typography } from 'antd';
 
 import { useGlobals } from 'store/global';
 
-import TextIcon from '../../TextIcon';
-
 import styles from './index.module.scss';
 
 const { Title } = Typography;
@@ -40,37 +39,37 @@ const Stats = () => {
             color="dark"
             IconComponent={StudyIcon}
             title={numberFormat(studies)}
-            subTitle={intl.get('entities.study.studies')}
+            subtitle={intl.get('entities.study.studies')}
           />
           <TextIcon
             color="dark"
             IconComponent={ParticipantIcon}
             title={numberFormat(participants)}
-            subTitle={intl.get('entities.participant.participants')}
+            subtitle={intl.get('entities.participant.participants')}
           />
           <TextIcon
             color="dark"
             IconComponent={BiospecimenIcon}
             title={numberFormat(samples)}
-            subTitle={intl.get('entities.biospecimen.biospecimens')}
+            subtitle={intl.get('entities.biospecimen.biospecimens')}
           />
           <TextIcon
             color="dark"
             IconComponent={FileIcon}
             title={fileSize}
-            subTitle={intl.get('entities.file.files')}
+            subtitle={intl.get('entities.file.files')}
           />
           <TextIcon
             color="dark"
             IconComponent={GeneIcon}
             title={numberFormat(genomes)}
-            subTitle={intl.get('screen.loginPage.cards.stats.genomes')}
+            subtitle={intl.get('screen.loginPage.cards.stats.genomes')}
           />
           <TextIcon
             color="dark"
             IconComponent={ExomesIcon}
             title={numberFormat(exomes)}
-            subTitle={intl.get('screen.loginPage.cards.stats.exomes')}
+            subtitle={intl.get('screen.loginPage.cards.stats.exomes')}
           />
         </div>
       }