feat: add new fare and transparent variants #172

Author: jason-capsule42

README.md

@@ -52,17 +52,20 @@ This will create a new custom element that you can use in your HTML that will fu
 </auro-accordion>
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## UI development browser support
+## Use Cases
 
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/browserSupport.md) -->
-For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
+<!-- The below content is automatically added from ./docs/partials/useCases.md -->
+The `auro-badge` use cases include:
 
+* Additional information to draw attention to a specific area of the interface
+* Advising the user of a specific action or status
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## Install
 
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentInstall.md) -->
-[![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-badge/testPublish.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-badge/actions/workflows/testPublish.yml)
+[![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-badge/release.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-badge/actions/workflows/release.yml)
 [![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-badge?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-badge)
 [![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-badge?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)
@@ -73,17 +76,10 @@ $ npm i @aurodesignsystem/auro-badge
 
 <!-- AURO-GENERATED-CONTENT:END -->
 
-### Design Token CSS Custom Property dependency
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/designTokens.md) -->
-The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
-
-<!-- AURO-GENERATED-CONTENT:END -->
-
-### Define dependency in project component
+### Define Dependency in Project
 
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImportDescription.md) -->
-Defining the component dependency within each component that is using the `<auro-badge>` component.
+Defining the dependency within each project that is using the `<auro-badge>` component.
 
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImport.md) -->
@@ -92,17 +88,9 @@ Defining the component dependency within each component that is using the `<auro
 import "@aurodesignsystem/auro-badge";
 ```
 
-<!-- AURO-GENERATED-CONTENT:END -->
-**Reference component in HTML**
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
-<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
-
-```html
-<auro-badge>Nonstop</auro-badge>
-```
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## Use CDN
+### Use CDN
 
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/bundleInstallDescription.md) -->
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
@@ -113,19 +101,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## auro-badge use cases
-
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
-<!-- The below content is automatically added from ./docs/partials/useCases.md -->
-The `auro-badge` use cases include:
-
-* Additional information to draw attention to a specific area of the interface
-* Advising the user of a specific action or status
-<!-- AURO-GENERATED-CONTENT:END -->
-
-## API Code Examples
-
-### Default auro-badge
+## Basic Example
 
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
 <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
@@ -135,31 +111,34 @@ The `auro-badge` use cases include:
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## Development
+## Custom Component Registration for Version Management
 
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/developmentDescription.md) -->
-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.
+There are two key parts to every Auro component: the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element definition.
+The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML.
 
-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.
+When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you.
 
