Skip to content

Commit

Permalink
feat: upgrade auro-library to 3.0.1
Browse files Browse the repository at this point in the history
  • Loading branch information
@DukeFerdinand @sun-mota
DukeFerdinand authored and sun-mota committed Nov 15, 2024
1 parent a60f54f commit d343934
Show file tree
Hide file tree
Showing 7 changed files with 220 additions and 169 deletions.
24 changes: 12 additions & 12 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ The README.md file is a compiled document. No edits should be made directly to t
README.md is created by running `npm run build:docs`.
This file is generated based on a template fetched from
`https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/README.md`
`https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/README_updated_paths.md`
and copied to `./componentDocs/README.md` each time the the docs are compiled.
The following sections are editable by making changes to the following files:
Expand All @@ -19,12 +19,12 @@ The following sections are editable by making changes to the following files:

# Badge

<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
<!-- The below content is automatically added from ./../docs/partials/description.md -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
<!-- The below content is automatically added from ./docs/partials/description.md -->
HTML custom element for the use of drawing attention to additional interface information.
<!-- AURO-GENERATED-CONTENT:END -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/readmeAddlInfo.md) -->
<!-- The below content is automatically added from ./../docs/partials/readmeAddlInfo.md -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
<!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
<!-- AURO-GENERATED-CONTENT This file is to be used for any additional content that should be included in the README.md which is specific to this component. -->

## Recommended Use and Version Control
Expand Down Expand Up @@ -96,8 +96,8 @@ 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 -->
<!-- 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>
Expand All @@ -120,15 +120,15 @@ In cases where the project is not able to process JS assets, there are pre-proce
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.9.2/dist/tokens/CSSCustomProperties.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-badge@3.0.1/dist/auro-badge__bundled.js" type="module"></script>
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-badge@3.2.0/dist/auro-badge__bundled.js" type="module"></script>
```

<!-- 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 -->
<!-- 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
Expand All @@ -139,8 +139,8 @@ The `auro-badge` use cases include:

### Default auro-badge

<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/basic.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>
Expand Down
88 changes: 44 additions & 44 deletions demo/api.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../api.md) -->
<!-- The below content is automatically added from ./../api.md -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/api.md) -->
<!-- The below content is automatically added from ./../docs/api.md -->

# auro-badge

Expand Down Expand Up @@ -40,15 +40,15 @@ HTML custom element for the use of drawing attention to additional interface inf
Use the `error` attribute for a pre-defined use of color.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/error.html) -->
<!-- The below content is automatically added from ./../../apiExamples/error.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/error.html) -->
<!-- The below content is automatically added from ./../apiExamples/error.html -->
<auro-badge error>Nonstop</auro-badge>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/error.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/error.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/error.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/error.html -->

```html
<auro-badge error>Nonstop</auro-badge>
Expand All @@ -61,15 +61,15 @@ Use the `error` attribute for a pre-defined use of color.
Use the `success` attribute for a pre-defined use of color.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/success.html) -->
<!-- The below content is automatically added from ./../../apiExamples/success.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/success.html) -->
<!-- The below content is automatically added from ./../apiExamples/success.html -->
<auro-badge success>1 stop</auro-badge>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/success.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/success.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/success.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/success.html -->

```html
<auro-badge success>1 stop</auro-badge>
Expand All @@ -82,15 +82,15 @@ Use the `success` attribute for a pre-defined use of color.
Use the `advisory` attribute for a pre-defined use of color.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/advisory.html) -->
<!-- The below content is automatically added from ./../../apiExamples/advisory.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/advisory.html) -->
<!-- The below content is automatically added from ./../apiExamples/advisory.html -->
<auro-badge advisory>2+ stops</auro-badge>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/advisory.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/advisory.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/advisory.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/advisory.html -->

```html
<auro-badge advisory>2+ stops</auro-badge>
Expand All @@ -103,15 +103,15 @@ Use the `advisory` attribute for a pre-defined use of color.
Use the `emerald` attribute for a pre-defined use of color.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/emerald.html) -->
<!-- The below content is automatically added from ./../../apiExamples/emerald.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/emerald.html) -->
<!-- The below content is automatically added from ./../apiExamples/emerald.html -->
<auro-badge emerald><b>one</b>world Emerald</auro-badge>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/emerald.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/emerald.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/emerald.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/emerald.html -->

