@progressive-development/pd-dialog 0.1.53 → 0.1.55

package/package.json

@@ -3,7 +3,7 @@
   "description": "Progressive Development dialog components.",
   "license": "SEE LICENSE IN LICENSE",
   "author": "PD Progressive Development",
-  "version": "0.1.53",
+  "version": "0.1.55",
   "main": "index.js",
   "module": "index.js",
   "scripts": {

package/src/PdPopupDialog.js

@@ -74,6 +74,21 @@ export class PdPopupDialog extends LitElement {
         width: 2em;
       }
 
+      .error {
+        --pd-icon-col: #FF3232;
+        --pd-icon-stroke-width: 0;
+      }
+
+      .info, .help {
+        --pd-icon-col: #6B86FF;
+        --pd-icon-stroke-width: 0;
+      }
+
+      .warn {
+        --pd-icon-col: #FFBF00;
+        --pd-icon-stroke-width: 0;
+      }
+
       .content {
         padding: 0.5rem 1rem 1rem 1rem;
         background-color: var(--pd-popup-header-font-col, var(--pd-default-bg-col));
@@ -115,11 +130,7 @@ export class PdPopupDialog extends LitElement {
         <!-- Modal content -->
         <div class="modal-content">
           <div class="header">
-            <img
-              src="/images/${this._getImageNameForType()}.svg"
-              class="info-logo"
-              alt=""
-            />
+            ${this._getIconForType()}
             <span class="header-txt">${this.title}</span>
           </div>
           <div class="content">
@@ -153,16 +164,19 @@ export class PdPopupDialog extends LitElement {
     );
   }
 
-  _getImageNameForType() {
+  _getIconForType() {
+    if (!this.type) {
+      return "";
+    }
     switch (this.type) {
-      case 'info':
-        return 'information';
       case 'warn':
-        return 'warning';
+        return html`<pd-icon icon="warningIconFld" class="info-logo warn"></pd-icon>`;
       case 'error':
-        return 'error';
+        return html`<pd-icon icon="errorIconFld" class="info-logo error"></pd-icon>`;
+      case 'help':
+        return html`<pd-icon icon="helpIconFld" class="info-logo help"></pd-icon>`;
       default:
-        return 'information';
+        return html`<pd-icon icon="infoIconFld" class="info-logo info"></pd-icon>`;
     }
   }
 

package/stories/popup-dialog.stories.js

@@ -7,11 +7,11 @@ export default {
   argTypes: {},
 };
 
-function PopupTemplate() {
+function PopupTemplate({type}) {
   return html`
     <h1>Dialog Test</h1>
     <button>Ok</button>
-    <pd-popup-dialog title="Title Information">
+    <pd-popup-dialog title="Title Information" type="${type}">
       <div slot="content">
         <p>
           Tank you for your order. And another prima text here. Maybe more than
@@ -23,4 +23,25 @@ function PopupTemplate() {
 }
 
 export const PopupDialog = PopupTemplate.bind({});
-PopupDialog.args = {};
+PopupDialog.args = {  
+};
+
+export const PopupInfoDialog = PopupTemplate.bind({});
+PopupInfoDialog.args = {
+  type: "info",
+};
+
+export const PopupHelpDialog = PopupTemplate.bind({});
+PopupHelpDialog.args = {
+  type: "help",
+};
+
+export const PopupWarnDialog = PopupTemplate.bind({});
+PopupWarnDialog.args = {
+  type: "warn",
+};
+
+export const PopupErrorDialog = PopupTemplate.bind({});
+PopupErrorDialog.args = {
+  type: "error",
+};