@everchron/ec-shards 2.1.8 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everchron/ec-shards",
-  "version": "2.1.8",
+  "version": "2.2.0",
   "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="30" :height="30" />
+        <ecs-avatar v-else :name="userName" :image="userImage" :size="30" 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;
     }
   }
 

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-list-item/data-list-item.vue

@@ -4,10 +4,12 @@
         :class="[
                   small ? 'ecs-data-list-item-sml' : '',
                   full ? 'ecs-data-list-item-full' : '',
-                  plain ? '' : 'indent'
+                  plain ? 'plain' : 'filled',
+                  indent ? 'indent' : '',
+                  plain && bordered ? 'bordered' : ''
                 ]">
-      <div class="ecs-data-list-identifier">
-        {{identifier}}
+      <div v-if="hasIdentifier" class="ecs-data-list-identifier">
+        {{ identifier }}
         <ecs-button-more type="ellipsis"
           v-if="$slots.collapse"
           class="ecs-data-list-expand-button"
@@ -43,8 +45,7 @@
     props: {
       /** The label that shows up to the left of the list item. Usually describes the content to the left, e.g.: "Type", "Profiles", etc. */
       identifier: {
-        type: String,
-        required: true
+        type: String
       },
       /** Renders the list item in a smaller variant. */
       small: {
@@ -90,6 +91,16 @@
       plain: {
         type: Boolean,
         default: false
+      },
+      /** Adds a border bottom to each item (except the last in the list). **Important** the border is only applied when used in combination with the `plain` prop. */
+      bordered: {
+        type: Boolean,
+        default: false
+      },
+      /** Determines if there should be a left/right padding in the content areas. */
+      indent: {
+        type: Boolean,
+        default: true
       }
     },
 
@@ -104,7 +115,12 @@
         if (this.type && this.type !== '')
           return `data-list-data-${this.type}`
         return this.type
-      }
+      },
+
+      hasIdentifier() {
+        if ((this.identifier && this.identifier !== '') || this.$slots.collapse)
+          return true
+      },
     },
 
     methods : {
@@ -195,10 +211,15 @@
       }
     }
 
-    &.indent{
+    &.filled{
       .ecs-data-list-identifier{
         background: rgba($color-gray-6, .1);
         color: $color-gray-10;
+      }
+    }
+
+    &.indent{
+      .ecs-data-list-identifier{
         padding: 6px 8px;
       }
 
@@ -206,24 +227,37 @@
         padding: 6px 0 6px 8px;
       }
     }
+
+    &.bordered{
+      border-bottom: 1px solid $color-gray-3;
+      margin-bottom: 0;
+    }
   }
 
   > div{
-    &:first-child > .ecs-data-list-item .ecs-data-list-identifier{
-      border-top-left-radius: $border-radius-small;
+    &:first-child{
+      > .ecs-data-list-item .ecs-data-list-identifier{
+          border-top-left-radius: $border-radius-small;
+        }
+      
+      > .ecs-data-list-item.ecs-data-list-item-full .ecs-data-list-identifier{
+        border-top-left-radius: $border-radius-small;
+        border-top-right-radius: $border-radius-small;
+      }
     }
 
-    &:last-child > .ecs-data-list-item .ecs-data-list-identifier{
-      border-bottom-left-radius: $border-radius-small;
-    }
+    &:last-child{
+      > .ecs-data-list-item .ecs-data-list-identifier{
+        border-bottom-left-radius: $border-radius-small;
+      }
 
-    &:first-child > .ecs-data-list-item.ecs-data-list-item-full .ecs-data-list-identifier{
-      border-top-left-radius: $border-radius-small;
-      border-top-right-radius: $border-radius-small;
-    }
+      > .ecs-data-list-item.ecs-data-list-item-full .ecs-data-list-identifier{
+        border-bottom-left-radius: 0;
+      }
 
-    &:last-child > .ecs-data-list-item.ecs-data-list-item-full .ecs-data-list-identifier{
-      border-bottom-left-radius: 0;
+      .ecs-data-list-item.bordered{
+        border-bottom: none;
+      }
     }
   }
 
@@ -250,7 +284,7 @@
   }
 
   &-data{
-    width: calc(100% - 145px);
+    flex: 1;
     padding: 6px 0;
     position: relative;
     z-index: 0;
@@ -262,6 +296,7 @@
     &-mono{
       font-family: $font-family-monospace;
       font-size: $type-scale-2-font-size;
+      line-height: $type-scale-3-line-height;
     }
 
     &-escape{

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/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-if="type === 'rect' || type === 'circle'" class="skeleton" :class="rectClass" :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-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="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,19 +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;
   }
 
+  &-circle{
+    border-radius: 100%;
+  }
+
   &:after{
     background: linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.8),hsla(0,0%,100%,0));
     animation: skeleton 2.5s infinite;
@@ -74,13 +149,8 @@
 .skeletons{
   cursor: wait;
 
-  .skeleton{
-    margin-bottom: 15px;
-
-    &:last-child{
-      width: 65%;
-      margin-bottom: 0;
-    }
+  .skeleton-wrap:last-child{
+    width: 65%;
   }
 }
 </style>

package/src/stories/Changelog.stories.mdx

@@ -6,6 +6,25 @@ import { Meta } from '@storybook/addon-docs/blocks';
   Changelog
 </h1>
 
+## 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
+
+- Added `indent` and `bordered` props to EcsDataListItem for more variants in possible style.
+
 ## Version 2.1.8 (30 October 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/data-list/data-list-item.stories.js

@@ -11,7 +11,7 @@ export const dataListItem = () => ({
   components: { EcsDataList, EcsDataListItem, EcsButton },
   template: `<ecs-data-list>
                 <ecs-data-list-item identifier="Identifier">Data</ecs-data-list-item>
-                <ecs-data-list-item identifier="Identifier">Data</ecs-data-list-item>
+                <ecs-data-list-item escape identifier="Identifier">Data</ecs-data-list-item>
                 <ecs-data-list-item identifier="Identifier"><a href="https://google.com" target="_blank">Google</a></ecs-data-list-item>
               </ecs-data-list>`
 });
@@ -25,6 +25,24 @@ export const dataListItemFull = () => ({
               </ecs-data-list>`
 });
 
+export const dataListItemPlain = () => ({
+  components: { EcsDataList, EcsDataListItem, EcsButton },
+  template: `<ecs-data-list>
+                <ecs-data-list-item plain identifier="Identifier">Data</ecs-data-list-item>
+                <ecs-data-list-item plain full identifier="Identifier">Full Data</ecs-data-list-item>
+                <ecs-data-list-item plain identifier="Identifier"><a href="https://google.com" target="_blank">Google</a></ecs-data-list-item>
+              </ecs-data-list>`
+});
+
+export const dataListItemPlainBordered = () => ({
+  components: { EcsDataList, EcsDataListItem, EcsButton },
+  template: `<ecs-data-list>
+                <ecs-data-list-item plain bordered identifier="Identifier">Data</ecs-data-list-item>
+                <ecs-data-list-item plain bordered full identifier="Identifier">Full Data</ecs-data-list-item>
+                <ecs-data-list-item plain bordered identifier="Identifier"><a href="https://google.com" target="_blank">Google</a></ecs-data-list-item>
+              </ecs-data-list>`
+});
+
 export const dataListItemExpandable = () => ({
   components: { EcsDataList, EcsDataListItem },
   template: `<ecs-data-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" />`,
+});