@aurodesignsystem-dev/auro-banner 0.0.0-pr87.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 +246 -0
  2. package/LICENSE +201 -0
  3. package/NOTICE +2 -0
  4. package/README.md +192 -0
  5. package/demo/api.html +59 -0
  6. package/demo/api.js +1 -0
  7. package/demo/api.md +563 -0
  8. package/demo/api.min.js +3 -0
  9. package/demo/auro-banner.min.js +367 -0
  10. package/demo/index.html +57 -0
  11. package/demo/index.js +4 -0
  12. package/demo/index.md +186 -0
  13. package/demo/index.min.js +4 -0
  14. package/dist/auro-banner-Clvffv3E.js +54 -0
  15. package/dist/index.d.ts +61 -0
  16. package/dist/index.js +1 -0
  17. package/dist/registered.js +1 -0
  18. package/package.json +82 -0
package/demo/api.html ADDED
@@ -0,0 +1,59 @@
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-banner</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-banner'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
+ <script type="module" data-demo-script="true" src="./api.min.js"></script>
52
+
53
+ <!-- If additional elements are needed for the demo, add them here. -->
54
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
55
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/dist/auro-alaska__bundled.js" type="module"></script>
56
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
57
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/dist/auro-hyperlink__bundled.js" type="module"></script>
58
+ </body>
59
+ </html>
package/demo/api.js ADDED
@@ -0,0 +1 @@
1
+ import "../src/registered";
package/demo/api.md ADDED
@@ -0,0 +1,563 @@
1
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/api.md) -->
2
+ <!-- The below content is automatically added from ../docs/api.md -->
3
+
4
+ # auro-banner
5
+
6
+ The auro-banner element provides users a flexible way to convey a summary of information. The primary elements of a banner include an image, and details.
7
+
8
+ ## Attributes
9
+
10
+ | Attribute | Type | Description |
11
+ |--------------|-----------|--------------------------------------------------|
12
+ | [alignLeft](#alignLeft) | `Boolean` | to be used when we want the text aligned to the left |
13
+ | [alignRight](#alignRight) | `Boolean` | to be used when we want the text aligned to the right |
14
+ | [billboard](#billboard) | `Boolean` | to be used for billboard style configuration |
15
+ | [onDark](#onDark) | `Boolean` | to be used when the background image or color is dark and changes the text and cta color |
16
+ | [slim](#slim) | `Boolean` | to be used when we want a slimmer padding to the default banner |
17
+ | [solid](#solid) | `Boolean` | to be used when you want a solid color as opposed to a transparent background |
18
+
19
+ ## Properties
20
+
21
+ | Property | Attribute | Type | Default | Description |
22
+ |-----------------|-----------------|-----------|---------|--------------------------------------------------|
23
+ | [hero](#hero) | `hero` | `Boolean` | false | to be used for hero style configuration |
24
+ | [iconbg](#iconbg) | `iconbg` | `String` | | to be used in conjunction with the iconic variant this specifies the background color of the icon |
25
+ | [iconic](#iconic) | `iconic` | `Boolean` | false | to be used in as a hero on pages but with an icon and no displayImage on mobile |
26
+ | [marquee](#marquee) | `marquee` | `Boolean` | false | to be used for marquee style configuration |
27
+ | [roundedBorder](#roundedBorder) | `roundedBorder` | `Boolean` | false | to be used for roundedBorder style configuration |
28
+
29
+ ## Slots
30
+
31
+ | Name | Description |
32
+ |----------------|-------------------------------------------------|
33
+ | [action](#action) | call to action |
34
+ | [contentImage](#contentImage) | image placement |
35
+ | [description](#description) | main body of content |
36
+ | [disclaimer](#disclaimer) | disclaimer copy |
37
+ | [displayImage](#displayImage) | placement for `<picture />` or `<img>` elements |
38
+ | [prefix](#prefix) | placement for smaller text above title |
39
+ | [title](#title) | placement for header |
40
+ <!-- AURO-GENERATED-CONTENT:END -->
41
+
42
+ ## API Examples
43
+
44
+ ### Billboard
45
+
46
+ The `<auro-banner>` element with the `billboard` property features a single configuration using the `displayImage`, `contentImage`, `description`, `action` and `disclaimer` slots for structured content placement.
47
+
48
+ #### Background image slot
49
+
50
+ The background image slot is configured to work with the HTML [picture](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) element.
51
+
52
+ ```html
53
+ <picture slot="displayImage">
54
+ <source srcset="https://picsum.photos/id/430/1024/600" media="(min-width: 736px)">
55
+ <source srcset="https://picsum.photos/id/430/736/1400" media="(min-width: 375px)">
56
+ <source srcset="https://picsum.photos/id/430/320/1200" media="(min-width: 320px)">
57
+ <img src="https://picsum.photos/id/430/225/550" alt="" />
58
+ </picture>
59
+ ```
60
+ <br>
61
+ This allows the editor the upmost in image flexibility for cropped images placed at different breakpoints. A slotted `<img>` element is the default image shown when less than the first defined breakpoint.
62
+
63
+ By default `<img>` elements are `inline` elements and will add a few pixels of space below the image. To counter this, either set `display: block` on the `<img>` element, or add this [WCSS pre-defined selector](https://alaskaairlines.github.io/WebCoreStyleSheets/#core-css-#{$sym}#{$prefix}picture#{$scope}) to your project.<br><br>
64
+ <div class="exampleWrapper">
65
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basic.html) -->
66
+ <!-- The below content is automatically added from ../apiExamples/basic.html -->
67
+ <auro-banner billboard>
68
+ <picture slot="displayImage">
69
+ <source srcset="https://picsum.photos/id/430/1124/800" media="(min-width: 1024px)">
70
+ <source srcset="https://picsum.photos/id/430/1124/1000" media="(min-width: 768px)">
71
+ <source srcset="https://picsum.photos/id/430/736/750" media="(min-width: 736px)">
72
+ <source srcset="https://picsum.photos/id/430/736/1400" media="(min-width: 375px)">
73
+ <source srcset="https://picsum.photos/id/430/320/700" media="(min-width: 320px)">
74
+ <img src="https://picsum.photos/id/430/225/550" alt="" />
75
+ </picture>
76
+ <img
77
+ slot="contentImage"
78
+ src="https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/bltc1fa673bb196d177/6633f3de693c294c708b20de/oneworld-travel-bright-Horizontal-300.png"
79
+ alt="Random insert"/>
80
+ <p slot="description">
81
+ We’ll explain any additional costs before you book your car rental. More details on what’s included? Just check the Ts&Cs of any car.
82
+ </p>
83
+ <auro-hyperlink
84
+ cta
85
+ secondary
86
+ href="/"
87
+ slot="action"
88
+ target="_blank">
89
+ More info
90
+ </auro-hyperlink>
91
+ </auro-banner>
92
+ <!-- AURO-GENERATED-CONTENT:END -->
93
+ </div>
94
+ <auro-accordion alignRight>
95
+ <span slot="trigger">See code</span>
96
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/basic.html) -->
97
+ <!-- The below code snippet is automatically added from ../apiExamples/basic.html -->
98
+
99
+ ```html
100
+ <auro-banner billboard>
101
+ <picture slot="displayImage">
102
+ <source srcset="https://picsum.photos/id/430/1124/800" media="(min-width: 1024px)">
103
+ <source srcset="https://picsum.photos/id/430/1124/1000" media="(min-width: 768px)">
104
+ <source srcset="https://picsum.photos/id/430/736/750" media="(min-width: 736px)">
105
+ <source srcset="https://picsum.photos/id/430/736/1400" media="(min-width: 375px)">
106
+ <source srcset="https://picsum.photos/id/430/320/700" media="(min-width: 320px)">
107
+ <img src="https://picsum.photos/id/430/225/550" alt="" />
108
+ </picture>
109
+ <img
110
+ slot="contentImage"
111
+ src="https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/bltc1fa673bb196d177/6633f3de693c294c708b20de/oneworld-travel-bright-Horizontal-300.png"
112
+ alt="Random insert"/>
113
+ <p slot="description">
114
+ We’ll explain any additional costs before you book your car rental. More details on what’s included? Just check the Ts&Cs of any car.
115
+ </p>
116
+ <auro-hyperlink
117
+ cta
118
+ secondary
119
+ href="/"
120
+ slot="action"
121
+ target="_blank">
122
+ More info
123
+ </auro-hyperlink>
124
+ </auro-banner>
125
+ ```
126
+ <!-- AURO-GENERATED-CONTENT:END -->
127
+ </auro-accordion>
128
+
129
+ #### Billboard / slim / alignRight / onDark
130
+
131
+ The following example illustrates a series of additional API options available to the `<auro-banner>` element. In this example, this shows how a user can augment the `billboard` theme of the `<auro-banner>`.
132
+
133
+ For the call-to-action button, see in the example code that it is required to set the `onDark` attribute on the `<auro-hyperlink>` element itself. This is **not** controlled by the `<auro-banner>` element.
134
+
135
+ <div class="exampleWrapper">
136
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/billboardSeries.html) -->
137
+ <!-- The below content is automatically added from ../apiExamples/billboardSeries.html -->
138
+ <auro-banner billboard slim alignRight ondark>
139
+ <picture slot="displayImage">
140
+ <source srcset="https://picsum.photos/id/324/1124/800" media="(min-width: 1024px)">
141
+ <source srcset="https://picsum.photos/id/324/1124/1000" media="(min-width: 768px)">
142
+ <source srcset="https://picsum.photos/id/324/736/750" media="(min-width: 736px)">
143
+ <source srcset="https://picsum.photos/id/324/736/1400" media="(min-width: 375px)">
144
+ <source srcset="https://picsum.photos/id/324/320/700" media="(min-width: 320px)">
145
+ <img src="https://picsum.photos/id/324/225/550" alt="" />
146
+ </picture>
147
+ <auro-alaska official ondark style="width: 192px" slot="contentImage"></auro-alaska>
148
+ <p slot="description">
149
+ <span style="max-width:320px; margin-left:auto; display:block">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
150
+ </p>
151
+ <auro-hyperlink
152
+ cta
153
+ ondark
154
+ href="/"
155
+ slot="action"
156
+ target="_blank">
157
+ Learn more
158
+ </auro-hyperlink>
159
+ </auro-banner>
160
+ <!-- AURO-GENERATED-CONTENT:END -->
161
+ </div>
162
+ <auro-accordion alignRight>
163
+ <span slot="trigger">See code</span>
164
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/billboardSeries.html) -->
165
+ <!-- The below code snippet is automatically added from ../apiExamples/billboardSeries.html -->
166
+
167
+ ```html
168
+ <auro-banner billboard slim alignRight ondark>
169
+ <picture slot="displayImage">
170
+ <source srcset="https://picsum.photos/id/324/1124/800" media="(min-width: 1024px)">
171
+ <source srcset="https://picsum.photos/id/324/1124/1000" media="(min-width: 768px)">
172
+ <source srcset="https://picsum.photos/id/324/736/750" media="(min-width: 736px)">
173
+ <source srcset="https://picsum.photos/id/324/736/1400" media="(min-width: 375px)">
174
+ <source srcset="https://picsum.photos/id/324/320/700" media="(min-width: 320px)">
175
+ <img src="https://picsum.photos/id/324/225/550" alt="" />
176
+ </picture>
177
+ <auro-alaska official ondark style="width: 192px" slot="contentImage"></auro-alaska>
178
+ <p slot="description">
179
+ <span style="max-width:320px; margin-left:auto; display:block">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
180
+ </p>
181
+ <auro-hyperlink
182
+ cta
183
+ ondark
184
+ href="/"
185
+ slot="action"
186
+ target="_blank">
187
+ Learn more
188
+ </auro-hyperlink>
189
+ </auro-banner>
190
+ ```
191
+ <!-- AURO-GENERATED-CONTENT:END -->
192
+ </auro-accordion>
193
+
194
+ #### Billboard / slim / alignLeft / onDark
195
+
196
+ The following example illustrates an option to left align the text `alignLeft` along with `slim` to reduce the padding and `onDark` to change the text to white.
197
+
198
+ <div class="exampleWrapper">
199
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/billboardSeriesLeft.html) -->
200
+ <!-- The below content is automatically added from ../apiExamples/billboardSeriesLeft.html -->
201
+ <auro-banner billboard slim alignLeft onDark>
202
+ <picture slot="displayImage">
203
+ <source srcset="https://picsum.photos/id/42/1124/800" media="(min-width: 1024px)">
204
+ <source srcset="https://picsum.photos/id/42/1124/1000" media="(min-width: 768px)">
205
+ <source srcset="https://picsum.photos/id/42/736/750" media="(min-width: 736px)">
206
+ <source srcset="https://picsum.photos/id/42/736/1400" media="(min-width: 375px)">
207
+ <source srcset="https://picsum.photos/id/42/320/700" media="(min-width: 320px)">
208
+ <img src="https://picsum.photos/id/42/225/550" alt="" />
209
+ </picture>
210
+ <span slot="title">Beverages and cocktails</span>
211
+ <p slot="description">
212
+ <span style="max-width: 360px;display: block;">Enjoy soft drinks, fresh Starbucks® coffee – including lattes and cappuccinos, and Teavana® tea while you relax. Or try our famous Bloody Mary.</span>
213
+ </p>
214
+ <auro-hyperlink
215
+ cta
216
+ secondary
217
+ ondark
218
+ href="/"
219
+ slot="action"
220
+ target="_blank">
221
+ More info
222
+ </auro-hyperlink>
223
+ </auro-banner>
224
+ <!-- AURO-GENERATED-CONTENT:END -->
225
+ </div>
226
+ <auro-accordion alignRight>
227
+ <span slot="trigger">See code</span>
228
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/billboardSeriesLeft.html) -->
229
+ <!-- The below code snippet is automatically added from ../apiExamples/billboardSeriesLeft.html -->
230
+
231
+ ```html
232
+ <auro-banner billboard slim alignLeft onDark>
233
+ <picture slot="displayImage">
234
+ <source srcset="https://picsum.photos/id/42/1124/800" media="(min-width: 1024px)">
235
+ <source srcset="https://picsum.photos/id/42/1124/1000" media="(min-width: 768px)">
236
+ <source srcset="https://picsum.photos/id/42/736/750" media="(min-width: 736px)">
237
+ <source srcset="https://picsum.photos/id/42/736/1400" media="(min-width: 375px)">
238
+ <source srcset="https://picsum.photos/id/42/320/700" media="(min-width: 320px)">
239
+ <img src="https://picsum.photos/id/42/225/550" alt="" />
240
+ </picture>
241
+ <span slot="title">Beverages and cocktails</span>
242
+ <p slot="description">
243
+ <span style="max-width: 360px;display: block;">Enjoy soft drinks, fresh Starbucks® coffee – including lattes and cappuccinos, and Teavana® tea while you relax. Or try our famous Bloody Mary.</span>
244
+ </p>
245
+ <auro-hyperlink
246
+ cta
247
+ secondary
248
+ ondark
249
+ href="/"
250
+ slot="action"
251
+ target="_blank">
252
+ More info
253
+ </auro-hyperlink>
254
+ </auro-banner>
255
+ ```
256
+ <!-- AURO-GENERATED-CONTENT:END -->
257
+ </auro-accordion>
258
+
259
+ ### Hero
260
+
261
+ The following example illustrates a `<auro-banner>` custom element with the `hero` template style. This example also illustrates the use of the `prefix` slot.
262
+
263
+ <div class="exampleWrapper">
264
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/hero.html) -->
265
+ <!-- The below content is automatically added from ../apiExamples/hero.html -->
266
+ <auro-banner hero>
267
+ <picture slot="displayImage">
268
+ <source srcset="https://picsum.photos/id/369/2048/2000" media="(min-width: 1024px)">
269
+ <source srcset="https://picsum.photos/id/369/736/1400" media="(min-width:660px)">
270
+ <img src="https://picsum.photos/id/369/660/420" alt="">
271
+ </picture>
272
+ <span slot="prefix">Duis aute irure dolor</span>
273
+ <span slot="title">Duis aute irure dolor.<br>Excepteur sint occaecat.</span>
274
+ <p slot="description">
275
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
276
+ </p>
277
+ <auro-hyperlink
278
+ cta
279
+ secondary
280
+ href="/"
281
+ slot="action"
282
+ target="_blank">
283
+ More info
284
+ </auro-hyperlink>
285
+ </auro-banner>
286
+ <!-- AURO-GENERATED-CONTENT:END -->
287
+ </div>
288
+ <auro-accordion alignRight>
289
+ <span slot="trigger">See code</span>
290
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/hero.html) -->
291
+ <!-- The below code snippet is automatically added from ../apiExamples/hero.html -->
292
+
293
+ ```html
294
+ <auro-banner hero>
295
+ <picture slot="displayImage">
296
+ <source srcset="https://picsum.photos/id/369/2048/2000" media="(min-width: 1024px)">
297
+ <source srcset="https://picsum.photos/id/369/736/1400" media="(min-width:660px)">
298
+ <img src="https://picsum.photos/id/369/660/420" alt="">
299
+ </picture>
300
+ <span slot="prefix">Duis aute irure dolor</span>
301
+ <span slot="title">Duis aute irure dolor.<br>Excepteur sint occaecat.</span>
302
+ <p slot="description">
303
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
304
+ </p>
305
+ <auro-hyperlink
306
+ cta
307
+ secondary
308
+ href="/"
309
+ slot="action"
310
+ target="_blank">
311
+ More info
312
+ </auro-hyperlink>
313
+ </auro-banner>
314
+ ```
315
+ <!-- AURO-GENERATED-CONTENT:END -->
316
+ </auro-accordion>
317
+
318
+ ### Iconic
319
+
320
+ The following example illustrates a `<auro-banner>` custom element with the `iconic` template style. The `iconic` template style hides the `displayImage` on small screen sizes and only shows the icon. This examples also shows how to customize the icon background color using `iconbg`.
321
+
322
+ <div class="exampleWrapper">
323
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/iconic.html) -->
324
+ <!-- The below content is automatically added from ../apiExamples/iconic.html -->
325
+ <auro-banner iconic iconbg="var(ds-basic-color-surface-neutral-medium)">
326
+ <picture slot="displayImage">
327
+ <source srcset="https://picsum.photos/id/452/2800/2000.jpg" media="(min-width: 1054px)">
328
+ <source srcset="https://picsum.photos/id/452/1500/2000" media="(min-width:660px)">
329
+ <img src="https://picsum.photos/id/452/2800/2000.jpg" alt="">
330
+ </picture>
331
+ <span slot="icon">
332
+ <auro-icon category="social" name="instagram" customSize customColor style="color: var(--ds-color-base-white); --ds-auro-icon-size: 5rem;"></auro-icon>
333
+ </span>
334
+ <span slot="title">
335
+ <auro-header level="2" display="800" margin="both" size="none">Lorem ipsum title</auro-header>
336
+ <auro-header level="3" display="300" margin="top" size="none">You can add multiple auro-header's here</auro-header>
337
+ </span>
338
+ <p slot="description">
339
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam possimus, quod aperiam a aut fuga qui eos reprehenderit facilis vero.
340
+ </p>
341
+ </auro-banner>
342
+ <!-- AURO-GENERATED-CONTENT:END -->
343
+ </div>
344
+ <auro-accordion alignRight>
345
+ <span slot="trigger">See code</span>
346
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/iconic.html) -->
347
+ <!-- The below code snippet is automatically added from ../apiExamples/iconic.html -->
348
+
349
+ ```html
350
+ <auro-banner iconic iconbg="var(ds-basic-color-surface-neutral-medium)">
351
+ <picture slot="displayImage">
352
+ <source srcset="https://picsum.photos/id/452/2800/2000.jpg" media="(min-width: 1054px)">
353
+ <source srcset="https://picsum.photos/id/452/1500/2000" media="(min-width:660px)">
354
+ <img src="https://picsum.photos/id/452/2800/2000.jpg" alt="">
355
+ </picture>
356
+ <span slot="icon">
357
+ <auro-icon category="social" name="instagram" customSize customColor style="color: var(--ds-color-base-white); --ds-auro-icon-size: 5rem;"></auro-icon>
358
+ </span>
359
+ <span slot="title">
360
+ <auro-header level="2" display="800" margin="both" size="none">Lorem ipsum title</auro-header>
361
+ <auro-header level="3" display="300" margin="top" size="none">You can add multiple auro-header's here</auro-header>
362
+ </span>
363
+ <p slot="description">
364
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam possimus, quod aperiam a aut fuga qui eos reprehenderit facilis vero.
365
+ </p>
366
+ </auro-banner>
367
+ ```
368
+ <!-- AURO-GENERATED-CONTENT:END -->
369
+ </auro-accordion>
370
+
371
+ ### Marquee
372
+
373
+ The following example illustrates a `<auro-banner>` custom element with the `marquee` template style. This template configuration also supports the `slim` and `onDark` attributes.
374
+
375
+ <div class="exampleWrapper">
376
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/marquee.html) -->
377
+ <!-- The below content is automatically added from ../apiExamples/marquee.html -->
378
+ <auro-banner marquee>
379
+ <picture slot="displayImage">
380
+ <source srcset="https://picsum.photos/id/154/2048/2000" media="(min-width: 1024px)">
381
+ <source srcset="https://picsum.photos/id/154/736/1400" media="(min-width:660px)">
382
+ <img src="https://picsum.photos/id/154/660/420" alt="">
383
+ </picture>
384
+ <span slot="prefix">Duis aute irure dolor</span>
385
+ <span slot="title">Duis aute irure dolor.<br>Excepteur sint occaecat.</span>
386
+ <p slot="description">
387
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
388
+ </p>
389
+ <auro-hyperlink
390
+ cta
391
+ secondary
392
+ href="/"
393
+ slot="action"
394
+ target="_blank">
395
+ More info
396
+ </auro-hyperlink>
397
+ </auro-banner>
398
+ <!-- AURO-GENERATED-CONTENT:END -->
399
+ </div>
400
+ <auro-accordion alignRight>
401
+ <span slot="trigger">See code</span>
402
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/marquee.html) -->
403
+ <!-- The below code snippet is automatically added from ../apiExamples/marquee.html -->
404
+
405
+ ```html
406
+ <auro-banner marquee>
407
+ <picture slot="displayImage">
408
+ <source srcset="https://picsum.photos/id/154/2048/2000" media="(min-width: 1024px)">
409
+ <source srcset="https://picsum.photos/id/154/736/1400" media="(min-width:660px)">
410
+ <img src="https://picsum.photos/id/154/660/420" alt="">
411
+ </picture>
412
+ <span slot="prefix">Duis aute irure dolor</span>
413
+ <span slot="title">Duis aute irure dolor.<br>Excepteur sint occaecat.</span>
414
+ <p slot="description">
415
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
416
+ </p>
417
+ <auro-hyperlink
418
+ cta
419
+ secondary
420
+ href="/"
421
+ slot="action"
422
+ target="_blank">
423
+ More info
424
+ </auro-hyperlink>
425
+ </auro-banner>
426
+ ```
427
+ <!-- AURO-GENERATED-CONTENT:END -->
428
+ </auro-accordion>
429
+
430
+ ### Marquee / solid
431
+
432
+ The following example illustrates a `<auro-banner>` custom element with the `marquee solid` template style. With this configuration, onDark is implied.
433
+
434
+ <div class="exampleWrapper">
435
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/marqueeSolid.html) -->
436
+ <!-- The below content is automatically added from ../apiExamples/marqueeSolid.html -->
437
+ <auro-banner marquee solid>
438
+ <picture slot="displayImage">
439
+ <source srcset="https://picsum.photos/id/1015/1048/2000" media="(min-width: 1024px)">
440
+ <source srcset="https://picsum.photos/id/1015/736/1400" media="(min-width:660px)">
441
+ <img src="https://picsum.photos/id/1015/660/660" alt="">
442
+ </picture>
443
+ <auro-alaska official ondark style="width: 192px" slot="contentImage"></auro-alaska>
444
+ <p slot="description">
445
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
446
+ </p>
447
+ <auro-hyperlink
448
+ cta
449
+ ondark
450
+ href="/"
451
+ slot="action"
452
+ target="_blank">
453
+ More info
454
+ </auro-hyperlink>
455
+ </auro-banner>
456
+ <!-- AURO-GENERATED-CONTENT:END -->
457
+ </div>
458
+ <auro-accordion alignRight>
459
+ <span slot="trigger">See code</span>
460
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/marqueeSolid.html) -->
461
+ <!-- The below code snippet is automatically added from ../apiExamples/marqueeSolid.html -->
462
+
463
+ ```html
464
+ <auro-banner marquee solid>
465
+ <picture slot="displayImage">
466
+ <source srcset="https://picsum.photos/id/1015/1048/2000" media="(min-width: 1024px)">
467
+ <source srcset="https://picsum.photos/id/1015/736/1400" media="(min-width:660px)">
468
+ <img src="https://picsum.photos/id/1015/660/660" alt="">
469
+ </picture>
470
+ <auro-alaska official ondark style="width: 192px" slot="contentImage"></auro-alaska>
471
+ <p slot="description">
472
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
473
+ </p>
474
+ <auro-hyperlink
475
+ cta
476
+ ondark
477
+ href="/"
478
+ slot="action"
479
+ target="_blank">
480
+ More info
481
+ </auro-hyperlink>
482
+ </auro-banner>
483
+ ```
484
+ <!-- AURO-GENERATED-CONTENT:END -->
485
+ </auro-accordion>
486
+
487
+ ### roundedBorder
488
+
489
+ The following example illustrates a `<auro-banner>` custom element with the `roundedBorder` variant style. With this configuration, no `displayImage` is used. Instead only the `contentImage` is used and the rest of the offer is displayed in a row.
490
+
491
+ <div class="exampleWrapper">
492
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/roundedBorder.html) -->
493
+ <!-- The below content is automatically added from ../apiExamples/roundedBorder.html -->
494
+ <auro-banner roundedBorder alignLeft>
495
+ <img src="https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4f70efe198086558/6633f3defda0c7c6c769b86b/visa_signature.svg" alt="" slot="contentImage" />
496
+ <span slot="prefix">Prefix - Limited Time</span>
497
+ <span slot="title">Title - Irure dolor.</span>
498
+ <p slot="description">
499
+ Description - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
500
+ </p>
501
+ <div slot="disclaimer">
502
+ * Disclaimer - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
503
+ </div>
504
+ <auro-hyperlink
505
+ cta
506
+ secondary
507
+ href="/"
508
+ slot="action"
509
+ target="_blank">
510
+ More info
511
+ </auro-hyperlink>
512
+ </auro-banner>
513
+ <!-- AURO-GENERATED-CONTENT:END -->
514
+ </div>
515
+ <auro-accordion alignRight>
516
+ <span slot="trigger">See code</span>
517
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/roundedBorder.html) -->
518
+ <!-- The below code snippet is automatically added from ../apiExamples/roundedBorder.html -->
519
+
520
+ ```html
521
+ <auro-banner roundedBorder alignLeft>
522
+ <img src="https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4f70efe198086558/6633f3defda0c7c6c769b86b/visa_signature.svg" alt="" slot="contentImage" />
523
+ <span slot="prefix">Prefix - Limited Time</span>
524
+ <span slot="title">Title - Irure dolor.</span>
525
+ <p slot="description">
526
+ Description - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
527
+ </p>
528
+ <div slot="disclaimer">
529
+ * Disclaimer - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
530
+ </div>
531
+ <auro-hyperlink
532
+ cta
533
+ secondary
534
+ href="/"
535
+ slot="action"
536
+ target="_blank">
537
+ More info
538
+ </auro-hyperlink>
539
+ </auro-banner>
540
+ ```
541
+ <!-- AURO-GENERATED-CONTENT:END -->
542
+ </auro-accordion>
543
+
544
+ ### Theme Support
545
+
546
+ The component may be restyled using the following code sample and changing the values of the following token(s).
547
+
548
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../src/styles/tokens.scss) -->
549
+ <!-- The below code snippet is automatically added from ../src/styles/tokens.scss -->
550
+
551
+ ```scss
552
+ @use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
553
+
554
+ :host {
555
+ --ds-auro-banner-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
556
+ --ds-auro-banner-disclaimer-text-color: var(--ds-basic-color-texticon-muted, #{v.$ds-basic-color-texticon-muted});
557
+ --ds-auro-banner-title-text-color: var(--ds-basic-color-texticon-accent1, #{v.$ds-basic-color-texticon-accent1});
558
+ --ds-auro-banner-icon-container-color: var(--ds-basic-color-surface-neutral-medium, #{v.$ds-basic-color-surface-neutral-medium});
559
+ --ds-auro-banner-wrapper-container-color: var(--ds-basic-color-surface-inverse, #{v.$ds-basic-color-surface-inverse});
560
+ --ds-auro-banner-wrapper-border-color: var(--ds-basic-color-border-default, #{v.$ds-basic-color-border-default});
561
+ }
562
+ ```
563
+ <!-- AURO-GENERATED-CONTENT:END -->
package/demo/api.min.js ADDED
@@ -0,0 +1,3 @@
1
+ import { A as AuroBanner } from './auro-banner.min.js';
2
+
3
+ AuroBanner.register();