@aurodesignsystem/auro-dialog 2.2.0 → 2.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/README.md +12 -12
  3. package/demo/api.md +32 -32
  4. package/demo/api.min.js +1197 -54
  5. package/demo/index.md +14 -14
  6. package/demo/index.min.js +1192 -49
  7. package/dist/auro-dialog__bundled.js +260 -10
  8. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,24 @@
1
1
  # Semantic Release Automated Changelog
2
2
 
3
+ # [2.3.0](https://github.com/AlaskaAirlines/auro-dialog/compare/v2.2.1...v2.3.0) (2024-11-14)
4
+
5
+
6
+ ### Features
7
+
8
+ * update auro-library to 3.0.1 ([77e5cf6](https://github.com/AlaskaAirlines/auro-dialog/commit/77e5cf63983c9884ee89329b06e4b158f87dcdc1))
9
+
10
+
11
+ ### Performance Improvements
12
+
13
+ * update library to 3.0.2 ([99331ae](https://github.com/AlaskaAirlines/auro-dialog/commit/99331aef7fef6d1480cddf47badb4c9d91f26f2e))
14
+
15
+ ## [2.2.1](https://github.com/AlaskaAirlines/auro-dialog/compare/v2.2.0...v2.2.1) (2024-11-05)
16
+
17
+
18
+ ### Performance Improvements
19
+
20
+ * fix unresolved dependency error [#33](https://github.com/AlaskaAirlines/auro-dialog/issues/33) ([48440f3](https://github.com/AlaskaAirlines/auro-dialog/commit/48440f3f95cfd1f5af41d3cdd88a28d00dd5a825))
21
+
3
22
  # [2.2.0](https://github.com/AlaskaAirlines/auro-dialog/compare/v2.1.0...v2.2.0) (2024-11-01)
4
23
 
5
24
 
package/README.md CHANGED
@@ -4,7 +4,7 @@ The README.md file is a compiled document. No edits should be made directly to t
4
4
  README.md is created by running `npm run build:docs`.
5
5
 
6
6
  This file is generated based on a template fetched from
7
- `https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/README.md`
7
+ `https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/README_updated_paths.md`
8
8
  and copied to `./componentDocs/README.md` each time the the docs are compiled.
9
9
 
10
10
  The following sections are editable by making changes to the following files:
@@ -19,16 +19,16 @@ The following sections are editable by making changes to the following files:
19
19
 
20
20
  # Dialog
21
21
 
22
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
23
- <!-- The below content is automatically added from ./../docs/partials/description.md -->
22
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
23
+ <!-- The below content is automatically added from ./docs/partials/description.md -->
24
24
  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.
25
25
 
26
26
  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.
27
27
 
28
28
  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.
29
29
  <!-- AURO-GENERATED-CONTENT:END -->
30
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/readmeAddlInfo.md) -->
31
- <!-- The below content is automatically added from ./../docs/partials/readmeAddlInfo.md -->
30
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
31
+ <!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
32
32
  **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.
33
33
  <!-- AURO-GENERATED-CONTENT:END -->
34
34
 
@@ -76,8 +76,8 @@ import "@aurodesignsystem/auro-dialog";
76
76
 
77
77
  <!-- AURO-GENERATED-CONTENT:END -->
78
78
  **Reference component in HTML**
79
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
80
- <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
79
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
80
+ <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
81
81
 
82
82
  ```html
83
83
  <div>
@@ -119,15 +119,15 @@ In cases where the project is not able to process JS assets, there are pre-proce
119
119
  ```html
120
120
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.10.0/dist/tokens/CSSCustomProperties.css" />
121
121
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.1/dist/bundled/essentials.css" />
122
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-dialog@2.0.1/dist/auro-dialog__bundled.js" type="module"></script>
122
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-dialog@2.3.0/dist/auro-dialog__bundled.js" type="module"></script>
123
123
  ```
124
124
 
125
125
  <!-- AURO-GENERATED-CONTENT:END -->
126
126
 
127
127
  ## auro-dialog use cases
128
128
 
129
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/useCases.md) -->
130
- <!-- The below content is automatically added from ./../docs/partials/useCases.md -->
129
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
130
+ <!-- The below content is automatically added from ./docs/partials/useCases.md -->
131
131
  The `<auro-dialog>` component should be used in situations where users may:
132
132
 
133
133
  * Be prompted to take an action before doing anything else or going back
@@ -138,8 +138,8 @@ The `<auro-dialog>` component should be used in situations where users may:
138
138
 
139
139
  ### Default auro-dialog
140
140
 
141
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
142
- <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
141
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
142
+ <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
143
143
 
144
144
  ```html
145
145
  <div>
package/demo/api.md CHANGED
@@ -1,5 +1,5 @@
1
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../api.md) -->
2
- <!-- The below content is automatically added from ./../api.md -->
1
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/api.md) -->
2
+ <!-- The below content is automatically added from ./../docs/api.md -->
3
3
 
4
4
  # auro-dialog
5
5
 
@@ -51,8 +51,8 @@
51
51
  ### Basic
52
52
 
53
53
  <div class="exampleWrapper">
54
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/basic.html) -->
55
- <!-- The below content is automatically added from ./../../apiExamples/basic.html -->
54
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
55
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
56
56
  <div>
57
57
  <auro-button id="openBasic">Open default dialog</auro-button>
58
58
  </div>
@@ -77,8 +77,8 @@
77
77
  </div>
78
78
  <auro-accordion alignRight>
79
79
  <span slot="trigger">See code</span>
80
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/basic.html) -->
81
- <!-- The below code snippet is automatically added from ./../../apiExamples/basic.html -->
80
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
81
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
82
82
 
