feat(UserHeader): added xs size

to enable subtler display of user header

__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">

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',
+  }}
+/>

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}