${this.roundedBorder
? html`
-
+ <${this.headerTag} level="2" display="300" margin="both" size="none" class="title prefix">
-
+ ${this.headerTag}>
-
+ <${this.headerTag} level="2" display="600" margin="both" size="none" class="title">
- `
+ ${this.headerTag}>`
: html``
}
diff --git a/src/color.scss b/src/color.scss
index 9e85f9b..e59e8e0 100644
--- a/src/color.scss
+++ b/src/color.scss
@@ -15,11 +15,6 @@
color: var(--ds-auro-banner-text-color);
}
-:host([onDark]) {
- @extend %auro-banner--ondark;
-}
-
-// =-=-=-=-= common styles -=-=-=-=-=-=
%auro-banner {
.disclaimer {
color: var(--ds-auro-banner-disclaimer-text-color);
@@ -30,14 +25,24 @@
}
}
-// =-=-=-=-= ondark styles -=-=-=-=-=-=
%auro-banner--ondark {
--ds-auro-banner-text-color: var(--ds-color-text-primary-inverse, #{$ds-color-text-primary-inverse});
- --ds-auro-banner-title-text-color: var(--ds-color-text-primary-inverse, #{$ds-color-text-primary-inverse});
+
+ .title {
+ --ds-auro-banner-title-text-color: var(--ds-color-text-primary-inverse, #{$ds-color-text-primary-inverse});
+
+ color: var(--ds-auro-banner-title-text-color);
+ }
}
-// =-=-=-=-= billboard -=-=-=-=-=-=
-:host([billboard]) {
+:host([onDark]) {
+ @extend %auro-banner--ondark;
+}
+
+
+:host([billboard]),
+:host([hero]),
+:host([marquee]) {
@extend %auro-banner;
}
@@ -57,7 +62,6 @@
}
}
-// =-=-=-=-= roundedBorder -=-=-=-=-=-=
:host([roundedBorder]),
:host([roundedBorder][alignLeft]) {
@extend %auro-banner;
diff --git a/src/headerVersion.js b/src/headerVersion.js
new file mode 100644
index 0000000..b6cf624
--- /dev/null
+++ b/src/headerVersion.js
@@ -0,0 +1 @@
+export default '2.3.0'
\ No newline at end of file
diff --git a/src/tokens.scss b/src/tokens.scss
index 4052935..23fe453 100644
--- a/src/tokens.scss
+++ b/src/tokens.scss
@@ -5,6 +5,6 @@
--ds-auro-banner-disclaimer-text-color: var(--ds-color-text-secondary-default, #{$ds-color-text-secondary-default});
--ds-auro-banner-title-text-color: var(--ds-color-text-emphasis-default, #{$ds-color-text-emphasis-default});
--ds-auro-banner-icon-container-color: var(--ds-color-utility-gray-default, #{$ds-color-utility-gray-default});
- --ds-auro-banner-wrapper-container-color: var(--ds-color-brand-midnight-400, #{$ds-color-brand-midnight-400});
- --ds-auro-banner-wrapper-border-color: var(--ds-color-brand-lounge, #{$ds-color-brand-lounge});
+ --ds-auro-banner-wrapper-container-color: var(--ds-color-container-secondary-inverse, #{$ds-color-container-secondary-inverse});
+ --ds-auro-banner-wrapper-border-color: var(--ds-color-border-secondary-default, #{$ds-color-border-secondary-default});
}
diff --git a/test/auro-banner.test.js b/test/auro-banner.test.js
index 9546ec8..ab4be12 100644
--- a/test/auro-banner.test.js
+++ b/test/auro-banner.test.js
@@ -43,7 +43,7 @@ describe('auro-banner', () => {
`);
- const header = el.shadowRoot.querySelector('auro-header');
+ const header = el.shadowRoot.querySelector('[auro-header]');
await expect(header).to.not.be.null;
});
@@ -53,7 +53,7 @@ describe('auro-banner', () => {
`);
- const header = el.shadowRoot.querySelector('auro-header');
+ const header = el.shadowRoot.querySelector('[auro-header]');
await expect(header).to.not.be.null;
});
@@ -63,7 +63,7 @@ describe('auro-banner', () => {
`);
- const header = el.shadowRoot.querySelector('auro-header');
+ const header = el.shadowRoot.querySelector('[auro-header]');
await expect(header).to.not.be.null;
});