@everchron/ec-shards 0.6.48 → 0.6.52

package/package.json

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

package/src/assets/images/file-icons/transcript-highlights.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><g fill="none" fill-rule="evenodd" transform="translate(4 2)"><rect width="22" height="26" y="1" fill="#9599AF" fill-opacity=".12" rx="2"/><rect width="22" height="26" fill="#9599AF" fill-opacity=".25" rx="2"/><rect width="20" height="24" x="1" y="1" fill="#FFF" rx="1"/><rect width="8" height="1" x="11" y="4" fill="#7A7F9A" rx=".5"/><rect width="6" height="1" x="11" y="7" fill="#9599AF" fill-opacity=".6" rx=".5"/><rect width="12" height="1" x="7" y="12" fill="#76E2AD" rx=".5"/><rect width="2" height="1" x="3" y="12" fill="#ACEDCD" rx=".5"/><rect width="2" height="1" x="3" y="15" fill="#9599AF" fill-opacity=".3" rx=".5"/><rect width="2" height="1" x="3" y="18" fill="#A7CFFF" rx=".5"/><rect width="2" height="1" x="3" y="21" fill="#9599AF" fill-opacity=".3" rx=".5"/><rect width="9" height="1" x="7" y="15" fill="#9599AF" fill-opacity=".5" rx=".5"/><rect width="11" height="1" x="7" y="18" fill="#6BAFFF" rx=".5"/><rect width="7" height="1" x="7" y="21" fill="#9599AF" fill-opacity=".5" rx=".5"/><polygon fill="#9599AF" fill-rule="nonzero" points="6.41 9 6.41 4.516 8.039 4.516 8.039 3.363 3.355 3.363 3.355 4.516 4.98 4.516 4.98 9"/></g></svg>

package/src/assets/images/file-icons/transcript-mini-highlights.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><g fill="none" fill-rule="evenodd" transform="translate(4 2)"><rect width="22" height="26" y="1" fill="#9599AF" fill-opacity=".12" rx="2"/><rect width="22" height="26" fill="#9599AF" fill-opacity=".25" rx="2"/><rect width="20" height="24" x="1" y="1" fill="#FFF" rx="1"/><rect width="20" height="1" x="1" y="13" fill="#DFE0E7"/><rect width="1" height="24" x="10.5" y="1" fill="#DFE0E7"/><rect width="4" height="1" x="5" y="16" fill="#6BAFFF" rx=".5"/><rect width="2" height="1" x="2" y="16" fill="#A7CFFF" rx=".5"/><rect width="2" height="1" x="2" y="18" fill="#A7CFFF" rx=".5"/><rect width="2" height="1" x="2" y="20" fill="#9599AF" fill-opacity=".3" rx=".5"/><rect width="3" height="1" x="5" y="18" fill="#6BAFFF" rx=".5"/><rect width="3" height="1" x="5" y="20" fill="#9599AF" fill-opacity=".5" rx=".5"/><rect width="2" height="1" x="2" y="22" fill="#9599AF" fill-opacity=".3" rx=".5"/><rect width="3" height="1" x="5" y="22" fill="#9599AF" fill-opacity=".5" rx=".5"/><rect width="4" height="1" x="16" y="16" fill="#9599AF" fill-opacity=".5" rx=".5"/><rect width="2" height="1" x="13" y="16" fill="#9599AF" fill-opacity=".3" rx=".5"/><rect width="2" height="1" x="13" y="18" fill="#9599AF" fill-opacity=".3" rx=".5"/><rect width="2" height="1" x="13" y="20" fill="#9599AF" fill-opacity=".3" rx=".5"/><rect width="3" height="1" x="16" y="18" fill="#9599AF" fill-opacity=".5" rx=".5"/><rect width="3" height="1" x="16" y="20" fill="#9599AF" fill-opacity=".5" rx=".5"/><rect width="2" height="1" x="13" y="22" fill="#9599AF" fill-opacity=".3" rx=".5"/><rect width="3" height="1" x="16" y="22" fill="#9599AF" fill-opacity=".5" rx=".5"/><rect width="4" height="1" x="16" y="3" fill="#9599AF" fill-opacity=".5" rx=".5"/><rect width="2" height="1" x="13" y="3" fill="#9599AF" fill-opacity=".3" rx=".5"/><rect width="2" height="1" x="13" y="5" fill="#ACEDCD" rx=".5"/><rect width="2" height="1" x="13" y="7" fill="#ACEDCD" rx=".5"/><rect width="3" height="1" x="16" y="5" fill="#76E2AD" rx=".5"/><rect width="3" height="1" x="16" y="7" fill="#76E2AD" rx=".5"/><rect width="2" height="1" x="13" y="9" fill="#9599AF" fill-opacity=".3" rx=".5"/><rect width="3" height="1" x="16" y="9" fill="#9599AF" fill-opacity=".5" rx=".5"/><polygon fill="#9599AF" fill-rule="nonzero" points="6.41 9 6.41 4.516 8.039 4.516 8.039 3.363 3.355 3.363 3.355 4.516 4.98 4.516 4.98 9"/></g></svg>

