fix(Avatar): added class identifiers

N00nDay · Oct 3, 2023 · c0ddcd3 · c0ddcd3
1 parent 80a94b7
commit c0ddcd3
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 9 deletions.
diff --git a/src/lib/components/avatar/Avatar.svelte b/src/lib/components/avatar/Avatar.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { setContext, onMount } from 'svelte/internal';
+	import { setContext, onMount } from 'svelte';
 	import Placeholder from './Placeholder.svelte';
 	import { get_current_component } from 'svelte/internal';
 	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
@@ -19,10 +19,10 @@
 	let failed = false;
 	let loading = true;
 
-	const srcClass = 'inline-block absolute';
-	const srcContainerClass = 'inline-block relative align-middle';
+	const srcClass = 'inline-block absolute stw-avatar';
+	const srcContainerClass = 'inline-block relative align-middle stwui-avatar-container';
 	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 stw-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/avatar/Indicator.svelte b/src/lib/components/avatar/Indicator.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext } from 'svelte/internal';
+	import { getContext } from 'svelte';
 	import { get_current_component } from 'svelte/internal';
 	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
 	export let use: ActionArray = [];
@@ -14,7 +14,8 @@
 
 	// TODO: add status prop to change color
 
-	const defaultClass = 'absolute block rounded-full ring-2 ring-surface bg-primary';
+	const defaultClass =
+		'absolute block rounded-full ring-2 ring-surface bg-primary stw-avatar-indicator';
 	const topRightClass = 'top-0 right-0';
 	const topLeftClass = 'top-0 left-0';
 	const bottomLeftClass = 'bottom-0 left-0';

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