@everchron/ec-shards 6.2.1 → 6.2.2

package/package.json

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

package/src/components/directory-entry/directory-entry.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="ecs-directory-entry">
-    <ecs-icon :type="icon" color="#A1A6B0" />
+    <ecs-icon v-if="icon" :type="icon" color="#A1A6B0" />
+    <ecs-favicon v-else-if="favicon" :website="favicon" />
     <div v-if="indicator" class="indicator" :style="`background-color:`+indicator" />
     <div class="items">
       <slot></slot>
@@ -10,21 +11,33 @@
 
 <script>
   import EcsIcon from '../icon/icon'
+  import EcsFavicon from '../favicon/favicon'
 
   export default {
     components: {
-      EcsIcon
+      EcsIcon,
+      EcsFavicon
     },
+
     props: {
       /** Adds an icon to the list item. The prop value must match a specific icons name. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
       icon: {
-        type: String,
-        required: true
+        type: String
+      },
+      /** Adds a website favicon to the list item. The prop value must match a specific icons name. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/images/favicons). */
+      favicon: {
+        type: String
       },
       /** Adds a small badge to the directory entry icon. Used to indicate online, or status states. The value must a color value (HEX, RGB, or shards variable). */
       indicator: {
         type: String,
       }
+    },
+
+    mounted(){
+      if(!this.icon && !this.favicon){
+        console.warn('Icon or Favicon prop is required for ecs-directory-entry component')
+      }
     }
   }
 </script>
@@ -41,6 +54,10 @@
     margin-bottom: 0;
   }
 
+  .ecs-favicon{
+    margin: 5px;
+  }
+
   .indicator{
     position: absolute;
     top: 16px;

package/src/components/state-icon/state-icon.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ecs-state-icon" role="presentation" :class="[type, iconColor]" />
+  <div class="ecs-state-icon" role="presentation" :class="[type, iconColor]" :style="iconStyle" />
 </template>
 
 <script>
@@ -15,6 +15,20 @@ export default {
       type: String,
       validator: v => ['vibrant', 'danger', 'neutral'].includes(v),
       default: 'neutral'
+    },
+    /** The size of the icon, in pixels. */
+    size: {
+      type: Number,
+      default: 60
+    }
+  },
+
+  computed: {
+    iconStyle(){
+      return {
+        width: `${this.size}px`,
+        height: `${this.size}px`
+      }
     }
   }
 }
