Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Ajoute la date de mise à jour aux carte d'actu #3509

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

feat: Ajoute la date de mise à jour aux carte d'actu #3509

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c6a77eb
wip: Transmet la date de mise à jour des actus jusqu'au front
Mintoo200 Dec 5, 2024
7c75e75
wip: Déserialise la date de mise à jour dans le front
Mintoo200 Dec 11, 2024
f3b247e
feat: Ajoute la date sur les cards d'actualité
Mintoo200 Dec 17, 2024
2298565
refactor: Extrait la date dans un composant
Mintoo200 Dec 17, 2024
26d6002
wip: Ajoute du padding quand pas de date
Mintoo200 Dec 17, 2024
cd33da1
wip: Ajoute la desérialisation des actus sur les pages
Mintoo200 Dec 17, 2024
6f94795
refactor: Utilise le lien pour définir le type de redirection
Mintoo200 Dec 17, 2024
55bacc6
refactor: Review
Mintoo200 Dec 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 7 additions & 5 deletions src/client/components/features/Actualites/ActualiteCard.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
}
.card .content {
@include utilities.text-medium;
// FIXME (GAFI 11-12-2024): Idéalement .content est sur <p> plutôt que parent du titre
& p {
@include utilities.line-clamp(3, 1.2);
}
Expand Down Expand Up @@ -33,16 +32,19 @@
object-fit: cover;
}

.content {
padding-block: 1.25rem;
& .content {
padding-bottom: 1.25rem;
padding-top: .5rem;
padding-inline: 1.5rem;
display: flex;
gap: .5rem;
flex: 1;
flex-direction: column;
}

.title {
margin-bottom: 0.5rem;
& time {
align-self: flex-end;
@include utilities.text-small;
}

& a {
Expand Down
15 changes: 14 additions & 1 deletion src/client/components/features/Actualites/ActualiteCard.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import { Meta, StoryObj } from '@storybook/react';
import React from 'react';

import { anActualite } from '../../../../server/actualites/domain/actualite.fixture';
import { DependenciesProvider } from '~/client/context/dependenciesContainer.context';
import { JsDateService } from '~/client/services/date/js/js.date.service';
import { anActualite } from '~/server/actualites/domain/actualite.fixture';

import ActualiteCard from './ActualiteCard';

const meta: Meta<typeof ActualiteCard> = {
Expand All @@ -14,6 +17,11 @@ const meta: Meta<typeof ActualiteCard> = {
actualite: anActualite(),
},
component: ActualiteCard,
render: (args) => (
<DependenciesProvider dateService={new JsDateService()}>
<ActualiteCard {...args} />
</DependenciesProvider>
),
title: 'Components/Cards/ActualiteCard',
};

Expand All @@ -34,3 +42,8 @@ export const ContenuCourt: Story = {
}),
},
};
export const avecDateMiseAJour: Story = {
args: {
actualite: anActualite({ dateMiseAJour: new Date('2024-01-01') }),
},
};
42 changes: 24 additions & 18 deletions src/client/components/features/Actualites/ActualiteCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import React from 'react';

import { Card } from '~/client/components/ui/Card/Card';
import { Link } from '~/client/components/ui/Link/Link';
import { useDependency } from '~/client/context/dependenciesContainer.context';
import { DateService } from '~/client/services/date/date.service';
import { Actualite } from '~/server/actualites/domain/actualite';
import { getExtraitContenu } from '~/server/cms/infra/repositories/strapi.utils';

Expand All @@ -16,30 +18,34 @@ type ActualiteCardProps = Omit<React.ComponentPropsWithRef<typeof Card>, 'layout
};

export default function ActualiteCard({ actualite, headingLevel = 'h2', className, ...rest }: ActualiteCardProps) {
const dateService = useDependency<DateService>('dateService');

// FIXME (GAFI 14-11-2024): Passer plutôt par actualite.lien, actualite.article n'est pas utilisé dans le composant
// ou bien utiliser actualite.article.slug dans le composant
const isExternalLink = actualite.article == null;

const extrait = getExtraitContenu(actualite.contenu);

return (
<Card className={classNames(styles.card, className)} layout='vertical' {...rest}>
{actualite.bannière && (
<Card.Image
src={actualite.bannière.src}
alt={actualite.bannière.alt}
className={styles.imgWrapper}
width={320}
height={180} />
)}
<Card.Content className={styles.content}>
<Card.Title className={styles.title} titleAs={headingLevel}>{actualite.titre}</Card.Title>
<p>{extrait}</p>
<Link appearance={'asQuaternaryButton'} href={actualite.link}>
{isExternalLink ? 'En savoir plus' : "Lire l'article"}
<Link.Icon />
</Link>
</Card.Content>
</Card>
<article>
<Card className={classNames(styles.card, className)} layout="vertical" {...rest}>
{actualite.bannière && (
<Card.Image
src={actualite.bannière.src}
alt={actualite.bannière.alt}
width={320}
height={180} />
)}
<Card.Content className={styles.content}>
{actualite.dateMiseAJour && <time dateTime={actualite.dateMiseAJour.toISOString()}>{dateService.formatToHumanReadableDate(actualite.dateMiseAJour)}</time>}
Mintoo200 marked this conversation as resolved.
Show resolved Hide resolved
<Card.Title className={styles.title} titleAs={headingLevel}>{actualite.titre}</Card.Title>
<p>{extrait}</p>
<Link appearance={'asQuaternaryButton'} href={actualite.link}>
{isExternalLink ? 'En savoir plus' : 'Lire l\'article'}
<Link.Icon />
</Link>
</Card.Content>
</Card>
</article>
);
}