@everchron/ec-shards 0.0.12

package/src/components/legend-item/legend-item.vue

@@ -0,0 +1,176 @@
+<template>
+  <ecs-flex-row
+    class="ecs-legend-item"
+    :gap="8"
+    :class="[
+      sizeClass,
+      hover ? 'hover' : '',
+      highlight ? 'highlighted' : ''
+    ]">
+    <div class="ecs-legend-item-color" :class="type" :style="{backgroundColor: validColor}" />
+    <div class="ecs-legend-item-label">{{ label }}</div>
+    <div v-if="count" class="ecs-legend-item-count">{{ count }}</div>
+    <div v-if="percentage" class="ecs-legend-item-percentage">{{ percentageLabel }}</div>
+    <div v-if="highlight || hover" class="ecs-legend-item-highlight" :style="{backgroundColor: validColor}" />
+  </ecs-flex-row>
+</template>
+
+<script>
+import EcsFlexRow from '../flex/flex-row'
+
+export default {
+  components: {
+    EcsFlexRow
+  },
+
+  props: {
+    /** Determines the type of legend message. */
+    type: {
+      type: String,
+      validator: v => ['fill', 'line'].includes(v),
+      default: 'fill'
+    },
+    /** Determines the size of the legend item. */
+    size: {
+      type: String,
+      validator: v => ['sml', 'md'].includes(v),
+      default: 'md'
+    },
+    /** The main legend item label. */
+    label: {
+      type: String,
+      required: true
+    },
+    /** Determines the color value of the legend item. This should exactly match the color this item represent in data visualization. */
+    color: {
+      type: String,
+      required: true
+    },
+    /** Displays a count next to the label. */
+    count: {
+      type: [String, Number]
+    },
+    /** Displays a percentage value next to the count/label. */
+    percentage: {
+      type: [String, Number]
+    },
+    /** Adds a background color to highlight the legend item. */
+    highlight: {
+      type: Boolean,
+      default: false
+    },
+    /** Determines if the legend item should have a hover state. */
+    hover: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  computed: {
+    validColor(){
+      if(CSS.supports('color', this.color)){
+        return this.color
+      } else {
+        console.warn('The passed color value is not a valid color.')
+        return this.color
+      }
+    },
+
+    percentageLabel() {
+      if(Number.isInteger(this.percentage)){
+        return this.percentage + '%'
+      } else {
+        return this.percentage
+      }
+    },
+
+    sizeClass(){
+      return `ecs-legend-item-${this.size}`
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-legend-item{
+  color: $color-gray-15;
+  border-radius: $border-radius-small;
+  position: relative;
+  z-index: 1;
+  cursor: default;
+
+  &-sml{
+    font-size: $type-scale-2-font-size;
+    line-height: $type-scale-2-line-height;
+    padding: $spacing-5;
+  }
+
+  &-md{
+    font-size: $type-scale-3-font-size;
+    line-height: $type-scale-3-line-height;
+    padding: $spacing-10;
+  }
+
+  &-color{
+    &.fill{
+      width: $spacing-15;
+      height: $spacing-15;
+      border-radius: 100%;
+    }
+
+    &.line{
+      width: $spacing-20;
+      height: 3px;
+      border-radius: 1px;
+    }
+  }
+
+  &-label{
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &-count{
+    font-weight: $font-weight-medium;
+    text-align: right;
+  }
+  
+  &-percentage{
+    color: $color-gray-10;
+    text-align: right;
+    min-width: 48px;
+  }
+
+  &-highlight{
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    transform: scale(.6);
+    transition: opacity .1s ease-in-out, transform .3s cubic-bezier(0.3, 0.76, 0.27, 1);
+    border-radius: $border-radius-small;
+    z-index: -1;
+    pointer-events: none;
+  }
+
+  &.hover{
+    cursor: pointer;
+
+    &:hover .ecs-legend-item-highlight{
+      opacity: .1;
+      transform: scale(1);
+    }
+  }
+
+  &.highlighted{
+    .ecs-legend-item-highlight{
+      opacity: .1;
+      transform: scale(1);
+    }
+  }
+}
+</style>

package/src/components/log-message/log-message.vue

@@ -0,0 +1,154 @@
+<template>
+  <ecs-flex-row class="ecs-log-message" :class="[type, highlight ? 'highlighted' : '']" align="start" :style="padding">
+    <ecs-skeleton-loader v-if="loading && type != 'blank'" type="rect" :width="16" :height="16" />
+    <ecs-sticker v-else-if="type != 'blank'" :type="type" />
+    <div class="ecs-log-message-content">
+      <ecs-skeleton-loader v-if="loading" type="single" :width="40" class="skeleton-text" />
+      <slot v-else></slot>
+    </div>
+    <div v-if="meta && !loading" class="ecs-log-message-meta">
+      {{ meta }}
+    </div>
+  </ecs-flex-row>
+</template>
+
+<script>
+import EcsFlexRow from '../flex/flex-row'
+import EcsSticker from '../sticker/sticker'
+import EcsSkeletonLoader from '../skeleton-loader/skeleton-loader'
+
+export default {
+  components: {
+    EcsFlexRow, EcsSticker, EcsSkeletonLoader
+  },
+
+  props: {
+    /** Determines the type of log message, which also impacts the styling of it. */
+    type: {
+      type: String,
+      validator: v => ['blank', 'success', 'warning', 'info', 'error'].includes(v),
+      default: 'blank'
+    },
+    /** Adds a background color to highlight the line within the log. */
+    highlight: {
+      type: Boolean,
+      default: false
+    },
+    /** Meta text like (most usual) a timestamp, a username, etc. Appears as subtle gray text on the right side of the log message. */
+    meta: {
+      type: String
+    },
+    /** Allows to customize the left and right inner padding of the log message. */
+    verticalPadding: {
+      type: String,
+      default: '20px'
+    },
+    /** Turns the log message into fetching/loading state, which replaces it's content with skeleton loaders. */
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  computed: {
+    padding() {
+      return 'padding-left: ' + this.verticalPadding + '; padding-right: ' + this.verticalPadding + ';'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "../../tokens/build/scss/tokens.scss";
+
+.ecs-log-message-content{
+  min-height: $type-scale-2-line-height;
+
+  p, ol, ul, blockquote{
+    margin: $spacing-10 0;
+  }
+
+  b, strong{
+    font-weight: $font-weight-medium;
+  }
+
+  a{
+    font-weight: $font-weight-medium;
+
+    &:hover{
+      text-decoration: underline;
+    }
+  }
+}
+
+.highlighted.error > .ecs-log-message-content a{
+  color: $color-red-12;
+}
+
+.highlighted.info > .ecs-log-message-content a{
+  color: $color-blue-12;
+}
+
+.highlighted.warning > .ecs-log-message-content a{
+  color: $color-yellow-12;
+}
+
+.highlighted.success > .ecs-log-message-content a{
+  color: $color-green-12;
+}
+</style>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-log-message{
+  column-gap: $spacing-10;
+  padding-top: $spacing-10;
+  padding-bottom: $spacing-10;
+  color: $color-gray-15;
+  font-size: $type-scale-2-font-size;
+  line-height: $type-scale-2-line-height;
+  border-bottom: 1px solid $color-gray-1;
+
+  &-content{
+    flex: 1;
+
+    > :first-child{
+      margin-top: 0;
+    }
+
+    > :last-child{
+      margin-bottom: 0;
+    }
+  }
+
+  &-meta{
+    opacity: .5;
+  }
+}
+
+.info.highlighted{
+  background: $color-blue-1;
+  border-color: $color-blue-2;
+  color: $color-blue-15;
+}
+
+.warning.highlighted{
+  background: $color-yellow-1;
+  border-color: $color-yellow-2;
+  color: $color-yellow-15;
+}
+
+.error.highlighted{
+  background: $color-red-1;
+  border-color: $color-red-2;
+  color: $color-red-15;
+}
+
+.success.highlighted{
+  background: $color-green-1;
+  border-color: $color-green-2;
+  color: $color-green-15;
+}
+</style>

package/src/components/map/map.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="ecs-map" :class="[marker ? `ecs-map-marker` : '']">
+    <a target="_blank" :href="mapUrl">
+      <img :src="mapImageUrl">
+    </a>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      /** Address of the location, needs to be known by Google Maps. */
+      address: {
+        type: String,
+        required: true
+      },
+      /** Determines if the centered address location should be shown with a marker. */
+      marker: {
+        type: Boolean,
+        default: false
+      },
+    },
+
+    computed: {
+      mapUrl() {
+        return `https://www.google.com/maps/place/${this.address}`
+      },
+      mapImageUrl() {
+        return `https://maps.googleapis.com/maps/api/staticmap?maptype=terrain&sensor=false&format=png&zoom=13&key=AIzaSyBEv9bJVd1MU5zSs_Ezxkvc8FOfIO7Q1Fk&visual_refresh=true&scale=2&size=320x220&style=feature:poi|visibility:off&center=${this.address}`
+      }
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-map{
+  width: 100%;
+  max-width: 360px;
+  border-radius: $border-radius-small;
+  overflow: hidden;
+  position: relative;
+
+  img{
+    max-width: 100%;
+    display: block;
+  }
+
+  &-marker{
+    &:before{
+      content: "";
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      width: 12px;
+      height: 12px;
+      margin: -6px 0 0 -6px;
+      background: $color-blue-8;
+      border-radius: 100%;
+      border: 2px solid #FFF;
+      box-shadow: 0 0 0 5px rgba($color-blue-8, .2);
+      z-index: 2;
+      transition: .2s;
+    }
+
+    &:hover:before{
+      transform: scale(1.3);
+      box-shadow: 0 0 0 7px rgba($color-blue-8, .2);
+    }
+  }
+}
+</style>

package/src/components/mixins/svg-uri.scss

@@ -0,0 +1,29 @@
+@function svg-uri($svg) {
+  $encoded: '';
+  $slice: 2000;
+  $index: 0;
+  $loops: ceil(str-length($svg) / $slice);
+
+  @for $i from 1 through $loops {
+    $chunk: str-slice($svg, $index, $index + $slice - 1);
+    $chunk: str-replace($chunk, '"', "'");
+    $chunk: str-replace($chunk, '<', '%3C');
+    $chunk: str-replace($chunk, '>', '%3E');
+    $chunk: str-replace($chunk, '&', '%26');
+    $chunk: str-replace($chunk, '#', '%23');
+    $encoded: #{$encoded}#{$chunk};
+    $index: $index + $slice;
+  }
+
+  @return url("data:image/svg+xml;charset=utf8,#{$encoded}");
+}
+
+@function str-replace($string, $search, $replace: '') {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+
+  @return $string;
+}

package/src/components/modal/modal.vue

@@ -0,0 +1,159 @@
+<template>
+  <transition name="dialog-fade">
+    <div v-if="isShown" class="ecs-modal" :class="[typeClass, clickthrough ? 'ecs-modal-click-through' : '']">
+
+      <div class="ecs-modal-dialog ecs-modal-sheet" :style="fixedHeightStyle">
+        <div v-if="$slots.header" class="ecs-modal-header-wrap">
+          <!-- @slot Slot for the modal header content. -->
+          <slot name="header"></slot>
+        </div>
+        <div class="ecs-modal-content-wrap scrollbar">
+          <slot></slot>
+        </div>
+        <div v-if="$slots.footer" class="ecs-modal-footer-wrap">
+          <!-- @slot Slot the modal footer content. -->
+          <slot name="footer"></slot>
+        </div>
+      </div>
+
+      <div class="ecs-modal-backdrop ecs-modal-sheet-backdrop" />
+    </div>
+  </transition>
+</template>
+
+<script>
+  import EcsModalBase from '../modal-base/modal-base'
+
+  export default {
+    components: { EcsModalBase },
+
+    props: {
+      /** Shows the modal. */
+      show: {
+        type: Boolean,
+        default: false
+      },
+      /** Determines the visual variant of modal. Default is a regular vertically and horizontally centered modal, while the drawer variant is a full width, but limited height modal that slides in from the bottom of the screen. */
+      type: {
+        type: String,
+        validator: v => ['default', 'drawer',].includes(v),
+        default: 'default'
+      },
+      /** If set, the user can click throught the backdrop of the modal and interact with any controls underneath the modal. This should only be used with the `drawer` type. */
+      clickthrough: {
+        type: Boolean,
+        default: false
+      },
+      /** Sets the modal height to a fixed pixel value. If not passed, the modal height will auto adapt it's height. The modal height will never exceed 90% height of viewport. */
+      fixedHeight: {
+        type: Number
+      }
+    },
+
+    data () {
+      return {
+        isShown: this.show
+      }
+    },
+
+     computed: {
+      typeClass() {
+        if (this.type && this.type !== '')
+          return `ecs-modal-${this.type}`
+        return this.type
+      },
+
+      fixedHeightStyle() {
+        if (this.fixedHeight && this.fixedHeight !== '')
+          return `height:${this.fixedHeight}px`
+        return this.fixedHeight
+      }
+    },
+
+    methods : {
+      toggleShow(){
+        this.isShown = !this.isShown
+        this.$emit('toggled', this.id, this.isShown)
+      }
+    },
+
+    watch: {
+      show(){
+        this.isShown = this.show
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-modal{
+  &-sheet{
+    background: #FFFFFF;
+    background-clip: padding-box;
+    border-radius: $border-radius-medium;
+    outline: 0;
+    box-shadow: 0 0 0 1px rgba(47,51,60,0.03), 0 1px 5px 0 rgba(47,51,60,0.25);
+
+    &-backdrop{
+      background: rgba(47,51,60,0.25);
+      background-image: linear-gradient(-180deg, rgba(137,144,156,0.20) 0%, rgba(140,148,161,0.00) 39%);
+    }
+  }
+}
+
+// Default modal variant
+
+.ecs-modal-default{
+  .ecs-modal-sheet{
+    margin: 30px auto;
+    width: 820px;
+  }
+}
+
+// Drawer modal variant
+
+.ecs-modal-drawer{
+  .ecs-modal-sheet{
+    margin: 5px auto;
+    width: calc(100vw - 10px);
+  }
+}
+
+.ecs-modal{
+  &-inner{
+    display: flex;
+    flex-direction: column;
+  }
+
+  &-header-wrap{
+    flex-shrink: 0;
+    z-index: 2;
+    position: relative;
+  }
+
+  &-content-wrap{
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+    position: relative;
+    z-index: 1;
+  }
+
+  &-footer-wrap{
+    flex-shrink: 0;
+    z-index: 2;
+    position: relative;
+  }
+
+  &.ecs-modal-click-through{
+    pointer-events: none;
+
+    .ecs-modal-dialog{
+      pointer-events: auto;
+    }
+  }
+}
+</style>

package/src/components/modal-base/modal-base.vue

@@ -0,0 +1,75 @@
+<style lang="scss">
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-modal{
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1072;
+  outline: 0;
+  background: transparent;
+  will-change: transform;
+  display: flex;
+  justify-content: center;
+
+  &-default{
+    align-items: center;
+
+    .ecs-modal-dialog{
+      max-height: calc(100vh - 60px);
+    }
+  }
+
+  &-drawer{
+    align-items: flex-end;
+
+    .ecs-modal-dialog{
+      max-height: calc(65vh - 140px);
+    }
+  }
+
+  &-dialog{
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    margin: 0 auto;
+    z-index: 1072;
+    overflow: hidden;
+    transform: translateY(0) scale(1);
+    opacity: 1;
+    transition: .3s cubic-bezier(0.595, -0.275, 0.330, 1.280) .1s;
+  }
+
+  &-backdrop{
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1071;
+    will-change: opacity;
+    background: rgba(49,52,57, .5);
+    opacity: 1;
+    transition: .25s cubic-bezier(0.595, -0.275, 0.330, 1.280);
+  }
+}
+
+/**
+* Transition
+*/
+.dialog-fade-enter, .dialog-fade-leave-to
+.dialog-fade-leave-active {
+  .ecs-modal-backdrop{
+    opacity: 0;
+  }
+  
+  .ecs-modal-dialog{
+    transform: translateY(-20px) scale(.98);
+    opacity: 0;
+  }
+}
+
+</style>

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

@@ -0,0 +1,35 @@
+<template>
+  <div class="ecs-modal-footer">
+    <div v-if="$slots.secondary" class="ecs-modal-footer-secondary">
+      <!-- @slot Slot for a secondary footer area. Should only be used for informational content, not actionable. -->
+      <slot name="secondary"></slot>
+    </div>
+    <div class="ecs-modal-footer-main">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-modal-footer{
+  background: #FFF;
+  box-shadow: 0 -1px 0 rgba(#858E9E, .35);
+  border-radius: 0 0 4px 4px;
+
+  &-main{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-height: 62px;
+    padding: 10px;
+  }
+
+  &-secondary{
+    border-bottom: 1px solid #ECEDF2;
+    padding: 8px 10px;
+  }
+}
+</style>