Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/alaskaairlines/aurocore-swatch

custom-element design-system orion web-component

Last synced: about 1 month ago
JSON representation

Host: GitHub
URL: https://github.com/alaskaairlines/aurocore-swatch
Owner: AlaskaAirlines
License: apache-2.0
Created: 2019-08-02T20:32:14.000Z (over 5 years ago)
Default Branch: master
Last Pushed: 2023-07-19T01:24:01.000Z (over 1 year ago)
Last Synced: 2024-03-03T07:45:08.801Z (10 months ago)
Topics: custom-element, design-system, orion, web-component
Language: JavaScript
Size: 2.93 MB
Stars: 1
Watchers: 12
Forks: 0
Open Issues: 25
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        # auro-swatch

`` is a UI component for the display of color information containing styling and behavior.

## Docs

All information regarding Project Setup, Technical Details, Tests and information regarding ODS Stateless Components can be found in the [./docs](https://github.com/AlaskaAirlines/OrionStatelessComponents__docs/tree/master/docs) repository.

## Install

[![Build Status](https://img.shields.io/github/workflow/status/AlaskaAirlines/auro-swatch/Test%20and%20publish?branch=master&style=for-the-badge)](https://github.com/AlaskaAirlines/auro-swatch/actions?query=workflow%3A%22test+and+publish%22)

[![See it on NPM!](https://img.shields.io/npm/v/@alaskaairux/auro-swatch.svg?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@alaskaairux/auro-swatch)

[![License](https://img.shields.io/npm/l/@alaskaairux/auro-swatch.svg?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)

```shell

$ npm i @alaskaairux/auro-swatch

```

### Design Token CSS Custom Property dependency

The use of any Auro Component has a dependency on the [Auro Design Tokens (npm install)](https://www.npmjs.com/package/@alaskaairux/orion-design-tokens). See repository and API information [here](https://github.com/AlaskaAirlines/AuroDesignTokenss).

For additional details in regards to using Auro Design Tokens with components, please see [./docs/TECH_DETAILS.md](https://github.com/AlaskaAirlines/auro_docs/blob/master/src/TECH_DETAILS.md)

### CSS Custom Property fallbacks

CSS Custom Properties are not supported 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

Define the component dependency within each component that is using the `` component.

```javascript

import "@alaskaairux/auro-swatch";

```

## Element auro-token-list

```javascript

class AuroTokenList extends ComponentBase

```

### auro-token-list use cases

The `` element should be used in situations where users may:

* Display table of design token name and value

* Display alternate table of deprecated tokens with optional new reference token name

### Properties:

| Attribute | Value type | Description |

|----|----|----|

| componentData | array | pass in `tokenvalue`, `token` |

| deprecated | boolean | use deprecated display table |

### Code Examples

```html

```

```html

```

## Element auro-swatch-list

```javascript

class AuroSwatchList extends ComponentBase

```

### auro-swatch-list use cases

The `` element should be used in situations where users may:

* Need to illustrate a Design Token color and its related data

* Display data in table format

* Displays CSS custom property name

* Displays Sass variable name

* Describes color usage and WCAG rating

* Displays color in circular inkwell

* Displays color HEX or RGBA value

### Properties:

| Attribute | Value type | Description |

|----|----|----|

| componentData | array | pass in `backgroundcolor`, `colorname`, `wcag`, `usage` |

| ondark | boolean | defines if color state is to be on-dark |

### Code Examples

```html

```

```html

```

## Element auro-color-avatar

```javascript

class AuroColorAvatar extends ComponentBase

```

### auro-color-avatar use cases

The `` element should be used in situations where users may:

* Need to illustrate a Design Token color and its related data

* Use illustrative avatar to display color listing

* Need to illustrate between text, border, alert, interactive or icon uses

### Properties:

| Attribute | Value type | Description |

|----|----|----|

| avatartype | string | pass in `font`, `border`, `alert`, `ui`, `icon` string to illustrate preferred avatar type |

| colorname | string | pass in `-` (dash) delimitated name of color token |

| ondark | boolean | defines if color state is to be on-dark |

### Code Examples

```html

```

```html

```

```html

```