@progressive-development/pd-contact 0.0.2 → 0.0.5

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 (3) hide show
  1. package/package.json +2 -2
  2. package/src/PdContact.js +50 -50
  3. package/stories/index.stories.js +18 -29
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Progressive Development Contact component",
4
4
  "license": "SEE LICENSE IN LICENSE",
5
5
  "author": "PD Progressive Development",
6
- "version": "0.0.2",
6
+ "version": "0.0.5",
7
7
  "main": "index.js",
8
8
  "module": "index.js",
9
9
  "scripts": {
@@ -18,7 +18,7 @@
18
18
  },
19
19
  "dependencies": {
20
20
  "lit": "^2.0.2",
21
- "@progressive-development/pd-forms": "0.0.13"
21
+ "@progressive-development/pd-forms": "0.0.16"
22
22
  },
23
23
  "devDependencies": {
24
24
  "@custom-elements-manifest/analyzer": "^0.4.17",
package/src/PdContact.js CHANGED
@@ -5,11 +5,11 @@
5
5
 
6
6
  import { LitElement, html, css } from 'lit';
7
7
 
8
- import '@progressive-development/pd-forms/PdCheckbox.js';
9
- import '@progressive-development/pd-forms/PdFormContainer.js';
10
- import '@progressive-development/pd-forms/PdFormRow.js';
11
- import '@progressive-development/pd-forms/PdInput.js';
12
- import '@progressive-development/pd-forms/PdRadioGroup.js';
8
+ import '@progressive-development/pd-forms/pd-checkbox.js';
9
+ import '@progressive-development/pd-forms/pd-form-container.js';
10
+ import '@progressive-development/pd-forms/pd-form-row.js';
11
+ import '@progressive-development/pd-forms/pd-input.js';
12
+ import '@progressive-development/pd-forms/pd-radio-group.js';
13
13
 
14
14
  /**
15
15
  * An example element.
@@ -106,85 +106,85 @@
106
106
 
107
107
  _renderEditContact() {
108
108
  return html`
109
- <squi-form-container>
110
- <squi-form-row id="testFormId">
111
- <squi-radio-group
109
+ <pd-form-container>
110
+ <pd-form-row id="testFormId">
111
+ <pd-radio-group
112
112
  class="quarter4"
113
113
  label="Type*"
114
114
  @checkbox-changed="${this._switchAddressType}"
115
115
  style="--group-gap: 20px;"
116
116
  >
117
- <squi-checkbox value="true" valueName="private"
118
- >particulier</squi-checkbox
117
+ <pd-checkbox value="true" valueName="private"
118
+ >particulier</pd-checkbox
119
119
  >
120
- <squi-checkbox valueName="business">onderneming</squi-checkbox>
121
- </squi-radio-group>
122
- </squi-form-row>
120
+ <pd-checkbox valueName="business">onderneming</pd-checkbox>
121
+ </pd-radio-group>
122
+ </pd-form-row>
123
123
 
124
124
  ${this.business
125
125
  ? html`
126
- <squi-form-row class="contact-form">
127
- <squi-input
126
+ <pd-form-row class="contact-form">
127
+ <pd-input
128
128
  id="compNameId"
129
129
  class="quarter2"
130
130
  label="Naam onderneming*"
131
131
  valueName="companyName"
132
132
  errorMsg="${this._getErrorMsg('companyName')}"
133
- ></squi-input>
134
- <squi-input
133
+ ></pd-input>
134
+ <pd-input
135
135
  id="vatId"
136
136
  class="quarter2"
137
137
  label="Ondernemingsnr*"
138
138
  valueName="vatNr"
139
139
  errorMsg="${this._getErrorMsg('vatNr')}"
140
- ></squi-input>
141
- </squi-form-row>
140
+ ></pd-input>
141
+ </pd-form-row>
142
142
  `
143
143
  : html`
144
- <squi-form-row class="contact-form">
145
- <squi-input
144
+ <pd-form-row class="contact-form">
145
+ <pd-input
146
146
  id="firstNameId"
147
147
  class="quarter2"
148
148
  label="Voornaam*"
149
149
  valueName="firstName"
150
150
  errorMsg="${this._getErrorMsg('firstName')}"
151
- ></squi-input>
152
- <squi-input
151
+ ></pd-input>
152
+ <pd-input
153
153
  id="lastNameId"
154
154
  class="quarter2"
155
155
  label="Naam*"
156
156
  valueName="lastName"
157
157
  errorMsg="${this._getErrorMsg('lastName')}"
158
- ></squi-input>
159
- </squi-form-row>
158
+ ></pd-input>
159
+ </pd-form-row>
160
160
  `}
161
- <squi-form-row class="contact-form">
162
- <squi-input
161
+ <pd-form-row class="contact-form">
162
+ <pd-input
163
163
  id="streetId"
164
164
  class="quarter3"
165
165
  label="Straat*"
166
166
  valueName="street"
167
167
  errorMsg="${this._getErrorMsg('street')}"
168
- ></squi-input>
169
- <squi-input
168
+ ></pd-input>
169
+ <pd-input
170
170
  id="streetNrId"
171
171
  class="quarter1"
172
172
  label="Nr*"
173
173
  valueName="streetNr"
174
174
  errorMsg="${this._getErrorMsg('streetNr')}"
175
- ></squi-input>
176
- </squi-form-row>
177
- <squi-form-row class="contact-form">
178
- <squi-input
175
+ ></pd-input>
176
+ </pd-form-row>
177
+ <pd-form-row class="contact-form">
178
+ <pd-input
179
179
  class="quarter4"
180
180
  id="additionalHintId"
181
181
  label="Extra informatie"
182
- ></squi-input>
183
- </squi-form-row>
184
- <squi-form-row class="contact-form">
182
+ ></pd-input>
183
+ </pd-form-row>
184
+ <pd-form-row class="contact-form">
185
185
  ${this.match && this.match.zip
186
186
  ? html`
187
- <squi-input
187
+ <pd-input
188
188
  readonly
189
189
  id="zipId"
190
190
  class="quarter2"
@@ -193,45 +193,45 @@
193
193
  valueName="zip"
194
194
  value="${this.match ? this.match.zip || '' : ''}"
195
195
  errorMsg="${this._getErrorMsg('zip')}"
196
- ></squi-input>
196
+ ></pd-input>
197
197
  `
198
198
  : html`
199
- <squi-input
199
+ <pd-input
200
200
  id="zipId"
201
201
  class="quarter2"
202
202
  label="Postcode*"
203
203
  key="zip"
204
204
  valueName="zip"
205
205
  errorMsg="${this._getErrorMsg('zip')}"
206
- ></squi-input>
206
+ ></pd-input>
207
207
  `}
208
- <squi-input
208
+ <pd-input
209
209
  id="cityId"
210
210
  class="quarter2"
211
211
  label="Plaats*"
212
212
  valueName="city"
213
213
  errorMsg="${this._getErrorMsg('city')}"
214
- ></squi-input>
215
- </squi-form-row>
216
- <squi-form-row class="contact-form">
217
- <squi-input
214
+ ></pd-input>
215
+ </pd-form-row>
216
+ <pd-form-row class="contact-form">
217
+ <pd-input
218
218
  id="phoneId"
219
219
  class="quarter2"
220
220
  label="Telefoon*"
221
221
  key="phone"
222
222
  valueName="phone1"
223
223
  errorMsg="${this._getErrorMsg('phone1')}"
224
- ></squi-input>
225
- <squi-input
224
+ ></pd-input>
225
+ <pd-input
226
226
  id="mailId"
227
227
  class="quarter2"
228
228
  label="E-mail*"
229
229
  key="mail"
230
230
  valueName="email"
231
231
  errorMsg="${this._getErrorMsg('email')}"
232
- ></squi-input>
233
- </squi-form-row>
234
- </squi-form-container>
232
+ ></pd-input>
233
+ </pd-form-row>
234
+ </pd-form-container>
235
235
  `;
236
236
  }
237
237
 
package/stories/index.stories.js CHANGED
@@ -5,40 +5,29 @@ export default {
5
5
  title: 'PdContact',
6
6
  component: 'pd-contact',
7
7
  argTypes: {
8
- title: { control: 'text' },
9
- counter: { control: 'number' },
10
- textColor: { control: 'color' },
8
+
11
9
  },
12
10
  };
13
11
 
14
- function Template({ title = 'Hello world', counter = 5, textColor, slot }) {
12
+ function Template() {
15
13
  return html`
16
- <pd-contact
17
- style="--pd-contact-text-color: ${textColor || 'black'}"
18
- .title=${title}
19
- .counter=${counter}
20
- >
21
- ${slot}
22
- </pd-contact>
14
+ <h3>Edit Contact</h3>
15
+ <pd-contact></pd-contact>
16
+
17
+ <h3>View Contact</h3>
18
+ <pd-contact summary .contact="${{firstName: 'Peter',
19
+ lastName: 'Musterman',
20
+ street: 'Musterstrasse',
21
+ streetNr: '23b',
22
+ zip: '9040',
23
+ city: 'Gent',
24
+ phone: '0221/9923443',
25
+ mobil: '0175/9923443',
26
+ email: 'peter@muster.be'
27
+ }}"></pd-contact>
23
28
  `;
24
29
  }
25
30
 
26
- export const Regular = Template.bind({});
27
-
28
- export const CustomTitle = Template.bind({});
29
- CustomTitle.args = {
30
- title: 'My title',
31
- };
32
-
33
- export const CustomCounter = Template.bind({});
34
- CustomCounter.args = {
35
- counter: 123456,
36
- };
37
-
38
- export const SlottedContent = Template.bind({});
39
- SlottedContent.args = {
40
- slot: html`<p>Slotted content</p>`,
41
- };
42
- SlottedContent.argTypes = {
43
- slot: { table: { disable: true } },
31
+ export const Contact = Template.bind({});
32
+ Contact.args = {
44
33
  };