(PC-38171)[PRO] chore: Replace Callout with Banner.

pro/src/components/BannerPublicApi/BannerPublicApi.tsx

@@ -1,7 +1,7 @@
 import type React from 'react'
 
+import { Banner } from '@/design-system/Banner/Banner'
 import logoPassCultureIcon from '@/icons/logo-pass-culture.svg'
-import { Callout } from '@/ui-kit/Callout/Callout'
 import { SvgIcon } from '@/ui-kit/SvgIcon/SvgIcon'
 
 import styles from './BannerPublicApi.module.scss'
@@ -15,15 +15,20 @@ export const BannerPublicApi = ({
   children,
   className,
 }: Props): JSX.Element => (
-  <Callout className={className}>
-    <div className={styles['banner-container']}>
-      <SvgIcon
-        src={logoPassCultureIcon}
-        alt=""
-        className={styles['banner-logo']}
-        viewBox="0 0 71 24"
-      />
-      {children}
-    </div>
-  </Callout>
+  <div className={className}>
+    <Banner
+      title=""
+      description={
+        <div className={styles['banner-container']}>
+          <SvgIcon
+            src={logoPassCultureIcon}
+            alt=""
+            className={styles['banner-logo']}
+            viewBox="0 0 71 24"
+          />
+          {children}
+        </div>
+      }
+    />
+  </div>
 )

pro/src/components/BannerRGS/BannerRGS.tsx

