@everchron/ec-shards 0.7.60 → 0.7.63

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everchron/ec-shards",
-  "version": "0.7.60",
+  "version": "0.7.63",
   "private": false,
   "description": "Everchron Shards UI Library",
   "repository": "https://github.com/everchron/ec-shards.git",

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

@@ -1,17 +1,23 @@
 <template>
   <div class="ecs-collection-control" :class="[
       noBorder ? '' : 'bordered',
-      isVisible ? '' : 'collapsed',
+      isVisible || nonInteractive ? '' : 'collapsed',
       size
     ]">
-    <div @click="toggleCollapse" class="ecs-collection-control-header" :class="isVisible ? '' : 'collapsed'">
+    <div @click="toggleCollapse" class="ecs-collection-control-header" :class="[
+      isVisible || nonInteractive ? '' : 'collapsed',
+      nonInteractive ? '' : 'interactive',
+      ]">
       <ecs-icon v-if="icon" :type="icon" color="#858E9E" :width="iconSize" :height="iconSize" />
       <div class="description" v-if="label">{{ label }}</div>
-      <div class="collection" :title="fullTooltip">
+      <div class="collection"
+        @mouseover="toggleTooltip"
+        @mouseleave="toggleTooltip"
+        :title="fullTooltip">
         <span v-for="item in collection" :key="item.name" v-if="item.value">{{ item.name }}</span>
       </div>
     </div>
-    <div :class="isVisible ? 'collapse-show' : 'collapse-hide'" class="collapse">
+    <div :class="isVisible || nonInteractive ? 'collapse-show' : 'collapse-hide'" class="collapse">
       <div class="ecs-collection-control-list scrollbar scrollbar-sml" :style="listMaxHeight">
         <slot></slot>
       </div>
@@ -51,6 +57,10 @@
       maxHeight: {
         type: Number,
         default: null
+      },
+      nonInteractive: {
+        type: Boolean,
+        default: false
       }
     },
 
@@ -66,8 +76,8 @@
       },
       
       fullTooltip() {
-        // FIX ME: should only join items that are value true
-        return this.collection.map(item => item.name).join(', ')
+        const filterItems = this.collection.filter(o => o.value)
+        return filterItems.map((item) => item.name).join(', ')
       },
 
       listMaxHeight() {
@@ -79,6 +89,10 @@
       toggleCollapse(){
         this.isVisible = !this.isVisible
         this.$emit('toggled', this.id, this.isVisible)
+      },
+
+      toggleTooltip() {
+        this.$emit('collectionTooltip', this.fullTooltip)
       }
     },
 
@@ -134,10 +148,13 @@
     font-size: 14px;
     line-height: 20px;
     position: relative;
-    cursor: pointer;
     transition: .2s;
     user-select: none;
 
+    &.interactive{
+      cursor: pointer;
+    }
+
     &:not(.collapsed){
       box-shadow: 0 1px 0 0 $gray-3;
     }
