@everchron/ec-shards 0.8.29 → 1.0.0

package/src/components/rating-favorability/rating-favorability.vue

@@ -18,25 +18,30 @@
     components: { EcsIcon, EcsSkeletonLoader },
 
     props: {
+      /** If set, the favorability icon will have a label as well. */
       label: {
         type: Boolean,
         default: false
       },
+      /** Sets the rating. */
       rating: {
         type: String,
         validator: v => ['good', 'mixed', 'bad', 'unrated', 'Good', 'Mixed', 'Bad', 'Unrated'].includes(v),
         required: true
       },
+      /** Determines the visual style of the favorability icon. `active` turns it into a colored filled icon, `subtle` into a colored icon with a border only, and `null` into deactivated state. */
       type: {
         type: String,
         validator: v => ['active', 'subtle', 'null', null].includes(v),
         default: null
       },
+      /** Turns the favorability icon into loading state. */
       loading: {
         type: Boolean,
         default: false
       },
-      disbaled: {
+      /** Disables the icon. */
+      disabled: {
         type: Boolean,
         default: false
       }
@@ -95,7 +100,7 @@
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-favorability{
@@ -107,7 +112,7 @@
     display: inline-block;
     width: 20px;
     height: 20px;
-    border-radius: 3px;
+    border-radius: $border-radius-small;
     border: 1px solid;
     position: relative;
   }
@@ -119,57 +124,57 @@
   }
 
   .label{
-    font-size: 13px;
+    font-size: $type-scale-3-font-size;
     margin-left: 8px;
     text-transform: capitalize;
   }
 
   .good{
-    border-color: $green-5;
+    border-color: $color-green-5;
 
     .icon{
       transform: rotate(180deg);
-      color: $green-9;
+      color: $color-green-9;
     }
 
     + .label{
-      color: $green-10;
+      color: $color-green-10;
     }
   }
 
   .mixed{
-    border-color: $yellow-5;
+    border-color: $color-yellow-5;
 
     .icon{
-      color: $yellow-9;
+      color: $color-yellow-9;
     }
 
     + .label{
-      color: $yellow-10;
+      color: $color-yellow-10;
     }
   }
 
   .bad{
-    border-color: $red-5;
+    border-color: $color-red-5;
 
     .icon{
-      color: $red-9;
+      color: $color-red-9;
     }
 
     + .label{
-      color: $red-10;
+      color: $color-red-10;
     }
   }
 
   .unrated{
-    border-color: $gray-3;
+    border-color: $color-gray-3;
 
     .icon{
-      color: $gray-7;
+      color: $color-gray-7;
     }
 
     + .label{
-      color: $gray-8;
+      color: $color-gray-8;
     }
   }
 
@@ -180,22 +185,22 @@
 
     .good{
       border: 1px solid transparent;
-      background: $green-8;
+      background: $color-green-8;
     }
 
     .mixed{
       border: 1px solid transparent;
-      background: $yellow-8;
+      background: $color-yellow-8;
     }
 
     .bad{
       border: 1px solid transparent;
-      background: $red-8;
+      background: $color-red-8;
     }
 
     .unrated{
       border: 1px solid transparent;
-      background: $gray-4;
+      background: $color-gray-4;
     }
   }
 

package/src/components/rating-star-read/rating-star-read.vue

