diff --git a/blocks/v2-resources-gallery/v2-resources-gallery.css b/blocks/v2-resources-gallery/v2-resources-gallery.css
index 24290032..6168194e 100644
--- a/blocks/v2-resources-gallery/v2-resources-gallery.css
+++ b/blocks/v2-resources-gallery/v2-resources-gallery.css
@@ -1,178 +1,150 @@
.v2-resources-gallery {
margin-top: 64px;
margin-bottom: 64px;
+ display: flex;
+ gap: 40px;
+ flex-flow: column;
}
-.v2-resources-gallery__row {
+.v2-resources-gallery__heading-wrapper {
+ margin-bottom: 0;
display: flex;
+ flex-flow: column;
+ flex-wrap: wrap;
gap: 8px;
- overflow-x: scroll;
- scroll-snap-type: x mandatory;
}
-.v2-resources-gallery__row.hidden {
+.v2-resources-gallery__button {
+ display: flex;
+ font-size: var(--f-button-font-size);
+ background: none;
+ outline: none;
+ align-self: flex-start;
+}
+
+.v2-resources-gallery__button .icon-minus {
display: none;
}
-.v2-resources-gallery__heading {
- justify-content: space-between;
- align-items: center;
- margin-bottom: 24px;
- flex-wrap: wrap;
- overflow-x: initial;
+.v2-resources-gallery__button[aria-expanded="true"] .icon-minus {
+ display: block;
}
-.v2-resources-gallery__item {
- flex: none;
- scroll-snap-align: center;
- width: 100%;
- max-width: 255px;
+.v2-resources-gallery__button[aria-expanded="true"] .icon-plus {
+ display: none;
}
-.v2-resources-gallery img {
- border-radius: 8px;
+.v2-resources-gallery__heading {
+ font: var(--f-heading-5-font-size) / var(--f-heading-5-line-height) var(--ff-volvo-novum-medium);
+ letter-spacing: 0.25px;
+ margin-bottom: 0;
}
-.v2-resources-gallery__heading .v2-resources-gallery__item {
- margin-right: 100%;
+.v2-resources-gallery__video-list {
+ display: grid;
+ list-style-type: none;
+ grid-gap: 8px;
+ grid-template-columns: repeat(6, calc(100% - 100px));
+ overflow-x: scroll;
+ scroll-snap-type: x mandatory;
+ scroll-snap-align: start;
}
-.v2-resources-gallery .v2-resources-gallery__item h3 {
+.v2-resources-gallery__video-list-item {
+ flex: none;
+ scroll-snap-align: start;
+ display: flex;
+ flex-direction: column;
+}
+
+.v2-resources-gallery__video-title {
font: var(--f-body-2-font-size) / var(--f-body-2-line-height) var(--ff-volvo-novum);
letter-spacing: var(--f-body-2-letter-spacing);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 365px;
+ margin-bottom: 8px;
}
-.v2-resources-gallery .v2-resources-gallery__item h3 + p {
+.v2-resources-gallery__video-list p {
font: var(--f-body-font-size) / var(--f-body-line-height) var(--ff-volvo-novum);
letter-spacing: var(--f-body-letter-spacing);
- color: var(--c-grey-4);
-}
-
-.section--black-background .v2-resources-gallery__item--has-documents .button-container + p {
- color: var(--c-grey-2);
-}
-
-.section--black-background .v2-resources-gallery .v2-resources-gallery__item h3 + p {
- color: var(--c-grey-2);
-}
-
-.v2-resources-gallery__heading .v2-resources-gallery__item > * {
- font-size: var(--f-heading-5-font-size);
- letter-spacing: var(--f-heading-4-letter-spacing);
- text-transform: capitalize;
- margin-bottom: 8px;
-}
-
-.v2-resources-gallery .v2-resources-gallery__row--has-video:has(+ .v2-resources-gallery__rows-wrapper),
-.v2-resources-gallery .v2-resources-gallery__row--has-video:has(+ .v2-resources-gallery__row--has-video.hidden) {
- margin-bottom: 40px;
-}
-
-.v2-resources-gallery__toggle-resources {
- font-size: var(--f-button-font-size);
- background: none;
- border: none;
- outline: none;
- text-transform: uppercase;
- margin-right: auto;
- margin-left: 16px;
-}
-
-.v2-resources-gallery__toggle-resources-icon {
- background: var(--c-main-black);
- height: 18px;
- position: relative;
- width: 1px;
- border-radius: .5px;
- margin-left: 10px;
- transition: background-color .2s ease;
- margin-right: 5px;
-}
-
-.v2-resources-gallery__toggle-resources-icon::after {
- background: var(--c-main-black);
- content: "";
- height: 1px;
- left: -8.5px;
- position: absolute;
- top: 8.5px;
- width: 18px;
- border-radius: .5px;
-}
-
-.section--black-background .v2-resources-gallery__toggle-resources-icon,
-.section--black-background .v2-resources-gallery__toggle-resources-icon::after {
- background: var(--c-white);
+ color: var(--text-subtle);
+ margin: 0;
}
-.v2-resources-gallery__toggle-resources-icon:has(+ button[aria-expanded="true"]) {
- background-color: var(--c-white);
+.v2-resources-gallery__video-list .v2-resources-gallery__video-image {
+ margin: 0 0 16px;
}
-.section--black-background .v2-resources-gallery__toggle-resources-icon:has(+ button[aria-expanded="true"]) {
- background-color: var(--c-black);
+.v2-resources-gallery__video-image img {
+ border-radius: 8px;
+ aspect-ratio: 255/143;
+ object-fit: cover;
+ width: 100%;
+ height: 100%;
}
-
-.v2-resources-gallery__row--has-documents {
- width: calc(50% - 32px);
- overflow-x: hidden;
- scroll-snap-type: unset;
- flex-grow: 1;
+.v2-resources-gallery__document-list {
+ list-style-type: none;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-gap: 40px 32px;
}
-.v2-resources-gallery__rows-wrapper {
+.v2-resources-gallery__document-list-item {
display: flex;
- flex-wrap: wrap;
- gap: 40px 32px;
-}
-
-.v2-resources-gallery__item--has-documents .button {
- padding-left: 32px;
+ flex-flow: column;
+ gap: 8px;
}
-.v2-resources-gallery__item--has-documents .button-container {
- margin: 0;
+.v2-resources-gallery__document-list a.button.tertiary,
+.v2-resources-gallery__document-list p {
+ font: var(--f-body-font-size) / var(--f-body-line-height) var(--ff-volvo-novum);
+ letter-spacing: 0.5px;
}
-.v2-resources-gallery__item--has-documents .button-container a.tertiary {
- font: var(--f-body-font-size) / var(--f-body-line-height) var(--ff-volvo-novum);
- letter-spacing: var(--f-body-letter-spacing);
+.v2-resources-gallery__document-list a.button.tertiary {
color: var(--c-cta-blue-default);
text-decoration: underline;
text-underline-offset: 4px;
text-transform: capitalize;
+ align-self: flex-start;
+ display: flex;
+ gap: 8px;
}
-.section--black-background .v2-resources-gallery__item--has-documents .button-container a.tertiary {
- color: var(--c-cta-blue-default);
-}
-
-.v2-resources-gallery__item--has-documents .button-container a.button.tertiary:hover {
+.v2-resources-gallery__heading-wrapper button.v2-resources-gallery__button.tertiary:hover,
+.v2-resources-gallery__document-list .v2-resources-gallery__document-list-item a.button.tertiary:hover {
background-color: transparent;
-}
-
-.v2-resources-gallery__heading .v2-resources-gallery__toggle-resources.tertiary {
- margin-left: 8px;
outline: none;
}
-.v2-resources-gallery__heading button.v2-resources-gallery__toggle-resources.tertiary:hover {
- background-color: transparent;
+.v2-resources-gallery__heading-wrapper button.v2-resources-gallery__button.tertiary:hover {
text-decoration: none;
- margin-left: 8px;
- outline: none;
}
-/* stylelint-disable-next-line no-descending-specificity */
-.v2-resources-gallery__item--has-documents .button-container + p {
- padding-left: 32px;
+.v2-resources-gallery__document-list p {
margin: 0;
- color: var(--c-grey-4);
+ color: var(--text-subtle);
+ padding-left: 32px;
+}
+
+.v2-resources-gallery__document-list-item--hide,
+.v2-resources-gallery__video-list-item--hide {
+ display: none;
+}
+
+.v2-resources-gallery__list--expand .v2-resources-gallery__video-list {
+ grid-template-columns: repeat(1, 1fr);
+ grid-auto-flow: row;
+ grid-row-gap: 40px;
+}
+
+.v2-resources-gallery__list--expand .v2-resources-gallery__document-list-item--hide,
+.v2-resources-gallery__list--expand .v2-resources-gallery__video-list-item--hide {
+ display: flex;
}
/* Hide scrollbar for Chrome, Safari and Opera */
@@ -187,94 +159,35 @@ html {
}
@media (min-width: 744px) {
- .v2-resources-gallery__row {
- display: flex;
- gap: 16px;
- }
-
- .v2-resources-gallery__rows-wrapper {
- gap: 48px 80px;
- }
-
- .v2-resources-gallery__item {
- width: 33.33%;
- max-width: unset;
- }
-
- .v2-resources-gallery__rows-wrapper .v2-resources-gallery__item--has-documents {
- width: 100%;
- }
-
- .v2-resources-gallery__row--has-documents {
- width: calc(33.33% - 32px);
- }
-
- .v2-resources-gallery__heading .v2-resources-gallery__item {
- margin-right: auto;
+ .v2-resources-gallery__heading-wrapper {
+ flex-flow: row;
+ gap: 40px;
+ align-items: center;
}
.v2-resources-gallery__heading {
- flex-wrap: initial;
- justify-content: flex-end;
+ flex: 1;
}
- .v2-resources-gallery__toggle-resources {
- margin-right: unset;
- margin-left: 0;
- min-width: 100px;
+ .v2-resources-gallery__video-list {
+ grid-template-columns: repeat(6, calc(100% / 2.80));
}
- .v2-resources-gallery__toggle-resources-icon {
- right: -32px;
+ .v2-resources-gallery__document-list {
+ grid-template-columns: repeat(3, 1fr);
+ grid-column-gap: inherit;
}
- .v2-resources-gallery__heading .v2-resources-gallery__toggle-resources.tertiary {
- margin-right: 0;
- text-indent: 20px;
- min-width: 110px;
- }
-
- .v2-resources-gallery__rows-wrapper .v2-resources-gallery__row--has-documents {
- width: calc(33.33% - 80px);
- flex-grow: 1;
- }
-
- .v2-resources-gallery__rows-wrapper .v2-resources-gallery__row--has-documents:last-child {
- flex-grow: unset;
- width: calc(33.33% - 48px);
- }
-
- .v2-resources-gallery__rows-wrapper .v2-resources-gallery__row--has-documents:has( + .v2-resources-gallery__row--has-documents:last-child) {
- flex-grow: unset;
- width: calc(33.33% - 52px);
+ .v2-resources-gallery__list--expand .v2-resources-gallery__video-list {
+ grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1200px) {
- .v2-resources-gallery__row {
- gap: 80px;
- max-width: unset;
- width: 100%;
- overflow: hidden;
- }
-
- .v2-resources-gallery__item {
- max-width: unset;
- width: calc(33.33% - 80px);
- flex-grow: 1;
- }
-
- .v2-resources-gallery__toggle-resources-icon {
- right: -96px;
- }
-
- .v2-resources-gallery__rows-wrapper .v2-resources-gallery__item--has-documents {
- display: flex;
- align-items: center;
- }
-
- .v2-resources-gallery__item--has-documents .button-container + p {
- padding-left: 8px;
+ .v2-resources-gallery__video-list {
+ grid-template-columns: repeat(3, 1fr);
+ overflow-x: unset;
+ grid-auto-flow: row;
}
}
diff --git a/blocks/v2-resources-gallery/v2-resources-gallery.js b/blocks/v2-resources-gallery/v2-resources-gallery.js
index cffe4dda..1747644e 100644
--- a/blocks/v2-resources-gallery/v2-resources-gallery.js
+++ b/blocks/v2-resources-gallery/v2-resources-gallery.js
@@ -1,113 +1,107 @@
import { wrapImageWithVideoLink, selectVideoLink, isVideoLink } from '../../scripts/video-helper.js';
-import { createElement } from '../../scripts/common.js';
+import { createElement, getTextLabel, unwrapDivs } from '../../scripts/common.js';
const blockName = 'v2-resources-gallery';
export default function decorate(block) {
const blockHeading = block.querySelector('div:first-child');
- blockHeading.classList.add(`${blockName}__heading`);
+ blockHeading.classList.add(`${blockName}__heading-wrapper`);
+ const title = blockHeading.querySelector('h4');
+ title?.classList.add(`${blockName}__heading`);
+ unwrapDivs(blockHeading);
const viewAllButton = createElement('button', {
- classes: [`${blockName}__toggle-resources`, 'tertiary'],
- props: {
- type: 'button', title: 'Toggle resources list',
- },
+ classes: [`${blockName}__button`, 'tertiary'],
+ props: { 'aria-expanded': false },
});
+ viewAllButton.innerHTML = `
+
+
+
+
+
+
+ ${getTextLabel('view all')}
+ `;
- const documentRowsWrapper = createElement('div', {
- classes: `${blockName}__rows-wrapper`,
- });
-
- block.append(documentRowsWrapper);
+ viewAllButton.addEventListener('click', () => {
+ const buttonText = viewAllButton.lastElementChild;
- const viewAllIcon = createElement('i', {
- classes: `${blockName}__toggle-resources-icon`,
+ if (viewAllButton.ariaExpanded === 'true') {
+ viewAllButton.ariaExpanded = 'false';
+ buttonText.innerText = getTextLabel('view all');
+ block.classList.remove(`${blockName}__list--expand`);
+ } else {
+ viewAllButton.ariaExpanded = 'true';
+ buttonText.innerText = getTextLabel('view less');
+ block.classList.add(`${blockName}__list--expand`);
+ }
});
- viewAllButton.innerText = 'view all';
- viewAllButton.setAttribute('aria-expanded', 'false');
-
- // Go through all rows
- [...block.children].forEach((row) => [...row.children].forEach((elem) => {
- // Add row and item classes accordingly
- row.classList.add(`${blockName}__row`);
- elem.classList.add(`${blockName}__item`);
+ blockHeading.append(viewAllButton);
- // give p containing the image a specific class
- const picture = elem.querySelector('picture');
- if (picture && picture.closest('p')) picture.closest('p').classList.add('image');
+ const videoWrapper = createElement('ul', { classes: `${blockName}__video-list` });
+ const documentWrapper = createElement('ul', { classes: `${blockName}__document-list` });
+ const rows = block.querySelectorAll(':scope > div > div');
- const links = elem.querySelectorAll('a');
- const videos = [...links].filter((link) => isVideoLink(link));
+ rows.forEach((row) => {
+ const picture = row.querySelector('picture');
+ const document = row.querySelector('.icon-documents');
- if (videos.length) {
- // display image as link with play icon
- const selectedLink = selectVideoLink(videos);
- row.classList.add(`${blockName}__row--has-video`);
- elem.classList.add(`${blockName}__item--has-video`);
+ if (picture) {
+ const listEle = createElement('li', { classes: `${blockName}__video-list-item` });
+ listEle.innerHTML = row.innerHTML;
- if (selectedLink) {
- picture.after(selectedLink);
- wrapImageWithVideoLink(selectedLink, picture);
- }
+ const videos = [...listEle.querySelectorAll('a')].filter((link) => isVideoLink(link));
- // remove all the videos links and exclude the selected one
- videos.forEach((link) => link !== selectedLink && link.parentElement.remove());
- } else {
- row.classList.add(`${blockName}__row--has-documents`);
- elem.classList.add(`${blockName}__item--has-documents`);
- blockHeading.classList.remove(`${blockName}__row--has-documents`);
- blockHeading.firstElementChild.classList.remove(`${blockName}__item--has-documents`);
- }
- }));
+ if (videos.length) {
+ // display image as link with play icon
+ const selectedLink = selectVideoLink(videos);
+ if (selectedLink) {
+ wrapImageWithVideoLink(selectedLink, picture);
+ selectedLink.parentElement.classList.add(`${blockName}__video-image`, 'image');
+ }
- const allDocumentRows = block.querySelectorAll(`.${blockName}__row--has-documents`);
- const videoRows = [].slice.call(block.querySelectorAll(`.${blockName}__row--has-video`), 2);
- const documentRows = [].slice.call(block.querySelectorAll(`.${blockName}__row--has-documents`), 6);
+ if (videoWrapper.children.length > 5) {
+ listEle.classList.add(`${blockName}__video-list-item--hide`);
+ }
- allDocumentRows.forEach((row) => {
- documentRowsWrapper.appendChild(row);
- });
+ const videoTitle = listEle.querySelector('h3');
+ videoTitle.classList.add(`${blockName}__video-title`);
- function toggleRows(rows) {
- rows.forEach((row) => {
- row.classList.add('hidden');
+ // remove all the videos links and exclude the selected one
+ videos.forEach((link) => link !== selectedLink && link.parentElement.remove());
- function toggle() {
- row.classList.toggle('hidden');
+ videoWrapper.append(listEle);
+ listEle.firstElementChild.remove();
+ row.innerHTML = '';
+ }
+ } else if (document) {
+ const item = createElement('li', { classes: `${blockName}__document-list-item` });
+ item.innerHTML = row.innerHTML;
+ const links = item.querySelectorAll('a');
+ [...links].forEach((link) => {
+ link.classList.add('tertiary');
+ link.classList.remove('primary');
+ item.prepend(link);
+ link.nextElementSibling.remove();
+ });
+
+ if (documentWrapper.children.length > 5) {
+ item.classList.add(`${blockName}__document-list-item--hide`);
}
- viewAllButton.addEventListener('click', toggle);
- });
- }
-
- viewAllButton.addEventListener('click', () => {
- if (viewAllButton.ariaExpanded === 'true') {
- viewAllButton.ariaExpanded = 'false';
- viewAllButton.innerText = 'view all';
- } else {
- viewAllButton.ariaExpanded = 'true';
- viewAllButton.innerText = 'view less';
+ documentWrapper.append(item);
+ row.innerHTML = '';
}
});
- toggleRows(videoRows);
- toggleRows(documentRows);
-
- const documentLink = block.querySelectorAll(`.${blockName}__item--has-documents > .button-container > .button`);
-
- documentLink.forEach((link) => {
- const downloadlinkIcon = document.createRange().createContextualFragment(`
- `);
-
- link.classList.remove('primary');
- link.classList.add('tertiary');
- link.prepend(downloadlinkIcon);
- });
+ block.append(videoWrapper);
+ block.append(documentWrapper);
- blockHeading.append(viewAllIcon, viewAllButton);
+ unwrapDivs(block);
}
diff --git a/icons/documents.svg b/icons/documents.svg
new file mode 100644
index 00000000..3cd852fd
--- /dev/null
+++ b/icons/documents.svg
@@ -0,0 +1,3 @@
+
diff --git a/placeholder.json b/placeholder.json
index 1a1c7bc3..a4eb9ced 100644
--- a/placeholder.json
+++ b/placeholder.json
@@ -142,6 +142,18 @@
{
"Key": "vinformat-length",
"Text": "Please fill out this field"
+ },
+ {
+ "Key": "view all",
+ "Text": "View all"
+ },
+ {
+ "Key": "toggle list",
+ "Text": "Toggle resources list"
+ },
+ {
+ "Key": "view less",
+ "Text": "View less"
}
],
":type": "sheet"