From 44833b5f156d898d49136efbcbae8e282c8b67f0 Mon Sep 17 00:00:00 2001
From: DanConwayDev <DanConwayDev@protonmail.com>
Date: Tue, 6 Feb 2024 15:28:38 +0000
Subject: [PATCH] feat(UserHeader): added xs size

to enable subtler display of user header
---
 __snapshots__/users-header--extra-small.png   | Bin 0 -> 8209 bytes
 ...ers-header--inline-extra-small-loading.png | Bin 0 -> 5694 bytes
 .../users-header--inline-extra-small.png      | Bin 0 -> 8380 bytes
 __snapshots__/users-header.test.js.snap       |  51 ++++++++++++++++++
 .../users/UserHeader.stories.svelte           |  32 +++++++++++
 src/lib/components/users/UserHeader.svelte    |  10 ++--
 6 files changed, 89 insertions(+), 4 deletions(-)
 create mode 100644 __snapshots__/users-header--extra-small.png
 create mode 100644 __snapshots__/users-header--inline-extra-small-loading.png
 create mode 100644 __snapshots__/users-header--inline-extra-small.png

diff --git a/__snapshots__/users-header--extra-small.png b/__snapshots__/users-header--extra-small.png
new file mode 100644
index 0000000000000000000000000000000000000000..21d93eef3d113433d6a5f4e44300a679934f67a7
GIT binary patch
literal 8209
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
ZEko&lFN`6LE}4n@eHC<?b?VCZ{{Ugfd`JKQ

literal 0
HcmV?d00001

diff --git a/__snapshots__/users-header--inline-extra-small-loading.png b/__snapshots__/users-header--inline-extra-small-loading.png
new file mode 100644
index 0000000000000000000000000000000000000000..257f7c4be5967890581736fd4aa1f498efc75eb1
GIT binary patch
literal 5694
zcmeAS@N?(olHy`uVBq!ia0y~yU<ERnE^x2`sq?jW!+;cHage(c!@6@aFM%AEVkgfK
z4j`!ENa<i;5Pjk4;uumf=k48tc~YJt4i~eenrEi$Q~UovxKKuDL892^t)iAU81K&6
z>>^@w_0y_d*}pzLJ)H_Ph=IX#bu>SiQ6s}B0Ad_saR5;q!VHW+O2LPL1xPg*41nZ@
zuhoA}oIh;z?f2z~X`gq*#Qi&G(rb8r^~T$4kCz$mKYpJH<k0;Er3`<57EAiy=iC41
z-czGvFH7Y7{o4)g@{g7ME@H8fnfCF|UyF0kPp>wd_}b^P#OkXic7Hz`m?h}|H9Oq8
z+RyO5Ugm!4*{4O4=g%Mi`1Pg1G}k}BJ*J<QI9((eKcDaM&)<bHIc6Zm*RC=aMBbC@
zkBcg{nS1=-@t3y>D;EF#XVQ24^V;Jew>)T$k!7fV{^5pq_P6Sf@55Tcfr1U|cJE~U
zQBuV9HtdZp$e8PQAwm4$?_FPpnDy_|rtI(A%MO%zv1|6H&DAmYt6KJ7%S(R`3jbB_
z)EM&2K3CMt$+tZgpT0f1|7>$DNbQPUzg}E7+51=RL1xv@&*$fxJua-4`z^n`&}QE8
zpMRvoc|LmseJUpxmi&Fkw;%c-d+z|9KW}-V)n45zXFqGR7X0~dx2xVhf1NBhP?kaB
z{RfT@?>;{4Ujwq2;oiGf!VS0I+8o;=`TK9C&gq|5k2fyQ?5T|Fy_;vdP5S*DW}u=5
z`-idX>hI>I1%lJiy9v??AiV>bXkZET+WFr<uNi|}!ytcz(*Z;ef+P)d-Jr>1qYfIN
z!fiC*M+2T=z^c~K)Hj;?MpNIQXsC=f1qM@}W3*r#Ef_}&#?gXtpvOK&%c0S7XtW#}
fEr*cHp$-2T_%l1WW5i29{YC~)S3j3^P6<r_x~`~6

literal 0
HcmV?d00001

diff --git a/__snapshots__/users-header--inline-extra-small.png b/__snapshots__/users-header--inline-extra-small.png
new file mode 100644
index 0000000000000000000000000000000000000000..1eb8d8f71db8d96046d72992ac7c48361da5ee38
GIT binary patch
literal 8380
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

literal 0
HcmV?d00001

diff --git a/__snapshots__/users-header.test.js.snap b/__snapshots__/users-header.test.js.snap
index 0e15932..13b1ae3 100644
--- a/__snapshots__/users-header.test.js.snap
+++ b/__snapshots__/users-header.test.js.snap
@@ -36,6 +36,57 @@ exports[`Users/Header displayName without name smoke-test 1`] = `
 </div>
 `;
 
+exports[`Users/Header extra small smoke-test 1`] = `
+<div>
+  <div class="my-2 text-xs flex items-center">
+    <div class="avatar flex-none">
+      <div class="rounded h-3.5 w-3.5">
+        <img class="my-0"
+             src="../test-profile-image.jpg"
+             alt="DanConwayDev"
+        >
+      </div>
+    </div>
+    <div class="pl-2 flex-auto m-auto">
+      DanConwayDev
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Users/Header inline extra small loading smoke-test 1`] = `
+<div class="inline-block">
+  <div class="text-xs inline-block align-middle">
+    <div class="avatar inline-block align-middle">
+      <div class="rounded inline-block h-3.5 w-3.5 skeleton">
+      </div>
+    </div>
+    <div class="pl-0 inline-block">
+      <div class="skeleton w-24 h-2.5">
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Users/Header inline extra small smoke-test 1`] = `
+<div class="inline-block">
+  <div class="text-xs inline-block align-middle">
+    <div class="avatar inline-block align-middle">
+      <div class="rounded inline-block h-3.5 w-3.5">
+        <img class="my-0"
+             src="../test-profile-image.jpg"
+             alt="DanConwayDev"
+        >
+      </div>
+    </div>
+    <div class="pl-0 inline-block">
+      DanConwayDev
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Users/Header inline loading smoke-test 1`] = `
 <div class="inline-block">
   <div class="text-md inline-block align-middle">
