@internetarchive/ia-topnav 1.1.26 → 1.1.27-alpha.1

package/src/wayback-slider.js

@@ -1,88 +1,88 @@
-import { html } from 'https://offshoot.prod.archive.org/lit.js';
-import './wayback-search.js';
-import TrackedElement from './tracked-element.js';
-import './save-page-form.js';
-import queryHandler from './lib/query-handler.js';
-import waybackSliderCSS from './styles/wayback-slider.js';
-import toSentenceCase from './lib/toSentenceCase.js';
-import formatUrl from './lib/formatUrl.js';
-
-class WaybackSlider extends TrackedElement {
-  static get styles() {
-    return waybackSliderCSS;
-  }
-
-  static get properties() {
-    return {
-      archiveItLinks: { type: Array },
-      baseHost: { type: String },
-      browserExtensionsLinks: { type: Array },
-      config: { type: Object },
-      mobileAppsLinks: { type: Array },
-    };
-  }
-
-  constructor() {
-    super();
-
-    this.archiveItLinks = [];
-    this.browserExtensionsLinks = [];
-    this.mobileAppsLinks = [];
-  }
-
-  get mobileAppsItems() {
-    return this.linkList('mobileAppsLinks', 'Wayback');
-  }
-
-  get browserExtensionsItems() {
-    return this.linkList('browserExtensionsLinks', 'Wayback');
-  }
-
-  get archiveItItems() {
-    return this.linkList('archiveItLinks', 'ArchiveIt');
-  }
-
-  linkList(linkType, eventPrefix) {
-    return this[linkType].map(link => html`<li>
-      <a href=${formatUrl(link.url, this.baseHost)} @click=${this.trackClick} data-event-click-tracking="${this.analyticsEvent(`${eventPrefix}${link.title}`)}" target=${link.external ? '_blank' : ''} rel=${link.external ? 'noreferrer noopener' : ''}>${link.title}</a>
-    </li>`);
-  }
-
-  analyticsEvent(title) {
-    return `${this.config.eventCategory}|${toSentenceCase(title)}`;
-  }
-
-  render() {
-    return html`
-      <div class="grid">
-        <wayback-search
-          .baseHost=${this.baseHost}
-          waybackPagesArchived=${this.config.waybackPagesArchived}
-          .queryHandler=${queryHandler}></wayback-search>
-        <div class="link-lists">
-          <div>
-            <h4>Mobile Apps</h4>
-            <ul class="mobile-apps">
-              ${this.mobileAppsItems}
-            </ul>
-            <h4>Browser Extensions</h4>
-            <ul class="browser-extensions">
-              ${this.browserExtensionsItems}
-            </ul>
-          </div>
-          <div>
-            <h4>Archive-It Subscription</h4>
-            <ul class="archive-it">
-              ${this.archiveItItems}
-            </ul>
-          </div>
-        </div>
-        <save-page-form .config=${this.config}></save-page-form>
-      </div>
-    `;
-  }
-}
-
-customElements.define('wayback-slider', WaybackSlider);
-
-export default WaybackSlider;
+import { html } from 'https://offshoot.prod.archive.org/lit.js';
+import './wayback-search.js';
+import TrackedElement from './tracked-element.js';
+import './save-page-form.js';
+import queryHandler from './lib/query-handler.js';
+import waybackSliderCSS from './styles/wayback-slider.js';
+import toSentenceCase from './lib/toSentenceCase.js';
+import formatUrl from './lib/formatUrl.js';
+
+class WaybackSlider extends TrackedElement {
+  static get styles() {
+    return waybackSliderCSS;
+  }
+
+  static get properties() {
+    return {
+      archiveItLinks: { type: Array },
+      baseHost: { type: String },
+      browserExtensionsLinks: { type: Array },
+      config: { type: Object },
+      mobileAppsLinks: { type: Array },
+    };
+  }
+
+  constructor() {
+    super();
+
+    this.archiveItLinks = [];
+    this.browserExtensionsLinks = [];
+    this.mobileAppsLinks = [];
+  }
+
+  get mobileAppsItems() {
+    return this.linkList('mobileAppsLinks', 'Wayback');
+  }
+
+  get browserExtensionsItems() {
+    return this.linkList('browserExtensionsLinks', 'Wayback');
+  }
+
+  get archiveItItems() {
+    return this.linkList('archiveItLinks', 'ArchiveIt');
+  }
+
+  linkList(linkType, eventPrefix) {
+    return this[linkType].map(link => html`<li>
+      <a href=${formatUrl(link.url, this.baseHost)} @click=${this.trackClick} data-event-click-tracking="${this.analyticsEvent(`${eventPrefix}${link.title}`)}" target=${link.external ? '_blank' : ''} rel=${link.external ? 'noreferrer noopener' : ''}>${link.title}</a>
+    </li>`);
+  }
+
+  analyticsEvent(title) {
+    return `${this.config.eventCategory}|${toSentenceCase(title)}`;
+  }
+
+  render() {
+    return html`
+      <div class="grid">
+        <wayback-search
+          .baseHost=${this.baseHost}
+          waybackPagesArchived=${this.config.waybackPagesArchived}
+          .queryHandler=${queryHandler}></wayback-search>
+        <div class="link-lists">
+          <div>
+            <h4>Mobile Apps</h4>
+            <ul class="mobile-apps">
+              ${this.mobileAppsItems}
+            </ul>
+            <h4>Browser Extensions</h4>
+            <ul class="browser-extensions">
+              ${this.browserExtensionsItems}
+            </ul>
+          </div>
+          <div>
+            <h4>Archive-It Subscription</h4>
+            <ul class="archive-it">
+              ${this.archiveItItems}
+            </ul>
+          </div>
+        </div>
+        <save-page-form .config=${this.config}></save-page-form>
+      </div>
+    `;
+  }
+}
+
+customElements.define('wayback-slider', WaybackSlider);
+
+export default WaybackSlider;

