@aurodesignsystem-dev/auro-drawer 0.0.0-pr131.7 → 0.0.0-pr131.9
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.
- package/README.md +70 -82
- package/demo/api.html +1 -0
- package/demo/api.js +2 -2
- package/demo/api.md +953 -977
- package/demo/api.min.js +4119 -33
- package/demo/index.html +1 -0
- package/demo/index.md +54 -58
- package/demo/index.min.js +4083 -1
- package/demo/readme.md +175 -0
- package/dist/{auro-drawer-CozmUPFj.js → auro-drawer-DJcKRnFy.js} +27 -27
- package/dist/index.d.ts +3 -4
- package/dist/index.js +1 -1
- package/dist/registered.js +1 -1
- package/package.json +7 -7
- package/demo/auro-drawer.min.js +0 -3696
package/demo/index.html
CHANGED
package/demo/index.md
CHANGED
|
@@ -27,17 +27,15 @@ The `auro-drawer` component should be used in situations where users may:
|
|
|
27
27
|
|
|
28
28
|
Triggering the drawer relies on functions being installed. See the following example code that is installed into this demo.
|
|
29
29
|
|
|
30
|
-
|
|
31
|
-
function toggleDrawer(drawerID) {
|
|
30
|
+
<pre class="language-javascript"><code class="language-javascript">function toggleDrawer(drawerID) {
|
|
32
31
|
const drawer = document.querySelector(drawerID);
|
|
33
|
-
|
|
32
|
+
|
|
34
33
|
if (drawer.hasAttribute('open')) {
|
|
35
34
|
drawer.removeAttribute('open');
|
|
36
35
|
} else {
|
|
37
36
|
drawer.setAttribute('open', true);
|
|
38
37
|
}
|
|
39
|
-
}
|
|
40
|
-
```
|
|
38
|
+
}</code></pre>
|
|
41
39
|
|
|
42
40
|
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 drawer with the ID of `#demo1`.
|
|
43
41
|
|
|
@@ -50,15 +48,15 @@ Once the JavaScript is added to the scope of the experience, the next part is ad
|
|
|
50
48
|
The structure of the drawer itself consists of three slots. The `header`, `content` and `footer` slots. See the scaffolding example below for adding content to the component.
|
|
51
49
|
|
|
52
50
|
``` html
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
51
|
+
<auro-drawer id="[unique ID]">
|
|
52
|
+
<span slot="header">[header content]</span>
|
|
53
|
+
<span slot="content">
|
|
56
54
|
[body content]
|
|
57
|
-
|
|
58
|
-
|
|
55
|
+
</span>
|
|
56
|
+
<span slot="footer">
|
|
59
57
|
[footer content]
|
|
60
|
-
|
|
61
|
-
|
|
58
|
+
</span>
|
|
59
|
+
</auro-drawer>
|
|
62
60
|
```
|
|
63
61
|
|
|
64
62
|
It should be noted that the footer slot is reserved for the placement of action buttons.
|
|
@@ -68,57 +66,55 @@ It should be noted that the footer slot is reserved for the placement of action
|
|
|
68
66
|
### Basic
|
|
69
67
|
|
|
70
68
|
<div class="exampleWrapper">
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
69
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
|
|
70
|
+
<!-- The below content is automatically added from ./../apiExamples/basic.html -->
|
|
71
|
+
<div>
|
|
72
|
+
<auro-button id="openBasic">Open default drawer</auro-button>
|
|
73
|
+
</div>
|
|
74
|
+
<auro-drawer id="defaultDrawer">
|
|
75
|
+
<span slot="header">Default Drawer</span>
|
|
76
|
+
<div slot="content">
|
|
77
|
+
<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>
|
|
78
|
+
<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>
|
|
79
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
80
|
+
<ul>
|
|
81
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
82
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
83
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
84
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
85
|
+
</ul>
|
|
86
|
+
</div>
|
|
87
|
+
<div slot="footer">
|
|
88
|
+
<auro-button secondary id="closeBasic">Close</auro-button>
|
|
89
|
+
</div>
|
|
90
|
+
</auro-drawer>
|
|
91
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
94
92
|
</div>
|
|
95
93
|
<auro-accordion alignRight>
|
|
96
|
-
|
|
94
|
+
<span slot="trigger">See code</span>
|
|
97
95
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
|
|
98
96
|
<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
|
|
99
97
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
</auro-drawer>
|
|
121
|
-
```
|
|
98
|
+
<pre class="language-html"><code class="language-html"><div>
|
|
99
|
+
<auro-button id="openBasic">Open default drawer</auro-button>
|
|
100
|
+
</div>
|
|
101
|
+
<auro-drawer id="defaultDrawer">
|
|
102
|
+
<span slot="header">Default Drawer</span>
|
|
103
|
+
<div slot="content">
|
|
104
|
+
<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>
|
|
105
|
+
<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>
|
|
106
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
107
|
+
<ul>
|
|
108
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
109
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
110
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
111
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
112
|
+
</ul>
|
|
113
|
+
</div>
|
|
114
|
+
<div slot="footer">
|
|
115
|
+
<auro-button secondary id="closeBasic">Close</auro-button>
|
|
116
|
+
</div>
|
|
117
|
+
</auro-drawer></code></pre>
|
|
122
118
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
123
119
|
</auro-accordion>
|
|
124
120
|
|