@aurodesignsystem-dev/auro-popover 0.0.0-pr102.3 → 0.0.0-pr106.1

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 (37) hide show
  1. package/CHANGELOG.md +418 -0
  2. package/NOTICE +2 -0
  3. package/README.md +25 -59
  4. package/demo/api.html +63 -0
  5. package/demo/api.js +19 -0
  6. package/demo/api.md +63 -2
  7. package/demo/api.min.js +19 -383
  8. package/demo/auro-popover.min.js +2177 -0
  9. package/demo/index.html +57 -0
  10. package/demo/index.js +4 -0
  11. package/demo/index.md +1 -1
  12. package/demo/index.min.js +2 -386
  13. package/dist/auro-popover-CqCc1tbB.js +13 -0
  14. package/dist/index.d.ts +17 -0
  15. package/dist/index.js +1 -0
  16. package/dist/registered.js +1 -0
  17. package/package.json +41 -129
  18. package/.husky/commit-msg +0 -1
  19. package/.husky/pre-commit +0 -1
  20. package/dist/auro-popover.d.ts +0 -80
  21. package/dist/auro-popover.d.ts.map +0 -1
  22. package/dist/auro-popover__bundled.js +0 -385
  23. package/dist/color-css.d.ts +0 -3
  24. package/dist/color-css.d.ts.map +0 -1
  25. package/dist/layoverVersion.d.ts +0 -3
  26. package/dist/layoverVersion.d.ts.map +0 -1
  27. package/dist/style-css.d.ts +0 -3
  28. package/dist/style-css.d.ts.map +0 -1
  29. package/dist/tokens-css.d.ts +0 -3
  30. package/dist/tokens-css.d.ts.map +0 -1
  31. package/index.js +0 -3
  32. package/packageScripts/postinstall.mjs +0 -28
  33. package/src/auro-popover.js +0 -165
  34. package/src/color-css.js +0 -2
  35. package/src/layoverVersion.js +0 -1
  36. package/src/style-css.js +0 -2
  37. package/src/tokens-css.js +0 -2
package/demo/api.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/api.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-popover</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-popover'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('./api.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
+ <!-- If additional elements are needed for the demo, add them here. -->
53
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
54
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-alert@latest/dist/auro-alert__bundled.js" type="module"></script>
55
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
56
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/dist/auro-hyperlink__bundled.js" type="module"></script>
57
+
58
+ <script type="module" data-demo-script="true">
59
+ import { initExamples } from "./api.min.js"
60
+ initExamples();
61
+ </script>
62
+ </body>
63
+ </html>
package/demo/api.js ADDED
@@ -0,0 +1,19 @@
1
+ import { boundaryExample } from "../apiExamples/boundary";
2
+ import "../src/registered";
3
+
4
+ export function initExamples(initCount) {
5
+ // biome-ignore lint: no-unused-vars
6
+ initCount = initCount || 0;
7
+
8
+ try {
9
+ // javascript example function calls to be added here upon creation to test examples
10
+ boundaryExample();
11
+ } catch (_err) {
12
+ if (initCount <= 20) {
13
+ // setTimeout handles issue where content is sometimes loaded after the functions get called
14
+ setTimeout(() => {
15
+ initExamples(initCount + 1);
16
+ }, 100);
17
+ }
18
+ }
19
+ }
package/demo/api.md CHANGED
@@ -169,10 +169,71 @@ Use the `removeSpace` attribute to lessen the space between the popover and it's
169
169
 
170
170
  ### Property Examples
171
171
 
