@genesislcap/foundation-zero 14.168.0 → 14.169.0

package/dist/custom-elements.json

@@ -11827,7 +11827,7 @@
           "type": {
             "text": "StoryObj"
           },
-          "default": "{\n  args: {\n    notifyText:\n      'Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet',\n    dialogMaxWidth: '557px',\n    dialogTitle: 'Dialog title',\n    dialogInitialText: 'Some text in a Zero Dialog',\n    dialogMainText: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis similique iste ab sed\n      voluptatem ut suscipit tenetur distinctio? Quo est debitis pariatur qui quisquam repudiandae\n      at atque et quibusdam rerum, reprehenderit sed laborum officiis distinctio dolorum\n      temporibus aperiam dolor consequatur perferendis aspernatur fugit repellendus asperiores,\n      voluptas illo? Voluptatum, atque quidem?`,\n    dialogCloseButtonText: 'Close this dialog',\n  },\n  render: ({\n    notifyText,\n    dialogMaxWidth,\n    dialogTitle,\n    dialogInitialText,\n    dialogMainText,\n    dialogCloseButtonText,\n  }) => html`\n    <zero-button @click=\"${showDialog}\">Show Zero Dialog</zero-button>\n    <zero-button @click=\"${showEmptyDialog}\">Show Empty Dialog</zero-button>\n    <zero-button @click=\"${() => showDialogNotify(notifyText)}\">\n      Show Zero Dialog - Notification Structure\n    </zero-button>\n    <div id=\"dialog-container\"></div>\n    <zero-dialog style=\"--dialog-max-width: ${dialogMaxWidth};\">\n      <h5 slot=\"top\">${dialogTitle}</h5>\n      <p>${dialogInitialText}</p>\n      <p>${dialogMainText}</p>\n      <zero-divider slot=\"bottom\"></zero-divider>\n      <zero-button appearance=\"primary-gradient\" slot=\"bottom\" @click=\"${closeDialog}\">\n        ${dialogCloseButtonText}\n      </zero-button>\n    </zero-dialog>\n    <zero-dialog id=\"empty-dialog\"></zero-dialog>\n  `,\n}"
+          "default": "{\n  argTypes: {\n    dialogType: {\n      control: 'select',\n      options: ['default', 'error', 'success'],\n    },\n  },\n  args: {\n    notifyText:\n      'Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet',\n    dialogMaxWidth: '557px',\n    dialogTitle: 'Dialog title',\n    dialogInitialText: 'Some text in a Zero Dialog',\n    dialogMainText: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis similique iste ab sed\n      voluptatem ut suscipit tenetur distinctio? Quo est debitis pariatur qui quisquam repudiandae\n      at atque et quibusdam rerum, reprehenderit sed laborum officiis distinctio dolorum\n      temporibus aperiam dolor consequatur perferendis aspernatur fugit repellendus asperiores,\n      voluptas illo? Voluptatum, atque quidem?`,\n    dialogCloseButtonText: 'Close this dialog',\n    dialogType: 'default',\n  },\n  render: ({\n    notifyText,\n    dialogMaxWidth,\n    dialogTitle,\n    dialogInitialText,\n    dialogMainText,\n    dialogCloseButtonText,\n    dialogType,\n  }) => {\n    document.getElementById(dialogNotifyId)?.remove();\n\n    return html`\n      <zero-button @click=\"${showDialog}\">Show Zero Dialog</zero-button>\n      <zero-button @click=\"${showEmptyDialog}\">Show Empty Dialog</zero-button>\n      <zero-button @click=\"${() => showDialogNotify(notifyText, dialogType)}\">\n        Show Zero Dialog - Notification Structure ${dialogType}\n      </zero-button>\n      <div id=\"dialog-container\"></div>\n      <zero-dialog style=\"--dialog-max-width: ${dialogMaxWidth};\" type=${dialogType}>\n        <h5 slot=\"top\">${dialogTitle}</h5>\n        <p>${dialogInitialText}</p>\n        <p>${dialogMainText}</p>\n        <zero-divider slot=\"bottom\"></zero-divider>\n        <zero-button appearance=\"primary-gradient\" slot=\"bottom\" @click=\"${closeDialog}\">\n          ${dialogCloseButtonText}\n        </zero-button>\n      </zero-dialog>\n      <zero-dialog id=\"empty-dialog\"></zero-dialog>\n    `;\n  },\n}"
         }
       ],
       "exports": [
@@ -11856,7 +11856,7 @@
         {
           "kind": "variable",
           "name": "zeroDialogStyles",
-          "default": "css`\n  ${foundationDialogStyles}\n  :host {\n    --dialog-background: ${neutralLayer2};\n  }\n\n  dialog {\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    color: rgb(255 255 255 / 30%);\n    border-radius: calc(var(--control-corner-radius) * 1px);\n    border: 1px solid ${ColorHEX.lightGrey};\n    text-align: left;\n    line-height: normal;\n    box-shadow: 0 2px 15px 0 rgb(0 0 0 / 35%);\n  }\n\n  .top {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    color: ${ColorHEX.almostWhite};\n    margin-bottom: calc(var(--design-unit) * 2px);\n  }\n\n  .bottom {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: flex-end;\n    color: ${ColorHEX.almostWhite};\n  }\n\n  :host slot:first-of-type {\n    color: ${neutralForegroundRest};\n  }\n\n  ::slotted(zero-button) {\n    margin-top: calc(var(--design-unit) * 4px - 1px);\n  }\n\n  .content-wrapper {\n    min-width: var(--dialog-min-width);\n    min-height: var(--dialog-min-height);\n    height: fit-content;\n    width: fit-content;\n    max-width: var(--dialog-max-width);\n    max-height: var(--dialog-max-height);\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    align-items: stretch;\n  }\n\n  .close-icon:hover svg {\n    background-color: ${whiteWebRGBA(0.05)};\n  }\n\n  .close-icon:hover svg g path {\n    fill: ${whiteWebRGBA(1)};\n  }\n\n  .close-icon:active svg {\n    background-color: ${defaultDialogActiveBGColor};\n  }\n\n  .close-icon:active svg g path {\n    fill: ${whiteWebRGBA(0.33)};\n  }\n`"
+          "default": "css`\n  ${foundationDialogStyles}\n  :host {\n    --color-error: ${ColorHEX.error};\n    --color-success: ${ColorHEX.success};\n    --dialog-background: ${neutralLayer2};\n  }\n\n  dialog {\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    color: rgb(255 255 255 / 30%);\n    border-radius: calc(var(--control-corner-radius) * 1px);\n    border: 1px solid ${ColorHEX.lightGrey};\n    text-align: left;\n    line-height: normal;\n    box-shadow: 0 2px 15px 0 rgb(0 0 0 / 35%);\n  }\n\n  .top {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    color: ${ColorHEX.almostWhite};\n    margin-bottom: calc(var(--design-unit) * 2px);\n  }\n\n  .bottom {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: flex-end;\n    color: ${ColorHEX.almostWhite};\n  }\n\n  :host slot:first-of-type {\n    color: ${neutralForegroundRest};\n  }\n\n  ::slotted(zero-button) {\n    margin-top: calc(var(--design-unit) * 4px - 1px);\n  }\n\n  .content-wrapper {\n    min-width: var(--dialog-min-width);\n    min-height: var(--dialog-min-height);\n    height: fit-content;\n    width: fit-content;\n    max-width: var(--dialog-max-width);\n    max-height: var(--dialog-max-height);\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    align-items: stretch;\n  }\n\n  .close-icon:hover svg {\n    background-color: ${whiteWebRGBA(0.05)};\n  }\n\n  .close-icon:hover svg g path {\n    fill: ${whiteWebRGBA(1)};\n  }\n\n  .close-icon:active svg {\n    background-color: ${defaultDialogActiveBGColor};\n  }\n\n  .close-icon:active svg g path {\n    fill: ${whiteWebRGBA(0.33)};\n  }\n`"
         }
       ],
       "exports": [
@@ -11900,12 +11900,24 @@
           "tagName": "%%prefix%%-dialog",
           "customElement": true,
           "attributes": [
+            {
+              "name": "type",
+              "type": {
+                "text": "DialogType"
+              },
+              "default": "'default'",
+              "fieldName": "type",
+              "inheritedFrom": {
+                "name": "DialogElement",
+                "module": "src/dialog/dialog.ts"
+              }
+            },
             {
               "name": "position",
               "type": {
-                "text": "'centre' | 'left' | 'right'"
+                "text": "DialogPosition"
               },
-              "default": "'centre'",
+              "default": "'center'",
               "fieldName": "position",
               "inheritedFrom": {
                 "name": "DialogElement",
@@ -11972,13 +11984,25 @@
                 "module": "src/dialog/dialog.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "DialogType"
+              },
+              "default": "'default'",
+              "inheritedFrom": {
+                "name": "DialogElement",
+                "module": "src/dialog/dialog.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "position",
               "type": {
-                "text": "'centre' | 'left' | 'right'"
+                "text": "DialogPosition"
               },
-              "default": "'centre'",
+              "default": "'center'",
               "inheritedFrom": {
                 "name": "DialogElement",
                 "module": "src/dialog/dialog.ts"
@@ -21429,12 +21453,24 @@
           "tagName": "%%prefix%%-modal",
           "customElement": true,
           "attributes": [
+            {
+              "name": "type",
+              "type": {
+                "text": "DialogType"
+              },
+              "default": "'default'",
+              "fieldName": "type",
+              "inheritedFrom": {
+                "name": "DialogElement",
+                "module": "src/dialog/dialog.ts"
+              }
+            },
             {
               "name": "position",
               "type": {
-                "text": "'centre' | 'left' | 'right'"
+                "text": "DialogPosition"
               },
-              "default": "'centre'",
+              "default": "'center'",
               "fieldName": "position",
               "inheritedFrom": {
                 "name": "DialogElement",
@@ -21501,13 +21537,25 @@
                 "module": "src/dialog/dialog.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "DialogType"
+              },
+              "default": "'default'",
+              "inheritedFrom": {
+                "name": "DialogElement",
+                "module": "src/dialog/dialog.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "position",
               "type": {
-                "text": "'centre' | 'left' | 'right'"
+                "text": "DialogPosition"
               },
-              "default": "'centre'",
+              "default": "'center'",
               "inheritedFrom": {
                 "name": "DialogElement",
                 "module": "src/dialog/dialog.ts"

package/dist/dts/dialog/dialog.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.stories.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialog.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAIhE,QAAA,MAAM,IAAI,EAAE,IAGX,CAAC;AACF,eAAe,IAAI,CAAC;AAwCpB,eAAO,MAAM,OAAO,EAAE,QAuCrB,CAAC"}
+{"version":3,"file":"dialog.stories.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialog.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAIhE,QAAA,MAAM,IAAI,EAAE,IAGX,CAAC;AACF,eAAe,IAAI,CAAC;AA4CpB,eAAO,MAAM,OAAO,EAAE,QAmDrB,CAAC"}

package/dist/dts/dialog/dialog.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.styles.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialog.styles.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,gBAAgB,iDAqE5B,CAAC"}
+{"version":3,"file":"dialog.styles.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialog.styles.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,gBAAgB,iDAuE5B,CAAC"}

package/dist/esm/dialog/dialog.stories.js

@@ -16,11 +16,12 @@ const closeDialog = (e) => {
     const dialog = document.querySelector('zero-dialog');
     dialog.close();
 };
-const showDialogNotify = (notifyText) => {
-    const dialog = document.createElement('zero-dialog');
-    const container = document.getElementById('dialog-container');
-    container.appendChild(dialog);
-    dialog.notification = {
+const dialogNotifyId = 'dialogNotify';
+const showDialogNotify = (notifyText, dialogType) => {
+    const dialogNotify = document.createElement('zero-dialog');
+    dialogNotify.setAttribute('id', dialogNotifyId);
+    dialogNotify.type = dialogType;
+    dialogNotify.notification = {
         title: 'Notify Title',
         body: `${notifyText} ID - notify - ${Math.random()}`,
         config: {
@@ -36,9 +37,17 @@ const showDialogNotify = (notifyText) => {
             },
         },
     };
-    dialog.show();
+    const container = document.getElementById('dialog-container');
+    container.appendChild(dialogNotify);
+    dialogNotify.show();
 };
 export const Primary = {
+    argTypes: {
+        dialogType: {
+            control: 'select',
+            options: ['default', 'error', 'success'],
+        },
+    },
     args: {
         notifyText: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet',
         dialogMaxWidth: '557px',
@@ -50,23 +59,28 @@ export const Primary = {
       temporibus aperiam dolor consequatur perferendis aspernatur fugit repellendus asperiores,
       voluptas illo? Voluptatum, atque quidem?`,
         dialogCloseButtonText: 'Close this dialog',
+        dialogType: 'default',
     },
-    render: ({ notifyText, dialogMaxWidth, dialogTitle, dialogInitialText, dialogMainText, dialogCloseButtonText, }) => html `
-    <zero-button @click="${showDialog}">Show Zero Dialog</zero-button>
-    <zero-button @click="${showEmptyDialog}">Show Empty Dialog</zero-button>
-    <zero-button @click="${() => showDialogNotify(notifyText)}">
-      Show Zero Dialog - Notification Structure
-    </zero-button>
-    <div id="dialog-container"></div>
-    <zero-dialog style="--dialog-max-width: ${dialogMaxWidth};">
-      <h5 slot="top">${dialogTitle}</h5>
-      <p>${dialogInitialText}</p>
-      <p>${dialogMainText}</p>
-      <zero-divider slot="bottom"></zero-divider>
-      <zero-button appearance="primary-gradient" slot="bottom" @click="${closeDialog}">
-        ${dialogCloseButtonText}
+    render: ({ notifyText, dialogMaxWidth, dialogTitle, dialogInitialText, dialogMainText, dialogCloseButtonText, dialogType, }) => {
+        var _a;
+        (_a = document.getElementById(dialogNotifyId)) === null || _a === void 0 ? void 0 : _a.remove();
+        return html `
+      <zero-button @click="${showDialog}">Show Zero Dialog</zero-button>
+      <zero-button @click="${showEmptyDialog}">Show Empty Dialog</zero-button>
+      <zero-button @click="${() => showDialogNotify(notifyText, dialogType)}">
+        Show Zero Dialog - Notification Structure ${dialogType}
       </zero-button>
-    </zero-dialog>
-    <zero-dialog id="empty-dialog"></zero-dialog>
-  `,
+      <div id="dialog-container"></div>
+      <zero-dialog style="--dialog-max-width: ${dialogMaxWidth};" type=${dialogType}>
+        <h5 slot="top">${dialogTitle}</h5>
+        <p>${dialogInitialText}</p>
+        <p>${dialogMainText}</p>
+        <zero-divider slot="bottom"></zero-divider>
+        <zero-button appearance="primary-gradient" slot="bottom" @click="${closeDialog}">
+          ${dialogCloseButtonText}
+        </zero-button>
+      </zero-dialog>
+      <zero-dialog id="empty-dialog"></zero-dialog>
+    `;
+    },
 };

package/dist/esm/dialog/dialog.styles.js

@@ -8,6 +8,8 @@ import { defaultDialogActiveBGColor } from './styles/colors';
 export const zeroDialogStyles = css `
   ${foundationDialogStyles}
   :host {
+    --color-error: ${ColorHEX.error};
+    --color-success: ${ColorHEX.success};
     --dialog-background: ${neutralLayer2};
   }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-zero",
   "description": "Genesis Foundation Zero Design System",
-  "version": "14.168.0",
+  "version": "14.169.0",
   "sideEffects": false,
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
@@ -67,12 +67,12 @@
   },
   "devDependencies": {
     "@genesiscommunitysuccess/analyzer-import-alias-plugin": "^4.0.0",
-    "@genesislcap/genx": "14.168.0",
-    "@genesislcap/rollup-builder": "14.168.0",
-    "@genesislcap/ts-builder": "14.168.0",
-    "@genesislcap/uvu-playwright-builder": "14.168.0",
-    "@genesislcap/vite-builder": "14.168.0",
-    "@genesislcap/webpack-builder": "14.168.0",
+    "@genesislcap/genx": "14.169.0",
+    "@genesislcap/rollup-builder": "14.169.0",
+    "@genesislcap/ts-builder": "14.169.0",
+    "@genesislcap/uvu-playwright-builder": "14.169.0",
+    "@genesislcap/vite-builder": "14.169.0",
+    "@genesislcap/webpack-builder": "14.169.0",
     "@storybook/addon-coverage": "^1.0.1",
     "@storybook/addon-essentials": "^8.0.0",
     "@storybook/addon-links": "^8.0.0",
@@ -89,10 +89,10 @@
     "storybook": "^8.0.0"
   },
   "dependencies": {
-    "@genesislcap/foundation-comms": "14.168.0",
-    "@genesislcap/foundation-logger": "14.168.0",
-    "@genesislcap/foundation-ui": "14.168.0",
-    "@genesislcap/foundation-utils": "14.168.0",
+    "@genesislcap/foundation-comms": "14.169.0",
+    "@genesislcap/foundation-logger": "14.169.0",
+    "@genesislcap/foundation-ui": "14.169.0",
+    "@genesislcap/foundation-utils": "14.169.0",
     "@microsoft/fast-colors": "^5.3.1",
     "@microsoft/fast-components": "^2.30.6",
     "@microsoft/fast-element": "^1.12.0",
@@ -109,5 +109,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "5c2dfe8431713254545105d0ce1da29bc62ff483"
+  "gitHead": "59695045bb3be9f8f42679be27fc88cd911e5136"
 }