Skip to content

Commit

Permalink
Release 4 (#211)
Browse files Browse the repository at this point in the history 
* 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 <[email protected]>
Co-authored-by: TomaszDziezykNetcentric <[email protected]>
Co-authored-by: Jonatan Lledo <[email protected]>
Co-authored-by: aem-code-sync[bot] <aem-code-sync[bot]@users.noreply.github.com>
Co-authored-by: Syb <[email protected]>

* 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 <[email protected]>

* 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 <[email protected]>

* 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 <[email protected]>
Co-authored-by: Syb Wartna <[email protected]>

* 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 <[email protected]>
Co-authored-by: Syb Wartna <[email protected]>
Co-authored-by: SantiagoHomps-NC <[email protected]>
Co-authored-by: Tomasz Dziezyk <[email protected]>
Co-authored-by: TomaszDziezykNetcentric <[email protected]>
Co-authored-by: Jonatan Lledo <[email protected]>
Co-authored-by: aem-code-sync[bot] <aem-code-sync[bot]@users.noreply.github.com>
Co-authored-by: taimurCognizant <[email protected]>
Co-authored-by: Lakshmishri <[email protected]>
Co-authored-by: Marko Vukićević <[email protected]>
  • Loading branch information
@manuel-vara @cogniSyb
@SantiagoHomps-NC @TomaszDziezykNetcentric @jonatan-lledo-netcentric @aem-code-sync @taimurCognizant @Lakshmishri @markovukiceviccn
11 people authored Jan 31, 2024
1 parent f5abc76 commit f3ff901
Show file tree
Hide file tree
Showing 25 changed files with 1,552 additions and 306 deletions.
11 changes: 1 addition & 10 deletions blocks/v2-all-trucks/v2-all-trucks.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,6 @@
margin-top: 35px;
}

.v2-all-trucks__title {
font-family: var(--ff-headline-medium);
letter-spacing: -.02em;
margin-bottom: 24px;
padding-top: 42px;
}

.redesign-v2 .section.v2-all-trucks-container .default-content-wrapper h1 + p {
letter-spacing: .01rem;
margin-bottom: 30px;
Expand Down Expand Up @@ -38,7 +31,6 @@
width: 100%;
}


