feat(api): importing ./src/auro-icon.js will no longer define <auro-i…

…con> as a customElement #144

BREAKING CHANGE: `auro-alaska` must be registered to use the `src/auro-alaska.js` import.

- Update dependency versions
- `AuroIcon.register` is to easily register the element without extra importing
- `import '@aurodesignsystem/auro-icon'` will still register this element to `<auro-icon>`
- `import { AuroIcon } from '../src/auro-icon.js` wont register this element until `AuroIcon.register` gets called
- Similarly, `AuroAlaska` now needs to be registered using `AuroAlaska.register` before you can use `<auro-alaska>,` if you're importing `auro-alaska.js`.
To skip the registration step, you can simply import `@aurodesignsystem/auro-icon`.

demo/alaska.html

@@ -40,7 +40,7 @@
           Prism.highlightAll();
         });
     </script>
-    <script type="module" data-demo-script="true" src="../src/auro-alaska.js"></script>
+    <script src="./alaska.min.js"></script>
 
     <!-- If additional elements are needed for the demo, add them here. -->
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>

demo/alaska.js

@@ -0,0 +1,3 @@
+import { AuroAlaska } from '../src/auro-alaska.js';
+
+AuroAlaska.register();

demo/alaska.min.js

@@ -0,0 +1,274 @@
+import { css, html } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import AuroElement from '@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement.mjs';
+import error from '@alaskaairux/icons/dist/icons/alert/error.mjs';
+import as400 from '@alaskaairux/icons/dist/restricted/AS-400.mjs';
+import as300 from '@alaskaairux/icons/dist/restricted/AS-300.mjs';
+import as200 from '@alaskaairux/icons/dist/restricted/AS-200.mjs';
+import as100 from '@alaskaairux/icons/dist/restricted/AS-100.mjs';
+import official400 from '@alaskaairux/icons/dist/restricted/AS-tagline-400.mjs';
+import official300 from '@alaskaairux/icons/dist/restricted/AS-tagline-300.mjs';
+import official200 from '@alaskaairux/icons/dist/restricted/AS-tagline-200.mjs';
+import official100 from '@alaskaairux/icons/dist/restricted/AS-tagline-100.mjs';
+import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+/* eslint-disable no-underscore-dangle, jsdoc/no-undefined-types, jsdoc/require-param-description */
+
+const _fetchMap = new Map();
+
+/**
+ * A callback to parse Response body.
+ *
+ * @callback ResponseParser
+ * @param {Fetch.Response} response
+ * @returns {Promise}
+ */
+
+/**
+ * A minimal in-memory map to de-duplicate Fetch API media requests.
+ *
+ * @param {String} uri
+ * @param {Object} [options={}]
+ * @param {ResponseParser} [options.responseParser=(response) => response.text()]
+ * @returns {Promise}
+ */
+const cacheFetch = (uri, options = {}) => {
+  const responseParser = options.responseParser || ((response) => response.text());
+  if (!_fetchMap.has(uri)) {
+    _fetchMap.set(uri, fetch(uri).then(responseParser));
+  }
+  return _fetchMap.get(uri);
+};
+
+var styleCss$1 = css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}:host .logo{color:var(--ds-color-brand-midnight-400, #01426a)}:host([customSize]){--auro-size-lg:100%;--ds-size-300: 100%;width:100%;height:100%}.label{display:flex;align-items:flex-start}.label svg{margin:0 var(--ds-size-50, 0.25rem)}.labelContainer{line-height:1.8}`;
+
+// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+
+// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
+/**
+ * @attr {Boolean} onDark - Set value for on-dark version of auro-icon
+ * @slot - Hidden from visibility, used for a11y if icon description is needed
+ */
+
+// build the component class
+class BaseIcon extends AuroElement {
+  constructor() {
+    super();
+    this.onDark = false;
+  }
+
+  // function to define props used within the scope of this component
+  static get properties() {
+    return {
+      ...super.properties,
+      onDark: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * @private
+       */
+      svg: {
+        attribute: false,
+        reflect: true
+      }
+    };
+  }
+
+  static get styles() {
+    return css`
+      ${styleCss$1}
+    `;
+  }
+
+  /**
+   * Async function to fetch requested icon from npm CDN.
+   * @private
+   * @param {string} category - Icon category.
+   * @param {string} name - Icon name.
+   * @returns {SVGElement} DOM - Ready HTML to be appended.
+   */
+  async fetchIcon(category, name) {
+    let iconHTML = '';
+
+    if (category === 'logos') {
+      iconHTML = await cacheFetch(`${this.uri}/${category}/${name}.svg`);
+    } else {
+      iconHTML = await cacheFetch(`${this.uri}/icons/${category}/${name}.svg`);
+    }
+
+    const dom = new DOMParser().parseFromString(iconHTML, 'text/html');
+
+    return dom.body.querySelector('svg');
+  }
+
+  // lifecycle function
+  async firstUpdated() {
+    if (!this.customSvg) {
+      const svg = await this.fetchIcon(this.category, this.name);
+
+      if (svg) {
+        this.svg = svg;
+      } else if (!svg) {
+        const penDOM = new DOMParser().parseFromString(error.svg, 'text/html');
+
+        this.svg = penDOM.body.firstChild;
+      }
+    }
+  }
+}
+
+var styleCss = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:inline-block;--ds-size-300: 100%;width:100%;height:100%}:host([onDark]) .logo{color:var(--ds-color-base-white, #ffffff)}`;
+
+// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+
+// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
+/**
+ * auro-alaska provides users a way to use the Alaska Airline logos.
+ *
+ * @attr {Boolean} official - Set value for alaska airlines logo with official tagline
+ * @slot - Hidden from visibility, used for a11y if icon description is needed
+ */
+
+// build the component class
+class AuroAlaska extends BaseIcon {
+  constructor() {
+    super();
+
+    this.privateDefaults();
+  }
+
+  /**
+   * Internal defaults.
+   * @private
+   * @returns {void}
+   */
+  privateDefaults() {
+    this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
+    this.sm = 107;
+    this.md = 191;
+    this.lg = 527;
+    this.alaska = true;
+    this.official = false;
+  }
+
+  // function to define props used within the scope of this component
+  static get properties() {
+    return {
+      ...super.properties,
+
+      /**
+       * @private
+       */
+      alaska: {
+        type: Boolean,
+        reflect: true
+      },
+      official: {
+        type: Boolean,
+        reflect: true
+      },
+    };
+  }
+
+  /**
+   * This will register this element with the browser.
+   * @param {string} [name="auro-alaska"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroAlaska.register("custom-alaska") // this will register this element to <custom-alaska/>
+   *
+   */
+  static register(name = "auro-alaska") {
+    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroAlaska);
+  }
+
+  /**
+   * Async function to decide which logo to use.
+   * @private
+   * @param {number} iconWidth - Size of parent icon is in.
+   * @returns {void}
+   */
+  alaskaLogoDef(iconWidth) {
+    if (this.alaska) {
+      if (iconWidth <= this.sm) {
+        this.svg = new DOMParser().parseFromString(as100.svg, 'text/html').body.firstChild;
+      } else if (iconWidth > this.sm && iconWidth <= this.md) {
+        this.svg = new DOMParser().parseFromString(as200.svg, 'text/html').body.firstChild;
+      } else if (iconWidth > this.md && iconWidth <= this.lg) {
+        this.svg = new DOMParser().parseFromString(as300.svg, 'text/html').body.firstChild;
+      } else {
+        this.svg = new DOMParser().parseFromString(as400.svg, 'text/html').body.firstChild;
+      }
+    }
+  }
+
+  /**
+   * Async function to decide which logo to use.
+   * @private
+   * @param {number} iconWidth - Size of parent icon is in.
+   * @returns {void}
+   */
+  alaskaOfficialDef(iconWidth) {
+    if (this.official) {
+      if (iconWidth <= this.sm) {
+        this.svg = new DOMParser().parseFromString(official100.svg, 'text/html').body.firstChild;
+      } else if (iconWidth > this.sm && iconWidth <= this.md) {
+        this.svg = new DOMParser().parseFromString(official200.svg, 'text/html').body.firstChild;
+      } else if (iconWidth > this.md && iconWidth <= this.lg) {
+        this.svg = new DOMParser().parseFromString(official300.svg, 'text/html').body.firstChild;
+      } else {
+        this.svg = new DOMParser().parseFromString(official400.svg, 'text/html').body.firstChild;
+      }
+    }
+  }
+
+  // lifecycle function for the purpose of
+  // displaying the correct Alaska logo
+  // with the correct Restricted icon
+  firstUpdated() {
+    const iconContainer = this.shadowRoot.querySelector('.icon');
+    const iconWidth = iconContainer.clientWidth;
+
+    if (this.official) {
+      this.alaska = false;
+    }
+
+    if (this.alaska) {
+      this.alaskaLogoDef(iconWidth);
+    } else if (this.official) {
+      this.alaskaOfficialDef(iconWidth);
+    }
+  }
+
+  static get styles() {
+    return [
+      super.styles,
+      css`${styleCss}`
+    ];
+  }
+
+  // function that renders the HTML and CSS into  the scope of the component
+  render() {
+    const classes = {
+      'icon': true,
+      'logo': this.alaska || this.official,
+    };
+
+    return html`
+      <div class="${classMap(classes)}">
+        <div class="util_displayHiddenVisually">
+          <slot></slot>
+        </div>
+        ${this.svg}
+      </div>
+    `;
+  }
+}
+
+AuroAlaska.register();

demo/api.html

@@ -40,7 +40,7 @@
           Prism.highlightAll();
         });
     </script>
-    <script type="module" data-demo-script="true" src="../index.js"></script>
+    <script type="module" data-demo-script="true" src="./api.min.js"></script>
 
     <!-- If additional elements are needed for the demo, add them here. -->
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>

demo/api.js

@@ -0,0 +1 @@
+import '../index.js';