fix(Notification): added class identifiers

N00nDay · Oct 5, 2023 · ba9160c · ba9160c
1 parent 33b48dd
commit ba9160c
Show file tree

Hide file tree

Showing 8 changed files with 16 additions and 14 deletions.
diff --git a/src/lib/components/notification/Avatar.svelte b/src/lib/components/notification/Avatar.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { setContext, onMount } from 'svelte/internal';
+	import { setContext, onMount } from 'svelte';
 	import { twMerge } from 'tailwind-merge';
 	import Placeholder from './Placeholder.svelte';
 	import { get_current_component } from 'svelte/internal';
@@ -19,10 +19,11 @@
 	let failed = false;
 	let loading = true;
 
-	const srcClass = 'inline-block absolute';
-	const srcContainerClass = 'inline-block relative align-middle';
+	const srcClass = 'inline-block absolute stwui-notification-leading-avatar';
+	const srcContainerClass =
+		'inline-block relative align-middle stwui-notification-leading-avatar-wrapper';
 	const initialClass =
-		'inline-flex items-center justify-center align-middle bg-default text-default-content';
+		'inline-flex items-center justify-center align-middle bg-default text-default-content stwui-notification-leading-avatar';
 	const xsClass = 'h-6 w-6';
 	const smClass = 'h-8 w-8';
 	const mdClass = 'h-10 w-10';

diff --git a/src/lib/components/notification/Content.svelte b/src/lib/components/notification/Content.svelte
@@ -13,7 +13,7 @@
 	const leading: Writable<boolean> = getContext('notification-leading');
 	const type: 'info' | 'warn' | 'error' | 'success' | undefined = getContext('notification-type');
 
-	const defaultClass = 'w-0 flex-1 pt-0.5';
+	const defaultClass = 'w-0 flex-1 pt-0.5 stwui-notification-content';
 	const leadingTypeClass = 'ml-3 w-0 flex-1 pt-0.5';
 
 	$: finalClass = twMerge(

diff --git a/src/lib/components/notification/Description.svelte b/src/lib/components/notification/Description.svelte
@@ -10,7 +10,7 @@
 
 	const title: Writable<boolean> = getContext('notification-title');
 
-	const defaultClass = 'text-sm text-secondary-content';
+	const defaultClass = 'text-sm text-secondary-content stwui-notification-content-description';
 	const titleClass = 'mt-1';
 
 	$: finalClass = twMerge(

diff --git a/src/lib/components/notification/Extra.svelte b/src/lib/components/notification/Extra.svelte
@@ -12,7 +12,7 @@
 
 	$: $extra = true;
 
-	const defaultClass = 'ml-4 flex flex-shrink-0 relative top-0 right-0';
+	const defaultClass = 'ml-4 flex flex-shrink-0 relative top-0 right-0 stwui-notification-extra';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 

diff --git a/src/lib/components/notification/Leading.svelte b/src/lib/components/notification/Leading.svelte
@@ -12,7 +12,7 @@
 
 	$: $leading = true;
 
-	const defaultClass = 'flex-shrink-0 text-content';
+	const defaultClass = 'flex-shrink-0 text-content stwui-notification-leading';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 

diff --git a/src/lib/components/notification/Notification.svelte b/src/lib/components/notification/Notification.svelte
@@ -26,7 +26,7 @@
 	let extra = writable(false);
 
 	const defaultClass =
-		'relative cursor-pointer flex items-start pointer-events-auto p-4 w-full max-w-sm overflow-hidden rounded-lg bg-surface shadow-lg border border-border';
+		'relative cursor-pointer flex items-start pointer-events-auto p-4 w-full max-w-sm overflow-hidden rounded-lg bg-surface shadow-lg border border-border stwui-notification';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 
 	setContext('notification-leading', leading);
@@ -44,7 +44,7 @@
 		<slot name="leading" />
 	{:else if type}
 		<div
-			class="flex-shrink-0 text-content"
+			class="flex-shrink-0 text-content stwui-notification-icon"
 			class:text-info-icon={type === 'info'}
 			class:text-warn-icon={type === 'warn'}
 			class:text-success-icon={type === 'success'}

diff --git a/src/lib/components/notification/Placeholder.svelte b/src/lib/components/notification/Placeholder.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { fade } from 'svelte/transition';
-	import { getContext } from 'svelte/internal';
+	import { getContext } from 'svelte';
 	import { twMerge } from 'tailwind-merge';
 	import Icon from '../icon/Icon.svelte';
 	import { account } from '../../icons';
@@ -17,11 +17,12 @@
 	const placeholder: boolean = getContext('notification-avatar-placeholder');
 
 	const defaultClass =
-		'absolute text-content inset-0 h-full w-full flex items-center justify-center overflow-hidden bg-default';
+		'absolute text-content inset-0 h-full w-full flex items-center justify-center overflow-hidden bg-default stwui-notification-leading-avatar-placeholder';
 	const circleClass = 'rounded-full';
 	const roundedClass = 'rounded-md';
 
-	const defaultIconContainerClass = 'absolute text-content h-full w-full';
+	const defaultIconContainerClass =
+		'absolute text-content h-full w-full stwui-notification-leading-avatar-placeholder-wrapper';
 	const xsContainerClass = 'bottom-[-0.25rem]';
 	const smContainerClass = 'bottom-[-0.35rem]';
 	const mdContainerClass = 'bottom-[-0.5rem]';

diff --git a/src/lib/components/notification/Title.svelte b/src/lib/components/notification/Title.svelte
@@ -12,7 +12,7 @@
 
 	$: $title = true;
 
-	const defaultClass = 'text-sm font-medium text-content';
+	const defaultClass = 'text-sm font-medium text-content stwui-notification-content-title';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>