From cb55576b4e67b7f391e7329cf268bc69883b12e6 Mon Sep 17 00:00:00 2001 From: Alex Efremov Date: Mon, 6 Jan 2025 16:37:18 +0700 Subject: [PATCH 1/4] Add image size properties to the infoCard component --- CHANGELOG.md | 4 ++++ docs/InfoCard.md | 2 ++ messages/ar.json | 4 ++++ messages/bg.json | 4 ++++ messages/context.json | 4 ++++ messages/de.json | 4 ++++ messages/en.json | 4 ++++ messages/es.json | 4 ++++ messages/fr.json | 4 ++++ messages/hu.json | 4 ++++ messages/id.json | 4 ++++ messages/it.json | 4 ++++ messages/ja.json | 4 ++++ messages/ko.json | 4 ++++ messages/nl.json | 4 ++++ messages/nn.json | 4 ++++ messages/no.json | 4 ++++ messages/pt.json | 4 ++++ messages/ro.json | 4 ++++ messages/th.json | 4 ++++ react/components/InfoCard/index.js | 16 ++++++++++++++++ 21 files changed, 94 insertions(+) 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..f48f61d8e 100644 --- a/docs/InfoCard.md +++ b/docs/InfoCard.md @@ -50,6 +50,8 @@ The `info-card` component groups information on a single topic. It often include | `htmlId` | `string` | ID of the container element. | `null` | | `imageUrl` | `string` | Path to the image used on desktop devices. | `""` | | `imageActionUrl` | `string` | Redirect URL used when the image component is clicked. | `""` | +| `imageHeight` | `number` | Height of the image that is used to improve CLS while the image is loading. | `null` | +| `imageWidth` | `number` | Width of the image that is used to improve CLS while the image is loading. | `null` | | `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` | diff --git a/messages/ar.json b/messages/ar.json index b2e274998..10139082e 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.imageWidth.description": "يتم استخدام هذه القيمة لحساب نسبة العرض إلى الارتفاع للصورة وتحسين CLS أثناء تحميل الصورة", + "admin/editor.info-card.imageHeight.title": "ارتفاع الصورة", + "admin/editor.info-card.imageHeight.description": "يتم استخدام هذه القيمة لحساب نسبة العرض إلى الارتفاع للصورة وتحسين CLS أثناء تحميل الصورة", "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..943fa2813 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.imageWidth.description": "Тази стойност се използва за изчисляване на съотношението на изображението и подобрява CLS по време на зареждане на изображението", + "admin/editor.info-card.imageHeight.title": "Височина на изображението", + "admin/editor.info-card.imageHeight.description": "Тази стойност се използва за изчисляване на съотношението на изображението и подобрява CLS по време на зареждане на изображението", "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..10d61f71e 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.imageWidth.description": "This value is used to calculate the aspect ratio of the image and improves the CLS during image loading", + "admin/editor.info-card.imageHeight.title": "Image Height", + "admin/editor.info-card.imageHeight.description": "This value is used to calculate the aspect ratio of the image and improves the CLS during image loading", "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..483b371da 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.imageWidth.description": "Dieser Wert wird verwendet, um das Seitenverhältnis des Bildes zu berechnen und verbessert den CLS während des Bildladens", + "admin/editor.info-card.imageHeight.title": "Bildhöhe", + "admin/editor.info-card.imageHeight.description": "Dieser Wert wird verwendet, um das Seitenverhältnis des Bildes zu berechnen und verbessert den CLS während des Bildladens", "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..696e7b61c 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.imageWidth.description": "This value is used to calculate the aspect ratio of the image and improves the CLS during image loading", + "admin/editor.info-card.imageHeight.title": "Image Height", + "admin/editor.info-card.imageHeight.description": "This value is used to calculate the aspect ratio of the image and improves the CLS during image loading", "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..22253e928 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": "Anchura de la imagen", + "admin/editor.info-card.imageWidth.description": "Este valor se utiliza para calcular la relación de aspecto de la imagen y mejora el CLS durante la carga de la imagen", + "admin/editor.info-card.imageHeight.title": "Altura de la imagen", + "admin/editor.info-card.imageHeight.description": "Este valor se utiliza para calcular la relación de aspecto de la imagen y mejora el CLS durante la carga de la imagen", "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..8ae749bc0 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.imageWidth.description": "Cette valeur est utilisée pour calculer le rapport d'aspect de l'image et améliore le CLS pendant le chargement de l'image", + "admin/editor.info-card.imageHeight.title": "Hauteur de l'image", + "admin/editor.info-card.imageHeight.description": "Cette valeur est utilisée pour calculer le rapport d'aspect de l'image et améliore le CLS pendant le chargement de l'image", "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..d90bc0792 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.imageWidth.description": "Ezt az értéket a kép oldalarányának kiszámításához használják, és javítja a CLS-t a kép betöltése során", + "admin/editor.info-card.imageHeight.title": "Kép magassága", + "admin/editor.info-card.imageHeight.description": "Ezt az értéket a kép oldalarányának kiszámításához használják, és javítja a CLS-t a kép betöltése során", "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..5042a6464 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.imageWidth.description": "Nilai ini digunakan untuk menghitung rasio aspek gambar dan meningkatkan CLS selama pemuatan gambar", + "admin/editor.info-card.imageHeight.title": "Tinggi Gambar", + "admin/editor.info-card.imageHeight.description": "Nilai ini digunakan untuk menghitung rasio aspek gambar dan meningkatkan CLS selama pemuatan gambar", "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..0cdd32d2d 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.imageWidth.description": "Questo valore viene utilizzato per calcolare il rapporto d'aspetto dell'immagine e migliora il CLS durante il caricamento dell'immagine", + "admin/editor.info-card.imageHeight.title": "Altezza dell'immagine", + "admin/editor.info-card.imageHeight.description": "Questo valore viene utilizzato per calcolare il rapporto d'aspetto dell'immagine e migliora il CLS durante il caricamento dell'immagine", "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..97e90394e 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.imageWidth.description": "この値は画像のアスペクト比を計算するために使用され、画像読み込み中のCLSを改善します", + "admin/editor.info-card.imageHeight.title": "画像の高さ", + "admin/editor.info-card.imageHeight.description": "この値は画像のアスペクト比を計算するために使用され、画像読み込み中のCLSを改善します", "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..81bbc4474 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.imageWidth.description": "이 값은 이미지의 종횡비를 계산하는 데 사용되며 이미지 로딩 중 CLS를 개선합니다", + "admin/editor.info-card.imageHeight.title": "이미지 높이", + "admin/editor.info-card.imageHeight.description": "이 값은 이미지의 종횡비를 계산하는 데 사용되며 이미지 로딩 중 CLS를 개선합니다", "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..a61cdfcc4 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.imageWidth.description": "Deze waarde wordt gebruikt om de beeldverhouding van de afbeelding te berekenen en verbetert de CLS tijdens het laden van de afbeelding", + "admin/editor.info-card.imageHeight.title": "Afbeeldingshoogte", + "admin/editor.info-card.imageHeight.description": "Deze waarde wordt gebruikt om de beeldverhouding van de afbeelding te berekenen en verbetert de CLS tijdens het laden van de afbeelding", "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..77130aa37 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.imageWidth.description": "Denne verdien brukes til å beregne bildets størrelsesforhold og forbedrer CLS under bildefasting", + "admin/editor.info-card.imageHeight.title": "Bildehøyde", + "admin/editor.info-card.imageHeight.description": "Denne verdien brukes til å beregne bildets størrelsesforhold og forbedrer CLS under bildefasting", "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..17f65f4b7 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.imageWidth.description": "Denne verdien brukes til å beregne bildeforholdet og forbedrer CLS under bildefasting", + "admin/editor.info-card.imageHeight.title": "Bildehøyde", + "admin/editor.info-card.imageHeight.description": "Denne verdien brukes til å beregne bildeforholdet og forbedrer CLS under bildefasting", "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..d6a42d0a3 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.imageWidth.description": "Este valor é usado para calcular a proporção da imagem e melhora o CLS durante o carregamento da imagem", + "admin/editor.info-card.imageHeight.title": "Altura da imagem", + "admin/editor.info-card.imageHeight.description": "Este valor é usado para calcular a proporção da imagem e melhora o CLS durante o carregamento da imagem", "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..f3e7f6a2d 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.imageWidth.description": "Această valoare este folosită pentru a calcula raportul de aspect al imaginii și îmbunătățește CLS în timpul încărcării imaginii", + "admin/editor.info-card.imageHeight.title": "Înălțimea imaginii", + "admin/editor.info-card.imageHeight.description": "Această valoare este folosită pentru a calcula raportul de aspect al imaginii și îmbunătățește CLS în timpul încărcării imaginii", "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..d3ebb0013 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.imageWidth.description": "ค่านี้ใช้ในการคำนวณอัตราส่วนภาพและช่วยปรับปรุง CLS ระหว่างการโหลดรูปภาพ", + "admin/editor.info-card.imageHeight.title": "ความสูงของรูปภาพ", + "admin/editor.info-card.imageHeight.description": "ค่านี้ใช้ในการคำนวณอัตราส่วนภาพและช่วยปรับปรุง CLS ระหว่างการโหลดรูปภาพ", "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..c7f31f7c6 100644 --- a/react/components/InfoCard/index.js +++ b/react/components/InfoCard/index.js @@ -99,6 +99,8 @@ const InfoCard = ({ linkTarget, fetchpriority, preload, + imageHeight, + imageWidth, }) => { const { hints: { mobile }, @@ -241,6 +243,8 @@ const InfoCard = ({ {formatIOMessage({ Date: Tue, 7 Jan 2025 14:19:36 +0700 Subject: [PATCH 2/4] Add imageWidth and imageHeight properties to contentSchemas --- store/contentSchemas.json | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/store/contentSchemas.json b/store/contentSchemas.json index b8a9f8ac7..b20cf042f 100644 --- a/store/contentSchemas.json +++ b/store/contentSchemas.json @@ -93,6 +93,16 @@ "$ref": "app:vtex.native-types#/definitions/url", "default": "" }, + "imageWidth": { + "title": "admin/editor.info-card.imageWidth.title", + "description": "admin/editor.info-card.imageWidth.description", + "type": "number" + }, + "imageHeight": { + "title": "admin/editor.info-card.imageHeight.title", + "description": "admin/editor.info-card.imageHeight.description", + "type": "number" + }, "textPosition": { "default": "left", "type": "string", From f6416d6cd8fbe7d4c3c64065842b4e581de32f9d Mon Sep 17 00:00:00 2001 From: Alex Efremov Date: Tue, 14 Jan 2025 16:18:39 +0700 Subject: [PATCH 3/4] Add mobile image size properties to infoCard component --- messages/ar.json | 4 ++-- messages/bg.json | 4 ++-- messages/context.json | 4 ++-- messages/de.json | 4 ++-- messages/en.json | 4 ++-- messages/es.json | 6 +++--- messages/fr.json | 4 ++-- messages/hu.json | 4 ++-- messages/id.json | 4 ++-- messages/it.json | 4 ++-- messages/ja.json | 4 ++-- messages/ko.json | 4 ++-- messages/nl.json | 4 ++-- messages/nn.json | 4 ++-- messages/no.json | 4 ++-- messages/pt.json | 8 +++---- messages/ro.json | 4 ++-- messages/th.json | 4 ++-- react/components/InfoCard/index.js | 32 ++++++++++++++++++++++++---- react/components/InfoCard/styles.css | 4 ++++ store/contentSchemas.json | 26 +++++++++++++--------- 21 files changed, 87 insertions(+), 53 deletions(-) create mode 100644 react/components/InfoCard/styles.css diff --git a/messages/ar.json b/messages/ar.json index 10139082e..c8c6828bf 100644 --- a/messages/ar.json +++ b/messages/ar.json @@ -124,9 +124,9 @@ "admin/editor.info-card.textMode.html": "HTML", "admin/editor.info-card.textMode.rich-text": "نصّ مُنـسّق", "admin/editor.info-card.imageWidth.title": "عرض الصورة", - "admin/editor.info-card.imageWidth.description": "يتم استخدام هذه القيمة لحساب نسبة العرض إلى الارتفاع للصورة وتحسين CLS أثناء تحميل الصورة", "admin/editor.info-card.imageHeight.title": "ارتفاع الصورة", - "admin/editor.info-card.imageHeight.description": "يتم استخدام هذه القيمة لحساب نسبة العرض إلى الارتفاع للصورة وتحسين CLS أثناء تحميل الصورة", + "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 943fa2813..98c7c66f0 100644 --- a/messages/bg.json +++ b/messages/bg.json @@ -124,9 +124,9 @@ "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.imageWidth.description": "Тази стойност се използва за изчисляване на съотношението на изображението и подобрява CLS по време на зареждане на изображението", "admin/editor.info-card.imageHeight.title": "Височина на изображението", - "admin/editor.info-card.imageHeight.description": "Тази стойност се използва за изчисляване на съотношението на изображението и подобрява CLS по време на зареждане на изображението", + "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 10d61f71e..fd3a685cf 100644 --- a/messages/context.json +++ b/messages/context.json @@ -124,9 +124,9 @@ "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.imageWidth.description": "This value is used to calculate the aspect ratio of the image and improves the CLS during image loading", "admin/editor.info-card.imageHeight.title": "Image Height", - "admin/editor.info-card.imageHeight.description": "This value is used to calculate the aspect ratio of the image and improves the CLS during image loading", + "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 483b371da..8331b1df1 100644 --- a/messages/de.json +++ b/messages/de.json @@ -124,9 +124,9 @@ "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.imageWidth.description": "Dieser Wert wird verwendet, um das Seitenverhältnis des Bildes zu berechnen und verbessert den CLS während des Bildladens", "admin/editor.info-card.imageHeight.title": "Bildhöhe", - "admin/editor.info-card.imageHeight.description": "Dieser Wert wird verwendet, um das Seitenverhältnis des Bildes zu berechnen und verbessert den CLS während des Bildladens", + "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 696e7b61c..62bb09d70 100644 --- a/messages/en.json +++ b/messages/en.json @@ -126,9 +126,9 @@ "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.imageWidth.description": "This value is used to calculate the aspect ratio of the image and improves the CLS during image loading", "admin/editor.info-card.imageHeight.title": "Image Height", - "admin/editor.info-card.imageHeight.description": "This value is used to calculate the aspect ratio of the image and improves the CLS during image loading", + "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 22253e928..1b9bb9df3 100644 --- a/messages/es.json +++ b/messages/es.json @@ -125,10 +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": "Anchura de la imagen", - "admin/editor.info-card.imageWidth.description": "Este valor se utiliza para calcular la relación de aspecto de la imagen y mejora el CLS durante la carga de la imagen", + "admin/editor.info-card.imageWidth.title": "Ancho de la imagen", "admin/editor.info-card.imageHeight.title": "Altura de la imagen", - "admin/editor.info-card.imageHeight.description": "Este valor se utiliza para calcular la relación de aspecto de la imagen y mejora el CLS durante la carga 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 8ae749bc0..20649e2f8 100644 --- a/messages/fr.json +++ b/messages/fr.json @@ -124,9 +124,9 @@ "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.imageWidth.description": "Cette valeur est utilisée pour calculer le rapport d'aspect de l'image et améliore le CLS pendant le chargement de l'image", "admin/editor.info-card.imageHeight.title": "Hauteur de l'image", - "admin/editor.info-card.imageHeight.description": "Cette valeur est utilisée pour calculer le rapport d'aspect de l'image et améliore le CLS pendant le chargement 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 d90bc0792..e68a21c95 100644 --- a/messages/hu.json +++ b/messages/hu.json @@ -126,9 +126,9 @@ "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.imageWidth.description": "Ezt az értéket a kép oldalarányának kiszámításához használják, és javítja a CLS-t a kép betöltése során", "admin/editor.info-card.imageHeight.title": "Kép magassága", - "admin/editor.info-card.imageHeight.description": "Ezt az értéket a kép oldalarányának kiszámításához használják, és javítja a CLS-t a kép betöltése során", + "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 5042a6464..e443dceda 100644 --- a/messages/id.json +++ b/messages/id.json @@ -124,9 +124,9 @@ "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.imageWidth.description": "Nilai ini digunakan untuk menghitung rasio aspek gambar dan meningkatkan CLS selama pemuatan gambar", "admin/editor.info-card.imageHeight.title": "Tinggi Gambar", - "admin/editor.info-card.imageHeight.description": "Nilai ini digunakan untuk menghitung rasio aspek gambar dan meningkatkan CLS selama pemuatan 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 0cdd32d2d..78cd4eaae 100644 --- a/messages/it.json +++ b/messages/it.json @@ -124,9 +124,9 @@ "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.imageWidth.description": "Questo valore viene utilizzato per calcolare il rapporto d'aspetto dell'immagine e migliora il CLS durante il caricamento dell'immagine", "admin/editor.info-card.imageHeight.title": "Altezza dell'immagine", - "admin/editor.info-card.imageHeight.description": "Questo valore viene utilizzato per calcolare il rapporto d'aspetto dell'immagine e migliora il CLS durante il caricamento 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 97e90394e..edc4081ab 100644 --- a/messages/ja.json +++ b/messages/ja.json @@ -124,9 +124,9 @@ "admin/editor.info-card.textMode.html": "HTML", "admin/editor.info-card.textMode.rich-text": "リッチテキスト", "admin/editor.info-card.imageWidth.title": "画像の幅", - "admin/editor.info-card.imageWidth.description": "この値は画像のアスペクト比を計算するために使用され、画像読み込み中のCLSを改善します", "admin/editor.info-card.imageHeight.title": "画像の高さ", - "admin/editor.info-card.imageHeight.description": "この値は画像のアスペクト比を計算するために使用され、画像読み込み中のCLSを改善します", + "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 81bbc4474..73b009367 100644 --- a/messages/ko.json +++ b/messages/ko.json @@ -124,9 +124,9 @@ "admin/editor.info-card.textMode.html": "HTML", "admin/editor.info-card.textMode.rich-text": "서식 있는 텍스트", "admin/editor.info-card.imageWidth.title": "이미지 너비", - "admin/editor.info-card.imageWidth.description": "이 값은 이미지의 종횡비를 계산하는 데 사용되며 이미지 로딩 중 CLS를 개선합니다", "admin/editor.info-card.imageHeight.title": "이미지 높이", - "admin/editor.info-card.imageHeight.description": "이 값은 이미지의 종횡비를 계산하는 데 사용되며 이미지 로딩 중 CLS를 개선합니다", + "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 a61cdfcc4..fa3c35347 100644 --- a/messages/nl.json +++ b/messages/nl.json @@ -124,9 +124,9 @@ "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.imageWidth.description": "Deze waarde wordt gebruikt om de beeldverhouding van de afbeelding te berekenen en verbetert de CLS tijdens het laden van de afbeelding", "admin/editor.info-card.imageHeight.title": "Afbeeldingshoogte", - "admin/editor.info-card.imageHeight.description": "Deze waarde wordt gebruikt om de beeldverhouding van de afbeelding te berekenen en verbetert de CLS tijdens het laden van de afbeelding", + "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 77130aa37..795a1a3d8 100644 --- a/messages/nn.json +++ b/messages/nn.json @@ -124,9 +124,9 @@ "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.imageWidth.description": "Denne verdien brukes til å beregne bildets størrelsesforhold og forbedrer CLS under bildefasting", "admin/editor.info-card.imageHeight.title": "Bildehøyde", - "admin/editor.info-card.imageHeight.description": "Denne verdien brukes til å beregne bildets størrelsesforhold og forbedrer CLS under bildefasting", + "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 17f65f4b7..795a1a3d8 100644 --- a/messages/no.json +++ b/messages/no.json @@ -124,9 +124,9 @@ "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.imageWidth.description": "Denne verdien brukes til å beregne bildeforholdet og forbedrer CLS under bildefasting", "admin/editor.info-card.imageHeight.title": "Bildehøyde", - "admin/editor.info-card.imageHeight.description": "Denne verdien brukes til å beregne bildeforholdet og forbedrer CLS under bildefasting", + "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 d6a42d0a3..344e8c417 100644 --- a/messages/pt.json +++ b/messages/pt.json @@ -125,10 +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.imageWidth.description": "Este valor é usado para calcular a proporção da imagem e melhora o CLS durante o carregamento da imagem", - "admin/editor.info-card.imageHeight.title": "Altura da imagem", - "admin/editor.info-card.imageHeight.description": "Este valor é usado para calcular a proporção da imagem e melhora o CLS durante o carregamento da imagem", + "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 f3e7f6a2d..fdd97af19 100644 --- a/messages/ro.json +++ b/messages/ro.json @@ -124,9 +124,9 @@ "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.imageWidth.description": "Această valoare este folosită pentru a calcula raportul de aspect al imaginii și îmbunătățește CLS în timpul încărcării imaginii", "admin/editor.info-card.imageHeight.title": "Înălțimea imaginii", - "admin/editor.info-card.imageHeight.description": "Această valoare este folosită pentru a calcula raportul de aspect al imaginii și îmbunătățește CLS în timpul încărcării 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 d3ebb0013..d7fa2957d 100644 --- a/messages/th.json +++ b/messages/th.json @@ -124,9 +124,9 @@ "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.imageWidth.description": "ค่านี้ใช้ในการคำนวณอัตราส่วนภาพและช่วยปรับปรุง CLS ระหว่างการโหลดรูปภาพ", "admin/editor.info-card.imageHeight.title": "ความสูงของรูปภาพ", - "admin/editor.info-card.imageHeight.description": "ค่านี้ใช้ในการคำนวณอัตราส่วนภาพและช่วยปรับปรุง CLS ระหว่างการโหลดรูปภาพ", + "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 c7f31f7c6..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] @@ -101,6 +108,8 @@ const InfoCard = ({ preload, imageHeight, imageWidth, + imageMobileHeight, + imageMobileWidth }) => { const { hints: { mobile }, @@ -139,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 @@ -177,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 ( {formatIOMessage({ Date: Tue, 14 Jan 2025 16:18:49 +0700 Subject: [PATCH 4/4] Update InfoCard documentation to include mobile image size properties --- docs/InfoCard.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/InfoCard.md b/docs/InfoCard.md index f48f61d8e..c247e02b0 100644 --- a/docs/InfoCard.md +++ b/docs/InfoCard.md @@ -49,12 +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. | `""` | -| `imageHeight` | `number` | Height of the image that is used to improve CLS while the image is loading. | `null` | -| `imageWidth` | `number` | Width of the image that is used to improve CLS while the image is loading. | `null` | | `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"` |