@everchron/ec-shards 0.8.27 → 1.0.0

package/src/components/pagination/pagination.vue

@@ -42,6 +42,7 @@
       </div>
     </div>
     <div>
+      <!-- @slot Slot for a sheet tab bar. -->
       <slot name="tabs"></slot>
     </div>
   </div>
@@ -62,18 +63,22 @@
     },
 
     props: {
+      /** Adds some padding around the pagination bar and makes it appear as if it's "floating" at the bottom of the index. Should never be used for table contents. */
       floating: {
         type: Boolean,
         default: false
       },
+      /** Briefly disables all controls while ongoing navigation. */
       loading: {
         type: Boolean,
         default: false
       },
+      /** The current page. */
       currentPage: {
         type: Number,
         required: true
       },
+      /** The total pages of the index. */
       totalPages: {
         type: Number,
         required: true
@@ -95,22 +100,22 @@
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-pagination{
-  background: $gray-2;
+  background: $color-gray-2;
   display: flex;
   align-items: center;
   padding: 0 4px;
   border-radius: 0 0 4px 4px;
-  box-shadow: 0 -1px 0 $gray-4;
+  box-shadow: 0 -1px 0 $color-gray-4;
   position: relative;
   z-index: 2;
 
   &-floating{
-    border-radius: 4px;
-    box-shadow: 0 0 0 1px rgba($gray-15, .05), 0 1px 3px 0 rgba($gray-15, 0.1); 
+    border-radius: $border-radius-small;
+    box-shadow: 0 0 0 1px rgba($color-gray-15, .05), 0 1px 3px 0 rgba($color-gray-15, 0.1); 
   }
 
   &-nav{
@@ -125,28 +130,28 @@
   }
 
   .ecs-toolbar-button-icon{
-    font-size: 12px;
+    font-size: $type-scale-2-font-size;
   }
 
   &-dropdown{
     display: flex;
     align-items: center;
-    font-size: 12px;
-    color: $gray-9;
+    font-size: $type-scale-2-font-size;
+    color: $color-gray-9;
 
     .total{
-      color: $gray-15;
+      color: $color-gray-15;
     }
 
     &-button{
       background: #FFF;
       display: flex;
       align-items: center;
-      border: 1px solid $gray-3;
+      border: 1px solid $color-gray-3;
       padding: 0 8px;
       height: 32px;
       transition: .2s;
-      border-radius: 3px;
+      border-radius: $border-radius-small;
       margin: 0 6px;
       cursor: pointer;
       position: relative;
@@ -160,14 +165,14 @@
       }
 
       &:hover{
-        border: 1px solid $gray-4;
-        box-shadow: 0 1px 1px rgba($gray-4, .25);
+        border: 1px solid $color-gray-4;
+        box-shadow: 0 1px 1px rgba($color-gray-4, .25);
       }
 
       &.active{
-        border: 1px solid $gray-5;
-        box-shadow: 0 1px 0 rgba($gray-2, .1) inset;
-        background: rgba($gray-5, .1);
+        border: 1px solid $color-gray-5;
+        box-shadow: 0 1px 0 rgba($color-gray-2, .1) inset;
+        background: rgba($color-gray-5, .1);
       }
     }
   }
@@ -179,8 +184,8 @@
     bottom: 34px;
     z-index: 1000;
     background-color: #fff;
-    box-shadow: 0 0 0 1px rgba($gray-15, .08), 0 1px 3px 0 rgba($gray-15, 0.15); 
-    border-radius: 4px;
+    box-shadow: 0 0 0 1px rgba($color-gray-15, .08), 0 1px 3px 0 rgba($color-gray-15, 0.15); 
+    border-radius: $border-radius-small;
     max-height: 30vh;
     overflow: auto;
   }

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

@@ -181,7 +181,7 @@
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-party-entry{
@@ -221,52 +221,52 @@
   }
 
   &.client{
-    color: $party-client-text;
+    color: $color-party-client-content;
   }
 
   &.opposing{
-    color: $party-opposition-text;
+    color: $color-party-opposing-content;
   }
 
   &.joint{
-    color: $party-joint-text;
+    color: $color-party-joint-content;
   }
 
   &.other{
-    color: $party-other-text;
+    color: $color-party-other-content;
   }
 
   &.court{
-    color: $party-court-text;
+    color: $color-party-court-content;
   }
 
   &.unaffiliated{
-    color: $party-other-text;
+    color: $color-party-other-content;
   }
 
   &-background{
     &.client{
-      background-color: $party-client-background;
+      background-color: $color-party-client-background;
     }
 
     &.opposing{
-      background-color: $party-opposition-background;
+      background-color: $color-party-opposing-background;
     }
 
     &.joint{
-      background-color: $party-joint-background;
+      background-color: $color-party-joint-background;
     }
 
     &.other{
-      background-color: $party-other-background;
+      background-color: $color-party-other-background;
     }
 
     &.court{
-      background-color: $party-court-background;
+      background-color: $color-party-court-background;
     }
 
     &.unaffiliated{
-      background-color: $party-other-background;
+      background-color: $color-party-other-background;
     }
   }
 }