package/stories/topnav-element.stories.js

@@ -1,7 +1,7 @@
-import { storiesOf, withKnobs, withClassPropertiesKnobs } from '@open-wc/demoing-storybook';
-
-import IAMobileTopNav from '../index';
-
-storiesOf('IAMobileTopNav', module)
-  .addDecorator(withKnobs)
-  .add('Mobile top nav options', () => withClassPropertiesKnobs(IAMobileTopNav));
+import { storiesOf, withKnobs, withClassPropertiesKnobs } from '@open-wc/demoing-storybook';
+
+import IAMobileTopNav from '../index';
+
+storiesOf('IAMobileTopNav', module)
+  .addDecorator(withKnobs)
+  .add('Mobile top nav options', () => withClassPropertiesKnobs(IAMobileTopNav));

package/test/assets/img/hamburger.test.js

@@ -1,15 +1,15 @@
-import { html, fixture, expect } from '@open-wc/testing';
-import '../../../src/assets/img/hamburger';
-
-describe('<icon-hamburger>', () => {
-  it('toggles close icon when property toggled', async () => {
-    const icon = await fixture(html`<icon-hamburger></icon-hamburger>`);
-
-    icon.active = true;
-    await icon.updateComplete;
-
-    const titleElement = icon.shadowRoot.querySelector('svg title');
-
-    expect(titleElement.getAttribute('id')).to.match(/close/);
-  });
-});
+import { html, fixture, expect } from '@open-wc/testing';
+import '../../../src/assets/img/hamburger';
+
+describe('<icon-hamburger>', () => {
+  it('toggles close icon when property toggled', async () => {
+    const icon = await fixture(html`<icon-hamburger></icon-hamburger>`);
+
+    icon.active = true;
+    await icon.updateComplete;
+
+    const titleElement = icon.shadowRoot.querySelector('svg title');
+
+    expect(titleElement.getAttribute('id')).to.match(/close/);
+  });
+});

package/test/assets/img/user.test.js

@@ -1,15 +1,15 @@
-import { html, fixture, expect } from '@open-wc/testing';
-import '../../../src/assets/img/user';
-
-describe('<user-image>', () => {
-  it('toggles active class when property toggled', async () => {
-    const icon = await fixture(html`<user-image></user-image>`);
-
-    icon.active = true;
-    await icon.updateComplete;
-
-    const styleElement = icon.shadowRoot.querySelector('svg > path');
-
-    expect(styleElement.classList.contains('active')).to.be.true;
-  });
-});
+import { html, fixture, expect } from '@open-wc/testing';
+import '../../../src/assets/img/user';
+
+describe('<user-image>', () => {
+  it('toggles active class when property toggled', async () => {
+    const icon = await fixture(html`<user-image></user-image>`);
+
+    icon.active = true;
+    await icon.updateComplete;
+
+    const styleElement = icon.shadowRoot.querySelector('svg > path');
+
+    expect(styleElement.classList.contains('active')).to.be.true;
+  });
+});

