@progressive-development/pd-content 0.1.83 → 0.5.1

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.
Files changed (41) hide show
  1. package/dist/index.js +18 -0
  2. package/dist/locales/be.js +7 -0
  3. package/dist/locales/de.js +7 -0
  4. package/dist/locales/en.js +7 -0
  5. package/dist/pd-box-view.js +4 -0
  6. package/dist/pd-collapse.js +4 -0
  7. package/dist/pd-edit-content.js +4 -0
  8. package/dist/pd-more-info.js +4 -0
  9. package/dist/pd-resize-content.js +4 -0
  10. package/{src → dist/src}/PdBoxView.js +7 -6
  11. package/{src → dist/src}/PdCollapse.js +18 -24
  12. package/{src → dist/src}/PdEditContent.js +70 -88
  13. package/{src → dist/src}/PdMoreInfo.js +14 -29
  14. package/{src → dist/src}/PdResizeContent.js +11 -26
  15. package/package.json +40 -22
  16. package/.editorconfig +0 -29
  17. package/.storybook/main.js +0 -17
  18. package/.storybook/preview.js +0 -13
  19. package/demo/index.html +0 -29
  20. package/index.js +0 -1
  21. package/lit-localize.json +0 -18
  22. package/pd-box-view.js +0 -3
  23. package/pd-collapse.js +0 -3
  24. package/pd-edit-content.js +0 -3
  25. package/pd-more-info.js +0 -3
  26. package/pd-resize-content.js +0 -3
  27. package/src/generated/locale/be.js +0 -15
  28. package/src/generated/locale/de.js +0 -15
  29. package/src/generated/locale/en.js +0 -15
  30. package/src/generated/locale-codes.js +0 -27
  31. package/src/stories/box-view.stories.js +0 -65
  32. package/src/stories/collapse.stories.js +0 -36
  33. package/src/stories/edit-content.stories.js +0 -149
  34. package/src/stories/more-info.stories.js +0 -75
  35. package/src/stories/resize-content.stories.js +0 -28
  36. package/test/pd-content.test.js +0 -32
  37. package/web-dev-server.config.mjs +0 -27
  38. package/web-test-runner.config.mjs +0 -41
  39. package/xliff/be.xlf +0 -15
  40. package/xliff/de.xlf +0 -13
  41. package/xliff/en.xlf +0 -15
