@everchron/ec-shards 1.3.7 → 2.0.0

package/package.json

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

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

@@ -1,30 +1,26 @@
 <template>
-  <div class="ecs-party-entry"
-      :class="[
-                party,
-                shared ? 'shared' : '',
-                background ? 'ecs-party-entry-background' : '',
-                annotationColor ? 'annotation' : ''
-              ]"
-      :style="annotationStyles">
+  <div class="ecs-party-entry" :class="[ party, shared ? 'shared' : '', (color && background) ? 'ecs-party-entry-colored' : '']" :style="{ color: color }">
     <ecs-icon v-if="icon && iconPosition == 'left'" :type="iconType" :color="iconColor" :style="'margin-right:'+iconSpacing" :width="iconSize" :height="iconSize" />
     <span>
       <slot></slot>
     </span>
     <ecs-icon v-if="icon && iconPosition == 'right'" :type="iconType" :color="iconColor" :style="'margin-left:'+iconSpacing" :width="iconSize" :height="iconSize" />
+    <div v-if="background" class="ecs-party-entry-background" />
   </div>
 </template>
 
 <script>
   import EcsIcon from '../icon/icon'
+
   export default {
     components: { EcsIcon },
+
     props: {
       /** Adds an icon to the party entry. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
       icon: {
         type: String
       },
-      /** If the party entry tag should be represented by the default party side colors, set this party prop. */
+      /** If the party entry tag should be using the default party side colors, set this party prop. Do not use in combination with the `color` prop. */
       party: {
         type: String,
         validator: v => ['client', 'opposing', 'joint', 'other', 'court', 'unaffiliated'].includes(v)
@@ -54,13 +50,13 @@
         type: String,
         default: '30px'
       },
-      annotationColor: {
-        type: Number,
-        default: null
-      },
+      /** Sets a custom color. Should be a HEX, RGB or HSL value. No alpha channels. */
+      color: {
+        type: String
+      }
     },
 
-computed: {
+    computed: {
       iconType() {
         switch (this.icon){
           case 'sequence':
@@ -76,84 +72,10 @@ computed: {
         }
       },
 
-annotationBackgroundColor() {
-        switch (this.annotationColor){
-          case 1:
-            return 'rgba(249, 223, 0, 0.2)'
-          case 2:
-            return 'rgba(243, 161, 0, 0.2)'
-          case 3:
-            return 'rgba(183, 234, 128, 0.2)'
-          case 4:
-            return 'rgba(72, 228, 194, 0.2)'
-          case 5:
-            return 'rgba(72, 157, 255, 0.2)'
-          case 6:
-            return 'rgba(184, 119, 240, 0.2)'
-          case 7:
-            return 'rgba(253, 120, 253, 0.2)'
-          case 8:
-            return 'rgba(197, 148, 101, 0.2)'
-          case 9:
-            return 'rgba(133, 142, 159, 0.2)'
-          case 10:
-            return 'rgba(238, 84, 82, 0.2)'
-          case 11:
-            return 'rgba(34, 127, 211, 0.2)'
-          case 12:
-            return 'rgba(93, 175, 0, 0.2)'
-          case 13:
-            return 'rgba(164, 146, 122, 0.2)'
-          case 14:
-            return 'rgba(149, 152, 156, 0.2)'
-          case 15:
-            return 'rgba(215, 139, 33, 0.2)'
-          default:
-            return 'rgba(17, 17, 17, 0.2)'
-        }
-      },
-
-      annotationIconColor() {
-        switch (this.annotationColor){
-          case 1:
-            return '#F9DF00'
-          case 2:
-            return '#F3A100'
-          case 3:
-            return '#B7EA80'
-          case 4:
-            return '#48E4C2'
-          case 5:
-            return '#489DFF'
-          case 6:
-            return '#B877F0'
-          case 7:
-            return '#FD78FD'
-          case 8:
-            return '#C59465'
-          case 9:
-            return '#858E9F'
-          case 10:
-            return '#EE5452'
-          case 11:
-            return '#227FD3'
-          case 12:
-            return '#5DAF00'
-          case 13:
-            return '#A4927A'
-          case 14:
-            return '#95989C'
-          case 15:
-            return '#D78B21'
-          default:
-            return '#111111'
-        }
-      },
-
       iconColor() {
-        if (this.annotationColor){
-          return this.annotationIconColor
-        } else {
+        if (this.color){
+          return this.color
+        } else if(this.party) {
           switch (this.party){
             case 'client':
               return '#227FD3'
@@ -170,15 +92,8 @@ annotationBackgroundColor() {
             default:
               return '#C1C2C4'
           }
-        }
-      },
-
-      annotationStyles() {
-        if (this.annotationColor){
-          return {
-            'background-color': this.annotationBackgroundColor,
-            'color': this.annotationIconColor
-          }
+        } else {
+          return '#000'
         }
       }
     }
@@ -188,20 +103,32 @@ annotationBackgroundColor() {
 <style lang="scss" scoped>
 @import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
+
 .ecs-party-entry{
   position: relative;
   display: inline-flex;
   align-items: center;
+  z-index: 0;
+  overflow: hidden;
 
-  .icon{
-    flex-shrink: 0;
+  &-colored{
+    .icon,
+    > span{
+      filter: brightness(.55) contrast(1.5);
+    }
   }
 
-  &.annotation{
-    > span,
-    .icon{
-      filter: brightness(65%);
-    }
+  &-background{
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    background: currentColor;
+    opacity: .1;
+    filter: saturate(2);
+  }
+
+  .icon{
+    flex-shrink: 0;
   }
 
   &:after{
@@ -220,10 +147,6 @@ annotationBackgroundColor() {
     opacity: 1;
   }
 
-  &:not(.ecs-party-entry-background){
-    background: transparent !important;
-  }
-  
   &.client{
     color: $color-party-client-content;
   }
@@ -247,31 +170,5 @@ annotationBackgroundColor() {
   &.unaffiliated{
     color: $color-party-other-content;
   }
-
-  &-background{
-    &.client{
-      background-color: $color-party-client-background;
-    }
-
-    &.opposing{
-      background-color: $color-party-opposing-background;
-    }
-
-    &.joint{
-      background-color: $color-party-joint-background;
-    }
-
-    &.other{
-      background-color: $color-party-other-background;
-    }
-
-    &.court{
-      background-color: $color-party-court-background;
-    }
-    
-    &.unaffiliated{
-      background-color: $color-party-other-background;
-    }
-  }
 }
 </style>

package/src/stories/Changelog.stories.mdx

@@ -6,6 +6,13 @@ import { Meta } from '@storybook/addon-docs/blocks';
   Changelog
 </h1>
 
+## Version 2.0.0 (2 September 2022)
+
+### Breaking Changes
+
+- Refactored the EcsPartyEntry component to accept custom color values. Deprecated the old annotation color classes.
+
+
 ## Version 1.3.6 (29 August 2022)
 
 ### Fixes