@aurodesignsystem-dev/auro-drawer 0.0.0-pr131.1 → 0.0.0-pr131.10
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 +1004 -982
- package/demo/api.min.js +4131 -33
- package/demo/index.html +1 -0
- package/demo/index.md +54 -58
- package/demo/index.min.js +4095 -1
- package/demo/keyboard-audit.html +1 -1
- package/demo/readme.md +175 -0
- package/dist/{auro-drawer-DO1aEUoF.js → auro-drawer-B8D4pC9e.js} +39 -38
- package/dist/index.d.ts +24 -2
- package/dist/index.js +1 -1
- package/dist/registered.js +1 -1
- package/package.json +7 -7
- package/demo/auro-drawer.min.js +0 -3585
package/README.md
CHANGED
|
@@ -47,9 +47,7 @@ The `auro-drawer` component should be used in situations where users may:
|
|
|
47
47
|
[](https://www.apache.org/licenses/LICENSE-2.0)
|
|
48
48
|
|
|
49
49
|
|
|
50
|
-
|
|
51
|
-
$ npm i @aurodesignsystem/auro-drawer
|
|
52
|
-
```
|
|
50
|
+
<pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-drawer</code></pre>
|
|
53
51
|
|
|
54
52
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
55
53
|
|
|
@@ -61,9 +59,7 @@ Defining the dependency within each project that is using the `<auro-drawer>` co
|
|
|
61
59
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
62
60
|
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImport.md) -->
|
|
63
61
|
|
|
64
|
-
|
|
65
|
-
import "@aurodesignsystem/auro-drawer";
|
|
66
|
-
```
|
|
62
|
+
<pre class="language-js"><code class="language-js">import "@aurodesignsystem/auro-drawer";</code></pre>
|
|
67
63
|
|
|
68
64
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
69
65
|
|
|
@@ -72,9 +68,7 @@ import "@aurodesignsystem/auro-drawer";
|
|
|
72
68
|
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/bundleInstallDescription.md) -->
|
|
73
69
|
In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
|
|
74
70
|
|
|
75
|
-
|
|
76
|
-
<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-drawer@latest/+esm"></script>
|
|
77
|
-
```
|
|
71
|
+
<pre class="language-html"><code class="language-html"><script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-drawer@latest/+esm"></script></code></pre>
|
|
78
72
|
|
|
79
73
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
80
74
|
|
|
@@ -83,28 +77,26 @@ In cases where the project is not able to process JS assets, there are pre-proce
|
|
|
83
77
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
|
|
84
78
|
<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
|
|
85
79
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
</auro-drawer>
|
|
107
|
-
```
|
|
80
|
+
<pre class="language-html"><code class="language-html"><div>
|
|
81
|
+
<auro-button id="openBasic">Open default drawer</auro-button>
|
|
82
|
+
</div>
|
|
83
|
+
<auro-drawer id="defaultDrawer">
|
|
84
|
+
<span slot="header">Default Drawer</span>
|
|
85
|
+
<div slot="content">
|
|
86
|
+
<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>
|
|
87
|
+
<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>
|
|
88
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
89
|
+
<ul>
|
|
90
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
91
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
92
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
93
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
94
|
+
</ul>
|
|
95
|
+
</div>
|
|
96
|
+
<div slot="footer">
|
|
97
|
+
<auro-button secondary id="closeBasic">Close</auro-button>
|
|
98
|
+
</div>
|
|
99
|
+
</auro-drawer></code></pre>
|
|
108
100
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
109
101
|
|
|
110
102
|
## Custom Component Registration for Version Management
|
|
@@ -121,67 +113,63 @@ You can do this by importing only the component class and using the `register(na
|
|
|
121
113
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
|
|
122
114
|
<!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
|
|
123
115
|
|
|
124
|
-
|
|
125
|
-
// Import the class only
|
|
116
|
+
<pre class="language-js"><code class="language-js">// Import the class only
|
|
126
117
|
import { AuroDrawer } from '@aurodesignsystem/auro-drawer/class';
|
|
127
|
-
|
|
118
|
+
|
|
128
119
|
// Register with a custom name if desired
|
|
129
|
-
AuroDrawer.register('custom-drawer')
|
|
130
|
-
```
|
|
120
|
+
AuroDrawer.register('custom-drawer');</code></pre>
|
|
131
121
|
|
|
132
122
|
This will create a new custom element `<custom-drawer>` that behaves exactly like `<auro-drawer>`, allowing both to coexist on the same page without interfering with each other.
|
|
133
123
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
134
124
|
<div class="exampleWrapper exampleWrapper--flex">
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
125
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./apiExamples/custom.html) -->
|
|
126
|
+
<!-- The below content is automatically added from ./apiExamples/custom.html -->
|
|
127
|
+
<div>
|
|
128
|
+
<auro-button id="openCustom">Open custom drawer</auro-button>
|
|
129
|
+
</div>
|
|
130
|
+
<custom-drawer id="customDrawer">
|
|
131
|
+
<span slot="header">Custom Drawer</span>
|
|
132
|
+
<div slot="content">
|
|
133
|
+
<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>
|
|
134
|
+
<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>
|
|
135
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
136
|
+
<ul>
|
|
137
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
138
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
139
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
140
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
141
|
+
</ul>
|
|
142
|
+
</div>
|
|
143
|
+
<div slot="footer">
|
|
144
|
+
<auro-button secondary id="closeCustom">Close</auro-button>
|
|
145
|
+
</div>
|
|
146
|
+
</custom-drawer>
|
|
147
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
158
148
|
</div>
|
|
159
149
|
<auro-accordion alignRight>
|
|
160
|
-
|
|
150
|
+
<span slot="trigger">See code</span>
|
|
161
151
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/custom.html) -->
|
|
162
152
|
<!-- The below code snippet is automatically added from ./apiExamples/custom.html -->
|
|
163
153
|
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
</custom-drawer>
|
|
185
|
-
```
|
|
154
|
+
<pre class="language-html"><code class="language-html"><div>
|
|
155
|
+
<auro-button id="openCustom">Open custom drawer</auro-button>
|
|
156
|
+
</div>
|
|
157
|
+
<custom-drawer id="customDrawer">
|
|
158
|
+
<span slot="header">Custom Drawer</span>
|
|
159
|
+
<div slot="content">
|
|
160
|
+
<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>
|
|
161
|
+
<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>
|
|
162
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
163
|
+
<ul>
|
|
164
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
165
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
166
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
167
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
168
|
+
</ul>
|
|
169
|
+
</div>
|
|
170
|
+
<div slot="footer">
|
|
171
|
+
<auro-button secondary id="closeCustom">Close</auro-button>
|
|
172
|
+
</div>
|
|
173
|
+
</custom-drawer></code></pre>
|
|
186
174
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
187
175
|
</auro-accordion>
|
package/demo/api.html
CHANGED
package/demo/api.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { initAriaLabelSlotExample } from "../apiExamples/aria-label-slot.js";
|
|
2
2
|
import { initBasicExample } from "../apiExamples/basic";
|
|
3
3
|
import { initCloseButtonAppearanceExample } from "../apiExamples/close-button-appearance.js";
|
|
4
4
|
import { initCustomizedExample } from "../apiExamples/customizing.js";
|
|
@@ -8,7 +8,7 @@ import { initNestedExample } from "../apiExamples/nested";
|
|
|
8
8
|
import { initPlacementExample } from "../apiExamples/placement.js";
|
|
9
9
|
import { initPopoverAndDropdownExample } from "../apiExamples/popover-and-dropdown.js";
|
|
10
10
|
import { initSizeOptionsExample } from "../apiExamples/size-options.js";
|
|
11
|
-
import {
|
|
11
|
+
import { initUnformattedExample } from "../apiExamples/unformatted.js";
|
|
12
12
|
|
|
13
13
|
import "../src/registered.js";
|
|
14
14
|
|