fix(Feed): added class identifiers

N00nDay · Oct 4, 2023 · 8c38099 · 8c38099
1 parent 532ba81
commit 8c38099
Show file tree

Hide file tree

Showing 9 changed files with 18 additions and 14 deletions.
diff --git a/src/lib/components/feed/Avatar.svelte b/src/lib/components/feed/Avatar.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <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';
@@ -22,10 +22,11 @@
 	let failed = false;
 	let loading = true;
 
-	const srcClass = 'inline-block absolute';
-	const srcContainerClass = 'inline-block h-8 w-8 relative align-middle';
+	const srcClass = 'inline-block absolute stwui-feed-item-leading-avatar';
+	const srcContainerClass =
+		'inline-block h-8 w-8 relative align-middle stwui-feed-item-leading-avatar-wrapper';
 	const initialsClass =
-		'inline-flex h-8 w-8 items-center justify-center align-middle bg-default text-default-content';
+		'inline-flex h-8 w-8 items-center justify-center align-middle bg-default text-default-content stwui-feed-item-leading-avatar';
 
 	const circleClass = 'rounded-full';
 	const roundedClass = 'rounded-md';

diff --git a/src/lib/components/feed/Connector.svelte b/src/lib/components/feed/Connector.svelte
@@ -6,7 +6,8 @@
 	import { twMerge } from 'tailwind-merge';
 	const forwardEvents = forwardEventsBuilder(get_current_component());
 
-	const defaultClass = 'connector absolute top-4 left-4 -ml-px h-full w-0.5 bg-border';
+	const defaultClass =
+		'connector absolute top-4 left-4 -ml-px h-full w-0.5 bg-border stwui-feed-item-connector';
 	$: finalClass = twMerge(defaultClass, $$props.cass);
 </script>
 

diff --git a/src/lib/components/feed/Content.svelte b/src/lib/components/feed/Content.svelte
@@ -6,7 +6,7 @@
 	import { exclude } from '../../utils/exclude';
 	const forwardEvents = forwardEventsBuilder(get_current_component());
 
-	const defaultClass = 'text-sm text-secondary-content';
+	const defaultClass = 'text-sm text-secondary-content stwui-feed-item-content';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 

diff --git a/src/lib/components/feed/DateTime.svelte b/src/lib/components/feed/DateTime.svelte
@@ -6,7 +6,8 @@
 	import { exclude } from '../../utils/exclude';
 	const forwardEvents = forwardEventsBuilder(get_current_component());
 
-	const defaultClass = 'whitespace-nowrap text-right text-sm text-secondary-content';
+	const defaultClass =
+		'whitespace-nowrap text-right text-sm text-secondary-content stwui-feed-datetime';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 

diff --git a/src/lib/components/feed/Feed.svelte b/src/lib/components/feed/Feed.svelte
@@ -6,7 +6,7 @@
 	import { exclude } from '../../utils/exclude';
 	const forwardEvents = forwardEventsBuilder(get_current_component());
 
-	const defaultClass = 'feed -mb-8';
+	const defaultClass = 'feed -mb-8 stwui-feed';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
@@ -22,7 +22,7 @@
 </div>
 
 <style global>
-	.feed .item:last-child .connector {
+	:global(.feed .item:last-child .connector) {
 		display: none;
 	}
 </style>
diff --git a/src/lib/components/feed/Icon.svelte b/src/lib/components/feed/Icon.svelte
@@ -24,7 +24,7 @@
 		return res[1];
 	}
 
-	const defaultClass = 'text-white';
+	const defaultClass = 'text-white stwui-feed-item-leading-icon';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
@@ -51,6 +51,7 @@
 			'stroke'
 		])}
 	>
+		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 		{@html elements}
 	</svg>
 </span>
diff --git a/src/lib/components/feed/Item.svelte b/src/lib/components/feed/Item.svelte
@@ -2,7 +2,7 @@
 	import { twMerge } from 'tailwind-merge';
 	import Connector from './Connector.svelte';
 
-	const defaultClass = 'relative pb-8';
+	const defaultClass = 'relative pb-8 stwui-feed-item';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 

diff --git a/src/lib/components/feed/Leading.svelte b/src/lib/components/feed/Leading.svelte
@@ -7,7 +7,7 @@
 	const forwardEvents = forwardEventsBuilder(get_current_component());
 
 	const defaultClass =
-		'h-8 w-8 bg-default rounded-full flex items-center justify-center ring-8 ring-surface';
+		'h-8 w-8 bg-default rounded-full flex items-center justify-center ring-8 ring-surface stwui-feed-item-leading-wrapper';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 

diff --git a/src/lib/components/feed/Placeholder.svelte b/src/lib/components/feed/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,7 +17,7 @@
 
 	const iconContainerClass = 'absolute text-content h-full w-full';
 	const defaultClass =
-		'absolute inset-0 h-full w-full flex items-center justify-center overflow-hidden bg-default';
+		'absolute inset-0 h-full w-full flex items-center justify-center overflow-hidden bg-default stwui-feed-leading-avatar-placeholder';
 	const circleClass = 'rounded-full';
 	const roundedClass = 'rounded-md';