diff --git a/README.md b/README.md index 910e2dc..b9cfa0a 100644 --- a/README.md +++ b/README.md @@ -60,15 +60,6 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens]( -### CSS Custom Property fallbacks - - -[CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) are [not supported](https://auro.alaskaair.com/support/custom-properties) in older browsers. For this, fallback properties are pre-generated and included with the npm. - -Any update to the Auro Design Tokens will be immediately reflected with browsers that support CSS custom properties, legacy browsers will require updated components with pre-generated fallback properties. - - - ### Define dependency in project component diff --git a/apiExamples/customSvg.html b/apiExamples/customSvg.html new file mode 100644 index 0000000..fd02e7f --- /dev/null +++ b/apiExamples/customSvg.html @@ -0,0 +1,9 @@ + + drop pin with circles. + + + drop pin with circles. + + + drop pin with circles. + diff --git a/demo/api.md b/demo/api.md index bb36e50..6298037 100644 --- a/demo/api.md +++ b/demo/api.md @@ -19,6 +19,7 @@ auro-icon provides users a way to use the Auro Icons by simply passing in the ca | [ariaHidden](#ariaHidden) | `ariaHidden` | `String` | | Set aria-hidden value. Default is `true`. Option is `false`. | | [category](#category) | `category` | `String` | | The category of the icon you are looking for. See https://auro.alaskaair.com/icons/usage. | | [customColor](#customColor) | `customColor` | `Boolean` | | Removes primary selector. | +| [customSvg](#customSvg) | `customSvg` | `Boolean` | | When true, auro-icon will render a custom SVG inside the default slot. | | [disabled](#disabled) | `disabled` | `Boolean` | | Sets the icon to use the disabled style. | | [emphasis](#emphasis) | `emphasis` | `Boolean` | | Sets the icon to use the emphasis style. | | [error](#error) | `error` | `Boolean` | | Sets the icon to use the error style. | @@ -45,9 +46,10 @@ auro-icon provides users a way to use the Auro Icons by simply passing in the ca ## Slots -| Name | Description | -|------|--------------------------------------------------| -| | Hidden from visibility, used for a11y if icon description is needed. | +| Name | Description | +|-------|--------------------------------------------------| +| | Hidden from visibility, used for a11y if icon description is needed. | +| [svg](#svg) | Used for custom SVG content. | ## API Examples @@ -71,6 +73,43 @@ auro-icon provides users a way to use the Auro Icons by simply passing in the ca +### Custom SVG icons + +Using the `customSvg` attribute, the component may render any icon svg content required. The `auro-icon` component will continue to render with all the variant and theme styles applied. + +
+ + + + drop pin with circles. + + + drop pin with circles. + + + drop pin with circles. + + +
+ + See code + + + +```html + + drop pin with circles. + + + drop pin with circles. + + + drop pin with circles. + +``` + + + ### Default component with label (accessibility recommendation) While you may place the icon alone, it is considered best practice to combine the icon with a description statement. The `auro-icon` element easily supports this with the use of the `label` attribute. By using the `label` attribute, content you enter into the `slot` of the element will appear next to the icon of choice. Changing the `aria-hidden` state of the icon is NOT needed. The assistive technologies will bypass the icon and announce the label string of content. diff --git a/docs/api.md b/docs/api.md index 7620b5b..b538ed3 100644 --- a/docs/api.md +++ b/docs/api.md @@ -16,6 +16,7 @@ auro-icon provides users a way to use the Auro Icons by simply passing in the ca | `ariaHidden` | `ariaHidden` | `String` | | Set aria-hidden value. Default is `true`. Option is `false`. | | `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. | +| `customSvg` | `customSvg` | `Boolean` | | When true, auro-icon will render a custom SVG inside the default slot. | | `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. | @@ -42,6 +43,7 @@ auro-icon provides users a way to use the Auro Icons by simply passing in the ca ## Slots -| Name | Description | -|------|--------------------------------------------------| -| | Hidden from visibility, used for a11y if icon description is needed. | +| Name | Description | +|-------|--------------------------------------------------| +| | Hidden from visibility, used for a11y if icon description is needed. | +| `svg` | Used for custom SVG content. | diff --git a/docs/partials/api.md b/docs/partials/api.md index 28fb152..d06f3ca 100644 --- a/docs/partials/api.md +++ b/docs/partials/api.md @@ -18,6 +18,23 @@ +### Custom SVG icons + +Using the `customSvg` attribute, the component may render any icon svg content required. The `auro-icon` component will continue to render with all the variant and theme styles applied. + +
+ + +
+ + + See code + + + + + + ### Default component with label (accessibility recommendation) While you may place the icon alone, it is considered best practice to combine the icon with a description statement. The `auro-icon` element easily supports this with the use of the `label` attribute. By using the `label` attribute, content you enter into the `slot` of the element will appear next to the icon of choice. Changing the `aria-hidden` state of the icon is NOT needed. The assistive technologies will bypass the icon and announce the label string of content. diff --git a/src/auro-icon.js b/src/auro-icon.js index 9399f83..eb77baf 100644 --- a/src/auro-icon.js +++ b/src/auro-icon.js @@ -21,6 +21,7 @@ import colorCss from "./color-css.js"; * @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} customSvg - When true, auro-icon will render a custom SVG inside the default slot. * @attr {Boolean} label - Exposes content in slot as icon label. * @attr {Boolean} primary - DEPRECATED: Sets the icon to use the baseline primary icon style. * @attr {Boolean} accent - Sets the icon to use the accent style. @@ -36,6 +37,7 @@ import colorCss from "./color-css.js"; * @attr {String} ariaHidden - Set aria-hidden value. Default is `true`. Option is `false`. * @attr {String} uri - Set the uri for CDN used when fetching icons * @slot - Hidden from visibility, used for a11y if icon description is needed. + * @slot svg - Used for custom SVG content. */ // build the component class @@ -57,6 +59,7 @@ export class AuroIcon extends BaseIcon { privateDefaults() { this.accent = false; this.customColor = false; + this.customSvg = false; this.disabled = false; this.emphasis = false; this.error = false; @@ -89,6 +92,9 @@ export class AuroIcon extends BaseIcon { customColor: { type: Boolean }, + customSvg: { + type: Boolean + }, disabled: { type: Boolean, reflect: true @@ -190,7 +196,12 @@ export class AuroIcon extends BaseIcon { > - ${this.svg} + ${this.customSvg ? html` + + ` : html` + ${this.svg} + ` + }
diff --git a/src/baseIcon.js b/src/baseIcon.js index 0a83efa..cb014df 100644 --- a/src/baseIcon.js +++ b/src/baseIcon.js @@ -71,14 +71,16 @@ export default class BaseIcon extends AuroElement { // lifecycle function async firstUpdated() { - const svg = await this.fetchIcon(this.category, this.name); + if (!this.customSvg) { + const svg = await this.fetchIcon(this.category, this.name); - if (svg) { - this.svg = svg; - } else if (!svg) { - const penDOM = new DOMParser().parseFromString(error.svg, 'text/html'); + if (svg) { + this.svg = svg; + } else if (!svg) { + const penDOM = new DOMParser().parseFromString(error.svg, 'text/html'); - this.svg = penDOM.body.firstChild; + this.svg = penDOM.body.firstChild; + } } } }