@total_onion/onion-library 1.0.42 → 1.0.44

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 (18) hide show
  1. package/components/block-post-info-v3/group_6866429531436.json +42 -4
  2. package/components/block-post-info-v3/post-info-v3/post-info-description.twig +10 -5
  3. package/components/block-post-info-v3/post-info-v3.scss +24 -52
  4. package/components/block-standard-content-v3/standard-content-v3.scss +4 -4
  5. package/components/component-accent-text-v3/accent-text-v3-extra.scss +6 -0
  6. package/components/component-accent-text-v3/accent-text-v3.scss +61 -0
  7. package/components/component-blockquote-v3/blockquote-v3.scss +55 -0
  8. package/components/component-content-container-settings-v3/content-container-settings-v3.scss +213 -0
  9. package/components/component-content-container-v3/content-container-v3.js +96 -0
  10. package/components/component-content-container-v3/content-container-v3.scss +31 -0
  11. package/components/component-content-image-v3/content-image-v3.scss +33 -0
  12. package/components/component-nav-menu-v3/nav-menu-v3.scss +44 -0
  13. package/components/component-text-editor-settings-container-classes-v3/text-editor-settings-container-classes-v3.twig +8 -0
  14. package/components/component-text-editor-settings-element-classes-v3/text-editor-settings-element-classes-v3.twig +6 -0
  15. package/components/component-text-editor-settings-v3/group_687a4e2334e37.json +16 -19
  16. package/components/component-text-editor-settings-variables-v3/text-editor-settings-variables-v3.twig +61 -0
  17. package/components/component-wysiwyg-editor-v3/wysiwyg-editor-v3.twig +6 -71
  18. package/package.json +1 -1
package/components/block-post-info-v3/group_6866429531436.json CHANGED
@@ -89,8 +89,6 @@
89
89
  "layout"
90
90
  ],
91
91
  "acfe_flexible_add_actions": [
92
- "title",
93
- "toggle",
94
92
  "copy",
95
93
  "close"
96
94
  ],
@@ -741,6 +739,26 @@
741
739
  "label": "Post info description",
742
740
  "display": "block",
743
741
  "sub_fields": [
742
+ {
743
+ "key": "field_687b84fb837e9",
744
+ "label": "Grid Layout",
745
+ "name": "",
746
+ "aria-label": "",
747
+ "type": "tab",
748
+ "instructions": "",
749
+ "required": 0,
750
+ "conditional_logic": 0,
751
+ "wrapper": {
752
+ "width": "",
753
+ "class": "",
754
+ "id": ""
755
+ },
756
+ "wpml_cf_preferences": 3,
757
+ "placement": "top",
758
+ "endpoint": 0,
759
+ "no_preference": 0,
760
+ "selected": 0
761
+ },
744
762
  {
745
763
  "key": "field_6866429554690",
746
764
  "label": "Grid layout",
@@ -769,6 +787,26 @@
769
787
  "acfe_clone_modal_button": "",
770
788
  "acfe_clone_modal_size": "large"
771
789
  },
790
+ {
791
+ "key": "field_687b850b837ea",
792
+ "label": "Style",
793
+ "name": "",
794
+ "aria-label": "",
795
+ "type": "tab",
796
+ "instructions": "",
797
+ "required": 0,
798
+ "conditional_logic": 0,
799
+ "wrapper": {
800
+ "width": "",
801
+ "class": "",
802
+ "id": ""
803
+ },
804
+ "wpml_cf_preferences": 3,
805
+ "placement": "top",
806
+ "endpoint": 0,
807
+ "no_preference": 0,
808
+ "selected": 0
809
+ },
772
810
  {
773
811
  "key": "field_6866429554a69",
774
812
  "label": "Text style",
@@ -785,7 +823,7 @@
785
823
  },
786
824
  "wpml_cf_preferences": 3,
787
825
  "clone": [
788
- "group_6509a986674f1"
826
+ "group_687a4e2334e37"
789
827
  ],
790
828
  "display": "seamless",
791
829
  "layout": "block",
@@ -1948,5 +1986,5 @@
1948
1986
  "acfe_display_title": "",
1949
1987
  "acfe_meta": "",
1950
1988
  "acfe_note": "",
1951
- "modified": 1752882847
1989
+ "modified": 1752927937
1952
1990
  }
package/components/block-post-info-v3/post-info-v3/post-info-description.twig CHANGED
@@ -1,9 +1,14 @@
1
1
  {% set gridLayoutElement = include('components/grid-layout-element.twig', { fields: field, block: block }, with_context = false) %}
2
- {% set textStyle = include('components/text-style.twig', {field, post}) %}
3
2
  {% set elementStyles = gridLayoutElement ~ textStyle %}
