@everchron/ec-shards 0.6.53 → 0.6.66

package/package.json

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

package/src/components/button/button.vue

@@ -384,13 +384,14 @@
 
   &:disabled{
     opacity: .5;
-    cursor: not-allowed;
+    cursor: default;
+    filter: saturate(0);
 
     &:after{
       opacity: 0;
     }
   }
-
+  
   &.loading{
     opacity: .7;
     cursor: wait;

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

@@ -1,13 +1,18 @@
 <template>
   <button
     class="ecs-button-table"
-    :class="[ active ? 'active' : '', hasLabel, subtle ? 'subtle' : '' ]"
+    :class="[
+      active ? 'active' : '',
+      hasLabel,
+      subtle ? 'subtle' : ''
+    ]"
+    :disabled="disabled"
     @click="$emit('click', $event)"
     @mouseover="$emit('mouseover', $event)"
     @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>
 
@@ -29,13 +34,17 @@
         type: String
       },
       label: {
-        type: String
+        type: [String, Number]
+      },
+      disabled: {
+        type: Boolean,
+        default: false
       }
     },
 
     computed: {
       hasLabel() {
-        if (this.label && this.label !== '')
+        if (this.label && this.label !== '' || this.label != null)
           return `has-label`
         return this.label
       }
@@ -52,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

@@ -7,7 +7,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>
@@ -221,4 +221,4 @@
   }
 }
 
-</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/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