@aurodesignsystem-dev/auro-background 0.0.0-pr60.2 → 0.0.0-pr67.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 +59 -63
- package/custom-elements.json +398 -0
- package/demo/api.html +3 -3
- package/demo/api.md +109 -92
- package/demo/auro-background.min.js +80 -29
- package/demo/index.html +3 -3
- package/demo/index.md +26 -64
- package/dist/{auro-background-Bq6XF4Pn.js → auro-background-B1Q_3Y1A.js} +3 -3
- package/dist/index.d.ts +220 -8
- package/dist/index.js +1 -1
- package/dist/registered.js +1 -1
- package/package.json +22 -13
package/demo/api.md
CHANGED
|
@@ -1,178 +1,195 @@
|
|
|
1
|
-
|
|
2
|
-
<!--
|
|
1
|
+
|
|
2
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/api.md) -->
|
|
3
|
+
<!-- The below content is automatically added from ./../docs/api.md -->
|
|
3
4
|
|
|
4
5
|
# auro-background
|
|
5
6
|
|
|
6
|
-
|
|
7
|
+
The `auro-background` element provides users a way to add a background image or color block including a gradient.
|
|
7
8
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
|
11
|
-
|
|
12
|
-
|
|
|
13
|
-
|
|
|
14
|
-
|
|
|
15
|
-
|
|
|
16
|
-
|
|
|
17
|
-
|
|
|
18
|
-
|
|
|
19
|
-
|
|
|
20
|
-
|
|
|
21
|
-
|
|
|
22
|
-
|
|
|
23
|
-
|
|
|
24
|
-
|
|
|
25
|
-
|
|
|
26
|
-
|
|
|
27
|
-
|
|
|
9
|
+
### Properties & Attributes
|
|
10
|
+
|
|
11
|
+
| Properties | Attributes | Modifiers | Type | Default | Description |
|
|
12
|
+
| ---------- | ---------- | --------- | ---------------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------- |
|
|
13
|
+
| bg | bg | | string | | Sets the background image at all breakpoints |
|
|
14
|
+
| bgLg | bgLg | | string | | Sets the background image at `ds-grid-breakpoint-lg` and above |
|
|
15
|
+
| bgMd | bgMd | | string | | Sets the background image at `ds-grid-breakpoint-md` and above |
|
|
16
|
+
| bgSm | bgSm | | string | | Sets the background image at `ds-grid-breakpoint-sm` and above |
|
|
17
|
+
| height | height | | string | | Applies custom height at all breakpoints |
|
|
18
|
+
| heightLg | heightLg | | string | | Applies custom height at `ds-grid-breakpoint-lg` and above |
|
|
19
|
+
| heightMd | heightMd | | string | | Applies custom height at `ds-grid-breakpoint-md` and above |
|
|
20
|
+
| heightSm | heightSm | | string | | Applies custom height at `ds-grid-breakpoint-sm` and above |
|
|
21
|
+
| inset | inset | | `none` \| `xxxs` \| `xxs` \| `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `xxl` \| `xxxl` \| string | | Applies internal padding at all breakpoints |
|
|
22
|
+
| insetLg | insetLg | | `none` \| `xxxs` \| `xxs` \| `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `xxl` \| `xxxl` \| string | | Applies internal padding at `ds-grid-breakpoint-lg` and above |
|
|
23
|
+
| insetMd | insetMd | | `none` \| `xxxs` \| `xxs` \| `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `xxl` \| `xxxl` \| string | | Applies internal padding at `ds-grid-breakpoint-md` and above |
|
|
24
|
+
| insetSm | insetSm | | `none` \| `xxxs` \| `xxs` \| `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `xxl` \| `xxxl` \| string | | Applies internal padding at `ds-grid-breakpoint-sm` and above |
|
|
25
|
+
| width | width | | string | | Applies custom width at all breakpoints |
|
|
26
|
+
| widthLg | widthLg | | string | | Applies custom width at `ds-grid-breakpoint-lg` and above |
|
|
27
|
+
| widthMd | widthMd | | string | | Applies custom width at `ds-grid-breakpoint-md` and above |
|
|
28
|
+
| widthSm | widthSm | | string | | Applies custom width at `ds-grid-breakpoint-sm` and above |
|
|
29
|
+
|
|
30
|
+
### Methods
|
|
31
|
+
|
|
32
|
+
| Name | Parameters | Return | Description |
|
|
33
|
+
| -------- | -------------------------------------------------------------------- | ------ | ------------------------------------------------- |
|
|
34
|
+
| register | `name` (string) - The name of the element that you want to register. | | This will register this element with the browser. |
|
|
35
|
+
|
|
36
|
+
### Slots
|
|
37
|
+
|
|
38
|
+
| Name | Description |
|
|
39
|
+
| --------- | --------------------------------------------------------- |
|
|
40
|
+
| (default) | Default slot for content within the background container. |
|
|
28
41
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
29
42
|
|
|
30
|
-
##
|
|
31
|
-
|
|
32
|
-
### Basic
|
|
43
|
+
## Basic
|
|
33
44
|
|
|
34
45
|
<div class="exampleWrapper">
|
|
35
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src
|
|
36
|
-
<!-- The below content is automatically added from
|
|
46
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
|
|
47
|
+
<!-- The below content is automatically added from ./../apiExamples/basic.html -->
|
|
37
48
|
<auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat">
|
|
38
49
|
<div style="color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
|
|
39
|
-
<auro-header level="2"
|
|
40
|
-
<auro-hyperlink cta href="#">See where we fly</auro-hyperlink>
|
|
50
|
+
<auro-header level="2" visualLevel="3">View all destinations</auro-header>
|
|
51
|
+
<auro-hyperlink type="cta" variant="secondary" href="#" size="xs" style="padding-bottom: 4px;">See where we fly</auro-hyperlink>
|
|
41
52
|
</div>
|
|
42
53
|
</auro-background>
|
|
43
54
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
44
55
|
</div>
|
|
45
56
|
<auro-accordion alignRight>
|
|
46
57
|
<span slot="trigger">See code</span>
|
|
47
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src
|
|
48
|
-
<!-- The below code snippet is automatically added from
|
|
58
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
|
|
59
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
|
|
49
60
|
|
|
50
61
|
```html
|
|
51
62
|
<auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat">
|
|
52
63
|
<div style="color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
|
|
53
|
-
<auro-header level="2"
|
|
54
|
-
<auro-hyperlink cta href="#">See where we fly</auro-hyperlink>
|
|
64
|
+
<auro-header level="2" visualLevel="3">View all destinations</auro-header>
|
|
65
|
+
<auro-hyperlink type="cta" variant="secondary" href="#" size="xs" style="padding-bottom: 4px;">See where we fly</auro-hyperlink>
|
|
55
66
|
</div>
|
|
56
67
|
</auro-background>
|
|
57
68
|
```
|
|
58
69
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
59
70
|
</auro-accordion>
|
|
60
71
|
|
|
61
|
-
|
|
72
|
+
## Property & Attribute Examples
|
|
62
73
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
The following example adds padding by using the `inset="xl"` property. The `inset` property support the following values; `none`, `xxxs`, `xxs`, `xs`, `sm`, `md`, `lg`, `xl`, `xxl`, `xxxl` or any CSS value which is valid for the CSS `padding` rule (e.g. `1rem`).
|
|
74
|
+
### Background
|
|
66
75
|
|
|
67
|
-
|
|
76
|
+
Use the `bg` attribute to set the background image.
|
|
68
77
|
|
|
69
|
-
|
|
78
|
+
Different `bg` values may be set for each breakpoint using the `bgSm`, `bgMd` and `bgLg` attributes.
|
|
70
79
|
|
|
71
80
|
<div class="exampleWrapper">
|
|
72
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/
|
|
73
|
-
<!-- The below content is automatically added from ../apiExamples/
|
|
74
|
-
<auro-background
|
|
81
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/breakpoints.html) -->
|
|
82
|
+
<!-- The below content is automatically added from ../apiExamples/breakpoints.html -->
|
|
83
|
+
<auro-background
|
|
84
|
+
bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat"
|
|
85
|
+
bgMd="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt8a7ff6c35b184273/6633c2581dbb0945b40b8787/hawaii-bg.png) center center/cover no-repeat"
|
|
86
|
+
bgLg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt947ef7b1f81b7f99/6633c2589db1edec36f6de69/MKT_091820_BF-CM-Email-Sign-Up-Materials_Merch-tiles_Evergreen_720x720-background.jpg) center center/cover no-repeat"
|
|
87
|
+
inset="xxxl">
|
|
75
88
|
<div style="color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
|
|
76
|
-
<auro-header level="2"
|
|
77
|
-
<auro-hyperlink cta href="#">See where we fly</auro-hyperlink>
|
|
89
|
+
<auro-header level="2" visualLevel="3">View all destinations</auro-header>
|
|
90
|
+
<auro-hyperlink type="cta" variant="secondary" href="#" style="padding-top: 12px;" size="sm">See where we fly</auro-hyperlink>
|
|
78
91
|
</div>
|
|
79
92
|
</auro-background>
|
|
80
93
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
81
94
|
</div>
|
|
82
95
|
<auro-accordion alignRight>
|
|
83
96
|
<span slot="trigger">See code</span>
|
|
84
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/
|
|
85
|
-
<!-- The below code snippet is automatically added from ../apiExamples/
|
|
97
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/breakpoints.html) -->
|
|
98
|
+
<!-- The below code snippet is automatically added from ../apiExamples/breakpoints.html -->
|
|
86
99
|
|
|
87
100
|
```html
|
|
88
|
-
<auro-background
|
|
101
|
+
<auro-background
|
|
102
|
+
bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat"
|
|
103
|
+
bgMd="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt8a7ff6c35b184273/6633c2581dbb0945b40b8787/hawaii-bg.png) center center/cover no-repeat"
|
|
104
|
+
bgLg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt947ef7b1f81b7f99/6633c2589db1edec36f6de69/MKT_091820_BF-CM-Email-Sign-Up-Materials_Merch-tiles_Evergreen_720x720-background.jpg) center center/cover no-repeat"
|
|
105
|
+
inset="xxxl">
|
|
89
106
|
<div style="color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
|
|
90
|
-
<auro-header level="2"
|
|
91
|
-
<auro-hyperlink cta href="#">See where we fly</auro-hyperlink>
|
|
107
|
+
<auro-header level="2" visualLevel="3">View all destinations</auro-header>
|
|
108
|
+
<auro-hyperlink type="cta" variant="secondary" href="#" style="padding-top: 12px;" size="sm">See where we fly</auro-hyperlink>
|
|
92
109
|
</div>
|
|
93
110
|
</auro-background>
|
|
94
111
|
```
|
|
95
112
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
96
113
|
</auro-accordion>
|
|
97
114
|
|
|
98
|
-
|
|
115
|
+
### Height and Width
|
|
116
|
+
|
|
117
|
+
Use the `height` and `width` attributes to set a fixed height/width on the element.
|
|
99
118
|
|
|
100
|
-
|
|
119
|
+
The `height` and `width` attributes accept any valid CSS value for height/width (e.g. `100px`, `12rem`, `50vw`).
|
|
120
|
+
|
|
121
|
+
Custom height/width can be set per breakpoint using the `heightSm`, `heightMd`, `heightLg`, `widthSm`, `widthMd`, and `widthLg` attributes.
|
|
101
122
|
|
|
102
123
|
<div class="exampleWrapper">
|
|
103
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/
|
|
104
|
-
<!-- The below content is automatically added from ../apiExamples/
|
|
105
|
-
<auro-background
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
inset="xl">
|
|
110
|
-
<div style="color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
|
|
111
|
-
<auro-header level="2" display="600">View all destinations</auro-header>
|
|
112
|
-
<auro-hyperlink cta href="#">See where we fly</auro-hyperlink>
|
|
124
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/fixed-size.html) -->
|
|
125
|
+
<!-- The below content is automatically added from ../apiExamples/fixed-size.html -->
|
|
126
|
+
<auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat" height="400px" width="600px">
|
|
127
|
+
<div style="height: 100%; color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
|
|
128
|
+
<auro-header level="2" visualLevel="3">View all destinations</auro-header>
|
|
129
|
+
<auro-hyperlink type="cta" variant="secondary" href="#" style="padding-top: 12px;" size="sm">See where we fly</auro-hyperlink>
|
|
113
130
|
</div>
|
|
114
131
|
</auro-background>
|
|
115
132
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
116
133
|
</div>
|
|
117
134
|
<auro-accordion alignRight>
|
|
118
135
|
<span slot="trigger">See code</span>
|
|
119
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/
|
|
120
|
-
<!-- The below code snippet is automatically added from ../apiExamples/
|
|
136
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/fixed-size.html) -->
|
|
137
|
+
<!-- The below code snippet is automatically added from ../apiExamples/fixed-size.html -->
|
|
121
138
|
|
|
122
139
|
```html
|
|
123
|
-
<auro-background
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
inset="xl">
|
|
128
|
-
<div style="color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
|
|
129
|
-
<auro-header level="2" display="600">View all destinations</auro-header>
|
|
130
|
-
<auro-hyperlink cta href="#">See where we fly</auro-hyperlink>
|
|
140
|
+
<auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat" height="400px" width="600px">
|
|
141
|
+
<div style="height: 100%; color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
|
|
142
|
+
<auro-header level="2" visualLevel="3">View all destinations</auro-header>
|
|
143
|
+
<auro-hyperlink type="cta" variant="secondary" href="#" style="padding-top: 12px;" size="sm">See where we fly</auro-hyperlink>
|
|
131
144
|
</div>
|
|
132
145
|
</auro-background>
|
|
133
146
|
```
|
|
134
147
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
135
148
|
</auro-accordion>
|
|
136
149
|
|
|
137
|
-
###
|
|
138
|
-
|
|
139
|
-
|
|
150
|
+
### Inset
|
|
151
|
+
|
|
152
|
+
Use the `inset` attribute to add padding inside the element.
|
|
153
|
+
|
|
154
|
+
The `inset` attribute supports the following values: `none`, `xxxs`, `xxs`, `xs`, `sm`, `md`, `lg`, `xl`, `xxl`, `xxxl` or any CSS value which is valid for the CSS `padding` rule (e.g. `1rem`).
|
|
140
155
|
|
|
141
|
-
|
|
156
|
+
Note: When using a custom CSS rule do not include a semi-colon at at the end of the string (e.g. `1rem` is valid, `1rem;` is invalid).
|
|
157
|
+
|
|
158
|
+
Inset values may also be set for each breakpoint size via the `insetSm`, `insetMd` and `insetLg` attributes.
|
|
142
159
|
|
|
143
160
|
<div class="exampleWrapper">
|
|
144
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src
|
|
145
|
-
<!-- The below content is automatically added from
|
|
146
|
-
<auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat"
|
|
147
|
-
<div style="
|
|
148
|
-
<auro-header level="2"
|
|
149
|
-
<auro-hyperlink cta href="#">See where we fly</auro-hyperlink>
|
|
161
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inset.html) -->
|
|
162
|
+
<!-- The below content is automatically added from ./../apiExamples/inset.html -->
|
|
163
|
+
<auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat" inset="xl">
|
|
164
|
+
<div style="color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
|
|
165
|
+
<auro-header level="2" visualLevel="3">View all destinations</auro-header>
|
|
166
|
+
<auro-hyperlink type="cta" variant="secondary" href="#" style="padding-top: 12px;" size="sm">See where we fly</auro-hyperlink>
|
|
150
167
|
</div>
|
|
151
168
|
</auro-background>
|
|
152
169
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
153
170
|
</div>
|
|
154
171
|
<auro-accordion alignRight>
|
|
155
172
|
<span slot="trigger">See code</span>
|
|
156
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src
|
|
157
|
-
<!-- The below code snippet is automatically added from
|
|
173
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/inset.html) -->
|
|
174
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/inset.html -->
|
|
158
175
|
|
|
159
176
|
```html
|
|
160
|
-
<auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat"
|
|
161
|
-
<div style="
|
|
162
|
-
<auro-header level="2"
|
|
163
|
-
<auro-hyperlink cta href="#">See where we fly</auro-hyperlink>
|
|
177
|
+
<auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat" inset="xl">
|
|
178
|
+
<div style="color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
|
|
179
|
+
<auro-header level="2" visualLevel="3">View all destinations</auro-header>
|
|
180
|
+
<auro-hyperlink type="cta" variant="secondary" href="#" style="padding-top: 12px;" size="sm">See where we fly</auro-hyperlink>
|
|
164
181
|
</div>
|
|
165
182
|
</auro-background>
|
|
166
183
|
```
|
|
167
184
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
168
185
|
</auro-accordion>
|
|
169
186
|
|
|
170
|
-
|
|
187
|
+
## Restyle Component with CSS Variables
|
|
171
188
|
|
|
172
|
-
The component may be restyled
|
|
189
|
+
The component may be restyled by changing the values of the following token(s).
|
|
173
190
|
|
|
174
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src
|
|
175
|
-
<!-- The below code snippet is automatically added from
|
|
191
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
|
|
192
|
+
<!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
|
|
176
193
|
|
|
177
194
|
```scss
|
|
178
195
|
:host {
|
|
@@ -92,6 +92,19 @@ class AuroLibraryRuntimeUtils {
|
|
|
92
92
|
|
|
93
93
|
return elemTag === tag || elem.hasAttribute(tag);
|
|
94
94
|
}
|
|
95
|
+
|
|
96
|
+
/**
|
|
97
|
+
* Gets the text content of a named slot.
|
|
98
|
+
* @returns {String}
|
|
99
|
+
* @private
|
|
100
|
+
*/
|
|
101
|
+
getSlotText(elem, name) {
|
|
102
|
+
const slot = elem.shadowRoot?.querySelector(`slot[name="${name}"]`);
|
|
103
|
+
const nodes = slot?.assignedNodes({ flatten: true }) || [];
|
|
104
|
+
const text = nodes.map(n => n.textContent?.trim()).join(' ').trim();
|
|
105
|
+
|
|
106
|
+
return text || null;
|
|
107
|
+
}
|
|
95
108
|
}
|
|
96
109
|
|
|
97
110
|
var styleCss = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.background{width:auto;width:var(--width);height:inherit;height:var(--height);padding:var(--inset);background:var(--background)}@media screen and (min-width: 576px){.background{width:var(--widthSm);height:var(--heightSm);padding:var(--insetSm);background:var(--backgroundSm)}}@media screen and (min-width: 768px){.background{width:var(--widthMd);height:var(--heightMd);padding:var(--insetMd);background:var(--backgroundMd)}}@media screen and (min-width: 1024px){.background{width:var(--widthLg);height:var(--heightLg);padding:var(--insetMd);background:var(--backgroundLg)}}
|
|
@@ -119,24 +132,10 @@ const t={ATTRIBUTE:1},e=t=>(...e)=>({_$litDirective$:t,values:e});let i$1 = clas
|
|
|
119
132
|
|
|
120
133
|
// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
|
|
121
134
|
/**
|
|
122
|
-
*
|
|
123
|
-
*
|
|
124
|
-
*
|
|
125
|
-
* @
|
|
126
|
-
* @attr {String} bgMd - `breakpoint-md` and above
|
|
127
|
-
* @attr {String} bgLg - `breakpoint-lg` and above
|
|
128
|
-
* @attr {String} height - Apply minimum height value
|
|
129
|
-
* @attr {String} heightSm - Apply minimum height for `breakpoint-sm` and above
|
|
130
|
-
* @attr {String} heightMd - Apply minimum height for `breakpoint-md` and above
|
|
131
|
-
* @attr {String} heightLg - Apply minimum height for `breakpoint-lg` and above
|
|
132
|
-
* @attr {String} width - Define custom width
|
|
133
|
-
* @attr {String} widthSm - Define custom width for `breakpoint-sm` and above
|
|
134
|
-
* @attr {String} widthMd - Define custom with for `breakpoint-md` and above
|
|
135
|
-
* @attr {String} widthLg - Define custom width for `breakpoint-lg` and above
|
|
136
|
-
* @attr {String} inset - Apply internal padding
|
|
137
|
-
* @attr {String} insetSm - Apply internal padding for `breakpoint-sm` and above
|
|
138
|
-
* @attr {String} insetMd - Apply internal padding for `breakpoint-md` and above
|
|
139
|
-
* @attr {String} insetLg - Apply internal padding for `breakpoint-lg` and above
|
|
135
|
+
* The `auro-background` element provides users a way to add a background image or color block including a gradient.
|
|
136
|
+
* @customElement auro-background
|
|
137
|
+
*
|
|
138
|
+
* @slot - Default slot for content within the background container.
|
|
140
139
|
*/
|
|
141
140
|
|
|
142
141
|
// build the component class
|
|
@@ -153,22 +152,74 @@ class AuroBackground extends i$2 {
|
|
|
153
152
|
// function to define props used within the scope of this component
|
|
154
153
|
static get properties() {
|
|
155
154
|
return {
|
|
155
|
+
/**
|
|
156
|
+
* Sets the background image at all breakpoints
|
|
157
|
+
*/
|
|
156
158
|
bg: { type: String },
|
|
157
|
-
|
|
158
|
-
|
|
159
|
+
/**
|
|
160
|
+
* Sets the background image at `ds-grid-breakpoint-lg` and above
|
|
161
|
+
*/
|
|
159
162
|
bgLg: { type: String },
|
|
163
|
+
/**
|
|
164
|
+
* Sets the background image at `ds-grid-breakpoint-md` and above
|
|
165
|
+
*/
|
|
166
|
+
bgMd: { type: String },
|
|
167
|
+
/**
|
|
168
|
+
* Sets the background image at `ds-grid-breakpoint-sm` and above
|
|
169
|
+
*/
|
|
170
|
+
bgSm: { type: String },
|
|
171
|
+
/**
|
|
172
|
+
* Applies custom height at all breakpoints
|
|
173
|
+
*/
|
|
160
174
|
height: { type: String },
|
|
161
|
-
|
|
162
|
-
|
|
175
|
+
/**
|
|
176
|
+
* Applies custom height at `ds-grid-breakpoint-lg` and above
|
|
177
|
+
*/
|
|
163
178
|
heightLg: { type: String },
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
179
|
+
/**
|
|
180
|
+
* Applies custom height at `ds-grid-breakpoint-md` and above
|
|
181
|
+
*/
|
|
182
|
+
heightMd: { type: String },
|
|
183
|
+
/**
|
|
184
|
+
* Applies custom height at `ds-grid-breakpoint-sm` and above
|
|
185
|
+
*/
|
|
186
|
+
heightSm: { type: String },
|
|
187
|
+
/**
|
|
188
|
+
* Applies internal padding at all breakpoints
|
|
189
|
+
* @type {'none' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | string}
|
|
190
|
+
*/
|
|
168
191
|
inset: { type: String },
|
|
169
|
-
|
|
170
|
-
|
|
192
|
+
/**
|
|
193
|
+
* Applies internal padding at `ds-grid-breakpoint-lg` and above
|
|
194
|
+
* @type {'none' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | string}
|
|
195
|
+
*/
|
|
171
196
|
insetLg: { type: String },
|
|
197
|
+
/**
|
|
198
|
+
* Applies internal padding at `ds-grid-breakpoint-md` and above
|
|
199
|
+
* @type {'none' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | string}
|
|
200
|
+
*/
|
|
201
|
+
insetMd: { type: String },
|
|
202
|
+
/**
|
|
203
|
+
* Applies internal padding at `ds-grid-breakpoint-sm` and above
|
|
204
|
+
* @type {'none' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | string}
|
|
205
|
+
*/
|
|
206
|
+
insetSm: { type: String },
|
|
207
|
+
/**
|
|
208
|
+
* Applies custom width at all breakpoints
|
|
209
|
+
*/
|
|
210
|
+
width: { type: String },
|
|
211
|
+
/**
|
|
212
|
+
* Applies custom width at `ds-grid-breakpoint-lg` and above
|
|
213
|
+
*/
|
|
214
|
+
widthLg: { type: String },
|
|
215
|
+
/**
|
|
216
|
+
* Applies custom width at `ds-grid-breakpoint-md` and above
|
|
217
|
+
*/
|
|
218
|
+
widthMd: { type: String },
|
|
219
|
+
/**
|
|
220
|
+
* Applies custom width at `ds-grid-breakpoint-sm` and above
|
|
221
|
+
*/
|
|
222
|
+
widthSm: { type: String },
|
|
172
223
|
};
|
|
173
224
|
}
|
|
174
225
|
|
|
@@ -178,7 +229,7 @@ class AuroBackground extends i$2 {
|
|
|
178
229
|
|
|
179
230
|
/**
|
|
180
231
|
* This will register this element with the browser.
|
|
181
|
-
* @param {string} [name="auro-background"] - The name of element that you want to register
|
|
232
|
+
* @param {string} [name="auro-background"] - The name of the element that you want to register.
|
|
182
233
|
*
|
|
183
234
|
* @example
|
|
184
235
|
* AuroBackground.register("custom-background") // this will register this element to <custom-background/>
|
package/demo/index.html
CHANGED
|
@@ -51,8 +51,8 @@
|
|
|
51
51
|
<script type="module" data-demo-script="true" src="./index.min.js"></script>
|
|
52
52
|
|
|
53
53
|
<!-- If additional elements are needed for the demo, add them here. -->
|
|
54
|
-
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest
|
|
55
|
-
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest
|
|
56
|
-
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest
|
|
54
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
|
|
55
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
|
|
56
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
|
|
57
57
|
</body>
|
|
58
58
|
</html>
|
package/demo/index.md
CHANGED
|
@@ -1,92 +1,54 @@
|
|
|
1
1
|
<!--
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
THIS PAGE'S CONTENT SHOULD BE KEPT MINIMAL.
|
|
3
|
+
ONLY ADD EXAMPLES THAT ARE TRULY NECESSARY FOR THE INDEX PAGE — THE BASIC EXAMPLE IS USUALLY ENOUGH.
|
|
4
|
+
ALL OTHER EXAMPLES SHOULD GO IN THE API DOCUMENTATION.
|
|
5
5
|
-->
|
|
6
6
|
|
|
7
|
-
# Background
|
|
8
|
-
|
|
9
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src
|
|
10
|
-
<!-- The below content is automatically added from
|
|
7
|
+
# Background
|
|
8
|
+
|
|
9
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
|
|
10
|
+
<!-- The below content is automatically added from ./../docs/partials/description.md -->
|
|
11
11
|
The `auro-background` element is an easy-to-use mobile-first alternative to writing custom CSS for background colors or images with automatically scoped media queries. Use independently or in the slot of another custom element such as `auro-banner`.
|
|
12
12
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
13
13
|
|
|
14
|
-
##
|
|
15
|
-
|
|
16
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src
|
|
17
|
-
<!-- The below content is automatically added from
|
|
18
|
-
The
|
|
19
|
-
|
|
20
|
-
These properties map to the compound CSS `background` property and CSS properties of `height`, `width`, and `padding`. Anything you can do within the scope of those CSS rules you can do here.
|
|
14
|
+
## Use Cases
|
|
15
|
+
|
|
16
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/useCases.md) -->
|
|
17
|
+
<!-- The below content is automatically added from ./../docs/partials/useCases.md -->
|
|
18
|
+
The `<auro-background>` element should be used in situations where users may:
|
|
21
19
|
|
|
22
|
-
|
|
20
|
+
* Need to apply a background image or color to a specific section of content
|
|
21
|
+
* Require responsive background images that change at different breakpoints
|
|
23
22
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
24
23
|
|
|
25
24
|
## Example(s)
|
|
26
25
|
|
|
26
|
+
### Basic
|
|
27
|
+
|
|
27
28
|
<div class="exampleWrapper">
|
|
28
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src
|
|
29
|
-
<!-- The below content is automatically added from
|
|
29
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
|
|
30
|
+
<!-- The below content is automatically added from ./../apiExamples/basic.html -->
|
|
30
31
|
<auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat">
|
|
31
32
|
<div style="color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
|
|
32
|
-
<auro-header level="2"
|
|
33
|
-
<auro-hyperlink cta href="#">See where we fly</auro-hyperlink>
|
|
33
|
+
<auro-header level="2" visualLevel="3">View all destinations</auro-header>
|
|
34
|
+
<auro-hyperlink type="cta" variant="secondary" href="#" size="xs" style="padding-bottom: 4px;">See where we fly</auro-hyperlink>
|
|
34
35
|
</div>
|
|
35
36
|
</auro-background>
|
|
36
37
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
37
38
|
</div>
|
|
38
39
|
<auro-accordion alignRight>
|
|
39
40
|
<span slot="trigger">See code</span>
|
|
40
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src
|
|
41
|
-
<!-- The below code snippet is automatically added from
|
|
41
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
|
|
42
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
|
|
42
43
|
|
|
43
44
|
```html
|
|
44
45
|
<auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat">
|
|
45
46
|
<div style="color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
|
|
46
|
-
<auro-header level="2"
|
|
47
|
-
<auro-hyperlink cta href="#">See where we fly</auro-hyperlink>
|
|
47
|
+
<auro-header level="2" visualLevel="3">View all destinations</auro-header>
|
|
48
|
+
<auro-hyperlink type="cta" variant="secondary" href="#" size="xs" style="padding-bottom: 4px;">See where we fly</auro-hyperlink>
|
|
48
49
|
</div>
|
|
49
50
|
</auro-background>
|
|
50
51
|
```
|
|
51
52
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
52
|
-
</auro-accordion>
|
|
53
|
-
|
|
54
|
-
## Recommended Use and Version Control
|
|
55
|
-
|
|
56
|
-
There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-background` custom element is defined automatically.
|
|
57
|
-
|
|
58
|
-
To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroBackground.register(name)` method and pass in a unique name.
|
|
59
|
-
|
|
60
|
-
```js
|
|
61
|
-
import { AuroBackground } from '@aurodesignsystem/auro-background/class';
|
|
62
|
-
|
|
63
|
-
AuroBackground.register('custom-background');
|
|
64
|
-
```
|
|
65
|
-
|
|
66
|
-
This will create a new custom element that you can use in your HTML that will function identically to the `auro-background` element.
|
|
67
|
-
|
|
68
|
-
<div class="exampleWrapper">
|
|
69
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/custom.html) -->
|
|
70
|
-
<!-- The below content is automatically added from ../apiExamples/custom.html -->
|
|
71
|
-
<custom-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat">
|
|
72
|
-
<div style="color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
|
|
73
|
-
<auro-header level="2" display="600">View all destinations</auro-header>
|
|
74
|
-
<auro-hyperlink cta href="#">See where we fly</auro-hyperlink>
|
|
75
|
-
</div>
|
|
76
|
-
</custom-background>
|
|
77
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
78
|
-
</div>
|
|
79
|
-
<auro-accordion alignRight>
|
|
80
|
-
<span slot="trigger">See code</span>
|
|
81
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/custom.html) -->
|
|
82
|
-
<!-- The below code snippet is automatically added from ../apiExamples/custom.html -->
|
|
83
|
-
|
|
84
|
-
```html
|
|
85
|
-
<custom-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat">
|
|
86
|
-
<div style="color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
|
|
87
|
-
<auro-header level="2" display="600">View all destinations</auro-header>
|
|
88
|
-
<auro-hyperlink cta href="#">See where we fly</auro-hyperlink>
|
|
89
|
-
</div>
|
|
90
|
-
</custom-background>
|
|
91
|
-
```
|
|
92
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
53
|
+
</auro-accordion>
|
|
54
|
+
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import{css as t,LitElement as e,html as i}from"lit";import{styleMap as
|
|
1
|
+
import{css as t,LitElement as e,html as i}from"lit";import{styleMap as n}from"lit/directives/style-map.js";class r{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{})}closestElement(t,e=this,i=(e,n=e&&e.closest(t))=>e&&e!==document&&e!==window?n||i(e.getRootNode().host):null){return i(e)}handleComponentTagRename(t,e){const i=e.toLowerCase();t.tagName.toLowerCase()!==i&&t.setAttribute(i,!0)}elementMatch(t,e){const i=e.toLowerCase();return t.tagName.toLowerCase()===i||t.hasAttribute(i)}getSlotText(t,e){const i=t.shadowRoot?.querySelector(`slot[name="${e}"]`);return(i?.assignedNodes({flatten:!0})||[]).map(t=>t.textContent?.trim()).join(" ").trim()||null}}var s=t`:focus:not(:focus-visible){outline:3px solid transparent}.background{width:auto;width:var(--width);height:inherit;height:var(--height);padding:var(--inset);background:var(--background)}@media screen and (min-width: 576px){.background{width:var(--widthSm);height:var(--heightSm);padding:var(--insetSm);background:var(--backgroundSm)}}@media screen and (min-width: 768px){.background{width:var(--widthMd);height:var(--heightMd);padding:var(--insetMd);background:var(--backgroundMd)}}@media screen and (min-width: 1024px){.background{width:var(--widthLg);height:var(--heightLg);padding:var(--insetMd);background:var(--backgroundLg)}}
|
|
2
2
|
`,a=t`:host{--ds-auro-background-container-color: transparent}
|
|
3
|
-
`;class g extends e{constructor(){super(),this.runtimeUtils=new
|
|
4
|
-
<div class="background" style=${
|
|
3
|
+
`;class g extends e{constructor(){super(),this.runtimeUtils=new r}static get properties(){return{bg:{type:String},bgLg:{type:String},bgMd:{type:String},bgSm:{type:String},height:{type:String},heightLg:{type:String},heightMd:{type:String},heightSm:{type:String},inset:{type:String},insetLg:{type:String},insetMd:{type:String},insetSm:{type:String},width:{type:String},widthLg:{type:String},widthMd:{type:String},widthSm:{type:String}}}static get styles(){return[s,a]}static register(t="auro-background"){r.prototype.registerComponent(t,g)}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-background")}getInsetValues(t){const e={none:"0",xxxs:"25",xxs:"50",xs:"100",sm:"150",md:"200",lg:"300",xl:"400",xxl:"600",xxxl:"800"};return e[t]?`var(--ds-size-${e[t]})`:t}render(){const t={"--background":this.bg||"var(--ds-auro-background-container-color)","--backgroundSm":this.bgSm||"var(--background)","--backgroundMd":this.bgMd||"var(--backgroundSm)","--backgroundLg":this.bgLg||"var(--backgroundMd)","--width":this.width||"auto","--widthSm":this.widthSm||"var(--width)","--widthMd":this.widthMd||"var(--widthSm)","--widthLg":this.widthLg||"var(--widthMd)","--height":this.height||"auto","--heightSm":this.heightSm||"var(--height)","--heightMd":this.heightMd||"var(--heightSm)","--heightLg":this.heightLg||"var(--heightMd)","--inset":this.getInsetValues(this.inset)||"0","--insetSm":this.getInsetValues(this.insetSm)||"var(--inset)","--insetMd":this.getInsetValues(this.insetMd)||"var(--insetSm)","--insetLg":this.getInsetValues(this.insetLg)||"var(--insetMd)"};return i`
|
|
4
|
+
<div class="background" style=${n(t)}><slot></slot></div>
|
|
5
5
|
`}}export{g as A};
|