From 8c3809941978278c78fab1cd15bee6f9874f7121 Mon Sep 17 00:00:00 2001
From: Craig Howell <howell.craig@gmail.com>
Date: Tue, 3 Oct 2023 21:18:09 -0400
Subject: [PATCH] fix(Feed): added class identifiers

---
 src/lib/components/feed/Avatar.svelte      | 9 +++++----
 src/lib/components/feed/Connector.svelte   | 3 ++-
 src/lib/components/feed/Content.svelte     | 2 +-
 src/lib/components/feed/DateTime.svelte    | 3 ++-
 src/lib/components/feed/Feed.svelte        | 4 ++--
 src/lib/components/feed/Icon.svelte        | 3 ++-
 src/lib/components/feed/Item.svelte        | 2 +-
 src/lib/components/feed/Leading.svelte     | 2 +-
 src/lib/components/feed/Placeholder.svelte | 4 ++--
 9 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/lib/components/feed/Avatar.svelte b/src/lib/components/feed/Avatar.svelte
index 1475cc28..1c13bb2e 100644
--- 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
index 32da710e..71afc994 100644
--- 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
index 5a0c9a0d..9651cf83 100644
--- 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
index 7fb9fc7b..5a11df96 100644
--- 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
index bf12a61c..e9dc23ce 100644
--- 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
index 556187c0..e8794112 100644
--- 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
index 3818cd20..0b1a4b6f 100644
--- 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
index dad4e73e..c10ab359 100644
--- 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
index ec8cac6b..f2ca151c 100644
--- 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';