@everchron/ec-shards 0.7.56 → 0.7.57

package/package.json

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

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

@@ -0,0 +1,199 @@
+<template>
+  <div class="ecs-collection-control" :class="[
+      noBorder ? '' : 'bordered',
+      isVisible ? '' : 'collapsed',
+      size
+    ]">
+    <div @click="toggleCollapse" class="ecs-collection-control-header" :class="isVisible ? '' : 'collapsed'">
+      <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">
+        <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="ecs-collection-control-list scrollbar scrollbar-sml" :style="listMaxHeight">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import EcsIcon from '../icon/icon'
+
+  export default {
+    components: { EcsIcon },
+    props: {
+      icon: {
+        type: String
+      },
+      size: {
+        type: String,
+        validator: v => ['md', 'lg'].includes(v),
+        default: 'lg'
+      },
+      visible: {
+        type: Boolean,
+        default: false
+      },
+      label: {
+        type: String
+      },
+      noBorder: {
+        type: Boolean,
+        default: false
+      },
+      collection: {
+        type: Array,
+        required: true
+      },
+      maxHeight: {
+        type: Number,
+        default: null
+      }
+    },
+
+    data() {
+      return {
+        isVisible: this.visible
+      }
+    },
+
+    computed: {
+      iconSize() {
+        return this.size === 'md' ? '24px' : '30px'
+      },
+      
+      fullTooltip() {
+        // FIX ME: should only join items that are value true
+        return this.collection.map(item => item.name).join(', ')
+      },
+
+      listMaxHeight() {
+        return this.maxHeight ? `max-height: ${ this.maxHeight }px` : null
+      }
+    },
+
+    methods: {
+      toggleCollapse(){
+        this.isVisible = !this.isVisible
+        this.$emit('toggled', this.id, this.isVisible)
+      }
+    },
+
+    watch: {
+      visible(){
+        this.isVisible = this.visible
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../tokens/tokens";
+@import "../mixins/svg-uri";
+
+.ecs-collection-control{
+  border-radius: 4px;
+
+  &.bordered{
+    border: 1px solid $gray-4;
+    transition: .2s;
+
+    &.collapsed:hover{
+      box-shadow: 0 1px 1px rgba(#474B60, .08);
+    }
+  }
+
+  &.md{
+    .ecs-collection-control-header{
+      padding: 3px 24px 3px 0;
+      margin: 0 8px;
+    }
+
+    .ecs-collection-control-list{
+      padding: 0 0 2px 0;
+    }
+  }
+
+  &.lg{
+    .ecs-collection-control-header{
+      padding: 4px 24px 4px 0;
+      margin: 0 12px;
+    }
+
+    .ecs-collection-control-list{
+      padding: 2px 4px;
+    }
+  }
+
+  &-header{
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    line-height: 20px;
+    position: relative;
+    cursor: pointer;
+    transition: .2s;
+    user-select: none;
+
+    &:not(.collapsed){
+      box-shadow: 0 1px 0 0 $gray-3;
+    }
+
+    .icon{
+      margin-right: 4px;
+    }
+
+    .description{
+      color: $gray-10;
+      margin-right: 4px;
+    }
+
+    .collection{
+      color: $gray-15;
+
+      > span:not(:last-child){
+        &:after{
+          content: ", ";
+        }
+      }
+    }
+
+    &:after{
+      content: "";
+      position: absolute;
+      width: 18px;
+      height: 18px;
+      background: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path fill="#{$gray-8}" d="M881.010919,595 L886.687546,588.842677 C886.864064,588.651212 886.864064,588.356318 886.687546,588.164852 L886.00296,587.422296 C885.815784,587.219269 885.499462,587.20642 885.296436,587.393597 C885.286526,587.402733 885.276989,587.412266 885.26785,587.422173 L881.010919,592.036499 L876.73215,587.398487 C876.544907,587.195522 876.228581,587.182778 876.025617,587.370022 C876.015709,587.379161 876.006176,587.388698 875.997039,587.398608 L875.312454,588.141164 C875.135936,588.33263 875.135936,588.627524 875.312454,588.818989 L881.010919,595 Z" transform="translate(-872 -582)"/></svg>');
+      right: 0;
+      top: 50%;
+      margin-top: -9px;
+      transition: .35s;
+      opacity: .7;
+    }
+
+    &.collapsed:after{
+      transform: rotate(-90deg);
+      opacity: 1;
+    }
+  }
+
+  &-list{
+    overflow: auto;
+  }
+
+  .ecs-popover-list{
+    padding: 0;
+  }
+}
+
+.collapse-show{
+  display: block;
+}
+
+.collapse-hide{
+  display: none;
+}
+</style>

package/src/components/index.js

@@ -20,6 +20,7 @@ import EcsButtonToolbarIcon from "./button-toolbar-icon/button-toolbar-icon.vue"
 import EcsCard from "./card/card.vue"
 import EcsCheckbox from "./checkbox/checkbox.vue"
 import EcsCollapse from "./collapse/collapse.vue"
+import EcsCollectionControl from "./collection-control/collection-control.vue"
 import EcsComment from "./comment/comment.vue"
 //import EcsCommentForm from "./comment-form/comment-form.vue"
 import EcsCommentList from "./comment-list/comment-list.vue"
@@ -127,6 +128,7 @@ const Components = {
   EcsCheckbox,
   EcsCard,
   EcsCollapse,
+  EcsCollectionControl,
   EcsComment,
 //  EcsCommentForm,
   EcsCommentList,

package/src/stories/Introduction.stories.mdx

@@ -21,13 +21,13 @@ import { Meta } from '@storybook/addon-docs/blocks';
     <span>Building blocks for putting your interface together.</span>
   </a>
 
-  <a href="https://share.goabstract.com/40f65b14-0e96-4fc3-a78a-58dfb47d6469" target="_blank">
-    <span>Sketch Library</span>
-    <span>Flexible Sketch symbols, that match their components counterparts.</span>
+  <a href="https://www.figma.com/file/VdnGdnfdtYLkcVjXFDpKSx/Core?node-id=15%3A312" target="_blank">
+    <span>Figma Library</span>
+    <span>Flexible Figma components, that match their implemented counterparts.</span>
   </a>
 
   <a href="https://everchron.com/brand" target="_blank" style={{ marginLeft: '20px' }}>
     <span>Brand Guidelines</span>
     <span>Everchron basic branding and marketing guidelines.</span>
   </a>
-</aside>
+</aside>

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

@@ -0,0 +1,101 @@
+import EcsCollectionControl from '@components/collection-control/collection-control';
+import EcsPopoverList from '@components/popover-list/popover-list';
+import EcsPopoverListItem from '@components/popover-list-item/popover-list-item';
+
+export default {
+  title: 'Forms/Collection Control',
+  component: EcsCollectionControl
+};
+
+export const collectionControl = () => ({
+  components: { EcsCollectionControl, EcsPopoverList, EcsPopoverListItem },
+  data() {
+    return {
+      collection: [
+        { name: 'Editors', value: true },
+        { name: 'Clients', value: true },
+        { name: 'Translation Agency', value: false }
+      ]
+    }
+  },
+  template: `<div>
+            <ecs-collection-control :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>
+             </ecs-collection-control>
+             
+             <ecs-collection-control size="md" :collection="collection" label="Grant Access:" icon="parties">
+              <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>
+             </ecs-collection-control>
+            </div>`,
+  methods: {
+    accessToggle(value) {
+      this.$emit('access', value)
+    }
+  }
+});
+
+export const collectionControlWithoutBorders = () => ({
+  components: { EcsCollectionControl, EcsPopoverList, EcsPopoverListItem },
+  data() {
+    return {
+      collection: [
+        { name: 'Editors', value: true },
+        { name: 'Clients', value: true },
+        { name: 'Translation Agency', value: false }
+      ]
+    }
+  },
+  template: `<div>
+            <ecs-collection-control 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>
+             </ecs-collection-control>
+             
+             <ecs-collection-control no-border size="md" :collection="collection" label="Grant Access:" icon="parties">
+              <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>
+             </ecs-collection-control>
+            </div>`,
+  methods: {
+    accessToggle(value) {
+      this.$emit('access', value)
+    }
+  }
+});
+
+export const collectionControlLimitedHeight = () => ({
+  components: { EcsCollectionControl, EcsPopoverList, EcsPopoverListItem },
+  data() {
+    return {
+      collection: [
+        { name: 'Editors', value: true },
+        { name: 'Clients', value: true },
+        { name: 'Translation Agency', value: false }
+      ]
+    }
+  },
+  template: `<div>
+            <ecs-collection-control :max-height="80" :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>
+             </ecs-collection-control>
+             
+             <ecs-collection-control :max-height="80" size="md" :collection="collection" label="Grant Access:" icon="parties">
+              <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>
+             </ecs-collection-control>
+            </div>`,
+  methods: {
+    accessToggle(value) {
+      this.$emit('access', value)
+    }
+  }
+});

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

@@ -0,0 +1,66 @@
+import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
+import EcsCollectionControl from '@components/collection-control/collection-control';
+import * as stories from './collection-control.stories.js';
+
+<Meta
+  title="Forms/Collection Control"
+  component={EcsCollectionControl} />
+
+# Collection Control `EcsCollectionControl`
+
+Collection controls are lists of controls that can be toggled on or off. There are two sizes available: `md` and `lg`.
+
+<Canvas withSource="none" withToolbar={true}>
+  <Story name="Collection Control" height="240px">
+    {stories.collectionControl()}
+  </Story>
+</Canvas>
+
+```js
+data() {
+  return {
+    collection: [
+      { name: 'Editors', value: true },
+      { name: 'Clients', value: true },
+      { name: 'Translation Agency', value: false }
+    ]
+  }
+}
+
+<ecs-collection-control :collection="collection" label="Grant Access:" icon="parties">
+  <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>
+  </ecs-collection-control>
+  
+  <ecs-collection-control size="md" :collection="collection" label="Grant Access:" icon="parties">
+  <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>
+  </ecs-collection-control>
+</div>
+```
+
+## Without Borders
+
+By adding the `no-border` attribute, the border will be removed.
+
+<Canvas withSource="none" withToolbar={true}>
+  <Story name="Collection Control Without Borders" height="240px">
+    {stories.collectionControlWithoutBorders()}
+  </Story>
+</Canvas>
+
+## Limited Height
+
+You can control the maximum height of the (scrollable) collection list by setting the `max-height` attribute (number).
+
+<Canvas withSource="none" withToolbar={true}>
+  <Story name="Collection Control Limited Height" height="240px">
+    {stories.collectionControlLimitedHeight()}
+  </Story>
+</Canvas>
+
+## Props and Slots
+
+<ArgsTable of={EcsCollectionControl} />