Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alaskaairlines/auro-button
HTML custom element represents a clickable button, used to submit forms or anywhere in a document for accessible, standard button functionality
https://github.com/alaskaairlines/auro-button
auro custom-element design-system
Last synced: about 1 month ago
JSON representation
HTML custom element represents a clickable button, used to submit forms or anywhere in a document for accessible, standard button functionality
- Host: GitHub
- URL: https://github.com/alaskaairlines/auro-button
- Owner: AlaskaAirlines
- License: apache-2.0
- Created: 2019-03-25T23:40:42.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-11-15T19:28:41.000Z (about 1 month ago)
- Last Synced: 2024-11-19T12:38:53.094Z (about 1 month ago)
- Topics: auro, custom-element, design-system
- Language: SCSS
- Homepage: https://auro.alaskaair.com/components/auro/button
- Size: 4.26 MB
- Stars: 5
- Watchers: 11
- Forks: 10
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# Button
`` is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) for the purpose being a clickable element to trigger a specific action.
## Responsive support
`` is responsive by default. The button will assume 100% of the width of its container for views less than [auro_breakpoint--sm](https://alaskaairlines.github.io/WebCoreStyleSheets/#responsive-mixin-auro_breakpoint--sm).
Beyond that breakpoint `` will assume the width of the content or a min-width of `8.75rem`, which ever is greater.
If the desired appearance of the `` is to be placed in the reverse direction of natural content, then the attributes of `responsive` and `reverse` are needed on the `` element.
## Multi button support
When the UI requires the use of multiple buttons within the same space, with the use of the [Auro Web Core Style Sheets](https://alaskaairlines.github.io/WebCoreStyleSheets/#utility-auro-css-#{$scope}.auro_containedButtons), and the `auro_containedButtons`.
## UI development browser support
For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
## Install
[](https://github.com/AlaskaAirlines/auro-button/actions/workflows/testPublish.yml)
[](https://www.npmjs.com/package/@aurodesignsystem/auro-button)
[](https://www.apache.org/licenses/LICENSE-2.0)
```shell
$ npm i @aurodesignsystem/auro-button
```
Installing as a direct, dev or peer dependency is up to the user installing the package. If you are unsure as to what type of dependency you should use, consider reading this [stack overflow](https://stackoverflow.com/questions/18875674/whats-the-difference-between-dependencies-devdependencies-and-peerdependencies) answer.
### Design Token CSS Custom Property dependency
The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
### Define dependency in project component
Defining the component dependency within each component that is using the `` component.
```js
import "@aurodesignsystem/auro-button";
```
**Reference component in HTML**
```html
Primary
Secondary
Tertiary
```
## Install bundled assets from CDN
In cases where the project is not able to process JS assets, there are pre-processed assets available for use. See -- `auro-button__bundled.js` for modern browsers. Legacy browsers such as IE11 are no longer supported.
**WARNING!** When installing into your application environment, DO NOT use `@latest` for the requested version. Risks include unknown MAJOR version releases and instant adoption of any new features and possible bugs without developer knowledge. The `@latest` wildcard should NEVER be used for production customer-facing applications. You have been warned.
### Bundle example code
```html
```
## auro-button use cases
The auro-button element should be used in situations where users may:
* submit a form
* begin a new task
* trigger a new UI element to appear to the page
* specificy a new or next step in a process
## API Code Examples
### Default auro-button
```html
Primary
Secondary
Tertiary
```
## Development
In order to develop against this project, if you are not part of the core team, you will be required to fork the project prior to submitting a pull request.
Please be sure to review the [contribution guidelines](https://auro.alaskaair.com/contributing) for this project. Please make sure to **pay special attention** to the **conventional commits** section of the document.
### Start development environment
Once the project has been cloned to your local resource and you have installed all the dependencies you will need to open a shell session to run the **dev server**.
```shell
$ npm run dev
```
Open [localhost:8000](http://localhost:8000/)
If running separate sessions is preferred, please run the following commands in individual terminal shells.
```shell
$ npm run build:watch
$ npm run serve
```
### API generation
The custom element API file is generated in the build and committed back to the repo with a version change. If the API doc has changed without a version change, author's are to run `npm run build:api` to generate the doc and commit to version control.
### Testing
Automated tests are required for every Auro component. See `.\test\auro-button.test.js` for the tests for this component. Run `npm test` to run the tests and check code coverage. Tests must pass and meet a certain coverage threshold to commit. See [the testing documentation](https://auro.alaskaair.com/support/tests) for more details.
### Bundled assets
Bundled assets are only generated in the remote and not merged back to this repo. To review and/or test a bundled asset locally, run `$ npm run bundler` to generate assets.