Skip to content

Commit

Permalink
refactor: address review feedback
Browse files Browse the repository at this point in the history
  • Loading branch information
@blackfalcon
blackfalcon committed Dec 18, 2020
1 parent 1b1643b commit 7033ce8
Show file tree
Hide file tree
Showing 7 changed files with 84 additions and 119 deletions.
20 changes: 10 additions & 10 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,19 +28,19 @@ <h1>auro-alaska</h1>
<template>
<div style="width: 528px">
<auro-alaska></auro-alaska>
<auro-alaska alaskaOfficial></auro-alaska>
<auro-alaska official></auro-alaska>
</div>
<div style="width: 192px">
<auro-alaska></auro-alaska>
<auro-alaska alaskaOfficial></auro-alaska>
<auro-alaska official></auro-alaska>
</div>
<div style="width: 108px">
<auro-alaska></auro-alaska>
<auro-alaska alaskaOfficial></auro-alaska>
<auro-alaska official></auro-alaska>
</div>
<div>
<auro-alaska style="width: 72px"></auro-alaska><br>
<auro-alaska style="width: 72px" alaskaOfficial></auro-alaska>
<auro-alaska style="width: 72px" official></auro-alaska>
</div>
</template>
</demo-snippet>
Expand All @@ -49,19 +49,19 @@ <h1>auro-alaska</h1>
<template>
<div style="width: 528px" class="wrapper">
<auro-alaska ondark></auro-alaska>
<auro-alaska alaskaOfficial ondark></auro-alaska>
<auro-alaska official ondark></auro-alaska>
</div>
<div style="width: 192px" class="wrapper">
<auro-alaska ondark></auro-alaska>
<auro-alaska alaskaOfficial ondark></auro-alaska>
<auro-alaska official ondark></auro-alaska>
</div>
<div style="width: 108px" class="wrapper">
<auro-alaska ondark></auro-alaska>
<auro-alaska alaskaOfficial ondark></auro-alaska>
<auro-alaska official ondark></auro-alaska>
</div>
<div class="wrapper">
<auro-alaska style="width: 72px" ondark></auro-alaska><br>
<auro-alaska style="width: 72px" alaskaOfficial ondark></auro-alaska>
<auro-alaska style="width: 72px" official ondark></auro-alaska>
</div>
</template>
</demo-snippet>
Expand Down Expand Up @@ -145,7 +145,7 @@ <h1>auro-icon</h1>

<demo-snippet>
<template>
<auro-alaska alaskaOfficial></auro-alaska>
<auro-alaska official></auro-alaska>
</template>
</demo-snippet>

Expand All @@ -160,7 +160,7 @@ <h1>auro-icon</h1>
<demo-snippet>
<template>
<div class="wrapper">
<auro-alaska alaskaOfficial onDark></auro-alaska>
<auro-alaska official onDark></auro-alaska>
</div>
</template>
</demo-snippet>
Expand Down
44 changes: 18 additions & 26 deletions docs/api.md
View file
Original file line number Diff line number Diff line change
@@ -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

Expand All @@ -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

Expand Down
78 changes: 36 additions & 42 deletions src/auro-alaska.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,21 +12,20 @@ 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";
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
*/

Expand All @@ -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
},
Expand All @@ -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;
}
}
}

Expand All @@ -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);
}
}

Expand All @@ -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`
Expand Down
37 changes: 15 additions & 22 deletions src/auro-icon.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/

Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -127,8 +122,6 @@ class AuroIcon extends BaseIcon {
</div>
<slot name="icon">${this.svg}</slot>
</div>
${this.logUserAlert()}
`;
}
}
Expand Down
9 changes: 1 addition & 8 deletions src/baseIcon.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/

Expand All @@ -41,9 +37,6 @@ export default class BaseIcon extends AuroElement {
svg: {
attribute: false,
reflect: true
},
customColor: {
type: Boolean
}
};
}
Expand Down
7 changes: 0 additions & 7 deletions src/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,3 @@
color: var(--auro-color-brand-midnight-400);
}
}

:host([customSize]) {
--auro-size-lg: 100%;

width: 100%;
height: 100%;
}
Loading

0 comments on commit 7033ce8

Please sign in to comment.