@everchron/ec-shards 0.8.27 → 1.0.0

package/src/components/text/text.vue

@@ -0,0 +1,164 @@
+<template>
+  <component :is="textTag" :class="[textClass, emphasized ? 'emphasized' : '']" class="ecs-text" :style="{color: textColor}">
+    <slot></slot>
+  </component>
+</template>
+
+<script>
+  export default {
+    props: {
+      /** Determines the tag of the text. */
+      type: {
+        type: String,
+        validator: v => ['headline', 'subline', 'form', 'label'].includes(v),
+        required: true
+      },
+      /** Determines the tag level and visual hierarchy of the text. Note: for type `headline`, all sizes are available, while for `label` only `1` and `2` are available. The other types have no sizes. */
+      size: {
+        type: String,
+        validator: v => ['1', '2', '3', '4', '5', '6'].includes(v),
+        default: '1'
+      },
+      /** Determines if the text should be shown one font-weight bolder than the default variant. */
+      emphasized: {
+        type: Boolean,
+        default: false
+      },
+      /** Allows to overwrite the text color. Accepts predefined theme names: `positive`, `negative`, as well as any color HEX or variable. */
+      color: {
+        type: String
+      }
+    },
+
+    computed: {
+      textTag() {
+        if(this.type == 'headline')
+          if(this.size == '1')
+            return 'h1'
+          else if(this.size == '2')
+            return 'h2'
+          else if(this.size == '3')
+            return 'h3'
+          else if(this.size == '4')
+            return 'h4'
+          else if(this.size == '5')
+            return 'h5'
+          else if(this.size == '6')
+            return 'h6'
+          else
+            return 'div'
+        else if(this.type == 'label')
+          return 'label'
+        else
+          return 'div'
+      },
+
+      textClass() {
+        if(this.type == 'headline')
+          return 'ecs-headline ecs-headline-' + this.size
+        else if(this.type == 'label')
+          return 'ecs-label ecs-label-' + this.size
+        else
+          return 'ecs-' + this.type
+      },
+
+      textColor() {
+        if (this.color && this.color !== '')
+          if(this.color == 'negative')
+            return '#ED223C'
+          else if (this.color == 'positive')
+            return '#019049'
+          else
+            return this.color
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-text{
+  margin: 0;
+}
+
+.ecs-headline{
+  &-1{
+    font-size: $type-scale-6-font-size;
+    font-weight: $font-weight-bold;
+    line-height: $type-scale-6-line-height;
+    color: $color-gray-15;
+  }
+
+  &-2{
+    font-size: $type-scale-5-font-size;
+    font-weight: $font-weight-bold;
+    line-height: $type-scale-5-line-height;
+    color: $color-gray-15;
+  }
+
+  &-3{
+    font-size: $type-scale-4-font-size;
+    font-weight: $font-weight-bold;
+    line-height: $type-scale-4-line-height;
+    color: $color-gray-15;
+  }
+
+  &-4{
+    font-size: $type-scale-4-font-size;
+    font-weight: $font-weight-normal;
+    line-height: $type-scale-4-line-height;
+    color: $color-gray-15;
+  }
+
+  &-5{
+    font-size: $type-scale-3-font-size;
+    font-weight: $font-weight-medium;
+    line-height: $type-scale-3-line-height;
+    color: $color-gray-15;
+  }
+
+  &-6{
+    font-size: $type-scale-2-font-size;
+    font-weight: $font-weight-normal;
+    line-height: $type-scale-2-line-height;
+    color: $color-gray-10;
+  }
+}
+
+.ecs-label{
+  font-weight: $font-weight-normal;
+  color: $color-gray-15;
+
+  &-1{
+    font-size: $type-scale-3-font-size;
+    line-height: $type-scale-3-line-height;
+  }
+
+  &-2{
+    font-size: $type-scale-2-font-size;
+    line-height: $type-scale-2-line-height;
+  }
+
+  &.emphasized{
+    font-weight: $font-weight-medium;
+  }
+}
+
+.ecs-subline{
+  font-size: $type-scale-3-font-size;
+  line-height: $type-scale-3-line-height;
+  color: $color-gray-10;
+
+  &.emphasized{
+    font-weight: $font-weight-medium;
+  }
+}
+
+.ecs-form{
+  font-size: $type-scale-2-font-size;
+  line-height: $type-scale-2-line-height;
+  color: $color-gray-9;
+}
+</style>

package/src/components/tiptap/tiptap.vue

@@ -109,11 +109,11 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ProseMirror{
-  font-size: 14px;
+  font-size: $type-scale-3-font-size;
   line-height: 1.4em;
   padding: 10px;
 
@@ -163,14 +163,14 @@ export default {
   }
 
   blockquote{
-    border-left: 3px solid rgba($gray-6, .4);
-    color: $gray-10;
+    border-left: 3px solid rgba($color-gray-6, .4);
+    color: $color-gray-10;
     margin: 1em 0;
     padding-left: 16px;
   }
 
   a{
-    color: $blue-10;
+    color: $color-blue-10;
     text-decoration: none;
     transition: .2s;
 
@@ -180,7 +180,7 @@ export default {
     }
 
     &:hover{
-      color: darken($blue-10, 5%);
+      color: darken($color-blue-10, 5%);
 
       &:after{
         opacity: 1;
@@ -205,7 +205,7 @@ export default {
 .ProseMirror p.is-editor-empty:first-child::before {
   content: attr(data-placeholder);
   float: left;
-  color: $gray-6;
+  color: $color-gray-6;
   pointer-events: none;
   height: 0;
 }
@@ -213,9 +213,9 @@ export default {
 .ecs-bubble-menu {
   display: flex;
   align-items: center;
-  background-color: rgba($gray-13, .97);
+  background-color: rgba($color-gray-13, .97);
   padding: 4px;
-  border-radius: 6px;
+  border-radius: $border-radius-medium;
 
   button {
     border: none;
@@ -225,7 +225,7 @@ export default {
     transition: .2s;
     padding: 0;
     display: flex;
-    border-radius: 4px;
+    border-radius: $border-radius-small;
     margin-right: 4px;
 
     &:last-child{
@@ -243,4 +243,4 @@ export default {
     }
   }
 }
-</style>
+</style>

package/src/components/toast/toast.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="ecs-toast" :class="typeClass">
-    <span>{{message}}</span>
-    <button class="ecs-toast-action" v-if="button">
+    <slot></slot>
+    <button @click="$emit('action')" class="ecs-toast-action" v-if="button">
       {{button}}
     </button>
   </div>
@@ -10,15 +10,13 @@
 <script>
   export default {
     props: {
+      /** Determines the visual theme of the toast message. */
       theme: {
         type: String,
         validator: v => ['neutral', 'error', 'success', 'null', null].includes(v),
         default: 'neutral'
       },
-      message: {
-        type: String,
-        required: true
-      },
+      /** Adds a button to the toast message. Emits the `@action` event on click.  */
       button: {
         type: String,
         default: null
@@ -35,7 +33,7 @@
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-toast{
@@ -43,12 +41,12 @@
   justify-content: space-between;
   align-items: center;
   pointer-events: all;
-  background: rgba($gray-13, .94);
+  background: rgba($color-gray-13, .94);
   color: #FFF;
-  box-shadow: 0 1px 3px rgba($gray-13, .2);
-  border-radius: 3px;
+  box-shadow: 0 1px 3px rgba($color-gray-13, .2);
+  border-radius: $border-radius-small;
   padding: 14px 16px;
-  font-size: 14px;
+  font-size: $type-scale-3-font-size;
   margin-bottom: 10px;
   -webkit-font-smoothing: antialiased;
 
@@ -57,27 +55,27 @@
   }
 
   &-action{
-    font-weight: 500;
-    font-size: 13px;
-    color: $blue-3;
+    font-weight: $font-weight-medium;
+    font-size: $type-scale-3-font-size;
+    color: $color-blue-3;
     text-transform: uppercase;
     margin: -10px -10px -10px 30px;
-    border-radius: 2px;
+    border-radius: $border-radius-x-small;
     transition: .2s;
     padding: 10px;
 
     &:hover{
-      color: $blue-2;
+      color: $color-blue-2;
     }
 
     &:active{
-      color: $blue-2;
+      color: $color-blue-2;
       background: rgba(#FFF, .1);
     }
   }
 
   &.success{
-    background: $green-10;
+    background: $color-green-10;
 
     .ecs-toast-action{
       color: rgba(#FFF, .8);
@@ -89,7 +87,7 @@
   }
 
   &.error{
-    background: $red-10;
+    background: $color-red-10;
 
     .ecs-toast-action{
       color: rgba(#FFF, .8);

package/src/components/toasts/toasts.vue

@@ -15,7 +15,7 @@
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-toasts{

package/src/components/tokens/tokens.vue

@@ -0,0 +1,5 @@
+<!-- Do not import this file anywhere, except in index.js. -->
+
+<style lang="css">
+  @import "../../tokens/build/css/tokens.css";
+</style>

package/src/components/toolbar/toolbar.vue

@@ -14,6 +14,7 @@
       EcsAnimations
     },
     props: {
+      /** Determines the type of the toolbar. */
       type: {
         type: String,
         validator: v => ['viewer', 'index'].includes(v),
@@ -24,7 +25,7 @@
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-toolbar{
@@ -34,7 +35,7 @@
   padding: 0 15px;
   z-index: 5;
   background: #FFF;
-  box-shadow: 0 1px 0 rgba($gray-10, .2);
-  height: $toolbar_main_height;
+  box-shadow: 0 1px 0 rgba($color-gray-10, .2);
+  height: $layout-toolbar-height;
 }
 </style>

package/src/components/tree-list/tree-list.vue

@@ -7,6 +7,7 @@
 <script>
   export default {
     props: {
+      /** Optional unique ID for the list. */
       id: {
         type: String
       }

package/src/components/tree-list-item/tree-list-item.vue

@@ -18,6 +18,7 @@
       <ecs-icon v-if="icon" :type="icon" :color="iconColor" :width="iconSize" :height="iconSize" />
 
       <div v-if="$slots.control" class="ecs-tree-view-entry-control">
+        <!-- @slot Slot for a selection control, such as a checkbox or radiobutton. -->
         <slot name="control"></slot>
       </div>
 
@@ -28,10 +29,12 @@
       <span v-if="afterLabel" class="after-label">{{afterLabel}}</span>
 
       <div v-if="$slots.actions" class="ecs-tree-view-entry-actions">
+        <!-- @slot Slot action buttons, or a dropdown trigger. -->
         <slot name="actions"></slot>
       </div>
     </div>
     <div v-if="$slots.collapse" :class="isVisible ? 'collapse-show' : 'collapse-hide'">
+      <!-- @slot Slot for expandable content. -->
       <slot name="collapse"></slot>
     </div>
   </div>
@@ -141,7 +144,7 @@
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-tree-view-entry{
@@ -149,8 +152,8 @@
   align-items: center;
   user-select: none;
   transition: .1s;
-  font-size: 13px;
-  border-radius: 3px;
+  font-size: $type-scale-3-font-size;
+  border-radius: $border-radius-small;
   padding-right: 6px;
   padding-left: 4px;
   min-width: 306px;
@@ -161,7 +164,7 @@
     padding-top: 3px;
     padding-bottom: 3px;
     margin-bottom: 4px;
-    font-size: 14px;
+    font-size: $type-scale-3-font-size;
   }
 
   &.selectable{
@@ -221,7 +224,7 @@
 
     &-label{
       padding-left: 28px;
-      font-size: 13px;
+      font-size: $type-scale-3-font-size;
       line-height: 22px;
       display: block;
     }
@@ -251,8 +254,8 @@
 
   .after-label{
     margin-left: auto;
-    font-size: 12px;
-    color: $gray-8;
+    font-size: $type-scale-2-font-size;
+    color: $color-gray-8;
     max-width: 40%;
     height: 100%;
     overflow: hidden;

package/src/components/video/video.vue

@@ -18,22 +18,27 @@
 <script>
   export default {
     props: {
+      /** URL to an optional poster image. */
       posterImage: {
         type: String,
         default: null
       },
+      /** If set, the video auto-plays once added to the DOM. */
       autoplay: {
         type: Boolean,
         default: false
       },
+      /** Loops the video. */
       loop: {
         type: Boolean,
         default: false
       },
+      /** Determines if the video player should have any controls. */
       controls: {
         type: Boolean,
         default: true
       },
+      /** URL to the MP-4 video file. */
       mp4Source: {
         type: String,
         default: null

package/src/stories/Changelog.stories.mdx

@@ -0,0 +1,29 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Changelog" />
+
+<h1 style={{ marginBottom: '32px', letterSpacing: '-.02em' }}>
+  Changelog
+</h1>
+
+## Version 1.0.0 (undated)
+
+### Features
+
+- Added new `EcsFlexRow` and `EcsFlexCol` components.
+- Added new `EcsFavicon` component.
+
+### Changes
+
+- Implemented Style Dictionary to automatically generate design tokens for all platforms
+- Refactored all components to use the new design tokens
+- Redesigned most components to be in line with the design changes of the Figma design library
+- Refactored EcsFlag component to use new SVG assets, reduces package size by 40KB.
+- Visual hover effects for EcsTabButton added.
+- Refactored EcsDialog component to use native HTML5 `<dialog>` element. Fixing z-index and various overflow issues.
+
+### Breaking Changes
+
+- EcsAlert: prop `action` was renamed to `actionLabel`
+- EcsButton: sizes prop possible options changed to `sml`, `md`, `lg`. Removed `xsml` variant.
+

package/src/stories/action-toolbar/action-toolbar.stories.js

@@ -2,38 +2,22 @@ import EcsActionToolbar from '@components/action-toolbar/action-toolbar';
 import EcsButton from '@components/button/button';
 
 export default {
-  title: 'Toolbars/Action Toolbar',
+  title: 'Patterns/Action Toolbar',
   component: EcsActionToolbar
 };
 
-export const selectionActions = () => ({
+export const actionToolbar = () => ({
   components: { EcsActionToolbar, EcsButton },
   template: `
               <ecs-action-toolbar has-selection selected-type="Entry" show>
-                <ecs-button icon="evidence" size="sml">Chronology</ecs-button>
-                <ecs-button icon="folder" size="sml">Folder</ecs-button>
+                <ecs-button icon="evidence">Chronology</ecs-button>
+                <ecs-button icon="folder">Folder</ecs-button>
                 <span class="divider" />
-                <ecs-button icon="download" size="sml">Export</ecs-button>
-                <ecs-button icon="tags" size="sml">Tag</ecs-button>
-                <ecs-button icon="edit" size="sml">Edit</ecs-button>
+                <ecs-button icon="download">Export</ecs-button>
+                <ecs-button icon="tags">Tag</ecs-button>
+                <ecs-button icon="edit">Edit</ecs-button>
                 <span class="divider" />
-                <ecs-button type="danger" icon="delete" size="sml">Remove</ecs-button>
-              </ecs-action-toolbar>
-              `,
-});
-
-export const actions = () => ({
-  components: { EcsActionToolbar, EcsButton },
-  template: `
-              <ecs-action-toolbar show>
-                <ecs-button icon="evidence" size="sml">Chronology</ecs-button>
-                <ecs-button icon="folder" size="sml">Folder</ecs-button>
-                <span class="divider" />
-                <ecs-button icon="download" size="sml">Export</ecs-button>
-                <ecs-button icon="tags" size="sml">Tag</ecs-button>
-                <ecs-button icon="edit" size="sml">Edit</ecs-button>
-                <span class="divider" />
-                <ecs-button type="danger" icon="delete" size="sml">Remove</ecs-button>
+                <ecs-button type="danger" icon="delete">Remove</ecs-button>
               </ecs-action-toolbar>
               `,
 });

package/src/stories/audio/audio.stories.js

@@ -1,7 +1,7 @@
 import EcsAudio from '@components/audio/audio';
 
 export default {
-  title: 'Elements/Audio',
+  title: 'Data/Audio',
   component: EcsAudio
 };
 

package/src/stories/avatar/avatar.stories.js

@@ -1,7 +1,7 @@
 import EcsAvatar from '@components/avatar/avatar';
 
 export default {
-  title: 'Elements/Avatar',
+  title: 'Data/Avatar',
   component: EcsAvatar
 };
 

package/src/stories/breadcrumb/breadcrumb.stories.js

@@ -3,7 +3,7 @@ import EcsBreadcrumbButton from '@components/breadcrumb-button/breadcrumb-button
 import EcsBreadcrumbTitle from '@components/breadcrumb-title/breadcrumb-title';
 
 export default {
-  title: 'Navigation/Breadcrumb',
+  title: 'Navigation/Breadcrumb/Wrapper',
   component: EcsBreadcrumb
 };
 

package/src/stories/breadcrumb-button/breadcrumb-button.stories.js

@@ -0,0 +1,18 @@
+import EcsBreadcrumbButton from '@components/breadcrumb-button/breadcrumb-button';
+
+export default {
+  title: 'Navigation/Breadcrumb/Breadcrumb Button',
+  component: EcsBreadcrumbButton
+};
+
+export const breadcrumbButton = () => ({
+  components: { EcsBreadcrumbButton },
+  template: `<main>
+              <ecs-breadcrumb-button type="root" icon="everchron" title="Everchron" />
+              <ecs-breadcrumb-button clickable>Plaintiffs - RFPs to SFX & Sillerman</ecs-breadcrumb-button>
+              <ecs-breadcrumb-button clickable>Mike Moran in Omaha</ecs-breadcrumb-button>
+              <ecs-breadcrumb-button type="more" clickable />
+              <ecs-breadcrumb-button clickable>Omaha Papers</ecs-breadcrumb-button>
+            </main>
+            `,
+});

package/src/stories/button/button.stories.js

@@ -2,7 +2,7 @@ import EcsButton from '@components/button/button';
 import { action } from '@storybook/addon-actions';
 
 export default {
-  title: 'Buttons/Button',
+  title: 'Action/Button',
   component: EcsButton
 };
 
@@ -24,10 +24,9 @@ export const sizes = () => ({
   components: { EcsButton },
   methods: { action: action('clicked') },
   template: `<main>
-              <ecs-button @click="action" size='xsml' type="primary">Extra Small</ecs-button>
-              <ecs-button @click="action" size='sml' type="primary">Small</ecs-button>
-              <ecs-button @click="action" type="primary">Default</ecs-button>
-              <ecs-button @click="action" size='lg' type="primary">Large</ecs-button>
+              <ecs-button @click="action" size='sml' type="primary" icon="settings">Small</ecs-button>
+              <ecs-button @click="action" size='md' type="primary" icon="settings">Medium</ecs-button>
+              <ecs-button @click="action" size='lg' type="primary"  icon="settings">Large</ecs-button>
             </main>`,
 });
 

package/src/stories/button-collapse/button-collapse.stories.js

@@ -1,7 +1,7 @@
 import EcsButtonCollapse from '@components/button-collapse/button-collapse';
 
 export default {
-  title: 'Buttons/Button Collapse',
+  title: 'Action/Button Collapse',
   component: EcsButtonCollapse
 };
 

package/src/stories/button-context/button-context.stories.js

@@ -3,7 +3,7 @@ import EcsButtonContextGroup from '@components/button-context-group/button-conte
 import { action } from '@storybook/addon-actions';
 
 export default {
-  title: 'Buttons/Button Context',
+  title: 'Action/Button Context',
   component: EcsButtonContext
 };
 

package/src/stories/button-dialog/button-dialog.stories.js

@@ -1,7 +1,7 @@
 import EcsButtonDialog from '@components/button-dialog/button-dialog';
 
 export default {
-  title: 'Buttons/Button Dialog',
+  title: 'Action/Button Dialog',
   component: EcsButtonDialog
 };
 

package/src/stories/button-more/button-more.stories.js

@@ -1,7 +1,7 @@
 import EcsButtonMore from '@components/button-more/button-more';
 
 export default {
-  title: 'Buttons/Button More',
+  title: 'Action/Button More',
   component: EcsButtonMore
 };