@everchron/ec-shards 0.8.31 → 1.0.2

package/src/components/alert/alert.vue

@@ -12,7 +12,7 @@
         <slot></slot>
       </div>
     </div>
-    <button v-if="action" @click="$emit('action')" class="action">{{ action }}</button>
+    <button v-if="actionLabel" @click="$emit('action')" class="action">{{ actionLabel }}</button>
   </div>
 </template>
 
@@ -23,24 +23,31 @@
     components: { EcsIcon },
 
     props: {
+      /** The alert variant, which defines it's background color. */
       type: {
         type: String,
         validator: v => ['success', 'info', 'error', 'warning', 'important'].includes(v),
         default: 'info'
       },
+      /** When set to true, a close button is displayed which allows the user to dismiss the alert. */
       dismissable: {
         type: Boolean,
         default: false
       },
-      action: {
-        type: String
+      /** The label of an optional action button at the bottom of the alert. If this prop is passed, the button will appear and emit the @action event on click. */
+      actionLabel: {
+        type: String,
+        default: null
       },
+      /** If passed, a headline will appear at the top of the alert. */
       headline: {
         type: String
       },
+      /** If passed, an icon will appear. Only works together with the `headline` prop. 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 true, the alert will have no rounded corners and no margins. This is usefull when the alert directly touches other UI elements. */
       inset: {
         type: Boolean,
         default: false
@@ -73,13 +80,13 @@
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 
 .ecs-alert{
   position: relative;
-  margin-bottom: $alert-margin-bottom;
-  border-radius: 3px;
-  font-size: 13px;
+  margin-bottom: $spacing-30;
+  border-radius: $border-radius-small;
+  font-size: $type-scale-3-font-size;
   text-align: left;
 
   &-inset{
@@ -88,7 +95,7 @@
   }
 
   &-inner{
-    padding: $alert-padding-y $alert-padding-x;
+    padding: $spacing-20;
 
     > *:first-child{
       margin-top: 0;
@@ -104,56 +111,56 @@
   }
 
   &-info{
-    background-color: rgba($gray-4, .25);
-    color: rgba($gray-14, .8);
+    background-color: rgba($color-gray-4, .25);
+    color: rgba($color-gray-14, .8);
 
     a{
-      color: rgba($gray-14, .8);
+      color: rgba($color-gray-14, .8);
     }
   }
 
   &-error{
-    background-color: $red-3;
-    color: rgba($red-14, .8);
+    background-color: $color-red-3;
+    color: rgba($color-red-14, .8);
 
     a{
-      color: rgba($red-14, .8);
+      color: rgba($color-red-14, .8);
     }
   }
 
   &-success{
-    background-color: $green-3;
-    color: rgba($green-14, .8);
+    background-color: $color-green-3;
+    color: rgba($color-green-14, .8);
 
     a{
-      color: rgba($green-14, .8);
+      color: rgba($color-green-14, .8);
     }
   }
 
   &-warning{
-    background-color: $yellow-2;
-    color: rgba($yellow-14, .9);
+    background-color: $color-yellow-2;
+    color: rgba($color-yellow-14, .9);
 
     a{
-      color: rgba($yellow-14, .9);
+      color: rgba($color-yellow-14, .9);
     }
   }
 
   &-important{
-    background-color: $blue-3;
-    color: rgba($blue-15, .8);
+    background-color: $color-blue-3;
+    color: rgba($color-blue-15, .8);
 
     a{
-      color: rgba($blue-15, .8);
+      color: rgba($color-blue-15, .8);
     }
   }
 
   .action{
     display: block;
     text-align: center;
-    padding: 9px $alert-padding-x;
-    font-size: 14px;
-    font-weight: 500;
+    padding: 9px $spacing-20;
+    font-size: $type-scale-3-font-size;
+    font-weight: $font-weight-medium;
     color: currentColor;
     width: 100%;
     border-radius: 0 0 3px 3px;
@@ -192,7 +199,7 @@
   }
 
   &-headline{
-    font-weight: 500;
+    font-weight: $font-weight-medium;
     display: flex;
     align-items: center;
     filter: brightness(90%);
@@ -206,7 +213,7 @@
 
 .ecs-alert-dismissable {
   .ecs-alert-inner{
-    padding-right: ($alert-padding-x * 3);
+    padding-right: ( $spacing-20 * 3);
   }
 
   .close {
@@ -226,7 +233,7 @@
       top: 0;
       width: 20px;
       height: 20px;
-      border-radius: 4px;
+      border-radius: $border-radius-small;
       background: currentColor;
       opacity: .1;
       transition: .2s;

package/src/components/audio/audio.vue

@@ -8,22 +8,27 @@
 <script>
   export default {
     props: {
+      /** If true, the player will autoplay once it shows up in the DOM. */
       autoplay: {
         type: Boolean,
         default: false
       },
+      /** If true, the playback will loop. */
       loop: {
         type: Boolean,
         default: false
       },
+      /** Defines if the audio player should have any controls. */
       controls: {
         type: Boolean,
         default: true
       },
+      /** The absolute path to the MP3 source file. */
       mp3Source: {
         type: String,
         default: null
       },
+      /** The absolute path to the OGG source file. */
       oggSource: {
         type: String,
         default: null

package/src/components/avatar/avatar.vue

@@ -8,36 +8,48 @@
 export default {
   name: 'avatar',
   props: {
+    /** In some situations, an avatar should also reflect the party side (witness profiles, entities). To add a badge with a party color to the avatar, set the `party` attribute to one of the available options: */
     party: {
-      type: String
+      type: String,
+      validator: v => ['client', 'opposition', 'court', 'joint', 'other', null].includes(v),
+      default: null
     },
+    /** The full name of the User, eg. "Franklyn Meerkat" */
     name: {
       type: String,
       required: true
     },
+    /** Overwrite the generated Initials, if needed. */
     initials: {
       type: String
     },
+    /** Overwrite the background color (HEX), if needed. */
     backgroundColor: {
       type: String
     },
+    /** Overwrite the color (HEX), if needed. */
     color: {
       type: String
     },
+    /** Adds custom styles (plain CSS) to the avatar. */
     customStyle: {
       type: Object
     },
+    /** Width and height of the avatar, in pixels. */
     size: {
       type: Number,
       default: 36
     },
+    /** Absolute path to the users avatar image. */
     image: {
       type: String
     },
+    /** Defines if the avatar should be rendered as a circle, or square. */
     rounded: {
       type: Boolean,
       default: true
     },
+    /** How much the avatar background should be lightened up. */
     lighten: {
       type: Number,
       default: 80
@@ -145,7 +157,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .avatar{
@@ -170,23 +182,23 @@ export default {
   }
 
   &.party-client:before{
-    background: $party-client-background;
+    background: $color-party-client-background;
   }
 
   &.party-opposition:before{
-    background: $party-opposition-background;
+    background: $color-party-opposing-background;
   }
 
   &.party-court:before{
-    background: $party-court-background;
+    background: $color-party-court-background;
   }
 
   &.party-other:before{
-    background: $party-other-background;
+    background: $color-party-other-background;
   }
 
   &.party-joint:before{
-    background: $party-joint-background;
+    background: $color-party-joint-background;
   }
 }
 </style>

package/src/components/breadcrumb/breadcrumb.vue

@@ -7,6 +7,7 @@
 <script>
   export default {
     props: {
+      /** Sets the size of the breadcrumb (default is medium). */
       size: {
         type: String,
         validator: v => ['sml', null].includes(v),
@@ -24,7 +25,7 @@
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 
 .ecs-breadcrumb{
   display: flex;

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

@@ -24,14 +24,17 @@
     },
 
     props: {
+      /** The button type: `root` should always be used for the very first button inside a breadcrumb, `link` for all regular buttons that reflect a level in the navigation, and `more` for an optional button that escapes levels within the breadcrumb. */
       type: {
         type: String,
         validator: v => ['root', 'link', 'more'].includes(v),
         default: 'link'
       },
+      /** If passed, an icon will be part of the button. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
       icon: {
         type: String
       },
+      /** Defines if a button should visually appear to be clickable (:hover effect). Note, the button will still emit the click event, even if set to `false`. */
       clickable: {
         type: Boolean,
         default: false
@@ -49,7 +52,7 @@
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-breadcrumb{
@@ -58,11 +61,11 @@
     min-width: 30px;
     line-height: 30px;
     padding: 0 6px 0 18px;
-    background: $gray-3;
-    font-size: 12px;
+    background: $color-gray-3;
+    font-size: $type-scale-2-font-size;
     position: relative;
-    border-radius: 3px 0 0 3px;
-    color: $gray-10;
+    border-radius: $border-radius-small 0 0 $border-radius-small;
+    color: $color-gray-10;
     max-width: 13%;
     cursor: default;
 
@@ -82,18 +85,18 @@
       top: 0;
       z-index: 1;
       position: absolute;
-      background: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 8 30"><defs><path id="b" d="M1,0 L5.36674654,13.1002396 C5.71648277,14.1494483 5.71685231,15.8494431 5.36674654,16.8997604 L1,30 L0,30 L0,0 L1,0 Z"/><filter id="a" width="171.1%" height="106.7%" x="-17.8%" y="-3.3%" filterUnits="objectBoundingBox"><feOffset dx="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/></filter></defs><g fill="none" fill-rule="evenodd"><use fill="black" filter="url(#a)" xlink:href="#b"/><use fill="#{$gray-3}" xlink:href="#b"/></g></svg>');
+      background: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 8 30"><defs><path id="b" d="M1,0 L5.36674654,13.1002396 C5.71648277,14.1494483 5.71685231,15.8494431 5.36674654,16.8997604 L1,30 L0,30 L0,0 L1,0 Z"/><filter id="a" width="171.1%" height="106.7%" x="-17.8%" y="-3.3%" filterUnits="objectBoundingBox"><feOffset dx="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/></filter></defs><g fill="none" fill-rule="evenodd"><use fill="black" filter="url(#a)" xlink:href="#b"/><use fill="#{$color-gray-3}" xlink:href="#b"/></g></svg>');
     }
 
     &.clickable{
       cursor: pointer;
       
       &:hover{
-        background: $gray-4;
-        color: $gray-11;
+        background: $color-gray-4;
+        color: $color-gray-11;
 
         &:after{
-          background: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 8 30"><defs><path id="b" d="M1,0 L5.36674654,13.1002396 C5.71648277,14.1494483 5.71685231,15.8494431 5.36674654,16.8997604 L1,30 L0,30 L0,0 L1,0 Z"/><filter id="a" width="171.1%" height="106.7%" x="-17.8%" y="-3.3%" filterUnits="objectBoundingBox"><feOffset dx="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/></filter></defs><g fill="none" fill-rule="evenodd"><use fill="black" filter="url(#a)" xlink:href="#b"/><use fill="#{$gray-4}" xlink:href="#b"/></g></svg>');
+          background: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 8 30"><defs><path id="b" d="M1,0 L5.36674654,13.1002396 C5.71648277,14.1494483 5.71685231,15.8494431 5.36674654,16.8997604 L1,30 L0,30 L0,0 L1,0 Z"/><filter id="a" width="171.1%" height="106.7%" x="-17.8%" y="-3.3%" filterUnits="objectBoundingBox"><feOffset dx="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/></filter></defs><g fill="none" fill-rule="evenodd"><use fill="black" filter="url(#a)" xlink:href="#b"/><use fill="#{$color-gray-4}" xlink:href="#b"/></g></svg>');
         }
       }
     }
@@ -124,7 +127,7 @@
       min-width: 26px;
       line-height: 26px;
       padding: 0 6px 0 18px;
-      font-size: 11px;
+      font-size: $type-scale-2-font-size;
 
       &:after{
         width: 7px;

package/src/components/breadcrumb-title/breadcrumb-title.vue

@@ -12,7 +12,7 @@
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 
 .ecs-breadcrumb-title{
   flex: 1;