pkp/pkp-lib#8880 Add StageBubble component

src/components/StageBubble/StageBubble.vue

@@ -0,0 +1,74 @@
+<template>
+	<span class="stageBubble">
+		<span
+			class="stageBubble__bubble"
+			:class="'stageBubble__bubble--' + stageClassFragment"
+			aria-hidden="true"
+		/>
+		<span class="stageBubble__slot">
+			<slot />
+		</span>
+	</span>
+</template>
+
+<script>
+const stageMap = {
+	1: 'submission',
+	2: 'review',
+	3: 'review',
+	4: 'copyediting',
+	5: 'production',
+};
+
+export default {
+	props: {
+		stageId: {
+			type: Number,
+			required: true,
+			validator: function (value) {
+				return Object.keys(stageMap).includes(value.toString());
+			},
+		},
+	},
+	computed: {
+		stageClassFragment() {
+			return stageMap[this.stageId];
+		},
+	},
+};
+</script>
+
+<style lang="less">
+@import '../../styles/_import';
+
+.stageBubble {
+	display: flex;
+	width: auto;
+	gap: 0 0.5em;
+	align-items: center;
+}
+
+.stageBubble__bubble {
+	width: 1.5em;
+	height: 1.5em;
+	background: @bg-anchor;
+	border-radius: 50%;
+}
+
+.stageBubble__bubble--submission {
+	background: @submission;
+}
+.stageBubble__bubble--review {
+	background: @review;
+}
+.stageBubble__bubble--copyediting {
+	background: @copyediting;
+}
+.stageBubble__bubble--production {
+	background: @production;
+}
+
+.stageBubble__slot {
+	white-space: nowrap;
+}
+</style>

src/styles/variables.less

@@ -38,10 +38,10 @@
 @star-on: #DAA03C;
 @star-off: #ddd;
 // Submission stages
-@submission: #d00a0a;
-@review: #e08914;
-@copyediting: #006798;
-@production: #00b28d;
+@submission: #9B6FF8;
+@review: #EA9B32;
+@copyediting: #F66AAF;
+@production: #4AC7E2;
 // Text
 @text: #222;
 @text-rgba: rgba(0, 0, 0, 0.84);