@everchron/ec-shards 2.1.9 → 2.2.1

package/package.json

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

package/src/components/comment/comment.vue

@@ -2,14 +2,19 @@
   <div class="ecs-comment">
     <div class="ecs-comment-header">
       <div class="ecs-comment-autor">
-        <ecs-avatar :name="userName" :image="userImage" :size="30" rounded />
-        <div class="ecs-comment-meta">
+        <ecs-skeleton-loader v-if="loading" type="circle" :width="32" :height="32" />
+        <ecs-avatar v-else :name="userName" :image="userImage" :size="32" rounded />
+        <div v-if="!loading" class="ecs-comment-meta">
           <span class="ecs-comment-meta-name">{{userName}}</span>
           <span class="ecs-comment-meta-time">
             <!-- @slot Slot for the comment date/time. -->
             <slot name="commentdate"></slot>
           </span>
         </div>
+        <div v-else class="ecs-comment-meta loading">
+          <ecs-skeleton-loader type="single" :line-height="3" :width="50" />
+          <ecs-skeleton-loader type="single" :line-height="2" :width="60" />
+        </div>
       </div>
       <div v-if="canEdit" class="ecs-comment-actions">
         <ecs-button @click="$emit('edit', $event)" type="secondary" size="sml" icon="edit" icon-only title="Edit Comment" />
@@ -17,11 +22,13 @@
       </div>
     </div>
 
-    <ecs-formatted v-if="!$slots.editform" class="ecs-comment-body">
+    <ecs-formatted v-if="!$slots.editform && !loading" class="ecs-comment-body">
       <!-- @slot Comment text (rich text). -->
       <slot></slot>
     </ecs-formatted>
 
+    <ecs-skeleton-loader v-else-if="loading" type="multi" :count="2" class="ecs-comment-body" />
+
     <div v-else class="ecs-comment-edit">
       <!-- @slot Contains the form to edit the comment. When this slot is not empty, the form will show up instead of the comment text. -->
       <slot name="editform"></slot>
@@ -33,9 +40,10 @@
   import EcsAvatar from '../avatar/avatar'
   import EcsButton from '../button/button'
   import EcsFormatted from '../formatted/formatted'
+  import EcsSkeletonLoader from '../skeleton-loader/skeleton-loader'
 
   export default {
-    components: { EcsAvatar, EcsButton, EcsFormatted },
+    components: { EcsAvatar, EcsButton, EcsFormatted, EcsSkeletonLoader },
     props: {
       /** Name of the user that is the comment author. */
       userName: {
@@ -51,6 +59,11 @@
       canEdit: {
         type: Boolean,
         default: false
+      },
+      /** Shows the whole comment in skeleton loading state. */
+      loading: {
+        type: Boolean,
+        default: false
       }
     }
   };
@@ -65,19 +78,14 @@
   &-header{
     display: flex;
     align-items: center;
-    justify-content: space-between;
     margin-bottom: 10px;
   }
 
-  &-from{
-    font-size: $type-scale-2-font-size;
-    color: $color-gray-8;
-  }
-
   &-autor{
     display: flex;
     text-decoration: none;
     color: $color-blue-10;
+    flex: 1;
 
     &:hover{
       color: darken($color-blue-10, 5%);
@@ -89,13 +97,21 @@
 
     &-name{
       font-size: $type-scale-3-font-size;
+      line-height: $type-scale-3-line-height;
       font-weight: $font-weight-medium;
       display: block;
     }
 
     &-time{
       font-size: $type-scale-2-font-size;
+      line-height: $type-scale-2-line-height;
       color: $color-gray-8;
+      display: block;
+    }
+
+    &.loading{
+      width: 100%;
+      max-width: 200px;
     }
   }
 
@@ -108,7 +124,7 @@
   }
 
   &-body{
-    padding-left: 40px;
+    padding-left: 42px;
   }
 }
 </style>

package/src/components/comment-list/comment-list.vue

@@ -6,9 +6,11 @@
 
 
 <style lang="scss">
