toggle-components-library 1.36.4-beta.5 → 1.36.4-beta.6
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/dist/img/bolt-solid.445f9a14.svg +9 -0
- package/dist/toggle-components-library.common.js +105 -79
- package/dist/toggle-components-library.common.js.map +1 -1
- package/dist/toggle-components-library.css +1 -1
- package/dist/toggle-components-library.umd.js +105 -79
- package/dist/toggle-components-library.umd.js.map +1 -1
- package/dist/toggle-components-library.umd.min.js +1 -1
- package/dist/toggle-components-library.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/src/assets/icons/bolt-solid.svg +9 -0
- package/src/components/metrics/ToggleMetricSingleMetric.vue +23 -2
- package/src/sass/includes/_as_badges.scss +10 -0
- package/src/sass/includes/_as_metrics.scss +21 -0
package/package.json
CHANGED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="6.922" height="12.381" viewBox="0 0 6.922 12.381">
|
|
2
|
+
<defs>
|
|
3
|
+
<linearGradient id="linear-gradient" x1="0.343" y1="-0.06" x2="0.923" y2="2.008" gradientUnits="objectBoundingBox">
|
|
4
|
+
<stop offset="0" stop-color="#c139e5"/>
|
|
5
|
+
<stop offset="1" stop-color="#611d73"/>
|
|
6
|
+
</linearGradient>
|
|
7
|
+
</defs>
|
|
8
|
+
<path id="bolt-solid" d="M37.679,1.07a.944.944,0,0,0-.191-.931.469.469,0,0,0-.719.044L32.156,5.6a.961.961,0,0,0-.16.854.616.616,0,0,0,.541.5h2.009L33.16,11.294a.944.944,0,0,0,.191.931.469.469,0,0,0,.719-.044l4.613-5.417a.961.961,0,0,0,.16-.854.612.612,0,0,0-.541-.5H36.293Z" transform="translate(-31.959 0.009)" fill="url(#linear-gradient)"/>
|
|
9
|
+
</svg>
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div>
|
|
3
|
-
<h3 class="toggle-metric metric-label">{{label}}</h3>
|
|
3
|
+
<h3 :class="['toggle-metric metric-label', {'metric-label-atmosphere': atmosphere}]">{{label}}</h3>
|
|
4
4
|
<div class="single-metric-icon" v-if="metricPending && label.length == 0"></div>
|
|
5
|
-
<h1 class="toggle-metric metric-value" v-else>{{metricValue}}
|
|
5
|
+
<h1 :class="['toggle-metric metric-value', { 'metric-value-atmosphere': atmosphere }]" v-else>{{metricValue}}
|
|
6
6
|
<span v-if="score && value.maxScore" class="toggle-metric-score-rating">/{{value.maxScore}}</span>
|
|
7
|
+
<span v-if="atmosphere && live == true" class="toggle-metric-live-icon"></span>
|
|
7
8
|
</h1>
|
|
8
9
|
</div>
|
|
9
10
|
</template>
|
|
@@ -73,6 +74,23 @@ export default {
|
|
|
73
74
|
metricPending: {
|
|
74
75
|
type: Boolean,
|
|
75
76
|
default: false
|
|
77
|
+
},
|
|
78
|
+
/**
|
|
79
|
+
* Metric style (default or atmosphere release themed)
|
|
80
|
+
*/
|
|
81
|
+
metricStyle: {
|
|
82
|
+
type: String,
|
|
83
|
+
default: "default",
|
|
84
|
+
validator: function (value) {
|
|
85
|
+
return ['default', 'atmosphere'].indexOf(value) !== -1
|
|
86
|
+
}
|
|
87
|
+
},
|
|
88
|
+
/**
|
|
89
|
+
* Show live lightening bolt
|
|
90
|
+
*/
|
|
91
|
+
live: {
|
|
92
|
+
type: Boolean,
|
|
93
|
+
default: false
|
|
76
94
|
}
|
|
77
95
|
},
|
|
78
96
|
computed: {
|
|
@@ -99,6 +117,9 @@ export default {
|
|
|
99
117
|
},
|
|
100
118
|
score() {
|
|
101
119
|
return this.type === 'score';
|
|
120
|
+
},
|
|
121
|
+
atmosphere() {
|
|
122
|
+
return this.metricStyle === 'atmosphere';
|
|
102
123
|
}
|
|
103
124
|
}
|
|
104
125
|
}
|
|
@@ -37,6 +37,16 @@
|
|
|
37
37
|
border-radius: 50px;
|
|
38
38
|
padding: 5px 11px;
|
|
39
39
|
}
|
|
40
|
+
|
|
41
|
+
// Atmosphere release styling
|
|
42
|
+
&.atmosphere {
|
|
43
|
+
background-color: #E4EDF2;
|
|
44
|
+
color: #354B64;
|
|
45
|
+
font-size: 14px;
|
|
46
|
+
font-weight: 400;
|
|
47
|
+
padding: 5px 11px;
|
|
48
|
+
border-radius: 5px;
|
|
49
|
+
}
|
|
40
50
|
}
|
|
41
51
|
|
|
42
52
|
.toggle-podium-badge {
|
|
@@ -17,6 +17,16 @@
|
|
|
17
17
|
color: $toggle-metric-label-black;
|
|
18
18
|
}
|
|
19
19
|
|
|
20
|
+
&.metric-label-atmosphere {
|
|
21
|
+
color: #354B64;
|
|
22
|
+
font-weight: 400;
|
|
23
|
+
font-size: 18px;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
&.metric-value-atmosphere {
|
|
27
|
+
font-weight: 800;
|
|
28
|
+
color: #00346F;
|
|
29
|
+
}
|
|
20
30
|
}
|
|
21
31
|
|
|
22
32
|
|
|
@@ -139,4 +149,15 @@
|
|
|
139
149
|
.toggle-metric-score-rating {
|
|
140
150
|
font-size: 27px;
|
|
141
151
|
margin-left: -8px;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.toggle-metric-live-icon {
|
|
155
|
+
display: inline-block;
|
|
156
|
+
vertical-align: top;
|
|
157
|
+
background-image: url('../assets/icons/bolt-solid.svg');
|
|
158
|
+
background-repeat: no-repeat;
|
|
159
|
+
background-size: contain;
|
|
160
|
+
height: 19px;
|
|
161
|
+
width: 19px;
|
|
162
|
+
margin: 17px 0 0 5px;
|
|
142
163
|
}
|