@total_onion/onion-library 2.0.28 → 2.0.32
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.
- package/README.md +2 -32
- package/components/block-group-container-v3/group-container-v3.js +1 -1
- package/components/block-scrolling-banner-v3/group_68e67fca1ec80.json +148 -0
- package/components/block-scrolling-banner-v3/scrolling-banner-v3.js +9 -0
- package/components/block-scrolling-banner-v3/scrolling-banner-v3.php +14 -0
- package/components/block-scrolling-banner-v3/scrolling-banner-v3.scss +97 -0
- package/components/block-scrolling-banner-v3/scrolling-banner-v3.twig +50 -0
- package/components/fields-core-typography-v3/core-typography-v3.scss +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,33 +1,3 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Onion Library
|
|
2
2
|
|
|
3
|
-
Front end
|
|
4
|
-
|
|
5
|
-
## Installation
|
|
6
|
-
|
|
7
|
-
Install with npm or yarn..
|
|
8
|
-
|
|
9
|
-
`npm install --save-dev @pernod-ricard-global-cms/cbl-component-library`
|
|
10
|
-
|
|
11
|
-
`yarn add -D @pernod-ricard-global-cms/cbl-component-library`
|
|
12
|
-
|
|
13
|
-
If you don't have the scripts already in your package.json you can add these and use them to install and update components.
|
|
14
|
-
|
|
15
|
-
`"install-component": "node ./node_modules/@pernod-ricard-global-cms/cbl-component-library/install-component.js", "upgrade-component": "node ./node_modules/@pernod-ricard-global-cms/cbl-component-library/upgrade-component.js", "list-components": "node ./node_modules/@pernod-ricard-global-cms/cbl-component-library/list-components.js",`
|
|
16
|
-
|
|
17
|
-
eg you can list the available components with
|
|
18
|
-
|
|
19
|
-
`yarn list-components`
|
|
20
|
-
|
|
21
|
-
and then you can install and component with
|
|
22
|
-
|
|
23
|
-
`yarn install-component <name-of-component>`
|
|
24
|
-
|
|
25
|
-
## Run unit tests
|
|
26
|
-
|
|
27
|
-
Go to the folder
|
|
28
|
-
|
|
29
|
-
`yarn install`
|
|
30
|
-
|
|
31
|
-
then, to run unit tests,
|
|
32
|
-
|
|
33
|
-
`yarn test`
|
|
3
|
+
Front end component library
|
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
{
|
|
2
|
+
"key": "group_68e67fca1ec80",
|
|
3
|
+
"title": "Block: Scrolling Banner v3",
|
|
4
|
+
"fields": [
|
|
5
|
+
{
|
|
6
|
+
"key": "field_68e6822690986",
|
|
7
|
+
"label": "Banner Fields",
|
|
8
|
+
"name": "",
|
|
9
|
+
"aria-label": "",
|
|
10
|
+
"type": "tab",
|
|
11
|
+
"instructions": "",
|
|
12
|
+
"required": 0,
|
|
13
|
+
"conditional_logic": 0,
|
|
14
|
+
"wrapper": {
|
|
15
|
+
"width": "",
|
|
16
|
+
"class": "",
|
|
17
|
+
"id": ""
|
|
18
|
+
},
|
|
19
|
+
"wpml_cf_preferences": 3,
|
|
20
|
+
"placement": "top",
|
|
21
|
+
"endpoint": 0,
|
|
22
|
+
"no_preference": 0,
|
|
23
|
+
"selected": 0
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"key": "field_68e6801d43db8",
|
|
27
|
+
"label": "scrolling banner fields",
|
|
28
|
+
"name": "scrolling_banner_fields",
|
|
29
|
+
"aria-label": "",
|
|
30
|
+
"type": "clone",
|
|
31
|
+
"instructions": "",
|
|
32
|
+
"required": 0,
|
|
33
|
+
"conditional_logic": 0,
|
|
34
|
+
"wrapper": {
|
|
35
|
+
"width": "",
|
|
36
|
+
"class": "",
|
|
37
|
+
"id": ""
|
|
38
|
+
},
|
|
39
|
+
"wpml_cf_preferences": 3,
|
|
40
|
+
"clone": [
|
|
41
|
+
"group_626472bf26f5c"
|
|
42
|
+
],
|
|
43
|
+
"display": "seamless",
|
|
44
|
+
"layout": "block",
|
|
45
|
+
"prefix_label": 0,
|
|
46
|
+
"prefix_name": 0,
|
|
47
|
+
"acfe_seamless_style": 0,
|
|
48
|
+
"acfe_clone_modal": 0,
|
|
49
|
+
"acfe_clone_modal_close": 0,
|
|
50
|
+
"acfe_clone_modal_button": "",
|
|
51
|
+
"acfe_clone_modal_size": "large"
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
"key": "field_68e67fca63368",
|
|
55
|
+
"label": "Block Settings",
|
|
56
|
+
"name": "",
|
|
57
|
+
"aria-label": "",
|
|
58
|
+
"type": "tab",
|
|
59
|
+
"instructions": "",
|
|
60
|
+
"required": 0,
|
|
61
|
+
"conditional_logic": 0,
|
|
62
|
+
"wrapper": {
|
|
63
|
+
"width": "",
|
|
64
|
+
"class": "",
|
|
65
|
+
"id": ""
|
|
66
|
+
},
|
|
67
|
+
"wpml_cf_preferences": 3,
|
|
68
|
+
"placement": "top",
|
|
69
|
+
"endpoint": 0,
|
|
70
|
+
"no_preference": 0,
|
|
71
|
+
"selected": 0
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"key": "field_68e68346cb037",
|
|
75
|
+
"label": "Block",
|
|
76
|
+
"name": "",
|
|
77
|
+
"aria-label": "",
|
|
78
|
+
"type": "accordion",
|
|
79
|
+
"instructions": "",
|
|
80
|
+
"required": 0,
|
|
81
|
+
"conditional_logic": 0,
|
|
82
|
+
"wrapper": {
|
|
83
|
+
"width": "",
|
|
84
|
+
"class": "",
|
|
85
|
+
"id": ""
|
|
86
|
+
},
|
|
87
|
+
"wpml_cf_preferences": 0,
|
|
88
|
+
"open": 0,
|
|
89
|
+
"multi_expand": 0,
|
|
90
|
+
"endpoint": 0
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"key": "field_68e6835dcb038",
|
|
94
|
+
"label": "Block Settings",
|
|
95
|
+
"name": "block_settings",
|
|
96
|
+
"aria-label": "",
|
|
97
|
+
"type": "clone",
|
|
98
|
+
"instructions": "",
|
|
99
|
+
"required": 0,
|
|
100
|
+
"conditional_logic": 0,
|
|
101
|
+
"wrapper": {
|
|
102
|
+
"width": "",
|
|
103
|
+
"class": "",
|
|
104
|
+
"id": ""
|
|
105
|
+
},
|
|
106
|
+
"wpml_cf_preferences": 0,
|
|
107
|
+
"clone": [
|
|
108
|
+
"group_689f649af2ac4"
|
|
109
|
+
],
|
|
110
|
+
"display": "seamless",
|
|
111
|
+
"layout": "block",
|
|
112
|
+
"prefix_label": 0,
|
|
113
|
+
"prefix_name": 0,
|
|
114
|
+
"acfe_seamless_style": 0,
|
|
115
|
+
"acfe_clone_modal": 0,
|
|
116
|
+
"acfe_clone_modal_close": 0,
|
|
117
|
+
"acfe_clone_modal_button": "",
|
|
118
|
+
"acfe_clone_modal_size": "large"
|
|
119
|
+
}
|
|
120
|
+
],
|
|
121
|
+
"location": [
|
|
122
|
+
[
|
|
123
|
+
{
|
|
124
|
+
"param": "block",
|
|
125
|
+
"operator": "==",
|
|
126
|
+
"value": "acf\/scrolling-banner-v3"
|
|
127
|
+
}
|
|
128
|
+
]
|
|
129
|
+
],
|
|
130
|
+
"menu_order": 0,
|
|
131
|
+
"position": "normal",
|
|
132
|
+
"style": "default",
|
|
133
|
+
"label_placement": "left",
|
|
134
|
+
"instruction_placement": "label",
|
|
135
|
+
"hide_on_screen": "",
|
|
136
|
+
"active": true,
|
|
137
|
+
"description": "",
|
|
138
|
+
"show_in_rest": 0,
|
|
139
|
+
"acfe_autosync": [
|
|
140
|
+
"json"
|
|
141
|
+
],
|
|
142
|
+
"acfml_field_group_mode": "localization",
|
|
143
|
+
"acfe_form": 0,
|
|
144
|
+
"acfe_display_title": "",
|
|
145
|
+
"acfe_meta": "",
|
|
146
|
+
"acfe_note": "",
|
|
147
|
+
"modified": 1759937456
|
|
148
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import scrollingbannerJs from 'Assets/js/modules/library-modules/scrolling-banner/scrolling-banner';
|
|
2
|
+
export default function scrollingbannerv3Js(options = {}) {
|
|
3
|
+
try {
|
|
4
|
+
const {block} = options;
|
|
5
|
+
scrollingbannerJs(block);
|
|
6
|
+
} catch (error) {
|
|
7
|
+
console.error(error);
|
|
8
|
+
}
|
|
9
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
<?php
|
|
2
|
+
|
|
3
|
+
acf_register_block_type(
|
|
4
|
+
array(
|
|
5
|
+
'name' => 'scrolling-banner-v3',
|
|
6
|
+
'title' => __( 'Scrolling banner v3', 'Global-theme Admin' ),
|
|
7
|
+
'render_callback' => 'athena_block_render_post_object_v3',
|
|
8
|
+
'category' => 'common',
|
|
9
|
+
'icon' => get_svg_icon_content('brick.svg'),
|
|
10
|
+
'keywords' => array('content', 'text' ),
|
|
11
|
+
'mode' => 'preview',
|
|
12
|
+
'supports' => array( 'align' => false, 'anchor' => true ),
|
|
13
|
+
)
|
|
14
|
+
);
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
@use 'NodeModules/@total_onion/onion-library/components/fields-core-functions-v3/core-functions-v3';
|
|
2
|
+
@use 'NodeModules/@total_onion/onion-library/components/fields-core-mixins-v3/core-mixins-v3';
|
|
3
|
+
@use 'NodeModules/@total_onion/onion-library/breakpoints';
|
|
4
|
+
|
|
5
|
+
.scrolling-banner-v3 {
|
|
6
|
+
position: relative;
|
|
7
|
+
overflow-x: hidden;
|
|
8
|
+
color: var(--banner-text-colour);
|
|
9
|
+
font-weight: var(--weight-extra-bold);
|
|
10
|
+
width: 100%;
|
|
11
|
+
display: flex;
|
|
12
|
+
flex-wrap: nowrap;
|
|
13
|
+
line-height: 1;
|
|
14
|
+
text-transform: uppercase;
|
|
15
|
+
height: auto;
|
|
16
|
+
z-index: 99;
|
|
17
|
+
grid-area: main;
|
|
18
|
+
place-self: var(--position);
|
|
19
|
+
|
|
20
|
+
&__wrapper {
|
|
21
|
+
display: grid;
|
|
22
|
+
grid-template: 'main' / 1fr;
|
|
23
|
+
width: 100%;
|
|
24
|
+
height: auto;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
&__container {
|
|
28
|
+
width: auto;
|
|
29
|
+
display: flex;
|
|
30
|
+
justify-content: flex-start;
|
|
31
|
+
grid-area: main;
|
|
32
|
+
position: absolute;
|
|
33
|
+
left: 100%;
|
|
34
|
+
height: auto;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
&__inner {
|
|
38
|
+
width: auto;
|
|
39
|
+
height: auto;
|
|
40
|
+
overflow-y: hidden;
|
|
41
|
+
display: flex;
|
|
42
|
+
flex-wrap: nowrap;
|
|
43
|
+
align-items: center;
|
|
44
|
+
align-self: flex-start;
|
|
45
|
+
white-space: nowrap;
|
|
46
|
+
font-size: core-functions-v3.fontSize(
|
|
47
|
+
var(--text-size-mobile),
|
|
48
|
+
'mobile'
|
|
49
|
+
);
|
|
50
|
+
|
|
51
|
+
@include core-mixins-v3.device(breakpoints.$tabPortrait) {
|
|
52
|
+
font-size: core-functions-v3.fontSize(
|
|
53
|
+
var(--text-size-portrait),
|
|
54
|
+
'portrait'
|
|
55
|
+
);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
@include core-mixins-v3.device(breakpoints.$tabLandscape) {
|
|
59
|
+
font-size: core-functions-v3.fontSize(
|
|
60
|
+
var(--text-size-desktop),
|
|
61
|
+
'desktop'
|
|
62
|
+
);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
&__separator {
|
|
67
|
+
margin: auto core-functions-v3.fluidSize(25, 'mobile');
|
|
68
|
+
position: relative;
|
|
69
|
+
height: 0.3em;
|
|
70
|
+
width: 0.3em;
|
|
71
|
+
display: grid;
|
|
72
|
+
|
|
73
|
+
@include core-mixins-v3.device(breakpoints.$tabPortrait) {
|
|
74
|
+
margin: auto core-functions-v3.fluidSize(25, 'portrait');
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
@include core-mixins-v3.device(breakpoints.$tabLandscape) {
|
|
78
|
+
margin: auto core-functions-v3.fluidSize(25, 'desktop');
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
&::before {
|
|
82
|
+
content: '';
|
|
83
|
+
background-color: var(--banner-text-colour);
|
|
84
|
+
width: 100%;
|
|
85
|
+
height: 100%;
|
|
86
|
+
position: absolute;
|
|
87
|
+
display: grid;
|
|
88
|
+
z-index: 1;
|
|
89
|
+
place-self: center;
|
|
90
|
+
border-radius: 50%;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
&--text-shadow {
|
|
95
|
+
@include core-mixins-v3.textShadow();
|
|
96
|
+
}
|
|
97
|
+
}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
{% set blockClassName = "scrolling-banner-v3" %}
|
|
2
|
+
{% set classNameEntryPoint = include('entry-points/entry-point-classes.twig', { fields: fields, block: block }, with_context = false) %}
|
|
3
|
+
{# {% set htmlEntryPoint = include('entry-points/entry-point-html-v3.twig', { fields: fields, block: block, blockClassName, blockClassName }, with_context = false) %} #}
|
|
4
|
+
{% set dataAttributeEntryPoint = include('entry-points/entry-point-data-attribute.twig', { fields: fields, block: block }, with_context = false) %}
|
|
5
|
+
{% set styleEntryPoint = include('entry-points/entry-point-style-v3.twig', { fields: fields, block: block, is_preview }, with_context = false) %}
|
|
6
|
+
{% set previewEntryPoint = include('entry-points/entry-point-preview-info.twig', { fields, block, displaytype, is_preview }, with_context = false) %}
|
|
7
|
+
|
|
8
|
+
{% set sectionStyles = styleEntryPoint %}
|
|
9
|
+
|
|
10
|
+
{{previewEntryPoint}}
|
|
11
|
+
<style>
|
|
12
|
+
.{{blockClassName}}.{{block.id}}{
|
|
13
|
+
{{sectionStyles}}
|
|
14
|
+
}
|
|
15
|
+
</style>
|
|
16
|
+
<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{block.className}} {{classNameEntryPoint}} {{block.id}} lazy-fade" {{dataAttributeEntryPoint}} data-blockid="{{block.id}}" data-assetkey="{{blockClassName}}">
|
|
17
|
+
|
|
18
|
+
{% set className = 'scrolling-banner' %}
|
|
19
|
+
{% set bannerText = fields.scrolling_banner_text %}
|
|
20
|
+
{% set enableScrolling = fields.enable_scrolling_banner %}
|
|
21
|
+
{% set bannerSpeed = fields.scrolling_banner_speed %}
|
|
22
|
+
{% set imageSeperator = fields.seperator_as_image %}
|
|
23
|
+
{% set positioning = '--position:' ~ fields.positioning|ru ~ ';' %}
|
|
24
|
+
{% set textSizeDesktop = '--text-size-desktop:' ~ fields.font_size_desktop ~ ';' %}
|
|
25
|
+
{% set textSizePortrait = '--text-size-portrait:' ~ fields.font_size_portrait ~ ';' %}
|
|
26
|
+
{% set textSizeMobile = '--text-size-mobile:' ~ fields.font_size_mobile ~ ';' %}
|
|
27
|
+
{% set textColour = '--banner-text-colour:' ~ fields.text_colour ~ ';' %}
|
|
28
|
+
{% set bannerTextStyles = textSizeDesktop ~ textSizePortrait ~ textSizeMobile ~ positioning ~ textColour %}
|
|
29
|
+
|
|
30
|
+
{% if fields.enable_text_shadow %}
|
|
31
|
+
{% set textShadowClassName = className ~ "--text-shadow" %}
|
|
32
|
+
{% 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")) ~ ";" %}
|
|
33
|
+
{% endif %}
|
|
34
|
+
|
|
35
|
+
{% if enableScrolling %}
|
|
36
|
+
<div class="{{className}}" data-speed="{{bannerSpeed}}" style="{{bannerTextStyles ~ textShadowStyle}}">
|
|
37
|
+
<div class="{{className}}__wrapper">
|
|
38
|
+
<div class="{{className}}__container">
|
|
39
|
+
<div class="{{className}}__inner">
|
|
40
|
+
<span class="{{className}}__separator"></span>
|
|
41
|
+
<span class="{{className}}__text {{textShadowClassName}}">{{bannerText}}</span>
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
44
|
+
</div>
|
|
45
|
+
</div>
|
|
46
|
+
{% endif %}
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
{# {{htmlEntryPoint}} #}
|
|
50
|
+
</section>
|
|
@@ -215,12 +215,12 @@
|
|
|
215
215
|
.sh-l-fs {
|
|
216
216
|
&-mobile {
|
|
217
217
|
@media ( width <= #{breakpoints.$tabPortrait}) {
|
|
218
|
-
@include core-typography-mixins-v3.sh-l
|
|
218
|
+
@include core-typography-mixins-v3.sh-l();
|
|
219
219
|
}
|
|
220
220
|
}
|
|
221
221
|
&-portrait {
|
|
222
222
|
@media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
|
|
223
|
-
@include core-typography-mixins-v3.sh-l
|
|
223
|
+
@include core-typography-mixins-v3.sh-l();
|
|
224
224
|
}
|
|
225
225
|
}
|
|
226
226
|
&-desktop {
|