@progressive-development/pd-dialog 0.0.8 → 0.0.10

package/package.json

@@ -3,7 +3,7 @@
   "description": "Progressive Development dialog components.",
   "license": "SEE LICENSE IN LICENSE",
   "author": "PD Progressive Development",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "main": "index.js",
   "module": "index.js",
   "scripts": {
@@ -18,9 +18,9 @@
   },
   "dependencies": {
     "lit": "^2.0.2",
-    "@progressive-development/pd-price": "0.0.3",
-    "@progressive-development/pd-forms": "0.0.14",
-    "@progressive-development/pd-icon": "0.0.4"
+    "@progressive-development/pd-price": "0.0.4",
+    "@progressive-development/pd-forms": "0.0.16",
+    "@progressive-development/pd-icon": "0.0.7"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",

package/src/PdSubmitDialog.js

@@ -71,14 +71,14 @@ export class PdSubmitDialog extends LitElement {
 
       .success-icon {
         padding-top: 5px;
-        --squi-icon-size: 2rem;
-        --squi-icon-fill-active: green;
+        --pd-icon-size: 2rem;
+        --pd-icon-fill-active: green;
       }
 
       .error-icon {
         padding-top: 5px;
-        --squi-icon-size: 2rem;
-        --squi-icon-fill: darkred;
+        --pd-icon-size: 2rem;
+        --pd-icon-fill: darkred;
       }
 
       @keyframes spin {
@@ -184,11 +184,11 @@ export class PdSubmitDialog extends LitElement {
         break;
       case STATUS_SEND_SUCCESS:
         value = html` <div class="first-row-tmp">
-            <squi-icon
+            <pd-icon
               class="success-icon"
               icon="checkBox"
               activeIcon
-            ></squi-icon>
+            ></pd-icon>
           </div>
           <span
             >${this.type === 'mail'
@@ -198,7 +198,7 @@ export class PdSubmitDialog extends LitElement {
         break;
       case STATUS_SEND_FAILED:
         value = html` <div class="first-row-tmp">
-            <squi-icon class="error-icon" icon="checkBox"></squi-icon>
+            <pd-icon class="error-icon" icon="checkBox"></pd-icon>
           </div>
           <span
             >${this.type === 'mail'

package/stories/index.stories.js

@@ -1,44 +1,16 @@
 import { html } from 'lit';
-import '../pd-dialog.js';
 
 export default {
   title: 'PdDialog',
   component: 'pd-dialog',
-  argTypes: {
-    title: { control: 'text' },
-    counter: { control: 'number' },
-    textColor: { control: 'color' },
+  argTypes: {    
   },
 };
 
-function Template({ title = 'Hello world', counter = 5, textColor, slot }) {
+function Template() {
   return html`
-    <pd-dialog
-      style="--pd-dialog-text-color: ${textColor || 'black'}"
-      .title=${title}
-      .counter=${counter}
-    >
-      ${slot}
-    </pd-dialog>
+    <p>ToDo: Summary</p>
   `;
 }
 
-export const Regular = Template.bind({});
-
-export const CustomTitle = Template.bind({});
-CustomTitle.args = {
-  title: 'My title',
-};
-
-export const CustomCounter = Template.bind({});
-CustomCounter.args = {
-  counter: 123456,
-};
-
-export const SlottedContent = Template.bind({});
-SlottedContent.args = {
-  slot: html`<p>Slotted content</p>`,
-};
-SlottedContent.argTypes = {
-  slot: { table: { disable: true } },
-};
+export const Examples = Template.bind({});

package/stories/popup-dialog.stories.js

@@ -0,0 +1,26 @@
+import { html } from 'lit';
+import '../pd-popup-dialog.js';
+
+export default {
+  title: 'PdDialog/Popup Dialog',
+  component: 'pd-popup-dialog',
+  argTypes: {},
+};
+
+function PopupTemplate() {
+  return html`
+    <h1>Dialog Test</h1>
+    <button>Ok</button>
+    <pd-popup-dialog title="Title Information">
+      <div slot="content">
+        <p>
+          Tank you for your order. And another prima text here. Maybe more than
+          one line.
+        </p>
+      </div>
+    </pd-popup-dialog>
+  `;
+}
+
+export const PopupDialog = PopupTemplate.bind({});
+PopupDialog.args = {};

package/stories/popup.stories.js

@@ -0,0 +1,23 @@
+import { html } from 'lit';
+import '../pd-popup.js';
+
+export default {
+  title: 'PdDialog/Popup',
+  component: 'pd-popup',
+  argTypes: {},
+};
+
+function PopupTemplate() {
+  return html`
+    <pd-popup>
+      <div slot="small-view">Open Popup</div>
+      <div slot="content">
+        <h2>Test PopUp Content</h2>
+        <p>Hier steht dann etwas....</p>
+      </div>
+    </pd-popup>
+  `;
+}
+
+export const Popup = PopupTemplate.bind({});
+Popup.args = {};

package/stories/submit-dialog.stories.js

@@ -0,0 +1,45 @@
+import { html } from 'lit';
+import {
+  STATUS_SEND,
+  STATUS_SEND_FAILED,
+  STATUS_SEND_SUCCESS,
+} from '../pd-submit-dialog.js';
+
+export default {
+  title: 'PdDialog/Submit Dialog',
+  component: 'pd-submit-dialog',
+  argTypes: {},
+};
+
+function PopupTemplate({ status, statusMsg }) {
+  return html`
+    <h1>Dialog Test</h1>
+
+    <pd-submit-dialog
+      title="Service informatie"
+      status="${status}"
+      confirmMail="myemail@web.de"
+      statusMsg="${statusMsg}"
+    >
+    </pd-submit-dialog>
+  `;
+}
+
+export const SubmitDialogSend = PopupTemplate.bind({});
+SubmitDialogSend.args = {
+  status: STATUS_SEND,
+  statusMsg: '',
+};
+
+export const SubmitDialogSuccess = PopupTemplate.bind({});
+SubmitDialogSuccess.args = {
+  status: STATUS_SEND_SUCCESS,
+  statusMsg: '',
+};
+
+export const SubmitDialogFailed = PopupTemplate.bind({});
+SubmitDialogFailed.args = {
+  status: STATUS_SEND_FAILED,
+  statusMsg:
+    'Sorry, there was a technical failure during order post. The order was not submitted, please try again later or contact us directly.',
+};