Skip to content

Commit

Permalink
feat: update auro-library to 3.0.1
Browse files Browse the repository at this point in the history
  • Loading branch information
@DukeFerdinand
DukeFerdinand committed Nov 11, 2024
1 parent f767246 commit cc9ae8d
Show file tree
Hide file tree
Showing 7 changed files with 134 additions and 84 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,14 +19,14 @@ The following sections are editable by making changes to the following files:

# Toast

<!-- 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-toast>` element is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) for the purpose of sending an unobtrusive toast (or push) notification to your visitors.

The `<auro-toaster>` wrapper-element is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) for the purpose of managing a series of notifications at the bottom of the screen using the `<auro-toast>` element.
<!-- 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 @@ -74,8 +74,8 @@ import "@aurodesignsystem/auro-toast";

<!-- 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
<!-- icon variant -->
Expand Down Expand Up @@ -111,15 +111,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-toast@2.0.1/dist/auro-toast__bundled.js" type="module"></script>
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-toast@2.2.0/dist/auro-toast__bundled.js" type="module"></script>
```

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

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

* Sending an error push notification
Expand All @@ -131,8 +131,8 @@ The `<auro-toast>` use cases include:

### Default auro-toast

<!-- 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
<!-- icon variant -->
Expand Down
44 changes: 22 additions & 22 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-toast

Expand Down Expand Up @@ -29,8 +29,8 @@ The auro-toast element provides users a way to display short, temporary messages
State of the push notification which determines if it is `visible`.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/visible.html) -->
<!-- The below content is automatically added from ./../../apiExamples/visible.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/visible.html) -->
<!-- The below content is automatically added from ./../apiExamples/visible.html -->
<auro-button id="visibleToastBtn">
Set visible to true
</auro-button>
Expand All @@ -41,8 +41,8 @@ State of the push notification which determines if it is `visible`.
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/visible.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/visible.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/visible.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/visible.html -->

```html
<auro-button id="visibleToastBtn">
Expand All @@ -53,8 +53,8 @@ State of the push notification which determines if it is `visible`.
</auro-toast>
```
<!-- AURO-GENERATED-CONTENT:END -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/showToast.js) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/showToast.js -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/showToast.js) -->
<!-- The below code snippet is automatically added from ./../apiExamples/showToast.js -->

```js
export function showToast(toastID) {
Expand All @@ -73,8 +73,8 @@ export function showToast(toastID) {
What the component will render visually based on which variant value is set; currently supports `error`, `success`.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/variant.html) -->
<!-- The below content is automatically added from ./../../apiExamples/variant.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/variant.html) -->
<!-- The below content is automatically added from ./../apiExamples/variant.html -->
<auro-button id="defaultVariantBtn">
Show default toast
</auro-button>
Expand All @@ -97,8 +97,8 @@ What the component will render visually based on which variant value is set; cur
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/variant.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/variant.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/variant.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/variant.html -->

```html
<auro-button id="defaultVariantBtn">
Expand All @@ -121,8 +121,8 @@ What the component will render visually based on which variant value is set; cur
</auro-toast>
```
<!-- AURO-GENERATED-CONTENT:END -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/showToast.js) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/showToast.js -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/showToast.js) -->
<!-- The below code snippet is automatically added from ./../apiExamples/showToast.js -->

```js
export function showToast(toastID) {
Expand All @@ -141,24 +141,24 @@ export function showToast(toastID) {
Using the `noIcon` attribute will set no icon to be visible in the notification.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/noIcon.html) -->
<!-- The below content is automatically added from ./../../apiExamples/noIcon.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/noIcon.html) -->
<!-- The below content is automatically added from ./../apiExamples/noIcon.html -->
<auro-button id="noIconBtn"> Show toast with no icon </auro-button>
<auro-toast id="noIcon" noIcon style="display: block; margin: 0.5rem 0;"> Default toast </auro-toast>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/noIcon.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/noIcon.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/noIcon.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/noIcon.html -->

```html
<auro-button id="noIconBtn"> Show toast with no icon </auro-button>
<auro-toast id="noIcon" noIcon style="display: block; margin: 0.5rem 0;"> Default toast </auro-toast>
```
<!-- AURO-GENERATED-CONTENT:END -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/showToast.js) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/showToast.js -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/showToast.js) -->
<!-- The below code snippet is automatically added from ./../apiExamples/showToast.js -->

