@crtobiasdelsud/portal-ui 1.0.21 → 1.0.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crtobiasdelsud/portal-ui",
-  "version": "1.0.21",
+  "version": "1.0.23",
   "description": "Componentes compartidos entre el portal (Next) y el CMS (Vite) — widgets, views, providers para adapters y article pool.",
   "type": "module",
   "main": "./src/index.js",

package/src/components/ArticleHero/ArticleHero.jsx

@@ -5,19 +5,14 @@ import { useTheme } from '../../context/SiteConfigContext.jsx'
 import AspectImage from '../../components/UI/AspectImage/AspectImage.jsx'
 import Carousel from '../Carousel/Carousel.jsx'
 import V0 from './variants/V0/V0'
-import V1 from './variants/V1/V1'
-import V2 from './variants/V2/V2'
-import V3 from './variants/V3/V3'
-import V4 from './variants/V4/V4'
-import V5 from './variants/V5/V5'
 import V0Tablet from './variants/V0Tablet/V0Tablet'
 import V0Desktop from './variants/V0Desktop/V0Desktop'
 
-const VARIANTS = { '0': V0, '1': V1, '2': V2, '3': V3, '4': V4, '5': V5 }
+const VARIANTS = { '0': V0 }
 
 export default function ArticleHero({ titulo, volanta, copete, imagen, imagenes, imagenEpigrafe, focalPoint, isAmp = false, extras = null, hideImageOnDesktop = false }) {
   const theme   = useTheme()
-  const variant = String(theme.articleHero ?? 1)
+  const variant = String(theme.articleHero ?? 0)
 
   const inlineStyle = isAmp ? {} : {
     fontFamily:          theme.fontFamily,
@@ -80,7 +75,7 @@ export default function ArticleHero({ titulo, volanta, copete, imagen, imagenes,
   const imgOnlyClass = (!isAmp && hideImageOnDesktop) ? styles.imgHiddenDesktop : undefined
   const noImgMod     = (!isAmp && hideImageOnDesktop) ? ` ${styles.noImgDesktop}` : ''
 
-  const MobileVariant = VARIANTS[variant] ?? V1
+  const MobileVariant = VARIANTS[variant] ?? V0
 
   const sharedProps = {
     isAmp,

package/src/components/ArticleHero/variants/V0/V0.jsx

@@ -7,7 +7,10 @@ export default function V0({ isAmp, inlineStyle, titulo, volanta, copete, ImgEl,
     : null
   const TituloEl = <h1 className={isAmp ? 'article-hero__titulo' : `${shared.titulo} ${s.titulo}`}>{titulo}</h1>
   const CopeteEl = copete
-    ? <p className={isAmp ? 'article-hero__copete' : `${shared.copete} ${s.copete}`}>{copete}</p>
+    ? <p
+        className={isAmp ? 'article-hero__copete' : `${shared.copete} ${s.copete}`}
+        dangerouslySetInnerHTML={{ __html: copete }}
+      />
     : null
 
   return (

package/src/components/ArticleHero/variants/V0Desktop/V0Desktop.jsx

@@ -7,7 +7,10 @@ export default function V0Desktop({ isAmp, inlineStyle, titulo, volanta, copete,
     : null
   const TituloEl = <h1 className={isAmp ? 'article-hero__titulo' : `${shared.titulo} ${s.titulo}`}>{titulo}</h1>
   const CopeteEl = copete
-    ? <p className={isAmp ? 'article-hero__copete' : `${shared.copete} ${s.copete}`}>{copete}</p>
+    ? <p
+        className={isAmp ? 'article-hero__copete' : `${shared.copete} ${s.copete}`}
+        dangerouslySetInnerHTML={{ __html: copete }}
+      />
     : null
 
   return (

package/src/components/ArticleHero/variants/V1/V1.jsx

@@ -7,7 +7,10 @@ export default function V1({ isAmp, inlineStyle, titulo, volanta, copete, ImgEl,
     : null
   const TituloEl = <h1 className={isAmp ? 'article-hero__titulo' : `${shared.titulo} ${s.titulo}`}>{titulo}</h1>
   const CopeteEl = copete
-    ? <p className={isAmp ? 'article-hero__copete' : `${shared.copete} ${s.copete}`}>{copete}</p>
+    ? <p
+        className={isAmp ? 'article-hero__copete' : `${shared.copete} ${s.copete}`}
+        dangerouslySetInnerHTML={{ __html: copete }}
+      />
     : null
 
   return (

package/src/components/ArticleHero/variants/V2/V2.jsx

@@ -1,14 +1,11 @@
 import shared from '../../ArticleHero.module.scss'
 import s from './V2.module.scss'
 
-export default function V2({ isAmp, inlineStyle, titulo, volanta, copete, ImgEl, ExtrasEl, imgWrapClass, noImgMod }) {
+export default function V2({ isAmp, inlineStyle, titulo, volanta, ImgEl, ExtrasEl, imgWrapClass, noImgMod }) {
   const VolantaEl = volanta
     ? <span className={isAmp ? 'article-hero__volanta' : `${shared.volanta} ${s.volanta}`}>{volanta}</span>
     : null
   const TituloEl = <h1 className={isAmp ? 'article-hero__titulo' : `${shared.titulo} ${s.titulo}`}>{titulo}</h1>
-  const CopeteEl = copete
-    ? <p className={isAmp ? 'article-hero__copete' : `${shared.copete} ${s.copete}`}>{copete}</p>
-    : null
 
   return (
     <article
@@ -21,7 +18,6 @@ export default function V2({ isAmp, inlineStyle, titulo, volanta, copete, ImgEl,
       </div>
       <div className={isAmp ? 'article-hero__panel' : s.panel}>
         {TituloEl}
-        {CopeteEl}
       </div>
       {ExtrasEl}
     </article>

package/src/components/AuthorBlock/AuthorBlock.jsx

@@ -3,11 +3,8 @@
 import { useState, useEffect } from 'react'
 import { useTheme, useSiteConfig } from '../../context/SiteConfigContext.jsx'
 import V1 from './variants/V1/V1'
-import V2 from './variants/V2/V2'
-import V3 from './variants/V3/V3'
-import V4 from './variants/V4/V4'
 
-const VARIANTS = { '1': V1, '2': V2, '3': V3, '4': V4 }
+const VARIANTS = { '1': V1 }
 
 function formatDate(fechaPublicacion, useLongDate) {
   if (!fechaPublicacion) return null

package/src/components/Breadcrumb/Breadcrumb.jsx

@@ -2,12 +2,8 @@
 
 import { useTheme } from '../../context/SiteConfigContext.jsx'
 import V1 from './variants/V1/V1'
-import V2 from './variants/V2/V2'
-import V3 from './variants/V3/V3'
-import V4 from './variants/V4/V4'
-import V5 from './variants/V5/V5'
 
-const VARIANTS = { '1': V1, '2': V2, '3': V3, '4': V4, '5': V5 }
+const VARIANTS = { '1': V1 }
 
 export default function Breadcrumb({ items = [], isAmp = false }) {
   const theme = useTheme()

package/src/components/Cards/Bajada/Bajada.jsx

@@ -2,9 +2,8 @@
 
 import { useTheme } from "../../../context/SiteConfigContext.jsx"
 import V1 from './variants/V1/V1'
-import V2 from './variants/V2/V2'
 
-const VARIANTS = { '1': V1, '2': V2 }
+const VARIANTS = { '1': V1 }
 
 export default function Bajada({ settings = {}, isAmp = false }) {
   const theme = useTheme()

package/src/components/Cards/Bajada/variants/V1/V1.jsx

@@ -1,4 +1,5 @@
 import shared from '../../Bajada.module.scss'
+import { stripHtml } from '../../../../../utils/stripHtml'
 import s from './V1.module.scss'
 
 export default function V1({ isAmp, inlineStyle, volanta, title, copete, authorId, vDesktop }) {
@@ -13,7 +14,7 @@ export default function V1({ isAmp, inlineStyle, volanta, title, copete, authorI
         <span className={isAmp ? 'bajada__volanta' : shared.volanta}>{volanta}. </span>
         {title}
       </h2>
-      {copete && <p className={isAmp ? 'bajada__copete' : shared.copete}>{copete}</p>}
+      {copete && <p className={isAmp ? 'bajada__copete' : shared.copete}>{stripHtml(copete)}</p>}
       {authorId && <span className={isAmp ? 'bajada__autor' : shared.autor}>Por {authorId}</span>}
     </div>
   )

package/src/components/Cards/Bajada/variants/V2/V2.jsx

@@ -1,7 +1,7 @@
 import shared from '../../Bajada.module.scss'
 import s from './V2.module.scss'
 
-export default function V2({ isAmp, inlineStyle, volanta, title, copete, authorId, vDesktop }) {
+export default function V2({ isAmp, inlineStyle, volanta, title, authorId, vDesktop }) {
   const deskCls = shared[`vd${vDesktop}`] ?? ''
   const className = isAmp
     ? 'bajada__container'
@@ -13,7 +13,6 @@ export default function V2({ isAmp, inlineStyle, volanta, title, copete, authorI
         <span className={isAmp ? 'bajada__volanta' : shared.volanta}>{volanta}. </span>
         {title}
       </h2>
-      {copete && <p className={isAmp ? 'bajada__copete' : shared.copete}>{copete}</p>}
       {authorId && <span className={isAmp ? 'bajada__autor' : shared.autor}>Por {authorId}</span>}
     </div>
   )

package/src/components/DolarTickerOriginal/DolarTickerOriginal.module.scss

@@ -28,11 +28,8 @@ padding: 0 16px;
   width: 100%;
   box-sizing: border-box;
   margin: 20px 0 10px;
-  
+
   background-color: #f5f5f5;
-  
-  
-  
 }
 
 .mobile {

package/src/components/Feed/FeedView.jsx

@@ -2,9 +2,8 @@
 
 import { useTheme } from "../../context/SiteConfigContext.jsx"
 import V1 from './variants/V1/V1'
-import V2 from './variants/V2/V2'
 
-const VARIANTS = { '1': V1, '2': V2 }
+const VARIANTS = { '1': V1 }
 
 export default function FeedView({ articles = [] }) {
   const theme = useTheme()

package/src/components/Footers/FooterSimple/FooterSimple.module.scss

@@ -26,7 +26,7 @@
 
 .container {
   width: 100%;
-  padding: 20px 30px 20px 50px;
+  padding: 20px 30px;
   display: flex;
   flex-direction: column;
   gap: 16px;
@@ -35,6 +35,10 @@
   margin-top: auto;
   min-height: 268px;
   color: var(--text-color, #fff);
+
+  @media (min-width: $tablet) {
+    padding: 20px 50px;
+  }
 }
 
 // ── MAIN ROW (2 columns) ──────────────────────────────────────────────────────
@@ -58,9 +62,12 @@
   align-items: center;
   gap: 14px;
   flex-shrink: 0;
+  min-width: 0;
+  max-width: 100%;
 
   @media (min-width: $tablet) {
     align-items: flex-start;
+    max-width: 320px;
   }
 }
 
@@ -103,10 +110,13 @@
 .logoWrap {
   display: flex;
   justify-content: center;
+  max-width: 100%;
 }
 
 .logoImg {
   height: 53px;
+  width: auto;
+  max-width: 280px;
   object-fit: contain;
 }
 

package/src/components/Hero/HeroView.jsx

@@ -1,49 +1,25 @@
 'use client'
 
-import styles from "./Hero.module.scss"
 import { useTheme } from "../../context/SiteConfigContext.jsx"
-import { useAdapters } from "../../adapters/AdaptersContext.jsx"
-import AspectImage from "../UI/AspectImage/AspectImage.jsx"
+import V1 from './variants/V1/V1'
+import V2 from './variants/V2/V2'
+import V3 from './variants/V3/V3'
+
+const VARIANTS = { '1': V1, '2': V2, '3': V3 }
 
 export default function HeroView({ article, important = false }) {
   const theme = useTheme()
-  const { Link } = useAdapters()
-  const surfaceColor = theme.surface
-  const primaryColor = theme.primary
-  const textColor = theme.textColor
-  const fontFamily = theme.fontFamily
+  const v = String(theme.hero ?? 1)
 
   const inlineStyle = {
-    backgroundColor: surfaceColor,
-    fontFamily,
-    '--primary-color': primaryColor,
-    '--text-color': textColor,
-    '--surface-color': surfaceColor,
+    backgroundColor:   theme.surface,
+    fontFamily:        theme.fontFamily,
+    '--primary-color': theme.primary,
+    '--text-color':    theme.textColor,
+    '--surface-color': theme.surface,
   }
 
-  return (
-    <article style={inlineStyle} className={`${styles.container} ${important ? styles.important : ""}`}>
-      <Link href={article.slug} className={styles.link}>
-        {article.imagen?.url && (
-          <AspectImage
-            src={article.imagen.url}
-            alt={article.imagen.alt ?? ''}
-            aspect="16:9"
-            focalPoint={article.focalPoint}
-            className={styles.media}
-          />
-        )}
-        <div className={styles.body}>
-          <p className={styles.headline}>
-            {article.volanta && <span className={styles.category}>{article.volanta}. </span>}
-            {article.titulo}
-          </p>
-          <p className={styles.copete}> {article.copete}</p>
-          {article.autor?.nombre && (
-            <span className={styles.autor}>Por {article.autor.nombre}</span>
-          )}
-        </div>
-      </Link>
-    </article>
-  )
+  const Variant = VARIANTS[v] ?? V1
+
+  return <Variant article={article} important={important} inlineStyle={inlineStyle} />
 }

package/src/components/Hero/variants/V1/V1.jsx

@@ -0,0 +1,33 @@
+import { useAdapters } from '../../../../adapters/AdaptersContext.jsx'
+import AspectImage from '../../../UI/AspectImage/AspectImage.jsx'
+import styles from '../../Hero.module.scss'
+
+export default function V1({ article, important = false, inlineStyle }) {
+  const { Link } = useAdapters()
+
+  return (
+    <article style={inlineStyle} className={`${styles.container} ${important ? styles.important : ''}`}>
+      <Link href={article.slug} className={styles.link}>
+        {article.imagen?.url && (
+          <AspectImage
+            src={article.imagen.url}
+            alt={article.imagen.alt ?? ''}
+            aspect="16:9"
+            focalPoint={article.focalPoint}
+            className={styles.media}
+          />
+        )}
+        <div className={styles.body}>
+          <p className={styles.headline}>
+            {article.volanta && <span className={styles.category}>{article.volanta}. </span>}
+            {article.titulo}
+          </p>
+          <p className={styles.copete}> {article.copete}</p>
+          {article.autor?.nombre && (
+            <span className={styles.autor}>Por {article.autor.nombre}</span>
+          )}
+        </div>
+      </Link>
+    </article>
+  )
+}

package/src/components/Hero/variants/V2/V2.jsx

@@ -0,0 +1,37 @@
+import { useAdapters } from '../../../../adapters/AdaptersContext.jsx'
+import AspectImage from '../../../UI/AspectImage/AspectImage.jsx'
+import s from './V2.module.scss'
+
+export default function V2({ article, important = false, inlineStyle }) {
+  const { Link } = useAdapters()
+
+  return (
+    <article style={inlineStyle} className={`${s.container} ${important ? s.important : ''}`}>
+      <Link href={article.slug} className={s.link}>
+        <div className={s.imgWrap}>
+          {article.imagen?.url && (
+            <div className={s.mediaBox}>
+              <AspectImage
+                src={article.imagen.url}
+                alt={article.imagen.alt ?? ''}
+                fill
+                focalPoint={article.focalPoint}
+                priority
+              />
+            </div>
+          )}
+          <div className={s.overlay}>
+            {article.volanta && (
+              <span className={s.volantaWrap}><span className={s.volanta}>{article.volanta}.</span></span>
+            )}{' '}
+            <span className={s.headlineWrap}><span className={s.headline}>{article.titulo}</span></span>
+          </div>
+        </div>
+
+        {article.autor?.nombre && (
+          <span className={s.autor}>Por {article.autor.nombre}</span>
+        )}
+      </Link>
+    </article>
+  )
+}

package/src/components/Hero/variants/V2/V2.module.scss

@@ -0,0 +1,168 @@
+@use "../../../../styles/index.scss" as *;
+
+.container {
+  background-color: var(--surface-color, transparent);
+  box-sizing: border-box;
+  height: 100%;
+  padding: 0; // full bleed: la imagen toca los bordes
+
+  @include respond(desktop) {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.link {
+  display: block;
+  text-decoration: none;
+  color: inherit;
+
+  @include respond(desktop) {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+}
+
+.imgWrap {
+  position: relative;
+  width: 100%;
+
+  @include respond(desktop) {
+    flex: 1;
+    min-height: 0;
+  }
+}
+
+// Caja que define el tamaño de la imagen (AspectImage va en modo `fill`)
+.mediaBox {
+  position: relative;
+  width: 100%;
+  height: 55vh; // mobile: imagen alta pero sin ocupar toda la pantalla
+
+  @include respond(tablet) {
+    height: auto;
+    aspect-ratio: 16 / 9;
+  }
+
+  @include respond(desktop) {
+    height: 100%;
+    aspect-ratio: unset;
+  }
+}
+
+// ── Overlay SOBRE la imagen en todos los anchos (cajas blancas por línea) ──
+.overlay {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 14px;
+  padding: 0 14px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  font-family: var(--font-family);
+}
+
+.volantaWrap {
+  display: block;
+  margin-bottom: 5px;
+  max-width: 100%;
+}
+
+.headlineWrap {
+  display: block;
+  max-width: 100%;
+}
+
+// Cajas con fondo blanco que se clonan en cada línea de texto
+.volanta,
+.headline {
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+  background: #fff;
+  padding: 3px 7px;
+}
+
+.volanta {
+  color: var(--primary-color, #4bac48);
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 1.5;
+
+  @include respond(tablet) {
+    font-size: 26px;
+  }
+
+  @include respond(desktop) {
+    font-size: 28px;
+  }
+}
+
+.headline {
+  color: var(--text-color, #252523);
+  font-size: 20px;
+  font-weight: 800;
+  line-height: 1.55;
+
+  @include respond(tablet) {
+    font-size: 30px;
+    line-height: 1.7;
+  }
+
+  @include respond(desktop) {
+    font-size: 32px;
+  }
+}
+
+// ── Copete debajo de la imagen (si existe) ───────────────────────────────
+.copete {
+  font-size: 14px;
+  line-height: 1.4;
+  color: var(--text-color, #252523);
+  margin: 10px 0 0;
+  padding: 0 16px;
+
+  @include respond(tablet) {
+    padding: 0;
+  }
+
+  @include respond(desktop) {
+    flex: none;
+  }
+}
+
+.autor {
+  display: block;
+  font-size: 12px;
+  font-weight: 300;
+  color: var(--text-color, #252523);
+  padding: 8px 16px 0;
+
+  @include respond(tablet) {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+// ── Hero importante ──────────────────────────────────────────────────────
+.important {
+  .mediaBox {
+    @include respond(tablet) {
+      aspect-ratio: 16 / 7;
+    }
+    @include respond(desktop) {
+      aspect-ratio: unset;
+    }
+  }
+
+  .headline {
+    @include respond(tablet) {
+      font-size: 32px;
+    }
+    @include respond(desktop) {
+      font-size: 38px;
+    }
+  }
+}

package/src/components/Hero/variants/V3/V3.jsx

@@ -0,0 +1,36 @@
+import { useAdapters } from '../../../../adapters/AdaptersContext.jsx'
+import AspectImage from '../../../UI/AspectImage/AspectImage.jsx'
+import s from './V3.module.scss'
+
+export default function V3({ article, important = false, inlineStyle }) {
+  const { Link } = useAdapters()
+
+  return (
+    <article style={inlineStyle} className={`${s.container} ${important ? s.important : ''}`}>
+      <Link href={article.slug} className={s.link}>
+        <div className={s.imgWrap}>
+          {article.imagen?.url && (
+            <div className={s.mediaBox}>
+              <AspectImage
+                src={article.imagen.url}
+                alt={article.imagen.alt ?? ''}
+                fill
+                focalPoint={article.focalPoint}
+                priority
+              />
+            </div>
+          )}
+          <div className={s.gradient} aria-hidden="true" />
+          <div className={s.overlay}>
+            {article.volanta && <p className={s.volanta}>{article.volanta}</p>}
+            <h2 className={s.headline}>{article.titulo}</h2>
+          </div>
+        </div>
+
+        {article.autor?.nombre && (
+          <span className={s.autor}>Por {article.autor.nombre}</span>
+        )}
+      </Link>
+    </article>
+  )
+}