From 3d2c8a4983e0325cf12a6f35cf7a4b5d69e9da3d Mon Sep 17 00:00:00 2001
From: Edvin Covaci <edvincov28@gmail.com>
Date: Tue, 22 Sep 2026 11:36:06 +0200
Subject: [PATCH 1/3] feat: add icon support for BccCapacityIndicator

---
 .../BccCapacityIndicator.css                  | 14 ++++++
 .../BccCapacityIndicator.stories.ts           | 30 ++++++++++++
 .../BccCapacityIndicator.vue                  | 49 ++++++++++++-------
 3 files changed, 75 insertions(+), 18 deletions(-)

diff --git a/component-library/src/components/custom/BccCapacityIndicator/BccCapacityIndicator.css b/component-library/src/components/custom/BccCapacityIndicator/BccCapacityIndicator.css
index 88164505..c47e2251 100644
--- a/component-library/src/components/custom/BccCapacityIndicator/BccCapacityIndicator.css
+++ b/component-library/src/components/custom/BccCapacityIndicator/BccCapacityIndicator.css
@@ -47,4 +47,18 @@
 		@apply ctx-red-subtlest;
 		--bcc-capacity-indicator-background: var(--ctx-background);
 	}
+
+	.bcc-capacity-indicator .bcc-capacity-indicator-icon {
+		width: 100%;
+		height: 100%;
+		color: var(--bcc-capacity-indicator-text);
+	}
+
+	.bcc-capacity-indicator.borderless {
+		--bcc-capacity-indicator-background: var(--ctx-background);
+	}
+	.bcc-capacity-indicator.borderless .circle,
+	.bcc-capacity-indicator.borderless .circle-used {
+		stroke: none;
+	}
 }
diff --git a/component-library/src/components/custom/BccCapacityIndicator/BccCapacityIndicator.stories.ts b/component-library/src/components/custom/BccCapacityIndicator/BccCapacityIndicator.stories.ts
index 58669699..2943db57 100644
--- a/component-library/src/components/custom/BccCapacityIndicator/BccCapacityIndicator.stories.ts
+++ b/component-library/src/components/custom/BccCapacityIndicator/BccCapacityIndicator.stories.ts
@@ -1,4 +1,5 @@
 import { BCC_CONTEXT_LIST } from '@/contexts';
+import { BlockIcon, CheckIcon, DoneAllIcon, PriorityHighIcon } from '@bcc-code/icons-vue';
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 import { ref } from 'vue';
 import BccCapacityIndicator from './BccCapacityIndicator.vue';
@@ -13,6 +14,7 @@ const meta: Meta<typeof BccCapacityIndicator> = {
 		animationDuration: { control: 'number' },
 		squared: { control: 'boolean' },
 		colored: { control: 'boolean' },
+		borderless: { control: 'boolean' },
 		context: { control: 'select', options: BCC_CONTEXT_LIST.filter(ctx => ctx.includes('-subtle')) },
 	},
 };
@@ -73,6 +75,34 @@ export const Colored: Story = {
 	}),
 };
 
