Skip to content

Add plain arg to account banner #460

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JulienVannier66 merged 3 commits into from
Apr 17, 2026
Merged

Add plain arg to account banner #460

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
66af308
add plain arg to account banner
Elodie-DeMatteis-Upf Apr 2, 2026
3108faa
update upf-alert style to display all of its content correctly
Elodie-DeMatteis-Upf Apr 7, 2026
3d4a559
Fixe test after rebase & PR feedback
JulienVannier66 Apr 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion addon/components/utils/account-banner.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ interface UtilsAccountBannerArgs {
readonly?: boolean;
disabled?: boolean;
skin?: SkinType;
plain?: boolean;
alert?: Alert;

canSelectItem?: boolean;
Expand Down Expand Up @@ -52,14 +53,20 @@ export default class extends Component<UtilsAccountBannerArgs> {
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}`;
return '';
}

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 {
Expand Down
16 changes: 16 additions & 0 deletions app/styles/components/utils/account-banner.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,10 @@
}
}

&--plain {
.background-color-white;
}

&--selected {
border-color: var(--color-primary-500);
background-color: var(--color-primary-50);
Expand Down Expand Up @@ -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;
}
}
}
8 changes: 7 additions & 1 deletion tests/integration/components/utils/account-banner-test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`<Utils::AccountBanner @plain={{true}} />`);

assert.dom('.account-banner').hasClass('account-banner--plain');
});
});

module('icon / image', function () {
Expand Down Expand Up @@ -124,7 +130,7 @@ module('Integration | Component | utils/account-banner', function (hooks) {
test('it renders @subtitle', async function (assert) {
await render(hbs`<Utils::AccountBanner @subtitle="subtitle" />`);

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) {
Expand Down
Loading