docs: extend registration into localhost

demo/api.html

@@ -44,8 +44,7 @@
     <!-- 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>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
-    <script type="module" data-demo-script="true" src="../index.js"></script>
-    <script type="module">
+    <script type="module" data-demo-script="true">
       import { initExamples } from "./api.min.js"
       initExamples();
     </script>

demo/api.js

@@ -1,4 +1,7 @@
 import { focusExample } from './../apiExamples/focus.js';
+import { AuroPane } from '../src/auro-pane.js';
+
+AuroPane.register();
 
 /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
 

demo/api.min.js

@@ -1,3 +1,9 @@
+import { css, LitElement, html } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+import dayjs from 'dayjs/esm/index.js';
+
 function focusExample() {
   const focusExample = document.querySelector('#focusExample');
   const focusExampleBtn = document.querySelector('#focusExampleBtn');
@@ -7,6 +13,158 @@ function focusExample() {
   });
 }
 
+var styleCss = 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}:host{display:inline-block}:host(:not([sm])) .pane{transition:all .15s ease;display:flex;min-width:calc(var(--ds-size-800, 4rem) + var(--ds-size-50, 0.25rem));height:calc(var(--ds-size-1000, 5rem) + var(--ds-size-25, 0.125rem));align-items:center;flex-direction:column;padding-top:calc(var(--ds-size-200, 1rem) + var(--ds-size-75, 0.375rem));border-width:var(--ds-size-25, 0.125rem);border-style:solid;border-radius:var(--ds-size-500, 2.5rem);cursor:pointer;font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-weight:var(--ds-text-body-default-weight, 500)}@supports(display: grid){:host(:not([sm])) .pane{display:grid;grid-template-columns:auto;grid-template-rows:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem)) calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem))}}:host(:not([sm])) .pane:active{transform:scale(0.95)}:host(:not([sm])) .pane:disabled{cursor:not-allowed;transform:unset}:host(:not([sm])) .pane:disabled .child{pointer-events:none}:host(:not([sm])) .pane-priced{min-width:var(--ds-size-900, 4.5rem);height:calc(var(--ds-size-1000, 5rem) + var(--ds-size-200, 1rem));padding-top:var(--ds-size-200, 1rem);border-radius:calc(var(--ds-size-500, 2.5rem) + var(--ds-size-25, 0.125rem));grid-template-rows:calc(var(--ds-size-200, 1rem)) calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem)) calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem))}:host(:not([sm])) .pane-priced .dayOfTheWeek{font-size:var(--ds-text-body-size-default, 1rem);line-height:var(--ds-text-body-height-default, 1.5rem)}:host(:not([sm])) .dayOfTheWeek{font-size:var(--ds-text-body-size-lg, 1.125rem);line-height:var(--ds-text-body-height-lg, 1.625rem)}:host(:not([sm])) .date{font-size:var(--ds-text-body-size-sm, 0.875rem);line-height:var(--ds-text-body-height-sm, 1.25rem)}:host(:not([sm])) .price{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-sm, 0.875rem);line-height:var(--ds-text-body-height-sm, 1.25rem)}:host(:not([sm])) .price--long{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-height-xs, 1rem)}@media screen and (min-width: 576px){:host(:not([sm])) .pane{min-width:var(--ds-size-1000, 5rem);height:calc(var(--ds-size-1000, 5rem) + var(--ds-size-300, 1.5rem));padding-top:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));font-size:var(--ds-text-body-size-default, 1rem);grid-template-rows:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, 0.25rem)) var(--ds-size-300, 1.5rem)}}@media screen and (min-width: 576px){:host(:not([sm])) .pane-priced{min-width:calc(var(--ds-size-1000, 5rem) + var(--ds-size-100, 0.5rem));height:calc(var(--ds-size-1000, 5rem) + var(--ds-size-500, 2.5rem));padding-top:var(--ds-size-300, 1.5rem);grid-template-rows:var(--ds-size-300, 1.5rem) calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem)) calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}}@media screen and (min-width: 576px){:host(:not([sm])) .pane-priced .dayOfTheWeek{font-size:var(--ds-text-body-size-lg, 1.125rem);line-height:var(--ds-text-body-height-lg, 1.625rem)}}@media screen and (min-width: 576px){:host(:not([sm])) .dayOfTheWeek{font-size:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));line-height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));letter-spacing:var(--ds-text-heading-default-spacing, -0.2px)}}@media screen and (min-width: 576px){:host(:not([sm])) .date{font-size:var(--ds-text-body-size-default, 1rem);line-height:var(--ds-text-body-height-default, 1.5rem)}}@media screen and (min-width: 576px){:host(:not([sm])) .price{font-size:var(--ds-text-body-size-lg, 1.125rem);line-height:var(--ds-text-body-height-lg, 1.625rem)}}@media screen and (min-width: 576px){:host(:not([sm])) .price--long{font-size:var(--ds-text-body-size-sm, 0.875rem);line-height:var(--ds-text-body-height-default, 1.5rem)}}:host([sm]) .pane{transition:all .15s ease;display:flex;min-width:calc(var(--ds-size-800, 4rem) + var(--ds-size-50, 0.25rem));height:calc(var(--ds-size-1000, 5rem) + var(--ds-size-25, 0.125rem));align-items:center;flex-direction:column;padding-top:calc(var(--ds-size-200, 1rem) + var(--ds-size-75, 0.375rem));border-width:var(--ds-size-25, 0.125rem);border-style:solid;border-radius:var(--ds-size-500, 2.5rem);cursor:pointer;font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-weight:var(--ds-text-body-default-weight, 500)}@supports(display: grid){:host([sm]) .pane{display:grid;grid-template-columns:auto;grid-template-rows:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem)) calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem))}}:host([sm]) .pane:active{transform:scale(0.95)}:host([sm]) .pane:disabled{cursor:not-allowed;transform:unset}:host([sm]) .pane:disabled .child{pointer-events:none}:host([sm]) .pane-priced{min-width:var(--ds-size-900, 4.5rem);height:calc(var(--ds-size-1000, 5rem) + var(--ds-size-200, 1rem));padding-top:var(--ds-size-200, 1rem);border-radius:calc(var(--ds-size-500, 2.5rem) + var(--ds-size-25, 0.125rem));grid-template-rows:calc(var(--ds-size-200, 1rem)) calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem)) calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem))}:host([sm]) .pane-priced .dayOfTheWeek{font-size:var(--ds-text-body-size-default, 1rem);line-height:var(--ds-text-body-height-default, 1.5rem)}:host([sm]) .dayOfTheWeek{font-size:var(--ds-text-body-size-lg, 1.125rem);line-height:var(--ds-text-body-height-lg, 1.625rem)}:host([sm]) .date{font-size:var(--ds-text-body-size-sm, 0.875rem);line-height:var(--ds-text-body-height-sm, 1.25rem)}:host([sm]) .price{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-sm, 0.875rem);line-height:var(--ds-text-body-height-sm, 1.25rem)}:host([sm]) .price--long{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-height-xs, 1rem)}`;
+
+var colorCss = css`.pane{border-color:var(--ds-auro-pane-border-color);background-color:var(--ds-auro-pane-container-color)}@media(hover: hover){.pane:hover{--ds-auro-pane-border-color: var(--ds-color-border-ui-hover-default, #193d73);--ds-auro-pane-container-color: var(--ds-color-container-ui-primary-hover-default, #193d73);--ds-auro-pane-day-of-week-text-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-pane-date-text-color: var(--ds-color-text-primary-inverse, #ffffff)}}.pane:active{--ds-auro-pane-border-color: var(--ds-color-border-ui-active-default, #225296);--ds-auro-pane-container-color: var(--ds-color-container-ui-primary-active-default, #225296)}.pane:disabled{--ds-auro-pane-border-color: transparent;--ds-auro-pane-container-color: none;--ds-auro-pane-day-of-week-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-pane-date-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-pane-price-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}.isSelected{--ds-auro-pane-border-color: var(--ds-color-border-ui-active-default, #225296);--ds-auro-pane-container-color: var(--ds-color-container-ui-primary-active-default, #225296);--ds-auro-pane-day-of-week-text-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-pane-date-text-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-pane-price-text-color: var(--ds-color-text-primary-inverse, #ffffff)}.dayOfTheWeek{color:var(--ds-auro-pane-day-of-week-text-color)}.date{color:var(--ds-auro-pane-date-text-color)}.price{color:var(--ds-auro-pane-price-text-color)}.price--empty{color:var(--ds-auro-pane-price-empty-text-color)}:host(:focus) .pane{border-color:var(--ds-color-border-active-default, #0074c8)}:host(:focus) .isSelected{--ds-auro-pane-container-color: var(--ds-color-container-ui-primary-focus-default, #2c67b5);box-shadow:inset 0 0 0 3px var(--ds-auro-pane-boxshadow-color)}`;
+
+var tokensCss = css`:host{--ds-auro-pane-border-color: var(--ds-color-border-tertiary-default, #dddddd);--ds-auro-pane-boxshadow-color: var(--ds-color-border-tertiary-default, #dddddd);--ds-auro-pane-container-color: var(--ds-color-container-secondary-default, #f7f7f7);--ds-auro-pane-day-of-week-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-pane-date-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-pane-price-text-color: var(--ds-color-text-info-default, #326aa5);--ds-auro-pane-price-empty-text-color: var(--ds-color-text-secondary-default, #525252)}`;
+
+// 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"
+/**
+ * The auro-pane component displays shoulder date information.
+ *
+ * @attr {String} ariaHidden - Sets aria-hidden on the inner button.
+ * @attr {String} date - Sets date for parsing and display. Format should be yyyy-mm-dd.
+ * @attr {Boolean} disabled - Disables the pane.
+ * @attr {String} price - Sets price for display. Displayed as is.
+ * @attr {Boolean} selected - Sets pane state to selected.
+ * @attr {Boolean} sm - Locks the component to `sm` variant.
+ * @attr {Number} tabIndex - Sets tabindex on the inner button.
+ */
+
+class AuroPane extends LitElement {
+  constructor() {
+    super();
+
+    this.disabled = false;
+    this.selected = false;
+
+    /**
+     * @private
+     */
+    this.runtimeUtils = new AuroLibraryRuntimeUtils();
+  }
+
+  static get properties() {
+    return {
+      ariaHidden: {
+        type: String,
+        attribute: "aria-hidden"
+      },
+      date: { type: String },
+      disabled: { type: Boolean },
+      price: { type: String },
+      selected: { type: Boolean },
+      tabIndex: { type: Number },
+    };
+  }
+
+  static get styles() {
+    return [
+      styleCss,
+      colorCss,
+      tokensCss
+    ];
+  }
+
+  /**
+   * This will register this element with the browser.
+   * @param {string} [name="auro-pane"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroPane.register("custom-pane") // this will register this element to <custom-pane/>
+   *
+   */
+  static register(name = "auro-pane") {
+    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroPane);
+  }
+
+  firstUpdated() {
+    // Add the tag name as an attribute if it is different than the component name
+    this.runtimeUtils.handleComponentTagRename(this, 'auro-pane');
+  }
+
+  /**
+   * Internal method to parse the date attribute.
+   * @private
+   * @returns {Object} Object containing day, date, and month.
+   */
+  parseDateString() {
+    const parsedDate = dayjs(this.date);
+
+    if (parsedDate.isValid()) {
+      return {
+        day: parsedDate.format('ddd'),
+        date: parsedDate.format('D'),
+        month: parsedDate.format('MMM')
+      };
+    }
+
+    return {};
+  }
+
+  /**
+   * Internal method that determines how to display the price attribute.
+   * @private
+   * @returns {TemplateResult} Price HTML.
+   */
+  getPrice() {
+    if (this.price !== undefined) {
+      const priceClasses = {
+        'price': true,
+        'price--long': this.price.length > 6, // eslint-disable-line no-magic-numbers
+        'child': true,
+        'price--empty': this.price === ''
+      };
+
+      if (this.price === '') {
+        this.price = '--';
+      }
+
+      return html`<span class="${classMap(priceClasses)}" part="price-slot">${this.price}</span>`;
+    }
+
+    return html``;
+  }
+
+  /**
+   * Programatically focuses the component.
+   * @return {void}
+   */
+  focus() {
+    this.renderRoot.querySelector('button').focus();
+  }
+
+  render() {
+    const buttonClasses = {
+      'pane': true,
+      'isSelected': this.selected,
+      'pane--disabled': this.disabled,
+      'pane-priced': this.price !== undefined
+    };
+
+    const parsedDate = this.parseDateString();
+
+    return html`
+      <button
+        class="${classMap(buttonClasses)}"
+        ?disabled="${this.disabled}"
+        tabindex="${ifDefined(this.tabIndex ? this.tabIndex : undefined)}"
+        aria-hidden="${ifDefined(this.ariaHidden ? this.ariaHidden : undefined)}">
+        <span class="dayOfTheWeek child">${parsedDate.day}</span>
+        <span class="date child">${parsedDate.month} ${parsedDate.date}</span>
+        ${this.getPrice()}
+      </button>
+    `;
+  }
+}
+
+AuroPane.register();
+
 /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
 
 function initExamples(initCount) {

demo/index.html

@@ -43,7 +43,7 @@
 
     <!-- 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>
-    <script type="module">
+    <script type="module" data-demo-script="true">
       import { initExamples } from "./index.min.js"
       initExamples();
     </script>