@aurodesignsystem-dev/auro-banner 0.0.0-pr92.2 → 0.0.0-pr96.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.
- package/README.md +93 -81
- package/demo/api.html +3 -4
- package/demo/api.md +238 -229
- package/demo/auro-banner.min.js +99 -22
- package/demo/index.html +2 -2
- package/demo/index.md +35 -122
- package/dist/{auro-banner-pP9c4Izh.js → auro-banner-B-yqrP_2.js} +2 -2
- package/dist/index.d.ts +217 -61
- package/dist/index.js +1 -1
- package/dist/registered.js +1 -1
- package/package.json +20 -12
package/demo/api.md
CHANGED
|
@@ -1,78 +1,63 @@
|
|
|
1
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src
|
|
2
|
-
<!-- The below content is automatically added from
|
|
1
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/api.md) -->
|
|
2
|
+
<!-- The below content is automatically added from ./../docs/api.md -->
|
|
3
3
|
|
|
4
4
|
# auro-banner
|
|
5
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.
|
|
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
7
|
|
|
8
|
-
|
|
8
|
+
### Properties & Attributes
|
|
9
9
|
|
|
10
|
-
|
|
|
11
|
-
|
|
12
|
-
|
|
|
13
|
-
|
|
|
14
|
-
|
|
|
15
|
-
|
|
|
16
|
-
|
|
|
17
|
-
|
|
|
10
|
+
| Properties | Attributes | Modifiers | Type | Default | Description |
|
|
11
|
+
| ------------- | ------------- | --------- | ---------------------- | --------- | --------------------------------------------------------------------------------------------------- |
|
|
12
|
+
| alignLeft | alignLeft | | boolean | | Use to align text to the left side of the banner |
|
|
13
|
+
| alignRight | alignRight | | boolean | | Use to align text to the right side of the banner |
|
|
14
|
+
| appearance | appearance | | `default` \| `inverse` | `default` | Defines whether the component will be on lighter or darker backgrounds |
|
|
15
|
+
| billboard | billboard | | boolean | | Use to enable billboard style configuration |
|
|
16
|
+
| hero | hero | | boolean | | Use to enable hero style configuration |
|
|
17
|
+
| iconbg | iconbg | | string | | Use in conjunction with the iconic variant to specify the background color of the icon |
|
|
18
|
+
| iconic | iconic | | boolean | | Used similarly to the `hero` variant, but adds an icon slot and removes the display image on mobile |
|
|
19
|
+
| marquee | marquee | | boolean | | Use to enable marquee style configuration |
|
|
20
|
+
| onDark | onDark | | boolean | | DEPRECATED - use `appearance="inverse"` instead. |
|
|
21
|
+
| roundedBorder | roundedBorder | | boolean | | Use to enable rounded border style configuration |
|
|
22
|
+
| slim | slim | | boolean | | Use to enable slimmer padding to the default banner |
|
|
23
|
+
| solid | solid | | boolean | | Use to enable a solid background color as opposed to a transparent background |
|
|
18
24
|
|
|
19
|
-
|
|
25
|
+
### Methods
|
|
20
26
|
|
|
21
|
-
|
|
|
22
|
-
|
|
23
|
-
|
|
|
24
|
-
| [hero](#hero) | `hero` | `Boolean` | false | to be used for hero style configuration |
|
|
25
|
-
| [iconbg](#iconbg) | `iconbg` | `String` | | to be used in conjunction with the iconic variant this specifies the background color of the icon |
|
|
26
|
-
| [iconic](#iconic) | `iconic` | `Boolean` | false | to be used in as a hero on pages but with an icon and no displayImage on mobile |
|
|
27
|
-
| [marquee](#marquee) | `marquee` | `Boolean` | false | to be used for marquee style configuration |
|
|
28
|
-
| [roundedBorder](#roundedBorder) | `roundedBorder` | `Boolean` | false | to be used for roundedBorder style configuration |
|
|
27
|
+
| Name | Parameters | Return | Description |
|
|
28
|
+
| -------- | -------------------------------------------------------------------- | ------ | ------------------------------------------------- |
|
|
29
|
+
| register | `name` (string) - The name of the element that you want to register. | | This will register this element with the browser. |
|
|
29
30
|
|
|
30
|
-
|
|
31
|
+
### Slots
|
|
31
32
|
|
|
32
|
-
| Name
|
|
33
|
-
|
|
34
|
-
|
|
|
35
|
-
|
|
|
36
|
-
|
|
|
37
|
-
|
|
|
38
|
-
|
|
|
39
|
-
|
|
|
40
|
-
|
|
|
33
|
+
| Name | Description |
|
|
34
|
+
| ------------ | ----------------------------------------------- |
|
|
35
|
+
| action | call to action |
|
|
36
|
+
| contentImage | image placement |
|
|
37
|
+
| description | main body of content |
|
|
38
|
+
| disclaimer | disclaimer copy |
|
|
39
|
+
| displayImage | placement for `<picture />` or `<img>` elements |
|
|
40
|
+
| prefix | placement for smaller text above title |
|
|
41
|
+
| title | placement for header |
|
|
41
42
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
42
43
|
|
|
43
|
-
##
|
|
44
|
+
## Property & Attribute Examples
|
|
44
45
|
|
|
45
46
|
### Billboard
|
|
46
47
|
|
|
47
|
-
The
|
|
48
|
-
|
|
49
|
-
#### Background image slot
|
|
50
|
-
|
|
51
|
-
The background image slot is configured to work with the HTML [picture](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) element.
|
|
48
|
+
The `billboard` property features a single configuration using the `displayImage`, `contentImage`, `description`, `action` and `disclaimer` slots for structured content placement. This is the most common use case for the `<auro-banner>` component.
|
|
52
49
|
|
|
53
|
-
```html
|
|
54
|
-
<picture slot="displayImage">
|
|
55
|
-
<source srcset="https://picsum.photos/id/430/1024/600" media="(min-width: 736px)">
|
|
56
|
-
<source srcset="https://picsum.photos/id/430/736/1400" media="(min-width: 375px)">
|
|
57
|
-
<source srcset="https://picsum.photos/id/430/320/1200" media="(min-width: 320px)">
|
|
58
|
-
<img src="https://picsum.photos/id/430/225/550" alt="" />
|
|
59
|
-
</picture>
|
|
60
|
-
```
|
|
61
|
-
<br>
|
|
62
|
-
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.
|
|
63
|
-
|
|
64
|
-
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>
|
|
65
50
|
<div class="exampleWrapper">
|
|
66
51
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basic.html) -->
|
|
67
52
|
<!-- The below content is automatically added from ../apiExamples/basic.html -->
|
|
68
53
|
<auro-banner billboard>
|
|
69
54
|
<picture slot="displayImage">
|
|
70
|
-
<source srcset="https://picsum.photos/id/
|
|
71
|
-
<source srcset="https://picsum.photos/id/
|
|
72
|
-
<source srcset="https://picsum.photos/id/
|
|
73
|
-
<source srcset="https://picsum.photos/id/
|
|
74
|
-
<source srcset="https://picsum.photos/id/
|
|
75
|
-
<img src="https://picsum.photos/id/
|
|
55
|
+
<source srcset="https://picsum.photos/id/196/1124/800" media="(min-width: 1024px)">
|
|
56
|
+
<source srcset="https://picsum.photos/id/196/1124/1000" media="(min-width: 768px)">
|
|
57
|
+
<source srcset="https://picsum.photos/id/196/736/750" media="(min-width: 736px)">
|
|
58
|
+
<source srcset="https://picsum.photos/id/196/736/1400" media="(min-width: 375px)">
|
|
59
|
+
<source srcset="https://picsum.photos/id/196/320/700" media="(min-width: 320px)">
|
|
60
|
+
<img src="https://picsum.photos/id/196/225/550" alt="" />
|
|
76
61
|
</picture>
|
|
77
62
|
<img
|
|
78
63
|
slot="contentImage"
|
|
@@ -82,8 +67,8 @@ By default `<img>` elements are `inline` elements and will add a few pixels of s
|
|
|
82
67
|
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.
|
|
83
68
|
</p>
|
|
84
69
|
<auro-hyperlink
|
|
85
|
-
cta
|
|
86
|
-
secondary
|
|
70
|
+
type="cta"
|
|
71
|
+
variant="secondary"
|
|
87
72
|
href="/"
|
|
88
73
|
slot="action"
|
|
89
74
|
target="_blank">
|
|
@@ -100,12 +85,12 @@ By default `<img>` elements are `inline` elements and will add a few pixels of s
|
|
|
100
85
|
```html
|
|
101
86
|
<auro-banner billboard>
|
|
102
87
|
<picture slot="displayImage">
|
|
103
|
-
<source srcset="https://picsum.photos/id/
|
|
104
|
-
<source srcset="https://picsum.photos/id/
|
|
105
|
-
<source srcset="https://picsum.photos/id/
|
|
106
|
-
<source srcset="https://picsum.photos/id/
|
|
107
|
-
<source srcset="https://picsum.photos/id/
|
|
108
|
-
<img src="https://picsum.photos/id/
|
|
88
|
+
<source srcset="https://picsum.photos/id/196/1124/800" media="(min-width: 1024px)">
|
|
89
|
+
<source srcset="https://picsum.photos/id/196/1124/1000" media="(min-width: 768px)">
|
|
90
|
+
<source srcset="https://picsum.photos/id/196/736/750" media="(min-width: 736px)">
|
|
91
|
+
<source srcset="https://picsum.photos/id/196/736/1400" media="(min-width: 375px)">
|
|
92
|
+
<source srcset="https://picsum.photos/id/196/320/700" media="(min-width: 320px)">
|
|
93
|
+
<img src="https://picsum.photos/id/196/225/550" alt="" />
|
|
109
94
|
</picture>
|
|
110
95
|
<img
|
|
111
96
|
slot="contentImage"
|
|
@@ -115,138 +100,8 @@ By default `<img>` elements are `inline` elements and will add a few pixels of s
|
|
|
115
100
|
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.
|
|
116
101
|
</p>
|
|
117
102
|
<auro-hyperlink
|
|
118
|
-
cta
|
|
119
|
-
secondary
|
|
120
|
-
href="/"
|
|
121
|
-
slot="action"
|
|
122
|
-
target="_blank">
|
|
123
|
-
More info
|
|
124
|
-
</auro-hyperlink>
|
|
125
|
-
</auro-banner>
|
|
126
|
-
```
|
|
127
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
128
|
-
</auro-accordion>
|
|
129
|
-
|
|
130
|
-
#### Billboard / slim / alignRight / appearance
|
|
131
|
-
|
|
132
|
-
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>`.
|
|
133
|
-
|
|
134
|
-
For the call-to-action button, see in the example code that it is required to set the `appearance="inverse"` attribute on the `<auro-hyperlink>` element itself. This is **not** controlled by the `<auro-banner>` element.
|
|
135
|
-
|
|
136
|
-
<div class="exampleWrapper">
|
|
137
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/billboardSeries.html) -->
|
|
138
|
-
<!-- The below content is automatically added from ../apiExamples/billboardSeries.html -->
|
|
139
|
-
<auro-banner billboard slim alignRight appearance="inverse">
|
|
140
|
-
<picture slot="displayImage">
|
|
141
|
-
<source srcset="https://picsum.photos/id/324/1124/800" media="(min-width: 1024px)">
|
|
142
|
-
<source srcset="https://picsum.photos/id/324/1124/1000" media="(min-width: 768px)">
|
|
143
|
-
<source srcset="https://picsum.photos/id/324/736/750" media="(min-width: 736px)">
|
|
144
|
-
<source srcset="https://picsum.photos/id/324/736/1400" media="(min-width: 375px)">
|
|
145
|
-
<source srcset="https://picsum.photos/id/324/320/700" media="(min-width: 320px)">
|
|
146
|
-
<img src="https://picsum.photos/id/324/225/550" alt="" />
|
|
147
|
-
</picture>
|
|
148
|
-
<auro-alaska official appearance="inverse" style="width: 192px" slot="contentImage"></auro-alaska>
|
|
149
|
-
<p slot="description">
|
|
150
|
-
<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>
|
|
151
|
-
</p>
|
|
152
|
-
<auro-hyperlink
|
|
153
|
-
cta
|
|
154
|
-
appearance="inverse"
|
|
155
|
-
href="/"
|
|
156
|
-
slot="action"
|
|
157
|
-
target="_blank">
|
|
158
|
-
Learn more
|
|
159
|
-
</auro-hyperlink>
|
|
160
|
-
</auro-banner>
|
|
161
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
162
|
-
</div>
|
|
163
|
-
<auro-accordion alignRight>
|
|
164
|
-
<span slot="trigger">See code</span>
|
|
165
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/billboardSeries.html) -->
|
|
166
|
-
<!-- The below code snippet is automatically added from ../apiExamples/billboardSeries.html -->
|
|
167
|
-
|
|
168
|
-
```html
|
|
169
|
-
<auro-banner billboard slim alignRight appearance="inverse">
|
|
170
|
-
<picture slot="displayImage">
|
|
171
|
-
<source srcset="https://picsum.photos/id/324/1124/800" media="(min-width: 1024px)">
|
|
172
|
-
<source srcset="https://picsum.photos/id/324/1124/1000" media="(min-width: 768px)">
|
|
173
|
-
<source srcset="https://picsum.photos/id/324/736/750" media="(min-width: 736px)">
|
|
174
|
-
<source srcset="https://picsum.photos/id/324/736/1400" media="(min-width: 375px)">
|
|
175
|
-
<source srcset="https://picsum.photos/id/324/320/700" media="(min-width: 320px)">
|
|
176
|
-
<img src="https://picsum.photos/id/324/225/550" alt="" />
|
|
177
|
-
</picture>
|
|
178
|
-
<auro-alaska official appearance="inverse" style="width: 192px" slot="contentImage"></auro-alaska>
|
|
179
|
-
<p slot="description">
|
|
180
|
-
<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>
|
|
181
|
-
</p>
|
|
182
|
-
<auro-hyperlink
|
|
183
|
-
cta
|
|
184
|
-
appearance="inverse"
|
|
185
|
-
href="/"
|
|
186
|
-
slot="action"
|
|
187
|
-
target="_blank">
|
|
188
|
-
Learn more
|
|
189
|
-
</auro-hyperlink>
|
|
190
|
-
</auro-banner>
|
|
191
|
-
```
|
|
192
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
193
|
-
</auro-accordion>
|
|
194
|
-
|
|
195
|
-
#### Billboard / slim / alignLeft / appearance
|
|
196
|
-
|
|
197
|
-
The following example illustrates an option to left align the text `alignLeft` along with `slim` to reduce the padding and `appearance="inverse"` to change the text to white.
|
|
198
|
-
|
|
199
|
-
<div class="exampleWrapper">
|
|
200
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/billboardSeriesLeft.html) -->
|
|
201
|
-
<!-- The below content is automatically added from ../apiExamples/billboardSeriesLeft.html -->
|
|
202
|
-
<auro-banner billboard slim alignLeft appearance="inverse">
|
|
203
|
-
<picture slot="displayImage">
|
|
204
|
-
<source srcset="https://picsum.photos/id/42/1124/800" media="(min-width: 1024px)">
|
|
205
|
-
<source srcset="https://picsum.photos/id/42/1124/1000" media="(min-width: 768px)">
|
|
206
|
-
<source srcset="https://picsum.photos/id/42/736/750" media="(min-width: 736px)">
|
|
207
|
-
<source srcset="https://picsum.photos/id/42/736/1400" media="(min-width: 375px)">
|
|
208
|
-
<source srcset="https://picsum.photos/id/42/320/700" media="(min-width: 320px)">
|
|
209
|
-
<img src="https://picsum.photos/id/42/225/550" alt="" />
|
|
210
|
-
</picture>
|
|
211
|
-
<span slot="title">Beverages and cocktails</span>
|
|
212
|
-
<p slot="description">
|
|
213
|
-
<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>
|
|
214
|
-
</p>
|
|
215
|
-
<auro-hyperlink
|
|
216
|
-
cta
|
|
217
|
-
secondary
|
|
218
|
-
appearance="inverse"
|
|
219
|
-
href="/"
|
|
220
|
-
slot="action"
|
|
221
|
-
target="_blank">
|
|
222
|
-
More info
|
|
223
|
-
</auro-hyperlink>
|
|
224
|
-
</auro-banner>
|
|
225
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
226
|
-
</div>
|
|
227
|
-
<auro-accordion alignRight>
|
|
228
|
-
<span slot="trigger">See code</span>
|
|
229
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/billboardSeriesLeft.html) -->
|
|
230
|
-
<!-- The below code snippet is automatically added from ../apiExamples/billboardSeriesLeft.html -->
|
|
231
|
-
|
|
232
|
-
```html
|
|
233
|
-
<auro-banner billboard slim alignLeft appearance="inverse">
|
|
234
|
-
<picture slot="displayImage">
|
|
235
|
-
<source srcset="https://picsum.photos/id/42/1124/800" media="(min-width: 1024px)">
|
|
236
|
-
<source srcset="https://picsum.photos/id/42/1124/1000" media="(min-width: 768px)">
|
|
237
|
-
<source srcset="https://picsum.photos/id/42/736/750" media="(min-width: 736px)">
|
|
238
|
-
<source srcset="https://picsum.photos/id/42/736/1400" media="(min-width: 375px)">
|
|
239
|
-
<source srcset="https://picsum.photos/id/42/320/700" media="(min-width: 320px)">
|
|
240
|
-
<img src="https://picsum.photos/id/42/225/550" alt="" />
|
|
241
|
-
</picture>
|
|
242
|
-
<span slot="title">Beverages and cocktails</span>
|
|
243
|
-
<p slot="description">
|
|
244
|
-
<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>
|
|
245
|
-
</p>
|
|
246
|
-
<auro-hyperlink
|
|
247
|
-
cta
|
|
248
|
-
secondary
|
|
249
|
-
appearance="inverse"
|
|
103
|
+
type="cta"
|
|
104
|
+
variant="secondary"
|
|
250
105
|
href="/"
|
|
251
106
|
slot="action"
|
|
252
107
|
target="_blank">
|
|
@@ -259,7 +114,7 @@ The following example illustrates an option to left align the text `alignLeft` a
|
|
|
259
114
|
|
|
260
115
|
### Hero
|
|
261
116
|
|
|
262
|
-
The following example illustrates
|
|
117
|
+
The following example illustrates the `hero` template style. This example also illustrates the use of the `prefix` slot.
|
|
263
118
|
|
|
264
119
|
<div class="exampleWrapper">
|
|
265
120
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/hero.html) -->
|
|
@@ -276,8 +131,7 @@ The following example illustrates a `<auro-banner>` custom element with the `her
|
|
|
276
131
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
277
132
|
</p>
|
|
278
133
|
<auro-hyperlink
|
|
279
|
-
cta
|
|
280
|
-
secondary
|
|
134
|
+
type="cta"
|
|
281
135
|
href="/"
|
|
282
136
|
slot="action"
|
|
283
137
|
target="_blank">
|
|
@@ -304,8 +158,7 @@ The following example illustrates a `<auro-banner>` custom element with the `her
|
|
|
304
158
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
305
159
|
</p>
|
|
306
160
|
<auro-hyperlink
|
|
307
|
-
cta
|
|
308
|
-
secondary
|
|
161
|
+
type="cta"
|
|
309
162
|
href="/"
|
|
310
163
|
slot="action"
|
|
311
164
|
target="_blank">
|
|
@@ -318,7 +171,9 @@ The following example illustrates a `<auro-banner>` custom element with the `her
|
|
|
318
171
|
|
|
319
172
|
### Iconic
|
|
320
173
|
|
|
321
|
-
The
|
|
174
|
+
The `iconic` template style hides the `displayImage` on small screen sizes and only shows the icon.
|
|
175
|
+
|
|
176
|
+
Use the `iconbg` attribute to add a background color to the icon container.
|
|
322
177
|
|
|
323
178
|
<div class="exampleWrapper">
|
|
324
179
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/iconic.html) -->
|
|
@@ -371,7 +226,7 @@ The following example illustrates a `<auro-banner>` custom element with the `ico
|
|
|
371
226
|
|
|
372
227
|
### Marquee
|
|
373
228
|
|
|
374
|
-
The following example illustrates
|
|
229
|
+
The following example illustrates the `marquee` template style. It also supports the `slim` and `appearance="inverse"` attributes.
|
|
375
230
|
|
|
376
231
|
<div class="exampleWrapper">
|
|
377
232
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/marquee.html) -->
|
|
@@ -388,8 +243,8 @@ The following example illustrates a `<auro-banner>` custom element with the `mar
|
|
|
388
243
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
389
244
|
</p>
|
|
390
245
|
<auro-hyperlink
|
|
391
|
-
cta
|
|
392
|
-
secondary
|
|
246
|
+
type="cta"
|
|
247
|
+
variant="secondary"
|
|
393
248
|
href="/"
|
|
394
249
|
slot="action"
|
|
395
250
|
target="_blank">
|
|
@@ -416,8 +271,8 @@ The following example illustrates a `<auro-banner>` custom element with the `mar
|
|
|
416
271
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
417
272
|
</p>
|
|
418
273
|
<auro-hyperlink
|
|
419
|
-
cta
|
|
420
|
-
secondary
|
|
274
|
+
type="cta"
|
|
275
|
+
variant="secondary"
|
|
421
276
|
href="/"
|
|
422
277
|
slot="action"
|
|
423
278
|
target="_blank">
|
|
@@ -428,25 +283,27 @@ The following example illustrates a `<auro-banner>` custom element with the `mar
|
|
|
428
283
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
429
284
|
</auro-accordion>
|
|
430
285
|
|
|
431
|
-
### Marquee
|
|
286
|
+
### Solid Marquee
|
|
432
287
|
|
|
433
288
|
The following example illustrates a `<auro-banner>` custom element with the `marquee solid` template style. With this configuration, `appearance="inverse"` is implied.
|
|
434
289
|
|
|
290
|
+
For content not wrapped in a designated slot, it is required to set the `appearance="inverse"` attribute manually. This is **not** controlled by the `<auro-banner>` element.
|
|
291
|
+
|
|
435
292
|
<div class="exampleWrapper">
|
|
436
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/
|
|
437
|
-
<!-- The below content is automatically added from ../apiExamples/
|
|
293
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/marquee-solid.html) -->
|
|
294
|
+
<!-- The below content is automatically added from ../apiExamples/marquee-solid.html -->
|
|
438
295
|
<auro-banner marquee solid>
|
|
439
296
|
<picture slot="displayImage">
|
|
440
297
|
<source srcset="https://picsum.photos/id/1015/1048/2000" media="(min-width: 1024px)">
|
|
441
298
|
<source srcset="https://picsum.photos/id/1015/736/1400" media="(min-width:660px)">
|
|
442
|
-
<img src="https://picsum.photos/id/1015/660/660" alt="">
|
|
299
|
+
<img src="https://picsum.photos/id/1015/660/660" alt="" style="display: block;">
|
|
443
300
|
</picture>
|
|
444
301
|
<auro-alaska official appearance="inverse" style="width: 192px" slot="contentImage"></auro-alaska>
|
|
445
302
|
<p slot="description">
|
|
446
303
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
447
304
|
</p>
|
|
448
305
|
<auro-hyperlink
|
|
449
|
-
cta
|
|
306
|
+
type="cta"
|
|
450
307
|
appearance="inverse"
|
|
451
308
|
href="/"
|
|
452
309
|
slot="action"
|
|
@@ -458,22 +315,22 @@ The following example illustrates a `<auro-banner>` custom element with the `mar
|
|
|
458
315
|
</div>
|
|
459
316
|
<auro-accordion alignRight>
|
|
460
317
|
<span slot="trigger">See code</span>
|
|
461
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/
|
|
462
|
-
<!-- The below code snippet is automatically added from ../apiExamples/
|
|
318
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/marquee-solid.html) -->
|
|
319
|
+
<!-- The below code snippet is automatically added from ../apiExamples/marquee-solid.html -->
|
|
463
320
|
|
|
464
321
|
```html
|
|
465
322
|
<auro-banner marquee solid>
|
|
466
323
|
<picture slot="displayImage">
|
|
467
324
|
<source srcset="https://picsum.photos/id/1015/1048/2000" media="(min-width: 1024px)">
|
|
468
325
|
<source srcset="https://picsum.photos/id/1015/736/1400" media="(min-width:660px)">
|
|
469
|
-
<img src="https://picsum.photos/id/1015/660/660" alt="">
|
|
326
|
+
<img src="https://picsum.photos/id/1015/660/660" alt="" style="display: block;">
|
|
470
327
|
</picture>
|
|
471
328
|
<auro-alaska official appearance="inverse" style="width: 192px" slot="contentImage"></auro-alaska>
|
|
472
329
|
<p slot="description">
|
|
473
330
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
474
331
|
</p>
|
|
475
332
|
<auro-hyperlink
|
|
476
|
-
cta
|
|
333
|
+
type="cta"
|
|
477
334
|
appearance="inverse"
|
|
478
335
|
href="/"
|
|
479
336
|
slot="action"
|
|
@@ -485,13 +342,13 @@ The following example illustrates a `<auro-banner>` custom element with the `mar
|
|
|
485
342
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
486
343
|
</auro-accordion>
|
|
487
344
|
|
|
488
|
-
###
|
|
345
|
+
### Rounded Border
|
|
489
346
|
|
|
490
|
-
The
|
|
347
|
+
The `roundedBorder` variant style adds a border with rounded corners around the banner content. With this configuration, no `displayImage` is used. Instead only the `contentImage` is used and the rest of the content is displayed in a row.
|
|
491
348
|
|
|
492
349
|
<div class="exampleWrapper">
|
|
493
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/
|
|
494
|
-
<!-- The below content is automatically added from ../apiExamples/
|
|
350
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/rounded-border.html) -->
|
|
351
|
+
<!-- The below content is automatically added from ../apiExamples/rounded-border.html -->
|
|
495
352
|
<auro-banner roundedBorder alignLeft>
|
|
496
353
|
<img src="https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4f70efe198086558/6633f3defda0c7c6c769b86b/visa_signature.svg" alt="" slot="contentImage" />
|
|
497
354
|
<span slot="prefix">Prefix - Limited Time</span>
|
|
@@ -503,8 +360,8 @@ The following example illustrates a `<auro-banner>` custom element with the `rou
|
|
|
503
360
|
* Disclaimer - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
504
361
|
</div>
|
|
505
362
|
<auro-hyperlink
|
|
506
|
-
cta
|
|
507
|
-
secondary
|
|
363
|
+
type="cta"
|
|
364
|
+
variant="secondary"
|
|
508
365
|
href="/"
|
|
509
366
|
slot="action"
|
|
510
367
|
target="_blank">
|
|
@@ -515,8 +372,8 @@ The following example illustrates a `<auro-banner>` custom element with the `rou
|
|
|
515
372
|
</div>
|
|
516
373
|
<auro-accordion alignRight>
|
|
517
374
|
<span slot="trigger">See code</span>
|
|
518
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/
|
|
519
|
-
<!-- The below code snippet is automatically added from ../apiExamples/
|
|
375
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/rounded-border.html) -->
|
|
376
|
+
<!-- The below code snippet is automatically added from ../apiExamples/rounded-border.html -->
|
|
520
377
|
|
|
521
378
|
```html
|
|
522
379
|
<auro-banner roundedBorder alignLeft>
|
|
@@ -530,8 +387,159 @@ The following example illustrates a `<auro-banner>` custom element with the `rou
|
|
|
530
387
|
* Disclaimer - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
531
388
|
</div>
|
|
532
389
|
<auro-hyperlink
|
|
533
|
-
cta
|
|
534
|
-
secondary
|
|
390
|
+
type="cta"
|
|
391
|
+
variant="secondary"
|
|
392
|
+
href="/"
|
|
393
|
+
slot="action"
|
|
394
|
+
target="_blank">
|
|
395
|
+
More info
|
|
396
|
+
</auro-hyperlink>
|
|
397
|
+
</auro-banner>
|
|
398
|
+
```
|
|
399
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
400
|
+
</auro-accordion>
|
|
401
|
+
|
|
402
|
+
## Slot Examples
|
|
403
|
+
|
|
404
|
+
#### Display Image Slot for Background
|
|
405
|
+
|
|
406
|
+
The `displayImage` slot is configured to work with the HTML [picture](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) element.
|
|
407
|
+
|
|
408
|
+
```html
|
|
409
|
+
<picture slot="displayImage">
|
|
410
|
+
<source srcset="https://picsum.photos/id/430/1024/600" media="(min-width: 736px)">
|
|
411
|
+
<source srcset="https://picsum.photos/id/430/736/1400" media="(min-width: 375px)">
|
|
412
|
+
<source srcset="https://picsum.photos/id/430/320/1200" media="(min-width: 320px)">
|
|
413
|
+
<img src="https://picsum.photos/id/430/225/550" alt="" />
|
|
414
|
+
</picture>
|
|
415
|
+
```
|
|
416
|
+
|
|
417
|
+
This allows the editor the utmost 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.
|
|
418
|
+
|
|
419
|
+
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>
|
|
420
|
+
|
|
421
|
+
## Common Usage Patterns & Functional Examples
|
|
422
|
+
|
|
423
|
+
#### Billboard / slim / alignRight / appearance
|
|
424
|
+
|
|
425
|
+
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>`.
|
|
426
|
+
|
|
427
|
+
<div class="exampleWrapper">
|
|
428
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/billboard-series.html) -->
|
|
429
|
+
<!-- The below content is automatically added from ../apiExamples/billboard-series.html -->
|
|
430
|
+
<auro-banner billboard slim alignRight appearance="inverse">
|
|
431
|
+
<picture slot="displayImage">
|
|
432
|
+
<source srcset="https://picsum.photos/id/324/1124/800" media="(min-width: 1024px)">
|
|
433
|
+
<source srcset="https://picsum.photos/id/324/1124/1000" media="(min-width: 768px)">
|
|
434
|
+
<source srcset="https://picsum.photos/id/324/736/750" media="(min-width: 736px)">
|
|
435
|
+
<source srcset="https://picsum.photos/id/324/736/1400" media="(min-width: 375px)">
|
|
436
|
+
<source srcset="https://picsum.photos/id/324/320/700" media="(min-width: 320px)">
|
|
437
|
+
<img src="https://picsum.photos/id/324/225/550" alt="" />
|
|
438
|
+
</picture>
|
|
439
|
+
<auro-alaska official appearance="inverse" style="width: 192px" slot="contentImage"></auro-alaska>
|
|
440
|
+
<p slot="description">
|
|
441
|
+
<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>
|
|
442
|
+
</p>
|
|
443
|
+
<auro-hyperlink
|
|
444
|
+
type="cta"
|
|
445
|
+
variant="secondary"
|
|
446
|
+
appearance="inverse"
|
|
447
|
+
href="/"
|
|
448
|
+
slot="action"
|
|
449
|
+
target="_blank">
|
|
450
|
+
Learn more
|
|
451
|
+
</auro-hyperlink>
|
|
452
|
+
</auro-banner>
|
|
453
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
454
|
+
</div>
|
|
455
|
+
<auro-accordion alignRight>
|
|
456
|
+
<span slot="trigger">See code</span>
|
|
457
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/billboard-series.html) -->
|
|
458
|
+
<!-- The below code snippet is automatically added from ../apiExamples/billboard-series.html -->
|
|
459
|
+
|
|
460
|
+
```html
|
|
461
|
+
<auro-banner billboard slim alignRight appearance="inverse">
|
|
462
|
+
<picture slot="displayImage">
|
|
463
|
+
<source srcset="https://picsum.photos/id/324/1124/800" media="(min-width: 1024px)">
|
|
464
|
+
<source srcset="https://picsum.photos/id/324/1124/1000" media="(min-width: 768px)">
|
|
465
|
+
<source srcset="https://picsum.photos/id/324/736/750" media="(min-width: 736px)">
|
|
466
|
+
<source srcset="https://picsum.photos/id/324/736/1400" media="(min-width: 375px)">
|
|
467
|
+
<source srcset="https://picsum.photos/id/324/320/700" media="(min-width: 320px)">
|
|
468
|
+
<img src="https://picsum.photos/id/324/225/550" alt="" />
|
|
469
|
+
</picture>
|
|
470
|
+
<auro-alaska official appearance="inverse" style="width: 192px" slot="contentImage"></auro-alaska>
|
|
471
|
+
<p slot="description">
|
|
472
|
+
<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>
|
|
473
|
+
</p>
|
|
474
|
+
<auro-hyperlink
|
|
475
|
+
type="cta"
|
|
476
|
+
variant="secondary"
|
|
477
|
+
appearance="inverse"
|
|
478
|
+
href="/"
|
|
479
|
+
slot="action"
|
|
480
|
+
target="_blank">
|
|
481
|
+
Learn more
|
|
482
|
+
</auro-hyperlink>
|
|
483
|
+
</auro-banner>
|
|
484
|
+
```
|
|
485
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
486
|
+
</auro-accordion>
|
|
487
|
+
|
|
488
|
+
#### Billboard / slim / alignLeft / appearance
|
|
489
|
+
|
|
490
|
+
The following example illustrates an option to left align the text `alignLeft` along with `slim` to reduce the padding and `appearance="inverse"` to change the text to white.
|
|
491
|
+
|
|
492
|
+
<div class="exampleWrapper">
|
|
493
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/billboard-series-left.html) -->
|
|
494
|
+
<!-- The below content is automatically added from ../apiExamples/billboard-series-left.html -->
|
|
495
|
+
<auro-banner billboard slim alignLeft appearance="inverse">
|
|
496
|
+
<picture slot="displayImage">
|
|
497
|
+
<source srcset="https://picsum.photos/id/42/1124/800" media="(min-width: 1024px)">
|
|
498
|
+
<source srcset="https://picsum.photos/id/42/1124/1000" media="(min-width: 768px)">
|
|
499
|
+
<source srcset="https://picsum.photos/id/42/736/750" media="(min-width: 736px)">
|
|
500
|
+
<source srcset="https://picsum.photos/id/42/736/1400" media="(min-width: 375px)">
|
|
501
|
+
<source srcset="https://picsum.photos/id/42/320/700" media="(min-width: 320px)">
|
|
502
|
+
<img src="https://picsum.photos/id/42/225/550" alt="" />
|
|
503
|
+
</picture>
|
|
504
|
+
<span slot="title">Beverages and cocktails</span>
|
|
505
|
+
<p slot="description">
|
|
506
|
+
<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>
|
|
507
|
+
</p>
|
|
508
|
+
<auro-hyperlink
|
|
509
|
+
type="cta"
|
|
510
|
+
variant="secondary"
|
|
511
|
+
appearance="inverse"
|
|
512
|
+
href="/"
|
|
513
|
+
slot="action"
|
|
514
|
+
target="_blank">
|
|
515
|
+
More info
|
|
516
|
+
</auro-hyperlink>
|
|
517
|
+
</auro-banner>
|
|
518
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
519
|
+
</div>
|
|
520
|
+
<auro-accordion alignRight>
|
|
521
|
+
<span slot="trigger">See code</span>
|
|
522
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/billboard-series-left.html) -->
|
|
523
|
+
<!-- The below code snippet is automatically added from ../apiExamples/billboard-series-left.html -->
|
|
524
|
+
|
|
525
|
+
```html
|
|
526
|
+
<auro-banner billboard slim alignLeft appearance="inverse">
|
|
527
|
+
<picture slot="displayImage">
|
|
528
|
+
<source srcset="https://picsum.photos/id/42/1124/800" media="(min-width: 1024px)">
|
|
529
|
+
<source srcset="https://picsum.photos/id/42/1124/1000" media="(min-width: 768px)">
|
|
530
|
+
<source srcset="https://picsum.photos/id/42/736/750" media="(min-width: 736px)">
|
|
531
|
+
<source srcset="https://picsum.photos/id/42/736/1400" media="(min-width: 375px)">
|
|
532
|
+
<source srcset="https://picsum.photos/id/42/320/700" media="(min-width: 320px)">
|
|
533
|
+
<img src="https://picsum.photos/id/42/225/550" alt="" />
|
|
534
|
+
</picture>
|
|
535
|
+
<span slot="title">Beverages and cocktails</span>
|
|
536
|
+
<p slot="description">
|
|
537
|
+
<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>
|
|
538
|
+
</p>
|
|
539
|
+
<auro-hyperlink
|
|
540
|
+
type="cta"
|
|
541
|
+
variant="secondary"
|
|
542
|
+
appearance="inverse"
|
|
535
543
|
href="/"
|
|
536
544
|
slot="action"
|
|
537
545
|
target="_blank">
|
|
@@ -542,12 +550,13 @@ The following example illustrates a `<auro-banner>` custom element with the `rou
|
|
|
542
550
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
543
551
|
</auro-accordion>
|
|
544
552
|
|
|
545
|
-
|
|
553
|
+
## Restyle Component with CSS Variables
|
|
546
554
|
|
|
547
|
-
The component may be restyled
|
|
555
|
+
The component may be restyled by changing the values of the following token(s).
|
|
548
556
|
|
|
549
|
-
<!--
|
|
550
|
-
<!--
|
|
557
|
+
<!-- Remove section if component does not have any component specific tokens -->
|
|
558
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
|
|
559
|
+
<!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
|
|
551
560
|
|
|
552
561
|
```scss
|
|
553
562
|
@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
|