From d0d9625584f4bbe3b30e580c375430d6169b21f5 Mon Sep 17 00:00:00 2001 From: Nick Bergquist Date: Wed, 20 Nov 2024 19:51:53 +0000 Subject: [PATCH 1/9] Initial commit --- src/assets/scripts/vam-scripts.js | 1 + src/assets/styles/vam-style.scss | 1 + .../blocks/list-promo/_list-promo.js | 3 + .../blocks/list-promo/_list-promo.scss | 98 +++++++++++++++++++ .../blocks/list-promo/list-promo.config.js | 68 +++++++++++++ .../blocks/list-promo/list-promo.html | 42 ++++++++ 6 files changed, 213 insertions(+) create mode 100644 src/components/blocks/list-promo/_list-promo.js create mode 100644 src/components/blocks/list-promo/_list-promo.scss create mode 100644 src/components/blocks/list-promo/list-promo.config.js create mode 100644 src/components/blocks/list-promo/list-promo.html diff --git a/src/assets/scripts/vam-scripts.js b/src/assets/scripts/vam-scripts.js index e0cdc4cf..2d9a4e6c 100644 --- a/src/assets/scripts/vam-scripts.js +++ b/src/assets/scripts/vam-scripts.js @@ -11,6 +11,7 @@ require('../../components/blocks/cookie-banner/_cookie-banner'); require('../../components/blocks/image-carousel/_image-carousel'); require('../../components/blocks/image-overlay-license-modal/_image-overlay-license-modal'); require('../../components/blocks/image-row/_image-row'); +require('../../components/blocks/list-promo/_list-promo'); require('../../components/blocks/object-details/object-details'); require('../../components/blocks/object-shuffler/_object-shuffler'); require('../../components/blocks/modal/_modal'); diff --git a/src/assets/styles/vam-style.scss b/src/assets/styles/vam-style.scss index e2497c69..a87ad862 100644 --- a/src/assets/styles/vam-style.scss +++ b/src/assets/styles/vam-style.scss @@ -28,6 +28,7 @@ @use "../../components/blocks/icon-list/icon-list"; @use "../../components/blocks/image-carousel/image-carousel"; @use "../../components/blocks/image-credit/image-credit"; +@use "../../components/blocks/list-promo/list-promo"; @use "../../components/blocks/modal/modal"; @use "../../components/blocks/image-overlay-license-modal/image-overlay-license-modal"; @use "../../components/blocks/image-row/image-row"; diff --git a/src/components/blocks/list-promo/_list-promo.js b/src/components/blocks/list-promo/_list-promo.js new file mode 100644 index 00000000..b082f220 --- /dev/null +++ b/src/components/blocks/list-promo/_list-promo.js @@ -0,0 +1,3 @@ +document.addEventListener('DOMContentLoaded', () => { + +}); diff --git a/src/components/blocks/list-promo/_list-promo.scss b/src/components/blocks/list-promo/_list-promo.scss new file mode 100644 index 00000000..351bfcaf --- /dev/null +++ b/src/components/blocks/list-promo/_list-promo.scss @@ -0,0 +1,98 @@ +@use "../../mixins"; +@use "../../base"; + +.b-list-promo { + display: flex; + flex-direction: column; + + @include mixins.breakpoints-bpMinXSmall { + flex-direction: row; + } + + // &__image-container { + + // } + + &__info-container { + padding: 8px 10px; + } + + &__title { + @include base.typography-typeSetting(5, "bold"); + @include base.typography-lineheight(5); + + margin-bottom: 8px; + } + + &__strapline { + @include base.typography-typeSetting(3); + @include base.typography-lineheight(3); + + margin-bottom: 8px; + } + + &__image-list { + @include mixins.unstyledelements-unstyledList; + } + + &__image-list-item { + display: none; + + &--active { + display: block; + } + } + + &__info-list { + @include mixins.unstyledelements-unstyledList; + + margin-bottom: 20px; + } + + &__list-item { + @include base.typography-typeSetting(3); + @include base.typography-lineheight(3); + + margin-bottom: 8px; + padding-left: 2px; + + // b-list-promo__list-item--active + + &--active { + padding-left: 0; + text-indent: 2px; + + &::before { + color: base.sitecolors-siteColor("vam-white"); + left: 2px; + position: relative; + top: 2px; + z-index: 2; + } + + &::after { + background-color: base.sitecolors-siteColor("vam-black"); + border-radius: 50%; + content: ""; + height: 24px; + position: absolute; + width: 24px; + z-index: 1; + } + } + } + + &__cta-list { + @include mixins.unstyledelements-unstyledList; + + display: flex; + gap: 10px; + } + + &__cta-btn { + @include base.typography-typeSetting(2); + + margin: 0; + padding: 8px; + } +} diff --git a/src/components/blocks/list-promo/list-promo.config.js b/src/components/blocks/list-promo/list-promo.config.js new file mode 100644 index 00000000..ecba496c --- /dev/null +++ b/src/components/blocks/list-promo/list-promo.config.js @@ -0,0 +1,68 @@ +module.exports = { + title: 'List Promotion', + label: 'List Promotion', + context: { + promoTitle: 'Order an Object', + promoDescription: 'Information about the service. Lorem ipsum dolor sit amet consectetur...', + urlPrimary: { + url: 'https://www.vam.ac.uk', + text: 'Choose your objects' + }, + urlSecondary: { + url: 'https://www.vam.ac.uk', + text: 'Read more' + }, + promoItems: [ + { + listText: 'Choose your objects', + listIcon: 'object', + image: { + 320: 'https://picsum.photos/id/51/320/240', + 640: 'https://picsum.photos/id/51/640/480', + 960: 'https://picsum.photos/id/51/960/720', + 1280: 'https://picsum.photos/id/51/1280/960' + }, + }, + { + listText: 'Decide when you visit', + listIcon: 'calendar', + image: { + 320: 'https://picsum.photos/id/44/320/240', + 640: 'https://picsum.photos/id/44/640/480', + 960: 'https://picsum.photos/id/44/960/720', + 1280: 'https://picsum.photos/id/44/1280/960' + }, + }, + { + listText: 'Book a free appointment', + listIcon: 'clock', + image: { + 320: 'https://picsum.photos/id/47/320/240', + 640: 'https://picsum.photos/id/47/640/480', + 960: 'https://picsum.photos/id/47/960/720', + 1280: 'https://picsum.photos/id/47/1280/960' + }, + }, + { + listText: 'Arrive at your venue', + listIcon: 'pin', + image: { + 320: 'https://picsum.photos/id/130/320/240', + 640: 'https://picsum.photos/id/130/640/480', + 960: 'https://picsum.photos/id/130/960/720', + 1280: 'https://picsum.photos/id/130/1280/960' + }, + } + ] + } + + // listIcon: 'tick-circle' + // listIcon: 'tick-mark' + // promoTitle: 'Become a Member', + // promoDescription: 'Be at the heart of everything we do. Enjoy:' + // listText: 'Unlimited free entry to all exhibitions' + // listText: 'Exclusive previews and events' + // listText: 'Award-winning Members\' Room' + // listText: 'Discounts in all V&A shops' + // urlPrimary.text: 'Join today' +}; diff --git a/src/components/blocks/list-promo/list-promo.html b/src/components/blocks/list-promo/list-promo.html new file mode 100644 index 00000000..5a12d4ef --- /dev/null +++ b/src/components/blocks/list-promo/list-promo.html @@ -0,0 +1,42 @@ +
+
+
    + {% for img in promoItems %} +
  • + {{ promoTitle }} +
    • + {% endfor %} +
+
+
+

{{ promoTitle }}

+

{{ promoDescription }}

+
    + {% for item in promoItems %} +
  • + {{ item.listText }} +
    • + {% endfor %} +
+ +
+
From 3661286a1ce1180ca5307407cd6156a8b5d44f29 Mon Sep 17 00:00:00 2001 From: Nick Bergquist Date: Tue, 26 Nov 2024 21:58:27 +0000 Subject: [PATCH 2/9] Update list-promo component --- src/components/base/icons/_icons.scss | 6 +- .../blocks/icon-list/_icon-list.scss | 6 + .../blocks/list-promo/_list-promo.js | 97 +++++++++++++ .../blocks/list-promo/_list-promo.scss | 133 ++++++++++++++++-- .../blocks/list-promo/list-promo.config.js | 22 +-- .../blocks/list-promo/list-promo.html | 8 +- 6 files changed, 245 insertions(+), 27 deletions(-) diff --git a/src/components/base/icons/_icons.scss b/src/components/base/icons/_icons.scss index cffe1636..268b29aa 100644 --- a/src/components/base/icons/_icons.scss +++ b/src/components/base/icons/_icons.scss @@ -1,7 +1,7 @@ :root { --icon-svg-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath d='M9.978 6.54c-.322 0-.594-.094-.816-.283-.211-.2-.317-.461-.317-.783s.106-.578.317-.767c.222-.2.494-.3.816-.3.356 0 .64.1.85.3.212.189.317.445.317.767s-.105.583-.317.783c-.21.189-.494.283-.85.283Zm.967 9.9h-1.9V7.774l1.9-.134v8.8Z'/%3E%3C/svg%3E"); --icon-svg-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='currentColor'%3E%3Cpath d='M0 42.857v14.286h100V42.857z'/%3E%3C/svg%3E"); - --icon-svg-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 21' fill='currentColor' fill-rule='evenodd'%3E%3Cpath d='M14.186 4.005a5.92 5.92 0 0 0-9.227 7.288L10 19.481l5.041-8.188a5.918 5.918 0 0 0-.855-7.288Zm-4.099 6.62a2.599 2.599 0 1 0 0-5.198 2.599 2.599 0 0 0 0 5.198Z'/%3E%3C/svg%3E"); + --icon-svg-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M11.348 2.502a4.734 4.734 0 0 0-7.38 5.832L8 14.885l4.032-6.551a4.737 4.737 0 0 0-.684-5.832ZM8.07 7.8a2.079 2.079 0 1 0 0-4.158 2.079 2.079 0 0 0 0 4.158Z' clip-rule='evenodd'/%3E%3C/svg%3E"); --icon-svg-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='currentColor'%3E%3Cpath d='M42.857 42.857H0v14.286h42.857V100h14.286V57.143H100V42.857H57.143V0H42.857z'/%3E%3C/svg%3E"); --icon-svg-point-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='currentColor'%3E%3Cpath d='M70.173 12.294 57.446.174l-47.62 50 47.62 50 12.727-12.122-36.075-37.879z'/%3E%3C/svg%3E"); --icon-svg-signpost: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21' fill='currentColor'%3E%3Cpath d='M9.719 2.747h1.562v1.25h5.005L18 5.247l-1.714 1.25h-5.005v3.75h3.779l1.807 1.25-1.807 1.25H11.28v3.437h6.77v1.563H2.963v-1.563H9.72V8.997H4.813L3 7.747l1.813-1.25h4.906v-3.75Z'/%3E%3C/svg%3E"); @@ -15,10 +15,10 @@ --icon-svg-loud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M12.607 13.85A9.294 9.294 0 0 0 14.667 8a9.295 9.295 0 0 0-2.117-5.92l-.934.702A8.133 8.133 0 0 1 13.5 8c0 1.94-.677 3.723-1.807 5.124l.914.725Zm-2.09-1.658A6.64 6.64 0 0 0 12 8a6.64 6.64 0 0 0-1.585-4.315l-.935.702A5.479 5.479 0 0 1 10.833 8c0 1.314-.46 2.521-1.23 3.467l.914.725Zm-3.85-8.859L3.333 6h-2v4h2l3.334 2.667V3.333Zm1.416 2.334H9.25l-.167 2.666H8.25l-.167-2.666Zm1.25 4a.667.667 0 1 1-1.333 0 .667.667 0 0 1 1.333 0Z' clip-rule='evenodd'/%3E%3C/svg%3E"); --icon-svg-strong-smells: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M14.083 0h1.167l-.167 2.667h-.833L14.083 0Zm1.25 4A.667.667 0 1 1 14 4a.667.667 0 0 1 1.333 0ZM4.966 2.901l.28-2.234H6.42l-.297 2.379a4.4 4.4 0 0 1-2.398 3.39l-.13.064a1.906 1.906 0 0 0-1.054 1.705c0 1.247 1.086 2.113 1.5 2.276l-.268.74-.298-.1a3.073 3.073 0 0 1-.402-5.664l.13-.065a3.233 3.233 0 0 0 1.762-2.49Zm6.682 6.047a.574.574 0 0 1 .371.223l.459-.267a2.057 2.057 0 0 0-3.471.159l-.111.193a1.032 1.032 0 0 1-1.792 0l-.11-.193a2.057 2.057 0 0 0-3.472-.16l.493.268a.557.557 0 0 1 .335-.216.494.494 0 0 0-.017.128c0 .415.523.75 1.167.75.195 0 .38-.03.541-.085l.05.087c.844 1.477 2.974 1.477 3.818 0l.05-.087c.162.054.346.085.541.085.644 0 1.167-.335 1.167-.75a.498.498 0 0 0-.02-.135ZM5.42 12.222l-.705-.64.449-.494.704.64a1.23 1.23 0 0 1 0 1.82.563.563 0 0 0-.014.82l.752.731-.465.478-.752-.732a1.23 1.23 0 0 1 .03-1.79.563.563 0 0 0 0-.833Zm2.358.57-.655-.534.42-.516.656.533a1.045 1.045 0 0 1 0 1.62.379.379 0 0 0-.01.58l.697.607-.438.502-.697-.607a1.045 1.045 0 0 1 .027-1.598.379.379 0 0 0 0-.587Zm1.625-1.21.704.64a.563.563 0 0 1 0 .833 1.23 1.23 0 0 0-.03 1.79l.751.732.465-.478-.751-.732a.563.563 0 0 1 .014-.82 1.23 1.23 0 0 0 0-1.818l-.705-.64-.448.493ZM10.754.667l.28 2.234a3.232 3.232 0 0 0 1.762 2.49l.13.066a3.073 3.073 0 0 1-.402 5.664l-.298.1-.268-.74c.414-.163 1.5-1.029 1.5-2.276 0-.722-.408-1.382-1.053-1.705l-.13-.065a4.4 4.4 0 0 1-2.399-3.39L9.58.668h1.175Z' clip-rule='evenodd'/%3E%3C/svg%3E"); --icon-svg-induction-loop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M13.454 1.333h1.213v1.212l-1.83 1.83a4.47 4.47 0 0 0-.95-1.475l1.567-1.567ZM1.335 14.667h1.211l4.592-4.592-1.212-1.212-4.592 4.591v1.213Zm13.2-2.863v-.5h-3.08v.496h1.116v2.867h.848v-2.863h1.116Zm-8.894.556-.825.825a2.783 2.783 0 0 0 4.551-.934l.285-.711a3.914 3.914 0 0 1 1.056-1.492l.472-.413a4.372 4.372 0 0 0 1.488-3.286c0-2.393-1.94-4.35-4.334-4.35A4.333 4.333 0 0 0 4 6.334h1.167a3.167 3.167 0 0 1 3.166-3.166c1.744 0 3.167 1.428 3.167 3.182 0 .922-.399 1.804-1.09 2.408l-.47.413a5.08 5.08 0 0 0-1.372 1.936l-.285.711a1.616 1.616 0 0 1-2.643.543ZM9 8.57a2.334 2.334 0 1 0-3-2.237h1.167A1.167 1.167 0 1 1 9 7.291V8.57Z' clip-rule='evenodd'/%3E%3C/svg%3E"); - --icon-svg-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 17'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M6.125 1.707h-1.25v1.949H2v3.897h12V3.656h-2.875v-1.95h-1.25v1.95h-3.75v-1.95Zm3.75 1.949h1.25v2.599h-1.25v-2.6ZM14 8.528H2v5.849h12v-5.85ZM6.125 3.656v2.599h-1.25v-2.6h1.25Z' clip-rule='evenodd'/%3E%3C/svg%3E"); - --icon-svg-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M10.75 7a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Zm-.684 3.95a5 5 0 1 1 .884-.884l3.496 3.497-.757 1.01-3.623-3.623Z' clip-rule='evenodd'/%3E%3C/svg%3E"); + --icon-svg-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M6.125 1.707h-1.25v1.949H2v3.897h12V3.656h-2.875v-1.95h-1.25v1.95h-3.75v-1.95Zm3.75 1.949h1.25v2.599h-1.25v-2.6ZM14 8.528H2v5.849h12v-5.85ZM6.125 3.656v2.599h-1.25v-2.6h1.25Z' clip-rule='evenodd'/%3E%3C/svg%3E"); --icon-svg-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='m11.736 9.715-1.318 1.07a.796.796 0 0 1-.878.094 10.882 10.882 0 0 1-4.48-4.534.797.797 0 0 1 .059-.82L6.167 4l-1.2-2.667H3.679a.833.833 0 0 0-.59.245l-.607.607c-.549.549-.826 1.325-.654 2.082a13.186 13.186 0 0 0 9.905 9.905c.757.172 1.534-.105 2.083-.654l.607-.607a.833.833 0 0 0 .244-.59v-1.287l-2.93-1.32Z'/%3E%3C/svg%3E"); --icon-svg-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M7.375 8.376 5.141 5.904l-.927.837 3.322 3.678.464.513.464-.513 3.322-3.678-.927-.837-2.234 2.472V2.119h-1.25v6.257ZM14 12.375v1.25H2v-1.25h12Z' clip-rule='evenodd'/%3E%3C/svg%3E"); --icon-svg-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='m7.834 9.804-.186-.186a2.084 2.084 0 0 1-.346-2.49.849.849 0 0 0-1.159.018l-.277.277a3.33 3.33 0 0 0 .898 3.079l.186.185a3.333 3.333 0 0 0 4.714 0L14.3 8.052a3.333 3.333 0 0 0 0-4.714l-.186-.186a3.333 3.333 0 0 0-4.714 0l-.61.61c.366.195.711.442 1.025.743l.469-.47a2.083 2.083 0 0 1 2.946 0l.186.187a2.083 2.083 0 0 1 0 2.946L10.78 9.804a2.083 2.083 0 0 1-2.946 0ZM6.007 11.38l-.215.215A2.075 2.075 0 1 1 2.858 8.66l2.35-2.35a2.075 2.075 0 0 1 3.435 2.126l.016.017c.325.325.796.416 1.203.273a3.324 3.324 0 0 0-5.537-3.3l-2.351 2.35a3.325 3.325 0 0 0 4.701 4.702l.301-.301c-.293-.182-.57-.4-.825-.654l-.144-.144Z' clip-rule='evenodd'/%3E%3C/svg%3E"); --icon-svg-person-one: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M8 1.927c-1.312 0-2.375.962-2.375 2.149v.452c0 1.187 1.063 2.15 2.375 2.15s2.375-.963 2.375-2.15v-.452c0-1.187-1.063-2.15-2.375-2.15ZM4.145 8.71c-.586.26-.975.781-1.023 1.37l-.36 4.517h10.476l-.36-4.517c-.047-.589-.437-1.11-1.023-1.37L9.31 7.583H6.69L4.146 8.71Z' clip-rule='evenodd'/%3E%3C/svg%3E"); + --icon-svg-object: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M5.204 1.03h5.591l-.174.7h-.408l-.194.232a2.46 2.46 0 0 0-.56 1.752l1.587-.828c1.572-.82 3.355.66 2.838 2.356l-.8 2.633H2.916l-.802-2.633C1.6 3.546 3.382 2.066 4.954 2.886l1.586.828a2.46 2.46 0 0 0-.56-1.752l-.193-.232h-.408l-.175-.7ZM3.138 9.126a8.907 8.907 0 0 0 1.922 4.828l.843 1.055h4.194l.843-1.055a8.906 8.906 0 0 0 1.921-4.828H3.138Zm8.938-2.233a1.765 1.765 0 0 0-.127-.075l-.34-.181a4.386 4.386 0 0 1-1.754-1.718l1.77-.923a.75.75 0 0 1 1.064.883l-.613 2.014ZM6.144 4.918a4.386 4.386 0 0 1-1.753 1.718l-.34.181a1.784 1.784 0 0 0-.127.075l-.613-2.014a.75.75 0 0 1 1.065-.883l1.768.923Z' clip-rule='evenodd'/%3E%3C/svg%3E"); } diff --git a/src/components/blocks/icon-list/_icon-list.scss b/src/components/blocks/icon-list/_icon-list.scss index 531b392a..cb2ccedc 100644 --- a/src/components/blocks/icon-list/_icon-list.scss +++ b/src/components/blocks/icon-list/_icon-list.scss @@ -209,5 +209,11 @@ mask-image: var(--icon-svg-person-one); } } + + &--object { + &::before { + mask-image: var(--icon-svg-object); + } + } } } diff --git a/src/components/blocks/list-promo/_list-promo.js b/src/components/blocks/list-promo/_list-promo.js index b082f220..d5ebb233 100644 --- a/src/components/blocks/list-promo/_list-promo.js +++ b/src/components/blocks/list-promo/_list-promo.js @@ -1,3 +1,100 @@ document.addEventListener('DOMContentLoaded', () => { + const ctrlsDirectional = [ + { + ctrlName: 'Previous', + ctrlClasses: ['u-btn-icon', 'u-btn-icon--light', 'u-btn-icon--point-left', 'b-list-promo__ctrls-directional-btn'], + ctrlAttr: 'disabled', + }, + { + ctrlName: 'Next', + ctrlClasses: ['u-btn-icon', 'u-btn-icon--light', 'u-btn-icon--point-right', 'b-list-promo__ctrls-directional-btn'], + }, + ]; + const setActiveListItem = (listIndex = 0) => { + const promoImgListItems = document.querySelectorAll('.b-list-promo__image-list-item'); + const promoInfoListItems = document.querySelectorAll('.b-list-promo__list-item'); + + promoImgListItems.forEach((listItem, index) => { + if (index !== listIndex) { + listItem.classList.remove('b-list-promo__image-list-item--active'); + } else { + listItem.classList.add('b-list-promo__image-list-item--active'); + } + }); + + promoInfoListItems.forEach((listItem, index) => { + if (index !== listIndex) { + listItem.classList.remove('b-list-promo__list-item--active'); + } else { + listItem.classList.add('b-list-promo__list-item--active'); + } + }); + }; + + const switchListItem = (e) => { + const selectedDirection = e.target.textContent; + + const promoListItems = Array.from(document.querySelectorAll('.b-list-promo__list-item')); + const promoListActiveItem = document.querySelector('.b-list-promo__list-item--active'); + const currentListItemIndex = promoListItems.indexOf(promoListActiveItem); + const lastListItemIndex = promoListItems.length - 1; + + const ctrlDirectionPrev = document.querySelector('.u-btn-icon--point-left.b-list-promo__ctrls-directional-btn'); + const ctrlDirectionNext = document.querySelector('.u-btn-icon--point-right.b-list-promo__ctrls-directional-btn'); + + if (selectedDirection === 'Previous') { + if (currentListItemIndex > 0) { + setActiveListItem(currentListItemIndex - 1); + ctrlDirectionNext.removeAttribute('disabled'); + } + if (currentListItemIndex === 1) { + ctrlDirectionPrev.setAttribute('disabled', ''); + } + } + + if (selectedDirection === 'Next') { + if (currentListItemIndex < lastListItemIndex) { + setActiveListItem(currentListItemIndex + 1); + ctrlDirectionPrev.removeAttribute('disabled'); + } + if (currentListItemIndex === lastListItemIndex - 1) { + ctrlDirectionNext.setAttribute('disabled', ''); + } + } + }; + + const buildDirectionCtrls = () => { + const ctrlsContainerParent = document.querySelector('.b-list-promo__image-list-container'); + const ctrlsContainer = document.createElement('ul'); + + ctrlsContainer.classList.add('b-list-promo__ctrls-directional-list'); + + ctrlsDirectional.forEach((ctrl) => { + const ctrlListItem = document.createElement('li'); + const ctrlBtn = document.createElement('button'); + + ctrlBtn.classList.add(...ctrl.ctrlClasses); + ctrlBtn.textContent = ctrl.ctrlName; + ctrlBtn.setAttribute('title', `${ctrl.ctrlName} item`); + + // disable 'Previous' button on initialisation + if (ctrl.ctrlAttr) { + ctrlBtn.setAttribute(ctrl.ctrlAttr, ''); + } + + ctrlBtn.addEventListener('click', switchListItem, false); + + ctrlListItem.appendChild(ctrlBtn); + ctrlsContainer.appendChild(ctrlListItem); + ctrlsContainerParent.appendChild(ctrlsContainer); + }); + }; + + const init = () => { + buildDirectionCtrls(); + setActiveListItem(); + }; + + init(); }); diff --git a/src/components/blocks/list-promo/_list-promo.scss b/src/components/blocks/list-promo/_list-promo.scss index 351bfcaf..a92028b7 100644 --- a/src/components/blocks/list-promo/_list-promo.scss +++ b/src/components/blocks/list-promo/_list-promo.scss @@ -5,16 +5,35 @@ display: flex; flex-direction: column; - @include mixins.breakpoints-bpMinXSmall { + &--dark { + color: base.sitecolors-siteColor("vam-white"); + } + + @include mixins.breakpoints-bpMinSmall { flex-direction: row; } - // &__image-container { + &__info-container { + display: flex; + flex-direction: column; + padding: 8px 10px 16px; - // } + .b-list-promo--dark & { + background-color: base.sitecolors-siteColor("vam-black"); + } - &__info-container { - padding: 8px 10px; + @include mixins.breakpoints-bpMinSmall { + flex: 1 1 0; + padding: 12px; + } + + @include mixins.breakpoints-bpMinMedium { + padding: 12px 20px; + } + + @include mixins.breakpoints-bpMinLarge { + padding: 20px 30px; + } } &__title { @@ -22,6 +41,13 @@ @include base.typography-lineheight(5); margin-bottom: 8px; + + @include mixins.breakpoints-bpMinMedium { + @include base.typography-typeSetting(6, "bold"); + @include base.typography-lineheight(6); + + margin-bottom: 10px; + } } &__strapline { @@ -29,6 +55,21 @@ @include base.typography-lineheight(3); margin-bottom: 8px; + + @include mixins.breakpoints-bpMinMedium { + @include base.typography-typeSetting(4); + @include base.typography-lineheight(4); + + margin-bottom: 10px; + } + } + + &__image-list-container { + position: relative; + + @include mixins.breakpoints-bpMinSmall { + flex: 1 1 0; + } } &__image-list { @@ -37,12 +78,56 @@ &__image-list-item { display: none; + height: 190px; + + @include mixins.breakpoints-bpMinSmall { + height: 296px; + } + + @include mixins.breakpoints-bpMinMedium { + height: 390px; + } &--active { display: block; } } + &__image { + height: 100%; + object-fit: cover; + width: 100%; + } + + &__ctrls-directional-list { + @include mixins.unstyledelements-unstyledList; + + display: flex; + gap: 4px; + position: absolute; + right: 10px; + top: 155px; + + @include mixins.breakpoints-bpMinSmall { + top: 250px; + } + + @include mixins.breakpoints-bpMinMedium { + top: 345px; + } + } + + &__ctrls-directional-btn { + box-shadow: 1px 1px 12px 0 rgba(29, 30, 32, 50%), -1px -1px 12px 0 rgba(29, 30, 32, 50%); + height: 26px; + width: 26px; + + @include mixins.breakpoints-bpMinSmall { + height: 34px; + width: 34px; + } + } + &__info-list { @include mixins.unstyledelements-unstyledList; @@ -53,21 +138,42 @@ @include base.typography-typeSetting(3); @include base.typography-lineheight(3); + align-items: center; + gap: 6px; margin-bottom: 8px; padding-left: 2px; - // b-list-promo__list-item--active + @include mixins.breakpoints-bpMinMedium { + @include base.typography-typeSetting(4); + @include base.typography-lineheight(4); + + margin-bottom: 10px; + } + + &::before { + flex: 0 0 20px; + } + + &:last-child { + margin-bottom: 0; + } &--active { + font-variation-settings: "wght" 600; padding-left: 0; - text-indent: 2px; &::before { color: base.sitecolors-siteColor("vam-white"); - left: 2px; + height: 16px; + left: 4px; + margin-right: 2px; position: relative; - top: 2px; + width: 16px; z-index: 2; + + .b-list-promo--dark & { + color: base.sitecolors-siteColor("vam-black"); + } } &::after { @@ -78,6 +184,10 @@ position: absolute; width: 24px; z-index: 1; + + .b-list-promo--dark & { + background-color: base.sitecolors-siteColor("vam-white"); + } } } } @@ -87,6 +197,7 @@ display: flex; gap: 10px; + margin-top: auto; } &__cta-btn { @@ -94,5 +205,9 @@ margin: 0; padding: 8px; + + @include mixins.breakpoints-bpMinMedium { + @include base.typography-typeSetting(4); + } } } diff --git a/src/components/blocks/list-promo/list-promo.config.js b/src/components/blocks/list-promo/list-promo.config.js index ecba496c..3a8517fd 100644 --- a/src/components/blocks/list-promo/list-promo.config.js +++ b/src/components/blocks/list-promo/list-promo.config.js @@ -54,15 +54,15 @@ module.exports = { }, } ] - } - - // listIcon: 'tick-circle' - // listIcon: 'tick-mark' - // promoTitle: 'Become a Member', - // promoDescription: 'Be at the heart of everything we do. Enjoy:' - // listText: 'Unlimited free entry to all exhibitions' - // listText: 'Exclusive previews and events' - // listText: 'Award-winning Members\' Room' - // listText: 'Discounts in all V&A shops' - // urlPrimary.text: 'Join today' + }, + variants: [ + { + name: 'on-dark', + label: 'On dark', + context: { + previewClass: 'fr-bg--dark', + modifier: ['dark'] + } + } + ] }; diff --git a/src/components/blocks/list-promo/list-promo.html b/src/components/blocks/list-promo/list-promo.html index 5a12d4ef..aadbbe6f 100644 --- a/src/components/blocks/list-promo/list-promo.html +++ b/src/components/blocks/list-promo/list-promo.html @@ -1,5 +1,5 @@ -
-
+
+
    {% for img in promoItems %}
  • @@ -30,11 +30,11 @@

    {{ promoTitle }}

