Removed formatted-modal

There should only ever be one type of modal, and it's always formatted
Added a 'cancel-cross' onto the modal
Fixed type in the package.json

framework/default/ortoo-core/default/lwc/confirmationDialog/__tests__/confirmationDialog.test.js

@@ -9,15 +9,15 @@ describe('c-confirmation-dialog', () => {
         }
     });
 
-    it('When set to visible, and with a title contains a div containing the title, directing it to the title slot', () => {
+    it('When set to visible, with a title, contains a div with the title, directing it to the title slot', () => {
         const element = createElement('c-confirmation-dialog', {
             is: ConfirmationDialog
         });
         element.title   = 'The title';
         element.visible = true;
         document.body.appendChild(element);
 
-        const expectedElement = element.shadowRoot.querySelector( 'c-formatted-modal div[slot="title"]' );
+        const expectedElement = element.shadowRoot.querySelector( 'c-modal div[slot="title"]' );
         expect( expectedElement.innerHTML ).toBe( 'The title' );
     });
 
@@ -29,7 +29,7 @@ describe('c-confirmation-dialog', () => {
         element.visible = true;
         document.body.appendChild(element);
 
-        const expectedElement = element.shadowRoot.querySelector( 'c-formatted-modal div[slot="contents"]' );
+        const expectedElement = element.shadowRoot.querySelector( 'c-modal div[slot="contents"]' );
         expect( expectedElement ).not.toBe( null );
     });
 
@@ -42,7 +42,7 @@ describe('c-confirmation-dialog', () => {
         element.visible = true;
         document.body.appendChild(element);
 
-        const expectedElement = element.shadowRoot.querySelector( 'c-formatted-modal div[slot="footer"]' );
+        const expectedElement = element.shadowRoot.querySelector( 'c-modal div[slot="footer"]' );
         expect( expectedElement ).not.toBe( null );
 
         expect( expectedElement.querySelector( '[title="Confirm"]' ) ).not.toBe( null );

framework/default/ortoo-core/default/lwc/confirmationDialog/confirmationDialog.html

@@ -1,5 +1,5 @@
 <template>
-    <c-formatted-modal visible={visible}>
+    <c-modal visible={visible}>
         <div slot="title">
             {title}
         </div>
@@ -26,5 +26,5 @@
                 ></lightning-button>
             </lightning-button-group>
         </div>
-    </c-formatted-modal>
+    </c-modal>
 </template>

framework/default/ortoo-core/default/lwc/modal/__tests__/modal.test.js

@@ -11,38 +11,101 @@ describe('c-modal', () => {
 
     // TODO: test the cancel event
 
-    it( 'Component is set to visible, the contents slot is shown', () => {
+    it( 'Component is set to visible, the title, contents and footer slots are shown', () => {
         const element = createElement('c-modal', {
             is: Modal
         });
         element.visible = true;
 
         document.body.appendChild( element );
 
-        const div = element.shadowRoot.querySelector( 'slot[name="contents"]' );
-        expect( div ).not.toBe( null );
+        const titleDiv = element.shadowRoot.querySelector( 'slot[name="title"]' );
+        expect( titleDiv ).not.toBe( null );
+
+        const contentsDiv = element.shadowRoot.querySelector( 'slot[name="contents"]' );
+        expect( contentsDiv ).not.toBe( null );
+
+        const footerDiv = element.shadowRoot.querySelector( 'slot[name="footer"]' );
+        expect( footerDiv ).not.toBe( null );
     });
 
-    it( 'Component is set to not visible, the contents slot is not shown', () => {
+    it( 'Component is set to not visible, the title, contents and footer slots slots are not shown', () => {
         const element = createElement('c-modal', {
             is: Modal
         });
         element.visible = false;
 
         document.body.appendChild( element );
 
-        const div = element.shadowRoot.querySelector( 'slot[name="contents"]' );
-        expect( div ).toBe( null );
+        const titleDiv = element.shadowRoot.querySelector( 'slot[name="title"]' );
+        expect( titleDiv ).toBe( null );
+
+        const contentsDiv = element.shadowRoot.querySelector( 'slot[name="contents"]' );
+        expect( contentsDiv ).toBe( null );
+
+        const footerDiv = element.shadowRoot.querySelector( 'slot[name="footer"]' );
+        expect( footerDiv ).toBe( null );
     });
 
-    it( 'Component visibility is not set, the contents slot is not shown', () => {
+    it( 'Component visibility is not set, the title, contents and footer slots slots are not shown', () => {
         const element = createElement('c-modal', {
             is: Modal
         });
 
         document.body.appendChild( element );
 
-        const div = element.shadowRoot.querySelector( 'slot[name="contents"]' );
-        expect( div ).toBe( null );
+        const titleDiv = element.shadowRoot.querySelector( 'slot[name="title"]' );
+        expect( titleDiv ).toBe( null );
+
+        const contentsDiv = element.shadowRoot.querySelector( 'slot[name="contents"]' );
+        expect( contentsDiv ).toBe( null );
+
+        const footerDiv = element.shadowRoot.querySelector( 'slot[name="footer"]' );
+        expect( footerDiv ).toBe( null );
     });
+
+    it( 'Will issue a cancel event when "escape" is pressed', () => {
+
+        const element = createElement('c-modal', {
+            is: Modal
+        });
+        element.visible = true;
+
+        document.body.appendChild( element );
+
+        let cancelHandler = jest.fn();
+        element.addEventListener( 'cancel', cancelHandler );
+
+        return Promise.resolve()
+            .then( () => {
+                const escapeKeyEvent = new KeyboardEvent( 'keydown', { code: 'Escape' } );
+                return element.shadowRoot.querySelector( 'lightning-card' ).dispatchEvent( escapeKeyEvent );
+            })
+            .then( () => {
+                expect( cancelHandler ).toHaveBeenCalled();
+            });
+    });
+    it( 'Will issue a cancel event when "cancel cross" is pressed', () => {
+
+        const element = createElement('c-modal', {
+            is: Modal
+        });
+        element.visible = true;
+
+        document.body.appendChild( element );
+
+        let cancelHandler = jest.fn();
+        element.addEventListener( 'cancel', cancelHandler );
+
+        return Promise.resolve()
+            .then( () => {
+                const clickEvent = new CustomEvent( 'click', {} );
+                return element.shadowRoot.querySelector( 'button[aria-id="cancel-cross"]' ).dispatchEvent( clickEvent );
+            })
+            .then( () => {
+                expect( cancelHandler ).toHaveBeenCalled();
+            });
+    });
+
+
 });

framework/default/ortoo-core/default/lwc/modal/modal.html

@@ -1,21 +1,4 @@
 <template>
-    <!--
-        Remove formatted modal, and move it all into here.
-        Add the cancel cross - don't forget to test it.
-        You can't have a modal that isn't formatted because of the way the header contains the cancel button
-
-        The modal should have a background that includes the right level of padding and suchlike, so a form without formatting can be added
-
-        Create standard save buttons and extract from the view and edit form.
-
-        Change the selection criteria edit form so that it no longer uses the view and edit form.
-
-        Construct the modal with the right title / buttons and edit form in the definer
-
-        Consider making an 'edit modal' that takes a title and form and handles the save and edit buttons?
-    -->
-
-
     <lightning-card if:true={visible} onkeydown={handleKeyDown}>
         <div class="slds-container_small">
             <section
@@ -27,7 +10,35 @@
                 class="slds-modal slds-fade-in-open"
             >
                 <div class="slds-modal__container">
-                    <slot name="contents"></slot>
+
+                    <header class="slds-modal__header">
+                        <!-- TODO: labels for 'Close' -->
+                        <button
+                            class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
+                            title="Close"
+                            onclick={handleCancel}
+                            aria-id="cancel-cross"
+                        >
+                            <lightning-icon
+                                icon-name="utility:close"
+                                alternative-text="close"
+                                variant="inverse"
+                                size="small"
+                            ></lightning-icon>
+                            <span class="slds-assistive-text">Close</span>
+                        </button>
+                        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">
+                            <slot name="title"></slot>
+                        </h2>
+                    </header>
+
+                    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
+                        <slot name="contents"></slot>
+                    </div>
+
+                    <footer class="slds-modal__footer">
+                        <slot name="footer"></slot>
+                    </footer>
                 </div>
             </section>
             <div class="slds-backdrop slds-backdrop_open"></div>

package.json

@@ -11,7 +11,7 @@
     "test:unit:debug": "sfdx-lwc-jest --debug",
     "test:unit:coverage": "sfdx-lwc-jest --coverage",
     "prettier": "prettier --write \"**/*.{cls,cmp,component,css,html,js,json,md,page,trigger,xml,yaml,yml}\"",
-    "prettier:verify": "prettier --list-different \"**/*.{cls,cmp,component,css,html,js,json,md,page,trigger,xml,yaml,yml}\"",
+    "prettier:verify": "prettier --list-different \"**/*.{cls,cmp,component,css,html,js,json,md,page,trigger,xml,yaml,yml}\""
   },
   "devDependencies": {
     "@lwc/eslint-plugin-lwc": "^1.0.1",