feat(design)!: update DaffStatus danger value to critical and add an info value (#3293)

BREAKING CHANGE: the `danger` value in `DaffStatus` has been changed to `critical`.

Author: xelaint

apps/design-land/src/app/button/button.component.html

@@ -47,7 +47,7 @@ <h3>Theming</h3>
 <h3>Status Indicators</h3>
 <p>Buttons with status indicators can be used to distinguish what type of action it performs and its importance compared to other buttons in the same context.</p>
 
-<p>Supported statuses: <code>warn | danger | success</code></p>
+<p>Supported statuses: <code>warn | critical | success</code></p>
 
 <design-land-example-viewer-container example="statusable-button"></design-land-example-viewer-container>
 

apps/design-land/src/app/foundations/variables/variables.component.html

@@ -58,7 +58,7 @@ <h2>CSS Custom Properties</h2>
 			<td>#00852E</td>
 		</tr>
 		<tr>
-			<td>--daff-theme-danger</td>
+			<td>--daff-theme-critical</td>
 			<td>#EC0019</td>
 			<td>#EC0019</td>
 		</tr>

apps/design-land/src/app/notification/notification.component.html

@@ -28,7 +28,7 @@ <h2>Properties</h2>
 <h3>Statuses</h3>
 <p>The status color of a notification can be updated by using the <code>status</code> property.</p>
 
-<p>Supported statuses: <code>warn | danger | success</code></p>
+<p>Supported statuses: <code>warn | critical | success</code></p>
 
 <h4>Notification with statuses</h4>
 <design-land-example-viewer-container example="notification-status"></design-land-example-viewer-container>
@@ -46,4 +46,4 @@ <h3>Dismissing a notification</h3>
 <design-land-example-viewer-container example="dismissible-notification"></design-land-example-viewer-container>
 
 <h2>Accessibility</h2>
-<p>Notifications with a <code>danger</code> or <code>warn</code> status have a <code>role="alert"</code> so that it can be announced by assistive technologies. All other notifications have a <code>role="status"</code>. See <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles#4._live_region_roles" target="_blank">live region roles</a> for more information. Notifications have a <code>tabindex="0"</code> so users can discover them while tabbing through a page.</p>
+<p>Notifications with a <code>critical</code> or <code>warn</code> status have a <code>role="alert"</code> so that it can be announced by assistive technologies. All other notifications have a <code>role="status"</code>. See <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles#4._live_region_roles" target="_blank">live region roles</a> for more information. Notifications have a <code>tabindex="0"</code> so users can discover them while tabbing through a page.</p>

apps/design-land/src/app/toast/toast.component.html

@@ -113,7 +113,7 @@ <h3>Stacking</h3>
 <h3>Statuses</h3>
 <p>The status color of a toast can be updated by using the <code>status</code> property.</p>
 
-<p>Supported statuses: <code>warn | danger | success</code></p>
+<p>Supported statuses: <code>warn | critical | success</code></p>
 
 <h4>Toast with statuses</h4>
 <design-land-article-encapsulated>

libs/design/button/README.md

@@ -89,7 +89,7 @@ Supported colors: `primary | secondary | tertiary | black | white | theme | them
 ## Status Indicators
 Buttons with status indicators can be used to distinguish what type of action it performs and its importance compared to other buttons in the same context.
 
-Supported statuses: `warn | danger | success`
+Supported statuses: `warn | critical | success`
 
 <design-land-example-viewer-container example="statusable-button"></design-land-example-viewer-container>
 

libs/design/button/examples/src/statusable-button/statusable-button.component.html

@@ -1,34 +1,34 @@
 <h4>Basic Status Buttons</h4>
 <div class="statusable-button__group">
 	<button daff-button status="warn">Warn</button>
-	<button daff-button status="danger">Danger</button>
+	<button daff-button status="critical">Critical</button>
 	<button daff-button status="success">Success</button>
 </div>
 
 <h4>Stroked Status Buttons</h4>
 <div class="statusable-button__group">
 	<button daff-stroked-button status="warn">Warn</button>
-	<button daff-stroked-button status="danger">Danger</button>
+	<button daff-stroked-button status="critical">Critical</button>
 	<button daff-stroked-button status="success">Success</button>
 </div>
 
 <h4>Raised Status Buttons</h4>
 <div class="statusable-button__group">
 	<button daff-raised-button status="warn">Warn</button>
-	<button daff-raised-button status="danger">Danger</button>
+	<button daff-raised-button status="critical">Critical</button>
 	<button daff-raised-button status="success">Success</button>
 </div>
 
 <h4>Underline Status Buttons</h4>
 <div class="statusable-button__group">
 	<button daff-underline-button status="warn">Warn</button>
-	<button daff-underline-button status="danger">Danger</button>
+	<button daff-underline-button status="critical">Critical</button>
 	<button daff-underline-button status="success">Success</button>
 </div>
 
 <h4>Icon Status Buttons</h4>
 <div class="statusable-button__group">
 	<button daff-icon-button status="warn"><fa-icon [icon]="faExclamation"></fa-icon></button>
-	<button daff-icon-button status="danger"><fa-icon [icon]="faExclamationTriangle"></fa-icon></button>
+	<button daff-icon-button status="critical"><fa-icon [icon]="faExclamationTriangle"></fa-icon></button>
 	<button daff-icon-button status="success"><fa-icon [icon]="faCheckCircle"></fa-icon></button>
 </div>

libs/design/button/src/button-theme.scss

@@ -111,7 +111,7 @@
 			);
 		}
 
-		&.daff-danger {
+		&.daff-critical {
 			@include button.daff-button-theme-variant(
 				theming.daff-color(theming.$daff-red, 60),
 				theming.daff-color(theming.$daff-red, 70),
@@ -177,7 +177,7 @@
 			);
 		}
 
-		&.daff-danger {
+		&.daff-critical {
 			@include raised.daff-raised-button-theme-variant(
 				theming.daff-color(theming.$daff-red, 60)
 			);
@@ -274,7 +274,7 @@
 			);
 		}
 
-		&.daff-danger {
+		&.daff-critical {
 			@include icon.daff-icon-button-theme-variant(
 				theming.daff-color(theming.$daff-red, 60),
 				theming.daff-color(theming.$daff-red, 70),
@@ -390,7 +390,7 @@
 			);
 		}
 
-		&.daff-danger {
+		&.daff-critical {
 			@include stroked.daff-stroked-button-theme-variant(
 				theming.daff-color(theming.$daff-red, 60),
 				theming.daff-color(theming.$daff-red, 70)
@@ -492,7 +492,7 @@
 			);
 		}
 
-		&.daff-danger {
+		&.daff-critical {
 			@include flat.daff-flat-button-theme-variant(
 				theming.daff-color(theming.$daff-red, 60),
 				theming.daff-color(theming.$daff-red, 70)
@@ -559,7 +559,7 @@
 			);
 		}
 
-		&.daff-danger {
+		&.daff-critical {
 			@include underline.daff-underline-button-theme-variant(
 				theming.daff-color(theming.$daff-red, 60)
 			);

libs/design/notification/README.md

@@ -69,7 +69,7 @@ Buttons can be included in notifications to resolve the notification or navigate
 ### Statuses
 The status color of a notification can be updated by using the `status` property.
 
-Supported statuses: `warn | danger | success`
+Supported statuses: `warn | critical | success`
 
 #### Notification with statuses
 <design-land-example-viewer-container example="notification-status"></design-land-example-viewer-container>
@@ -87,4 +87,4 @@ The close button is hidden by default but can be visible by setting the `dismiss
 <design-land-example-viewer-container example="dismissible-notification"></design-land-example-viewer-container>
 
 ## Accessibility
-Notifications with a `danger` or `warn` status have a `role="alert"` so that it can be announced by assistive technologies. See (live region roles)[https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles#4._live_region_roles] for more information. All other notifications have a `role="status"`. Notifications have a `tabindex="0"` so users can discover them while tabbing through a page.
+Notifications with a `critical` or `warn` status have a `role="alert"` so that it can be announced by assistive technologies. See (live region roles)[https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles#4._live_region_roles] for more information. All other notifications have a `role="status"`. Notifications have a `tabindex="0"` so users can discover them while tabbing through a page.

libs/design/notification/examples/src/notification-status/notification-status.component.html

@@ -1,13 +1,13 @@
 <daff-notification [status]="statusControl.value">
 	<fa-icon *ngIf="statusControl.value === 'success'" daffPrefix [icon]="faCheck" [fixedWidth]="true"></fa-icon>
 	<fa-icon *ngIf="statusControl.value === 'warn'" daffPrefix [icon]="faExclamation" [fixedWidth]="true"></fa-icon>
-	<fa-icon *ngIf="statusControl.value === 'danger'" daffPrefix [icon]="faExclamation" [fixedWidth]="true"></fa-icon>
+	<fa-icon *ngIf="statusControl.value === 'critical'" daffPrefix [icon]="faExclamation" [fixedWidth]="true"></fa-icon>
 	<div daffNotificationTitle>Title</div>
 	<div daffNotificationSubtitle>This is the subtitle with information</div>
 </daff-notification>
 
 <select [formControl]="statusControl">
 	<option value="success">Success</option>
 	<option value="warn">Warn</option>
-	<option value="danger">Danger</option>
+	<option value="critical">Critical</option>
 </select>

libs/design/notification/src/notification-theme.scss

@@ -37,7 +37,7 @@
 			}
 		}
 
-		&.daff-danger {
+		&.daff-critical {
 			background: theming.daff-color(theming.$daff-red, 10);
 			border: 1px solid theming.daff-color(theming.$daff-red, 20);
 			color: theming.daff-text-contrast(theming.daff-color(theming.$daff-red, 10));

libs/design/notification/src/notification/notification.component.spec.ts

@@ -124,8 +124,8 @@ describe('@daffodil/design/notification | DaffNotificationComponent', () => {
       expect(component.role).toBe('alert');
     });
 
-    it('should set role to alert if status is danger', () => {
-      wrapper.status = 'danger';
+    it('should set role to alert if status is critical', () => {
+      wrapper.status = 'critical';
       fixture.detectChanges();
 
       expect(component.role).toBe('alert');

libs/design/notification/src/notification/notification.component.ts

@@ -68,11 +68,11 @@ export class DaffNotificationComponent implements DaffPrefixable {
   @HostBinding('attr.tabindex') tabindex = '0';
 
   /**
-   * Sets role to alert when `status="warn"` or `status="danger"`.
+   * Sets role to alert when `status="warn"` or `status="critical"`.
    * Sets role to status on all other instances.
    */
   @HostBinding('attr.role') get role() {
-    return this.statusDirective.status === DaffStatusEnum.Warn || this.statusDirective.status === DaffStatusEnum.Danger ? 'alert' : 'status';
+    return this.statusDirective.status === DaffStatusEnum.Warn || this.statusDirective.status === DaffStatusEnum.Critical ? 'alert' : 'status';
   };
 
   @HostBinding('class.vertical') get verticalOrientation() {

libs/design/scss/theming/_theme-css-variables.scss

@@ -25,7 +25,7 @@
 	--daff-theme-tertiary: #{theming.daff-color($tertiary)};
 	--daff-theme-warn: #{theming.daff-color(theming.$daff-bronze, 60)};
 	--daff-theme-success: #{theming.daff-color(theming.$daff-green, 60)};
-	--daff-theme-danger: #{theming.daff-color(theming.$daff-red, 60)};
+	--daff-theme-critical: #{theming.daff-color(theming.$daff-red, 60)};
 	--daff-theme-white: #{$white};
 	--daff-theme-black: #{$black};
 	--daff-theme-gray: #{theming.daff-color($neutral)};

libs/design/src/core/statusable/statusable.directive.spec.ts

@@ -57,6 +57,15 @@ describe('@daffodil/design | DaffStatusableDirective', () => {
     expect(directive.status).toEqual(wrapper.status);
   });
 
+  it('should add a class of .daff-info to the host element if status is set to info', () => {
+    wrapper.status = 'info';
+    fixture.detectChanges();
+
+    expect(directive.class).toEqual(jasmine.objectContaining({
+      'daff-info': true,
+    }));
+  });
+
   it('should add a class of .daff-warn to the host element if status is set to warn', () => {
     wrapper.status = 'warn';
     fixture.detectChanges();
@@ -66,12 +75,12 @@ describe('@daffodil/design | DaffStatusableDirective', () => {
     }));
   });
 
-  it('should add a class of .daff-danger to the host element if status is set to danger', () => {
-    wrapper.status = 'danger';
+  it('should add a class of .daff-critical to the host element if status is set to critical', () => {
+    wrapper.status = 'critical';
     fixture.detectChanges();
 
     expect(directive.class).toEqual(jasmine.objectContaining({
-      'daff-danger': true,
+      'daff-critical': true,
     }));
   });
 

libs/design/src/core/statusable/statusable.directive.ts

@@ -13,7 +13,7 @@ import {
 /**
  * `DaffStatusableDirective` allows a component to conditionally apply status-specific
  * styles by setting CSS classes based on the specified status. This directive is useful
- * for indicating different statuses such as warning, danger, or success states.
+ * for indicating different statuses such as info, warning, critical, or success states.
  *
  * ## Usage
  *
@@ -42,7 +42,7 @@ import {
  * ```scss
  * .custom-component {
  *
- *  &.daff-danger {
+ *  &.daff-critical {
  *    background: daff-color($red, 10);
  *    color: daff-color($red, 90);
  *  }
@@ -52,8 +52,9 @@ import {
  *
  * The directive applies the following CSS classes based on the status:
  *
+ * - `daff-info`: Applied when the status is `info`.
  * - `daff-warn`: Applied when the status is `warn`.
- * - `daff-danger`: Applied when the status is `danger`.
+ * - `daff-critical`: Applied when the status is `critical`.
  * - `daff-success`: Applied when the status is `success`.
  */
 @Directive({
@@ -68,8 +69,9 @@ export class DaffStatusableDirective implements DaffStatusable {
    */
   @HostBinding('class') get class() {
     return {
+      'daff-info': this.status === DaffStatusEnum.Info,
       'daff-warn': this.status === DaffStatusEnum.Warn,
-      'daff-danger': this.status === DaffStatusEnum.Danger,
+      'daff-critical': this.status === DaffStatusEnum.Critical,
       'daff-success': this.status === DaffStatusEnum.Success,
     };
   }

libs/design/src/core/statusable/statusable.ts

@@ -11,17 +11,19 @@ export interface DaffStatusable {
 
 /**
  * The `DaffStatus` type defines the possible status values that a component can have.
+ * - 'info': Indicatea an informational status.
  * - 'warn': Indicates a warning status.
- * - 'danger': Indicates a danger or error status.
+ * - 'critical': Indicates a critical or error status.
  * - 'success': Indicates a success status.
  */
-export type DaffStatus = 'warn' | 'danger' | 'success';
+export type DaffStatus = 'info' | 'warn' | 'critical' | 'success';
 
 /**
  * The `DaffStatusEnum` enumerates the possible status values for a component.
  */
 export enum DaffStatusEnum {
+  Info = 'info',
   Warn = 'warn',
-  Danger = 'danger',
+  Critical = 'critical',
   Success = 'success'
 }

libs/design/toast/README.md

@@ -153,7 +153,7 @@ A maximum of three toasts can be shown at a time. Toasts are stacked vertically,
 ## Statuses
 The status color of a toast can be updated by using the `status` property.
 
-Supported statuses: `warn | danger | success`
+Supported statuses: `warn | critical | success`
 
 ### Toast with statuses
 <design-land-example-viewer-container example="toast-status"></design-land-example-viewer-container>

libs/design/toast/examples/src/toast-status/toast-status.component.html

@@ -3,5 +3,5 @@
 <select [formControl]="statusControl">
 	<option value="success">Success</option>
 	<option value="warn">Warn</option>
-	<option value="danger">Danger</option>
+	<option value="critical">Critical</option>
 </select>

libs/design/toast/examples/src/toast-status/toast-status.component.ts

@@ -19,7 +19,7 @@ import {
 } from '@daffodil/design/toast';
 
 const status: Record<string, DaffToastData> =  {
-  danger: {
+  critical: {
     title: 'Server error',
     message: 'There is a server error.',
   },
@@ -60,7 +60,7 @@ export class ToastStatusComponent {
       ...status[this.statusControl.value],
     },
     {
-      duration: this.statusControl.value === 'danger' ? undefined : 5000,
+      duration: this.statusControl.value === 'critical' ? undefined : 5000,
     },
     );
   }

libs/design/toast/src/toast-theme.scss

@@ -47,7 +47,7 @@
 			}
 		}
 
-		&.daff-danger {
+		&.daff-critical {
 			background: theming.daff-color(theming.$daff-red, 10);
 			color: $black;