/* Trucks */
.v2-all-trucks-container div.v2-all-trucks-wrapper {
padding: 0;
Expand Down Expand Up @@ -285,7 +277,6 @@

.v2-all-trucks .v2-all-trucks__truck .v2-all-trucks__truck-image picture:last-child {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
width: 100%;
Expand Down Expand Up @@ -352,7 +343,7 @@
width: auto;
}

.v2-all-trucks__selected-item-wrapper {
.v2-all-trucks__selected-item-wrapper {
display: none;
}

Expand Down
3 changes: 0 additions & 3 deletions blocks/v2-all-trucks/v2-all-trucks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,6 @@ import { createElement, getTextLabel } from '../../scripts/common.js';
const blockName = 'v2-all-trucks';

export default function decorate(block) {
const pageDescriptionHeading = document.querySelector(`.${blockName}-container > div > h1`);
pageDescriptionHeading.classList.add('with-marker', `${blockName}__title`);

const truckElement = block.querySelectorAll(`.${blockName} > div`);
truckElement.forEach((div) => {
div.classList.add(`${blockName}__truck`);
Expand Down
133 changes: 72 additions & 61 deletions blocks/v2-columns/v2-columns.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
.v2-columns-container.section--with-background {
position: relative;
}

.v2-columns__row {
flex-direction: column;
display: flex;
Expand Down Expand Up @@ -32,6 +36,7 @@
display: flex;
flex-direction: column;
padding: 40px 0;
gap: 12px;
}

.v2-columns__heading {
Expand All @@ -44,12 +49,17 @@
}

.v2-columns__column--with-text .v2-columns__heading {
margin: 12px 0;
margin: 0;
}

.v2-columns__column--with-text .pretitle {
margin-bottom: 12px;
}

.v2-columns__column--with-text .v2-columns__body {
font-size: var(--body-1-font-size);
margin: 0 0 32px;
margin-top: 0;
margin-bottom: 0;
}

.v2-columns__column--with-text .v2-columns__body a {
Expand All @@ -58,50 +68,20 @@
text-decoration: none;
}

.v2-columns__column--with-text a.button {
width: fit-content;
margin-top: 12px;
}

.v2-columns__column--with-text a.button:not(a.button:first-of-type) {
margin: 5px 0 0;
}

.v2-columns--info .v2-columns__column {
gap: 8px;
}

.v2-columns--info .icon {
margin-bottom: 8px;
}

.v2-columns--info .v2-columns__heading {
margin: 0;
}

.v2-columns--info .v2-columns__body {
margin: 0 0 22px;
}

.v2-columns--info .v2-columns__column--info-main {
gap: 24px;
.v2-columns__column--with-text .button-container {
margin: 12px 0 0;
display: flex;
flex-direction: row;
gap: 16px;
}

.v2-columns--info .v2-columns__column--info-main .v2-columns__heading {
padding-top: 24px;
.v2-columns__column--with-text a.button {
min-width: auto;
margin: 0;
}

.v2-columns--info .v2-columns__column--with-text {
padding: 0;
}

.v2-columns--info .v2-columns__row {
gap: 40px;
}

.v2-columns--info .v2-columns__button {
margin-bottom: 16px;
.v2-columns-container:not(.v2-columns-container--with-background-image) .v2-columns__column--with-text a.button:not(a.button:first-of-type) {
margin: 5px 0 0;
}

@media (min-width: 744px) {
Expand All @@ -123,42 +103,73 @@
order: unset;
}

.v2-columns:not(.v2-columns--info) .v2-columns__column--with-text {
.v2-columns .v2-columns__column--with-text {
padding: 0 56px;
}

.v2-columns:not(.v2-columns--info) .v2-columns__column--with-text .v2-columns__heading {
margin: 24px 0 12px;
.v2-columns .v2-columns__column--with-text .v2-columns__heading {
font-size: var(--headline-1-font-size);
}

.v2-columns__column--with-text .v2-columns__body {
margin: 0 0 14px;
.v2-columns__column--with-text ul.v2-columns__body {
margin: 0;
}
}

.v2-columns--info .v2-columns__row {
justify-content: space-between;
align-items: flex-start;
}
/* TRUCKS VARIATIONS STYLING */

.v2-columns--info .v2-columns__body:last-child {
margin: 0;
.redesign-v2 .v2-columns-container--with-background-image .v2-columns-wrapper {
padding: 40px 16px;
width: 100%;
}

.redesign-v2 .section--with-background.v2-columns-container--with-background-image > picture img {
position: relative;
aspect-ratio: 1;
}

.v2-columns-container--with-background-image .v2-columns__column--with-text {
padding: 24px 0 0;
}

.v2-columns.v2-columns--with-background-image .v2-columns__heading.with-marker::before {
top: -24px;
}


/* stylelint-disable-next-line no-descending-specificity */
.v2-columns.v2-columns--with-background-image .button-container a.button,
.v2-columns.v2-columns--with-background-image .button-container a.button:not(a.button:first-of-type) {
width: 100%;
}

@media (min-width: 744px) {
.v2-columns__column--with-text .button-container {
margin: 20px 0 0;
}

.v2-columns--info .v2-columns__column {
max-width: 245px;
.redesign-v2 .v2-columns-container--with-background-image .v2-columns-wrapper {
background-color: var(--c-primary-white);
position: absolute;
top: calc(200% * 0.125);
max-width: 485px;
padding: 40px;
margin-left: 72px;
}

.v2-columns--info .v2-columns__column--info-main {
align-self: center;
max-width: 329px;
width: 100%;
.v2-columns.v2-columns--with-background-image .button-container a.button,
.v2-columns.v2-columns--with-background-image .button-container a.button:not(a.button:first-of-type) {
max-width: 140px;
}
}

@media (min-width: 1200px) {
.v2-columns--info {
padding: 20px 40px;
background: var(--c-primary-white);
.redesign-v2 .v2-columns-container--with-background-image .v2-columns-wrapper {
left: calc(calc(100% - var(--wrapper-width)) / 2);
margin-left: 56px;
}

.redesign-v2 .section--with-background.v2-columns-container--with-background-image > picture img {
aspect-ratio: 12 / 7;
}
}
73 changes: 34 additions & 39 deletions blocks/v2-columns/v2-columns.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,15 @@
import { createElement, variantsClassesToBEM } from '../../scripts/common.js';
import { variantsClassesToBEM, createElement } from '../../scripts/common.js';

export default async function decorate(block) {
const blockParent = block.parentElement.parentElement;
const blockName = 'v2-columns';
const variantClasses = ['info'];

const variantClasses = ['with-background-image'];
variantsClassesToBEM(block.classList, variantClasses, blockName);

const isBackgroundImageVariant = block.classList.contains(`${blockName}--with-background-image`);
const hasHeader = blockParent.classList.contains('header-with-mark');

const rows = [...block.querySelectorAll(':scope > div')];
const columns = [...block.querySelectorAll(':scope > div > div')];

Expand All @@ -16,7 +21,7 @@ export default async function decorate(block) {
col.classList.add(`${blockName}__column`);

const picture = col.querySelector('picture');
const allTextElmts = col.querySelectorAll('p');
const allTextElmts = col.querySelectorAll('p, ul, ol');
const bodyElmts = [];

if (picture) {
Expand All @@ -35,14 +40,35 @@ export default async function decorate(block) {
});
bodyElmts.forEach((e) => e.classList.add(`${blockName}__body`));

block.querySelectorAll(`ul.${blockName}__body li`).forEach((item) => {
item.classList.add('li--hyphen');
});
const buttons = [...col.querySelectorAll('.button-container a')];
buttons.forEach((btn) => {
btn.classList.add('button', 'button--large', 'button--primary');

if (btn.parentElement.classList.contains('button-container')) {
btn.parentElement.replaceWith(btn);
if (isBackgroundImageVariant) {
blockParent.classList.add(`${blockName}-container--with-background-image`);
const btnSection = createElement('div', { classes: 'button-container' });

buttons.forEach((btn) => {
btn.classList.add('button--large');
const btnContainer = btn.closest('.button-container');
btnContainer.replaceWith(btn);
btnSection.append(btn);
});
if (!picture) col.append(btnSection);

if (hasHeader) {
const defaultContent = blockParent.querySelector('.default-content-wrapper');
const header = [...defaultContent.querySelectorAll('h1, h2, h3, h4, h5, h6')];
header[0].classList.add(`${blockName}__body-header`, 'with-marker');
bodyElmts[0].insertAdjacentElement('beforebegin', header[0]);
defaultContent.remove();
}
});
} else {
buttons.forEach((btn) => {
btn.classList.add('button--large');
});
}

const headings = [...col.querySelectorAll('h1, h2, h3, h4, h5, h6')];
headings.forEach((heading) => heading.classList.add(`${blockName}__heading`, 'h2'));
Expand All @@ -64,35 +90,4 @@ export default async function decorate(block) {
prevEl.replaceWith(pretitle);
}
});

// logic for info variant
if (block.classList.contains(`${blockName}--info`)) {
const headings = [...block.querySelectorAll('h3, h4, h5, h6')];
const h2List = [...block.querySelectorAll('h2')];

headings.forEach((h) => {
h.classList.add('h5');
h.classList.remove('h2');
});

h2List.forEach((h) => {
h.classList.add('with-marker', 'h2');
h.classList.remove('h1');
h.closest(`.${blockName}__column`)?.classList.add(`${blockName}__column--info-main`);
});

// replacing headings (h3, h4, h5, h6) with strong so the block will not break semantic
// (example breaking semantic: col 1 -> h5, col 2 -> h2)
headings.forEach((heading) => {
const newHeadingEl = createElement('strong', { classes: [...heading.classList] });
newHeadingEl.innerHTML = heading.innerHTML;
heading.replaceWith(newHeadingEl);
});

const buttons = [...block.querySelectorAll('.button-container a')];
buttons.forEach((button) => {
button.classList.add('standalone-link', `${blockName}__button`);
button.classList.remove('button', 'button--primary', 'button--large');
});
}
}
Loading

0 comments on commit f3ff901

Please sign in to comment.