From 66af308fc20364ce9ca2d0dca8799256ca331ea3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Elodie=20Labb=C3=A9?= Date: Thu, 2 Apr 2026 11:27:52 +0200 Subject: [PATCH 1/3] add plain arg to account banner --- addon/components/utils/account-banner.ts | 9 ++++++++- app/styles/components/utils/account-banner.less | 4 ++++ .../integration/components/utils/account-banner-test.ts | 8 +++++++- 3 files changed, 19 insertions(+), 2 deletions(-) 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..01c6159a 100644 --- a/app/styles/components/utils/account-banner.less +++ b/app/styles/components/utils/account-banner.less @@ -22,6 +22,10 @@ } } + &--plain { + .bg-color-white; + } + &--selected { border-color: var(--color-primary-500); background-color: var(--color-primary-50); diff --git a/tests/integration/components/utils/account-banner-test.ts b/tests/integration/components/utils/account-banner-test.ts index 63ac852a..8ada8a53 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) { From 3108faaae2be1095c13183131064bcbd1f91ad64 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Elodie=20Labb=C3=A9?= Date: Tue, 7 Apr 2026 10:17:41 +0200 Subject: [PATCH 2/3] update upf-alert style to display all of its content correctly --- app/styles/components/utils/account-banner.less | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/app/styles/components/utils/account-banner.less b/app/styles/components/utils/account-banner.less index 01c6159a..8334da63 100644 --- a/app/styles/components/utils/account-banner.less +++ b/app/styles/components/utils/account-banner.less @@ -64,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; + } + } } From 3d4a55933d5a3b3f96bf37dd0e1241d028466e8b Mon Sep 17 00:00:00 2001 From: Julien Vannier Date: Fri, 17 Apr 2026 16:49:20 +0200 Subject: [PATCH 3/3] Fixe test after rebase & PR feedback --- app/styles/components/utils/account-banner.less | 12 ++++++------ .../components/utils/account-banner-test.ts | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/app/styles/components/utils/account-banner.less b/app/styles/components/utils/account-banner.less index 8334da63..5212285a 100644 --- a/app/styles/components/utils/account-banner.less +++ b/app/styles/components/utils/account-banner.less @@ -23,7 +23,7 @@ } &--plain { - .bg-color-white; + .background-color-white; } &--selected { @@ -65,15 +65,15 @@ transition: ease-in-out 0.25s; - .upf-alert { - overflow: visible; - - .indicator { + .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 8ada8a53..35aaf00f 100644 --- a/tests/integration/components/utils/account-banner-test.ts +++ b/tests/integration/components/utils/account-banner-test.ts @@ -130,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"]').hasText('subtitle *'); + assert.dom('[data-control-name="account-banner-selected-item-label"]').hasText('subtitle'); }); test('it renders custom-subtitle block', async function (assert) {