forked from apex-enterprise-patterns/fflib-apex-common
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added generic LWC to render a highlighted message with similar stylin…
…g to a toast
- Loading branch information
1 parent
9dcd0f6
commit 0625bcb
Showing
4 changed files
with
197 additions
and
0 deletions.
There are no files selected for viewing
129 changes: 129 additions & 0 deletions
129
framework/default/ortoo-core/default/lwc/message/__tests__/message.test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,129 @@ | ||
import { createElement } from 'lwc'; | ||
import Message from 'c/message'; | ||
|
||
const MESSAGE_SELECTOR = '[data-ortoo-elem-id="messagebox-message"]'; | ||
const ICON_SELECTOR = '[data-ortoo-elem-id="messagebox-icon"]'; | ||
const CONTAINER_SELECTOR = '[data-ortoo-elem-id="messagebox-container"]'; | ||
|
||
describe('c-message', () => { | ||
|
||
beforeEach(() => { | ||
const element = createElement('c-message', { | ||
is: Message | ||
}); | ||
document.body.appendChild( element ); | ||
}); | ||
|
||
afterEach(() => { | ||
// The jsdom instance is shared across test cases in a single file so reset the DOM | ||
while (document.body.firstChild) { | ||
document.body.removeChild(document.body.firstChild); | ||
} | ||
}); | ||
|
||
it( 'Will render the message given', () => { | ||
|
||
const element = document.body.querySelector( 'c-message' ); | ||
element.message = 'the message'; | ||
|
||
return Promise.resolve() | ||
.then( () => | ||
expect( element.shadowRoot.querySelector( MESSAGE_SELECTOR ).innerHTML ).toBe( 'the message' ) | ||
); | ||
}); | ||
|
||
it( 'When no message is set, will not render anything', () => { | ||
|
||
const element = document.body.querySelector( 'c-message' ); | ||
|
||
return Promise.resolve() | ||
.then( () => | ||
expect( element.shadowRoot.querySelector( MESSAGE_SELECTOR ) ).toBe( null ) | ||
); | ||
}); | ||
|
||
it( 'When message is set to an empty string, will not render anything', () => { | ||
|
||
const element = document.body.querySelector( 'c-message' ); | ||
element.message = ''; | ||
|
||
return Promise.resolve() | ||
.then( () => | ||
expect( element.shadowRoot.querySelector( MESSAGE_SELECTOR ) ).toBe( null ) | ||
); | ||
}); | ||
|
||
it( 'When message is set to a blank string, will not render anything', () => { | ||
|
||
const element = document.body.querySelector( 'c-message' ); | ||
element.message = ' '; | ||
|
||
return Promise.resolve() | ||
.then( () => | ||
expect( element.shadowRoot.querySelector( MESSAGE_SELECTOR ) ).toBe( null ) | ||
); | ||
}); | ||
|
||
it( 'When message is set to a 0 string, will render it', () => { | ||
|
||
const element = document.body.querySelector( 'c-message' ); | ||
element.message = '0'; | ||
|
||
return Promise.resolve() | ||
.then( () => | ||
expect( element.shadowRoot.querySelector( MESSAGE_SELECTOR ).innerHTML ).toBe( '0' ) | ||
); | ||
}); | ||
|
||
it( 'When variant is set to error, will set up an error message', () => { | ||
|
||
const element = document.body.querySelector( 'c-message' ); | ||
element.message = 'unimportant'; | ||
element.variant = 'error'; | ||
|
||
return Promise.resolve() | ||
.then( () => { | ||
expect( element.shadowRoot.querySelector( ICON_SELECTOR ).iconName ).toBe( 'utility:error' ) | ||
expect( element.shadowRoot.querySelector( CONTAINER_SELECTOR ).className ).toContain( 'slds-theme--error' ) | ||
}); | ||
}); | ||
|
||
it( 'When variant is set to info, will set up an info message', () => { | ||
|
||
const element = document.body.querySelector( 'c-message' ); | ||
element.message = 'unimportant'; | ||
element.variant = 'info'; | ||
|
||
return Promise.resolve() | ||
.then( () => { | ||
expect( element.shadowRoot.querySelector( ICON_SELECTOR ).iconName ).toBe( 'utility:info' ) | ||
expect( element.shadowRoot.querySelector( CONTAINER_SELECTOR ).className ).toContain( 'slds-theme--info' ) | ||
}); | ||
}); | ||
|
||
it( 'When variant is set to warning, will set up an warning message', () => { | ||
|
||
const element = document.body.querySelector( 'c-message' ); | ||
element.message = 'unimportant'; | ||
element.variant = 'warning'; | ||
|
||
return Promise.resolve() | ||
.then( () => { | ||
expect( element.shadowRoot.querySelector( ICON_SELECTOR ).iconName ).toBe( 'utility:warning' ) | ||
expect( element.shadowRoot.querySelector( CONTAINER_SELECTOR ).className ).toContain( 'slds-theme--warning' ) | ||
}); | ||
}); | ||
|
||
it( 'When variant is set to success, will set up an success message', () => { | ||
|
||
const element = document.body.querySelector( 'c-message' ); | ||
element.message = 'unimportant'; | ||
element.variant = 'success'; | ||
|
||
return Promise.resolve() | ||
.then( () => { | ||
expect( element.shadowRoot.querySelector( ICON_SELECTOR ).iconName ).toBe( 'utility:success' ) | ||
expect( element.shadowRoot.querySelector( CONTAINER_SELECTOR ).className ).toContain( 'slds-theme--success' ) | ||
}); | ||
}); | ||
}); |
13 changes: 13 additions & 0 deletions
13
framework/default/ortoo-core/default/lwc/message/message.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
<template> | ||
<div class={topLevelClasses} role="alert" if:true={messagePopulated} data-ortoo-elem-id={containerId}> | ||
<lightning-icon icon-name={iconName} size="small" variant="inverse" class="slds-m-right--small" data-ortoo-elem-id={iconId}></lightning-icon> | ||
|
||
<div class="toastContent slds-notify__content"> | ||
<div class="slds-align-middle slds-hyphenate"> | ||
<span class="toastMessage slds-text-heading--small forceActionsText" data-ortoo-elem-id={messageId}> | ||
{message} | ||
</span> | ||
</div> | ||
</div> | ||
</div> | ||
</template> |
50 changes: 50 additions & 0 deletions
50
framework/default/ortoo-core/default/lwc/message/message.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
import { LightningElement, api } from 'lwc'; | ||
import configureElementIdGenerator from 'c/elementIdGenerator'; | ||
|
||
export default class Message extends LightningElement { | ||
|
||
@api message; | ||
@api variant; | ||
|
||
@api ortooElemIdPrefix = 'messagebox'; | ||
|
||
ortooIdConfiguration = { | ||
messageId: 'message', | ||
iconId: 'icon', | ||
containerId: 'container', | ||
} | ||
|
||
connectedCallback() { | ||
configureElementIdGenerator( this ); | ||
} | ||
|
||
variantToClassMapping = { | ||
error: 'slds-theme--error', | ||
warning: 'slds-theme--warning', | ||
info: 'slds-theme--info', | ||
success: 'slds-theme--success', | ||
} | ||
|
||
variantToIconMapping = { | ||
error: 'utility:error', | ||
warning: 'utility:warning', | ||
info: 'utility:info', | ||
success: 'utility:success', | ||
} | ||
|
||
get messagePopulated() { | ||
return ( this.message && !/^\s*$/.test( this.message ) ); | ||
} | ||
|
||
get themeClass() { | ||
return this.variantToClassMapping[ this.variant ]; | ||
} | ||
|
||
get topLevelClasses() { | ||
return this.themeClass+' slds-notify--toast slds-notify slds-notify--toast forceToastMessage'; | ||
} | ||
|
||
get iconName() { | ||
return this.variantToIconMapping[ this.variant ]; | ||
} | ||
} |
5 changes: 5 additions & 0 deletions
5
framework/default/ortoo-core/default/lwc/message/message.js-meta.xml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
<?xml version="1.0" encoding="UTF-8"?> | ||
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> | ||
<apiVersion>52.0</apiVersion> | ||
<isExposed>false</isExposed> | ||
</LightningComponentBundle> |