integration: new description prop to easily add content under tagline

packages/integration/src/components/Homepage.tsx

@@ -64,6 +64,13 @@ export type Props = {
    */
   footerOptions?: Omit<FooterProps, "entity" | "serviceName" | "homepageUrl">
 
+  /**
+   * 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 (
     <div className="lasuite lasuite-homepage">
       <Header {...{ entity, serviceName, logo, homepageUrl, ...headerOptions }} />
-      <HomepageContent {...{ serviceId, tagline, lasuiteApiUrl }}>{children}</HomepageContent>
+      <HomepageContent {...{ serviceName, serviceId, tagline, description, lasuiteApiUrl }}>
+        {children}
+      </HomepageContent>
       <Footer {...{ entity, serviceName, homepageUrl, ...footerOptions }} />
     </div>
   )

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 }:
                 <div className="lasuite-homepage__tagline-container">
                   <h1 className="lasuite-homepage__tagline">{parsedTagline}</h1>
                 </div>
+                {!!description ? (
+                  <div className="lasuite-homepage__desc-container">{description}</div>
+                ) : null}
               </div>
               <div className="lasuite-homepage__secondary-col">
                 <div className="lasuite-homepage__form-container">

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 = [
         </p>
       </div>
     ),
+    description: (
+      <p className="fr-mt-1w">
+        <a href="#" className="fr-btn fr-btn--secondary fr-mb-1w fr-mr-1w">
+          Qu'est-ce que France Transfert ?
+        </a>
+        &nbsp; &nbsp;
+        <a href="#" className="fr-btn fr-btn--secondary">
+          Comment utiliser France Transfert ?
+        </a>
+      </p>
+    ),
     styles: "standalone",
   }),
   serviceHomepage({

packages/integration/src/html.tsx

@@ -10,7 +10,7 @@ import { Header } from "./components/Header"
 import { Gaufre } from "./components/Gaufre"
 
 const customContent = (
-  <div className="fr-p-4w">
+  <div>
     <h2>~~replace~~</h2>
     <p>
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis beatae, quia eius

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;
   }
 }