@justeattakeaway/pie-modal 0.12.0 → 0.14.0

package/dist/types/packages/components/pie-modal/src/defs.d.ts

@@ -1,6 +1,9 @@
+import { RTLComponentProps } from '@justeattakeaway/pie-webc-core';
+import { Variant } from '@justeattakeaway/pie-button/src/defs.ts';
 export declare const headingLevels: readonly ["h1", "h2", "h3", "h4", "h5", "h6"];
 export declare const sizes: readonly ["small", "medium", "large"];
-export interface ModalProps {
+export declare const positions: readonly ["top", "center"];
+export interface ModalProps extends RTLComponentProps {
     /**
      * The text to display in the modal's heading.
      */
@@ -25,6 +28,14 @@ export interface ModalProps {
      *
      */
     isDismissible: boolean;
+    /**
+     * When true, displays a loading spinner in the modal.
+     */
+    isLoading: boolean;
+    /**
+     * When true, the modal will have a back button. This currently behaves the same as the close button.
+     */
+    hasBackButton: boolean;
     /**
      * This controls whether a *medium-sized* modal will cover the full width of the page when below the mid breakpoint.
      */
@@ -37,6 +48,25 @@ export interface ModalProps {
      * The size of the modal; this controls how wide it will appear on the page.
      */
     size: typeof sizes[number];
+    /**
+     * The leading action configuration for the modal.
+     */
+    leadingAction: {
+        /**
+         * The text to display for the leading action button.
+         */
+        text: string;
+        /**
+         * The variant of the leading action button.
+         * Default: 'primary'
+         */
+        variant?: Variant;
+        /**
+         * The ARIA label for the leading action button.
+         */
+        ariaLabel?: string;
+    };
+    position: typeof positions[number];
 }
 /**
  * Event name for when the modal is closed.
@@ -50,4 +80,10 @@ export declare const ON_MODAL_CLOSE_EVENT = "pie-modal-close";
  * @constant
  */
 export declare const ON_MODAL_OPEN_EVENT = "pie-modal-open";
+/**
+ * Event name for when the modal back button is clicked.
+ *
+ * @constant
+ */
+export declare const ON_MODAL_BACK_EVENT = "pie-modal-back";
 //# sourceMappingURL=defs.d.ts.map

package/dist/types/packages/components/pie-modal/src/defs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,+CAAgD,CAAC;AAC3E,eAAO,MAAM,KAAK,uCAAwC,CAAC;AAE3D,MAAM,WAAW,UAAU;IACvB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,YAAY,EAAE,OAAO,aAAa,CAAC,MAAM,CAAC,CAAC;IAE3C;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;;;;;OAUG;IACH,aAAa,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,mBAAmB,EAAE,OAAO,CAAC;IAE7B;;OAEG;IACH,6BAA6B,CAAC,EAAE,MAAM,CAAC;IAEvC;;OAEG;IACH,IAAI,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC;CAC9B;AAED;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,oBAAoB,CAAC;AAEtD;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,mBAAmB,CAAC"}
+{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,OAAO,EAAE,MAAM,yCAAyC,CAAC;AAElE,eAAO,MAAM,aAAa,+CAAgD,CAAC;AAC3E,eAAO,MAAM,KAAK,uCAAwC,CAAC;AAC3D,eAAO,MAAM,SAAS,4BAA6B,CAAC;AAEpD,MAAM,WAAW,UAAW,SAAQ,iBAAiB;IACjD;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,YAAY,EAAE,OAAO,aAAa,CAAC,MAAM,CAAC,CAAC;IAE3C;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;;;;;OAUG;IACH,aAAa,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,aAAa,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,mBAAmB,EAAE,OAAO,CAAC;IAE7B;;OAEG;IACH,6BAA6B,CAAC,EAAE,MAAM,CAAC;IAEvC;;OAEG;IACH,IAAI,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC;IAE3B;;OAEG;IACH,aAAa,EAAE;QACX;;WAEG;QACH,IAAI,EAAE,MAAM,CAAC;QAEb;;;WAGG;QACH,OAAO,CAAC,EAAE,OAAO,CAAC;QAElB;;WAEG;QACH,SAAS,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;IAKF,QAAQ,EAAE,OAAO,SAAS,CAAC,MAAM,CAAC,CAAC;CACtC;AAED;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,oBAAoB,CAAC;AAEtD;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,mBAAmB,CAAC;AAEpD;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,mBAAmB,CAAC"}

package/dist/types/packages/components/pie-modal/src/index.d.ts

@@ -1,25 +1,37 @@
 import { LitElement, TemplateResult } from 'lit';
 import type { DependentMap } from '@justeattakeaway/pie-webc-core';
+import { Variant } from '@justeattakeaway/pie-button/src/defs.ts';
 import { ModalProps, headingLevels, sizes } from './defs';
 export { type ModalProps, headingLevels, sizes };
 declare const componentSelector = "pie-modal";
 declare const PieModal_base: (new (...args: any[]) => {
-    dir: string;
+    dir: "ltr" | "rtl" | "auto";
     isRTL: boolean;
 }) & typeof LitElement;
 /**
  * @event {CustomEvent} pie-modal-open - when the modal is opened.
  * @event {CustomEvent} pie-modal-close - when the modal is closed.
+ * @event {CustomEvent} pie-modal-back - when the modal back button is clicked.
  */
 export declare class PieModal extends PieModal_base implements ModalProps {
     heading: string;
     headingLevel: ModalProps['headingLevel'];
     isDismissible: boolean;
+    hasBackButton: boolean;
     isFullWidthBelowMid: boolean;
     isOpen: boolean;
+    isLoading: boolean;
     returnFocusAfterCloseSelector?: string;
     size: ModalProps['size'];
-    _dialog?: HTMLDialogElement;
+    leadingAction: {
+        text: string;
+        variant?: Variant;
+        ariaLabel?: string;
+    };
+    position: ModalProps['position'];
+    private _dialog?;
+    private _backButtonClicked;
+    static styles: import("lit").CSSResult;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -45,9 +57,32 @@ export declare class PieModal extends PieModal_base implements ModalProps {
     /**
      * Return focus to the specified element, providing the selector is valid
      * and the chosen element can be found.
-     * Fails silently.
      */
     private _returnFocus;
+    /**
+     * Template for the close button element. Called within the
+     * main render function.
+     *
+     * @private
+     */
+    private renderCloseButton;
+    /**
+     * Template for the back button element. Called within the
+     * main render function.
+     *
+     * @private
+     */
+    private renderBackButton;
+    /**
+     * Render leadingAction button depending on prop availability.
+     *
+     * 1. If the prop `leadingAction` is not provided, the button is not rendered.
+     * 2. If the prop `leadingAction` is provided but any of the optional properties
+     * are not provided, they fall back to their default values.
+     *
+     * @private
+     */
+    private renderLeadingAction;
     render(): TemplateResult;
     /**
      * Dismisses the modal on backdrop click if `isDismissible` is `true`.
@@ -66,14 +101,6 @@ export declare class PieModal extends PieModal_base implements ModalProps {
      * @param {string} eventType
      */
     private _dispatchModalCustomEvent;
-    /**
-     * Template for the close button element. Called within the
-     * main render function.
-     *
-     * @private
-     */
-    private renderCloseButton;
-    static styles: import("lit").CSSResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/types/packages/components/pie-modal/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,UAAU,EAAW,cAAc,EACtC,MAAM,KAAK,CAAC;AAMb,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAEnE,OAAO,iDAAiD,CAAC;AAEzD,OAAO,EACH,UAAU,EACV,aAAa,EAGb,KAAK,EACR,MAAM,QAAQ,CAAC;AAGhB,OAAO,EAAE,KAAK,UAAU,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC;AAEjD,QAAA,MAAM,iBAAiB,cAAc,CAAC;;;;;AAEtC;;;GAGG;AACH,qBAAa,QAAS,SAAQ,aAAqB,YAAW,UAAU;IAG7D,OAAO,EAAG,MAAM,CAAC;IAIjB,YAAY,EAAE,UAAU,CAAC,cAAc,CAAC,CAAQ;IAGhD,aAAa,UAAS;IAGtB,mBAAmB,UAAS;IAG5B,MAAM,UAAS;IAGf,6BAA6B,CAAC,EAAE,MAAM,CAAC;IAIvC,IAAI,EAAE,UAAU,CAAC,MAAM,CAAC,CAAY;IAGvC,OAAO,CAAC,EAAE,iBAAiB,CAAC;;IAOhC,iBAAiB,IAAM,IAAI;IAM3B,oBAAoB,IAAM,IAAI;IAM9B,YAAY,CAAE,iBAAiB,EAAE,YAAY,CAAC,UAAU,CAAC,GAAI,IAAI;IASjE,OAAO,CAAE,iBAAiB,EAAE,YAAY,CAAC,UAAU,CAAC,GAAI,IAAI;IAI5D;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAS1B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAM1B;;;;;OAKG;IACH,OAAO,CAAC,wBAAwB,CAI9B;IAGF,OAAO,CAAC,kCAAkC;IAU1C,OAAO,CAAC,4BAA4B;IAYpC;;;;OAIG;IACH,OAAO,CAAC,YAAY;IAQpB,MAAM;IA2BN;;;OAGG;IACH,OAAO,CAAC,yBAAyB,CAyB/B;IAEF;;;;;;;;;;OAUG;IACH,OAAO,CAAC,yBAAyB,CAO/B;IAEF;;;;;OAKG;IACH,OAAO,CAAC,iBAAiB;IAWzB,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAID,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,QAAQ,CAAC;KACjC;CACJ"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,UAAU,EAAW,cAAc,EACtC,MAAM,KAAK,CAAC;AAMb,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAEnE,OAAO,iDAAiD,CAAC;AACzD,OAAO,uDAAuD,CAAC;AAC/D,OAAO,wDAAwD,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,yCAAyC,CAAC;AAGlE,OAAO,EACH,UAAU,EACV,aAAa,EAIb,KAAK,EAER,MAAM,QAAQ,CAAC;AAGhB,OAAO,EAAE,KAAK,UAAU,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC;AAEjD,QAAA,MAAM,iBAAiB,cAAc,CAAC;;;;;AAEtC;;;;GAIG;AACH,qBAAa,QAAS,SAAQ,aAAqB,YAAW,UAAU;IAG7D,OAAO,EAAG,MAAM,CAAC;IAIjB,YAAY,EAAE,UAAU,CAAC,cAAc,CAAC,CAAQ;IAGhD,aAAa,UAAS;IAGtB,aAAa,UAAS;IAGtB,mBAAmB,UAAS;IAG5B,MAAM,UAAS;IAGf,SAAS,UAAS;IAGlB,6BAA6B,CAAC,EAAE,MAAM,CAAC;IAIvC,IAAI,EAAE,UAAU,CAAC,MAAM,CAAC,CAAY;IAGpC,aAAa,EAAG;QACnB,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,SAAS,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;IAGK,QAAQ,EAAE,UAAU,CAAC,UAAU,CAAC,CAAY;IAGnD,OAAO,CAAC,OAAO,CAAC,CAAoB;IAEpC,OAAO,CAAC,kBAAkB,CAAS;IAGnC,MAAM,CAAC,MAAM,0BAAqB;;IAOlC,iBAAiB,IAAM,IAAI;IAO3B,oBAAoB,IAAM,IAAI;IAO9B,YAAY,CAAE,iBAAiB,EAAE,YAAY,CAAC,UAAU,CAAC,GAAI,IAAI;IASjE,OAAO,CAAE,iBAAiB,EAAE,YAAY,CAAC,UAAU,CAAC,GAAI,IAAI;IAI5D;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAS1B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAM1B;;;;;OAKG;IACH,OAAO,CAAC,wBAAwB,CAI9B;IAGF,OAAO,CAAC,kCAAkC;IAU1C,OAAO,CAAC,4BAA4B;IAkBpC;;;OAGG;IACH,OAAO,CAAC,YAAY;IAQpB;;;;;OAKG;IACH,OAAO,CAAC,iBAAiB;IAUzB;;;;;OAKG;IACH,OAAO,CAAC,gBAAgB;IAYxB;;;;;;;;OAQG;IACH,OAAO,CAAC,mBAAmB;IAmBpB,MAAM;IAoDb;;;OAGG;IACH,OAAO,CAAC,yBAAyB,CAyB/B;IAEF;;;;;;;;;;OAUG;IACH,OAAO,CAAC,yBAAyB,CAO/B;CACL;AAID,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,QAAQ,CAAC;KACjC;CACJ"}

package/dist/types/packages/components/pie-modal/src/react.d.ts

@@ -1,7 +1,8 @@
 import { EventName } from '@lit-labs/react';
 import { PieModal as PieModalReact } from './index';
 export declare const PieModal: import("@lit-labs/react").ReactWebComponent<PieModalReact, {
-    onpiemodalopen: EventName<CustomEvent<any>>;
-    onpiemodalclose: EventName<CustomEvent<any>>;
+    onPieModalOpen: EventName<CustomEvent<any>>;
+    onPieModalClose: EventName<CustomEvent<any>>;
+    onPieModalBack: EventName<CustomEvent<any>>;
 }>;
 //# sourceMappingURL=react.d.ts.map

package/dist/types/packages/components/pie-modal/src/react.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/react.ts"],"names":[],"mappings":"AAEA,OAAO,EAAmB,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,SAAS,CAAC;AAEpD,eAAO,MAAM,QAAQ;;;EASnB,CAAC"}
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/react.ts"],"names":[],"mappings":"AAEA,OAAO,EAAmB,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,SAAS,CAAC;AAEpD,eAAO,MAAM,QAAQ;;;;EAUnB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-modal",
-  "version": "0.12.0",
+  "version": "0.14.0",
   "description": "PIE design system modal built using web components",
   "type": "module",
   "main": "dist/index.js",
@@ -21,6 +21,7 @@
   "author": "JustEatTakeaway - Design System Web Team",
   "license": "Apache-2.0",
   "devDependencies": {
+    "@justeattakeaway/pie-button": "workspace:*",
     "@justeattakeaway/pie-components-config": "workspace:*",
     "@justeattakeaway/pie-icon-button": "workspace:*",
     "@justeattakeaway/pie-icons-webc": "workspace:*",

package/src/defs.ts

@@ -1,7 +1,11 @@
+import { RTLComponentProps } from '@justeattakeaway/pie-webc-core';
+import { Variant } from '@justeattakeaway/pie-button/src/defs.ts';
+
 export const headingLevels = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;
 export const sizes = ['small', 'medium', 'large'] as const;
+export const positions = ['top', 'center'] as const;
 
-export interface ModalProps {
+export interface ModalProps extends RTLComponentProps {
     /**
      * The text to display in the modal's heading.
      */
@@ -30,6 +34,16 @@ export interface ModalProps {
      */
     isDismissible: boolean;
 
+    /**
+     * When true, displays a loading spinner in the modal.
+     */
+    isLoading: boolean;
+
+    /**
+     * When true, the modal will have a back button. This currently behaves the same as the close button.
+     */
+    hasBackButton: boolean;
+
     /**
      * This controls whether a *medium-sized* modal will cover the full width of the page when below the mid breakpoint.
      */
@@ -44,6 +58,32 @@ export interface ModalProps {
      * The size of the modal; this controls how wide it will appear on the page.
      */
     size: typeof sizes[number];
+
+    /**
+     * The leading action configuration for the modal.
+     */
+    leadingAction: {
+        /**
+         * The text to display for the leading action button.
+         */
+        text: string;
+
+        /**
+         * The variant of the leading action button.
+         * Default: 'primary'
+         */
+        variant?: Variant;
+
+        /**
+         * The ARIA label for the leading action button.
+         */
+        ariaLabel?: string;
+    };
+
+    /*
+     * The position of the modal; this controls where it will appear on the page.
+     */
+    position: typeof positions[number];
 }
 
 /**
@@ -59,3 +99,10 @@ export const ON_MODAL_CLOSE_EVENT = 'pie-modal-close';
  * @constant
  */
 export const ON_MODAL_OPEN_EVENT = 'pie-modal-open';
+
+/**
+ * Event name for when the modal back button is clicked.
+ *
+ * @constant
+ */
+export const ON_MODAL_BACK_EVENT = 'pie-modal-back';

package/src/index.ts

@@ -9,13 +9,19 @@ import {
 import type { DependentMap } from '@justeattakeaway/pie-webc-core';
 import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
 import '@justeattakeaway/pie-icons-webc/icons/IconClose';
+import '@justeattakeaway/pie-icons-webc/icons/IconChevronLeft';
+import '@justeattakeaway/pie-icons-webc/icons/IconChevronRight';
+import { Variant } from '@justeattakeaway/pie-button/src/defs.ts';
+
 import styles from './modal.scss?inline';
 import {
     ModalProps,
     headingLevels,
     ON_MODAL_CLOSE_EVENT,
     ON_MODAL_OPEN_EVENT,
+    ON_MODAL_BACK_EVENT,
     sizes,
+    positions,
 } from './defs';
 
 // Valid values available to consumers
@@ -26,6 +32,7 @@ const componentSelector = 'pie-modal';
 /**
  * @event {CustomEvent} pie-modal-open - when the modal is opened.
  * @event {CustomEvent} pie-modal-close - when the modal is closed.
+ * @event {CustomEvent} pie-modal-back - when the modal back button is clicked.
  */
 export class PieModal extends RtlMixin(LitElement) implements ModalProps {
     @property({ type: String })
@@ -39,12 +46,18 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
     @property({ type: Boolean, reflect: true })
     public isDismissible = false;
 
+    @property({ type: Boolean })
+    public hasBackButton = false;
+
     @property({ type: Boolean })
     public isFullWidthBelowMid = false;
 
     @property({ type: Boolean })
     public isOpen = false;
 
+    @property({ type: Boolean, reflect: true })
+    public isLoading = false;
+
     @property()
     public returnFocusAfterCloseSelector?: string;
 
@@ -52,8 +65,23 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
     @validPropertyValues(componentSelector, sizes, 'medium')
     public size: ModalProps['size'] = 'medium';
 
+    @property()
+    public leadingAction!: {
+        text: string;
+        variant?: Variant;
+        ariaLabel?: string;
+    };
+
+    @validPropertyValues(componentSelector, positions, 'center')
+    public position: ModalProps['position'] = 'center';
+
     @query('dialog')
-        _dialog?: HTMLDialogElement;
+    private _dialog?: HTMLDialogElement;
+
+    private _backButtonClicked = false;
+
+    // Renders a `CSSResult` generated from SCSS by Vite
+    static styles = unsafeCSS(styles);
 
     constructor () {
         super();
@@ -64,11 +92,13 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
         super.connectedCallback();
         document.addEventListener(ON_MODAL_OPEN_EVENT, this._handleModalOpened.bind(this));
         document.addEventListener(ON_MODAL_CLOSE_EVENT, this._handleModalClosed.bind(this));
+        document.addEventListener(ON_MODAL_BACK_EVENT, this._handleModalClosed.bind(this));
     }
 
     disconnectedCallback () : void {
         document.removeEventListener(ON_MODAL_OPEN_EVENT, this._handleModalOpened.bind(this));
         document.removeEventListener(ON_MODAL_CLOSE_EVENT, this._handleModalClosed.bind(this));
+        document.removeEventListener(ON_MODAL_BACK_EVENT, this._handleModalClosed.bind(this));
         super.disconnectedCallback();
     }
 
@@ -130,11 +160,17 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
 
     // Handles changes to the modal isOpen property by dispatching any appropriate events
     private _handleModalOpenStateChanged (changedProperties: DependentMap<ModalProps>) : void {
-        const previousValue = changedProperties.get('isOpen');
-
-        if (previousValue !== undefined) {
-            if (previousValue) {
-                this._dispatchModalCustomEvent(ON_MODAL_CLOSE_EVENT);
+        const wasPreviouslyOpen = changedProperties.get('isOpen');
+
+        if (wasPreviouslyOpen !== undefined) {
+            if (wasPreviouslyOpen) {
+                if (this._backButtonClicked) {
+                    // Reset the flag
+                    this._backButtonClicked = false;
+                    this._dispatchModalCustomEvent(ON_MODAL_BACK_EVENT);
+                } else {
+                    this._dispatchModalCustomEvent(ON_MODAL_CLOSE_EVENT);
+                }
             } else {
                 this._dispatchModalCustomEvent(ON_MODAL_OPEN_EVENT);
             }
@@ -144,7 +180,6 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
     /**
      * Return focus to the specified element, providing the selector is valid
      * and the chosen element can be found.
-     * Fails silently.
      */
     private _returnFocus () : void {
         const selector = this.returnFocusAfterCloseSelector?.trim();
@@ -154,31 +189,118 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
         }
     }
 
-    render () {
+    /**
+     * Template for the close button element. Called within the
+     * main render function.
+     *
+     * @private
+     */
+    private renderCloseButton (): TemplateResult {
+        return html`
+            <pie-icon-button
+                @click="${() => { this.isOpen = false; }}"
+                variant="ghost-secondary"
+                class="c-modal-closeBtn"
+                data-test-id="modal-close-button"><icon-close /></pie-icon-button>
+        `;
+    }
+
+    /**
+     * Template for the back button element. Called within the
+     * main render function.
+     *
+     * @private
+     */
+    private renderBackButton () : TemplateResult {
+        return html`
+            <pie-icon-button
+                @click="${() => { this._backButtonClicked = true; this.isOpen = false; }}"
+                variant="ghost-secondary"
+                class="c-modal-backBtn"
+                data-test-id="modal-back-button">
+                ${this.isRTL ? html`<icon-chevron-right />` : html`<icon-chevron-left />`}
+            </pie-icon-button>
+        `;
+    }
+
+    /**
+     * Render leadingAction button depending on prop availability.
+     *
+     * 1. If the prop `leadingAction` is not provided, the button is not rendered.
+     * 2. If the prop `leadingAction` is provided but any of the optional properties
+     * are not provided, they fall back to their default values.
+     *
+     * @private
+     */
+    private renderLeadingAction (): TemplateResult | typeof nothing {
+        const { text = 'Confirm', variant = 'primary', ariaLabel } = this.leadingAction;
+
+        if (!text) {
+            return nothing;
+        }
+
+        return html`
+            <pie-button
+                  variant="${variant}"
+                  aria-label="${ariaLabel || nothing}"
+                  type="submit"
+                  @click="${() => this._dialog?.close('leading')}"
+                  data-test-id="modal-leading-action">
+                ${text}
+              </pie-button>
+        `;
+    }
+
+    public render () {
         const {
+            hasBackButton,
             heading,
             headingLevel = 'h2',
-            size,
+            isDismissible,
             isFullWidthBelowMid,
+            isLoading,
+            size,
+            leadingAction,
+            position,
         } = this;
 
         const headingTag = unsafeStatic(headingLevel);
 
         return html`
-            <dialog
-                id="dialog"
-                class="c-modal"
-                size="${size}"
-                ?isFullWidthBelowMid=${isFullWidthBelowMid}>
-                <header>
-                    <${headingTag} class="c-modal-heading">${heading}</${headingTag}>
-                     ${this.isDismissible ? this.renderCloseButton() : nothing}
-                </header>
-                <article class="c-modal-content">
+        <dialog
+            id="dialog"
+            class="c-modal"
+            data-test-id="pie-modal"
+            size="${size}"
+            position="${position}"
+            ?hasBackButton=${hasBackButton}
+            ?isDismissible=${isDismissible}
+            ?isFullWidthBelowMid=${isFullWidthBelowMid}
+            ?isLoading=${isLoading}
+            data-test-id="pie-modal">
+            <header class="c-modal-header">
+                ${hasBackButton ? this.renderBackButton() : nothing}
+                <${headingTag} class="c-modal-heading">
+                    ${heading}
+                </${headingTag}>
+                ${isDismissible ? this.renderCloseButton() : nothing}
+            </header>
+            <article class="c-modal-content c-modal-content--scrollable">
+                <div class="c-modal-contentInner">
                     <slot></slot>
-                </article>
-            </dialog>
-        `;
+                </div>
+            </article>
+            <footer class="c-modal-footer">
+                ${leadingAction ? this.renderLeadingAction() : nothing}
+                <pie-button
+                    variant="ghost"
+                    type="reset"
+                    @click="${() => this._dialog?.close('supporting')}"
+                    data-test-id="modal-supporting-action">
+                    Cancel
+                </pie-button>
+            </footer>
+        </dialog>`;
     }
 
     /**
@@ -231,25 +353,6 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
 
         this.dispatchEvent(event);
     };
-
-    /**
-     * Template for the close button element. Called within the
-     * main render function.
-     *
-     * @private
-     */
-    private renderCloseButton (): TemplateResult {
-        return html`
-            <pie-icon-button
-                @click="${() => { this.isOpen = false; }}"
-                variant="ghost-secondary"
-                class="c-modal-closeBtn"
-                data-test-id="modal-close-button"><icon-close /></pie-icon-button>
-        `;
-    }
-
-    // Renders a `CSSResult` generated from SCSS by Vite
-    static styles = unsafeCSS(styles);
 }
 
 customElements.define(componentSelector, PieModal);