@justeattakeaway/pie-notification 0.3.3 → 0.3.5

package/README.md

@@ -73,7 +73,12 @@ import { PieNotification } from '@justeattakeaway/pie-notification/dist/react';
 
 | Property | Type | Default | Description |
 |---|---|---|---|
-| - | - | - | - |
+| isOpen | `Boolean` | true | When true, the notification is set to be open and visible |
+| variant | `String`| neutral | Set the variant of the notification. Available variants: `neutral`, `neutral-alternative`, `info`, `success`, `warning`, `error` |
+| compact | `Boolean` | false | When true, the footer aligns to the header and icons which makes the component compact. |
+| heading | `String` | - | The text to display in the notification\'s heading. |
+| headingLevel | `String` | h2 | The HTML heading tag to use for the notification\'s heading. Can from h2 to h6. The font size is kept the same for all heading levels. Available heading levels: `h2`,`h3`,`h4`,`h5`,`h6` |
+| hideIcon | `Boolean` | false | Option to hide the icon regardless its variant or if user provided an icon. |
 
 In your markup or JSX, you can then use these to set the properties for the `pie-notification` component:
 

package/custom-elements.json

@@ -11,8 +11,42 @@
     {
       "kind": "javascript-module",
       "path": "src/defs.js",
-      "declarations": [],
-      "exports": []
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "variants",
+          "type": {
+            "text": "['neutral', 'neutral-alternative', 'info', 'success', 'warning', 'error']"
+          },
+          "default": "['neutral', 'neutral-alternative', 'info', 'success', 'warning', 'error']"
+        },
+        {
+          "kind": "variable",
+          "name": "headingLevels",
+          "type": {
+            "text": "['h2', 'h3', 'h4', 'h5', 'h6']"
+          },
+          "default": "['h2', 'h3', 'h4', 'h5', 'h6']"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "variants",
+          "declaration": {
+            "name": "variants",
+            "module": "src/defs.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "headingLevels",
+          "declaration": {
+            "name": "headingLevels",
+            "module": "src/defs.js"
+          }
+        }
+      ]
     },
     {
       "kind": "javascript-module",
@@ -22,7 +56,280 @@
           "kind": "class",
           "description": "",
           "name": "PieNotification",
-          "members": [],
+          "members": [
+            {
+              "kind": "field",
+              "name": "isOpen",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "true",
+              "attribute": "isOpen"
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "NonNullable<NotificationProps['variant']>"
+              },
+              "privacy": "public",
+              "default": "'neutral'",
+              "attribute": "variant"
+            },
+            {
+              "kind": "field",
+              "name": "isCompact",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "attribute": "isCompact"
+            },
+            {
+              "kind": "field",
+              "name": "heading",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "attribute": "heading"
+            },
+            {
+              "kind": "field",
+              "name": "headingLevel",
+              "type": {
+                "text": "NonNullable<NotificationProps['headingLevel']>"
+              },
+              "privacy": "public",
+              "default": "'h2'",
+              "attribute": "headingLevel"
+            },
+            {
+              "kind": "field",
+              "name": "hideIcon",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "attribute": "hideIcon"
+            },
+            {
+              "kind": "field",
+              "name": "hideCloseIcon",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "attribute": "hideCloseIcon"
+            },
+            {
+              "kind": "field",
+              "name": "_iconSlot",
+              "type": {
+                "text": "Array<HTMLElement>"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_hasExternalIcon",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "protected",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_hasIconClass",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "protected",
+              "default": "false"
+            },
+            {
+              "kind": "method",
+              "name": "updateIconProperties",
+              "privacy": "private",
+              "description": "Method responsible to check if an external icon has been provided.\nIt reads from icon slot if there is an external icon as well check if variant has default icon."
+            },
+            {
+              "kind": "method",
+              "name": "renderFooter",
+              "privacy": "private",
+              "description": "Template for the footer area\nCalled within the main render function."
+            },
+            {
+              "kind": "method",
+              "name": "renderNotificationHeading",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "heading",
+                  "type": {
+                    "text": "NotificationProps['heading']"
+                  }
+                },
+                {
+                  "name": "headingTag",
+                  "type": {
+                    "text": "StaticValue"
+                  }
+                }
+              ],
+              "description": "Template for the header area\nCalled within the main render function."
+            },
+            {
+              "kind": "method",
+              "name": "variantHasDefaultIcon",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "variant",
+                  "type": {
+                    "text": "NonNullable<NotificationProps['variant']>"
+                  }
+                }
+              ],
+              "description": "Util method that returns a boolean if variant has a default icon."
+            },
+            {
+              "kind": "method",
+              "name": "getDefaultVariantIcon",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "variant",
+                  "type": {
+                    "text": "NonNullable<NotificationProps['variant']>"
+                  }
+                }
+              ],
+              "description": "Util method that returns an icon from a variant that has default icon."
+            },
+            {
+              "kind": "method",
+              "name": "renderIconVariant",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "variant",
+                  "type": {
+                    "text": "NonNullable<NotificationProps['variant']>"
+                  }
+                }
+              ],
+              "description": "Util method that returns a template with a default icon according to the chosen variant.\nCalled within the renderIcon method."
+            },
+            {
+              "kind": "method",
+              "name": "renderIcon",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult | typeof nothing"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "variant",
+                  "type": {
+                    "text": "NonNullable<NotificationProps['variant']>"
+                  }
+                },
+                {
+                  "name": "hasExternalIcon",
+                  "type": {
+                    "text": "boolean"
+                  }
+                },
+                {
+                  "name": "hasIconClass",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
+              "description": "Template for the heading icon area.\nIt can return an icon provided externally via named slot or it can return an default icon according to the chosen variant.\nCalled within the main render function."
+            },
+            {
+              "kind": "method",
+              "name": "renderCloseButton",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              },
+              "description": "Template for the close button element. Called within the\nmain render function."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "isOpen",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "fieldName": "isOpen"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "NonNullable<NotificationProps['variant']>"
+              },
+              "default": "'neutral'",
+              "fieldName": "variant"
+            },
+            {
+              "name": "isCompact",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "isCompact"
+            },
+            {
+              "name": "heading",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "heading"
+            },
+            {
+              "name": "headingLevel",
+              "type": {
+                "text": "NonNullable<NotificationProps['headingLevel']>"
+              },
+              "default": "'h2'",
+              "fieldName": "headingLevel"
+            },
+            {
+              "name": "hideIcon",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "hideIcon"
+            },
+            {
+              "name": "hideCloseIcon",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "hideCloseIcon"
+            }
+          ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"

