@aurodesignsystem-dev/auro-background 0.0.0-pr71.2 → 0.0.0-pr71.3

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 (2) hide show
  1. package/demo/api.md +26 -26
  2. package/package.json +1 -1
package/demo/api.md CHANGED
@@ -112,21 +112,19 @@ Different `bg` values may be set for each breakpoint using the `bgSm`, `bgMd` an
112
112
  <!-- AURO-GENERATED-CONTENT:END -->
113
113
  </auro-accordion>
114
114
 
115
- ### Inset
116
-
117
- Use the `inset` attribute to add padding inside the element.
115
+ ### Height and Width
118
116
 
119
- 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').
117
+ Use the `height` and `width` attributes to set a fixed height/width on the element.
120
118
 
121
- 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).
119
+ The `height` and `width` attributes accept any valid CSS value for height/width (e.g. `100px`, `12rem`, `50vw`).
122
120
 
123
- Inset values may also be set for each breakpoint size via the `insetSm`, `insetMd` and `insetLg` attributes.
121
+ Custom height/width can be set per breakpoint using the `heightSm`, `heightMd`, `heightLg`, `widthSm`, `widthMd`, and `widthLg` attributes.
124
122
 
125
123
  <div class="exampleWrapper">
126
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inset.html) -->
127
- <!-- The below content is automatically added from ./../apiExamples/inset.html -->
128
- <auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat" inset="xl">
129
- <div style="color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
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;">
130
128
  <auro-header level="2" visualLevel="3">View all destinations</auro-header>
131
129
  <auro-hyperlink type="cta" variant="secondary" href="#" style="padding-top: 12px;" size="sm">See where we fly</auro-hyperlink>
132
130
  </div>
@@ -135,12 +133,12 @@ Inset values may also be set for each breakpoint size via the `insetSm`, `insetM
135
133
  </div>
136
134
  <auro-accordion alignRight>
137
135
  <span slot="trigger">See code</span>
138
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/inset.html) -->
139
- <!-- The below code snippet is automatically added from ./../apiExamples/inset.html -->
136
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/fixed-size.html) -->
137
+ <!-- The below code snippet is automatically added from ../apiExamples/fixed-size.html -->
140
138
 
141
139
  ```html
142
- <auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat" inset="xl">
143
- <div style="color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
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;">
144
142
  <auro-header level="2" visualLevel="3">View all destinations</auro-header>
145
143
  <auro-hyperlink type="cta" variant="secondary" href="#" style="padding-top: 12px;" size="sm">See where we fly</auro-hyperlink>
146
144
  </div>
@@ -149,19 +147,21 @@ Inset values may also be set for each breakpoint size via the `insetSm`, `insetM
149
147
  <!-- AURO-GENERATED-CONTENT:END -->
150
148
  </auro-accordion>
151
149
 
152
- ### Height and Width
150
+ ### Inset
153
151
 
154
- Use the `height` and `width` attributes to set a fixed height/width on the element.
152
+ Use the `inset` attribute to add padding inside the element.
155
153
 
156
- The `height` and `width` attributes accept any valid CSS value for height/width (e.g. '100px', '12rem', '50vw').
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`).
157
155
 
158
- Custom height/width can be set per breakpoint using the `heightSm`, `heightMd`, `heightLg`, `widthSm`, `widthMd`, and `widthLg` attributes.
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.
159
159
 
160
160
  <div class="exampleWrapper">
161
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/fixed-size.html) -->
162
- <!-- The below content is automatically added from ../apiExamples/fixed-size.html -->
163
- <auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat" height="400px" width="600px">
164
- <div style="height: 100%; color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
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
165
  <auro-header level="2" visualLevel="3">View all destinations</auro-header>
166
166
  <auro-hyperlink type="cta" variant="secondary" href="#" style="padding-top: 12px;" size="sm">See where we fly</auro-hyperlink>
167
167
  </div>
@@ -170,12 +170,12 @@ Custom height/width can be set per breakpoint using the `heightSm`, `heightMd`,
170
170
  </div>
171
171
  <auro-accordion alignRight>
172
172
  <span slot="trigger">See code</span>
173
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/fixed-size.html) -->
174
- <!-- The below code snippet is automatically added from ../apiExamples/fixed-size.html -->
173
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/inset.html) -->
174
+ <!-- The below code snippet is automatically added from ./../apiExamples/inset.html -->
175
175
 
176
176
  ```html
177
- <auro-background bg="url(https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4dde4105498391f8/6633c2581dbb0973c00b8783/ad2.png) center center/cover no-repeat" height="400px" width="600px">
178
- <div style="height: 100%; color: var(--ds-color-text-primary-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center;">
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
179
  <auro-header level="2" visualLevel="3">View all destinations</auro-header>
180
180
  <auro-hyperlink type="cta" variant="secondary" href="#" style="padding-top: 12px;" size="sm">See where we fly</auro-hyperlink>
181
181
  </div>
package/package.json CHANGED
@@ -7,7 +7,7 @@
7
7
  "================================================================================"
8
8
  ],
9
9
  "name": "@aurodesignsystem-dev/auro-background",
10
- "version": "0.0.0-pr71.2",
10
+ "version": "0.0.0-pr71.3",
11
11
  "description": "auro-background HTML custom element",
12
12
  "repository": {
13
13
  "type": "git",