diff --git a/addon/components/utils/account-banner.ts b/addon/components/utils/account-banner.ts index 4872b9d8..75d217bf 100644 --- a/addon/components/utils/account-banner.ts +++ b/addon/components/utils/account-banner.ts @@ -25,6 +25,7 @@ interface UtilsAccountBannerArgs { readonly?: boolean; disabled?: boolean; skin?: SkinType; + plain?: boolean; alert?: Alert; canSelectItem?: boolean; @@ -52,6 +53,10 @@ export default class extends Component { return this.args.selected ? 'account-banner--selected' : ''; } + get plainClass(): string { + return this.args.plain ? 'account-banner--plain' : ''; + } + get borderColorClass(): string { if (this.isErrored) return 'account-banner--error'; if (this.args.skin) return `account-banner--${this.args.skin}`; @@ -59,7 +64,9 @@ export default class extends Component { } get modifierClasses(): string { - return [this.disabledClass, this.selectedClass, this.borderColorClass].filter((mc) => !isBlank(mc)).join(' '); + return [this.disabledClass, this.selectedClass, this.borderColorClass, this.plainClass] + .filter((mc) => !isBlank(mc)) + .join(' '); } get canSelectItem(): boolean { diff --git a/app/styles/components/utils/account-banner.less b/app/styles/components/utils/account-banner.less index 20b9c651..5212285a 100644 --- a/app/styles/components/utils/account-banner.less +++ b/app/styles/components/utils/account-banner.less @@ -22,6 +22,10 @@ } } + &--plain { + .background-color-white; + } + &--selected { border-color: var(--color-primary-500); background-color: var(--color-primary-50); @@ -60,4 +64,16 @@ } transition: ease-in-out 0.25s; + + .upf-alert { + overflow: visible; + + .indicator { + border-radius: var(--border-radius-md) 0 0 var(--border-radius-md); + } + + .main-container { + border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0; + } + } } diff --git a/tests/integration/components/utils/account-banner-test.ts b/tests/integration/components/utils/account-banner-test.ts index 63ac852a..35aaf00f 100644 --- a/tests/integration/components/utils/account-banner-test.ts +++ b/tests/integration/components/utils/account-banner-test.ts @@ -69,6 +69,12 @@ module('Integration | Component | utils/account-banner', function (hooks) { assert.dom('.account-banner').hasClass('account-banner--selected'); assert.dom('.account-banner').hasClass('account-banner--disabled'); }); + + test('@plain applies plain class', async function (assert) { + await render(hbs``); + + assert.dom('.account-banner').hasClass('account-banner--plain'); + }); }); module('icon / image', function () { @@ -124,7 +130,7 @@ module('Integration | Component | utils/account-banner', function (hooks) { test('it renders @subtitle', async function (assert) { await render(hbs``); - assert.dom('[data-control-name="account-banner-selected-item-label"]').containsText('subtitle'); + assert.dom('[data-control-name="account-banner-selected-item-label"]').hasText('subtitle'); }); test('it renders custom-subtitle block', async function (assert) {