172
+ #### Set overflow boundary for popover
173
+
174
+ Use the `boundary` property to set the overflow boundary for the `auro-popover`, shifting the x-axis of the `auro-popover`. This example demonstrates an `auro-popover` in a container without a `boundary` set vs an `auro-popover` in a container with a `boundary` set. The value passed to the `boundary` attribute can be a valid selector string or HTML Element.
175
+
176
+ <div class="exampleWrapper">
177
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/boundary.html) -->
178
+ <!-- The below content is automatically added from ../apiExamples/boundary.html -->
179
+ <strong>Example with no boundary set</strong>
180
+ <div style="height: 150px; width: 200px; background-color: #fcfcfc; border: 1px solid darkgray;">
181
+ <auro-popover placement="bottom">
182
+ Popover content!
183
+ <auro-button slot="trigger">Popover Test</auro-button>
184
+ </auro-popover>
185
+ </div>
186
+ <strong>Example with boundary set</strong>
187
+ <div id="popoverBoundary" style="height: 150px; width: 200px; background-color: #fcfcfc; border: 1px solid darkgray;">
188
+ <auro-popover class="boundaryExample" placement="bottom">
189
+ Popover content!
190
+ <auro-button slot="trigger">Popover Test</auro-button>
191
+ </auro-popover>
192
+ </div>
193
+ <!-- AURO-GENERATED-CONTENT:END -->
194
+ </div>
195
+ <auro-accordion alignRight>
196
+ <span slot="trigger">See code</span>
197
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/boundary.html) -->
198
+ <!-- The below code snippet is automatically added from ../apiExamples/boundary.html -->
199
+
200
+ ```html
201
+ <strong>Example with no boundary set</strong>
202
+ <div style="height: 150px; width: 200px; background-color: #fcfcfc; border: 1px solid darkgray;">
203
+ <auro-popover placement="bottom">
204
+ Popover content!
205
+ <auro-button slot="trigger">Popover Test</auro-button>
206
+ </auro-popover>
207
+ </div>
208
+ <strong>Example with boundary set</strong>
209
+ <div id="popoverBoundary" style="height: 150px; width: 200px; background-color: #fcfcfc; border: 1px solid darkgray;">
210
+ <auro-popover class="boundaryExample" placement="bottom">
211
+ Popover content!
212
+ <auro-button slot="trigger">Popover Test</auro-button>
213
+ </auro-popover>
214
+ </div>
215
+ ```
216
+ <!-- AURO-GENERATED-CONTENT:END -->
217
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/boundary.js) -->
218
+ <!-- The below code snippet is automatically added from ../apiExamples/boundary.js -->
219
+
220
+ ```js
221
+ export function boundaryExample() {
222
+ const boundaryExample = document.querySelector(".boundaryExample");
223
+ const popoverBoundary = document.querySelector("#popoverBoundary");
224
+
225
+ boundaryExample.boundary = popoverBoundary;
226
+ }
227
+ ```
228
+ <!-- AURO-GENERATED-CONTENT:END -->
229
+ </auro-accordion>
230
+
172
231
  ### Guidelines
173
232
 
174
233
  The auro-popover element is meant to be used when the interaction and it's content is passive. A popover is not to be used for cases where the user must adjust their focus and acknowledge the presented content. For these cases, please see the [auro-dialog](https://auro.alaskaair.com/components/auro/dialog) element.
175
234
 
235
+ Binding a `trigger` event to a hyperlink is **not** recommended. This is a poor user experience for mobile devices, the event required to make the popover appear is a `tap`. The tap will also trigger the hyperlink to fire as well, thus negating the impact of the popover.
236
+
176
237
  The use of a hyperlink for to trigger an event in the UI is semantically incorrect and this will present itself as a confusing scenario to assistive devices.
177
238
 
178
239
  <auro-alert type="error" noIcon>
@@ -234,8 +295,8 @@ The default trigger for a popover is a `hover` event. Mobile devices do not supp
234
295
 
235
296
  The component may be restyled using the following code sample and changing the values of the following token(s).
236
297
 
237
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../src/tokens.scss) -->
238
- <!-- The below code snippet is automatically added from ../src/tokens.scss -->
298
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../src/styles/tokens.scss) -->
299
+ <!-- The below code snippet is automatically added from ../src/styles/tokens.scss -->
239
300
 
240
301
  ```scss
241
302
  @use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables" as vac;