diff --git a/packages/helpers/sb-action-logger/custom-elements.json b/packages/helpers/sb-action-logger/custom-elements.json index 22cb809c4..fb97ea31b 100644 --- a/packages/helpers/sb-action-logger/custom-elements.json +++ b/packages/helpers/sb-action-logger/custom-elements.json @@ -10,6 +10,12 @@ "type": "String", "description": "The title of action logger", "default": "Action Logger" + }, + { + "name": "simple", + "type": "Boolean", + "description": "Simple mode, which only shows a single log", + "default": "false" } ], "events": [], diff --git a/packages/helpers/sb-action-logger/src/SbActionLogger.js b/packages/helpers/sb-action-logger/src/SbActionLogger.js index e9404d834..bdb5defed 100644 --- a/packages/helpers/sb-action-logger/src/SbActionLogger.js +++ b/packages/helpers/sb-action-logger/src/SbActionLogger.js @@ -6,6 +6,7 @@ export class SbActionLogger extends LitElement { static get properties() { return { title: { type: String, reflect: true }, + simple: { type: Boolean, reflect: true }, __logCounter: { type: Number }, }; } @@ -136,6 +137,12 @@ export class SbActionLogger extends LitElement { * @param {} content Content to be logged to the action logger */ log(content) { + this.__animateCue(); + + if (this.simple) { + this.__clearLogs(); + } + if (this.__isConsecutiveDuplicateLog(content)) { this.__handleConsecutiveDuplicateLog(); } else { @@ -144,7 +151,6 @@ export class SbActionLogger extends LitElement { } this.__logCounter += 1; // increment total log counter - this.__animateCue(); } /** diff --git a/packages/helpers/sb-action-logger/stories/index.stories.mdx b/packages/helpers/sb-action-logger/stories/index.stories.mdx index 071d09a28..e72421293 100644 --- a/packages/helpers/sb-action-logger/stories/index.stories.mdx +++ b/packages/helpers/sb-action-logger/stories/index.stories.mdx @@ -63,6 +63,8 @@ This connects the logger element to the trigger. - Overridable `title` property. - Clear button to clear logs - A counter to count the total amount of logs +- Stacks consecutive duplicate logs and shows a counter +- `simple` property/attribute to only show a single log ## How to use @@ -78,8 +80,40 @@ npm i sb-action-logger ## Variations +### Simple mode + +Simple mode essentially means there is only ever 1 log. +Duplicates are not counted or stacked, but you will still see the visual cue. + + + {() => { + const uid = Math.random().toString(36).substr(2, 10); + return html` + To log: Hello, World! + { + document.getElementById(`logger-${uid}`).log('Hello, World!'); + }} + >Click this button + Or to log: What's up, Planet! + { + document.getElementById(`logger-${uid}`).log(`What's up, Planet!`); + }} + >Click this button + + `; + }} + + +```html + +``` + ### Custom Title +You can customize the action logger title with the `.title` property. + {() => { const uid = Math.random().toString(36).substr(2, 10); @@ -92,6 +126,9 @@ npm i sb-action-logger }} +```html + +``` ## Rationale diff --git a/packages/helpers/sb-action-logger/test/sb-action-logger.test.js b/packages/helpers/sb-action-logger/test/sb-action-logger.test.js index 6aa0a2d8b..3f7681ea4 100644 --- a/packages/helpers/sb-action-logger/test/sb-action-logger.test.js +++ b/packages/helpers/sb-action-logger/test/sb-action-logger.test.js @@ -113,17 +113,30 @@ describe('sb-action-logger', () => { expect(firstLog.querySelector('.logger__log-count').innerText).to.equal('3'); expect(lastLog.querySelector('.logger__log-count').innerText).to.equal('2'); }); - }); - describe('Potential Additional Features', () => { - // This is handy if you don't want to keep track of updates - it.skip('can be set to mode=simple for only showing a single log statement', async () => { + it('can be set to simple mode for only showing a single log statement', async () => { const el = await fixture(html` `); - expect(el).to.be.true; - }); + el.log('Hello, World!'); + const loggerEl = el.shadowRoot.querySelector('.logger'); + expect(loggerEl.children.length).to.equal(1); + expect(loggerEl.firstElementChild.querySelector('code').innerText).to.equal('Hello, World!'); + + el.log('Hello, Earth!'); + expect(loggerEl.children.length).to.equal(1); + expect(loggerEl.firstElementChild.querySelector('code').innerText).to.equal('Hello, Earth!'); + + el.log('Hello, Planet!'); + el.log('Hello, Planet!'); + expect(loggerEl.children.length).to.equal(1); + expect(loggerEl.firstElementChild.querySelector('code').innerText).to.equal('Hello, Planet!'); + expect(loggerEl.firstElementChild.querySelector('.logger__log-count')).to.be.null; + }); + }); + + describe('Potential Additional Features', () => { it.skip('fires a sb-action-logged event when something is logged to the logger', async () => { const el = await fixture(html`
Hello, World!
What's up, Planet!