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 #36

Merged
merged 2 commits into from
Nov 14, 2024
Merged

feat: update auro-library to 3.0.1 #36

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
16fddb7
feat: update auro-library to 3.0.1
DukeFerdinand Nov 9, 2024
8190c40
perf: update library to 3.0.2
sun-mota Nov 13, 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,16 +19,16 @@ The following sections are editable by making changes to the following files:

# Dialog

<!-- 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-dialog>` component is an intrusive interactive component, not passive. The component is best used when there is a requirement the user be made aware of the content being shown, moving focus from the main content to the dialog content.

The component also supports a modal (blocking) state where the user must interact with the content of the component in order to continue. Passive dismissal of the content is not allowed. Users of this state must add a trigger for the user to move beyond this content.

Auro holds the opinions of the [Nielsen Norman Group](https://www.nngroup.com/articles/modal-nonmodal-dialog/) on dialog and modal use to be true.
<!-- 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 -->
**Important Notice**: This component no longer lives within the `auro-interruption` repository, as that is now being deprecated. `<auro-dialog>` is now a standalone component and users will be required to install it seperately. See the [Install Page](https://auro.alaskaair.com/components/auro/dialog/install) for instructions on how to install the component.
<!-- AURO-GENERATED-CONTENT:END -->

Expand Down Expand Up @@ -76,8 +76,8 @@ import "@aurodesignsystem/auro-dialog";

<!-- 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
<div>
Expand Down Expand Up @@ -119,15 +119,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/[email protected]/dist/tokens/CSSCustomProperties.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/[email protected]/dist/bundled/essentials.css" />
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-dialog@2.0.1/dist/auro-dialog__bundled.js" type="module"></script>
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-dialog@2.2.1/dist/auro-dialog__bundled.js" type="module"></script>
```

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

## auro-dialog 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-dialog>` component should be used in situations where users may:

* Be prompted to take an action before doing anything else or going back
Expand All @@ -138,8 +138,8 @@ The `<auro-dialog>` component should be used in situations where users may:

### Default auro-dialog

<!-- 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
<div>
Expand Down
64 changes: 32 additions & 32 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-dialog

Expand Down Expand Up @@ -51,8 +51,8 @@
### Basic

<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 -->
<div>
<auro-button id="openBasic">Open default dialog</auro-button>
</div>
Expand All @@ -77,8 +77,8 @@
</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
<div>
Expand Down Expand Up @@ -112,8 +112,8 @@ The auro-dialog supports three different sizes. A default dialog is equal to the
The size attribute effects the `width` of the desktop dialog. Its `height` is dictated by the content with a max height of `80%`. On mobile, the `size` attribute effects the `maximum height` the dialog will use of the device screen. Its width will be 100%.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/sizeOptions.html) -->
<!-- The below content is automatically added from ./../../apiExamples/sizeOptions.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/sizeOptions.html) -->
<!-- The below content is automatically added from ./../apiExamples/sizeOptions.html -->
<div>
<auro-button id="openDefaultSize">Open default dialog</auro-button>
<auro-button id="openMediumSize">Open medium dialog</auro-button>
Expand Down Expand Up @@ -174,8 +174,8 @@ The size attribute effects the `width` of the desktop dialog. Its `height` is di
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/sizeOptions.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/sizeOptions.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/sizeOptions.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/sizeOptions.html -->

