@total_onion/onion-library 2.0.235 → 2.0.237

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -127,8 +127,14 @@
127
127
  {% set positionVars = include('components/element-positioning-v3.twig', { fields, block, blockClassName, is_preview}, with_context = false) %}
128
128
 
129
129
  {% if fields.carousel_pagination %}
130
- <div class="swiper-pagination"></div>
130
+ <style>
131
+ .swiper-pagination.{{block.id}}{
132
+ {{positionVars}}
133
+ }
134
+ </style>
135
+ <div class="swiper-pagination {{block.id}}"></div>
131
136
  {% endif %}
137
+
132
138
  {% if fields.enable_carousel_nav_arrows and fields.enable_custom_arrows == false %}
133
139
  <div class="{{ blockClassName }}__button-prev swiper-button-prev"></div>
134
140
  <div class="{{ blockClassName }}__button-next swiper-button-next"></div>
@@ -1,6 +1,6 @@
1
1
  {% set blockClassName = "standard-content-v3" %}
2
2
  {% set displaytype = 'grid' %}
3
- {% set classNameEntryPoint = include('entry-points/entry-point-classes.twig', { fields, block }, with_context = false) %}
3
+ {% set classNameEntryPoint = include('entry-points/entry-point-classes-v3.twig', { fields, block }, with_context = false) %}
4
4
  {% set htmlEntryPoint = include('entry-points/entry-point-html-v3.twig', { fields, block, blockClassName, options, cta_styles, environment, is_preview, nav_menus, imageSizes }, with_context = false) %}
5
5
  {% set dataAttributeEntryPoint = include('entry-points/entry-point-data-attribute.twig', { fields, block }, with_context = false) %}
6
6
  {% set styleEntryPoint = include('entry-points/entry-point-style-v3.twig', { fields, block, displaytype, is_preview }, with_context = false) %}
@@ -13,7 +13,8 @@
13
13
  {{sectionStyles}}
14
14
  }
15
15
  </style>
16
- <section {{ block.anchor ? 'id=' ~ block.anchor : '' }} class="{{blockClassName}} {{fields.section_class}} {{classNameEntryPoint}} {{ block.id }} lazy-fade" {{dataAttributeEntryPoint}} data-assetkey="{{blockClassName}}">
16
+ <section {{ block.anchor ? 'id=' ~ block.anchor : '' }} class="{{blockClassName}} {{ block.id }} lazy-fade {{fields.section_class}} {{classNameEntryPoint}}" {{dataAttributeEntryPoint}} data-assetkey="{{blockClassName}}">
17
+
17
18
  {% set contentContainerStyles = include('components/content-box-settings-v3.twig', { fields, block, blockClassName }, with_context = false) %}
18
19
  <style>