@@ -149,10 +166,15 @@
     .description{
       color: $gray-10;
       margin-right: 4px;
+      white-space: nowrap;
     }
 
     .collection{
       color: $gray-15;
+      white-space: nowrap;
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
 
       > span:not(:last-child){
         &:after{
@@ -161,7 +183,7 @@
       }
     }
 
-    &:after{
+    &.interactive:after{
       content: "";
       position: absolute;
       width: 18px;
@@ -174,7 +196,7 @@
       opacity: .7;
     }
 
-    &.collapsed:after{
+    &.interactive.collapsed:after{
       transform: rotate(-90deg);
       opacity: 1;
     }

package/src/components/directory-entry/directory-entry.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="ecs-directory-entry">
+    <ecs-icon :type="icon" color="#A1A6B0" />
+    <div v-if="indicator" class="indicator" :style="`background-color:`+indicator" />
+    <div class="items">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+  import EcsIcon from '../icon/icon'
+
+  export default {
+    components: {
+      EcsIcon
+    },
+    props: {
+      icon: {
+        type: String,
+        required: true
+      },
+      indicator: {
+        type: String,
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../tokens/tokens";
+
+.ecs-directory-entry{
+  display: flex;
+  position: relative;
+  margin-bottom: 8px;
+
+  &:last-child{
+    margin-bottom: 0;
+  }
+
+  .indicator{
+    position: absolute;
+    top: 16px;
+    left: 16px;
+    width: 12px;
+    height: 12px;
+    border: 2px solid #FFF;
+    border-radius: 100%;
+  }
+
+  .items{
+    line-height: 20px;
+    font-size: 14px;
+    padding: 5px 0;
+    margin-left: 8px;
+    color: $gray-15;
+    display: flex;
+    flex-direction: column;
+    word-break: break-word;
+
+    a{
+      color: $gray-15;
+      display: inline-block;
+      position: relative;
+      z-index: 1;
+
+      &:after{
+        content: "";
+        position: absolute;
+        top: -2px;
+        left: -4px;
+        bottom: -2px;
+        right: -4px;
+        opacity: 0;
+        transform: scale(.6);
+        transition: opacity .15s ease-in-out, transform .3s cubic-bezier(0.3, 0.76, 0.27, 1.5);
+        border-radius: 4px;
+        z-index: -1;
+        pointer-events: none;
+        background: rgba($gray-8, .1);
+      }
+
+      &:hover:after{
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+  }
+}
+</style>

package/src/components/index.js

@@ -30,6 +30,7 @@ import EcsDataList from "./data-list/data-list.vue"
 import EcsDataListItem from "./data-list-item/data-list-item.vue"
 import EcsDialog from "./dialog/dialog.vue"
 import EcsDialogHeader from "./dialog-header/dialog-header.vue"
+import EcsDirectoryEntry from "./directory-entry/directory-entry.vue"
 import EcsDocumentState from "./document-state/document-state.vue"
 import EcsDropzone from "./dropzone/dropzone.vue"
 import EcsEmptyState from "./empty-state/empty-state.vue"
@@ -139,6 +140,7 @@ const Components = {
   EcsDataListItem,
   EcsDialog,
   EcsDialogHeader,
+  EcsDirectoryEntry,
   EcsDocumentState,
   EcsDropzone,
   EcsEmptyState,

package/src/stories/collection-control/collection-control.stories.js

@@ -50,7 +50,7 @@ export const collectionControlWithoutBorders = () => ({
     }
   },
   template: `<div>
-            <ecs-collection-control no-border :collection="collection" label="Grant Access:" icon="parties" style="margin-bottom:24px">
+            <ecs-collection-control non-interactive no-border :collection="collection" label="Grant Access:" icon="parties" style="margin-bottom:24px">
               <ecs-popover-list>
                 <ecs-popover-list-item @input="accessToggle" v-for="item in collection" :value="item.value" type="checkbox">{{ item.name }}</ecs-popover-list-item>
               </ecs-popover-list>

package/src/stories/collection-control/collection-control.stories.mdx

@@ -41,9 +41,10 @@ data() {
 </div>
 ```
 
-## Without Borders
+## Without Borders and no Interactivity
 
 By adding the `no-border` attribute, the border will be removed.
+Sometimes you may want to disable to collapse functionality, this can be done by adding the `non-interactive` attribute.
 
 <Canvas withSource="none" withToolbar={true}>
   <Story name="Collection Control Without Borders" height="240px">

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

@@ -0,0 +1,30 @@
+import EcsDirectoryEntry from '@components/directory-entry/directory-entry';
+
+export default {
+  title: 'Content Structures/Directory Entry',
+  component: EcsDirectoryEntry
+};
+
+
+export const directoryEntry = () => ({
+  components: { EcsDirectoryEntry },
+  template: `<div>
+              <ecs-directory-entry icon="mail">
+                <a href="mailto:info@everchron.com">info@everchron.com</a>
+              </ecs-directory-entry>
+              <ecs-directory-entry icon="mail">
+                <ul>
+                  <li><a href="https://everchron.com">everchron.com</a></li>
+                  <li><a href="https://google.com">google.com</a></li>
+                  <li><a href="https://twitter.com">twitter.com</a></li>
+                </ul>
+              </ecs-directory-entry>
+              </div>`,
+});
+
+export const directoryEntryIndicator = () => ({
+  components: { EcsDirectoryEntry },
+  template: `<ecs-directory-entry icon="person" indicator="#0EBA65">
+              Active
+            </ecs-directory-entry>`,
+});

package/src/stories/directory-entry/directory-entry.stories.mdx

@@ -0,0 +1,48 @@
+import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
+import { EcsDirectoryEntry } from '@components/directory-entry/directory-entry';
+import * as stories from './directory-entry.stories.js';
+
+<Meta
+  title="Content Structures/Directory Entry"
+  component={EcsDirectoryEntry} />
+
+# Directory Entry `EcsDirectoryEntry`
+
+A directory can display a single point of data, or a collection of data (usually links or phone numbers). Directory entries do always have an icon.
+
+<Canvas withSource="none" withToolbar={true}>
+  <Story name="Directory Entry" height="200px">
+    {stories.directoryEntry()}
+  </Story>
+</Canvas>
+
+```js
+<ecs-directory-entry icon="mail">
+  <a href="mailto:info@everchron.com">info@everchron.com</a>
+</ecs-directory-entry>
+<ecs-directory-entry icon="mail">
+  <ul>
+    <li><a href="https://everchron.com">everchron.com</a></li>
+    <li><a href="https://google.com">google.com</a></li>
+    <li><a href="https://twitter.com">twitter.com</a></li>
+  </ul>
+</ecs-directory-entry>
+```
+
+## Indicator
+
+Optionally you can add an indicator to the directory entry icon. Use the `indicator` prop to set the indicator to a specific color (HEX or RGB, no alpha values).
+
+<Canvas withSource="none" withToolbar={true}>
+  <Story name="Directory Entry Indicator" height="200px">
+    {stories.directoryEntryIndicator()}
+  </Story>
+</Canvas>
+
+```js
+<ecs-directory-entry icon="person" indicator="#0EBA65">Active</ecs-directory-entry>
+```
+
+## Props
+
+<ArgsTable of={EcsDirectoryEntry} />