feat(avatar): add border when no image is defined

docs/.vitepress/config.ts

@@ -39,6 +39,7 @@ function sidebar() {
     {
       text: 'Components',
       items: [
+        { text: 'SAvatar', link: '/components/avatar' },
         { text: 'SButton', link: '/components/button' }
       ]
     },

docs/components/avatar.md

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import SAvatar from 'sefirot/components/SAvatar.vue'
+</script>
+
+# SAvatar
+
+`<SAvatar>` is a common avatar displaying component.
+
+<Showcase
+  path="/components/SAvatar.vue"
+  story="/stories-components-savatar-01-playground-story-vue"
+>
+  <div class="flex flex-wrap gap-16">
+    <SAvatar avatar="https://avatars.githubusercontent.com/u/3753672?v=4" />
+    <SAvatar avatar="https://avatars.githubusercontent.com/u/62658104?v=4" />
+    <SAvatar avatar="https://avatars.githubusercontent.com/u/16436160?v=4" />
+    <SAvatar name="John Doe" />
+    <SAvatar name="Anna Green" />
+    <SAvatar name="George Walsh" />
+  </div>
+</Showcase>
+
+## Usage
+
+Import `<SAvatar>` component and pass in either the image or a name. When the image is passed, the image gets displayed, and when passing a name, the initial of the name will be used.
+
+```vue
+<script setup lang="ts">
+import SAvatar from '@globalbrain/sefirot/lib/components/SAvatar.vue'
+</script>
+
+<template>
+  <SAvatar avatar="/path/to/image.jpg" />
+  <SAvatar name="John Doe" />
+</template>
+```
+
+## Props
+
+Here are the list of props you may pass to the component.
+
+### `size`
+
+Defines the size of the component. The default is `medium`.
+
+```ts
+interface Props {
+  size?: 'nano' | 'mini' | 'small' | 'medium' | 'large'
+}
+```
+
+```vue
+<SAvatar size="medium" image="/image.jpg" />
+```
+
+### `avatar`
+
+The path to the image. 
+
+```ts
+interface Props {
+  avatar?: string | null
+}
+```
+
+```vue
+<SAvatar image="/image.jpg" />
+```
+
+### `name`
+
+The name of the avatar user. The initial value of the name gets displayed. When `avatar` prop is set, this value gets ignored.
+
+```ts
+interface Props {
+  name?: string | null
+}
+```
+
+```vue
+<SAvatar name="John Doe" />
+```

lib/components/SAvatar.vue

@@ -9,15 +9,18 @@ const props = defineProps<{
   name?: string | null
 }>()
 
-const classes = computed(() => [props.size ?? 'medium'])
+const classes = computed(() => [
+  props.size ?? 'medium',
+  { 'no-image': !props.avatar }
+])
 
 const initial = computed(() => props.name?.charAt(0).toUpperCase())
 </script>
 
 <template>
   <div class="SAvatar" :class="classes">
     <img v-if="avatar" class="img" :src="avatar">
-    <p v-else class="initial">{{ initial }}</p>
+    <p v-else-if="initial" class="initial">{{ initial }}</p>
   </div>
 </template>
 
@@ -27,14 +30,10 @@ const initial = computed(() => props.name?.charAt(0).toUpperCase())
   justify-content: center;
   align-items: center;
   border-radius: 50%;
-  background-color: var(--c-bg-elv-down);
+  background-color: var(--c-bg-elv-1);
   overflow: hidden;
 }
 
-.img {
-  object-fit: cover;
-}
-
 .SAvatar.nano {
   width: 20px;
   height: 20px;
@@ -62,7 +61,15 @@ const initial = computed(() => props.name?.charAt(0).toUpperCase())
 .SAvatar.large {
   width: 40px;
   height: 40px;
-  .initial { font-size: 14px; }
+  .initial { font-size: 16px; }
+}
+
+.SAvatar.no-image {
+  border: 1px solid var(--c-divider-2);
+}
+
+.img {
+  object-fit: cover;
 }
 
 .initial {

stories/components/SAvatar.01_Playground.story.vue

@@ -1,11 +1,34 @@
 <script setup lang="ts">
 import SAvatar from 'sefirot/components/SAvatar.vue'
+
+const variants = [
+  { title: 'Nano', size: 'nano' },
+  { title: 'Mini', size: 'mini' },
+  { title: 'Small', size: 'small' },
+  { title: 'Medium', size: 'medium' },
+  { title: 'Large', size: 'large' }
+] as const
 </script>
 
 <template>
   <Board
     title="Components / SAvatar / 01. Playground"
+    docs="/components/button"
   >
-    <SAvatar name="John Doe" />
+    <div class="grid gap-y-32">
+      <div v-for="v in variants" :key="v.size" class="grid gap-y-12">
+        <div class="leading-24 text-14 font-500 text-c-2">
+          {{ v.title }}
+        </div>
+        <div class="flex flex-wrap gap-16">
+          <SAvatar :size="v.size" avatar="https://avatars.githubusercontent.com/u/3753672?v=4" />
+          <SAvatar :size="v.size" avatar="https://avatars.githubusercontent.com/u/62658104?v=4" />
+          <SAvatar :size="v.size" avatar="https://avatars.githubusercontent.com/u/16436160?v=4" />
+          <SAvatar :size="v.size" name="John Doe" />
+          <SAvatar :size="v.size" name="Anna Green" />
+          <SAvatar :size="v.size" name="George Walsh" />
+        </div>
+      </div>
+    </div>
   </Board>
 </template>

stories/styles.css

@@ -18,3 +18,41 @@ body {
   min-height: 0;
   background-color: transparent;
 }
+
+.leading-20 { line-height: 20px; }
+.leading-24 { line-height: 24px; }
+
+.text-12 { font-size: 12px; }
+.text-14 { font-size: 14px; }
+.text-16 { font-size: 16px; }
+
+.text-c-1 { color: var(--c-text-1); }
+.text-c-2 { color: var(--c-text-2); }
+.text-c-3 { color: var(--c-text-3); }
+
+.font-400 { font-weight: 400; }
+.font-500 { font-weight: 500; }
+.font-600 { font-weight: 600; }
+.font-700 { font-weight: 700; }
+
+.flex {
+  display: flex;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.grid {
+  display: grid;
+}
+
+.gap-8  { gap: 8px; }
+.gap-12 { gap: 12px; }
+.gap-16 { gap: 16px; }
+
+.gap-y-8  { row-gap: 8px; }
+.gap-y-12 { row-gap: 12px; }
+.gap-y-16 { row-gap: 16px; }
+.gap-y-24 { row-gap: 24px; }
+.gap-y-32 { row-gap: 32px; }