@aurodesignsystem-dev/auro-background 0.0.0-pr60.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/CHANGELOG.md +340 -0
  2. package/LICENSE +201 -0
  3. package/NOTICE +2 -0
  4. package/README.md +152 -0
  5. package/demo/api.html +58 -0
  6. package/demo/api.js +1 -0
  7. package/demo/api.md +182 -0
  8. package/demo/api.min.js +3 -0
  9. package/demo/auro-background.min.js +249 -0
  10. package/demo/index.html +58 -0
  11. package/demo/index.js +4 -0
  12. package/demo/index.md +92 -0
  13. package/demo/index.min.js +4 -0
  14. package/dist/auro-background-Bq6XF4Pn.js +5 -0
  15. package/dist/index.d.ts +71 -0
  16. package/dist/index.js +1 -0
  17. package/dist/registered.js +1 -0
  18. package/package.json +135 -0
package/README.md ADDED
@@ -0,0 +1,152 @@
1
+ <!--
2
+ The README.md file is a compiled document. No edits should be made directly to this file.
3
+
4
+ README.md is created by running `npm run build:docs`.
5
+
6
+ This file is generated based on a template fetched from
7
+ `https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/README.md`
8
+ and copied to `./componentDocs/README.md` each time the docs are compiled.
9
+
10
+ The following sections are editable by making changes to the following files:
11
+
12
+ | SECTION | DESCRIPTION | FILE LOCATION |
13
+ |------------------------|---------------------------------------------------|-------------------------------------|
14
+ | Description | Description of the component | `./docs/partials/description.md` |
15
+ | Use Cases | Examples for when to use this component | `./docs/partials/useCases.md` |
16
+ | Additional Information | For use to add any component specific information | `./docs/partials/readmeAddlInfo.md` |
17
+ | Component Example Code | HTML sample code of the components use | `./apiExamples/basic.html` |
18
+ -->
19
+
20
+ # Background
21
+
22
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
23
+ <!-- The below content is automatically added from ./docs/partials/description.md -->
24
+ 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`.
25
+ <!-- AURO-GENERATED-CONTENT:END -->
26
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
27
+ <!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
28
+ <!-- AURO-GENERATED-CONTENT This file is to be used for any additional content that should be included in the README.md which is specific to this component. -->
29
+ <!-- AURO-GENERATED-CONTENT:END -->
30
+
31
+ ## UI development browser support
32
+
33
+ <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/browserSupport.md) -->
34
+ For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
35
+
36
+ <!-- AURO-GENERATED-CONTENT:END -->
37
+
38
+ ## Install
39
+
40
+ <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentInstall.md) -->
41
+ [![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-background/testPublish.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-background/actions/workflows/testPublish.yml)
42
+ [![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-background?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-background)
43
+ [![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-background?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)
44
+ ![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge)
45
+
46
+ ```shell
47
+ $ npm i @aurodesignsystem/auro-background
48
+ ```
49
+
50
+ <!-- AURO-GENERATED-CONTENT:END -->
51
+
52
+ ### Design Token CSS Custom Property dependency
53
+
54
+ <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/designTokens.md) -->
55
+ The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
56
+
57
+ <!-- AURO-GENERATED-CONTENT:END -->
58
+
59
+ ### Define dependency in project component
60
+
61
+ <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImportDescription.md) -->
62
+ Defining the component dependency within each component that is using the `<auro-background>` component.
63
+
64
+ <!-- AURO-GENERATED-CONTENT:END -->
65
+ <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImport.md) -->
66
+
67
+ ```js
68
+ import "@aurodesignsystem/auro-background";
69
+ ```
70
+
71
+ <!-- AURO-GENERATED-CONTENT:END -->
72
+ **Reference component in HTML**
73
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
74
+ <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
75
+
76
+ ```html
77
+ <auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat">
78
+ <div style="color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
79
+ <auro-header level="2" display="600">View all destinations</auro-header>
80
+ <auro-hyperlink cta href="#">See where we fly</auro-hyperlink>
81
+ </div>
82
+ </auro-background>
83
+ ```
84
+ <!-- AURO-GENERATED-CONTENT:END -->
85
+
86
+ ## Use CDN
87
+
88
+ <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/bundleInstallDescription.md) -->
89
+ In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
90
+
91
+ ```html
92
+ <script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-background@latest/+esm"></script>
93
+ ```
94
+
95
+ <!-- AURO-GENERATED-CONTENT:END -->
96
+
97
+ ## auro-background use cases
98
+
99
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
100
+ <!-- The below content is automatically added from ./docs/partials/useCases.md -->
101
+ The `auro-background` component accepts 4 properties - `bg`, `height`, `width`, and `inset` that serve as the default at all breakpoints. `height`, `width`, and `inset` are not required and sizing will scale to the content when omitted. Additionally, there is a separate property for each supported breakpoint (`bgsm`, `bgmd`, `bglg`, `heightsm`, `heightmd`, `heightlg`, `widthsm`, `widthmd`, `widthlg`). If you don't set specific size property the smaller property will be used.
102
+
103
+ 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.
104
+
105
+ See <auro-hyperlink target="_blank" href="https://webcode.tools/generators/css/background-image">CSS Background Image Generator</auro-hyperlink> for a helpful code generation tool.
106
+ <!-- AURO-GENERATED-CONTENT:END -->
107
+
108
+ ## API Code Examples
109
+
110
+ ### Default auro-background
111
+
112
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
113
+ <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
114
+
115
+ ```html
116
+ <auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat">
117
+ <div style="color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
118
+ <auro-header level="2" display="600">View all destinations</auro-header>
119
+ <auro-hyperlink cta href="#">See where we fly</auro-hyperlink>
120
+ </div>
121
+ </auro-background>
122
+ ```
123
+ <!-- AURO-GENERATED-CONTENT:END -->
124
+
125
+ ## Development
126
+
127
+ <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/developmentDescription.md) -->
128
+ In order to develop against this project, if you are not part of the core team, you will be required to fork the project prior to submitting a pull request.
129
+
130
+ Please be sure to review the [contribution guidelines](https://auro.alaskaair.com/contributing) for this project. Please make sure to **pay special attention** to the **conventional commits** section of the document.
131
+
132
+ <!-- AURO-GENERATED-CONTENT:END -->
133
+
134
+ ### Start development environment
135
+
136
+ <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/localhost.md) -->
137
+ Once the project has been cloned to your local resource and you have installed all the dependencies you will need to open a shell session to run the **dev server**.
138
+
139
+ ```shell
140
+ $ npm run dev
141
+ ```
142
+
143
+ Open [localhost:8000](http://localhost:8000/)
144
+
145
+ <!-- AURO-GENERATED-CONTENT:END -->
146
+
147
+ ### Testing
148
+
149
+ <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/testing.md) -->
150
+ Automated tests are required for every Auro component. See `.\test\auro-background.test.js` for the tests for this component. Run `npm run test` to run the tests and check code coverage. Tests must pass and meet a certain coverage threshold to commit. See [the testing documentation](https://auro.alaskaair.com/support/tests) for more details.
151
+
152
+ <!-- AURO-GENERATED-CONTENT:END -->
package/demo/api.html ADDED
@@ -0,0 +1,58 @@
1
+ <!--
2
+ Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
3
+ See LICENSE in the project root for license information.
4
+
5
+ HTML in this document is standardized and NOT to be edited.
6
+ All demo code should be added/edited in ./docs/partials/api.md
7
+
8
+ With the exception of adding custom elements if needed for the demo.
9
+
10
+ ----------------------- DO NOT EDIT -----------------------------
11
+
12
+ -->
13
+
14
+ <!DOCTYPE html>
15
+ <html lang="en">
16
+ <head>
17
+ <meta charset="UTF-8" />
18
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19
+ <title>Auro Web Component Demo | auro-background</title>
20
+
21
+ <!-- Prism.js Stylesheet -->
22
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
23
+
24
+ <!-- Legacy reference is still needed to support auro-background's use of legacy token values at this time -->
25
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
26
+
27
+ <!-- Design Token Alaska Theme -->
28
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
29
+
30
+ <!-- Webcore Stylesheet Alaska Theme -->
31
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
32
+
33
+ <!-- Demo Specific Styles -->
34
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
35
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
36
+ </head>
37
+ <body class="auro-markdown">
38
+ <main></main>
39
+
40
+ <script type="module">
41
+ import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
42
+ import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
43
+ fetch('./api.md')
44
+ .then((response) => response.text())
45
+ .then((text) => {
46
+ const rawHtml = marked.parse(text);
47
+ document.querySelector('main').innerHTML = rawHtml;
48
+ Prism.highlightAll();
49
+ });
50
+ </script>
51
+ <script type="module" data-demo-script="true" src="./api.min.js"></script>
52
+
53
+ <!-- If additional elements are needed for the demo, add them here. -->
54
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
55
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/dist/auro-header__bundled.js" type="module"></script>
56
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/dist/auro-hyperlink__bundled.js" type="module"></script>
57
+ </body>
58
+ </html>
package/demo/api.js ADDED
@@ -0,0 +1 @@
1
+ import "../src/registered";
package/demo/api.md ADDED
@@ -0,0 +1,182 @@
1
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/api.md) -->
2
+ <!-- The below content is automatically added from ../docs/api.md -->
3
+
4
+ # auro-background
5
+
6
+ Auro-background provides users a way to add a background image or color block including a gradient.
7
+
8
+ ## Properties
9
+
10
+ | Property | Attribute | Type | Description |
11
+ |------------|------------|----------|--------------------------------------------------|
12
+ | [bg](#bg) | `bg` | `String` | Applies all breakpoints |
13
+ | [bgLg](#bgLg) | `bgLg` | `String` | `breakpoint-lg` and above |
14
+ | [bgMd](#bgMd) | `bgMd` | `String` | `breakpoint-md` and above |
15
+ | [bgSm](#bgSm) | `bgSm` | `String` | `breakpoint--sm` and above |
16
+ | [height](#height) | `height` | `String` | Apply minimum height value |
17
+ | [heightLg](#heightLg) | `heightLg` | `String` | Apply minimum height for `breakpoint-lg` and above |
18
+ | [heightMd](#heightMd) | `heightMd` | `String` | Apply minimum height for `breakpoint-md` and above |
19
+ | [heightSm](#heightSm) | `heightSm` | `String` | Apply minimum height for `breakpoint-sm` and above |
20
+ | [inset](#inset) | `inset` | `String` | Apply internal padding |
21
+ | [insetLg](#insetLg) | `insetLg` | `String` | Apply internal padding for `breakpoint-lg` and above |
22
+ | [insetMd](#insetMd) | `insetMd` | `String` | Apply internal padding for `breakpoint-md` and above |
23
+ | [insetSm](#insetSm) | `insetSm` | `String` | Apply internal padding for `breakpoint-sm` and above |
24
+ | [width](#width) | `width` | `String` | Define custom width |
25
+ | [widthLg](#widthLg) | `widthLg` | `String` | Define custom width for `breakpoint-lg` and above |
26
+ | [widthMd](#widthMd) | `widthMd` | `String` | Define custom with for `breakpoint-md` and above |
27
+ | [widthSm](#widthSm) | `widthSm` | `String` | Define custom width for `breakpoint-sm` and above |
28
+ <!-- AURO-GENERATED-CONTENT:END -->
29
+
30
+ ## API Examples
31
+
32
+ ### Basic
33
+
34
+ <div class="exampleWrapper">
35
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basic.html) -->
36
+ <!-- The below content is automatically added from ../apiExamples/basic.html -->
37
+ <auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat">
38
+ <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" display="600">View all destinations</auro-header>
40
+ <auro-hyperlink cta href="#">See where we fly</auro-hyperlink>
41
+ </div>
42
+ </auro-background>
43
+ <!-- AURO-GENERATED-CONTENT:END -->
44
+ </div>
45
+ <auro-accordion alignRight>
46
+ <span slot="trigger">See code</span>
47
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/basic.html) -->
48
+ <!-- The below code snippet is automatically added from ../apiExamples/basic.html -->
49
+
50
+ ```html
51
+ <auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat">
52
+ <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" display="600">View all destinations</auro-header>
54
+ <auro-hyperlink cta href="#">See where we fly</auro-hyperlink>
55
+ </div>
56
+ </auro-background>
57
+ ```
58
+ <!-- AURO-GENERATED-CONTENT:END -->
59
+ </auro-accordion>
60
+
61
+ ### Attribute Examples
62
+
63
+ #### Use `inset` attribute to add padding
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`).
66
+
67
+ 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).
68
+
69
+ Inset values may also be declared following the same rules as `inset` for each breakpoint property, i.e. `insetSm`, `insetMd` and `insetLg`.
70
+
71
+ <div class="exampleWrapper">
72
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/inset.html) -->
73
+ <!-- The below content is automatically added from ../apiExamples/inset.html -->
74
+ <auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat" inset="xl">
75
+ <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" display="600">View all destinations</auro-header>
77
+ <auro-hyperlink cta href="#">See where we fly</auro-hyperlink>
78
+ </div>
79
+ </auro-background>
80
+ <!-- AURO-GENERATED-CONTENT:END -->
81
+ </div>
82
+ <auro-accordion alignRight>
83
+ <span slot="trigger">See code</span>
84
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/inset.html) -->
85
+ <!-- The below code snippet is automatically added from ../apiExamples/inset.html -->
86
+
87
+ ```html
88
+ <auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat" inset="xl">
89
+ <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" display="600">View all destinations</auro-header>
91
+ <auro-hyperlink cta href="#">See where we fly</auro-hyperlink>
92
+ </div>
93
+ </auro-background>
94
+ ```
95
+ <!-- AURO-GENERATED-CONTENT:END -->
96
+ </auro-accordion>
97
+
98
+ #### Change backgrounds at breakpoints
99
+
100
+ You may specify different `bg` values for each breakpoint using the `bgSm`, `bgMd` and `bgLg` properties.
101
+
102
+ <div class="exampleWrapper">
103
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/breakpoints.html) -->
104
+ <!-- The below content is automatically added from ../apiExamples/breakpoints.html -->
105
+ <auro-background
106
+ bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat"
107
+ bgMd="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"
108
+ bgLg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt8a7ff6c35b184273/6633c2581dbb0945b40b8787/hawaii-bg.png) center center/cover no-repeat"
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>
113
+ </div>
114
+ </auro-background>
115
+ <!-- AURO-GENERATED-CONTENT:END -->
116
+ </div>
117
+ <auro-accordion alignRight>
118
+ <span slot="trigger">See code</span>
119
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/breakpoints.html) -->
120
+ <!-- The below code snippet is automatically added from ../apiExamples/breakpoints.html -->
121
+
122
+ ```html
123
+ <auro-background
124
+ bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat"
125
+ bgMd="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"
126
+ bgLg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt8a7ff6c35b184273/6633c2581dbb0945b40b8787/hawaii-bg.png) center center/cover no-repeat"
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>
131
+ </div>
132
+ </auro-background>
133
+ ```
134
+ <!-- AURO-GENERATED-CONTENT:END -->
135
+ </auro-accordion>
136
+
137
+ ### Property Examples
138
+
139
+ #### Use fixed `height` and `width`
140
+
141
+ The `height` and `width` properties can be used to set custom dimensions. Additional properties available per breakpoint, i.e. `heightSm`, `heightMd`, `heightLg`, `widthSm`, `widthMd`, `widthLg`.
142
+
143
+ <div class="exampleWrapper">
144
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/fixedSize.html) -->
145
+ <!-- The below content is automatically added from ../apiExamples/fixedSize.html -->
146
+ <auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat" height="350px" width="300px">
147
+ <div style="height: 100%; color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
148
+ <auro-header level="2" display="600">View all destinations</auro-header>
149
+ <auro-hyperlink cta href="#">See where we fly</auro-hyperlink>
150
+ </div>
151
+ </auro-background>
152
+ <!-- AURO-GENERATED-CONTENT:END -->
153
+ </div>
154
+ <auro-accordion alignRight>
155
+ <span slot="trigger">See code</span>
156
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/fixedSize.html) -->
157
+ <!-- The below code snippet is automatically added from ../apiExamples/fixedSize.html -->
158
+
159
+ ```html
160
+ <auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat" height="350px" width="300px">
161
+ <div style="height: 100%; color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
162
+ <auro-header level="2" display="600">View all destinations</auro-header>
163
+ <auro-hyperlink cta href="#">See where we fly</auro-hyperlink>
164
+ </div>
165
+ </auro-background>
166
+ ```
167
+ <!-- AURO-GENERATED-CONTENT:END -->
168
+ </auro-accordion>
169
+
170
+ ### Theme Support
171
+
172
+ The component may be restyled using the following code sample and changing the values of the following token(s).
173
+
174
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../src/styles/tokens.scss) -->
175
+ <!-- The below code snippet is automatically added from ../src/styles/tokens.scss -->
176
+
177
+ ```scss
178
+ :host {
179
+ --ds-auro-background-container-color: transparent;
180
+ }
181
+ ```
182
+ <!-- AURO-GENERATED-CONTENT:END -->
package/demo/api.min.js ADDED
@@ -0,0 +1,3 @@
1
+ import { A as AuroBackground } from './auro-background.min.js';
2
+
3
+ AuroBackground.register();