diff --git a/src/Prime/Resources/assets/themes/amazon/amazon.ts b/src/Prime/Resources/assets/themes/amazon/amazon.ts index af7179a7..c98aedfa 100644 --- a/src/Prime/Resources/assets/themes/amazon/amazon.ts +++ b/src/Prime/Resources/assets/themes/amazon/amazon.ts @@ -1,63 +1,37 @@ import './amazon.scss' import type { Envelope } from '../../types' +import { getTypeIcon, getCloseIcon } from '../shared/icons' +import { getA11yString, getCloseButtonA11y } from '../shared/accessibility' +import { CLASS_NAMES, DEFAULT_TITLES } from '../shared/constants' + +const AMAZON_TITLES: Record = { + success: 'Success!', + error: 'Problem', + warning: 'Warning', + info: 'Information', +} export const amazonTheme = { render: (envelope: Envelope): string => { const { type, message } = envelope - const isAlert = type === 'error' || type === 'warning' - const role = isAlert ? 'alert' : 'status' - const ariaLive = isAlert ? 'assertive' : 'polite' - - const getAlertIcon = () => { - switch (type) { - case 'success': - return ` - - ` - case 'error': - return ` - - ` - case 'warning': - return ` - - ` - case 'info': - return ` - - ` - } - return '' - } - - const getAlertTitle = () => { - switch (type) { - case 'success': return 'Success!' - case 'error': return 'Problem' - case 'warning': return 'Warning' - case 'info': return 'Information' - default: return 'Alert' - } - } + const alertTitle = AMAZON_TITLES[type] || DEFAULT_TITLES[type] || 'Alert' return ` -
+
- ${getAlertIcon()} + ${getTypeIcon(type, { size: 'lg' })}
-
${getAlertTitle()}
+
${alertTitle}
${message}
-
diff --git a/src/Prime/Resources/assets/themes/amber/amber.ts b/src/Prime/Resources/assets/themes/amber/amber.ts index 05f54a23..f2bad839 100644 --- a/src/Prime/Resources/assets/themes/amber/amber.ts +++ b/src/Prime/Resources/assets/themes/amber/amber.ts @@ -1,25 +1,23 @@ import './amber.scss' import type { Envelope } from '../../types' +import { getA11yString, getCloseButtonA11y } from '../shared/accessibility' +import { CLASS_NAMES } from '../shared/constants' export const amberTheme = { render: (envelope: Envelope): string => { const { type, message } = envelope - const isAlert = type === 'error' || type === 'warning' - const role = isAlert ? 'alert' : 'status' - const ariaLive = isAlert ? 'assertive' : 'polite' - return ` -
-
-
-
-
${message}
+
+
+
+
+
${message}
- +
-
-
+
+
` }, diff --git a/src/Prime/Resources/assets/themes/aurora/aurora.ts b/src/Prime/Resources/assets/themes/aurora/aurora.ts index 3b498e09..e69965b1 100644 --- a/src/Prime/Resources/assets/themes/aurora/aurora.ts +++ b/src/Prime/Resources/assets/themes/aurora/aurora.ts @@ -1,22 +1,20 @@ import './aurora.scss' import type { Envelope } from '../../types' +import { getA11yString, getCloseButtonA11y } from '../shared/accessibility' +import { CLASS_NAMES } from '../shared/constants' export const auroraTheme = { render: (envelope: Envelope): string => { const { type, message } = envelope - const isAlert = type === 'error' || type === 'warning' - const role = isAlert ? 'alert' : 'status' - const ariaLive = isAlert ? 'assertive' : 'polite' - return ` -
-
-
${message}
- +
+
+
${message}
+
-
-
+
+
` }, diff --git a/src/Prime/Resources/assets/themes/crystal/crystal.ts b/src/Prime/Resources/assets/themes/crystal/crystal.ts index 81b8879f..d244de45 100644 --- a/src/Prime/Resources/assets/themes/crystal/crystal.ts +++ b/src/Prime/Resources/assets/themes/crystal/crystal.ts @@ -1,24 +1,22 @@ import './crystal.scss' import type { Envelope } from '../../types' +import { getA11yString, getCloseButtonA11y } from '../shared/accessibility' +import { CLASS_NAMES } from '../shared/constants' export const crystalTheme = { render: (envelope: Envelope): string => { const { type, message } = envelope - const isAlert = type === 'error' || type === 'warning' - const role = isAlert ? 'alert' : 'status' - const ariaLive = isAlert ? 'assertive' : 'polite' - return ` -
-
-
-

${message}

+
+
+
+

${message}

- +
-
-
+
+
` }, diff --git a/src/Prime/Resources/assets/themes/emerald/emerald.ts b/src/Prime/Resources/assets/themes/emerald/emerald.ts index 87156d65..fccd8be7 100644 --- a/src/Prime/Resources/assets/themes/emerald/emerald.ts +++ b/src/Prime/Resources/assets/themes/emerald/emerald.ts @@ -1,19 +1,17 @@ import './emerald.scss' import type { Envelope } from '../../types' +import { getA11yString, getCloseButtonA11y } from '../shared/accessibility' +import { CLASS_NAMES } from '../shared/constants' export const emeraldTheme = { render: (envelope: Envelope): string => { const { type, message } = envelope - const isAlert = type === 'error' || type === 'warning' - const role = isAlert ? 'alert' : 'status' - const ariaLive = isAlert ? 'assertive' : 'polite' - return ` -
-
-
${message}
- +
+
+
${message}
+
` }, diff --git a/src/Prime/Resources/assets/themes/facebook/facebook.ts b/src/Prime/Resources/assets/themes/facebook/facebook.ts index b23630f7..060e5919 100644 --- a/src/Prime/Resources/assets/themes/facebook/facebook.ts +++ b/src/Prime/Resources/assets/themes/facebook/facebook.ts @@ -1,17 +1,18 @@ import './facebook.scss' import type { Envelope } from '../../types' +import { getCloseIcon } from '../shared/icons' +import { getA11yString, getCloseButtonA11y } from '../shared/accessibility' +import { CLASS_NAMES } from '../shared/constants' + +function getTimeString(): string { + const now = new Date() + return now.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }) +} export const facebookTheme = { render: (envelope: Envelope): string => { const { type, message } = envelope - const isAlert = type === 'error' || type === 'warning' - const role = isAlert ? 'alert' : 'status' - const ariaLive = isAlert ? 'assertive' : 'polite' - - const now = new Date() - const timeString = now.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }) - const getNotificationIcon = () => { switch (type) { case 'success': @@ -43,25 +44,23 @@ export const facebookTheme = { } return ` -