@everchron/ec-shards 7.4.0 → 7.4.2

package/package.json

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

package/src/assets/icons/sticker-badge.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.86383 12.7682C8.94257 12.7228 9.01475 12.6668 9.07838 12.6019L11.2522 10.3834C11.7262 10.0477 12 9.49917 12 8.92606V5.77778C12 4.83036 11.2506 4 10.25 4H5.75C4.74937 4 4 4.83036 4 5.77778V8.92606C4 9.49998 4.27432 10.0474 4.74691 10.3829L6.92125 12.6019C6.98487 12.6668 7.05705 12.7228 7.1358 12.7682C7.67155 13.0773 8.32808 13.0773 8.86383 12.7682Z" fill="currentColor" stroke="#FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/user-key.svg

@@ -1,9 +1,9 @@
 <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13.9167 18.25H9.58333C8.43406 18.25 7.33186 18.7065 6.5192 19.5192C5.70655 20.3319 5.25 21.4341 5.25 22.5833V23.6667" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M13.9167 13.9167C16.3099 13.9167 18.25 11.9766 18.25 9.58333C18.25 7.1901 16.3099 5.25 13.9167 5.25C11.5234 5.25 9.58333 7.1901 9.58333 9.58333C9.58333 11.9766 11.5234 13.9167 13.9167 13.9167Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M25.8333 19.875C25.8333 20.8806 25.4338 21.845 24.7228 22.5561C24.0117 23.2672 23.0473 23.6667 22.0417 23.6667C21.665 23.6614 21.2913 23.5994 20.9331 23.4827" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M22.0417 16.0834C23.0473 16.0834 24.0117 16.4829 24.7228 17.1939C25.4339 17.905 25.8333 18.8694 25.8333 19.875" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M18.433 20.9804C18.3169 20.6232 18.2553 20.2506 18.25 19.875C18.25 18.8694 18.6495 17.905 19.3606 17.1939C20.0716 16.4829 21.0361 16.0834 22.0417 16.0834" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M18.4329 20.9803L16.3783 23.0382C16.1898 23.2282 16.0838 23.4849 16.0833 23.7525V24.8228C16.0833 25.0908 16.1898 25.3478 16.3793 25.5373C16.5688 25.7268 16.8258 25.8333 17.0938 25.8333H18.1687C18.3016 25.8335 18.4331 25.8073 18.5557 25.7563C18.6783 25.7052 18.7896 25.6304 18.8831 25.5361L20.9332 23.4827" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M22.8 19.7509C22.7998 19.8991 22.7557 20.0441 22.6732 20.1673C22.5907 20.2905 22.4736 20.3864 22.3366 20.4431C22.1996 20.4997 22.0489 20.5145 21.9035 20.4855C21.7581 20.4566 21.6245 20.3852 21.5197 20.2803C21.4148 20.1755 21.3434 20.0419 21.3145 19.8965C21.2855 19.7511 21.3003 19.6004 21.3569 19.4634C21.4136 19.3264 21.5096 19.2093 21.6328 19.1268C21.756 19.0443 21.9009 19.0002 22.0491 19C22.1478 18.9999 22.2454 19.0192 22.3366 19.0569C22.4278 19.0946 22.5106 19.1499 22.5803 19.2197C22.6501 19.2894 22.7054 19.3722 22.7431 19.4634C22.7808 19.5546 22.8001 19.6522 22.8 19.7509Z" fill="currentColor"/>
+<path vector-effect="non-scaling-stroke" d="M13.9167 18.25H9.58333C8.43406 18.25 7.33186 18.7065 6.5192 19.5192C5.70655 20.3319 5.25 21.4341 5.25 22.5833V23.6667" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M13.9167 13.9167C16.3099 13.9167 18.25 11.9766 18.25 9.58333C18.25 7.1901 16.3099 5.25 13.9167 5.25C11.5234 5.25 9.58333 7.1901 9.58333 9.58333C9.58333 11.9766 11.5234 13.9167 13.9167 13.9167Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M25.8333 19.875C25.8333 20.8806 25.4338 21.845 24.7228 22.5561C24.0117 23.2672 23.0473 23.6667 22.0417 23.6667C21.665 23.6614 21.2913 23.5994 20.9331 23.4827" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M22.0417 16.0834C23.0473 16.0834 24.0117 16.4829 24.7228 17.1939C25.4339 17.905 25.8333 18.8694 25.8333 19.875" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M18.433 20.9804C18.3169 20.6232 18.2553 20.2506 18.25 19.875C18.25 18.8694 18.6495 17.905 19.3606 17.1939C20.0716 16.4829 21.0361 16.0834 22.0417 16.0834" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M18.4329 20.9803L16.3783 23.0382C16.1898 23.2282 16.0838 23.4849 16.0833 23.7525V24.8228C16.0833 25.0908 16.1898 25.3478 16.3793 25.5373C16.5688 25.7268 16.8258 25.8333 17.0938 25.8333H18.1687C18.3016 25.8335 18.4331 25.8073 18.5557 25.7563C18.6783 25.7052 18.7896 25.6304 18.8831 25.5361L20.9332 23.4827" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M22.8 19.7509C22.7998 19.8991 22.7557 20.0441 22.6732 20.1673C22.5907 20.2905 22.4736 20.3864 22.3366 20.4431C22.1996 20.4997 22.0489 20.5145 21.9035 20.4855C21.7581 20.4566 21.6245 20.3852 21.5197 20.2803C21.4148 20.1755 21.3434 20.0419 21.3145 19.8965C21.2855 19.7511 21.3003 19.6004 21.3569 19.4634C21.4136 19.3264 21.5096 19.2093 21.6328 19.1268C21.756 19.0443 21.9009 19.0002 22.0491 19C22.1478 18.9999 22.2454 19.0192 22.3366 19.0569C22.4278 19.0946 22.5106 19.1499 22.5803 19.2197C22.6501 19.2894 22.7054 19.3722 22.7431 19.4634C22.7808 19.5546 22.8001 19.6522 22.8 19.7509Z" fill="currentColor"/>
 </svg>

