@everchron/ec-shards 0.6.54 → 0.6.70

package/package.json

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

package/src/components/button-table/button-table.vue

@@ -2,7 +2,8 @@
   <button
     class="ecs-button-table"
     :class="[
-      active ? 'active' : '', hasLabel,
+      active ? 'active' : '',
+      hasLabel,
       subtle ? 'subtle' : ''
     ]"
     :disabled="disabled"
@@ -11,7 +12,7 @@
     @mouseleave="$emit('mouseleave', $event)">
 
     <ecs-icon v-if="icon" :type="icon" width="20" height="20" />
-    <div v-if="label">{{ label }}</div>
+    <div v-if="label != null">{{ label }}</div>
   </button>
 </template>
 
@@ -43,7 +44,7 @@
 
     computed: {
       hasLabel() {
-        if (this.label && this.label !== '')
+        if (this.label && this.label !== '' || this.label != null)
           return `has-label`
         return this.label
       }
@@ -60,7 +61,7 @@
   align-items: center;
   border-radius: 3px;
   background: rgba($gray-7, .1);
-  color: $gray-12;
+  color: $gray-14;
   transition: .2s;
   font-size: 14px;
   padding: 1px;

package/src/components/quicklink/quicklink.vue

@@ -1,5 +1,9 @@
 <template>
-  <li class="ecs-quicklinks-link" :class="[typeClass, active ? 'active' : '']">
+  <li class="ecs-quicklinks-link" :class="[
+    typeClass,
+    active ? 'active' : '',
+    disabled ? 'disabled' : ''
+  ]">
     <label v-if="type === 'icon'" @click="$emit('click', $event)">
       <ecs-icon :type="icon" />
       <span class="filter-description">{{label}}</span>
@@ -7,7 +11,7 @@
     </label>
 
     <div v-else-if="type === 'favorability'" class="ecs-form-check" @click="$emit('click', $event)">
-      <ecs-rating-favorability :type="favorabilityType" rating="Good" :label="false" :disabled="disabled" />
+      <ecs-rating-favorability :type="favorabilityType" :rating="rating" :label="false" :disabled="disabled" />
       <label class="ml-3">
         <span class="static-label">{{label}}</span>
       </label>
@@ -126,6 +130,10 @@
       color: $gray-8;
     }
 
+    label{
+      cursor: pointer;
+    }
+
     .ecs-form-check,
     label{
       width: 100%;
@@ -201,6 +209,15 @@
         color: $blue-9;
       }
     }
+
+    &.disabled{
+      cursor: default;
+      opacity: .5;
+
+      label{
+        cursor: default;
+      }
+    }
   }
 }
 </style>
@@ -220,5 +237,4 @@
     top: auto !important;
   }
 }
-
-</style>
+</style>

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

@@ -1,12 +1,12 @@
 <template>
   <div class="ecs-favorability" :class="typeClass">
-    <div class="ecs-favorability-button" :class="[css, loading ? `loading` : ``]" :title="ratingLabel">
+    <div class="ecs-favorability-button" :class="[css, loading ? `loading` : ``]" :title="rating">
       <ecs-icon :type="iconType" />
     </div>
-    <span v-if="ratingLabel && label" class="label" :class="loading ? `loading` : ``">{{ ratingLabel }}</span>
+    <span v-if="label" class="label" :class="loading ? `loading` : ``">{{ rating }}</span>
 
     <ecs-skeleton-loader v-if="loading" type="rect" :width="20" :height="20" />
-    <ecs-skeleton-loader v-if="loading && ratingLabel" type="single" style="width:calc(100% - 30px)" />
+    <ecs-skeleton-loader v-if="loading && label" type="single" style="width:calc(100% - 30px)" />
   </div>
 </template>
 