package/src/components/file-icon/file-icon.vue

@@ -20,6 +20,8 @@
           'rtf',
           'transcript-mini',
           'transcript',
+          'transcript-mini-highlights',
+          'transcript-highlights',
           'video',
           'xls',
           'zip'

package/src/components/form-group/form-group.vue

@@ -62,6 +62,10 @@
       color: darken($blue-10, 10%);
     }
   }
+
+  &.error{
+    color: $red-9;
+  }
 }
 
 .ecs-form-check-group .ecs-form-text{

package/src/components/form-set/form-set.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="ecs-form-set" :class="error ? 'error' : ''">
+    <h5 class="ecs-form-set-title">{{ title }}</h5>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      error: {
+        type: Boolean,
+        default: false
+      },
+      title: {
+        type: String,
+        required: true
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../tokens/tokens";
+@import "../mixins/svg-uri";
+
+.ecs-form-set{
+  border: 1px solid $gray-3;
+  border-radius: 6px;
+  position: relative;
+  padding: 25px 20px 20px 20px;
+
+  &-title{
+    position: absolute;
+    font-size: 14px;
+    color: $gray-8;
+    padding: 0 10px;
+    left: 10px;
+    top: -9px;
+    background: #FFF;
+  }
+
+  &.error{
+    border-color: $red-10;
+
+    .ecs-form-set-title{
+      color: $red-10;
+    }
+  }
+}
+
+</style>

package/src/components/index.js

@@ -40,6 +40,7 @@ import EcsFormCheck from "./form-check/form-check.vue"
 import EcsFormGroup from "./form-group/form-group.vue"
 import EcsFormHeadline from "./form-headline/form-headline.vue"
 import EcsFormatted from "./formatted/formatted.vue"
+import EcsFormSet from "./form-set/form-set.vue"
 import EcsIcon from "./icon/icon.vue"
 import EcsIndexToolbar from "./index-toolbar/index-toolbar.vue"
 import EcsInfoTooltip from "./info-tooltip/info-tooltip.vue"
@@ -143,6 +144,7 @@ const Components = {
   EcsFormGroup,
   EcsFormHeadline,
   EcsFormatted,
+  EcsFormSet,
   EcsIcon,
   EcsIndexToolbar,
   EcsInfoTooltip,

package/src/components/input/input.vue

@@ -3,6 +3,7 @@
     @input="$emit('input', $event)"
     @change="$emit('change', $event)"
     @keyup="$emit('keyup', $event)"
+    @blur="$emit('blur', $event)"
     :type="type"
     :name="name"
     :disabled="disabled"
@@ -14,7 +15,8 @@
     :class="[
       sizeClass,
       formatClass,
-      subtle ? `ecs-form-control-subtle` : null
+      subtle ? 'ecs-form-control-subtle' : null,
+      error ? 'ecs-form-control-error' : null
     ]"
     v-bind="$attrs"
     :min="min"
@@ -25,6 +27,7 @@
     @input="$emit('input', $event)"
     @change="$emit('change', $event)"
     @keyup="$emit('keyup', $event)"
+    @blur="$emit('blur', $event)"
     :name="name"
     :disabled="disabled"
     :required="required"
@@ -34,7 +37,8 @@
       sizeClass,
       formatClass,
       cssClass,
-      subtle ? `ecs-form-control-subtle` : null
+      subtle ? 'ecs-form-control-subtle' : null,
+      error ? 'ecs-form-control-error' : null
     ]"
     v-bind="$attrs"
     :ref="refr"
@@ -89,6 +93,10 @@
         type: Boolean,
         default: false
       },