+@import "../../tokens/build/scss/tokens.scss";
+
 .ecs-comment-list{
-  > div{
-    margin-bottom: 30px;
+  > .ecs-comment{
+    margin-bottom: $spacing-20;
   }
 }
 </style>

package/src/components/data-card/data-card.vue

@@ -210,15 +210,15 @@
     padding: 10px 20px;
   }
 
-  &.loading .ecs-data-card-row-inner > *:not(.skeleton){
+  &.loading .ecs-data-card-row-inner > *:not(.ecs-skeleton){
     opacity: 0;
   }
 
-  .skeleton{
+  .ecs-skeleton{
     position: absolute;
   }
 
-  .ecs-data-card-row .skeleton{
+  .ecs-data-card-row .ecs-skeleton{
     margin-left: 6px;
   }
 }

package/src/components/data-list-item/data-list-item.vue

@@ -296,6 +296,7 @@
     &-mono{
       font-family: $font-family-monospace;
       font-size: $type-scale-2-font-size;
+      line-height: $type-scale-3-line-height;
     }
 
     &-escape{
@@ -339,8 +340,8 @@
       }
     }
 
-    .skeleton{
-      margin-top: 6px;
+    .ecs-skeleton{
+      margin-top: 2px;
     }
   }
 }

package/src/components/excerpt-snippet/excerpt-snippet.vue

@@ -206,7 +206,7 @@
   }
 
   .icon,
-  .skeleton-rectangle{
+  .ecs-skeleton{
     margin-right: 4px;
   }
 

package/src/components/formatted/formatted.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="ecs-formatted" :class="small ? `ecs-formatted-sml` : ''">
     <slot v-if="!loading"></slot>
-    <ecs-skeleton-loader v-else type="multi" :count="skeletonCount" />
+    <ecs-skeleton-loader v-else type="multi" :line-height="small ? 1 : 2" :count="skeletonCount" />
   </div>
 </template>
 

package/src/components/log-message/log-message.vue

@@ -6,8 +6,7 @@
       <ecs-skeleton-loader v-if="loading" type="single" :width="40" class="skeleton-text" />
       <slot v-else></slot>
     </div>
-    <ecs-skeleton-loader v-if="loading && meta" type="single" :width="15" class="skeleton-text" />
-    <div v-else-if="meta" class="ecs-log-message-meta">
+    <div v-if="meta && !loading" class="ecs-log-message-meta">
       {{ meta }}
     </div>
   </ecs-flex-row>
@@ -152,8 +151,4 @@ export default {
   border-color: $color-green-2;
   color: $color-green-15;
 }
-
-.skeleton-text{
-  margin-top: 5px !important;
-}
 </style>

package/src/components/popover-list-item/popover-list-item.vue

@@ -280,7 +280,7 @@
     }
 
     &.control{
-      padding: 11px 12px;
+      padding: 10px 12px;
 
       .ecs-form-check{
         margin-bottom: 0;
@@ -292,6 +292,7 @@
 
       .ecs-switch-wrapper{
         margin: -7px 0;
+        padding: 5px 0;
       }
 
       .after{

package/src/components/rating-favorability/rating-favorability.vue

@@ -6,7 +6,7 @@
     <span v-if="label" class="label" :class="loading ? 'loading' : ''">{{ labelText }}</span>
 
     <ecs-skeleton-loader v-if="loading" type="rect" :width="20" :height="20" />
-    <ecs-skeleton-loader v-if="loading && label" type="single" style="width:calc(100% - 30px)" />
+    <ecs-skeleton-loader v-if="loading && label" type="single" :width="100" style="width:calc(100% - 30px)" />
   </div>
 </template>
 
@@ -214,12 +214,12 @@
     }
   }
 
-  .skeleton{
+  .ecs-skeleton{
     position: absolute;
+  }
 
-    &-single{
-      left: 28px;
-    }
+  .skeleton-wrap{
+    left: 28px;
   }
 
   &.disabled{

package/src/components/rating-star-read/rating-star-read.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="ecs-rating-read" :class="[sizeClass]">
     <div v-if="!loading" class="ecs-stars-read" :data-maximum="maximum" :data-rating="rating"></div>
-    <ecs-skeleton-loader v-else type="single" :width="100" />
+    <ecs-skeleton-loader v-else type="single" :line-height="3" :width="100" />
   </div>
 </template>
 
@@ -112,10 +112,10 @@ $star-read-width: 18px;
     }
   }
 
-  .skeleton{
+  .ecs-skeleton{
     position: absolute;
     top: 50%;
-    margin-top: -3px;
+    margin-top: -10px;
   }
 }
 </style>

package/src/components/skeleton-loader/skeleton-loader.vue

@@ -1,9 +1,13 @@
 <template>
-  <div v-if="type === 'rect'" class="skeleton skeleton-rectangle" :style="{ width: width + 'px', 'height': height + 'px' }" />
-  <div v-else-if="type === 'multi'" class="skeletons">
-    <div v-for="n in parseInt(count)" :key="n" class="skeleton skeleton-single" />
+  <div v-if="type === 'rect' || type === 'circle'" class="ecs-skeleton skeleton" :class="rectClass" :style="{ width: width + 'px', 'height': height + 'px' }" />
+  <div v-else-if="type === 'multi'" class="ecs-skeleton skeletons">
+    <div v-for="n in parseInt(count)" :key="n" class="skeleton-wrap" :class="'skeleton-line-height-'+lineHeight">
+      <div class="skeleton skeleton-single" />
+    </div>
+  </div>
+  <div v-else class="ecs-skeleton skeleton-wrap" :class="'skeleton-line-height-'+lineHeight">
+    <div class="skeleton skeleton-single" :style="{ width: width + '%' }" />
   </div>
-  <div v-else class="skeleton skeleton-single" :style="{ width: width + '%' }" />
 </template>
 
 <script>
@@ -12,7 +16,7 @@
       /** Determines the type of skeleton shape: `single` replicates a single line of text, `multi` a multi line text, and `rect` a generic rectangle shape. */
       type: {
         type: String,
-        validator: v => ['single', 'multi', 'rect'].includes(v),
+        validator: v => ['single', 'multi', 'rect', 'circle'].includes(v),
         default: 'single'
       },
       /** Only used together with the `multi` type. Determines the amount of text lines. */
@@ -25,10 +29,24 @@
         type: Number,
         default: 20
       },
