diff --git a/.stylelintrc b/.stylelintrc index 6adf515..0919ffe 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -4,6 +4,7 @@ "no-duplicate-selectors": null, "font-family-no-duplicate-names": null, "no-descending-specificity": null, - "selector-type-no-unknown": null + "selector-type-no-unknown": null, + "at-rule-no-unknown": null } } diff --git a/README.md b/README.md index 26433d1..0156e08 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,47 @@ -# auro-button - -`` is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) for the purpose of containing styling and behavior. - + + +# 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. + + + + + + ## UI development browser support + For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport) + + ## Install + [![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-button/testPublish.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-button/actions/workflows/testPublish.yml) [![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-button?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-button) [![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-button?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0) +[![Snyk Vulnerabilities for npm package](https://img.shields.io/snyk/vulnerabilities/npm/@aurodesignsystem/auro-button?style=for-the-badge)](https://snyk.io/test/npm/@aurodesignsystem/auro-button?tab=issues) ```shell $ npm i @aurodesignsystem/auro-button @@ -18,132 +49,150 @@ $ 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). + + ### 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 + Defining the component dependency within each component that is using the `` component. -```javascript + + + +```js import "@aurodesignsystem/auro-button"; ``` + **Reference component in HTML** - + + + ```html -Hello World -``` - -## CDN Use +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. + +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. -### Install +We recommend you load these bundles using [differential serving](https://philipwalton.com/articles/deploying-es2015-code-in-production-today/) so that the browser only loads the bundle correctly. To accomplish this, the script tag for the modern bundle should have `type="module"` and the script tag. -Include the following example HTML code in the `` element of your page. + + +### Bundle example code + + ```html + - - - -``` - -**NOTE:** Be sure to replace `@latest` in the URL with the version of the asset you want. @latest is NOT aware of any MAJOR releases, use at your own risk. - -## 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` . - -## Light DOM Support -`` are included in this package for [light DOM](https://developers.google.com/web/fundamentals/web-components/shadowdom#lightdom) support. - -To pass content to the , use the content prop. - -```html - -``` - -### Native form attribute support - -The auro-button shadow DOM web component does not support all the native form attributes that a `