@reuters-graphics/graphics-components 1.0.9--canary.96fcff1.0 → 1.0.10
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.
|
@@ -4,7 +4,7 @@ declare const __propDef: {
|
|
|
4
4
|
/**
|
|
5
5
|
* The unique placement name from FreeStar dashboard.
|
|
6
6
|
* @required
|
|
7
|
-
*/ placementName?: "
|
|
7
|
+
*/ placementName?: "reuters_desktop_native_1" | "reuters_mobile_mpu_1" | "reuters_sponsorlogo" | "reuters_desktop_canvas";
|
|
8
8
|
/**
|
|
9
9
|
* The unique slot Id from FreeStar dashboard.
|
|
10
10
|
*/ dataFreestarAd?: string;
|
|
@@ -11,7 +11,7 @@ export let dataFreestarAd = '__970x250';
|
|
|
11
11
|
/** Add an ID to target with SCSS. */
|
|
12
12
|
export let id = '';
|
|
13
13
|
/** Add a class to target with SCSS. */
|
|
14
|
-
let cls = '';
|
|
14
|
+
let cls = 'my-12';
|
|
15
15
|
export { cls as class };
|
|
16
16
|
import { onMount } from 'svelte';
|
|
17
17
|
import Block from '../Block/Block.svelte';
|
|
@@ -21,9 +21,9 @@ const random4 = () => Math.floor((1 + Math.random()) * 0x10000)
|
|
|
21
21
|
const randomAdId = 'ad-' + random4() + random4();
|
|
22
22
|
const getAdType = (placementName) => {
|
|
23
23
|
switch (placementName) {
|
|
24
|
-
case 'reuters_desktop_leaderboard_atf':
|
|
25
|
-
case 'reuters_mobile_leaderboard':
|
|
26
|
-
|
|
24
|
+
// case 'reuters_desktop_leaderboard_atf':
|
|
25
|
+
// case 'reuters_mobile_leaderboard':
|
|
26
|
+
// return 'leaderboard';
|
|
27
27
|
case 'reuters_sponsorlogo':
|
|
28
28
|
return 'Sponsorlogo';
|
|
29
29
|
case 'reuters_mobile_mpu_1':
|
|
@@ -48,13 +48,52 @@ onMount(() => {
|
|
|
48
48
|
|
|
49
49
|
<!-- @component `AdSlot` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-AdSlot--default) -->
|
|
50
50
|
<Block id="{id}" class="freestar-adslot {cls}">
|
|
51
|
-
<div
|
|
51
|
+
<div class="ad-block">
|
|
52
|
+
<div class="ad-label">Advertisement · Scroll to continue</div>
|
|
53
|
+
<div class="ad-container">
|
|
54
|
+
<div class="ad-slot__inner">
|
|
55
|
+
<div>
|
|
56
|
+
<div
|
|
57
|
+
data-freestar-ad="{dataFreestarAd || null}"
|
|
58
|
+
id="{randomAdId}"
|
|
59
|
+
></div>
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
52
64
|
</Block>
|
|
53
65
|
|
|
54
|
-
<style>
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
66
|
+
<style>div.ad-block {
|
|
67
|
+
border-bottom: 1px solid var(--theme-colour-brand-rules);
|
|
68
|
+
border-top: 1px solid var(--theme-colour-brand-rules);
|
|
69
|
+
}
|
|
70
|
+
div.ad-block div.ad-label {
|
|
71
|
+
font-family: Knowledge, "Source Sans Pro", Arial, Helvetica, sans-serif;
|
|
72
|
+
font-size: 14px;
|
|
73
|
+
margin: 6px 0;
|
|
74
|
+
line-height: 1.333;
|
|
75
|
+
color: var(--theme-colour-text-secondary);
|
|
76
|
+
width: 100%;
|
|
77
|
+
text-align: center;
|
|
78
|
+
}
|
|
79
|
+
div.ad-block div.ad-container {
|
|
80
|
+
display: flex;
|
|
81
|
+
flex-direction: column;
|
|
82
|
+
justify-content: center;
|
|
83
|
+
align-items: center;
|
|
84
|
+
min-height: 415px;
|
|
85
|
+
}
|
|
86
|
+
@media (max-width: 767.9px) {
|
|
87
|
+
div.ad-block div.ad-container {
|
|
88
|
+
min-height: 320px;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
div.ad-block div.ad-container div.ad-slot__inner {
|
|
92
|
+
margin: auto 0;
|
|
93
|
+
width: 100%;
|
|
94
|
+
max-width: 100%;
|
|
95
|
+
flex: unset;
|
|
96
|
+
}
|
|
97
|
+
div.ad-block div.ad-container div.ad-slot__inner > div {
|
|
98
|
+
display: block;
|
|
99
|
+
}</style>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@reuters-graphics/graphics-components",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.10",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"private": false,
|
|
6
6
|
"homepage": "https://reuters-graphics.github.io/graphics-components",
|
|
@@ -362,7 +362,11 @@
|
|
|
362
362
|
"./scss/tokens/variables/block": "./dist/scss/tokens/variables/_block.scss",
|
|
363
363
|
"./scss/tokens/variables/main": "./dist/scss/tokens/variables/_main.scss",
|
|
364
364
|
"./scss/tokens/variables/theme": "./dist/scss/tokens/variables/_theme.scss",
|
|
365
|
-
".":
|
|
365
|
+
".": {
|
|
366
|
+
"types": "./dist/@types/index.d.ts",
|
|
367
|
+
"svelte": "./dist/index.js",
|
|
368
|
+
"default": "./dist/index.js"
|
|
369
|
+
}
|
|
366
370
|
},
|
|
367
371
|
"svelte": "./dist/index.js",
|
|
368
372
|
"bugs": {
|