@justeattakeaway/pie-notification 0.22.0 → 0.23.1

package/custom-elements.json

@@ -90,7 +90,7 @@
           "type": {
             "text": "ActionProps"
           },
-          "default": "{\n    text: '',\n    ariaLabel: '',\n    size: 'small-productive',\n}"
+          "default": "{ text: '', ariaLabel: '', size: 'small-productive', }"
         },
         {
           "kind": "variable",
@@ -98,7 +98,7 @@
           "type": {
             "text": "DefaultProps"
           },
-          "default": "{\n    variant: 'neutral',\n    position: 'inline-content',\n    isDismissible: false,\n    isCompact: false,\n    headingLevel: 'h2',\n    hideIcon: false,\n    isOpen: true,\n    hasStackedActions: false,\n    leadingAction: defaultActionButtonProps,\n    supportingAction: defaultActionButtonProps,\n}"
+          "default": "{ variant: 'neutral', position: 'inline-content', isDismissible: false, isCompact: false, headingLevel: 'h2', hideIcon: false, isOpen: true, hasStackedActions: false, leadingAction: defaultActionButtonProps, supportingAction: defaultActionButtonProps, }"
         }
       ],
       "exports": [
@@ -230,27 +230,33 @@
             {
               "kind": "field",
               "name": "isOpen",
-              "privacy": "public"
+              "privacy": "public",
+              "attribute": "isOpen"
             },
             {
               "kind": "field",
               "name": "variant",
-              "privacy": "public"
+              "privacy": "public",
+              "attribute": "variant"
             },
             {
               "kind": "field",
               "name": "position",
-              "privacy": "public"
+              "privacy": "public",
+              "attribute": "position"
             },
             {
               "kind": "field",
               "name": "isDismissible",
-              "privacy": "public"
+              "privacy": "public",
+              "attribute": "isDismissible"
             },
             {
               "kind": "field",
               "name": "isCompact",
-              "privacy": "public"
+              "privacy": "public",
+              "attribute": "isCompact",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -258,17 +264,20 @@
               "type": {
                 "text": "NotificationProps['heading']"
               },
-              "privacy": "public"
+              "privacy": "public",
+              "attribute": "heading"
             },
             {
               "kind": "field",
               "name": "headingLevel",
-              "privacy": "public"
+              "privacy": "public",
+              "attribute": "headingLevel"
             },
             {
               "kind": "field",
               "name": "hideIcon",
-              "privacy": "public"
+              "privacy": "public",
+              "attribute": "hideIcon"
             },
             {
               "kind": "field",
@@ -276,7 +285,8 @@
               "type": {
                 "text": "NotificationProps['leadingAction']"
               },
-              "privacy": "public"
+              "privacy": "public",
+              "attribute": "leadingAction"
             },
             {
               "kind": "field",
@@ -284,12 +294,15 @@
               "type": {
                 "text": "NotificationProps['supportingAction']"
               },
-              "privacy": "public"
+              "privacy": "public",
+              "attribute": "supportingAction"
             },
             {
               "kind": "field",
               "name": "hasStackedActions",
-              "privacy": "public"
+              "privacy": "public",
+              "attribute": "hasStackedActions",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -297,7 +310,8 @@
               "type": {
                 "text": "NotificationProps['aria']"
               },
-              "privacy": "public"
+              "privacy": "public",
+              "attribute": "aria"
             },
             {
               "kind": "field",
@@ -441,6 +455,68 @@
               "name": "pie-notification-open"
             }
           ],
