@everchron/ec-shards 2.1.4 → 2.1.6

package/package.json

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

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

@@ -1,10 +1,13 @@
 <template>
   <ecs-flex-row class="ecs-log-message" :class="[type, highlight ? 'highlighted' : '']" align="start" :style="padding">
-    <ecs-sticker v-if="type != 'blank'" :type="type" />
+    <ecs-skeleton-loader v-if="loading && type != 'blank'" type="rect" :width="16" :height="16" />
+    <ecs-sticker v-else-if="type != 'blank'" :type="type" />
     <div class="ecs-log-message-content">
-      <slot></slot>
+      <ecs-skeleton-loader v-if="loading" type="single" :width="40" class="skeleton-text" />
+      <slot v-else></slot>
     </div>
-    <div v-if="meta" class="ecs-log-message-meta">
+    <ecs-skeleton-loader v-if="loading && meta" type="single" :width="15" class="skeleton-text" />
+    <div v-else-if="meta" class="ecs-log-message-meta">
       {{ meta }}
     </div>
   </ecs-flex-row>
@@ -13,10 +16,11 @@
 <script>
 import EcsFlexRow from '../flex/flex-row'
 import EcsSticker from '../sticker/sticker'
+import EcsSkeletonLoader from '../skeleton-loader/skeleton-loader'
 
 export default {
   components: {
-    EcsFlexRow, EcsSticker
+    EcsFlexRow, EcsSticker, EcsSkeletonLoader
   },
 
   props: {
@@ -40,6 +44,11 @@ export default {
       type: String,
       default: '20px'
     },
+    /** Turns the log message into fetching/loading state, which replaces it's content with skeleton loaders. */
+    loading: {
+      type: Boolean,
+      default: false
+    }
   },
 
   computed: {
@@ -54,6 +63,8 @@ export default {
 @import "../../tokens/build/scss/tokens.scss";
 
 .ecs-log-message-content{
+  min-height: $type-scale-2-line-height;
+
   p, ol, ul, blockquote{
     margin: $spacing-10 0;
   }
@@ -141,4 +152,8 @@ export default {
   border-color: $color-green-2;
   color: $color-green-15;
 }
+
+.skeleton-text{
+  margin-top: 5px !important;
+}
 </style>

package/src/components/modal/modal.vue

@@ -2,7 +2,7 @@
   <transition name="dialog-fade">
     <div v-if="isShown" class="ecs-modal" :class="[typeClass, clickthrough ? 'ecs-modal-click-through' : '']">
 
-      <div class="ecs-modal-dialog ecs-modal-sheet">
+      <div class="ecs-modal-dialog ecs-modal-sheet" :style="fixedHeightStyle">
         <div v-if="$slots.header" class="ecs-modal-header-wrap">
           <!-- @slot Slot for the modal header content. -->
           <slot name="header"></slot>
@@ -44,6 +44,10 @@
         type: Boolean,
         default: false
       },
+      /** Sets the modal height to a fixed pixel value. If not passed, the modal height will auto adapt it's height. The modal height will never exceed 90% height of viewport. */
+      fixedHeight: {
+        type: Number
+      }
     },
 
     data () {
@@ -57,6 +61,12 @@
         if (this.type && this.type !== '')
           return `ecs-modal-${this.type}`
         return this.type
+      },
+
+      fixedHeightStyle() {
+        if (this.fixedHeight && this.fixedHeight !== '')
+          return `height:${this.fixedHeight}px`
+        return this.fixedHeight
       }
     },
 

package/src/stories/Changelog.stories.mdx

@@ -6,6 +6,18 @@ import { Meta } from '@storybook/addon-docs/blocks';
   Changelog
 </h1>
 
+## Version 2.1.6 (28 October 2022)
+
+### Features
+
+- Added `loading` prop to EcsLogMessage component
+
+## Version 2.1.5 (28 October 2022)
+
+### Features
+
+- Added `fixedHeight` prop to modal component
+
 ## Version 2.1.4 (26 October 2022)
 
 ### Features

package/src/stories/log-message/log-message.stories.js

@@ -35,3 +35,14 @@ export const logMessageRichText = () => ({
               </ecs-log-message>
             </div>`,
 });
+
+export const logMessageLoading = () => ({
+  components: { EcsLogMessage },
+  template: `<div>
+              <ecs-log-message type="info" meta="07/21/2022, 11:23 AM" loading>Message</ecs-log-message>
+              <ecs-log-message type="info" meta="07/21/2022, 11:23 AM" highlight loading>
+                <p>Broken Transcript Issue opened by <strong><a href="mailto:r.reyes@orrick.com">r.reyes@orrick.com</a></strong></p>
+                <p>Hey there, it looks like this transcript is cut-off at page 58, even though the original file has a total of 112 pages. Additionally there are lines of text missing at the end of each page.</p>
+              </ecs-log-message>
+            </div>`,
+});

package/src/stories/modal/modal.stories.js

@@ -128,3 +128,32 @@ export const footer = () => ({
                 </ecs-modal>
               </div>`,
 });
+
+export const modalFixedHeight = () => ({
+  components: { EcsModal, EcsModalHeader, EcsModalFooter },
+  data() {
+    return {
+      showdialog: false
+    }
+  },
+  template: `<div>
+                <button @click="showdialog = !showdialog">Open</button>
+
+                <ecs-modal :fixed-height="300" :show="showdialog">
+                  <template slot="header">
+                    <ecs-modal-header @close="showdialog = !showdialog">
+                      <h2 class="headline-2">Regular Header</h2>
+                    </ecs-modal-header>
+                  </template>
+                  <p>Modal Content Slot</p>
+                  <template slot="footer">
+                    <ecs-modal-footer>
+                      <template slot="secondary">
+                        Secondary Footer
+                      </template>
+                      Primary Footer Content
+                    </ecs-modal-footer>
+                  </template>
+                </ecs-modal>
+              </div>`,
+});