@total_onion/onion-library 2.0.19 → 2.0.22

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.
Files changed (15) hide show
  1. package/components/block-accordion-v3/accordion-v3.scss +2 -2
  2. package/components/block-betterreviews-display-v3/betterreviews-display-v3.js +2 -2
  3. package/components/block-carousel-multi-layout-v3/carousel-multi-layout-v3.js +13 -17
  4. package/components/block-carousel-multi-layout-v3/carousel-multi-layout-v3.twig +1 -3
  5. package/components/block-post-info-v3/post-info-v3.js +0 -1
  6. package/components/block-post-info-v3/post-info-v3.scss +2 -2
  7. package/components/block-product-info-v3/product-info-v3.scss +2 -3
  8. package/components/block-standard-content-v3/standard-content-v3.scss +2 -2
  9. package/components/{component-content-container-settings-v3/content-container-settings-v3.scss → component-content-box-settings-v3/content-box-settings-v3.scss} +15 -15
  10. package/components/component-content-box-v3/content-box-v3.js +6 -0
  11. package/components/{component-content-container-v3/content-container-v3.scss → component-content-box-v3/content-box-v3.scss} +3 -3
  12. package/package.json +2 -2
  13. package/components/block-post-info-v3/post-info-v3-extra.scss +0 -4
  14. package/components/block-product-info-v3/product-info-v3-extra.scss +0 -9
  15. package/components/component-content-container-v3/content-container-v3.js +0 -39
package/components/block-accordion-v3/accordion-v3.scss CHANGED
@@ -1,10 +1,10 @@
1
1
  @use '../fields-core-mixins-v3/core-mixins-v3';
2
2
  @use '../fields-core-functions-v3/core-functions-v3';
3
- @use '../component-content-container-settings-v3/content-container-settings-v3';
3
+ @use '../component-content-box-settings-v3/content-box-settings-v3';
4
4
  @use '../../breakpoints';
5
5
 
