Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: update auro-library to 3.0.1 #84

Merged
merged 2 commits into from
Nov 15, 2024
Merged

feat: update auro-library to 3.0.1 #84

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
263cf71
feat: update auro-library to 3.0.1
DukeFerdinand Nov 9, 2024
81a66b9
perf: update library to 3.0.2
sun-mota Nov 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions README.md
View file
Open in desktop
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:

# Alert

<!-- 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 -->
The `auro-alert` component renders errors, warnings, and other inline notifications with automated styling elements. Simply add the `type` attribute the corresponding value. If you need to present multiple lines in the same alert wrapper, use p tags for each line.
<!-- 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. -->
<!-- AURO-GENERATED-CONTENT:END -->

Expand Down Expand Up @@ -72,8 +72,8 @@ import "@aurodesignsystem/auro-alert";

<!-- 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-alert>This is a default error with no error type specified.</auro-alert>
Expand All @@ -96,15 +96,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-alert@3.0.2/dist/auro-alert__bundled.js" type="module"></script>
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-alert@3.1.3/dist/auro-alert__bundled.js" type="module"></script>
```

<!-- AURO-GENERATED-CONTENT:END -->

## auro-alert 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-alert` use cases include:

* Error messages
Expand All @@ -116,8 +116,8 @@ The `auro-alert` use cases include:

### Default auro-alert

<!-- 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-alert>This is a default error with no error type specified.</auro-alert>
Expand Down
104 changes: 52 additions & 52 deletions demo/api.md
View file
Open in desktop
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-alert

Expand Down Expand Up @@ -34,63 +34,63 @@
The `type` attribute of the `<auro-alert>` element supports the following values, `error`, `warning`, `information` and `success`.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/basic.html) -->
<!-- The below content is automatically added from ./../../apiExamples/basic.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
<!-- The below content is automatically added from ./../apiExamples/basic.html -->
<auro-alert>This is a default error with no error type specified.</auro-alert>
<!-- AURO-GENERATED-CONTENT:END -->
<br>
<!-- 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-alert type="error">Transaction failed.</auro-alert>
<!-- AURO-GENERATED-CONTENT:END -->
<br>
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/warning.html) -->
<!-- The below content is automatically added from ./../../apiExamples/warning.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/warning.html) -->
<!-- The below content is automatically added from ./../apiExamples/warning.html -->
<auro-alert type="warning">Warning. Session timed out. Look for a confirmation email to verify your transaction.</auro-alert>
<!-- AURO-GENERATED-CONTENT:END -->
<br>
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/information.html) -->
<!-- The below content is automatically added from ./../../apiExamples/information.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/information.html) -->
<!-- The below content is automatically added from ./../apiExamples/information.html -->
<auro-alert type="information">You are confirmed on Flight 20 to Aruba.</auro-alert>
<!-- AURO-GENERATED-CONTENT:END -->
<br>
<!-- 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-alert type="success">Your status with flight 20 to Aruba had been updated.</auro-alert>
DukeFerdinand marked this conversation as resolved.
Show resolved Hide resolved
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- 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-alert>This is a default error with no error type specified.</auro-alert>
```
<!-- AURO-GENERATED-CONTENT:END -->
<!-- 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-alert type="error">Transaction failed.</auro-alert>
```
<!-- AURO-GENERATED-CONTENT:END -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/warning.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/warning.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/warning.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/warning.html -->

```html
<auro-alert type="warning">Warning. Session timed out. Look for a confirmation email to verify your transaction.</auro-alert>
```
<!-- AURO-GENERATED-CONTENT:END -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/information.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/information.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/information.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/information.html -->

