@progressive-development/pd-content 0.0.14 → 0.0.16

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 +1 -1
  3. package/src/PdEditContent.js +81 -42
  4. package/stories/edit-content.stories.js +129 -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.14",
6
+ "version": "0.0.16",
7
7
  "main": "index.js",
8
8
  "module": "index.js",
9
9
  "scripts": {
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,44 @@
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
+ padding-bottom: 5px;
135
+ display: flex;
136
+ flex-wrap: wrap;
137
+ gap: 15px;
138
+ }
139
+
140
+ .link-item {
141
+ display: flex;
142
+ gap: 2px;
143
+ white-space: nowrap;
144
+ align-items: center;
145
+ }
146
+
147
+ .param-data {
148
+ padding-bottom: 10px;
98
149
  }
99
150
 
100
151
  @media (max-width: 360px) {
@@ -138,61 +189,49 @@
138
189
  </div>
139
190
  <div>
140
191
  ${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
- )
192
+ ? html`
193
+ <div class="param-data">
194
+ ${this.data.map(
195
+ dataEntry => html`
196
+ <div>
197
+ <span class="label">${dataEntry.name}</span>
198
+ <span class="value">${dataEntry.val}</span>
199
+ </div>
200
+ `
201
+ )}
202
+ </div>`
149
203
  : ''}
150
204
  <slot></slot>
151
- <p>
205
+ <div class="link-row">
152
206
  ${this.editDisabled
153
207
  ? ''
154
208
  : html`
155
209
  <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}
210
+ <div class="link-item">${editIcon} Bewerk ${this.contentTitle}</div>
181
211
  </a>
182
212
  `}
183
213
  ${this.editLinks.map(
184
- link => html` <a
185
- class="editLink"
214
+ link => html` <a
186
215
  data-link="${link.key}"
187
216
  @click="${this._editContent}"
188
217
  >
189
- ${link.logo ? html`${link.logo}` : ''} ${link.txt}
218
+ <div class="link-item">${PdEditContent._getLinkLogo(link)} ${link.txt}</div>
190
219
  </a>`
191
220
  )}
192
- </p>
221
+ </div>
193
222
  </div>
194
223
  `;
195
224
  }
225
+
226
+ static _getLinkLogo(link) {
227
+ if (link.icon) {
228
+ return link.icon;
229
+ }
230
+ if (link.defaultIcon) {
231
+ return editIcon;
232
+ }
233
+ return '';
234
+ }
196
235
 
197
236
  _editContent(e) {
198
237
  const { link } = e.target.dataset;
package/stories/edit-content.stories.js CHANGED
@@ -9,15 +9,139 @@ 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
+ <style>
103
+ .edit-boxes {
104
+ display: flex;
105
+ flex-flow: column;
106
+ gap: 10px;
107
+ }
108
+ </style>
109
+ <div class="edit-boxes">
110
+ <pd-edit-content contentTitle="Test content with params and step number"
111
+ .data="${editData}" stepNumber="1">
112
+ </pd-edit-content>
113
+
114
+ <pd-edit-content contentTitle="Test content with params and step number"
115
+ .data="${editData}" stepNumber="2">
116
+ </pd-edit-content>
117
+
118
+ <pd-edit-content contentTitle="Test content with params and step number"
119
+ .data="${editData}" stepNumber="3">
120
+ </pd-edit-content>
121
+
122
+ <pd-edit-content contentTitle="Test content with params and step number"
123
+ .data="${editData}" stepNumber="4">
124
+ </pd-edit-content>
125
+ </div>`;
126
+ }
127
+
128
+
129
+
130
+ export const EditContent = BasicEditTemplate.bind({});
21
131
  EditContent.args = {
132
+ editData: [
133
+ {name: "Testwert1", val: "Value 1"},
134
+ {name: "Testwert2", val: "Value 2"},
135
+ {name: "Testwert3", val: "Value 3"}
136
+ ]
137
+ };
138
+
139
+ export const NumberEditContent = NumberEditTemplate.bind({});
140
+ NumberEditContent.args = {
141
+ editData: [
142
+ {name: "Testwert1", val: "Value 1"},
143
+ {name: "Testwert2", val: "Value 2"},
144
+ {name: "Testwert3", val: "Value 3"}
145
+ ]
22
146
  };
23
147