package/test/data/menus.test.js

@@ -1,19 +1,19 @@
-import { expect } from '@open-wc/testing';
-import { buildTopNavMenus } from '../../src/data/menus.js';
-
-describe('Menu data', () => {
-  it('returns a collection for each media category', () => {
-    [
-      'texts',
-      'video',
-      'audio',
-      'software',
-      'images',
-      'user',
-      'more',
-    ].forEach((category) => {
-      const menus = buildTopNavMenus();
-      expect(menus[category]).to.not.be.undefined;
-    });
-  });
-});
+import { expect } from '@open-wc/testing';
+import { buildTopNavMenus } from '../../src/data/menus.js';
+
+describe('Menu data', () => {
+  it('returns a collection for each media category', () => {
+    [
+      'texts',
+      'video',
+      'audio',
+      'software',
+      'images',
+      'user',
+      'more',
+    ].forEach((category) => {
+      const menus = buildTopNavMenus();
+      expect(menus[category]).to.not.be.undefined;
+    });
+  });
+});

package/test/dropdown-menu.test.js

@@ -1,25 +1,25 @@
-import { html, fixture, expect } from '@open-wc/testing';
-
-import DropdownMenu from '../src/dropdown-menu';
-
-customElements.define('dropdown-menu', DropdownMenu);
-
-const component = html`<dropdown-menu></dropdown-menu>`;
-
-describe('<dropdown-menu>', () => {
-  it('sets default properties', async () => {
-    const el = await fixture(component);
-
-    expect(el.animate).to.be.false;
-    expect(el.open).to.be.false;
-    expect(el.menuItems.length).to.equal(0);
-  });
-
-  it('renders a closed class if component is animating', async () => {
-    const el = await fixture(component);
-
-    el.animate = true;
-    await el.updateComplete;
-    expect(el.shadowRoot.querySelector('.closed')).to.not.be.undefined;
-  });
-});
+import { html, fixture, expect } from '@open-wc/testing';
+
+import DropdownMenu from '../src/dropdown-menu';
+
+customElements.define('dropdown-menu', DropdownMenu);
+
+const component = html`<dropdown-menu></dropdown-menu>`;
+
+describe('<dropdown-menu>', () => {
+  it('sets default properties', async () => {
+    const el = await fixture(component);
+
+    expect(el.animate).to.be.false;
+    expect(el.open).to.be.false;
+    expect(el.menuItems.length).to.equal(0);
+  });
+
+  it('renders a closed class if component is animating', async () => {
+    const el = await fixture(component);
+
+    el.animate = true;
+    await el.updateComplete;
+    expect(el.shadowRoot.querySelector('.closed')).to.not.be.undefined;
+  });
+});

package/test/ia-icon.test.js

@@ -1,13 +1,13 @@
-import { html, fixture, expect } from '@open-wc/testing';
-import '../src/assets/img/ia-icon';
-
-describe('<ia-icon>', () => {
-  it('renders an icon with a fill color', async () => {
-    const iconType = 'web';
-    const fill = '#999';
-    const iaIcon = await fixture(html`<ia-icon .icon=${iconType} .fill=${fill}></ia-icon>`);
-
-    expect(iaIcon.icon).to.equal(iconType);
-    expect(iaIcon.fill).to.equal(fill);
-  });
-});
+import { html, fixture, expect } from '@open-wc/testing';
+import '../src/assets/img/ia-icon';
+
+describe('<ia-icon>', () => {
+  it('renders an icon with a fill color', async () => {
+    const iconType = 'web';
+    const fill = '#999';
+    const iaIcon = await fixture(html`<ia-icon .icon=${iconType} .fill=${fill}></ia-icon>`);
+
+    expect(iaIcon.icon).to.equal(iconType);
+    expect(iaIcon.fill).to.equal(fill);
+  });
+});