Final push

index.html

@@ -85,11 +85,66 @@
       <span slot="subheader">DID YOU KNOW?</span>
       <p>There is about 0.4 pounds or 200 grams of salt (NaCl) in the average adult human body.</p>
     </learning-card>
+    <br><br><br><h1>Separate Implementations</h1><br>
+    <h2>Icon</h2>
+    <card-icon
+      type="science"
+      style="width: 100px; margin-top: .5em; display: flow; background-color: black;"
+    ></card-icon>
+    <br>
+    <h2>Header</h2>
+    <card-header slot="banner" type="science">
+      <h1
+        slot="header"
+        aria-label="Main header"
+        style="font-family: 'Open Sans', sans-serif; font-weight: 300;"
+      >
+        <slot name="header">UNIT 1</slot>
+      </h1>
+      <h2
+        slot="subheader"
+        aria-label="Sub Header"
+        style='font-family: "Open Sans", sans-serif; font-weight: 500;'
+      >
+        <slot name="subheader">CHEM CONNECTION</slot>
+      </h2>
+    </card-header>
+    <br>
+    <h2>Frame</h2>
+    <card-frame>
+      <card-header slot="banner" type="science">
+        <h1
+          slot="header"
+          aria-label="Main header"
+          style="font-family: 'Open Sans', sans-serif; font-weight: 300;"
+        >
+          <slot name="header">UNIT 1</slot>
+        </h1>
+        <h2
+          slot="subheader"
+          aria-label="Sub Header"
+          style='font-family: "Open Sans", sans-serif; font-weight: 500;'
+        >
+          <slot name="subheader">SCIENCE STUFF</slot>
+        </h2>
+      </card-header>
+      <br>
+      <h2>Toggle Content</h2>
+      <toggle-content
+        slot="content"
+      >
+        <p>WE HAVE CONTENT</p>
+      </toggle-content>
+    </card-frame>
+    <br>
+    <h2>Toggle Content</h2>
+    <toggle-content>
+      WE HAVE TOGGLED CONTENT
+    </toggle-content>
   </div>
   <script type="module">
     import "./src/app.js";
     import "./src/CardFrame.js";
-    import '@penstat2/penguin-button/penguin-button.js';
     import '@penstat2/penguin-state-button/penguin-state-button.js';
   </script>
 </body>

src/CardIcon.js

@@ -36,8 +36,6 @@ export class CardIcon extends SimpleColors {
     };
   }
 
