V2 Columns Block variation #133 #186

SantiagoHomps-NC · 2023-12-12T13:27:21Z

Test URLs:

aem-code-sync · 2023-12-12T13:27:24Z

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

Re-run PSI checks
Re-sync branch

Commits

68c65e7 ✅ (latest)
e89b0ab ✅
904d3bc ✅
2198e0f ✅
e4fc304 ✅
ee77e6f ✅
3dc500e ✅
46e45a8 ✅

aem-code-sync · 2023-12-12T13:30:12Z

Page	Scores	Audits	Google
/drafts/shomps/columns-variation

blocks/v2-columns/v2-columns.css

cogniSyb · 2023-12-12T15:16:34Z

blocks/v2-columns/v2-columns.css

+  margin: 28px 0 10px;
+}
+
+.v2-columns.v2-columns--trucks .v2-columns__heading::before {


This should be removed in favour of header-with-mark or by expanding the selector of that style

This is done

blocks/v2-columns/v2-columns.css

aem-code-sync · 2023-12-19T10:14:52Z

Page	Scores	Audits	Google
/drafts/shomps/columns-variation

cogniSyb · 2023-12-19T12:36:59Z

styles/styles.css

+  margin-bottom: 0;
+}
+
+.redesign-v2  li::before {


Rather use ::marker instead.

This causes regression as it’s too generic:

Can you think of a selector that makes sense here so we can reuse this styling in other places? Maybe adding a generic class to the ul would work as well.

blocks/v2-columns/v2-columns.css

cogniSyb · 2023-12-19T12:44:49Z

blocks/v2-columns/v2-columns.css

+  width: 100%;
+}
+
+.redesign-v2 .section--with-background.v2-columns__trucks > picture img {


Use the class generated by variantsClassesToBEM here instead

cogniSyb · 2023-12-19T12:45:09Z

blocks/v2-columns/v2-columns.css

+    margin-left: 56px;
+  }
+
+  .redesign-v2 .section--with-background.v2-columns__trucks > picture img {


Use the class generated by variantsClassesToBEM here instead

cogniSyb · 2023-12-19T12:45:54Z

blocks/v2-columns/v2-columns.js

-        btn.parentElement.replaceWith(btn);
+    if (isTruckVariant) {
+      if (!hasHeader) bodyElmts[0].classList.add('no-header');
+      blockParent.classList.add(`${blockName}__trucks`);


This shouldn’t be here ideally. We’re using variantsClassesToBEM already

The class is required at section level to style the background image , however added the variant class name to section

blocks/v2-columns/v2-columns.css

cogniSyb · 2023-12-19T13:04:51Z

blocks/v2-columns/v2-columns.css

+/* stylelint-disable-next-line no-descending-specificity */
+.v2-columns.v2-columns--trucks .v2-columns__btn-section a.button,
+.v2-columns.v2-columns--trucks .v2-columns__btn-section a.button:not(a.button:first-of-type) {
+  margin: 16px 0 0;


This margin should be handled instead by gap, right?

Yep this is removed

blocks/v2-columns/v2-columns.css

blocks/v2-columns/v2-columns.js

* Update fstab.yaml for redesign * change url and sharepoint to upstream urls * Inpage navigation is in reversed order on Firefox #173 (#178) * fix Firefox issue with sorting * fix naming issues * refactor focus state, button styles * fix overlap issue * Hero V2 Block displays different images for mobile and desktop. #106 (#179) * refactor naming structure * refactor adaptive images mechanism * Icon cards block (#181) * #509 Fix displaying header on dealer page * fix done * one trust position ix * Embed block match NZ one * Update feed.xml * Fix createElement() v1-Cards * Update feed.xml * Update release.yml * columns block adapted * icon cards working * css clean * adjustements * last changes * specific class * btn state styling * comments corrected * secondary btn margin corrected * secondary btn class added * cleanup --------- Co-authored-by: Tomasz Dziezyk <tomasz.dziezyk@netcentric.biz> Co-authored-by: TomaszDziezykNetcentric <125962117+TomaszDziezykNetcentric@users.noreply.github.com> Co-authored-by: Jonatan Lledo <117984204+jonatan-lledo-netcentric@users.noreply.github.com> Co-authored-by: aem-code-sync[bot] <aem-code-sync[bot]@users.noreply.github.com> Co-authored-by: Syb <133873665+cogniSyb@users.noreply.github.com> * The pop-up of the video displayed clicking on the Play video button is smaller and the thumbnail is cutout #182 (#183) * iPhone/iPad - Icon Cards - The local video in the video pop-up cannot be played and is incorrectly displayed #184 (#185) * fix #184: use <video> tag for video in modal * fix modal close button * fix override fullscreen play for safari * refactor setting attributes * Opening up Images will display an incorrect default state on the Image grid carousel #169 (#193) * Hero variant for Solutions page #45 (#197) * hero variants added * refactored changes to alltrucks block * comments addressed * color confusion * make btn color always white * button style refactor * margin solved * pdp edge cases * Tabbed Carousel variant for wheelbase #190 (#196) * add new variant for tabbed carousel * 190 fadeIn effect with no scroll * 190 Fix line more than 100 chars * 190 fix index overflow * Figcap conditional add, default color & tab items wider * list style none & setCarousel index-1 too --------- Co-authored-by: Jonatan Lledo <117984204+jonatan-lledo-netcentric@users.noreply.github.com> * Pencil Promo block #108 (#195) * #108 - Pencil promo and banner promo block * #108 - Add cursor: pointer to the block * #108 - Add pencil banner links styles * #108 - Change link hover color to acheive better contrast * Applied comments & each block cares by itself only * fixed alignment issue in line 288 * fix lint issue * Fix an issue if p Element is not present inside content * Style issues fix * remove an unnecessary search for h1 & its styling * move the hover effect 1 level up & a bit of code clean up --------- Co-authored-by: Jonatan Lledo <117984204+jonatan-lledo-netcentric@users.noreply.github.com> * fix alignment, add hover and focus state * V2 Columns Block variation #133 (#186) --------- Co-authored-by: aem-code-sync[bot] <aem-code-sync[bot]@users.noreply.github.com> Co-authored-by: Lakshmishri <lakshmi.shri.v.a@gmail.com> Co-authored-by: Syb Wartna <sybren.wartna@cognizant.com> * Add "My Assets" functionality #201 (#202) * add my assets to sidekick * add custom viewport configurations for sidekick library * Powertrain V2 Slider Block #147 (#200) * add block * add new section background color --------- Co-authored-by: Syb <133873665+cogniSyb@users.noreply.github.com> Co-authored-by: Syb Wartna <sybren.wartna@cognizant.com> Co-authored-by: SantiagoHomps-NC <103571932+SantiagoHomps-NC@users.noreply.github.com> Co-authored-by: Tomasz Dziezyk <tomasz.dziezyk@netcentric.biz> Co-authored-by: TomaszDziezykNetcentric <125962117+TomaszDziezykNetcentric@users.noreply.github.com> Co-authored-by: Jonatan Lledo <117984204+jonatan-lledo-netcentric@users.noreply.github.com> Co-authored-by: aem-code-sync[bot] <aem-code-sync[bot]@users.noreply.github.com> Co-authored-by: taimurCognizant <150666850+taimurCognizant@users.noreply.github.com> Co-authored-by: Lakshmishri <lakshmi.shri.v.a@gmail.com> Co-authored-by: Marko Vukićević <139957716+markovukiceviccn@users.noreply.github.com>

* change url and sharepoint to upstream urls * Release 4 (#211) * Update fstab.yaml for redesign * change url and sharepoint to upstream urls * Inpage navigation is in reversed order on Firefox #173 (#178) * fix Firefox issue with sorting * fix naming issues * refactor focus state, button styles * fix overlap issue * Hero V2 Block displays different images for mobile and desktop. #106 (#179) * refactor naming structure * refactor adaptive images mechanism * Icon cards block (#181) * #509 Fix displaying header on dealer page * fix done * one trust position ix * Embed block match NZ one * Update feed.xml * Fix createElement() v1-Cards * Update feed.xml * Update release.yml * columns block adapted * icon cards working * css clean * adjustements * last changes * specific class * btn state styling * comments corrected * secondary btn margin corrected * secondary btn class added * cleanup --------- Co-authored-by: Tomasz Dziezyk <tomasz.dziezyk@netcentric.biz> Co-authored-by: TomaszDziezykNetcentric <125962117+TomaszDziezykNetcentric@users.noreply.github.com> Co-authored-by: Jonatan Lledo <117984204+jonatan-lledo-netcentric@users.noreply.github.com> Co-authored-by: aem-code-sync[bot] <aem-code-sync[bot]@users.noreply.github.com> Co-authored-by: Syb <133873665+cogniSyb@users.noreply.github.com> * The pop-up of the video displayed clicking on the Play video button is smaller and the thumbnail is cutout #182 (#183) * iPhone/iPad - Icon Cards - The local video in the video pop-up cannot be played and is incorrectly displayed #184 (#185) * fix #184: use <video> tag for video in modal * fix modal close button * fix override fullscreen play for safari * refactor setting attributes * Opening up Images will display an incorrect default state on the Image grid carousel #169 (#193) * Hero variant for Solutions page #45 (#197) * hero variants added * refactored changes to alltrucks block * comments addressed * color confusion * make btn color always white * button style refactor * margin solved * pdp edge cases * Tabbed Carousel variant for wheelbase #190 (#196) * add new variant for tabbed carousel * 190 fadeIn effect with no scroll * 190 Fix line more than 100 chars * 190 fix index overflow * Figcap conditional add, default color & tab items wider * list style none & setCarousel index-1 too --------- Co-authored-by: Jonatan Lledo <117984204+jonatan-lledo-netcentric@users.noreply.github.com> * Pencil Promo block #108 (#195) * #108 - Pencil promo and banner promo block * #108 - Add cursor: pointer to the block * #108 - Add pencil banner links styles * #108 - Change link hover color to acheive better contrast * Applied comments & each block cares by itself only * fixed alignment issue in line 288 * fix lint issue * Fix an issue if p Element is not present inside content * Style issues fix * remove an unnecessary search for h1 & its styling * move the hover effect 1 level up & a bit of code clean up --------- Co-authored-by: Jonatan Lledo <117984204+jonatan-lledo-netcentric@users.noreply.github.com> * fix alignment, add hover and focus state * V2 Columns Block variation #133 (#186) --------- Co-authored-by: aem-code-sync[bot] <aem-code-sync[bot]@users.noreply.github.com> Co-authored-by: Lakshmishri <lakshmi.shri.v.a@gmail.com> Co-authored-by: Syb Wartna <sybren.wartna@cognizant.com> * Add "My Assets" functionality #201 (#202) * add my assets to sidekick * add custom viewport configurations for sidekick library * Powertrain V2 Slider Block #147 (#200) * add block * add new section background color --------- Co-authored-by: Syb <133873665+cogniSyb@users.noreply.github.com> Co-authored-by: Syb Wartna <sybren.wartna@cognizant.com> Co-authored-by: SantiagoHomps-NC <103571932+SantiagoHomps-NC@users.noreply.github.com> Co-authored-by: Tomasz Dziezyk <tomasz.dziezyk@netcentric.biz> Co-authored-by: TomaszDziezykNetcentric <125962117+TomaszDziezykNetcentric@users.noreply.github.com> Co-authored-by: Jonatan Lledo <117984204+jonatan-lledo-netcentric@users.noreply.github.com> Co-authored-by: aem-code-sync[bot] <aem-code-sync[bot]@users.noreply.github.com> Co-authored-by: taimurCognizant <150666850+taimurCognizant@users.noreply.github.com> Co-authored-by: Lakshmishri <lakshmi.shri.v.a@gmail.com> Co-authored-by: Marko Vukićević <139957716+markovukiceviccn@users.noreply.github.com> * change url and sharepoint to upstream urls --------- Co-authored-by: Syb Wartna <sybren.wartna@cognizant.com> Co-authored-by: Lakshmishri <lakshmi.shri.v.a@gmail.com> Co-authored-by: Syb <133873665+cogniSyb@users.noreply.github.com> Co-authored-by: SantiagoHomps-NC <103571932+SantiagoHomps-NC@users.noreply.github.com> Co-authored-by: Tomasz Dziezyk <tomasz.dziezyk@netcentric.biz> Co-authored-by: TomaszDziezykNetcentric <125962117+TomaszDziezykNetcentric@users.noreply.github.com> Co-authored-by: Jonatan Lledo <117984204+jonatan-lledo-netcentric@users.noreply.github.com> Co-authored-by: aem-code-sync[bot] <aem-code-sync[bot]@users.noreply.github.com> Co-authored-by: taimurCognizant <150666850+taimurCognizant@users.noreply.github.com> Co-authored-by: Marko Vukićević <139957716+markovukiceviccn@users.noreply.github.com>

SantiagoHomps-NC requested review from cogniSyb, Lakshmishri, TomaszDziezykNetcentric, taimurCognizant and markovukiceviccn December 12, 2023 14:49

SantiagoHomps-NC marked this pull request as ready for review December 12, 2023 14:49

markovukiceviccn approved these changes Dec 12, 2023

View reviewed changes

cogniSyb requested changes Dec 12, 2023

View reviewed changes

blocks/v2-columns/v2-columns.css Outdated Show resolved Hide resolved

blocks/v2-columns/v2-columns.css Outdated Show resolved Hide resolved

cogniSyb reviewed Dec 12, 2023

View reviewed changes

cogniSyb requested changes Dec 14, 2023

View reviewed changes

blocks/v2-columns/v2-columns.css Show resolved Hide resolved

aem-code-sync bot temporarily deployed to 133-columns-variation December 19, 2023 10:14 Inactive

cogniSyb changed the title ~~Columns trucks variation~~ V2 Columns Block variation #133 Dec 19, 2023

cogniSyb added the FR Functional requirement label Dec 19, 2023

aem-code-sync bot temporarily deployed to 133-columns-variation December 19, 2023 12:45 Inactive

Lakshmishri requested a review from cogniSyb December 19, 2023 12:47

aem-code-sync bot temporarily deployed to 133-columns-variation December 19, 2023 13:14 Inactive

cogniSyb requested changes Dec 19, 2023

View reviewed changes

aem-code-sync bot temporarily deployed to 133-columns-variation December 20, 2023 08:25 Inactive

Lakshmishri requested a review from cogniSyb December 20, 2023 08:29

cogniSyb approved these changes Dec 21, 2023

View reviewed changes

aem-code-sync bot and others added 7 commits January 15, 2024 16:00

Update feed.xml

46e45a8

Block finished

3dc500e

comments done

ee77e6f

change image ratio

e4fc304

change specificity for header with mark

2198e0f

add generic class for list hyphen

904d3bc

review comment changes

e89b0ab

cogniSyb force-pushed the 133-columns-variation branch from bb6a6aa to 6f5645c Compare January 15, 2024 15:35

aem-code-sync bot temporarily deployed to 133-columns-variation January 15, 2024 15:35 Inactive

fix alignment

68c65e7

cogniSyb force-pushed the 133-columns-variation branch from 6f5645c to 68c65e7 Compare January 15, 2024 16:49

aem-code-sync bot deployed to 133-columns-variation January 15, 2024 16:49 View deployment

cogniSyb merged commit cd88cf9 into develop Jan 17, 2024
2 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

V2 Columns Block variation #133 #186

V2 Columns Block variation #133 #186

SantiagoHomps-NC commented Dec 12, 2023 •

edited

Loading

aem-code-sync bot commented Dec 12, 2023 •

edited

Loading

aem-code-sync bot commented Dec 12, 2023 •

edited

Loading

cogniSyb Dec 12, 2023

Lakshmishri Dec 19, 2023

aem-code-sync bot commented Dec 19, 2023 •

edited

Loading

cogniSyb Dec 19, 2023

cogniSyb Dec 19, 2023

cogniSyb Dec 19, 2023

cogniSyb Dec 19, 2023

Lakshmishri Dec 20, 2023

cogniSyb Dec 19, 2023

Lakshmishri Dec 20, 2023

V2 Columns Block variation #133 #186

V2 Columns Block variation #133 #186

Conversation

SantiagoHomps-NC commented Dec 12, 2023 • edited Loading

aem-code-sync bot commented Dec 12, 2023 • edited Loading

aem-code-sync bot commented Dec 12, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aem-code-sync bot commented Dec 19, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SantiagoHomps-NC commented Dec 12, 2023 •

edited

Loading

aem-code-sync bot commented Dec 12, 2023 •

edited

Loading

aem-code-sync bot commented Dec 12, 2023 •

edited

Loading

aem-code-sync bot commented Dec 19, 2023 •

edited

Loading