@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.
@@ -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 = {};
@@ -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>