@@ -24,7 +24,7 @@
       },
       rating: {
         type: String,
-        validator: v => ['Good', 'Mixed', 'Bad', 'Unrated'].includes(v),
+        validator: v => ['good', 'mixed', 'bad', 'unrated'].includes(v),
         required: true
       },
       type: {
@@ -45,10 +45,6 @@
     },
 
     computed: {
-      ratingLabel() {
-        return this.rating ? this.rating == 'Good' || this.rating == 'Bad' ? `${ this.rating } for Us` : this.rating : null
-      },
-
       typeClass() {
         if (this.type && this.type !== '')
           return `ecs-favorability-${ this.type }`
@@ -57,12 +53,14 @@
 
       iconType() {
         switch (this.rating){
-          case 'Good':
+          case 'good':
             return 'fav-arrow'
-          case 'Mixed':
+          case 'mixed':
             return 'fav-mixed'
-          case 'Bad':
+          case 'bad':
             return 'fav-arrow'
+          case 'unrated':
+            return 'fav-unrated'
           default:
             return 'fav-unrated'
         }
@@ -103,6 +101,7 @@
   .label{
     font-size: 13px;
     margin-left: 8px;
+    text-transform: capitalize;
   }
 
   .good{

package/src/components/tag/tag.vue

@@ -28,7 +28,7 @@
       },
       party: {
         type: String,
-        validator: v => ['client', 'opposition', 'joint', 'other', 'court', null].includes(v)
+        validator: v => ['client', 'opposing', 'joint', 'other', 'court', null].includes(v)
       },
       count: {
         type: Number,

package/src/stories/button-table/button-table.stories.js

@@ -7,7 +7,7 @@ export default {
 
 export const text = () => ({
   components: { EcsButtonTable },
-  template: `<ecs-button-table icon="parties" label="4"></ecs-button-table>`,
+  template: `<ecs-button-table icon="parties" label="5"></ecs-button-table>`,
 });
 
 export const iconOnly = () => ({

package/src/stories/rating-favorability/rating-favorability.stories.js

@@ -8,38 +8,38 @@ export default {
 export const favorability = () => ({
   components: { EcsRatingFavorability },
   template: `<main>
-              <ecs-rating-favorability rating="Good" />
-              <ecs-rating-favorability rating="Mixed" />
-              <ecs-rating-favorability rating="Bad" />
-              <ecs-rating-favorability rating="Unrated" />
+              <ecs-rating-favorability rating="good" />
+              <ecs-rating-favorability rating="mixed" />
+              <ecs-rating-favorability rating="bad" />
+              <ecs-rating-favorability rating="unrated" />
             </main>`,
 });
 
 export const favorabilityLabel = () => ({
   components: { EcsRatingFavorability },
   template: `<main>
-              <ecs-rating-favorability label rating="Good" />
-              <ecs-rating-favorability label rating="Mixed" />
-              <ecs-rating-favorability label rating="Bad" />
-              <ecs-rating-favorability label rating="Unrated" />
+              <ecs-rating-favorability label rating="good" />
+              <ecs-rating-favorability label rating="mixed" />
+              <ecs-rating-favorability label rating="bad" />
+              <ecs-rating-favorability label rating="unrated" />
             </main>`,
 });
 
 export const favorabilityTypes = () => ({
   components: { EcsRatingFavorability },
   template: `<main>
-              <ecs-rating-favorability rating="Good" />
-              <ecs-rating-favorability type="active" rating="Good" />
-              <ecs-rating-favorability type="subtle" rating="Good" />
+              <ecs-rating-favorability rating="good" />
+              <ecs-rating-favorability type="active" rating="good" />
+              <ecs-rating-favorability type="subtle" rating="good" />
             </main>`,
 });
 
 export const favorabilityLoading = () => ({
   components: { EcsRatingFavorability },
   template: `<main>
-              <ecs-rating-favorability label loading rating="Good" />
-              <ecs-rating-favorability label loading rating="Mixed" />
-              <ecs-rating-favorability label loading rating="Bad" />
-              <ecs-rating-favorability label loading rating="Unrated" />
+              <ecs-rating-favorability label loading rating="good" />
+              <ecs-rating-favorability label loading rating="mixed" />
+              <ecs-rating-favorability label loading rating="bad" />
+              <ecs-rating-favorability label loading rating="unrated" />
             </main>`,
 });

package/src/stories/rating-favorability/rating-favorability.stories.mdx

@@ -17,10 +17,10 @@ Rating component to rate documents and entries by favorability.
 </Canvas>
 
 ```js
-<ecs-rating-favorability rating="Good" />
-<ecs-rating-favorability rating="Mixed" />
-<ecs-rating-favorability rating="Bad" />
-<ecs-rating-favorability rating="Unrated" />
+<ecs-rating-favorability rating="good" />
+<ecs-rating-favorability rating="mixed" />
+<ecs-rating-favorability rating="bad" />
+<ecs-rating-favorability rating="unrated" />
 ```
 
 ## Labels
@@ -34,10 +34,10 @@ Add a label to show the favorability name by adding the `label` prop.
 </Canvas>
 
 ```js
-<ecs-rating-favorability label rating="Good" />
-<ecs-rating-favorability label rating="Mixed" />
-<ecs-rating-favorability label rating="Bad" />
-<ecs-rating-favorability label rating="Unrated" />
+<ecs-rating-favorability label rating="good" />
+<ecs-rating-favorability label rating="mixed" />
+<ecs-rating-favorability label rating="bad" />
+<ecs-rating-favorability label rating="unrated" />
 ```
 
 ## Type
@@ -52,8 +52,8 @@ There are several visual variants of favorability ratings available. Set the `ty
 
 ```js
 <ecs-rating-favorability rating="good" />
-<ecs-rating-favorability type="active" rating="Good" />
-<ecs-rating-favorability type="subtle" rating="Good" />
+<ecs-rating-favorability type="active" rating="good" />
+<ecs-rating-favorability type="subtle" rating="good" />
 ```
 
 ## Loading
@@ -67,10 +67,10 @@ Add the `loading` attribute to display a skeleton loader for the favorability co
 </Canvas>
 
 ```js
-<ecs-rating-favorability label loading rating="Good" />
-<ecs-rating-favorability label loading rating="Mixed" />
-<ecs-rating-favorability label loading rating="Bad" />
-<ecs-rating-favorability label loading rating="Unrated" />
+<ecs-rating-favorability label loading rating="good" />
+<ecs-rating-favorability label loading rating="mixed" />
+<ecs-rating-favorability label loading rating="bad" />
+<ecs-rating-favorability label loading rating="unrated" />
 ```
 
 ## Props

package/src/stories/tag/tag.stories.js

@@ -32,9 +32,9 @@ export const partyTag = () => ({
                 <ecs-tag type="party" party="client" active>active</ecs-tag>
               </main>
               <main class="mb-4">
-                <ecs-tag type="party" party="opposition">opposition</ecs-tag>
-                <ecs-tag type="party" party="opposition" hover>hover</ecs-tag>
-                <ecs-tag type="party" party="opposition" active>active</ecs-tag>
+                <ecs-tag type="party" party="opposing">opposition</ecs-tag>
+                <ecs-tag type="party" party="opposing" hover>hover</ecs-tag>
+                <ecs-tag type="party" party="opposing" active>active</ecs-tag>
               </main>
               <main class="mb-4">
                 <ecs-tag type="party" party="joint">joint</ecs-tag>
@@ -70,4 +70,4 @@ export const tagsLoading = () => ({
               <ecs-tag type="group" loading>hover</ecs-tag>
               <ecs-tag type="filter" loading>active</ecs-tag>
             </main>`,
-});
+});

package/src/stories/tag/tag.stories.mdx

@@ -66,9 +66,9 @@ For the party tag style, set the `type` prop to `party`. Party tags require the
 <ecs-tag type="party" party="client">client</ecs-tag>
 <ecs-tag type="party" party="client" hover>hover</ecs-tag>
 <ecs-tag type="party" party="client" active>active</ecs-tag>
-<ecs-tag type="party" party="opposition">opposition</ecs-tag>
-<ecs-tag type="party" party="opposition" hover>hover</ecs-tag>
-<ecs-tag type="party" party="opposition" active>active</ecs-tag>
+<ecs-tag type="party" party="opposing">opposition</ecs-tag>
+<ecs-tag type="party" party="opposing" hover>hover</ecs-tag>
+<ecs-tag type="party" party="opposing" active>active</ecs-tag>
 <ecs-tag type="party" party="joint">joint</ecs-tag>
 <ecs-tag type="party" party="joint" hover>hover</ecs-tag>
 <ecs-tag type="party" party="joint" active>active</ecs-tag>
@@ -114,4 +114,4 @@ Add the `loading` attribute to show a skeleton loader within the tag.
 
 ## Props, Slots and Events
 
-<ArgsTable of={EcsTag} />
+<ArgsTable of={EcsTag} />