package/src/assets/icons/user-relevance-active.svg

@@ -0,0 +1,4 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.2671 10.6204C15.5442 9.94528 14.4483 9.947 13.7273 10.6256C13.041 11.2715 13.0488 12.406 13.7487 13.1496C14.3945 13.8358 15.5291 13.828 16.2727 13.1282C16.9704 12.4715 16.988 11.3469 16.2671 10.6204Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.00002 4C6.43471 4 5.16669 5.26802 5.16669 6.83333V19.2782C5.16669 20.3069 5.72533 21.2547 6.62322 21.7546L13.6232 25.6431C14.4789 26.119 15.5203 26.1188 16.3759 25.6429L23.3753 21.7548C24.2753 21.2559 24.8334 20.3066 24.8334 19.2782V6.83333C24.8334 5.26802 23.5653 4 22 4H8.00002ZM13.0419 9.89741C14.1498 8.85467 15.8501 8.85467 16.958 9.89741L16.9689 9.90796C18.0734 11.0125 18.0893 12.7916 16.958 13.8564C15.8708 14.8796 14.0977 14.9795 13.0205 13.835C11.9972 12.7478 11.8973 10.9746 13.0419 9.89741ZM13.5999 16.3616C12.5763 16.3616 11.7307 17.1682 11.7307 18.2308C11.7307 18.5069 11.5069 18.7308 11.2307 18.7308C10.9546 18.7308 10.7307 18.5069 10.7307 18.2308C10.7307 16.6011 12.0389 15.3616 13.5999 15.3616H16.3461C17.9758 15.3616 19.2153 16.6698 19.2153 18.2308C19.2153 18.5069 18.9915 18.7308 18.7153 18.7308C18.4392 18.7308 18.2153 18.5069 18.2153 18.2308C18.2153 17.2072 17.4087 16.3616 16.3461 16.3616H13.5999Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/user-relevance.svg

@@ -0,0 +1,5 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path vector-effect="non-scaling-stroke" d="M5.66666 19.2782V6.83333C5.66666 5.54417 6.71082 4.5 7.99999 4.5H22C23.2892 4.5 24.3333 5.54417 24.3333 6.83333V19.2782C24.3333 20.1252 23.8737 20.9068 23.1328 21.3175L16.1328 25.206C15.4282 25.598 14.5707 25.598 13.866 25.206L6.86599 21.3175C6.12632 20.9057 5.66666 20.1252 5.66666 19.2782Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M11.2307 18.2308C11.2307 16.8846 12.3076 15.8616 13.5999 15.8616H16.3461C17.6923 15.8616 18.7153 16.9385 18.7153 18.2308" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M16.6153 10.2615C17.5307 11.1769 17.5307 12.6307 16.6153 13.4923C15.7 14.3538 14.2461 14.4077 13.3846 13.4923C12.523 12.5769 12.4692 11.123 13.3846 10.2615C14.3 9.39997 15.7 9.39997 16.6153 10.2615Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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/components/sticker/sticker.vue

@@ -20,7 +20,7 @@
       /** Sets the sticker icon. */
       type: {
         type: String,
-        validator: v => ['current', 'error', 'loading', 'warning', 'success', 'info', 'shared', '', 'null', null, undefined].includes(v)
+        validator: v => ['current', 'error', 'loading', 'warning', 'success', 'info', 'shared', 'badge', '', 'null', null, undefined].includes(v)
       },
       /** Allows to customize the primary color of the sticker icon. */
       color: {
@@ -50,6 +50,7 @@
             || this.type == 'warning'
             || this.type == 'success'
             || this.type == 'shared'
+            || this.type == 'badge'
             || this.type == 'info')
           return true
         else

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>`,
 });

package/src/stories/sticker/sticker.stories.js

@@ -15,6 +15,7 @@ export const sticker = () => ({
               <ecs-sticker type="info" />
               <ecs-sticker type="current" />
               <ecs-sticker type="shared" />
+              <ecs-sticker type="badge" />
             </main>`,
 });