package/src/components/popover-header/popover-header.vue

@@ -17,10 +17,12 @@
     components: { EcsIcon },
 
     props: {
+      /** Adds an icon to the popover header. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
       icon: {
         type: String,
         default: null
       },
+      /** Sets the title of the popover header. */
       title: {
         type: String,
         required: true
@@ -36,7 +38,7 @@
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-popover-header{
@@ -45,7 +47,7 @@
   justify-content: space-between;
   height: 50px;
   padding: 0 5px 0 14px;
-  border-bottom: 1px solid rgba($gray-6, .5);
+  border-bottom: 1px solid rgba($color-gray-6, .5);
 
   &-title{
     display: flex;
@@ -67,6 +69,6 @@
 }
 
 .ecs-headline-2{
-  font-size: 16px;
+  font-size: $type-scale-4-font-size;
 }
 </style>

package/src/components/popover-list-headline/popover-list-headline.vue

@@ -7,6 +7,7 @@
 <script>
   export default {
     props: {
+      /** Turns the popover list headline into a sticky headline. This means it will always stay fixed at the top of a scroll container until another popover list headline reaches the top. */
       sticky: {
         type: Boolean,
         default: false
@@ -16,13 +17,13 @@
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-popover-list{
   &-title{
-    color: $gray-8;
-    font-size: 13px;
+    color: $color-gray-8;
+    font-size: $type-scale-3-font-size;
     padding: 13px 12px;
   }
 
@@ -33,11 +34,11 @@
   &-sticky-title{
     position: sticky !important;
     top: 0;
-    background: $gray-2;
-    border-top: 1px solid $gray-3;
-    color: $gray-9;
-    font-size: 11px;
-    font-weight: 500;
+    background: $color-gray-2;
+    border-top: 1px solid $color-gray-3;
+    color: $color-gray-9;
+    font-size: $type-scale-2-font-size;
+    font-weight: $font-weight-medium;
     text-transform: uppercase;
     z-index: 1;
     padding: 7px 20px 8px 20px;

package/src/components/popover-list-item/popover-list-item.vue

@@ -87,78 +87,96 @@
     components: { EcsCheckbox, EcsRadiobutton, EcsSwitch, EcsSortbutton, EcsIcon, EcsFileIcon },
 
     props: {
+      /** Determines the type of popover list item.*/
       type: {
         type: String,
         validator: v => ['icon', 'checkbox', 'radiobutton', 'switch', 'sort', 'color', 'link', null].includes(v),
         default: null
       },
+      /** Adds a subtle suffix text to the right side of the list item. Should be very short. */
       suffix: {
         type: String,
         default: null
       },
+      /** Adds a subline to the list item, which acts as an additional explanation for the action. */
       help: {
         type: String,
         default: null
       },
+      /** The icon (only if the type is `icon`). The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
       icon: {
         type: String,
         default: null
       },
+      /** The color value (HEX, or RGB), if the list item is type `color`. */
       color: {
         type: String,
         default: null
       },
+      /** Adds a file icon. Should never be used together with `icon`. */
       fileIcon: {
         type: String,
         default: null
       },
+      /** On mouse over, an icon will appear on the right side of the list item. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
       hoverIcon: {
         type: String,
         default: null
       },
+      /** Sets any icon color to gray. */
       subtle: {
         type: Boolean,
         default: false
       },
+      /** Indicates a dangerous action. Adds a red background on mouse over and turn any icon color to red. */
       danger: {
         type: Boolean,
         default: false
       },
+      /** Disables the list item. */
       disabled: {
         type: Boolean,
         default: false
       },
+      /** Disables mouse over effects of the background. */
       noHover: {
         type: Boolean,
         default: false
       },
+      /** Indicates a selected item by adding a small checkmark to the right of the list item. Should not be used together with `hoverIcon`. */
       selected: {
         type: Boolean,
         default: false
       },
+      /** If the list item should be a link, this sets the href of the link. */
       href : {
         type: String,
         default: null
       },
+      /** Sets the value of checkbox/radiobutton, if these are being used. */
       value: {
         default: null,
         required: false,
         type: [Date, Number, String, Boolean]
       },
+      /** Sets the valueFalse of checkbox/radiobutton, if these are being used. */
       valueFalse: {
         default: null,
         required: false,
         type: [Date, Number, String, Boolean]
       },
+      /** Sets the valueTrue of checkbox/radiobutton, if these are being used. */
       valueTrue: {
         default: null,
         required: false,
         type: [Date, Number, String, Boolean]
       },
+      /** Turns the checkbox into indeterminate state, if the type checkbox is being used. */
       indeterminate: {
         default: false,
         type: Boolean
       },
+      /** Sets the sort status, if the type sort is being used. */
       sort: {
         type: String,
         validator: v => ['ascending', 'descending',  null].includes(v),
@@ -178,17 +196,17 @@
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-popover-list{
   &-item{
-    border-radius: 2px;
+    border-radius: $border-radius-x-small;
     position: relative;
     transition: .15s;
     display: block;
-    color: $gray-13;
-    font-size: 14px;
+    color: $color-gray-13;
+    font-size: $type-scale-3-font-size;
     padding: 12px;
     width: 100%;
     text-decoration: none;
@@ -200,7 +218,7 @@
 
     &:hover,
     &.active{
-      background: rgba($blue-8, .08);
+      background: rgba($color-blue-8, .08);
 
       .icon.hover-icon{
         opacity: 1;
@@ -216,11 +234,11 @@
       top: 5px;
       left: 5px;
       position: absolute;
-      color: $blue-8;
+      color: $color-blue-8;
     }
 
     &.subtle .icon{
-      color: $gray-8;
+      color: $color-gray-8;
     }
 
     &.has-icon{
@@ -248,15 +266,15 @@
 
     &.danger{
       &.has-icon .icon{
-        color: $gray-8;
+        color: $color-gray-8;
       }
 
       &:hover,
       &.active{
-        background: rgba($red-9, .06);
+        background: rgba($color-red-9, .06);
 
         .icon{
-          color: $red-9;
+          color: $color-red-9;
         }
       }
     }
@@ -294,17 +312,17 @@
 
     .after{
       opacity: .4;
-      font-size: 12px;
+      font-size: $type-scale-2-font-size;
       float: right;
 
       &-highlight{
         opacity: 1;
-        color: $blue-8;
+        color: $color-blue-8;
       }
     }
 
     .help{
-      font-size: 11px;
+      font-size: $type-scale-2-font-size;
       opacity: .6;
       display: block;
       margin-top: 4px;

package/src/components/progress/progress.vue

@@ -14,20 +14,25 @@
 <script>
   export default {
     props: {
+      /** The current progress value. */
       value: {
         type: Number,
         default: 0
       },
+      /** The maximum value of the progress bar. Not required if 100 (percentages). */
       max: {
         type: Number,
         default: null
       },
+      /** This should be set if there is something processing in the background, to indicate that the progress bar is still "doing something", even if the values does not change. */
       running: {
         type: Boolean
       },
+      /** Turns the progress bar grey. Should be used when a process has been cancelled after it was already processing. */
       cancelled: {
         type: Boolean
       },
+      /** Makes the progress bar an infinite loading bar. Should be used when there are no known percentage values. */
       infinite: {
         type: Boolean
       }
@@ -42,25 +47,25 @@
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-progress{
   height: 3px;
-  border-radius: 4px;
-  background: rgba($gray-8, .15);
+  border-radius: $border-radius-small;
+  background: rgba($color-gray-8, .15);
   overflow: hidden;
 
   &-bar{
     height: 3px;
-    border-radius: 4px;
-    background: $blue-8;
+    border-radius: $border-radius-small;
+    background: $color-blue-8;
     transition: .3s;
     position: relative;
   }
 
   &-cancelled{
-    background: rgba($gray-6, .6);
+    background: rgba($color-gray-6, .6);
   }
 
   &-running{

package/src/components/quicklink/quicklink.vue

@@ -111,7 +111,7 @@
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-quicklinks{
@@ -120,7 +120,7 @@
   &-link{
     display: flex;
     align-items: center;
-    border-radius: 4px;
+    border-radius: $border-radius-small;
     min-height: 32px;
     margin-bottom: 4px;
     transition: .2s;
@@ -130,7 +130,7 @@
     }
 
     .icon{
-      color: $gray-8;
+      color: $color-gray-8;
     }
 
     label{
@@ -157,17 +157,17 @@
     .filter-description{
       margin-left: 6px;
       line-height: 1em;
-      font-size: 13px;
+      font-size: $type-scale-3-font-size;
     }
 
     .static-label{
       width: 122px;
-      font-size: 13px;
+      font-size: $type-scale-3-font-size;
     }
 
     .filter-count{
-      font-size: 11px;
-      color: $gray-8;
+      font-size: $type-scale-2-font-size;
+      color: $color-gray-8;
       margin-left: auto;
     }
 
@@ -194,10 +194,10 @@
     }
 
     &.active{
-      background: $blue-2;
+      background: $color-blue-2;
 
       .filter-description{
-        font-weight: 500;
+        font-weight: $font-weight-medium;
       }
 
       .ecs-form-select{
@@ -209,7 +209,7 @@
       }
 
       .icon{
-        color: $blue-9;
+        color: $color-blue-9;
       }
     }
 

package/src/components/radiobutton/radiobutton.vue

@@ -36,23 +36,29 @@
     },
 
     props: {
+      /** Name attribute of the radiobutton. */
       name: {
         type: String
       },
+      /** Value of the radiobutton. */
         value: {
         default: true
       },
+      /** Determines of the radiobutton is required. */
       required: {
         type: Boolean,
         default: false
       },
+      /** Sets the radiobutton to checked. */
       checked: {
         type: [Boolean, String, Array]
       },
+      /** Turns the radiobutton into disabled state. */
       disabled: {
         type: Boolean,
         default: false
       },
+      /** Renders the radiobutton inline. */
       inline: {
         type: Boolean,
         default: false
@@ -109,7 +115,7 @@
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-form-check-input {
@@ -124,7 +130,7 @@
 
   &[type="radio"]:checked + label:after{
     border-radius: 100%;
-    background: $blue-10;
+    background: $color-blue-10;
     width: 6px;
     height: 6px;
     top: 6px;