Merge pull request #180 from umbraco/bugfix/missing-uui-key-registration

Author: nielslyngsoe

packages/uui-keyboard-shortcut/lib/uui-key.element.ts

@@ -1,11 +1,12 @@
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { css, html, LitElement } from 'lit';
-import { queryAssignedNodes } from 'lit/decorators.js';
 
 /**
  *  A visual representation of a key on you keyboard. use inside `<uui-keyboard-shortcut></uui-keyboard-shortcut>`
  *  @element uui-key
  *  @slot - for the key name. Anything you put in here will be lowercase.
  */
+@defineElement('uui-key')
 export class UUIKeyElement extends LitElement {
   static styles = [
     css`
@@ -19,23 +20,18 @@ export class UUIKeyElement extends LitElement {
         padding: 5px 7px;
         box-sizing: border-box;
         user-select: none;
+        text-transform: lowercase;
       }
     `,
   ];
 
-  @queryAssignedNodes()
-  private slotNodes!: NodeList;
-
-  private _changeCase() {
-    if (this.slotNodes !== null) {
-      this.slotNodes.forEach(node => {
-        if (node.nodeName === '#text' && node.nodeValue)
-          node.nodeValue = node.nodeValue?.toLowerCase();
-      });
-    }
+  render() {
+    return html`<slot></slot>`;
   }
+}
 
-  render() {
-    return html`<slot @slotchange=${this._changeCase}></slot>`;
+declare global {
+  interface HTMLElementTagNameMap {
+    'uui-key': UUIKeyElement;
   }
 }

packages/uui-keyboard-shortcut/lib/uui-keyboard-shortcut.test.ts

@@ -1,16 +1,25 @@
 import { html, fixture, expect } from '@open-wc/testing';
 import { UUIKeyboardShortcutElement } from './uui-keyboard-shortcut.element';
+import { UUIKeyElement } from './uui-key.element';
 import '.';
 
 describe('UUIKey', () => {
-  let element: UUIKeyboardShortcutElement;
+  let element: UUIKeyElement;
   beforeEach(async () => {
-    element = await fixture(html`<uui-key>z</uui-key> `);
+    element = await fixture(html`<uui-key>ESC</uui-key> `);
+  });
+
+  it('is defined', () => {
+    expect(element).to.be.instanceOf(UUIKeyElement);
   });
 
   it('passes the a11y audit', async () => {
     await expect(element).shadowDom.to.be.accessible();
   });
+
+  it('lowercase text content of element', async () => {
+    expect(element.innerText).to.equal('esc');
+  });
 });
 
 describe('UUIKeyboardShortcut', () => {
@@ -29,6 +38,10 @@ describe('UUIKeyboardShortcut', () => {
     `);
   });
 
+  it('is defined', () => {
+    expect(element).to.be.instanceOf(UUIKeyboardShortcutElement);
+  });
+
   it('passes the a11y audit', async () => {
     await expect(element).shadowDom.to.be.accessible();
   });