@aurodesignsystem-dev/auro-tail 0.0.0-pr6.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/LICENSE +201 -0
- package/NOTICE +2 -0
- package/README.md +172 -0
- package/custom-elements.json +1331 -0
- package/demo/api.html +56 -0
- package/demo/api.js +1 -0
- package/demo/api.md +702 -0
- package/demo/api.min.js +4 -0
- package/demo/auro-tail-group.min.js +923 -0
- package/demo/index.html +56 -0
- package/demo/index.js +6 -0
- package/demo/index.md +103 -0
- package/demo/index.min.js +6 -0
- package/dist/auro-tail-group-Dy3qOCFd.js +184 -0
- package/dist/index.d.ts +192 -0
- package/dist/index.js +1 -0
- package/dist/registered.js +1 -0
- package/package.json +88 -0
package/demo/api.md
ADDED
|
@@ -0,0 +1,702 @@
|
|
|
1
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/api.md) -->
|
|
2
|
+
<!-- The below content is automatically added from ../docs/api.md -->
|
|
3
|
+
|
|
4
|
+
# auro-tail-group
|
|
5
|
+
|
|
6
|
+
The auro-tail-group element displays multiple auro-tail elements in a grouped layout.
|
|
7
|
+
|
|
8
|
+
### Properties & Attributes
|
|
9
|
+
|
|
10
|
+
| Properties | Attributes | Type | Default | Description |
|
|
11
|
+
| ----------- | ------------ | ---------------------------- | ------------ | ------------------------------------------------------------------------------------------ |
|
|
12
|
+
| borderColor | border-color | string \| undefined | undefined | Sets the border color for all child tails in the group. Does not apply to diagonal layout. |
|
|
13
|
+
| layout | layout | 'horizontal' \| 'diagonal' | 'horizontal' | Sets the layout direction for the group. |
|
|
14
|
+
| size | size | 'xs' \| 'sm' \| 'md' \| 'lg' | 'lg' | Sets the size for all child tails in the group. |
|
|
15
|
+
|
|
16
|
+
### Methods
|
|
17
|
+
|
|
18
|
+
| Name | Parameters | Return | Description |
|
|
19
|
+
| -------- | ------------------------------------------------------------------- | ------ | ------------------------------------------------- |
|
|
20
|
+
| register | `name` (string) - The name of element that you want to register to. | | This will register this element with the browser. |
|
|
21
|
+
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
# auro-tail
|
|
25
|
+
|
|
26
|
+
The auro-tail element displays Alaska, Hawaiian, and partner airline tail graphics for consistent visual representation across Auro applications.
|
|
27
|
+
|
|
28
|
+
### Properties & Attributes
|
|
29
|
+
|
|
30
|
+
| Properties | Attributes | Type | Default | Description |
|
|
31
|
+
| ------------------- | ------------ | --------------------------------------------- | --------- | ----------------------------------------------------------------------------------- |
|
|
32
|
+
| badge | badge | string \| undefined | undefined | Sets the badge type to display (e.g., 'oneworld'). |
|
|
33
|
+
| badgeConfig | | | | Returns badge config when eligible. |
|
|
34
|
+
| borderColor | border-color | string \| undefined | undefined | Sets the border color around the tail. |
|
|
35
|
+
| borderWidth | border-width | string \| undefined | undefined | Sets the border width around the tail. |
|
|
36
|
+
| hasBorder | | | | Checks if tail has border properties defined. |
|
|
37
|
+
| href | href | string \| undefined | undefined | Sets the href for the tail. |
|
|
38
|
+
| isInGroup | | | | Checks if this tail is inside an auro-tail-group element. |
|
|
39
|
+
| isInHorizontalGroup | | | | Checks if this tail is in a horizontal group layout. |
|
|
40
|
+
| labelTypeClass | | | | Gets the appropriate CSS type class based on tail size. |
|
|
41
|
+
| outline | outline | boolean | false | Renders the tail with an outline style. |
|
|
42
|
+
| shouldShowLink | | | | Checks if the tail should display as a clickable link. |
|
|
43
|
+
| size | size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' | 'lg' | Sets the size of the tail. |
|
|
44
|
+
| tail | tail | string | 'AS' | Sets the airline tail based on the tail codes used in auro-icon (e.g., AS, HA, PR). |
|
|
45
|
+
| variant | | | | Gets the carrier variant based on the current tail code. |
|
|
46
|
+
|
|
47
|
+
### Methods
|
|
48
|
+
|
|
49
|
+
| Name | Parameters | Return | Description |
|
|
50
|
+
| -------- | ------------------------------------------------------------------- | ------ | ------------------------------------------------- |
|
|
51
|
+
| register | `name` (string) - The name of element that you want to register to. | | This will register this element with the browser. |
|
|
52
|
+
|
|
53
|
+
### Events
|
|
54
|
+
|
|
55
|
+
| Name | Description |
|
|
56
|
+
| ---------- | ----------------------------------------- |
|
|
57
|
+
| href-click | Fired when the auro-hyperlink is clicked. |
|
|
58
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
59
|
+
|
|
60
|
+
## API Examples
|
|
61
|
+
|
|
62
|
+
### Attribute Examples
|
|
63
|
+
|
|
64
|
+
## Tail
|
|
65
|
+
|
|
66
|
+
Set the `tail` prop to insert a tail graphic from the `<auro-icon>` repository with the corresponding icon code.
|
|
67
|
+
|
|
68
|
+
Tail codes from `<auro-icon>` are expected to be UPPERCASE (e.g., `AS`, not `as`).
|
|
69
|
+
|
|
70
|
+
> For a full list of available tail graphics & corresponding codes, click here.
|
|
71
|
+
|
|
72
|
+
Certain properties are not available for all `tail` codes. See the table below for details.
|
|
73
|
+
|
|
74
|
+
| [tail](#tail) | Airline Name | `outline` | CSS Drop-shadow |
|
|
75
|
+
|---------|---------------------|---------|-------------|
|
|
76
|
+
| AS | Alaska Airlines | ✗ | ✓ |
|
|
77
|
+
| HA | Hawaiian Airlines | ✗ | ✓ |
|
|
78
|
+
| PR, FI, etc | Other airline (OA) | ✓ | ✗ |
|
|
79
|
+
|
|
80
|
+
<div class="exampleWrapper">
|
|
81
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/tail.html) -->
|
|
82
|
+
<!-- The below content is automatically added from ../apiExamples/tail.html -->
|
|
83
|
+
<auro-tail tail="AS"></auro-tail>
|
|
84
|
+
<auro-tail tail="HA"></auro-tail>
|
|
85
|
+
<auro-tail tail="PR"></auro-tail>
|
|
86
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
87
|
+
</div>
|
|
88
|
+
<auro-accordion alignRight>
|
|
89
|
+
<span slot="trigger">See code</span>
|
|
90
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/tail.html) -->
|
|
91
|
+
<!-- The below code snippet is automatically added from ../apiExamples/tail.html -->
|
|
92
|
+
|
|
93
|
+
```html
|
|
94
|
+
<auro-tail tail="AS"></auro-tail>
|
|
95
|
+
<auro-tail tail="HA"></auro-tail>
|
|
96
|
+
<auro-tail tail="PR"></auro-tail>
|
|
97
|
+
```
|
|
98
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
99
|
+
</auro-accordion>
|
|
100
|
+
|
|
101
|
+
## Size
|
|
102
|
+
|
|
103
|
+
Control the size of `<auro-tail>` with the `size` attribute.
|
|
104
|
+
|
|
105
|
+
Certain properties are not available for all `<auto-tail>` sizes. See the table below for details.
|
|
106
|
+
|
|
107
|
+
| Size | `href` | `badge` |
|
|
108
|
+
|------|-----------------|------------------|
|
|
109
|
+
| xs | ✗ | ✗ |
|
|
110
|
+
| sm | ✗ | ✗ |
|
|
111
|
+
| md | ✓ | ✓ |
|
|
112
|
+
| lg | ✓ | ✓ |
|
|
113
|
+
| xl | ✓ | ✓ |
|
|
114
|
+
| 2xl | ✓ | ✓ |
|
|
115
|
+
|
|
116
|
+
<div class="exampleWrapper">
|
|
117
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/sizes.html) -->
|
|
118
|
+
<!-- The below content is automatically added from ../apiExamples/sizes.html -->
|
|
119
|
+
<auro-tail tail="as" size="xs"></auro-tail>
|
|
120
|
+
<auro-tail tail="as" size="sm"></auro-tail>
|
|
121
|
+
<auro-tail tail="ha" size="md"></auro-tail>
|
|
122
|
+
<auro-tail tail="PR" size="lg"></auro-tail>
|
|
123
|
+
<auro-tail tail="as" size="xl"></auro-tail>
|
|
124
|
+
<auro-tail tail="ha" size="2xl"></auro-tail>
|
|
125
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
126
|
+
</div>
|
|
127
|
+
<auro-accordion alignRight>
|
|
128
|
+
<span slot="trigger">See code</span>
|
|
129
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/sizes.html) -->
|
|
130
|
+
<!-- The below code snippet is automatically added from ../apiExamples/sizes.html -->
|
|
131
|
+
|
|
132
|
+
```html
|
|
133
|
+
<auro-tail tail="as" size="xs"></auro-tail>
|
|
134
|
+
<auro-tail tail="as" size="sm"></auro-tail>
|
|
135
|
+
<auro-tail tail="ha" size="md"></auro-tail>
|
|
136
|
+
<auro-tail tail="PR" size="lg"></auro-tail>
|
|
137
|
+
<auro-tail tail="as" size="xl"></auro-tail>
|
|
138
|
+
<auro-tail tail="ha" size="2xl"></auro-tail>
|
|
139
|
+
```
|
|
140
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
141
|
+
</auro-accordion>
|
|
142
|
+
|
|
143
|
+
## Badge
|
|
144
|
+
|
|
145
|
+
Display predefined badges such as OneWorld Alliance using the `badge` attribute.
|
|
146
|
+
|
|
147
|
+
### Supported sizes:
|
|
148
|
+
- `md`, `lg`, `xl`, `2xl`
|
|
149
|
+
|
|
150
|
+
> `badge` prop is not displayed when in an `<auro-tail-group>`.
|
|
151
|
+
|
|
152
|
+
<div class="exampleWrapper">
|
|
153
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/badges.html) -->
|
|
154
|
+
<!-- The below content is automatically added from ../apiExamples/badges.html -->
|
|
155
|
+
<auro-tail tail="FI" size="xs" badge="oneworld"></auro-tail>
|
|
156
|
+
<auro-tail tail="PR" size="sm" badge="oneworld"></auro-tail>
|
|
157
|
+
<auro-tail tail="AS" size="md" badge="oneworld"></auro-tail>
|
|
158
|
+
<auro-tail tail="AS" size="lg" badge="oneworld"></auro-tail>
|
|
159
|
+
<auro-tail tail="AS" size="xl" badge="oneworld"></auro-tail>
|
|
160
|
+
<auro-tail tail="AS" size="2xl" badge="oneworld"></auro-tail>
|
|
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/badges.html) -->
|
|
166
|
+
<!-- The below code snippet is automatically added from ../apiExamples/badges.html -->
|
|
167
|
+
|
|
168
|
+
```html
|
|
169
|
+
<auro-tail tail="FI" size="xs" badge="oneworld"></auro-tail>
|
|
170
|
+
<auro-tail tail="PR" size="sm" badge="oneworld"></auro-tail>
|
|
171
|
+
<auro-tail tail="AS" size="md" badge="oneworld"></auro-tail>
|
|
172
|
+
<auro-tail tail="AS" size="lg" badge="oneworld"></auro-tail>
|
|
173
|
+
<auro-tail tail="AS" size="xl" badge="oneworld"></auro-tail>
|
|
174
|
+
<auro-tail tail="AS" size="2xl" badge="oneworld"></auro-tail>
|
|
175
|
+
```
|
|
176
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
177
|
+
</auro-accordion>
|
|
178
|
+
|
|
179
|
+
## Borders
|
|
180
|
+
|
|
181
|
+
Optional border ring around `<auro-tail>`.
|
|
182
|
+
|
|
183
|
+
- Displays if either are set:
|
|
184
|
+
- `border-width`
|
|
185
|
+
- Aaccepts pixel values, with or without the `px` unit (e.g., `"4"` or `"4px"`)
|
|
186
|
+
- Other units (rem, em, %, CSS variables) are ignored
|
|
187
|
+
- Default width: `4px` when `border-color` is specified
|
|
188
|
+
- `border-color`
|
|
189
|
+
- Accepts any valid CSS color value:
|
|
190
|
+
- Hex: `#FF1493`
|
|
191
|
+
- Named colors: `"hotpink"`
|
|
192
|
+
- RGB/RGBA: `rgb(255, 20, 147)`, `rgba(255, 20, 147, 0.5)`
|
|
193
|
+
- HSL: `hsl(328, 100%, 54%)`
|
|
194
|
+
- CSS variables: `var(--custom-color)`
|
|
195
|
+
- Default color: `rgba(88, 94, 103, 1)` when `border-width` is specified
|
|
196
|
+
- `border-width` & `border-color` can be used in combination
|
|
197
|
+
|
|
198
|
+
<div class="exampleWrapper">
|
|
199
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/borders.html) -->
|
|
200
|
+
<!-- The below content is automatically added from ../apiExamples/borders.html -->
|
|
201
|
+
<auro-tail tail="HA" border-width="2"></auro-tail>
|
|
202
|
+
<auro-tail tail="HA" border-color="#FF1493"></auro-tail>
|
|
203
|
+
<auro-tail tail="PR" border-color="red" border-width="5px"></auro-tail>
|
|
204
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
205
|
+
</div>
|
|
206
|
+
<auro-accordion alignRight>
|
|
207
|
+
<span slot="trigger">See code</span>
|
|
208
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/borders.html) -->
|
|
209
|
+
<!-- The below code snippet is automatically added from ../apiExamples/borders.html -->
|
|
210
|
+
|
|
211
|
+
```html
|
|
212
|
+
<auro-tail tail="HA" border-width="2"></auro-tail>
|
|
213
|
+
<auro-tail tail="HA" border-color="#FF1493"></auro-tail>
|
|
214
|
+
<auro-tail tail="PR" border-color="red" border-width="5px"></auro-tail>
|
|
215
|
+
```
|
|
216
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
217
|
+
</auro-accordion>
|
|
218
|
+
|
|
219
|
+
## Outline
|
|
220
|
+
|
|
221
|
+
Set the `outline` boolean prop to add an outline around the tail graphic.
|
|
222
|
+
|
|
223
|
+
- Outlines apply only to partner (OA) tails
|
|
224
|
+
- AAG tails (AS & HA) never feature outlines
|
|
225
|
+
- Width & color are predefined and not customizable
|
|
226
|
+
|
|
227
|
+
<div class="exampleWrapper">
|
|
228
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/outline.html) -->
|
|
229
|
+
<!-- The below content is automatically added from ../apiExamples/outline.html -->
|
|
230
|
+
<auro-tail tail="FI" outline></auro-tail>
|
|
231
|
+
<auro-tail tail="PR" outline></auro-tail>
|
|
232
|
+
<!--Does not apply to AAG carriers such as AS & HS-->
|
|
233
|
+
<auro-tail tail="HA" outline></auro-tail>
|
|
234
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
235
|
+
</div>
|
|
236
|
+
<auro-accordion alignRight>
|
|
237
|
+
<span slot="trigger">See code</span>
|
|
238
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/outline.html) -->
|
|
239
|
+
<!-- The below code snippet is automatically added from ../apiExamples/outline.html -->
|
|
240
|
+
|
|
241
|
+
```html
|
|
242
|
+
<auro-tail tail="FI" outline></auro-tail>
|
|
243
|
+
<auro-tail tail="PR" outline></auro-tail>
|
|
244
|
+
<!--Does not apply to AAG carriers such as AS & HS-->
|
|
245
|
+
<auro-tail tail="HA" outline></auro-tail>
|
|
246
|
+
```
|
|
247
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
248
|
+
</auro-accordion>
|
|
249
|
+
|
|
250
|
+
## Hyperlink
|
|
251
|
+
|
|
252
|
+
Make tails clickable by adding an `href` attribute. This displays a clickable link below the tail using the `<auro-hyperlink>` component.
|
|
253
|
+
|
|
254
|
+
### Supported sizes:
|
|
255
|
+
- `md`, `lg`, `xl`, `2xl`
|
|
256
|
+
|
|
257
|
+
### Customizing the label:
|
|
258
|
+
- Use the `display` slot to provide custom link text
|
|
259
|
+
- If no `slot` is provided, a default label is inserted automatically
|
|
260
|
+
|
|
261
|
+
```html
|
|
262
|
+
<auro-tail tail="HA" size="md" href="https://hawaiianairlines.com/">
|
|
263
|
+
<span slot="display">Hawaiian Airlines</span>
|
|
264
|
+
</auro-tail>
|
|
265
|
+
```
|
|
266
|
+
|
|
267
|
+
<div class="exampleWrapper">
|
|
268
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/links.html) -->
|
|
269
|
+
<!-- The below content is automatically added from ../apiExamples/links.html -->
|
|
270
|
+
<auro-tail tail="HA" size="xs" href="https://hawaiianairlines.com/">
|
|
271
|
+
<span slot="display">Hawaiian Airlines</span>
|
|
272
|
+
</auro-tail>
|
|
273
|
+
<auro-tail tail="HA" size="sm" href="https://hawaiianairlines.com/">
|
|
274
|
+
<span slot="display">Hawaiian Airlines</span>
|
|
275
|
+
</auro-tail>
|
|
276
|
+
<auro-tail tail="HA" size="md" href="https://hawaiianairlines.com/">
|
|
277
|
+
<span slot="display">Hawaiian Airlines</span>
|
|
278
|
+
</auro-tail>
|
|
279
|
+
<auro-tail tail="PR" size="lg" href="https://philippineairlines.com/">
|
|
280
|
+
<span slot="display">Philippine Airlines</span>
|
|
281
|
+
</auro-tail>
|
|
282
|
+
<auro-tail tail="HA" size="xl" href="https://hawaiianairlines.com/">
|
|
283
|
+
<span slot="display">Hawaiian Airlines</span>
|
|
284
|
+
</auro-tail>
|
|
285
|
+
<!--No slot passed, default display text will be used-->
|
|
286
|
+
<auro-tail tail="AS" size="2xl" href="https://alaskaair.com/"></auro-tail>
|
|
287
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
288
|
+
</div>
|
|
289
|
+
<auro-accordion alignRight>
|
|
290
|
+
<span slot="trigger">See code</span>
|
|
291
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/links.html) -->
|
|
292
|
+
<!-- The below code snippet is automatically added from ../apiExamples/links.html -->
|
|
293
|
+
|
|
294
|
+
```html
|
|
295
|
+
<auro-tail tail="HA" size="xs" href="https://hawaiianairlines.com/">
|
|
296
|
+
<span slot="display">Hawaiian Airlines</span>
|
|
297
|
+
</auro-tail>
|
|
298
|
+
<auro-tail tail="HA" size="sm" href="https://hawaiianairlines.com/">
|
|
299
|
+
<span slot="display">Hawaiian Airlines</span>
|
|
300
|
+
</auro-tail>
|
|
301
|
+
<auro-tail tail="HA" size="md" href="https://hawaiianairlines.com/">
|
|
302
|
+
<span slot="display">Hawaiian Airlines</span>
|
|
303
|
+
</auro-tail>
|
|
304
|
+
<auro-tail tail="PR" size="lg" href="https://philippineairlines.com/">
|
|
305
|
+
<span slot="display">Philippine Airlines</span>
|
|
306
|
+
</auro-tail>
|
|
307
|
+
<auro-tail tail="HA" size="xl" href="https://hawaiianairlines.com/">
|
|
308
|
+
<span slot="display">Hawaiian Airlines</span>
|
|
309
|
+
</auro-tail>
|
|
310
|
+
<!--No slot passed, default display text will be used-->
|
|
311
|
+
<auro-tail tail="AS" size="2xl" href="https://alaskaair.com/"></auro-tail>
|
|
312
|
+
```
|
|
313
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
314
|
+
</auro-accordion>
|
|
315
|
+
|
|
316
|
+
## Group
|
|
317
|
+
Use `<auro-tail-group>` to display paired `<auro-tail>` components in a group layout with specific behavioral constraints and visual treatments.
|
|
318
|
+
|
|
319
|
+
### Supported sizes:
|
|
320
|
+
- `xs`, `sm`, `md`, `lg`
|
|
321
|
+
|
|
322
|
+
### Limitations
|
|
323
|
+
* **Maximum Display Count:** Only 2 avatars will be displayed in any group
|
|
324
|
+
* **Size Override:** The group's `size` property will override individual `<auro-tail>` `size` properties
|
|
325
|
+
* **Suppressed Features:**
|
|
326
|
+
* `badge` will not be shown
|
|
327
|
+
* `href` will not be displayed
|
|
328
|
+
|
|
329
|
+
### Diagonal
|
|
330
|
+
|
|
331
|
+
> `border-width`, and `border-color` props are not applicable and will be ignored.
|
|
332
|
+
|
|
333
|
+
<div class="exampleWrapper">
|
|
334
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/group-diagonal.html) -->
|
|
335
|
+
<!-- The below content is automatically added from ../apiExamples/group-diagonal.html -->
|
|
336
|
+
<auro-tail-group layout="diagonal" size="xs" border-width="10px" border-color="pink">
|
|
337
|
+
<auro-tail tail="as"></auro-tail>
|
|
338
|
+
<auro-tail tail="ha"></auro-tail>
|
|
339
|
+
</auro-tail-group>
|
|
340
|
+
<auro-tail-group layout="diagonal" size="sm">
|
|
341
|
+
<auro-tail tail="as"></auro-tail>
|
|
342
|
+
<auro-tail tail="ha"></auro-tail>
|
|
343
|
+
</auro-tail-group>
|
|
344
|
+
<auro-tail-group layout="diagonal" size="md">
|
|
345
|
+
<auro-tail tail="as"></auro-tail>
|
|
346
|
+
<auro-tail tail="ha"></auro-tail>
|
|
347
|
+
</auro-tail-group>
|
|
348
|
+
<auro-tail-group layout="diagonal" size="lg">
|
|
349
|
+
<auro-tail tail="as"></auro-tail>
|
|
350
|
+
<auro-tail tail="ha"></auro-tail>
|
|
351
|
+
</auro-tail-group>
|
|
352
|
+
<!-- Demonstration: The following sizes are not supported and will be hidden -->
|
|
353
|
+
<auro-tail-group layout="diagonal" size="xl">
|
|
354
|
+
<auro-tail tail="as"></auro-tail>
|
|
355
|
+
<auro-tail tail="ha"></auro-tail>
|
|
356
|
+
</auro-tail-group>
|
|
357
|
+
<auro-tail-group layout="diagonal" size="2xl">
|
|
358
|
+
<auro-tail tail="as"></auro-tail>
|
|
359
|
+
<auro-tail tail="ha"></auro-tail>
|
|
360
|
+
</auro-tail-group>
|
|
361
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
362
|
+
</div>
|
|
363
|
+
<auro-accordion alignRight>
|
|
364
|
+
<span slot="trigger">See code</span>
|
|
365
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/group-diagonal.html) -->
|
|
366
|
+
<!-- The below code snippet is automatically added from ../apiExamples/group-diagonal.html -->
|
|
367
|
+
|
|
368
|
+
```html
|
|
369
|
+
<auro-tail-group layout="diagonal" size="xs" border-width="10px" border-color="pink">
|
|
370
|
+
<auro-tail tail="as"></auro-tail>
|
|
371
|
+
<auro-tail tail="ha"></auro-tail>
|
|
372
|
+
</auro-tail-group>
|
|
373
|
+
<auro-tail-group layout="diagonal" size="sm">
|
|
374
|
+
<auro-tail tail="as"></auro-tail>
|
|
375
|
+
<auro-tail tail="ha"></auro-tail>
|
|
376
|
+
</auro-tail-group>
|
|
377
|
+
<auro-tail-group layout="diagonal" size="md">
|
|
378
|
+
<auro-tail tail="as"></auro-tail>
|
|
379
|
+
<auro-tail tail="ha"></auro-tail>
|
|
380
|
+
</auro-tail-group>
|
|
381
|
+
<auro-tail-group layout="diagonal" size="lg">
|
|
382
|
+
<auro-tail tail="as"></auro-tail>
|
|
383
|
+
<auro-tail tail="ha"></auro-tail>
|
|
384
|
+
</auro-tail-group>
|
|
385
|
+
<!-- Demonstration: The following sizes are not supported and will be hidden -->
|
|
386
|
+
<auro-tail-group layout="diagonal" size="xl">
|
|
387
|
+
<auro-tail tail="as"></auro-tail>
|
|
388
|
+
<auro-tail tail="ha"></auro-tail>
|
|
389
|
+
</auro-tail-group>
|
|
390
|
+
<auro-tail-group layout="diagonal" size="2xl">
|
|
391
|
+
<auro-tail tail="as"></auro-tail>
|
|
392
|
+
<auro-tail tail="ha"></auro-tail>
|
|
393
|
+
</auro-tail-group>
|
|
394
|
+
```
|
|
395
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
396
|
+
</auro-accordion>
|
|
397
|
+
|
|
398
|
+
### Horizontal
|
|
399
|
+
|
|
400
|
+
> `border-width` prop is not applicable and will be ignored.
|
|
401
|
+
|
|
402
|
+
<div class="exampleWrapper">
|
|
403
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/group-horizontal.html) -->
|
|
404
|
+
<!-- The below content is automatically added from ../apiExamples/group-horizontal.html -->
|
|
405
|
+
<auro-tail-group layout="horizontal" size="xs" border-width="10px">
|
|
406
|
+
<auro-tail tail="as"></auro-tail>
|
|
407
|
+
<auro-tail tail="ha"></auro-tail>
|
|
408
|
+
</auro-tail-group>
|
|
409
|
+
<auro-tail-group layout="horizontal" size="sm">
|
|
410
|
+
<auro-tail tail="as"></auro-tail>
|
|
411
|
+
<auro-tail tail="ha"></auro-tail>
|
|
412
|
+
</auro-tail-group>
|
|
413
|
+
<auro-tail-group layout="horizontal" size="md">
|
|
414
|
+
<auro-tail tail="as"></auro-tail>
|
|
415
|
+
<auro-tail tail="ha"></auro-tail>
|
|
416
|
+
</auro-tail-group>
|
|
417
|
+
<auro-tail-group layout="horizontal" size="lg">
|
|
418
|
+
<auro-tail tail="as"></auro-tail>
|
|
419
|
+
<auro-tail tail="ha"></auro-tail>
|
|
420
|
+
</auro-tail-group>
|
|
421
|
+
<!-- Demonstration: The following sizes are not supported and will be hidden -->
|
|
422
|
+
<auro-tail-group layout="horizontal" size="xl">
|
|
423
|
+
<auro-tail tail="as"></auro-tail>
|
|
424
|
+
<auro-tail tail="ha"></auro-tail>
|
|
425
|
+
</auro-tail-group>
|
|
426
|
+
<auro-tail-group layout="horizontal" size="2xl">
|
|
427
|
+
<auro-tail tail="as"></auro-tail>
|
|
428
|
+
<auro-tail tail="ha"></auro-tail>
|
|
429
|
+
</auro-tail-group>
|
|
430
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
431
|
+
</div>
|
|
432
|
+
<auro-accordion alignRight>
|
|
433
|
+
<span slot="trigger">See code</span>
|
|
434
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/group-horizontal.html) -->
|
|
435
|
+
<!-- The below code snippet is automatically added from ../apiExamples/group-horizontal.html -->
|
|
436
|
+
|
|
437
|
+
```html
|
|
438
|
+
<auro-tail-group layout="horizontal" size="xs" border-width="10px">
|
|
439
|
+
<auro-tail tail="as"></auro-tail>
|
|
440
|
+
<auro-tail tail="ha"></auro-tail>
|
|
441
|
+
</auro-tail-group>
|
|
442
|
+
<auro-tail-group layout="horizontal" size="sm">
|
|
443
|
+
<auro-tail tail="as"></auro-tail>
|
|
444
|
+
<auro-tail tail="ha"></auro-tail>
|
|
445
|
+
</auro-tail-group>
|
|
446
|
+
<auro-tail-group layout="horizontal" size="md">
|
|
447
|
+
<auro-tail tail="as"></auro-tail>
|
|
448
|
+
<auro-tail tail="ha"></auro-tail>
|
|
449
|
+
</auro-tail-group>
|
|
450
|
+
<auro-tail-group layout="horizontal" size="lg">
|
|
451
|
+
<auro-tail tail="as"></auro-tail>
|
|
452
|
+
<auro-tail tail="ha"></auro-tail>
|
|
453
|
+
</auro-tail-group>
|
|
454
|
+
<!-- Demonstration: The following sizes are not supported and will be hidden -->
|
|
455
|
+
<auro-tail-group layout="horizontal" size="xl">
|
|
456
|
+
<auro-tail tail="as"></auro-tail>
|
|
457
|
+
<auro-tail tail="ha"></auro-tail>
|
|
458
|
+
</auro-tail-group>
|
|
459
|
+
<auro-tail-group layout="horizontal" size="2xl">
|
|
460
|
+
<auro-tail tail="as"></auro-tail>
|
|
461
|
+
<auro-tail tail="ha"></auro-tail>
|
|
462
|
+
</auro-tail-group>
|
|
463
|
+
```
|
|
464
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
465
|
+
</auro-accordion>
|
|
466
|
+
|
|
467
|
+
#### Horizontal with `border-color`:
|
|
468
|
+
|
|
469
|
+
<div class="exampleWrapper">
|
|
470
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/group-horizontal-border.html) -->
|
|
471
|
+
<!-- The below content is automatically added from ../apiExamples/group-horizontal-border.html -->
|
|
472
|
+
<auro-tail-group layout="horizontal" size="xs" border-color="red">
|
|
473
|
+
<auro-tail tail="as"></auro-tail>
|
|
474
|
+
<auro-tail tail="ha"></auro-tail>
|
|
475
|
+
</auro-tail-group>
|
|
476
|
+
<auro-tail-group layout="horizontal" size="sm" border-color="orange">
|
|
477
|
+
<auro-tail tail="as"></auro-tail>
|
|
478
|
+
<auro-tail tail="ha"></auro-tail>
|
|
479
|
+
</auro-tail-group>
|
|
480
|
+
<auro-tail-group layout="horizontal" size="md" border-color="pink">
|
|
481
|
+
<auro-tail tail="as"></auro-tail>
|
|
482
|
+
<auro-tail tail="ha"></auro-tail>
|
|
483
|
+
</auro-tail-group>
|
|
484
|
+
<auro-tail-group layout="horizontal" size="lg" border-color="purple" border-width="10px">
|
|
485
|
+
<auro-tail tail="as"></auro-tail>
|
|
486
|
+
<auro-tail tail="ha"></auro-tail>
|
|
487
|
+
</auro-tail-group>
|
|
488
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
489
|
+
</div>
|
|
490
|
+
<auro-accordion alignRight>
|
|
491
|
+
<span slot="trigger">See code</span>
|
|
492
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/group-horizontal-border.html) -->
|
|
493
|
+
<!-- The below code snippet is automatically added from ../apiExamples/group-horizontal-border.html -->
|
|
494
|
+
|
|
495
|
+
```html
|
|
496
|
+
<auro-tail-group layout="horizontal" size="xs" border-color="red">
|
|
497
|
+
<auro-tail tail="as"></auro-tail>
|
|
498
|
+
<auro-tail tail="ha"></auro-tail>
|
|
499
|
+
</auro-tail-group>
|
|
500
|
+
<auro-tail-group layout="horizontal" size="sm" border-color="orange">
|
|
501
|
+
<auro-tail tail="as"></auro-tail>
|
|
502
|
+
<auro-tail tail="ha"></auro-tail>
|
|
503
|
+
</auro-tail-group>
|
|
504
|
+
<auro-tail-group layout="horizontal" size="md" border-color="pink">
|
|
505
|
+
<auro-tail tail="as"></auro-tail>
|
|
506
|
+
<auro-tail tail="ha"></auro-tail>
|
|
507
|
+
</auro-tail-group>
|
|
508
|
+
<auro-tail-group layout="horizontal" size="lg" border-color="purple" border-width="10px">
|
|
509
|
+
<auro-tail tail="as"></auro-tail>
|
|
510
|
+
<auro-tail tail="ha"></auro-tail>
|
|
511
|
+
</auro-tail-group>
|
|
512
|
+
```
|
|
513
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
514
|
+
</auro-accordion>
|
|
515
|
+
|
|
516
|
+
### Theme Support
|
|
517
|
+
|
|
518
|
+
The component may be restyled using the following code sample and changing the values of the following token(s).
|
|
519
|
+
|
|
520
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../src/styles/tokens.scss) -->
|
|
521
|
+
<!-- The below code snippet is automatically added from ../src/styles/tokens.scss -->
|
|
522
|
+
|
|
523
|
+
```scss
|
|
524
|
+
@use 'sass:string';
|
|
525
|
+
@use 'sass:map';
|
|
526
|
+
@use 'sass:list';
|
|
527
|
+
|
|
528
|
+
/* Constants */
|
|
529
|
+
$tail-sizes: (xs, sm, md, lg, xl, 2xl);
|
|
530
|
+
$tail-sizes-with-badge: (md, lg, xl, 2xl);
|
|
531
|
+
$tail-sizes-with-href: (md, lg, xl, 2xl);
|
|
532
|
+
$tail-group-sizes: (xs, sm, md, lg);
|
|
533
|
+
$tail-variants: (as, ha, oa);
|
|
534
|
+
|
|
535
|
+
/* Size Maps */
|
|
536
|
+
$avatar-width: (
|
|
537
|
+
'xs': 24px,
|
|
538
|
+
'sm': 32px,
|
|
539
|
+
'md': 48px,
|
|
540
|
+
'lg': 60px,
|
|
541
|
+
'xl': 96px,
|
|
542
|
+
'2xl': 134px
|
|
543
|
+
);
|
|
544
|
+
|
|
545
|
+
$tail-width: (
|
|
546
|
+
'xs': 19px,
|
|
547
|
+
'sm': 26px,
|
|
548
|
+
'md': 39px,
|
|
549
|
+
'lg': 48px,
|
|
550
|
+
'xl': 77px,
|
|
551
|
+
'2xl': 107px
|
|
552
|
+
);
|
|
553
|
+
|
|
554
|
+
/* Adjust vertical offset to visually center tail icon within circular avatar */
|
|
555
|
+
$tail-offset-y: (
|
|
556
|
+
'xs': 3px,
|
|
557
|
+
'sm': 4px,
|
|
558
|
+
'md': 6px,
|
|
559
|
+
'lg': 7px,
|
|
560
|
+
'xl': 13px,
|
|
561
|
+
'2xl': 17px
|
|
562
|
+
);
|
|
563
|
+
|
|
564
|
+
$href-label-gap: (
|
|
565
|
+
'md': 2px,
|
|
566
|
+
'lg': 4px,
|
|
567
|
+
'xl': 6px,
|
|
568
|
+
'2xl': 8px
|
|
569
|
+
);
|
|
570
|
+
|
|
571
|
+
$badge-width: (
|
|
572
|
+
'md': 11px,
|
|
573
|
+
'lg': 14px,
|
|
574
|
+
'xl': 22px,
|
|
575
|
+
'2xl': 31px
|
|
576
|
+
);
|
|
577
|
+
|
|
578
|
+
$group-diagonal-width: (
|
|
579
|
+
'xs': 42px,
|
|
580
|
+
'sm': 56px,
|
|
581
|
+
'md': 84px,
|
|
582
|
+
'lg': 105px
|
|
583
|
+
);
|
|
584
|
+
|
|
585
|
+
/* Group - Horizontal Map */
|
|
586
|
+
$group-horizontal: (
|
|
587
|
+
'lg': (border-width: 4px, overlap: -10px),
|
|
588
|
+
'md': (border-width: 4px, overlap: -6px),
|
|
589
|
+
'sm': (border-width: 3px, overlap: -2px),
|
|
590
|
+
'xs': (border-width: 3px, overlap: -2px)
|
|
591
|
+
);
|
|
592
|
+
|
|
593
|
+
/* Token Definitions */
|
|
594
|
+
:host {
|
|
595
|
+
/* Host dimensions to match container */
|
|
596
|
+
width: var(--avatar-width);
|
|
597
|
+
height: var(--avatar-width);
|
|
598
|
+
min-width: var(--avatar-width);
|
|
599
|
+
|
|
600
|
+
/* Default Values */
|
|
601
|
+
--avatar-width: var(--avatar-width-lg);
|
|
602
|
+
--avatar-gradient: var(--gradient-oa);
|
|
603
|
+
--tail-width: var(--tail-width-lg);
|
|
604
|
+
--tail-offset-y: var(--tail-offset-y-lg);
|
|
605
|
+
--href-label-gap: var(--href-label-gap-lg);
|
|
606
|
+
--badge-width: var(--badge-width-lg);
|
|
607
|
+
|
|
608
|
+
/* Border defaults */
|
|
609
|
+
--border-color-default: rgba(88, 94, 103, 1);
|
|
610
|
+
--border-color-white: #ffffff;
|
|
611
|
+
--border-width-default: 4px;
|
|
612
|
+
--border-display: none;
|
|
613
|
+
--border-padding: 0;
|
|
614
|
+
--border-radius-full: 999px;
|
|
615
|
+
|
|
616
|
+
/* Tail outline defaults */
|
|
617
|
+
--tail-outline-color: var(--border-color-default);
|
|
618
|
+
--tail-outline-width: 1px;
|
|
619
|
+
|
|
620
|
+
/* Avatar Gradients */
|
|
621
|
+
--gradient-as: linear-gradient(180deg, #6899C6 0%, #CFE0EF 100%);
|
|
622
|
+
--gradient-ha: linear-gradient(181deg, #CCB7ED -6.38%, #F9C2E7 99.46%);
|
|
623
|
+
--gradient-oa: linear-gradient(181deg, #C5D0D9 -6.38%, #E8F1F8 99.46%);
|
|
624
|
+
|
|
625
|
+
/* Drop Shadow */
|
|
626
|
+
--tail-drop-shadow: drop-shadow(0 3px 3px rgba(0,0,0,.24)) drop-shadow(0 6px 14px rgba(0,0,0,.24));
|
|
627
|
+
|
|
628
|
+
/* Tail default z-index */
|
|
629
|
+
--z-index-border: 1;
|
|
630
|
+
--z-index-badge: 2;
|
|
631
|
+
|
|
632
|
+
/* Group z-index */
|
|
633
|
+
--z-index-group-back: 1;
|
|
634
|
+
--z-index-group-front: 2;
|
|
635
|
+
|
|
636
|
+
/* Badge transform defaults */
|
|
637
|
+
--badge-translate-x: 0;
|
|
638
|
+
--badge-translate-y: 0;
|
|
639
|
+
|
|
640
|
+
/* Generate Tail size-based tokens */
|
|
641
|
+
@each $property, $map in (
|
|
642
|
+
'avatar-width': $avatar-width,
|
|
643
|
+
'tail-width': $tail-width,
|
|
644
|
+
'tail-offset-y': $tail-offset-y,
|
|
645
|
+
'href-label-gap': $href-label-gap,
|
|
646
|
+
'badge-width': $badge-width
|
|
647
|
+
) {
|
|
648
|
+
@each $tailSize, $value in $map {
|
|
649
|
+
--#{$property}-#{$tailSize}: #{$value};
|
|
650
|
+
}
|
|
651
|
+
}
|
|
652
|
+
|
|
653
|
+
/* Generate Group - Diagonal tokens */
|
|
654
|
+
@each $groupSize, $value in $group-diagonal-width {
|
|
655
|
+
--group-diagonal-width-#{$groupSize}: #{$value};
|
|
656
|
+
}
|
|
657
|
+
|
|
658
|
+
/* Generate Group - Horizontal tokens */
|
|
659
|
+
@each $size in $tail-group-sizes {
|
|
660
|
+
--group-horizontal-border-width-#{$size}: #{map.get(map.get($group-horizontal, $size), border-width)};
|
|
661
|
+
--group-horizontal-overlap-#{$size}: #{map.get(map.get($group-horizontal, $size), overlap)};
|
|
662
|
+
}
|
|
663
|
+
}
|
|
664
|
+
|
|
665
|
+
/* Apply tokens to tail sizes */
|
|
666
|
+
@each $size in $tail-sizes {
|
|
667
|
+
:host([size="#{$size}"]) {
|
|
668
|
+
--avatar-width: var(--avatar-width-#{$size});
|
|
669
|
+
--tail-width: var(--tail-width-#{$size});
|
|
670
|
+
--tail-offset-y: var(--tail-offset-y-#{$size});
|
|
671
|
+
|
|
672
|
+
@if list.index($tail-sizes-with-badge, $size) {
|
|
673
|
+
--badge-width: var(--badge-width-#{$size});
|
|
674
|
+
}
|
|
675
|
+
|
|
676
|
+
@if list.index($tail-sizes-with-href, $size) {
|
|
677
|
+
--href-label-gap: var(--href-label-gap-#{$size});
|
|
678
|
+
}
|
|
679
|
+
|
|
680
|
+
/* Badge transform overrides */
|
|
681
|
+
@if $size == 'md' {
|
|
682
|
+
--badge-translate-x: 2px;
|
|
683
|
+
--badge-translate-y: -7px;
|
|
684
|
+
}
|
|
685
|
+
|
|
686
|
+
@if $size == 'lg' {
|
|
687
|
+
--badge-translate-x: 2px;
|
|
688
|
+
--badge-translate-y: -4px;
|
|
689
|
+
}
|
|
690
|
+
}
|
|
691
|
+
}
|
|
692
|
+
|
|
693
|
+
/* Apply gradients to variants */
|
|
694
|
+
/* Support lowercase and uppercase attribute values */
|
|
695
|
+
@each $variant in $tail-variants {
|
|
696
|
+
:host([tail="#{$variant}"]),
|
|
697
|
+
:host([tail="#{string.to-upper-case($variant)}"]) {
|
|
698
|
+
--avatar-gradient: var(--gradient-#{$variant});
|
|
699
|
+
}
|
|
700
|
+
}
|
|
701
|
+
```
|
|
702
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|