Skip to content

Commit

Permalink
[Product page] "Icon with text" block (#1933)
Browse files Browse the repository at this point in the history 
Add a new Icon-With-Text block to Product Page
  • Loading branch information
@eugenekasimov
eugenekasimov committed Oct 3, 2022
1 parent 92d8eca commit 7e696e9
Show file tree
Hide file tree
Showing 25 changed files with 2,693 additions and 113 deletions.
71 changes: 71 additions & 0 deletions assets/section-main-product.css
View file
Expand Up @@ -1244,3 +1244,74 @@ a.product__text {
margin-left: 1.2rem;
flex-shrink: 0;
}

/* Icon with text */
.icon-with-text {
--icon-size: calc(var(--font-heading-scale) * 3rem);
--icon-spacing: calc(var(--font-heading-scale) * 1rem);
}

.icon-with-text--horizontal {
display: flex;
justify-content: center;
column-gap: 3rem;
flex-direction: row;
padding-top: 2rem;
}

.icon-with-text--vertical {
--icon-size: calc(var(--font-heading-scale) * 2rem);
padding-top: 1.5rem;
}

.icon-with-text .icon {
fill: rgb(var(--color-foreground));
height: var(--icon-size);
width: var(--icon-size);
}

.icon-with-text--horizontal .icon,
.icon-with-text--horizontal img {
margin-bottom: var(--icon-spacing);
}

.icon-with-text--vertical .icon {
min-height: var(--icon-size);
min-width: var(--icon-size);
margin-right: var(--icon-spacing);
}

.icon-with-text img {
height: var(--icon-size);
width: var(--icon-size);
object-fit: contain;
}

.icon-with-text--vertical img {
margin-right: var(--icon-spacing);
}

.icon-with-text--horizontal .h4 {
padding-top: calc(var(--icon-size) + var(--icon-spacing));
text-align: center;
}

.icon-with-text--horizontal svg + .h4,
.icon-with-text--horizontal img + .h4,
.icon-with-text--horizontal.icon-with-text--text-only .h4 {
padding-top: 0;
}

.icon-with-text__item {
display: flex;
align-items: center;
}

.icon-with-text--horizontal .icon-with-text__item {
flex-direction: column;
width: 33%;
}

.icon-with-text--vertical .icon-with-text__item {
margin-bottom: var(--icon-size);
}
48 changes: 48 additions & 0 deletions locales/cs.schema.json
View file
Expand Up @@ -1765,6 +1765,54 @@
"label": "Povolit tlačítko Rychlé přidání"
}
}
},
"icon_with_text": {
"name": "Ikona s textem",
"settings": {
"layout": {
"label": "Rozvržení",
"options__1": {
"label": "Vodorovně"
},
"options__2": {
"label": "Svisle"
}
},
"content": {
"label": "Obsah",
"info": "Zvolte ikonu nebo přidejte obrázek pro každý sloupec nebo řádek."
},
"heading": {
"info": "Pokud chcete sloupec s ikonami skrýt, nechejte popisek záhlaví prázdný."
},
"icon_1": {
"label": "První ikona"
},
"image_1": {
"label": "První obrázek"
},
"heading_1": {
"label": "První nadpis"
},
"icon_2": {
"label": "Druhá ikona"
},
"image_2": {
"label": "Druhý obrázek"
},
"heading_2": {
"label": "Druhý nadpis"
},
"icon_3": {
"label": "Třetí ikona"
},
"image_3": {
"label": "Třetí obrázek"
},
"heading_3": {
"label": "Třetí nadpis"
}
}
}
},
"settings": {
Expand Down
48 changes: 48 additions & 0 deletions locales/da.schema.json
View file
Expand Up @@ -1765,6 +1765,54 @@
"label": "Aktivér knap til hurtig tilføjelse"
}
}
},
"icon_with_text": {
"name": "Ikon med tekst",
"settings": {
"layout": {
"label": "Layout",
"options__1": {
"label": "Vandret"
},
"options__2": {
"label": "Lodret"
}
},
"content": {
"label": "Indhold",
"info": "Vælg et ikon, eller tilføj et billede for hver kolonne eller række."
},
"heading": {
"info": "Lad overskriftsfeltet være tomt for at skjule ikonkolonnen."
},
"icon_1": {
"label": "Første ikon"
},
"image_1": {
"label": "Første billede"
},
"heading_1": {
"label": "Første overskrift"
},
"icon_2": {
"label": "Andet ikon"
},
"image_2": {
"label": "Andet billede"
},
"heading_2": {
"label": "Anden overskrift"
},
"icon_3": {
"label": "Tredje ikon"
},
"image_3": {
"label": "Tredje billede"
},
"heading_3": {
"label": "Tredje overskrift"
}
}
}
},
"settings": {
Expand Down
48 changes: 48 additions & 0 deletions locales/de.schema.json
View file
Expand Up @@ -1764,6 +1764,54 @@
"label": "Schaltfläche zum schnellen Hinzufügen aktivieren"
}
}
},
"icon_with_text": {
"name": "Symbol mit Text",
"settings": {
"layout": {
"label": "Layout",
"options__1": {
"label": "Horizontal"
},
"options__2": {
"label": "Vertikal"
}
},
"content": {
"label": "Inhalt",
"info": "Wähle ein Symbol oder füge ein Bild für jede Spalte oder Zeile hinzu."
},
"heading": {
"info": "Lasse die Überschrift leer, um die Symbolspalte auszublenden."
},
"icon_1": {
"label": "Erstes Symbol"
},
"image_1": {
"label": "Erstes Bild"
},
"heading_1": {
"label": "Erste Überschrift"
},
"icon_2": {
"label": "Zweites Symbol"
},
"image_2": {
"label": "Zweites Bild"
},
"heading_2": {
"label": "Zweite Überschrift"
},
"icon_3": {
"label": "Drittes Symbol"
},
"image_3": {
"label": "Drittes Bild"
},
"heading_3": {
"label": "Dritte Überschrift"
}
}
}
},
"settings": {
Expand Down
48 changes: 48 additions & 0 deletions locales/en.default.schema.json
View file
Expand Up @@ -1912,6 +1912,54 @@
"label": "Enable quick add button"
}
}
},
"icon_with_text": {
"name": "Icon with text",
"settings": {
"layout": {
"label": "Layout",
"options__1": {
"label": "Horizontal"
},
"options__2": {
"label": "Vertical"
}
},
"content": {
"label": "Content",
"info": "Choose an icon or add an image for each column or row."
},
"heading": {
"info": "Leave the heading label blank to hide the icon column."
},
"icon_1": {
"label": "First icon"
},
"image_1": {
"label": "First image"
},
"heading_1": {
"label": "First heading"
},
"icon_2": {
"label": "Second icon"
},
"image_2": {
"label": "Second image"
},
"heading_2": {
"label": "Second heading"
},
"icon_3": {
"label": "Third icon"
},
"image_3": {
"label": "Third image"
},
"heading_3": {
"label": "Third heading"
}
}
}
},
"settings": {
Expand Down
48 changes: 48 additions & 0 deletions locales/es.schema.json
View file
Expand Up @@ -1765,6 +1765,54 @@
"label": "Activar botón de agregado rápido"
}
}
},
"icon_with_text": {
"name": "Ícono con texto",
"settings": {
"layout": {
"label": "Diseño",
"options__1": {
"label": "Horizontal"
},
"options__2": {
"label": "Vertical"
}
},
"content": {
"label": "Contenido",
"info": "Elige un ícono o agrega una imagen para cada columna o fila."
},
"heading": {
"info": "Deja la etiqueta de encabezado en blanco para ocultar la columna del ícono."
},
"icon_1": {
"label": "Primer ícono"
},
"image_1": {
"label": "Primera imagen"
},
"heading_1": {
"label": "Primer encabezado"
},
"icon_2": {
"label": "Segundo ícono"
},
"image_2": {
"label": "Segunda imagen"
},
"heading_2": {
"label": "Segundo encabezado"
},
"icon_3": {
"label": "Tercer ícono"
},
"image_3": {
"label": "Tercera imagen"
},
"heading_3": {
"label": "Tercer encabezado"
}
}
}
},
"settings": {
Expand Down

0 comments on commit 7e696e9

Please sign in to comment.