-  // updated fires every time a property defined above changes
-  // this allows you to react to variables changing and use javascript to perform logic
   updated(changedProperties) {
     super.updated(changedProperties);
     changedProperties.forEach((oldValue, propName) => {
@@ -64,19 +62,10 @@ export class CardIcon extends SimpleColors {
     }
   }
 
-  // HTMLElement life-cycle, element has been connected to the page / added or moved
-  // this fires EVERY time the element is moved
-  connectedCallback() {
-    super.connectedCallback();
-  }
-
-  // HTMLElement life-cycle, element has been removed from the page OR moved
-  // this fires every time the element moves
   disconnectedCallback() {
     super.disconnectedCallback();
   }
 
-  // CSS - specific to Lit
   static get styles() {
     return [
       ...super.styles,

src/LearningCard.js

@@ -106,10 +106,7 @@ export class LearningCard extends LitElement {
             <slot name="subheader">${this.subheading}</slot>
           </h2>
         </card-header>
-        <toggle-content
-          style="margin-right: 5em; min-height: 40px; display: flex;"
-          slot="content"
-        >
+        <toggle-content slot="content">
           <slot></slot>
         </toggle-content>
       </card-frame>

src/ToggleContent.js

@@ -1,83 +1,43 @@
-// dependencies / things imported
 import { LitElement, html, css } from 'lit';
 
 const arrow = new URL('../assets/arrow.svg', import.meta.url).href;
 
-// EXPORT (so make available to other documents that reference this file) a class, that extends LitElement
-// which has the magic life-cycles and developer experience below added
 export class ToggleContent extends LitElement {
-  // a convention I enjoy so you can change the tag name in 1 place
   static get tag() {
     return 'toggle-content';
   }
 
-  // HTMLElement life-cycle, built in; use this for setting defaults
   constructor() {
     super();
     this.arrow = arrow;
     this.visible = false;
   }
 
-  // properties that you wish to use as data in HTML, CSS, and the updated life-cycle
-  static get properties() {
-    return {
-      // reflect allows state changes to the element's property to be leveraged in CSS selectors
-    };
-  }
-
-  // updated fires every time a property defined above changes
-  // this allows you to react to variables changing and use javascript to perform logic
-  // updated(changedProperties) {
-  //   changedProperties.forEach((oldValue, propName) => {
-  //     if (propName === 'type' && this[propName] === 'objective') {
-  //       this.icon = 'lightbulb';
-  //     }
-  //     if (propName === 'type' && this[propName] === 'science') {
-  //       this.icon = 'beaker';
-  //     }
-  //     if (propName === 'type' && this[propName] === 'question') {
-  //       this.icon = 'question';
-  //     }
-  //   });
-  // }
-
-  // Lit life-cycle; this fires the 1st time the element is rendered on the screen
-  // this is a sign it is safe to make calls to this.shadowRoot
   firstUpdated(changedProperties) {
     if (super.firstUpdated) {
       super.firstUpdated(changedProperties);
     }
     this.shadowRoot
       .querySelector('img')
       .addEventListener('click', this.toggleContent.bind(this));
-    // this.height = this.shadowRoot.querySelector('.hidden').clientHeight;
-    // this.shadowRoot.querySelector('.visible').style.height = this.height;
   }
 
-  // HTMLElement life-cycle, element has been connected to the page / added or moved
-  // this fires EVERY time the element is moved
-  connectedCallback() {
-    super.connectedCallback();
-  }
-
-  // HTMLElement life-cycle, element has been removed from the page OR moved
-  // this fires every time the element moves
-  disconnectedCallback() {
-    super.disconnectedCallback();
-  }
-
-  // CSS - specific to Lit
   static get styles() {
     return css`
       :host {
-        display: block;
         min-width: 20em;
+        margin-right: 5em;
+        min-height: 40px;
+        display: flex;
       }
 
       img {
         display: inline-flex;
         height: var(--learning-card-height, 100px);
         width: var(--learning-card-width, 100px);
+        max-height: 40px;
+        max-width: 40px;
+        rotation: 90deg;
       }
 
       .rotate {
@@ -116,23 +76,15 @@ export class ToggleContent extends LitElement {
     this.visible = !this.visible;
   }
 
-  // HTML - specific to Lit
   render() {
     return html`
-      <img
-        src="${this.arrow}"
-        class="rotate"
-        alt="Dropdown arrow"
-        style="max-height: 40px; max-width: 40px; rotation: 90deg; display: inline-flex;"
-      />
+      <img src="${this.arrow}" class="rotate" alt="Dropdown arrow" />
       <div class="hidden">
         <slot></slot>
       </div>
     `;
   }
 
-  // HAX specific callback
-  // This teaches HAX how to edit and work with your web component
   /**
    * haxProperties integration via file reference
    */

test/content.test.js

@@ -0,0 +1,38 @@
+import { html } from 'lit';
+import { fixture, expect } from '@open-wc/testing';
+
+import '../src/app.js';
+
+describe('LearningCard', () => {
+  let element;
+  beforeEach(async () => {
+    element = await fixture(html`<toggle-content>
+      <p>WE HAVE TOGGLED CONTENT</p>
+    </toggle-content>`);
+  });
+  it('renders the element', () => {
+    const main = document.querySelector('toggle-content');
+    expect(main).to.exist;
+  });
+
+  it('renders the p tag', () => {
+    const p = element.querySelector('p');
+    expect(p).to.exist;
+    expect(p.innerText).to.equal('WE HAVE TOGGLED CONTENT');
+  });
+
+  it('passes the a11y audit', async () => {
+    element.type = 'science';
+    setTimeout(() => {
+      expect(element).shadowDom.to.be.accessible();
+    }, 100);
+    element.type = 'objective';
+    setTimeout(() => {
+      expect(element).shadowDom.to.be.accessible();
+    }, 100);
+    element.type = 'question';
+    setTimeout(() => {
+      expect(element).shadowDom.to.be.accessible();
+    }, 100);
+  });
+});