@everchron/ec-shards 1.3.5 → 1.4.0

package/src/stories/Changelog.stories.mdx

@@ -6,11 +6,25 @@ import { Meta } from '@storybook/addon-docs/blocks';
   Changelog
 </h1>
 
-## Version 1.3.3 (27 August 2022)
+## Version 1.4.0 (6 September 2022)
 
-### Changes
+### Features
+
+- Added new `EcsTranscriptState` component
+- Added new `EcsLogMessage` component
+- Added broken transcript empty state icon
+- Added info sticker icon
+
+### Fixes
+
+- Cleaned up styles on the EcsDocumentState component and reduced weight of inline styles a bit.
+
+## Version 1.3.6 (29 August 2022)
+
+### Fixes
 
-- Added flexDirection prop to EcsTabs component.
+- Added flex and flexDirection prop to EcsTab component.
+- Removed flex and flexDirection props from EcsTabs component.
 
 ## Version 1.3.2 (27 August 2022)
 

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/party-entry/party-entry.stories.js

@@ -49,14 +49,16 @@ export const partyEntryWithBackground = () => ({
 export const partyEntryAnnotations = () => ({
   components: { EcsPartyEntry },
   template: `<main>
-              <ecs-party-entry background icon="marker" :annotation-color="1">Annotation</ecs-party-entry>
-              <ecs-party-entry background icon="marker" :annotation-color="2">Annotation</ecs-party-entry>
-              <ecs-party-entry background icon="marker" :annotation-color="3">Annotation</ecs-party-entry>
-              <ecs-party-entry background icon="marker" :annotation-color="4">Annotation</ecs-party-entry>
-              <ecs-party-entry background icon="marker" :annotation-color="5">Annotation</ecs-party-entry>
-              <ecs-party-entry background icon="marker" :annotation-color="6">Annotation</ecs-party-entry>
-              <ecs-party-entry background icon="marker" :annotation-color="7">Annotation</ecs-party-entry>
-              <ecs-party-entry background icon="marker" :annotation-color="8">Annotation</ecs-party-entry>
-              <ecs-party-entry background icon="marker" :annotation-color="9">Annotation</ecs-party-entry>
+              <ecs-party-entry background icon="marker" color="#F9DF00">Annotation</ecs-party-entry>
+              <ecs-party-entry background icon="marker" color="#F3A100">Annotation</ecs-party-entry>
+              <ecs-party-entry background icon="marker" color="#B7EA80">Annotation</ecs-party-entry>
+              <ecs-party-entry background icon="marker" color="#48E4C2">Annotation</ecs-party-entry>
+              <ecs-party-entry background icon="marker" color="#489DFF">Annotation</ecs-party-entry>
+              <ecs-party-entry background icon="marker" color="#B877F0">Annotation</ecs-party-entry>
+              <ecs-party-entry background icon="marker" color="#FD78FD">Annotation</ecs-party-entry>
+              <ecs-party-entry background icon="marker" color="#858E9F">Annotation</ecs-party-entry>
+              <ecs-party-entry background icon="marker" color="#EE5452">Annotation</ecs-party-entry>
+              <ecs-party-entry background icon="marker">No Color Defined</ecs-party-entry>
+              <ecs-party-entry icon="marker" color="#EE5452">Annotation</ecs-party-entry>
             </main>`,
 });

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

@@ -9,13 +9,90 @@ export const SwatchesPicker = () => ({
   components: { EcsSwatchesPicker },
   data() {
     return {
-      selectedColor: ''
+      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"
+        }
+      ]
     }
   },
   template: `<div>
-              <ecs-swatches-picker v-model="selectedColor" selected="#F9DF00" />
+              <ecs-swatches-picker v-model="selectedColor" selected="#F9DF00" :swatches="swatchesData" />
               <hr style="border: none; border-bottom: 1px solid #DADEE6; margin: 20px 0">
-              Selected: {{ selectedColor.title }}, {{ selectedColor.color }}
+              Selected: {{ selectedColor }}
             </div>`,
 });
 
@@ -23,12 +100,89 @@ export const SwatchesPickerSizes = () => ({
   components: { EcsSwatchesPicker },
   data() {
     return {
-      selectedColor: ''
+      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"
+        }
+      ]
     }
   },
   template: `<div>
-              <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" />
+              <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" />
             </div>`,
 });

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

@@ -0,0 +1,17 @@
+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="repairing" />
+              <ecs-transcript-state state="corrupted" interactive />
+            </main>`,
+});