@aurodesignsystem-dev/auro-dialog 0.0.0-pr103.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 (18) hide show
  1. package/CHANGELOG.md +295 -0
  2. package/LICENSE +201 -0
  3. package/NOTICE +2 -0
  4. package/README.md +189 -0
  5. package/demo/api.html +64 -0
  6. package/demo/api.js +33 -0
  7. package/demo/api.md +803 -0
  8. package/demo/api.min.js +219 -0
  9. package/demo/auro-dialog.min.js +950 -0
  10. package/demo/index.html +63 -0
  11. package/demo/index.js +24 -0
  12. package/demo/index.md +151 -0
  13. package/demo/index.min.js +41 -0
  14. package/dist/auro-dialog-BNnIwNXB.js +128 -0
  15. package/dist/index.d.ts +230 -0
  16. package/dist/index.js +1 -0
  17. package/dist/registered.js +1 -0
  18. package/package.json +93 -0
package/demo/index.html ADDED
@@ -0,0 +1,63 @@
1
+ <!--
2
+ Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
3
+ See LICENSE in the project root for license information.
4
+
5
+ HTML in this document is standardized and NOT to be edited.
6
+ All demo code should be added/edited in ./demo/index.md
7
+
8
+ With the exception of adding custom elements if needed for the demo.
9
+
10
+ ----------------------- DO NOT EDIT -----------------------------
11
+
12
+ -->
13
+
14
+ <!DOCTYPE html>
15
+ <html lang="en">
16
+ <head>
17
+ <meta charset="UTF-8" />
18
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19
+ <title>Auro Web Component Demo | auro-dialog</title>
20
+
21
+ <!-- Prism.js Stylesheet -->
22
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
23
+
24
+ <!-- Legacy reference is still needed to support auro-dialog's use of legacy token values at this time -->
25
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
26
+
27
+ <!-- Design Token Alaska Theme -->
28
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
29
+
30
+ <!-- Webcore Stylesheet Alaska Theme -->
31
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
32
+
33
+ <!-- Demo Specific Styles -->
34
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
35
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
36
+ </head>
37
+ <body class="auro-markdown">
38
+ <main></main>
39
+
40
+ <script type="module">
41
+ import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
42
+ import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
43
+ fetch('./index.md')
44
+ .then((response) => response.text())
45
+ .then((text) => {
46
+ const rawHtml = marked.parse(text);
47
+ document.querySelector('main').innerHTML = rawHtml;
48
+ Prism.highlightAll();
49
+ });
50
+ </script>
51
+
52
+ <script type="module" data-demo-script="true">
53
+ import { initExamples } from './index.min.js';
54
+
55
+ initExamples();
56
+ </script>
57
+
58
+ <!-- If additional elements are needed for the demo, add them here. -->
59
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
60
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
61
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
62
+ </body>
63
+ </html>
package/demo/index.js ADDED
@@ -0,0 +1,24 @@
1
+ import { initBasicExample } from "../apiExamples/basic";
2
+ import { initCustomExample } from "../apiExamples/custom";
3
+
4
+ import { AuroDialog } from "../src/index";
5
+
6
+ AuroDialog.register();
7
+ AuroDialog.register("custom-dialog");
8
+
9
+ export function initExamples(initCount) {
10
+ // biome-ignore lint/style/noParameterAssign: legacy error handling
11
+ initCount = initCount || 0;
12
+
13
+ try {
14
+ initBasicExample();
15
+ initCustomExample();
16
+ } catch (_err) {
17
+ if (initCount <= 20) {
18
+ // setTimeout handles issue where content is sometimes loaded after the functions get called
19
+ setTimeout(() => {
20
+ initExamples(initCount + 1);
21
+ }, 100);
22
+ }
23
+ }
24
+ }
package/demo/index.md ADDED
@@ -0,0 +1,151 @@
1
+ <!--
2
+ THIS PAGE'S CONTENT SHOULD BE KEPT MINIMAL.
3
+ ONLY ADD EXAMPLES THAT ARE TRULY NECESSARY FOR THE INDEX PAGE — THE BASIC EXAMPLE IS USUALLY ENOUGH.
4
+ ALL OTHER EXAMPLES SHOULD GO IN THE API DOCUMENTATION.
5
+ -->
6
+
7
+ # Dialog
8
+
9
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
10
+ <!-- The below content is automatically added from ./../docs/partials/description.md -->
11
+ 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.
12
+
13
+ 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.
14
+
15
+ 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.
16
+ <!-- AURO-GENERATED-CONTENT:END -->
17
+
18
+ ## Use Cases
19
+
20
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/useCases.md) -->
21
+ <!-- The below content is automatically added from ./../docs/partials/useCases.md -->
22
+ The `<auro-dialog>` component should be used in situations where users may:
23
+
24
+ * Be prompted to take an action before doing anything else or going back
25
+ * Be prompted to view content with the option of closing it
26
+ <!-- AURO-GENERATED-CONTENT:END -->
27
+
28
+ ## Set Up
29
+
30
+ Triggering the dialog relies on functions being installed. See the following example code that is installed into this demo.
31
+
32
+ ```javascript
33
+ function toggleDialog(dialogID) {
34
+ const dialog = document.querySelector(dialogID);
35
+
36
+ if (dialog.hasAttribute('open')) {
37
+ dialog.removeAttribute('open');
38
+ } else {
39
+ dialog.setAttribute('open', true);
40
+ }
41
+ }
42
+ ```
43
+
44
+ Once the JavaScript is added to the scope of the experience, the next part is adding a trigger. In this example, the button component will toggle a dialog with the ID of `#demo1`.
45
+
46
+ ```javascript
47
+ <auro-button onClick="toggleDialog('#demo1')">Open Default Dialog</auro-button>
48
+ ```
49
+
50
+ ## The Structure
51
+
52
+ The structure of the dialog itself consists of three slots. The `header`, `content` and `footer` slots. See the scaffolding example below for adding content to the component.
53
+
54
+ ```javascript
55
+ <auro-dialog id="[unique ID]">
56
+ <span slot="header">[header content]</span>
57
+ <span slot="content">
58
+ [body content]
59
+ </span>
60
+ <span slot="footer">
61
+ [footer content]
62
+ </span>
63
+ </auro-dialog>
64
+ ```
65
+
66
+ It should be noted that the `footer` slot is reserved for the placement of action buttons.
67
+
68
+ ## Example(s)
69
+
70
+ ### Basic
71
+
72
+ The dialog open state is controlled via the `open` attribute, or by programmatically setting the `open` property to `true`.
73
+ You can see in the example below under the "See Code" section that we are controlling our dialogs by adding and removing the `open` attribute.
74
+
75
+ <div class="exampleWrapper">
76
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
77
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
78
+ <div>
79
+ <auro-button id="openBasic">Open default dialog</auro-button>
80
+ </div>
81
+ <auro-dialog id="defaultDialog">
82
+ <span slot="header">Default Dialog</span>
83
+ <div slot="content">
84
+ <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
85
+ <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
86
+ <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
87
+ <ul>
88
+ <li>Caerphilly croque monsieur fondue</li>
89
+ <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
90
+ <li>Cheddar cheese and biscuits chalk and cheese</li>
91
+ <li>Camembert de normandie stinking bishop bavarian bergkase</li>
92
+ </ul>
93
+ </div>
94
+ <div slot="footer">
95
+ <auro-button secondary id="closeBasic">Close</auro-button>
96
+ </div>
97
+ </auro-dialog>
98
+ <!-- AURO-GENERATED-CONTENT:END -->
99
+ </div>
100
+ <auro-accordion alignRight>
101
+ <span slot="trigger">See code</span>
102
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
103
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
104
+
105
+ ```html
106
+ <div>
107
+ <auro-button id="openBasic">Open default dialog</auro-button>
108
+ </div>
109
+ <auro-dialog id="defaultDialog">
110
+ <span slot="header">Default Dialog</span>
111
+ <div slot="content">
112
+ <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
113
+ <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
114
+ <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
115
+ <ul>
116
+ <li>Caerphilly croque monsieur fondue</li>
117
+ <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
118
+ <li>Cheddar cheese and biscuits chalk and cheese</li>
119
+ <li>Camembert de normandie stinking bishop bavarian bergkase</li>
120
+ </ul>
121
+ </div>
122
+ <div slot="footer">
123
+ <auro-button secondary id="closeBasic">Close</auro-button>
124
+ </div>
125
+ </auro-dialog>
126
+ ```
127
+ <!-- AURO-GENERATED-CONTENT:END -->
128
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.js) -->
129
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic.js -->
130
+
131
+ ```js
132
+ export function initBasicExample() {
133
+ const buttons = [
134
+ document.querySelector("#openBasic"),
135
+ document.querySelector("#closeBasic"),
136
+ ];
137
+ const dialog = document.querySelector("#defaultDialog");
138
+
139
+ buttons.forEach((button) => {
140
+ button.addEventListener("click", () => {
141
+ if (dialog.hasAttribute("open")) {
142
+ dialog.removeAttribute("open");
143
+ } else {
144
+ dialog.setAttribute("open", true);
145
+ }
146
+ });
147
+ });
148
+ }
149
+ ```
150
+ <!-- AURO-GENERATED-CONTENT:END -->
151
+ </auro-accordion>
package/demo/index.min.js ADDED
@@ -0,0 +1,41 @@
1
+ import { A as AuroDialog, i as initBasicExample } from './auro-dialog.min.js';
2
+
3
+ function initCustomExample() {
4
+ const buttons = [
5
+ document.querySelector("#openCustom"),
6
+ document.querySelector("#closeCustom"),
7
+ ];
8
+ const dialog = document.querySelector("#defaultDialog");
9
+
10
+ buttons.forEach((button) => {
11
+ button.addEventListener("click", () => {
12
+ if (dialog.hasAttribute("open")) {
13
+ dialog.removeAttribute("open");
14
+ } else {
15
+ dialog.setAttribute("open", true);
16
+ }
17
+ });
18
+ });
19
+ }
20
+
21
+ AuroDialog.register();
22
+ AuroDialog.register("custom-dialog");
23
+
24
+ function initExamples(initCount) {
25
+ // biome-ignore lint/style/noParameterAssign: legacy error handling
26
+ initCount = initCount || 0;
27
+
28
+ try {
29
+ initBasicExample();
30
+ initCustomExample();
31
+ } catch (_err) {
32
+ if (initCount <= 20) {
33
+ // setTimeout handles issue where content is sometimes loaded after the functions get called
34
+ setTimeout(() => {
35
+ initExamples(initCount + 1);
36
+ }, 100);
37
+ }
38
+ }
39
+ }
40
+
41
+ export { initExamples };