+      error: {
+        type: Boolean,
+        default: false
+      },
       cssClass: String,
       refr: String,
       min: Number
@@ -177,6 +185,12 @@
     font-family: $mono;
   }
 
+  &-error,
+  &-error:focus{
+    box-shadow: none;
+    border-color: $red-9;
+  }
+
   &::placeholder {
     color: $gray-8;
     opacity: 1;

package/src/stories/form-set/form-set.stories.js

@@ -0,0 +1,16 @@
+import EcsFormSet from '@components/form-set/form-set';
+
+export default {
+  title: 'Forms/Form Set',
+  component: EcsFormSet
+};
+
+export const formSet = () => ({
+  components: { EcsFormSet },
+  template: `<ecs-form-set title="Form Set">Default Slot</ecs-form-set>`,
+});
+
+export const formSetError = () => ({
+  components: { EcsFormSet },
+  template: `<ecs-form-set error title="Form Set">Default Slot</ecs-form-set>`,
+});

package/src/stories/form-set/form-set.stories.mdx

@@ -0,0 +1,36 @@
+import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
+import EcsFormSet from '@components/form-set/form-set';
+import * as stories from './form-set.stories.js';
+
+<Meta
+  title="Forms/Form Set"
+  component={EcsFormSet} />
+
+# Form Set `EcsFormSet`
+
+Form sets are wrapping containers for multiple form elements. They can be used to bring more structure to large forms.
+
+<Canvas withSource="none" withToolbar={true}>
+  <Story name="Form Set" height="50px">
+    {stories.formSet()}
+  </Story>
+</Canvas>
+
+```js
+<ecs-form-set title="Form Set">Default Slot</ecs-form-set>
+```
+
+<Canvas withSource="none" withToolbar={true}>
+  <Story name="Form Set Error" height="50px">
+    {stories.formSetError()}
+  </Story>
+</Canvas>
+
+```js
+<ecs-form-set error title="Form Set">Default Slot</ecs-form-set>
+```
+
+
+## Props
+
+<ArgsTable of={EcsFormSet} />

package/src/stories/input/input.stories.js

@@ -43,4 +43,4 @@ export const inputFormat = () => ({
   template: `<div>
               <ecs-input placeholder="Enter some ID" format="id" />
             </div>`,
-});
+});

package/src/stories/radiobutton/radiobutton.stories.mdx

@@ -17,7 +17,9 @@ Radiobuttons are used for selecting a single value from several options.
 </Canvas>
 
 ```js
-
+<ecs-radiobutton name="fruits" v-model="selected" value="orange">Label</ecs-radiobutton>
+<ecs-radiobutton name="fruits" v-model="selected" value="apple" checked>Checked</ecs-radiobutton>
+<ecs-radiobutton name="fruits" v-model="selected" value="grape" disabled>Disabled</ecs-radiobutton>
 ```
 
 ## Inline
@@ -31,10 +33,10 @@ If more than one radiobutton should be placed within one row, use the `inline` a
 </Canvas>
 
 ```js
-<ecs-checkbox inline name="fruits">Apple</ecs-checkbox>
-<ecs-checkbox inline name="fruits" checked>Orange</ecs-checkbox>
+<ecs-radiobutton inline name="fruity" v-model="selected" value="apples">Apples</ecs-radiobutton>
+<ecs-radiobutton inline name="fruity" v-model="selected" value="oranges">Oranges</ecs-radiobutton>
 ```
 
 ## Props, Slots and Events
 
-<ArgsTable of={EcsRadiobutton} />
+<ArgsTable of={EcsRadiobutton} />