```html
<auro-alert type="information">You are confirmed on Flight 20 to Aruba.</auro-alert>
```
<!-- AURO-GENERATED-CONTENT:END -->
<!-- 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-alert type="success">Your status with flight 20 to Aruba had been updated.</auro-alert>
Expand All @@ -103,52 +103,52 @@ The `type` attribute of the `<auro-alert>` element supports the following values
The following `<auro-alert>` example illustrates using the `noIcon` attribute.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/error-no-icon.html) -->
<!-- The below content is automatically added from ./../../apiExamples/error-no-icon.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/error-no-icon.html) -->
<!-- The below content is automatically added from ./../apiExamples/error-no-icon.html -->
<auro-alert noIcon type="error">Transaction failed.</auro-alert>
<!-- AURO-GENERATED-CONTENT:END -->
<br>
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/information-no-icon.html) -->
<!-- The below content is automatically added from ./../../apiExamples/information-no-icon.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/information-no-icon.html) -->
<!-- The below content is automatically added from ./../apiExamples/information-no-icon.html -->
<auro-alert noIcon type="information">You are confirmed on Flight 20 to Aruba.</auro-alert>
<!-- AURO-GENERATED-CONTENT:END -->
<br>
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/warning-no-icon.html) -->
<!-- The below content is automatically added from ./../../apiExamples/warning-no-icon.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/warning-no-icon.html) -->
<!-- The below content is automatically added from ./../apiExamples/warning-no-icon.html -->
<auro-alert noIcon type="warning">Warning. Session timed out. Look for a confirmation email to verify your transaction.</auro-alert>
<!-- AURO-GENERATED-CONTENT:END -->
<br>
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/success-no-icon.html) -->
<!-- The below content is automatically added from ./../../apiExamples/success-no-icon.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/success-no-icon.html) -->
<!-- The below content is automatically added from ./../apiExamples/success-no-icon.html -->
<auro-alert noIcon type="success">Your status with flight 20 to Aruba had been updated.</auro-alert>
<!-- AURO-GENERATED-CONTENT:END -->
<br>
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/error-no-icon.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/error-no-icon.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/error-no-icon.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/error-no-icon.html -->

```html
<auro-alert noIcon type="error">Transaction failed.</auro-alert>
```
<!-- AURO-GENERATED-CONTENT:END -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/information-no-icon.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/information-no-icon.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/information-no-icon.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/information-no-icon.html -->

```html
<auro-alert noIcon type="information">You are confirmed on Flight 20 to Aruba.</auro-alert>
```
<!-- AURO-GENERATED-CONTENT:END -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/warning-no-icon.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/warning-no-icon.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/warning-no-icon.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/warning-no-icon.html -->

```html
<auro-alert noIcon type="warning">Warning. Session timed out. Look for a confirmation email to verify your transaction.</auro-alert>
```
<!-- AURO-GENERATED-CONTENT:END -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/success-no-icon.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/success-no-icon.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/success-no-icon.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/success-no-icon.html -->

```html
<auro-alert noIcon type="success">Your status with flight 20 to Aruba had been updated.</auro-alert>
Expand All @@ -161,15 +161,15 @@ The following `<auro-alert>` example illustrates using the `noIcon` attribute.
Use the `hidden` attribute to hide the `auro-alert` component from the user and screenreader.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/hidden.html) -->
<!-- The below content is automatically added from ./../../apiExamples/hidden.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/hidden.html) -->
<!-- The below content is automatically added from ./../apiExamples/hidden.html -->
<auro-alert hidden type="error">This content will be hidden visually and from screen readers.</auro-alert>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/hidden.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/hidden.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/hidden.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/hidden.html -->

```html
<auro-alert hidden type="error">This content will be hidden visually and from screen readers.</auro-alert>
Expand All @@ -182,15 +182,15 @@ Use the `hidden` attribute to hide the `auro-alert` component from the user and
Use the `hiddenVisually` attribute to visually hide the `auro-alert` component from the user only.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/hidden-visually.html) -->
<!-- The below content is automatically added from ./../../apiExamples/hidden-visually.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/hidden-visually.html) -->
<!-- The below content is automatically added from ./../apiExamples/hidden-visually.html -->
<auro-alert hiddenVisually type="error">This content will be hidden visually, but screen readers will still pick it up.</auro-alert>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/hidden-visually.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/hidden-visually.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/hidden-visually.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/hidden-visually.html -->

```html
<auro-alert hiddenVisually type="error">This content will be hidden visually, but screen readers will still pick it up.</auro-alert>
Expand All @@ -203,15 +203,15 @@ Use the `hiddenVisually` attribute to visually hide the `auro-alert` component f
Use the `hiddenAudible` attribute to hide the `auro-alert` component from the screenreader only.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/hidden-audible.html) -->
<!-- The below content is automatically added from ./../../apiExamples/hidden-audible.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/hidden-audible.html) -->
<!-- The below content is automatically added from ./../apiExamples/hidden-audible.html -->
<auro-alert hiddenAudible type="error">This content will be hidden from screen readers.</auro-alert>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/hidden-audible.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/hidden-audible.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/hidden-audible.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/hidden-audible.html -->

```html
<auro-alert hiddenAudible type="error">This content will be hidden from screen readers.</auro-alert>
Expand All @@ -223,8 +223,8 @@ Use the `hiddenAudible` attribute to hide the `auro-alert` component from the sc

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.scss) -->
<!-- The below code snippet is automatically added from ./../../src/tokens.scss -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/tokens.scss) -->
<!-- The below code snippet is automatically added from ./../src/tokens.scss -->

```scss
@import '../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
Expand Down
Loading