-<!-- AURO-GENERATED-CONTENT:END -->
-
-### Start development environment
+However, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), you can manually register the class under a custom element name to avoid conflicts.
 
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/localhost.md) -->
-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
-```
+You can do this by importing only the component class and using the `register(name)` method with a unique name:
 
-Open [localhost:8000](http://localhost:8000/)
-
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
+<!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
+<!-- add custom registration content here -->
 <!-- AURO-GENERATED-CONTENT:END -->
+<div class="exampleWrapper exampleWrapper--flex">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./apiExamples/custom.html) -->
+  <!-- The below content is automatically added from ./apiExamples/custom.html -->
+  <custom-badge variant="warning">Salutations World!</custom-badge>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/custom.html) -->
+<!-- The below code snippet is automatically added from ./apiExamples/custom.html -->
 
-### Testing
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/testing.md) -->
-Automated tests are required for every Auro component. See `.\test\auro-badge.test.js` for the tests for this component. Run `npm run 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.
-
-<!-- AURO-GENERATED-CONTENT:END -->
+```html
+<custom-badge variant="warning">Salutations World!</custom-badge>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>

apiExamples/fares.html

@@ -0,0 +1,5 @@
+<auro-badge variant="fare-saver">saver</auro-badge>
+<auro-badge variant="fare-economy">economy</auro-badge>
+<auro-badge variant="fare-premium">premium</auro-badge>
+<auro-badge variant="fare-business">business</auro-badge>
+<auro-badge variant="fare-first">first</auro-badge>

apiExamples/transparency-inverse.html

@@ -0,0 +1 @@
+<auro-badge variant="transparent-inverse">saver</auro-badge>

apiExamples/transparency.html

@@ -0,0 +1 @@
+<auro-badge variant="transparent">saver</auro-badge>

custom-elements.json

@@ -23,7 +23,7 @@
                 "text": "string"
               },
               "description": "Defines whether the component will be on lighter or darker backgrounds.\n Possible Values: `default`, `inverse`",
-              "default": "'default'",
+              "default": "\"default\"",
               "fieldName": "appearance",
               "inheritedFrom": {
                 "name": "AuroBadge",
@@ -129,7 +129,7 @@
               "type": {
                 "text": "String"
               },
-              "description": "Sets the color UI of the badge Possible Values: - `accent1`, `accent2`, `accent3`, `accent4`, `bronze`, `cobalt`, `copper`, `gold`, `nickel`, `platinum`, `silver`, `titanium`, `transparent`, `info`, `error`, `success`, `warning`, `emerald`, `sapphire`, `ruby`, `lounge`, `loungeplus` Deprecated Values: - `mvp`, `mvpgold`, `mvpgold75k`",
+              "description": "Sets the color UI of the badge Possible Values: `accent1`, `accent2`, `accent3`, `accent4`, `bronze`, `cobalt`, `copper`, `gold`, `nickel`, `platinum`, `silver`, `titanium`, `transparent`, `info`, `error`, `success`, `warning`, `emerald`, `sapphire`, `ruby`, `lounge`, `loungeplus`, `fare-saver`, `fare-economy`, `fare-premium`, `fare-business`, `fare-first` Deprecated Values: `mvp`, `mvpgold`, `mvpgold75k`",
               "name": "variant",
               "inheritedFrom": {
                 "name": "AuroBadge",
@@ -146,7 +146,7 @@
                 "text": "string"
               },
               "description": "Defines whether the component will be on lighter or darker backgrounds.\n Possible Values: `default`, `inverse`",
-              "default": "'default'",
+              "default": "\"default\"",
               "attribute": "appearance",
               "reflects": true,
               "inheritedFrom": {
@@ -272,6 +272,9 @@
               "inheritedFrom": {
                 "name": "AuroBadge",
                 "module": "src/auro-badge.js"
+              },
+              "type": {
+                "text": "register(name?: string = \"auro-badge\") => void"
               }
             },
             {
@@ -313,7 +316,9 @@
                 "module": "src/auro-badge.js"
               }
             }
-          ]
+          ],
+          "modulePath": "scripts/wca/auro-badge.js",
+          "definitionPath": "scripts/wca/auro-badge.js"
         }
       ],
       "exports": [
@@ -344,7 +349,7 @@
                 "text": "string"
               },
               "description": "Defines whether the component will be on lighter or darker backgrounds.\n Possible Values: `default`, `inverse`",
-              "default": "'default'",
+              "default": "\"default\"",
               "attribute": "appearance",
               "reflects": true
             },
@@ -471,7 +476,7 @@
                 "text": "string"
               },
               "description": "Defines whether the component will be on lighter or darker backgrounds.\n Possible Values: `default`, `inverse`",
-              "default": "'default'",
+              "default": "\"default\"",
               "fieldName": "appearance"
             },
             {
@@ -541,15 +546,16 @@
               "type": {
                 "text": "String"
               },
-              "description": "Sets the color UI of the badge Possible Values: - `accent1`, `accent2`, `accent3`, `accent4`, `bronze`, `cobalt`, `copper`, `gold`, `nickel`, `platinum`, `silver`, `titanium`, `transparent`, `info`, `error`, `success`, `warning`, `emerald`, `sapphire`, `ruby`, `lounge`, `loungeplus` Deprecated Values: - `mvp`, `mvpgold`, `mvpgold75k`",
+              "description": "Sets the color UI of the badge Possible Values: `accent1`, `accent2`, `accent3`, `accent4`, `bronze`, `cobalt`, `copper`, `gold`, `nickel`, `platinum`, `silver`, `titanium`, `transparent`, `info`, `error`, `success`, `warning`, `emerald`, `sapphire`, `ruby`, `lounge`, `loungeplus`, `fare-saver`, `fare-economy`, `fare-premium`, `fare-business`, `fare-first` Deprecated Values: `mvp`, `mvpgold`, `mvpgold75k`",
               "name": "variant"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "customElement": true
+          "customElement": true,
+          "modulePath": "src/auro-badge.js"
         }
       ],
       "exports": [
@@ -578,20 +584,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/color-css.js",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "module": "src/color-css.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/iconVersion.js",
@@ -627,34 +619,6 @@
       "path": "src/registered.js",
       "declarations": [],
       "exports": []
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/style-css.js",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "module": "src/style-css.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/tokens-css.js",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "module": "src/tokens-css.js"
-          }
-        }
-      ]
     }
   ]
 }