@@ -1,4 +1,5 @@
-import { Callout } from '@/ui-kit/Callout/Callout'
+import { Banner } from '@/design-system/Banner/Banner'
+import fullLinkIcon from '@/icons/full-link.svg'
 
 interface Props {
   closable?: boolean
@@ -11,21 +12,24 @@ export const BannerRGS: React.FC<Props> = ({
   onClose,
   className,
 }: Props) => (
-  <Callout
-    closable={closable}
-    onClose={onClose}
-    links={[
-      {
-        href: 'https://aide.passculture.app/hc/fr/articles/4458607720732--Acteurs-Culturels-Comment-assurer-la-s%C3%A9curit%C3%A9-de-votre-compte-',
-        label: 'Consulter nos recommandations de sécurité',
-        isExternal: true,
-      },
-    ]}
-    title="Soyez vigilant !"
-    className={className}
-  >
-    Vos identifiants de connexion sont personnels et ne doivent pas être
+  <div className={className}>
+    <Banner
+      closable={closable}
+      onClose={onClose}
+      actions={[
+        {
+          href: 'https://aide.passculture.app/hc/fr/articles/4458607720732--Acteurs-Culturels-Comment-assurer-la-s%C3%A9curit%C3%A9-de-votre-compte-',
+          label: 'Consulter nos recommandations de sécurité',
+          isExternal: true,
+          type: 'link',
+          icon: fullLinkIcon,
+          iconAlt: 'Nouvelle fenêtre',
+        },
+      ]}
+      title="Soyez vigilant !"
+      description="Vos identifiants de connexion sont personnels et ne doivent pas être
     partagés. Pour assurer la protection de votre compte, découvrez nos
-    recommandations.
-  </Callout>
+    recommandations."
+    />
+  </div>
 )

pro/src/components/CollectiveOffer/ShareTemplateOfferLink/ShareTemplateOfferLink.tsx

@@ -1,8 +1,7 @@
 import { useMemo } from 'react'
 
 import { ADAGE_URL } from '@/commons/utils/config'
-import { Callout } from '@/ui-kit/Callout/Callout'
-import { CalloutVariant } from '@/ui-kit/Callout/types'
+import { Banner, BannerVariants } from '@/design-system/Banner/Banner'
 import { ShareLink } from '@/ui-kit/ShareLink/ShareLink'
 
 import styles from './ShareTemplateOfferLink.module.scss'
@@ -30,15 +29,12 @@ export const ShareTemplateOfferLink = ({
         offerId={offerId}
       />
       <div className={styles['callout-container']}>
-        <Callout
+        <Banner
           title="Connexion à ADAGE obligatoire"
-          variant={CalloutVariant.INFO}
-        >
-          <div className={styles['callout-content']}>
-            Veillez à préciser aux enseignants de se connecter à ADAGE avant
-            d’ouvrir ce lien de partage sans quoi ils n’y auront pas accès.
-          </div>
-        </Callout>
+          variant={BannerVariants.DEFAULT}
+          description="Veillez à préciser aux enseignants de se connecter à ADAGE avant
+            d’ouvrir ce lien de partage sans quoi ils n’y auront pas accès."
+        />
       </div>
     </div>
   )

pro/src/components/CollectiveOffersTable/CollectiveOffersDownloadDrawer/CollectiveOffersDownloadDrawer.tsx

@@ -5,10 +5,9 @@ import type { CollectiveSearchFiltersParams } from '@/commons/core/Offers/types'
 import { GET_DATA_ERROR_MESSAGE } from '@/commons/core/shared/constants'
 import { useNotification } from '@/commons/hooks/useNotification'
 import { downloadBookableOffersFile } from '@/components/CollectiveOffersTable/utils/downloadBookableOffersFile'
+import { Banner } from '@/design-system/Banner/Banner'
 import { Button } from '@/ui-kit/Button/Button'
 import { ButtonVariant } from '@/ui-kit/Button/types'
-import { Callout } from '@/ui-kit/Callout/Callout'
-import { CalloutVariant } from '@/ui-kit/Callout/types'
 import { DialogBuilder } from '@/ui-kit/DialogBuilder/DialogBuilder'
 
 import styles from './CollectiveOffersDownloadDrawer.module.scss'
@@ -53,10 +52,13 @@ export const CollectiveOffersDownloadDrawer = ({
         </Button>
       }
     >
-      <Callout variant={CalloutVariant.INFO} className={styles['callout']}>
-        Appliquez des filtres à votre tableau pour sélectionner les offres que
-        vous souhaitez télécharger.
-      </Callout>
+      <div className={styles['callout']}>
+        <Banner
+          title=""
+          description="Appliquez des filtres à votre tableau pour sélectionner les offres que
+          vous souhaitez télécharger."
+        />
+      </div>
       <DialogBuilder.Footer>
         <div className={styles['actions']}>
           <Dialog.Close asChild>

pro/src/components/FormLayout/FormLayoutDescription.tsx

@@ -1,43 +1,17 @@
-import cn from 'classnames'
-
-import { Callout } from '@/ui-kit/Callout/Callout'
-import type { Link } from '@/ui-kit/LinkNodes/LinkNodes'
-
 import style from './FormLayout.module.scss'
 
 export interface FormLayoutDescriptionProps {
   description?: string | JSX.Element
-  isBanner?: boolean
-  links?: Link[]
-  className?: string
 }
 
 export const FormLayoutDescription = ({
   description,
-  isBanner = false,
-  links,
-  className,
 }: FormLayoutDescriptionProps): JSX.Element => (
   <>
-    {description && !isBanner && (
+    {description && (
       <p className={style['form-layout-section-description-content']}>
         {description}
       </p>
     )}
-    {description && isBanner && (
-      <div
-        className={cn(
-          style['form-layout-section-description-container'],
-          className
-        )}
-      >
-        <Callout
-          className={style['form-layout-section-description-content']}
-          links={links}
-        >
-          {description}
-        </Callout>
-      </div>
-    )}
   </>
 )

pro/src/components/FormLayout/__specs__/FormLayoutDescription.spec.tsx

@@ -7,16 +7,8 @@ import {
 
 const renderFormLayoutDescription = ({
   description,
-  isBanner,
-  links,
 }: FormLayoutDescriptionProps) => {
-  render(
-    <FormLayoutDescription
-      description={description}
-      links={links}
-      isBanner={isBanner}
-    />
-  )
+  render(<FormLayoutDescription description={description} />)
 }
 
 describe('Description', () => {
@@ -33,12 +25,6 @@ describe('Description', () => {
     expect(screen.getByText('This is a description')).toBeInTheDocument()
   })
 
-  it('should render the description as a banner', () => {
-    descriptionProps.isBanner = true
-    renderFormLayoutDescription(descriptionProps)
-    expect(screen.getByText('This is a description')).toBeInTheDocument()
-  })
-
   it('should not render component', () => {
     descriptionProps.description = undefined
     renderFormLayoutDescription(descriptionProps)

pro/src/components/IndividualOfferLayout/IndividualOfferLayout.tsx

@@ -12,12 +12,11 @@ import { useActiveFeature } from '@/commons/hooks/useActiveFeature'
 import { useNotification } from '@/commons/hooks/useNotification'
 import { useOfferWizardMode } from '@/commons/hooks/useOfferWizardMode'
 import { SynchronizedProviderInformation } from '@/components/SynchronisedProviderInformation/SynchronizedProviderInformation'
+import { Banner, BannerVariants } from '@/design-system/Banner/Banner'
 import { Tag, TagVariant } from '@/design-system/Tag/Tag'
 import fullTrashIcon from '@/icons/full-trash.svg'
 import { Button } from '@/ui-kit/Button/Button'
 import { ButtonVariant } from '@/ui-kit/Button/types'
-import { Callout } from '@/ui-kit/Callout/Callout'
-import { CalloutVariant } from '@/ui-kit/Callout/types'
 
 import { IndividualOfferNavigation } from './components/IndividualOfferNavigation/IndividualOfferNavigation'
 import { OfferHighlightBanner } from './components/OfferHighlightBanner/OfferHighlightBanner'
@@ -115,23 +114,27 @@ export const IndividualOfferLayout = ({
       {offer && <OfferStatusBanner status={offer.status} />}
 
       {hasPublishedOfferWithSameEan && (
-        <Callout
-          variant={CalloutVariant.ERROR}
-          title="Votre brouillon d’offre est obsolète car vous avez déjà publié une offre avec cet EAN"
-          className={styles['ean-already-exists-callout']}
-        >
-          <p className={styles['ean-already-exists-callout-description']}>
-            Vous ne pouvez pas publier 2 offres avec un EAN similaire.
-          </p>
-          <Button
-            onClick={onDeleteOfferWithAlreadyExistingEan}
-            variant={ButtonVariant.TERNARY}
-            icon={fullTrashIcon}
-            className={styles['ean-already-exists-callout-button']}
-          >
-            Supprimer ce brouillon
-          </Button>
-        </Callout>
+        <div className={styles['ean-already-exists-callout']}>
+          <Banner
+            variant={BannerVariants.ERROR}
+            title="Votre brouillon d’offre est obsolète car vous avez déjà publié une offre avec cet EAN"
+            description={
+              <>
+                <p className={styles['ean-already-exists-callout-description']}>
+                  Vous ne pouvez pas publier 2 offres avec un EAN similaire.
+                </p>
+                <Button
+                  onClick={onDeleteOfferWithAlreadyExistingEan}
+                  variant={ButtonVariant.TERNARY}
+                  icon={fullTrashIcon}
+                  className={styles['ean-already-exists-callout-button']}
+                >
+                  Supprimer ce brouillon
+                </Button>
+              </>
+            }
+          />
+        </div>
       )}
 
       {shouldDisplayHighlightsBanner && (

pro/src/components/IndividualOfferLayout/components/OfferHighlightForm/OfferHighlightForm.tsx

@@ -13,11 +13,10 @@ import {
 import { HighlightEvents } from '@/commons/core/FirebaseEvents/constants'
 import { useNotification } from '@/commons/hooks/useNotification'
 import { HighlightDatespanTag } from '@/components/HighlightDatespanTag/HighlightDatespanTag'
+import { Banner, BannerVariants } from '@/design-system/Banner/Banner'
 import { CheckboxGroup } from '@/design-system/CheckboxGroup/CheckboxGroup'
 import { Button } from '@/ui-kit/Button/Button'
 import { ButtonVariant } from '@/ui-kit/Button/types'
-import { Callout } from '@/ui-kit/Callout/Callout'
-import { CalloutVariant } from '@/ui-kit/Callout/types'
 import { DialogBuilder } from '@/ui-kit/DialogBuilder/DialogBuilder'
 import { Spinner } from '@/ui-kit/Spinner/Spinner'
 
@@ -99,23 +98,25 @@ export function OfferHighlightForm({
         noValidate
       >
         <div className={styles['form-content']}>
-          <Callout
-            variant={CalloutVariant.INFO}
+          <Banner
+            variant={BannerVariants.DEFAULT}
             title="Pré-requis pour être sélectionnée par notre équipe éditoriale :"
-          >
-            <div className={styles['form-info-callout']}>
-              <ul className={styles['form-info-callout-list']}>
-                <li>- L’offre est liée à la thématique choisie</li>
-                <li>- L’offre se déroule pendant le temps fort</li>
-                <li>- L’offre est au statut publiée</li>
-                <li>- L’offre a une image</li>
-              </ul>
-              <p>
-                Un email de validation vous sera envoyé au moment de la
-                valorisation sur l’application.
-              </p>
-            </div>
-          </Callout>
+            description={
+              <div className={styles['form-info-callout']}>
+                <ul className={styles['form-info-callout-list']}>
+                  <li>- L’offre est liée à la thématique choisie</li>
+                  <li>- L’offre se déroule pendant le temps fort</li>
+                  <li>- L’offre est au statut publiée</li>
+                  <li>- L’offre a une image</li>
+                </ul>
+                <p>
+                  Un email de validation vous sera envoyé au moment de la
+                  valorisation sur l’application.
+                </p>
+              </div>
+            }
+          />
+
           <CheckboxGroup
             label="Les prochains temps forts :"
             variant="detailed"