@@ -25,10 +39,9 @@ export default {
 @import "../mixins/svg-uri";
 
 .ecs-state-icon{
-  width: 60px;
-  height: 60px;
   background: $color-gray-6;
   border-radius: 100%;
+  position: relative;
 
   &.vibrant{
     background: $color-blue-8;
@@ -41,115 +54,113 @@ export default {
   &:before{
     content: '';
     display: block;
-    width: 60px;
-    height: 60px;
-    position: relative;
-    left: 0;
-    top: 0;
+    position: absolute;
+    inset: 0;
+    background-size: cover;
   }
 
   &.archive:before{
-    background: url('../../assets/images/dialog-icons/dialog-archive.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-archive.svg');
   }
 
   &.annotation:before{
-    background: url('../../assets/images/dialog-icons/dialog-annotation.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-annotation.svg');
   }
 
   &.comment:before{
-    background: url('../../assets/images/dialog-icons/dialog-comment.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-comment.svg');
   }
 
   &.command:before{
-    background: url('../../assets/images/dialog-icons/dialog-command.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-command.svg');
   }
 
   &.document:before{
-    background: url('../../assets/images/dialog-icons/dialog-document.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-document.svg');
   }
 
   &.download:before{
-    background: url('../../assets/images/dialog-icons/dialog-download.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-download.svg');
   }
 
   &.edit:before{
-    background: url('../../assets/images/dialog-icons/dialog-edit.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-edit.svg');
   }
 
   &.entry-add:before{
-    background: url('../../assets/images/dialog-icons/dialog-entry-add.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-entry-add.svg');
   }
 
   &.error:before{
-    background: url('../../assets/images/dialog-icons/dialog-error.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-error.svg');
   }
 
   &.folder-add:before{
-    background: url('../../assets/images/dialog-icons/dialog-folder-add.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-folder-add.svg');
   }
 
   &.folder-remove:before{
-    background: url('../../assets/images/dialog-icons/dialog-folder-remove.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-folder-remove.svg');
   }
 
   &.organization:before{
-    background: url('../../assets/images/dialog-icons/dialog-organization.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-organization.svg');
   }
 
   &.security:before{
-    background: url('../../assets/images/dialog-icons/dialog-security.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-security.svg');
   }
 
   &.tag:before{
-    background: url('../../assets/images/dialog-icons/dialog-tag.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-tag.svg');
   }
 
   &.translation:before{
-    background: url('../../assets/images/dialog-icons/dialog-translation.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-translation.svg');
   }
 
   &.upload:before{
-    background: url('../../assets/images/dialog-icons/dialog-upload.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-upload.svg');
   }
 
   &.user:before{
-    background: url('../../assets/images/dialog-icons/dialog-user.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-user.svg');
   }
 
   &.video:before{
-    background: url('../../assets/images/dialog-icons/dialog-video.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-video.svg');
   }
 
   &.flag:before{
-    background: url('../../assets/images/dialog-icons/dialog-flag.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-flag.svg');
   }
 
   &.rate:before{
-    background: url('../../assets/images/dialog-icons/dialog-rate.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-rate.svg');
   }
 
   &.search:before{
-    background: url('../../assets/images/dialog-icons/dialog-search.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-search.svg');
   }
 
   &.merge:before{
-    background: url('../../assets/images/dialog-icons/dialog-merge.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-merge.svg');
   }
 
   &.sync:before{
-    background: url('../../assets/images/dialog-icons/dialog-sync.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-sync.svg');
   }
 
   &.link:before{
-    background: url('../../assets/images/dialog-icons/dialog-link.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-link.svg');
   }
 
   &.field:before{
-    background: url('../../assets/images/dialog-icons/dialog-field.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-field.svg');
   }
 
   &.table:before{
-    background: url('../../assets/images/dialog-icons/dialog-table.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-table.svg');
   }
 }
 

package/src/stories/Changelog.stories.mdx

@@ -6,6 +6,20 @@ import { Meta } from '@storybook/addon-docs/blocks';
   Changelog
 </h1>
 
+## Version 6.2.2 (15 May 2023)
+
+### Features
+
+- Added new EcsStateIcon component
+- Refactored EcsDialogHeader component to use new EcsStateIcon component for icons
+- Allow favicons to be used in EcsDirectoryEntry component
+
+### Fixes
+
+- Added missing command icons to EcsStateIcon component
+- Removed legacy Relativity illustration
+- Fixed the EcsDialog content overflow bug
+
 ## Version 6.1.3 (8 May 2023)
 
 ### Fixes

package/src/stories/directory-entry/directory-entry.stories.js

@@ -28,3 +28,12 @@ export const directoryEntryIndicator = () => ({
               Active
             </ecs-directory-entry>`,
 });
+
+export const directoryEntryFavicon = () => ({
+  components: { EcsDirectoryEntry },
+  template: `
+              <ecs-directory-entry favicon="twitter">
+                <a href="https://twitter.com">@twitteruser</a>
+              </ecs-directory-entry>
+              `
+});

package/src/stories/state-icon/state-icon.stories.js

@@ -19,3 +19,12 @@ export const StateIconColors = () => ({
     <ecs-state-icon type="table" icon-color="danger" />
     </main>`,
 });
+
+export const StateIconSize = () => ({
+  components: { EcsStateIcon },
+  template: `
+    <main>
+      <ecs-state-icon type="table" :size="30" />
+      <ecs-state-icon type="table" :size="100" />
+    </main>`,
+});