@justeattakeaway/pie-notification 0.4.0 → 0.5.0

package/custom-elements.json

@@ -27,6 +27,46 @@
             "text": "['h2', 'h3', 'h4', 'h5', 'h6']"
           },
           "default": "['h2', 'h3', 'h4', 'h5', 'h6']"
+        },
+        {
+          "kind": "variable",
+          "name": "componentSelector",
+          "type": {
+            "text": "string"
+          },
+          "default": "'pie-notification'"
+        },
+        {
+          "kind": "variable",
+          "name": "componentClass",
+          "type": {
+            "text": "string"
+          },
+          "default": "'c-notification'"
+        },
+        {
+          "kind": "variable",
+          "name": "ON_NOTIFICATION_CLOSE_EVENT",
+          "default": "`${componentSelector}-close`",
+          "description": "Event name for when the notification is closed."
+        },
+        {
+          "kind": "variable",
+          "name": "ON_NOTIFICATION_OPEN_EVENT",
+          "default": "`${componentSelector}-open`",
+          "description": "Event name for when the notification is opened."
+        },
+        {
+          "kind": "variable",
+          "name": "ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT",
+          "default": "`${componentSelector}-leading-action-click`",
+          "description": "Event name for when the notification leading action is clicked."
+        },
+        {
+          "kind": "variable",
+          "name": "ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT",
+          "default": "`${componentSelector}-supporting-action-click`",
+          "description": "Event name for when the notification supporting action is clicked."
         }
       ],
       "exports": [
@@ -45,6 +85,54 @@
             "name": "headingLevels",
             "module": "src/defs.js"
           }
+        },
+        {
+          "kind": "js",
+          "name": "componentSelector",
+          "declaration": {
+            "name": "componentSelector",
+            "module": "src/defs.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "componentClass",
+          "declaration": {
+            "name": "componentClass",
+            "module": "src/defs.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ON_NOTIFICATION_CLOSE_EVENT",
+          "declaration": {
+            "name": "ON_NOTIFICATION_CLOSE_EVENT",
+            "module": "src/defs.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ON_NOTIFICATION_OPEN_EVENT",
+          "declaration": {
+            "name": "ON_NOTIFICATION_OPEN_EVENT",
+            "module": "src/defs.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT",
+          "declaration": {
+            "name": "ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT",
+            "module": "src/defs.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT",
+          "declaration": {
+            "name": "ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT",
+            "module": "src/defs.js"
+          }
         }
       ]
     },
@@ -77,6 +165,16 @@
               "default": "'neutral'",
               "attribute": "variant"
             },
+            {
+              "kind": "field",
+              "name": "isDismissible",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "true",
+              "attribute": "isDismissible"
+            },
             {
               "kind": "field",
               "name": "isCompact",
@@ -126,6 +224,34 @@
               "default": "false",
               "attribute": "hideCloseIcon"
             },
+            {
+              "kind": "field",
+              "name": "leadingAction",
+              "type": {
+                "text": "NotificationProps['leadingAction']"
+              },
+              "privacy": "public",
+              "attribute": "leadingAction"
+            },
+            {
+              "kind": "field",
+              "name": "supportingAction",
+              "type": {
+                "text": "NotificationProps['supportingAction']"
+              },
+              "privacy": "public",
+              "attribute": "supportingAction"
+            },
+            {
+              "kind": "field",
+              "name": "hasStackedActions",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "attribute": "hasStackedActions"
+            },
             {
               "kind": "field",
               "name": "_iconSlot",
@@ -151,6 +277,15 @@
               "privacy": "protected",
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "_hasContentGutter",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "protected",
+              "default": "false"
+            },
             {
               "kind": "method",
               "name": "updateIconProperties",
@@ -161,6 +296,21 @@
               "kind": "method",
               "name": "renderFooter",
               "privacy": "private",
+              "parameters": [
+                {
+                  "name": "leadingAction",
+                  "type": {
+                    "text": "ActionProps"
+                  }
+                },
+                {
+                  "name": "supportingAction",
+                  "optional": true,
+                  "type": {
+                    "text": "ActionProps"
+                  }
+                }
+              ],
               "description": "Template for the footer area\nCalled within the main render function."
             },
             {
@@ -271,6 +421,89 @@
                 }
               },
               "description": "Template for the close button element. Called within the\nmain render function."
+            },
+            {
+              "kind": "method",
+              "name": "handleCloseButton",
+              "privacy": "private",
+              "description": "It handles the action when user clicks in the close button.\nAlso triggers an event when is executed."
+            },
+            {
+              "kind": "method",
+              "name": "closeNotificationComponent",
+              "privacy": "private",
+              "description": "Util method responsible to close the component."
+            },
+            {
+              "kind": "method",
+              "name": "handleActionClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "actionType",
+                  "type": {
+                    "text": "'leading' | 'supporting'"
+                  }
+                }
+              ],
+              "description": "It handle the action button action.\nAlso triggers an event according to its `actionType`."
+            },
+            {
+              "kind": "method",
+              "name": "renderActionButton",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult | typeof nothing"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "action",
+                  "type": {
+                    "text": "ActionProps"
+                  },
+                  "description": "The action properties."
+                },
+                {
+                  "name": "actionType",
+                  "type": {
+                    "text": "'leading' | 'supporting'"
+                  },
+                  "description": "The type of the action."
+                }
+              ],
+              "description": "Render the action button depending on action type and its action."
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": " When the notification leading action is clicked.",
+              "name": "pie-notification-leading-action-click"
+            },
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "When the notification supporting action is clicked.",
+              "name": "pie-notification-supporting-action-click"
+            },
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "When the notification is closed.",
+              "name": "pie-notification-close"
+            },
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "When the notification is opened.",
+              "name": "pie-notification-open"
             }
           ],
           "attributes": [
@@ -290,6 +523,14 @@
               "default": "'neutral'",
               "fieldName": "variant"
             },
