From 7033ce80304c3ac59f6f522271b89623558b9059 Mon Sep 17 00:00:00 2001 From: Dale Sande Date: Wed, 16 Dec 2020 15:55:33 -0800 Subject: [PATCH] refactor: address review feedback --- demo/index.html | 20 +++++------ docs/api.md | 44 ++++++++++-------------- src/auro-alaska.js | 78 +++++++++++++++++++----------------------- src/auro-icon.js | 37 ++++++++------------ src/baseIcon.js | 9 +---- src/style.scss | 7 ---- test/auro-icon.test.js | 8 ++--- 7 files changed, 84 insertions(+), 119 deletions(-) diff --git a/demo/index.html b/demo/index.html index 83fae5a..520d048 100644 --- a/demo/index.html +++ b/demo/index.html @@ -28,19 +28,19 @@

auro-alaska

@@ -49,19 +49,19 @@

auro-alaska

@@ -145,7 +145,7 @@

auro-icon

@@ -160,7 +160,7 @@

auro-icon

diff --git a/docs/api.md b/docs/api.md index e87b844..6621e65 100644 --- a/docs/api.md +++ b/docs/api.md @@ -1,24 +1,16 @@ # auro-alaska -auro-alaska provides users a way to use the Auro Icons by simply passing in the category and name. - -## Attributes - -| Attribute | Type | Description | -|--------------|-----------|-----------------------------| -| `customSize` | `Boolean` | Allows for custom size use. | +auro-alaska provides users a way to use the Alaska Airline logos. ## Properties | Property | Attribute | Type | Description | |------------------|------------------|-----------|--------------------------------------------------| -| `alaska` | `alaska` | `Boolean` | Set value for default alaska airlines logo | -| `alaskaOfficial` | `alaskaOfficial` | `Boolean` | Set value for alaska airlines logo with official tagline | -| `customColor` | `customColor` | `Boolean` | Removes primary selector. | | `hidden` | `hidden` | `Boolean` | If present, the component will be hidden both visually and from screen readers | | `hiddenAudible` | `hiddenAudible` | `Boolean` | If present, the component will be hidden from screen readers, but seen visually | | `hiddenVisually` | `hiddenVisually` | `Boolean` | If present, the component will be hidden visually, but still read by screen readers | -| `onDark` | `onDark` | `Boolean` | Set value for on-dark version of auro-icon. | +| `official` | `official` | `Boolean` | Set value for alaska airlines logo with official tagline | +| `onDark` | `onDark` | `Boolean` | Set value for on-dark version of auro-icon | ## Slots @@ -33,29 +25,29 @@ auro-icon provides users a way to use the Auro Icons by simply passing in the ca ## Attributes -| Attribute | Type | Description | -|--------------|-----------|-----------------------------| -| `customSize` | `Boolean` | Allows for custom size use. | +| Attribute | Type | Description | +|--------------|-----------|----------------------------| +| `customSize` | `Boolean` | Allows for custom size use | ## Properties | Property | Attribute | Type | Description | |------------------|------------------|-----------|--------------------------------------------------| -| `accent` | `accent` | `Boolean` | Sets the icon to use the accent style. | -| `advisory` | `advisory` | `Boolean` | Sets the icon to use the advisory style. | -| `category` | `category` | `String` | The category of the icon you are looking for. See https://auro.alaskaair.com/icons/usage. | -| `customColor` | `customColor` | `Boolean` | Removes primary selector. | -| `disabled` | `disabled` | `Boolean` | Sets the icon to use the disabled style. | -| `emphasis` | `emphasis` | `Boolean` | Sets the icon to use the emphasis style. | -| `error` | `error` | `Boolean` | Sets the icon to use the error style. | +| `accent` | `accent` | `Boolean` | Sets the icon to use the accent style | +| `advisory` | `advisory` | `Boolean` | Sets the icon to use the advisory style | +| `category` | `category` | `String` | The category of the icon you are looking for. See https://auro.alaskaair.com/icons/usage | +| `customColor` | `customColor` | `Boolean` | Removes primary selector | +| `disabled` | `disabled` | `Boolean` | Sets the icon to use the disabled style | +| `emphasis` | `emphasis` | `Boolean` | Sets the icon to use the emphasis style | +| `error` | `error` | `Boolean` | Sets the icon to use the error style | | `hidden` | `hidden` | `Boolean` | If present, the component will be hidden both visually and from screen readers | | `hiddenAudible` | `hiddenAudible` | `Boolean` | If present, the component will be hidden from screen readers, but seen visually | | `hiddenVisually` | `hiddenVisually` | `Boolean` | If present, the component will be hidden visually, but still read by screen readers | -| `name` | `name` | `String` | The name of the icon you are looking for without the file extension. See https://auro.alaskaair.com/icons/usage. | -| `onDark` | `onDark` | `Boolean` | Set value for on-dark version of auro-icon. | -| `primary` | `primary` | `Boolean` | Sets the icon to use the baseline primary icon style. | -| `success` | `success` | `Boolean` | Sets the icon to use the success style. | -| `warning` | `warning` | `Boolean` | Sets the icon to use the warning style. | +| `name` | `name` | `String` | The name of the icon you are looking for without the file extension. See https://auro.alaskaair.com/icons/usage | +| `onDark` | `onDark` | `Boolean` | Set value for on-dark version of auro-icon | +| `primary` | `primary` | `Boolean` | Sets the icon to use the baseline primary icon style | +| `success` | `success` | `Boolean` | Sets the icon to use the success style | +| `warning` | `warning` | `Boolean` | Sets the icon to use the warning style | ## Slots diff --git a/src/auro-alaska.js b/src/auro-alaska.js index 96f8e06..c1dddb6 100644 --- a/src/auro-alaska.js +++ b/src/auro-alaska.js @@ -12,10 +12,10 @@ import as400 from '@alaskaairux/icons/dist/restricted/AS-400_es6.js'; import as300 from '@alaskaairux/icons/dist/restricted/AS-300_es6.js'; import as200 from '@alaskaairux/icons/dist/restricted/AS-200_es6.js'; import as100 from '@alaskaairux/icons/dist/restricted/AS-100_es6.js'; -import asTag400 from '@alaskaairux/icons/dist/restricted/AS-tagline-400_es6.js'; -import asTag300 from '@alaskaairux/icons/dist/restricted/AS-tagline-300_es6.js'; -import asTag200 from '@alaskaairux/icons/dist/restricted/AS-tagline-200_es6.js'; -import asTag100 from '@alaskaairux/icons/dist/restricted/AS-tagline-100_es6.js'; +import official400 from '@alaskaairux/icons/dist/restricted/AS-tagline-400_es6.js'; +import official300 from '@alaskaairux/icons/dist/restricted/AS-tagline-300_es6.js'; +import official200 from '@alaskaairux/icons/dist/restricted/AS-tagline-200_es6.js'; +import official100 from '@alaskaairux/icons/dist/restricted/AS-tagline-100_es6.js'; // Import touch detection lib // import "focus-visible/dist/focus-visible.min.js"; @@ -23,10 +23,9 @@ import styleCss from "./alaskaStyle-css.js"; // See https://git.io/JJ6SJ for "How to document your components using JSDoc" /** - * auro-alaska provides users a way to use the Auro Icons by simply passing in the category and name. + * auro-alaska provides users a way to use the Alaska Airline logos. * - * @attr {Boolean} alaska - Set value for default alaska airlines logo - * @attr {Boolean} alaskaOfficial - Set value for alaska airlines logo with official tagline + * @attr {Boolean} official - Set value for alaska airlines logo with official tagline * @slot - Hidden from visibility, used for a11y if icon description is needed */ @@ -44,22 +43,25 @@ class AuroAlaska extends BaseIcon { */ privateDefaults() { this.uri = 'https://unpkg.com/@alaskaairux/icons@latest/dist'; - this.zero = 0; - this.no = 1; this.sm = 107; this.md = 191; this.lg = 527; + this.alaska = true; } // function to define props used within the scope of this component static get properties() { return { ...super.properties, + + /** + * @private + */ alaska: { type: Boolean, reflect: true }, - alaskaOfficial: { + official: { type: Boolean, reflect: true }, @@ -72,19 +74,16 @@ class AuroAlaska extends BaseIcon { * @returns {object} SVG to be appended to DOM */ alaskaLogoDef(iconWidth) { - switch (this.alaska) { - - case iconWidth <= this.sm: + if (this.alaska) { + if (iconWidth <= this.sm) { this.svg = new DOMParser().parseFromString(as100.svg, 'text/html').body.firstChild; - break; - case iconWidth >= this.sm + this.no && iconWidth <= this.md: + } else if (iconWidth > this.sm && iconWidth <= this.md) { this.svg = new DOMParser().parseFromString(as200.svg, 'text/html').body.firstChild; - break; - case iconWidth >= this.md + this.no && iconWidth <= this.lg: + } else if (iconWidth > this.md && iconWidth <= this.lg) { this.svg = new DOMParser().parseFromString(as300.svg, 'text/html').body.firstChild; - break; - default: + } else { this.svg = new DOMParser().parseFromString(as400.svg, 'text/html').body.firstChild; + } } } @@ -93,40 +92,35 @@ class AuroAlaska extends BaseIcon { * @param {number} iconWidth size of parent icon is in * @returns {object} SVG to be appended to DOM */ - alaskaLogoTagDef(iconWidth) { - switch (this.alaskaOfficial) { - - case iconWidth <= this.sm: - this.svg = new DOMParser().parseFromString(asTag100.svg, 'text/html').body.firstChild; - break; - case iconWidth >= this.sm + this.no && iconWidth <= this.md: - this.svg = new DOMParser().parseFromString(asTag200.svg, 'text/html').body.firstChild; - break; - case iconWidth >= this.md + this.no && iconWidth <= this.lg: - this.svg = new DOMParser().parseFromString(asTag300.svg, 'text/html').body.firstChild; - break; - default: - this.svg = new DOMParser().parseFromString(asTag400.svg, 'text/html').body.firstChild; + 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 - async firstUpdated() { - const iconContainer = await this.shadowRoot.querySelectorAll('.icon'); - const iconWidth = iconContainer[this.zero].clientWidth; + firstUpdated() { + const iconContainer = this.shadowRoot.querySelector('.icon'); + const iconWidth = iconContainer.clientWidth; - if (this.alaskaOfficial) { + if (this.official) { this.alaska = false; - } else { - this.alaska = true; } if (this.alaska) { this.alaskaLogoDef(iconWidth); - } else if (this.alaskaOfficial) { - this.alaskaLogoTagDef(iconWidth); + } else if (this.official) { + this.alaskaOfficialDef(iconWidth); } } @@ -141,7 +135,7 @@ class AuroAlaska extends BaseIcon { render() { const classes = { 'icon': true, - 'logo': this.alaska || this.alaskaOfficial, + 'logo': this.alaska || this.official, } return html` diff --git a/src/auro-icon.js b/src/auro-icon.js index 0ff718d..2af6f73 100644 --- a/src/auro-icon.js +++ b/src/auro-icon.js @@ -14,16 +14,18 @@ import styleCss from "./iconStyle-css.js"; /** * auro-icon provides users a way to use the Auro Icons by simply passing in the category and name. * - * @attr {String} category - The category of the icon you are looking for. See https://auro.alaskaair.com/icons/usage. - * @attr {String} name - The name of the icon you are looking for without the file extension. See https://auro.alaskaair.com/icons/usage. - * @attr {Boolean} primary - Sets the icon to use the baseline primary icon style. - * @attr {Boolean} emphasis - Sets the icon to use the emphasis style. - * @attr {Boolean} accent - Sets the icon to use the accent style. - * @attr {Boolean} advisory - Sets the icon to use the advisory style. - * @attr {Boolean} success - Sets the icon to use the success style. - * @attr {Boolean} error - Sets the icon to use the error style. - * @attr {Boolean} disabled - Sets the icon to use the disabled style. - * @attr {Boolean} warning - Sets the icon to use the warning style. + * @attr {Boolean} customSize - Allows for custom size use + * @attr {String} category - The category of the icon you are looking for. See https://auro.alaskaair.com/icons/usage + * @attr {String} name - The name of the icon you are looking for without the file extension. See https://auro.alaskaair.com/icons/usage + * @attr {Boolean} customColor - Removes primary selector + * @attr {Boolean} primary - Sets the icon to use the baseline primary icon style + * @attr {Boolean} emphasis - Sets the icon to use the emphasis style + * @attr {Boolean} accent - Sets the icon to use the accent style + * @attr {Boolean} advisory - Sets the icon to use the advisory style + * @attr {Boolean} success - Sets the icon to use the success style + * @attr {Boolean} error - Sets the icon to use the error style + * @attr {Boolean} disabled - Sets the icon to use the disabled style + * @attr {Boolean} warning - Sets the icon to use the warning style * @slot - Hidden from visibility, used for a11y if icon description is needed */ @@ -87,19 +89,12 @@ class AuroIcon extends BaseIcon { type: Boolean, reflect: true }, + customColor: { + type: Boolean + } }; } - /** - * @private internal function - * @returns {void} - */ - logUserAlert() { - if (this.alaska || this.alaskaTagline) { - console.log(`WARN: Using auro-icon for Alaska Airline's logo is deprecated. Please see auro-alaska for updated functionality`) - } - } - static get styles() { return [ super.styles, @@ -127,8 +122,6 @@ class AuroIcon extends BaseIcon { ${this.svg} - - ${this.logUserAlert()} `; } } diff --git a/src/baseIcon.js b/src/baseIcon.js index b1bd4f8..1ff56d5 100644 --- a/src/baseIcon.js +++ b/src/baseIcon.js @@ -15,11 +15,7 @@ import styleCss from "./style-css.js"; // See https://git.io/JJ6SJ for "How to document your components using JSDoc" /** - * auro-icon provides users a way to use the Auro Icons by simply passing in the category and name. - * - * @attr {Boolean} onDark - Set value for on-dark version of auro-icon. - * @attr {Boolean} customColor - Removes primary selector. - * @attr {Boolean} customSize - Allows for custom size use. + * @attr {Boolean} onDark - Set value for on-dark version of auro-icon * @slot - Hidden from visibility, used for a11y if icon description is needed */ @@ -41,9 +37,6 @@ export default class BaseIcon extends AuroElement { svg: { attribute: false, reflect: true - }, - customColor: { - type: Boolean } }; } diff --git a/src/style.scss b/src/style.scss index 8400339..f094c51 100644 --- a/src/style.scss +++ b/src/style.scss @@ -21,10 +21,3 @@ color: var(--auro-color-brand-midnight-400); } } - -:host([customSize]) { - --auro-size-lg: 100%; - - width: 100%; - height: 100%; -} diff --git a/test/auro-icon.test.js b/test/auro-icon.test.js index 7d46b1a..8ef15bc 100644 --- a/test/auro-icon.test.js +++ b/test/auro-icon.test.js @@ -181,7 +181,7 @@ describe('auro-icon', () => { it('auro-alaska shows small alaska tagline logo', async () => { const el = await fixture(html` - + `); const svg = el.shadowRoot.querySelector('svg'); @@ -199,7 +199,7 @@ describe('auro-icon', () => { it('auro-alaska shows med alaska tagline logo', async () => { const el = await fixture(html` - + `); const svg = el.shadowRoot.querySelector('svg'); @@ -217,7 +217,7 @@ describe('auro-icon', () => { it('auro-alaska shows lg alaska tagline logo', async () => { const el = await fixture(html` - + `); const svg = el.shadowRoot.querySelector('svg'); @@ -235,7 +235,7 @@ describe('auro-icon', () => { it('auro-alaska shows xl alaska tagline logo', async () => { const el = await fixture(html` - + `); const svg = el.shadowRoot.querySelector('svg');