diff --git a/CHANGELOG.md b/CHANGELOG.md index 99b6f5ba9..9d5073c2c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ## [Unreleased] +### Added + +- Adding image size properties to the infoCard component + ## [3.176.1] - 2024-11-08 ## [3.176.0] - 2024-11-06 diff --git a/docs/InfoCard.md b/docs/InfoCard.md index f8a347a06..c247e02b0 100644 --- a/docs/InfoCard.md +++ b/docs/InfoCard.md @@ -49,10 +49,14 @@ The `info-card` component groups information on a single topic. It often include | `headline` | `string` | Headline of the Info Card. | `null` | | `htmlId` | `string` | ID of the container element. | `null` | | `imageUrl` | `string` | Path to the image used on desktop devices. | `""` | +| `imageHeight` | `number` | Height of the image that is used to improve [Cumulative Layout Shift (CLS)](https://web.dev/articles/cls) while the image loads.| `null` | +| `imageWidth` | `number` | Width of the image that is used to improve [Cumulative Layout Shift (CLS)](https://web.dev/articles/cls) while the image loads.| `null` | | `imageActionUrl` | `string` | Redirect URL used when the image component is clicked. | `""` | | `isFullModeStyle` | `boolean` | Style of the Info Card component. If `true`, the image component is used as the background, and text is displayed over it. | `false` | | `linkTarget` | `LinkTargetEnum` | Where to display the linked URL when the Info Card component is clicked. | `"_self"` | | `mobileImageUrl` | `string` | Path to the image used on mobile devices. If empty, the desktop image is used. | `null` | +| `imageMobileHeight` | `number` | Height of the mobile image that is used to improve [Cumulative Layout Shift (CLS)](https://web.dev/articles/cls) while the image loads.| `null` | +| `imageMobileWidth` | `number` | Width of the mobile image that is used to improve [Cumulative Layout Shift (CLS)](https://web.dev/articles/cls) while the image loads.| `null` | | `subhead` | `string` | Text to be displayed underneath the headline. If not provided, it will not be rendered. | `null` | | `bodyText` | `string` | Text to be displayed underneath the subhead. If not provided, it will not be rendered. | `null` | | `textAlignment` | `TextAlignmentEnum` | Text alignment inside the component: `left`, `center` or `right`. This prop is ignored if `isFullModeStyle` is true. | `"left"` | diff --git a/messages/ar.json b/messages/ar.json index b2e274998..c8c6828bf 100644 --- a/messages/ar.json +++ b/messages/ar.json @@ -123,6 +123,10 @@ "admin/editor.info-card.textMode.description": "ما هو وضع النص الذي يجب أن تتوقع بطاقة المعلومات استلامه. HTML هو الافتراضي والنص المنسق يتيح لك استخدام التحديد.", "admin/editor.info-card.textMode.html": "HTML", "admin/editor.info-card.textMode.rich-text": "نصّ مُنـسّق", + "admin/editor.info-card.imageWidth.title": "عرض الصورة", + "admin/editor.info-card.imageHeight.title": "ارتفاع الصورة", + "admin/editor.info-card.imageMobileWidth.title": "عرض الصورة لتخطيط الهاتف المحمول", + "admin/editor.info-card.imageMobileHeight.title": "ارتفاع الصورة لتخطيط الهاتف المحمول", "admin/editor.info-card.callAction.none": "لا شيء", "admin/editor.info-card.callAction.button": "الزر", "admin/editor.info-card.callAction.link": "الرابط", diff --git a/messages/bg.json b/messages/bg.json index a2b5b6efc..98c7c66f0 100644 --- a/messages/bg.json +++ b/messages/bg.json @@ -123,6 +123,10 @@ "admin/editor.info-card.textMode.description": "Какъв текстов режим трябва да очаква да получи InfoCard. HTML е режимът по подразбиране, а RTF текст ви дава възможност да използвате маркдаун.", "admin/editor.info-card.textMode.html": "HTML", "admin/editor.info-card.textMode.rich-text": "RTF текст", + "admin/editor.info-card.imageWidth.title": "Ширина на изображението", + "admin/editor.info-card.imageHeight.title": "Височина на изображението", + "admin/editor.info-card.imageMobileWidth.title": "Ширина на изображението за мобилно оформление", + "admin/editor.info-card.imageMobileHeight.title": "Височина на изображението за мобилно оформление", "admin/editor.info-card.callAction.none": "Няма", "admin/editor.info-card.callAction.button": "Бутон", "admin/editor.info-card.callAction.link": "Връзка", diff --git a/messages/context.json b/messages/context.json index e6f328345..fd3a685cf 100644 --- a/messages/context.json +++ b/messages/context.json @@ -123,6 +123,10 @@ "admin/editor.info-card.textMode.description": "Description for textMode property.", "admin/editor.info-card.textMode.html": "Enum value for HTML text.", "admin/editor.info-card.textMode.rich-text": "Enum value for rich-text.", + "admin/editor.info-card.imageWidth.title": "Image Width", + "admin/editor.info-card.imageHeight.title": "Image Height", + "admin/editor.info-card.imageMobileWidth.title": "Image Width for Mobile Layout", + "admin/editor.info-card.imageMobileHeight.title": "Image Height for Mobile Layout", "admin/editor.info-card.callAction.none": "Name of enum value to make CTA disappear", "admin/editor.info-card.callAction.button": "Name of enum value to make CTA a button", "admin/editor.info-card.callAction.link": "Name of enum value to make CTA a link", diff --git a/messages/de.json b/messages/de.json index b4ad96989..8331b1df1 100644 --- a/messages/de.json +++ b/messages/de.json @@ -123,6 +123,10 @@ "admin/editor.info-card.textMode.description": "Textmodus InfoCard wird empfangen. HTML ist die Standardeinstellung und Rich-Text ermöglicht Ihnen die Verwendung von Markdown.", "admin/editor.info-card.textMode.html": "HTML", "admin/editor.info-card.textMode.rich-text": "Rich-Text", + "admin/editor.info-card.imageWidth.title": "Bildbreite", + "admin/editor.info-card.imageHeight.title": "Bildhöhe", + "admin/editor.info-card.imageMobileWidth.title": "Bildbreite für mobiles Layout", + "admin/editor.info-card.imageMobileHeight.title": "Bildhöhe für mobiles Layout", "admin/editor.info-card.callAction.none": "Keine", "admin/editor.info-card.callAction.button": "Taste", "admin/editor.info-card.callAction.link": "Link", diff --git a/messages/en.json b/messages/en.json index 31bb39d60..62bb09d70 100644 --- a/messages/en.json +++ b/messages/en.json @@ -125,6 +125,10 @@ "admin/editor.info-card.textMode.description": "Text mode InfoCard will receive. HTML is the default, and rich text enables you to use markdown.", "admin/editor.info-card.textMode.html": "HTML", "admin/editor.info-card.textMode.rich-text": "Rich Text", + "admin/editor.info-card.imageWidth.title": "Image Width", + "admin/editor.info-card.imageHeight.title": "Image Height", + "admin/editor.info-card.imageMobileWidth.title": "Image Width for Mobile Layout", + "admin/editor.info-card.imageMobileHeight.title": "Image Height for Mobile Layout", "admin/editor.info-card.callAction.none": "None", "admin/editor.info-card.callAction.button": "Button", "admin/editor.info-card.callAction.link": "Link", diff --git a/messages/es.json b/messages/es.json index 91d2b0020..1b9bb9df3 100644 --- a/messages/es.json +++ b/messages/es.json @@ -125,6 +125,10 @@ "admin/editor.info-card.textMode.description": "Qué tipo de texto recibirá el InfoCard. HTML es el predeterminado y Rich-Text permite el uso de Markdown.", "admin/editor.info-card.textMode.html": "HTML", "admin/editor.info-card.textMode.rich-text": "Rich-Text", + "admin/editor.info-card.imageWidth.title": "Ancho de la imagen", + "admin/editor.info-card.imageHeight.title": "Altura de la imagen", + "admin/editor.info-card.imageMobileWidth.title": "Ancho de la imagen para el diseño móvil", + "admin/editor.info-card.imageMobileHeight.title": "Altura de la imagen para el diseño móvil", "admin/editor.info-card.callAction.none": "Ninguno", "admin/editor.info-card.callAction.button": "Botón", "admin/editor.info-card.callAction.link": "Link", diff --git a/messages/fr.json b/messages/fr.json index 1a1667b3e..20649e2f8 100644 --- a/messages/fr.json +++ b/messages/fr.json @@ -123,6 +123,10 @@ "admin/editor.info-card.textMode.description": "Quel mode texte devrait recevoir la carte InfoCard. HTML est le mode par défaut et Texte Enrichi vous permet d’utiliser Markdown.", "admin/editor.info-card.textMode.html": "HTML", "admin/editor.info-card.textMode.rich-text": "Texte enrichi", + "admin/editor.info-card.imageWidth.title": "Largeur de l'image", + "admin/editor.info-card.imageHeight.title": "Hauteur de l'image", + "admin/editor.info-card.imageMobileWidth.title": "Largeur de l'image pour la mise en page mobile", + "admin/editor.info-card.imageMobileHeight.title": "Hauteur de l'image pour la mise en page mobile", "admin/editor.info-card.callAction.none": "Aucun", "admin/editor.info-card.callAction.button": "Bouton", "admin/editor.info-card.callAction.link": "Lien", diff --git a/messages/hu.json b/messages/hu.json index 818f046a5..e68a21c95 100644 --- a/messages/hu.json +++ b/messages/hu.json @@ -125,6 +125,10 @@ "admin/editor.info-card.textMode.description": "Szöveg mód, amelyet az InfoCard fogad. Alapértelmezett a HTML, a rich text lehetővé teszi a markdown használatát.", "admin/editor.info-card.textMode.html": "HTML", "admin/editor.info-card.textMode.rich-text": "Rich Text", + "admin/editor.info-card.imageWidth.title": "Kép szélessége", + "admin/editor.info-card.imageHeight.title": "Kép magassága", + "admin/editor.info-card.imageMobileWidth.title": "Kép szélessége mobil elrendezéshez", + "admin/editor.info-card.imageMobileHeight.title": "Kép magassága mobil elrendezéshez", "admin/editor.info-card.callAction.none": "Nincs", "admin/editor.info-card.callAction.button": "Gomb", "admin/editor.info-card.callAction.link": "Link", diff --git a/messages/id.json b/messages/id.json index dd41f40a4..e443dceda 100644 --- a/messages/id.json +++ b/messages/id.json @@ -123,6 +123,10 @@ "admin/editor.info-card.textMode.description": "Mode teks apa yang seharusnya diharapkan diterima Kartu Info. HTM merupakan default dan Teks Kaya memungkinkan Anda untuk menggunakan Markdown.", "admin/editor.info-card.textMode.html": "HTML", "admin/editor.info-card.textMode.rich-text": "Rich-Text", + "admin/editor.info-card.imageWidth.title": "Lebar Gambar", + "admin/editor.info-card.imageHeight.title": "Tinggi Gambar", + "admin/editor.info-card.imageMobileWidth.title": "Lebar Gambar untuk Tata Letak Seluler", + "admin/editor.info-card.imageMobileHeight.title": "Tinggi Gambar untuk Tata Letak Seluler", "admin/editor.info-card.callAction.none": "Tidak ada", "admin/editor.info-card.callAction.button": "Tombol", "admin/editor.info-card.callAction.link": "Tautan", diff --git a/messages/it.json b/messages/it.json index 68042394c..78cd4eaae 100644 --- a/messages/it.json +++ b/messages/it.json @@ -123,6 +123,10 @@ "admin/editor.info-card.textMode.description": "Tipo di testo che l'InfoCard riceverà. HTML è il valore predefinito e Rich Text consente l'utilizzo di Markdown.", "admin/editor.info-card.textMode.html": "HTML", "admin/editor.info-card.textMode.rich-text": "Rich Text", + "admin/editor.info-card.imageWidth.title": "Larghezza dell'immagine", + "admin/editor.info-card.imageHeight.title": "Altezza dell'immagine", + "admin/editor.info-card.imageMobileWidth.title": "Larghezza dell'immagine per layout mobile", + "admin/editor.info-card.imageMobileHeight.title": "Altezza dell'immagine per layout mobile", "admin/editor.info-card.callAction.none": "Nessuno", "admin/editor.info-card.callAction.button": "Pulsante", "admin/editor.info-card.callAction.link": "Link", diff --git a/messages/ja.json b/messages/ja.json index 2e9b74618..edc4081ab 100644 --- a/messages/ja.json +++ b/messages/ja.json @@ -123,6 +123,10 @@ "admin/editor.info-card.textMode.description": "InfoCard に届くことになっているテキストモードです。デフォルトは HTML ですが、リッチテキストを有効にすると Markdown を使えます。", "admin/editor.info-card.textMode.html": "HTML", "admin/editor.info-card.textMode.rich-text": "リッチテキスト", + "admin/editor.info-card.imageWidth.title": "画像の幅", + "admin/editor.info-card.imageHeight.title": "画像の高さ", + "admin/editor.info-card.imageMobileWidth.title": "モバイルレイアウトの画像の幅", + "admin/editor.info-card.imageMobileHeight.title": "モバイルレイアウトの画像の高さ", "admin/editor.info-card.callAction.none": "なし", "admin/editor.info-card.callAction.button": "ボタン", "admin/editor.info-card.callAction.link": "リンク", diff --git a/messages/ko.json b/messages/ko.json index 8be7ab902..73b009367 100644 --- a/messages/ko.json +++ b/messages/ko.json @@ -123,6 +123,10 @@ "admin/editor.info-card.textMode.description": "정보 카드가 수신해야 하는 텍스트 모드는 무엇인가요. HTML이 기본이며 서식 있는 텍스트에서는 마크다운을 사용할 수 있습니다.", "admin/editor.info-card.textMode.html": "HTML", "admin/editor.info-card.textMode.rich-text": "서식 있는 텍스트", + "admin/editor.info-card.imageWidth.title": "이미지 너비", + "admin/editor.info-card.imageHeight.title": "이미지 높이", + "admin/editor.info-card.imageMobileWidth.title": "모바일 레이아웃의 이미지 너비", + "admin/editor.info-card.imageMobileHeight.title": "모바일 레이아웃의 이미지 높이", "admin/editor.info-card.callAction.none": "없음", "admin/editor.info-card.callAction.button": "버튼", "admin/editor.info-card.callAction.link": "링크", diff --git a/messages/nl.json b/messages/nl.json index 69ac748c8..fa3c35347 100644 --- a/messages/nl.json +++ b/messages/nl.json @@ -123,6 +123,10 @@ "admin/editor.info-card.textMode.description": "Welke tekstmodus moet de InfoCard verwacht te ontvangen. HTML is de standaard en Rich Text stelt u in staat Markdown te gebruiken.", "admin/editor.info-card.textMode.html": "HTML", "admin/editor.info-card.textMode.rich-text": "Rich tekst", + "admin/editor.info-card.imageWidth.title": "Afbeeldingsbreedte", + "admin/editor.info-card.imageHeight.title": "Afbeeldingshoogte", + "admin/editor.info-card.imageMobileWidth.title": "Afbeeldingsbreedte voor mobiele lay-out", + "admin/editor.info-card.imageMobileHeight.title": "Afbeeldingshoogte voor mobiele lay-out", "admin/editor.info-card.callAction.none": "Geen", "admin/editor.info-card.callAction.button": "Knop", "admin/editor.info-card.callAction.link": "Link", diff --git a/messages/nn.json b/messages/nn.json index 305ed09a9..795a1a3d8 100644 --- a/messages/nn.json +++ b/messages/nn.json @@ -123,6 +123,10 @@ "admin/editor.info-card.textMode.description": "Hvilken tekstmodus InfoCard forventer å motta. HTML er standard og \"Rik tekst\" lar deg bruke Markdown.", "admin/editor.info-card.textMode.html": "HTML", "admin/editor.info-card.textMode.rich-text": "Rik tekst", + "admin/editor.info-card.imageWidth.title": "Bildebredde", + "admin/editor.info-card.imageHeight.title": "Bildehøyde", + "admin/editor.info-card.imageMobileWidth.title": "Bildebredde for mobiloppsett", + "admin/editor.info-card.imageMobileHeight.title": "Bildehøyde for mobiloppsett", "admin/editor.info-card.callAction.none": "Ingen", "admin/editor.info-card.callAction.button": "Knapp", "admin/editor.info-card.callAction.link": "Lenke", diff --git a/messages/no.json b/messages/no.json index 305ed09a9..795a1a3d8 100644 --- a/messages/no.json +++ b/messages/no.json @@ -123,6 +123,10 @@ "admin/editor.info-card.textMode.description": "Hvilken tekstmodus InfoCard forventer å motta. HTML er standard og \"Rik tekst\" lar deg bruke Markdown.", "admin/editor.info-card.textMode.html": "HTML", "admin/editor.info-card.textMode.rich-text": "Rik tekst", + "admin/editor.info-card.imageWidth.title": "Bildebredde", + "admin/editor.info-card.imageHeight.title": "Bildehøyde", + "admin/editor.info-card.imageMobileWidth.title": "Bildebredde for mobiloppsett", + "admin/editor.info-card.imageMobileHeight.title": "Bildehøyde for mobiloppsett", "admin/editor.info-card.callAction.none": "Ingen", "admin/editor.info-card.callAction.button": "Knapp", "admin/editor.info-card.callAction.link": "Lenke", diff --git a/messages/pt.json b/messages/pt.json index 0bd46ac64..344e8c417 100644 --- a/messages/pt.json +++ b/messages/pt.json @@ -125,6 +125,10 @@ "admin/editor.info-card.textMode.description": "O tipo de texto que o InfoCard irá receber. HTML é o padrão e Rich Text permite o uso de Markdown.", "admin/editor.info-card.textMode.html": "HTML", "admin/editor.info-card.textMode.rich-text": "Rich Text", + "admin/editor.info-card.imageWidth.title": "Largura da Imagem", + "admin/editor.info-card.imageHeight.title": "Altura da Imagem", + "admin/editor.info-card.imageMobileWidth.title": "Largura da Imagem para Layout Mobile", + "admin/editor.info-card.imageMobileHeight.title": "Altura da Imagem para Layout Mobile", "admin/editor.info-card.callAction.none": "Nenhum", "admin/editor.info-card.callAction.button": "Botão", "admin/editor.info-card.callAction.link": "Link", diff --git a/messages/ro.json b/messages/ro.json index cb69dd261..fdd97af19 100644 --- a/messages/ro.json +++ b/messages/ro.json @@ -123,6 +123,10 @@ "admin/editor.info-card.textMode.description": "Ce mod de text ar trebui InfoCard să se aștepte să primească. HTML este implicit, iar Rich Text îți permite să folosești Markdown.", "admin/editor.info-card.textMode.html": "HTML", "admin/editor.info-card.textMode.rich-text": "Rich-Text", + "admin/editor.info-card.imageWidth.title": "Lățimea imaginii", + "admin/editor.info-card.imageHeight.title": "Înălțimea imaginii", + "admin/editor.info-card.imageMobileWidth.title": "Lățimea imaginii pentru layout-ul mobil", + "admin/editor.info-card.imageMobileHeight.title": "Înălțimea imaginii pentru layout-ul mobil", "admin/editor.info-card.callAction.none": "Niciunul", "admin/editor.info-card.callAction.button": "Buton", "admin/editor.info-card.callAction.link": "Link", diff --git a/messages/th.json b/messages/th.json index 99a2a0f7d..d7fa2957d 100644 --- a/messages/th.json +++ b/messages/th.json @@ -123,6 +123,10 @@ "admin/editor.info-card.textMode.description": "InfoCard ควรคาดว่าจะได้รับโหมดข้อความอะไร ภาษาเอชทีเอ็มแอลเป็นค่าเริ่มต้นและ Rich Text ทำให้คุณสามารถใช้มาร์กดาวน์ได้", "admin/editor.info-card.textMode.html": "ภาษาเอชทีเอ็มแอล", "admin/editor.info-card.textMode.rich-text": "Rich Text", + "admin/editor.info-card.imageWidth.title": "ความกว้างของรูปภาพ", + "admin/editor.info-card.imageHeight.title": "ความสูงของรูปภาพ", + "admin/editor.info-card.imageMobileWidth.title": "ความกว้างของรูปภาพสำหรับเลย์เอาต์มือถือ", + "admin/editor.info-card.imageMobileHeight.title": "ความสูงของรูปภาพสำหรับเลย์เอาต์มือถือ", "admin/editor.info-card.callAction.none": "ไม่มี", "admin/editor.info-card.callAction.button": "ปุ่ม", "admin/editor.info-card.callAction.link": "ลิงก์", diff --git a/react/components/InfoCard/index.js b/react/components/InfoCard/index.js index 81e70532a..1aeae9ce3 100644 --- a/react/components/InfoCard/index.js +++ b/react/components/InfoCard/index.js @@ -22,6 +22,7 @@ import { textModeTypes, } from './SchemaTypes' import { SanitizedHTML } from '../SanitizedHTML' +import styles from './styles.css' const ALLOWED_TAGS = ['p', 'span', 'a', 'div', 'br'] const ALLOWED_ATTRS = { @@ -62,6 +63,12 @@ const defaultValues = { const getEnumValues = enumObject => values(enumObject).map(({ value }) => value) const getEnumNames = enumObject => values(enumObject).map(({ name }) => name) +const getImageWidth = (mobile, imageWidth, imageMobileWidth) => + mobile ? (imageMobileWidth ?? (imageWidth ?? undefined)) : (imageWidth ?? undefined) + +const getImageHeight = (mobile, imageHeight, imageMobileHeight) => + mobile ? (imageMobileHeight ?? (imageHeight ?? undefined)) : (imageHeight ?? undefined) + const safelyGetToken = (tokenMap, valueWanted, propName) => tokenMap[valueWanted] || defaultValues[propName] @@ -99,6 +106,10 @@ const InfoCard = ({ linkTarget, fetchpriority, preload, + imageHeight, + imageWidth, + imageMobileHeight, + imageMobileWidth }) => { const { hints: { mobile }, @@ -137,6 +148,9 @@ const InfoCard = ({ formatIOMessage({ id: mobileImageUrl, intl }) ) + const finalImageWidth = getImageWidth(mobile, imageWidth, imageMobileWidth) + const finalImageHeight = getImageHeight(mobile, imageHeight, imageMobileHeight) + const containerStyle = isFullModeStyle ? { /* If lazyloaded, the background image comes from the `data-bg` attribute @@ -175,6 +189,8 @@ const InfoCard = ({ const bodyTextClasses = `${handles.infoCardBodyText} t-body mt6 c-on-base ${alignToken} mw-100` + const finalImageClasses = `${finalImageHeight ? styles.infoCardImageSizing : ''} ${handles.infoCardImage}` + return (