@everchron/ec-shards 2.0.0 → 2.0.2

package/src/stories/legend-item/legend-item.stories.js

@@ -0,0 +1,50 @@
+import EcsLegendItem from '@components/legend-item/legend-item';
+
+export default {
+  title: 'Data/Legend Item',
+  component: EcsLegendItem,
+  parameters: {
+    docs: {
+      description: {
+        component: 'The `EcsLegendItem` component is used to provide information about plotted areas in charts or other data visualizations. It can also be used as a legend for e.g. parties or designation types within a transcript. Avoid mixing sizes in one legend item list.',
+      },
+    }
+  }
+};
+
+export const legendItem = () => ({
+  components: { EcsLegendItem },
+  template: `<div style="width: 320px">
+              <ecs-legend-item label="Tags" :count="20" :percentage="40" color="#157EFB" />
+              <ecs-legend-item label="Documents" :count="310" :percentage="60" color="#AB4FCB" />
+            </div>`,
+});
+
+export const legendItemSizes = () => ({
+  components: { EcsLegendItem },
+  template: `<div style="width: 320px">
+              <ecs-legend-item size="sml" label="Small" :count="20" :percentage="40" color="#157EFB" />
+              <ecs-legend-item size="sml" label="Small" :count="310" :percentage="60" color="#AB4FCB" />
+              <ecs-legend-item label="Medium" :count="20" :percentage="40" color="#157EFB" />
+              <ecs-legend-item label="Medium" :count="310" :percentage="60" color="#AB4FCB" />
+            </div>`,
+});
+
+export const legendItemTypes = () => ({
+  components: { EcsLegendItem },
+  template: `<div style="width: 320px">
+              <ecs-legend-item type="fill" label="Fill" :count="20" :percentage="40" color="#157EFB" />
+              <ecs-legend-item type="fill" label="Fill" :count="310" :percentage="60" color="#AB4FCB" style="margin-bottom:20px" />
+              <ecs-legend-item type="line" label="Line" :count="20" :percentage="40" color="#157EFB" />
+              <ecs-legend-item type="line" label="Line" :count="310" :percentage="60" color="#AB4FCB" />
+            </div>`,
+});
+
+export const legendItemHighlightAndHover = () => ({
+  components: { EcsLegendItem },
+  template: `<div style="width: 320px">
+              <ecs-legend-item hover label="Hoverable" :count="20" :percentage="40" color="#157EFB" />
+              <ecs-legend-item label="Not Hoverable" :count="310" :percentage="60" color="#AB4FCB" />
+              <ecs-legend-item highlight label="Highlighted" :count="310" :percentage="60" color="#AB4FCB" />
+            </div>`,
+});

package/src/stories/log-message/log-message.stories.js

@@ -0,0 +1,37 @@
+import EcsLogMessage from '@components/log-message/log-message';
+
+export default {
+  title: 'Data/Log Message',
+  component: EcsLogMessage
+};
+
+export const logMessageTypes = () => ({
+  components: { EcsLogMessage },
+  template: `<div>
+              <ecs-log-message meta="07/21/2022, 11:23 AM">Message</ecs-log-message>
+              <ecs-log-message type="info" meta="07/21/2022, 11:23 AM">Message</ecs-log-message>
+              <ecs-log-message type="warning" meta="07/21/2022, 11:23 AM">Message</ecs-log-message>
+              <ecs-log-message type="success" meta="07/21/2022, 11:23 AM">Message</ecs-log-message>
+              <ecs-log-message type="error" meta="07/21/2022, 11:23 AM">Message</ecs-log-message>
+            </div>`,
+});
+
+export const logMessageHighlight = () => ({
+  components: { EcsLogMessage },
+  template: `<div>
+              <ecs-log-message type="info" meta="07/21/2022, 11:23 AM" highlight>Message</ecs-log-message>
+              <ecs-log-message type="warning" meta="07/21/2022, 11:23 AM" highlight>Message</ecs-log-message>
+              <ecs-log-message type="success" meta="07/21/2022, 11:23 AM" highlight>Message</ecs-log-message>
+              <ecs-log-message type="error" meta="07/21/2022, 11:23 AM" highlight>Message</ecs-log-message>
+            </div>`,
+});
+
+export const logMessageRichText = () => ({
+  components: { EcsLogMessage },
+  template: `<div>
+              <ecs-log-message type="error" meta="07/21/2022, 11:23 AM" highlight>
+                <p>Broken Transcript Issue opened by <strong><a href="mailto:r.reyes@orrick.com">r.reyes@orrick.com</a></strong></p>
+                <p>Hey there, it looks like this transcript is cut-off at page 58, even though the original file has a total of 112 pages. Additionally there are lines of text missing at the end of each page.</p>
+              </ecs-log-message>
+            </div>`,
+});

