diff --git a/TODO.txt b/TODO.txt
index 7f127230b40..de89de59fb5 100644
--- a/TODO.txt
+++ b/TODO.txt
@@ -22,6 +22,7 @@ Look at:
* Standards
* data-name to identify elements in a test
+ * e.g. [data-name="cancel"]
* Labels should be:
* Imported into a static named _LABEL
* Referenced in an object named 'labels'.
diff --git a/framework/default/ortoo-core/default/labels/ortoo-core-CustomLabels.labels-meta.xml b/framework/default/ortoo-core/default/labels/ortoo-core-CustomLabels.labels-meta.xml
index 516abc38685..f9f05b33dbd 100644
--- a/framework/default/ortoo-core/default/labels/ortoo-core-CustomLabels.labels-meta.xml
+++ b/framework/default/ortoo-core/default/labels/ortoo-core-CustomLabels.labels-meta.xml
@@ -84,4 +84,25 @@
The word 'Confirm', capitalised.
Confirm
+
+ ortoo_core_yes
+ en_US
+ false
+ The word 'Yes', capitalised.
+ Yes
+
+
+ ortoo_core_no
+ en_US
+ false
+ The word 'No', capitalised.
+ No
+
+
+ ortoo_core_save
+ en_US
+ false
+ The word 'Save', capitalised.
+ Save
+
\ No newline at end of file
diff --git a/framework/default/ortoo-core/default/lwc/confirmationDialog/__tests__/confirmationDialog.test.js b/framework/default/ortoo-core/default/lwc/confirmationDialog/__tests__/confirmationDialog.test.js
index b7628ac7003..7e2dc8fb7f7 100644
--- a/framework/default/ortoo-core/default/lwc/confirmationDialog/__tests__/confirmationDialog.test.js
+++ b/framework/default/ortoo-core/default/lwc/confirmationDialog/__tests__/confirmationDialog.test.js
@@ -55,18 +55,41 @@ describe('c-confirmation-dialog', () => {
const element = createElement('c-confirmation-dialog', {
is: ConfirmationDialog
});
- element.confirmLabel = 'Confirm';
- element.cancelLabel = 'Cancel';
+ element.type = 'save';
+ element.confirmLabel = 'Confirm thing';
+ element.cancelLabel = 'Cancel thing';
element.visible = true;
document.body.appendChild(element);
const expectedElement = element.shadowRoot.querySelector( 'c-modal div[slot="footer"]' );
expect( expectedElement ).not.toBe( null );
- expect( expectedElement.querySelector( '[data-name="confirm"]' ).title ).toBe( element.confirmLabel );
- expect( expectedElement.querySelector( '[data-name="confirm"]' ).label ).toBe( element.confirmLabel );
- expect( expectedElement.querySelector( '[data-name="cancel"]' ).title ).toBe( element.cancelLabel );
- expect( expectedElement.querySelector( '[data-name="cancel"]' ).label ).toBe( element.cancelLabel );
+ expect( expectedElement.querySelector( '[data-name="confirm"]' ).title ).toBe( 'Confirm thing' );
+ expect( expectedElement.querySelector( '[data-name="confirm"]' ).label ).toBe( 'Confirm thing' );
+ expect( expectedElement.querySelector( '[data-name="cancel"]' ).title ).toBe( 'Cancel thing' );
+ expect( expectedElement.querySelector( '[data-name="cancel"]' ).label ).toBe( 'Cancel thing' );
+ });
+
+ it('When set to visible and passed a valid type, contains a div containing cancel and confirm buttons with the specified labels, directing them to the modal footer slot', () => {
+ const element = createElement('c-confirmation-dialog', {
+ is: ConfirmationDialog
+ });
+ element.type = 'save';
+ element.visible = true;
+ document.body.appendChild(element);
+
+ const expectedElement = element.shadowRoot.querySelector( 'c-modal div[slot="footer"]' );
+ expect( expectedElement ).not.toBe( null );
+
+ expect( expectedElement.querySelector( '[data-name="confirm"]' ).label ).not.toBe( null );
+ expect( expectedElement.querySelector( '[data-name="cancel"]' ).label ).not.toBe( null );
+ });
+
+ it('When set to an invalid type, will throw an error', () => {
+ const element = createElement('c-confirmation-dialog', {
+ is: ConfirmationDialog
+ });
+ expect( () => element.type = 'invalid' ).toThrowError( 'Invalid type specified, should be one of confirm, yesNo, save' );
});
it('Clicking the confirm button will issue an event containing the confirm event message', () => {
diff --git a/framework/default/ortoo-core/default/lwc/confirmationDialog/confirmationDialog.js b/framework/default/ortoo-core/default/lwc/confirmationDialog/confirmationDialog.js
index 0d36eefe494..4ae57cb8fec 100644
--- a/framework/default/ortoo-core/default/lwc/confirmationDialog/confirmationDialog.js
+++ b/framework/default/ortoo-core/default/lwc/confirmationDialog/confirmationDialog.js
@@ -2,14 +2,61 @@ import { LightningElement, api } from 'lwc';
import CONFIRM_LABEL from '@salesforce/label/c.ortoo_core_confirm';
import CANCEL_LABEL from '@salesforce/label/c.ortoo_core_cancel';
+import YES_LABEL from '@salesforce/label/c.ortoo_core_yes';
+import NO_LABEL from '@salesforce/label/c.ortoo_core_no';
+import SAVE_LABEL from '@salesforce/label/c.ortoo_core_save';
+const type = {
+ confirm: 'confirm',
+ yesNo : 'yesNo',
+ save : 'save'
+};
+
+const buttonLabels = {
+ confirm: {
+ confirm: CONFIRM_LABEL,
+ cancel : CANCEL_LABEL
+ },
+ yesNo: {
+ confirm: YES_LABEL,
+ cancel : NO_LABEL
+ },
+ save: {
+ confirm: SAVE_LABEL,
+ cancel : CANCEL_LABEL
+ }
+};
export default class ConfirmationDialog extends LightningElement {
- // TODO: consider standard variations - No / *Yes ; Cancel / *Confirm ; Cancel / *Save
- // yesNoConfirmationDialog
- // saveConfirmationDialog
- @api confirmLabel = CONFIRM_LABEL;
- @api cancelLabel = CANCEL_LABEL;
+ _type
+ @api
+ get type() {
+ return this._type ? this._type : type.confirm;
+ };
+ set type( value ) {
+ if ( ! type.hasOwnProperty( value ) ) {
+ throw 'Invalid type specified, should be one of ' + type;
+ }
+ this._type = value;
+ }
+
+ _confirmLabel
+ @api
+ get confirmLabel() {
+ return this._confirmLabel ? this._confirmLabel : buttonLabels[ this.type ].confirm;
+ }
+ set confirmLabel( value ) {
+ this._confirmLabel = value;
+ }
+
+ _cancelLabel
+ @api
+ get cancelLabel() {
+ return this._cancelLabel ? this._cancelLabel : buttonLabels[ this.type ].cancel;
+ }
+ set cancelLabel( value ) {
+ this._cancelLabel = value;
+ }
// The message to send back to the parent component when the confirmation button is clicked
@api confirmEventMessage;
@@ -19,6 +66,11 @@ export default class ConfirmationDialog extends LightningElement {
@api visible;
+ connectedCallback() {
+ this.confirmLabel = this.confirmLabel ? this.confirmLabel : buttonLabels[ this.type ].confirm;
+ this.cancelLabel = this.cancelLabel ? this.cancelLabel : buttonLabels[ this.type ].cancel;
+ }
+
handleCancel( event ) {
this.dispatchEvent( new CustomEvent( 'cancel', { detail: this.cancelEventMessage } ) );
}