3
+ {% set textEditorStyleVars = include('components/text-editor-settings-variables-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
4
+ {% set textEditorContainerClasses = include('components/text-editor-settings-container-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
5
+ {% set textEditorElementClasses = include('components/text-editor-settings-element-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
6
+ {% set elementType = field.element_type|ru %}
4
7
  <style>
5
- .{{blockClassName}}__post-info-description.{{block.id}} {
6
- {{elementStyles}}
7
- }
8
+ .{{blockClassName}}__post-info-description.{{block.id}}, .{{blockClassName}}__content-container.{{block.id}}{
9
+ {{textEditorStyleVars}}
10
+ }
8
11
  </style>
9
- <{{field.text_style.text_element_type|ru}} data-pattern-post-info="post_info_description" class="{{blockClassName}}__post-info-description {{blockClassName}}__info-item {{field.text_style.typography_style|ru}} {{block.id}}">{{post.post_info_description}}</{{field.text_style.text_element_type|ru}}>
12
+ <div class="{{blockClassName}}__content-container {{textEditorContainerClasses}} {{block.id}}"> <{{elementType}} data-pattern-post-info="post_info_description" class="{{blockClassName}}__post-info-description {{blockClassName}}__info-item {{textEditorElementClasses}} {{block.id}}">
13
+ {{post.post_info_description}}</{{elementType}}>
14
+ </div>
package/components/block-post-info-v3/post-info-v3.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  // LIBRARY FILE - Do not modify/override here as your changes will be lost when the package is updated.
2
- @use 'Assets/scss/modules/library-modules/core-mixins/core-mixins';
2
+ @use 'Assets/scss/modules/library-modules/core-mixins-v3/core-mixins-v3';
3
3
  @use 'Assets/scss/modules/library-modules/core-functions/core-functions';
4
4
  @use 'Assets/scss/theme/breakpoints';
5
5
  @use 'Assets/scss/blocks/post-info-v3/post-info-v3-extra';
@@ -9,21 +9,16 @@
9
9
  @use 'Assets/scss/modules/library-modules/gradient-overlay/gradient-overlay';
10
10
  @use 'Assets/scss/modules/library-modules/social-media-share/social-media-share';
11
11
  @use 'Assets/scss/modules/library-modules/better-reviews/better-reviews';
12
- @use 'Assets/scss/modules/library-modules/truncated-text/truncated-text';
13
- @use 'Assets/scss/modules/library-modules/post-author/post-author';
14
- @use 'Assets/scss/modules/library-modules/content-tooltip/content-tooltip';
12
+ @use 'Assets/scss/modules/library-modules/content-container-settings-v3/content-container-settings-v3';
15
13
 
16
14
  .post-info-v3 {
17
15
  display: grid;
18
16
  grid-auto-columns: 1fr;
19
17
  grid-template: 'main' / 1fr;
18
+ @include content-container-settings-v3.contentContainerSettingsV3();
20
19
  @include grid-layout-container.gridLayoutContainer();
21
20
  @include social-media-share.social-media-share();
22
21
  @include better-reviews.better-reviews();
23
- @include truncated-text.truncated-text();
24
- @include post-author.postauthorinfo();
25
- @include content-tooltip.content-tooltip();
26
-
27
22
  &__post-cover-link {
28
23
  grid-area: unset;
29
24
  position: absolute;
@@ -33,7 +28,6 @@
33
28
  z-index: 99;
34
29
  opacity: 0;
35
30
  }
36
-
37
31
  &__post-cover-label {
38
32
  position: absolute;
39
33
  width: 1px;
@@ -45,75 +39,64 @@
45
39
  white-space: nowrap;
46
40
  border: 0;
47
41
  }
48
-
49
42
  &__info-item {
50
43
  @include grid-layout-element.gridLayoutElement();
51
44
  width: 100%;
52
45
  position: relative;
53
46
 
54
47
  &:not(.post-info-v3__cta) {
55
- @include core-mixins.textStyle();
48
+ @include core-mixins-v3.textStyle();
56
49
  }
57
50
  }
58
-
51
+ &__content-container {
52
+ width: 100%;
53
+ }
59
54
  &__cta-selection-container {
60
55
  @include grid-layout-element.gridLayoutElement();
61
56
  }
62
-
63
57
  &__cta {
64
58
  display: flex;
65
59
  }
66
-
67
60
  &__cta-style-post-colour,
68
61
  &__cta-style-post-text-colour-style {
69
62
  padding-block: core-functions.fluidSize(10, 'mobile');
70
63
  padding-inline: core-functions.fluidSize(20, 'mobile');
71
-
72
- @include core-mixins.device(breakpoints.$tabPortrait) {
64
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
73
65
  padding-block: core-functions.fluidSize(10, 'portrait');
74
66
  padding-inline: core-functions.fluidSize(20, 'portrait');
75
67
  }
76
-
77
- @include core-mixins.device(breakpoints.$tabLandscape) {
68
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
78
69
  padding-block: core-functions.fluidSize(10, 'desktop');
79
70
  padding-inline: core-functions.fluidSize(20, 'desktop');
80
71
  }
81
72
  }
82
-
83
73
  &__cta-style-post-colour {
84
74
  color: var(--post-colour);
85
75
  border: 1px solid var(--post-colour);
86
76
  }
87
-
88
77
  &__cta-style-post-text-colour-style {
89
78
  color: var(--post-text-colour-style);
90
79
  border: 1px solid var(--post-text-colour-style);
91
80
  }
92
-
93
81
  &__post-link,
94
82
  &__better-reviews {
95
83
  max-width: max-content;
96
84
  }
97
-
98
85
  &__gradient-overlay {
99
86
  height: 100%;
100
87
  @include gradient-overlay.gradientOverlay();
101
88
  }
102
-
103
89
  &__post-tags {
104
90
  pointer-events: none;
105
91
  display: flex;
106
92
  width: auto;
107
93
  @include grid-layout-element.gridLayoutElement();
108
94
  }
109
-
110
95
  &__post-image-container {
111
96
  display: grid;
112
97
  grid-template: 'main' / 1fr;
113
-
114
98
  &--image-accent {
115
99
  position: relative;
116
-
117
100
  img,
118
101
  svg {
119
102
  margin: unset;
@@ -121,89 +104,78 @@
121
104
  }
122
105
  }
123
106
  }
124
-
125
107
  &__post__image {
126
108
  display: flex;
127
109
  justify-content: center;
128
110
  margin-inline: auto;
129
111
  grid-area: main;
130
112
  height: auto;
131
- aspect-ratio: var(--image-aspect-ratio-mobile,
132
- var(--image-aspect-ratio-desktop));
113
+ aspect-ratio: var(
114
+ --image-aspect-ratio-mobile,
115
+ var(--image-aspect-ratio-desktop)
116
+ );
133
117
  @include grid-layout-element.gridLayoutElement();
134
118
  width: var(--post-image-width-mobile);
135
119
 
136
- @include core-mixins.device(breakpoints.$tabPortrait) {
120
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
137
121
  aspect-ratio: var(--image-aspect-ratio-portrait);
138
122
  }
139
-
140
- @include core-mixins.device(breakpoints.$tabLandscape) {
123
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
141
124
  width: var(--post-image-width-desktop);
142
125
  aspect-ratio: var(--image-aspect-ratio-desktop);
143
126
  }
144
127
  }
145
-
146
128
  &__post__image {
147
129
  object-fit: var(--image-fit-style);
148
130
  margin: auto;
149
131
  }
150
-
151
132
  &__global-image {
152
133
  z-index: var(--global-image-zindex);
153
134
  max-width: var(--global-image-max-width);
154
135
  min-height: 100%;
155
136
  }
156
-
157
137
  &__global-image__picture {
158
138
  width: var(--global-image-width);
159
139
  display: flex;
160
140
  position: var(--global-image-position);
161
141
  inset: 0;
162
142
  }
163
-
164
143
  &__global-image__image {
165
144
  object-fit: var(--global-image-fit-style);
166
145
  }
167
-
168
146
  &__product-logo {
169
- max-width: core-functions.fluidSize(var(--logo-max-width-mobile),
170
- 'mobile'
147
+ max-width: core-functions.fluidSize(
148
+ var(--logo-max-width-mobile),
149
+ 'mobile'
150
+ );
151
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
152
+ max-width: core-functions.fluidSize(
153
+ var(--logo-max-width-desktop),
154
+ 'desktop'
171
155
  );
172
-
173
- @include core-mixins.device(breakpoints.$tabLandscape) {
174
- max-width: core-functions.fluidSize(var(--logo-max-width-desktop),
175
- 'desktop'
176
- );
177
156
  }
178
157
  }
179
-
180
158
  &__person-rating {
181
159
  display: flex;
182
160
  gap: 1em;
183
161
  }
184
-
185
162
  &__person-rating-star {
186
163
  --rating-star-colour: gold;
187
164
  width: core-functions.fluidSize(20, 'static');
188
165
  }
189
-
190
166
  &__person-questionaire-list {
191
167
  list-style-type: none;
192
168
  }
193
-
194
169
  &__person-email {
195
170
  display: flex;
196
171
  gap: 1em;
197
172
  }
198
-
199
173
  &__person-email-icon {
200
174
  width: 1em;
201
175
  }
202
-
203
176
  &__post-text-alternative-style {
204
177
  width: auto;
205
178
  @include grid-layout-element.gridLayoutElement();
206
179
  }
207
-
208
180
  @include post-info-v3-extra.additionalStyles();
209
- }
181
+ }
package/components/block-standard-content-v3/standard-content-v3.scss CHANGED
@@ -1,17 +1,17 @@
1
1
  // LIBRARY FILE - Do not modify/override here as your changes will be lost when the package is updated.
2
2
  @use 'Assets/scss/blocks/standard-content-v3/standard-content-v3-extra';
3
- @use 'Assets/scss/modules/library-modules/core-mixins/core-mixins';
3
+ @use 'Assets/scss/modules/library-modules/core-mixins-v3/core-mixins-v3';
4
4
  @use 'NodeModules/@pernod-ricard-global-cms/cblvideocontroller/vc-styles';
5
- @use 'Assets/scss/modules/library-modules/content-container/content-container';
5
+ @use 'Assets/scss/modules/library-modules/content-container-v3/content-container-v3';
6
6
 
7
7
  .standard-content-v3 {
8
8
  display: grid;
9
9
  grid-template: 'main' / 1fr;
10
10
  @include vc-styles.basic();
11
- @include core-mixins.responsiveShowHide(grid);
11
+ @include core-mixins-v3.responsiveShowHide(grid);
12
12
  &__video-container {
13
13
  grid-area: main;
14
14
  }
15
- @include content-container.contentContainer();
15
+ @include content-container-v3.contentContainerV3();
16
16
  @include standard-content-v3-extra.additionalStyles();
17
17
  }
package/components/component-accent-text-v3/accent-text-v3-extra.scss ADDED
@@ -0,0 +1,6 @@
1
+ // @use 'Assets/scss/modules/library-modules/core-mixins/core-mixins';
2
+ // @use 'Assets/scss/modules/library-modules/core-functions/core-functions';
3
+ // @use 'Assets/scss/theme/breakpoints';
4
+
5
+ @mixin additionalStyles() {
6
+ }
package/components/component-accent-text-v3/accent-text-v3.scss ADDED
@@ -0,0 +1,61 @@
1
+ @use 'Assets/scss/modules/library-modules/core-mixins/core-mixins';
2
+ @use 'Assets/scss/modules/library-modules/core-functions/core-functions';
3
+ @use 'Assets/scss/theme/breakpoints';
4
+ // @use 'Assets/scss/modules/library-modules/accent-text-v3/accent-text-v3-extra';
5
+
6
+ @mixin accentTextV3() {
7
+ &__accent-text {
8
+ display: flex;
9
+ align-items: center;
10
+ color: var(--accent-text-colour-mobile);
11
+ text-align: center;
12
+ place-self: var(--alignment, center);
13
+ font-family: var(--secondary-font-family);
14
+ letter-spacing: 0.8em;
15
+ text-transform: uppercase;
16
+
17
+ gap: core-functions.fluidSize(10);
18
+ margin-inline: core-functions.fluidSize(5, 'mobile');
19
+ font-size: core-functions.fontSize(10, 'mobile');
20
+
21
+ @include core-mixins.device(breakpoints.$tabPortrait) {
22
+ font-size: core-functions.fontSize(10, 'portrait');
23
+ margin-inline: core-functions.fluidSize(5, 'portrait');
24
+ gap: core-functions.fluidSize(20, 'portrait');
25
+ }
26
+
27
+ @include core-mixins.device(breakpoints.$tabLandscape) {
28
+ color: var(--accent-text-colour);
29
+ font-size: core-functions.fontSize(10, 'desktop');
30
+ margin-inline: core-functions.fluidSize(5, 'desktop');
31
+ gap: core-functions.fluidSize(20, 'desktop');
32
+ }
33
+
34
+ &::before,
35
+ &::after {
36
+ content: '';
37
+ background-color: var(
38
+ --accent-text-colour-mobile,
39
+ var(--default-text-colour-mobile)
40
+ );
41
+ width: core-functions.fluidSize(20, 'mobile');
42
+ height: core-functions.fluidSize(2, 'mobile');
43
+
44
+ @include core-mixins.device(breakpoints.$tabPortrait) {
45
+ width: core-functions.fluidSize(40, 'portrait');
46
+ height: core-functions.fluidSize(2, 'portrait');
47
+ }
48
+
49
+ @include core-mixins.device(breakpoints.$tabLandscape) {
50
+ background-color: var(
51
+ --accent-text-colour,
52
+ var(--default-text-colour-desktop)
53
+ );
54
+ width: core-functions.fluidSize(80, 'desktop');
55
+ height: core-functions.fluidSize(2, 'desktop');
56
+ }
57
+ }
58
+
59
+ // @include accent-text-v3-extra.additionalStyles();
60
+ }
61
+ }
package/components/component-blockquote-v3/blockquote-v3.scss ADDED
@@ -0,0 +1,55 @@
1
+ // LIBRARY FILE - Do not modify/override here as your changes will be lost when the package is updated.
2
+ @use 'Assets/scss/modules/library-modules/core-mixins/core-mixins';
3
+ @use 'Assets/scss/modules/library-modules/core-functions/core-functions';
4
+ @use 'Assets/scss/theme/breakpoints';
5
+
6
+ @mixin blockquoteV3() {
7
+ &__blockquote {
8
+ display: flex;
9
+ flex-direction: column;
10
+ font-weight: unset;
11
+ gap: core-functions.fluidSize(20, 'static');
12
+ &::before {
13
+ content: unset;
14
+ }
15
+ &::after {
16
+ content: unset;
17
+ }
18
+ &-quote-text {
19
+ font-weight: var(--default-font-weight-mobile);
20
+ text-transform: var(--default-text-transform-mobile);
21
+ text-align: var(--default-text-align-mobile);
22
+ color: var(--default-text-colour-mobile);
23
+ -webkit-text-stroke: core-functions.fontSize(
24
+ var(--text-stroke-width),
25
+ 'static'
26
+ )
27
+ var(--text-stroke-colour);
28
+
29
+ @include core-mixins.device(breakpoints.$tabLandscape) {
30
+ font-weight: var(--default-font-weight-desktop);
31
+ text-transform: var(--default-text-transform-desktop);
32
+ text-align: var(--default-text-align-desktop);
33
+ color: var(--default-text-colour-desktop);
34
+ }
35
+ &:before {
36
+ position: absolute;
37
+ left: -0.6em;
38
+ font-size: var(--quotes-size);
39
+ }
40
+ &:after {
41
+ content: var(--hide-close-quote);
42
+ position: absolute;
43
+ bottom: calc(var(--quotes-size) * -0.04);
44
+ font-size: var(--quotes-size);
45
+ }
46
+ }
47
+ }
48
+ footer {
49
+ align-self: var(--footer-align);
50
+ color: var(--default-text-colour-mobile);
51
+ @include core-mixins.device(breakpoints.$tabLandscape) {
52
+ color: var(--default-text-colour-desktop);
53
+ }
54
+ }
55
+ }
package/components/component-content-container-settings-v3/content-container-settings-v3.scss ADDED
@@ -0,0 +1,213 @@
1
+ @use 'Assets/scss/theme/breakpoints';
2
+ @use 'Assets/scss/modules/library-modules/core-mixins-v3/core-mixins-v3';
3
+ @use 'Assets/scss/modules/library-modules/core-functions/core-functions';
4
+ @use 'Assets/scss/modules/library-modules/box-shadow/box-shadow';
5
+
6
+ @mixin contentContainerSettingsV3() {
7
+ &__inner-container {
8
+ grid-area: main;
9
+ place-self: var(--content-box-vert-align-mobile)
10
+ var(--content-box-horiz-align-mobile);
11
+ z-index: var(--content-z-index, 5);
12
+ overflow: var(--content-box-overflow);
13
+ min-width: min-content;
14
+ aspect-ratio: var(--content-box-aspect-ratio);
15
+ border-radius: var(--border-radius);
16
+ border-width: var(--border-width);
17
+ border-color: var(--border-colour);
18
+ border-style: var(--border-style);
19
+ display: flex;
20
+ flex-direction: var(--content-box-items-direction-mobile, column);
21
+ justify-content: var(--content-items-alignment-mobile);
22
+ align-items: center;
23
+ background-color: var(--cb-bg-colour);
24
+ padding: calc(
25
+ var(--global-content-box-padding-block) *
26
+ var(--content-box-top-padding-mult-mobile)
27
+ )
28
+ calc(
29
+ var(--global-content-box-padding-inline) *
30
+ var(--content-box-right-padding-mult-mobile)
31
+ )
32
+ calc(
33
+ var(--global-content-box-padding-inline) *
34
+ var(--content-box-bottom-padding-mult-mobile)
35
+ )
36
+ calc(
37
+ var(--global-content-box-padding-inline) *
38
+ var(--content-box-left-padding-mult-mobile)
39
+ );
40
+ margin: calc(
41
+ var(--global-inline-spacing) *
42
+ var(--content-container-top-margin-mobile)
43
+ )
44
+ calc(
45
+ var(--global-inline-spacing) *
46
+ var(--content-container-right-margin-mobile)
47
+ )
48
+ calc(
49
+ var(--global-inline-spacing) *
50
+ var(--content-container-bottom-margin-mobile)
51
+ )
52
+ calc(
53
+ var(--global-inline-spacing) *
54
+ var(--content-container-left-margin-mobile)
55
+ );
56
+ column-gap: var(
57
+ --content-items-micro-gap-mobile,
58
+ calc(var(--content-items-gap-mobile) * var(--global-inline-spacing))
59
+ );
60
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
61
+ justify-content: var(--content-items-alignment-portrait);
62
+ place-self: var(--content-box-vert-align-portrait)
63
+ var(--content-box-horiz-align-portrait);
64
+ padding: calc(
65
+ var(--global-content-box-padding-block) *
66
+ var(--content-box-top-padding-mult-portrait)
67
+ )
68
+ calc(
69
+ var(--global-content-box-padding-inline) *
70
+ var(--content-box-right-padding-mult-portrait)
71
+ )
72
+ calc(
73
+ var(--global-content-box-padding-inline) *
74
+ var(--content-box-bottom-padding-mult-portrait)
75
+ )
76
+ calc(
77
+ var(--global-content-box-padding-inline) *
78
+ var(--content-box-left-padding-mult-portrait)
79
+ );
80
+ margin: calc(
81
+ var(--global-inline-spacing) *
82
+ var(--content-container-top-margin-portrait)
83
+ )
84
+ calc(
85
+ var(--global-inline-spacing) *
86
+ var(--content-container-right-margin-portrait)
87
+ )
88
+ calc(
89
+ var(--global-inline-spacing) *
90
+ var(--content-container-bottom-margin-portrait)
91
+ )
92
+ calc(
93
+ var(--global-inline-spacing) *
94
+ var(--content-container-left-margin-portrait)
95
+ );
96
+ }
97
+
98
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
99
+ column-gap: var(
100
+ --content-items-micro-gap-desktop,
101
+ calc(
102
+ var(--content-items-gap-desktop) *
103
+ var(--global-inline-spacing)
104
+ )
105
+ );
106
+ justify-content: var(--content-items-alignment);
107
+ max-width: var(--cb-max-width);
108
+ place-self: var(--content-box-vert-align)
109
+ var(--content-box-horiz-align);
110
+ padding: calc(
111
+ var(--global-content-box-padding-block) *
112
+ var(--content-box-top-padding-mult)
113
+ )
114
+ calc(
115
+ var(--global-content-box-padding-inline) *
116
+ var(--content-box-right-padding-mult)
117
+ )
118
+ calc(
119
+ var(--global-content-box-padding-inline) *
120
+ var(--content-box-bottom-padding-mult)
121
+ )
122
+ calc(
123
+ var(--global-content-box-padding-inline) *
124
+ var(--content-box-left-padding-mult)
125
+ );
126
+ margin: calc(
127
+ var(--global-inline-spacing) *
128
+ var(--content-container-top-margin)
129
+ )
130
+ calc(
131
+ var(--global-inline-spacing) *
132
+ var(--content-container-right-margin)
133
+ )
134
+ calc(
135
+ var(--global-inline-spacing) *
136
+ var(--content-container-bottom-margin)
137
+ )
138
+ calc(
139
+ var(--global-inline-spacing) *
140
+ var(--content-container-left-margin)
141
+ );
142
+ }
143
+
144
+ @include box-shadow.boxShadow();
145
+ }
146
+ &__content-container {
147
+ max-width: var(--wysiwyg-max-width-mobile);
148
+ margin-inline: auto;
149
+ display: grid;
150
+ word-break: normal;
151
+ width: var(--content-container-width, 100%);
152
+ -webkit-text-stroke: core-functions.fontSize(
153
+ var(--text-stroke-width),
154
+ 'static'
155
+ )
156
+ var(--text-stroke-colour);
157
+ @include core-mixins-v3.defaultThemeTextColours();
158
+ @include core-mixins-v3.defaultTextTransform();
159
+ @include core-mixins-v3.defaultTextAlign();
160
+ @include core-mixins-v3.responsiveShowHide();
161
+ p,
162
+ h1,
163
+ h2,
164
+ h3,
165
+ h4,
166
+ h5,
167
+ h6,
168
+ a,
169
+ li,
170
+ div {
171
+ @include core-mixins-v3.defaultFontWeight();
172
+ @include core-mixins-v3.defaultFontStyle();
173
+ }
174
+
175
+ &:last-child {
176
+ margin-bottom: 0;
177
+ }
178
+
179
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
180
+ max-width: var(--wysiwyg-max-width-portrait);
181
+ }
182
+
183
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
184
+ max-width: var(--wysiwyg-max-width);
185
+ }
186
+ }
187
+
188
+ &--text-shadow {
189
+ @include core-mixins-v3.textShadow();
190
+ }
191
+
192
+ &__cta-selection-container {
193
+ width: 100%;
194
+ display: var(--cta-container-display);
195
+ grid-template-columns: var(--grid-columns-mobile);
196
+ flex-wrap: wrap;
197
+ flex-direction: var(--cta-flex-direction);
198
+ justify-content: var(--cta-alignment-mobile);
199
+ gap: calc(var(--global-inline-spacing) * var(--cta-spacing-gap-mobile));
200
+
201
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
202
+ gap: calc(
203
+ var(--global-inline-spacing) * var(--cta-spacing-gap-desktop)
204
+ );
205
+ justify-content: var(--cta-alignment-portrait);
206
+ grid-template-columns: var(--grid-columns-portrait);
207
+ }
208
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
209
+ justify-content: var(--cta-alignment);
210
+ grid-template-columns: var(--grid-columns-desktop);
211
+ }
212
+ }
213
+ }
package/components/component-content-container-v3/content-container-v3.js ADDED
@@ -0,0 +1,96 @@
1
+ import shop from 'Assets/js/modules/library-modules/shopify/shop';
2
+
3
+ export default function contentContainerJs(block) {
4
+ if (!block) {
5
+ return;
6
+ }
7
+
8
+ const blockClassName = block.dataset.assetkey;
9
+ const formContainerElement = block.querySelector('.form-container');
10
+ const modalFormContainerElement = block.querySelector(
11
+ '.form-container__modal'
12
+ );
13
+ const countdownElement = block.querySelector('.countdowndate');
14
+ const socialMediaElement = block.querySelector('.social-media-share-popup');
15
+ const accordionV2Element = block.querySelector(
16
+ `.${blockClassName}__accordion-v2`
17
+ );
18
+ const marketSelector = block.querySelector('.market-selector');
19
+ const shopifySelector = block.querySelector('.shopify__cart');
20
+ const contentTooltip = block.querySelector('.content-tooltip-wrapper');
21
+ const spotifyEmbed = block.querySelector('.spotify-embed');
22
+ const truncatedText = block.querySelector('.truncated-text');
23
+ // const accordionV3Element = block.querySelector(
24
+ // '.standard-content-v2__accordion-v3'
25
+ // );
26
+
27
+ if (formContainerElement || modalFormContainerElement) {
28
+ import(
29
+ 'Assets/js/modules/library-modules/form-selection/form-selection.js'
30
+ ).then((module) => {
31
+ module.default(block);
32
+ });
33
+ }
34
+
35
+ if (countdownElement) {
36
+ import('Assets/js/modules/library-modules/countdown/countdown.js').then(
37
+ (module) => {
38
+ module.default(block);
39
+ }
40
+ );
41
+ }
42
+
43
+ if (socialMediaElement) {
44
+ import(
45
+ 'Assets/js/modules/library-modules/social-media-share/social-media-share.js'
46
+ ).then((module) => {
47
+ module.default(block);
48
+ });
49
+ }
50
+
51
+ if (accordionV2Element) {
52
+ import(
53
+ 'Assets/js/modules/library-modules/accordion-v2/accordion-v2.js'
54
+ ).then((module) => {
55
+ module.default(block);
56
+ });
57
+ }
58
+
59
+ if (marketSelector) {
60
+ import(
61
+ 'Assets/js/modules/library-modules/market-selector/market-selector.js'
62
+ ).then((module) => {
63
+ module.default(block);
64
+ });
65
+ }
66
+ if (shopifySelector) {
67
+ shop.loadShops();
68
+ }
69
+ if (contentTooltip) {
70
+ import(
71
+ 'Assets/js/modules/library-modules/content-tooltip/content-tooltip.js'
72
+ ).then((module) => {
73
+ module.default(block);
74
+ });
75
+ }
76
+ if (spotifyEmbed) {
77
+ import(
78
+ 'Assets/js/modules/library-modules/spotify-embed/spotify-embed.js'
79
+ ).then((module) => {
80
+ module.default(block);
81
+ });
82
+ }
83
+ if (truncatedText) {
84
+ import(
85
+ 'Assets/js/modules/library-modules/truncated-text/truncated-text.js'
86
+ ).then((module) => {
87
+ module.default(block);
88
+ });
89
+ }
90
+
91
+ // if (accordionV3Element) {
92
+ // import('Assets/js/modules/library-modules/accordion-v3/accordion-v3.js').then((module) => {
93
+ // module.default(block);
94
+ // })
95
+ // }
96
+ }
package/components/component-content-container-v3/content-container-v3.scss ADDED
@@ -0,0 +1,31 @@
1
+ @use 'Assets/scss/modules/library-modules/content-container-settings-v3/content-container-settings-v3';
2
+ @use 'Assets/scss/modules/library-modules/content-image-v3/content-image-v3';
3
+ @use 'Assets/scss/modules/library-modules/accent-text-v3/accent-text-v3';
4
+ @use 'Assets/scss/modules/library-modules/nav-menu-v3/nav-menu-v3';
5
+ @use 'Assets/scss/modules/library-modules/blockquote-v3/blockquote-v3';
6
+ @use 'Assets/scss/theme/buttons';
7
+
8
+ @mixin contentContainerV3() {
9
+ @include content-container-settings-v3.contentContainerSettingsV3();
10
+ @include nav-menu-v3.navMenuV3();
11
+ @include blockquote-v3.blockquoteV3();
12
+ @include accent-text-v3.accentTextV3();
13
+ @include buttons.shareIconStyles();
14
+ @include buttons.playButtonStyles();
15
+ &__video-play-button-container {
16
+ display: grid;
17
+ width: 100%;
18
+ pointer-events: all;
19
+ &:last-child {
20
+ margin-bottom: 0;
21
+ }
22
+ }
23
+ &__video-play-button {
24
+ grid-area: unset;
25
+ place-self: var(--playbutton-vertical-alignment, center)
26
+ var(--playbutton-horizontal-alignment, center);
27
+ }
28
+ &__content-image {
29
+ @include content-image-v3.contentImageV3();
30
+ }
31
+ }
package/components/component-content-image-v3/content-image-v3.scss ADDED
@@ -0,0 +1,33 @@
1
+ @use 'Assets/scss/modules/library-modules/core-mixins/core-mixins';
2
+ @use 'Assets/scss/modules/library-modules/core-functions/core-functions';
3
+ @use 'Assets/scss/theme/breakpoints';
4
+
5
+ @mixin contentImageV3() {
6
+ width: 100%;
7
+ height: auto;
8
+ place-self: var(--image-position-horizontal) var(--image-position-vertical);
9
+ translate: var(--image-position-offset-horizontal)
10
+ var(--image-position-offset-vertical);
11
+ rotate: var(--image-rotation);
12
+ z-index: -1;
13
+ border-radius: var(--content-image-border-radius);
14
+ max-width: core-functions.fluidSize(
15
+ var(--image-max-width-mobile),
16
+ 'mobile'
17
+ );
18
+ @include core-mixins.device(breakpoints.$tabPortrait) {
19
+ max-width: core-functions.fluidSize(
20
+ var(--image-max-width-portrait),
21
+ 'portrait'
22
+ );
23
+ }
24
+ @include core-mixins.device(breakpoints.$tabLandscape) {
25
+ max-width: core-functions.fluidSize(
26
+ var(--image-max-width-desktop),
27
+ 'desktop'
28
+ );
29
+ }
30
+ &__content-image-link {
31
+ pointer-events: all;
32
+ }
33
+ }
package/components/component-nav-menu-v3/nav-menu-v3.scss ADDED
@@ -0,0 +1,44 @@
1
+ @use 'Assets/scss/modules/library-modules/core-mixins/core-mixins';
2
+ @use 'Assets/scss/modules/library-modules/core-functions/core-functions';
3
+ @use 'Assets/scss/theme/breakpoints';
4
+
5
+ @mixin navMenuV3() {
6
+ &__nav-menu {
7
+ display: flex;
8
+ width: 100%;
9
+ justify-content: var(--alignment-mobile);
10
+ align-items: var(--alignment-mobile);
11
+ @include core-mixins.device(breakpoints.$tabPortrait) {
12
+ justify-content: var(--alignment-portrait);
13
+ align-items: var(--alignment-portrait);
14
+ }
15
+ @include core-mixins.device(breakpoints.$tabLandscape) {
16
+ justify-content: var(--alignment-desktop);
17
+ }
18
+ }
19
+ &__nav-menu-list {
20
+ list-style: none;
21
+ width: auto;
22
+ display: flex;
23
+ flex-wrap: wrap;
24
+ margin-bottom: unset;
25
+ flex-direction: var(--menu-direction-mobile);
26
+ align-items: var(--alignment-mobile);
27
+ gap: calc(var(--global-inline-spacing) * var(--gap-mobile));
28
+ @include core-mixins.device(breakpoints.$tabPortrait) {
29
+ gap: calc(var(--global-inline-spacing) * var(--gap-portrait));
30
+ flex-direction: var(--menu-direction-portrait);
31
+ align-items: var(--alignment-portrait);
32
+ }
33
+ @include core-mixins.device(breakpoints.$tabLandscape) {
34
+ align-items: var(--alignment-desktop);
35
+ gap: calc(var(--global-inline-spacing) * var(--gap-desktop));
36
+ flex-direction: var(--menu-direction);
37
+ }
38
+ }
39
+ &__nav-menu-list-item {
40
+ margin-bottom: unset;
41
+ line-height: unset;
42
+ letter-spacing: unset;
43
+ }
44
+ }
package/components/component-text-editor-settings-container-classes-v3/text-editor-settings-container-classes-v3.twig ADDED
@@ -0,0 +1,8 @@
1
+ {% if fields.enable_wysiwyg_decoration %}
2
+ {% set wysiwygDecorationStyle = blockClassName ~ '__' ~ fields.wysiwyg_decoration_style|ru %}
3
+ {% endif %}
4
+ {% if fields.enable_text_shadow %}
5
+ {% set textShadowClass = blockClassName ~ "--text-shadow" %}
6
+ {% endif %}
7
+ {% set styleClasses = wysiwygDecorationStyle ~ ' ' ~ textShadowClass %}
8
+ {{styleClasses}}
package/components/component-text-editor-settings-element-classes-v3/text-editor-settings-element-classes-v3.twig ADDED
@@ -0,0 +1,6 @@
1
+ {% set typographicStyle = fields.typographic_style|ru %}
2
+ {% set typographicStyleDesktop = fields.typographic_style_desktop|ru %}
3
+ {% set typographicStylePortrait = fields.typographic_style_portrait|ru %}
4
+ {% set typographicStyleMobile = fields.typographic_style_mobile|ru %}
5
+ {% set styleClasses = typographicStyle ~ ' ' ~ typographicStyleDesktop ~ ' ' ~ typographicStylePortrait ~ ' ' ~ typographicStyleMobile ~ ' ' ~ textShadowClass %}
6
+ {{styleClasses}}
package/components/component-text-editor-settings-v3/group_687a4e2334e37.json CHANGED
@@ -677,10 +677,8 @@
677
677
  "id": ""
