@everchron/ec-shards 0.7.52 → 0.7.55

package/package.json

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

package/src/components/excerpt-snippet/excerpt-snippet.vue

@@ -0,0 +1,269 @@
+<template>
+  <div class="ecs-excerpt-snippet" :class="sizeClass">
+    <div class="ecs-excerpt-title">
+      <div class="ecs-excerpt-title-headline">
+        <ecs-skeleton-loader v-if="icon && loading" type="rect" :width="20" :height="20" />
+        <ecs-icon v-if="icon && !loading" :type="icon" width="20" height="20" />
+        <ecs-skeleton-loader v-if="loading" type="single" :width="20" />
+        <span v-else>{{ headline }}</span>
+      </div>
+      <div class="ecs-excerpt-title-cite" v-if="cite">
+        <ecs-skeleton-loader v-if="loading" type="single" :width="100" />
+        <span v-else>{{ cite }}</span>
+      </div>
+    </div>
+    <div class="ecs-excerpt-content scrollbar scrollbar-sml" :style="maxHeightStyles">
+      <ecs-skeleton-loader v-if="loading" type="multi" :count="3" />
+      <template v-else>
+        <ecs-formatted v-if="type == 'formatted'" :small="smallFormatted">
+          <slot></slot>
+        </ecs-formatted>
+
+        <div v-else-if="type == 'transcript'" class="ecs-excerpt-content-transcript">
+          <slot></slot>
+        </div>
+
+        <div v-else-if="type == 'rectangle'" :style="'background-color:' + annotationBackgroundColor" class="ecs-excerpt-content-rectangle">
+          <span :style="'color:' + annotationTextColor">Rectangle Annotation</span>
+        </div>
+
+        <div v-else class="ecs-excerpt-content-regular">
+          <slot></slot>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+  import EcsIcon from '../icon/icon'
+  import EcsSkeletonLoader from '../skeleton-loader/skeleton-loader'
+  import EcsFormatted from '../formatted/formatted'
+
+  export default {
+    components: { EcsIcon, EcsSkeletonLoader, EcsFormatted },
+
+    props: {
+      type: {
+        type: String,
+        validator: v => ['transcript', 'regular', 'rectangle', 'formatted'].includes(v),
+        default: 'transcript'
+      },
+      size: {
+        type: String,
+        validator: v => ['sml', 'md'].includes(v),
+        default: 'md'
+      },
+      icon: {
+        type: String,
+        default: 'transcript'
+      },
+      headline: {
+        type: String,
+        required: true
+      },
+      cite: {
+        type: String
+      },
+      maxHeight: {
+        type: String
+      },
+      annotationColor: {
+        type: Number,
+        default: null
+      },
+      loading: {
+        type: Boolean,
+        default: false
+      }
+    },
+
+    computed: {
+      smallFormatted() {
+        if (this.size == 'sml')
+          return true
+      },
+
+      sizeClass() {
+        if (this.size && this.size !== '')
+          return `ecs-excerpt-snippet-${this.size}`
+        return this.size
+      },
+
+      maxHeightStyles() {
+        if (this.maxHeight)
+          return `max-height: ${this.maxHeight}; overflow: auto;`
+      },
+
+      annotationBackgroundColor() {
+        switch (this.annotationColor){
+          case 1:
+            return 'rgba(249, 223, 0, 0.2)'
+          case 2:
+            return 'rgba(243, 161, 0, 0.2)'
+          case 3:
+            return 'rgba(183, 234, 128, 0.2)'
+          case 4:
+            return 'rgba(72, 228, 194, 0.2)'
+          case 5:
+            return 'rgba(72, 157, 255, 0.2)'
+          case 6:
+            return 'rgba(184, 119, 240, 0.2)'
+          case 7:
+            return 'rgba(253, 120, 253, 0.2)'
+          case 8:
+            return 'rgba(197, 148, 101, 0.2)'
+          case 9:
+            return 'rgba(133, 142, 159, 0.2)'
+          default:
+            return 'rgba(249, 223, 0, 0.2)'
+        }
+      },
+
+      annotationTextColor() {
+        switch (this.annotationColor){
+          case 1:
+            return '#B57100'
+          case 2:
+            return '#A95A00'
+          case 3:
+            return '#429700'
+          case 4:
+            return '#06956E'
+          case 5:
+            return '#0E4BBE'
+          case 6:
+            return '#6B1ABA'
+          case 7:
+            return '#BE15BF'
+          case 8:
+            return '#7B3F1B'
+          case 9:
+            return '#364258'
+          default:
+            return '#B57100'
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../tokens/tokens";
+@import "../mixins/svg-uri";
+
+.ecs-excerpt-snippet{
+  border-radius: 6px;
+  background: $gray-2;
+  padding: 6px;
+  width: 100%;
+}
+
+.ecs-excerpt-snippet-sml{
+  padding: 4px;
+  border-radius: 4px;
+
+  .ecs-excerpt-content{
+    padding: 8px;
+    border-radius: 2px;
+  }
+
+  .ecs-excerpt-title{
+    padding: 2px 4px 4px 2px;
+    font-size: 12px;
+  }
+
+  .ecs-excerpt-content-transcript{
+    font-size: 10px;
+  }
+
+  .ecs-excerpt-content-regular,
+  .ecs-excerpt-content-rectangle{
+    font-size: 12px;
+  }
+}
+
+.ecs-excerpt-title{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 4px 12px 4px;
+  color: $gray-10;
+  font-size: 14px;
+
+  &-headline{
+    display: flex;
+    align-items: center;
+    flex: 1;
+  }
+
+  .icon,
+  .skeleton-rectangle{
+    margin-right: 4px;
+  }
+
+  &-cite{
+    flex-shrink: 0;
+    text-align: right;
+    min-width: 60px;
+  }
+}
+
+.ecs-excerpt-content{
+  background: #FFFFFF;
+  box-shadow: 0 0 0 1px rgba($gray-10, .06), 0 1px 3px 0 rgba($gray-10, .1);
+  border-radius: 4px;
+  padding: 12px;
+
+  &-transcript{
+    line-height: 1.6em;
+    white-space: pre-wrap;
+    font-family: $mono;
+    color: $gray-14;
+    font-size: 12px;
+  }
+
+  &-regular{
+    white-space: pre-wrap;
+    line-height: 1.4em;
+    font-size: 14px;
+    color: $gray-14;
+  }
+
+  &-rectangle{
+    text-align: center;
+    font-size: 14px;
+    padding: .5em;
+    border-radius: 2px;
+  }
+}
+</style>
+
+<style lang="scss">
+@import "../tokens/tokens";
+
+.ecs-excerpt-content-transcript{
+  span{
+    display: block;
+    position: relative;
+
+    &[data-line]:before{
+      content: attr(data-line);
+      min-width: 3em;
+      display: inline-block;
+      color: $gray-5;
+    }
+
+    &[data-line="01"]:not(:first-child):after{
+      content: "";
+      position: absolute;
+      width: 100%;
+      height: 1px;
+      top: 0;
+      left: 0;
+      background: $gray-3;
+      border-radius: 1px;
+    }
+  }
+}
+</style>

package/src/stories/excerpt-snippet/excerpt-snippet.stories.js

@@ -0,0 +1,52 @@
+import EcsExcerptSnippet from '@components/excerpt-snippet/excerpt-snippet';
+
+export default {
+  title: 'Content Structures/Excerpt Snippet',
+  component: EcsExcerptSnippet
+};
+
+export const transcript = () => ({
+  components: { EcsExcerptSnippet },
+  template: `<main>
+              <ecs-excerpt-snippet cite="3:6-4:3" headline="Excerpt Text" style="margin-bottom:16px"><div>
+              <span data-line="24">That was a false statement, wasn't it?</span><span data-line="25">A.   I mean, it sucks for those investments.</span><span data-line="01">Good thing I didn't have anything to do with them.</span></div></ecs-excerpt-snippet>
+              <ecs-excerpt-snippet size="sml" cite="3:6-4:3" headline="Excerpt Text"><div>
+              <span data-line="06">That was a false statement, wasn't it?</span><span data-line="07">A.   I mean, it sucks for those investments.</span><span data-line="08">Good thing I didn't have anything to do with them.</span></div></ecs-excerpt-snippet>
+            </main>`,
+});
+
+export const formattedText = () => ({
+  components: { EcsExcerptSnippet },
+  template: `<main>
+              <ecs-excerpt-snippet headline="Summary" type="formatted" style="margin-bottom:16px">
+                <p>This is a <b>formatted</b> text.</p>
+              </ecs-excerpt-snippet>
+              <ecs-excerpt-snippet headline="Summary" type="formatted" size="sml">
+                <p>This is a <b>formatted</b> text.</p>
+              </ecs-excerpt-snippet>
+            </main>`,
+});
+
+export const rectangleAnnotation = () => ({
+  components: { EcsExcerptSnippet },
+  template: `<main>
+              <ecs-excerpt-snippet headline="Document Headline" type="rectangle" icon="document" :annotation-color="1" style="margin-bottom:16px" />
+              <ecs-excerpt-snippet size="sml" headline="Document Headline" type="rectangle" icon="document" :annotation-color="3" />
+            </main>`,
+});
+
+export const regular = () => ({
+  components: { EcsExcerptSnippet },
+  template: `<main>
+              <ecs-excerpt-snippet headline="Document Headline" type="regular" icon="document">The below note outlines the changes I made to the Enron Machine and
+Mechanical Services, Inc.</ecs-excerpt-snippet>
+            </main>`,
+});
+
+export const loading = () => ({
+  components: { EcsExcerptSnippet },
+  template: `<main>
+              <ecs-excerpt-snippet loading headline="Document Headline" type="regular" icon="document">The below note outlines the changes I made to the Enron Machine and
+Mechanical Services, Inc.</ecs-excerpt-snippet>
+            </main>`,
+});

package/src/stories/excerpt-snippet/excerpt-snippet.stories.mdx

@@ -0,0 +1,98 @@
+import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
+import EcsExcerptSnippet from '@components/excerpt-snippet/excerpt-snippet';
+import * as stories from './excerpt-snippet.stories.js';
+
+<Meta
+  title="Content Structures/Excerpt Snippet"
+  component={EcsExcerptSnippet} />
+
+# Excerpt Snippet `EcsExcerptSnippet`
+
+Excerpt snippets are small containers that are used to display a summary of a piece of content. They are used mostly for excerpts of transcripts.
+
+## Transcript Excerpt
+
+The default exerpt snippet type is a transcript text snippet.
+
+<Canvas withSource="none" withToolbar={true}>
+  <Story name="Transcript" height="100px">
+    {stories.transcript()}
+  </Story>
+</Canvas>
+
+```js
+<ecs-excerpt-snippet cite="3:6-4:3" headline="Excerpt Text">
+  BY MR. KANTER:
+    Q.   Do you have any college education?
+    A.   Oh, yeah, yeah, uh-uh.  Oh, you want to
+  know what the details of it is?
+    Q.   Sure.
+</ecs-excerpt-snippet>
+```
+
+## Regular Excerpt
+
+By setting the `type` prop to `regular`, you can render a regular excerpt.
+
+<Canvas withSource="none" withToolbar={true}>
+  <Story name="Regular" height="100px">
+    {stories.regular()}
+  </Story>
+</Canvas>
+
+```js
+<ecs-excerpt-snippet headline="Document Headline" type="regular" icon="document">
+The below note outlines the changes I made to the Enron Machine and
+Mechanical Services, Inc.
+</ecs-excerpt-snippet>
+```
+
+## Regular Excerpt
+
+By setting the `type` prop to `rectangle`, you can render a rectangle annotation with it's given `annotation-color` (1-9).
+
+<Canvas withSource="none" withToolbar={true}>
+  <Story name="Rectangle Annotation" height="100px">
+    {stories.rectangleAnnotation()}
+  </Story>
+</Canvas>
+
+```js
+<ecs-excerpt-snippet headline="Document Headline" type="rectangle" icon="document" :annotation-color="1" />
+```
+
+## Formatted Text
+
+By setting the `type` prop to `formatted`, you can render formatted text inside the snippet content area.
+
+<Canvas withSource="none" withToolbar={true}>
+  <Story name="Formatted Text" height="100px">
+    {stories.formattedText()}
+  </Story>
+</Canvas>
+
+```js
+<ecs-excerpt-snippet headline="Summary" type="formatted">
+  <p>This is a <b>formatted</b> text.</p>
+</ecs-excerpt-snippet>
+```
+
+## Loading
+
+By setting the `loading` prop, the excerpt snippet shows a loading indicator.
+
+<Canvas withSource="none" withToolbar={true}>
+  <Story name="Loading" height="100px">
+    {stories.loading()}
+  </Story>
+</Canvas>
+
+```js
+<ecs-excerpt-snippet loading headline="Summary" type="formatted">
+  <p>This is a <b>formatted</b> text.</p>
+</ecs-excerpt-snippet>
+```
+
+## Props, Slots and Events
+
+<ArgsTable of={EcsExcerptSnippet} />