package/.editorconfig DELETED
@@ -1,29 +0,0 @@
1
- # EditorConfig helps developers define and maintain consistent
2
- # coding styles between different editors and IDEs
3
- # editorconfig.org
4
-
5
- root = true
6
-
7
-
8
- [*]
9
-
10
- # Change these settings to your own preference
11
- indent_style = space
12
- indent_size = 2
13
-
14
- # We recommend you to keep these unchanged
15
- end_of_line = lf
16
- charset = utf-8
17
- trim_trailing_whitespace = true
18
- insert_final_newline = true
19
-
20
- [*.md]
21
- trim_trailing_whitespace = false
22
-
23
- [*.json]
24
- indent_size = 2
25
-
26
- [*.{html,js,md}]
27
- block_comment_start = /**
28
- block_comment = *
29
- block_comment_end = */
@@ -1,17 +0,0 @@
1
- /** @type { import('@storybook/web-components-vite').StorybookConfig } */
2
- const config = {
3
- stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
4
- addons: [
5
- '@storybook/addon-links',
6
- '@storybook/addon-essentials',
7
- '@chromatic-com/storybook',
8
- ],
9
- framework: {
10
- name: '@storybook/web-components-vite',
11
- options: {},
12
- },
13
- docs: {
14
- autodocs: 'tag',
15
- },
16
- };
17
- export default config;
@@ -1,13 +0,0 @@
1
- /** @type { import('@storybook/web-components').Preview } */
2
- const preview = {
3
- parameters: {
4
- controls: {
5
- matchers: {
6
- color: /(background|color)$/i,
7
- date: /Date$/i,
8
- },
9
- },
10
- },
11
- };
12
-
13
- export default preview;
package/demo/index.html DELETED
@@ -1,29 +0,0 @@
1
- <!doctype html>
2
- <html lang="en-GB">
3
- <head>
4
- <meta charset="utf-8">
5
- <style>
6
- body {
7
- background: #fafafa;
8
- }
9
- </style>
10
- </head>
11
- <body>
12
- <div id="demo"></div>
13
-
14
- <script type="module">
15
- import { html, render } from 'lit';
16
- import '../pd-content.js';
17
-
18
- const title = 'Hello owc World!';
19
- render(
20
- html`
21
- <pd-content .title=${title}>
22
- some light-dom
23
- </pd-content>
24
- `,
25
- document.querySelector('#demo')
26
- );
27
- </script>
28
- </body>
29
- </html>
package/index.js DELETED
@@ -1 +0,0 @@
1
-
package/lit-localize.json DELETED
@@ -1,18 +0,0 @@
1
- {
2
- "$schema": "https://raw.githubusercontent.com/lit/lit/main/packages/localize-tools/config.schema.json",
3
- "sourceLocale": "dev",
4
- "targetLocales": ["de", "en", "be"],
5
- "inputFiles": [
6
- "src/**/*.js"
7
- ],
8
- "output": {
9
- "mode": "runtime",
10
- "localeCodesModule": "src/generated/locale-codes.js",
11
- "outputDir": "src/generated/locale"
12
-
13
- },
14
- "interchange": {
15
- "format": "xliff",
16
- "xliffDir": "./xliff/"
17
- }
18
- }
package/pd-box-view.js DELETED
@@ -1,3 +0,0 @@
1
- import { PdBoxView } from './src/PdBoxView.js';
2
-
3
- window.customElements.define('pd-box-view', PdBoxView);
package/pd-collapse.js DELETED
@@ -1,3 +0,0 @@
1
- import { PdCollapse } from './src/PdCollapse.js';
2
-
3
- window.customElements.define('pd-collapse', PdCollapse);
@@ -1,3 +0,0 @@
1
- import { PdEditContent } from './src/PdEditContent.js';
2
-
3
- window.customElements.define('pd-edit-content', PdEditContent);
package/pd-more-info.js DELETED
@@ -1,3 +0,0 @@
1
- import { PdMoreInfo } from './src/PdMoreInfo.js';
2
-
3
- window.customElements.define('pd-more-info', PdMoreInfo);
@@ -1,3 +0,0 @@
1
- import { PdResizeContent } from './src/PdResizeContent.js';
2
-
3
- window.customElements.define('pd-resize-content', PdResizeContent);
@@ -1,15 +0,0 @@
1
-
2
- // Do not modify this file by hand!
3
- // Re-generate this file by running lit-localize
4
-
5
-
6
-
7
-
8
- /* eslint-disable no-irregular-whitespace */
9
- /* eslint-disable @typescript-eslint/no-explicit-any */
10
-
11
- export const templates = {
12
- 'pd.moreInfo.less': `Minder informatie`,
13
- 'pd.moreInfo.more': `Meer informatie`,
14
- };
15
-
@@ -1,15 +0,0 @@
1
-
2
- // Do not modify this file by hand!
3
- // Re-generate this file by running lit-localize
4
-
5
-
6
-
7
-
8
- /* eslint-disable no-irregular-whitespace */
9
- /* eslint-disable @typescript-eslint/no-explicit-any */
10
-
11
- export const templates = {
12
- 'pd.moreInfo.more': `Mehr Informationen`,
13
- 'pd.moreInfo.less': `Text ausblenden`,
14
- };
15
-
@@ -1,15 +0,0 @@
1
-
2
- // Do not modify this file by hand!
3
- // Re-generate this file by running lit-localize
4
-
5
-
6
-
7
-
8
- /* eslint-disable no-irregular-whitespace */
9
- /* eslint-disable @typescript-eslint/no-explicit-any */
10
-
11
- export const templates = {
12
- 'pd.moreInfo.less': `Less information`,
13
- 'pd.moreInfo.more': `More information`,
14
- };
15
-
@@ -1,27 +0,0 @@
1
- // Do not modify this file by hand!
2
- // Re-generate this file by running lit-localize.
3
-
4
- /**
5
- * The locale code that templates in this source code are written in.
6
- */
7
- export const sourceLocale = `dev`;
8
-
9
- /**
10
- * The other locale codes that this application is localized into. Sorted
11
- * lexicographically.
12
- */
13
- export const targetLocales = [
14
- `be`,
15
- `de`,
16
- `en`,
17
- ];
18
-
19
- /**
20
- * All valid project locale codes. Sorted lexicographically.
21
- */
22
- export const allLocales = [
23
- `be`,
24
- `de`,
25
- `dev`,
26
- `en`,
27
- ];
@@ -1,65 +0,0 @@
1
- import { html } from 'lit';
2
- import '../../pd-box-view.js';
3
-
4
-
5
- export default {
6
- title: 'PdContent/Box View',
7
- component: 'pd-box-view',
8
- parameters: {
9
- actions: { argTypesRegex: '^on.*' },
10
- },
11
- argTypes: {
12
-
13
- },
14
- };
15
-
16
- function Template() {
17
- return html`
18
-
19
- <h1>4 Columns (default)</h1>
20
-
21
- <pd-box-view>
22
- <div style="background-color: blue;">Test</div>
23
- <div style="background-color: red;">Test</div>
24
- <div style="background-color: green;">Test</div>
25
- <div style="background-color: black;">Test</div>
26
- <div style="background-color: grey;">Test</div>
27
- <div style="background-color: purple;">Test</div>
28
- </pd-box-view>
29
-
30
- <h1>2 Columns</h1>
31
- <pd-box-view style="--pd-box-columns: 2;">
32
- <div style="background-color: blue;">Test</div>
33
- <div style="background-color: red;">Test</div>
34
- <div style="background-color: green;">Test</div>
35
- <div style="background-color: black;">Test</div>
36
- <div style="background-color: grey;">Test</div>
37
- <div style="background-color: purple;">Test</div>
38
- </pd-box-view>
39
-
40
- <h1>3 Columns / Custom Gap</h1>
41
- <pd-box-view style="--pd-box-columns: 3; --squi-box-gap: 100px;">
42
- <div style="background-color: blue;">Test</div>
43
- <div style="background-color: red;">Test</div>
44
- <div style="background-color: green;">Test</div>
45
- <div style="background-color: black;">Test</div>
46
- <div style="background-color: grey;">Test</div>
47
- <div style="background-color: purple;">Test</div>
48
- </pd-box-view>
49
-
50
- <h1>1 Columns</h1>
51
- <pd-box-view style="--pd-box-columns: 1;">
52
- <div style="background-color: blue;">Test</div>
53
- <div style="background-color: red;">Test</div>
54
- <div style="background-color: green;">Test</div>
55
- <div style="background-color: black;">Test</div>
56
- <div style="background-color: grey;">Test</div>
57
- <div style="background-color: purple;">Test</div>
58
- </pd-box-view>
59
- `;
60
- }
61
-
62
- export const BoxView = Template.bind({});
63
- BoxView.args = {
64
- };
65
-
@@ -1,36 +0,0 @@
1
- import { html } from 'lit';
2
- import '../../pd-collapse.js';
3
-
4
- export default {
5
- title: 'PdContent/Collapse',
6
- component: 'pd-collapse',
7
- argTypes: {
8
-
9
- },
10
- };
11
-
12
- function Template() {
13
- return html`
14
-
15
- <div style="width: 600px;">
16
- <pd-collapse>
17
-
18
- <div slot="header" class="header">
19
- Test Title
20
- </div>
21
-
22
- <div slot="content" class="form-group">
23
- <h1>Test H1</h1>
24
- <p>UUnd etwa spok sfopk op fsiuhi utfztef opdkgok iaszg6d f5d kzkzßkß 8e67tfgzguzb. Weitere Kommentare können auch mal die Breite übereizen.</p>
25
- </div>
26
-
27
- </pd-collapse>
28
- </div>
29
-
30
- `;
31
- }
32
-
33
- export const Collapse = Template.bind({});
34
- Collapse.args = {
35
- };
36
-
@@ -1,149 +0,0 @@
1
- import { html } from 'lit';
2
- import '../../pd-edit-content.js';
3
-
4
- export default {
5
- title: 'PdContent/Edit Content',
6
- component: 'pd-edit-content',
7
- argTypes: {
8
-
9
- },
10
- };
11
-
12
- const testIcon1 = html`<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
13
- viewBox="0 0 425.2 425.2" style="enable-background:new 0 0 425.2 425.2;" xml:space="preserve" class="own-edit-icon">
14
- <style type="text/css">
15
- .st0{fill:#ADD0D8;}
16
- .st1{fill:#FFC857;}
17
- .st2{fill:#177E89;}
18
- .st3{fill-rule:evenodd;clip-rule:evenodd;fill:#B2B2B2;}
19
- </style>
20
- <g id="Ebene_1_00000112609452286829237170000004421612674235114421_">
21
- </g>
22
- <path class="st0" d="M327.7,138.5c-5.2,0-9.4,4.2-9.4,9.4v36.8h-10.5v-8.4c0-20.9-17-37.8-37.8-37.8c-11.3,0-21.5,5-28.4,12.9
23
- c-6.9-7.9-17.1-12.9-28.4-12.9c-11.3,0-21.5,5-28.4,12.9c-6.9-7.9-17.1-12.9-28.4-12.9c-11.3,0-21.5,5-28.4,12.9
24
- c-6.9-7.9-17.1-12.9-28.4-12.9c-20.9,0-37.8,17-37.8,37.8v8.4h-19c-5.2,0-9.4,4.2-9.4,9.4s4.2,9.4,9.4,9.4h19V344
25
- c0,20.9,17,37.8,37.8,37.8c11.3,0,21.5-5,28.4-12.9c6.9,7.9,17.1,12.9,28.4,12.9s21.5-5,28.4-12.9c6.9,7.9,17.1,12.9,28.4,12.9
26
- s21.5-5,28.4-12.9c6.9,7.9,17.1,12.9,28.4,12.9c20.9,0,37.8-17,37.8-37.8V203.5h19.9c5.2,0,9.4-4.2,9.4-9.4v-46.2
27
- C337.1,142.7,332.9,138.5,327.7,138.5z M118.5,184.7v18.8V344c0,10.5-8.5,19-19,19s-19-8.5-19-19V203.5v-18.8v-8.4
28
- c0-10.5,8.5-19,19-19s19,8.5,19,19V184.7z M175.3,184.7v18.8V344c0,10.5-8.5,19-19,19s-19-8.5-19-19V203.5v-18.8v-8.4
29
- c0-10.5,8.5-19,19-19s19,8.5,19,19V184.7z M232.1,184.7v18.8V344c0,10.5-8.5,19-19,19s-19-8.5-19-19V203.5v-18.8v-8.4
30
- c0-10.5,8.5-19,19-19s19,8.5,19,19V184.7z M289,184.7v18.8V344c0,10.5-8.5,19-19,19s-19-8.5-19-19V203.5v-18.8v-8.4
31
- c0-10.5,8.5-19,19-19s19,8.5,19,19V184.7z"/>
32
- <g>
33
- <path class="st1" d="M171.8,111c8.4-10.8,12-21.8,7.8-35.1c-3.8-12.1-16.9-23.9-6.7-36c7.7-9.2-5.5-22.6-13.3-13.3
34
- c-8.5,10.1-12,20.8-7.8,33.7c4.1,12.7,16.9,24.3,6.7,37.4C151.2,107.1,164.4,120.6,171.8,111z"/>
35
- <path class="st1" d="M210.8,111c8.4-10.8,12-21.8,7.8-35.1c-3.8-12.1-16.9-23.9-6.7-36c7.7-9.2-5.5-22.6-13.3-13.3
36
- c-8.5,10.1-12,20.8-7.8,33.7c4.1,12.7,16.9,24.3,6.7,37.4C190.2,107.1,203.4,120.6,210.8,111z"/>
37
- </g>
38
- <circle class="st2" cx="305.6" cy="306.9" r="111.5"/>
39
- <path class="st3" d="M370.4,324.6c-1.5,5.3-3.6,10.4-6.3,15.3c0.5,0.5,14.7,18.4,5.9,27.2l-4.4,4.3c-6.6,6.6-23.1-3.7-27-6.3
40
- c-5.1,2.8-10.5,5-16.2,6.4h1.1c0,0-3.2,23.5-15.7,23.5h-4.3c-9.6,0-14.9-20.1-15.8-24c-5.5-1.6-11-3.8-15.9-6.8l0.9,0.9
41
- c0,0-18.5,14.6-27.5,5.8l-4-3.3c-6.8-6.8,4.2-24.6,6.3-28.2c-2.7-4.6-4.7-9.7-6.2-14.8c-3.7-0.9-24-6.2-24-15.8v-4.3
42
- c0-11.1,19.3-14.8,23.9-15.6c1.5-5.2,3.5-10.3,6.2-15c-2-3.2-13.5-21.1-6.6-27.9l4.2-3.5c7.8-7.8,23.9,3.3,27.6,6.1
43
- c4.7-2.7,9.9-4.9,15.3-6.4c1.1-4.7,6.4-23.5,15.7-23.5h4.3c10.7,0,14.6,18.2,15.5,23.4c5.4,1.5,10.6,3.6,15.5,6.3
44
- c4.1-2.6,20.8-12.9,27.4-6.3l4,4.2c7.7,7.7-2.9,23.2-6.1,27.4c2.7,4.7,4.9,9.9,6.3,15.3c1.4,0.2,23.4,3.5,23.4,15.7v4.3
45
- C393.8,318.1,375.3,323.4,370.4,324.6z M305.7,257.3c-27.4,0-49.6,22.2-49.6,49.6c0,27.4,22.2,49.6,49.6,49.6
46
- c27.4,0,49.6-22.2,49.6-49.6l0,0C355.3,279.5,333,257.3,305.7,257.3L305.7,257.3z M305.7,339.9c-18.3,0-33.1-14.8-33.1-33.1
47
- c0-18.3,14.8-33.1,33.1-33.1c18.3,0,33.1,14.8,33.1,33.1l0,0C338.8,325.1,324,339.9,305.7,339.9z M305.7,290.4
48
- c-9.2,0-16.5,7.3-16.5,16.5c0,9.2,7.3,16.5,16.5,16.5c9.2,0,16.5-7.3,16.5-16.5l0,0C322.2,297.7,314.8,290.4,305.7,290.4z"/>
49
- </svg>`;
50
-
51
- function BasicEditTemplate({editData}) {
52
- return html`
53
-
54
- <pd-box-view style="--squi-box-columns: 2;">
55
-
56
- <pd-edit-content contentTitle="Test content with slot" @edit-content="${(e) => {
57
- console.log("event: ", e);
58
- }}">
59
- <p>Some content for edit, could be added as own slot</p>
60
- <ul>
61
- <li>Das ist auch drinne</li>
62
- <li>Das ist auch drinne</li>
63
- <li>Das ist auch drinne</li>
64
- </ul>
65
- </pd-edit-content>
66
-
67
- <pd-edit-content contentTitle="Test content with params"
68
- .data="${editData}">
69
- </pd-edit-content>
70
-
71
- <pd-edit-content contentTitle="Test content without edit"
72
- .data="${editData}"
73
- editDisabled
74
- >
75
- </pd-edit-content>
76
-
77
- <pd-edit-content contentTitle="Test content with own links"
78
- .data="${editData}"
79
- editDisabled
80
- .editLinks="${
81
- [{ key: 2, txt: 'Bewerk e-mail', defaultIcon: true },
82
- { key: 2, txt: 'Anderes', defaultIcon: true },
83
- { key: 2, txt: 'Ausloggen', defaultIcon: false }]
84
- }"
85
- >
86
- </pd-edit-content>
87
-
88
- <pd-edit-content contentTitle="Test content with own icons"
89
- editDisabled
90
- .editLinks="${
91
- [{ key: 2, txt: 'Bewerk e-mail', icon: testIcon1 },
92
- { key: 2, txt: 'Anderes', icon: testIcon1 },
93
- { key: 2, txt: 'Ausloggen', icon: testIcon1 }]
94
- }"
95
- >
96
- <p>Some content for edit, could be added as own slot. Icons are hack-fixed with hard coded css...</p>
97
- </pd-edit-content>
98
- </pd-box-view>
99
- `;
100
- }
101
-
102
- function NumberEditTemplate({editData}) {
103
- return html`
104
- <style>
105
- .edit-boxes {
106
- display: flex;
107
- flex-flow: column;
108
- gap: 10px;
109
- }
110
- </style>
111
- <div class="edit-boxes">
112
- <pd-edit-content contentTitle="Test content with params and step number"
113
- .data="${editData}" stepNumber="1">
114
- </pd-edit-content>
115
-
116
- <pd-edit-content contentTitle="Test content with params and step number"
117
- .data="${editData}" stepNumber="2">
118
- </pd-edit-content>
119
-
120
- <pd-edit-content contentTitle="Test content with params and step number"
121
- .data="${editData}" stepNumber="3">
122
- </pd-edit-content>
123
-
124
- <pd-edit-content contentTitle="Test content with params and step number"
125
- .data="${editData}" stepNumber="4">
126
- </pd-edit-content>
127
- </div>`;
128
- }
129
-
130
-
131
-
132
- export const EditContent = BasicEditTemplate.bind({});
133
- EditContent.args = {
134
- editData: [
135
- {name: "Testwert1", val: "Value 1"},
136
- {name: "Testwert2", val: "Value 2"},
137
- {name: "Testwert3", val: "Value 3"}
138
- ]
139
- };
140
-
141
- export const NumberEditContent = NumberEditTemplate.bind({});
142
- NumberEditContent.args = {
143
- editData: [
144
- {name: "Testwert1", val: "Value 1"},
145
- {name: "Testwert2", val: "Value 2"},
146
- {name: "Testwert3", val: "Value 3"}
147
- ]
148
- };
149
-
@@ -1,75 +0,0 @@
1
- import { html } from 'lit';
2
- import '../../pd-more-info.js';
3
-
4
- export default {
5
- title: 'PdContent/More Info',
6
- component: 'pd-more-info',
7
- argTypes: {
8
-
9
- },
10
- };
11
-
12
- function Template() {
13
- return html`
14
- <h1>More Info Story</h1>
15
- <pd-more-info>
16
- <span slot="small-view">
17
- Een regelmatig onderhoud van uw verwarmingsinstallatie is
18
- essentieel en levert tal van voordelen op.
19
- </span>
20
- <span slot="large-view">
21
- <p>
22
- Een regelmatig onderhoud van uw verwarmingsinstallatie is
23
- essentieel en levert tal van voordelen op. Bovendien is door de
24
- Vlaamse overheid wettelijk verplicht het onderhoud tweejaarlijks
25
- te laten uitvoeren door een erkende technieker.
26
- </p>
27
- <p>
28
- Het regelmatig onderhouden van uw verwarmingsinstallatie levert
29
- tal van voordelen op:
30
- </p>
31
- <ul>
32
- <li>
33
- <b>Je bespaart energie</b> - Een vakkundig onderhoud zorgt
34
- voor een zuinige verwarmingsketel en lagere verwarmingskosten.
35
- Zo bespaar je op je energiefactuur.
36
- </li>
37
- <li>
38
- <b>Uw veiligheid</b> - Vermijd gevaarlijke situaties, zoals
39
- CO-vergiftiging of schouwbrand.
40
- </li>
41
- <li>
42
- <b>U beperkt het risico op pannes</b> - Door regelmatig uw
43
- verwarmingsinstallatie te onderhouden, verklein je de kans op
44
- defecten en vermijd je hoge herstellingskosten. Bovendien gaat
45
- je verwarmingsketel gaat langer mee.
46
- </li>
47
- <li>
48
- <b>U bent wettelijk in orde</b> - Het onderhouden van uw
49
- verwarmingsinstallatie is verplicht in Vlaanderen.
50
- </li>
51
- </ul>
52
- <ul>
53
- <li>
54
- Verwarmingsketels op gas (aardgas, butaan, propaan) moeten
55
- 2-jaarlijks een onderhoudsbeurt krijgen.
56
- </li>
57
- <li>
58
- Verwarmingsketels op stookolie (mazout) of vaste brandstof
59
- (hout, pellets, steenkool, ...) moeten jaarlijks een
60
- onderhoudsbeurt krijgen.
61
- </li>
62
- <li>
63
- Het onderhoud op een gas- of stookolieketel moet uitgevoerd
64
- worden door een erkende technicus.
65
- </li>
66
- </ul>
67
- </span>
68
- </pd-more-info>
69
- `;
70
- }
71
-
72
- export const MoreInfo = Template.bind({});
73
- MoreInfo.args = {
74
- };
75
-
@@ -1,28 +0,0 @@
1
- /* eslint-disable lit-a11y/alt-text */
2
- import { html } from 'lit';
3
- import '../../pd-resize-content.js';
4
-
5
- export default {
6
- title: 'PdContent/Resize Content',
7
- component: 'pd-resize-content',
8
- argTypes: {
9
-
10
- },
11
- };
12
-
13
- function Template() {
14
- return html`
15
- <pd-resize-content>
16
- <div slot="preview-content">Eine kurze Vorschau</div>
17
- <div slot="resize-content">
18
- <p>Hier steht dann etwaslängerer Text und alles weiteree auch es kann lang und groß werden</p>
19
- <img src="https://bilder.t-online.de/b/84/93/82/46/id_84938246/920/tid_da/eichhoernchen-geert-weggen-zeigt-die-welt-der-kleinen-nager-.jpg">
20
- </div>
21
- </pd-resize-content>
22
- `;
23
- }
24
-
25
- export const ResizeContent = Template.bind({});
26
- ResizeContent.args = {
27
- };
28
-
@@ -1,32 +0,0 @@
1
- import { html } from 'lit';
2
- import { fixture, expect } from '@open-wc/testing';
3
-
4
- import '../pd-content.js';
5
-
6
- describe('PdContent', () => {
7
- it('has a default title "Hey there" and counter 5', async () => {
8
- const el = await fixture(html`<pd-content></pd-content>`);
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-content></pd-content>`);
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-content title="attribute title"></pd-content>`);
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-content></pd-content>`);
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
- });