@progressive-development/pd-contact 0.1.65 → 0.1.67

package/package.json

@@ -3,7 +3,7 @@
   "description": "Progressive Development Contact component",
   "license": "SEE LICENSE IN LICENSE",
   "author": "PD Progressive Development",
-  "version": "0.1.65",
+  "version": "0.1.67",
   "main": "index.js",
   "module": "index.js",
   "scripts": {
@@ -17,7 +17,7 @@
     "storybook:build": "npm run analyze -- --exclude dist && build-storybook"
   },
   "dependencies": {
-    "@progressive-development/pd-forms": "^0.2.15",
+    "@progressive-development/pd-forms": "^0.2.16",
     "@progressive-development/pd-icon": "^0.1.21",
     "@progressive-development/pd-shared-styles": "^0.1.1",
     "lit": "^2.2.0"

package/src/PdContact.js

@@ -90,13 +90,34 @@ function transformPhone(phone, country) {
          padding: 0;
        }
 
+       dd.larger {         
+        padding-top: 3px;
+        padding-bottom: 5px;
+       }
+
        .contact-form {
          --row-padding-top: 10px;
        }
 
-       .phone-icon {
+       .link-icon {
+        --pd-icon-bg-col-active: #859900;
+        --pd-icon-bg-col-hover: #859900;
+        --pd-icon-size: 14px;
+        --pd-icon-stroke-col-active: white;
+        --pd-icon-col-active: white;
+       }
 
+       .link-item {
+          display: flex; 
+          align-items: center; 
+          text-decoration: none; 
+          color: var(--pd-default-font-link-col, inherit);
        }
+
+       .link-item:hover {
+        color: var(--pd-default-font-link-col-hover, #451A46) ;
+       }
+
      `];
    }
 
@@ -108,7 +129,7 @@ function transformPhone(phone, country) {
        /**
         * show (true) or not (false) tel number as link
         */
-       phoneCallLink: { type: Boolean },
+       phoneMailLink: { type: Boolean },
        /**
         * summary (true) or view (false) contact data
         */
@@ -362,15 +383,22 @@ function transformPhone(phone, country) {
                  <dd>${this._getFullLocation()}</dd>
                  ${this.contact.additionalHint ? html`<dd>${this.contact.additionalHint}</dd>` : ''}
                  <dd>${this.contact.country}</dd>
-                 <dd>${this.phoneCallLink && trPhoneNr ? html`
+                 <dd class="larger">${this.phoneMailLink && trPhoneNr ? html`
                   <a href="${`tel:${trPhoneNr}`}" 
                     aria-label="${`Phone call: ${this.contact.phone1}`}" 
-                    style="display: flex; align-items: center; text-decoration: none; color: inherit;">
+                    class="link-item">
                     <span style="margin-right: 8px;">${this.contact.phone1}</span>
-                    <pd-icon icon="phoneIcon" class="round small phone-icon"></pd-icon>
+                    <pd-icon activeIcon icon="phoneIcon" class="round link-icon"></pd-icon>
                   </a>
                   ` : this.contact.phone1}</dd>
-                 <dd>${this.contact.email}</dd>
+                <dd class="larger">${this.phoneMailLink ? html`
+                  <a href="${`mailto:${this.contact.email}`}" 
+                    aria-label="${`Send mail: ${this.contact.email}`}" 
+                    class="link-item">
+                    <span style="margin-right: 8px;">${this.contact.email}</span>
+                    <pd-icon activeIcon icon="mailIcon" class="round link-icon"></pd-icon>
+                  </a>
+                  ` : this.contact.email}</dd>                 
 
                  ${this.contact.btw
                    ? html`<dt>BTW</dt>

package/stories/index.stories.js

@@ -15,11 +15,11 @@ function Template() {
   `;
 }
 
-function TemplateView({summary, phoneCallLink}) {
+function TemplateView({summary, phoneMailLink}) {
   console.log(summary);
   return html`    
     <h3>View Contact</h3>
-    <pd-contact ?summary="${summary}" ?phoneCallLink="${phoneCallLink}" .contact="${{
+    <pd-contact ?summary="${summary}" ?phoneMailLink="${phoneMailLink}" .contact="${{
                            firstName: 'Peter', 
                            lastName: 'Musterman',
                            street: 'Musterstrasse',
@@ -62,7 +62,7 @@ ContactView.args = {
 export const ContactViewPhone = TemplateView.bind({});
 ContactViewPhone.args = {  
   summary: "true",
-  phoneCallLink: "true"
+  phoneMailLink: "true"
 };
 
 export const ContactPreparedForm = TemplateView.bind({});