@postnord/pn-marketweb-components 2.9.0 → 2.9.2
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/cjs/loader.cjs.js +1 -1
- package/cjs/pn-cta-block.cjs.entry.js +7 -2
- package/cjs/pn-market-web-components.cjs.js +1 -1
- package/cjs/pn-media-block.cjs.entry.js +7 -39
- package/cjs/pn-multi-row-connected-dropdown-row.cjs.entry.js +2 -0
- package/cjs/pn-play-on-scroll.cjs.entry.js +3 -2
- package/cjs/pn-usp-promoter.cjs.entry.js +9 -4
- package/collection/components/animation/pn-play-on-scroll/pn-play-on-scroll.js +3 -2
- package/collection/components/animation/pn-play-on-scroll/pn-play-on-scroll.stories.js +6 -86
- package/collection/components/cta/pn-cta-block/cta-block.stories.js +90 -21
- package/collection/components/cta/pn-cta-block/pn-cta-block.css +35 -20
- package/collection/components/cta/pn-cta-block/pn-cta-block.js +6 -1
- package/collection/components/input/pn-multi-row-connected-dropdown/pn-multi-row-connected-dropdown-row.js +2 -0
- package/collection/components/media/pn-media-block/media-block.stories.js +6 -15
- package/collection/components/media/pn-media-block/pn-media-block.css +20 -2
- package/collection/components/media/pn-media-block/pn-media-block.js +24 -57
- package/collection/components/widgets/pn-usp-promoter/pn-usp-promoter.css +12 -3
- package/collection/components/widgets/pn-usp-promoter/pn-usp-promoter.js +8 -3
- package/collection/components/widgets/pn-usp-promoter/usp-promoter.stories.js +13 -13
- package/collection/globals/storybookGlobals.js +10 -0
- package/components/pn-cta-block.js +7 -2
- package/components/pn-media-block.js +8 -40
- package/components/pn-multi-row-connected-dropdown-row2.js +2 -0
- package/components/pn-play-on-scroll2.js +3 -2
- package/components/pn-usp-promoter.js +9 -4
- package/esm/loader.js +1 -1
- package/esm/pn-cta-block.entry.js +7 -2
- package/esm/pn-market-web-components.js +1 -1
- package/esm/pn-media-block.entry.js +7 -39
- package/esm/pn-multi-row-connected-dropdown-row.entry.js +2 -0
- package/esm/pn-play-on-scroll.entry.js +3 -2
- package/esm/pn-usp-promoter.entry.js +9 -4
- package/esm-es5/loader.js +1 -1
- package/esm-es5/pn-cta-block.entry.js +1 -1
- package/esm-es5/pn-market-web-components.js +1 -1
- package/esm-es5/pn-media-block.entry.js +1 -1
- package/esm-es5/pn-multi-row-connected-dropdown-row.entry.js +1 -1
- package/esm-es5/pn-play-on-scroll.entry.js +1 -1
- package/esm-es5/pn-usp-promoter.entry.js +1 -1
- package/package.json +1 -1
- package/pn-market-web-components/p-0c50ded4.entry.js +1 -0
- package/pn-market-web-components/p-4bcf66cb.entry.js +1 -0
- package/pn-market-web-components/p-4f6ebbda.system.entry.js +1 -0
- package/pn-market-web-components/p-6f853c29.system.js +1 -1
- package/pn-market-web-components/p-928ced33.system.entry.js +1 -0
- package/pn-market-web-components/p-9f6c833e.entry.js +1 -0
- package/pn-market-web-components/p-aadb8ed1.system.entry.js +1 -0
- package/pn-market-web-components/p-b0055a00.entry.js +1 -0
- package/pn-market-web-components/p-bc27295a.system.entry.js +1 -0
- package/pn-market-web-components/p-dc136523.entry.js +1 -0
- package/pn-market-web-components/p-ec116d47.system.entry.js +1 -0
- package/pn-market-web-components/pn-market-web-components.esm.js +1 -1
- package/types/components/animation/pn-play-on-scroll/pn-play-on-scroll.d.ts +1 -0
- package/types/components/media/pn-media-block/pn-media-block.d.ts +1 -1
- package/types/components/widgets/pn-proxio-pricegroup/pn-proxio-pricegroup.d.ts +1 -1
- package/types/components.d.ts +2 -2
- package/types/globals/storybookGlobals.d.ts +10 -0
- package/pn-market-web-components/p-395105d0.system.entry.js +0 -1
- package/pn-market-web-components/p-42e969c9.system.entry.js +0 -1
- package/pn-market-web-components/p-5033c1d0.system.entry.js +0 -1
- package/pn-market-web-components/p-8c41af0e.entry.js +0 -1
- package/pn-market-web-components/p-a2ed2bf6.entry.js +0 -1
- package/pn-market-web-components/p-c1738e39.entry.js +0 -1
- package/pn-market-web-components/p-dcf7b3fc.system.entry.js +0 -1
- package/pn-market-web-components/p-df1142cc.entry.js +0 -1
- package/pn-market-web-components/p-e3b61a83.entry.js +0 -1
- package/pn-market-web-components/p-e4d68a16.system.entry.js +0 -1
|
@@ -12,7 +12,7 @@ const pnPlayOnScrollCss = "pn-play-on-scroll pn-scroll [slot=scroll-affected]{po
|
|
|
12
12
|
*/
|
|
13
13
|
const defaultObserverOptions = {
|
|
14
14
|
root: null,
|
|
15
|
-
threshold:
|
|
15
|
+
threshold: 1,
|
|
16
16
|
rootMargin: '0px 0px 0px 0px',
|
|
17
17
|
};
|
|
18
18
|
const onIntersecting = (video, isManualPaused, togglePaused) => {
|
|
@@ -62,9 +62,10 @@ const PnPlayOnScroll = class {
|
|
|
62
62
|
componentDidLoad() {
|
|
63
63
|
this.video = document.getElementById(this.videoId);
|
|
64
64
|
this.video.addEventListener('click', this.handlePlayPauseClicked);
|
|
65
|
+
this.localObserverOptions = this.observerOptions;
|
|
65
66
|
}
|
|
66
67
|
render() {
|
|
67
|
-
return (index.h(index.Host, null, index.h("pn-scroll", { intersectFunc: () => onIntersecting(this.video, this.isManuallyPaused, this.togglePaused), notIntersectFunc: () => onNotIntersecting(this.video, this.togglePaused), shouldLoop: true, behaviourClasses: 'some-behaviour-class', observerOptions: this.
|
|
68
|
+
return (index.h(index.Host, null, index.h("pn-scroll", { intersectFunc: () => onIntersecting(this.video, this.isManuallyPaused, this.togglePaused), notIntersectFunc: () => onNotIntersecting(this.video, this.togglePaused), shouldLoop: true, behaviourClasses: 'some-behaviour-class', observerOptions: this.localObserverOptions }, index.h("div", { slot: "scroll-affected" }, index.h("video", { playsinline: true, muted: true, autoPlay: true, id: `${this.videoId}` }, index.h("source", { src: this.videoSrc, type: "video/mp4" })), index.h("pn-video-overlay", { showOverlay: this.showOverlay, isPaused: this.isManuallyPaused || this.isPaused, onPlayPauseClicked: this.handlePlayPauseClicked })))));
|
|
68
69
|
}
|
|
69
70
|
get hostElement() { return index.getElement(this); }
|
|
70
71
|
};
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-02a77089.js');
|
|
6
6
|
|
|
7
|
-
const pnUspPromoterCss = "pn-usp-promoter{width:80%}pn-usp-promoter .usp-promoter{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:3rem 0.8rem}pn-usp-promoter .usp-promoter--full-width{overflow:hidden;margin:0 calc(-50vw + 50%)}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter--full-width{padding:8rem 4rem}}pn-usp-promoter .usp-promoter__content{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content{-ms-flex-align:center;align-items:center;text-align:left;-ms-flex-pack:center;justify-content:center}}pn-usp-promoter .usp-promoter__content-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content-wrapper{-ms-flex-align:start;align-items:flex-start;padding-left:4rem}}pn-usp-promoter .usp-promoter__content-heading{margin-bottom:0.8rem}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content-heading{font-size:4.2rem
|
|
7
|
+
const pnUspPromoterCss = "pn-usp-promoter{width:80%}pn-usp-promoter .usp-promoter{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:3rem 0.8rem}pn-usp-promoter .usp-promoter--full-width{overflow:hidden;margin:0 calc(-50vw + 50%)}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter--full-width{padding:8rem 4rem}}pn-usp-promoter .usp-promoter__content{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;width:100%;max-width:114rem}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content{-ms-flex-align:center;align-items:center;text-align:left;-ms-flex-pack:center;justify-content:center}}pn-usp-promoter .usp-promoter__content-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;max-width:75rem}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content-wrapper{-ms-flex-align:start;align-items:flex-start;padding-left:4rem}}pn-usp-promoter .usp-promoter__content-heading{margin-bottom:0.8rem}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content-heading{font-size:4.2rem}}@media screen and (min-width: 1140px){pn-usp-promoter .usp-promoter__content-heading{font-size:4.8rem}}@media screen and (min-width: 1440px){pn-usp-promoter .usp-promoter__content-heading{font-size:5.6rem}}pn-usp-promoter .usp-promoter__no-margin-bottom{margin-bottom:0 !important}pn-usp-promoter .usp-promoter__content-text{font-size:1.6rem;max-width:47rem;margin-bottom:2.6rem}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content-text{text-wrap:balance}}@media screen and (min-width: 1140px){pn-usp-promoter .usp-promoter__content-text{font-size:1.8rem;max-width:60rem}}@media screen and (min-width: 1440px){pn-usp-promoter .usp-promoter__content-text{font-size:2rem;max-width:70rem}}pn-usp-promoter [slot=app-store]{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;margin-bottom:2.6rem;gap:1rem}pn-usp-promoter [slot=app-store]>a{background-color:black;border:0.1rem solid #A6A6A6;border-radius:0.8rem;color:#FFF;display:inline-block;line-height:0;text-decoration:none;-webkit-transition:background-color 0.2s ease-in-out;transition:background-color 0.2s ease-in-out}pn-usp-promoter [slot=app-store]>a::after{margin-left:0 !important;margin-right:0.5rem;top:0.2rem;position:relative}pn-usp-promoter [slot=app-store]>a:hover{background-color:#0D234B}pn-usp-promoter [slot=app-store]>a:focus{background-color:#0D234B;-webkit-box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #0D234B;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #0D234B}pn-usp-promoter [slot=app-store]>a:focus-visible{outline:none}pn-usp-promoter [slot=usp-buttons] pn-button{margin-bottom:1.6rem}pn-usp-promoter [slot=usp-buttons]>a{color:#005D92;font-weight:500;font-size:1.6rem;padding:0.1rem;text-decoration:none}pn-usp-promoter [slot=usp-buttons]>a pn-icon svg{-webkit-transition:-webkit-transform 0.3s ease-in-out;transition:-webkit-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out}pn-usp-promoter [slot=usp-buttons]>a pn-icon svg path{fill:#005D92}pn-usp-promoter [slot=usp-buttons]>a:hover pn-icon svg{-webkit-transition:-webkit-transform 0.3s ease-in-out;transition:-webkit-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;-webkit-transform:translateX(0.3rem);transform:translateX(0.3rem)}pn-usp-promoter [slot=usp-buttons]>a:hover pn-icon svg path{fill:#005D92}pn-usp-promoter [slot=app-store],pn-usp-promoter [slot=usp-buttons]{-ms-flex-direction:column;flex-direction:column}@media screen and (min-width: 768px){pn-usp-promoter [slot=app-store],pn-usp-promoter [slot=usp-buttons]{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;gap:1.6rem}}pn-usp-promoter [slot=illustration]{max-width:25%;position:relative;left:-1.6rem}pn-usp-promoter [slot=illustration] pn-scroll{position:-webkit-sticky;position:sticky;top:0}@media screen and (min-width: 768px){pn-usp-promoter [slot=illustration]{display:block}}pn-usp-promoter [slot=illustration] picture img{max-width:100%}@media screen and (min-width: 1140px){pn-usp-promoter [slot=illustration] picture img{width:32rem}}@media screen and (min-width: 1440px){pn-usp-promoter [slot=illustration] picture img{width:33.6rem}}pn-usp-promoter .usp-promoter__heading-extension{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}pn-usp-promoter .usp-promoter--right-align .usp-promoter__content{-ms-flex-direction:row-reverse;flex-direction:row-reverse;text-align:right}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter--right-align .usp-promoter__content{-ms-flex-align:center;align-items:center}}pn-usp-promoter .usp-promoter--right-align .usp-promoter__content-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:end;align-items:flex-end;padding-left:0}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter--right-align .usp-promoter__content-wrapper{padding-right:4rem}}pn-usp-promoter .usp-promoter--right-align [slot=app-store],pn-usp-promoter .usp-promoter--right-align [slot=usp-buttons]{-ms-flex-align:end;align-items:flex-end}pn-usp-promoter .usp-promoter--right-align [slot=illustration]{left:1.6rem}@media screen and (max-width: 768px){pn-usp-promoter .usp-promoter--hide-image-small-screen [slot=illustration] picture img{display:none}pn-usp-promoter .usp-promoter--hide-image-small-screen .usp-promoter__content{text-align:center}pn-usp-promoter .usp-promoter--hide-image-small-screen .usp-promoter__content-wrapper{-ms-flex-align:center;align-items:center;padding-right:0}pn-usp-promoter .usp-promoter--hide-image-small-screen [slot=app-store],pn-usp-promoter .usp-promoter--hide-image-small-screen [slot=usp-buttons]{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center}}";
|
|
8
8
|
|
|
9
9
|
const PnUspPromoter = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -22,12 +22,17 @@ const PnUspPromoter = class {
|
|
|
22
22
|
if (this.hideMobileImage || slot == null) {
|
|
23
23
|
return "usp-promoter--hide-image-small-screen";
|
|
24
24
|
}
|
|
25
|
+
return "";
|
|
25
26
|
}
|
|
26
27
|
render() {
|
|
27
|
-
const
|
|
28
|
-
const
|
|
28
|
+
const { fullWidth, rightAlign } = this;
|
|
29
|
+
const classes = [
|
|
30
|
+
'usp-promoter',
|
|
31
|
+
fullWidth ? "usp-promoter--full-width" : "",
|
|
32
|
+
rightAlign ? "usp-promoter--right-align" : "",
|
|
33
|
+
].join(' ');
|
|
29
34
|
const hasHeadingExtension = this.headingExtension ? "usp-promoter__heading-extension" : "";
|
|
30
|
-
return (index.h(index.Host, null, index.h("div", { class: `
|
|
35
|
+
return (index.h(index.Host, null, index.h("div", { class: ` ${classes} ${this.centerMobileContent()}`, style: { 'background': `${this.backgroundGradient}` } }, index.h("div", { class: "usp-promoter__content" }, index.h("slot", { name: "illustration" }), index.h("div", { class: "usp-promoter__content-wrapper" }, index.h("h2", { class: `usp-promoter__content-heading ${hasHeadingExtension}` }, index.h("span", null, this.heading), (this.headingExtension) ? index.h("span", null, this.headingExtension) : null), index.h("p", { class: "usp-promoter__content-text" }, this.bodyText), index.h("slot", { name: "app-store" }), index.h("slot", { name: "usp-buttons" }))))));
|
|
31
36
|
}
|
|
32
37
|
get hostElement() { return index.getElement(this); }
|
|
33
38
|
};
|
|
@@ -5,7 +5,7 @@ import { h, Host } from '@stencil/core';
|
|
|
5
5
|
*/
|
|
6
6
|
const defaultObserverOptions = {
|
|
7
7
|
root: null,
|
|
8
|
-
threshold:
|
|
8
|
+
threshold: 1,
|
|
9
9
|
rootMargin: '0px 0px 0px 0px',
|
|
10
10
|
};
|
|
11
11
|
const onIntersecting = (video, isManualPaused, togglePaused) => {
|
|
@@ -54,9 +54,10 @@ export class PnPlayOnScroll {
|
|
|
54
54
|
componentDidLoad() {
|
|
55
55
|
this.video = document.getElementById(this.videoId);
|
|
56
56
|
this.video.addEventListener('click', this.handlePlayPauseClicked);
|
|
57
|
+
this.localObserverOptions = this.observerOptions;
|
|
57
58
|
}
|
|
58
59
|
render() {
|
|
59
|
-
return (h(Host, null, h("pn-scroll", { intersectFunc: () => onIntersecting(this.video, this.isManuallyPaused, this.togglePaused), notIntersectFunc: () => onNotIntersecting(this.video, this.togglePaused), shouldLoop: true, behaviourClasses: 'some-behaviour-class', observerOptions: this.
|
|
60
|
+
return (h(Host, null, h("pn-scroll", { intersectFunc: () => onIntersecting(this.video, this.isManuallyPaused, this.togglePaused), notIntersectFunc: () => onNotIntersecting(this.video, this.togglePaused), shouldLoop: true, behaviourClasses: 'some-behaviour-class', observerOptions: this.localObserverOptions }, h("div", { slot: "scroll-affected" }, h("video", { playsinline: true, muted: true, autoPlay: true, id: `${this.videoId}` }, h("source", { src: this.videoSrc, type: "video/mp4" })), h("pn-video-overlay", { showOverlay: this.showOverlay, isPaused: this.isManuallyPaused || this.isPaused, onPlayPauseClicked: this.handlePlayPauseClicked })))));
|
|
60
61
|
}
|
|
61
62
|
static get is() { return "pn-play-on-scroll"; }
|
|
62
63
|
static get originalStyleUrls() {
|
|
@@ -10,93 +10,13 @@ export default {
|
|
|
10
10
|
|
|
11
11
|
const PlayOnScrollTemplate = args => {
|
|
12
12
|
return `
|
|
13
|
-
<
|
|
14
|
-
<
|
|
15
|
-
<
|
|
16
|
-
<br>
|
|
17
|
-
<br>
|
|
18
|
-
<br>
|
|
19
|
-
<br>
|
|
20
|
-
<br>
|
|
21
|
-
<br>
|
|
22
|
-
<br>
|
|
23
|
-
<br>
|
|
24
|
-
<br>
|
|
25
|
-
<br>
|
|
26
|
-
<br>
|
|
27
|
-
<br>
|
|
28
|
-
<br>
|
|
29
|
-
<br>
|
|
30
|
-
<br>
|
|
31
|
-
<br>
|
|
32
|
-
<br>
|
|
33
|
-
<br>
|
|
34
|
-
<br>
|
|
35
|
-
<br>
|
|
36
|
-
<br>
|
|
37
|
-
<br>
|
|
38
|
-
<br>
|
|
39
|
-
<br>
|
|
40
|
-
<br>
|
|
41
|
-
<br>
|
|
42
|
-
<br>
|
|
43
|
-
<br>
|
|
44
|
-
<br>
|
|
45
|
-
<br>
|
|
46
|
-
<br>
|
|
47
|
-
<br>
|
|
48
|
-
<br>
|
|
49
|
-
<br>
|
|
50
|
-
<br>
|
|
51
|
-
<br>
|
|
52
|
-
<br>
|
|
53
|
-
<br>
|
|
54
|
-
<br>
|
|
55
|
-
<br>
|
|
56
|
-
<br>
|
|
57
|
-
<br>
|
|
58
|
-
<br>
|
|
59
|
-
<br>
|
|
60
|
-
<br>
|
|
61
|
-
<br>
|
|
62
|
-
<br>
|
|
63
|
-
<br>
|
|
64
|
-
<br>
|
|
65
|
-
<br>
|
|
66
|
-
<br>
|
|
67
|
-
<br>
|
|
68
|
-
<br>
|
|
69
|
-
<br>
|
|
70
|
-
<br>
|
|
71
|
-
<br>
|
|
72
|
-
<br>
|
|
73
|
-
<br>
|
|
74
|
-
<br>
|
|
75
|
-
<br>
|
|
76
|
-
<br>
|
|
77
|
-
<br>
|
|
78
|
-
<br>
|
|
79
|
-
<br>
|
|
80
|
-
<br>
|
|
81
|
-
<br>
|
|
82
|
-
<br>
|
|
83
|
-
<br>
|
|
84
|
-
<pn-play-on-scroll></pn-play-on-scroll>
|
|
85
|
-
<br>
|
|
86
|
-
<br>
|
|
87
|
-
<br>
|
|
88
|
-
<br>
|
|
89
|
-
<br>
|
|
90
|
-
<br>
|
|
91
|
-
<br>
|
|
92
|
-
<br>
|
|
93
|
-
<br>
|
|
94
|
-
<br>
|
|
95
|
-
<br>
|
|
96
|
-
<br>
|
|
97
|
-
<br>
|
|
13
|
+
<div style="height: 140rem;"></div>
|
|
14
|
+
<pn-play-on-scroll video-src="${args.videoSrc}"></pn-play-on-scroll>
|
|
15
|
+
<div style="height: 140rem;"></div>
|
|
98
16
|
`;
|
|
99
17
|
};
|
|
100
18
|
|
|
101
19
|
export const PlayOnScroll = PlayOnScrollTemplate.bind({});
|
|
102
|
-
PlayOnScroll.args = {
|
|
20
|
+
PlayOnScroll.args = {
|
|
21
|
+
videoSrc: "https://com-inte.postnord.com/contentassets/1d0fd381dbde41f69f64df946b3e1e34/postnord-jakaa-turussa-kaikki-paketit-lahibokseihin-paastottomasti-sahkolla.mp4"
|
|
22
|
+
};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import readme from "./readme.md";
|
|
2
|
+
import {imageSvgs} from "../../../globals/storybookGlobals";
|
|
2
3
|
|
|
3
4
|
export default {
|
|
4
5
|
title: "CTA/Cta block",
|
|
@@ -7,7 +8,7 @@ export default {
|
|
|
7
8
|
},
|
|
8
9
|
argTypes: {
|
|
9
10
|
pnBackgroundColor: {
|
|
10
|
-
options: ['blue25', 'coral50', 'gray25', 'green25'],
|
|
11
|
+
options: ['blue25', 'coral50', 'gray25', 'green25', 'transparent'],
|
|
11
12
|
control: { type: 'select' },
|
|
12
13
|
},
|
|
13
14
|
}
|
|
@@ -28,10 +29,10 @@ const Template = ({ ...args }) => {
|
|
|
28
29
|
content-top="${args.contentTop}">
|
|
29
30
|
<div slot="illustration">
|
|
30
31
|
<picture>
|
|
31
|
-
<img src="
|
|
32
|
+
<img src="${imageSvgs.success}" />
|
|
32
33
|
</picture>
|
|
33
34
|
</div>
|
|
34
|
-
<div slot="cta-
|
|
35
|
+
<div slot="cta-buttons">
|
|
35
36
|
<pn-button class="cta-block__button " href=${args.buttonUrl}>${args.buttonText}</pn-button>
|
|
36
37
|
<a href=${args.linkUrl}>${args.linkText} <pn-icon symbol="arrow-right"> </pn-icon></a>
|
|
37
38
|
</div>
|
|
@@ -49,7 +50,7 @@ Primary.args = {
|
|
|
49
50
|
buttonUrl: 'http://www.google.se',
|
|
50
51
|
linkText: 'Information',
|
|
51
52
|
linkUrl: 'http://www.bing.com',
|
|
52
|
-
pnBackgroundColor:
|
|
53
|
+
pnBackgroundColor: "blue25",
|
|
53
54
|
isLarge: false,
|
|
54
55
|
isCentered: false,
|
|
55
56
|
isSmall: false,
|
|
@@ -68,10 +69,10 @@ const LinkOnlyTemplate = ({ ...args }) => {
|
|
|
68
69
|
content-top="${args.contentTop}">
|
|
69
70
|
<div slot="illustration">
|
|
70
71
|
<picture>
|
|
71
|
-
<img src="
|
|
72
|
+
<img src="${imageSvgs.success}" />
|
|
72
73
|
</picture>
|
|
73
74
|
</div>
|
|
74
|
-
<div slot="cta-
|
|
75
|
+
<div slot="cta-buttons">
|
|
75
76
|
<pn-button class="cta-block__button " href=${args.buttonUrl}>${args.buttonText}</pn-button>
|
|
76
77
|
<a href=${args.linkUrl}>${args.linkText} <pn-icon symbol="arrow-right"> </pn-icon></a>
|
|
77
78
|
</div>
|
|
@@ -88,7 +89,7 @@ LinkOnly.args = {
|
|
|
88
89
|
buttonUrl: '',
|
|
89
90
|
linkText: 'Information',
|
|
90
91
|
linkUrl: 'http://www.bing.com',
|
|
91
|
-
pnBackgroundColor:
|
|
92
|
+
pnBackgroundColor: 'gray25',
|
|
92
93
|
isLarge: true,
|
|
93
94
|
isCentered: false,
|
|
94
95
|
isSmall: false,
|
|
@@ -108,12 +109,12 @@ const TwoButtonLayoutTemplate = ({ ...args }) => {
|
|
|
108
109
|
content-top="${args.contentTop}">
|
|
109
110
|
<div slot="illustration">
|
|
110
111
|
<picture>
|
|
111
|
-
<img src="
|
|
112
|
+
<img src="${imageSvgs.success}" />
|
|
112
113
|
</picture>
|
|
113
114
|
</div>
|
|
114
|
-
<div slot="cta-
|
|
115
|
+
<div slot="cta-buttons">
|
|
115
116
|
<pn-button class="cta-block__button " href=${args.buttonUrl}>${args.buttonText}</pn-button>
|
|
116
|
-
<pn-button appearance="light" class="cta-block__button " href=${args.buttonUrl}
|
|
117
|
+
<pn-button appearance="light" class="cta-block__button " href=${args.buttonUrl}>Second button longer</pn-button>
|
|
117
118
|
</div>
|
|
118
119
|
</pn-cta-block>
|
|
119
120
|
</div>
|
|
@@ -128,13 +129,13 @@ TwoButtonLayout.args = {
|
|
|
128
129
|
buttonUrl: 'http://www.google.se',
|
|
129
130
|
linkText: 'Information',
|
|
130
131
|
linkUrl: 'http://www.bing.com',
|
|
131
|
-
pnBackgroundColor:
|
|
132
|
+
pnBackgroundColor: 'coral50',
|
|
132
133
|
isLarge: true,
|
|
133
134
|
isCentered: false,
|
|
134
135
|
isSmall: false,
|
|
135
136
|
};
|
|
136
137
|
|
|
137
|
-
const
|
|
138
|
+
const TwoLinksLayoutTemplate = ({ ...args }) => {
|
|
138
139
|
return `
|
|
139
140
|
<div style="max-width: 1410px">
|
|
140
141
|
<pn-cta-block
|
|
@@ -147,10 +148,44 @@ const NoImageTemplate = ({ ...args }) => {
|
|
|
147
148
|
content-top="${args.contentTop}">
|
|
148
149
|
<div slot="illustration">
|
|
149
150
|
<picture>
|
|
150
|
-
<img src="
|
|
151
|
+
<img src="${imageSvgs.success}" />
|
|
151
152
|
</picture>
|
|
152
153
|
</div>
|
|
153
|
-
<div slot="cta-
|
|
154
|
+
<div slot="cta-buttons">
|
|
155
|
+
<a href=${args.linkUrl}>${args.linkText} <pn-icon symbol="arrow-right"> </pn-icon></a>
|
|
156
|
+
<a href=${args.linkUrl}>Second link longer</a>
|
|
157
|
+
</div>
|
|
158
|
+
</pn-cta-block>
|
|
159
|
+
</div>
|
|
160
|
+
`;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
export const TwoLinksLayout = TwoLinksLayoutTemplate.bind({});
|
|
164
|
+
TwoLinksLayout.args = {
|
|
165
|
+
heading: 'PostNord erbjuder mycket',
|
|
166
|
+
bodyText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor mauris. Integer sed nulla id justo faucibus vestibulum consequat et ligula. Vestibulum varius quam in porttitor pellentesque.',
|
|
167
|
+
buttonText: "Våra tjänster",
|
|
168
|
+
buttonUrl: 'http://www.google.se',
|
|
169
|
+
linkText: 'Information',
|
|
170
|
+
linkUrl: 'http://www.bing.com',
|
|
171
|
+
pnBackgroundColor: 'coral50',
|
|
172
|
+
isLarge: true,
|
|
173
|
+
isCentered: false,
|
|
174
|
+
isSmall: false,
|
|
175
|
+
};
|
|
176
|
+
|
|
177
|
+
const NoImageTemplate = ({ ...args }) => {
|
|
178
|
+
return `
|
|
179
|
+
<div style="max-width: 1410px">
|
|
180
|
+
<pn-cta-block
|
|
181
|
+
is-centered="${args.isCentered}"
|
|
182
|
+
is-large="${args.isLarge}"
|
|
183
|
+
is-small="${args.isSmall}"
|
|
184
|
+
pn-background-color="${args.pnBackgroundColor}"
|
|
185
|
+
heading="${args.heading}"
|
|
186
|
+
body-text="${args.bodyText}"
|
|
187
|
+
content-top="${args.contentTop}">
|
|
188
|
+
<div slot="cta-buttons">
|
|
154
189
|
<pn-button class="cta-block__button " href=${args.buttonUrl}>${args.buttonText}</pn-button>
|
|
155
190
|
<a href=${args.linkUrl}>${args.linkText} <pn-icon symbol="arrow-right"> </pn-icon></a>
|
|
156
191
|
</div>
|
|
@@ -167,7 +202,7 @@ NoImage.args = {
|
|
|
167
202
|
buttonUrl: 'http://www.google.se',
|
|
168
203
|
linkText: 'Information',
|
|
169
204
|
linkUrl: '',
|
|
170
|
-
pnBackgroundColor:
|
|
205
|
+
pnBackgroundColor: 'gray25',
|
|
171
206
|
isLarge: true,
|
|
172
207
|
isCentered: false,
|
|
173
208
|
isSmall: false,
|
|
@@ -186,10 +221,10 @@ const LargeTemplate = ({ ...args }) => {
|
|
|
186
221
|
content-top="${args.contentTop}">
|
|
187
222
|
<div slot="illustration">
|
|
188
223
|
<picture>
|
|
189
|
-
<img src="
|
|
224
|
+
<img src="${imageSvgs.success}" />
|
|
190
225
|
</picture>
|
|
191
226
|
</div>
|
|
192
|
-
<div slot="cta-
|
|
227
|
+
<div slot="cta-buttons">
|
|
193
228
|
<pn-button class="cta-block__button " href=${args.buttonUrl}>${args.buttonText}</pn-button>
|
|
194
229
|
<a href=${args.linkUrl}>${args.linkText} <pn-icon symbol="arrow-right"> </pn-icon></a>
|
|
195
230
|
</div>
|
|
@@ -206,7 +241,7 @@ Large.args = {
|
|
|
206
241
|
buttonUrl: 'http://www.google.se',
|
|
207
242
|
linkText: 'Information',
|
|
208
243
|
linkUrl: 'http://www.bing.com',
|
|
209
|
-
pnBackgroundColor:
|
|
244
|
+
pnBackgroundColor: 'blue25',
|
|
210
245
|
isLarge: true,
|
|
211
246
|
isCentered: false,
|
|
212
247
|
isSmall: false,
|
|
@@ -225,10 +260,10 @@ const LargeCenteredTemplate = ({ ...args }) => {
|
|
|
225
260
|
content-top="${args.contentTop}">
|
|
226
261
|
<div slot="illustration">
|
|
227
262
|
<picture>
|
|
228
|
-
<img src="
|
|
263
|
+
<img src="${imageSvgs.success}" />
|
|
229
264
|
</picture>
|
|
230
265
|
</div>
|
|
231
|
-
<div slot="cta-
|
|
266
|
+
<div slot="cta-buttons">
|
|
232
267
|
<pn-button class="cta-block__button " href=${args.buttonUrl}>${args.buttonText}</pn-button>
|
|
233
268
|
<a href=${args.linkUrl}>${args.linkText} <pn-icon symbol="arrow-right"> </pn-icon></a>
|
|
234
269
|
</div>
|
|
@@ -245,7 +280,41 @@ LargeCentered.args = {
|
|
|
245
280
|
buttonUrl: 'http://www.google.se',
|
|
246
281
|
linkText: 'Information',
|
|
247
282
|
linkUrl: 'http://www.bing.com',
|
|
248
|
-
pnBackgroundColor:
|
|
283
|
+
pnBackgroundColor: 'blue25',
|
|
284
|
+
isLarge: true,
|
|
285
|
+
isCentered: true,
|
|
286
|
+
isSmall: false,
|
|
287
|
+
};
|
|
288
|
+
|
|
289
|
+
const EmptyTemplate = ({ ...args }) => {
|
|
290
|
+
return `
|
|
291
|
+
<div style="max-width: 1410px">
|
|
292
|
+
<pn-cta-block
|
|
293
|
+
is-centered="${args.isCentered}"
|
|
294
|
+
is-large="${args.isLarge}"
|
|
295
|
+
is-small="${args.isSmall}"
|
|
296
|
+
pn-background-color="${args.pnBackgroundColor}"
|
|
297
|
+
heading=""
|
|
298
|
+
body-text=""
|
|
299
|
+
content-top="${args.contentTop}">
|
|
300
|
+
<div slot="cta-buttons">
|
|
301
|
+
<pn-button class="cta-block__button " href=${args.buttonUrl}>${args.buttonText}</pn-button>
|
|
302
|
+
<a href=${args.linkUrl}>${args.linkText} <pn-icon symbol="arrow-right"> </pn-icon></a>
|
|
303
|
+
</div>
|
|
304
|
+
</pn-cta-block>
|
|
305
|
+
</div>
|
|
306
|
+
`;
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
export const Empty = EmptyTemplate.bind({});
|
|
310
|
+
Empty.args = {
|
|
311
|
+
heading: 'PostNord erbjuder mycket',
|
|
312
|
+
bodyText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor mauris. Integer sed nulla id justo faucibus vestibulum consequat et ligula. Vestibulum varius quam in porttitor pellentesque.',
|
|
313
|
+
buttonText: "Våra tjänster",
|
|
314
|
+
buttonUrl: 'http://www.google.se',
|
|
315
|
+
linkText: 'Information',
|
|
316
|
+
linkUrl: 'http://www.bing.com',
|
|
317
|
+
pnBackgroundColor: 'blue25',
|
|
249
318
|
isLarge: true,
|
|
250
319
|
isCentered: true,
|
|
251
320
|
isSmall: false,
|
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
pn-cta-block {
|
|
2
|
+
display: flex;
|
|
3
|
+
justify-content: center;
|
|
4
|
+
}
|
|
1
5
|
pn-cta-block .cta-block {
|
|
2
6
|
display: flex;
|
|
3
7
|
justify-content: space-between;
|
|
@@ -14,8 +18,6 @@ pn-cta-block .cta-block {
|
|
|
14
18
|
}
|
|
15
19
|
@media screen and (min-width: 1140px) {
|
|
16
20
|
pn-cta-block .cta-block {
|
|
17
|
-
margin-right: auto;
|
|
18
|
-
margin-left: auto;
|
|
19
21
|
max-width: 95%;
|
|
20
22
|
}
|
|
21
23
|
}
|
|
@@ -36,6 +38,9 @@ pn-cta-block .cta-block[pn-background-color=gray25] {
|
|
|
36
38
|
pn-cta-block .cta-block[pn-background-color=green25] {
|
|
37
39
|
background-color: #EDFBF3;
|
|
38
40
|
}
|
|
41
|
+
pn-cta-block .cta-block[pn-background-color=transparent] {
|
|
42
|
+
padding: 0 3.2rem;
|
|
43
|
+
}
|
|
39
44
|
pn-cta-block .cta-block--content-top .cta-block__content {
|
|
40
45
|
justify-content: flex-start;
|
|
41
46
|
}
|
|
@@ -50,22 +55,29 @@ pn-cta-block .cta-block--content-top .cta-block__content {
|
|
|
50
55
|
}
|
|
51
56
|
}
|
|
52
57
|
pn-cta-block .cta-block--small {
|
|
53
|
-
margin-right: auto;
|
|
54
|
-
margin-left: auto;
|
|
55
58
|
width: auto;
|
|
56
59
|
}
|
|
57
60
|
@media screen and (min-width: 992px) {
|
|
58
61
|
pn-cta-block .cta-block--small {
|
|
62
|
+
display: inline-flex;
|
|
59
63
|
max-width: 75%;
|
|
60
64
|
}
|
|
65
|
+
pn-cta-block .cta-block--small.cta-block--center {
|
|
66
|
+
max-width: 66%;
|
|
67
|
+
}
|
|
61
68
|
}
|
|
62
69
|
pn-cta-block .cta-block--center {
|
|
63
70
|
align-items: center;
|
|
64
71
|
flex-direction: column;
|
|
65
72
|
gap: 1.6rem;
|
|
66
|
-
padding: 3.2rem 2.4rem;
|
|
67
73
|
text-align: center;
|
|
68
74
|
}
|
|
75
|
+
@media screen and (min-width: 768px) {
|
|
76
|
+
pn-cta-block .cta-block--center {
|
|
77
|
+
gap: 2.4rem;
|
|
78
|
+
padding: 3.2rem;
|
|
79
|
+
}
|
|
80
|
+
}
|
|
69
81
|
@media screen and (min-width: 768px) {
|
|
70
82
|
pn-cta-block .cta-block--center .cta-block__content {
|
|
71
83
|
max-width: 74rem;
|
|
@@ -75,20 +87,18 @@ pn-cta-block .cta-block--center {
|
|
|
75
87
|
pn-cta-block .cta-block--center .cta-block__action {
|
|
76
88
|
margin-top: 0.8rem;
|
|
77
89
|
}
|
|
78
|
-
pn-cta-block .cta-block--center .cta-block__action > [slot=cta-button] {
|
|
79
|
-
gap: 0.8rem;
|
|
80
|
-
}
|
|
81
90
|
@media screen and (min-width: 768px) {
|
|
82
91
|
pn-cta-block .cta-block--center .cta-block__action {
|
|
83
92
|
flex-direction: row;
|
|
84
93
|
gap: 2.4rem;
|
|
85
|
-
margin-top:
|
|
94
|
+
margin-top: 0;
|
|
86
95
|
}
|
|
87
96
|
pn-cta-block .cta-block--center .cta-block__action.cta-block__button {
|
|
88
97
|
margin-bottom: 0;
|
|
89
98
|
}
|
|
90
|
-
pn-cta-block .cta-block--center .cta-block__action > [slot=cta-
|
|
99
|
+
pn-cta-block .cta-block--center .cta-block__action > [slot=cta-buttons] {
|
|
91
100
|
flex-direction: row;
|
|
101
|
+
align-items: center;
|
|
92
102
|
gap: 2.4rem;
|
|
93
103
|
}
|
|
94
104
|
}
|
|
@@ -100,6 +110,9 @@ pn-cta-block .cta-block--center .cta-block__action > [slot=cta-button] {
|
|
|
100
110
|
pn-cta-block .cta-block--center .cta-block__image-wrapper > [slot=illustration] {
|
|
101
111
|
padding-right: 0;
|
|
102
112
|
}
|
|
113
|
+
pn-cta-block .cta-block--center .cta-block__text {
|
|
114
|
+
margin-bottom: 0 !important;
|
|
115
|
+
}
|
|
103
116
|
pn-cta-block .cta-block__image-wrapper {
|
|
104
117
|
margin-bottom: 1.6rem;
|
|
105
118
|
}
|
|
@@ -134,7 +147,8 @@ pn-cta-block .cta-block__content {
|
|
|
134
147
|
}
|
|
135
148
|
}
|
|
136
149
|
@media screen and (min-width: 768px) {
|
|
137
|
-
pn-cta-block .cta-block__content .cta-block__heading,
|
|
150
|
+
pn-cta-block .cta-block__content .cta-block__heading,
|
|
151
|
+
pn-cta-block .cta-block__content .cta-block__text {
|
|
138
152
|
max-width: 74rem;
|
|
139
153
|
}
|
|
140
154
|
}
|
|
@@ -152,36 +166,37 @@ pn-cta-block .cta-block__heading {
|
|
|
152
166
|
pn-cta-block .cta-block__action {
|
|
153
167
|
display: flex;
|
|
154
168
|
}
|
|
155
|
-
pn-cta-block .cta-block__action > [slot=cta-
|
|
169
|
+
pn-cta-block .cta-block__action > [slot=cta-buttons] {
|
|
156
170
|
display: flex;
|
|
157
|
-
align-items: center;
|
|
158
171
|
flex-direction: column;
|
|
159
|
-
justify-content: center;
|
|
160
172
|
row-gap: 1.6rem;
|
|
173
|
+
flex: 1;
|
|
161
174
|
}
|
|
162
175
|
@media screen and (min-width: 768px) {
|
|
163
|
-
pn-cta-block .cta-block__action > [slot=cta-
|
|
176
|
+
pn-cta-block .cta-block__action > [slot=cta-buttons] {
|
|
177
|
+
align-items: flex-end;
|
|
178
|
+
justify-content: center;
|
|
164
179
|
gap: 1.6rem;
|
|
165
180
|
margin-top: 0;
|
|
166
181
|
}
|
|
167
182
|
}
|
|
168
|
-
pn-cta-block .cta-block__action > [slot=cta-
|
|
183
|
+
pn-cta-block .cta-block__action > [slot=cta-buttons] > a {
|
|
169
184
|
color: #005D92;
|
|
170
185
|
font-weight: 500;
|
|
171
186
|
font-size: 1.6rem;
|
|
172
187
|
padding: 0.1rem;
|
|
173
188
|
text-decoration: none;
|
|
174
189
|
}
|
|
175
|
-
pn-cta-block .cta-block__action > [slot=cta-
|
|
190
|
+
pn-cta-block .cta-block__action > [slot=cta-buttons] > a pn-icon svg {
|
|
176
191
|
transition: transform 0.3s ease-in-out;
|
|
177
192
|
}
|
|
178
|
-
pn-cta-block .cta-block__action > [slot=cta-
|
|
193
|
+
pn-cta-block .cta-block__action > [slot=cta-buttons] > a pn-icon svg path {
|
|
179
194
|
fill: #005D92;
|
|
180
195
|
}
|
|
181
|
-
pn-cta-block .cta-block__action > [slot=cta-
|
|
196
|
+
pn-cta-block .cta-block__action > [slot=cta-buttons] > a:hover pn-icon svg {
|
|
182
197
|
transition: transform 0.3s ease-in-out;
|
|
183
198
|
transform: translateX(0.3rem);
|
|
184
199
|
}
|
|
185
|
-
pn-cta-block .cta-block__action > [slot=cta-
|
|
200
|
+
pn-cta-block .cta-block__action > [slot=cta-buttons] > a:hover pn-icon svg path {
|
|
186
201
|
fill: #005D92;
|
|
187
202
|
}
|
|
@@ -10,7 +10,12 @@ export class PnCtaBlock {
|
|
|
10
10
|
this.contentTop = false;
|
|
11
11
|
}
|
|
12
12
|
render() {
|
|
13
|
-
|
|
13
|
+
const hasImage = this.hostElement.querySelector('[slot="illustration"]');
|
|
14
|
+
const hasButtons = this.hostElement.querySelector('[slot="cta-buttons"]');
|
|
15
|
+
return (h(Host, null, h("div", { "pn-background-color": this.pnBackgroundColor, class: `cta-block ${this.isLarge ? 'cta-block--large' : ''} ${this.isCentered ? 'cta-block--center' : ''} ${(this.isSmall ? 'cta-block--small' : '')} ${this.contentTop ? 'cta-block--content-top' : ''}` }, (hasImage ?
|
|
16
|
+
h("div", { class: "cta-block__image-wrapper" }, h("slot", { name: "illustration" })) : null), (this.heading && this.bodyText) ?
|
|
17
|
+
h("div", { class: "cta-block__content" }, h("h2", { class: "cta-block__heading" }, this.heading), h("p", { class: "cta-block__text" }, this.bodyText)) : null, (hasButtons ?
|
|
18
|
+
h("div", { class: "cta-block__action" }, h("slot", { name: "cta-buttons" })) : null))));
|
|
14
19
|
}
|
|
15
20
|
static get is() { return "pn-cta-block"; }
|
|
16
21
|
static get originalStyleUrls() {
|
|
@@ -162,8 +162,10 @@ export class PnMultiRowConnectedDropdownRow {
|
|
|
162
162
|
const emmitValues = debounce(this.emittRowValues.bind(this), 500);
|
|
163
163
|
this.pnInputField.addEventListener('keyup', this.handleInput.bind(this));
|
|
164
164
|
this.pnInputField.addEventListener('change', this.handleInput.bind(this));
|
|
165
|
+
this.pnInputField.addEventListener('input', this.handleInput.bind(this));
|
|
165
166
|
this.pnInputField.addEventListener('keyup', emmitValues);
|
|
166
167
|
this.pnInputField.addEventListener('change', emmitValues);
|
|
168
|
+
this.pnInputField.addEventListener('input', emmitValues);
|
|
167
169
|
if (this.allowMultipleDates) {
|
|
168
170
|
this.pnShowDateRangeFiledButton.addEventListener('click', this.showDateRangeRow.bind(this));
|
|
169
171
|
this.pnStartDate.addEventListener('dateselection', this.HandleRangeDatePickers.bind(this));
|