@progressive-development/pd-content 0.0.52 → 0.1.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/package.json +9 -8
- package/src/PdCollapse.js +37 -100
- package/src/PdEditContent.js +29 -37
- package/src/PdMoreInfo.js +15 -14
- package/src/PdResizeContent.js +2 -0
- package/stories/box-view.stories.js +3 -3
- package/stories/collapse.stories.js +5 -3
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Progressive Development content components. ",
|
|
4
4
|
"license": "SEE LICENSE IN LICENSE",
|
|
5
5
|
"author": "PD Progressive Development UG",
|
|
6
|
-
"version": "0.0
|
|
6
|
+
"version": "0.1.0",
|
|
7
7
|
"main": "index.js",
|
|
8
8
|
"module": "index.js",
|
|
9
9
|
"scripts": {
|
|
@@ -17,23 +17,24 @@
|
|
|
17
17
|
"storybook:build": "npm run analyze -- --exclude dist && build-storybook"
|
|
18
18
|
},
|
|
19
19
|
"dependencies": {
|
|
20
|
-
"@progressive-development/pd-dialog": "0.
|
|
21
|
-
"@progressive-development/pd-icon": "^0.1.
|
|
22
|
-
"
|
|
20
|
+
"@progressive-development/pd-dialog": "0.1.1",
|
|
21
|
+
"@progressive-development/pd-icon": "^0.1.9",
|
|
22
|
+
"@progressive-development/pd-shared-styles": "^0.1.1",
|
|
23
|
+
"lit": "^2.2.0",
|
|
23
24
|
"pwa-helpers": "^0.9.0"
|
|
24
25
|
},
|
|
25
26
|
"devDependencies": {
|
|
26
27
|
"@custom-elements-manifest/analyzer": "^0.4.17",
|
|
27
28
|
"@open-wc/eslint-config": "^4.3.0",
|
|
28
29
|
"@open-wc/testing": "next",
|
|
29
|
-
"@web/dev-server": "^0.1.
|
|
30
|
+
"@web/dev-server": "^0.1.30",
|
|
30
31
|
"@web/dev-server-storybook": "next",
|
|
31
|
-
"@web/test-runner": "^0.13.
|
|
32
|
+
"@web/test-runner": "^0.13.27",
|
|
32
33
|
"eslint": "^7.32.0",
|
|
33
|
-
"eslint-config-prettier": "^8.
|
|
34
|
+
"eslint-config-prettier": "^8.4.0",
|
|
34
35
|
"husky": "^4.3.8",
|
|
35
36
|
"lint-staged": "^10.5.4",
|
|
36
|
-
"prettier": "^2.
|
|
37
|
+
"prettier": "^2.5.1"
|
|
37
38
|
},
|
|
38
39
|
"customElements": "custom-elements.json",
|
|
39
40
|
"eslintConfig": {
|
package/src/PdCollapse.js
CHANGED
|
@@ -4,130 +4,81 @@
|
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
import { css, html, LitElement } from 'lit';
|
|
7
|
+
import { ICON_TOGGLE_COLLAPSE as toogleCollapse } from '@progressive-development/pd-icon/src/PdIcon.js';
|
|
7
8
|
import '@progressive-development/pd-icon/pd-icon.js';
|
|
8
9
|
|
|
10
|
+
import { PDColorStyles, PDFontStyles } from '@progressive-development/pd-shared-styles';
|
|
11
|
+
|
|
9
12
|
export class PdCollapse extends LitElement {
|
|
10
13
|
static get properties() {
|
|
11
14
|
return {
|
|
12
15
|
active: { type: Boolean },
|
|
13
|
-
popup: { type: Boolean },
|
|
14
16
|
icon: { type: String },
|
|
15
17
|
};
|
|
16
18
|
}
|
|
17
19
|
|
|
18
20
|
constructor() {
|
|
19
21
|
super();
|
|
20
|
-
this.active = false;
|
|
21
|
-
this.popup = false;
|
|
22
|
-
this.icon = 'toggleCollapse';
|
|
22
|
+
this.active = false;
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
static get styles() {
|
|
26
26
|
return [
|
|
27
|
+
PDColorStyles, PDFontStyles,
|
|
27
28
|
css`
|
|
28
|
-
:host {
|
|
29
|
-
/* Define customizeabled props */
|
|
30
|
-
--my-content-background-color: var(--squi-background-color, white);
|
|
31
|
-
|
|
32
|
-
--my-header-background-color: var(--squi-background-color, #084c61);
|
|
33
|
-
--my-header-background-hover-color: var(
|
|
34
|
-
--squi-background-hover-color,
|
|
35
|
-
#177e89
|
|
36
|
-
);
|
|
37
|
-
--my-header-font-color: var(--app-display-font, white);
|
|
38
|
-
|
|
39
|
-
--my-icon-fill-color: var(--squi-text-color, white);
|
|
40
|
-
--my-icon-fill-active-color: var(--squi-text-color, white);
|
|
41
|
-
|
|
42
|
-
--my-icon-fill-hover-color: var(--squi-text-color, yellow);
|
|
43
|
-
--my-icon-fill-active-hover-color: var(--squi-text-color, yellow);
|
|
44
|
-
|
|
45
|
-
--my-border-px: var(--squi-border-px, 1px);
|
|
46
|
-
--my-border-gradient-color1: var(
|
|
47
|
-
--squi-background-gradient-color1,
|
|
48
|
-
#24a3b9
|
|
49
|
-
);
|
|
50
|
-
--my-border-gradient-color2: var(
|
|
51
|
-
--squi-background-gradient-color2,
|
|
52
|
-
#23636e
|
|
53
|
-
);
|
|
54
|
-
|
|
55
|
-
--my-font: var(--app-display-font, Oswald);
|
|
56
|
-
|
|
29
|
+
:host {
|
|
57
30
|
display: block;
|
|
58
31
|
width: 100%;
|
|
59
32
|
position: relative;
|
|
60
33
|
overflow: visible;
|
|
61
|
-
|
|
62
|
-
--pd-icon-fill: var(--my-icon-fill-color);
|
|
63
|
-
--pd-icon-fill-active: var(--my-icon-fill-active-color);
|
|
64
|
-
}
|
|
65
|
-
:host([popup]) {
|
|
66
|
-
position: unset;
|
|
67
34
|
}
|
|
35
|
+
|
|
68
36
|
:host .content.open {
|
|
69
|
-
border:
|
|
70
|
-
|
|
71
|
-
border-width: var(--my-border-px);
|
|
72
|
-
border-image-source: linear-gradient(
|
|
73
|
-
to left,
|
|
74
|
-
var(--my-border-gradient-color1),
|
|
75
|
-
var(--my-border-gradient-color2)
|
|
76
|
-
);
|
|
77
|
-
box-shadow: var(--squi-box-shadow);
|
|
78
|
-
background: var(--my-content-background-color);
|
|
37
|
+
border: 2px solid var(--pd-default-light-col);
|
|
38
|
+
background: var(--pd-collapse-content-bg-col, var(--pd-default-bg-col));
|
|
79
39
|
margin-bottom: 1rem;
|
|
80
40
|
position: relative;
|
|
81
41
|
overflow: visible;
|
|
82
42
|
}
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
var(--game-color-light),
|
|
92
|
-
var(--game-color-dark)
|
|
93
|
-
); /* ToDo */
|
|
94
|
-
overflow-y: auto;
|
|
95
|
-
z-index: 2;
|
|
96
|
-
margin-bottom: 0;
|
|
97
|
-
}
|
|
98
|
-
/*
|
|
99
|
-
:host([active]) {
|
|
100
|
-
visibility: visible;
|
|
101
|
-
}
|
|
102
|
-
*/
|
|
103
|
-
::slotted(.header) {
|
|
104
|
-
display: flex;
|
|
105
|
-
align-items: center;
|
|
43
|
+
|
|
44
|
+
pd-icon {
|
|
45
|
+
--pd-icon-stroke-col-active: var(--pd-default-bg-col);
|
|
46
|
+
--pd-icon-col-active: var(--pd-default-dark-col);
|
|
47
|
+
--pd-icon-col-hover: var(--pd-default-dark-col);
|
|
48
|
+
--pd-icon-stroke-col-hover: var(--pd-default-hover-col);
|
|
49
|
+
--pd-icon-col-active-hover: var(--pd-default-dark-col);
|
|
50
|
+
--pd-icon-stroke-col-active-hover: var(--pd-default-hover-col);
|
|
106
51
|
}
|
|
52
|
+
|
|
107
53
|
.trigger {
|
|
108
|
-
background: var(--
|
|
109
|
-
font-family: var(--
|
|
110
|
-
|
|
111
|
-
color: var(--
|
|
54
|
+
background: var(--pd-collapse-bg-col, var(--pd-default-col));
|
|
55
|
+
font-family: var(--pd-default-font-title-family);
|
|
56
|
+
font-weight: bold;
|
|
57
|
+
color: var(--pd-collapse-font-col, var(--pd-default-bg-col));
|
|
112
58
|
transition-property: box-shadow, background;
|
|
113
59
|
transition: 0.2s ease-in;
|
|
114
60
|
cursor: pointer;
|
|
115
|
-
font-size: 1rem;
|
|
61
|
+
font-size: var(--pd-collapse-header-font-size, 1rem);
|
|
116
62
|
padding: 0.5rem;
|
|
117
63
|
display: flex;
|
|
118
64
|
justify-content: space-between;
|
|
119
65
|
box-sizing: border-box;
|
|
120
66
|
position: relative;
|
|
121
67
|
}
|
|
68
|
+
|
|
69
|
+
::slotted(.header) {
|
|
70
|
+
display: flex;
|
|
71
|
+
align-items: center;
|
|
72
|
+
}
|
|
73
|
+
|
|
122
74
|
.trigger:hover {
|
|
123
|
-
|
|
124
|
-
background: var(--my-header-background-hover-color);
|
|
125
|
-
--pd-icon-fill: var(--my-icon-fill-hover-color);
|
|
126
|
-
--pd-icon-fill-active: var(--my-icon-fill-active-hover-color);
|
|
75
|
+
background: var(--pd-collapse-hover-col, var(--pd-default-dark-col));
|
|
127
76
|
}
|
|
77
|
+
|
|
128
78
|
.trigger.closed {
|
|
129
79
|
margin-bottom: 1rem;
|
|
130
80
|
}
|
|
81
|
+
|
|
131
82
|
.content {
|
|
132
83
|
will-change: transform;
|
|
133
84
|
height: 0;
|
|
@@ -137,23 +88,16 @@ export class PdCollapse extends LitElement {
|
|
|
137
88
|
visibility: hidden;
|
|
138
89
|
transform: translate3d(0, -100%, 0);
|
|
139
90
|
box-sizing: border-box;
|
|
91
|
+
|
|
92
|
+
padding: 0.5em;
|
|
140
93
|
}
|
|
94
|
+
|
|
141
95
|
.content.open {
|
|
142
96
|
visibility: visible;
|
|
143
97
|
height: auto;
|
|
144
98
|
transform: translate3d(0, 0, 0);
|
|
145
99
|
overflow-y: auto;
|
|
146
100
|
}
|
|
147
|
-
.open .close-link {
|
|
148
|
-
position: fixed;
|
|
149
|
-
right: 0;
|
|
150
|
-
--pd-icon-fill: var(--app-primary-color);
|
|
151
|
-
--pd-icon-fill-active: var(--game-color-dark);
|
|
152
|
-
}
|
|
153
|
-
@media (min-width: 460px) {
|
|
154
|
-
:host {
|
|
155
|
-
}
|
|
156
|
-
}
|
|
157
101
|
`,
|
|
158
102
|
];
|
|
159
103
|
}
|
|
@@ -185,19 +129,12 @@ export class PdCollapse extends LitElement {
|
|
|
185
129
|
>
|
|
186
130
|
<slot name="header"></slot>
|
|
187
131
|
<pd-icon
|
|
188
|
-
icon="${
|
|
132
|
+
icon="${toogleCollapse}"
|
|
189
133
|
?activeIcon="${this.active}"
|
|
190
|
-
class="small"
|
|
134
|
+
class="small primary"
|
|
191
135
|
></pd-icon>
|
|
192
136
|
</div>
|
|
193
137
|
<div class="content ${this.active ? 'open' : 'closed'}">
|
|
194
|
-
${this.popup
|
|
195
|
-
? html`<pd-icon
|
|
196
|
-
@click="${this.onClick}"
|
|
197
|
-
icon="closeLink"
|
|
198
|
-
class="link round close-link"
|
|
199
|
-
></pd-icon>`
|
|
200
|
-
: ''}
|
|
201
138
|
<slot name="content"></slot>
|
|
202
139
|
</div> `;
|
|
203
140
|
}
|
package/src/PdEditContent.js
CHANGED
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import { LitElement, html, css } from 'lit';
|
|
9
|
+
import { PDColorStyles, PDFontStyles } from '@progressive-development/pd-shared-styles';
|
|
9
10
|
|
|
10
11
|
const editIcon = html`<svg
|
|
11
12
|
class="edit"
|
|
@@ -44,55 +45,46 @@
|
|
|
44
45
|
*/
|
|
45
46
|
|
|
46
47
|
static get styles() {
|
|
47
|
-
return
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
48
|
+
return [
|
|
49
|
+
PDColorStyles, PDFontStyles,
|
|
50
|
+
css`
|
|
51
|
+
:host {
|
|
52
52
|
display: block;
|
|
53
53
|
}
|
|
54
54
|
|
|
55
|
-
h1,
|
|
56
|
-
h2,
|
|
57
|
-
h3,
|
|
58
|
-
h4 {
|
|
59
|
-
color: var(--my-text-color, #084c61);
|
|
60
|
-
font-family: var(--my-font, Oswald);
|
|
61
|
-
/*
|
|
62
|
-
font-weight: bold;
|
|
63
|
-
font-size: 2em;
|
|
64
|
-
*/
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
/* TODO: Temporär, remove here... */
|
|
68
55
|
h4 {
|
|
69
|
-
font-
|
|
56
|
+
font-family: var(--pd-default-font-title-family);
|
|
57
|
+
font-size: var(--pd-ec-font-title-size, 1.2em);
|
|
70
58
|
margin-top: 0px;
|
|
71
59
|
margin-bottom: 2px;
|
|
72
60
|
line-height: 40px;
|
|
73
|
-
color:
|
|
61
|
+
color: var(--pd-ec-font-title-col, var(--pd-default-bg-col));
|
|
74
62
|
padding-left: 5px;
|
|
75
63
|
}
|
|
76
64
|
|
|
77
65
|
.header {
|
|
78
66
|
display: flex;
|
|
79
67
|
gap: 5px;
|
|
80
|
-
background-color: var(--
|
|
68
|
+
background-color: var(--pd-ec-bg-col, var(--pd-default-col));
|
|
81
69
|
align-items: center;
|
|
82
70
|
}
|
|
83
71
|
|
|
84
72
|
.circle {
|
|
85
73
|
margin-left: 5px;
|
|
86
|
-
|
|
87
|
-
|
|
74
|
+
display: flex;
|
|
75
|
+
align-items: center;
|
|
76
|
+
justify-content: center;
|
|
77
|
+
width: 27px;
|
|
78
|
+
height: 27px;
|
|
88
79
|
border-radius: 50%;
|
|
89
|
-
background-color:
|
|
90
|
-
text-align: center;
|
|
80
|
+
background-color: var(--pd-ec-font-title-col, var(--pd-default-bg-col));
|
|
91
81
|
}
|
|
92
82
|
|
|
93
83
|
.step-number {
|
|
94
|
-
font-family: var(--
|
|
95
|
-
|
|
84
|
+
font-family: var(--pd-default-font-title-family);
|
|
85
|
+
font-size: var(--pd-ec-font-title-size, 1.2em);
|
|
86
|
+
font-weight: var(--pd-ec-nr-font-weight, bold); ;
|
|
87
|
+
color: var(--pd-ec-bg-col, var(--pd-default-col));
|
|
96
88
|
}
|
|
97
89
|
|
|
98
90
|
/* Temporär? Hier noch sehr aufwendig mit div/span? */
|
|
@@ -106,20 +98,20 @@
|
|
|
106
98
|
|
|
107
99
|
/* Temporär */
|
|
108
100
|
a {
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
101
|
+
cursor: pointer;
|
|
102
|
+
font-family: var(--pd-default-font-link-family);
|
|
103
|
+
font-size: var(--pd-default-font-link-size);
|
|
104
|
+
color: var(--pd-default-font-link-col);
|
|
105
|
+
--edit-fill-color: var(--pd-default-font-link-col);
|
|
112
106
|
}
|
|
113
107
|
a:hover {
|
|
114
|
-
color:
|
|
115
|
-
|
|
116
|
-
--edit-fill-color: purple;
|
|
108
|
+
color: var(--pd-default-font-link-col-hover);
|
|
109
|
+
--edit-fill-color: var(--pd-default-font-link-col-hover);
|
|
117
110
|
}
|
|
118
111
|
|
|
119
112
|
.edit {
|
|
120
|
-
width: 1em;
|
|
121
|
-
|
|
122
|
-
}
|
|
113
|
+
width: 1.1em;
|
|
114
|
+
}
|
|
123
115
|
/*
|
|
124
116
|
could used as class for given svg icons, workaround class
|
|
125
117
|
hard coded for specific icon => maybe use custom properties here, but not for that hack...
|
|
@@ -154,7 +146,7 @@
|
|
|
154
146
|
width: 130px;
|
|
155
147
|
}
|
|
156
148
|
}
|
|
157
|
-
|
|
149
|
+
`];
|
|
158
150
|
}
|
|
159
151
|
|
|
160
152
|
static get properties() {
|
package/src/PdMoreInfo.js
CHANGED
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import { LitElement, html, css } from 'lit';
|
|
9
|
+
import { PDFontStyles } from '@progressive-development/pd-shared-styles';
|
|
9
10
|
|
|
10
11
|
/**
|
|
11
12
|
* An example element.
|
|
@@ -15,31 +16,31 @@ import { LitElement, html, css } from 'lit';
|
|
|
15
16
|
*/
|
|
16
17
|
export class PdMoreInfo extends LitElement {
|
|
17
18
|
static get styles() {
|
|
18
|
-
return
|
|
19
|
+
return [
|
|
20
|
+
PDFontStyles,
|
|
21
|
+
css`
|
|
19
22
|
:host {
|
|
20
23
|
display: block;
|
|
21
24
|
}
|
|
22
25
|
|
|
23
26
|
p {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
color: #323031;
|
|
29
|
-
font-size: 1.1rem;
|
|
27
|
+
color: var(--pd-default-font-content-col);
|
|
28
|
+
font-size: var(--pd-default-font-content-size);
|
|
29
|
+
font-family: var(--pd-default-font-content-family);
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
a {
|
|
33
|
-
|
|
34
|
-
|
|
33
|
+
cursor: pointer;
|
|
34
|
+
font-family: var(--pd-default-font-link-family);
|
|
35
|
+
font-size: var(--pd-default-font-link-size);
|
|
36
|
+
color: var(--pd-default-font-link-col);
|
|
35
37
|
}
|
|
36
38
|
|
|
37
39
|
a:hover {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
`;
|
|
40
|
+
color: var(--pd-default-font-link-col-hover);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
`];
|
|
43
44
|
}
|
|
44
45
|
|
|
45
46
|
static get properties() {
|
package/src/PdResizeContent.js
CHANGED
|
@@ -11,6 +11,8 @@ import '@progressive-development/pd-dialog/pd-popup.js';
|
|
|
11
11
|
|
|
12
12
|
/**
|
|
13
13
|
* An example element.
|
|
14
|
+
*
|
|
15
|
+
* !!! Not refactored at the moment (not in use) !!! (pd-component and css refactoring from 2022/02))
|
|
14
16
|
*
|
|
15
17
|
* @slot - This element has a slot
|
|
16
18
|
* @csspart button - The button
|
|
@@ -24,7 +24,7 @@ function Template() {
|
|
|
24
24
|
</pd-box-view>
|
|
25
25
|
|
|
26
26
|
<h1>2 Columns</h1>
|
|
27
|
-
<pd-box-view style="--
|
|
27
|
+
<pd-box-view style="--pd-box-columns: 2;">
|
|
28
28
|
<div style="background-color: blue;">Test</div>
|
|
29
29
|
<div style="background-color: red;">Test</div>
|
|
30
30
|
<div style="background-color: green;">Test</div>
|
|
@@ -34,7 +34,7 @@ function Template() {
|
|
|
34
34
|
</pd-box-view>
|
|
35
35
|
|
|
36
36
|
<h1>3 Columns / Custom Gap</h1>
|
|
37
|
-
<pd-box-view style="--
|
|
37
|
+
<pd-box-view style="--pd-box-columns: 3; --squi-box-gap: 100px;">
|
|
38
38
|
<div style="background-color: blue;">Test</div>
|
|
39
39
|
<div style="background-color: red;">Test</div>
|
|
40
40
|
<div style="background-color: green;">Test</div>
|
|
@@ -44,7 +44,7 @@ function Template() {
|
|
|
44
44
|
</pd-box-view>
|
|
45
45
|
|
|
46
46
|
<h1>1 Columns</h1>
|
|
47
|
-
<pd-box-view style="--
|
|
47
|
+
<pd-box-view style="--pd-box-columns: 1;">
|
|
48
48
|
<div style="background-color: blue;">Test</div>
|
|
49
49
|
<div style="background-color: red;">Test</div>
|
|
50
50
|
<div style="background-color: green;">Test</div>
|
|
@@ -11,7 +11,8 @@ export default {
|
|
|
11
11
|
|
|
12
12
|
function Template() {
|
|
13
13
|
return html`
|
|
14
|
-
|
|
14
|
+
|
|
15
|
+
<div style="width: 600px;">
|
|
15
16
|
<pd-collapse>
|
|
16
17
|
|
|
17
18
|
<div slot="header" class="header">
|
|
@@ -19,11 +20,12 @@ function Template() {
|
|
|
19
20
|
</div>
|
|
20
21
|
|
|
21
22
|
<div slot="content" class="form-group">
|
|
22
|
-
Test
|
|
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>
|
|
23
25
|
</div>
|
|
24
26
|
|
|
25
27
|
</pd-collapse>
|
|
26
|
-
|
|
28
|
+
</div>
|
|
27
29
|
|
|
28
30
|
`;
|
|
29
31
|
}
|