package/dist/index.d.ts

@@ -1,16 +1,131 @@
 import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
-import type { TemplateResult } from 'lit-html';
+import type { PropertyValues } from 'lit';
+import type { TemplateResult } from 'lit';
+
+export declare const headingLevels: readonly ["h2", "h3", "h4", "h5", "h6"];
 
 export declare interface NotificationProps {
+    /**
+     * Set the variant of the notification.
+     */
+    variant?: typeof variants[number];
+    /**
+     * When true, the footer aligns to the header and icons which makes the component compact.
+     */
+    isCompact?: boolean;
+    /**
+     * The text to display in the notification's heading.
+     */
+    heading?: string;
+    /**
+     * The HTML heading tag to use for the notification's heading. Can be h1-h6.
+     */
+    headingLevel?: typeof headingLevels[number];
+    /**
+     * Option to hide the icon regardless its variant or if user provided an icon.
+     */
+    hideIcon?: boolean;
+    /**
+     * When true, the notification is set to be open and visible.
+     */
+    isOpen?: boolean;
 }
 
 /**
  * @tagname pie-notification
  */
 export declare class PieNotification extends LitElement implements NotificationProps {
-    render(): TemplateResult<1>;
+    isOpen: boolean;
+    variant: NonNullable<NotificationProps['variant']>;
+    isCompact: boolean;
+    heading: string;
+    headingLevel: NonNullable<NotificationProps['headingLevel']>;
+    hideIcon: boolean;
+    hideCloseIcon: boolean;
+    _iconSlot: Array<HTMLElement>;
+    protected _hasExternalIcon: boolean;
+    protected _hasIconClass: boolean;
     static styles: CSSResult;
+    /**
+     * Lifecycle method executed after component renders.
+     */
+    protected firstUpdated(): void;
+    /**
+     * Lifecycle method executed when component is about to update.
+     * It update icon properties if variant has changes.
+     */
+    protected willUpdate(_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.
+     *
+     * @private
+     */
+    private updateIconProperties;
+    /**
+     * Template for the footer area
+     * Called within the main render function.
+     *
+     * @private
+     */
+    private renderFooter;
+    /**
+     * Template for the header area
+     * Called within the main render function.
+     *
+     * @param {NotificationProps['heading']} heading
+     * @param {StaticValue} headingTag
+     *
+     * @private
+     */
+    private renderNotificationHeading;
+    /**
+     * Util method that returns a boolean if variant has a default icon.
+     *
+     * @param {NonNullable<NotificationProps['variant']>} variant
+     *
+     * @private
+     */
+    private variantHasDefaultIcon;
+    /**
+     * Util method that returns an icon from a variant that has default icon.
+     *
+     * @param {NonNullable<NotificationProps['variant']>} variant
+     *
+     * @private
+     */
+    private getDefaultVariantIcon;
+    /**
+     * Util method that returns a template with a default icon according to the chosen variant.
+     * Called within the renderIcon method.
+     *
+     * @param {NonNullable<NotificationProps['variant']>} variant
+     *
+     * @private
+     */
+    private renderIconVariant;
+    /**
+     * Template for the heading icon area.
+     * It can return an icon provided externally via named slot or it can return an default icon according to the chosen variant.
+     * Called within the main render function.
+     *
+     * @param {NonNullable<NotificationProps['variant']>} variant
+     * @param {boolean} hasExternalIcon
+     *
+     * @private
+     */
+    private renderIcon;
+    /**
+     * Template for the close button element. Called within the
+     * main render function.
+     *
+     * @private
+     */
+    private renderCloseButton;
+    render(): TemplateResult;
 }
 
+export declare const variants: readonly ["neutral", "neutral-alternative", "info", "success", "warning", "error"];
+
 export { }

package/dist/index.js

@@ -1,13 +1,213 @@
-import { unsafeCSS as e, LitElement as o, html as i } from "lit";
-import { defineCustomElement as n } from "@justeattakeaway/pie-webc-core";
-const s = "", r = "pie-notification";
-class t extends o {
+import { unsafeCSS as m, LitElement as $, nothing as d } from "lit";
+import { html as r, unsafeStatic as I } from "lit/static-html.js";
+import { validPropertyValues as u, defineCustomElement as b } from "@justeattakeaway/pie-webc-core";
+import { property as l, queryAssignedElements as y, state as v } from "lit/decorators.js";
+import "@justeattakeaway/pie-icon-button";
+import "@justeattakeaway/pie-icons-webc/IconClose";
+import "@justeattakeaway/pie-icons-webc/IconInfoCircle";
+import "@justeattakeaway/pie-icons-webc/IconAlertCircle";
+import "@justeattakeaway/pie-icons-webc/IconAlertTriangle";
+import "@justeattakeaway/pie-icons-webc/IconCheckCircle";
+const x = ["neutral", "neutral-alternative", "info", "success", "warning", "error"], z = ["h2", "h3", "h4", "h5", "h6"], _ = `*,*:after,*:before{box-sizing:inherit}.c-notification{--notification-border-radius: var(--dt-radius-rounded-c);--notification-background-color: var(--dt-color-container-subtle);--notification-direction: column;--notification-icon-size-override: 22px;--notification-heading-font-size: calc(var(--dt-font-size-20) * 1px);--notification-heading-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--notification-font-size: calc(var(--dt-font-size-16) * 1px);--notification-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--notification-icon-fill: var(--dt-color-content-default);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);gap:var(--dt-spacing-d);font-size:var(--notification-font-size);line-height:var(--notification-line-height)}.c-notification h1,.c-notification h2,.c-notification h3,.c-notification h4,.c-notification h5,.c-notification h6{margin:0;font-size:var(--notification-heading-font-size);line-height:var(--notification-heading-line-height)}.c-notification[is-compact=true]{--notification-direction: row}.c-notification[variant=neutral-alternative]{--notification-background-color: var(--dt-color-container-default)}.c-notification[variant=info]{--notification-background-color: var(--dt-color-support-info-02);--notification-icon-fill: var(--dt-color-blue)}.c-notification[variant=success]{--notification-background-color: var(--dt-color-support-positive-02)}.c-notification[variant=warning]{--notification-background-color: var(--dt-color-support-warning-02)}.c-notification[variant=error]{--notification-background-color: var(--dt-color-support-error-02);--notification-icon-fill: var(--dt-color-red)}.c-notification-content-section{display:flex;flex-direction:row}.c-notification-content-section .has-icon{margin-inline-end:var(--dt-spacing-c)}.c-notification-heading-icon{padding-block-start:var(--dt-spacing-a);color:var(--notification-icon-fill)}.c-notification-icon-close{position:absolute;inset-block-start:var(--dt-spacing-b);inset-inline-end:var(--dt-spacing-b)}
+`;
+var C = Object.defineProperty, w = Object.getOwnPropertyDescriptor, a = (p, i, t, c) => {
+  for (var e = c > 1 ? void 0 : c ? w(i, t) : i, f = p.length - 1, h; f >= 0; f--)
+    (h = p[f]) && (e = (c ? h(i, t, e) : h(e)) || e);
+  return c && e && C(i, t, e), e;
+};
+const o = "pie-notification", s = "c-notification";
+class n extends $ {
+  constructor() {
+    super(...arguments), this.isOpen = !0, this.variant = "neutral", this.isCompact = !1, this.headingLevel = "h2", this.hideIcon = !1, this.hideCloseIcon = !1, this._hasExternalIcon = !1, this._hasIconClass = !1;
+  }
+  /**
+   * Lifecycle method executed after component renders.
+   */
+  firstUpdated() {
+    this.updateIconProperties();
+  }
+  /**
+   * Lifecycle method executed when component is about to update.
+   * It update icon properties if variant has changes.
+   */
+  willUpdate(i) {
+    i.has("variant") && this.updateIconProperties();
+  }
+  /**
+   * 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.
+   *
+   * @private
+   */
+  updateIconProperties() {
+    this._hasExternalIcon = this._iconSlot.length > 0, this._hasIconClass = this._hasExternalIcon || this.variantHasDefaultIcon(this.variant);
+  }
+  /**
+   * Template for the footer area
+   * Called within the main render function.
+   *
+   * @private
+   */
+  renderFooter() {
+    return r`
+            <footer class="${s}-footer"></footer>
+        `;
+  }
+  /**
+   * Template for the header area
+   * Called within the main render function.
+   *
+   * @param {NotificationProps['heading']} heading
+   * @param {StaticValue} headingTag
+   *
+   * @private
+   */
+  renderNotificationHeading(i, t) {
+    return r`
+            <header class="${s}-header" data-test-id="${o}-header">
+                <${t} class="${s}-heading" data-test-id="${o}-heading">${i}</${t}>
+            </header>
+        `;
+  }
+  /**
+   * Util method that returns a boolean if variant has a default icon.
+   *
+   * @param {NonNullable<NotificationProps['variant']>} variant
+   *
+   * @private
+   */
+  variantHasDefaultIcon(i) {
+    return ["info", "success", "warning", "error"].includes(i);
+  }
+  /**
+   * Util method that returns an icon from a variant that has default icon.
+   *
+   * @param {NonNullable<NotificationProps['variant']>} variant
+   *
+   * @private
+   */
+  getDefaultVariantIcon(i) {
+    switch (i) {
+      case "info":
+        return r`<icon-info-circle size="s" data-test-id="${o}-heading-icon-info"></icon-info-circle>`;
+      case "success":
+        return r`<icon-check-circle size="s" data-test-id="${o}-heading-icon-success"></icon-check-circle>`;
+      case "warning":
+        return r`<icon-alert-triangle size="s" data-test-id="${o}-heading-icon-warning"></icon-alert-triangle>`;
+      case "error":
+        return r`<icon-alert-circle size="s" data-test-id="${o}-heading-icon-error"></icon-alert-circle>`;
+      default:
+        return d;
+    }
+  }
+  /**
+   * Util method that returns a template with a default icon according to the chosen variant.
+   * Called within the renderIcon method.
+   *
+   * @param {NonNullable<NotificationProps['variant']>} variant
+   *
+   * @private
+   */
+  renderIconVariant(i) {
+    return this.variantHasDefaultIcon(i) ? this.getDefaultVariantIcon(i) : d;
+  }
+  /**
+   * Template for the heading icon area.
+   * It can return an icon provided externally via named slot or it can return an default icon according to the chosen variant.
+   * Called within the main render function.
+   *
+   * @param {NonNullable<NotificationProps['variant']>} variant
+   * @param {boolean} hasExternalIcon
+   *
+   * @private
+   */
+  renderIcon(i, t, c) {
+    return r`
+            <div data-test-id="${o}-icon-area" class="${c ? "has-icon " : ""}${s}-heading-icon">
+                ${t ? d : this.renderIconVariant(i)}
+                <slot name="icon"></slot>
+            </div>
+        `;
+  }
+  /**
+   * Template for the close button element. Called within the
+   * main render function.
+   *
+   * @private
+   */
+  renderCloseButton() {
+    return r`
+            <pie-icon-button
+                variant="ghost-secondary"
+                size="small"
+                class="${s}-icon-close"
+                data-test-id="${o}-icon-close"
+                >
+                <icon-close></icon-close>
+            </pie-icon-button>`;
+  }
   render() {
-    return i`<h1 data-test-id="pie-notification">Hello world!</h1>`;
+    const {
+      variant: i,
+      heading: t,
+      headingLevel: c,
+      isCompact: e,
+      _hasExternalIcon: f,
+      hideIcon: h,
+      _hasIconClass: g
+    } = this;
+    return r`
+            <div data-test-id="${o}" class="${s}" variant="${i}" is-compact="${e}">
+                ${e ? d : this.renderCloseButton()}
+
+                <section class="${s}-content-section">
+                    ${h ? d : this.renderIcon(i, f, g)}    
+                    <article>
+                        ${t ? this.renderNotificationHeading(t, I(c)) : d}
+                        <slot></slot>
+                    </article>
+                </section>
+                
+                ${this.renderFooter()}
+            </div>`;
   }
 }
-t.styles = e(s);
-n(r, t);
+n.styles = m(_);
+a([
+  l({ type: Boolean })
+], n.prototype, "isOpen", 2);
+a([
+  l(),
+  u(o, x, "neutral")
+], n.prototype, "variant", 2);
+a([
+  l({ type: Boolean })
+], n.prototype, "isCompact", 2);
+a([
+  l({ type: String })
+], n.prototype, "heading", 2);
+a([
+  l(),
+  u(o, z, "h2")
+], n.prototype, "headingLevel", 2);
+a([
+  l({ type: Boolean })
+], n.prototype, "hideIcon", 2);
+a([
+  l({ type: Boolean })
+], n.prototype, "hideCloseIcon", 2);
+a([
+  y({ slot: "icon" })
+], n.prototype, "_iconSlot", 2);
+a([
+  v()
+], n.prototype, "_hasExternalIcon", 2);
+a([
+  v()
+], n.prototype, "_hasIconClass", 2);
+b(o, n);
 export {
-  t as PieNotification
+  n as PieNotification,
+  z as headingLevels,
+  x as variants
 };

package/dist/react.d.ts

@@ -1,9 +1,36 @@
 import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
+import type { PropertyValues } from 'lit';
 import * as React_2 from 'react';
-import type { TemplateResult } from 'lit-html';
+import type { TemplateResult } from 'lit';
+
+export declare const headingLevels: readonly ["h2", "h3", "h4", "h5", "h6"];
 
 export declare interface NotificationProps {
+    /**
+     * Set the variant of the notification.
+     */
+    variant?: typeof variants[number];
+    /**
+     * When true, the footer aligns to the header and icons which makes the component compact.
+     */
+    isCompact?: boolean;
+    /**
+     * The text to display in the notification's heading.
+     */
+    heading?: string;
+    /**
+     * The HTML heading tag to use for the notification's heading. Can be h1-h6.
+     */
+    headingLevel?: typeof headingLevels[number];
+    /**
+     * Option to hide the icon regardless its variant or if user provided an icon.
+     */
+    hideIcon?: boolean;
+    /**
+     * When true, the notification is set to be open and visible.
+     */
+    isOpen?: boolean;
 }
 
 export declare const PieNotification: React_2.ForwardRefExoticComponent<NotificationProps & React_2.RefAttributes<PieNotification_2> & ReactBaseType>;
@@ -12,10 +39,98 @@ export declare const PieNotification: React_2.ForwardRefExoticComponent<Notifica
  * @tagname pie-notification
  */
 declare class PieNotification_2 extends LitElement implements NotificationProps {
-    render(): TemplateResult<1>;
+    isOpen: boolean;
+    variant: NonNullable<NotificationProps['variant']>;
+    isCompact: boolean;
+    heading: string;
+    headingLevel: NonNullable<NotificationProps['headingLevel']>;
+    hideIcon: boolean;
+    hideCloseIcon: boolean;
+    _iconSlot: Array<HTMLElement>;
+    protected _hasExternalIcon: boolean;
+    protected _hasIconClass: boolean;
     static styles: CSSResult;
+    /**
+     * Lifecycle method executed after component renders.
+     */
+    protected firstUpdated(): void;
+    /**
+     * Lifecycle method executed when component is about to update.
+     * It update icon properties if variant has changes.
+     */
+    protected willUpdate(_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.
+     *
+     * @private
+     */
+    private updateIconProperties;
+    /**
+     * Template for the footer area
+     * Called within the main render function.
+     *
+     * @private
+     */
+    private renderFooter;
+    /**
+     * Template for the header area
+     * Called within the main render function.
+     *
+     * @param {NotificationProps['heading']} heading
+     * @param {StaticValue} headingTag
+     *
+     * @private
+     */
+    private renderNotificationHeading;
+    /**
+     * Util method that returns a boolean if variant has a default icon.
+     *
+     * @param {NonNullable<NotificationProps['variant']>} variant
+     *
+     * @private
+     */
+    private variantHasDefaultIcon;
+    /**
+     * Util method that returns an icon from a variant that has default icon.
+     *
+     * @param {NonNullable<NotificationProps['variant']>} variant
+     *
+     * @private
+     */
+    private getDefaultVariantIcon;
+    /**
+     * Util method that returns a template with a default icon according to the chosen variant.
+     * Called within the renderIcon method.
+     *
+     * @param {NonNullable<NotificationProps['variant']>} variant
+     *
+     * @private
+     */
+    private renderIconVariant;
+    /**
+     * Template for the heading icon area.
+     * It can return an icon provided externally via named slot or it can return an default icon according to the chosen variant.
+     * Called within the main render function.
+     *
+     * @param {NonNullable<NotificationProps['variant']>} variant
+     * @param {boolean} hasExternalIcon
+     *
+     * @private
+     */
+    private renderIcon;
+    /**
+     * Template for the close button element. Called within the
+     * main render function.
+     *
+     * @private
+     */
+    private renderCloseButton;
+    render(): TemplateResult;
 }
 
 declare type ReactBaseType = React_2.HTMLAttributes<HTMLDivElement>;
 
+export declare const variants: readonly ["neutral", "neutral-alternative", "info", "success", "warning", "error"];
+
 export { }

package/dist/react.js

@@ -1,15 +1,26 @@
 import * as i from "react";
 import { createComponent as t } from "@lit/react";
 import { PieNotification as o } from "./index.js";
+import { headingLevels as C, variants as R } from "./index.js";
 import "lit";
+import "lit/static-html.js";
 import "@justeattakeaway/pie-webc-core";
+import "lit/decorators.js";
+import "@justeattakeaway/pie-icon-button";
+import "@justeattakeaway/pie-icons-webc/IconClose";
+import "@justeattakeaway/pie-icons-webc/IconInfoCircle";
+import "@justeattakeaway/pie-icons-webc/IconAlertCircle";
+import "@justeattakeaway/pie-icons-webc/IconAlertTriangle";
+import "@justeattakeaway/pie-icons-webc/IconCheckCircle";
 const e = t({
   displayName: "PieNotification",
   elementClass: o,
   react: i,
   tagName: "pie-notification",
   events: {}
-}), r = e;
+}), d = e;
 export {
-  r as PieNotification
+  d as PieNotification,
+  C as headingLevels,
+  R as variants
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-notification",
   "description": "PIE Design System Notification built using Web Components",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -37,7 +37,9 @@
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "0.19.0"
+    "@justeattakeaway/pie-icon-button": "0.27.7",
+    "@justeattakeaway/pie-icons-webc": "0.19.1",
+    "@justeattakeaway/pie-webc-core": "0.19.1"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/defs.ts

@@ -1,3 +1,34 @@
-// TODO - please remove the eslint disable comment below when you add props to this interface
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface NotificationProps {}
+export const variants = ['neutral', 'neutral-alternative', 'info', 'success', 'warning', 'error'] as const;
+export const headingLevels = ['h2', 'h3', 'h4', 'h5', 'h6'] as const;
+
+export interface NotificationProps {
+  /**
+   * Set the variant of the notification.
+   */
+  variant?: typeof variants[number];
+
+  /**
+   * When true, the footer aligns to the header and icons which makes the component compact.
+   */
+  isCompact?: boolean;
+
+  /**
+   * The text to display in the notification's heading.
+   */
+  heading?: string;
+
+  /**
+   * The HTML heading tag to use for the notification's heading. Can be h1-h6.
+   */
+  headingLevel?: typeof headingLevels[number];
+
+  /**
+   * Option to hide the icon regardless its variant or if user provided an icon.
+   */
+  hideIcon?: boolean;
+
+  /**
+   * When true, the notification is set to be open and visible.
+   */
+  isOpen?: boolean;
+}

package/src/index.ts

@@ -1,24 +1,238 @@
-import { LitElement, html, unsafeCSS } from 'lit';
-
-import { defineCustomElement } from '@justeattakeaway/pie-webc-core';
+import {
+    unsafeCSS,
+    nothing,
+    LitElement,
+    type TemplateResult,
+    type PropertyValues,
+} from 'lit';
+import { type StaticValue, html, unsafeStatic } from 'lit/static-html.js';
+import { defineCustomElement, validPropertyValues } from '@justeattakeaway/pie-webc-core';
+import { property, queryAssignedElements, state } from 'lit/decorators.js';
+import { type NotificationProps, variants, headingLevels } from './defs';
 import styles from './notification.scss?inline';
-import { NotificationProps } from './defs';
+
+import '@justeattakeaway/pie-icon-button';
+import '@justeattakeaway/pie-icons-webc/IconClose';
+import '@justeattakeaway/pie-icons-webc/IconInfoCircle';
+import '@justeattakeaway/pie-icons-webc/IconAlertCircle';
+import '@justeattakeaway/pie-icons-webc/IconAlertTriangle';
+import '@justeattakeaway/pie-icons-webc/IconCheckCircle';
 
 // Valid values available to consumers
 export * from './defs';
 
 const componentSelector = 'pie-notification';
+const componentClass = 'c-notification';
 
 /**
  * @tagname pie-notification
  */
 export class PieNotification extends LitElement implements NotificationProps {
-    render () {
-        return html`<h1 data-test-id="pie-notification">Hello world!</h1>`;
-    }
+    @property({ type: Boolean })
+    public isOpen = true;
+
+    @property()
+    @validPropertyValues(componentSelector, variants, 'neutral')
+    public variant: NonNullable<NotificationProps['variant']> = 'neutral';
+
+    @property({ type: Boolean })
+    public isCompact = false;
+
+    @property({ type: String })
+    public heading!: string;
+
+    @property()
+    @validPropertyValues(componentSelector, headingLevels, 'h2')
+    public headingLevel: NonNullable<NotificationProps['headingLevel']> = 'h2';
+
+    @property({ type: Boolean })
+    public hideIcon = false;
+
+    @property({ type: Boolean })
+    public hideCloseIcon = false;
+
+    @queryAssignedElements({ slot: 'icon' }) _iconSlot!: Array<HTMLElement>;
+
+    @state()
+    protected _hasExternalIcon = false;
+
+    @state()
+    protected _hasIconClass = false;
 
     // Renders a `CSSResult` generated from SCSS by Vite
     static styles = unsafeCSS(styles);
+
+    /**
+     * Lifecycle method executed after component renders.
+     */
+    protected firstUpdated (): void {
+        this.updateIconProperties();
+    }
+
+    /**
+     * Lifecycle method executed when component is about to update.
+     * It update icon properties if variant has changes.
+     */
+    protected willUpdate (_changedProperties: PropertyValues<this>): void {
+        if (_changedProperties.has('variant')) {
+            this.updateIconProperties();
+        }
+    }
+
+    /**
+     * 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.
+     *
+     * @private
+     */
+    private updateIconProperties () {
+        this._hasExternalIcon = this._iconSlot.length > 0;
+        this._hasIconClass = this._hasExternalIcon || this.variantHasDefaultIcon(this.variant);
+    }
+
+    /**
+     * Template for the footer area
+     * Called within the main render function.
+     *
+     * @private
+     */
+    private renderFooter () {
+        return html`
+            <footer class="${componentClass}-footer"></footer>
+        `;
+    }
+
+    /**
+     * Template for the header area
+     * Called within the main render function.
+     *
+     * @param {NotificationProps['heading']} heading
+     * @param {StaticValue} headingTag
+     *
+     * @private
+     */
+    private renderNotificationHeading (heading: NotificationProps['heading'], headingTag: StaticValue): TemplateResult {
+        return html`
+            <header class="${componentClass}-header" data-test-id="${componentSelector}-header">
+                <${headingTag} class="${componentClass}-heading" data-test-id="${componentSelector}-heading">${heading}</${headingTag}>
+            </header>
+        `;
+    }
+
+    /**
+     * Util method that returns a boolean if variant has a default icon.
+     *
+     * @param {NonNullable<NotificationProps['variant']>} variant
+     *
+     * @private
+     */
+    private variantHasDefaultIcon (variant: NonNullable<NotificationProps['variant']>) {
+        const validVariants = ['info', 'success', 'warning', 'error'];
+
+        return validVariants.includes(variant);
+    }
+
+    /**
+     * Util method that returns an icon from a variant that has default icon.
+     *
+     * @param {NonNullable<NotificationProps['variant']>} variant
+     *
+     * @private
+     */
+    private getDefaultVariantIcon (variant: NonNullable<NotificationProps['variant']>) {
+        switch (variant) {
+            case 'info':
+                return html`<icon-info-circle size="s" data-test-id="${componentSelector}-heading-icon-info"></icon-info-circle>`;
+            case 'success':
+                return html`<icon-check-circle size="s" data-test-id="${componentSelector}-heading-icon-success"></icon-check-circle>`;
+            case 'warning':
+                return html`<icon-alert-triangle size="s" data-test-id="${componentSelector}-heading-icon-warning"></icon-alert-triangle>`;
+            case 'error':
+                return html`<icon-alert-circle size="s" data-test-id="${componentSelector}-heading-icon-error"></icon-alert-circle>`;
+            default:
+                return nothing as never;
+        }
+    }
+
+    /**
+     * Util method that returns a template with a default icon according to the chosen variant.
+     * Called within the renderIcon method.
+     *
+     * @param {NonNullable<NotificationProps['variant']>} variant
+     *
+     * @private
+     */
+    private renderIconVariant (variant: NonNullable<NotificationProps['variant']>) {
+        if (this.variantHasDefaultIcon(variant)) {
+            return this.getDefaultVariantIcon(variant);
+        }
+
+        return nothing;
+    }
+
+    /**
+     * Template for the heading icon area.
+     * It can return an icon provided externally via named slot or it can return an default icon according to the chosen variant.
+     * Called within the main render function.
+     *
+     * @param {NonNullable<NotificationProps['variant']>} variant
+     * @param {boolean} hasExternalIcon
+     *
+     * @private
+     */
+    private renderIcon (variant: NonNullable<NotificationProps['variant']>, hasExternalIcon: boolean, hasIconClass: boolean): TemplateResult | typeof nothing {
+        return html`
+            <div data-test-id="${componentSelector}-icon-area" class="${hasIconClass ? 'has-icon ' : ''}${componentClass}-heading-icon">
+                ${!hasExternalIcon ? this.renderIconVariant(variant) : nothing}
+                <slot name="icon"></slot>
+            </div>
+        `;
+    }
+
+    /**
+     * Template for the close button element. Called within the
+     * main render function.
+     *
+     * @private
+     */
+    private renderCloseButton (): TemplateResult {
+        return html`
+            <pie-icon-button
+                variant="ghost-secondary"
+                size="small"
+                class="${componentClass}-icon-close"
+                data-test-id="${componentSelector}-icon-close"
+                >
+                <icon-close></icon-close>
+            </pie-icon-button>`;
+    }
+
+    render () {
+        const {
+            variant,
+            heading,
+            headingLevel,
+            isCompact,
+            _hasExternalIcon,
+            hideIcon,
+            _hasIconClass,
+        } = this;
+
+        return html`
+            <div data-test-id="${componentSelector}" class="${componentClass}" variant="${variant}" is-compact="${isCompact}">
+                ${!isCompact ? this.renderCloseButton() : nothing}
+
+                <section class="${componentClass}-content-section">
+                    ${!hideIcon ? this.renderIcon(variant, _hasExternalIcon, _hasIconClass) : nothing}    
+                    <article>
+                        ${heading ? this.renderNotificationHeading(heading, unsafeStatic(headingLevel)) : nothing}
+                        <slot></slot>
+                    </article>
+                </section>
+                
+                ${this.renderFooter()}
+            </div>`;
+    }
 }
 
 defineCustomElement(componentSelector, PieNotification);

package/src/notification.scss

@@ -1 +1,80 @@
 @use '@justeattakeaway/pie-css/scss' as p;
+
+.c-notification {
+    --notification-border-radius: var(--dt-radius-rounded-c);
+    --notification-background-color: var(--dt-color-container-subtle);
+    --notification-direction: column;
+    --notification-icon-size-override: 22px;
+    --notification-heading-font-size: #{p.font-size(--dt-font-size-20)};
+    --notification-heading-line-height: calc(var(--dt-font-size-20-line-height) * 1px);
+    --notification-font-size: #{p.font-size(--dt-font-size-16)};
+    --notification-line-height: calc(var(--dt-font-size-16-line-height) * 1px);
+    --notification-icon-fill: var(--dt-color-content-default);
+
+    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);
+    gap: var(--dt-spacing-d);
+    font-size: var(--notification-font-size);
+    line-height: var(--notification-line-height);
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        margin: 0;
+        font-size: var(--notification-heading-font-size);
+        line-height: var(--notification-heading-line-height);
+    }
+
+    &[is-compact='true'] {
+        --notification-direction: row;
+    }
+
+    &[variant='neutral-alternative'] {
+        --notification-background-color: var(--dt-color-container-default);
+    }
+
+    &[variant='info'] {
+        --notification-background-color: var(--dt-color-support-info-02);
+        --notification-icon-fill: var(--dt-color-blue);
+    }
+
+    &[variant='success'] {
+        --notification-background-color: var(--dt-color-support-positive-02);
+    }
+
+    &[variant='warning'] {
+        --notification-background-color: var(--dt-color-support-warning-02);
+    }
+
+    &[variant='error'] {
+        --notification-background-color: var(--dt-color-support-error-02);
+        --notification-icon-fill: var(--dt-color-red);
+    }
+
+    &-content-section {
+        display: flex;
+        flex-direction: row;
+
+        .has-icon {
+            margin-inline-end: var(--dt-spacing-c);
+        }
+    }
+
+    &-heading-icon {
+        padding-block-start: var(--dt-spacing-a);
+        color: var(--notification-icon-fill);
+    }
+
+    &-icon-close {
+        position: absolute;
+        inset-block-start: var(--dt-spacing-b);
+        inset-inline-end: var(--dt-spacing-b);
+    }
+}