678
678
  },
679
679
  "wpml_cf_preferences": 3,
680
- "user_roles": [
681
- "administrator"
682
- ],
683
680
  "choices": {
681
+ "__200": "Light",
684
682
  "__default": "Default",
685
683
  "__bold": "Bold"
686
684
  },
@@ -944,22 +942,23 @@
944
942
  },
945
943
  "wpml_cf_preferences": 3,
946
944
  "choices": {
945
+ "__200": "Light",
947
946
  "__default": "Default",
948
947
  "__bold": "Bold"
949
948
  },
950
949
  "default_value": false,
951
950
  "return_format": "value",
952
951
  "multiple": 0,
953
- "allow_null": 1,
954
- "ui": 1,
955
- "ajax": 0,
956
- "placeholder": "",
952
+ "max": "",
957
953
  "allow_custom": 0,
954
+ "placeholder": "",
958
955
  "search_placeholder": "",
959
956
  "prepend": "",
960
957
  "append": "",
961
- "min": "",
962
- "max": ""
958
+ "allow_null": 1,
959
+ "ui": 1,
960
+ "ajax": 0,
961
+ "min": ""
963
962
  },
964
963
  {
965
964
  "key": "field_687a4e2346957",
@@ -1209,26 +1208,24 @@
1209
1208
  "id": ""
1210
1209
  },