+          "attributes": [
+            {
+              "name": "isOpen",
+              "fieldName": "isOpen"
+            },
+            {
+              "name": "variant",
+              "fieldName": "variant"
+            },
+            {
+              "name": "position",
+              "fieldName": "position"
+            },
+            {
+              "name": "isDismissible",
+              "fieldName": "isDismissible"
+            },
+            {
+              "name": "isCompact",
+              "fieldName": "isCompact"
+            },
+            {
+              "name": "heading",
+              "type": {
+                "text": "NotificationProps['heading']"
+              },
+              "fieldName": "heading"
+            },
+            {
+              "name": "headingLevel",
+              "fieldName": "headingLevel"
+            },
+            {
+              "name": "hideIcon",
+              "fieldName": "hideIcon"
+            },
+            {
+              "name": "leadingAction",
+              "type": {
+                "text": "NotificationProps['leadingAction']"
+              },
+              "fieldName": "leadingAction"
+            },
+            {
+              "name": "supportingAction",
+              "type": {
+                "text": "NotificationProps['supportingAction']"
+              },
+              "fieldName": "supportingAction"
+            },
+            {
+              "name": "hasStackedActions",
+              "fieldName": "hasStackedActions"
+            },
+            {
+              "name": "aria",
+              "type": {
+                "text": "NotificationProps['aria']"
+              },
+              "fieldName": "aria"
+            }
+          ],
           "superclass": {
             "name": "PieElement",
             "package": "@justeattakeaway/pie-webc-core/src/internals/PieElement"
@@ -455,7 +531,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./defs"
+            "module": "src/defs"
           }
         },
         {

package/dist/index.js

@@ -16,7 +16,7 @@ const $ = class $ extends N {
     this.getAttribute("v") || this.setAttribute("v", $.v);
   }
 };
