diff --git a/apps/design-land/src/app/notification/notification.component.html b/apps/design-land/src/app/notification/notification.component.html index 35a2ed29c2..baba6d7a8b 100644 --- a/apps/design-land/src/app/notification/notification.component.html +++ b/apps/design-land/src/app/notification/notification.component.html @@ -7,8 +7,8 @@

Overview

Default notification

-

Dismissable notification

- +

Dismissible notification

+

Notification Statuses

diff --git a/libs/design/notification/examples/src/dismissable-notification/dismissable-notification.component.html b/libs/design/notification/examples/src/dismissible-notification/dismissible-notification.component.html similarity index 82% rename from libs/design/notification/examples/src/dismissable-notification/dismissable-notification.component.html rename to libs/design/notification/examples/src/dismissible-notification/dismissible-notification.component.html index b0a041b6c0..edfe419b2f 100644 --- a/libs/design/notification/examples/src/dismissable-notification/dismissable-notification.component.html +++ b/libs/design/notification/examples/src/dismissible-notification/dismissible-notification.component.html @@ -1,4 +1,4 @@ - +
Title
This is the subtitle with information
diff --git a/libs/design/notification/examples/src/dismissable-notification/dismissable-notification.component.ts b/libs/design/notification/examples/src/dismissible-notification/dismissible-notification.component.ts similarity index 72% rename from libs/design/notification/examples/src/dismissable-notification/dismissable-notification.component.ts rename to libs/design/notification/examples/src/dismissible-notification/dismissible-notification.component.ts index ab53b0cf98..9364e19619 100644 --- a/libs/design/notification/examples/src/dismissable-notification/dismissable-notification.component.ts +++ b/libs/design/notification/examples/src/dismissible-notification/dismissible-notification.component.ts @@ -6,8 +6,8 @@ import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'; @Component({ // eslint-disable-next-line @angular-eslint/component-selector - selector: 'dismissable-notification', - templateUrl: './dismissable-notification.component.html', + selector: 'dismissible-notification', + templateUrl: './dismissible-notification.component.html', styles: [` :host { display: flex; @@ -16,6 +16,6 @@ import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'; `], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class DismissableNotificationComponent { +export class DismissibleNotificationComponent { faInfoCircle = faInfoCircle; } diff --git a/libs/design/notification/examples/src/dismissable-notification/dismissable-notification.module.ts b/libs/design/notification/examples/src/dismissible-notification/dismissible-notification.module.ts similarity index 72% rename from libs/design/notification/examples/src/dismissable-notification/dismissable-notification.module.ts rename to libs/design/notification/examples/src/dismissible-notification/dismissible-notification.module.ts index bb5c74730e..82ef32092d 100644 --- a/libs/design/notification/examples/src/dismissable-notification/dismissable-notification.module.ts +++ b/libs/design/notification/examples/src/dismissible-notification/dismissible-notification.module.ts @@ -5,11 +5,11 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; import { DaffButtonModule } from '@daffodil/design/button'; import { DaffNotificationModule } from '@daffodil/design/notification'; -import { DismissableNotificationComponent } from './dismissable-notification.component'; +import { DismissibleNotificationComponent } from './dismissible-notification.component'; @NgModule({ declarations: [ - DismissableNotificationComponent, + DismissibleNotificationComponent, ], imports: [ CommonModule, @@ -18,7 +18,7 @@ import { DismissableNotificationComponent } from './dismissable-notification.com DaffButtonModule, ], exports: [ - DismissableNotificationComponent, + DismissibleNotificationComponent, ], }) -export class DismissableNotificationModule { } +export class DismissibleNotificationModule { } diff --git a/libs/design/notification/examples/src/public_api.ts b/libs/design/notification/examples/src/public_api.ts index 63604eda3b..0adc84943b 100644 --- a/libs/design/notification/examples/src/public_api.ts +++ b/libs/design/notification/examples/src/public_api.ts @@ -2,8 +2,8 @@ import { ComponentExample } from '@daffodil/design'; import { DefaultNotificationComponent } from './default-notification/default-notification.component'; import { DefaultNotificationModule } from './default-notification/default-notification.module'; -import { DismissableNotificationComponent } from './dismissable-notification/dismissable-notification.component'; -import { DismissableNotificationModule } from './dismissable-notification/dismissable-notification.module'; +import { DismissibleNotificationComponent } from './dismissible-notification/dismissible-notification.component'; +import { DismissibleNotificationModule } from './dismissible-notification/dismissible-notification.module'; import { NotificationOrientationsComponent } from './notification-orientations/notification-orientations.component'; import { NotificationOrientationsModule } from './notification-orientations/notification-orientations.module'; import { NotificationStatusComponent } from './notification-status/notification-status.component'; @@ -13,5 +13,5 @@ export const NOTIFICATION_EXAMPLES: ComponentExample[] = [ { component: DefaultNotificationComponent, module: DefaultNotificationModule }, { component: NotificationStatusComponent, module: NotificationStatusModule }, { component: NotificationOrientationsComponent, module: NotificationOrientationsModule }, - { component: DismissableNotificationComponent, module: DismissableNotificationModule }, + { component: DismissibleNotificationComponent, module: DismissibleNotificationModule }, ]; diff --git a/libs/design/notification/src/notification/notification.component.html b/libs/design/notification/src/notification/notification.component.html index d36ad33dd7..8b5b180914 100644 --- a/libs/design/notification/src/notification/notification.component.html +++ b/libs/design/notification/src/notification/notification.component.html @@ -8,6 +8,6 @@ - \ No newline at end of file diff --git a/libs/design/notification/src/notification/notification.component.scss b/libs/design/notification/src/notification/notification.component.scss index 33d431a88f..8c3e1b939b 100644 --- a/libs/design/notification/src/notification/notification.component.scss +++ b/libs/design/notification/src/notification/notification.component.scss @@ -55,7 +55,7 @@ margin: 16px 0 0; } - &.dismissable { + &.dismissible { &.horizontal { #{$root}__actions { padding: 8px 0; diff --git a/libs/design/notification/src/notification/notification.component.spec.ts b/libs/design/notification/src/notification/notification.component.spec.ts index 9ec6161e83..037464e5f4 100644 --- a/libs/design/notification/src/notification/notification.component.spec.ts +++ b/libs/design/notification/src/notification/notification.component.spec.ts @@ -21,7 +21,7 @@ import { `, @@ -30,7 +30,7 @@ import { class WrapperComponent { status: DaffStatus; orientation: DaffNotificationOrientation = 'vertical'; - dismissable = false; + dismissible = false; closeNotificationFunction = () => {}; } @@ -70,19 +70,19 @@ describe('@daffodil/design/notification | DaffNotificationComponent', () => { }); }); - describe('the dismissable property', () => { - it('should take dismissable as an input', () => { - expect(component.dismissable).toEqual(wrapper.dismissable); + describe('the dismissible property', () => { + it('should take dismissible as an input', () => { + expect(component.dismissible).toEqual(wrapper.dismissible); }); - describe('when dismissable is set to true', () => { + describe('when dismissible is set to true', () => { beforeEach(() => { - wrapper.dismissable = true; + wrapper.dismissible = true; fixture.detectChanges(); }); - it('should add a class of "dismissable" to the host element', () => { - expect(de.classes['dismissable']).toBeTrue(); + it('should add a class of "dismissible" to the host element', () => { + expect(de.classes['dismissible']).toBeTrue(); }); it('should show the close icon button', () => { @@ -142,7 +142,7 @@ describe('@daffodil/design/notification | DaffNotificationComponent', () => { describe('when the close icon button is clicked', () => { it('should emit closeNotification', () => { - wrapper.dismissable = true; + wrapper.dismissible = true; fixture.detectChanges(); spyOn(component.closeNotification, 'emit'); diff --git a/libs/design/notification/src/notification/notification.component.ts b/libs/design/notification/src/notification/notification.component.ts index 6e3546d284..3c9f2d14bb 100644 --- a/libs/design/notification/src/notification/notification.component.ts +++ b/libs/design/notification/src/notification/notification.component.ts @@ -69,7 +69,7 @@ export class DaffNotificationComponent } /** Whether or not a notification is closable */ - @Input() @HostBinding('class.dismissable') dismissable = false; + @Input() @HostBinding('class.dismissible') dismissible = false; @Output() closeNotification: EventEmitter = new EventEmitter();