1211
1210
  "wpml_cf_preferences": 3,
1212
- "user_roles": [
1213
- "administrator"
1214
- ],
1215
1211
  "choices": {
1212
+ "__200": "Light",
1216
1213
  "__default": "Default",
1217
1214
  "__bold": "Bold"
1218
1215
  },
1219
1216
  "default_value": false,
1220
1217
  "return_format": "value",
1221
1218
  "multiple": 0,
1222
- "allow_null": 1,
1223
- "ui": 1,
1224
- "ajax": 0,
1225
- "placeholder": "",
1219
+ "max": "",
1226
1220
  "allow_custom": 0,
1221
+ "placeholder": "",
1227
1222
  "search_placeholder": "",
1228
1223
  "prepend": "",
1229
1224
  "append": "",
1230
- "min": "",
1231
- "max": ""
1225
+ "allow_null": 1,
1226
+ "ui": 1,
1227
+ "ajax": 0,
1228
+ "min": ""
1232
1229
  },
1233
1230
  {
1234
1231
  "key": "field_687a4e23484af",
@@ -1385,5 +1382,5 @@
1385
1382
  "acfe_display_title": "",
1386
1383
  "acfe_meta": "",
1387
1384
  "acfe_note": "",
1388
- "modified": 1752851122
1385
+ "modified": 1752931819
1389
1386
  }