+export const Icons: Story = {
+	render: () => ({
+		components: { BccCapacityIndicator },
+		setup() {
+			return { CheckIcon, DoneAllIcon, BlockIcon, PriorityHighIcon };
+		},
+		template: `
+	<div class="flex items-center space-x-4">
+		<BccCapacityIndicator squared colored context="green-subtlest" :icon="CheckIcon" :total="1" :used="1" size="xs"  />
+		<BccCapacityIndicator colored context="purple-subtlest" :icon="DoneAllIcon" :total="1" :used="1"  size="sm"/>
+		<BccCapacityIndicator squared colored context="red-subtlest" :icon="BlockIcon" :total="1" :used="1"  />
+		<BccCapacityIndicator colored context="brown-subtlest" :icon="PriorityHighIcon" :total="1" :used="1" size="lg" />
+	</div>
+		`,
+	}),
+};
+
+export const Borderless: Story = {
+	render: () => ({
+		components: { BccCapacityIndicator },
+		template: `
+	<div class="flex items-center space-x-4">
+		<BccCapacityIndicator borderless squared size="lg" context="blue-subtler" :total="30" :used="6" />
+	</div>
+		`,
+	}),
+};
+
 export const WithContext: Story = {
 	render: () => ({
 		components: { BccCapacityIndicator },
diff --git a/component-library/src/components/custom/BccCapacityIndicator/BccCapacityIndicator.vue b/component-library/src/components/custom/BccCapacityIndicator/BccCapacityIndicator.vue
index bce01414..ca37dce2 100644
--- a/component-library/src/components/custom/BccCapacityIndicator/BccCapacityIndicator.vue
+++ b/component-library/src/components/custom/BccCapacityIndicator/BccCapacityIndicator.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import useAnimatedNumber from '@/composables/animatedNumber';
 import { BCC_CONTEXT } from '@/contexts';
+import type { VueComponent } from '@/types';
 import { computed, toRef } from 'vue';
 
 export type CapacityIndicatorProps = {
@@ -18,6 +19,10 @@ export type CapacityIndicatorProps = {
 	colored?: boolean;
 	/** Design context (e.g. neutral, brand) used for background and text color. */
 	context?: BCC_CONTEXT;
+	/** Icon component shown instead of the numeric value. */
+	icon?: VueComponent;
+	/** When true, hides the outline/progress ring and shows a filled background instead. */
+	borderless?: boolean;
 };
 
 const props = withDefaults(defineProps<CapacityIndicatorProps>(), {
@@ -26,6 +31,7 @@ const props = withDefaults(defineProps<CapacityIndicatorProps>(), {
 	animationDuration: 1000,
 	squared: false,
 	colored: false,
+	borderless: false,
 });
 
 const { value: valueUsed } = useAnimatedNumber(toRef(props, 'used'), props.used, props.animationDuration);
@@ -40,6 +46,8 @@ const percentage = computed(() => {
 const { value: progress } = useAnimatedNumber(percentage, percentage.value, props.animationDuration);
 
 const dashArray = Math.PI * 18 * 2;
+
+const iconSize = (40 * 2) / 3;
 </script>
 
 <template>
@@ -51,7 +59,7 @@ const dashArray = Math.PI * 18 * 2;
 		:class="[
 			size,
 			squared ? 'rounded' : 'rounded-full',
-			{ colored, 'is-full': progress >= 100, 'is-warning': progress >= 50 && progress < 100 },
+			{ colored, borderless, 'is-full': progress >= 100, 'is-warning': progress >= 50 && progress < 100 },
 			context ? `ctx-${context}` : '',
 		]"
 	>
@@ -82,22 +90,27 @@ const dashArray = Math.PI * 18 * 2;
 				class="circle-used"
 			/>
 		</template>
-		<text
-			v-if="progress > -1"
-			text-anchor="middle"
-			x="20"
-			:y="squared || size == 'xs' ? 26 : 25"
-			:font-size="size == 'xs' ? 18 : squared || size == 'sm' ? 16 : 14"
-			font-weight="600"
-			fill="currentColor"
-			class="text"
-		>
-			{{ progress < 100 ? total - valueUsed : 0 }}
-		</text>
-		<path
-			v-else
-			d="M14.4122 25.1588C13.1109 25.1588 12.017 24.6844 11.1305 23.7354C10.244 22.7864 9.80078 21.6525 9.80078 20.3337C9.80078 19.0287 10.2475 17.9121 11.1409 16.984C12.0343 16.0559 13.1247 15.5918 14.4122 15.5918C14.9358 15.5918 15.4424 15.679 15.9319 15.8533C16.4214 16.0277 16.8557 16.2965 17.2347 16.6597L19.0662 18.417L17.885 19.5628L16.1877 17.9045C15.9538 17.6704 15.6828 17.5015 15.3745 17.3978C15.0663 17.294 14.7475 17.2422 14.4182 17.2422C13.5803 17.2422 12.8763 17.5449 12.3063 18.1504C11.7362 18.756 11.4512 19.4851 11.4512 20.3379C11.4512 21.2047 11.7327 21.9497 12.2957 22.5732C12.8587 23.1967 13.566 23.5085 14.4176 23.5085C14.7413 23.5085 15.0554 23.4567 15.3599 23.3532C15.6644 23.2497 15.9391 23.088 16.1839 22.8681L22.7673 16.6597C23.1462 16.2965 23.5805 16.0277 24.07 15.8533C24.5596 15.679 25.0592 15.5918 25.5689 15.5918C26.8702 15.5918 27.9676 16.0559 28.861 16.984C29.7544 17.9121 30.2012 19.0287 30.2012 20.3337C30.2012 21.6525 29.7544 22.7864 28.861 23.7354C27.9676 24.6844 26.8702 25.1588 25.5689 25.1588C25.0592 25.1588 24.5561 25.0751 24.0596 24.9077C23.5631 24.7403 23.1324 24.475 22.7673 24.1117L20.9892 22.3545L22.1586 21.2087L23.8177 22.8681C24.0383 23.0885 24.3035 23.2503 24.6133 23.3536C24.9231 23.4568 25.2398 23.5085 25.5635 23.5085C26.4151 23.5085 27.1259 23.1961 27.6958 22.5714C28.2658 21.9467 28.5508 21.2021 28.5508 20.3377C28.5508 19.4872 28.2623 18.7586 27.6854 18.152C27.1085 17.5455 26.4012 17.2422 25.5635 17.2422C25.2398 17.2422 24.9257 17.3009 24.6212 17.4183C24.3167 17.5357 24.0489 17.7043 23.818 17.9242L17.2347 24.1326C16.8557 24.4819 16.418 24.7403 15.9215 24.9077C15.425 25.0751 14.9219 25.1588 14.4122 25.1588Z"
-			class="text"
-		/>
+		<foreignObject v-if="icon" :x="20 - iconSize / 2" :y="20 - iconSize / 2" :width="iconSize" :height="iconSize">
+			<component :is="icon" class="bcc-capacity-indicator-icon" />
+		</foreignObject>
+		<template v-else>
+			<text
+				v-if="progress > -1"
+				text-anchor="middle"
+				x="20"
+				:y="squared || size == 'xs' ? 26 : 25"
+				:font-size="size == 'xs' ? 18 : squared || size == 'sm' ? 16 : 14"
+				font-weight="600"
+				fill="currentColor"
+				class="text"
+			>
+				{{ progress < 100 ? total - valueUsed : 0 }}
+			</text>
+			<path
+				v-else
+				d="M14.4122 25.1588C13.1109 25.1588 12.017 24.6844 11.1305 23.7354C10.244 22.7864 9.80078 21.6525 9.80078 20.3337C9.80078 19.0287 10.2475 17.9121 11.1409 16.984C12.0343 16.0559 13.1247 15.5918 14.4122 15.5918C14.9358 15.5918 15.4424 15.679 15.9319 15.8533C16.4214 16.0277 16.8557 16.2965 17.2347 16.6597L19.0662 18.417L17.885 19.5628L16.1877 17.9045C15.9538 17.6704 15.6828 17.5015 15.3745 17.3978C15.0663 17.294 14.7475 17.2422 14.4182 17.2422C13.5803 17.2422 12.8763 17.5449 12.3063 18.1504C11.7362 18.756 11.4512 19.4851 11.4512 20.3379C11.4512 21.2047 11.7327 21.9497 12.2957 22.5732C12.8587 23.1967 13.566 23.5085 14.4176 23.5085C14.7413 23.5085 15.0554 23.4567 15.3599 23.3532C15.6644 23.2497 15.9391 23.088 16.1839 22.8681L22.7673 16.6597C23.1462 16.2965 23.5805 16.0277 24.07 15.8533C24.5596 15.679 25.0592 15.5918 25.5689 15.5918C26.8702 15.5918 27.9676 16.0559 28.861 16.984C29.7544 17.9121 30.2012 19.0287 30.2012 20.3337C30.2012 21.6525 29.7544 22.7864 28.861 23.7354C27.9676 24.6844 26.8702 25.1588 25.5689 25.1588C25.0592 25.1588 24.5561 25.0751 24.0596 24.9077C23.5631 24.7403 23.1324 24.475 22.7673 24.1117L20.9892 22.3545L22.1586 21.2087L23.8177 22.8681C24.0383 23.0885 24.3035 23.2503 24.6133 23.3536C24.9231 23.4568 25.2398 23.5085 25.5635 23.5085C26.4151 23.5085 27.1259 23.1961 27.6958 22.5714C28.2658 21.9467 28.5508 21.2021 28.5508 20.3377C28.5508 19.4872 28.2623 18.7586 27.6854 18.152C27.1085 17.5455 26.4012 17.2422 25.5635 17.2422C25.2398 17.2422 24.9257 17.3009 24.6212 17.4183C24.3167 17.5357 24.0489 17.7043 23.818 17.9242L17.2347 24.1326C16.8557 24.4819 16.418 24.7403 15.9215 24.9077C15.425 25.0751 14.9219 25.1588 14.4122 25.1588Z"
+				class="text"
+			/>
+		</template>
 	</svg>
 </template>

From 4011f13c267ca4bdbdb00d274274c4da480561e9 Mon Sep 17 00:00:00 2001
From: Edvin Covaci <edvincov28@gmail.com>
Date: Tue, 22 Sep 2026 12:42:45 +0200
Subject: [PATCH 2/3] fix: round number

---
 .../custom/BccCapacityIndicator/BccCapacityIndicator.css  | 4 +---
 .../BccCapacityIndicator/BccCapacityIndicator.stories.ts  | 2 +-
 .../custom/BccCapacityIndicator/BccCapacityIndicator.vue  | 8 +++-----
 3 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/component-library/src/components/custom/BccCapacityIndicator/BccCapacityIndicator.css b/component-library/src/components/custom/BccCapacityIndicator/BccCapacityIndicator.css
index c47e2251..29ef4abf 100644
--- a/component-library/src/components/custom/BccCapacityIndicator/BccCapacityIndicator.css
+++ b/component-library/src/components/custom/BccCapacityIndicator/BccCapacityIndicator.css
@@ -48,9 +48,7 @@
 		--bcc-capacity-indicator-background: var(--ctx-background);
 	}
 
-	.bcc-capacity-indicator .bcc-capacity-indicator-icon {
-		width: 100%;
-		height: 100%;
+	.bcc-capacity-indicator .icon {
 		color: var(--bcc-capacity-indicator-text);
 	}
 
diff --git a/component-library/src/components/custom/BccCapacityIndicator/BccCapacityIndicator.stories.ts b/component-library/src/components/custom/BccCapacityIndicator/BccCapacityIndicator.stories.ts
index 2943db57..f4fe894f 100644
--- a/component-library/src/components/custom/BccCapacityIndicator/BccCapacityIndicator.stories.ts
+++ b/component-library/src/components/custom/BccCapacityIndicator/BccCapacityIndicator.stories.ts
@@ -85,7 +85,7 @@ export const Icons: Story = {
 	<div class="flex items-center space-x-4">
 		<BccCapacityIndicator squared colored context="green-subtlest" :icon="CheckIcon" :total="1" :used="1" size="xs"  />
 		<BccCapacityIndicator colored context="purple-subtlest" :icon="DoneAllIcon" :total="1" :used="1"  size="sm"/>
-		<BccCapacityIndicator squared colored context="red-subtlest" :icon="BlockIcon" :total="1" :used="1"  />
+		<BccCapacityIndicator squared colored context="red-subtlest" :icon="BlockIcon" :total="1" :used="1"  size="xs"/>
 		<BccCapacityIndicator colored context="brown-subtlest" :icon="PriorityHighIcon" :total="1" :used="1" size="lg" />
 	</div>
 		`,
diff --git a/component-library/src/components/custom/BccCapacityIndicator/BccCapacityIndicator.vue b/component-library/src/components/custom/BccCapacityIndicator/BccCapacityIndicator.vue
index ca37dce2..02bba8b6 100644
--- a/component-library/src/components/custom/BccCapacityIndicator/BccCapacityIndicator.vue
+++ b/component-library/src/components/custom/BccCapacityIndicator/BccCapacityIndicator.vue
@@ -46,8 +46,6 @@ const percentage = computed(() => {
 const { value: progress } = useAnimatedNumber(percentage, percentage.value, props.animationDuration);
 
 const dashArray = Math.PI * 18 * 2;
-
-const iconSize = (40 * 2) / 3;
 </script>
 
 <template>
@@ -90,9 +88,9 @@ const iconSize = (40 * 2) / 3;
 				class="circle-used"
 			/>
 		</template>
-		<foreignObject v-if="icon" :x="20 - iconSize / 2" :y="20 - iconSize / 2" :width="iconSize" :height="iconSize">
-			<component :is="icon" class="bcc-capacity-indicator-icon" />
-		</foreignObject>
+		<svg v-if="icon" :x="6" :y="6" :width="28" :height="28">
+			<component :is="icon" class="icon" />
+		</svg>
 		<template v-else>
 			<text
 				v-if="progress > -1"

From b6e606f388b2cb355a0403254419c6b8ff5b7608 Mon Sep 17 00:00:00 2001
From: Jan-Sverre Riksfjord <jan.sverre.riksfjord@bcc.no>
Date: Tue, 22 Sep 2026 11:40:25 +0000
Subject: [PATCH 3/3] update story, verify that the capacity indicator works
 also with icons

---
 .../BccCapacityIndicator/BccCapacityIndicator.stories.ts    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/component-library/src/components/custom/BccCapacityIndicator/BccCapacityIndicator.stories.ts b/component-library/src/components/custom/BccCapacityIndicator/BccCapacityIndicator.stories.ts
index f4fe894f..df57772b 100644
--- a/component-library/src/components/custom/BccCapacityIndicator/BccCapacityIndicator.stories.ts
+++ b/component-library/src/components/custom/BccCapacityIndicator/BccCapacityIndicator.stories.ts
@@ -84,9 +84,9 @@ export const Icons: Story = {
 		template: `
 	<div class="flex items-center space-x-4">
 		<BccCapacityIndicator squared colored context="green-subtlest" :icon="CheckIcon" :total="1" :used="1" size="xs"  />
-		<BccCapacityIndicator colored context="purple-subtlest" :icon="DoneAllIcon" :total="1" :used="1"  size="sm"/>
-		<BccCapacityIndicator squared colored context="red-subtlest" :icon="BlockIcon" :total="1" :used="1"  size="xs"/>
-		<BccCapacityIndicator colored context="brown-subtlest" :icon="PriorityHighIcon" :total="1" :used="1" size="lg" />
+		<BccCapacityIndicator colored context="purple-subtlest" :icon="DoneAllIcon" :total="3" :used="1"  size="sm"/>
+		<BccCapacityIndicator squared colored context="red-subtlest" :icon="BlockIcon" :total="2" :used="1"  size="xs"/>
+		<BccCapacityIndicator colored context="brown-subtlest" :icon="PriorityHighIcon" :total="4" :used="1" size="lg" />
 	</div>
 		`,
 	}),