@everchron/ec-shards 7.4.1 → 7.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everchron/ec-shards",
-  "version": "7.4.1",
+  "version": "7.4.2",
   "private": false,
   "description": "Everchron Shards UI Library",
   "repository": "https://github.com/everchron/ec-shards.git",

package/src/components/avatar/avatar.vue

@@ -1,12 +1,18 @@
 <template>
   <div class="avatar" :style="[style, customStyle]" :class="partyClass" :role="image ? 'img' : 'none'" :aria-label="name">
     <span v-if="!this.image">{{ userInitial }}</span>
+    <ecs-sticker v-if="relevantBadge" type="badge" />
   </div>
 </template>
 
 <script>
+import EcsSticker from '../sticker/sticker.vue'
+
 export default {
   name: 'avatar',
+  components: {
+    EcsSticker
+  },
   props: {
     /** In some situations, an avatar should also reflect the party side (witness profiles, entities). To add a badge with a party color to the avatar, set the `party` attribute to one of the available options: */
     party: {
@@ -14,6 +20,11 @@ export default {
       validator: v => ['client', 'opposition', 'court', 'joint', 'other', null].includes(v),
       default: null
     },
+    /** Determines if the relevant profile badge is shown on top of the avatar. */
+    relevantBadge: {
+      type: Boolean,
+      default: false
+    },
     /** The full name of the User, eg. "Franklyn Meerkat" */
     name: {
       type: String,
@@ -92,7 +103,7 @@ export default {
       const style = {
         width: `${this.size}px`,
         height: `${this.size}px`,
-        borderRadius: this.rounded ? '50%' : '2px'
+        borderRadius: this.rounded ? '50%' : '4px'
       }
       const imgBackgroundAndFontStyle = {
         background: `transparent url(${this.image}) no-repeat center center/cover`
@@ -169,6 +180,12 @@ export default {
   font-weight: 700;
   color: rgba(#000, .2);
 
+  .ecs-sticker{
+    position: absolute;
+    bottom: -6px;
+    right: -6px;
+  }
+
   &-party{
     &:before{
       content: "";

package/src/stories/avatar/avatar.stories.js

@@ -9,31 +9,36 @@ export const avatars = () => ({
   components: { EcsAvatar },
   template: `<main>
               <ecs-avatar name="Ivo Mynttinen" :size="36" />
-              <ecs-avatar name="Ivo Mynttinen" image="https://i.pravatar.cc/100" :size="36" />
+              <ecs-avatar name="Ivo Mynttinen" image="https://i.imgur.com/p0yxbdh.jpg" :size="36" />
             </main>`,
 });
 
 export const sizes = () => ({
   components: { EcsAvatar },
   template: `<main>
-              <ecs-avatar name="Ivo Mynttinen" image="https://i.pravatar.cc/100" :size="24" />
-              <ecs-avatar name="Ivo Mynttinen" image="https://i.pravatar.cc/100" :size="36" />
-              <ecs-avatar name="Ivo Mynttinen" image="https://i.pravatar.cc/100" :size="54" />
+              <ecs-avatar name="Ivo Mynttinen" image="https://i.imgur.com/p0yxbdh.jpg" :size="24" />
+              <ecs-avatar name="Ivo Mynttinen" image="https://i.imgur.com/p0yxbdh.jpg" :size="36" />
+              <ecs-avatar name="Ivo Mynttinen" image="https://i.imgur.com/p0yxbdh.jpg" :size="54" />
             </main>`,
 });
 
 export const rounded = () => ({
   components: { EcsAvatar },
-  template: `<ecs-avatar name="Ivo Mynttinen" image="https://i.pravatar.cc/100" :size="36" rounded />`,
+  template: `<ecs-avatar name="Ivo Mynttinen" image="https://i.imgur.com/p0yxbdh.jpg" :size="36" rounded />`,
+});
+
+export const relevantBadge = () => ({
+  components: { EcsAvatar },
+  template: `<ecs-avatar name="Ivo Mynttinen" relevant-badge image="https://i.imgur.com/p0yxbdh.jpg" :size="36" :rounded="false" />`,
 });
 
 export const partyBadges = () => ({
   components: { EcsAvatar },
   template: `<main>
-              <ecs-avatar party="client" name="Ivo Mynttinen" image="https://i.pravatar.cc/100" :size="36" />
-              <ecs-avatar party="opposition" name="Ivo Mynttinen" image="https://i.pravatar.cc/100" :size="36" />
-              <ecs-avatar party="joint" name="Ivo Mynttinen" image="https://i.pravatar.cc/100" :size="36" />
-              <ecs-avatar party="other" name="Ivo Mynttinen" image="https://i.pravatar.cc/100" :size="36" />
-              <ecs-avatar party="court" name="Ivo Mynttinen" image="https://i.pravatar.cc/100" :size="36" />
+              <ecs-avatar party="client" name="Ivo Mynttinen" image="https://i.imgur.com/p0yxbdh.jpg" :size="36" />
+              <ecs-avatar party="opposition" name="Ivo Mynttinen" image="https://i.imgur.com/p0yxbdh.jpg" :size="36" />
+              <ecs-avatar party="joint" name="Ivo Mynttinen" image="https://i.imgur.com/p0yxbdh.jpg" :size="36" />
+              <ecs-avatar party="other" name="Ivo Mynttinen" image="https://i.imgur.com/p0yxbdh.jpg" :size="36" />
+              <ecs-avatar party="court" name="Ivo Mynttinen" image="https://i.imgur.com/p0yxbdh.jpg" :size="36" />
             </main>`,
 });