From 7ea8420974586375f1143c33c4715b50a9195924 Mon Sep 17 00:00:00 2001 From: Jordan Jones Date: Mon, 23 Sep 2024 13:04:34 -0700 Subject: [PATCH] perf: refactor custom component registration config BREAKING CHANGE: trigger major release for color theming support #229 --- README.md | 108 +++++++++++++++++++-------------------- demo/index.html | 6 ++- demo/index.md | 6 ++- docs/partials/index.md | 6 ++- index.js | 13 +---- test/auro-button.test.js | 6 +-- 6 files changed, 72 insertions(+), 73 deletions(-) diff --git a/README.md b/README.md index 1331524..cd6a745 100644 --- a/README.md +++ b/README.md @@ -15,85 +15,85 @@ The following sections are editable by making changes to the following files: | Use Cases | Examples for when to use this component | `./docs/partials/useCases.md` | | Additional Information | For use to add any component specific information | `./docs/partials/readmeAddlInfo.md` | | Component Example Code | HTML sample code of the components use | `./apiExamples/basic.html` | ---> - +--> + # 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. - +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 [![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) -![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge) - +![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge) + ```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 -``` - - +Tertiary +``` + + ## Install bundled assets from CDN @@ -101,20 +101,20 @@ In cases where the project is not able to process JS assets, there are pre-proce **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 @@ -125,22 +125,22 @@ The auro-button element should be used in situations where users may: * 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 - + + +## API Code Examples + ### Default auro-button - - + + ```html Primary Secondary -Tertiary -``` - - +Tertiary +``` + + ## Development @@ -148,8 +148,8 @@ In order to develop against this project, if you are not part of the core team, 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 @@ -169,22 +169,22 @@ $ 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 diff --git a/demo/index.html b/demo/index.html index 358e438..8869d13 100644 --- a/demo/index.html +++ b/demo/index.html @@ -29,7 +29,11 @@ });