diff --git a/packages/integration/src/components/Homepage.tsx b/packages/integration/src/components/Homepage.tsx index 9e1ad62..f960eed 100644 --- a/packages/integration/src/components/Homepage.tsx +++ b/packages/integration/src/components/Homepage.tsx @@ -64,6 +64,13 @@ export type Props = { */ footerOptions?: Omit + /** + * Contenu de la page d'accueil affiché dans la partie gauche de la page, + * en dessous de la tagline. + * + */ + description?: ReactNode + /** * Contenu de la page d'accueil affiché dans la partie droite de la page. * @@ -82,12 +89,15 @@ export const Homepage = ({ homepageUrl, headerOptions, footerOptions, + description, children, }: Props) => { return (
- {children} + + {children} +
) diff --git a/packages/integration/src/components/HomepageContent.tsx b/packages/integration/src/components/HomepageContent.tsx index 6169cf1..8339917 100644 --- a/packages/integration/src/components/HomepageContent.tsx +++ b/packages/integration/src/components/HomepageContent.tsx @@ -19,6 +19,13 @@ export type Props = { */ children: ReactNode + /** + * Contenu de la page d'accueil affiché dans la partie gauche de la page, + * en dessous de la tagline. + * + */ + description?: ReactNode + /** * Identifiant du service sur l'API de la suite-integration. * @@ -32,7 +39,13 @@ export type Props = { lasuiteApiUrl?: string } -export const HomepageContent = ({ tagline, lasuiteApiUrl, serviceId, children }: Props) => { +export const HomepageContent = ({ + tagline, + lasuiteApiUrl, + serviceId, + description, + children, +}: Props) => { const parsedTagline = typeof tagline === "string" ? ( <> @@ -73,6 +86,9 @@ export const HomepageContent = ({ tagline, lasuiteApiUrl, serviceId, children }:

{parsedTagline}

+ {!!description ? ( +
{description}
+ ) : null}
diff --git a/packages/integration/src/dev/dev.tsx b/packages/integration/src/dev/dev.tsx index aa178c1..2783e9f 100644 --- a/packages/integration/src/dev/dev.tsx +++ b/packages/integration/src/dev/dev.tsx @@ -18,9 +18,11 @@ import { DarkTheme } from "./DarkTheme" const serviceHomepage = ({ id, content, + description = null, styles = "standalone", }: { content?: ReactNode + description?: ReactNode id: string styles: "standalone" | "full" }) => { @@ -46,6 +48,7 @@ const serviceHomepage = ({ serviceId={id} logo={`/logos/${id}.svg`} homepageUrl="/" + description={description} footerOptions={{ description: "Un service de la Direction interministérielle du numérique", sitemapUrl: "/sitemap", @@ -90,6 +93,17 @@ const routes = [

), + description: ( +

+ + Qu'est-ce que France Transfert ? + +     + + Comment utiliser France Transfert ? + +

+ ), styles: "standalone", }), serviceHomepage({ diff --git a/packages/integration/src/html.tsx b/packages/integration/src/html.tsx index 09f6be2..18fb587 100644 --- a/packages/integration/src/html.tsx +++ b/packages/integration/src/html.tsx @@ -10,7 +10,7 @@ import { Header } from "./components/Header" import { Gaufre } from "./components/Gaufre" const customContent = ( -
+

~~replace~~

Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis beatae, quia eius diff --git a/packages/integration/src/styles/homepage.css b/packages/integration/src/styles/homepage.css index b4b0c16..8b74416 100644 --- a/packages/integration/src/styles/homepage.css +++ b/packages/integration/src/styles/homepage.css @@ -122,7 +122,8 @@ margin-bottom: 2rem; } -.lasuite-homepage__tagline-container { +.lasuite-homepage__tagline-container, +.lasuite-homepage__desc-container { background-color: white; color: var(--lasuite-primary); padding: 1rem 1.5rem; @@ -148,14 +149,24 @@ display: none; } +.lasuite-homepage__desc-container { + margin-top: 1rem; +} + +.lasuite-homepage__desc-container > p:only-child { + margin-bottom: 0; +} + @media screen and (min-width: 36em) { + .lasuite-homepage__desc-container, .lasuite-homepage__tagline-container { width: fit-content; } } @media screen and (min-width: 48em) { - .lasuite-homepage__tagline-container { + .lasuite-homepage__tagline-container, + .lasuite-homepage__desc-container { padding: 1rem 2rem; padding-left: 4rem; margin-top: 2rem; @@ -171,7 +182,8 @@ } @media screen and (min-width: 90em) { - .lasuite-homepage__tagline-container { + .lasuite-homepage__tagline-container, + .lasuite-homepage__desc-container { padding-left: 8rem; } }