@everchron/ec-shards 0.8.35 → 0.9.1

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

@@ -1,30 +1,45 @@
 <template>
   <div @click="$emit('click', $event)" class="ecs-select-tile"
-      :class="[value ? 'ecs-select-tile-selected' : '', disabled ? 'ecs-select-tile-disabled' : '']">
+      :class="[selected ? 'ecs-select-tile-selected' : '', disabled ? 'ecs-select-tile-disabled' : '']">
 
-    <div v-if="illustration" class="ecs-select-tile-illustration" :class="illustration" />
-    <div v-if="label" class="ecs-select-tile-label">{{ label }}</div>
-    <div v-if="helpText" class="ecs-select-tile-help">{{ helpText }}</div>
+    <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
+        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 => ['sml', 'md', null].includes(v),
+        validator: v => [
+          'load-file-annotations',
+          'load-file-designation-report',
+          'load-file-designation',
+          'load-file-zip',
+          'overlay-files',
+          'overlay-metadata',
+          null
+        ].includes(v),
       },
-      value: {
+      /** Determines the selection state of the tile. */
+      selected: {
         type: Boolean,
         default: false
       },
+      /** Disables the tile. */
       disabled: {
         type: Boolean,
         default: false
@@ -38,8 +53,129 @@
 @import "../mixins/svg-uri";
 
 .ecs-select-tile{
-  &-illustration{
-    
+  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>

package/src/stories/party-entry/party-entry.stories.js

@@ -49,14 +49,16 @@ export const partyEntryWithBackground = () => ({
 export const partyEntryAnnotations = () => ({
   components: { EcsPartyEntry },
   template: `<main>
-              <ecs-party-entry background icon="marker" :annotation-color="1">Annotation</ecs-party-entry>
-              <ecs-party-entry background icon="marker" :annotation-color="2">Annotation</ecs-party-entry>
-              <ecs-party-entry background icon="marker" :annotation-color="3">Annotation</ecs-party-entry>
-              <ecs-party-entry background icon="marker" :annotation-color="4">Annotation</ecs-party-entry>
-              <ecs-party-entry background icon="marker" :annotation-color="5">Annotation</ecs-party-entry>
-              <ecs-party-entry background icon="marker" :annotation-color="6">Annotation</ecs-party-entry>
-              <ecs-party-entry background icon="marker" :annotation-color="7">Annotation</ecs-party-entry>
-              <ecs-party-entry background icon="marker" :annotation-color="8">Annotation</ecs-party-entry>
-              <ecs-party-entry background icon="marker" :annotation-color="9">Annotation</ecs-party-entry>
+              <ecs-party-entry background icon="marker" color="#F9DF00">Annotation</ecs-party-entry>
+              <ecs-party-entry background icon="marker" color="#F3A100">Annotation</ecs-party-entry>
+              <ecs-party-entry background icon="marker" color="#B7EA80">Annotation</ecs-party-entry>
+              <ecs-party-entry background icon="marker" color="#48E4C2">Annotation</ecs-party-entry>
+              <ecs-party-entry background icon="marker" color="#489DFF">Annotation</ecs-party-entry>
+              <ecs-party-entry background icon="marker" color="#B877F0">Annotation</ecs-party-entry>
+              <ecs-party-entry background icon="marker" color="#FD78FD">Annotation</ecs-party-entry>
+              <ecs-party-entry background icon="marker" color="#858E9F">Annotation</ecs-party-entry>
+              <ecs-party-entry background icon="marker" color="#EE5452">Annotation</ecs-party-entry>
+              <ecs-party-entry background icon="marker">No Color Defined</ecs-party-entry>
+              <ecs-party-entry icon="marker" color="#EE5452">Annotation</ecs-party-entry>
             </main>`,
 });

package/src/stories/select-tile/select-tile.stories.js

@@ -7,6 +7,17 @@ export default {
 
 export const selectTile = () => ({
   components: { EcsSelectTile },
-  template: `<ecs-select-tile />`,
+  data() {
+    return {
+      selectedTile: null
+    }
+  },
+  template: `
+  <main>
+    <ecs-select-tile @click="selectedTile = 1" :selected="selectedTile == 1" label="Designation Load File Import" help-text="CSV or XLS Load File" illustration="load-file-designation" />
+    <ecs-select-tile @click="selectedTile = 2" :selected="selectedTile == 2" label="Designation Report Import" help-text="XLS Report" illustration="load-file-designation-report" />
+    <ecs-select-tile @click="selectedTile = 3" disabled :selected="selectedTile == 3" label="Designation Report Import" help-text="XLS Report" illustration="load-file-designation-report" />
+  </main>
+  `,
 });