diff --git a/index.html b/index.html index 7dd8cfd..6f3bfae 100644 --- a/index.html +++ b/index.html @@ -85,11 +85,66 @@ DID YOU KNOW?

There is about 0.4 pounds or 200 grams of salt (NaCl) in the average adult human body.

+


Separate Implementations


+

Icon

+ +
+

Header

+ +

+ UNIT 1 +

+

+ CHEM CONNECTION +

+ +
+

Frame

+ + +

+ UNIT 1 +

+

+ SCIENCE STUFF +

+ +
+

Toggle Content

+ +

WE HAVE CONTENT

+ + +
+

Toggle Content

+ + WE HAVE TOGGLED CONTENT + diff --git a/src/CardIcon.js b/src/CardIcon.js index a822c46..4f2e941 100644 --- a/src/CardIcon.js +++ b/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, diff --git a/src/LearningCard.js b/src/LearningCard.js index d038a6d..7497cfd 100644 --- a/src/LearningCard.js +++ b/src/LearningCard.js @@ -106,10 +106,7 @@ export class LearningCard extends LitElement { ${this.subheading} - + diff --git a/src/ToggleContent.js b/src/ToggleContent.js index 54d0b57..7bd262b 100644 --- a/src/ToggleContent.js +++ b/src/ToggleContent.js @@ -1,48 +1,18 @@ -// 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); @@ -50,34 +20,24 @@ export class ToggleContent extends LitElement { 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` - Dropdown arrow + Dropdown arrow `; } - // HAX specific callback - // This teaches HAX how to edit and work with your web component /** * haxProperties integration via file reference */ diff --git a/test/content.test.js b/test/content.test.js new file mode 100644 index 0000000..f4fb590 --- /dev/null +++ b/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` +

WE HAVE TOGGLED 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); + }); +});