From 263cf714721544c4ba09c7585523205cbdb15dff Mon Sep 17 00:00:00 2001 From: Doug Date: Fri, 8 Nov 2024 16:03:26 -0800 Subject: [PATCH 1/2] feat: update auro-library to 3.0.1 --- README.md | 24 +++++----- demo/api.md | 104 ++++++++++++++++++++--------------------- demo/api.min.js | 78 +++++++++++++++++++++++++++++-- demo/index.md | 64 ++++++++++++------------- demo/index.min.js | 78 +++++++++++++++++++++++++++++-- docs/partials/api.md | 52 ++++++++++----------- docs/partials/index.md | 32 ++++++------- package-lock.json | 29 +++++++++--- package.json | 2 +- 9 files changed, 310 insertions(+), 153 deletions(-) diff --git a/README.md b/README.md index 954d1f0..92b39bd 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ The README.md file is a compiled document. No edits should be made directly to t README.md is created by running `npm run build:docs`. This file is generated based on a template fetched from -`https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/README.md` +`https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/README_updated_paths.md` and copied to `./componentDocs/README.md` each time the the docs are compiled. The following sections are editable by making changes to the following files: @@ -19,12 +19,12 @@ The following sections are editable by making changes to the following files: # Alert - - + + The `auro-alert` component renders errors, warnings, and other inline notifications with automated styling elements. Simply add the `type` attribute the corresponding value. If you need to present multiple lines in the same alert wrapper, use p tags for each line. - - + + @@ -72,8 +72,8 @@ import "@aurodesignsystem/auro-alert"; **Reference component in HTML** - - + + ```html This is a default error with no error type specified. @@ -96,15 +96,15 @@ In cases where the project is not able to process JS assets, there are pre-proce ```html - + ``` ## auro-alert use cases - - + + The `auro-alert` use cases include: * Error messages @@ -116,8 +116,8 @@ The `auro-alert` use cases include: ### Default auro-alert - - + + ```html This is a default error with no error type specified. diff --git a/demo/api.md b/demo/api.md index 10abe67..5d679a1 100644 --- a/demo/api.md +++ b/demo/api.md @@ -1,5 +1,5 @@ - - + + # auro-alert @@ -34,63 +34,63 @@ The `type` attribute of the `` element supports the following values, `error`, `warning`, `information` and `success`.
- - + + This is a default error with no error type specified.
- - + + Transaction failed.
- - + + Warning. Session timed out. Look for a confirmation email to verify your transaction.
- - + + You are confirmed on Flight 20 to Aruba.
- - + + Your status with flight 20 to Aruba had been updated.
See code - - + + ```html This is a default error with no error type specified. ``` - - + + ```html Transaction failed. ``` - - + + ```html Warning. Session timed out. Look for a confirmation email to verify your transaction. ``` - - + + ```html You are confirmed on Flight 20 to Aruba. ``` - - + + ```html Your status with flight 20 to Aruba had been updated. @@ -103,52 +103,52 @@ The `type` attribute of the `` element supports the following values The following `` example illustrates using the `noIcon` attribute.
- - + + Transaction failed.
- - + + You are confirmed on Flight 20 to Aruba.
- - + + Warning. Session timed out. Look for a confirmation email to verify your transaction.
- - + + Your status with flight 20 to Aruba had been updated.
See code - - + + ```html Transaction failed. ``` - - + + ```html You are confirmed on Flight 20 to Aruba. ``` - - + + ```html Warning. Session timed out. Look for a confirmation email to verify your transaction. ``` - - + + ```html Your status with flight 20 to Aruba had been updated. @@ -161,15 +161,15 @@ The following `` example illustrates using the `noIcon` attribute. Use the `hidden` attribute to hide the `auro-alert` component from the user and screenreader.
- - + +
See code - - + + ```html @@ -182,15 +182,15 @@ Use the `hidden` attribute to hide the `auro-alert` component from the user and Use the `hiddenVisually` attribute to visually hide the `auro-alert` component from the user only.
- - + + This content will be hidden visually, but screen readers will still pick it up.
See code - - + + ```html This content will be hidden visually, but screen readers will still pick it up. @@ -203,15 +203,15 @@ Use the `hiddenVisually` attribute to visually hide the `auro-alert` component f Use the `hiddenAudible` attribute to hide the `auro-alert` component from the screenreader only.
- - + + This content will be hidden from screen readers.
See code - - + + ```html This content will be hidden from screen readers. @@ -223,8 +223,8 @@ Use the `hiddenAudible` attribute to hide the `auro-alert` component from the sc The component may be restyled using the following code sample and changing the values of the following token(s). - - + + ```scss @import '../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables'; diff --git a/demo/api.min.js b/demo/api.min.js index 210df0b..9ee6e21 100644 --- a/demo/api.min.js +++ b/demo/api.min.js @@ -248,7 +248,7 @@ var colorCss$1 = i$3`:host{color:var(--ds-auro-icon-color)}:host([customColor]){ /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */ -class AuroLibraryRuntimeUtils { +let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils { /* eslint-disable jsdoc/require-param */ @@ -309,7 +309,7 @@ class AuroLibraryRuntimeUtils { return elemTag === tag || elem.hasAttribute(tag); } -} +}; // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license // See LICENSE in the project root for license information. @@ -371,7 +371,7 @@ class AuroIcon extends BaseIcon { this.success = false; this.tertiary = false; this.warning = false; - this.runtimeUtils = new AuroLibraryRuntimeUtils(); + this.runtimeUtils = new AuroLibraryRuntimeUtils$1(); } // function to define props used within the scope of this component @@ -468,7 +468,7 @@ class AuroIcon extends BaseIcon { * */ static register(name = "auro-icon") { - AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroIcon); + AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroIcon); } connectedCallback() { @@ -512,6 +512,76 @@ class AuroIcon extends BaseIcon { var iconVersion = '6.0.1'; +// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + +// --------------------------------------------------------------------- + +/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */ + +class AuroLibraryRuntimeUtils { + + /* eslint-disable jsdoc/require-param */ + + /** + * This will register a new custom element with the browser. + * @param {String} name - The name of the custom element. + * @param {Object} componentClass - The class to register as a custom element. + * @returns {void} + */ + registerComponent(name, componentClass) { + if (!customElements.get(name)) { + customElements.define(name, class extends componentClass {}); + } + } + + /** + * Finds and returns the closest HTML Element based on a selector. + * @returns {void} + */ + closestElement( + selector, // selector like in .closest() + base = this, // extra functionality to skip a parent + __Closest = (el, found = el && el.closest(selector)) => + !el || el === document || el === window + ? null // standard .closest() returns null for non-found selectors also + : found + ? found // found a selector INside this element + : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM + ) { + return __Closest(base); + } + /* eslint-enable jsdoc/require-param */ + + /** + * If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element. + * @param {Object} elem - The element to check. + * @param {String} tagName - The name of the Auro component to check for or add as an attribute. + * @returns {void} + */ + handleComponentTagRename(elem, tagName) { + const tag = tagName.toLowerCase(); + const elemTag = elem.tagName.toLowerCase(); + + if (elemTag !== tag) { + elem.setAttribute(tag, true); + } + } + + /** + * Validates if an element is a specific Auro component. + * @param {Object} elem - The element to validate. + * @param {String} tagName - The name of the Auro component to check against. + * @returns {Boolean} - Returns true if the element is the specified Auro component. + */ + elementMatch(elem, tagName) { + const tag = tagName.toLowerCase(); + const elemTag = elem.tagName.toLowerCase(); + + return elemTag === tag || elem.hasAttribute(tag); + } +} + var styleCss = i$3`*,*: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}.alert{display:flex;padding:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-200, 1rem);padding-left:var(--ds-size-150, 0.75rem);border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem);border-left-width:var(--ds-size-100, 0.5rem)}[auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.content{width:-webkit-fill-available;line-height:var(--ds-text-body-height-lg, 1.625rem)}`; var colorCss = i$3`.alert{border-color:var(--ds-auro-alert-border-color);background-color:var(--ds-auro-alert-container-color);color:var(--ds-auro-alert-text-color)}[auro-icon]{color:var(--ds-auro-alert-icon-color)}:host([type=error]){--ds-auro-alert-border-color: var(--ds-color-border-error-default, #cc1816);--ds-auro-alert-icon-color: var(--ds-color-icon-error-default, #cc1816)}:host([type=warning]){--ds-auro-alert-border-color: var(--ds-color-border-warning-inverse, #f2c153);--ds-auro-alert-icon-color: var(--ds-color-icon-warning-default, #c49432)}:host([type=information]){--ds-auro-alert-border-color: var(--ds-color-border-info-default, #326aa5);--ds-auro-alert-icon-color: var(--ds-color-icon-info-default, #326aa5)}:host([type=success]){--ds-auro-alert-border-color: var(--ds-color-border-success-default, #0b6f4d);--ds-auro-alert-icon-color: var(--ds-color-icon-success-default, #40a080)}`; diff --git a/demo/index.md b/demo/index.md index 4b9dfc1..7d3df73 100644 --- a/demo/index.md +++ b/demo/index.md @@ -6,15 +6,15 @@ This file is generated based on a template fetched from `./docs/partials/index.m # Alert - - + + The `auro-alert` component renders errors, warnings, and other inline notifications with automated styling elements. Simply add the `type` attribute the corresponding value. If you need to present multiple lines in the same alert wrapper, use p tags for each line. ## auro-alert use cases - - + + The `auro-alert` use cases include: * Error messages @@ -26,15 +26,15 @@ The `auro-alert` use cases include: The following illustrates the default use of the `auro-alert` element.
- - + + This is a default error with no error type specified.
See code - - + + ```html This is a default error with no error type specified. @@ -47,51 +47,51 @@ The following illustrates the default use of the `auro-alert` element. See the following examples that illustrate how to generate a basic alert with the various `error`, `warning`, `information`, or `success` types.
- - + + Transaction failed.
- - + + Warning. Session timed out. Look for a confirmation email to verify your transaction.
- - + + You are confirmed on Flight 20 to Aruba.
- - + + Your status with flight 20 to Aruba had been updated.
See code - - + + ```html Transaction failed. ``` - - + + ```html Warning. Session timed out. Look for a confirmation email to verify your transaction. ``` - - + + ```html You are confirmed on Flight 20 to Aruba. ``` - - + + ```html Your status with flight 20 to Aruba had been updated. @@ -104,8 +104,8 @@ See the following examples that illustrate how to generate a basic alert with th While Auro components, `auro-alert` included, come with a pre-defined UI opinion, another feature that is fully supported is a user's ability to customize any content in the slot. The following example illustrates how a user can completely customize the content in the `` of the element, while not needing to recreate the `auro-alert` UI.
- - + +