From 11d2642da566659978e7e0b521b3c0dfa4098f4a Mon Sep 17 00:00:00 2001 From: Jason Baker Date: Tue, 22 Oct 2024 19:36:31 -0600 Subject: [PATCH] docs: extend registration into localhost --- demo/api.html | 3 +- demo/api.js | 3 + demo/api.min.js | 158 ++++++++++++++++++++++++++++++++++++++++++++++ demo/index.html | 2 +- demo/index.md | 80 +++++++++++------------ demo/index.min.js | 6 -- src/auro-pane.js | 6 -- 7 files changed, 203 insertions(+), 55 deletions(-) diff --git a/demo/api.html b/demo/api.html index 7056ee4..53267a9 100644 --- a/demo/api.html +++ b/demo/api.html @@ -44,8 +44,7 @@ - - diff --git a/demo/api.js b/demo/api.js index d813f1f..4d1d644 100644 --- a/demo/api.js +++ b/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 */ diff --git a/demo/api.min.js b/demo/api.min.js index 8be7272..31e3747 100644 --- a/demo/api.min.js +++ b/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 + * + */ + 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`${this.price}`; + } + + 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` + + `; + } +} + +AuroPane.register(); + /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */ function initExamples(initCount) { diff --git a/demo/index.html b/demo/index.html index 95775a9..72fff29 100644 --- a/demo/index.html +++ b/demo/index.html @@ -43,7 +43,7 @@ - diff --git a/demo/index.md b/demo/index.md index 5a0f0aa..6b1d6a2 100644 --- a/demo/index.md +++ b/demo/index.md @@ -2,15 +2,15 @@ The index.md file is a compiled document. No edits should be made directly to this file. README.md is created by running `npm run build:docs`. This file is generated based on a template fetched from `./docs/partials/index.md` ---> - +--> + # Pane `` is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) displaying selectable shoulder dates and associated prices. - - + + ## auro-pane use cases @@ -19,8 +19,8 @@ The `` element should be used in situations where users may: * Select a date to see available flight options * See multiple dates with price and availability information - - + + ## Example(s) ## Basic @@ -32,20 +32,20 @@ The `` element should be used in situations where users may: - + - See code + See code - - + + ```html - -``` - - - + +``` + + + ### Display date and price Default using both `date` and `price` attributes. @@ -57,20 +57,20 @@ Default using both `date` and `price` attributes. - + - See code + See code - - + + ```html - -``` - - - + +``` + + + ### Small - Use sm size Use the `sm` attribute to render the small UI that is consistent with mobile and desktop. @@ -82,20 +82,20 @@ Use the `sm` attribute to render the small UI that is consistent with mobile and - + - See code + See code - - + + ```html - -``` - - - + +``` + + + ## Recommended Use and Version Control There are two important parts of every Auro component. The class and the custom element. The class is exported and then used as part of defining the Web Component. When importing this component as described in the install section, the class is imported and the `auro-pane` custom element is defined automatically. @@ -117,16 +117,16 @@ This will create a new custom element that you can use in your HTML that will fu - + - See code + See code - - + + ```html - -``` - + +``` + diff --git a/demo/index.min.js b/demo/index.min.js index 6a05e47..26405f3 100644 --- a/demo/index.min.js +++ b/demo/index.min.js @@ -154,12 +154,6 @@ class AuroPane extends LitElement { } } -/* istanbul ignore else */ -// define the name of the custom component -if (!customElements.get('auro-pane')) { - customElements.define('auro-pane', AuroPane); -} - // import { example } from '../apiExamples/example'; diff --git a/src/auro-pane.js b/src/auro-pane.js index 95ba869..e6e3ed3 100644 --- a/src/auro-pane.js +++ b/src/auro-pane.js @@ -156,9 +156,3 @@ export class AuroPane extends LitElement { `; } } - -/* istanbul ignore else */ -// define the name of the custom component -if (!customElements.get('auro-pane')) { - customElements.define('auro-pane', AuroPane); -}