package/src/stories/overlay/overlay.stories.js

@@ -16,7 +16,9 @@ export const overlay = () => ({
                 <button @click="showOverlay = true">Show Overlay</button>
                 <ecs-overlay :show="showOverlay" @close="showOverlay = false" icon="archive" header-title="Title" header-title-emphasized="Overlay:" header-title-subline="John G. Deposition (10/12/2020) – Pages 1 - 321">
                   
-                  content area
+                  <div style="height:600px;background:gray">
+                    <div style="background:lightgray">Inner Content Area</div>
+                  </div>
 
                   <template slot="footer">footer area</template>
                 </ecs-overlay>
@@ -33,8 +35,10 @@ export const overlayFullWidth = () => ({
   template: `<div>
                 <button @click="showOverlay = true">Show Overlay</button>
                 <ecs-overlay full-width :show="showOverlay" @close="showOverlay = false" icon="archive" header-title="Title" header-title-emphasized="Overlay:" header-title-subline="John G. Deposition (10/12/2020) – Pages 1 - 321">
-                  
-                  content area
+
+                  <div style="height:600px;background:gray">
+                    <div style="background:lightgray">Inner Content Area</div>
+                  </div>
 
                   <template slot="footer">footer area</template>
                 </ecs-overlay>
@@ -51,10 +55,14 @@ export const overlayTabs = () => ({
   template: `<div>
                 <button @click="showOverlay = true">Show Overlay</button>
                 <ecs-overlay :show="showOverlay" @close="showOverlay = false" icon="archive" header-title="Title" header-title-emphasized="Overlay:" header-title-subline="John G. Deposition (10/12/2020) – Pages 1 - 321">
-                  
-                  content area
 
-                  <template slot="tabs">tab area</template>
+                  <div style="height:600px;background:gray">
+                    <div style="background:lightgray">Inner Content Area</div>
+                  </div>
+
+                  <template slot="tabs">
+                    <div style="height:500px;background:gray">Tab Area</div>
+                  </template>
                   <template slot="footer">footer area</template>
                 </ecs-overlay>
               </div>`,
@@ -70,10 +78,14 @@ export const overlayFullWidthTabs = () => ({
   template: `<div>
                 <button @click="showOverlay = true">Show Overlay</button>
                 <ecs-overlay full-width :show="showOverlay" @close="showOverlay = false" icon="archive" header-title="Title" header-title-emphasized="Overlay:" header-title-subline="John G. Deposition (10/12/2020) – Pages 1 - 321">
-                  
-                  content area
 
-                  <template slot="tabs">tab area</template>
+                  <div style="height:600px;background:gray">
+                    <div style="background:lightgray">Inner Content Area</div>
+                  </div>
+
+                  <template slot="tabs">
+                    <div style="height:500px;background:gray">Tab Area</div>
+                  </template>
                   <template slot="footer">footer area</template>
                 </ecs-overlay>
               </div>`,
@@ -89,11 +101,15 @@ export const overlaySidebar = () => ({
   template: `<div>
                 <button @click="showOverlay = true">Show Overlay</button>
                 <ecs-overlay :show="showOverlay" @close="showOverlay = false" icon="archive" header-title="Title" header-title-emphasized="Overlay:" header-title-subline="John G. Deposition (10/12/2020) – Pages 1 - 321" sidebar-icon-badge>
-                  
-                  <div style="height:700px;background:gray">content area</div>
+
+                  <div style="height:600px;background:gray">
+                    <div style="background:lightgray">Inner Content Area</div>
+                  </div>
 
                   <template slot="footer">footer area</template>
-                  <template slot="sidebar"><div style="height:500px;background:gray">sidebar area</div></template>
+                  <template slot="sidebar">
+                    <div style="height:500px;background:gray">Sidebar Area</div>
+                  </template>
                 </ecs-overlay>
               </div>`,
 });
@@ -109,10 +125,39 @@ export const overlayTabsSidebar = () => ({
                 <button @click="showOverlay = true">Show Overlay</button>
                 <ecs-overlay :show="showOverlay" @close="showOverlay = false" icon="archive" header-title="Title" header-title-emphasized="Overlay:" header-title-subline="John G. Deposition (10/12/2020) – Pages 1 - 321" sidebar-icon-badge>
 
-                  <div style="height:800px;background:gray">content area</div>
+                  <div style="height:600px;background:gray">
+                    <div style="background:lightgray">Inner Content Area</div>
+                  </div>
+
+                  <template slot="tabs">
+                    <div style="height:500px;background:gray">Tab Area</div>
+                  </template>
+                  <template slot="sidebar">
+                    <div style="height:500px;background:gray">Sidebar Area</div>
+                  </template>
+                  <template slot="footer">footer area</template>
+                </ecs-overlay>
+              </div>`,
+});
+
+export const overlayBlockingContent = () => ({
+  components: { EcsOverlay },
+  data() {
+    return {
+      showOverlay: false
+    }
+  },
+  template: `<div>
+                <button @click="showOverlay = true">Show Overlay</button>
+                <ecs-overlay block-content :show="showOverlay" @close="showOverlay = false" icon="archive" header-title="Title" header-title-emphasized="Overlay:" header-title-subline="John G. Deposition (10/12/2020) – Pages 1 - 321">
+
+                  <div style="height:600px;background:gray">
+                    <div style="background:lightgray">Inner Content Area</div>
+                  </div>
 
-                  <template slot="tabs">tab area</template>
-                  <template slot="sidebar"><div style="height:500px;background:gray">sidebar area</div></template>
+                  <template slot="tabs">
+                    <div style="height:500px;background:gray">Tab Area</div>
+                  </template>
                   <template slot="footer">footer area</template>
                 </ecs-overlay>
               </div>`,

package/src/stories/quicklink/quicklink.stories.js

@@ -27,5 +27,10 @@ export const quicklinkFavorability = () => ({
 
 export const quicklinkThreeWaySwitch = () => ({
   components: { EcsQuicklink },
-  template: `<ecs-quicklink type="switch" label="Filter" :value="true" :valueToggle="true" :count="12" />`,
+  data() {
+    return {
+      value: false,
+    }
+  },
+  template: `<ecs-quicklink @input="value = !value" :active="value" type="switch" label="Filter" :value="value" :valueToggle="true" :count="12" />`,
 });

package/src/stories/sidebar/sidebar-content.stories.js

@@ -0,0 +1,27 @@
+import EcsSidebarContent from '@components/sidebar-content/sidebar-content';
+
+export default {
+  title: 'Patterns/Sidebar/Sidebar Content',
+  component: EcsSidebarContent
+};
+
+export const sidebarContent = () => ({
+  components: { EcsSidebarContent },
+  template: `<ecs-sidebar-content>
+                Content
+              </ecs-sidebar-content>`
+});
+
+export const sidebarContentIndentation = () => ({
+  components: { EcsSidebarContent },
+  template: `<ecs-sidebar-content indent>
+                Content
+              </ecs-sidebar-content>`
+});
+
+export const sidebarContentBlocked = () => ({
+  components: { EcsSidebarContent },
+  template: `<ecs-sidebar-content block-content>
+                Blocked Content
+              </ecs-sidebar-content>`
+});

package/src/stories/swatches-picker/swatches-picker.stories.js

@@ -9,90 +9,13 @@ export const SwatchesPicker = () => ({
   components: { EcsSwatchesPicker },
   data() {
     return {
-      selectedColor: '',
-      swatchesData: [
-        {
-          "id": 1,
-          "title": "Yellow",
-          "hex": "#F9DF00"
-        },
-        {
-          "id": 2,
-          "title": "Orange",
-          "hex": "#F3A100"
-        },
-        {
-          "id": 3,
-          "title": "Lime",
-          "hex": "#B7EA80"
-        },
-        {
-          "id": 4,
-          "title": "Cyan",
-          "hex": "#48E4C2"
-        },
-        {
-          "id": 5,
-          "title": "Blue",
-          "hex": "#489DFF"
-        },
-        {
-          "id": 6,
-          "title": "Indigo",
-          "hex": "#B877F0"
-        },
-        {
-          "id": 7,
-          "title": "Pink",
-          "hex": "#FD78FD"
-        },
-        {
-          "id": 8,
-          "title": "Brown",
-          "hex": "#C59465"
-        },
-        {
-          "id": 9,
-          "title": "Grey",
-          "hex": "#858E9F"
-        },
-        {
-          "id": 10,
-          "title": "Red",
-          "hex": "#EE5452"
-        },
-        {
-          "id": 11,
-          "title": "Dark Blue",
-          "hex": "#227FD3"
-        },
-        {
-          "id": 12,
-          "title": "Green",
-          "hex": "#5DAF00"
-        },
-        {
-          "id": 13,
-          "title": "Brass",
-          "hex": "#A4927A"
-        },
-        {
-          "id": 14,
-          "title": "Silver",
-          "hex": "#95989C"
-        },
-        {
-          "id": 15,
-          "title": "Gold",
-          "hex": "#D78B21"
-        }
-      ]
+      selectedColor: ''
     }
   },
   template: `<div>
-              <ecs-swatches-picker v-model="selectedColor" selected="#F9DF00" :swatches="swatchesData" />
+              <ecs-swatches-picker v-model="selectedColor" selected="#F9DF00" />
               <hr style="border: none; border-bottom: 1px solid #DADEE6; margin: 20px 0">
-              Selected: {{ selectedColor }}
+              Selected: {{ selectedColor.title }}, {{ selectedColor.color }}
             </div>`,
 });
 
@@ -100,89 +23,12 @@ export const SwatchesPickerSizes = () => ({
   components: { EcsSwatchesPicker },
   data() {
     return {
-      selectedColor: '',
-      swatchesData: [
-        {
-          "id": 1,
-          "title": "Yellow",
-          "hex": "#F9DF00"
-        },
-        {
-          "id": 2,
-          "title": "Orange",
-          "hex": "#F3A100"
-        },
-        {
-          "id": 3,
-          "title": "Lime",
-          "hex": "#B7EA80"
-        },
-        {
-          "id": 4,
-          "title": "Cyan",
-          "hex": "#48E4C2"
-        },
-        {
-          "id": 5,
-          "title": "Blue",
-          "hex": "#489DFF"
-        },
-        {
-          "id": 6,
-          "title": "Indigo",
-          "hex": "#B877F0"
-        },
-        {
-          "id": 7,
-          "title": "Pink",
-          "hex": "#FD78FD"
-        },
-        {
-          "id": 8,
-          "title": "Brown",
-          "hex": "#C59465"
-        },
-        {
-          "id": 9,
-          "title": "Grey",
-          "hex": "#858E9F"
-        },
-        {
-          "id": 10,
-          "title": "Red",
-          "hex": "#EE5452"
-        },
-        {
-          "id": 11,
-          "title": "Dark Blue",
-          "hex": "#227FD3"
-        },
-        {
-          "id": 12,
-          "title": "Green",
-          "hex": "#5DAF00"
-        },
-        {
-          "id": 13,
-          "title": "Brass",
-          "hex": "#A4927A"
-        },
-        {
-          "id": 14,
-          "title": "Silver",
-          "hex": "#95989C"
-        },
-        {
-          "id": 15,
-          "title": "Gold",
-          "hex": "#D78B21"
-        }
-      ]
+      selectedColor: ''
     }
   },
   template: `<div>
-              <ecs-swatches-picker v-model="selectedColor" size="sml" :swatches="swatchesData" selected="#D78B21" />
-              <ecs-swatches-picker v-model="selectedColor" size="md" :swatches="swatchesData" selected="#F9DF00" />
-              <ecs-swatches-picker v-model="selectedColor" size="lg" :swatches="swatchesData" selected="#F9DF00" />
+              <ecs-swatches-picker v-model="selectedColor" size="sml" selected="#F9DF00" />
+              <ecs-swatches-picker v-model="selectedColor" size="md" selected="#F9DF00" />
+              <ecs-swatches-picker v-model="selectedColor" size="lg" selected="#F9DF00" />
             </div>`,
 });

package/src/stories/switch/switch.stories.js

@@ -15,7 +15,7 @@ export const regular = () => ({
   },
   template: `<div>
               <ecs-switch v-model="first">{{ first }}</ecs-switch>
-              <ecs-switch v-model="second" disabled>{{ second }}</ecs-switch>
+              <ecs-switch v-model="second">{{ second }}</ecs-switch>
             </div>`,
 });
 
@@ -23,6 +23,7 @@ export const sizes = () => ({
   components: { EcsSwitch },
   template: `<div>
               <ecs-switch size="sml">Small</ecs-switch>
+              <ecs-switch size="sml-toggle">Small Toggle</ecs-switch>
               <ecs-switch>Default</ecs-switch>
               <ecs-switch size="lg">Large</ecs-switch>
             </div>`,
@@ -32,3 +33,22 @@ export const standalone = () => ({
   components: { EcsSwitch },
   template: `<ecs-switch standalone />`,
 });
+
+export const indeterminateSwitch = () => ({
+  components: { EcsSwitch },
+  template: `<div>
+              <ecs-switch indeterminate size="sml">Small</ecs-switch>
+              <ecs-switch indeterminate>Default</ecs-switch>
+              <ecs-switch indeterminate size="lg">Large</ecs-switch>
+            </div>`,
+});
+
+export const coloredSwitch = () => ({
+  components: { EcsSwitch },
+  data() {
+    return {
+      first: false
+    }
+  },
+  template: `<ecs-switch colored v-model="first">Colored Switch</ecs-switch>`,
+});

package/src/stories/transcript-state/transcript-state.stories.js

@@ -0,0 +1,16 @@
+import EcsTranscriptState from '@components/transcript-state/transcript-state';
+
+export default {
+  title: 'Feedback/Transcript State',
+  component: EcsTranscriptState
+};
+
+export const statusIndicator = () => ({
+  components: { EcsTranscriptState },
+  template: `<main>
+              <ecs-transcript-state state="loading" />
+              <ecs-transcript-state state="healthy" />
+              <ecs-transcript-state state="corrupted" />
+              <ecs-transcript-state state="corrupted" interactive />
+            </main>`,
+});