@everchron/ec-shards 2.0.0 → 2.0.1

package/src/components/overlay/overlay.vue

@@ -31,8 +31,8 @@
           <!-- @slot Slot for a tab bar. -->
           <slot name="tabs"></slot>
         </div>
-        <div class="ecs-overlay-content-inner scrollbar" :class="sidebarOpenClass">
-          <div class="ecs-overlay-content-inner-inner" :class="$slots.sidebar && !fullWidth && width > 1500  ? 'has-sidebar' : ' '" :style="{ width: contentWidth, maxWidth: contentMaxWidth, minWidth: contentMinWidth }">
+        <div ref="innerContent" class="ecs-overlay-content-inner scrollbar" :class="sidebarOpenClass">
+          <div class="ecs-overlay-content-inner-inner" :class="$slots.sidebar && !fullWidth && width > 1500  ? 'has-sidebar' : ' '" :style="{ width: contentWidth, maxWidth: contentMaxWidth, minWidth: contentMinWidth, paddingLeft: contentPadding, paddingRight: contentPadding }">
             <!-- @slot Main content area. -->
             <slot></slot>
           </div>
@@ -46,15 +46,17 @@
             </div>
           </transition>
         </div>
+        <div v-if="blockContent" class="ecs-overlay-content-block" />
       </div>
       <div v-if="$slots.footer" class="ecs-overlay-footer">
         <div v-if="$slots.tabs" class="spacer-tabs" />
         <div class="ecs-overlay-footer-content">
-          <div class="ecs-overlay-footer-content-inner" :style="{ width: contentWidth, maxWidth: contentMaxWidth, minWidth: contentMinWidth }">
+          <div class="ecs-overlay-footer-content-inner" :style="{ width: contentWidth, maxWidth: contentMaxWidth, minWidth: contentMinWidth, paddingLeft: contentPadding, paddingRight: contentPadding }">
             <!-- @slot Slot for footer buttons, etc. -->
             <slot name="footer"></slot>
           </div>
           <div v-if="$slots.sidebar && width > 1500" class="spacer-sidebar" />
+          <div v-if="footerScrollSpacer" class="spacer-scrollbar" />
         </div>
       </div>
     </div>
@@ -111,6 +113,11 @@
         type: Number,
         default: 41
       },
+      /** Adds a half-transparent layer on top of the entire content area, that blocks any user interactions. */
+      blockContent: {
+        type: Boolean,
+        default: false
+      },
 
       // Props for additional slide-in sidbar
       /** Sets the icon for the sidebar icon button. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). Note: the button is only visible when the sidebar is collapsed on smaller screens. */
@@ -145,6 +152,9 @@
         isShown: this.show,
         showSidebar: false,
         width: window.innerWidth,
+        elementsHeight: null,
+        scrollsHeight: null,
+        footerScrollSpacer: false
       }
     },
 
@@ -161,7 +171,7 @@
         if(this.fullWidth && !this.$slots.tabs){
           return '100%'
         } else {
-          return '920px'
+          return '952px'
         }
       },
 
@@ -171,7 +181,7 @@
         } else if(this.fullWidth && this.$slots.tabs){
           return 'calc(100vw - 260px)'
         } else {
-          return '780px'
+          return '821px'
         }
       },
 
@@ -179,17 +189,27 @@
         if(this.showSidebar && this.width < 1500){
           return 'sidebar-open'
         }
+      },
+
+      contentPadding(){
+        if(!this.fullWidth){
+          return '16px'
+        } else {
+          return '0'
+        }
       }
     },
 
     mounted(){
       this.$nextTick(() => {
         window.addEventListener('resize', this.windowWidth)
+        window.addEventListener('resize', this.setScrollPaddings)
       })
     },
 
     beforeDestroy() {
       window.removeEventListener('resize', this.windowWidth)
+      window.removeEventListener('resize', this.setScrollPaddings)
     },
 
     methods :{
@@ -202,19 +222,37 @@
         this.width = window.innerWidth
       },
 
