feat(Home): add list of datasets

merged-coverage/lcov.info

@@ -7,7 +7,7 @@ DA:5,108
 BRDA:1,0,0,108
 BRDA:1,0,1,108
 end_of_record
-SF:src/sections/hello-dataverse/HelloDataverse.tsx
+SF:src/sections/hello-dataverse/Home.tsx
 DA:5,76
 DA:6,76
 DA:8,38

public/locales/en/home.json

@@ -0,0 +1,3 @@
+{
+  "title": "Hello Dataverse"
+}

src/Router.tsx

@@ -1,5 +1,5 @@
 import { createBrowserRouter, RouterProvider } from 'react-router-dom'
-import { HelloDataverse } from './sections/hello-dataverse/HelloDataverse'
+import { Home } from './sections/home/Home'
 import { Layout } from './sections/layout/Layout'
 import { Route } from './sections/Route.enum'
 import { DatasetFactory } from './sections/dataset/DatasetFactory'
@@ -12,7 +12,7 @@ const router = createBrowserRouter(
       children: [
         {
           path: Route.HOME,
-          element: <HelloDataverse />
+          element: <Home />
         },
         {
           path: `${Route.DATASETS}`,

src/sections/home/Home.module.scss

@@ -0,0 +1,17 @@
+@import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module";
+@import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/typography.module";
+@import "src/sections/assets/variables";
+
+.container {
+    padding:15px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+
+.title {
+  color: $dv-brand-color;
+}
+
+.results {
+  font-weight: $dv-font-weight-bold;
+}

src/sections/home/Home.tsx

@@ -0,0 +1,29 @@
+import styles from './Home.module.scss'
+import { Row } from '@iqss/dataverse-design-system'
+import { useTranslation } from 'react-i18next'
+
+export function Home() {
+  const { t } = useTranslation('home')
+
+  return (
+    <Row>
+      <header>
+        <h1 className={styles.title}>{t('title')}</h1>
+      </header>
+      <section className={styles.container}>
+        <div className={styles.results}>
+          <p>1 to 10 of 41 Results</p>
+        </div>
+        <article>
+          <a href="/datasets?persistentId=1">Dataset 1</a>
+        </article>
+        <article>
+          <a href="/datasets?persistentId=2">Dataset 2</a>
+        </article>
+        <article>
+          <a href="/datasets?persistentId=3">Dataset 3</a>
+        </article>
+      </section>
+    </Row>
+  )
+}

src/stories/home/Home.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Home } from '../../sections/home/Home'
+import { WithI18next } from '../WithI18next'
+import { WithLayout } from '../WithLayout'
+
+const meta: Meta<typeof Home> = {
+  title: 'Pages/Home',
+  component: Home,
+  decorators: [WithI18next, WithLayout]
+}
+
+export default meta
+type Story = StoryObj<typeof Home>
+
+export const Default: Story = {
+  render: () => <Home />
+}

tests/component/sections/home/Home.spec.tsx

@@ -0,0 +1,8 @@
+import { Home } from '../../../../src/sections/home/Home'
+
+describe('Home page', () => {
+  it('renders hello dataverse title', () => {
+    cy.customMount(<Home />)
+    cy.findByRole('heading').should('contain.text', 'Hello Dataverse')
+  })
+})

tests/e2e-integration/e2e/sections/hello-dataverse/HelloDataverse.spec.ts → tests/e2e-integration/e2e/sections/home/Home.spec.ts

@@ -1,4 +1,4 @@
-describe('Hello Dataverse', () => {
+describe('Home Page', () => {
   it('successfully loads', () => {
     cy.visit('/spa')
     cy.findAllByText(/Hello Dataverse/i).should('exist')