@progressive-development/pd-contact 0.0.3 → 0.0.6

package/package.json

@@ -3,7 +3,7 @@
   "description": "Progressive Development Contact component",
   "license": "SEE LICENSE IN LICENSE",
   "author": "PD Progressive Development",
-  "version": "0.0.3",
+  "version": "0.0.6",
   "main": "index.js",
   "module": "index.js",
   "scripts": {
@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "lit": "^2.0.2",
-    "@progressive-development/pd-forms": "0.0.14"
+    "@progressive-development/pd-forms": "0.0.17"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",

package/stories/index.stories.js

@@ -2,43 +2,40 @@ import { html } from 'lit';
 import '../pd-contact.js';
 
 export default {
-  title: 'PdContact',
+  title: 'PdContact/Contact',
   component: 'pd-contact',
   argTypes: {
-    title: { control: 'text' },
-    counter: { control: 'number' },
-    textColor: { control: 'color' },
+    
   },
 };
 
-function Template({ title = 'Hello world', counter = 5, textColor, slot }) {
+function Template() {
   return html`
-    <pd-contact
-      style="--pd-contact-text-color: ${textColor || 'black'}"
-      .title=${title}
-      .counter=${counter}
-    >
-      ${slot}
-    </pd-contact>
+    <h3>Edit Contact</h3>
+    <pd-contact></pd-contact>
   `;
 }
 
-export const Regular = Template.bind({});
-
-export const CustomTitle = Template.bind({});
-CustomTitle.args = {
-  title: 'My title',
-};
+function TemplateView() {
+  return html`    
+    <h3>View Contact</h3>
+    <pd-contact summary .contact="${{
+                           firstName: 'Peter', 
+                           lastName: 'Musterman',
+                           street: 'Musterstrasse',
+                           streetNr: '23b',
+                           zip: '9040',
+                           city: 'Gent',
+                           phone: '0221/9923443',
+                           mobil: '0175/9923443',
+                           email: 'peter@muster.be'
+                           }}"></pd-contact>`;
+}
 
-export const CustomCounter = Template.bind({});
-CustomCounter.args = {
-  counter: 123456,
+export const ContactForm = Template.bind({});
+ContactForm.args = {  
 };
 
-export const SlottedContent = Template.bind({});
-SlottedContent.args = {
-  slot: html`<p>Slotted content</p>`,
-};
-SlottedContent.argTypes = {
-  slot: { table: { disable: true } },
+export const ContactView = TemplateView.bind({});
+ContactView.args = {  
 };