@everchron/ec-shards 0.0.12

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

@@ -0,0 +1,234 @@
+<template>
+  <div class="ecs-favorability" :class="[typeClass, disabled ? 'disabled' : '']" @click="$emit('click', $event)">
+    <div class="ecs-favorability-button" :class="[css, loading ? 'loading' : '']" :title="labelText">
+      <ecs-icon :type="iconType" />
+    </div>
+    <span v-if="label" class="label" :class="loading ? 'loading' : ''">{{ labelText }}</span>
+
+    <ecs-skeleton-loader v-if="loading" type="rect" :width="20" :height="20" />
+    <ecs-skeleton-loader v-if="loading && label" type="single" :width="100" style="width:calc(100% - 30px)" />
+  </div>
+</template>
+
+<script>
+  import EcsIcon from '../icon/icon'
+  import EcsSkeletonLoader from '../skeleton-loader/skeleton-loader'
+
+  export default {
+    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
+      },
+      /** Disables the icon. */
+      disabled: {
+        type: Boolean,
+        default: false
+      }
+    },
+
+    computed: {
+      typeClass() {
+        if (this.type && this.type !== '')
+          return `ecs-favorability-${ this.type }`
+        return this.type
+      },
+
+      iconType() {
+        switch (this.rating){
+          case 'good':
+          case 'Good':
+            return 'fav-arrow'
+          case 'mixed':
+          case 'Mixed':
+            return 'fav-mixed'
+          case 'bad':
+          case 'Bad':
+            return 'fav-arrow'
+          case 'unrated':
+          case 'Unrated':
+            return 'fav-unrated'
+          default:
+            return 'fav-unrated'
+        }
+      },
+
+      css(){
+        return this.rating ? this.rating.toLowerCase() : ''
+      },
+
+      labelText() {
+        switch (this.rating){
+          case 'good':
+          case 'Good':
+            return 'Good'
+          case 'mixed':
+          case 'Mixed':
+            return 'Mixed'
+          case 'bad':
+          case 'Bad':
+            return 'Bad'
+          case 'unrated':
+          case 'Unrated':
+            return 'Unrated'
+          default:
+            return 'Unrated'
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-favorability{
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+
+  &-button{
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    border-radius: $border-radius-small;
+    border: 1px solid;
+    position: relative;
+  }
+
+  .icon{
+    position: absolute;
+    left: -6px;
+    top: -6px;
+  }
+
+  .label{
+    font-size: $type-scale-3-font-size;
+    margin-left: 8px;
+    text-transform: capitalize;
+  }
+
+  .good{
+    border-color: $color-green-5;
+
+    .icon{
+      transform: rotate(180deg);
+      color: $color-green-9;
+    }
+
+    + .label{
+      color: $color-green-10;
+    }
+  }
+
+  .mixed{
+    border-color: $color-yellow-5;
+
+    .icon{
+      color: $color-yellow-9;
+    }
+
+    + .label{
+      color: $color-yellow-10;
+    }
+  }
+
+  .bad{
+    border-color: $color-red-5;
+
+    .icon{
+      color: $color-red-9;
+    }
+
+    + .label{
+      color: $color-red-10;
+    }
+  }
+
+  .unrated{
+    border-color: $color-gray-3;
+
+    .icon{
+      color: $color-gray-7;
+    }
+
+    + .label{
+      color: $color-gray-8;
+    }
+  }
+
+  &-active{
+    .icon{
+      color: #FFF !important;
+    }
+
+    .good{
+      border: 1px solid transparent;
+      background: $color-green-8;
+    }
+
+    .mixed{
+      border: 1px solid transparent;
+      background: $color-yellow-8;
+    }
+
+    .bad{
+      border: 1px solid transparent;
+      background: $color-red-8;
+    }
+
+    .unrated{
+      border: 1px solid transparent;
+      background: $color-gray-4;
+    }
+  }
+
+  &-subtle{
+    .ecs-favorability-button{
+      border-color: #C5C8CC !important;
+    }
+
+    .icon{
+      color: #ADB5BD !important;
+    }
+  }
+
+  .ecs-skeleton{
+    position: absolute;
+  }
+
+  .skeleton-wrap{
+    left: 28px;
+  }
+
+  &.disabled{
+    opacity: .4;
+    cursor: not-allowed;
+  }
+}
+
+.loading{
+  opacity: 0;
+}
+</style>

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

@@ -0,0 +1,121 @@
+<template>
+  <div class="ecs-rating-read" :class="[sizeClass]">
+    <div v-if="!loading" class="ecs-stars-read" :data-maximum="maximum" :data-rating="rating"></div>
+    <ecs-skeleton-loader v-else type="single" :line-height="3" :width="100" />
+  </div>
+</template>
+
+<script>
+  import EcsSkeletonLoader from '../skeleton-loader/skeleton-loader'
+  
+  export default {
+    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
+      }
+    },
+
+    computed: {
+      sizeClass() {
+        if (this.size && this.size !== '')
+          return `ecs-rating-read-${this.size}`
+        return this.size
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+$star-read-width: 18px;
+
+.ecs-stars-read{
+  display: inline-block;
+  position: relative;
+  height: $star-read-width;
+  background-repeat: repeat-x;
+  background-image: svg-uri('<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><title>star-unrated</title><path d="M9.145 12.692L5.347 14.69l.726-4.23L3 7.465l4.246-.617L9.146 3l1.898 3.848 4.247.617-3.07 2.995.724 4.23-3.798-1.998z" stroke="#C3C8CF" fill="#CED2D8" fill-rule="evenodd"/></svg>');
+
+  &[data-maximum="5"]{
+    width: $star-read-width * 5;
+  }
+
+  &[data-maximum="4"]{
+    width: $star-read-width * 4;
+  }
+
+  &:before{
+    content: "";
+    position: absolute;
+    height: $star-read-width;
+    background-repeat: repeat-x;
+    top: 0;
+    left: 0;
+    background-image: svg-uri('<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><title>star-rated</title><path d="M9.145 12.692L5.347 14.69l.726-4.23L3 7.465l4.246-.617L9.146 3l1.898 3.848 4.247.617-3.07 2.995.724 4.23-3.798-1.998z" stroke="#1F76DE" fill="#3482DF" fill-rule="evenodd"/></svg>');
+  }
+
+  &[data-rating="1"]:before{
+    width: $star-read-width * 1;
+  }
+
+  &[data-rating="2"]:before{
+    width: $star-read-width * 2;
+  }
+
+  &[data-rating="3"]:before{
+    width: $star-read-width * 3;
+  }
+
+  &[data-rating="4"]:before{
+    width: $star-read-width * 4;
+  }
+
+  &[data-rating="5"]:before{
+    width: $star-read-width * 5;
+  }
+}
+
+.ecs-rating-read{
+  display: inline-block;
+  height: 20px;
+  width: 72px;
+  position: relative;
+
+  &-sml{
+    width: 50px;
+    height: 14px;
+
+    .ecs-stars-read{
+      transform: scale(.7);
+      transform-origin: top left;
+    }
+  }
+
+  .ecs-skeleton{
+    position: absolute;
+    top: 50%;
+    margin-top: -10px;
+  }
+}
+</style>

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

@@ -0,0 +1,126 @@
+<template>
+  <div class="ecs-rating-form" :class="[large ? `ecs-rating-form-lg` : '']">
+    <button v-if="unrated" class="ecs-rating-reset"></button>
+    <div class="ecs-rating-write">
+      <input type="radio" value="1" class="star" @click="$emit('click', $event)" :checked="value==1"><i></i>
+      <input type="radio" value="2" class="star" @click="$emit('click', $event)" :checked="value==2"><i></i>
+      <input type="radio" value="3" class="star" @click="$emit('click', $event)" :checked="value==3"><i></i>
+      <input type="radio" value="4" class="star" @click="$emit('click', $event)" :checked="value==4"><i></i>
+    </div>
+  </div>
+</template>
+
+<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
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-rating-form{
+  width: 105px;
+  height: 20px;
+
+  &-lg{
+    width: 120px;
+    height: 23px;
+
+    .ecs-rating-write,
+    .ecs-rating-reset{
+      transform: scale(1.15);
+      transform-origin: top left;
+    }
+  }
+}
+
+.ecs-rating-reset{
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  float: left;
+  margin-right: 5px;
+  transition: .2s;
+  opacity: .7;
+  cursor: pointer;
+  background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" style="background:#fff" viewBox="0 0 18 18"><g fill="none" fill-rule="evenodd" transform="translate(-1215 -543)"><polygon stroke="#AEB1B9" points="1224.145 555.692 1220.347 557.69 1221.073 553.46 1218 550.465 1222.246 549.848 1224.146 546 1226.044 549.848 1230.291 550.465 1227.221 553.46 1227.945 557.69 1224.147 555.692"/><g transform="rotate(-45 1281.298 -1191.488)"><rect width="15" height="1.5" x=".101" y="1.899" fill="#FFFFFF"/><rect width="15" height="1" x=".096" y=".904" fill="#AEB1B9"/></g></g></svg>');
+  background-size: contain;
+
+  &:hover{
+    opacity: 1;
+  }
+}
+
+.ecs-rating-write{
+  font-size:0;
+  white-space: nowrap;
+  display: inline-block;
+  width: 80px;
+  height: 20px;
+  overflow: hidden;
+  position: relative;
+  background-size: contain;
+  background-image: svg-uri('<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><title>star-unrated</title><path d="M9.145 12.692L5.347 14.69l.726-4.23L3 7.465l4.246-.617L9.146 3l1.898 3.848 4.247.617-3.07 2.995.724 4.23-3.798-1.998z" stroke="#C3C8CF" fill="#CED2D8" fill-rule="evenodd"/></svg>');
+
+  i{
+    opacity: 0;
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 25%;
+    z-index: 1;
+    background-size: contain;
+    background-image: svg-uri('<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><title>star-rated</title><path d="M9.145 12.692L5.347 14.69l.726-4.23L3 7.465l4.246-.617L9.146 3l1.898 3.848 4.247.617-3.07 2.995.724 4.23-3.798-1.998z" stroke="#1F76DE" fill="#3482DF" fill-rule="evenodd"/></svg>');
+  }
+
+  input{
+    -moz-appearance:none;
+    -webkit-appearance:none;
+    opacity: 0;
+    display:inline-block;
+    width: 25%;
+    height: 100%;
+    margin:0;
+    padding:0;
+    z-index: 2;
+    position: relative;
+    cursor: pointer;
+
+    &:hover + i,
+    &:checked + i{
+      opacity:1;
+    }
+  }
+
+  i ~ i{
+    width: 50%;
+  }
+
+  i ~ i ~ i{
+    width: 75%;
+  }
+
+  i ~ i ~ i ~ i{
+    width: 100%;
+  }
+}
+</style>

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

@@ -0,0 +1,65 @@
+<template>
+  <div class="ecs-scroll-container scrollbar scrollbar-sml"
+      :style="{ maxHeight: height, padding: padding }"
+      :class="[borderless ? '' : 'ecs-scroll-container-border',
+               hideShadows ? '' : 'ecs-scroll-container-shadows']">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+  export default {
+    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"
+      },
+      /** Hides the shadows at the top and bottom on scroll. */
+      hideShadows: {
+        type: Boolean,
+        default: false
+      },
+      /** Hides the outer border of the scroll container. */
+      borderless: {
+        type: Boolean,
+        default: false
+      },
+      /** Inner padding of the scroll container, in pixels. */
+      padding: {
+        type: String,
+        default: '8px'
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-scroll-container{
+  position: relative;
+  overflow: auto;
+
+  &-shadows{
+    background:
+      linear-gradient(#FFF 30%, rgba(255, 255, 255, 0)),
+      linear-gradient(rgba(255, 255, 255, 0), #FFF 70%) 0 100%,
+      linear-gradient( 180deg,rgba(110, 116, 146, 0.07) 0%,rgba(110, 116, 146, 0) 100%),
+      linear-gradient(180deg,rgba(110, 116, 146, 0) 0%,rgba(110, 116, 146, 0.07) 100%) 0 100%;
+
+    background-color: #FFF;
+    background-repeat: no-repeat;
+    background-size: 100% 40px, 100% 40px, 100% 6px, 100% 6px;
+    background-attachment: local, local, scroll, scroll;
+  }
+
+  &-border{
+    border-radius: 6px;
+    border: 1px solid $color-gray-4;
+  }
+}
+</style>