@alaskaairux/icons
Advanced tools
Comparing version 3.1.0 to 3.1.1
@@ -6,3 +6,2 @@ --- | ||
labels: 'Status: Proposal' | ||
assignees: blackfalcon | ||
@@ -13,9 +12,25 @@ --- | ||
> Please list the icon(s) that need to be added to the library | ||
> Please fill out the table below with the desired information per icon | ||
1. ... | ||
1. ... | ||
<!-- see the table below for a list of available categories | ||
| category | description | | ||
|-----------|-------------| | ||
| alert | Icons used specifically to alert users as to the state of awareness | | ||
| in-flight | icons reserved for 'day of travel' user experiences | | ||
| interface | Icons used to create interface enhancements | | ||
| payment | Icons specifically to be used in a transaction flow | | ||
| shop | icons for use with shopping experiences | | ||
| social | Icons for use with social media | | ||
| terminal | Icons related to terminal experiences | | ||
--> | ||
| name | category | description | | ||
|---|---|---| | ||
| <!-- icon name --> | <!-- icon category --> | <!-- icon description --> | | ||
## Icon art | ||
<!-- To check off a box, simply add an 'x' within the square brackets --> | ||
<!-- - [x] ... --> | ||
> The icon(s) per this request, has the new art been completed? | ||
@@ -26,3 +41,3 @@ | ||
> If YES, does the new icon art follow all the recomendations from the [Auro Icon Design Guidlines](https://auro.alaskaair.com/foundations/iconography/design-guidelines)? | ||
> If YES, does the new icon art follow all the recommendations from the [Auro Icon Design Guidelines](https://auro.alaskaair.com/foundations/iconography/design-guidelines)? | ||
@@ -29,0 +44,0 @@ - [ ] Yes |
# Semantic Release Automated Changelog | ||
## [3.1.1](https://github.com/AlaskaAirlines/Icons/compare/v3.1.0...v3.1.1) (2020-04-20) | ||
### Bug Fixes | ||
* update docs to clearify new work ([cf64cf4](https://github.com/AlaskaAirlines/Icons/commit/cf64cf4d2b93ae4559b74733afee7f2087a18872)) | ||
# [3.1.0](https://github.com/AlaskaAirlines/Icons/compare/v3.0.0...v3.1.0) (2020-04-16) | ||
@@ -4,0 +11,0 @@ |
{ | ||
"name": "@alaskaairux/icons", | ||
"description": "Alaska Air and Auro Design System Icons", | ||
"version": "3.1.0", | ||
"version": "3.1.1", | ||
"main": "dist/index.js", | ||
@@ -6,0 +6,0 @@ "author": "Alaska Design and Research", |
@@ -1,2 +0,2 @@ | ||
[![Build Status](https://travis-ci.org/AlaskaAirlines/OrionIcons.svg?branch=master)](https://travis-ci.org/AlaskaAirlines/OrionDesignTokens) | ||
[![Build Status](https://travis-ci.org/AlaskaAirlines/Icons.svg?branch=master)](https://travis-ci.org/AlaskaAirlines/OrionDesignTokens) | ||
![npm (scoped)](https://img.shields.io/npm/v/@alaskaairux/icons.svg?color=orange) | ||
@@ -9,6 +9,2 @@ ![NPM](https://img.shields.io/npm/l/@alaskaairux/icons.svg?color=blue) | ||
## Supported icons | ||
All currently supported icons are located in the `icons/` directory. | ||
## Install | ||
@@ -55,12 +51,8 @@ | ||
This will inset the Token output within the scope of the shadow DOM Custom Element and render the appropriate values per the CSS Custom Properties. | ||
This will insert the Token output within the scope of the shadow DOM Custom Element and render the appropriate values per the CSS Custom Properties. | ||
In this case, Orion Icons are a direct dependency of the custom element. | ||
#### Using Icon Properties outside the shadow DOM | ||
It is not necessary to load the Icon CSS custom properties within the scope of the shadow DOM. As long as the variables are made available from the global scope of the project, the CSS custom properties will pierce the shadow DOM and style the icons. | ||
When using an icon, it is not necessary to load the Icon CSS custom properties within the scope of the shadow DOM. As long as the variables are made available from the global scope of the project, the CSS custom properties will pierce the shadow DOM and style the icons. | ||
In this case, the Orion Icons should be noted as a peer dependency with install instructions at the global level. | ||
## Categories | ||
@@ -72,10 +64,10 @@ | ||
|---|---| | ||
| alert |Icons used specifically to alert users as to the state of awareness| | ||
| interface |Icons used to create interface enhancements| | ||
|payment|Icons specifically to be used in a transaction flow| | ||
|social|Icons for use with social media| | ||
|terminal|Icons related to terminal experiences| | ||
| alert | Icons used specifically to alert users as to the state of awareness | | ||
| in-flight | icons reserved for 'day of travel' user experiences | | ||
| interface | Icons used to create interface enhancements | | ||
| payment | Icons specifically to be used in a transaction flow | | ||
| shop | icons for use with shopping experiences | | ||
| social | Icons for use with social media | | ||
| terminal | Icons related to terminal experiences | | ||
For the purposes of backwards compatibility, legacy icons will **NOT** be categorized and deprecated. | ||
## Node application dependency | ||
@@ -233,9 +225,2 @@ | ||
### Angular SVG Icon | ||
For use with Angular projects, `angular-svg-icon` renders a component that will render the SVG inline from the designated resource location. | ||
See [angular-svg-icon](https://www.npmjs.com/package/angular-svg-icon) for more information. | ||
## Adding Icons | ||
@@ -287,2 +272,3 @@ | ||
| category | string | | Defines categorical placement of the icon | | ||
| desc | string | | The `<desc>` element provides an accessible, long-text description of any SVG | | ||
@@ -293,4 +279,8 @@ #### Optional attributes for each SVG | ||
|---|---|---|---| | ||
| desc | string | | The `<desc>` element provides an accessible, long-text description of any SVG | | ||
| title | string | | The `<title>` element provides an accessible, short-text description of any SVG, may appear as a tool-tip in the browser; can be derived from the file name | | ||
The `title` attribute is needed when you may want a simpler name than the file name. In the example data below, there is the `information-stroke.svg`, but the name `information-stroke` is meaningless if rendered to the browser. Updating the title to simply be `information` will address that. | ||
#### Example data | ||
```javascript | ||
@@ -313,13 +303,11 @@ { | ||
{ | ||
"name": "close", | ||
"desc": "Option to close current experience", | ||
"width": "var(--auro-size-md)", | ||
"height": "var(--auro-size-md)", | ||
"style": "ico_squareMed", | ||
"viewBox": "0 0 48 48" | ||
"name": "error", | ||
"desc": "Error alert indicator", | ||
"category": "alert" | ||
}, | ||
{ | ||
"title": "Close", | ||
"name": "close-lg", | ||
"desc": "Option to close current experience" | ||
"title": "Information", | ||
"name": "information-stroke", | ||
"desc": "Important information indicator", | ||
"category": "alert" | ||
} | ||
@@ -326,0 +314,0 @@ ] |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
1130379
359