package/components/component-text-editor-settings-variables-v3/text-editor-settings-variables-v3.twig ADDED
@@ -0,0 +1,61 @@
1
+ {% if fields.enable_text_shadow %}
2
+ {# {% set textShadowClass = blockClassName|default('default-class') ~ "--text-shadow" %} #}
3
+ {% set textShadowStyle = "--text-shadow-offset-x:" ~ (fields.text_shadow_horizontal_offset|default(0)) ~ "; --text-shadow-offset-y: " ~ (fields.text_shadow_vertical_offset|default(0)) ~ "; --text-shadow-blur: " ~ (fields.text_shadow_blur|default(0)) ~ "; --text-shadow-colour: " ~ (fields.text_shadow_colour|default("#000000")) ~ ";" %}
4
+ {% endif %}
5
+
6
+ {% if fields.mobile_default_text_transform %}
7
+ {% set defaultTextTransformMobile = '--default-text-transform-mobile: ' ~ fields.mobile_default_text_transform|ru ~ ';' %}
8
+ {% endif %}
9
+ {% if fields.portrait_default_text_transform %}
10
+ {% set defaultTextTransformPortrait = '--default-text-transform-portrait: ' ~ fields.portrait_default_text_transform|ru ~ ';' %}
11
+ {% endif %}
12
+ {% if fields.desktop_default_text_transform %}
13
+ {% set defaultTextTransformDesktop = '--default-text-transform-desktop: ' ~ fields.desktop_default_text_transform|ru ~ ';' %}
14
+ {% endif %}
15
+ {% if fields.mobile_default_text_align %}
16
+ {% set defaultTextAlignMobile = '--default-text-align-mobile: ' ~ fields.mobile_default_text_align|ru ~ ';' %}
17
+ {% endif %}
18
+ {% if fields.portrait_default_text_align %}
19
+ {% set defaultTextAlignPortrait = '--default-text-align-portrait: ' ~ fields.portrait_default_text_align|ru ~ ';' %}
20
+ {% endif %}
21
+ {% if fields.desktop_default_text_align %}
22
+ {% set defaultTextAlignDesktop = '--default-text-align-desktop: ' ~ fields.desktop_default_text_align|ru ~ ';' %}
23
+ {% endif %}
24
+ {% if fields.mobile_default_font_weight %}
25
+ {% set defaultFontWeightMobile = '--default-font-weight-mobile: ' ~ fields.mobile_default_font_weight|ru ~ ';' %}
26
+ {% endif %}
27
+ {% if fields.portrait_default_font_weight %}
28
+ {% set defaultFontWeightPortrait = '--default-font-weight-portrait: ' ~ fields.portrait_default_font_weight|ru ~ ';' %}
29
+ {% endif %}
30
+ {% if fields.desktop_default_font_weight %}
31
+ {% set defaultFontWeightDesktop = '--default-font-weight-desktop: ' ~ fields.desktop_default_font_weight|ru ~ ';' %}
32
+ {% endif %}
33
+ {% set displaytype = 'grid' %}
34
+ {% set responsiveShowHide = include('components/responsive-show-hide.twig', { fields, block, blockClassName, displaytype, is_preview }, with_context = false) %}
35
+ {% if fields.mobile_default_font_style %}
36
+ {% set defaultFontStyleMobile = '--default-font-style-mobile: ' ~ fields.mobile_default_font_style|ru ~ ';' %}
37
+ {% endif %}
38
+ {% if fields.portrait_default_font_style %}
39
+ {% set defaultFontStylePortrait = '--default-font-style-portrait: ' ~ fields.portrait_default_font_style|ru ~ ';' %}
40
+ {% endif %}
41
+ {% if fields.desktop_default_font_style %}
42
+ {% set defaultFontStyleDesktop = '--default-font-style-desktop: ' ~ fields.desktop_default_font_style|ru ~ ';' %}
43
+ {% endif %}
44
+ {% if fields.desktop_default_text_colour %}
45
+ {% set defaultTextColourDesktop = '--default-text-colour-desktop: ' ~ fields.desktop_default_text_colour|ru ~ ';' %}
46
+ {% endif %}
47
+ {% if fields.portrait_default_text_colour %}
48
+ {% set defaultTextColourPortrait = '--default-text-colour-portrait: ' ~ fields.portrait_default_text_colour|ru ~ ';' %}
49
+ {% endif %}
50
+ {% if fields.mobile_default_text_colour %}
51
+ {% set defaultTextColourMobile = '--default-text-colour-mobile: ' ~ fields.mobile_default_text_colour|ru ~ ';' %}
52
+ {% endif %}
53
+ {% if fields.enable_text_outline %}
54
+ {% set textStrokeWidth = '--text-stroke-width: ' ~ fields.text_outline_width ~ ';' %}
55
+ {% set textStrokeColour = '--text-stroke-colour: ' ~ fields.text_outline_colour ~ ';' %}
56
+ {% endif %}
57
+ {% set wysiwygMaxWidth = '--wysiwyg-max-width: ' ~ fields.wysiwyg_max_width ~ '%;' %}
58
+ {% set wysiwygMaxWidthPortrait = '--wysiwyg-max-width-portrait: ' ~ fields.wysiwyg_max_width_portrait ~ '%;' %}
59
+ {% set wysiwygMaxWidthMobile = '--wysiwyg-max-width-mobile: ' ~ fields.wysiwyg_max_width_mobile ~ '%;' %}
60
+ {% set styles = textShadowStyle ~ defaultTextColourDesktop ~ defaultTextColourPortrait ~ defaultTextColourMobile ~ textStrokeWidth ~ textStrokeColour ~ wysiwygHorizPaddingMobile ~ wysiwygHorizPaddingDesktop ~ wysiwygMaxWidth ~ wysiwygMaxWidthMobile ~ wysiwygMaxWidthPortrait ~ defaultTextTransformDesktop ~ defaultTextTransformMobile ~ defaultTextTransformPortrait ~ defaultFontWeightMobile ~ defaultFontWeightPortrait ~ defaultFontWeightDesktop ~ defaultFontStyleMobile ~ defaultFontStylePortrait ~ defaultFontStyleDesktop ~ defaultTextAlignMobile ~ defaultTextAlignPortrait ~ defaultTextAlignDesktop ~ responsiveShowHide %}
61
+ {{styles}}
package/components/component-wysiwyg-editor-v3/wysiwyg-editor-v3.twig CHANGED
@@ -1,81 +1,16 @@
1
- {# Do not edit this file outside of the component library as your changes will be lost with future updates. #}
2
- {% if fields.enable_text_shadow %}
3
- {% set textShadowClass = blockClassName|default('default-class') ~ "--text-shadow" %}
4
- {% set textShadowStyle = "--text-shadow-offset-x:" ~ (fields.text_shadow_horizontal_offset|default(0)) ~ "; --text-shadow-offset-y: " ~ (fields.text_shadow_vertical_offset|default(0)) ~ "; --text-shadow-blur: " ~ (fields.text_shadow_blur|default(0)) ~ "; --text-shadow-colour: " ~ (fields.text_shadow_colour|default("#000000")) ~ ";" %}
5
- {% endif %}
6
- {% if fields.enable_wysiwyg_decoration %}
7
- {% set wysiwygDecorationStyle = fields.wysiwyg_decoration_style|ru %}
8
- {% endif %}
9
- {% if fields.mobile_default_text_transform %}
10
- {% set defaultTextTransformMobile = '--default-text-transform-mobile: ' ~ fields.mobile_default_text_transform|ru ~ ';' %}
11
- {% endif %}
12
- {% if fields.portrait_default_text_transform %}
13
- {% set defaultTextTransformPortrait = '--default-text-transform-portrait: ' ~ fields.portrait_default_text_transform|ru ~ ';' %}
14
- {% endif %}
15
- {% if fields.desktop_default_text_transform %}
16
- {% set defaultTextTransformDesktop = '--default-text-transform-desktop: ' ~ fields.desktop_default_text_transform|ru ~ ';' %}
17
- {% endif %}
18
- {% if fields.mobile_default_text_align %}
19
- {% set defaultTextAlignMobile = '--default-text-align-mobile: ' ~ fields.mobile_default_text_align|ru ~ ';' %}
20
- {% endif %}
21
- {% if fields.portrait_default_text_align %}
22
- {% set defaultTextAlignPortrait = '--default-text-align-portrait: ' ~ fields.portrait_default_text_align|ru ~ ';' %}
23
- {% endif %}
24
- {% if fields.desktop_default_text_align %}
25
- {% set defaultTextAlignDesktop = '--default-text-align-desktop: ' ~ fields.desktop_default_text_align|ru ~ ';' %}
26
- {% endif %}
27
- {% if fields.mobile_default_font_weight %}
28
- {% set defaultFontWeightMobile = '--default-font-weight-mobile: ' ~ fields.mobile_default_font_weight|ru ~ ';' %}
29
- {% endif %}
30
- {% if fields.portrait_default_font_weight %}
31
- {% set defaultFontWeightPortrait = '--default-font-weight-portrait: ' ~ fields.portrait_default_font_weight|ru ~ ';' %}
32
- {% endif %}
33
- {% if fields.desktop_default_font_weight %}
34
- {% set defaultFontWeightDesktop = '--default-font-weight-desktop: ' ~ fields.desktop_default_font_weight|ru ~ ';' %}
35
- {% endif %}
36
- {% set displaytype = 'grid' %}
37
- {% set responsiveShowHide = include('components/responsive-show-hide.twig', { fields, block, blockClassName, displaytype, is_preview }, with_context = false) %}
38
- {% if fields.mobile_default_font_style %}
39
- {% set defaultFontStyleMobile = '--default-font-style-mobile: ' ~ fields.mobile_default_font_style|ru ~ ';' %}
40
- {% endif %}
41
- {% if fields.portrait_default_font_style %}
42
- {% set defaultFontStylePortrait = '--default-font-style-portrait: ' ~ fields.portrait_default_font_style|ru ~ ';' %}
43
- {% endif %}
44
- {% if fields.desktop_default_font_style %}
45
- {% set defaultFontStyleDesktop = '--default-font-style-desktop: ' ~ fields.desktop_default_font_style|ru ~ ';' %}
46
- {% endif %}
47
- {% if fields.desktop_default_text_colour %}
48
- {% set defaultTextColourDesktop = '--default-text-colour-desktop: ' ~ fields.desktop_default_text_colour|ru ~ ';' %}
49
- {% endif %}
50
- {% if fields.portrait_default_text_colour %}
51
- {% set defaultTextColourPortrait = '--default-text-colour-portrait: ' ~ fields.portrait_default_text_colour|ru ~ ';' %}
52
- {% endif %}
53
- {% if fields.mobile_default_text_colour %}
54
- {% set defaultTextColourMobile = '--default-text-colour-mobile: ' ~ fields.mobile_default_text_colour|ru ~ ';' %}
55
- {% endif %}
56
- {% if fields.enable_text_outline %}
57
- {% set textStrokeWidth = '--text-stroke-width: ' ~ fields.text_outline_width ~ ';' %}
58
- {% set textStrokeColour = '--text-stroke-colour: ' ~ fields.text_outline_colour ~ ';' %}
59
- {% endif %}
1
+ {% set textEditorStyleVars = include('components/text-editor-settings-variables-v3.twig', { fields, block, blockClassName, is_preview }, with_context = false) %}
2
+ {% set textEditorContainerClasses = include('components/text-editor-settings-container-classes-v3.twig', { fields, block, blockClassName, is_preview }, with_context = false) %}
3
+ {% set textEditorElementClasses = include('components/text-editor-settings-element-classes-v3.twig', { fields, block, blockClassName, is_preview }, with_context = false) %}
60
4
  {% set elementType = fields.element_type|ru %}
61
- {% set typographicStyle = fields.typographic_style|ru %}
62
- {% set typographicStyleDesktop = fields.typographic_style_desktop|ru %}
63
- {% set typographicStylePortrait = fields.typographic_style_portrait|ru %}
64
- {% set typographicStyleMobile = fields.typographic_style_mobile|ru %}
65
-
66
- {% set wysiwygMaxWidth = '--wysiwyg-max-width: ' ~ fields.wysiwyg_max_width ~ '%;' %}
67
- {% set wysiwygMaxWidthPortrait = '--wysiwyg-max-width-portrait: ' ~ fields.wysiwyg_max_width_portrait ~ '%;' %}
68
- {% set wysiwygMaxWidthMobile = '--wysiwyg-max-width-mobile: ' ~ fields.wysiwyg_max_width_mobile ~ '%;' %}
69
- {% set widgetStyles = textShadowStyle ~ defaultTextColourDesktop ~ defaultTextColourPortrait ~ defaultTextColourMobile ~ textStrokeWidth ~ textStrokeColour ~ wysiwygHorizPaddingMobile ~ wysiwygHorizPaddingDesktop ~ wysiwygMaxWidth ~ wysiwygMaxWidthMobile ~ wysiwygMaxWidthPortrait ~ defaultTextTransformDesktop ~ defaultTextTransformMobile ~ defaultTextTransformPortrait ~ defaultFontWeightMobile ~ defaultFontWeightPortrait ~ defaultFontWeightDesktop ~ defaultFontStyleMobile ~ defaultFontStylePortrait ~ defaultFontStyleDesktop ~ defaultTextAlignMobile ~ defaultTextAlignPortrait ~ defaultTextAlignDesktop ~ responsiveShowHide %}
70
5
  <style>
71
6
  .{{blockClassName|default('default-class')}}__content-container.{{block.id}}{
72
- {{widgetStyles}}
7
+ {{textEditorStyleVars}}
73
8
  }
74
9
  </style>
75
10
  {% if fields.wysiwyg_editor %}
76
- <div class="{{blockClassName|default('default-class')}}__content-container {{textShadowClass}} {{blockClassName|default('default-class')}}__{{wysiwygDecorationStyle}} standard-content-box-wysiwyg-editor {{block.id}}">
11
+ <div class="{{blockClassName}}__content-container {{textEditorContainerClasses}} standard-content-box-wysiwyg-editor {{block.id}}">
77
12
  {% if fields.wysiwyg_editor is not empty %}
78
- <{{elementType}} class="{{typographicStyle}} {{typographicStyleDesktop}} {{typographicStylePortrait}} {{typographicStyleMobile}}">
13
+ <{{elementType}} class="{{textEditorElementClasses}}">
79
14
  {{fields.wysiwyg_editor|striptags('<br>, <a>, <em>, <i>, <span>, <strong>')|raw}}
80
15
  </{{elementType}}>
81
16
  {% endif %}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@total_onion/onion-library",
3
- "version": "1.0.42",
3
+ "version": "1.0.44",
4
4
  "description": "Component library",
5
5
  "main": "index.js",
6
6
  "scripts": {