Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alaskaairlines/aurojavascriptdemo
An example frameworkless project with Orion Components integrated
https://github.com/alaskaairlines/aurojavascriptdemo
demo design-system javascript orion
Last synced: about 1 month ago
JSON representation
An example frameworkless project with Orion Components integrated
- Host: GitHub
- URL: https://github.com/alaskaairlines/aurojavascriptdemo
- Owner: AlaskaAirlines
- Created: 2019-11-18T20:25:00.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T02:18:38.000Z (almost 2 years ago)
- Last Synced: 2023-03-04T02:38:40.993Z (almost 2 years ago)
- Topics: demo, design-system, javascript, orion
- Language: JavaScript
- Size: 1.95 MB
- Stars: 0
- Watchers: 11
- Forks: 0
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Web Component Javascript Demo
 
An example Javascript project with Auro Components integrated. This app runs and works in all Alaska-supported browsers. Explore the project source to see the Auro Components being used in a frameworkless environment.
Below are instructions for adding Auro compatibility to your project. A familiarity with modern Javascript development and bundlers such as Webpack is expected.
## Example App API
Depending on your local configuration, this project will work with either `yarn` or `npm`. For the sake of documentation, the commands will default to `npm`.
Within the root directory of the app, you can:
| Command | Description
|---|---
| npm start | Runs the app in the development mode.
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
||Browser sync and linting in the CLI is enabled.
| npm build | Production build in the `build` folder.
Optimized, minimized and prepared for deployment
## Setting up new JavaScript project with Auro Web Components
The following steps will let you start using Web Components in your JavaScript application across all supported browsers.
### Install
The following command will install
* [auro-button](http://auro.alaskaair.com/components/auro/button)
* [auro-checkbox](https://auro.alaskaair.com/components/auro/checkbox)
* [auro-header](https://auro.alaskaair.com/components/auro/header)
* [auro-input](https://auro.alaskaair.com/components/auro/input)
* [auro-radio](https://auro.alaskaair.com/components/auro/radio)
* [design tokens](http://auro.alaskaair.com/getting-started/developers/design-tokens)
* [focus-visible](https://github.com/WICG/focus-visible)
```js
$ npm install --save-dev @alaskaairux/auro-button @alaskaairux/auro-checkbox @alaskaairux/auro-header @alaskaairux/auro-radio @alaskaairux/design-tokens focus-visible
```
## Importing WC Style Sheets
WC Style Sheets (WCSS) is a responsive, mobile-first collection of styles and tools designed to make it quick and simple for developers to create web experiences using the Auro Design Language.
This resource is built using Sass, [Dart Sass](https://www.npmjs.com/package/sass) is the preferred library for creating a JavaScript app.
```
$ npm i sass -D
```
### Install WC Style Sheets.
```javascript
$ npm i @alaskaairux/webcorestylesheets
```
After installing `sass`, rename `index.css` to `index.scss` and rename the import in `index.js`.
### Importing the stylesheets
Place global stylesheet imports into `src/sass/style.scss`.
At the top of the document, import basic dependencies:
```scss
@import '~@alaskaairux/design-tokens/dist/tokens/SCSSVariables';
@import "~@alaskaairux/web-core-style-sheets/dist/breakpoints";
@import '~@alaskaairux/web-core-style-sheets/dist/fonts';
@import "~@alaskaairux/web-core-style-sheets/dist/normalize";
@import "~@alaskaairux/web-core-style-sheets/dist/essentials";
@import "~@alaskaairux/web-core-style-sheets/dist/utilityClasses";
```
For more information about these files, be sure to see [the full API](https://alaskaairlines.github.io/WebCoreStyleSheets/), including the various Utility Selectors currently available.
## Icon Library
The Icons package contains standard set of SVG icons that can be used with any web project.
```Javascript
$ npm i @alaskaairux/icons -D
```
Further documentation can be found in the repository's [README](https://auro.alaskaair.com/icons/install) file.
### Add the components
The following is an example of how to add one of the components imported earlier in this document. Following this example, you can add all of the components necessary to achieve your template design.
In `src/index.js` you will need to add imports for all of the components used.
```js
import '@alaskaairux/auro-button';
import "@alaskaairux/auro-checkbox";
import "@alaskaairux/auro-checkbox/dist/auro-checkbox-group";
import '@alaskaairux/auro-header';
import '@alaskaairux/auro-input';
import "@alaskaairux/auro-radio";
import "@alaskaairux/auro-radio/dist/auro-radio-group";
```
In `src/index_template.html`, add a reference to `auro-button` and all other components.
```html
Submit
```
Run the application with `npm start`. The button should render and trigger an alert when clicked.
## Development
This project uses Semantic Release with Conventional Commits. Please be sure to review our [Contributing Guidelines](https://auro.alaskaair.com/getting-started/developers/contributing) for more info.