@everchron/ec-shards 0.0.12

package/src/components/section/section.vue

@@ -0,0 +1,207 @@
+<template>
+  <div class="ecs-section"
+      :class="[borderTop ? 'ecs-section-border-top' : '',
+               borderBottom ? 'ecs-section-border-bottom' : '',
+               indentation,
+               headlineIndentation]">
+
+    <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>
+
+    <div class="ecs-section-content"
+      :class="[
+        title ? '' : 'equal',
+        contentPaddingClass
+      ]">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<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),
+        default: 'md'
+      }
+    },
+
+    computed: {
+      indentation() {
+        if (this.indent && this.indent !== '')
+          return `ecs-section-indent-${this.indent}`
+        return this.indent
+      },
+
+      headlineIndentation() {
+        if (this.headlineIndent && this.headlineIndent !== '')
+          return `ecs-section-headline-indent-${this.headlineIndent}`
+        return this.headlineIndent
+      },
+
+      contentPaddingClass() {
+        return `ecs-section-content-padding-${this.contentPadding}`
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-headline-section{
+  font-size: $type-scale-3-font-size;
+  color: $color-gray-10;
+
+  &-bold{
+    font-size: $type-scale-4-font-size;
+    color: $color-gray-13;
+    font-weight: 600;
+  }
+}
+
+.ecs-section{
+  &-border-top{
+    border-top: 1px solid rgba($color-gray-6, .25);
+  }
+
+  &-border-bottom{
+    border-bottom: 1px solid rgba($color-gray-6, .25);
+  }
+
+  &-headline{
+    padding-top: 12px;
+    padding-bottom: 12px;
+    position: relative;
+
+    &.shadow-bottom{
+      box-shadow: 0 1px 1px #E9E9EB;
+    }
+
+    &.has-buttons{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding-top: 5px;
+      padding-bottom: 5px;
+    }
+  }
+
+  &-controls{
+    display: flex;
+    align-items: center;
+  }
+
+  &-indent-md,
+  &-headline-indent-md{
+    .ecs-section-headline{
+      padding-left: 20px;
+      padding-right: 20px;
+    }
+
+    .ecs-section-headline:after{
+      right: 20px;
+    }
+  }
+
+  &-indent-md{
+    .ecs-section-content{
+      padding-left: 20px;
+      padding-right: 20px;
+    }
+  }
+
+  &-headline-indent-sml{
+    .ecs-section-headline{
+      padding-left: 15px;
+      padding-right: 15px;
+    }
+
+    .ecs-section-headline:after{
+      right: 15px;
+    }
+  }
+
+  &-indent-sml{
+    .ecs-section-headline{
+      padding-left: 20px;
+      padding-right: 20px;
+    }
+
+    .ecs-section-content{
+      padding-left: 15px;
+      padding-right: 15px;
+    }
+  }
+
+  &-content-padding{
+    &-none{
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    &-sml{
+      padding-top: 5px;
+      padding-bottom: 15px;
+
+      &.equal{
+        padding-top: 15px;
+      }
+    }
+
+    &-md{
+      padding-top: 15px;
+      padding-bottom: 25px;
+
+      &.equal{
+        padding-top: 25px;
+      }
+    }
+  }
+
+  .ecs-form-group{
+    margin-bottom: 20px;
+
+    &:last-child{
+      margin-bottom: 0;
+    }
+  }
+}
+</style>

package/src/components/segment/segment.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="ecs-segments" :class="[inline ? 'ecs-segments-inline' : '']">
+    <label v-for="option in options" :key="option.id" :for="option.id">
+      <input type="radio" :name="name" :value="option.id" :id="option.id" :checked="value==option.id" :disabled="option.disabled" @click="$emit('click', option.id)">
+      <span class="ecs-segment" :title="option.title">
+        <ecs-icon v-if="option.icon" :class="[option.icon && option.label ? 'icon-spacing' : '']" :type="option.icon" size="20" color="#2F333C" />
+        {{ option.label }}
+      </span>
+    </label>
+  </div>
+</template>
+
+<script>
+import EcsIcon from '../icon/icon'
+
+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: ''
+    }
+  },
+  /*
+  computed: {
+    selectedSegmentId: {
+      get() {
+        return this.value;
+      },
+      set(segmentId) {
+        this.$emit("input", segmentId);
+      }
+    }
+  }
+  */
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-segments{
+  display: flex;
+  padding-left: 1px;
+  white-space: nowrap;
+  background: rgba(#767680, .12);
+  border-radius: 9px;
+  padding: 2px;
+  transition: .2s;
+
+  &-inline{
+    display: inline-flex;
+  }
+
+  label{
+    flex: 1;
+    margin-bottom: 0;
+  }
+
+  .ecs-segment{
+    border-radius: $border-radius-large;
+    color: $color-gray-10;
+    cursor: pointer;
+    padding: 0 12px;
+    text-align: center;
+    font-size: $type-scale-3-font-size;
+    transition: .2s;
+    line-height: 24px;
+    height: 24px;
+    text-transform: capitalize;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .icon{
+      display: inline-block;
+      transition: .2s;
+      opacity: .7;
+
+      &-spacing{
+        margin: 0 5px 0 -3px;
+      }
+    }
+  }
+
+  input{
+    display: none;
+
+    &:checked + .ecs-segment{
+      background-color: #FFF;
+      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),
+                  0 3px 1px 0 rgba(0,0,0,0.04);
+
+      .icon{
+        opacity: 1;
+      }
+    }
+
+    &:disabled + .ecs-segment{
+      color: rgba($color-gray-13, .5);
+      opacity: .5;
+      cursor: default;
+    }
+  }
+}
+</style>

package/src/components/select/select.vue

@@ -0,0 +1,209 @@
+<template>
+  <div class="ecs-form-select" :class="[sizeClass, typeClass, disabled ? `disabled` : null]">
+    <select @change="$emit('change', $event); hasPlaceholder = false"
+            @focus="$emit('focus', $event)"
+            @blur="$emit('blur', $event)"
+            v-bind="{ id, name, disabled, required }"
+            :class="hasPlaceholder? 'placeholder' : ''" >
+      <option v-if="placeholder" selected hidden disabled>{{placeholder}}</option>
+      <slot></slot>
+    </select>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    /** Determines the size of the select control. */
+    size: {
+      type: String,
+      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
+    },
+    placeholder: {
+      type: String
+    },
+    id: String,
+    name: String
+  },
+
+  data() {
+    return {
+      hasPlaceholder: false
+    }
+  },
+
+  computed: {
+    sizeClass() {
+      if (this.size && this.size !== '')
+        return `ecs-form-select-${this.size}`
+      return this.size
+    },
+
+    typeClass() {
+      if (this.type && this.type !== '')
+        return `ecs-form-select-${this.type}`
+      return this.type
+    }
+  },
+
+  mounted: function () {
+    if (this.placeholder && this.placeholder !== '')
+      this.hasPlaceholder = true
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-form-select{
+  border: 1px solid rgba($color-gray-8, .4);
+  border-radius: $border-radius-small;
+  overflow: hidden;
+  position: relative;
+  background: #FFF;
+  transition: .2s;
+
+  &:after{
+    width: 11px;
+    height: 7px;
+    content: "";
+    position: absolute;
+    top: 50%;
+    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="#{$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($color-gray-8, .4), 4%);
+    box-shadow: 0 1px 1px rgba($color-gray-8, .1);
+
+    &:after{
+      opacity: .5;
+    }
+  }
+
+  &.disabled{
+    opacity: .5;
+  }
+
+  select{
+    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;
+    background: transparent;
+    background-image: none;
+    -webkit-appearance: none;
+    position: relative;
+    z-index: 1;
+
+    &:focus{
+      outline: none;
+    }
+
+    &:required:invalid {
+      color: #858f9e;
+    }
+
+    option[value=""][disabled] {
+      display: none;
+    }
+
+    &.placeholder{
+      color: $color-gray-9;
+    }
+  }
+
+  &-subtle{
+    background-color: rgba($color-gray-8, .15);
+    border: 1px solid rgba($color-gray-8, .2);
+
+    &:hover,
+    &:focus{
+      background-color: rgba($color-gray-8, .17);
+      border: 1px solid $color-gray-4;
+      box-shadow: none;
+    }
+  }
+
+  &-invisible{
+    background-color: transparent;
+    border: none;
+
+    &:hover,
+    &:focus{
+      background-color: rgba($color-gray-10, .05);
+      box-shadow: none;
+    }
+  }
+
+  &-naked{
+    background-color: transparent;
+    border: none;
+    opacity: .8;
+
+    &:after{
+      right: 0;
+    }
+
+    &:hover,
+    &:focus{
+      opacity: 1;
+      box-shadow: none;
+    }
+
+    select{
+      color: darken($color-gray-8, 5%);
+      font-size: $type-scale-2-font-size;
+      width: 100%;
+      padding-right: 16px;
+      direction: rtl;
+    }
+  }
+
+  &-sml{
+    &:after{
+      right: $spacing-10;
+    }
+
+    select{
+      font-size: $type-scale-2-font-size;
+      line-height: $type-scale-2-line-height;
+      padding: $spacing-5 - 1 $spacing-10;
+    }
+  }
+
+  &-lg{
+    select{
+      padding: $spacing-15 - 3 $spacing-10;
+    }
+  }
+}
+</style>

package/src/components/select-tile/select-tile.vue

@@ -0,0 +1,181 @@
+<template>
+  <div @click="$emit('click', $event)" class="ecs-select-tile"
+      :class="[selected ? 'ecs-select-tile-selected' : '', disabled ? 'ecs-select-tile-disabled' : '']">
+
+    <div class="select-check" />
+    <div v-if="illustration" class="illustration" :class="illustration" />
+    <div v-if="label" class="label">{{ label }}</div>
+    <div v-if="helpText" class="help">{{ helpText }}</div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      /** The main label for the tile. */
+      label: {
+        type: String,
+        required: true
+      },
+      /** Additional line of text underneath the label, which can be used to add further explanations and infos. */
+      helpText: {
+        type: String
+      },
+      /** The type of illustration that should be shown within the tile. */
+      illustration: {
+        type: String,
+        validator: v => [
+          'load-file-annotations',
+          'load-file-designation-report',
+          'load-file-designation',
+          'load-file-zip',
+          'overlay-files',
+          'overlay-metadata',
+          null
+        ].includes(v),
+      },
+      /** Determines the selection state of the tile. */
+      selected: {
+        type: Boolean,
+        default: false
+      },
+      /** Disables the tile. */
+      disabled: {
+        type: Boolean,
+        default: false
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-select-tile{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 32px 24px;
+  min-width: 240px;
+  background: #FFFFFF;
+  box-shadow: 0px 0px 0px 1px rgba(71, 75, 96, 0.05), 0px 1px 4px rgba(71, 75, 96, 0.1);
+  border-radius: 8px;
+  border: 1px solid #FFF;
+  cursor: pointer;
+  text-align: center;
+  transition: .2s;
+  position: relative;
+
+  &:hover{
+    box-shadow: 0px 0px 0px 1px rgba(71, 75, 96, 0.05), 0px 2px 4px rgba(71, 75, 96, 0.15);
+    transform: translateY(-4px);
+  }
+
+  .label{
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 20px;
+    color: #202127;
+  }
+
+  .help{
+    font-size: 12px;
+    line-height: 16px;
+    color: #75798F;
+    margin-top: 8px;
+  }
+
+  .select-check{
+    background: #0B71EB;
+    border-radius: 100%;
+    position: absolute;
+    opacity: 0;
+    transition: .2s;
+    top: 8px;
+    left: 8px;
+    width: 18px;
+    height: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:before{
+      opacity: 0;
+      transform: rotate(-15deg) scale(.7);
+      transition: .4s;
+      width: 8px;
+      height: 8px;
+      content: "";
+      background-image: svg-uri('<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 4.259L3.347 6.998L7 1" stroke="white" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>');
+    }
+  }
+
+  &-selected{
+    background: #F4F9FF;
+    border: 1px solid #A7CFFF;
+    box-shadow: none;
+
+    .select-check{
+      opacity: 1;
+
+      &:before{
+        opacity: 1;
+        transform: rotate(0) scale(1);
+      }
+    }
+
+    &:hover{
+      box-shadow: none;
+      transform: translateY(0);
+    }
+  }
+
+  &-disabled{
+    background: #F9FAFC;
+    border: 1px solid #ECEDF2;
+    box-shadow: none;
+    pointer-events: none;
+
+    .label{
+      color: #65687A;
+    }
+
+    .help{
+      color: #929AA9;
+    }
+  }
+}
+
+.illustration{
+  width: 140px;
+  height: 140px;
+  background-position: center center;
+  margin-bottom: 16px;
+}
+
+.load-file-annotations{
+  background: url('../../assets/images/selectable-tiles-illustrations/load-file-annotations.svg');
+}
+
+.load-file-designation-report{
+  background: url('../../assets/images/selectable-tiles-illustrations/load-file-designation-report.svg');
+}
+
+.load-file-designation{
+  background: url('../../assets/images/selectable-tiles-illustrations/load-file-designation.svg');
+}
+
+.load-file-zip{
+  background: url('../../assets/images/selectable-tiles-illustrations/load-file-zip.svg');
+}
+
+.overlay-files{
+  background: url('../../assets/images/selectable-tiles-illustrations/overlay-files.svg');
+}
+
+.overlay-metadata{
+  background: url('../../assets/images/selectable-tiles-illustrations/overlay-metadata.svg');
+}
+</style>