diff --git a/src/lib/components/users/UserHeader.stories.svelte b/src/lib/components/users/UserHeader.stories.svelte
index 55749d4..d5f9f25 100644
--- a/src/lib/components/users/UserHeader.stories.svelte
+++ b/src/lib/components/users/UserHeader.stories.svelte
@@ -34,6 +34,16 @@
   }}
 />
 
+<Story
+  name="extra small"
+  args={{
+    user: {
+      ...vectors.default,
+    },
+    size: 'xs',
+  }}
+/>
+
 <Story
   name="no image"
   args={{
@@ -107,3 +117,25 @@
     size: 'sm',
   }}
 />
+
+<Story
+  name="inline extra small"
+  args={{
+    user: {
+      ...vectors.default,
+    },
+    inline: true,
+    size: 'xs',
+  }}
+/>
+
+<Story
+  name="inline extra small loading"
+  args={{
+    user: {
+      ...vectors.loading,
+    },
+    inline: true,
+    size: 'xs',
+  }}
+/>
diff --git a/src/lib/components/users/UserHeader.svelte b/src/lib/components/users/UserHeader.svelte
index ed35980..ba88802 100644
--- a/src/lib/components/users/UserHeader.svelte
+++ b/src/lib/components/users/UserHeader.svelte
@@ -8,7 +8,7 @@
   }
 
   export let inline = false
-  export let size: 'sm' | 'md' = 'md'
+  export let size: 'xs' | 'sm' | 'md' = 'md'
 
   $: ({ profile, loading } = user)
   $: display_name = getName(user)
@@ -17,6 +17,7 @@
 <div class:inline-block={inline}>
   <div
     class:my-2={!inline}
+    class:text-xs={size === 'xs'}
     class:text-sm={size === 'sm'}
     class:text-md={size === 'md'}
     class:inline-block={inline}
@@ -38,8 +39,8 @@
         class:w-4={!inline && size === 'sm'}
         class:h-5={inline && size === 'md'}
         class:w-5={inline && size === 'md'}
-        class:h-3.5={inline && size === 'sm'}
-        class:w-3.5={inline && size === 'sm'}
+        class:h-3.5={(inline && size === 'sm') || size === 'xs'}
+        class:w-3.5={(inline && size === 'sm') || size === 'xs'}
         class="rounded"
         class:skeleton={!profile && loading}
         class:bg-neutral={!loading && (!profile || !profile.image)}
@@ -51,7 +52,7 @@
     </div>
     <div
       class:pl-3={!inline && size === 'md'}
-      class:pl-2={!inline && size === 'sm'}
+      class:pl-2={!inline && (size === 'sm' || size === 'xs')}
       class:pl-0={inline}
       class:flex-auto={!inline}
       class:m-auto={!inline}
@@ -62,6 +63,7 @@
           class="skeleton w-24"
           class:h-4={size === 'md'}
           class:h-3={size === 'sm'}
+          class:h-2.5={size === 'xs'}
         ></div>
       {:else}
         {display_name}