```html
<div>
Expand Down Expand Up @@ -245,8 +245,8 @@ The auro-dialog supports a modal dialog state that will lock a user into interac
When using this state, the modal dialog must include a button action to dismiss the modal dialog as the closing icon will not be available and the user will not be able to click outside the `modal` dialog to dismiss.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/modal.html) -->
<!-- The below content is automatically added from ./../../apiExamples/modal.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/modal.html) -->
<!-- The below content is automatically added from ./../apiExamples/modal.html -->
<div>
<auro-button id="openDefaultModal">Open default modal</auro-button>
<auro-button id="openMediumModal">Open medium modal</auro-button>
Expand Down Expand Up @@ -313,8 +313,8 @@ When using this state, the modal dialog must include a button action to dismiss
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/modal.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/modal.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/modal.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/modal.html -->

```html
<div>
Expand Down Expand Up @@ -390,8 +390,8 @@ For use case where the size of the dialog on desktop should not influence the si
The use of these combinations will set the first value to the dialog for a desktop experience. The second value will set the mobile experience to be up to 90% of the screen depending on the length of the content.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/decoupled.html) -->
<!-- The below content is automatically added from ./../../apiExamples/decoupled.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/decoupled.html) -->
<!-- The below content is automatically added from ./../apiExamples/decoupled.html -->
<div>
<auro-button id="openSmLg">Open [sm lg] dialog</auro-button>
<auro-button id="openMdLg">Open [md lg] dialog</auro-button>
Expand Down Expand Up @@ -440,8 +440,8 @@ The use of these combinations will set the first value to the dialog for a deskt
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/decoupled.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/decoupled.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/decoupled.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/decoupled.html -->

```html
<div>
Expand Down Expand Up @@ -497,8 +497,8 @@ The use of these combinations will set the first value to the dialog for a deskt
This is a use case where there is a popover and combobox component inside the dialog component, creating a stack of layered components.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/popoverAndDropdown.html) -->
<!-- The below content is automatically added from ./../../apiExamples/popoverAndDropdown.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/popoverAndDropdown.html) -->
<!-- The below content is automatically added from ./../apiExamples/popoverAndDropdown.html -->
<div>
<auro-button id="openPopAndDrop">Open dialog with popover</auro-button>
</div>
Expand Down Expand Up @@ -548,8 +548,8 @@ This is a use case where there is a popover and combobox component inside the di
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/popoverAndDropdown.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/popoverAndDropdown.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/popoverAndDropdown.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/popoverAndDropdown.html -->

```html
<div>
Expand Down Expand Up @@ -624,8 +624,8 @@ import '@aurodesignsystem/auro-dialog@/dist/style-unformatted.css'
Within the scope of the auro-dialog there is `aria-labelledby="dialog-header"`. To make proper use of this, in an unformatted dialog, the developer is required to add `id="dialog-header"` to the content header within the dialog content.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/accessibility.html) -->
<!-- The below content is automatically added from ./../../apiExamples/accessibility.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/accessibility.html) -->
<!-- The below content is automatically added from ./../apiExamples/accessibility.html -->
<div>
<auro-button id="openAccessibility">Unformatted Medium Dialog</auro-button>
</div>
Expand All @@ -642,8 +642,8 @@ Within the scope of the auro-dialog there is `aria-labelledby="dialog-header"`.
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/accessibility.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/accessibility.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/accessibility.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/accessibility.html -->

```html
<div>
Expand All @@ -667,8 +667,8 @@ Within the scope of the auro-dialog there is `aria-labelledby="dialog-header"`.
When using the dialog with the `unformatted` attribute, some may want to adjust the positioning of the X close button. This can be addressed using the CSS `::part` CSS pseudo-element API.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/editCloseButton.html) -->
<!-- The below content is automatically added from ./../../apiExamples/editCloseButton.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/editCloseButton.html) -->
<!-- The below content is automatically added from ./../apiExamples/editCloseButton.html -->
<div>
<auro-button id="openEditDialog">Unformatted w/custom close button</auro-button>
</div>
Expand All @@ -692,8 +692,8 @@ When using the dialog with the `unformatted` attribute, some may want to adjust
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/editCloseButton.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/editCloseButton.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/editCloseButton.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/editCloseButton.html -->

```html
<div>
Expand Down Expand Up @@ -723,8 +723,8 @@ When using the dialog with the `unformatted` attribute, some may want to adjust

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