feat(#2947): update Notification Banner component for V2

[twjeffery]

Summary

Updates the Notification Banner component to support V2 design system with emphasis-based variants (High/Low emphasis), compact sizing, and enhanced accessibility while maintaining full backward compatibility with V1.

Changes

New Props

• version ("1" | "2", default "1"): Controls V1 vs V2 styling
• emphasis ("High" | "Low", optional): Controls emphasis level for V2 variants
  • High: Bold colors (dark/colored backgrounds, white or dark text)
  • Low: Subtle styling (light backgrounds, colored text, borders)
  • Defaults to "High" when version="2" and emphasis not specified
• compact (boolean, default false): Enables compact spacing (V2 only)
  • Reduces gap: 16px → 8px
  • Reduces padding: 24px → 16px (top/bottom)
  • Responsive padding reductions at all breakpoints

V2 Features

1. Emphasis-Based Styling (6 Variants)

Information:

• High: Blue background (#0077ad), white text, outline icon (inverted)
• Low: Light blue background (#cbeaf7), blue text, filled icon, border

Important:

• High: Yellow background (#f9ce2d), dark brown text (#4d3700), outline icon
• Low: Light yellow background (#fef2c8), brown text (#8d6500), filled icon, border

Emergency:

• High: Red background (#da291c), white text, outline icon (inverted)
• Low: Light red background (#eeaea5), dark red text (#a91a10), filled icon, border

2. Icon Behavior

Icon Inversion Logic:

• V1: All icons inverted (white) except important (black)
• V2 High emphasis: All icons inverted except important (uses dark brown)
• V2 Low emphasis: No icons inverted (all use default colors)

Icon Theme:

• V1: All icons outline
• V2 High emphasis: All icons outline
• V2 Low emphasis: All icons filled (new GoA icon theme prop)

3. Smart Defaults (effectiveEmphasis Pattern)

Problem solved: When version="2" but emphasis not specified, CSS selectors fail without a .high or .low class.

Solution: Default emphasis to "High" automatically for V2:

  $: effectiveEmphasis = version === "2" && !emphasis ? "High" : emphasis;

Benefits:

• Keeps emphasis prop optional (better API)
• V2 always has a valid emphasis level
• V1 remains unchanged (emphasis stays undefined)
• Prevents CSS selector mismatch

4. Soft Deprecation: type="event"

V2 silently maps type="event" to type="information":

• V1: type="event" displays calendar icon with info colors
• V2: type="event" automatically becomes information (no breaking change)
• Non-breaking migration path for existing implementations

5. Compact Spacing

Default spacing:

• Gap: 16px
• Padding (top/bottom): 24px
• Padding (responsive): 16px/24px/64px by breakpoint

Compact spacing (compact={true}):

• Gap: 8px (50% reduction)
• Padding (top/bottom): 16px (33% reduction)
• Padding (responsive): 8px/16px/32px (50% reduction)

Related

• Parent issue: Design system 2.0 coded component update #2998
• Component issue: Notification Banner 2.0 Update #2947
• Design tokens PR for Notification Banner
• V2 Figma component