@everchron/ec-shards 1.3.7 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.eslintrc.js +2 -5
- package/dist/ec-shards.common.js +472 -198
- package/dist/ec-shards.common.js.map +1 -1
- package/dist/ec-shards.css +1 -1
- package/dist/ec-shards.umd.js +472 -198
- package/dist/ec-shards.umd.js.map +1 -1
- package/dist/ec-shards.umd.min.js +2 -2
- package/dist/ec-shards.umd.min.js.map +1 -1
- package/package.json +6 -5
- package/src/assets/icons/empty-broken-transcript.svg +1 -0
- package/src/assets/icons/sticker-info.svg +1 -0
- package/src/components/button-toolbar-icon/button-toolbar-icon.vue +1 -4
- package/src/components/document-state/document-state.vue +20 -8
- package/src/components/index.js +4 -0
- package/src/components/log-message/log-message.vue +144 -0
- package/src/components/sticker/sticker.vue +4 -2
- package/src/components/transcript-state/transcript-state.vue +109 -0
- package/src/stories/Changelog.stories.mdx +13 -0
- package/src/stories/log-message/log-message.stories.js +37 -0
- package/src/stories/transcript-state/.DS_Store +0 -0
- package/src/stories/transcript-state/transcript-state.stories.js +17 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@everchron/ec-shards",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Everchron Shards UI Library",
|
|
6
6
|
"repository": "https://github.com/everchron/ec-shards.git",
|
|
@@ -30,16 +30,17 @@
|
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
32
|
"@babel/core": "^7.13.15",
|
|
33
|
-
"@storybook/addon-actions": "^6.5.
|
|
34
|
-
"@storybook/addon-essentials": "^6.5.
|
|
35
|
-
"@storybook/addon-links": "^6.5.
|
|
36
|
-
"@storybook/vue": "^6.5.
|
|
33
|
+
"@storybook/addon-actions": "^6.5.10",
|
|
34
|
+
"@storybook/addon-essentials": "^6.5.10",
|
|
35
|
+
"@storybook/addon-links": "^6.5.10",
|
|
36
|
+
"@storybook/vue": "^6.5.10",
|
|
37
37
|
"@vue/cli-plugin-babel": "~4.5.0",
|
|
38
38
|
"@vue/cli-service": "~4.5.0",
|
|
39
39
|
"babel-eslint": "^10.1.0",
|
|
40
40
|
"babel-loader": "^8.2.2",
|
|
41
41
|
"core-js": "^3.6.5",
|
|
42
42
|
"eslint": "^6.7.2",
|
|
43
|
+
"eslint-plugin-storybook": "^0.6.4",
|
|
43
44
|
"eslint-plugin-vue": "^6.2.2",
|
|
44
45
|
"node-sass": "^5.0.0",
|
|
45
46
|
"sass-loader": "^10.1.1",
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg width="140" height="140" fill="none" xmlns="http://www.w3.org/2000/svg"><path vector-effect="non-scaling-stroke" d="M31.25 23.333h67.083C104.777 23.333 110 28.557 110 35M61.5 37.77h35M56.5 37.77h-4M61.5 43.77h30M56.5 43.77h-4M61.5 49.77h24M56.5 49.77h-4M61.5 55.77h20M56.5 55.77h-4M61.5 61.77h19M56.5 61.77h-4M61.5 67.77h19M56.5 67.77h-4M61.5 73.77h20M56.5 73.77h-4M61.5 79.77h23M56.5 79.77h-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path vector-effect="non-scaling-stroke" d="M48.75 116.667h67.083c6.444 0 11.667-5.224 11.667-11.667v-5.833a5.833 5.833 0 0 0-5.833-5.834H63.333a5.833 5.833 0 0 0-5.833 5.834v8.75a8.75 8.75 0 0 1-8.75 8.75Zm0 0a8.75 8.75 0 0 1-8.75-8.75V58.333m0 .648V32.083a8.75 8.75 0 1 0-17.5 0v14.584a5.833 5.833 0 0 0 5.833 5.833H40v6.481ZM101.996 55.49a9.533 9.533 0 0 1 6.042.006 9.99 9.99 0 0 1-4.27 19.433 10.102 10.102 0 0 1-8.277-6.886 9.531 9.531 0 0 1 0-6.047 1 1 0 0 1 1.662-.377l5.614 5.614 4.472-4.472-5.615-5.614a1 1 0 0 1 .372-1.656v0Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path vector-effect="non-scaling-stroke" d="M117.728 77.728c7.029-7.03 7.029-18.426 0-25.456-7.029-7.03-18.426-7.03-25.456 0-7.03 7.03-7.03 18.426 0 25.456 7.03 7.03 18.427 7.03 25.456 0ZM107.581 74.652l6.112 6.112M114.653 67.582l6.111 6.111" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 14.75a6.75 6.75 0 1 0 0-13.5 6.75 6.75 0 0 0 0 13.5Z" fill="#6BAFFF" stroke="#fff" stroke-width="1.5"/><path d="M8.2 11.484v-3.75h-1" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><circle cx="7.8" cy="4.8" r="1" fill="#fff"/></svg>
|
|
@@ -4,16 +4,20 @@
|
|
|
4
4
|
<div v-else class="no-txt" />
|
|
5
5
|
<div v-if="instantView" class="instant" />
|
|
6
6
|
<div v-else class="no-instant" />
|
|
7
|
-
<
|
|
7
|
+
<span v-if="loading" class="loading">
|
|
8
|
+
<ecs-icon type="loading" width="18px" height="18px" color="#202127" />
|
|
9
|
+
</span>
|
|
8
10
|
</div>
|
|
9
11
|
</template>
|
|
10
12
|
|
|
11
13
|
<script>
|
|
12
14
|
import EcsAnimations from '../animations/animations'
|
|
15
|
+
import EcsIcon from '../icon/icon'
|
|
13
16
|
|
|
14
17
|
export default {
|
|
15
18
|
components: {
|
|
16
|
-
EcsAnimations
|
|
19
|
+
EcsAnimations,
|
|
20
|
+
EcsIcon
|
|
17
21
|
},
|
|
18
22
|
props: {
|
|
19
23
|
/** Determines if the document has been processed by OCR. */
|
|
@@ -72,12 +76,20 @@
|
|
|
72
76
|
}
|
|
73
77
|
|
|
74
78
|
.loading{
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
79
|
+
border-radius: 100%;
|
|
80
|
+
background: #FFF;
|
|
81
|
+
width: 18px;
|
|
82
|
+
height: 18px;
|
|
83
|
+
position: absolute;
|
|
84
|
+
bottom: -3px;
|
|
85
|
+
right: 0;
|
|
86
|
+
display: block;
|
|
87
|
+
|
|
88
|
+
.icon{
|
|
89
|
+
position: absolute;
|
|
90
|
+
inset: 0;
|
|
91
|
+
animation: spin 1.5s infinite linear reverse;
|
|
92
|
+
}
|
|
81
93
|
}
|
|
82
94
|
}
|
|
83
95
|
</style>
|
package/src/components/index.js
CHANGED
|
@@ -69,6 +69,7 @@ import EcsJumperPage from "./jumper-page/jumper-page.vue"
|
|
|
69
69
|
import EcsLayoutIndex from "./layout-index/layout-index.vue"
|
|
70
70
|
import EcsLayoutDirectory from "./layout-directory/layout-directory.vue"
|
|
71
71
|
import EcsLayoutDataTable from "./layout-data-table/layout-data-table.vue"
|
|
72
|
+
import EcsLogMessage from "./log-message/log-message.vue"
|
|
72
73
|
import EcsMap from "./map/map.vue"
|
|
73
74
|
import EcsModal from "./modal/modal.vue"
|
|
74
75
|
import EcsModalHeader from "./modal-header/modal-header.vue"
|
|
@@ -117,6 +118,7 @@ import EcsText from "./text/text.vue"
|
|
|
117
118
|
import EcsToast from "./toast/toast.vue"
|
|
118
119
|
import EcsToasts from "./toasts/toasts.vue"
|
|
119
120
|
import EcsToolbar from "./toolbar/toolbar.vue"
|
|
121
|
+
import EcsTranscriptState from "./transcript-state/transcript-state.vue"
|
|
120
122
|
import EcsTreeList from "./tree-list/tree-list.vue"
|
|
121
123
|
import EcsTreeListItem from "./tree-list-item/tree-list-item.vue"
|
|
122
124
|
import EcsVideo from "./video/video.vue"
|
|
@@ -190,6 +192,7 @@ const Components = {
|
|
|
190
192
|
EcsLayoutIndex,
|
|
191
193
|
EcsLayoutDirectory,
|
|
192
194
|
EcsLayoutDataTable,
|
|
195
|
+
EcsLogMessage,
|
|
193
196
|
EcsMap,
|
|
194
197
|
EcsModal,
|
|
195
198
|
EcsModalHeader,
|
|
@@ -238,6 +241,7 @@ const Components = {
|
|
|
238
241
|
EcsToast,
|
|
239
242
|
EcsToasts,
|
|
240
243
|
EcsToolbar,
|
|
244
|
+
EcsTranscriptState,
|
|
241
245
|
EcsTreeList,
|
|
242
246
|
EcsTreeListItem,
|
|
243
247
|
EcsVideo
|
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<ecs-flex-row class="ecs-log-message" :class="[type, highlight ? 'highlighted' : '']" align="start" :style="padding">
|
|
3
|
+
<ecs-sticker v-if="type != 'blank'" :type="type" />
|
|
4
|
+
<div class="ecs-log-message-content">
|
|
5
|
+
<slot></slot>
|
|
6
|
+
</div>
|
|
7
|
+
<div v-if="meta" class="ecs-log-message-meta">
|
|
8
|
+
{{ meta }}
|
|
9
|
+
</div>
|
|
10
|
+
</ecs-flex-row>
|
|
11
|
+
</template>
|
|
12
|
+
|
|
13
|
+
<script>
|
|
14
|
+
import EcsFlexRow from '../flex/flex-row'
|
|
15
|
+
import EcsSticker from '../sticker/sticker'
|
|
16
|
+
|
|
17
|
+
export default {
|
|
18
|
+
components: {
|
|
19
|
+
EcsFlexRow, EcsSticker
|
|
20
|
+
},
|
|
21
|
+
|
|
22
|
+
props: {
|
|
23
|
+
/** Determines the type of log message, which also impacts the styling of it. */
|
|
24
|
+
type: {
|
|
25
|
+
type: String,
|
|
26
|
+
validator: v => ['blank', 'success', 'warning', 'info', 'error'].includes(v),
|
|
27
|
+
default: 'blank'
|
|
28
|
+
},
|
|
29
|
+
/** Adds a background color to highlight the line within the log. */
|
|
30
|
+
highlight: {
|
|
31
|
+
type: Boolean,
|
|
32
|
+
default: false
|
|
33
|
+
},
|
|
34
|
+
/** Meta text like (most usual) a timestamp, a username, etc. Appears as subtle gray text on the right side of the log message. */
|
|
35
|
+
meta: {
|
|
36
|
+
type: String
|
|
37
|
+
},
|
|
38
|
+
/** Allows to customize the left and right inner padding of the log message. */
|
|
39
|
+
verticalPadding: {
|
|
40
|
+
type: String,
|
|
41
|
+
default: '20px'
|
|
42
|
+
},
|
|
43
|
+
},
|
|
44
|
+
|
|
45
|
+
computed: {
|
|
46
|
+
padding() {
|
|
47
|
+
return 'padding-left: ' + this.verticalPadding + '; padding-right: ' + this.verticalPadding + ';'
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
</script>
|
|
52
|
+
|
|
53
|
+
<style lang="scss">
|
|
54
|
+
@import "../../tokens/build/scss/tokens.scss";
|
|
55
|
+
|
|
56
|
+
.ecs-log-message-content{
|
|
57
|
+
p, ol, ul, blockquote{
|
|
58
|
+
margin: $spacing-10 0;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
b, strong{
|
|
62
|
+
font-weight: $font-weight-medium;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
a{
|
|
66
|
+
font-weight: $font-weight-medium;
|
|
67
|
+
|
|
68
|
+
&:hover{
|
|
69
|
+
text-decoration: underline;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.highlighted.error > .ecs-log-message-content a{
|
|
75
|
+
color: $color-red-12;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.highlighted.info > .ecs-log-message-content a{
|
|
79
|
+
color: $color-blue-12;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.highlighted.warning > .ecs-log-message-content a{
|
|
83
|
+
color: $color-yellow-12;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.highlighted.success > .ecs-log-message-content a{
|
|
87
|
+
color: $color-green-12;
|
|
88
|
+
}
|
|
89
|
+
</style>
|
|
90
|
+
|
|
91
|
+
<style lang="scss" scoped>
|
|
92
|
+
@import "../../tokens/build/scss/tokens.scss";
|
|
93
|
+
@import "../mixins/svg-uri";
|
|
94
|
+
|
|
95
|
+
.ecs-log-message{
|
|
96
|
+
column-gap: $spacing-10;
|
|
97
|
+
padding-top: $spacing-10;
|
|
98
|
+
padding-bottom: $spacing-10;
|
|
99
|
+
color: $color-gray-15;
|
|
100
|
+
font-size: $type-scale-2-font-size;
|
|
101
|
+
line-height: $type-scale-2-line-height;
|
|
102
|
+
border-bottom: 1px solid $color-gray-1;
|
|
103
|
+
|
|
104
|
+
&-content{
|
|
105
|
+
flex: 1;
|
|
106
|
+
|
|
107
|
+
> :first-child{
|
|
108
|
+
margin-top: 0;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
> :last-child{
|
|
112
|
+
margin-bottom: 0;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
&-meta{
|
|
117
|
+
opacity: .5;
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.info.highlighted{
|
|
122
|
+
background: $color-blue-1;
|
|
123
|
+
border-color: $color-blue-2;
|
|
124
|
+
color: $color-blue-15;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.warning.highlighted{
|
|
128
|
+
background: $color-yellow-1;
|
|
129
|
+
border-color: $color-yellow-2;
|
|
130
|
+
color: $color-yellow-15;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.error.highlighted{
|
|
134
|
+
background: $color-red-1;
|
|
135
|
+
border-color: $color-red-2;
|
|
136
|
+
color: $color-red-15;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.success.highlighted{
|
|
140
|
+
background: $color-green-1;
|
|
141
|
+
border-color: $color-green-2;
|
|
142
|
+
color: $color-green-15;
|
|
143
|
+
}
|
|
144
|
+
</style>
|
|
@@ -14,7 +14,8 @@
|
|
|
14
14
|
props: {
|
|
15
15
|
/** Sets the sticker icon. */
|
|
16
16
|
type: {
|
|
17
|
-
type: String
|
|
17
|
+
type: String,
|
|
18
|
+
validator: v => ['current', 'error', 'loading', 'warning', 'warning-critical', 'success', 'info', 'null', null, undefined].includes(v)
|
|
18
19
|
}
|
|
19
20
|
},
|
|
20
21
|
|
|
@@ -34,7 +35,8 @@
|
|
|
34
35
|
|| this.type == 'loading'
|
|
35
36
|
|| this.type == 'warning'
|
|
36
37
|
|| this.type == 'warning-critical'
|
|
37
|
-
|| this.type == 'success'
|
|
38
|
+
|| this.type == 'success'
|
|
39
|
+
|| this.type == 'info')
|
|
38
40
|
return true
|
|
39
41
|
else
|
|
40
42
|
return false
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div @click="$emit('click', $event)" class="ecs-transcript-state" :class="[interactive ? 'interactive' : '']">
|
|
3
|
+
<ecs-icon type="toolbar-transcript" color="#929AA9" />
|
|
4
|
+
<div v-if="state =='healthy'" class="healthy" />
|
|
5
|
+
<div v-if="state =='repairing'" class="repairing" />
|
|
6
|
+
<div v-if="state =='corrupted'" class="corrupted" />
|
|
7
|
+
<span v-if="state == 'loading'" class="loading">
|
|
8
|
+
<ecs-icon type="loading" width="18px" height="18px" color="#202127" />
|
|
9
|
+
</span>
|
|
10
|
+
</div>
|
|
11
|
+
</template>
|
|
12
|
+
|
|
13
|
+
<script>
|
|
14
|
+
import EcsAnimations from '../animations/animations'
|
|
15
|
+
import EcsIcon from '../icon/icon'
|
|
16
|
+
|
|
17
|
+
export default {
|
|
18
|
+
components: {
|
|
19
|
+
EcsAnimations,
|
|
20
|
+
EcsIcon
|
|
21
|
+
},
|
|
22
|
+
props: {
|
|
23
|
+
/** Displays a status indicator based on the passed value. */
|
|
24
|
+
state: {
|
|
25
|
+
type: String,
|
|
26
|
+
validator: v => ['healthy', 'loading', 'repairing', 'corrupted'].includes(v),
|
|
27
|
+
required: true
|
|
28
|
+
},
|
|
29
|
+
/** Indicates that the element is a clickable element, by adding a :hover state and showing pointer cursor. */
|
|
30
|
+
interactive: {
|
|
31
|
+
type: Boolean,
|
|
32
|
+
default: false
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
</script>
|
|
37
|
+
|
|
38
|
+
<style lang="scss" scoped>
|
|
39
|
+
@import "../../tokens/build/scss/tokens.scss";
|
|
40
|
+
@import "../mixins/svg-uri";
|
|
41
|
+
|
|
42
|
+
.ecs-transcript-state{
|
|
43
|
+
width: 30px;
|
|
44
|
+
min-width: 30px;
|
|
45
|
+
height: 30px;
|
|
46
|
+
position: relative;
|
|
47
|
+
cursor: help;
|
|
48
|
+
z-index: 1;
|
|
49
|
+
|
|
50
|
+
div{
|
|
51
|
+
width: 30px;
|
|
52
|
+
height: 30px;
|
|
53
|
+
position: absolute;
|
|
54
|
+
top: 0;
|
|
55
|
+
left: 0;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.healthy{
|
|
59
|
+
background-image: svg-uri('<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M25.0657 13.9129L25.0304 13.9468L24.9997 13.9849L21.0235 18.9354L19.9494 18.0137C19.6108 17.7015 19.191 17.6225 18.8271 17.6695C18.4719 17.7154 18.1497 17.8792 17.9013 18.0833C17.6534 18.2869 17.4262 18.5742 17.3167 18.9238C17.2008 19.2938 17.2224 19.7327 17.4931 20.1232L17.5128 20.1515L17.535 20.1779L20.0265 23.1467L20.0335 23.1551L20.0408 23.1634C20.3616 23.5236 20.8034 23.778 21.3214 23.7476C21.8285 23.7178 22.2304 23.4249 22.5053 23.072L22.5241 23.048L22.5408 23.0224L27.4703 15.5069L27.4956 15.4683L27.516 15.4269C27.6882 15.0771 27.7869 14.697 27.7372 14.3253C27.6843 13.9289 27.4607 13.5718 27.0792 13.3823C26.3775 13.0338 25.5896 13.4113 25.0657 13.9129Z" fill="#157EFB" stroke="#FFF" stroke-width="1.5"/></svg>');
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.repairing{
|
|
63
|
+
background-image: svg-uri('<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.9521 14.4266L17.7736 14.482L17.7361 14.5198C17.1102 14.8712 17.0777 15.7087 17.5312 16.1623L19.0701 17.7011L18.7011 18.0701L17.1623 16.5314C17.1623 16.5313 17.1623 16.5313 17.1622 16.5313C16.6642 16.0332 15.7033 16.1214 15.4313 16.9373L15.4288 16.9447L15.4265 16.9522C15.0087 18.2989 15.3327 19.8329 16.4026 20.9028C17.4313 21.9315 18.932 22.2733 20.2428 21.8837L23.5509 25.1917L23.551 25.1918C24.2745 25.9152 25.4664 25.9566 26.1921 25.192C26.9565 24.4663 26.9153 23.2744 26.1917 22.5509L26.189 22.5482L22.8818 19.275C23.2723 17.9426 22.938 16.4379 21.9028 15.4026C20.833 14.3328 19.2987 14.0086 17.9521 14.4266Z" fill="#202127" stroke="#FFF" stroke-width="1.5"/></svg>');
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.corrupted{
|
|
67
|
+
background-image: svg-uri('<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.9271 16.2357L17.9269 16.2358C16.889 16.8402 16.25 17.9508 16.25 19.1525V21.9303C16.25 23.132 16.8891 24.2427 17.9277 24.8471C17.9277 24.8471 17.9277 24.8471 17.9277 24.8471L20.5527 26.3748L20.5527 26.3749C21.602 26.9854 22.8986 26.9854 23.9478 26.3749L23.9479 26.3748L26.5729 24.8471L26.5731 24.847C27.611 24.2426 28.25 23.1319 28.25 21.9303V19.1525C28.25 17.9508 27.6109 16.8401 26.5723 16.2357C26.5723 16.2357 26.5723 16.2357 26.5723 16.2357L23.9473 14.7079L23.9473 14.7079C22.898 14.0974 21.6014 14.0974 20.5522 14.7079L20.5521 14.7079L17.9271 16.2357Z" fill="#FF3750" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill-rule="evenodd" clip-rule="evenodd" d="M22.0004 17.1111C22.43 17.1111 22.7782 17.4326 22.7782 17.8291V21.0598C22.7782 21.4563 22.43 21.7778 22.0004 21.7778C21.5709 21.7778 21.2227 21.4563 21.2227 21.0598V17.8291C21.2227 17.4326 21.5709 17.1111 22.0004 17.1111Z" fill="#FFF"/><circle cx="22.0004" cy="23.4778" r="0.777778" fill="white"/></svg>');
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.loading{
|
|
71
|
+
border-radius: 100%;
|
|
72
|
+
background: #FFF;
|
|
73
|
+
width: 18px;
|
|
74
|
+
height: 18px;
|
|
75
|
+
position: absolute;
|
|
76
|
+
bottom: 0;
|
|
77
|
+
right: 0;
|
|
78
|
+
display: block;
|
|
79
|
+
|
|
80
|
+
.icon{
|
|
81
|
+
position: absolute;
|
|
82
|
+
inset: 0;
|
|
83
|
+
animation: spin 1.5s infinite linear reverse;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
&.interactive{
|
|
88
|
+
cursor: pointer;
|
|
89
|
+
|
|
90
|
+
&:after{
|
|
91
|
+
content: "";
|
|
92
|
+
position: absolute;
|
|
93
|
+
inset: 0;
|
|
94
|
+
background: rgba($color-gray-8, .08);
|
|
95
|
+
opacity: 0;
|
|
96
|
+
transform: scale(.6);
|
|
97
|
+
transition: opacity .15s ease-in-out, transform .3s cubic-bezier(0.3, 0.76, 0.27, 1);
|
|
98
|
+
border-radius: $border-radius-small;
|
|
99
|
+
z-index: -1;
|
|
100
|
+
pointer-events: none;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
&:hover:after{
|
|
104
|
+
opacity: 1;
|
|
105
|
+
transform: scale(1);
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
</style>
|
|
@@ -6,6 +6,19 @@ import { Meta } from '@storybook/addon-docs/blocks';
|
|
|
6
6
|
Changelog
|
|
7
7
|
</h1>
|
|
8
8
|
|
|
9
|
+
## Version 1.4.0 (6 September 2022)
|
|
10
|
+
|
|
11
|
+
### Features
|
|
12
|
+
|
|
13
|
+
- Added new `EcsTranscriptState` component
|
|
14
|
+
- Added new `EcsLogMessage` component
|
|
15
|
+
- Added broken transcript empty state icon
|
|
16
|
+
- Added info sticker icon
|
|
17
|
+
|
|
18
|
+
### Fixes
|
|
19
|
+
|
|
20
|
+
- Cleaned up styles on the EcsDocumentState component and reduced weight of inline styles a bit.
|
|
21
|
+
|
|
9
22
|
## Version 1.3.6 (29 August 2022)
|
|
10
23
|
|
|
11
24
|
### Fixes
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import EcsLogMessage from '@components/log-message/log-message';
|
|
2
|
+
|
|
3
|
+
export default {
|
|
4
|
+
title: 'Data/Log Message',
|
|
5
|
+
component: EcsLogMessage
|
|
6
|
+
};
|
|
7
|
+
|
|
8
|
+
export const logMessageTypes = () => ({
|
|
9
|
+
components: { EcsLogMessage },
|
|
10
|
+
template: `<div>
|
|
11
|
+
<ecs-log-message meta="07/21/2022, 11:23 AM">Message</ecs-log-message>
|
|
12
|
+
<ecs-log-message type="info" meta="07/21/2022, 11:23 AM">Message</ecs-log-message>
|
|
13
|
+
<ecs-log-message type="warning" meta="07/21/2022, 11:23 AM">Message</ecs-log-message>
|
|
14
|
+
<ecs-log-message type="success" meta="07/21/2022, 11:23 AM">Message</ecs-log-message>
|
|
15
|
+
<ecs-log-message type="error" meta="07/21/2022, 11:23 AM">Message</ecs-log-message>
|
|
16
|
+
</div>`,
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
export const logMessageHighlight = () => ({
|
|
20
|
+
components: { EcsLogMessage },
|
|
21
|
+
template: `<div>
|
|
22
|
+
<ecs-log-message type="info" meta="07/21/2022, 11:23 AM" highlight>Message</ecs-log-message>
|
|
23
|
+
<ecs-log-message type="warning" meta="07/21/2022, 11:23 AM" highlight>Message</ecs-log-message>
|
|
24
|
+
<ecs-log-message type="success" meta="07/21/2022, 11:23 AM" highlight>Message</ecs-log-message>
|
|
25
|
+
<ecs-log-message type="error" meta="07/21/2022, 11:23 AM" highlight>Message</ecs-log-message>
|
|
26
|
+
</div>`,
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
export const logMessageRichText = () => ({
|
|
30
|
+
components: { EcsLogMessage },
|
|
31
|
+
template: `<div>
|
|
32
|
+
<ecs-log-message type="error" meta="07/21/2022, 11:23 AM" highlight>
|
|
33
|
+
<p>Broken Transcript Issue opened by <strong><a href="mailto:r.reyes@orrick.com">r.reyes@orrick.com</a></strong></p>
|
|
34
|
+
<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>
|
|
35
|
+
</ecs-log-message>
|
|
36
|
+
</div>`,
|
|
37
|
+
});
|
|
Binary file
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import EcsTranscriptState from '@components/transcript-state/transcript-state';
|
|
2
|
+
|
|
3
|
+
export default {
|
|
4
|
+
title: 'Feedback/Transcript State',
|
|
5
|
+
component: EcsTranscriptState
|
|
6
|
+
};
|
|
7
|
+
|
|
8
|
+
export const statusIndicator = () => ({
|
|
9
|
+
components: { EcsTranscriptState },
|
|
10
|
+
template: `<main>
|
|
11
|
+
<ecs-transcript-state state="loading" />
|
|
12
|
+
<ecs-transcript-state state="healthy" />
|
|
13
|
+
<ecs-transcript-state state="corrupted" />
|
|
14
|
+
<ecs-transcript-state state="repairing" />
|
|
15
|
+
<ecs-transcript-state state="corrupted" interactive />
|
|
16
|
+
</main>`,
|
|
17
|
+
});
|