19
20
  .{{blockClassName}}__inner-container.{{block.id}}{
@@ -0,0 +1,12 @@
1
+ {% if fields.animations.enable_animations %}
2
+ {% set animationClass = 'cmpl-block-animations ' %}
3
+ {% endif %}
4
+ {% if fields.enable_block_padding %}
5
+ {% set blockPaddingClass = 'cmpl-block-padding ' %}
6
+ {% endif %}
7
+ {% if fields.block_overflow is defined or fields.block_background_colour %}
8
+ {% set blockSettingsClass = 'cmpl-block-settings ' %}
9
+ {% endif %}
10
+ {% set classString = blockPaddingClass ~ blockSettingsClass ~ animationClass %}
11
+
12
+ {{classString}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@total_onion/onion-library",
3
- "version": "2.0.235",
3
+ "version": "2.0.237",
4
4
  "description": "Component library",
5
5
  "main": "index.js",
6
6
  "scripts": {
@@ -1,79 +1,3 @@
1
- const dynamicAssets = [
2
- "./components/block-video-content-v3/video-content-v3.scss",
3
- "./components/block-sub-group-container-v3/sub-group-container-v3.scss",
4
- "./components/block-sticky-buy-cta-v3/sticky-buy-cta-v3.scss",
5
- "./components/block-standard-content-v3/standard-content-v3.scss",
6
- "./components/block-spotify-embed-v3/spotify-embed-v3.scss",
7
- "./components/block-spacer-v3/spacer-v3.scss",
8
- "./components/block-social-networks-v3/social-networks-v3.scss",
9
- "./components/block-smash-balloon-social-media-v3/smash-balloon-social-media-v3.scss",
10
- "./components/block-site-title-and-tagline-v3/site-title-and-tagline-v3.scss",
11
- "./components/block-site-logo-container-v3/site-logo-container-v3.scss",
12
- "./components/block-site-copyright-notice-v3/site-copyright-notice-v3.scss",
13
- "./components/block-single-responsive-image-v3/single-responsive-image-v3.scss",
14
- "./components/block-single-column-container-v3/single-column-container-v3.scss",
15
- "./components/block-section-separator-v3/section-separator-v3.scss",
16
- "./components/block-scrolling-banner-v3/scrolling-banner-v3.scss",
17
- "./components/block-responsive-table-v3/responsive-table-v3.scss",
18
- "./components/block-raw-html-v3/raw-html-v3.scss",
19
- "./components/block-product-info-v3/product-info-v3.scss",
20
- "./components/block-post-type-filter-grid-v3/post-type-filter-grid-v3.scss",
21
- "./components/block-post-info-v3/post-info-v3.scss",
22
- "./components/block-nav-menu-container-v3/nav-menu-container-v3.scss",
23
- "./components/block-modal-form-v3/modal-form-v3.scss",
24
- "./components/block-market-selector-v3/market-selector-v3.scss",
25
- "./components/block-lottie-content-v3/lottie-content-v3.scss",
26
- "./components/block-group-container-v3/group-container-v3.scss",
27
- "./components/block-gradient-layer-v3/gradient-layer-v3.scss",
28
- "./components/block-form-selection-v3/form-selection-v3.scss",
29
- "./components/block-featured-image-gallery-v3/featured-image-gallery-v3.scss",
30
- "./components/block-divider-v3/divider-v3.scss",
31
- "./components/block-cover-link-v3/cover-link-v3.scss",
32
- "./components/block-cocktail-recipe-v3/cocktail-recipe-v3.scss",
33
- "./components/block-carousel-multi-layout-v3/carousel-multi-layout-v3.scss",
34
- "./components/block-block-interactions-v3/block-interactions-v3.scss",
35
- "./components/block-betterreviews-display-v3/betterreviews-display-v3.scss",
36
- "./components/block-back-to-top-button-v3/back-to-top-button-v3.scss",
37
- "./components/block-accordion-v3/accordion-v3.scss",
38
- "./components/block-accent-image-v3/accent-image-v3.scss",
39
- "./components/block-post-type-filter-grid-v4/post-type-filter-grid-v4.css",
40
- "./components/block-video-content-v3/video-content-v3.js",
41
- "./components/block-sub-group-container-v3/sub-group-container-v3.js",
42
- "./components/block-sticky-buy-cta-v3/sticky-buy-cta-v3.js",
43
- "./components/block-standard-content-v3/standard-content-v3.js",
44
- "./components/block-spotify-embed-v3/spotify-embed-v3.js",
45
- "./components/block-spacer-v3/spacer-v3.js",
46
- "./components/block-social-networks-v3/social-networks-v3.js",
47
- "./components/block-smash-balloon-social-media-v3/smash-balloon-social-media-v3.js",
48
- "./components/block-site-title-and-tagline-v3/site-title-and-tagline-v3.js",
49
- "./components/block-site-logo-container-v3/site-logo-container-v3.js",
50
- "./components/block-site-copyright-notice-v3/site-copyright-notice-v3.js",
51
- "./components/block-single-responsive-image-v3/single-responsive-image-v3.js",
52
- "./components/block-single-column-container-v3/single-column-container-v3.js",
53
- "./components/block-section-separator-v3/section-separator-v3.js",
54
- "./components/block-scrolling-banner-v3/scrolling-banner-v3.js",
55
- "./components/block-responsive-table-v3/responsive-table-v3.js",
56
- "./components/block-raw-html-v3/raw-html-v3.js",
57
- "./components/block-product-info-v3/product-info-v3.js",
58
- "./components/block-post-type-filter-grid-v3/post-type-filter-grid-v3.js",
59
- "./components/block-post-info-v3/post-info-v3.js",
60
- "./components/block-nav-menu-container-v3/nav-menu-container-v3.js",
61
- "./components/block-modal-form-v3/modal-form-v3.js",
62
- "./components/block-market-selector-v3/market-selector-v3.js",
63
- "./components/block-lottie-content-v3/lottie-content-v3.js",
64
- "./components/block-group-container-v3/group-container-v3.js",
65
- "./components/block-gradient-layer-v3/gradient-layer-v3.js",
66
- "./components/block-form-selection-v3/form-selection-v3.js",
67
- "./components/block-featured-image-gallery-v3/featured-image-gallery-v3.js",
68
- "./components/block-divider-v3/divider-v3.js",
69
- "./components/block-cover-link-v3/cover-link-v3.js",
70
- "./components/block-cocktail-recipe-v3/cocktail-recipe-v3.js",
71
- "./components/block-carousel-multi-layout-v3/carousel-multi-layout-v3.js",
72
- "./components/block-block-interactions-v3/block-interactions-v3.js",
73
- "./components/block-betterreviews-display-v3/betterreviews-display-v3.js",
74
- "./components/block-back-to-top-button-v3/back-to-top-button-v3.js",
75
- "./components/block-accordion-v3/accordion-v3.js",
76
- "./components/block-accent-image-v3/accent-image-v3.js",
77
- "./components/block-post-type-filter-grid-v4/post-type-filter-grid-v4.js",
78
- ];
1
+
2
+ const dynamicAssets = ["./components/block-video-content-v3/video-content-v3.scss","./components/block-sub-group-container-v3/sub-group-container-v3.scss","./components/block-sticky-buy-cta-v3/sticky-buy-cta-v3.scss","./components/block-standard-content-v3/standard-content-v3.scss","./components/block-spotify-embed-v3/spotify-embed-v3.scss","./components/block-spacer-v3/spacer-v3.scss","./components/block-social-networks-v3/social-networks-v3.scss","./components/block-smash-balloon-social-media-v3/smash-balloon-social-media-v3.scss","./components/block-site-title-and-tagline-v3/site-title-and-tagline-v3.scss","./components/block-site-logo-container-v3/site-logo-container-v3.scss","./components/block-site-copyright-notice-v3/site-copyright-notice-v3.scss","./components/block-single-responsive-image-v3/single-responsive-image-v3.scss","./components/block-single-column-container-v3/single-column-container-v3.scss","./components/block-section-separator-v3/section-separator-v3.scss","./components/block-scrolling-banner-v3/scrolling-banner-v3.scss","./components/block-responsive-table-v3/responsive-table-v3.scss","./components/block-raw-html-v3/raw-html-v3.scss","./components/block-product-info-v3/product-info-v3.scss","./components/block-post-type-filter-grid-v3/post-type-filter-grid-v3.scss","./components/block-post-info-v3/post-info-v3.scss","./components/block-nav-menu-container-v3/nav-menu-container-v3.scss","./components/block-modal-form-v3/modal-form-v3.scss","./components/block-market-selector-v3/market-selector-v3.scss","./components/block-lottie-content-v3/lottie-content-v3.scss","./components/block-group-container-v3/group-container-v3.scss","./components/block-gradient-layer-v3/gradient-layer-v3.scss","./components/block-form-selection-v3/form-selection-v3.scss","./components/block-featured-image-gallery-v3/featured-image-gallery-v3.scss","./components/block-divider-v3/divider-v3.scss","./components/block-cover-link-v3/cover-link-v3.scss","./components/block-cocktail-recipe-v3/cocktail-recipe-v3.scss","./components/block-carousel-multi-layout-v3/carousel-multi-layout-v3.scss","./components/block-block-interactions-v3/block-interactions-v3.scss","./components/block-betterreviews-display-v3/betterreviews-display-v3.scss","./components/block-back-to-top-button-v3/back-to-top-button-v3.scss","./components/block-accordion-v3/accordion-v3.scss","./components/block-accent-image-v3/accent-image-v3.scss","./components/block-video-content-v3/video-content-v3.js","./components/block-sub-group-container-v3/sub-group-container-v3.js","./components/block-sticky-buy-cta-v3/sticky-buy-cta-v3.js","./components/block-standard-content-v3/standard-content-v3.js","./components/block-spotify-embed-v3/spotify-embed-v3.js","./components/block-spacer-v3/spacer-v3.js","./components/block-social-networks-v3/social-networks-v3.js","./components/block-smash-balloon-social-media-v3/smash-balloon-social-media-v3.js","./components/block-site-title-and-tagline-v3/site-title-and-tagline-v3.js","./components/block-site-logo-container-v3/site-logo-container-v3.js","./components/block-site-copyright-notice-v3/site-copyright-notice-v3.js","./components/block-single-responsive-image-v3/single-responsive-image-v3.js","./components/block-single-column-container-v3/single-column-container-v3.js","./components/block-section-separator-v3/section-separator-v3.js","./components/block-scrolling-banner-v3/scrolling-banner-v3.js","./components/block-responsive-table-v3/responsive-table-v3.js","./components/block-raw-html-v3/raw-html-v3.js","./components/block-product-info-v3/product-info-v3.js","./components/block-post-type-filter-grid-v3/post-type-filter-grid-v3.js","./components/block-post-info-v3/post-info-v3.js","./components/block-nav-menu-container-v3/nav-menu-container-v3.js","./components/block-modal-form-v3/modal-form-v3.js","./components/block-market-selector-v3/market-selector-v3.js","./components/block-lottie-content-v3/lottie-content-v3.js","./components/block-group-container-v3/group-container-v3.js","./components/block-gradient-layer-v3/gradient-layer-v3.js","./components/block-form-selection-v3/form-selection-v3.js","./components/block-featured-image-gallery-v3/featured-image-gallery-v3.js","./components/block-divider-v3/divider-v3.js","./components/block-cover-link-v3/cover-link-v3.js","./components/block-cocktail-recipe-v3/cocktail-recipe-v3.js","./components/block-carousel-multi-layout-v3/carousel-multi-layout-v3.js","./components/block-block-interactions-v3/block-interactions-v3.js","./components/block-betterreviews-display-v3/betterreviews-display-v3.js","./components/block-back-to-top-button-v3/back-to-top-button-v3.js","./components/block-accordion-v3/accordion-v3.js","./components/block-accent-image-v3/accent-image-v3.js"];
79
3
  export default dynamicAssets;
@@ -1,18 +1,18 @@
1
1
  @charset "UTF-8";
2
- .group-container-v3:not(#\#) {
2
+ .group-container-v3 {
3
3
  display: grid;
4
4
  grid-template: "main"/1fr;
5
5
  align-items: center;
6
6
  justify-items: center;
7
7
  place-items: center;
8
8
  }
9
- .group-container-v3__grid-container:not(#\#) {
9
+ .group-container-v3__grid-container {
10
10
  grid-area: main;
11
11
  align-self: stretch;
12
12
  justify-self: stretch;
13
13
  place-self: stretch;
14
14
  }
15
- .group-container-v3__grid-container.flex-layout-container:not(#\#) {
15
+ .group-container-v3__grid-container.flex-layout-container {
16
16
  display: flex;
17
17
  display: var(--display-type, flex);
18
18
  justify-content: flex-start;
@@ -27,7 +27,7 @@
27
27
  flex-wrap: var(--flex-wrap-mobile, nowrap);
28
28
  }
29
29
  @media screen and (min-width: 768px) {
30
- .group-container-v3__grid-container.flex-layout-container:not(#\#) {
30
+ .group-container-v3__grid-container.flex-layout-container {
31
31
  justify-content: flex-start;
32
32
  justify-content: var(--justify-content-portrait, flex-start);
33
33
  flex-direction: row;
@@ -41,7 +41,7 @@
41
41
  }
42
42
  }
43
43
  @media screen and (min-width: 1024px) {
44
- .group-container-v3__grid-container.flex-layout-container:not(#\#) {
44
+ .group-container-v3__grid-container.flex-layout-container {
45
45
  justify-content: flex-start;
46
46
  justify-content: var(--justify-content-desktop, flex-start);
47
47
  flex-direction: row;
@@ -54,7 +54,7 @@
54
54
  flex-wrap: var(--flex-wrap-desktop, nowrap);
55
55
  }
56
56
  }
57
- .group-container-v3__grid-container.grid-layout-container:not(#\#) {
57
+ .group-container-v3__grid-container.grid-layout-container {
58
58
  display: "grid";
59
59
  display: var(--display-type, "grid");
60
60
  position: relative;
@@ -63,11 +63,11 @@
63
63
  scroll-snap-type: none;
64
64
  scroll-snap-type: var(--scroll-snap-type-mobile, none);
65
65
  }
66
- .group-container-v3__grid-container.grid-layout-container:not(#\#) > div {
66
+ .group-container-v3__grid-container.grid-layout-container > div {
67
67
  scroll-snap-align: start;
68
68
  scroll-snap-align: var(--scroll-snap-align-mobile, start);
69
69
  }
70
- .group-container-v3__grid-container.grid-layout-container:not(#\#) {
70
+ .group-container-v3__grid-container.grid-layout-container {
71
71
  overflow: hidden;
72
72
  overflow: var(--container-overflow-type-mobile, hidden);
73
73
  grid-gap: calc(var(--global-inline-spacing) * 0) calc(var(--global-inline-spacing) * 0);
@@ -204,15 +204,15 @@
204
204
  }
205
205
  }
206
206
  @media screen and (min-width: 768px) {
207
- .group-container-v3__grid-container.grid-layout-container:not(#\#) {
207
+ .group-container-v3__grid-container.grid-layout-container {
208
208
  scroll-snap-type: none;
209
209
  scroll-snap-type: var(--scroll-snap-type-portrait, none);
210
210
  }
211
- .group-container-v3__grid-container.grid-layout-container:not(#\#) > div {
211
+ .group-container-v3__grid-container.grid-layout-container > div {
212
212
  scroll-snap-align: start;
213
213
  scroll-snap-align: var(--scroll-snap-align-portrait, start);
214
214
  }
215
- .group-container-v3__grid-container.grid-layout-container:not(#\#) {
215
+ .group-container-v3__grid-container.grid-layout-container {
216
216
  overflow: hidden;
217
217
  overflow: var(--container-overflow-type-portrait, hidden);
218
218
  grid-auto-flow: row;
@@ -230,15 +230,15 @@
230
230
  }
231
231
  }
232
232
  @media screen and (min-width: 1024px) {
233
- .group-container-v3__grid-container.grid-layout-container:not(#\#) {
233
+ .group-container-v3__grid-container.grid-layout-container {
234
234
  scroll-snap-type: none;
235
235
  scroll-snap-type: var(--scroll-snap-type-desktop, none);
236
236
  }
237
- .group-container-v3__grid-container.grid-layout-container:not(#\#) > div {
237
+ .group-container-v3__grid-container.grid-layout-container > div {
238
238
  scroll-snap-align: start;
239
239
  scroll-snap-align: var(--scroll-snap-align-desktop, start);
240
240
  }
241
- .group-container-v3__grid-container.grid-layout-container:not(#\#) {
241
+ .group-container-v3__grid-container.grid-layout-container {
242
242
  overflow: hidden;
243
243
  overflow: var(--container-overflow-type-desktop, hidden);
244
244
  grid-gap: calc(var(--global-inline-spacing) * 0) calc(var(--global-inline-spacing) * 0);
@@ -255,11 +255,11 @@
255
255
  grid-template-rows: var(--grid-template-rows-custom-desktop, repeat(var(--grid-template-rows-desktop), var(--grid-auto-rows-desktop, 1fr)));
256
256
  }
257
257
  }
258
- .group-container-v3__block-container:not(#\#) {
258
+ .group-container-v3__block-container {
259
259
  pointer-events: none;
260
260
  position: relative;
261
261
  }
262
- .group-container-v3__block-container.grid-layout-container:not(#\#) {
262
+ .group-container-v3__block-container.grid-layout-container {
263
263
  display: grid;
264
264
  z-index: 5;
265
265
  z-index: var(--element-z-index, 5);
@@ -269,49 +269,49 @@
269
269
  justify-self: var(--grid-horizontal-placement-mobile);
270
270
  place-self: var(--grid-vertical-placement-mobile) var(--grid-horizontal-placement-mobile);
271
271
  }
272
- .group-container-v3__block-container.grid-layout-container:has(> .subgrid-layout-mobile):not(#\#) {
272
+ .group-container-v3__block-container.grid-layout-container:has(> .subgrid-layout-mobile) {
273
273
  grid-template-rows: subgrid;
274
274
  }
275
- .group-container-v3__block-container.grid-layout-container:has(> .subgrid-layout-mobile):not(#\#) > section {
275
+ .group-container-v3__block-container.grid-layout-container:has(> .subgrid-layout-mobile) > section {
276
276
  grid-row: 1/-1;
277
277
  grid-column: 1/-1;
278
278
  }
279
279
  @media screen and (min-width: 768px) {
280
- .group-container-v3__block-container.grid-layout-container:not(#\#) {
280
+ .group-container-v3__block-container.grid-layout-container {
281
281
  grid-row: var(--grid-row-start-portrait)/span var(--grid-row-span-portrait);
282
282
  grid-column: var(--grid-column-start-portrait)/span var(--grid-column-span-portrait);
283
283
  align-self: var(--grid-vertical-placement-portrait);
284
284
  justify-self: var(--grid-horizontal-placement-portrait);
285
285
  place-self: var(--grid-vertical-placement-portrait) var(--grid-horizontal-placement-portrait);
286
286
  }
287
- .group-container-v3__block-container.grid-layout-container:has(> .subgrid-layout-portrait):not(#\#) {
287
+ .group-container-v3__block-container.grid-layout-container:has(> .subgrid-layout-portrait) {
288
288
  grid-template-rows: subgrid;
289
289
  }
290
- .group-container-v3__block-container.grid-layout-container:has(> .subgrid-layout-portrait):not(#\#) > section {
290
+ .group-container-v3__block-container.grid-layout-container:has(> .subgrid-layout-portrait) > section {
291
291
  grid-row: 1/-1;
292
292
  grid-column: 1/-1;
293
293
  }
294
294
  }
295
295
  @media screen and (min-width: 1024px) {
296
- .group-container-v3__block-container.grid-layout-container:not(#\#) {
296
+ .group-container-v3__block-container.grid-layout-container {
297
297
  grid-row: var(--grid-row-start)/span var(--grid-row-span);
298
298
  grid-column: var(--grid-column-start)/span var(--grid-column-span);
299
299
  align-self: var(--grid-vertical-placement-desktop);
300
300
  justify-self: var(--grid-horizontal-placement-desktop);
301
301
  place-self: var(--grid-vertical-placement-desktop) var(--grid-horizontal-placement-desktop);
302
302
  }
303
- .group-container-v3__block-container.grid-layout-container:has(> .subgrid-layout-desktop):not(#\#) {
303
+ .group-container-v3__block-container.grid-layout-container:has(> .subgrid-layout-desktop) {
304
304
  grid-template-rows: subgrid;
305
305
  }
306
- .group-container-v3__block-container.grid-layout-container:has(> .subgrid-layout-desktop):not(#\#) > section {
306
+ .group-container-v3__block-container.grid-layout-container:has(> .subgrid-layout-desktop) > section {
307
307
  grid-row: 1/-1;
308
308
  grid-column: 1/-1;
309
309
  }
310
310
  }
311
- .group-container-v3__block-container:has(.video-content-v3__video-container.video-playing.video-playing--high-z-index):not(#\#) {
311
+ .group-container-v3__block-container:has(.video-content-v3__video-container.video-playing.video-playing--high-z-index) {
312
312
  z-index: 50;
313
313
  }
314
- .group-container-v3__block-number:not(#\#) {
314
+ .group-container-v3__block-number {
315
315
  z-index: 99;
316
316
  position: absolute;
317
317
  font-size: 40px;