6
6
  .accordion-v3 {
7
- @include content-container-settings-v3.contentContainerSettingsV3();
7
+ @include content-box-settings-v3.contentBoxSettingsV3();
8
8
  width: 100%;
9
9
  pointer-events: all;
10
10
  display: flex;
package/components/block-betterreviews-display-v3/betterreviews-display-v3.js CHANGED
@@ -1,9 +1,9 @@
1
- import extraJs from 'Assets/js/blocks/betterreviews-display-v3/betterreviews-display-v3-extra.js';
1
+
2
2
 
3
3
  export default function betterreviewsdisplay3Js(options = {}) {
4
4
  try {
5
5
  const {block} = options;
6
- extraJs(block);
6
+
7
7
  } catch (error) {
8
8
  console.error(error);
9
9
  }
package/components/block-carousel-multi-layout-v3/carousel-multi-layout-v3.js CHANGED
@@ -1,4 +1,9 @@
1
1
  import {getSwiperAssetsV2} from '@total_onion/onion-utils/onion-utils.mjs';
2
+ import { Navigation, Pagination } from 'swiper/modules';
3
+ // import Swiper and modules styles
4
+ import 'swiper/css';
5
+ import 'swiper/css/navigation';
6
+ import 'swiper/css/pagination';
2
7
 
3
8
  export default function carouselmultilayoutv3Js(options = {}) {
4
9
  try {
@@ -6,16 +11,7 @@ export default function carouselmultilayoutv3Js(options = {}) {
6
11
  const totalSlides = block.querySelectorAll('.swiper-slide').length || 1;
7
12
  Promise.all([getSwiperAssetsV2()]).then((values) => {
8
13
  const {
9
- Swiper,
10
- Navigation,
11
- Pagination,
12
- Lazy,
13
- Autoplay,
14
- EffectFade,
15
- EffectCoverflow,
16
- EffectCreative,
17
- FreeMode,
18
- Mousewheel
14
+ Swiper
19
15
  } = values[0][0];
20
16
 
21
17
  const dataAttributes = block.dataset;
@@ -119,13 +115,13 @@ export default function carouselmultilayoutv3Js(options = {}) {
119
115
  modules: [
120
116
  Navigation,
121
117
  Pagination,
122
- Lazy,
123
- Autoplay,
124
- EffectFade,
125
- EffectCoverflow,
126
- EffectCreative,
127
- FreeMode,
128
- Mousewheel
118
+ // Lazy,
119
+ // Autoplay,
120
+ // EffectFade,
121
+ // EffectCoverflow,
122
+ // EffectCreative,
123
+ // FreeMode,
124
+ // Mousewheel
129
125
  ],
130
126
  slidesPerView: slidesMobile,
131
127
  spaceBetween: spaceBetweenSlidesMobile,
package/components/block-carousel-multi-layout-v3/carousel-multi-layout-v3.twig CHANGED
@@ -1,4 +1,3 @@
1
- {# Do not edit this file outside of the component library as your changes will be lost with future updates. #}
2
1
  {% set blockClassName = "carousel-multi-layout-v3" %}
3
2
  {% set classNameEntryPoint = include('entry-points/entry-point-classes.twig', { fields, block }, with_context = false) %}
4
3
  {% set htmlEntryPoint = include('entry-points/entry-point-html-v3.twig', { fields, block, blockClassName, options, environment, is_preview, nav_menus }, with_context = false) %}
@@ -6,8 +5,7 @@
6
5
  {% set styleEntryPoint = include('entry-points/entry-point-style.twig', { fields, block, displaytype, is_preview }, with_context = false) %}
7
6
  {% set previewEntryPoint = include('entry-points/entry-point-preview-info.twig', { fields, block, displaytype, is_preview }, with_context = false) %}
8
7
 
9
-
10
- {% set blockOverflow = '--block-overflow:' ~ fields.block_overflow|ru ~ ';' %}
8
+ {# {% set blockOverflow = '--block-overflow:' ~ fields.block_overflow|ru ~ ';' %} #}
11
9
 
12
10
  {% set arrowColour = '--swiper-arrow-colour:' ~ fields.carousel_nav_arrow_colour|ru ~ ';' %}
13
11
  {% set paginationColour = '--swiper-pagination-colour:' ~ fields.carousel_pagination_colour|ru ~ ';' %}
package/components/block-post-info-v3/post-info-v3.js CHANGED
@@ -4,7 +4,6 @@ export default function postinfov3Js(options = {}) {
4
4
  const {block} = options;
5
5
  try {
6
6
  // const videoController = new videocontroller(block);
7
- extraJs(block);
8
7
  } catch (error) {
9
8
  console.error(error);
10
9
  }
package/components/block-post-info-v3/post-info-v3.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @use '../fields-core-mixins-v3/core-mixins-v3';
2
2
  @use '../fields-core-functions-v3/core-functions-v3';
3
- @use '../component-content-container-settings-v3/content-container-settings-v3';
3
+ @use '../component-content-box-settings-v3/content-box-settings-v3';
4
4
  @use '../component-grid-layout-container-v3/grid-layout-container-v3';
5
5
  @use '../component-grid-layout-element-v3/grid-layout-element-v3';
6
6
  @use '../component-element-positioning-v3/element-positioning-v3';
@@ -13,7 +13,7 @@
13
13
  display: grid;
14
14
  grid-auto-columns: 1fr;
15
15
  grid-template: 'main' / 1fr;
16
- @include content-container-settings-v3.contentContainerSettingsV3();
16
+ @include content-box-settings-v3.contentBoxSettingsV3();
17
17
  @include grid-layout-container-v3.gridLayoutContainer();
18
18
  @include social-media-share-v3.social-media-share();
19
19
  @include better-reviews-v3.better-reviews();
package/components/block-product-info-v3/product-info-v3.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  @use '../component-grid-layout-container-v3/grid-layout-container-v3';
4
4
  @use '../component-grid-layout-element-v3/grid-layout-element-v3';
5
5
  @use '../component-element-positioning-v3/element-positioning-v3';
6
- @use '../component-content-container-settings-v3/content-container-settings-v3';
6
+ @use '../component-content-box-settings-v3/content-box-settings-v3';
7
7
  @use '../component-gradient-overlay-v3/gradient-overlay-v3';
8
8
  @use '../../breakpoints';
9
9
 
@@ -11,7 +11,7 @@
11
11
  display: grid;
12
12
  grid-auto-columns: 1fr;
13
13
  grid-template: 'main' / 1fr;
14
- @include content-container-settings-v3.contentContainerSettingsV3();
14
+ @include content-box-settings-v3.contentBoxSettingsV3();
15
15
  @include grid-layout-container-v3.gridLayoutContainer();
16
16
  &__post-cover-link {
17
17
  grid-area: unset;
@@ -167,5 +167,4 @@
167
167
  width: auto;
168
168
  @include grid-layout-element-v3.gridLayoutElement();
169
169
  }
170
- // @include product-info-v3-extra.additionalStyles();
171
170
  }
package/components/block-standard-content-v3/standard-content-v3.scss CHANGED
@@ -1,9 +1,9 @@
1
1
  @use '../fields-core-mixins-v3/core-mixins-v3';
2
- @use '../component-content-container-v3/content-container-v3';
2
+ @use '../component-content-box-v3/content-box-v3';
3
3
 
4
4
  .standard-content-v3 {
5
5
  display: grid;
6
6
  grid-template: 'main' / 1fr;
7
7
  @include core-mixins-v3.responsiveShowHide(grid);
8
- @include content-container-v3.contentContainerV3();
8
+ @include content-box-v3.contentBoxV3();
9
9
  }
package/components/{component-content-container-settings-v3/content-container-settings-v3.scss → component-content-box-settings-v3/content-box-settings-v3.scss} RENAMED
@@ -3,7 +3,7 @@
3
3
  @use '../component-box-shadow-v3/box-shadow-v3';
4
4
  @use '../../breakpoints';
5
5
 
6
- @mixin contentContainerSettingsV3() {
6
+ @mixin contentBoxSettingsV3() {
7
7
  &__inner-container {
8
8
  grid-area: main;
9
9
  place-self: var(--content-box-vert-align-mobile)
@@ -39,19 +39,19 @@
39
39
  );
40
40
  margin: calc(
41
41
  var(--global-inline-spacing) *
42
- var(--content-container-top-margin-mobile)
42
+ var(--content-box-top-margin-mobile)
43
43
  )
44
44
  calc(
45
45
  var(--global-inline-spacing) *
46
- var(--content-container-right-margin-mobile)
46
+ var(--content-box-right-margin-mobile)
47
47
  )
48
48
  calc(
49
49
  var(--global-inline-spacing) *
50
- var(--content-container-bottom-margin-mobile)
50
+ var(--content-box-bottom-margin-mobile)
51
51
  )
52
52
  calc(
53
53
  var(--global-inline-spacing) *
54
- var(--content-container-left-margin-mobile)
54
+ var(--content-box-left-margin-mobile)
55
55
  );
56
56
  column-gap: var(
57
57
  --content-items-micro-gap-mobile,
@@ -79,19 +79,19 @@
79
79
  );
80
80
  margin: calc(
81
81
  var(--global-inline-spacing) *
82
- var(--content-container-top-margin-portrait)
82
+ var(--content-box-top-margin-portrait)
83
83
  )
84
84
  calc(
85
85
  var(--global-inline-spacing) *
86
- var(--content-container-right-margin-portrait)
86
+ var(--content-box-right-margin-portrait)
87
87
  )
88
88
  calc(
89
89
  var(--global-inline-spacing) *
90
- var(--content-container-bottom-margin-portrait)
90
+ var(--content-box-bottom-margin-portrait)
91
91
  )
92
92
  calc(
93
93
  var(--global-inline-spacing) *
94
- var(--content-container-left-margin-portrait)
94
+ var(--content-box-left-margin-portrait)
95
95
  );
96
96
  }
97
97
 
@@ -125,30 +125,30 @@
125
125
  );
126
126
  margin: calc(
127
127
  var(--global-inline-spacing) *
128
- var(--content-container-top-margin)
128
+ var(--content-box-top-margin)
129
129
  )
130
130
  calc(
131
131
  var(--global-inline-spacing) *
132
- var(--content-container-right-margin)
132
+ var(--content-box-right-margin)
133
133
  )
134
134
  calc(
135
135
  var(--global-inline-spacing) *
136
- var(--content-container-bottom-margin)
136
+ var(--content-box-bottom-margin)
137
137
  )
138
138
  calc(
139
139
  var(--global-inline-spacing) *
140
- var(--content-container-left-margin)
140
+ var(--content-box-left-margin)
141
141
  );
142
142
  }
143
143
 
144
144
  @include box-shadow-v3.boxShadow();
145
145
  }
146
- &__content-container {
146
+ &__content-box {
147
147
  max-width: var(--wysiwyg-max-width-mobile);
148
148
  margin-inline: auto;
149
149
  display: grid;
150
150
  word-break: normal;
151
- width: var(--content-container-width, 100%);
151
+ width: var(--content-box-width, 100%);
152
152
  -webkit-text-stroke: core-functions-v3.fontSize(
153
153
  var(--text-stroke-width),
154
154
  'static'
package/components/component-content-box-v3/content-box-v3.js ADDED
@@ -0,0 +1,6 @@
1
+ export default function contentBoxJs(block) {
2
+ if (!block) {
3
+ return;
4
+ }
5
+
6
+ }
package/components/{component-content-container-v3/content-container-v3.scss → component-content-box-v3/content-box-v3.scss} RENAMED
@@ -1,11 +1,11 @@
1
- @use '../component-content-container-settings-v3/content-container-settings-v3';
1
+ @use '../component-content-box-settings-v3/content-box-settings-v3';
2
2
  @use '../component-content-image-v3/content-image-v3';
3
3
  @use '../component-accent-text-v3/accent-text-v3';
4
4
  @use '../component-nav-menu-v3/nav-menu-v3';
5
5
  @use '../component-blockquote-v3/blockquote-v3';
6
6
 
7
- @mixin contentContainerV3() {
8
- @include content-container-settings-v3.contentContainerSettingsV3();
7
+ @mixin contentBoxV3() {
8
+ @include content-box-settings-v3.contentBoxSettingsV3();
9
9
  @include nav-menu-v3.navMenuV3();
10
10
  @include blockquote-v3.blockquoteV3();
11
11
  @include accent-text-v3.accentTextV3();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@total_onion/onion-library",
3
- "version": "2.0.19",
3
+ "version": "2.0.22",
4
4
  "description": "Component library",
5
5
  "main": "index.js",
6
6
  "scripts": {
@@ -35,7 +35,7 @@
35
35
  "postcss": "^8.5.6",
36
36
  "postcss-preset-env": "^10.3.1",
37
37
  "prettier": "^2.6.2",
38
- "swiper": "^11.2.10",
38
+ "swiper": "^12.0.2",
39
39
  "yargs": "^17.4.1"
40
40
  },
41
41
  "devDependencies": {
package/components/block-post-info-v3/post-info-v3-extra.scss DELETED
@@ -1,4 +0,0 @@
1
- @mixin additionalStyles {
2
- .post-info-v3 {
3
- }
4
- }
package/components/block-product-info-v3/product-info-v3-extra.scss DELETED
@@ -1,9 +0,0 @@
1
- @mixin additionalStyles {
2
- &:has(.post-info__post-cover-link.post-cover-link-hover-effect) {
3
- &:hover {
4
- .post-info__info-item {
5
- color: red;
6
- }
7
- }
8
- }
9
- }
package/components/component-content-container-v3/content-container-v3.js DELETED
@@ -1,39 +0,0 @@
1
- export default function contentContainerJs(block) {
2
- if (!block) {
3
- return;
4
- }
5
- const blockClassName = block.dataset.assetkey;
6
- const formContainerElement = block.querySelector('.form-container');
7
- const modalFormContainerElement = block.querySelector(
8
- '.form-container__modal'
9
- );
10
- const countdownElement = block.querySelector('.countdowndate');
11
- const socialMediaElement = block.querySelector('.social-media-share-popup');
12
- // const accordionV3Element = block.querySelector(
13
- // '.standard-content-v2__accordion-v3'
14
- // );
15
-
16
- // if (formContainerElement || modalFormContainerElement) {
17
- // import(
18
- // 'Assets/js/modules/library-modules/form-selection/form-selection.js'
19
- // ).then((module) => {
20
- // module.default(block);
21
- // });
22
- // }
23
-
24
- // if (countdownElement) {
25
- // import('Assets/js/modules/library-modules/countdown/countdown.js').then(
26
- // (module) => {
27
- // module.default(block);
28
- // }
29
- // );
30
- // }
31
-
32
- // if (socialMediaElement) {
33
- // import(
34
- // 'Assets/js/modules/library-modules/social-media-share/social-media-share.js'
35
- // ).then((module) => {
36
- // module.default(block);
37
- // });
38
- // }
39
- }