@@ -12,18 +12,22 @@
     components: { EcsSkeletonLoader },
 
     props: {
+      /** Sets the star rating count.  */
       rating: {
         type: Number,
         default: 0
       },
+      /** Sets the maximum amount of stars. */
       maximum: {
         type: Number,
         default: 4
       },
+      /** Determines the size of the star rating. */
       size: {
         type: String,
         validator: v => ['sml', null].includes(v)
       },
+      /** Turns the rating into loading/fetching state. */
       loading: {
         type: Boolean,
         default: false
@@ -41,7 +45,7 @@
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 $star-read-width: 18px;

package/src/components/rating-star-write/rating-star-write.vue

@@ -13,14 +13,17 @@
 <script>
   export default {
     props: {
+      /** If set, the rating control will have an additional button for resetting the rating to unrated. */
       unrated: {
         type: Boolean,
         default: false
       },
+      /** Increases the size of the control. */
       large: {
         type: Boolean,
         default: false
       },
+      /** Sets the current star rating. */
       value: {
         type: [String, Number],
         default: 0
@@ -30,7 +33,7 @@
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-rating-form{

package/src/components/scroll-container/scroll-container.vue

@@ -12,6 +12,7 @@
     components: {  },
 
     props: {
+      /** Sets the maximum height of the scroll container. Can be any CSS value, such as px, %, or em. */
       height: {
         type: String,
         default: "300px"
@@ -36,7 +37,7 @@
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-scroll-container{
@@ -58,7 +59,7 @@
 
   &-border{
     border-radius: 6px;
-    border: 1px solid $gray-4;
+    border: 1px solid $color-gray-4;
   }
 }
 </style>

package/src/components/section/section.vue

@@ -8,6 +8,7 @@
     <h3 v-if="title" class="ecs-section-headline" :class="[headlineBold ? 'ecs-headline-section-bold' : 'ecs-headline-section', $slots.controls ? 'has-buttons' : '']">
       {{title}}
       <div v-if="$slots.controls" class="ecs-section-controls">
+        <!-- @slot Slot for controls or buttons that should render on the right of the headline. -->
         <slot name="controls"></slot>
       </div>
     </h3>
@@ -25,28 +26,35 @@
 <script>
   export default {
     props: {
+      /** Adds a headline to the section. */
       title: {
         type: String
       },
+      /** Determines the inner (left/right) padding of the content area, as well as the headline area. */
       indent: {
         type: String,
         validator: v => ['sml', 'md', null].includes(v),
         default: null
       },
+      /** Determines the inner (left/right) padding of the headline area. If set, this overwrites the value of `indent` for the headline area only. */
       headlineIndent: {
         type: String,
         validator: v => ['sml', 'md', null].includes(v),
         default: null
       },
+      /** Adds a separating border at the top. */
       borderTop: {
         type: Boolean
       },
+      /** Adds a separating border at the bottom. */
       borderBottom: {
         type: Boolean
       },
+      /** Shows the headline in bold text. */
       headlineBold: {
         type: Boolean
       },
+      /** Determines the inner (top/bottom) padding of the content area. */
       contentPadding: {
         type: String,
         validator: v => ['none', 'sml', 'md'].includes(v),
@@ -75,27 +83,27 @@
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-headline-section{
-  font-size: 14px;
-  color: $gray-10;
+  font-size: $type-scale-3-font-size;
+  color: $color-gray-10;
 
   &-bold{
-    font-size: 15px;
-    color: $gray-13;
+    font-size: $type-scale-4-font-size;
+    color: $color-gray-13;
     font-weight: 600;
   }
 }
 
 .ecs-section{
   &-border-top{
-    border-top: 1px solid rgba($gray-6, .25);
+    border-top: 1px solid rgba($color-gray-6, .25);
   }
 
   &-border-bottom{
-    border-bottom: 1px solid rgba($gray-6, .25);
+    border-bottom: 1px solid rgba($color-gray-6, .25);
   }
 
   &-headline{

package/src/components/segment/segment.vue

@@ -17,18 +17,25 @@ export default {
   components: { EcsIcon },
 
   props: {
+    /** Array of all the options objects:
+     * 
+     * `options: [ { label: 'Grapefruit', id: 'grapefruit', disabled: true }, { ... } ]`
+     */
     options: {
       type: Array,
       required: true
     },
+    /** Sets the name attribute radio group. */
     name: {
       type: String,
       required: true
     },
+    /** Renders the segment control inline - which means it will not adapt to the full available width of it's parent element. */
     inline: {
       type: Boolean,
       default: false
     },
+    /** Sets the currently active value. Must match an `option.id` from the `options` array. */
     value: {
       type: [String, Number],
       default: ''
@@ -50,7 +57,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-segments{
@@ -72,12 +79,12 @@ export default {
   }
 
   .ecs-segment{
-    border-radius: 7px;
-    color: $gray-10;
+    border-radius: $border-radius-large;
+    color: $color-gray-10;
     cursor: pointer;
     padding: 0 12px;
     text-align: center;
-    font-size: 13px;
+    font-size: $type-scale-3-font-size;
     transition: .2s;
     line-height: 24px;
     height: 24px;
@@ -102,8 +109,8 @@ export default {
 
     &:checked + .ecs-segment{
       background-color: #FFF;
-      color: $gray-13;
-      font-weight: 500;
+      color: $color-gray-13;
+      font-weight: $font-weight-medium;
       background: #FFFFFF;
       box-shadow: 0 0 0 1px rgba(0,0,0,0.04),
                   0 3px 8px 0 rgba(0,0,0,0.12),
@@ -115,7 +122,7 @@ export default {
     }
 
     &:disabled + .ecs-segment{
-      color: rgba($gray-13, .5);
+      color: rgba($color-gray-13, .5);
       opacity: .5;
       cursor: default;
     }

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{