@progressive-development/pd-page 0.1.127 → 0.5.0
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/dist/index.js +18 -0
- package/dist/locales/be.js +12 -0
- package/dist/locales/de.js +12 -0
- package/dist/locales/en.js +12 -0
- package/dist/pd-contact-us.js +2 -0
- package/dist/pd-footer.js +2 -0
- package/dist/pd-menu.js +2 -0
- package/dist/pd-teaser.js +4 -0
- package/{src → dist/src}/PdContactUs.js +40 -57
- package/{src → dist/src}/PdFooter.js +23 -34
- package/{src → dist/src}/PdMenu.js +47 -85
- package/{src → dist/src}/PdTeaser.js +25 -49
- package/{src → dist/src}/PdTeaserContent.js +14 -22
- package/package.json +46 -29
- package/.editorconfig +0 -29
- package/.storybook/main.js +0 -13
- package/.storybook/preview.js +0 -14
- package/demo/index.html +0 -29
- package/index.js +0 -0
- package/lit-localize.json +0 -18
- package/pd-contact-us.js +0 -3
- package/pd-footer.js +0 -3
- package/pd-menu.js +0 -3
- package/pd-teaser.js +0 -5
- package/src/generated/locale/be.js +0 -20
- package/src/generated/locale/en.js +0 -20
- package/src/generated/locale-codes.js +0 -25
- package/src/stories/01_index.stories.js +0 -172
- package/src/stories/contactUs.stories.js +0 -30
- package/src/stories/footer.stories.js +0 -41
- package/src/stories/menu.stories.js +0 -188
- package/src/stories/teaser.stories.js +0 -75
- package/test/pd-page.test.js +0 -32
- package/web-dev-server.config.mjs +0 -27
- package/web-test-runner.config.mjs +0 -41
- package/xliff/be.xlf +0 -42
- package/xliff/en.xlf +0 -35
|
@@ -1,172 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit';
|
|
2
|
-
|
|
3
|
-
import '../../pd-teaser.js';
|
|
4
|
-
import '../../pd-menu.js';
|
|
5
|
-
import '../../pd-contact-us.js';
|
|
6
|
-
import '../../pd-footer.js';
|
|
7
|
-
|
|
8
|
-
const ticomiLogo = html`
|
|
9
|
-
<svg
|
|
10
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
11
|
-
viewBox="0 0 298.09 120.94"
|
|
12
|
-
class="logo"
|
|
13
|
-
>
|
|
14
|
-
<g id="Ebene_2" data-name="Ebene 2">
|
|
15
|
-
<!--g style="fill: var(--logo-fill-1,#15a1dc)"-->
|
|
16
|
-
<g id="Ebene_1-2" data-name="Ebene 1">
|
|
17
|
-
<path
|
|
18
|
-
d="M115.21,72.59c-2,0-3.5-1.46-3.5-4.68V48.68h7.2V44h-7.17l.12-9.64h-7l-3.49,9.6-5,.65v4.1h4.44V61.75c0,2.68-.07,4.52-.07,6.91,0,6.78,3.64,9.55,9.87,9.55,5,0,8.23-2,10.05-5.49l-1.68-1.65A6.16,6.16,0,0,1,115.21,72.59Z"
|
|
19
|
-
style="fill:#fff"
|
|
20
|
-
></path>
|
|
21
|
-
<path
|
|
22
|
-
d="M136.92,62.74V53.63l.21-10L136,42.92l-14.38,4.57v2.7l4.24.62c.14,2.75.21,4.88.21,8.66v3.27c0,2.89,0,7.08-.1,10.43l-3.69.8v3.2h18.22V74L137,73.26C137,69.89,136.92,65.66,136.92,62.74Z"
|
|
23
|
-
style="fill:#fff"
|
|
24
|
-
></path>
|
|
25
|
-
<ellipse
|
|
26
|
-
cx="131.35"
|
|
27
|
-
cy="32.37"
|
|
28
|
-
rx="5.82"
|
|
29
|
-
ry="5.47"
|
|
30
|
-
style="fill:#fff"
|
|
31
|
-
></ellipse>
|
|
32
|
-
<path
|
|
33
|
-
d="M163.55,46.46a10.9,10.9,0,0,1,1.29.08l.44,3.46c.33,4.84,2.56,6.51,5.27,6.51,2.47,0,3.89-1.12,4.63-3.58-.5-5.48-5.58-10-12.83-10-10.25,0-18.55,6.51-18.55,17.74,0,11.55,7.74,17.55,17.1,17.55,6.5,0,11.44-2.67,14.09-8.27l-2.39-2.11a9.87,9.87,0,0,1-7.73,3.82c-5.77,0-9.57-4.34-9.57-12.25C155.3,50.11,159.6,46.46,163.55,46.46Z"
|
|
34
|
-
style="fill:#fff"
|
|
35
|
-
></path>
|
|
36
|
-
<path
|
|
37
|
-
d="M196.07,42.92c-9.83,0-17.44,6.95-17.44,17.51s6.72,17.78,17.44,17.78,17.44-7.07,17.44-17.78S205.86,42.92,196.07,42.92Zm0,31.7c-3.88,0-5.81-4.24-5.81-14s1.93-14.07,5.81-14.07,5.81,4.32,5.81,14.07S199.92,74.62,196.07,74.62Z"
|
|
38
|
-
style="fill:#fff"
|
|
39
|
-
></path>
|
|
40
|
-
<path
|
|
41
|
-
d="M272.87,62.74V55.07c0-8.16-3.08-12.15-10-12.15-3.92,0-7.26,1.47-11.09,6.12-1.35-4.09-4.39-6.12-9.07-6.12-4.13,0-7.47,1.94-10.76,5.8l-.41-5.06-1.18-.74L216.8,47.49v2.7l4.2.62c.19,2.75.21,4.18.21,8v4c0,2.89,0,7.07-.1,10.43l-3.7.8v3.2h18.07V74l-3.23-.69c-.06-3.37-.1-7.62-.1-10.54V52.07a9.42,9.42,0,0,1,5.68-2.5c3,0,4,1.76,4,6.56v6.61c0,3,0,7.1-.09,10.43l-3.56.8v3.2h17.73V74l-3.23-.7c-.07-3.34-.1-7.52-.1-10.53v-8a22.71,22.71,0,0,0-.15-2.69,9.14,9.14,0,0,1,5.8-2.48c2.82,0,3.91,1.36,3.91,6.52v6.65c0,3,0,7.11-.09,10.44l-3.32.79v3.2H276.4V74L273,73.24C272.9,69.91,272.87,65.74,272.87,62.74Z"
|
|
42
|
-
style="fill:#fff"
|
|
43
|
-
></path>
|
|
44
|
-
<ellipse
|
|
45
|
-
cx="288.99"
|
|
46
|
-
cy="32.37"
|
|
47
|
-
rx="5.82"
|
|
48
|
-
ry="5.47"
|
|
49
|
-
style="fill:#fff"
|
|
50
|
-
></ellipse>
|
|
51
|
-
<path
|
|
52
|
-
d="M294.66,73.26c-.06-3.37-.09-7.6-.09-10.52V53.63l.2-10-1.18-.74-14.38,4.57v2.7l4.24.62c.14,2.75.21,4.88.21,8.66v3.27c0,2.89,0,7.08-.1,10.43l-3.69.8v3.2h18.22V74Z"
|
|
53
|
-
style="fill:#fff"
|
|
54
|
-
></path>
|
|
55
|
-
<path
|
|
56
|
-
d="M100.27,113.34V97.1H96.33V95.29l4-.22.29-7.31h2v7.31h7.32v2H102.6v16.42c0,3.22.81,5.4,4.29,5.4a9.14,9.14,0,0,0,3.17-.8l.61,1.88a14.75,14.75,0,0,1-4.13.94C101.69,120.94,100.27,117.87,100.27,113.34Zm17-5.6c0-8.24,5.36-13.3,11-13.3,6,0,9.67,4.25,9.67,11.68a10.92,10.92,0,0,1-.13,1.89H119.71c.09,6.37,3.82,10.93,9.51,10.93A11.4,11.4,0,0,0,136,116.7l1,1.76a13.84,13.84,0,0,1-8,2.48C122.55,120.94,117.32,116,117.32,107.74Zm18.49-1.64c0-6.45-2.92-9.66-7.46-9.66-4.26,0-8.12,3.62-8.65,9.66Zm10.84,1.64c0-8.44,5.4-13.3,11.54-13.3a10.35,10.35,0,0,1,7.39,3.11l-1.37,1.62a8.57,8.57,0,0,0-6-2.68c-5.16,0-9.15,4.6-9.15,11.25s3.63,11.15,9.12,11.15A10,10,0,0,0,165,116l1.2,1.63a12,12,0,0,1-8.06,3.33C151.59,120.94,146.65,116.09,146.65,107.74Zm29.67-25.25h2.32v11l0,5.56c2.64-2.62,5.26-4.59,8.74-4.59,5.21,0,7.63,3.16,7.63,9.68v16.19h-2.32V104.43c0-5.36-1.69-7.9-5.75-7.9-3,0-5.19,1.59-8.26,4.74v19h-2.32ZM208,95.07h2l.25,3.91h.12c2.57-2.57,5.2-4.54,8.68-4.54,5.22,0,7.64,3.16,7.64,9.68v16.19h-2.32V104.43c0-5.36-1.7-7.9-5.76-7.9-3,0-5.18,1.59-8.25,4.74v19H208Zm31-8.16a2.12,2.12,0,0,1,4.23,0,2.12,2.12,0,0,1-4.23,0Zm.91,8.16h2.32v25.24h-2.32Zm13.85,12.67c0-8.44,5.4-13.3,11.54-13.3a10.35,10.35,0,0,1,7.39,3.11l-1.37,1.62a8.57,8.57,0,0,0-6-2.68c-5.16,0-9.15,4.6-9.15,11.25s3.63,11.15,9.12,11.15a10,10,0,0,0,6.76-2.91l1.2,1.63a12,12,0,0,1-8.06,3.33C258.71,120.94,253.77,116.09,253.77,107.74Zm26.53,9.71,1.34-1.69a11.7,11.7,0,0,0,8,3.2c4,0,6-2.33,6-5,0-3.16-3.27-4.55-6.18-5.6-3.81-1.35-8-2.9-8-7.22,0-3.63,2.88-6.71,8.13-6.71a11.89,11.89,0,0,1,7.22,2.61l-1.25,1.68a9.6,9.6,0,0,0-6-2.31c-3.94,0-5.72,2.27-5.72,4.6,0,2.88,3,4,6,5.11,3.91,1.49,8.24,2.78,8.24,7.7,0,3.8-3,7.11-8.51,7.11A14.39,14.39,0,0,1,280.3,117.45Z"
|
|
57
|
-
style="fill:#fff"
|
|
58
|
-
></path>
|
|
59
|
-
<path
|
|
60
|
-
d="M74,70.68C74,27.21,29.57,0,29.57,0a121.75,121.75,0,0,1-9,30.61C13.35,46.77,0,57.83,0,76.72c0,24.43,17.1,44.22,37.18,44.22S74,98.27,74,70.68Z"
|
|
61
|
-
style="fill:#db3a34"
|
|
62
|
-
></path>
|
|
63
|
-
<path
|
|
64
|
-
d="M67.14,78.6C67.14,42,31,19.07,31,19.07a105.49,105.49,0,0,1-7.34,25.78C17.74,58.46,6.86,67.78,6.86,83.7c0,20.57,13.93,37.24,30.29,37.24S67.14,101.84,67.14,78.6Z"
|
|
65
|
-
style="fill:#f7931e"
|
|
66
|
-
></path>
|
|
67
|
-
<path
|
|
68
|
-
d="M57.92,88.46c0-28.09-25.12-45.67-25.12-45.67a87.16,87.16,0,0,1-5.1,19.78C23.63,73,16.08,80.16,16.08,92.37c0,15.78,9.67,28.57,21,28.57S57.92,106.29,57.92,88.46Z"
|
|
69
|
-
style="fill:#ffc857"
|
|
70
|
-
></path>
|
|
71
|
-
<path
|
|
72
|
-
d="M47.44,104.74c0-14-12.53-22.77-12.53-22.77a43.35,43.35,0,0,1-2.55,9.86c-2,5.21-5.79,8.77-5.79,14.86,0,7.87,4.82,14.25,10.48,14.25S47.44,113.64,47.44,104.74Z"
|
|
73
|
-
style="fill:#fff"
|
|
74
|
-
></path>
|
|
75
|
-
</g>
|
|
76
|
-
</g>
|
|
77
|
-
</svg>
|
|
78
|
-
`;
|
|
79
|
-
|
|
80
|
-
export default {
|
|
81
|
-
title: 'PdPage/Examples',
|
|
82
|
-
component: 'pd-page',
|
|
83
|
-
argTypes: {},
|
|
84
|
-
};
|
|
85
|
-
|
|
86
|
-
function Template({ menuItems, topMenuItems, teaserClosed }) {
|
|
87
|
-
return html`
|
|
88
|
-
<header>
|
|
89
|
-
<pd-teaser
|
|
90
|
-
.teaserObjects="${[{ name: 't1' }, { name: 't2' }, { name: 't3' }]}"
|
|
91
|
-
@close-teaser="${this._closeTeaser}"
|
|
92
|
-
>
|
|
93
|
-
<pd-teaser-content
|
|
94
|
-
slot="t1"
|
|
95
|
-
primaryTxt="Teaser 1 Primary Text"
|
|
96
|
-
secondaryTxt="Teaser 1 Secondary Text."
|
|
97
|
-
>
|
|
98
|
-
</pd-teaser-content>
|
|
99
|
-
<pd-teaser-content
|
|
100
|
-
slot="t2"
|
|
101
|
-
primaryTxt="Teaser 2 Primary Text"
|
|
102
|
-
secondaryTxt="Teaser 2 Secondary Text."
|
|
103
|
-
style="--squi-teaser-image: url('/images/hero_3.svg');"
|
|
104
|
-
>
|
|
105
|
-
</pd-teaser-content>
|
|
106
|
-
<pd-teaser-content
|
|
107
|
-
slot="t3"
|
|
108
|
-
primaryTxt="Teaser 3 Primary Text"
|
|
109
|
-
secondaryTxt="Teaser 3 Secondary Text."
|
|
110
|
-
style="--squi-teaser-image: url('/images/hero_2.svg');"
|
|
111
|
-
>
|
|
112
|
-
</pd-teaser-content>
|
|
113
|
-
</pd-teaser>
|
|
114
|
-
|
|
115
|
-
<pd-menu
|
|
116
|
-
class="${this._teaserClosed ? 'menu-2' : 'menu-1'}"
|
|
117
|
-
.menuItems=${menuItems}
|
|
118
|
-
.topMenuItems=${topMenuItems}
|
|
119
|
-
?teaserClosed="${teaserClosed}"
|
|
120
|
-
@route-event="${this._routeEvent}"
|
|
121
|
-
>
|
|
122
|
-
<span slot="slotLogo" class="logo">${ticomiLogo}</span>
|
|
123
|
-
</pd-menu>
|
|
124
|
-
|
|
125
|
-
<section id="secServices">
|
|
126
|
-
<h1>Section 1</h1>
|
|
127
|
-
<p>Hier steht dann etwas Text</p>
|
|
128
|
-
</section>
|
|
129
|
-
|
|
130
|
-
<section id="secAboutUs">
|
|
131
|
-
<h1>Section 2</h1>
|
|
132
|
-
<p>Hier steht dann etwas Text</p>
|
|
133
|
-
</section>
|
|
134
|
-
|
|
135
|
-
<section id="secContactUs">
|
|
136
|
-
<pd-contact-us
|
|
137
|
-
id="contactUsId"
|
|
138
|
-
.contact="${{
|
|
139
|
-
companyName: 'Ticomi BV',
|
|
140
|
-
street: 'Gaston Crommenlaan',
|
|
141
|
-
streetNr: '8',
|
|
142
|
-
city: 'Gent',
|
|
143
|
-
zip: '9050',
|
|
144
|
-
btw: 'BE 0743868155 / RPR Gent',
|
|
145
|
-
|
|
146
|
-
kbc: 'BE3487 43545 94858 45686',
|
|
147
|
-
}}"
|
|
148
|
-
></pd-contact-us>
|
|
149
|
-
</section>
|
|
150
|
-
|
|
151
|
-
<footer>
|
|
152
|
-
<pd-footer version="0.1 Test">
|
|
153
|
-
<span slot="legal"><p>My AGB</p></span>
|
|
154
|
-
<span slot="privacy"><p>My Privacy</p></span>
|
|
155
|
-
</pd-footer>
|
|
156
|
-
</footer>
|
|
157
|
-
</header>
|
|
158
|
-
`;
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
export const PageExamples = Template.bind({});
|
|
162
|
-
PageExamples.args = {
|
|
163
|
-
menuItems: [
|
|
164
|
-
{ name: 'Service', sec: 'secServices' },
|
|
165
|
-
{ name: 'Over ons', sec: 'secAboutUs' },
|
|
166
|
-
{ name: 'Contact', sec: 'secContactUs' },
|
|
167
|
-
],
|
|
168
|
-
|
|
169
|
-
topMenuItems: [{ name: 'Profiel', icon: 'userIcon', route: 'profile' }],
|
|
170
|
-
|
|
171
|
-
teaserClosed: false,
|
|
172
|
-
};
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit';
|
|
2
|
-
import '../../pd-contact-us.js';
|
|
3
|
-
|
|
4
|
-
export default {
|
|
5
|
-
title: 'PdPage/Contact Us',
|
|
6
|
-
component: 'pd-contact-us',
|
|
7
|
-
argTypes: {},
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
function Template() {
|
|
11
|
-
return html`
|
|
12
|
-
<pd-contact-us
|
|
13
|
-
id="contactUsId"
|
|
14
|
-
.contact="${{
|
|
15
|
-
companyName: 'Ticomi BV',
|
|
16
|
-
street: 'Gaston Crommenlaan',
|
|
17
|
-
streetNr: '8',
|
|
18
|
-
city: 'Gent',
|
|
19
|
-
zip: '9050',
|
|
20
|
-
btw: 'BE 0743868155 / RPR Gent',
|
|
21
|
-
|
|
22
|
-
kbc: 'BE3487 43545 94858 45686',
|
|
23
|
-
}}"
|
|
24
|
-
>
|
|
25
|
-
</pd-contact-us>
|
|
26
|
-
`;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
export const ContactUs = Template.bind({});
|
|
30
|
-
ContactUs.args = {};
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit';
|
|
2
|
-
import '../../pd-footer.js';
|
|
3
|
-
|
|
4
|
-
export default {
|
|
5
|
-
title: 'PdPage/Footer',
|
|
6
|
-
component: 'pd-footer',
|
|
7
|
-
argTypes: {},
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
function Template({links, version, copyright, madeBy}) {
|
|
11
|
-
return html`
|
|
12
|
-
<pd-footer version="${version}" copyright="${copyright}" .madeBy="${madeBy}"
|
|
13
|
-
.footerLinks="${links}">
|
|
14
|
-
</pd-footer>
|
|
15
|
-
`;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
export const Footer = Template.bind({});
|
|
19
|
-
Footer.args = {
|
|
20
|
-
links: [
|
|
21
|
-
{name: "Datenschutzerklärung", key: 'legal'},
|
|
22
|
-
{name: "Impressum"},
|
|
23
|
-
{name: "Location-Wiki"}
|
|
24
|
-
],
|
|
25
|
-
version: "1.2.2 Test",
|
|
26
|
-
copyright: "ticomi",
|
|
27
|
-
madeBy: {
|
|
28
|
-
txt: "made by PD Progressive Development",
|
|
29
|
-
email: "info@progressive-development.com"
|
|
30
|
-
}
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
export const FooterSmallContent = Template.bind({});
|
|
34
|
-
FooterSmallContent.args = {
|
|
35
|
-
links: [
|
|
36
|
-
{name: "Datenschutzerklärung", key: 'legal'},
|
|
37
|
-
{name: "Impressum"},
|
|
38
|
-
{name: "Location-Wiki"}
|
|
39
|
-
],
|
|
40
|
-
version: "1.2.2 Test",
|
|
41
|
-
};
|
|
@@ -1,188 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit';
|
|
2
|
-
|
|
3
|
-
import '../../pd-menu.js';
|
|
4
|
-
|
|
5
|
-
const ticomiLogo = html`
|
|
6
|
-
<svg
|
|
7
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
8
|
-
viewBox="0 0 298.09 120.94"
|
|
9
|
-
class="logo"
|
|
10
|
-
>
|
|
11
|
-
<g id="Ebene_2" data-name="Ebene 2">
|
|
12
|
-
<!--g style="fill: var(--logo-fill-1,#15a1dc)"-->
|
|
13
|
-
<g id="Ebene_1-2" data-name="Ebene 1">
|
|
14
|
-
<path
|
|
15
|
-
d="M115.21,72.59c-2,0-3.5-1.46-3.5-4.68V48.68h7.2V44h-7.17l.12-9.64h-7l-3.49,9.6-5,.65v4.1h4.44V61.75c0,2.68-.07,4.52-.07,6.91,0,6.78,3.64,9.55,9.87,9.55,5,0,8.23-2,10.05-5.49l-1.68-1.65A6.16,6.16,0,0,1,115.21,72.59Z"
|
|
16
|
-
style="fill:#fff"
|
|
17
|
-
></path>
|
|
18
|
-
<path
|
|
19
|
-
d="M136.92,62.74V53.63l.21-10L136,42.92l-14.38,4.57v2.7l4.24.62c.14,2.75.21,4.88.21,8.66v3.27c0,2.89,0,7.08-.1,10.43l-3.69.8v3.2h18.22V74L137,73.26C137,69.89,136.92,65.66,136.92,62.74Z"
|
|
20
|
-
style="fill:#fff"
|
|
21
|
-
></path>
|
|
22
|
-
<ellipse
|
|
23
|
-
cx="131.35"
|
|
24
|
-
cy="32.37"
|
|
25
|
-
rx="5.82"
|
|
26
|
-
ry="5.47"
|
|
27
|
-
style="fill:#fff"
|
|
28
|
-
></ellipse>
|
|
29
|
-
<path
|
|
30
|
-
d="M163.55,46.46a10.9,10.9,0,0,1,1.29.08l.44,3.46c.33,4.84,2.56,6.51,5.27,6.51,2.47,0,3.89-1.12,4.63-3.58-.5-5.48-5.58-10-12.83-10-10.25,0-18.55,6.51-18.55,17.74,0,11.55,7.74,17.55,17.1,17.55,6.5,0,11.44-2.67,14.09-8.27l-2.39-2.11a9.87,9.87,0,0,1-7.73,3.82c-5.77,0-9.57-4.34-9.57-12.25C155.3,50.11,159.6,46.46,163.55,46.46Z"
|
|
31
|
-
style="fill:#fff"
|
|
32
|
-
></path>
|
|
33
|
-
<path
|
|
34
|
-
d="M196.07,42.92c-9.83,0-17.44,6.95-17.44,17.51s6.72,17.78,17.44,17.78,17.44-7.07,17.44-17.78S205.86,42.92,196.07,42.92Zm0,31.7c-3.88,0-5.81-4.24-5.81-14s1.93-14.07,5.81-14.07,5.81,4.32,5.81,14.07S199.92,74.62,196.07,74.62Z"
|
|
35
|
-
style="fill:#fff"
|
|
36
|
-
></path>
|
|
37
|
-
<path
|
|
38
|
-
d="M272.87,62.74V55.07c0-8.16-3.08-12.15-10-12.15-3.92,0-7.26,1.47-11.09,6.12-1.35-4.09-4.39-6.12-9.07-6.12-4.13,0-7.47,1.94-10.76,5.8l-.41-5.06-1.18-.74L216.8,47.49v2.7l4.2.62c.19,2.75.21,4.18.21,8v4c0,2.89,0,7.07-.1,10.43l-3.7.8v3.2h18.07V74l-3.23-.69c-.06-3.37-.1-7.62-.1-10.54V52.07a9.42,9.42,0,0,1,5.68-2.5c3,0,4,1.76,4,6.56v6.61c0,3,0,7.1-.09,10.43l-3.56.8v3.2h17.73V74l-3.23-.7c-.07-3.34-.1-7.52-.1-10.53v-8a22.71,22.71,0,0,0-.15-2.69,9.14,9.14,0,0,1,5.8-2.48c2.82,0,3.91,1.36,3.91,6.52v6.65c0,3,0,7.11-.09,10.44l-3.32.79v3.2H276.4V74L273,73.24C272.9,69.91,272.87,65.74,272.87,62.74Z"
|
|
39
|
-
style="fill:#fff"
|
|
40
|
-
></path>
|
|
41
|
-
<ellipse
|
|
42
|
-
cx="288.99"
|
|
43
|
-
cy="32.37"
|
|
44
|
-
rx="5.82"
|
|
45
|
-
ry="5.47"
|
|
46
|
-
style="fill:#fff"
|
|
47
|
-
></ellipse>
|
|
48
|
-
<path
|
|
49
|
-
d="M294.66,73.26c-.06-3.37-.09-7.6-.09-10.52V53.63l.2-10-1.18-.74-14.38,4.57v2.7l4.24.62c.14,2.75.21,4.88.21,8.66v3.27c0,2.89,0,7.08-.1,10.43l-3.69.8v3.2h18.22V74Z"
|
|
50
|
-
style="fill:#fff"
|
|
51
|
-
></path>
|
|
52
|
-
<path
|
|
53
|
-
d="M100.27,113.34V97.1H96.33V95.29l4-.22.29-7.31h2v7.31h7.32v2H102.6v16.42c0,3.22.81,5.4,4.29,5.4a9.14,9.14,0,0,0,3.17-.8l.61,1.88a14.75,14.75,0,0,1-4.13.94C101.69,120.94,100.27,117.87,100.27,113.34Zm17-5.6c0-8.24,5.36-13.3,11-13.3,6,0,9.67,4.25,9.67,11.68a10.92,10.92,0,0,1-.13,1.89H119.71c.09,6.37,3.82,10.93,9.51,10.93A11.4,11.4,0,0,0,136,116.7l1,1.76a13.84,13.84,0,0,1-8,2.48C122.55,120.94,117.32,116,117.32,107.74Zm18.49-1.64c0-6.45-2.92-9.66-7.46-9.66-4.26,0-8.12,3.62-8.65,9.66Zm10.84,1.64c0-8.44,5.4-13.3,11.54-13.3a10.35,10.35,0,0,1,7.39,3.11l-1.37,1.62a8.57,8.57,0,0,0-6-2.68c-5.16,0-9.15,4.6-9.15,11.25s3.63,11.15,9.12,11.15A10,10,0,0,0,165,116l1.2,1.63a12,12,0,0,1-8.06,3.33C151.59,120.94,146.65,116.09,146.65,107.74Zm29.67-25.25h2.32v11l0,5.56c2.64-2.62,5.26-4.59,8.74-4.59,5.21,0,7.63,3.16,7.63,9.68v16.19h-2.32V104.43c0-5.36-1.69-7.9-5.75-7.9-3,0-5.19,1.59-8.26,4.74v19h-2.32ZM208,95.07h2l.25,3.91h.12c2.57-2.57,5.2-4.54,8.68-4.54,5.22,0,7.64,3.16,7.64,9.68v16.19h-2.32V104.43c0-5.36-1.7-7.9-5.76-7.9-3,0-5.18,1.59-8.25,4.74v19H208Zm31-8.16a2.12,2.12,0,0,1,4.23,0,2.12,2.12,0,0,1-4.23,0Zm.91,8.16h2.32v25.24h-2.32Zm13.85,12.67c0-8.44,5.4-13.3,11.54-13.3a10.35,10.35,0,0,1,7.39,3.11l-1.37,1.62a8.57,8.57,0,0,0-6-2.68c-5.16,0-9.15,4.6-9.15,11.25s3.63,11.15,9.12,11.15a10,10,0,0,0,6.76-2.91l1.2,1.63a12,12,0,0,1-8.06,3.33C258.71,120.94,253.77,116.09,253.77,107.74Zm26.53,9.71,1.34-1.69a11.7,11.7,0,0,0,8,3.2c4,0,6-2.33,6-5,0-3.16-3.27-4.55-6.18-5.6-3.81-1.35-8-2.9-8-7.22,0-3.63,2.88-6.71,8.13-6.71a11.89,11.89,0,0,1,7.22,2.61l-1.25,1.68a9.6,9.6,0,0,0-6-2.31c-3.94,0-5.72,2.27-5.72,4.6,0,2.88,3,4,6,5.11,3.91,1.49,8.24,2.78,8.24,7.7,0,3.8-3,7.11-8.51,7.11A14.39,14.39,0,0,1,280.3,117.45Z"
|
|
54
|
-
style="fill:#fff"
|
|
55
|
-
></path>
|
|
56
|
-
<path
|
|
57
|
-
d="M74,70.68C74,27.21,29.57,0,29.57,0a121.75,121.75,0,0,1-9,30.61C13.35,46.77,0,57.83,0,76.72c0,24.43,17.1,44.22,37.18,44.22S74,98.27,74,70.68Z"
|
|
58
|
-
style="fill:#db3a34"
|
|
59
|
-
></path>
|
|
60
|
-
<path
|
|
61
|
-
d="M67.14,78.6C67.14,42,31,19.07,31,19.07a105.49,105.49,0,0,1-7.34,25.78C17.74,58.46,6.86,67.78,6.86,83.7c0,20.57,13.93,37.24,30.29,37.24S67.14,101.84,67.14,78.6Z"
|
|
62
|
-
style="fill:#f7931e"
|
|
63
|
-
></path>
|
|
64
|
-
<path
|
|
65
|
-
d="M57.92,88.46c0-28.09-25.12-45.67-25.12-45.67a87.16,87.16,0,0,1-5.1,19.78C23.63,73,16.08,80.16,16.08,92.37c0,15.78,9.67,28.57,21,28.57S57.92,106.29,57.92,88.46Z"
|
|
66
|
-
style="fill:#ffc857"
|
|
67
|
-
></path>
|
|
68
|
-
<path
|
|
69
|
-
d="M47.44,104.74c0-14-12.53-22.77-12.53-22.77a43.35,43.35,0,0,1-2.55,9.86c-2,5.21-5.79,8.77-5.79,14.86,0,7.87,4.82,14.25,10.48,14.25S47.44,113.64,47.44,104.74Z"
|
|
70
|
-
style="fill:#fff"
|
|
71
|
-
></path>
|
|
72
|
-
</g>
|
|
73
|
-
</g>
|
|
74
|
-
</svg>
|
|
75
|
-
`;
|
|
76
|
-
|
|
77
|
-
export default {
|
|
78
|
-
title: 'PdPage/Menu',
|
|
79
|
-
component: 'pd-menu',
|
|
80
|
-
argTypes: {
|
|
81
|
-
menuColor: { control: 'color' },
|
|
82
|
-
},
|
|
83
|
-
};
|
|
84
|
-
|
|
85
|
-
function Template({ menuItems, topMenuItems, color, logo, menuColor, locales, selectedLocale, noBurger, menuHeight }) {
|
|
86
|
-
return html`
|
|
87
|
-
<pd-menu
|
|
88
|
-
style="--pd-menu-bg-col: ${menuColor || color};
|
|
89
|
-
--pd-menu-height: ${menuHeight || 80}px;
|
|
90
|
-
transition: background-color 1s;"
|
|
91
|
-
.menuItems=${menuItems}
|
|
92
|
-
.topMenuItems=${topMenuItems}
|
|
93
|
-
?teaserClosed="${true}"
|
|
94
|
-
?noBurgerMenu="${noBurger}"
|
|
95
|
-
.locales="${locales}"
|
|
96
|
-
selectedLocale="${selectedLocale}"
|
|
97
|
-
@route-event="${e => {
|
|
98
|
-
console.log('Der route event ist da: ', e);
|
|
99
|
-
}}"
|
|
100
|
-
>
|
|
101
|
-
${logo
|
|
102
|
-
? html`<span slot="slotLogo" class="logo">${ticomiLogo}</span>`
|
|
103
|
-
: ''}
|
|
104
|
-
</pd-menu>
|
|
105
|
-
`;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
export const BasicColor1 = Template.bind({});
|
|
109
|
-
BasicColor1.args = {
|
|
110
|
-
menuItems: [
|
|
111
|
-
{ name: 'Service', sec: 'secServices' },
|
|
112
|
-
{ name: 'Over ons', sec: 'secAboutUs' },
|
|
113
|
-
{ name: 'Contact', sec: 'secContactUs' },
|
|
114
|
-
],
|
|
115
|
-
topMenuItems: [],
|
|
116
|
-
color: '#177e89',
|
|
117
|
-
};
|
|
118
|
-
|
|
119
|
-
export const BasicColor2 = Template.bind({});
|
|
120
|
-
BasicColor2.args = {
|
|
121
|
-
menuItems: [
|
|
122
|
-
{ name: 'Service', sec: 'secServices' },
|
|
123
|
-
{ name: 'Over ons', sec: 'secAboutUs' },
|
|
124
|
-
{ name: 'Contact', sec: 'secContactUs' },
|
|
125
|
-
],
|
|
126
|
-
topMenuItems: [],
|
|
127
|
-
color: '#084c61',
|
|
128
|
-
};
|
|
129
|
-
|
|
130
|
-
// with logo
|
|
131
|
-
export const WithLogo = Template.bind({});
|
|
132
|
-
WithLogo.args = {
|
|
133
|
-
menuItems: [
|
|
134
|
-
{ name: 'Service', sec: 'secServices' },
|
|
135
|
-
{ name: 'Over ons', sec: 'secAboutUs' },
|
|
136
|
-
{ name: 'Contact', sec: 'secContactUs' },
|
|
137
|
-
],
|
|
138
|
-
topMenuItems: [],
|
|
139
|
-
color: '#084c61',
|
|
140
|
-
logo: ticomiLogo,
|
|
141
|
-
};
|
|
142
|
-
|
|
143
|
-
// with top items
|
|
144
|
-
export const WithTopItems = Template.bind({});
|
|
145
|
-
WithTopItems.args = {
|
|
146
|
-
menuItems: [
|
|
147
|
-
{ name: 'Service', sec: 'secServices' },
|
|
148
|
-
{ name: 'Over ons', sec: 'secAboutUs' },
|
|
149
|
-
{ name: 'Contact', sec: 'secContactUs' },
|
|
150
|
-
],
|
|
151
|
-
topMenuItems: [{ name: 'Profile', icon: 'userIcon', route: 'profile' }],
|
|
152
|
-
color: '#084c61',
|
|
153
|
-
logo: ticomiLogo,
|
|
154
|
-
locales: ["de", "en"],
|
|
155
|
-
selectedLocale: "de",
|
|
156
|
-
};
|
|
157
|
-
|
|
158
|
-
// with top items
|
|
159
|
-
export const WithoutBurger = Template.bind({});
|
|
160
|
-
WithoutBurger.args = {
|
|
161
|
-
menuItems: [
|
|
162
|
-
{ name: 'Service', sec: 'secServices' },
|
|
163
|
-
{ name: 'Over ons', sec: 'secAboutUs' },
|
|
164
|
-
{ name: 'Contact', sec: 'secContactUs' },
|
|
165
|
-
],
|
|
166
|
-
topMenuItems: [{ name: 'Profile', icon: 'userIcon', route: 'profile' }],
|
|
167
|
-
color: '#084c61',
|
|
168
|
-
logo: ticomiLogo,
|
|
169
|
-
locales: ["de", "en"],
|
|
170
|
-
selectedLocale: "de",
|
|
171
|
-
noBurger: true
|
|
172
|
-
};
|
|
173
|
-
|
|
174
|
-
// with top items
|
|
175
|
-
export const SmallTopMenuWitoutBurger = Template.bind({});
|
|
176
|
-
SmallTopMenuWitoutBurger.args = {
|
|
177
|
-
menuItems: [],
|
|
178
|
-
topMenuItems: [
|
|
179
|
-
{ name: 'Preise', route: 'prices' },
|
|
180
|
-
{ name: 'AGB', route: 'agb' },
|
|
181
|
-
{ name: 'Profile', icon: 'userIcon', route: 'profile' }
|
|
182
|
-
],
|
|
183
|
-
color: '#084c61',
|
|
184
|
-
locales: ["de", "en"],
|
|
185
|
-
selectedLocale: "de",
|
|
186
|
-
menuHeight: 50,
|
|
187
|
-
noBurger: true
|
|
188
|
-
};
|
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit';
|
|
2
|
-
import '../../pd-teaser.js';
|
|
3
|
-
|
|
4
|
-
export default {
|
|
5
|
-
title: 'PdPage/Teaser',
|
|
6
|
-
component: 'pd-teaser',
|
|
7
|
-
argTypes: {},
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
const getTeaser = () => html`
|
|
12
|
-
<pd-teaser
|
|
13
|
-
.teaserObjects="${[{ name: 't1' }, { name: 't2' }, { name: 't3' }]}"
|
|
14
|
-
>
|
|
15
|
-
<pd-teaser-content
|
|
16
|
-
slot="t1"
|
|
17
|
-
primaryTxt="Boek nu uw goedkoopste serviceafspraak."
|
|
18
|
-
secondaryTxt="Lage kosten met snelle reactietijden. Und das kann aber auch mal läönger werden, wenn es sein muss."
|
|
19
|
-
style="--squi-teaser-image: url('/images/hero_1.svg');"
|
|
20
|
-
>
|
|
21
|
-
</pd-teaser-content>
|
|
22
|
-
<pd-teaser-content
|
|
23
|
-
slot="t2"
|
|
24
|
-
primaryTxt="Professionele service voor uw verwarmingssysteem."
|
|
25
|
-
secondaryTxt="Ons ervaren team helpt u graag verder."
|
|
26
|
-
style="--squi-teaser-image: url('/images/hero_2.svg');"
|
|
27
|
-
>
|
|
28
|
-
</pd-teaser-content>
|
|
29
|
-
<pd-teaser-content
|
|
30
|
-
slot="t3"
|
|
31
|
-
primaryTxt="Wij bieden u verschillende serviceniveaus en individuele oplossingen."
|
|
32
|
-
secondaryTxt="Warmte en comfort met veiligheid."
|
|
33
|
-
style="--squi-teaser-image: url('/images/hero_3.svg');"
|
|
34
|
-
>
|
|
35
|
-
</pd-teaser-content>
|
|
36
|
-
</pd-teaser>
|
|
37
|
-
`;
|
|
38
|
-
|
|
39
|
-
function Template() {
|
|
40
|
-
return getTeaser();
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
function TemplateSmall() {
|
|
44
|
-
return html`
|
|
45
|
-
|
|
46
|
-
<style>
|
|
47
|
-
.smallContent {
|
|
48
|
-
|
|
49
|
-
min-height: 100vh;
|
|
50
|
-
height: 100%;
|
|
51
|
-
|
|
52
|
-
max-width: 960px;
|
|
53
|
-
margin: 0 auto;
|
|
54
|
-
|
|
55
|
-
display: flex;
|
|
56
|
-
flex-direction: column;
|
|
57
|
-
align-items: center;
|
|
58
|
-
justify-content: flex-start;
|
|
59
|
-
|
|
60
|
-
background-color: grey;
|
|
61
|
-
}
|
|
62
|
-
</style>
|
|
63
|
-
|
|
64
|
-
<div class="smallContent">
|
|
65
|
-
${getTeaser()}
|
|
66
|
-
</div>
|
|
67
|
-
`;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
export const Teaser = Template.bind({});
|
|
72
|
-
Teaser.args = {};
|
|
73
|
-
|
|
74
|
-
export const TeaserSmall = TemplateSmall.bind({});
|
|
75
|
-
TeaserSmall.args = {};
|
package/test/pd-page.test.js
DELETED
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit';
|
|
2
|
-
import { fixture, expect } from '@open-wc/testing';
|
|
3
|
-
|
|
4
|
-
import '../pd-menu.js';
|
|
5
|
-
|
|
6
|
-
describe('PdMenu', () => {
|
|
7
|
-
it('has a default title "Hey there" and counter 5', async () => {
|
|
8
|
-
const el = await fixture(html`<pd-menu></pd-menu>`);
|
|
9
|
-
|
|
10
|
-
expect(el.title).to.equal('Hey there');
|
|
11
|
-
expect(el.counter).to.equal(5);
|
|
12
|
-
});
|
|
13
|
-
|
|
14
|
-
it('increases the counter on button click', async () => {
|
|
15
|
-
const el = await fixture(html`<pd-menu></pd-menu>`);
|
|
16
|
-
el.shadowRoot.querySelector('button').click();
|
|
17
|
-
|
|
18
|
-
expect(el.counter).to.equal(6);
|
|
19
|
-
});
|
|
20
|
-
|
|
21
|
-
it('can override the title via attribute', async () => {
|
|
22
|
-
const el = await fixture(html`<pd-menu title="attribute title"></pd-menu>`);
|
|
23
|
-
|
|
24
|
-
expect(el.title).to.equal('attribute title');
|
|
25
|
-
});
|
|
26
|
-
|
|
27
|
-
it('passes the a11y audit', async () => {
|
|
28
|
-
const el = await fixture(html`<pd-menu></pd-menu>`);
|
|
29
|
-
|
|
30
|
-
await expect(el).shadowDom.to.be.accessible();
|
|
31
|
-
});
|
|
32
|
-
});
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
|
|
2
|
-
|
|
3
|
-
/** Use Hot Module replacement by adding --hmr to the start command */
|
|
4
|
-
const hmr = process.argv.includes('--hmr');
|
|
5
|
-
|
|
6
|
-
export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
|
|
7
|
-
open: '/demo/',
|
|
8
|
-
/** Use regular watch mode if HMR is not enabled. */
|
|
9
|
-
watch: !hmr,
|
|
10
|
-
/** Resolve bare module imports */
|
|
11
|
-
nodeResolve: {
|
|
12
|
-
exportConditions: ['browser', 'development'],
|
|
13
|
-
},
|
|
14
|
-
|
|
15
|
-
/** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
|
|
16
|
-
// esbuildTarget: 'auto'
|
|
17
|
-
|
|
18
|
-
/** Set appIndex to enable SPA routing */
|
|
19
|
-
// appIndex: 'demo/index.html',
|
|
20
|
-
|
|
21
|
-
plugins: [
|
|
22
|
-
/** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
|
|
23
|
-
// hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
|
|
24
|
-
],
|
|
25
|
-
|
|
26
|
-
// See documentation for all available options
|
|
27
|
-
});
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
// import { playwrightLauncher } from '@web/test-runner-playwright';
|
|
2
|
-
|
|
3
|
-
const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
|
|
4
|
-
|
|
5
|
-
export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
|
|
6
|
-
/** Test files to run */
|
|
7
|
-
files: 'test/**/*.test.js',
|
|
8
|
-
|
|
9
|
-
/** Resolve bare module imports */
|
|
10
|
-
nodeResolve: {
|
|
11
|
-
exportConditions: ['browser', 'development'],
|
|
12
|
-
},
|
|
13
|
-
|
|
14
|
-
/** Filter out lit dev mode logs */
|
|
15
|
-
filterBrowserLogs(log) {
|
|
16
|
-
for (const arg of log.args) {
|
|
17
|
-
if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
|
|
18
|
-
return false;
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
return true;
|
|
22
|
-
},
|
|
23
|
-
|
|
24
|
-
/** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
|
|
25
|
-
// esbuildTarget: 'auto',
|
|
26
|
-
|
|
27
|
-
/** Amount of browsers to run concurrently */
|
|
28
|
-
// concurrentBrowsers: 2,
|
|
29
|
-
|
|
30
|
-
/** Amount of test files per browser to test concurrently */
|
|
31
|
-
// concurrency: 1,
|
|
32
|
-
|
|
33
|
-
/** Browsers to run tests on */
|
|
34
|
-
// browsers: [
|
|
35
|
-
// playwrightLauncher({ product: 'chromium' }),
|
|
36
|
-
// playwrightLauncher({ product: 'firefox' }),
|
|
37
|
-
// playwrightLauncher({ product: 'webkit' }),
|
|
38
|
-
// ],
|
|
39
|
-
|
|
40
|
-
// See documentation for all available options
|
|
41
|
-
});
|
package/xliff/be.xlf
DELETED
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
-
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
|
|
3
|
-
<file target-language="be" source-language="de" original="lit-localize-inputs" datatype="plaintext">
|
|
4
|
-
<body>
|
|
5
|
-
<trans-unit id="sd1f44f1a8bc20e67">
|
|
6
|
-
<source>Email</source>
|
|
7
|
-
<target>Email</target>
|
|
8
|
-
<note from="lit-localize">#contactus.address.email#</note>
|
|
9
|
-
</trans-unit>
|
|
10
|
-
<trans-unit id="s0830a1e0d2456d9b">
|
|
11
|
-
<source>Nachricht</source>
|
|
12
|
-
<target>Type uw bericht hier</target>
|
|
13
|
-
<note from="lit-localize">#contactus.address.message#</note>
|
|
14
|
-
</trans-unit>
|
|
15
|
-
<trans-unit id="sef49aec68fd1dc66">
|
|
16
|
-
<source>Name</source>
|
|
17
|
-
<target>Naam</target>
|
|
18
|
-
<note from="lit-localize">#contactus.address.name#</note>
|
|
19
|
-
</trans-unit>
|
|
20
|
-
<trans-unit id="sab1114a5f102dedc">
|
|
21
|
-
<source>Telefon</source>
|
|
22
|
-
<target>Telefoon Nummer</target>
|
|
23
|
-
<note from="lit-localize">#contactus.address.phone#</note>
|
|
24
|
-
</trans-unit>
|
|
25
|
-
<trans-unit id="sc7dbfe3251f9a8db">
|
|
26
|
-
<source>Absenden</source>
|
|
27
|
-
<target>Verzenden</target>
|
|
28
|
-
<note from="lit-localize">#contactus.address.send#</note>
|
|
29
|
-
</trans-unit>
|
|
30
|
-
<trans-unit id="sdd2fffdf86bf5b6e">
|
|
31
|
-
<source>Adresse</source>
|
|
32
|
-
<target>Adres</target>
|
|
33
|
-
<note from="lit-localize">#contactus.address.title#</note>
|
|
34
|
-
</trans-unit>
|
|
35
|
-
<trans-unit id="sfb4410b48e95fa73">
|
|
36
|
-
<source>Kontakt</source>
|
|
37
|
-
<target>Contacteer ons</target>
|
|
38
|
-
<note from="lit-localize">#contactus.title#</note>
|
|
39
|
-
</trans-unit>
|
|
40
|
-
</body>
|
|
41
|
-
</file>
|
|
42
|
-
</xliff>
|