@progressive-development/pd-content 0.0.13 → 0.0.15

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 (4) hide show
  1. package/.storybook/preview-head.html +2 -0
  2. package/package.json +5 -5
  3. package/src/PdEditContent.js +80 -42
  4. package/stories/edit-content.stories.js +120 -5
package/.storybook/preview-head.html ADDED
@@ -0,0 +1,2 @@
1
+ <link rel="preconnect" href="https://fonts.gstatic.com">
2
+ <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&family=Oswald:wght@700&display=swap" rel="stylesheet">
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.13",
6
+ "version": "0.0.15",
7
7
  "main": "index.js",
8
8
  "module": "index.js",
9
9
  "scripts": {
@@ -18,17 +18,17 @@
18
18
  },
19
19
  "dependencies": {
20
20
  "lit": "^2.0.2",
21
- "@progressive-development/pd-icon": "0.0.8",
22
- "@progressive-development/pd-dialog": "0.0.12",
21
+ "@progressive-development/pd-icon": "^0.0.9",
22
+ "@progressive-development/pd-dialog": "^0.0.13",
23
23
  "pwa-helpers": "^0.9.0"
24
24
  },
25
25
  "devDependencies": {
26
26
  "@custom-elements-manifest/analyzer": "^0.4.17",
27
27
  "@open-wc/eslint-config": "^4.3.0",
28
28
  "@open-wc/testing": "next",
29
- "@web/dev-server": "^0.1.25",
29
+ "@web/dev-server": "^0.1.28",
30
30
  "@web/dev-server-storybook": "next",
31
- "@web/test-runner": "^0.13.20",
31
+ "@web/test-runner": "^0.13.21",
32
32
  "eslint": "^7.32.0",
33
33
  "eslint-config-prettier": "^8.3.0",
34
34
  "husky": "^4.3.8",
package/src/PdEditContent.js CHANGED
@@ -7,6 +7,31 @@
7
7
 
8
8
  import { LitElement, html, css } from 'lit';
9
9
 
10
+ const editIcon = html`<svg
11
+ class="edit"
12
+ id="Layer_1"
13
+ version="1.1"
14
+ viewBox="0 0 19 19"
15
+ xml:space="preserve"
16
+ xmlns="http://www.w3.org/2000/svg"
17
+ xmlns:xlink="http://www.w3.org/1999/xlink"
18
+ >
19
+ <g>
20
+ <path
21
+ d="M8.44,7.25C8.348,7.342,8.277,7.447,8.215,7.557L8.174,7.516L8.149,7.69 C8.049,7.925,8.014,8.183,8.042,8.442l-0.399,2.796l2.797-0.399c0.259,0.028,0.517-0.007,0.752-0.107l0.174-0.024l-0.041-0.041 c0.109-0.062,0.215-0.133,0.307-0.225l5.053-5.053l-3.191-3.191L8.44,7.25z"
22
+ fill="var(--edit-fill-color)"
23
+ />
24
+ <path
25
+ d="M18.183,1.568l-0.87-0.87c-0.641-0.641-1.637-0.684-2.225-0.097l-0.797,0.797l3.191,3.191l0.797-0.798 C18.867,3.205,18.824,2.209,18.183,1.568z"
26
+ fill="var(--edit-fill-color)"
27
+ />
28
+ <path
29
+ d="M15,9.696V17H2V2h8.953l1.523-1.42c0.162-0.161,0.353-0.221,0.555-0.293 c0.043-0.119,0.104-0.18,0.176-0.287H0v19h17V7.928L15,9.696z"
30
+ fill="var(--edit-fill-color)"
31
+ />
32
+ </g>
33
+ </svg>`;
34
+
10
35
  /**
11
36
  * An example element.
12
37
  *
@@ -83,18 +108,43 @@
83
108
  a {
84
109
  font-size: 0.8em;
85
110
  color: blue;
111
+ --edit-fill-color: blue;
86
112
  }
87
113
  a:hover {
88
114
  color: purple;
89
115
  cursor: pointer;
116
+ --edit-fill-color: purple;
90
117
  }
91
118
 
92
119
  .edit {
93
- width: 1em;
120
+ width: 1em;
121
+
122
+ }
123
+ /*
124
+ could used as class for given svg icons, workaround class
125
+ hard coded for specific icon => maybe use custom properties here, but not for that hack...
126
+ */
127
+ .own-edit-icon {
128
+ width: 2em;
129
+ margin-top: -10px;
94
130
  }
95
-
96
- .editLink {
97
- padding-right: 10px;
131
+
132
+ .link-row {
133
+ padding-top: 5px;
134
+ display: flex;
135
+ flex-wrap: wrap;
136
+ gap: 15px;
137
+ }
138
+
139
+ .link-item {
140
+ display: flex;
141
+ gap: 2px;
142
+ white-space: nowrap;
143
+ align-items: center;
144
+ }
145
+
146
+ .param-data {
147
+ padding-bottom: 10px;
98
148
  }
99
149
 
100
150
  @media (max-width: 360px) {
@@ -138,61 +188,49 @@
138
188
  </div>
139
189
  <div>
140
190
  ${this.data
141
- ? this.data.map(
142
- dataEntry => html`
143
- <div>
144
- <span class="label">${dataEntry.name}</span>
145
- <span class="value">${dataEntry.val}</span>
146
- </div>
147
- `
148
- )
191
+ ? html`
192
+ <div class="param-data">
193
+ ${this.data.map(
194
+ dataEntry => html`
195
+ <div>
196
+ <span class="label">${dataEntry.name}</span>
197
+ <span class="value">${dataEntry.val}</span>
198
+ </div>
199
+ `
200
+ )}
201
+ </div>`
149
202
  : ''}
150
203
  <slot></slot>
151
- <p>
204
+ <div class="link-row">
152
205
  ${this.editDisabled
153
206
  ? ''
154
207
  : html`
155
208
  <a @click="${this._editContent}">
156
- <svg
157
- class="edit"
158
- id="Layer_1"
159
- version="1.1"
160
- viewBox="0 0 19 19"
161
- xml:space="preserve"
162
- xmlns="http://www.w3.org/2000/svg"
163
- xmlns:xlink="http://www.w3.org/1999/xlink"
164
- >
165
- <g>
166
- <path
167
- d="M8.44,7.25C8.348,7.342,8.277,7.447,8.215,7.557L8.174,7.516L8.149,7.69 C8.049,7.925,8.014,8.183,8.042,8.442l-0.399,2.796l2.797-0.399c0.259,0.028,0.517-0.007,0.752-0.107l0.174-0.024l-0.041-0.041 c0.109-0.062,0.215-0.133,0.307-0.225l5.053-5.053l-3.191-3.191L8.44,7.25z"
168
- fill="blue"
169
- />
170
- <path
171
- d="M18.183,1.568l-0.87-0.87c-0.641-0.641-1.637-0.684-2.225-0.097l-0.797,0.797l3.191,3.191l0.797-0.798 C18.867,3.205,18.824,2.209,18.183,1.568z"
172
- fill="blue"
173
- />
174
- <path
175
- d="M15,9.696V17H2V2h8.953l1.523-1.42c0.162-0.161,0.353-0.221,0.555-0.293 c0.043-0.119,0.104-0.18,0.176-0.287H0v19h17V7.928L15,9.696z"
176
- fill="blue"
177
- />
178
- </g>
179
- </svg>
180
- Bewerk ${this.contentTitle}
209
+ <div class="link-item">${editIcon} Bewerk ${this.contentTitle}</div>
181
210
  </a>
182
211
  `}
183
212
  ${this.editLinks.map(
184
- link => html` <a
185
- class="editLink"
213
+ link => html` <a
186
214
  data-link="${link.key}"
187
215
  @click="${this._editContent}"
188
216
  >
189
- ${link.logo ? html`${link.logo}` : ''} ${link.txt}
217
+ <div class="link-item">${PdEditContent._getLinkLogo(link)} ${link.txt}</div>
190
218
  </a>`
191
219
  )}
192
- </p>
220
+ </div>
193
221
  </div>
194
222
  `;
195
223
  }
224
+
225
+ static _getLinkLogo(link) {
226
+ if (link.icon) {
227
+ return link.icon;
228
+ }
229
+ if (link.defaultIcon) {
230
+ return editIcon;
231
+ }
232
+ return '';
233
+ }
196
234
 
197
235
  _editContent(e) {
198
236
  const { link } = e.target.dataset;
package/stories/edit-content.stories.js CHANGED
@@ -9,15 +9,130 @@ export default {
9
9
  },
10
10
  };
11
11
 
12
- function Template() {
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}) {
13
52
  return html`
14
- <pd-edit-content contentTitle="Test content">
15
- <p>Some content for edit</p>
16
- </pd-edit-content>
53
+
54
+ <pd-box-view style="--squi-box-columns: 2;">
55
+
56
+ <pd-edit-content contentTitle="Test content with slot">
57
+ <p>Some content for edit, could be added as own slot</p>
58
+ <ul>
59
+ <li>Das ist auch drinne</li>
60
+ <li>Das ist auch drinne</li>
61
+ <li>Das ist auch drinne</li>
62
+ </ul>
63
+ </pd-edit-content>
64
+
65
+ <pd-edit-content contentTitle="Test content with params"
66
+ .data="${editData}">
67
+ </pd-edit-content>
68
+
69
+ <pd-edit-content contentTitle="Test content without edit"
70
+ .data="${editData}"
71
+ editDisabled
72
+ >
73
+ </pd-edit-content>
74
+
75
+ <pd-edit-content contentTitle="Test content with own links"
76
+ .data="${editData}"
77
+ editDisabled
78
+ .editLinks="${
79
+ [{ key: 2, txt: 'Bewerk e-mail', defaultIcon: true },
80
+ { key: 2, txt: 'Anderes', defaultIcon: true },
81
+ { key: 2, txt: 'Ausloggen', defaultIcon: false }]
82
+ }"
83
+ >
84
+ </pd-edit-content>
85
+
86
+ <pd-edit-content contentTitle="Test content with own icons"
87
+ editDisabled
88
+ .editLinks="${
89
+ [{ key: 2, txt: 'Bewerk e-mail', icon: testIcon1 },
90
+ { key: 2, txt: 'Anderes', icon: testIcon1 },
91
+ { key: 2, txt: 'Ausloggen', icon: testIcon1 }]
92
+ }"
93
+ >
94
+ <p>Some content for edit, could be added as own slot. Icons are hack-fixed with hard coded css...</p>
95
+ </pd-edit-content>
96
+ </pd-box-view>
17
97
  `;
18
98
  }
19
99
 
20
- export const EditContent = Template.bind({});
100
+ function NumberEditTemplate({editData}) {
101
+ return html`
102
+ <pd-box-view style="--squi-box-columns: 2;">
103
+ <pd-edit-content contentTitle="Test content with params and step number"
104
+ .data="${editData}" stepNumber="1">
105
+ </pd-edit-content>
106
+
107
+ <pd-edit-content contentTitle="Test content with params and step number"
108
+ .data="${editData}" stepNumber="2">
109
+ </pd-edit-content>
110
+
111
+ <pd-edit-content contentTitle="Test content with params and step number"
112
+ .data="${editData}" stepNumber="3">
113
+ </pd-edit-content>
114
+
115
+ <pd-edit-content contentTitle="Test content with params and step number"
116
+ .data="${editData}" stepNumber="4">
117
+ </pd-edit-content>
118
+ </pd-box-view>`;
119
+ }
120
+
121
+ export const EditContent = BasicEditTemplate.bind({});
21
122
  EditContent.args = {
123
+ editData: [
124
+ {name: "Testwert1", val: "Value 1"},
125
+ {name: "Testwert2", val: "Value 2"},
126
+ {name: "Testwert3", val: "Value 3"}
127
+ ]
128
+ };
129
+
130
+ export const NumberEditContent = NumberEditTemplate.bind({});
131
+ NumberEditContent.args = {
132
+ editData: [
133
+ {name: "Testwert1", val: "Value 1"},
134
+ {name: "Testwert2", val: "Value 2"},
135
+ {name: "Testwert3", val: "Value 3"}
136
+ ]
22
137
  };
23
138