@everchron/ec-shards 7.5.7 → 7.5.9

package/package.json

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

package/src/components/data-card/data-card.vue

@@ -25,6 +25,19 @@
     <div class="ecs-data-card-inner">
       <div class="ecs-data-card-row">
         <div class="ecs-data-card-row-inner">
+          <ecs-button
+            @click="isExpanded = !isExpanded"
+            v-if="expandable && expandPosition === 'left'"
+            type="secondary"
+            :aria-controls="expandId"
+            :aria-expanded="isExpanded ? 'true' : 'false'"
+            icon-only
+            :icon="expandIcon ? expandIcon : (isExpanded ? 'chevron-down' : 'chevron-right')"
+            size="sml"
+            :active="isExpanded"
+            :aria-label="expandLabel ? expandLabel : (isExpanded ? 'Collapse' : 'Expand')"
+            class="expand-button-left"
+          />
           <div class="ecs-data-card-row-inner-text">
             <slot></slot>
           </div>
@@ -35,7 +48,7 @@
           </div>
           <ecs-button-table
             @click="isExpanded = !isExpanded"
-            v-if="expandable"
+            v-if="expandable && expandPosition === 'right'"
             :aria-controls="expandId"
             :aria-expanded="isExpanded ? 'true' : 'false'"
             pale
@@ -44,7 +57,7 @@
             :active="isExpanded"
             :icon="expandIcon"
             :label="expandLabel"
-            class="expand-button" />
+            class="expand-button-right" />
         </div>
       </div>
       <div v-if="$slots.meta" class="ecs-data-card-row">
@@ -74,11 +87,12 @@
   import EcsIcon from '../icon/icon'
   import EcsSkeletonLoader from '../skeleton-loader/skeleton-loader'
   import EcsButtonTable from '../button-table/button-table'
+  import EcsButton from '../button/button'
   import EcsFocusRing from '../mixins/focus-ring'
   import { uniqueIdMixin } from '../mixins/unique-id'
 
   export default {
-    components: { EcsIcon, EcsSkeletonLoader, EcsButtonTable, EcsFocusRing },
+    components: { EcsIcon, EcsSkeletonLoader, EcsButtonTable, EcsButton, EcsFocusRing },
     mixins: [uniqueIdMixin],
 
     props: {
@@ -137,6 +151,12 @@
       /** Sets the label of the expand button. */
       expandLabel: {
         type: String
+      },
+      /** Defines the position of the expand button. */
+      expandPosition: {
+        type: String,
+        default: 'right',
+        validator: v => ['right', 'left'].includes(v)
       }
     },
 
@@ -348,10 +368,14 @@
     color: $color-gray-10;
   }
 
-  .expand-button{
+  .expand-button-right{
     margin-left: 8px;
   }
 
+  .expand-button-left{
+    margin: -2px 4px -2px -2px;
+  }
+
   .chained{
     display: inline-flex;
     

package/src/components/donut-chart/donut-chart.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="ecs-donut-chart" :style="wrapperPadding">
+    <svg :height="size" :width="size" :viewBox="viewBox">
+      <g>
+        <circle :cx="size / 2" :cy="size / 2" :r="size / 2" stroke="red" :stroke-width="strokeWidth" :stroke-dasharray="circumference" :stroke-dashoffset="0" fill="transparent" :transform="'rotate(-90 ' + size / 2 + ' ' + size / 2 + ')'" />
+        <circle :cx="size/2" :cy="size/2" :r="size/2" :stroke="color" :stroke-width="strokeWidth" :stroke-dasharray="circumference" :stroke-dashoffset="calculateStrokeDashOffset(value, circumference)" fill="transparent" :transform="'rotate(-90 ' + size/2 + ' ' + size/2 + ')'" />
+      </g>
+    </svg>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    /** The initial value of the chart as a percentage. */
+    value: {
+      type: Number,
+      required: true,
+      validator: value => value >= 0 && value <= 100
+    },
+    /** The color of the chart. */
+    color: {
+      type: String,
+      default: "#6495ED"
+    },
+    /** The width of the chart's stroke. */
+    strokeWidth: {
+      type: Number,
+      default: 30
+    },
+    /** The size of the chart. */
+    size: {
+      type: Number,
+      default: 160
+    }
+  },
+
+  computed: {
+    circumference() {
+      return 2 * Math.PI * (this.size/2)
+    },
+
+    viewBox() {
+      return `0 0 ${this.size} ${this.size}`
+    },
+
+    wrapperPadding() {
+      return { padding: `${this.strokeWidth/2}px` }
+    }
+  },
+
+  methods: {
+    calculateStrokeDashOffset(dataVal, circumference) {
+      const strokeDiff = this.dataPercentage(dataVal) * circumference
+      return circumference - strokeDiff
+    },
+    dataPercentage(dataVal) {
+      return dataVal / 100
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ecs-donut-chart {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  svg{
+    overflow: visible;
+  }
+}
+</style>

package/src/components/jumper-page/jumper-page.vue

@@ -8,7 +8,7 @@
             {{ currentPage }}
           </div>
           <div class="total-pages">of {{ lastPage }}</div>
-          <span v-if="isTranscriptMissingPages" style="color:tomato" title="This transcript has missing page gaps">*</span>
+          <span v-if="isTranscriptMissingPages" class="page-missing-gaps" title="This transcript has missing page gaps">*</span>
         </div>
         <div class="ecs-viewer-pages-pagination">
           <div class="total-pages-relative">{{ altPageNumber }}&nbsp;</div>
@@ -160,4 +160,12 @@
   color: $color-gray-8;
   margin-top: 4px;
 }
+
+.page-missing-gaps{
+  color: $color-red-7;
+  font-size: $type-scale-5-font-size;
+  margin: -6px 0 0 0px;
+  padding: 2px;
+  cursor: help;
+}
 </style>

package/src/stories/data-card/data-card.stories.js

@@ -150,6 +150,20 @@ export const expandable = () => ({
               </ecs-data-card>`
 });
 
+export const expandablePostion = () => ({
+  components: { EcsDataCard, EcsButtonMore },
+  template: `<ecs-data-card expandable expand-position="left">
+                <span>Added last 2 months</span>
+                <span class="subtle">4h ago</span>
+                <template slot="meta">
+                  <span class="subtle"><span class="color-venta-1">32 documents</span> added by Marie Walsh</span>
+                </template>
+                <template slot="expand">
+                  test
+                </template>
+              </ecs-data-card>`
+});
+
 export const loading = () => ({
   components: { EcsDataCardList, EcsDataCard },
   template: `<ecs-data-card-list>

package/src/stories/donut-chart/donut-chart.stories.js

@@ -0,0 +1,12 @@
+import EcsDonutChart from '@components/donut-chart/donut-chart';
+
+export default {
+  title: 'Data/Donut Chart',
+  component: EcsDonutChart
+};
+
+export const chart = () => ({
+  components: { EcsDonutChart },
+  template: `<ecs-donut-chart :value="90" :stroke-width="10" />
+            `,
+});

package/src/stories/jumper-page/jumper-page.stories.js

@@ -14,3 +14,8 @@ export const jumperPageRelative = () => ({
   components: { EcsJumperPage },
   template: `<ecs-jumper-page :current-page="2" :page-count="70" :relative-page="40" :last-page="80" />`,
 });
+
+export const jumperPageRelativeWithPageMissing = () => ({
+  components: { EcsJumperPage },
+  template: `<ecs-jumper-page :current-page="2" :page-count="70" :relative-page="40" :last-page="80" isTranscriptMissingPages />`,
+});