+      setScrollPaddings() {
+        if(this.isShown){
+          this.elementsHeight = this.$refs.innerContent.clientHeight
+          this.scrollsHeight = this.$refs.innerContent.scrollHeight
+
+          if(this.elementsHeight < this.scrollsHeight){
+            this.footerScrollSpacer = true
+          } else {
+            this.footerScrollSpacer = false
+          }
+        }
+      },
+
       sidebarToggle(){
         this.showSidebar = !this.showSidebar
         this.$refs.content.classList.add('overflow-hidden')
         setTimeout(() => {
           this.$refs.content.classList.remove('overflow-hidden')
         }, 360);
-        
       },
     },
 
     watch: {
       show(){
         this.isShown = this.show
+
+        setTimeout(() => {
+          if(this.isShown){
+            this.setScrollPaddings()
+          }
+        }, 10);
       }
     }
   }
@@ -238,16 +276,16 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0 15px;
+    padding: 0 $spacing-20;
     min-height: 72px;
     border-bottom: 1px solid $color-gray-4;
 
     &-controls{
-      margin-right: 24px;
+      margin-right: $spacing-30;
     }
 
     .sidebar-button{
-      margin-right: 24px;
+      margin-right: $spacing-30;
     }
   }
 
@@ -257,6 +295,14 @@
     overflow: hidden;
     position: relative;
 
+    &-block{
+      position: absolute;
+      background: rgba(#FFF, .5);
+      cursor: wait;
+      inset: 0;
+      z-index: 9;
+    }
+
     &.overflow-hidden{
       overflow: hidden !important;
 
@@ -309,7 +355,7 @@
   }
 
   &-sidebar-static{
-    padding: 0 15px 0 30px;
+    padding: 0 $spacing-20;
     width: 400px;
     margin: 0 auto 0 0;
     height: min-content;
@@ -317,8 +363,8 @@
 
   &-sidebar-float{
     padding: 0;
-    padding-right: 15px;
-    padding-left: 20px;
+    padding-right: $spacing-20;
+    padding-left: $spacing-20;
     width: 400px;
     overflow: auto;
     position: absolute;
@@ -351,16 +397,20 @@
       min-width: 400px;
     }
 
+    .spacer-scrollbar{
+      min-width: 15px;
+    }
+
     &-content{
       width: 100%;
       display: flex;
 
       &-inner{
-      margin: 0 auto;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
+        margin: 0 auto;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
     }
   }
 
@@ -390,7 +440,7 @@
     .subline{
       font-size: $type-scale-2-font-size;
       color: $color-gray-9;
-      margin-top: 4px;
+      margin-top: $spacing-5;
     }
   }
 }

package/src/components/sticker/sticker.vue

@@ -14,7 +14,8 @@
     props: {
       /** Sets the sticker icon. */
       type: {
-        type: String
+        type: String,
+        validator: v => ['current', 'error', 'loading', 'warning', 'warning-critical', 'success', 'info', 'null', null, undefined].includes(v)
       }
     },
     
@@ -34,7 +35,8 @@
             || this.type == 'loading'
             || this.type == 'warning'
             || this.type == 'warning-critical'
-            || this.type == 'success')
+            || this.type == 'success'
+            || this.type == 'info')
           return true
         else
           return false

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

