refactor(action-pane): remove h5 and h6 max to h4 (openscd#755)

Author: JakobVogelsang

src/action-pane.ts

@@ -79,12 +79,8 @@ export class ActionPane extends LitElement {
         return html`<h2>${content}</h2>`;
       case 3:
         return html`<h3>${content}</h3>`;
-      case 4:
-        return html`<h4>${content}</h4>`;
-      case 5:
-        return html`<h5>${content}</h5>`;
       default:
-        return html`<h6>${content}</h6>`;
+        return html`<h4>${content}</h4>`;
     }
   }
 
@@ -150,9 +146,7 @@ export class ActionPane extends LitElement {
     h1,
     h2,
     h3,
-    h4,
-    h5,
-    h6 {
+    h4 {
       color: var(--mdc-theme-on-surface);
       font-family: 'Roboto', sans-serif;
       font-weight: 300;

test/unit/action-pane.test.ts

@@ -23,8 +23,6 @@ describe('action-pane', () => {
     expect(element.shadowRoot?.querySelector('h2')).to.not.exist;
     expect(element.shadowRoot?.querySelector('h3')).to.not.exist;
     expect(element.shadowRoot?.querySelector('h4')).to.not.exist;
-    expect(element.shadowRoot?.querySelector('h5')).to.not.exist;
-    expect(element.shadowRoot?.querySelector('h6')).to.not.exist;
   });
 
   it('renders the header as <h1> with level 1', async () => {
@@ -34,8 +32,6 @@ describe('action-pane', () => {
     expect(element.shadowRoot?.querySelector('h2')).to.not.exist;
     expect(element.shadowRoot?.querySelector('h3')).to.not.exist;
     expect(element.shadowRoot?.querySelector('h4')).to.not.exist;
-    expect(element.shadowRoot?.querySelector('h5')).to.not.exist;
-    expect(element.shadowRoot?.querySelector('h6')).to.not.exist;
   });
 
   it('renders the header as <h2> with level 2', async () => {
@@ -45,8 +41,6 @@ describe('action-pane', () => {
     expect(element.shadowRoot?.querySelector('h1')).to.not.exist;
     expect(element.shadowRoot?.querySelector('h3')).to.not.exist;
     expect(element.shadowRoot?.querySelector('h4')).to.not.exist;
-    expect(element.shadowRoot?.querySelector('h5')).to.not.exist;
-    expect(element.shadowRoot?.querySelector('h6')).to.not.exist;
   });
 
   it('renders the header as <h3> with level 3', async () => {
@@ -56,8 +50,6 @@ describe('action-pane', () => {
     expect(element.shadowRoot?.querySelector('h1')).to.not.exist;
     expect(element.shadowRoot?.querySelector('h2')).to.not.exist;
     expect(element.shadowRoot?.querySelector('h4')).to.not.exist;
-    expect(element.shadowRoot?.querySelector('h5')).to.not.exist;
-    expect(element.shadowRoot?.querySelector('h6')).to.not.exist;
   });
 
   it('renders the header as <h4> with level 4', async () => {
@@ -67,41 +59,15 @@ describe('action-pane', () => {
     expect(element.shadowRoot?.querySelector('h1')).to.not.exist;
     expect(element.shadowRoot?.querySelector('h2')).to.not.exist;
     expect(element.shadowRoot?.querySelector('h3')).to.not.exist;
-    expect(element.shadowRoot?.querySelector('h5')).to.not.exist;
-    expect(element.shadowRoot?.querySelector('h6')).to.not.exist;
   });
 
-  it('renders the header as <h5> with level 5', async () => {
-    element.level = 5;
-    await element.updateComplete;
-    expect(element.shadowRoot?.querySelector('h5')).to.exist;
-    expect(element.shadowRoot?.querySelector('h1')).to.not.exist;
-    expect(element.shadowRoot?.querySelector('h2')).to.not.exist;
-    expect(element.shadowRoot?.querySelector('h3')).to.not.exist;
-    expect(element.shadowRoot?.querySelector('h4')).to.not.exist;
-    expect(element.shadowRoot?.querySelector('h6')).to.not.exist;
-  });
-
-  it('renders the header as <h6> with level 6', async () => {
-    element.level = 6;
-    await element.updateComplete;
-    expect(element.shadowRoot?.querySelector('h6')).to.exist;
-    expect(element.shadowRoot?.querySelector('h1')).to.not.exist;
-    expect(element.shadowRoot?.querySelector('h2')).to.not.exist;
-    expect(element.shadowRoot?.querySelector('h3')).to.not.exist;
-    expect(element.shadowRoot?.querySelector('h4')).to.not.exist;
-    expect(element.shadowRoot?.querySelector('h5')).to.not.exist;
-  });
-
-  it('renders the header as <h6> for levels > 6', async () => {
+  it('renders the header as <h4> for levels > 4', async () => {
     element.level = 7;
     await element.updateComplete;
-    expect(element.shadowRoot?.querySelector('h6')).to.exist;
+    expect(element.shadowRoot?.querySelector('h4')).to.exist;
     expect(element.shadowRoot?.querySelector('h1')).to.not.exist;
     expect(element.shadowRoot?.querySelector('h2')).to.not.exist;
     expect(element.shadowRoot?.querySelector('h3')).to.not.exist;
-    expect(element.shadowRoot?.querySelector('h4')).to.not.exist;
-    expect(element.shadowRoot?.querySelector('h5')).to.not.exist;
   });
 
   it('renders the header as <h1> for levels < 1', async () => {
@@ -111,8 +77,6 @@ describe('action-pane', () => {
     expect(element.shadowRoot?.querySelector('h2')).to.not.exist;
     expect(element.shadowRoot?.querySelector('h3')).to.not.exist;
     expect(element.shadowRoot?.querySelector('h4')).to.not.exist;
-    expect(element.shadowRoot?.querySelector('h5')).to.not.exist;
-    expect(element.shadowRoot?.querySelector('h6')).to.not.exist;
   });
 
   it('does not set contrasted class property with odd level', async () => {