+            {
+              "name": "isDismissible",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "fieldName": "isDismissible"
+            },
             {
               "name": "isCompact",
               "type": {
@@ -328,6 +569,28 @@
               },
               "default": "false",
               "fieldName": "hideCloseIcon"
+            },
+            {
+              "name": "leadingAction",
+              "type": {
+                "text": "NotificationProps['leadingAction']"
+              },
+              "fieldName": "leadingAction"
+            },
+            {
+              "name": "supportingAction",
+              "type": {
+                "text": "NotificationProps['supportingAction']"
+              },
+              "fieldName": "supportingAction"
+            },
+            {
+              "name": "hasStackedActions",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "hasStackedActions"
             }
           ],
           "superclass": {

package/dist/index.d.ts

@@ -1,8 +1,24 @@
 import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
+import type { nothing } from 'lit';
 import type { PropertyValues } from 'lit';
 import type { TemplateResult } from 'lit';
 
+export declare type ActionProps = {
+    /**
+     * The text to display inside the button.
+     */
+    text: string;
+    /**
+     * The ARIA label for the button.
+     */
+    ariaLabel?: string;
+};
+
+export declare const componentClass = "c-notification";
+
+export declare const componentSelector = "pie-notification";
+
 export declare const headingLevels: readonly ["h2", "h3", "h4", "h5", "h6"];
 
 export declare interface NotificationProps {
@@ -10,6 +26,10 @@ export declare interface NotificationProps {
      * Set the variant of the notification.
      */
     variant?: typeof variants[number];
+    /**
+     * When true, allows dismissing the notification by clicking on the close button.
+     */
+    isDismissible?: boolean;
     /**
      * When true, the footer aligns to the header and icons which makes the component compact.
      */
@@ -30,22 +50,71 @@ export declare interface NotificationProps {
      * When true, the notification is set to be open and visible.
      */
     isOpen?: boolean;
+    /**
+     * The leading action for the notification.
+     */
+    leadingAction?: ActionProps;
+    /**
+     * The supporting action for the notification.
+     */
+    supportingAction?: ActionProps;
+    /**
+     * When true, the notification will stack the action buttons on narrow screens.
+     */
+    hasStackedActions?: boolean;
 }
 
+/**
+ * Event name for when the notification is closed.
+ *
+ * @constant
+ */
+export declare const ON_NOTIFICATION_CLOSE_EVENT: string;
+
+/**
+ * Event name for when the notification leading action is clicked.
+ *
+ * @constant
+ */
+export declare const ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT: string;
+
+/**
+ * Event name for when the notification is opened.
+ *
+ * @constant
+ */
+export declare const ON_NOTIFICATION_OPEN_EVENT: string;
+
+/**
+ * Event name for when the notification supporting action is clicked.
+ *
+ * @constant
+ */
+export declare const ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT: string;
+
 /**
  * @tagname pie-notification
+ * @event {CustomEvent} pie-notification-leading-action-click -  When the notification leading action is clicked.
+ * @event {CustomEvent} pie-notification-supporting-action-click - When the notification supporting action is clicked.
+ * @event {CustomEvent} pie-notification-close - When the notification is closed.
+ * @event {CustomEvent} pie-notification-open - When the notification is opened.
  */
 export declare class PieNotification extends LitElement implements NotificationProps {
     isOpen: boolean;
     variant: NonNullable<NotificationProps['variant']>;
+    isDismissible: boolean;
     isCompact: boolean;
     heading: string;
     headingLevel: NonNullable<NotificationProps['headingLevel']>;
     hideIcon: boolean;
     hideCloseIcon: boolean;
+    leadingAction: NotificationProps['leadingAction'];
+    supportingAction: NotificationProps['supportingAction'];
+    hasStackedActions: boolean;
     _iconSlot: Array<HTMLElement>;
     protected _hasExternalIcon: boolean;
     protected _hasIconClass: boolean;
+    protected _hasContentGutter: boolean;
     static styles: CSSResult;
     /**
      * Lifecycle method executed after component renders.
@@ -56,6 +125,12 @@ export declare class PieNotification extends LitElement implements NotificationP
      * It update icon properties if variant has changes.
      */
     protected willUpdate(_changedProperties: PropertyValues<this>): void;
+    /**
+     * Lifecycle method executed when component is updated.
+     * It dispatches an event if notification is opened.
+     * It applies a gutter if there's no heading content in order to avoid the close button overlap the content.
+     */
+    protected updated(_changedProperties: PropertyValues<this>): void;
     /**
      * Method responsible to check if an external icon has been provided.
      * It reads from icon slot if there is an external icon as well check if variant has default icon.
@@ -123,7 +198,39 @@ export declare class PieNotification extends LitElement implements NotificationP
      * @private
      */
     private renderCloseButton;
-    render(): TemplateResult;
+    /**
+     * It handles the action when user clicks in the close button.
+     * Also triggers an event when is executed.
+     *
+     * @private
+     */
+    private handleCloseButton;
+    /**
+     * Util method responsible to close the component.
+     *
+     * @private
+     */
+    private closeNotificationComponent;
+    /**
+     * It handle the action button action.
+     * Also triggers an event according to its `actionType`.
+     *
+     * @param {'leading' | 'supporting'} actionType
+     *
+     * @private
+     */
+    private handleActionClick;
+    /**
+     * Render the action button depending on action type and its action.
+     *
+     * @param {ActionProps} action - The action properties.
+     * @param {'leading' | 'supporting'} actionType - The type of the action.
+     *
+     * @returns {TemplateResult | typeof nothing} - The rendered action button or nothing if the action text is not defined.
+     * @private
+     */
+    private renderActionButton;
+    render(): typeof nothing | TemplateResult;
 }
 
 export declare const variants: readonly ["neutral", "neutral-alternative", "info", "success", "warning", "error"];