@@ -0,0 +1,125 @@
+<template>
+  <div @click="$emit('click', $event)" class="ecs-transcript-state" :class="[interactive ? 'interactive' : '']">
+    <ecs-icon type="toolbar-transcript" color="#929AA9" />
+    <div v-if="state =='healthy'" class="healthy" />
+    <div v-if="state =='repairing'" class="repairing" />
+    <div v-if="state =='corrupted'" class="corrupted" />
+    <span v-if="state == 'loading'" class="loading">
+      <ecs-icon type="loading" width="18px" height="18px" color="#202127" />
+    </span>
+  </div>
+</template>
+
+<script>
+  import EcsAnimations from '../animations/animations'
+  import EcsIcon from '../icon/icon'
+
+  export default {
+    components: {
+      EcsAnimations,
+      EcsIcon
+    },
+    props: {
+      /** Displays a status indicator based on the passed value. */
+      state: {
+        type: String,
+        validator: v => ['healthy', 'loading', 'corrupted'].includes(v),
+        required: true
+      },
+      /** Indicates that the element is a clickable element, by adding a :hover state and showing pointer cursor. */
+      interactive: {
+        type: Boolean,
+        default: false
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-transcript-state{
+  width: 36px;
+  height: 36px;
+  position: relative;
+  cursor: help;
+  flex-shrink: 0;
+  z-index: 1;
+
+  div{
+    width: 30px;
+    height: 30px;
+    position: absolute;
+    top: 3px;
+    left: 3px;
+  }
+
+  > .icon{
+    position: absolute;
+    top: 3px;
+    left: 3px;
+  }
+
+  .healthy{
+    background-image: svg-uri('<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M25.0657 13.9129L25.0304 13.9468L24.9997 13.9849L21.0235 18.9354L19.9494 18.0137C19.6108 17.7015 19.191 17.6225 18.8271 17.6695C18.4719 17.7154 18.1497 17.8792 17.9013 18.0833C17.6534 18.2869 17.4262 18.5742 17.3167 18.9238C17.2008 19.2938 17.2224 19.7327 17.4931 20.1232L17.5128 20.1515L17.535 20.1779L20.0265 23.1467L20.0335 23.1551L20.0408 23.1634C20.3616 23.5236 20.8034 23.778 21.3214 23.7476C21.8285 23.7178 22.2304 23.4249 22.5053 23.072L22.5241 23.048L22.5408 23.0224L27.4703 15.5069L27.4956 15.4683L27.516 15.4269C27.6882 15.0771 27.7869 14.697 27.7372 14.3253C27.6843 13.9289 27.4607 13.5718 27.0792 13.3823C26.3775 13.0338 25.5896 13.4113 25.0657 13.9129Z" fill="#157EFB" stroke="#FFF" stroke-width="1.5"/></svg>');
+  }
+
+  .corrupted{
+    background-image: svg-uri('<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.9271 16.2357L17.9269 16.2358C16.889 16.8402 16.25 17.9508 16.25 19.1525V21.9303C16.25 23.132 16.8891 24.2427 17.9277 24.8471C17.9277 24.8471 17.9277 24.8471 17.9277 24.8471L20.5527 26.3748L20.5527 26.3749C21.602 26.9854 22.8986 26.9854 23.9478 26.3749L23.9479 26.3748L26.5729 24.8471L26.5731 24.847C27.611 24.2426 28.25 23.1319 28.25 21.9303V19.1525C28.25 17.9508 27.6109 16.8401 26.5723 16.2357C26.5723 16.2357 26.5723 16.2357 26.5723 16.2357L23.9473 14.7079L23.9473 14.7079C22.898 14.0974 21.6014 14.0974 20.5522 14.7079L20.5521 14.7079L17.9271 16.2357Z" fill="#FF3750" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill-rule="evenodd" clip-rule="evenodd" d="M22.0004 17.1111C22.43 17.1111 22.7782 17.4326 22.7782 17.8291V21.0598C22.7782 21.4563 22.43 21.7778 22.0004 21.7778C21.5709 21.7778 21.2227 21.4563 21.2227 21.0598V17.8291C21.2227 17.4326 21.5709 17.1111 22.0004 17.1111Z" fill="#FFF"/><circle cx="22.0004" cy="23.4778" r="0.777778" fill="white"/></svg>');
+  }
+
+  .loading{
+    border-radius: 100%;
+    background: #FFF;
+    width: 18px;
+    height: 18px;
+    position: absolute;
+    bottom: 3px;
+    right: 3px;
+    display: block;
+
+    .icon{
+      position: absolute;
+      inset: 0;
+      animation: spin 1.5s infinite linear reverse;
+    }
+  }
+
+  &.interactive{
+    cursor: pointer;
+
+    &:after{
+      content: "";
+      position: absolute;
+      inset: 0;
+      background: rgba($color-gray-8, .08);
+      opacity: 0;
+      transform: scale(.6);
+      transition: opacity .15s ease-in-out, transform .3s cubic-bezier(0.3, 0.76, 0.27, 1);
+      border-radius: $border-radius-small;
+      z-index: -1;
+      pointer-events: none;
+    }
+
+    &:hover:after{
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+@import "../../tokens/build/scss/tokens.scss";
+
+.popover-button.active > .ecs-transcript-state > .icon{
+  color: $color-blue-9;
+}
+
+.popover-button.active > .ecs-transcript-state.interactive:after{
+  opacity: 1;
+  transform: scale(1);
+  background: rgba($color-blue-8, .08);
+}
+</style>

package/src/stories/Changelog.stories.mdx

@@ -6,12 +6,51 @@ import { Meta } from '@storybook/addon-docs/blocks';
   Changelog
 </h1>
 
-## Version 2.0.0 (2 September 2022)
+## Version 2.0.1 (13 September 2022)
 
 ### Breaking Changes
 
 - Refactored the EcsPartyEntry component to accept custom color values. Deprecated the old annotation color classes.
 
+### Fixes
+
+- Unscoped content styles for `EcsDataListItem`
+
+## Version 1.6.0 (13 September 2022)
+
+### Features
+
+- Added new `EcsLegendItem` component.
+
+## Version 1.5.0 (9 September 2022)
+
+### Features
+
+- Added new `blockContent` prop to `EcsOverlay` which allows to block any interactions on the content area.
+
+### Fixes
+
+- Added dynamic padding on `EcsOverlay` footer, depending if the content area is scrollable.
+- Added minimum padding for `EcsOverlay` content, when it's not the full width variant.
+
+## Version 1.4.1 (7 September 2022)
+
+### Fixes
+
+- Correct size for EcsTranscriptState button, added active styles and removed not needed `repair` state.
+
+## Version 1.4.0 (6 September 2022)
+
+### Features
+
+- Added new `EcsTranscriptState` component
+- Added new `EcsLogMessage` component
+- Added broken transcript empty state icon
+- Added info sticker icon
+
+### Fixes
+
+- Cleaned up styles on the EcsDocumentState component and reduced weight of inline styles a bit.
 
 ## Version 1.3.6 (29 August 2022)
 

package/src/stories/{data-list-item → data-list}/data-list-item.stories.js

@@ -3,8 +3,8 @@ import EcsDataListItem from '@components/data-list-item/data-list-item';
 import EcsButton from '@components/button/button';
 
 export default {
-  title: 'Data/Data List',
-  component: EcsDataList
+  title: 'Data/Data List/Item',
+  component: EcsDataListItem
 };
 
 export const dataListItem = () => ({
@@ -12,7 +12,7 @@ export const dataListItem = () => ({
   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 identifier="Identifier">Data<ecs-button type="secondary" icon="download" size="sml" href="https://google.com" icon-only /></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>`
 });
 

package/src/stories/data-list/data-list.stories.js

@@ -0,0 +1,17 @@
+import EcsDataList from '@components/data-list/data-list';
+import EcsDataListItem from '@components/data-list-item/data-list-item';
+import EcsButton from '@components/button/button';
+
+export default {
+  title: 'Data/Data List/List',
+  component: EcsDataList
+};
+
+export const dataList = () => ({
+  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 identifier="Identifier">Data</ecs-data-list-item>
+              </ecs-data-list>`
+});

package/src/stories/legend-item/legend-item.stories.js

@@ -0,0 +1,50 @@
+import EcsLegendItem from '@components/legend-item/legend-item';
+
+export default {
+  title: 'Data/Legend Item',
+  component: EcsLegendItem,
+  parameters: {
+    docs: {
+      description: {
+        component: 'The `EcsLegendItem` component is used to provide information about plotted areas in charts or other data visualizations. It can also be used as a legend for e.g. parties or designation types within a transcript. Avoid mixing sizes in one legend item list.',
+      },
+    }
+  }
+};
+
+export const legendItem = () => ({
+  components: { EcsLegendItem },
+  template: `<div style="width: 320px">
+              <ecs-legend-item label="Tags" :count="20" :percentage="40" color="#157EFB" />
+              <ecs-legend-item label="Documents" :count="310" :percentage="60" color="#AB4FCB" />
+            </div>`,
+});
+
+export const legendItemSizes = () => ({
+  components: { EcsLegendItem },
+  template: `<div style="width: 320px">
+              <ecs-legend-item size="sml" label="Small" :count="20" :percentage="40" color="#157EFB" />
+              <ecs-legend-item size="sml" label="Small" :count="310" :percentage="60" color="#AB4FCB" />
+              <ecs-legend-item label="Medium" :count="20" :percentage="40" color="#157EFB" />
+              <ecs-legend-item label="Medium" :count="310" :percentage="60" color="#AB4FCB" />
+            </div>`,
+});
+
+export const legendItemTypes = () => ({
+  components: { EcsLegendItem },
+  template: `<div style="width: 320px">
+              <ecs-legend-item type="fill" label="Fill" :count="20" :percentage="40" color="#157EFB" />
+              <ecs-legend-item type="fill" label="Fill" :count="310" :percentage="60" color="#AB4FCB" style="margin-bottom:20px" />
+              <ecs-legend-item type="line" label="Line" :count="20" :percentage="40" color="#157EFB" />
+              <ecs-legend-item type="line" label="Line" :count="310" :percentage="60" color="#AB4FCB" />
+            </div>`,
+});
+
+export const legendItemHighlightAndHover = () => ({
+  components: { EcsLegendItem },
+  template: `<div style="width: 320px">
+              <ecs-legend-item hover label="Hoverable" :count="20" :percentage="40" color="#157EFB" />
+              <ecs-legend-item label="Not Hoverable" :count="310" :percentage="60" color="#AB4FCB" />
+              <ecs-legend-item highlight label="Highlighted" :count="310" :percentage="60" color="#AB4FCB" />
+            </div>`,
+});

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

@@ -0,0 +1,37 @@
+import EcsLogMessage from '@components/log-message/log-message';
+
+export default {
+  title: 'Data/Log Message',
+  component: EcsLogMessage
+};
+
+export const logMessageTypes = () => ({
+  components: { EcsLogMessage },
+  template: `<div>
+              <ecs-log-message meta="07/21/2022, 11:23 AM">Message</ecs-log-message>
+              <ecs-log-message type="info" meta="07/21/2022, 11:23 AM">Message</ecs-log-message>
+              <ecs-log-message type="warning" meta="07/21/2022, 11:23 AM">Message</ecs-log-message>
+              <ecs-log-message type="success" meta="07/21/2022, 11:23 AM">Message</ecs-log-message>
+              <ecs-log-message type="error" meta="07/21/2022, 11:23 AM">Message</ecs-log-message>
+            </div>`,
+});
+
+export const logMessageHighlight = () => ({
+  components: { EcsLogMessage },
+  template: `<div>
+              <ecs-log-message type="info" meta="07/21/2022, 11:23 AM" highlight>Message</ecs-log-message>
+              <ecs-log-message type="warning" meta="07/21/2022, 11:23 AM" highlight>Message</ecs-log-message>
+              <ecs-log-message type="success" meta="07/21/2022, 11:23 AM" highlight>Message</ecs-log-message>
+              <ecs-log-message type="error" meta="07/21/2022, 11:23 AM" highlight>Message</ecs-log-message>
+            </div>`,
+});
+
+export const logMessageRichText = () => ({
+  components: { EcsLogMessage },
+  template: `<div>
+              <ecs-log-message type="error" meta="07/21/2022, 11:23 AM" highlight>
+                <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/overlay/overlay.stories.js

@@ -16,7 +16,9 @@ export const overlay = () => ({
                 <button @click="showOverlay = true">Show Overlay</button>
                 <ecs-overlay :show="showOverlay" @close="showOverlay = false" icon="archive" header-title="Title" header-title-emphasized="Overlay:" header-title-subline="John G. Deposition (10/12/2020) – Pages 1 - 321">
                   
-                  content area
+                  <div style="height:600px;background:gray">
+                    <div style="background:lightgray">Inner Content Area</div>
+                  </div>
 
                   <template slot="footer">footer area</template>
                 </ecs-overlay>
@@ -33,8 +35,10 @@ export const overlayFullWidth = () => ({
   template: `<div>
                 <button @click="showOverlay = true">Show Overlay</button>
                 <ecs-overlay full-width :show="showOverlay" @close="showOverlay = false" icon="archive" header-title="Title" header-title-emphasized="Overlay:" header-title-subline="John G. Deposition (10/12/2020) – Pages 1 - 321">
-                  
-                  content area
+
+                  <div style="height:600px;background:gray">
+                    <div style="background:lightgray">Inner Content Area</div>
+                  </div>
 
                   <template slot="footer">footer area</template>
                 </ecs-overlay>
@@ -51,10 +55,14 @@ export const overlayTabs = () => ({
   template: `<div>
                 <button @click="showOverlay = true">Show Overlay</button>
                 <ecs-overlay :show="showOverlay" @close="showOverlay = false" icon="archive" header-title="Title" header-title-emphasized="Overlay:" header-title-subline="John G. Deposition (10/12/2020) – Pages 1 - 321">
-                  
-                  content area
 
-                  <template slot="tabs">tab area</template>
+                  <div style="height:600px;background:gray">
+                    <div style="background:lightgray">Inner Content Area</div>
+                  </div>
+
+                  <template slot="tabs">
+                    <div style="height:500px;background:gray">Tab Area</div>
+                  </template>
                   <template slot="footer">footer area</template>
                 </ecs-overlay>
               </div>`,
@@ -70,10 +78,14 @@ export const overlayFullWidthTabs = () => ({
   template: `<div>
                 <button @click="showOverlay = true">Show Overlay</button>
                 <ecs-overlay full-width :show="showOverlay" @close="showOverlay = false" icon="archive" header-title="Title" header-title-emphasized="Overlay:" header-title-subline="John G. Deposition (10/12/2020) – Pages 1 - 321">
-                  
-                  content area
 
-                  <template slot="tabs">tab area</template>
+                  <div style="height:600px;background:gray">
+                    <div style="background:lightgray">Inner Content Area</div>
+                  </div>
+
+                  <template slot="tabs">
+                    <div style="height:500px;background:gray">Tab Area</div>
+                  </template>
                   <template slot="footer">footer area</template>
                 </ecs-overlay>
               </div>`,
@@ -89,11 +101,15 @@ export const overlaySidebar = () => ({
   template: `<div>
                 <button @click="showOverlay = true">Show Overlay</button>
                 <ecs-overlay :show="showOverlay" @close="showOverlay = false" icon="archive" header-title="Title" header-title-emphasized="Overlay:" header-title-subline="John G. Deposition (10/12/2020) – Pages 1 - 321" sidebar-icon-badge>
-                  
-                  <div style="height:700px;background:gray">content area</div>
+
+                  <div style="height:600px;background:gray">
+                    <div style="background:lightgray">Inner Content Area</div>
+                  </div>
 
                   <template slot="footer">footer area</template>
-                  <template slot="sidebar"><div style="height:500px;background:gray">sidebar area</div></template>
+                  <template slot="sidebar">
+                    <div style="height:500px;background:gray">Sidebar Area</div>
+                  </template>
                 </ecs-overlay>
               </div>`,
 });
@@ -109,10 +125,39 @@ export const overlayTabsSidebar = () => ({
                 <button @click="showOverlay = true">Show Overlay</button>
                 <ecs-overlay :show="showOverlay" @close="showOverlay = false" icon="archive" header-title="Title" header-title-emphasized="Overlay:" header-title-subline="John G. Deposition (10/12/2020) – Pages 1 - 321" sidebar-icon-badge>
 
-                  <div style="height:800px;background:gray">content area</div>
+                  <div style="height:600px;background:gray">
+                    <div style="background:lightgray">Inner Content Area</div>
+                  </div>
+
+                  <template slot="tabs">
+                    <div style="height:500px;background:gray">Tab Area</div>
+                  </template>
+                  <template slot="sidebar">
+                    <div style="height:500px;background:gray">Sidebar Area</div>
+                  </template>
+                  <template slot="footer">footer area</template>
+                </ecs-overlay>
+              </div>`,
+});
+
+export const overlayBlockingContent = () => ({
+  components: { EcsOverlay },
+  data() {
+    return {
+      showOverlay: false
+    }
+  },
+  template: `<div>
+                <button @click="showOverlay = true">Show Overlay</button>
+                <ecs-overlay block-content :show="showOverlay" @close="showOverlay = false" icon="archive" header-title="Title" header-title-emphasized="Overlay:" header-title-subline="John G. Deposition (10/12/2020) – Pages 1 - 321">
+
+                  <div style="height:600px;background:gray">
+                    <div style="background:lightgray">Inner Content Area</div>
+                  </div>
 
-                  <template slot="tabs">tab area</template>
-                  <template slot="sidebar"><div style="height:500px;background:gray">sidebar area</div></template>
+                  <template slot="tabs">
+                    <div style="height:500px;background:gray">Tab Area</div>
+                  </template>
                   <template slot="footer">footer area</template>
                 </ecs-overlay>
               </div>`,