-$.v = "0.22.0";
+$.v = "0.23.1";
 let C = $;
 const E = ["neutral", "neutral-alternative", "info", "success", "warning", "error", "translucent"], L = ["h2", "h3", "h4", "h5", "h6"], T = ["inline-content", "full-width"], B = ["small-productive", "xsmall"], o = "pie-notification", u = "c-notification", D = `${o}-close`, V = `${o}-open`, P = `${o}-leading-action-click`, F = `${o}-supporting-action-click`, b = {
   text: "",
@@ -34,10 +34,10 @@ const E = ["neutral", "neutral-alternative", "info", "success", "warning", "erro
   leadingAction: b,
   supportingAction: b
 }, j = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-notification{--notification-border-radius: var(--dt-radius-rounded-c);--notification-background-color: var(--dt-color-container-subtle);--notification-direction: column;--notification-heading-font-family: var(--dt-font-heading-s-family);--notification-heading-font-size: calc(var(--dt-font-heading-s-size--narrow) * 1px);--notification-heading-line-height: calc(var(--dt-font-heading-s-line-height--narrow) * 1px);--notification-heading-font-weight: var(--dt-font-heading-s-weight);--notification-font-family: var(--dt-font-body-l-family);--notification-font-size: calc(var(--dt-font-body-l-size) * 1px);--notification-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--notification-font-weight: var(--dt-font-body-l-weight);--notification-close-icon-offset: var(--dt-spacing-b);--notification-icon-fill: var(--dt-color-content-inverse);--notification-icon-background-color: var(--dt-color-container-inverse);--icon-size-override: 24px;padding:var(--dt-spacing-d);border-radius:var(--notification-border-radius);background-color:var(--notification-background-color);position:relative;display:flex;flex-direction:var(--notification-direction);font-family:var(--notification-font-family);font-size:var(--notification-font-size);line-height:var(--notification-line-height);font-weight:var(--notification-font-weight);color:var(--dt-color-content-default)}.c-notification.is-compact{--notification-direction: row}.c-notification.c-notification--full-width{--notification-border-radius: var(--dt-radius-rounded-none)}.c-notification.c-notification--neutral-alternative{--notification-background-color: var(--dt-color-container-default)}.c-notification.c-notification--info{--notification-background-color: var(--dt-color-support-info-tonal);--notification-icon-background-color: var(--dt-color-support-info)}.c-notification.c-notification--success{--notification-background-color: var(--dt-color-support-positive-tonal);--notification-icon-background-color: var(--dt-color-support-positive)}.c-notification.c-notification--warning{--notification-background-color: var(--dt-color-support-warning-tonal);--notification-icon-background-color: var(--dt-color-support-warning);--notification-icon-fill: var(--dt-color-content-dark)}.c-notification.c-notification--error{--notification-background-color: var(--dt-color-support-error-tonal);--notification-icon-background-color: var(--dt-color-support-error);--notification-icon-fill: var(--dt-color-content-light)}.c-notification.c-notification--translucent{--notification-background-color: var(--dt-color-container-prominent);-webkit-backdrop-filter:blur(var(--dt-blur-prominent));backdrop-filter:blur(var(--dt-blur-prominent))}.c-notification-heading{margin:0;margin-block-end:var(--dt-spacing-a);font-family:var(--notification-heading-font-family);font-size:var(--notification-heading-font-size);line-height:var(--notification-heading-line-height);font-weight:var(--notification-heading-font-weight)}@media (min-width: 769px){.c-notification-heading{--notification-heading-font-size: calc(var(--dt-font-heading-s-size--wide) * 1px);--notification-heading-line-height: calc(var(--dt-font-heading-s-line-height--wide) * 1px)}}.c-notification-content-section{display:flex;flex-direction:row;align-items:center;gap:var(--dt-spacing-c)}.c-notification-content-section.is-dismissible{max-width:calc(100% - var(--notification-close-icon-offset) - 40px)}.c-notification-icon-close{position:absolute;inset-block-start:var(--notification-close-icon-offset);inset-inline-end:var(--notification-close-icon-offset)}.c-notification-footer{display:flex;flex-direction:row;justify-content:flex-end;gap:var(--dt-spacing-d)}.c-notification-footer pie-button,.c-notification-footer ::slotted(pie-button){margin-block-start:var(--dt-spacing-d)}.c-notification-footer.is-compact{align-self:center;margin-inline-start:auto}@media (max-width: 767px){.c-notification-footer.c-notification-footer--stacked{flex-direction:column-reverse;gap:0}.c-notification-footer.c-notification-footer--stacked ::slotted(pie-button){--btn-inline-size: 100%}}@media (min-width: 768px){.c-notification-footer.c-notification-footer--stacked>pie-button{width:auto}}.c-notification-footer ::slotted(:not(pie-button)){display:none}:host([isCompact]) .c-notification-footer pie-button,:host([isCompact]) .c-notification-footer ::slotted(pie-button){margin-block-start:0}.icon,::slotted([slot=icon]){display:inline-flex;align-self:flex-start;background-color:var(--notification-icon-background-color);color:var(--notification-icon-fill);border-radius:var(--dt-radius-rounded-b);padding:var(--dt-spacing-a)}";
-var G = Object.defineProperty, H = Object.getOwnPropertyDescriptor, c = (t, i, e, f) => {
-  for (var a = f > 1 ? void 0 : f ? H(i, e) : i, p = t.length - 1, g; p >= 0; p--)
-    (g = t[p]) && (a = (f ? g(i, e, a) : g(a)) || a);
-  return f && a && G(i, e, a), a;
+var G = Object.defineProperty, H = Object.getOwnPropertyDescriptor, c = (i, t, e, f) => {
+  for (var a = f > 1 ? void 0 : f ? H(t, e) : t, p = i.length - 1, g; p >= 0; p--)
+    (g = i[p]) && (a = (f ? g(t, e, a) : g(a)) || a);
+  return f && a && G(t, e, a), a;
 };
 let n = class extends C {
   constructor() {
@@ -47,8 +47,8 @@ let n = class extends C {
    * Lifecycle method executed when component is updated.
    * It dispatches an event if notification is opened.
    */
-  updated(t) {
-    t.has("isOpen") && this.isOpen && A(this, V, { targetNotification: this });
+  updated(i) {
+    i.has("isOpen") && this.isOpen && A(this, V, { targetNotification: this });
   }
   /**
    * Renders the supporting action - either from slot or props.
@@ -57,8 +57,8 @@ let n = class extends C {
    * @private
    */
   renderSupportingAction() {
-    const { supportingAction: t, leadingAction: i } = this;
-    return t && (i != null && i.text) ? this.renderActionButton(t, "supporting") : l;
+    const { supportingAction: i, leadingAction: t } = this;
+    return i && (t != null && t.text) ? this.renderActionButton(i, "supporting") : l;
   }
   /**
    * Renders the leading action from props.
@@ -66,8 +66,8 @@ let n = class extends C {
    * @private
    */
   renderLeadingAction() {
-    const { leadingAction: t } = this;
-    return t ? this.renderActionButton(t, "leading") : l;
+    const { leadingAction: i } = this;
+    return i ? this.renderActionButton(i, "leading") : l;
   }
   /**
    * Template for the footer area
@@ -77,22 +77,22 @@ let n = class extends C {
    */
   renderFooter() {
     const {
-      isCompact: t,
-      hasStackedActions: i
+      isCompact: i,
+      hasStackedActions: t
     } = this, e = {
       [`${u}-footer`]: !0,
-      "is-compact": t,
-      [`${u}-footer--stacked`]: i && !t
+      "is-compact": i,
+      [`${u}-footer--stacked`]: t && !i
     };
     return d`
-            <footer
+            <div
                 class="${w(e)}"
                 data-test-id="${o}-footer">
                     ${this.renderSupportingAction()}
                     <slot name="supportingAction"></slot>
                     ${this.renderLeadingAction()}
                     <slot name="leadingAction"></slot>
-            </footer>
+            </div>
         `;
   }
   /**
@@ -102,12 +102,12 @@ let n = class extends C {
    * @private
    */
   renderNotificationHeading() {
-    const { heading: t, headingLevel: i } = this, e = z(i);
+    const { heading: i, headingLevel: t } = this, e = z(t);
     return d`<${e}
                         id="${o}-heading"
                         class="${u}-heading"
                         data-test-id="${o}-heading">
-                            ${t}
+                            ${i}
                     </${e}>`;
   }
   /**
@@ -146,7 +146,7 @@ let n = class extends C {
    * @private
    */
   renderCloseButton() {
-    var t;
+    var i;
     return d`
             <pie-icon-button
                 variant="ghost-secondary"
@@ -154,7 +154,7 @@ let n = class extends C {
                 class="${u}-icon-close"
                 data-test-id="${o}-icon-close"
                 @click="${this.handleCloseButton}"
-                aria-label="${h((t = this.aria) == null ? void 0 : t.close)}">
+                aria-label="${h((i = this.aria) == null ? void 0 : i.close)}">
                 <icon-close></icon-close>
             </pie-icon-button>`;
   }
@@ -175,8 +175,8 @@ let n = class extends C {
    *
    * @private
    */
-  handleActionClick(t) {
-    A(this, t === "leading" ? P : F, { targetNotification: this });
+  handleActionClick(i) {
+    A(this, i === "leading" ? P : F, { targetNotification: this });
   }
   /**
    * Render the action button depending on action type and its action.
@@ -187,7 +187,7 @@ let n = class extends C {
    * @returns {TemplateResult | typeof nothing} - The rendered action button or nothing if the action text is not defined.
    * @private
    */
-  renderActionButton(t, i) {
+  renderActionButton(i, t) {
     const {
       text: e,
       ariaLabel: f,
@@ -196,17 +196,17 @@ let n = class extends C {
       target: g,
       rel: v,
       download: m
-    } = t;
+    } = i;
     if (!e)
       return l;
-    const y = i === "leading" ? "primary" : "ghost", k = a && B.includes(a) ? a : b.size, x = !!p;
+    const y = t === "leading" ? "primary" : "ghost", k = a && B.includes(a) ? a : b.size, x = !!p;
     return d`
             <pie-button
                 variant="${y}"
                 size="${h(k)}"
                 aria-label="${h(f)}"
-                @click="${() => this.handleActionClick(i)}"
-                data-test-id="${o}-${i}-action"
+                @click="${() => this.handleActionClick(t)}"
+                data-test-id="${o}-${t}-action"
                 ?isFullWidth="${this.hasStackedActions}"
                 tag="${x ? "a" : "button"}"
                 type="${x ? l : "button"}"
@@ -220,8 +220,8 @@ let n = class extends C {
   }
   render() {
     const {
-      variant: t,
-      position: i,
+      variant: i,
+      position: t,
       heading: e,
       isDismissible: f,
       isCompact: a,
@@ -233,8 +233,8 @@ let n = class extends C {
       return l;
     const m = f && !a, y = {
       [u]: !0,
-      [`${u}--${t}`]: !0,
       [`${u}--${i}`]: !0,
+      [`${u}--${t}`]: !0,
       "is-compact": a
     }, k = {
       [`${u}-content-section`]: !0,
@@ -245,18 +245,18 @@ let n = class extends C {
                 data-test-id="${o}"
                 class="${w(y)}"
                 role="region"
-                aria-live="${t === "error" ? "assertive" : "polite"}"
+                aria-live="${i === "error" ? "assertive" : "polite"}"
                 aria-labelledby="${e ? `${o}-heading` : l}"
                 aria-label="${!e && h(v == null ? void 0 : v.label)}">
                 ${m ? this.renderCloseButton() : l}
 
-                <section class="${w(k)}">
+                <div class="${w(k)}">
                     ${p ? l : this.renderIcon()}
-                    <article>
+                    <div>
                         ${e ? this.renderNotificationHeading() : l}
                         <slot></slot>
-                    </article>
-                </section>
+                    </div>
+                </div>
 
                 ${this.renderFooter()}
             </div>`;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-notification",
   "description": "PIE Design System Notification built using Web Components",
-  "version": "0.22.0",
+  "version": "0.23.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -43,14 +43,14 @@
   "author": "Just Eat Takeaway.com - Design System Team",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@justeattakeaway/pie-components-config": "0.21.1",
+    "@justeattakeaway/pie-components-config": "0.21.2",
     "@justeattakeaway/pie-css": "1.1.1",
     "@justeattakeaway/pie-monorepo-utils": "0.9.1",
     "@justeattakeaway/pie-wrapper-react": "0.14.4"
   },
   "dependencies": {
-    "@justeattakeaway/pie-icon-button": "2.7.11",
-    "@justeattakeaway/pie-icons-webc": "1.23.0",
+    "@justeattakeaway/pie-icon-button": "2.7.13",
+    "@justeattakeaway/pie-icons-webc": "1.24.0",
     "@justeattakeaway/pie-webc-core": "14.0.1"
   },
   "volta": {

package/src/index.ts

@@ -156,14 +156,14 @@ export class PieNotification extends PieElement implements NotificationProps {
             [`${componentClass}-footer--stacked`]: hasStackedActions && !isCompact,
         };
         return html`
-            <footer
+            <div
                 class="${classMap(classes)}"
                 data-test-id="${componentSelector}-footer">
                     ${this.renderSupportingAction()}
                     <slot name="supportingAction"></slot>
                     ${this.renderLeadingAction()}
                     <slot name="leadingAction"></slot>
-            </footer>
+            </div>
         `;
     }
 
@@ -347,13 +347,13 @@ export class PieNotification extends PieElement implements NotificationProps {
                 aria-label="${!heading && ifDefined(aria?.label)}">
                 ${showCloseButton ? this.renderCloseButton() : nothing}
 
-                <section class="${classMap(contentSectionClasses)}">
+                <div class="${classMap(contentSectionClasses)}">
                     ${!hideIcon ? this.renderIcon() : nothing}
-                    <article>
+                    <div>
                         ${heading ? this.renderNotificationHeading() : nothing}
                         <slot></slot>
-                    </article>
-                </section>
+                    </div>
+                </div>
 
                 ${this.renderFooter()}
             </div>`;