```js
export function showToast(toastID) {
Expand All @@ -176,8 +176,8 @@ export function showToast(toastID) {

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
43 changes: 21 additions & 22 deletions demo/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,17 @@ This file is generated based on a template fetched from `./docs/partials/index.m

# Toast

<!-- AURO-GENERATED-CONTENT:START (FILE:src=./description.md) -->
<!-- The below content is automatically added from ./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-toast>` element is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) for the purpose of sending an unobtrusive toast (or push) notification to your visitors.

The `<auro-toaster>` wrapper-element is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) for the purpose of managing a series of notifications at the bottom of the screen using the `<auro-toast>` element.
<!-- AURO-GENERATED-CONTENT:END -->

## Component use cases

<!-- AURO-GENERATED-CONTENT:START (FILE:src=./useCases.md) -->
<!-- The below content is automatically added from ./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-toast>` use cases include:

* Sending an error push notification
Expand Down Expand Up @@ -44,8 +44,8 @@ The following demo illustrates the `default` notification using the `<auro-toast
Also notice in this demo the use of the `noIcon` attribute. this attribute removes the use of the default `information` icon.

<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 -->
<!-- icon variant -->
<auro-button id="basicToastBtn">
Show default notification
Expand All @@ -64,8 +64,8 @@ Also notice in this demo the use of the `noIcon` attribute. this attribute remov
</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
<!-- icon variant -->
Expand Down Expand Up @@ -95,8 +95,8 @@ Aside from the `default` notification, the `<auro-toast>` supports multiple vari
The error push notification using the `<auro-toast>` element will **NOT** automatically dismiss itself. The user **MUST** dismiss the notification manually. When the notification is dismissed, it is not removed from the DOM. The `visible` property is set to `false`, which hides the notification from the UI.

<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-button id="errorToastBtn">Show error notification</auro-button>
<auro-toast style="display: block; margin: 0.5rem 0;" variant="error" id="errorToast"> Unable to add lap infant. Please try again </auro-toast>
<auro-button id="errorToast-noIconBtn">Show error notification with no icon</auro-button>
Expand All @@ -105,8 +105,8 @@ The error push notification using the `<auro-toast>` element will **NOT** automa
</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-button id="errorToastBtn">Show error notification</auro-button>
Expand All @@ -122,8 +122,8 @@ The error push notification using the `<auro-toast>` element will **NOT** automa
The success push notification using the `<auro-toast>` element will automatically dismiss after five seconds if the user does not manually dismiss it. In this case, the notification is not removed from the DOM. The `visible` property is set to `false`, which hides the notification from the UI.

<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-button id="successToastBtn">Show success toast</auro-button>
<auro-toast style="display: block; margin: 0.5rem 0;" variant="success" id="successToast"> Successfully added lap infant </auro-toast>
<auro-button id="successToast-noIconBtn">Show success toast with no icon</auro-button>
Expand All @@ -132,8 +132,8 @@ The success push notification using the `<auro-toast>` element will automaticall
</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-button id="successToastBtn">Show success toast</auro-button>
Expand All @@ -149,8 +149,8 @@ The success push notification using the `<auro-toast>` element will automaticall
The multi-notification use case requires the use of the `<auro-toaster>` component.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/multipleToasts.html) -->
<!-- The below content is automatically added from ./../../apiExamples/multipleToasts.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/multipleToasts.html) -->
<!-- The below content is automatically added from ./../apiExamples/multipleToasts.html -->
<auro-button id="multiToastBtn-default">Show default toast</auro-button>
<auro-button id="multiToastBtn-error">Show error toast</auro-button>
<auro-button id="multiToastBtn-success">Show success toast</auro-button>
Expand All @@ -163,8 +163,8 @@ The multi-notification use case requires the use of the `<auro-toaster>` compone
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/multipleToasts.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/multipleToasts.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/multipleToasts.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/multipleToasts.html -->

```html
<auro-button id="multiToastBtn-default">Show default toast</auro-button>
Expand Down Expand Up @@ -226,8 +226,7 @@ The following example is for the HTML template.
:id="toast.id"
:visible="toast.visible"
:variant="toast.variant"
@on-toast-close="handleOnToastClose">
{{ toast.message }}
@on-toast-close="handleOnToastClose">
</auro-toast>
<auro-toaster>
```
Expand Down
Loading

0 comments on commit cc9ae8d

Please sign in to comment.