-      /** Sets the height of the `single` type in percentage. Sets the width of the `rect` type in pixels. */
+      /** Sets the height of the `rect` and `circle` type in pixels. */
       height: {
         type: Number,
         default: 20
+      },
+      /** Aligns the height and size of the single & multi types with our common line-height type scales. */
+      lineHeight: {
+        type: Number,
+        validator: v => [1, 2, 3, 4, 5, 6].includes(v),
+        default: 2
+      }
+    },
+
+    computed: {
+      rectClass() {
+        if (this.type && this.type !== '')
+          return `skeleton-${this.type}`
+        return this.type
       }
     }
   }
@@ -44,17 +62,76 @@
   }
 }
 
+.skeleton-wrap{
+  width: 100%;
+}
+
+.skeleton-line-height{
+  &-1{
+    padding: 5px 0;
+
+    .skeleton{
+      height: 4px;
+    }
+  }
+
+  &-2{
+    padding: 5px 0;
+    
+    .skeleton{
+      height: 6px;
+    }
+  }
+
+  &-3{
+    padding: 6px 0;
+    
+    .skeleton{
+      height: 8px;
+    }
+  }
+
+  &-4{
+    padding: 8px 0;
+    
+    .skeleton{
+      height: 8px;
+    }
+  }
+
+  &-5{
+    padding: 9px 0;
+    
+    .skeleton{
+      height: 10px;
+    }
+  }
+
+  &-6{
+    padding: 10px 0;
+    
+    .skeleton{
+      height: 12px;
+    }
+  }
+}
+
 .skeleton{
-  border-radius: $border-radius-medium;
+  border-radius: 16px;
   background: $color-gray-3;
   width: 100%;
-  height: 6px;
   overflow: hidden;
   position: relative;
   cursor: wait;
 
-  &-rectangle{
+  &-rect{
     border-radius: $border-radius-small;
+    flex-shrink: 0;
+  }
+
+  &-circle{
+    border-radius: 100%;
+    flex-shrink: 0;
   }
 
   &:after{
@@ -74,13 +151,8 @@
 .skeletons{
   cursor: wait;
 
-  .skeleton{
-    margin-bottom: 15px;
-
-    &:last-child{
-      width: 65%;
-      margin-bottom: 0;
-    }
+  .skeleton-wrap:last-child{
+    width: 65%;
   }
 }
 </style>

package/src/components/tag/tag.vue

@@ -10,7 +10,7 @@
 
     <slot></slot>
     <span class="count" v-if="count">{{count}}</span>
-    <ecs-skeleton-loader v-if="loading" type="single" style="width: calc(100% - 20px)" />
+    <ecs-skeleton-loader v-if="loading" type="single" :width="100" style="width: calc(100% - 20px)" />
   </span>
 </template>
 
@@ -246,10 +246,10 @@
     transition: none;
   }
 
-  .skeleton{
+  .ecs-skeleton{
     position: absolute;
     top: 50%;
-    margin-top: -3px;
+    margin-top: -8px;
     left: 10px;
   }
 }

package/src/stories/Changelog.stories.mdx

@@ -6,6 +6,25 @@ import { Meta } from '@storybook/addon-docs/blocks';
   Changelog
 </h1>
 
+## Version 2.2.1 (4 November 2022)
+
+### Fixes
+
+- Fix broken skeleton instances introduced in 2.2.0
+
+## Version 2.2.0 (4 November 2022)
+
+### Features
+
+- Added `circle` variant to skeleton loader component
+- Added `loading` state to comment component
+- Added line height scales to EcsSkeletonLoader component, to match common text line heights
+
+### Fixes
+
+- Style fixes in EcsCommentsList component
+- Fixed line height in EcsDataListItem
+
 ## Version 2.1.9 (1 November 2022)
 
 ### Features

package/src/stories/comment/comment.stories.js

@@ -25,3 +25,13 @@ export const commentEdit = () => ({
               </ecs-comment>
             </ecs-comment-list>`,
 });
+
+export const commentLoading = () => ({
+  components: { EcsCommentList, EcsComment },
+  template: `<ecs-comment-list>
+              <ecs-comment loading user-name="Ivo Mynttinen">
+                This is my comment.
+                <template slot="commentdate">Apr 13, 2021 at 3:42 pm</template>
+              </ecs-comment>
+            </ecs-comment-list>`,
+});

package/src/stories/skeleton-loader/skeleton-loader.stories.js

@@ -10,6 +10,18 @@ export const singleLine = () => ({
   template: `<ecs-skeleton-loader type="single" />`,
 });
 
+export const typeScales = () => ({
+  components: { EcsSkeletonLoader },
+  template: `<main>
+              <ecs-skeleton-loader type="single" :line-height="1" />
+              <ecs-skeleton-loader type="single" :line-height="2" />
+              <ecs-skeleton-loader type="single" :line-height="3" />
+              <ecs-skeleton-loader type="single" :line-height="4" />
+              <ecs-skeleton-loader type="single" :line-height="5" />
+              <ecs-skeleton-loader type="single" :line-height="6" />
+            </main>`,
+});
+
 export const multiLine = () => ({
   components: { EcsSkeletonLoader },
   template: `<ecs-skeleton-loader type="multi" :count="4" />`,
@@ -19,3 +31,8 @@ export const rectangle = () => ({
   components: { EcsSkeletonLoader },
   template: `<ecs-skeleton-loader type="rect" :width="22" :height="22" />`,
 });
+
+export const circle = () => ({
+  components: { EcsSkeletonLoader },
+  template: `<ecs-skeleton-loader type="circle" :width="22" :height="22" />`,
+});