```html
<auro-badge emerald><b>one</b>world Emerald</auro-badge>
Expand All @@ -124,15 +124,15 @@ Use the `emerald` attribute for a pre-defined use of color.
Use the `ruby` attribute for a pre-defined use of color.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/ruby.html) -->
<!-- The below content is automatically added from ./../../apiExamples/ruby.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ruby.html) -->
<!-- The below content is automatically added from ./../apiExamples/ruby.html -->
<auro-badge ruby><b>one</b>world Ruby</auro-badge>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/ruby.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/ruby.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/ruby.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/ruby.html -->

```html
<auro-badge ruby><b>one</b>world Ruby</auro-badge>
Expand All @@ -145,15 +145,15 @@ Use the `ruby` attribute for a pre-defined use of color.
Use the `sapphire` attribute for a pre-defined use of color.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/sapphire.html) -->
<!-- The below content is automatically added from ./../../apiExamples/sapphire.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/sapphire.html) -->
<!-- The below content is automatically added from ./../apiExamples/sapphire.html -->
<auro-badge sapphire><b>one</b>world Sapphire</auro-badge>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/sapphire.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/sapphire.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/sapphire.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/sapphire.html -->

```html
<auro-badge sapphire><b>one</b>world Sapphire</auro-badge>
Expand All @@ -166,17 +166,17 @@ Use the `sapphire` attribute for a pre-defined use of color.
Use the `space` attribute to allow for pre-defined spacing beteen badges.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/space.html) -->
<!-- The below content is automatically added from ./../../apiExamples/space.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/space.html) -->
<!-- The below content is automatically added from ./../apiExamples/space.html -->
<auro-badge space>Nonstop</auro-badge>
<auro-badge space>1 stop</auro-badge>
<auro-badge space>2+ stops</auro-badge>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/space.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/space.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/space.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/space.html -->

```html
<auro-badge space>Nonstop</auro-badge>
Expand All @@ -191,8 +191,8 @@ Use the `space` attribute to allow for pre-defined spacing beteen badges.
Use the `disabled` attribute to render any `<auro-badge>` with a innoperable UI.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/disabled.html) -->
<!-- The below content is automatically added from ./../../apiExamples/disabled.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
<!-- The below content is automatically added from ./../apiExamples/disabled.html -->
<auro-badge disabled>1 stop</auro-badge>
<auro-badge success disabled>1 stop</auro-badge>
<auro-badge error disabled>1 stop</auro-badge>
Expand All @@ -201,8 +201,8 @@ Use the `disabled` attribute to render any `<auro-badge>` with a innoperable UI.
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/disabled.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/disabled.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->

```html
<auro-badge disabled>1 stop</auro-badge>
Expand All @@ -218,16 +218,16 @@ Use the `disabled` attribute to render any `<auro-badge>` with a innoperable UI.
Use the `target` property to aply the clickable feature.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/target.html) -->
<!-- The below content is automatically added from ./../../apiExamples/target.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/target.html) -->
<!-- The below content is automatically added from ./../apiExamples/target.html -->
<auro-badge target>Nonstop</auro-badge>
<auro-badge target disabled>1 stop</auro-badge>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/target.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/target.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/target.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/target.html -->

```html
<auro-badge target>Nonstop</auro-badge>
Expand All @@ -241,8 +241,8 @@ Use the `target` property to aply the clickable feature.
Use the `pill` attribute to render a small 'pill size' UI.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/pill.html) -->
<!-- The below content is automatically added from ./../../apiExamples/pill.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/pill.html) -->
<!-- The below content is automatically added from ./../apiExamples/pill.html -->
<auro-badge pill>12</auro-badge>
<auro-badge error pill>Danger</auro-badge>
<auro-badge success pill>Flight 167</auro-badge>
Expand All @@ -252,8 +252,8 @@ Use the `pill` attribute to render a small 'pill size' UI.
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/pill.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/pill.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/pill.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/pill.html -->

```html
<auro-badge pill>12</auro-badge>
Expand All @@ -269,8 +269,8 @@ Use the `pill` attribute to render a small 'pill size' UI.

The component may be restyled using the following code sample and changing the values of the following token(s).

<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../src/tokens.css) -->
<!-- The below code snippet is automatically added from ./../../src/tokens.css -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/tokens.css) -->
<!-- The below code snippet is automatically added from ./../src/tokens.css -->

```css
:host {
Expand Down
Loading

0 comments on commit d343934

Please sign in to comment.