From a01b03b8b90cb511d3250a4a0c8b722037d998fa Mon Sep 17 00:00:00 2001 From: Nick Bergquist Date: Thu, 28 Nov 2024 10:57:04 +0000 Subject: [PATCH 3/9] Update list-promo component to accommodate multiple instances on a page --- .../blocks/list-promo/_list-promo.js | 46 ++++++++++++------- .../blocks/list-promo/list-promo.config.js | 6 +-- .../blocks/list-promo/list-promo.html | 45 ++++++++++++++++++ 3 files changed, 77 insertions(+), 20 deletions(-) diff --git a/src/components/blocks/list-promo/_list-promo.js b/src/components/blocks/list-promo/_list-promo.js index d5ebb233..7f538d95 100644 --- a/src/components/blocks/list-promo/_list-promo.js +++ b/src/components/blocks/list-promo/_list-promo.js @@ -11,20 +11,20 @@ document.addEventListener('DOMContentLoaded', () => { }, ]; - const setActiveListItem = (listIndex = 0) => { - const promoImgListItems = document.querySelectorAll('.b-list-promo__image-list-item'); - const promoInfoListItems = document.querySelectorAll('.b-list-promo__list-item'); + const setActiveListItem = (listIndex, inst) => { + const promoImgListItems = inst.querySelectorAll('.b-list-promo__image-list-item'); + const promoInfoListItems = inst.querySelectorAll('.b-list-promo__list-item'); - promoImgListItems.forEach((listItem, index) => { - if (index !== listIndex) { + promoImgListItems.forEach((listItem, i) => { + if (i !== listIndex) { listItem.classList.remove('b-list-promo__image-list-item--active'); } else { listItem.classList.add('b-list-promo__image-list-item--active'); } }); - promoInfoListItems.forEach((listItem, index) => { - if (index !== listIndex) { + promoInfoListItems.forEach((listItem, i) => { + if (i !== listIndex) { listItem.classList.remove('b-list-promo__list-item--active'); } else { listItem.classList.add('b-list-promo__list-item--active'); @@ -35,17 +35,17 @@ document.addEventListener('DOMContentLoaded', () => { const switchListItem = (e) => { const selectedDirection = e.target.textContent; - const promoListItems = Array.from(document.querySelectorAll('.b-list-promo__list-item')); - const promoListActiveItem = document.querySelector('.b-list-promo__list-item--active'); + const promoListItems = Array.from(e.target.inst.querySelectorAll('.b-list-promo__list-item')); + const promoListActiveItem = e.target.inst.querySelector('.b-list-promo__list-item--active'); const currentListItemIndex = promoListItems.indexOf(promoListActiveItem); const lastListItemIndex = promoListItems.length - 1; - const ctrlDirectionPrev = document.querySelector('.u-btn-icon--point-left.b-list-promo__ctrls-directional-btn'); - const ctrlDirectionNext = document.querySelector('.u-btn-icon--point-right.b-list-promo__ctrls-directional-btn'); + const ctrlDirectionPrev = e.target.inst.querySelector('.u-btn-icon--point-left.b-list-promo__ctrls-directional-btn'); + const ctrlDirectionNext = e.target.inst.querySelector('.u-btn-icon--point-right.b-list-promo__ctrls-directional-btn'); if (selectedDirection === 'Previous') { if (currentListItemIndex > 0) { - setActiveListItem(currentListItemIndex - 1); + setActiveListItem(currentListItemIndex - 1, e.target.inst); ctrlDirectionNext.removeAttribute('disabled'); } if (currentListItemIndex === 1) { @@ -55,7 +55,7 @@ document.addEventListener('DOMContentLoaded', () => { if (selectedDirection === 'Next') { if (currentListItemIndex < lastListItemIndex) { - setActiveListItem(currentListItemIndex + 1); + setActiveListItem(currentListItemIndex + 1, e.target.inst); ctrlDirectionPrev.removeAttribute('disabled'); } if (currentListItemIndex === lastListItemIndex - 1) { @@ -64,8 +64,8 @@ document.addEventListener('DOMContentLoaded', () => { } }; - const buildDirectionCtrls = () => { - const ctrlsContainerParent = document.querySelector('.b-list-promo__image-list-container'); + const buildDirectionCtrls = (inst) => { + const ctrlsContainerParent = inst.querySelector('.b-list-promo__image-list-container'); const ctrlsContainer = document.createElement('ul'); ctrlsContainer.classList.add('b-list-promo__ctrls-directional-list'); @@ -77,12 +77,14 @@ document.addEventListener('DOMContentLoaded', () => { ctrlBtn.classList.add(...ctrl.ctrlClasses); ctrlBtn.textContent = ctrl.ctrlName; ctrlBtn.setAttribute('title', `${ctrl.ctrlName} item`); + ctrlBtn.setAttribute('type', 'button'); // disable 'Previous' button on initialisation if (ctrl.ctrlAttr) { ctrlBtn.setAttribute(ctrl.ctrlAttr, ''); } + ctrlBtn.inst = inst; ctrlBtn.addEventListener('click', switchListItem, false); ctrlListItem.appendChild(ctrlBtn); @@ -92,8 +94,18 @@ document.addEventListener('DOMContentLoaded', () => { }; const init = () => { - buildDirectionCtrls(); - setActiveListItem(); + // there may be more than one instance on the page + const componentContainers = document.querySelectorAll('.b-list-promo'); + + componentContainers.forEach((inst) => { + const promoInfoListItems = inst.querySelectorAll('.b-list-promo__list-item'); + + setActiveListItem(0, inst); + + if (promoInfoListItems.length > 1) { + buildDirectionCtrls(inst); + } + }); }; init(); diff --git a/src/components/blocks/list-promo/list-promo.config.js b/src/components/blocks/list-promo/list-promo.config.js index 3a8517fd..53362ffd 100644 --- a/src/components/blocks/list-promo/list-promo.config.js +++ b/src/components/blocks/list-promo/list-promo.config.js @@ -22,7 +22,7 @@ module.exports = { 960: 'https://picsum.photos/id/51/960/720', 1280: 'https://picsum.photos/id/51/1280/960' }, - }, + }, { listText: 'Decide when you visit', listIcon: 'calendar', @@ -32,7 +32,7 @@ module.exports = { 960: 'https://picsum.photos/id/44/960/720', 1280: 'https://picsum.photos/id/44/1280/960' }, - }, + }, { listText: 'Book a free appointment', listIcon: 'clock', @@ -42,7 +42,7 @@ module.exports = { 960: 'https://picsum.photos/id/47/960/720', 1280: 'https://picsum.photos/id/47/1280/960' }, - }, + }, { listText: 'Arrive at your venue', listIcon: 'pin', diff --git a/src/components/blocks/list-promo/list-promo.html b/src/components/blocks/list-promo/list-promo.html index aadbbe6f..531218ac 100644 --- a/src/components/blocks/list-promo/list-promo.html +++ b/src/components/blocks/list-promo/list-promo.html @@ -40,3 +40,48 @@

{{ promoTitle }}

+ +
+ +
+
+
    + {% for img in promoItems %} +
  • + {{ promoTitle }} +
    • + {% endfor %} +
+
+
+

{{ promoTitle }}

+

{{ promoDescription }}

+
    + {% for item in promoItems %} +
  • + {{ item.listText }} +
    • + {% endfor %} +
+ +
+
From 71c09e5861fc72ebf12886876826ff45b49bf375 Mon Sep 17 00:00:00 2001 From: Nick Bergquist Date: Thu, 28 Nov 2024 17:07:52 +0000 Subject: [PATCH 4/9] Alter image switching to css transitions --- .../blocks/list-promo/_list-promo.scss | 26 +++++++++++-------- 1 file changed, 15 insertions(+), 11 deletions(-) diff --git a/src/components/blocks/list-promo/_list-promo.scss b/src/components/blocks/list-promo/_list-promo.scss index a92028b7..6c734387 100644 --- a/src/components/blocks/list-promo/_list-promo.scss +++ b/src/components/blocks/list-promo/_list-promo.scss @@ -77,19 +77,23 @@ } &__image-list-item { - display: none; - height: 190px; - - @include mixins.breakpoints-bpMinSmall { - height: 296px; - } - - @include mixins.breakpoints-bpMinMedium { - height: 390px; - } + height: 0; + opacity: 0; + transition: visibility 0s, opacity 0.3s ease-in; + visibility: hidden; &--active { - display: block; + height: 190px; + opacity: 1; + visibility: visible; + + @include mixins.breakpoints-bpMinSmall { + height: 296px; + } + + @include mixins.breakpoints-bpMinMedium { + height: 390px; + } } } From 69551c7bde574e224bc92af0a987a084a112022f Mon Sep 17 00:00:00 2001 From: Luca Carini Date: Thu, 5 Dec 2024 17:25:32 +0000 Subject: [PATCH 5/9] list-promo: simplify JS --- .../blocks/list-promo/_list-promo.js | 151 +++++------------- .../blocks/list-promo/_list-promo.scss | 16 +- .../blocks/list-promo/list-promo.html | 49 +----- 3 files changed, 56 insertions(+), 160 deletions(-) diff --git a/src/components/blocks/list-promo/_list-promo.js b/src/components/blocks/list-promo/_list-promo.js index 7f538d95..65acc981 100644 --- a/src/components/blocks/list-promo/_list-promo.js +++ b/src/components/blocks/list-promo/_list-promo.js @@ -1,112 +1,47 @@ document.addEventListener('DOMContentLoaded', () => { - const ctrlsDirectional = [ - { - ctrlName: 'Previous', - ctrlClasses: ['u-btn-icon', 'u-btn-icon--light', 'u-btn-icon--point-left', 'b-list-promo__ctrls-directional-btn'], - ctrlAttr: 'disabled', - }, - { - ctrlName: 'Next', - ctrlClasses: ['u-btn-icon', 'u-btn-icon--light', 'u-btn-icon--point-right', 'b-list-promo__ctrls-directional-btn'], - }, - ]; - - const setActiveListItem = (listIndex, inst) => { - const promoImgListItems = inst.querySelectorAll('.b-list-promo__image-list-item'); - const promoInfoListItems = inst.querySelectorAll('.b-list-promo__list-item'); - - promoImgListItems.forEach((listItem, i) => { - if (i !== listIndex) { - listItem.classList.remove('b-list-promo__image-list-item--active'); - } else { - listItem.classList.add('b-list-promo__image-list-item--active'); - } - }); - - promoInfoListItems.forEach((listItem, i) => { - if (i !== listIndex) { - listItem.classList.remove('b-list-promo__list-item--active'); - } else { - listItem.classList.add('b-list-promo__list-item--active'); - } - }); - }; - - const switchListItem = (e) => { - const selectedDirection = e.target.textContent; - - const promoListItems = Array.from(e.target.inst.querySelectorAll('.b-list-promo__list-item')); - const promoListActiveItem = e.target.inst.querySelector('.b-list-promo__list-item--active'); - const currentListItemIndex = promoListItems.indexOf(promoListActiveItem); - const lastListItemIndex = promoListItems.length - 1; - - const ctrlDirectionPrev = e.target.inst.querySelector('.u-btn-icon--point-left.b-list-promo__ctrls-directional-btn'); - const ctrlDirectionNext = e.target.inst.querySelector('.u-btn-icon--point-right.b-list-promo__ctrls-directional-btn'); - - if (selectedDirection === 'Previous') { - if (currentListItemIndex > 0) { - setActiveListItem(currentListItemIndex - 1, e.target.inst); - ctrlDirectionNext.removeAttribute('disabled'); - } - if (currentListItemIndex === 1) { - ctrlDirectionPrev.setAttribute('disabled', ''); - } + Array.from(document.querySelectorAll('.b-list-promo'), (promo) => { + const listImgs = promo.querySelectorAll('.b-list-promo__image-list-item'); + + /* Promo logic only required if > 1 promo img present */ + if (listImgs.length > 1) { + const listItems = promo.querySelectorAll('.b-list-promo__list-item'); + + /* set initial item active state */ + let activeIndex = 0; + listItems[activeIndex].classList.add('b-list-promo__list-item--active'); + + /* fn to set active item classes */ + const setActiveItem = (itemIndex) => { + promo.querySelector('.b-list-promo__image-list-item--active').classList.remove('b-list-promo__image-list-item--active'); + listImgs[itemIndex].classList.add('b-list-promo__image-list-item--active'); + promo.querySelector('.b-list-promo__list-item--active').classList.remove('b-list-promo__list-item--active'); + listItems[itemIndex].classList.add('b-list-promo__list-item--active'); + }; + + /* promo ctrls can be shown */ + const ctrls = promo.querySelector('.b-list-promo__ctrls'); + ctrls.classList.add('b-list-promo__ctrls--active'); + + /* promo controls setup */ + const prev = ctrls.querySelector('.js-list-promo__ctrls-btn--prev'); + const next = ctrls.querySelector('.js-list-promo__ctrls-btn--next'); + prev.setAttribute('disabled', 'true'); + + /* promo controls logic */ + ctrls.addEventListener('click', (e) => { + if (e.target === prev) { + activeIndex -= 1; + next.removeAttribute('disabled'); + if (activeIndex === 0) prev.setAttribute('disabled', 'true'); + } else if (e.target === next) { + activeIndex += 1; + prev.removeAttribute('disabled'); + if (activeIndex === listImgs.length - 1) next.setAttribute('disabled', 'true'); + } + setActiveItem(activeIndex); + }); } - if (selectedDirection === 'Next') { - if (currentListItemIndex < lastListItemIndex) { - setActiveListItem(currentListItemIndex + 1, e.target.inst); - ctrlDirectionPrev.removeAttribute('disabled'); - } - if (currentListItemIndex === lastListItemIndex - 1) { - ctrlDirectionNext.setAttribute('disabled', ''); - } - } - }; - - const buildDirectionCtrls = (inst) => { - const ctrlsContainerParent = inst.querySelector('.b-list-promo__image-list-container'); - const ctrlsContainer = document.createElement('ul'); - - ctrlsContainer.classList.add('b-list-promo__ctrls-directional-list'); - - ctrlsDirectional.forEach((ctrl) => { - const ctrlListItem = document.createElement('li'); - const ctrlBtn = document.createElement('button'); - - ctrlBtn.classList.add(...ctrl.ctrlClasses); - ctrlBtn.textContent = ctrl.ctrlName; - ctrlBtn.setAttribute('title', `${ctrl.ctrlName} item`); - ctrlBtn.setAttribute('type', 'button'); - - // disable 'Previous' button on initialisation - if (ctrl.ctrlAttr) { - ctrlBtn.setAttribute(ctrl.ctrlAttr, ''); - } - - ctrlBtn.inst = inst; - ctrlBtn.addEventListener('click', switchListItem, false); - - ctrlListItem.appendChild(ctrlBtn); - ctrlsContainer.appendChild(ctrlListItem); - ctrlsContainerParent.appendChild(ctrlsContainer); - }); - }; - - const init = () => { - // there may be more than one instance on the page - const componentContainers = document.querySelectorAll('.b-list-promo'); - - componentContainers.forEach((inst) => { - const promoInfoListItems = inst.querySelectorAll('.b-list-promo__list-item'); - - setActiveListItem(0, inst); - - if (promoInfoListItems.length > 1) { - buildDirectionCtrls(inst); - } - }); - }; - - init(); + return true; + }); }); diff --git a/src/components/blocks/list-promo/_list-promo.scss b/src/components/blocks/list-promo/_list-promo.scss index 6c734387..beea996b 100644 --- a/src/components/blocks/list-promo/_list-promo.scss +++ b/src/components/blocks/list-promo/_list-promo.scss @@ -90,7 +90,7 @@ @include mixins.breakpoints-bpMinSmall { height: 296px; } - + @include mixins.breakpoints-bpMinMedium { height: 390px; } @@ -103,10 +103,8 @@ width: 100%; } - &__ctrls-directional-list { - @include mixins.unstyledelements-unstyledList; - - display: flex; + &__ctrls { + display: none; gap: 4px; position: absolute; right: 10px; @@ -119,9 +117,13 @@ @include mixins.breakpoints-bpMinMedium { top: 345px; } + + &--active { + display: flex; + } } - &__ctrls-directional-btn { + &__ctrls-btn { box-shadow: 1px 1px 12px 0 rgba(29, 30, 32, 50%), -1px -1px 12px 0 rgba(29, 30, 32, 50%); height: 26px; width: 26px; @@ -179,7 +181,7 @@ color: base.sitecolors-siteColor("vam-black"); } } - + &::after { background-color: base.sitecolors-siteColor("vam-black"); border-radius: 50%; diff --git a/src/components/blocks/list-promo/list-promo.html b/src/components/blocks/list-promo/list-promo.html index 531218ac..23ec16c9 100644 --- a/src/components/blocks/list-promo/list-promo.html +++ b/src/components/blocks/list-promo/list-promo.html @@ -17,51 +17,10 @@ {% endfor %} -
-
-

{{ promoTitle }}

-

{{ promoDescription }}

-
    - {% for item in promoItems %} -
  • - {{ item.listText }} -
    • - {% endfor %} -
- -
-
- -
- -
-
-
    - {% for img in promoItems %} -
  • - {{ promoTitle }} -
    • - {% endfor %} -
+
+ + +

{{ promoTitle }}

From 897aa126bbc72aa817889d3f2be980288ae85255 Mon Sep 17 00:00:00 2001 From: Luca Carini Date: Thu, 5 Dec 2024 17:44:27 +0000 Subject: [PATCH 6/9] list-promo: fix img sizes --- src/components/blocks/list-promo/list-promo.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/blocks/list-promo/list-promo.html b/src/components/blocks/list-promo/list-promo.html index 23ec16c9..d94c0c70 100644 --- a/src/components/blocks/list-promo/list-promo.html +++ b/src/components/blocks/list-promo/list-promo.html @@ -10,8 +10,8 @@ {{ img.image["640"] }} 640w, {{ img.image[960] }} 960w, {{ img.image[1280] }} 1280w" - sizes="(max-width: 499px) 100vw, - (min-width: 500px) 50vw" + sizes="(min-width: 768px) 50vw, + 100vw" src="{{ img.image["640"] }}" loading="lazy"> From a38dba813a7e3f6da385950ddba13adf0f4ecbfd Mon Sep 17 00:00:00 2001 From: Luca Carini Date: Thu, 5 Dec 2024 18:05:48 +0000 Subject: [PATCH 7/9] list-promo: simplify HTML/CSS --- .../blocks/list-promo/_list-promo.scss | 4 --- .../blocks/list-promo/list-promo.html | 36 +++++++++---------- 2 files changed, 17 insertions(+), 23 deletions(-) diff --git a/src/components/blocks/list-promo/_list-promo.scss b/src/components/blocks/list-promo/_list-promo.scss index beea996b..b9eb8851 100644 --- a/src/components/blocks/list-promo/_list-promo.scss +++ b/src/components/blocks/list-promo/_list-promo.scss @@ -72,10 +72,6 @@ } } - &__image-list { - @include mixins.unstyledelements-unstyledList; - } - &__image-list-item { height: 0; opacity: 0; diff --git a/src/components/blocks/list-promo/list-promo.html b/src/components/blocks/list-promo/list-promo.html index d94c0c70..183bc4b2 100644 --- a/src/components/blocks/list-promo/list-promo.html +++ b/src/components/blocks/list-promo/list-promo.html @@ -1,25 +1,23 @@
-
    - {% for img in promoItems %} -
  • - {{ promoTitle }} -
    • - {% endfor %} -
+ {% for img in promoItems %} +
+ {{ promoTitle }} +
+ {% endfor %}
- - + +
From a5217db155ccf0cbce7a06bc359a13c75abe2be9 Mon Sep 17 00:00:00 2001 From: Luca Carini Date: Thu, 5 Dec 2024 18:22:33 +0000 Subject: [PATCH 8/9] list-promo: allow for longer content; simplify CSS; improve visual transition --- .../blocks/list-promo/_list-promo.scss | 32 ++++++------------- 1 file changed, 10 insertions(+), 22 deletions(-) diff --git a/src/components/blocks/list-promo/_list-promo.scss b/src/components/blocks/list-promo/_list-promo.scss index b9eb8851..aec1c3b3 100644 --- a/src/components/blocks/list-promo/_list-promo.scss +++ b/src/components/blocks/list-promo/_list-promo.scss @@ -65,31 +65,27 @@ } &__image-list-container { + min-height: 190px; position: relative; @include mixins.breakpoints-bpMinSmall { flex: 1 1 0; + min-height: 296px; + } + + @include mixins.breakpoints-bpMinMedium { + min-height: 390px; } } &__image-list-item { - height: 0; + inset: 0; opacity: 0; - transition: visibility 0s, opacity 0.3s ease-in; - visibility: hidden; + position: absolute; + transition: opacity 0.3s ease-in; &--active { - height: 190px; opacity: 1; - visibility: visible; - - @include mixins.breakpoints-bpMinSmall { - height: 296px; - } - - @include mixins.breakpoints-bpMinMedium { - height: 390px; - } } } @@ -100,19 +96,11 @@ } &__ctrls { + bottom: 10px; display: none; gap: 4px; position: absolute; right: 10px; - top: 155px; - - @include mixins.breakpoints-bpMinSmall { - top: 250px; - } - - @include mixins.breakpoints-bpMinMedium { - top: 345px; - } &--active { display: flex; From 6f5dfc1ab092a923458d1a8ecce673fc8ed1955c Mon Sep 17 00:00:00 2001 From: Luca Carini Date: Thu, 5 Dec 2024 18:32:17 +0000 Subject: [PATCH 9/9] list-promo: variant label tweak --- src/components/blocks/list-promo/list-promo.config.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/blocks/list-promo/list-promo.config.js b/src/components/blocks/list-promo/list-promo.config.js index 53362ffd..8d91a0f5 100644 --- a/src/components/blocks/list-promo/list-promo.config.js +++ b/src/components/blocks/list-promo/list-promo.config.js @@ -57,8 +57,8 @@ module.exports = { }, variants: [ { - name: 'on-dark', - label: 'On dark', + name: 'dark', + label: 'Dark', context: { previewClass: 'fr-bg--dark', modifier: ['dark']