83
83
  ```html
84
84
  <div>
@@ -112,8 +112,8 @@ The auro-dialog supports three different sizes. A default dialog is equal to the
112
112
  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%.
113
113
 
114
114
  <div class="exampleWrapper">
115
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/sizeOptions.html) -->
116
- <!-- The below content is automatically added from ./../../apiExamples/sizeOptions.html -->
115
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/sizeOptions.html) -->
116
+ <!-- The below content is automatically added from ./../apiExamples/sizeOptions.html -->
117
117
  <div>
118
118
  <auro-button id="openDefaultSize">Open default dialog</auro-button>
119
119
  <auro-button id="openMediumSize">Open medium dialog</auro-button>
@@ -174,8 +174,8 @@ The size attribute effects the `width` of the desktop dialog. Its `height` is di
174
174
  </div>
175
175
  <auro-accordion alignRight>
176
176
  <span slot="trigger">See code</span>
177
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/sizeOptions.html) -->
178
- <!-- The below code snippet is automatically added from ./../../apiExamples/sizeOptions.html -->
177
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/sizeOptions.html) -->
178
+ <!-- The below code snippet is automatically added from ./../apiExamples/sizeOptions.html -->
179
179
 
180
180
  ```html
181
181
  <div>
@@ -245,8 +245,8 @@ The auro-dialog supports a modal dialog state that will lock a user into interac
245
245
  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.
246
246
 
247
247
  <div class="exampleWrapper">
248
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/modal.html) -->
249
- <!-- The below content is automatically added from ./../../apiExamples/modal.html -->
248
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/modal.html) -->
249
+ <!-- The below content is automatically added from ./../apiExamples/modal.html -->
250
250
  <div>
251
251
  <auro-button id="openDefaultModal">Open default modal</auro-button>
252
252
  <auro-button id="openMediumModal">Open medium modal</auro-button>
@@ -313,8 +313,8 @@ When using this state, the modal dialog must include a button action to dismiss
313
313
  </div>
314
314
  <auro-accordion alignRight>
315
315
  <span slot="trigger">See code</span>
316
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/modal.html) -->
317
- <!-- The below code snippet is automatically added from ./../../apiExamples/modal.html -->
316
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/modal.html) -->
317
+ <!-- The below code snippet is automatically added from ./../apiExamples/modal.html -->
318
318
 
319
319
  ```html
320
320
  <div>
@@ -390,8 +390,8 @@ For use case where the size of the dialog on desktop should not influence the si
390
390
  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.
391
391
 
392
392
  <div class="exampleWrapper">
393
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/decoupled.html) -->
394
- <!-- The below content is automatically added from ./../../apiExamples/decoupled.html -->
393
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/decoupled.html) -->
394
+ <!-- The below content is automatically added from ./../apiExamples/decoupled.html -->
395
395
  <div>
396
396
  <auro-button id="openSmLg">Open [sm lg] dialog</auro-button>
397
397
  <auro-button id="openMdLg">Open [md lg] dialog</auro-button>
@@ -440,8 +440,8 @@ The use of these combinations will set the first value to the dialog for a deskt
440
440
  </div>
441
441
  <auro-accordion alignRight>
442
442
  <span slot="trigger">See code</span>
443
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/decoupled.html) -->
444
- <!-- The below code snippet is automatically added from ./../../apiExamples/decoupled.html -->
443
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/decoupled.html) -->
444
+ <!-- The below code snippet is automatically added from ./../apiExamples/decoupled.html -->
445
445
 
446
446
  ```html
