Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • wcms/uw_wcms_ohana
1 result
Show changes
Commits on Source (43)
Hide whitespace changes
Inline Side-by-side
Showing
with 976 additions and 732 deletions
src/patterns/03-layouts/carousel/_carousel.scss
View file @ 4314765c
@use '../../01-core' as *;
.uw-carousel {
display: block;
.carousel {
opacity: 0;
transition: all 0.4s;
position: relative;
width: 100%;
}
margin-bottom: 1.5rem;
.owl-carousel.owl-theme {
display: flex !important;
flex-flow: column;
.owl-dots{
margin-bottom: var(--size-1);
.owl-dot {
&:hover{
span {
background: var(--gray-5) !important;
color: var(--gray-5) !important;
}
}
&.active{
span {
background: var(--gray-5) !important;
color: var(--gray-5) !important;
}
}
}
}
}
.owl-stage-outer {
margin-bottom: var(--size-2);
order: 1;
.flickity-viewport {
transition: all ease 0.4s;
height: auto;
}
.carousel.is-hidden {
display: none;
}
// Style the carousel buttons.
.uw-owl-nav{
&.disabled {
display: none;
.carousel.flickity-enabled {
opacity: 1;
}
.uw-carousel__banner {
.flickity-button {
background: transparent;
}
display: flex;
justify-content: center;
order: 3;
button {
background: var(--gray-2);
color: var(--uw-black);
display: inline-block;
font-family: var(--font-condensedbook);
font-size: var(--font-size-1);
font-weight: 200;
letter-spacing: 0.055rem;
margin: 0 var(--size-1);
max-width: inherit;
padding: var(--size-105);
text-decoration: none;
text-transform: uppercase;
user-select: none;
vertical-align: middle;
white-space: nowrap;
width: auto;
&:hover {
background: var(--gray-5) !important;
color: var(--uw-white) !important;
}
/* big previous & next buttons */
.flickity-prev-next-button {
top: 40%;
width: 5rem;
height: 5rem;
}
}
.owl-dots {
order: 2;
&.disabled {
/* icon color */
.flickity-button-icon {
fill: var(--uw-black);
}
/* hide disabled button */
.flickity-button:disabled {
display: none;
}
button {
background: var(--gray-5);
color: var(--uw-white-1);
display: inline-block;
font-size: var(--font-size-1);
height: var(--size-4);
margin: 0 auto;
max-width: inherit;
padding: inherit;
text-decoration: none;
user-select: none;
vertical-align: middle;
white-space: nowrap;
width: var(--size-4);
&:hover {
background-color: transparent;
}
/* position dots up a bit */
.flickity-page-dots {
bottom: -1.5rem;
display: flex;
}
}
.owl-theme .owl-dots .owl-dot {
span{
border-radius: 50%;
height: var(--size-2) !important;
width: var(--size-2) !important;
/* dots are lines */
.flickity-page-dots .dot {
height: 1.5rem;
width: 100%;
margin: 0;
background: var(--gray-2);
border-radius: 0;
border-left: 1px;
border-bottom: 1px;
border-color: var(--gray-5);
border-style: solid;
opacity:1;
&:first-child {
border-left: 0;
}
&.is-selected {
background:var(--uw-black);
}
&:hover,
&:focus{
background: var(--gray-5);
}
}
&:hover{
span {
background: var(--gray-5) !important;
color: var(--gray-5) !important;
.flickity-button:focus {
outline: none;
box-shadow: 0 0 0 5px var(--uw-black);
.flickity-button-icon {
fill: var(--uw-black);
}
}
&.active{
span {
background: var(--gray-5) !important;
color: var(--gray-5) !important;
}
.carousel.is-fullscreen .card__banner {
height: 100%;
}
}
src/patterns/03-layouts/carousel/carousel.twig
View file @ 4314765c
{% if pattern_lab %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
{# <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">#}
{# <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">#}
{% endif %}
{% if carousel_type == 'banner' %}
......@@ -8,7 +8,7 @@
{% else %}
<div class="uw-carousel">
{% endif %}
<div class="owl-carousel owl-theme">
<div class="carousel">
{% block content %}
<div class="item">Item #1</div>
<div class="item">Item #2</div>
......@@ -16,17 +16,16 @@
<div class="item">Item #4</div>
<div class="item">Item #5</div>
{% endblock %}
</div>
{% if carousel_type == 'banner' %}
<div class="uw-owl-nav__banner-control-wrap">
<button href="#uw-pause" id="uw-play" class="uw-owl-nav__banner-control uw-play" title="play">
<div class="uw-nav__banner-control-wrap">
<button href="#uw-pause" id="uw-play" class="uw-nav__banner-control uw-play" title="play">
<span class="element-invisible off-screen">Play banner slideshow</span>
{% include '@components/icon/icon.twig' with {
'name': 'banner_play',
} %}
</button>
<button href="#uw-play" id="uw-pause" class="uw-owl-nav__banner-control uw-pause" title="pause">
<button href="#uw-play" id="uw-pause" class="uw-nav__banner-control uw-pause" title="pause">
<span class="element-invisible off-screen">Pause banner slideshow</span>
{% include '@components/icon/icon.twig' with {
'name': 'banner_pause',
......
src/patterns/04-components/banners/_banners.scss
View file @ 4314765c
......@@ -5,6 +5,7 @@
}
.uw-carousel {
position: relative;
&__banner {
.animated {
animation-duration: var(--banner-transition-speed) !important;
......@@ -12,32 +13,32 @@
// Used to control the display of the play-pause.
&[data-autoplay="1"] {
.uw-owl-nav__banner-control-wrap {
display: block;
.uw-nav__banner-control-wrap {
display: block !important;
}
&.banner-single {
.uw-owl-nav__banner-control-wrap {
.uw-nav__banner-control-wrap {
display: none;
}
}
}
&[data-autoplay="0"] {
.uw-owl-nav__banner-control-wrap {
.uw-nav__banner-control-wrap {
display: none;
}
}
.uw-owl-nav__banner-control-wrap {
bottom: var(--size-5);
.uw-nav__banner-control-wrap {
bottom: var(--size-2);
display: none;
font-size: var(--font-size-3);
left: var(--size-1);
order: 4;
position: absolute;
z-index: var(--layer-content);
.uw-owl-nav__banner-control {
.uw-nav__banner-control {
@include button-reset();
box-sizing: border-box;
display: block;
......@@ -56,170 +57,170 @@
}
}
}
.owl-stage-outer {
margin-bottom: 0;
overflow: hidden;
}
.owl-carousel {
.uw-owl-nav__dots {
align-items: flex-start;
background: var(--gray-5);
border-bottom: 1px solid var(--gray-5);
display: flex;
&.disabled {
display: none;
}
gap: var(--size-xs);
order: 3;
.owl-dot {
@include button-reset();
background-color: var(--gray-2);
color: var(--uw-white);
height: var(--size-3);
margin: 0;
padding: 0;
width: 100%;
&:hover,
&:focus {
background-color: var(--gray-5);
color: var(--uw-white);
}
&.active{
background-color: var(--uw-black);
}
}
}
.uw-owl-nav__prevnext{
// Replace with display: flex; when theming
// other banners.styles.
display: none;
&.disabled {
display: none;
}
flex-flow: column;
opacity: 0;
position: absolute;
top: calc(50% - 6rem);
transition: opacity 350ms ease-in-out 250ms;
width: 100% !important;
z-index: 1;
.owl-prev,
.owl-next {
@include button-reset();
background: rgba(0, 0, 0, 0.5);
height: var(--size-13);
position: absolute;
vertical-align: middle !important;
width: var(--size-6);
&::after {
display: block;
font-family: var(--font-system);
font-size: var(--font-size-12);
}
}
.owl-prev {
align-self: flex-start;
padding-left: var(--size-2) !important;
&::after {
content: "\2039";
}
}
.owl-next{
align-self: flex-end;
padding-left: var(--size-2) !important;
right: 0;
&::after {
content: "\203A";
}
}
}
&:hover {
.uw-owl-nav__prevnext {
opacity: 1;
transition: opacity 350ms ease-in-out 250ms;
}
}
}
//
// .owl-stage-outer {
// margin-bottom: 0;
// overflow: hidden;
// }
//
// .owl-carousel {
// .uw-owl-nav__dots {
// align-items: flex-start;
// background: var(--gray-5);
// border-bottom: 1px solid var(--gray-5);
// display: flex;
// &.disabled {
// display: none;
// }
// gap: var(--size-xs);
// order: 3;
// .owl-dot {
// @include button-reset();
// background-color: var(--gray-2);
// color: var(--uw-white);
// height: var(--size-3);
// margin: 0;
// padding: 0;
// width: 100%;
// &:hover,
// &:focus {
// background-color: var(--gray-5);
// color: var(--uw-white);
// }
// &.active{
// background-color: var(--uw-black);
// }
// }
// }
//
// .uw-owl-nav__prevnext{
// // Replace with display: flex; when theming
// // other banners.styles.
// display: none;
// &.disabled {
// display: none;
// }
// flex-flow: column;
// opacity: 0;
// position: absolute;
// top: calc(50% - 6rem);
// transition: opacity 350ms ease-in-out 250ms;
// width: 100% !important;
// z-index: 1;
// .owl-prev,
// .owl-next {
// @include button-reset();
// background: rgba(0, 0, 0, 0.5);
// height: var(--size-13);
// position: absolute;
// vertical-align: middle !important;
// width: var(--size-6);
// &::after {
// display: block;
// font-family: var(--font-system);
// font-size: var(--font-size-12);
// }
// }
//
// .owl-prev {
// align-self: flex-start;
// padding-left: var(--size-2) !important;
// &::after {
// content: "\2039";
// }
// }
//
// .owl-next{
// align-self: flex-end;
// padding-left: var(--size-2) !important;
// right: 0;
// &::after {
// content: "\203A";
// }
// }
// }
//
// &:hover {
// .uw-owl-nav__prevnext {
// opacity: 1;
// transition: opacity 350ms ease-in-out 250ms;
// }
// }
// }
}
}
.no-js {
.uw-carousel {
&__banner {
&[data-autoplay="1"] {
.uw-owl-nav__banner-control-wrap {
display: none;
}
}
}
}
&.js {
.uw-carousel {
&__banner {
&[data-autoplay="1"] {
.uw-owl-nav__banner-control-wrap {
display: inherit;
}
&.banner-single{
.uw-owl-nav__banner-control-wrap {
display: none;
}
}
}
}
}
.card__banner:target ~ .card__banner:last-of-type,
.card__banner {
display: inherit;
}
.card__banner:last-of-type,
.card__banner:target {
display: inherit;
}
}
.uw-owl-nav__dots-js {
align-items: flex-start;
background: var(--gray-5);
border-bottom: var(--size-xs) solid var(--gray-5);
display: flex;
gap: var(--size-xs);
order: 3;
.owl-dot {
@include button-reset();
background-color: var(--gray-2);
color: var(--uw-white);
height: var(--size-3);
margin: 0;
padding: 0;
width: 100%;
&:hover,
&:focus {
background-color: var(--gray-5);
color: var(--uw-white);
}
&.active {
background-color: var(--uw-black);
}
}
}
.card__banner:target ~ .card__banner:last-of-type,
.card__banner {
display: none;
}
/* :last-child works, but .page:last-child will not */
.card__banner:last-of-type,
.card__banner:target {
display: block;
}
}
//.no-js {
// .uw-carousel {
// &__banner {
// &[data-autoplay="1"] {
// .uw-owl-nav__banner-control-wrap {
// display: none;
// }
// }
// }
// }
//
// &.js {
// .uw-carousel {
// &__banner {
// &[data-autoplay="1"] {
// .uw-owl-nav__banner-control-wrap {
// display: inherit;
// }
// &.banner-single{
// .uw-owl-nav__banner-control-wrap {
// display: none;
// }
// }
// }
// }
// }
// .card__banner:target ~ .card__banner:last-of-type,
// .card__banner {
// display: inherit;
// }
// .card__banner:last-of-type,
// .card__banner:target {
// display: inherit;
// }
// }
//
// .uw-owl-nav__dots-js {
// align-items: flex-start;
// background: var(--gray-5);
// border-bottom: var(--size-xs) solid var(--gray-5);
// display: flex;
// gap: var(--size-xs);
// order: 3;
// .owl-dot {
// @include button-reset();
// background-color: var(--gray-2);
// color: var(--uw-white);
// height: var(--size-3);
// margin: 0;
// padding: 0;
// width: 100%;
// &:hover,
// &:focus {
// background-color: var(--gray-5);
// color: var(--uw-white);
// }
//
// &.active {
// background-color: var(--uw-black);
// }
// }
// }
//
// .card__banner:target ~ .card__banner:last-of-type,
// .card__banner {
// display: none;
// }
//
// /* :last-child works, but .page:last-child will not */
// .card__banner:last-of-type,
// .card__banner:target {
// display: block;
// }
//}
src/patterns/04-components/banners/banners.js
View file @ 4314765c
/**
* @file
* Initializes Flickity carousels for banners in Drupal.
* Ensures autoplay, navigation, and pause/play functionality.
*/
(function ($, Drupal) {
(function ($, Drupal, window) {
'use strict';
Drupal.behaviors.banners = {
Drupal.behaviors.bannersFlickity = {
attach: function () {
$(document).ready(function () {
document.querySelectorAll('.uw-carousel__banner').forEach(function (banner) {
var selector = 'div[data-uuid="' + banner.getAttribute('data-uuid') + '"] .carousel';
var elem = document.querySelector(selector);
if (!elem) {
return;
}
// Step through each Banners on the page.
$('.uw-carousel__banner').each(function () {
// Get the slide speed and autoplay settings.
var bannerSlideSpeed = parseInt(banner.getAttribute('data-slide-speed'), 10) || 3000;
var bannerAutoplay = banner.getAttribute('data-autoplay') !== '0' &&
!document.querySelector('.layout-builder');
var selector = 'div[data-uuid="' + $(this).attr('data-uuid') + '"] .owl-carousel';
// Add a class if there's only one slide.
if (elem.children.length <= 1) {
banner.classList.add('banner-single');
}
// Get banner carousel.
var owl = $(selector);
// Check if dots and navigation should be enabled.
var bannerDots = elem.children.length > 1;
// Get the number of items for the carousel, if any.
// For banners we are only ever showing one item at
// a time (for reference Facts & Figures show more).
var numOfItems = 1;
// Ensure Flickity is defined before initializing.
if (typeof window.Flickity === 'undefined') {
console.error('Flickity is not defined. Ensure the library is loaded.');
return;
}
var bannerSlideSpeed = $(this).attr('data-slide-speed');
var flkty = new window.Flickity(elem, {
autoPlay: bannerAutoplay ? bannerSlideSpeed : false,
draggable: true,
wrapAround: true,
adaptiveHeight: true,
pageDots: bannerDots,
prevNextButtons: false,
on: {
ready: function () {
var dots = document.querySelectorAll('.flickity-page-dots .dot');
// The flag for autoplay.
var bannerAutoplay = true;
if (!dots.length) {
return;
}
// If there is no autoplay, or we are in layout builder,
// set flag to false.
if ($(this).attr('data-autoplay') === 0 || $('.layout-builder').length) {
bannerAutoplay = false;
}
dots.forEach(function (dot) {
// Make dots focusable.
dot.setAttribute('tabindex', '0');
// Used to hide buttons when single banner
if (owl.children().length <= 1) {
$(this).addClass('banner-single');
}
dot.addEventListener('keydown', function (event) {
if (event.key === 'Enter' || event.keyCode === 13) {
var label = dot.getAttribute('aria-label');
// Get the loop value.
// Owl carousel setting to loop back to beginning.
var bannerLoop = false;
var bannerRewind = true;
// Get dots.
// Owl carousel setting show dots.
// If banner has more than 1 slide show dots.
var bannerDots = false;
if (owl.children().length > 1) {
bannerDots = true;
}
// Get nav.
// Owl carousel setting show prev next.
var bannerNav = false;
if ($(this).hasClass('uw-carousel__banner-inset')) {
bannerNav = true;
}
// Extract the number from "Page dot #".
var match = label.match(/\d+/);
if (!match) {
return;
}
// Get the play and stop buttons.
var bannerPlay = $(this).find($('.uw-play'));
var bannerPause = $(this).find($('.uw-pause'));
// Convert to zero-based index.
var targetIndex = parseInt(match[0], 10) - 1;
// Actions for play button.
bannerPlay.on('click',function () {
owl.trigger('play.owl.autoplay', [bannerSlideSpeed]);
bannerPlay.css('display', 'none');
bannerPause.css('display', 'block');
});
// Move to the slide.
flkty.select(targetIndex);
// Actions for pause button.
bannerPause.on('click',function () {
owl.trigger('stop.owl.autoplay');
bannerPause.css('display', 'none');
bannerPlay.css('display', 'block');
var banner = event.target.closest('.uw-carousel__banner');
if (banner) {
var pauseButton = banner.querySelector('.uw-pause');
if (pauseButton) {
pauseButton.click();
}
}
}
});
// Pause carousel when clicking pagination dots.
dot.addEventListener('click', function (event) {
var banner = event.target.closest('.uw-carousel__banner');
if (banner) {
var pauseButton = banner.querySelector('.uw-pause');
if (pauseButton) {
pauseButton.click();
}
}
});
});
}
}
});
// Add the carousel to the banner using the id.
owl.owlCarousel({
animateIn: 'fadeIn',
animateOut: 'fadeOut',
autoplay: bannerAutoplay,
autoHeight : true,
autoplayTimeout: bannerSlideSpeed,
autoplayHoverPause: true,
dots: bannerDots,
dotsClass: 'uw-owl-nav__dots',
loop: bannerLoop,
rewind: bannerRewind,
nav: bannerNav,
navContainerClass: 'uw-owl-nav__prevnext',
navText:[
'',
''
],
responsiveClass: true,
responsive: {
0: {
items: 1
},
600: {
items: numOfItems <= 2 ?
(numOfItems - 1 > 0) ?
numOfItems - 1 : 1 : 2
},
1000: {
items: numOfItems
// Get play and pause buttons.
var bannerPlay = banner.querySelector('.uw-play');
var bannerPause = banner.querySelector('.uw-pause');
// Attach event listeners for play and pause.
if (bannerPlay && bannerPause) {
bannerPlay.addEventListener('click', function () {
flkty.playPlayer();
bannerPlay.style.display = 'none';
bannerPause.style.display = 'block';
});
bannerPause.addEventListener('click', function () {
flkty.stopPlayer();
bannerPause.style.display = 'none';
bannerPlay.style.display = 'block';
});
}
// Get banner link.
var bannerLink = banner.querySelector('.card__banner a');
// If banner links,
// Check for Tab key, find pause button and click it.
if (bannerLink) {
bannerLink.addEventListener('keydown', function (event) {
if (event.key === 'Tab' || event.keyCode === 9) {
var banner = event.target.closest('.uw-carousel__banner');
if (banner) {
var pauseButton = banner.querySelector('.uw-pause');
if (pauseButton) {
pauseButton.click();
}
}
}
},
});
}).on('click', '.owl-dot', function () {
// Pause the slideshow if they click to advance
// to a specific slide. We don't need to check
// if this is present because jQuery will just
// ignore this if it isn't.
$(this).closest('.uw-carousel__banner').find('.uw-pause').click();
});
}
});
});
}
};
})(jQuery, Drupal);
})(jQuery, Drupal, window);
src/patterns/04-components/banners/banners.twig
View file @ 4314765c
......@@ -17,7 +17,7 @@
{% endembed %}
<noscript>
<div class="uw-owl-nav__dots-js">
<div class="uw-nav__dots-js">
{% for image in banners.images %}
<a href="#banner{{ loop.index }}-{{ banners.uuid }}" role="button" class="owl-dot"></a>
{% endfor %}
......
src/patterns/04-components/card/card--banner/_card--banner.scss
View file @ 4314765c
......@@ -18,7 +18,7 @@
}
}
}
.uw-owl-nav__banner-control {
.uw-nav__banner-control {
background: var(--uw-black) !important;
border: var(size-xs) solid var(--uw-gold) !important;
.uw-play-svg {
......@@ -187,7 +187,7 @@
}
}
}
.uw-owl-nav__banner-control,
.uw-nav__banner-control,
.banner-video-control{
color: var(--#{$colour}-primary) !important;
background: var(--uw-white) !important;
......@@ -314,7 +314,7 @@
}
}
.uw-owl-nav__banner-control,
.uw-nav__banner-control,
.banner-video-control {
background: var(--uw-white) !important;
border: var(--size-xs) solid var(--#{$colour}-primary) !important;
......@@ -684,7 +684,7 @@
display: none;
}
.uw-owl-nav__banner-control,
.uw-nav__banner-control,
.banner-video-control {
.uw-icon {
svg {
......
src/patterns/04-components/eu-cookie-compliance/eu-cookie-compliance.twig
View file @ 4314765c
<div class="eu-cookie-compliance-banner eu-cookie-compliance-banner-info eu-cookie-compliance-banner--default">
<div class="popup-content info eu-cookie-compliance-content" role="alertdialog">
<div
aria-labelledby="{{ cookie.labelledby_id }}"
aria-describedby="{{ cookie.describedby_id }}"
id="popup-text"
class="eu-cookie-compliance-message">
<h2 id="{{ cookie.labelledby_id }}">{{ cookie.label }}</h2>
<p id="{{ cookie.describedby_id }}">{{ cookie.description }}</p>
class="eu-cookie-compliance-message"
id="{{ cookie.describedby_id }}">
<h2>{{ cookie.label }}</h2>
<p>{{ cookie.description }}</p>
</div>
<div id="popup-buttons" class="eu-cookie-compliance-buttons">
<button type="button" class="agree-button eu-cookie-compliance-default-button">{{ 'Accept all'|t }}</button>
<button type="button" class="agree-button eu-cookie-compliance-default-button"
aria-describedby="{{ cookie.describedby_id }}">
{{ 'Accept all'|t }}
</button>
</div>
</div>
</div>
src/patterns/04-components/facts-and-figures/_facts-and-figures-details.twig 0 → 100644
View file @ 4314765c
{% for detail in details %}
{% if detail.type == 'infographic' %}
{% include '@components/facts-and-figures/_infographics.twig' with {
'infographics': detail,
} %}
{% elseif detail.type == 'icon' %}
<div class="uw-ff--text uw-ff--text__{{ detail.type }}">
<img src="{{ detail.icon }}" alt="{{ detail.alt }}" />
</div>
{% elseif detail.type == 'caption' %}
{% if detail.caption %}
<span class="uw-ff--text uw-ff--text__caption balance-text">
{{ detail.caption }}
</span>
{% endif %}
{% else %}
<span class="uw-ff--text uw-ff--text__{{ detail.type }} balance-text">{{ detail.text }}</span>
{% endif %}
{% endfor %}
src/patterns/04-components/facts-and-figures/_facts-and-figures.scss
View file @ 4314765c
......@@ -439,7 +439,7 @@ $highlighted-fact-round: $global-rounded;
visibility: hidden;
}
.uw-ff .owl-carousel .owl-item img {
.uw-ff .carousel img {
width: auto;
}
......@@ -447,9 +447,10 @@ $highlighted-fact-round: $global-rounded;
from owl script. Ensures bubbles
are the same height. */
.uw-ff {
&--with-bubbles{
.uw-ff--fact{
&--with-bubbles {
.uw-ff--fact {
border-radius: $highlighted-fact-radius + 10;
&:nth-of-type(odd) {
&::after {
border-left: var(--size-2) solid transparent;
......@@ -479,7 +480,7 @@ are the same height. */
}
}
&__black{
&__black {
.uw-ff--fact {
background-color: var(--uw-black);
......@@ -491,13 +492,14 @@ are the same height. */
&:nth-of-type(even) {
&::after {
border-top: var(--size-3) solid var(--uw-black);
border-top: var(--size-3) solid var(--uw-black);
}
}
}
}
&__white{
.uw-ff--fact{
&__white {
.uw-ff--fact {
background-color: var(--uw-white);
&:nth-of-type(odd) {
......@@ -513,8 +515,9 @@ are the same height. */
}
}
}
&__grey{
.uw-ff--fact{
&__grey {
.uw-ff--fact {
background-color: var(--uw-black-1);
&:nth-of-type(odd) {
......@@ -522,6 +525,7 @@ are the same height. */
border-bottom: var(--size-3) solid var(--uw-black-1);
}
}
&:nth-of-type(even) {
&::after {
border-top: var(--size-3) solid var(--uw-black-1);
......@@ -530,8 +534,8 @@ are the same height. */
}
}
&__gold{
.uw-ff--fact{
&__gold {
.uw-ff--fact {
background-color: var(--uw-gold);
&:nth-of-type(odd) {
......@@ -568,6 +572,7 @@ are the same height. */
.infographic-half-circle {
justify-self: flex-start;
}
.uw-ff--text {
text-align: left;
}
......@@ -583,7 +588,7 @@ are the same height. */
width: auto;
}
.uw-ff--fact{
.uw-ff--fact {
align-items: flex-end;
text-align: right;
}
......@@ -610,7 +615,7 @@ are the same height. */
text-align: center;
}
.highlighted-fact-infographic{
.highlighted-fact-infographic {
align-items: center;
}
......@@ -619,7 +624,7 @@ are the same height. */
width: auto;
}
.infographic-number{
.infographic-number {
margin: 0 auto;
text-align: center;
width: auto;
......@@ -658,8 +663,10 @@ are the same height. */
margin: var(--size-1) 0;
text-wrap: balance;
width: 100%;
&__icon {
display: block;
img {
display: block;
height: 100%;
......@@ -711,6 +718,7 @@ are the same height. */
i {
font-style: normal;
}
strong,
b {
font-weight: bold;
......@@ -718,14 +726,14 @@ are the same height. */
}
}
&--no-carousel{
&--no-carousel {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
.uw-ff{
&--fact{
.uw-ff {
&--fact {
@include flex(1 1 auto);
@include flex-grow(1);
margin: var(--size-205) 0;
......@@ -771,6 +779,7 @@ are the same height. */
width: 100%;
}
}
.uw-full-width & {
@media(min-width: $screen-xs) {
......@@ -789,45 +798,183 @@ are the same height. */
}
}
&--carousel{
.owl-stage{
&--carousel {
.carousel {
display: flex;
}
flex-flow: column;
margin-bottom: var(--size-16);
.flickity-slider {
display: flex;
}
.uw-ff--fact {
display: flex;
@include flex(1 1 auto);
@include flex-grow(1);
flex-flow: column;
position: relative;
margin-left: var(--size-110);
padding: var(--size-4);
min-height:100%;
.owl-item {
display: flex;
position: relative;
&:nth-of-type(odd) {
.uw-ff--fact {
&::after {
bottom: inherit;
top: -1.25rem;
}
}
}
&:nth-of-type(odd) {
.uw-ff--fact{
&::after{
bottom: inherit;
top: -1.25rem;
&:nth-of-type(even) {
.uw-ff--fact {
&::after {
bottom: -1.25rem;
top: inherit;
transform: rotate(180deg);
}
}
}
}
&:nth-of-type(even) {
.uw-ff--fact{
&::after{
bottom: -1.25rem;
top: inherit;
transform: rotate(180deg);
&:first-child {
margin-left: 0;
}
[data-num-per-carousel='1'] & ,
[data-num-per-carousel='2'] & ,
[data-num-per-carousel='3'] & ,
[data-num-per-carousel='4'] & {
width: 100%;
@media(min-width: $screen-md) {
width: 49.5%;
}
}
[data-num-per-carousel='1'] & {
@media(min-width: $screen-md) {
width: 100%
}
}
[data-num-per-carousel='2'] & {
@media(min-width: $screen-lg) {
width: 49.5%
}
}
[data-num-per-carousel='3'] & {
@media(min-width: $screen-lg) {
width: 32.5%
}
}
[data-num-per-carousel='4'] & {
@media(min-width: $screen-lg) {
width: 24.25%
}
}
}
&:first-child {
margin-left: 0;
.flickity-page-dots {
.uw-hide-ff-nav & {
@media(min-width: $screen-lg) {
visibility: hidden;
}
}
.uw-hide-ff-nav-all & {
visibility: hidden;
}
bottom: -3.125rem;
.dot {
height: var(--size-2);
width: var(--size-2);
&.is-selected {
background: var(--uw-black);
}
&:hover,
&:focus {
opacity: 1 !important;
background: var(--gray-5);
}
}
}
}
.owl-stage-outer {
padding: var(--size-4) 0;
.flickity-viewport {
display: flex;
flex-flow: column;
margin-bottom: var(--size-4);
overflow: inherit;
overflow-x: clip;
overflow-y: visible;
padding-top: var(--size-4);
}
.flickity-prev-next-button {
top: inherit;
bottom: -9rem;
height: var(--size-7);
width: var(--size-10);
border-radius: inherit;
background: var(--gray-2);
color: var(--uw-black);
display: inline-block;
font-family: var(--font-condensedbook);
font-size: var(--font-size-1);
font-weight: 200;
letter-spacing: .055rem;
margin: 0 var(--size-1);
max-width: inherit;
padding: var(--size-105);
text-decoration: none;
text-transform: uppercase;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
vertical-align: middle;
white-space: nowrap;
&:hover,
&:focus {
background: var(--gray-5) !important;
color: var(--uw-white) !important;
}
.flickity-button-icon {
position: absolute;
top: 40%;
left: inherit;
height: var(--size-110);
width: var(--size-110);
}
&.hide {
display: none;
}
&.next {
left:49.5%;
.flickity-button-icon {
left: 3.25rem;
}
&:before {
width: var(--size-10);
text-align: left;
display:block;
content: 'NEXT';
position:relative;
}
}
&.previous{
left: 42%;
.flickity-button-icon {
left: inherit;
left: 20%;
}
&:before {
width: var(--size-10);
display:block;
content: 'PREV';
position:relative;
}
}
}
}
}
}
}
.infographic-fields-inline .fieldset-wrapper {
display: grid;
grid-gap: var(--size-2);
......@@ -961,75 +1108,3 @@ are the same height. */
}
}
}
.no-js .uw-ff--carousel .owl-carousel {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
.uw-ff {
&--fact {
@include flex(1 1 auto);
@include flex-grow(1);
margin: var(--size-205) 0;
width: 100%;
@media(min-width: $screen-xs) {
width: 50%;
}
@media(min-width: $screen-md) {
width: 30%;
}
@media(min-width: $screen-xl) {
width: 25%;
}
.uw-contained-width--wide & {
@media(min-width: $screen-xs) {
width: 45%;
}
@media(min-width: $screen-md) {
width: 45%;
}
@media(min-width: $screen-xl) {
width: 45%;
}
}
.uw-node__sidebar &,
.uw-contained-width--narrow & {
@media(min-width: $screen-xs) {
width: 100%;
}
@media(min-width: $screen-md) {
width: 100%;
}
@media(min-width: $screen-xl) {
width: 100%;
}
}
.uw-full-width & {
@media(min-width: $screen-xs) {
width: 45%;
}
@media(min-width: $screen-md) {
width: 30%;
}
@media(min-width: $screen-xl) {
width: 23%;
}
}
}
}
}
.no-js.js {
.uw-ff--carousel .owl-carousel.owl-theme {
display: flex !important;
flex-flow: column;
}
}
src/patterns/04-components/facts-and-figures/facts-and-figures.js
View file @ 4314765c
......@@ -5,7 +5,7 @@
(function ($, Drupal) {
'use strict';
Drupal.behaviors.factfigure = {
attach: function () {
attach: function (context) {
/**
* Run the carousel.
......@@ -14,31 +14,75 @@
* @return {null} void
*/
function runCarousel(id, numOfItems) {
// Add the carousel to the FF using the id.
$(id + ' .owl-carousel').owlCarousel({
margin: 10,
nav: true,
navContainerClass: 'uw-owl-nav',
navText: [
'‹ prev',
'next ›'
],
responsiveClass: true,
responsive: {
0: {
items: 1
},
600: {
items: numOfItems <= 2
? (numOfItems - 1 > 0)
? numOfItems - 1 : 1 : 2
},
1000: {
items: numOfItems
var $carousel = $(id + ' .carousel', context);
if ($carousel.length) {
$carousel.flickity({
pageDots: true,
prevNextButtons: true,
wrapAround: false,
contain: true,
groupCells: function () {
var width = $(window).width();
if (width <= 600) {
return 1;
}
else if (width <= 1000) {
return numOfItems <= 2 ? (numOfItems - 1 > 0)
? numOfItems - 1 : 1 : 2;
}
else {
return numOfItems;
}
}
});
// Get the Flickity instance from the element.
var flkty = $carousel.data('flickity');
// Handle keyboard navigation for Flickity pagination dots.
var dots = $carousel.find('.flickity-page-dots .dot').toArray(); // var dots = $carousel.find('.flickity-page-dots .dot').toArray();
if (dots.length === 0 || dots.length === 1) {
$carousel.find('.flickity-button').addClass('hide');
}
if (!dots.length) {
return;
}
});
dots.forEach(function (dot) {
dot.setAttribute('tabindex', '0'); // Make dots focusable.
dot.addEventListener('keydown', function (event) {
if (event.key === 'Enter' || event.keyCode === 13) {
var label = dot.getAttribute('aria-label');
// Extract the slide index from the dot label.
var match = label.match(/\d+/);
if (!match) {
return;
}
var targetIndex = parseInt(match[0], 10) - 1;
if (flkty) {
flkty.select(targetIndex); // Move to the selected slide.
}
}
});
});
// previous button
$('.uw-button--previous').on('click', function () {
var $carousel = $(this).closest('.uw-ff').find('.carousel');
$carousel.flickity('previous');
});
// next button
$('.uw-button--next').on('click', function () {
var $carousel = $(this).closest('.uw-ff').find('.carousel');
$carousel.flickity('next');
});
}
}
/**
......
src/patterns/04-components/facts-and-figures/facts-and-figures.twig
View file @ 4314765c
<div id="uw-ff-{{ ffs.id }}" class="uw-ff {% if ffs.show %}uw-ff--with-bubbles uw-ff--with-bubbles__{{ ffs.bg_colour}}{% else%}uw-ff__{{ ffs.bg_colour}}{% endif %}" data-carousel="{{ ffs.num_per_carousel ? 'yes' :'no' }}" data-num-per-carousel="{{ ffs.num_per_carousel }}" data-id="{{ ffs.id }}">
<div id="uw-ff-{{ ffs.id }}" class="uw-ff {% if ffs.show %}uw-ff--with-bubbles uw-ff--with-bubbles__{{ ffs.bg_colour}}{% else%}uw-ff__{{ ffs.bg_colour}}{% endif %} {% if ffs.num_per_carousel == ffs.details|length %} uw-hide-ff-nav{% endif %} {% if ffs.num_per_carousel == '1' and ffs.details|length == '1'%} uw-hide-ff-nav-all {% endif %}" data-carousel="{{ ffs.num_per_carousel ? 'yes' :'no' }}" data-num-per-carousel="{{ ffs.num_per_carousel }}" data-id="{{ ffs.id }}">
<div class="uw-ff--wrapper uw-ff--wrapper__text-{{ ffs.text_align }} {{ ffs.num_per_carousel ? 'uw-ff--carousel' : 'uw-ff--no-carousel' }} {{ ffs.theme }}">
{% if ffs.num_per_carousel >= 1%}
{% embed '@layouts/carousel/carousel.twig' %}
{% block content %}
{% for details in ffs.details %}
<div class="uw-ff--fact">
{% for detail in details %}
{% if detail.type == 'infographic' %}
{% include '@components/facts-and-figures/_infographics.twig' with {
'infographics': detail,
} %}
{% elseif detail.type == 'icon' %}
<div class="uw-ff--text uw-ff--text__{{ detail.type }}">
<img src="{{ detail.icon }}" alt="{{ detail.alt }}" />
</div>
{% elseif detail.type == 'caption' %}
{% if detail.caption %}
<span class="uw-ff--text uw-ff--text__caption balance-text">
{{ detail.caption }}
</span>
{% endif %}
{% else %}
<span class="uw-ff--text uw-ff--text__{{ detail.type }} balance-text">{{ detail.text }}</span>
{% endif %}
{% endfor %}
{% include '@components/facts-and-figures/_facts-and-figures-details.twig' with {
details: details
} %}
</div>
{% endfor %}
{% endblock %}
......@@ -33,30 +15,11 @@
{% else %}
{% for details in ffs.details %}
<div class="uw-ff--fact">
{% for detail in details %}
{% if detail.type == 'infographic' %}
{% include '@components/facts-and-figures/_infographics.twig' with {
'infographics': detail,
} %}
{% elseif detail.type == 'icon' %}
<div class="uw-ff--text uw-ff--text__{{ detail.type }}">
<img src="{{ detail.icon }}" alt="{{ detail.alt }}" />
</div>
{% elseif detail.type == 'caption' %}
{% if detail.caption %}
<span class="uw-ff--text uw-ff--text__caption balance-text">
{{ detail.caption }}
</span>
{% endif %}
{% else %}
<span class="uw-ff--text uw-ff--text__{{ detail.type }} balance-text">{{ detail.text }}</span>
{% endif %}
{% endfor %}
{% include '@components/facts-and-figures/_facts-and-figures-details.twig' with {
details: details
} %}
</div>
{% endfor %}
{% endif %}
</div>
</div>
src/patterns/04-components/image-gallery/_image-gallery.scss
View file @ 4314765c
......@@ -8,6 +8,100 @@ $size-medium: 4;
$size-large: 4;
$size-xlarge: 7;
.uw-ig {
&[data-nav="both"] {
padding-bottom: var(--size-12);
.flickity-prev-next-button {
bottom:-9rem;
}
}
&[data-nav="navigation"] {
padding-bottom: var(--size-10);
.flickity-prev-next-button {
bottom:-5rem;
}
}
.flickity-page-dots {
&.hide {
display: none;
}
bottom: -2rem;
.dot {
height: var(--size-2);
width: var(--size-2);
&.is-selected {
background:var(--uw-black);
}
&:hover,
&:focus{
opacity: 1 !important;
background: var(--gray-5);
}
}
}
.flickity-prev-next-button {
top: inherit;
height: var(--size-7);
width: var(--size-10);
border-radius: inherit;
background: var(--gray-2);
color: var(--uw-black);
display: inline-block;
font-family: var(--font-condensedbook);
font-size: var(--font-size-1);
font-weight: 200;
letter-spacing: .055rem;
margin: 0 var(--size-1);
max-width: inherit;
padding: var(--size-105);
text-decoration: none;
text-transform: uppercase;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
vertical-align: middle;
white-space: nowrap;
&:hover,
&:focus {
background: var(--gray-5) !important;
color: var(--uw-white) !important;
}
.flickity-button-icon {
position: absolute;
top: 40%;
left: inherit;
height: var(--size-110);
width: var(--size-110);
}
&.hide {
display: none;
}
&.next {
left:49.5%;
.flickity-button-icon {
left: 3.25rem;
}
&:before {
width: var(--size-10);
text-align: left;
display:block;
content: 'NEXT';
position:relative;
}
}
&.previous{
left: 42%;
.flickity-button-icon {
left: inherit;
left: 20%;
}
&:before {
width: var(--size-10);
display:block;
content: 'PREV';
position:relative;
}
}
}
&--slider {
//
}
......@@ -196,6 +290,36 @@ $size-xlarge: 7;
}
}
}
&[data-images-num="1"],
&[data-images-num="2"],
&[data-images-num="3"],
&[data-images-num="4"] {
.uw-ig__item {
margin-left: var(--size-1);
width: 100%;
&:first-child {
margin-left: inherit;
}
}
}
@media(min-width: $screen-md) {
&[data-images-num="2"] {
.uw-ig__item {
max-width: 50%;
}
}
&[data-images-num="3"] {
.uw-ig__item {
max-width: 32.75%;
}
}
&[data-images-num="4"] {
.uw-ig__item {
max-width: 24.75%;
}
}
}
}
//
// lightbox
......
src/patterns/04-components/image-gallery/image-gallery.js
View file @ 4314765c
/**
* @file
* Provides behavior for the image gallery using Flickity.
*/
(function ($, Drupal) {
(function ($, Drupal, window) {
'use strict';
Drupal.behaviors.imagegallery = {
attach: function () {
// Ensure code runs after the DOM is fully loaded.
$(document).ready(function () {
// Step through each FF on the page.
// Iterate over each image gallery component.
$('.uw-ig').each(function () {
// Get the id to reference the individual FF.
// Need this to ensure that if more than one FF on the page,
// that all FFs get the carousel added.
// Get the unique ID for each image gallery instance.
var id = '#uw-ig-' + $(this).data('id');
// Retrieve configuration options from data attributes.
var imagesNum = $(this).data('images-num') || 1;
var navStyle = $(this).data('nav') || 'both';
var $carousel = $(id + ' .carousel');
// Create owl carouse config first.
var carousel = {
loop: true,
dots: true,
nav: true,
navContainerClass: 'uw-owl-nav',
navText:[
'prev',
'next'
],
margin: 10,
responsiveClass: true,
responsive: {
0: {
items: 1
// Initialize Flickity only if the carousel exists.
if ($carousel.length) {
$carousel.flickity({
cellAlign: 'left',
contain: true,
wrapAround: true,
draggable: false,
imagesLoaded: true,
groupCells: function () {
// Adjust the number of visible images based on screen width.
var width = $(window).width();
if (width <= 600) {
return 1;
}
else if (width <= 1024) {
return Math.min(2, imagesNum);
}
else {
return imagesNum;
}
},
600: {
items: imagesNum
},
1000: {
items: imagesNum
}
prevNextButtons: navStyle === 'navigation' || navStyle === 'both',
pageDots: navStyle === 'pagination' || navStyle === 'both',
});
// Get the Flickity instance from the element.
var flkty = $carousel.data('flickity');
// Handle keyboard navigation for Flickity pagination dots.
var dots = $carousel.find('.flickity-page-dots .dot').toArray();
// Hide the button wrapper if the number of dots equals imagesNum
if (dots.length === imagesNum) {
$(this).find('.flickity-prev-next-button').addClass('hide');
$(this).find('.flickity-page-dots').addClass('hide');
}
if (!dots.length) {
return;
}
};
if (navStyle === 'pagination') {
carousel.nav = false;
}
else if (navStyle === 'navigation') {
carousel.dots = false;
dots.forEach(function (dot) {
dot.setAttribute('tabindex', '0'); // Make dots focusable.
dot.addEventListener('keydown', function (event) {
if (event.key === 'Enter' || event.keyCode === 13) {
var label = dot.getAttribute('aria-label');
// Extract the slide index from the dot label.
var match = label.match(/\d+/);
if (!match) {
return;
}
var targetIndex = parseInt(match[0], 10) - 1;
if (flkty) {
flkty.select(targetIndex); // Move to the selected slide.
}
}
});
});
}
// Add the carousel to the FF using the id.
$(id + ' .owl-carousel').owlCarousel(carousel);
// Previous button event listener.
$('.uw-ig-button--previous').on('click', function () {
var $carousel = $(this).closest('.uw-ig').find('.carousel');
$carousel.flickity('previous');
});
// Next button event listener.
$('.uw-ig-button--next').on('click', function () {
var $carousel = $(this).closest('.uw-ig').find('.carousel');
$carousel.flickity('next');
});
// Set lightbox open button to be unfocusable by default.
$('.uw-lightbox__open').attr('tabindex', -1);
// Lightbox enchancements
// Activate navigation buttons if required.
if (navStyle === 'navigation' || navStyle === 'both') {
$('.uw-button--wrap').addClass('active');
}
// Lightbox open event.
$('.uw-lightbox__open').on('click', function () {
$(id + ' .uw-lightbox').addClass('openLightBox');
$('html').addClass('no-scroll');
});
// Lightbox close
// Lightbox close event.
$(id + ' .uw-lightbox__close').on('click', function () {
$('.uw-lightbox').removeClass('openLightBox');
$('html').removeClass('no-scroll');
});
// If next is clicked
$(id + ' .uw-lightbox__next').on('click', function () {
if (!$(id + ' .uw-lightbox').hasClass('openLightBox')) {
$(id + ' .uw-lightbox').addClass('openLightBox');
}
});
// If prev is clicked
$(id + ' .uw-lightbox__prev').on('click', function () {
// Ensure the lightbox opens when navigating within it.
$(id + ' .uw-lightbox__next, ' + id + ' .uw-lightbox__prev').on('click', function () {
if (!$(id + ' .uw-lightbox').hasClass('openLightBox')) {
$(id + ' .uw-lightbox').addClass('openLightBox');
}
......@@ -84,46 +130,39 @@
* @returns {boolean} clicked.
*/
function fakeClick() {
//use url to build the fake anchor id
var url = window.location.href;
//Regex to replace the text
// "lightbox" with "ig" a
// and trim last "-###".
// Construct a fake anchor ID to match the gallery.
var galleryAnchor = url
.substring(url.lastIndexOf('/') + 1)
.replace( /(?:^|\W)lightbox(?:$|\W)/, '-ig-')
.replace(/(?:^|\W)lightbox(?:$|\W)/, '-ig-')
.replace(/-\d+$/, '');
// Create the fake element
var escFake = document.createElement('a');
var linkText = document.createTextNode('fake click');
escFake.appendChild(linkText);
escFake.title = 'my title text';
// Create a temporary link element.
var escFake = document.createElement('a');
escFake.href = galleryAnchor;
escFake.classList = 'uw-lightbox__close off-screen';
escFake.classList.add('uw-lightbox__close', 'off-screen');
// Append the fake button
// Append and trigger the click.
document.body.appendChild(escFake);
//Click the button
escFake.click();
// Remove no scroll
// Cleanup after closing the lightbox.
$('html').removeClass('no-scroll');
// Remove open class
$('.uw-lightbox').removeClass('openLightBox');
// Remove the fake button
document.body.removeChild(escFake);
}
// Attach the keyup event to Escape tp close
// Close lightbox when pressing Escape.
$(document).on('keyup', function (evt) {
if (evt.keyCode === 27) {
fakeClick();
}
});
// If click in outside lightbox div then close
$(document).click( function (evt) {
if ($(evt.target).is( $('.uw-lightbox.openLightBox'))) {
// Close lightbox if clicking outside of the content.
$(document).click(function (evt) {
if ($(evt.target).is($('.uw-lightbox.openLightBox'))) {
fakeClick();
}
});
......@@ -131,4 +170,4 @@
});
}
};
})(jQuery, Drupal);
})(jQuery, Drupal, window);
src/patterns/04-components/multi-type-list/multi-type-list.twig
View file @ 4314765c
......@@ -3,107 +3,109 @@
{% set content_list = content_list|merge([type]) %}
{% endfor %}
{% set button_modifier_classes -%}
button button--large {{ modifier_classes }}
{%- endset %}
{% if content_list %}
{% set button_modifier_classes -%}
button button--large {{ modifier_classes }}
{%- endset %}
{% embed '@components/tabs/_tabs.twig' with {
'tab_type': 'content',
'content_list': content_list,
'button_modifier_classes': button_modifier_classes,
} %}
{% if is_demo %}
{% set view_all = 'true' %}
{% endif %}
{% for type, list in lists %}
{% for info in list %}
{% embed '@components/tabs/_tabs.twig' with {
'tab_type': 'content',
'content_list': content_list,
'button_modifier_classes': button_modifier_classes,
} %}
{% if is_demo %}
{% set view_all = 'true' %}
{% endif %}
{% for type, list in lists %}
{% for info in list %}
{% if loop.parent.loop.index == 1 %}
{% block content_area_1 %}
{% include '@components/multi-type-list/_multi-tab-list-include-content.twig' with {
'type': type,
'lists': lists,
} %}
{% if view_all %}
<div class="uw-multi-type-list__button">
{% include '@components/button/button.twig' with {
'url': view_all[type].url,
'text': view_all[type].text,
} %}
</div>
{% endif %}
{% endblock %}
{% elseif loop.parent.loop.index == 2 %}
{% block content_area_2 %}
{% include '@components/multi-type-list/_multi-tab-list-include-content.twig' with {
'type': type,
'lists': lists,
'view_all': view_all,
} %}
{% if view_all %}
<div class="uw-multi-type-list__button">
{% include '@components/button/button.twig' with {
'url': view_all[type].url,
'text': view_all[type].text,
} %}
</div>
{% endif %}
{% endblock %}
{% elseif loop.parent.loop.index == 3 %}
{% block content_area_3 %}
{% include '@components/multi-type-list/_multi-tab-list-include-content.twig' with {
'type': type,
'lists': lists,
'view_all': view_all,
} %}
{% if view_all %}
<div class="uw-multi-type-list__button">
{% include '@components/button/button.twig' with {
'url': view_all[type].url,
'text': view_all[type].text,
} %}
</div>
{% endif %}
{% endblock %}
{% if loop.parent.loop.index == 1 %}
{% block content_area_1 %}
{% include '@components/multi-type-list/_multi-tab-list-include-content.twig' with {
'type': type,
'lists': lists,
} %}
{% if view_all %}
<div class="uw-multi-type-list__button">
{% include '@components/button/button.twig' with {
'url': view_all[type].url,
'text': view_all[type].text,
} %}
</div>
{% endif %}
{% endblock %}
{% elseif loop.parent.loop.index == 2 %}
{% block content_area_2 %}
{% include '@components/multi-type-list/_multi-tab-list-include-content.twig' with {
'type': type,
'lists': lists,
'view_all': view_all,
} %}
{% if view_all %}
<div class="uw-multi-type-list__button">
{% include '@components/button/button.twig' with {
'url': view_all[type].url,
'text': view_all[type].text,
} %}
</div>
{% endif %}
{% endblock %}
{% elseif loop.parent.loop.index == 3 %}
{% block content_area_3 %}
{% include '@components/multi-type-list/_multi-tab-list-include-content.twig' with {
'type': type,
'lists': lists,
'view_all': view_all,
} %}
{% if view_all %}
<div class="uw-multi-type-list__button">
{% include '@components/button/button.twig' with {
'url': view_all[type].url,
'text': view_all[type].text,
} %}
</div>
{% endif %}
{% endblock %}
{% elseif loop.parent.loop.index == 4 %}
{% block content_area_4 %}
{% include '@components/multi-type-list/_multi-tab-list-include-content.twig' with {
'type': type,
'lists': lists,
'view_all': view_all,
} %}
{% if view_all %}
<div class="uw-multi-type-list__button">
{% include '@components/button/button.twig' with {
'url': view_all[type].url,
'text': view_all[type].text,
} %}
</div>
{% endif %}
{% endblock %}
{% elseif loop.parent.loop.index == 4 %}
{% block content_area_4 %}
{% include '@components/multi-type-list/_multi-tab-list-include-content.twig' with {
'type': type,
'lists': lists,
'view_all': view_all,
} %}
{% if view_all %}
<div class="uw-multi-type-list__button">
{% include '@components/button/button.twig' with {
'url': view_all[type].url,
'text': view_all[type].text,
} %}
</div>
{% endif %}
{% endblock %}
{% elseif loop.parent.loop.index == 5 %}
{% block content_area_5 %}
{% include '@components/multi-type-list/_multi-tab-list-include-content.twig' with {
'type': type,
'lists': lists,
'view_all': view_all,
} %}
{% if view_all %}
<div class="uw-multi-type-list__button">
{% include '@components/button/button.twig' with {
'url': view_all[type].url,
'text': view_all[type].text,
} %}
</div>
{% endif %}
{% endblock %}
{% elseif loop.parent.loop.index == 5 %}
{% block content_area_5 %}
{% include '@components/multi-type-list/_multi-tab-list-include-content.twig' with {
'type': type,
'lists': lists,
'view_all': view_all,
} %}
{% if view_all %}
<div class="uw-multi-type-list__button">
{% include '@components/button/button.twig' with {
'url': view_all[type].url,
'text': view_all[type].text,
} %}
</div>
{% endif %}
{% endblock %}
{% endif %}
{% endif %}
{% endfor %}
{% endfor %}
{% endfor %}
{% endfor %}
{% endembed %}
{% endembed %}
{% endif %}