@everchron/ec-shards 0.8.31 → 1.0.2

package/src/components/collapse/collapse.vue

@@ -30,46 +30,58 @@ export default {
   components: { EcsButton },
 
   props: {
+    /** Unique ID, is required to handle persist states. */
     id: {
       type: String,
       required: true
     },
+    /** The headline of the collapse control. */
     title: {
       type: String,
       required: true
     },
+    /** Determines the padding of the headline and content sections. */
     indent: {
       type: String,
       validator: v => ['sml', 'md', null].includes(v),
       default: null
     },
+    /** Determines the padding of the headline section alone. */
     headlineIndent: {
       type: String,
       validator: v => ['sml', 'md', null].includes(v),
       default: null
     },
+    /** Displays a border above the headline section. */
     borderTop: {
       type: Boolean,
     },
+    /** Displays a border below the content section. */
     borderBottom: {
       type: Boolean,
     },
+    /** Makes the headline to render in font-weight bold. */
     headlineBold: {
       type: Boolean
     },
+    /** Determines the initial state of the control. If set to `true`, the collapse is expanded on mount. */
     visible: {
       type: Boolean
     },
+    /** If set, a small (-) remove button is rendered in the headline section. */
     removable: {
       type: Boolean
     },
+    /** Sets the tooltip title of the remove button. */
     removableTooltip: {
       type: String
     },
+    /** Saves the state of the collapse control in localstorage and reads the state on next mount, to automatically set it to expanded or collapsed. */
     persist: {
       type: Boolean,
       default: true
     },
+    /** Sets the top and bottom padding of the content section. */
     contentPadding: {
       type: String,
       validator: v => ['none', 'sml', 'md'].includes(v),
@@ -141,27 +153,27 @@ export default {
 </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-collapsable{
   &-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);
   }
 
   .wrap{
@@ -192,7 +204,7 @@ export default {
       position: absolute;
       width: 18px;
       height: 18px;
-      background: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path fill="#{$gray-8}" d="M881.010919,595 L886.687546,588.842677 C886.864064,588.651212 886.864064,588.356318 886.687546,588.164852 L886.00296,587.422296 C885.815784,587.219269 885.499462,587.20642 885.296436,587.393597 C885.286526,587.402733 885.276989,587.412266 885.26785,587.422173 L881.010919,592.036499 L876.73215,587.398487 C876.544907,587.195522 876.228581,587.182778 876.025617,587.370022 C876.015709,587.379161 876.006176,587.388698 875.997039,587.398608 L875.312454,588.141164 C875.135936,588.33263 875.135936,588.627524 875.312454,588.818989 L881.010919,595 Z" transform="translate(-872 -582)"/></svg>');
+      background: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path fill="#{$color-gray-8}" d="M881.010919,595 L886.687546,588.842677 C886.864064,588.651212 886.864064,588.356318 886.687546,588.164852 L886.00296,587.422296 C885.815784,587.219269 885.499462,587.20642 885.296436,587.393597 C885.286526,587.402733 885.276989,587.412266 885.26785,587.422173 L881.010919,592.036499 L876.73215,587.398487 C876.544907,587.195522 876.228581,587.182778 876.025617,587.370022 C876.015709,587.379161 876.006176,587.388698 875.997039,587.398608 L875.312454,588.141164 C875.135936,588.33263 875.135936,588.627524 875.312454,588.818989 L881.010919,595 Z" transform="translate(-872 -582)"/></svg>');
       right: 0;
       top: 50%;
       margin-top: -9px;

package/src/components/collection-control/collection-control.vue

@@ -31,33 +31,41 @@
   export default {
     components: { EcsIcon },
     props: {
+      /** Icon representing the type of selection. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
       icon: {
         type: String
       },
+      /** The size of the collection control. */
       size: {
         type: String,
         validator: v => ['md', 'lg'].includes(v),
         default: 'lg'
       },
+      /** If set to true, the control will appear expanded by default. */
       visible: {
         type: Boolean,
         default: false
       },
+      /** The label that describes the type of selected objects. E.g. "Users: " */
       label: {
         type: String
       },
+      /** Option to disable the outer borders of the control. */
       noBorder: {
         type: Boolean,
         default: false
       },
+      /** Array of the currently selected objects. Must contain `name` and `value` for each object. */
       collection: {
         type: Array,
         required: true
       },
+      /** Optional maximum height of the object list in pixels. If the list exceeds the maximum height, a scrollbar appears. */
       maxHeight: {
         type: Number,
         default: null
       },
+      /** Makes the control non-interactive and removes all checkboxes from the list items. */
       nonInteractive: {
         type: Boolean,
         default: false
@@ -105,14 +113,14 @@
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-collection-control{
-  border-radius: 4px;
+  border-radius: $border-radius-small;
 
   &.bordered{
-    border: 1px solid $gray-4;
+    border: 1px solid $color-gray-4;
     transition: .2s;
 
     &.collapsed:hover{
@@ -145,7 +153,7 @@
   &-header{
     display: flex;
     align-items: center;
-    font-size: 14px;
+    font-size: $type-scale-3-font-size;
     line-height: 20px;
     position: relative;
     transition: .2s;
@@ -156,7 +164,7 @@
     }
 
     &:not(.collapsed){
-      box-shadow: 0 1px 0 0 $gray-3;
+      box-shadow: 0 1px 0 0 $color-gray-3;
     }
 
     .icon{
@@ -164,13 +172,13 @@
     }
 
     .description{
-      color: $gray-10;
+      color: $color-gray-10;
       margin-right: 4px;
       white-space: nowrap;
     }
 
     .collection{
-      color: $gray-15;
+      color: $color-gray-15;
       white-space: nowrap;
       flex: 1;
       overflow: hidden;
@@ -188,7 +196,7 @@
       position: absolute;
       width: 18px;
       height: 18px;
-      background: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path fill="#{$gray-8}" d="M881.010919,595 L886.687546,588.842677 C886.864064,588.651212 886.864064,588.356318 886.687546,588.164852 L886.00296,587.422296 C885.815784,587.219269 885.499462,587.20642 885.296436,587.393597 C885.286526,587.402733 885.276989,587.412266 885.26785,587.422173 L881.010919,592.036499 L876.73215,587.398487 C876.544907,587.195522 876.228581,587.182778 876.025617,587.370022 C876.015709,587.379161 876.006176,587.388698 875.997039,587.398608 L875.312454,588.141164 C875.135936,588.33263 875.135936,588.627524 875.312454,588.818989 L881.010919,595 Z" transform="translate(-872 -582)"/></svg>');
+      background: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path fill="#{$color-gray-8}" d="M881.010919,595 L886.687546,588.842677 C886.864064,588.651212 886.864064,588.356318 886.687546,588.164852 L886.00296,587.422296 C885.815784,587.219269 885.499462,587.20642 885.296436,587.393597 C885.286526,587.402733 885.276989,587.412266 885.26785,587.422173 L881.010919,592.036499 L876.73215,587.398487 C876.544907,587.195522 876.228581,587.182778 876.025617,587.370022 C876.015709,587.379161 876.006176,587.388698 875.997039,587.398608 L875.312454,588.141164 C875.135936,588.33263 875.135936,588.627524 875.312454,588.818989 L881.010919,595 Z" transform="translate(-872 -582)"/></svg>');
       right: 0;
       top: 50%;
       margin-top: -9px;

package/src/components/comment/comment.vue

@@ -6,21 +6,24 @@
         <div class="ecs-comment-meta">
           <span class="ecs-comment-meta-name">{{userName}}</span>
           <span class="ecs-comment-meta-time">
+            <!-- @slot Slot for the comment date/time. -->
             <slot name="commentdate"></slot>
           </span>
         </div>
       </div>
       <div v-if="canEdit" class="ecs-comment-actions">
-        <ecs-button @click="$emit('edit', $event)" type="secondary" size="xsml" icon="edit" icon-only title="Edit Comment" />
-        <ecs-button @click="$emit('delete', $event)" type="danger" size="xsml" icon="delete" icon-only title="Delete Comment" />
+        <ecs-button @click="$emit('edit', $event)" type="secondary" size="sml" icon="edit" icon-only title="Edit Comment" />
+        <ecs-button @click="$emit('delete', $event)" type="danger" size="sml" icon="delete" icon-only title="Delete Comment" />
       </div>
     </div>
 
     <ecs-formatted v-if="!$slots.editform" class="ecs-comment-body">
+      <!-- @slot Comment text (rich text). -->
       <slot></slot>
     </ecs-formatted>
 
     <div v-else class="ecs-comment-edit">
+      <!-- @slot Contains the form to edit the comment. When this slot is not empty, the form will show up instead of the comment text. -->
       <slot name="editform"></slot>
     </div>
   </div>
@@ -34,14 +37,17 @@
   export default {
     components: { EcsAvatar, EcsButton, EcsFormatted },
     props: {
+      /** Name of the user that is the comment author. */
       userName: {
         type: String,
         required: true
       },
+      /** Avatar image of the user that is the comment author. */
       userImage: {
         type: String,
         default: null
       },
+      /** Determines if controls to edit or delete the comment should be available. */
       canEdit: {
         type: Boolean,
         default: false
@@ -52,7 +58,7 @@
 
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-comment{
@@ -64,17 +70,17 @@
   }
 
   &-from{
-    font-size: 11px;
-    color: $gray-8;
+    font-size: $type-scale-2-font-size;
+    color: $color-gray-8;
   }
 
   &-autor{
     display: flex;
     text-decoration: none;
-    color: $blue-10;
+    color: $color-blue-10;
 
     &:hover{
-      color: darken($blue-10, 5%);
+      color: darken($color-blue-10, 5%);
     }
   }
 
@@ -82,14 +88,14 @@
     padding-left: 10px;
 
     &-name{
-      font-size: 13px;
-      font-weight: 500;
+      font-size: $type-scale-3-font-size;
+      font-weight: $font-weight-medium;
       display: block;
     }
 
     &-time{
-      font-size: 11px;
-      color: $gray-8;
+      font-size: $type-scale-2-font-size;
+      color: $color-gray-8;
     }
   }
 

package/src/components/comment-form/comment-form.vue

@@ -15,6 +15,7 @@
   export default {
     components: { EcsTiptap, EcsButton },
     props: {
+      /** If true, a Cancel button will be available, and the label of the Post button will change to "Save Changes". */
       edit: {
         type: Boolean,
         default: false
@@ -36,7 +37,7 @@
 </script>
 
 <style lang="scss">
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-comment-form{
@@ -44,22 +45,22 @@
   flex-direction: column;
   width: 100%;
   background-color: #FFF;
-  border-radius: 3px;
+  border-radius: $border-radius-small;
   transition: .2s;
   position: relative;
 
   .ProseMirror{
     flex: 1;
     overflow: auto;
-    border-radius: 4px 4px 0 0;
+    border-radius: $border-radius-small 4px 0 0;
     transition: .2s;
-    border: $input-border-width solid #CED2D8;
+    border: 1px solid #CED2D8;
     max-height: 300px;
     overflow: auto;
 
     &-focused{
-      border-color: $blue-4;
-      box-shadow: 0 0 0 2px $blue-2;
+      border-color: $color-blue-4;
+      box-shadow: 0 0 0 2px $color-blue-2;
     }
   }
 

package/src/components/data-card/data-card.vue

@@ -11,6 +11,7 @@
               ]">
 
     <div v-if="control && $slots.control" class="control">
+      <!-- @slot Slot for adding a control, such as a checkbox or radiobutton. -->
       <slot name="control"></slot>
     </div>
 
@@ -25,6 +26,7 @@
           </div>
           <ecs-skeleton-loader v-if="loading" type="single" :width="skeletonWidth(30, 70)" />
           <div v-if="$slots.actions" class="ecs-data-card-actions">
+            <!-- @slot Slot for adding action buttons. -->
             <slot name="actions"></slot>
           </div>
           <ecs-button-table @click="isExpanded = !isExpanded" v-if="expandable" pale chevron size="sml" :active="isExpanded" :icon="expandIcon" :label="expandLabel" class="expand-button" />
@@ -32,12 +34,14 @@
       </div>
       <div v-if="$slots.meta" class="ecs-data-card-row">
         <div class="ecs-data-card-row-inner">
+          <!-- @slot Slot for the second row of content inside the card. -->
           <slot name="meta"></slot>
           <ecs-skeleton-loader v-if="loading" type="single" :width="skeletonWidth(15, 30)" />
         </div>
       </div>
       <div v-if="$slots.expand" v-show="isExpanded" class="ecs-data-card-expand">
         <div class="ecs-data-card-expand-inner">
+          <!-- @slot Slot for expandable content. -->
           <slot name="expand"></slot>
         </div>
       </div>
@@ -54,47 +58,59 @@
     components: { EcsIcon, EcsSkeletonLoader, EcsButtonTable },
 
     props: {
+      /** If passed, an icon will be displayed in the data card. The icon prop must match a specific icons name. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
       icon: {
         type: String,
       },
+      /** Customize the icon color. Accepts HEX, RGB, and shard color variables. */
       iconColor: {
         type: String,
         default: '#858E9E'
       },
+      /** Determines if the card should have a :hover effect (it should, if it's clickable). */
       hover: {
         type: Boolean
       },
+      /** Sets the background color of the card to blue, which indicates an active/selected state. */
       active: {
         type: Boolean,
         default: false
       },
+      /** If set, the content of the card will render with 50% opacity, which indicates non-interactive or disabled states. */
       shadow: {
         type: Boolean,
         default: false
       },
+      /** When true, the card content will shift to the right, and make place for a select control (checkbox, radio, or switch). Note: the control component itself needs to be added via the `control` slot. */
       control: {
         type: Boolean,
         default: false
       },
+      /** Turns the card into a skeleton loader. Used when the card content is not yet available. */
       loading: {
         type: Boolean,
         default: false
       },
+      /** Adds a spinning animation to the `icon`. Note, this prop should only be used when the icon itself is set to `loading`. */
       spinning: {
         type: Boolean,
         default: false
       },
+      /** Adds an expand button to the card. Requires the `expand` slot to contain any expandable contents. */
       expandable: {
         type: Boolean,
         default: false
       },
+      /** Sets the current expanded state. */
       expanded: {
         type: Boolean,
         default: false
       },
+      /** Sets the icon of the expand button. The prop value must match a specific icons name. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
       expandIcon: {
         type: String
       },
+      /** Sets the label of the expand button. */
       expandLabel: {
         type: String
       }
@@ -115,7 +131,7 @@
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-data-card{
@@ -124,7 +140,7 @@
   transition: .1s;
   position: relative;
   padding: 16px 20px;
-  font-size: 14px;
+  font-size: $type-scale-3-font-size;
   min-height: 46px;
   user-select: none;
 
@@ -140,7 +156,7 @@
     left: 20px;
     right: 20px;
     bottom: 0;
-    background: rgba($gray-8, .15);
+    background: rgba($color-gray-8, .15);
   }
 
   &:before{
@@ -155,11 +171,11 @@
 
   &-hover:hover{
     cursor: pointer;
-    background: rgba($gray-8, .04);
+    background: rgba($color-gray-8, .04);
   }
 
   &.expanded{
-    background: $gray-1;
+    background: $color-gray-1;
   }
 
   &.active{
@@ -238,31 +254,31 @@
 
     &-inner{
       background: #FFF;
-      border: 1px solid $gray-3;
-      border-radius: 4px;
+      border: 1px solid $color-gray-3;
+      border-radius: $border-radius-small;
     }
   }
 
   .small{
-    font-size: 12px;
+    font-size: $type-scale-2-font-size;
   }
 
   .strong{
-    font-weight: 500;
+    font-weight: $font-weight-medium;
   }
 
   .subtle{
-    font-size: 12px;
-    color: $gray-8;
+    font-size: $type-scale-2-font-size;
+    color: $color-gray-8;
   }
 
   .subtle-medium{
-    color: $gray-10;
+    color: $color-gray-10;
   }
 
   .mono{
-    font-family: $mono;
-    font-size: 12px;
+    font-family: $font-family-monospace;
+    font-size: $type-scale-2-font-size;
   }
 
   .escape{
@@ -274,12 +290,12 @@
 
   .pill{
     background: #EFEFF1;
-    border-radius: 2px;
+    border-radius: $border-radius-x-small;
     padding: 3px 5px;
-    font-weight: 500;
+    font-weight: $font-weight-medium;
     margin: 0 3px 2px 0;
     display: inline-block;
-    color: $gray-10;
+    color: $color-gray-10;
   }
 
   .ecs-party-entry{
@@ -287,11 +303,11 @@
   }
 
   .citation{
-    font-family: $mono;
-    font-size: 10px;
+    font-family: $font-family-monospace;
+    font-size: $type-scale-1-font-size;
     letter-spacing: -.03em;
     white-space: pre-wrap;
-    color: $gray-10;
+    color: $color-gray-10;
   }
 
   .expand-button{

package/src/components/data-card-list/data-card-list.vue

@@ -5,7 +5,7 @@
 </template>
 
 <style lang="scss">
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-collapsable-content,
@@ -30,11 +30,11 @@
 .ecs-data-card-list{
   > a{
     display: block;
-    color: $gray-13;
+    color: $color-gray-13;
 
     &:last-child .ecs-data-card:after{
       display: none;
     }
   }
 }
-</style>
+</style>