@everchron/ec-shards 0.6.87 → 0.6.91

package/package.json

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

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

@@ -265,7 +265,7 @@
     color: $gray-10;
   }
 
-  .ecs-mf-party{
+  .ecs-party-entry{
     margin: 0 2px 0 -5px;
   }
 

package/src/components/modal/modal.vue

@@ -1,6 +1,6 @@
 <template>
   <transition name="dialog-fade">
-    <div v-if="isShown" class="ecs-modal" :class="typeClass">
+    <div v-if="isShown" class="ecs-modal" :class="[typeClass, clickthroughBackdrop ? 'ecs-modal-click-through' : '']">
 
       <div class="ecs-modal-dialog ecs-modal-sheet">
         <div v-if="$slots.header" class="ecs-modal-header-wrap">
@@ -34,7 +34,11 @@
         type: String,
         validator: v => ['default', 'drawer',].includes(v),
         default: 'default'
-      }
+      },
+      clickthroughBackdrop: {
+        type: Boolean,
+        default: false
+      },
     },
 
     data () {
@@ -94,6 +98,8 @@
   }
 }
 
+// Drawer modal variant
+
 .ecs-modal-drawer{
   .ecs-modal-sheet{
     margin: 5px auto;
@@ -121,5 +127,13 @@
   &-footer-wrap{
     flex-shrink: 0;
   }
+
+  &.ecs-modal-click-through{
+    pointer-events: none;
+
+    .ecs-modal-dialog{
+      pointer-events: auto;
+    }
+  }
 }
 </style>

package/src/components/modal-base/modal-base.vue

@@ -27,7 +27,7 @@
     align-items: flex-end;
 
     .ecs-modal-dialog{
-      max-height: calc(60vh - 140px);
+      max-height: calc(65vh - 140px);
     }
   }
 

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

@@ -1,6 +1,10 @@
 <template>
-  <div class="ecs-mf-party"
-      :class="[party, shared ? 'shared' : '']">
+  <div class="ecs-party-entry"
+      :class="[
+                party,
+                shared ? 'shared' : '',
+                background ? 'ecs-party-entry-background' : ''
+              ]">
     <ecs-icon v-if="icon && iconPosition == 'left'" :type="iconType" :color="iconColor" :style="'margin-right:'+iconSpacing" :width="iconSize" :height="iconSize" />
     <slot></slot>
     <ecs-icon v-if="icon && iconPosition == 'right'" :type="iconType" :color="iconColor" :style="'margin-left:'+iconSpacing" :width="iconSize" :height="iconSize" />
@@ -22,6 +26,10 @@
         validator: v => ['client', 'opposing', 'joint', 'other', 'court', 'unaffiliated'].includes(v),
         required: true
       },
+      background: {
+        type: Boolean,
+        default: false
+      },
       shared: {
         type: Boolean,
         default: false
@@ -82,7 +90,7 @@
 @import "../tokens/tokens";
 @import "../mixins/svg-uri";
 
-.ecs-mf-party{
+.ecs-party-entry{
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -130,5 +138,31 @@
   &.unaffiliated{
     color: $party-other-text;
   }
+
+  &-background{
+    &.client{
+      background-color: $party-client-background;
+    }
+
+    &.opposing{
+      background-color: $party-opposition-background;
+    }
+
+    &.joint{
+      background-color: $party-joint-background;
+    }
+
+    &.other{
+      background-color: $party-other-background;
+    }
+
+    &.court{
+      background-color: $party-court-background;
+    }
+
+    &.unaffiliated{
+      background-color: $party-other-background;
+    }
+  }
 }
 </style>

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

@@ -33,7 +33,7 @@ export const drawer = () => ({
   },
   template: `<div>
                 <button @click="showdialog = !showdialog">Open</button>
-                <ecs-modal type="drawer" :show="showdialog">
+                <ecs-modal type="drawer" :show="showdialog" clickthrough-backdrop>
                   <p>Modal Content Slot</p>
                 </ecs-modal>
               </div>`,

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

@@ -33,3 +33,15 @@ export const partyEntrySides = () => ({
               <ecs-party-entry icon="document" party="unaffiliated">Unaffiliated</ecs-party-entry>
             </main>`,
 });
+
+export const partyEntryWithBackground = () => ({
+  components: { EcsPartyEntry },
+  template: `<main>
+              <ecs-party-entry background icon="document" party="opposing">Opposition</ecs-party-entry>
+              <ecs-party-entry background icon="document" party="client">Client</ecs-party-entry>
+              <ecs-party-entry background icon="document" party="joint">Joint</ecs-party-entry>
+              <ecs-party-entry background icon="document" party="other">Other</ecs-party-entry>
+              <ecs-party-entry background icon="document" party="court">Court</ecs-party-entry>
+              <ecs-party-entry background icon="document" party="unaffiliated">Unaffiliated</ecs-party-entry>
+            </main>`,
+});

package/src/stories/party-entry/party-entry.stories.mdx

@@ -56,6 +56,12 @@ Use the `party` attribute to set the party side. The following sides are availab
   </Story>
 </Canvas>
 
+<Canvas withSource="none" withToolbar={true}>
+  <Story name="Party Entry with Background" height="80px">
+    {stories.partyEntryWithBackground()}
+  </Story>
+</Canvas>
+
 ```js
 <ecs-party-entry icon="document" party="opposing">Opposition</ecs-party-entry>
 <ecs-party-entry icon="document" party="client">Client</ecs-party-entry>