447
447
  <div>
@@ -497,8 +497,8 @@ The use of these combinations will set the first value to the dialog for a deskt
497
497
  This is a use case where there is a popover and combobox component inside the dialog component, creating a stack of layered components.
498
498
 
499
499
  <div class="exampleWrapper">
500
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/popoverAndDropdown.html) -->
501
- <!-- The below content is automatically added from ./../../apiExamples/popoverAndDropdown.html -->
500
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/popoverAndDropdown.html) -->
501
+ <!-- The below content is automatically added from ./../apiExamples/popoverAndDropdown.html -->
502
502
  <div>
503
503
  <auro-button id="openPopAndDrop">Open dialog with popover</auro-button>
504
504
  </div>
@@ -548,8 +548,8 @@ This is a use case where there is a popover and combobox component inside the di
548
548
  </div>
549
549
  <auro-accordion alignRight>
550
550
  <span slot="trigger">See code</span>
551
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/popoverAndDropdown.html) -->
552
- <!-- The below code snippet is automatically added from ./../../apiExamples/popoverAndDropdown.html -->
551
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/popoverAndDropdown.html) -->
552
+ <!-- The below code snippet is automatically added from ./../apiExamples/popoverAndDropdown.html -->
553
553
 
554
554
  ```html
555
555
  <div>
@@ -624,8 +624,8 @@ import '@aurodesignsystem/auro-dialog@/dist/style-unformatted.css'
624
624
  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.
625
625
 
626
626
  <div class="exampleWrapper">
627
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/accessibility.html) -->
628
- <!-- The below content is automatically added from ./../../apiExamples/accessibility.html -->
627
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/accessibility.html) -->
628
+ <!-- The below content is automatically added from ./../apiExamples/accessibility.html -->
629
629
  <div>
630
630
  <auro-button id="openAccessibility">Unformatted Medium Dialog</auro-button>
631
631
  </div>
@@ -642,8 +642,8 @@ Within the scope of the auro-dialog there is `aria-labelledby="dialog-header"`.
642
642
  </div>
643
643
  <auro-accordion alignRight>
644
644
  <span slot="trigger">See code</span>
645
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/accessibility.html) -->
646
- <!-- The below code snippet is automatically added from ./../../apiExamples/accessibility.html -->
645
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/accessibility.html) -->
646
+ <!-- The below code snippet is automatically added from ./../apiExamples/accessibility.html -->
647
647
 
648
648
  ```html
649
649
  <div>
@@ -667,8 +667,8 @@ Within the scope of the auro-dialog there is `aria-labelledby="dialog-header"`.
667
667
  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.
668
668
 
669
669
  <div class="exampleWrapper">
670
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/editCloseButton.html) -->
671
- <!-- The below content is automatically added from ./../../apiExamples/editCloseButton.html -->
670
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/editCloseButton.html) -->
671
+ <!-- The below content is automatically added from ./../apiExamples/editCloseButton.html -->
672
672
  <div>
673
673
  <auro-button id="openEditDialog">Unformatted w/custom close button</auro-button>
674
674
  </div>
@@ -692,8 +692,8 @@ When using the dialog with the `unformatted` attribute, some may want to adjust
692
692
  </div>
693
693
  <auro-accordion alignRight>
694
694
  <span slot="trigger">See code</span>
695
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/editCloseButton.html) -->
696
- <!-- The below code snippet is automatically added from ./../../apiExamples/editCloseButton.html -->
695
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/editCloseButton.html) -->
696
+ <!-- The below code snippet is automatically added from ./../apiExamples/editCloseButton.html -->
697
697
 
698
698
  ```html
699
699
  <div>
@@ -723,8 +723,8 @@ When using the dialog with the `unformatted` attribute, some may want to adjust
723
723
 
724
724
  The component may be restyled using the following code sample and changing the values of the following token(s).
725
725
 
726
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../src/tokens.scss) -->
727
- <!-- The below code snippet is automatically added from ./../../src/tokens.scss -->
726
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/tokens.scss) -->
727
+ <!-- The below code snippet is automatically added from ./../src/tokens.scss -->
728
728
 
729
729
  ```scss
730
730
  @import "./../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";