@everchron/ec-shards 7.0.1 → 7.0.2

package/package.json

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

package/src/components/dropzone/dropzone.vue

@@ -54,7 +54,7 @@
     },
 
     props: {
-      /** Determines the icon that should be shown inside the drop zone. */
+      /** Determines the icon that should be shown inside the drop zone. Possible states: `default`, `upload`, `viruscheck`. */
       state: {
         type: String,
         validator: v => ['default', 'upload', 'viruscheck'].includes(v),

package/src/components/excerpt-snippet/excerpt-snippet.vue

@@ -23,8 +23,9 @@
           <slot></slot>
         </div>
 
-        <div v-else-if="type == 'rectangle'" :style="'background-color:' + annotationBackgroundColor" class="ecs-excerpt-content-rectangle">
-          <span :style="'color:' + annotationTextColor">Rectangle Annotation</span>
+        <div v-else-if="type == 'rectangle'" class="ecs-excerpt-content-rectangle">
+          <span :style="'color:' + annotationColor">Rectangle Annotation</span>
+          <div :style="'background-color:' + annotationColor"></div>
         </div>
 
         <div v-else class="ecs-excerpt-content-regular">
@@ -74,9 +75,9 @@
       maxHeight: {
         type: String
       },
-      /** For type `rectangle` only: set the color of the rectangle annotation. Must be an annotation color index (1-9). */
+      /** Pass a HEX color value for the designation/annotation. */
       annotationColor: {
-        type: Number,
+        type: String,
         default: null
       },
       /** Turns the excerpt snippet into a skeleton loader. */
@@ -101,56 +102,6 @@
       maxHeightStyles() {
         if (this.maxHeight)
           return `max-height: ${this.maxHeight}; overflow: auto;`
-      },
-
-      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)'
-          default:
-            return 'rgba(249, 223, 0, 0.2)'
-        }
-      },
-
-      annotationTextColor() {
-        switch (this.annotationColor){
-          case 1:
-            return '#B57100'
-          case 2:
-            return '#A95A00'
-          case 3:
-            return '#429700'
-          case 4:
-            return '#06956E'
-          case 5:
-            return '#0E4BBE'
-          case 6:
-            return '#6B1ABA'
-          case 7:
-            return '#BE15BF'
-          case 8:
-            return '#7B3F1B'
-          case 9:
-            return '#364258'
-          default:
-            return '#B57100'
-        }
       }
     }
   }
@@ -240,9 +191,22 @@
 
   &-rectangle{
     text-align: center;
+    position: relative;
     font-size: $type-scale-3-font-size;
     padding: .5em;
-    border-radius: $border-radius-x-small;
+
+    > div{
+      position: absolute;
+      inset: 0;
+      border-radius: $border-radius-x-small;
+      opacity: .2;
+    }
+
+    > span{
+      filter: brightness(0.5);
+      position: relative;
+      z-index: 1;
+    }
   }
 }
 </style>

package/src/components/input/input.vue

@@ -130,12 +130,6 @@
           return `ecs-form-control-format-${this.format}`
         return this.format
       }
-    },
-
-    watch:{
-      disabled(){
-        console.log('w:disabled', this.disabled)
-      }
     }
   }
 </script>

package/src/stories/Changelog.stories.mdx

@@ -6,6 +6,12 @@ import { Meta } from '@storybook/addon-docs/blocks';
   Changelog
 </h1>
 
+## Version 7.0.1 (22 May 2023)
+
+### Fixes
+
+- Fixed color prop for EcsExcerptSnippet component
+
 ## Version 7.0.0 (15 May 2023)
 
 ### Features

package/src/stories/dropzone/dropzone.stories.js

@@ -47,7 +47,8 @@ export const dropzoneInitializing = () => ({
   components: { EcsDropzone },
   template: `
             <div style="width:100%; height: 600px">
-              <ecs-dropzone initializing />
+              <ecs-dropzone initializing>
+              </ecs-dropzone>
             </div>
             `,
 });
@@ -56,7 +57,9 @@ export const dropzoneProcessing = () => ({
   components: { EcsDropzone },
   template: `
             <div style="width:100%; height: 600px">
-              <ecs-dropzone loading />
+              <ecs-dropzone loading>
+                <template slot="hint">This is an additional <a href="#">hint text</a>.</template>
+              </ecs-dropzone>
             </div>
             `,
 });
@@ -65,7 +68,9 @@ export const dropzoneUploading = () => ({
   components: { EcsDropzone },
   template: `
             <div style="width:100%; height: 600px">
-              <ecs-dropzone state="upload" :progress="56" />
+              <ecs-dropzone state="upload" :progress="56">
+                <template slot="hint">This is an additional <a href="#">hint text</a>.</template>
+              </ecs-dropzone>
             </div>
             `,
 });

package/src/stories/excerpt-snippet/excerpt-snippet.stories.js

@@ -30,8 +30,8 @@ export const formattedText = () => ({
 export const rectangleAnnotation = () => ({
   components: { EcsExcerptSnippet },
   template: `<main>
-              <ecs-excerpt-snippet headline="Document Headline" type="rectangle" icon="document" :annotation-color="1" style="margin-bottom:16px" />
-              <ecs-excerpt-snippet size="sml" headline="Document Headline" type="rectangle" icon="document" :annotation-color="3" />
+              <ecs-excerpt-snippet headline="Document Headline" type="rectangle" icon="document" annotation-color="#F9DF00" style="margin-bottom:16px" />
+              <ecs-excerpt-snippet size="sml" headline="Document Headline" type="rectangle" icon="document" annotation-color="#F9DF00" />
             </main>`,
 });