@everchron/ec-shards 0.8.31 → 1.0.2

package/src/components/select/select.vue

@@ -13,20 +13,24 @@
 <script>
 export default {
   props: {
+    /** Determines the size of the select control. */
     size: {
       type: String,
-      validator: v => ['sml', 'xsml', 'null', null].includes(v),
+      validator: v => ['sml', 'md', 'lg', 'null', null].includes(v),
       default: null
     },
+    /** Determines the visual style: `null` renders in default form style, `subtle` with a grey transparent background, `invisible` without any background except on mouse over, and `naked` without any UI. */
     type: {
       type: String,
       validator: v => ['subtle', 'naked', 'invisible', 'null', null].includes(v),
       default: null
     },
+    /** Disables the input. */
     disabled: {
       type: Boolean,
       default: false
     },
+    /** Sets the required attribute. */
     required: {
       type: Boolean,
       default: false
@@ -50,12 +54,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-form-select{
-  border: $input-border-width solid rgba($gray-8, .4);
-  border-radius: 3px;
+  border: 1px solid rgba($color-gray-8, .4);
+  border-radius: $border-radius-small;
   overflow: hidden;
   position: relative;
   background: #FFF;
@@ -67,17 +71,17 @@ export default {
     content: "";
     position: absolute;
     top: 50%;
-    right: 12px;
+    right: $spacing-15;
     margin-top: -3px;
     opacity: .4;
     transition: .2s;
-    background: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" width="11" height="7" viewBox="0 0 11 7"><polyline fill="none" stroke="#{$gray-13}" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" points="2.081 2.033 5.603 5.052 9.145 2.016"/></svg>');
+    background: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" width="11" height="7" viewBox="0 0 11 7"><polyline fill="none" stroke="#{$color-gray-13}" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" points="2.081 2.033 5.603 5.052 9.145 2.016"/></svg>');
   }
 
   &:hover,
   &:focus{
-    border-color: darken(rgba($gray-8, .4), 4%);
-    box-shadow: 0 1px 1px rgba($gray-8, .1);
+    border-color: darken(rgba($color-gray-8, .4), 4%);
+    box-shadow: 0 1px 1px rgba($color-gray-8, .1);
 
     &:after{
       opacity: .5;
@@ -89,11 +93,11 @@ export default {
   }
 
   select{
-    padding: $input-padding-y $input-padding-x;
-    font-size: 13px;
-    font-family: $sf;
-    color: $gray-13;
-    line-height: $input-line-height;
+    padding: $spacing-5 + 1 $spacing-10;
+    font-family: $font-family-system;
+    font-size: $type-scale-3-font-size;
+    line-height: $type-scale-3-line-height;
+    color: $color-gray-13;
     width: calc(100% + 30px);
     border: none;
     box-shadow: none;
@@ -117,12 +121,13 @@ export default {
   }
 
   &-subtle{
-    background-color: rgba($gray-10, .15);
-    border: none;
+    background-color: rgba($color-gray-8, .15);
+    border: 1px solid rgba($color-gray-8, .2);
 
     &:hover,
     &:focus{
-      background-color: rgba($gray-10, .1);
+      background-color: rgba($color-gray-8, .17);
+      border: 1px solid $color-gray-4;
       box-shadow: none;
     }
   }
@@ -133,7 +138,7 @@ export default {
 
     &:hover,
     &:focus{
-      background-color: rgba($gray-10, .05);
+      background-color: rgba($color-gray-10, .05);
       box-shadow: none;
     }
   }
@@ -154,8 +159,8 @@ export default {
     }
 
     select{
-      color: darken($gray-8, 5%);
-      font-size: 12px;
+      color: darken($color-gray-8, 5%);
+      font-size: $type-scale-2-font-size;
       width: 100%;
       padding-right: 16px;
       direction: rtl;
@@ -164,21 +169,19 @@ export default {
 
   &-sml{
     &:after{
-      right: 10px;
+      right: $spacing-10;
     }
 
     select{
-      padding: $input-padding-y - 2 $input-padding-x - 2;
+      font-size: $type-scale-2-font-size;
+      line-height: $type-scale-2-line-height;
+      padding: $spacing-5 - 1 $spacing-10;
     }
   }
 
-  &-xsml{
-    &:after{
-      right: 8px;
-    }
-
+  &-lg{
     select{
-      padding: $input-padding-y - 4 $input-padding-x - 2;
+      padding: $spacing-15 - 3 $spacing-10;
     }
   }
 }

package/src/components/sequence-map/sequence-map.vue

@@ -6,7 +6,7 @@
 
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-sequence-map{
@@ -18,7 +18,7 @@
   &:after{
     content: "";
     height: 2px;
-    background: $blue-8;
+    background: $color-blue-8;
     position: absolute;
     bottom: 0;
     left: 0;

package/src/components/sequence-map-button/sequence-map-button.vue

@@ -18,22 +18,27 @@
     components: { EcsIcon },
 
     props: {
+      /** Index of the step. */
       step: {
         type: Number,
         required: true
       },
+      /** Indicates that this step is currently active. */
       active: {
         type: Boolean,
         default: false
       },
+      /** Indicates that this step has been completed already. */
       completed: {
         type: Boolean,
         default: false
       },
+      /** Turns the button into loading state to reflect there is something processing in this step. */
       loading: {
         type: Boolean,
         default: false
       },
+      /** Disables the step button. */
       disabled: {
         type: Boolean,
         default: false
@@ -43,16 +48,16 @@
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-sequence-map-button{
   display: inline-flex;
   align-items: center;
   padding: 10px 15px;
-  font-size: 14px;
-  font-weight: 500;
-  color: $gray-10;
+  font-size: $type-scale-3-font-size;
+  font-weight: $font-weight-medium;
+  color: $color-gray-10;
   transition: .2s;
   position: relative;
 
@@ -61,12 +66,12 @@
     height: 18px;
     position: relative;
     border-radius: 100%;
-    background: $gray-3;
-    color: $gray-10;
+    background: $color-gray-3;
+    color: $color-gray-10;
     font-weight: 600;
     text-align: center;
     line-height: 18px;
-    font-size: 11px;
+    font-size: $type-scale-2-font-size;
     display: inline-block;
     margin-right: 10px;
     transition: .2s;
@@ -74,7 +79,7 @@
 
   .step-indicator{
     height: 2px;
-    background: $blue-8;
+    background: $color-blue-8;
     position: absolute;
     bottom: 0;
     left: 0;
@@ -89,20 +94,20 @@
   }
 
   &:hover{
-    color: $gray-11;
+    color: $color-gray-11;
 
     .count{
-      color: $gray-11;
-      background: $gray-4;
+      color: $color-gray-11;
+      background: $color-gray-4;
     }
   }
 
   &.active{
-    color: $blue-10;
+    color: $color-blue-10;
 
     .count{
-      color: $blue-10;
-      background: $blue-3;
+      color: $color-blue-10;
+      background: $color-blue-3;
     }
 
     .step-indicator{

package/src/components/sidebar/sidebar.vue

@@ -2,10 +2,12 @@
   <aside class="ecs-sidebar" :class="[sizeClass, expandClass]" :style="height">
     <div class="ecs-sidebar-tabs">
       <ecs-tab-bar type="sidebar">
+        <!-- @slot Slot for the sidebar tab buttons. -->
         <slot name="tab-buttons"></slot>
       </ecs-tab-bar>
     </div>
     <ecs-tabs>
+      <!-- @slot Slot for the tabs itself. -->
       <slot name="tabs"></slot>
     </ecs-tabs>
   </aside>
@@ -21,24 +23,24 @@ export default {
     EcsTabs
   },
   props: {
-    floating: {
-      type: Boolean,
-      default: false
-    },
+    /** Expands the sidebar. */
     expanded: {
       type: Boolean,
       default: false
     },
+    /** Needs to be set in order to render the correct height in collapsed state. The `tabCount` should equal the amount of currently visible tab buttons. */
     tabCount: {
       type: Number,
       required: true
     },
+    /** Determines the width of the sidebar in expanded state. */
     size: {
       type: String,
       validator: v => ['sml', 'lg', 'md', 'xl', 'dynamic'].includes(v),
       default: 'md'
     },
   },
+
   computed: {
     sizeClass() {
       if (this.size && this.size !== '')
@@ -62,17 +64,17 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-sidebar{
   display: flex;
   margin: 5px;
   background: #FFFFFF;
-  box-shadow: 0 0 10px 0 rgba($gray-13 ,0.05),
-              0 0 0 1px rgba($gray-13 ,0.08),
-              0 1px 2px 0 rgba($gray-13 ,0.15);
-  border-radius: 3px;
+  box-shadow: 0 0 10px 0 rgba($color-gray-13 ,0.05),
+              0 0 0 1px rgba($color-gray-13 ,0.08),
+              0 1px 2px 0 rgba($color-gray-13 ,0.15);
+  border-radius: $border-radius-small;
   will-change: auto;
   transition: .3s cubic-bezier(0.1, 0.885, 0.32, 1);
   overflow: hidden;

package/src/components/sidebar-content/sidebar-content.vue

@@ -8,10 +8,12 @@
 <script>
 export default {
   props: {
+    /** Adds an inner padding to the content area. */
     indent: {
       type: Boolean,
       default: false
     },
+    /** Adds a half-transparent layer on top of the entire content area, that blocks any user interactions. */
     blockContent: {
       type: Boolean,
       default: false
@@ -21,7 +23,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-sidebar-content{

package/src/components/sidebar-footer/sidebar-footer.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="ecs-sidebar-footer" :class="[$slots.extension ? 'has-extension' : '']">
+    <!-- @slot Slot that can contain an EcsAlert, which will appear above the sidebar footer. -->
     <slot name="alert"></slot>
     <div v-if="$slots.extension" class="ecs-sidebar-footer-extension" :class="[condensed ? 'condensed' : '']">
+      <!-- @slot Slot for a secondary footer, which should be used for informational content only (eg. summary of selected elements, counts, sizes, etc.). -->
       <slot name="extension"></slot>
     </div>
     <div class="ecs-sidebar-footer-inner" :class="[condensed ? 'ecs-sidebar-footer-inner-condensed' : '']">
@@ -13,6 +15,7 @@
 <script>
 export default {
   props: {
+    /** Reduces the inner padding. */
     condensed: {
       type: Boolean,
       default: false
@@ -22,12 +25,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-sidebar-footer{
   background: #FFF;
-  border-top: 1px solid $gray-3;
+  border-top: 1px solid $color-gray-3;
 
   &-inner{
     padding: 20px;
@@ -41,12 +44,12 @@ export default {
   }
 
   &.has-extension{
-    border-top: 1px solid $gray-4;
+    border-top: 1px solid $color-gray-4;
   }
 
   &-extension{
     padding: 0 20px;
-    border-bottom: 1px solid $gray-3;
+    border-bottom: 1px solid $color-gray-3;
     position: relative;
 
     &.condensed{

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

@@ -5,16 +5,19 @@
         <slot></slot>
       </div>
       <div class="ecs-sidebar-header-controls">
+        <!-- @slot Slot for action buttons that should show up in the main header area at the right side. -->
         <slot name="primary-controls"></slot>
       </div>
     </div>
     <transition name="expansion">
       <div v-if="subHeaderExpanded && $slots.subheader" class="ecs-sidebar-header-row sub-header">
+        <!-- @slot Slot for a sub header, which can be expanded/collapsed. -->
         <slot name="subheader"></slot>
       </div>
     </transition>
     <transition name="expansion">
       <div v-if="tertiaryHeaderExpanded && $slots.tertiaryheader" class="ecs-sidebar-header-row sub-header">
+        <!-- @slot Slot for a second sub header, which can be expanded/collapsed. -->
         <slot name="tertiaryheader"></slot>
       </div>
     </transition>
@@ -24,10 +27,12 @@
 <script>
 export default {
   props: {
+    /** Determines if the sub header area should be expanded. */
     subHeaderExpanded: {
       type: Boolean,
       default: false
     },
+    /** Determines if the second sub header area should be expanded. */
     tertiaryHeaderExpanded: {
       type: Boolean,
       default: false
@@ -37,7 +42,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-sidebar-header{
@@ -63,7 +68,7 @@ export default {
     flex: 1;
     
     h2, h3{
-      font-size: 16px;
+      font-size: $type-scale-4-font-size;
     }
   }
 
@@ -94,11 +99,11 @@ export default {
 </style>
 
 <style lang="scss">
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 
 .ecs-sidebar-header{
   .divider{
-    background: $gray-4;
+    background: $color-gray-4;
     height: 20px;
     width: 1px;
     border-radius: 1px;

package/src/components/skeleton-loader/skeleton-loader.vue

@@ -9,19 +9,23 @@
 <script>
   export default {
     props: {
+      /** Determines the type of skeleton shape: `single` replicates a single line of text, `multi` a multi line text, and `rect` a generic rectangle shape. */
       type: {
         type: String,
         validator: v => ['single', 'multi', 'rect'].includes(v),
         default: 'single'
       },
+      /** Only used together with the `multi` type. Determines the amount of text lines. */
       count: {
         type: Number,
         default: 3
       },
+      /** Sets the width of the `single` type in percentage. Sets the width of the `rect` type in pixels. */
       width: {
         type: Number,
         default: 20
       },
+      /** Sets the height of the `single` type in percentage. Sets the width of the `rect` type in pixels. */
       height: {
         type: Number,
         default: 20
@@ -31,7 +35,7 @@
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 @keyframes skeleton{
@@ -41,8 +45,8 @@
 }
 
 .skeleton{
-  border-radius: 6px;
-  background: $gray-3;
+  border-radius: $border-radius-medium;
+  background: $color-gray-3;
   width: 100%;
   height: 6px;
   overflow: hidden;
@@ -50,7 +54,7 @@
   cursor: wait;
 
   &-rectangle{
-    border-radius: 4px;
+    border-radius: $border-radius-small;
   }
 
   &:after{

package/src/components/sortbutton/sortbutton.vue

@@ -18,15 +18,18 @@
     components: { EcsFormCheck },
 
     props: {
+      /** Disables the sort button. */
       disabled: {
         type: Boolean,
         default: false
       },
+      /** Determines the current state of the button. */
       sort: {
         type: String,
         validator: v => ['ascending', 'descending',  null].includes(v),
         default: null
       },
+      /** Renders the sort button as an inline element. */
       inline: {
         type: Boolean,
         default: false
@@ -44,7 +47,7 @@
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-sort{
@@ -55,7 +58,7 @@
     width: 18px;
     height: 18px;
     background: white;
-    border: 1px solid rgba($gray-8, .4);
+    border: 1px solid rgba($color-gray-8, .4);
     border-radius: 100%;
 
     &:before{
@@ -68,14 +71,14 @@
       transition: .3s;
       transform: scale(0);
       opacity: 0;
-      background: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path fill="#{$blue-10}" d="M8,9.86319448 L8,5 C8,4.44771525 8.44771525,4 9,4 C9.55228475,4 10,4.44771525 10,5 L10,9.82847734 L10.9137637,8.8729645 C10.919958,8.86648719 10.926242,8.86009627 10.9326139,8.85379361 C11.3124315,8.47810466 11.9248906,8.48145161 12.3005796,8.86126923 L12.3044121,8.8651439 C12.6897983,9.25476535 12.6897983,9.88198666 12.3044121,10.2716081 L9.69414788,12.9105581 C9.6915859,12.9131483 9.68900978,12.9157244 9.68641964,12.9182864 C9.29376709,13.3066707 8.66061156,13.3032107 8.2722272,12.9105581 L5.69558787,10.3056026 C5.31020166,9.91598111 5.31020166,9.2887598 5.69558787,8.89913835 L5.69942043,8.89526367 C5.7057706,8.88884371 5.71221038,8.88251301 5.71873787,8.87627342 C6.10483384,8.50720642 6.71701438,8.52101113 7.08608138,8.9071071 L8,9.86319448 Z"/></svg>');
+      background: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path fill="#{$color-blue-10}" d="M8,9.86319448 L8,5 C8,4.44771525 8.44771525,4 9,4 C9.55228475,4 10,4.44771525 10,5 L10,9.82847734 L10.9137637,8.8729645 C10.919958,8.86648719 10.926242,8.86009627 10.9326139,8.85379361 C11.3124315,8.47810466 11.9248906,8.48145161 12.3005796,8.86126923 L12.3044121,8.8651439 C12.6897983,9.25476535 12.6897983,9.88198666 12.3044121,10.2716081 L9.69414788,12.9105581 C9.6915859,12.9131483 9.68900978,12.9157244 9.68641964,12.9182864 C9.29376709,13.3066707 8.66061156,13.3032107 8.2722272,12.9105581 L5.69558787,10.3056026 C5.31020166,9.91598111 5.31020166,9.2887598 5.69558787,8.89913835 L5.69942043,8.89526367 C5.7057706,8.88884371 5.71221038,8.88251301 5.71873787,8.87627342 C6.10483384,8.50720642 6.71701438,8.52101113 7.08608138,8.9071071 L8,9.86319448 Z"/></svg>');
     }
   }
 
   &.active{
     .ecs-sort-box{
-      background: $blue-2;
-      border-color: $blue-5;
+      background: $color-blue-2;
+      border-color: $color-blue-5;
 
       &:before{
         opacity: 1;

package/src/components/states/states.vue

@@ -1,11 +1,11 @@
 <style lang="scss">
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-state{
   &-hover:hover,
   &-shadow{
-    background: rgba($gray-8, .06);
+    background: rgba($color-gray-8, .06);
 
     .ecs-fade-escape{
       &:before{
@@ -21,7 +21,7 @@
 
   &-active,
   &-active:hover{
-    background: rgba($blue-10, .05);
+    background: rgba($color-blue-10, .05);
 
     .ecs-fade-escape{
       &:before{
@@ -36,7 +36,7 @@
   }
 
   &-selected{
-    background: rgba($blue-10, .1);
+    background: rgba($color-blue-10, .1);
 
     .ecs-fade-escape{
       &:before{

package/src/components/sticker/sticker.vue

@@ -12,6 +12,7 @@
 <script>
   export default {
     props: {
+      /** Sets the sticker icon. */
       type: {
         type: String
       }
@@ -43,7 +44,7 @@
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 
 .ecs-spinner{
   cursor: wait;