feat(helpers): add simple mode to action logger

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": [],

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();
   }
 
   /**

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.
+
+<Story name="Simple mode">
+  {() => {
+    const uid = Math.random().toString(36).substr(2, 10);
+    return html`
+      <div>To log: <code>Hello, World!</code></div>
+      <button
+        @click=${() => {
+          document.getElementById(`logger-${uid}`).log('Hello, World!');
+        }}
+      >Click this button</button>
+      <div>Or to log: <code>What's up, Planet!</code></div>
+      <button
+        @click=${() => {
+          document.getElementById(`logger-${uid}`).log(`What's up, Planet!`);
+        }}
+      >Click this button</button>
+      <sb-action-logger simple id="logger-${uid}"></sb-action-logger>
+    `;
+  }}
+</Story>
+
+```html
+<sb-action-logger simple></sb-action-logger>
+```
+
 ### Custom Title
 
+You can customize the action logger title with the `.title` property.
+
 <Story name="Custom Title">
   {() => {
     const uid = Math.random().toString(36).substr(2, 10);
@@ -92,6 +126,9 @@ npm i sb-action-logger
   }}
 </Story>
 
+```html
+<sb-action-logger .title=${'Hello World'}></sb-action-logger>
+```
 
 ## Rationale
 

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', () => {
+    it('can be set to simple mode for only showing a single log statement', async () => {
-    // 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 () => {
       const el = await fixture(html`
         <sb-action-logger simple></sb-action-logger>
       `);
-      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`
         <sb-action-logger></sb-action-logger>