From 665206aa44b32703c94bf9c2a4adfccb9de7aa77 Mon Sep 17 00:00:00 2001 From: Edvin Covaci Date: Thu, 10 Sep 2026 14:08:01 +0200 Subject: [PATCH 1/3] fix: add title prop to BccNpsResult compoenent --- .../custom/BccNpsResult/BccNpsResult.css | 95 ++++++++++--------- .../BccNpsResult/BccNpsResult.stories.ts | 16 ++++ .../custom/BccNpsResult/BccNpsResult.vue | 3 + 3 files changed, 68 insertions(+), 46 deletions(-) diff --git a/component-library/src/components/custom/BccNpsResult/BccNpsResult.css b/component-library/src/components/custom/BccNpsResult/BccNpsResult.css index e695cd9d..9fe83f4c 100644 --- a/component-library/src/components/custom/BccNpsResult/BccNpsResult.css +++ b/component-library/src/components/custom/BccNpsResult/BccNpsResult.css @@ -1,54 +1,57 @@ @layer components { - .bcc-nps-result { - @apply relative w-full; - } + .bcc-nps-result { + @apply relative w-full; + } - .bcc-nps-result.xs { - @apply w-24; - } - .bcc-nps-result.sm { - @apply w-36; - } - .bcc-nps-result.md { - @apply w-48; - } - .bcc-nps-result.lg { - @apply w-60; - } - .bcc-nps-result.xl { - @apply w-72; - } + .bcc-nps-result.xs { + @apply w-24; + } + .bcc-nps-result.sm { + @apply w-36; + } + .bcc-nps-result.md { + @apply w-48; + } + .bcc-nps-result.lg { + @apply w-60; + } + .bcc-nps-result.xl { + @apply w-72; + } - .bcc-nps-result .bcc-nps-result-gauge-dial { - transform-origin: center; - } + .bcc-nps-result .bcc-nps-result-gauge-dial { + transform-origin: center; + } - .bcc-nps-result.animated .bcc-nps-result-gauge-dial { - transition-delay: 0.3s; - transition: all .7s cubic-bezier(0, 0, 0.3, 1.5); - } + .bcc-nps-result.animated .bcc-nps-result-gauge-dial { + transition-delay: 0.3s; + transition: all 0.7s cubic-bezier(0, 0, 0.3, 1.5); + } - .bcc-nps-result-labels { - @apply absolute text-base bottom-1/4 translate-y-1/2 flex w-full flex-col items-center justify-center; - } + .bcc-nps-result-labels { + @apply absolute bottom-0 flex w-full flex-col items-center justify-center text-base; + } - .bcc-nps-result-labels--heading { - @apply text-[1.25em] font-semibold leading-none; - } - .bcc-nps-result-labels--label { - @apply text-[0.75em] text-subtlest; - } + .bcc-nps-result-labels--heading { + @apply text-[1.25em] leading-none font-semibold; + } + .bcc-nps-result-labels--label { + @apply text-subtlest text-[0.75em]; + } + .bcc-nps-result-labels--title { + @apply heading-sm text-subtle mt-0.5; + } - .bcc-nps-result.md .bcc-nps-result-labels { - @apply text-lg; - } - .bcc-nps-result.lg .bcc-nps-result-labels { - @apply text-xl; - } - .bcc-nps-result.xl .bcc-nps-result-labels { - @apply text-2xl; - } - .bcc-nps-result.full .bcc-nps-result-labels { - @apply text-lg; - } + .bcc-nps-result.md .bcc-nps-result-labels { + @apply text-lg; + } + .bcc-nps-result.lg .bcc-nps-result-labels { + @apply text-xl; + } + .bcc-nps-result.xl .bcc-nps-result-labels { + @apply text-2xl; + } + .bcc-nps-result.full .bcc-nps-result-labels { + @apply text-lg; + } } diff --git a/component-library/src/components/custom/BccNpsResult/BccNpsResult.stories.ts b/component-library/src/components/custom/BccNpsResult/BccNpsResult.stories.ts index 4bbf783c..3bbed1c7 100644 --- a/component-library/src/components/custom/BccNpsResult/BccNpsResult.stories.ts +++ b/component-library/src/components/custom/BccNpsResult/BccNpsResult.stories.ts @@ -13,6 +13,7 @@ const meta: Meta = { }, display: { control: 'text', description: 'Custom text to show instead of score' }, underline: { control: 'text', description: 'Label below the score' }, + title: { control: 'text', description: 'Title shown below the underline' }, hideText: { control: 'boolean' }, animated: { control: 'boolean' }, }, @@ -50,6 +51,21 @@ export const Sizes: Story = { }), }; +export const WithTitle: Story = { + args: { + score: 30, + underline: 'Average Score', + title: 'Title', + }, + render: args => ({ + components: { BccNpsResult }, + setup() { + return { args }; + }, + template: ``, + }), +}; + export const WithCustomText: Story = { args: { score: 30, diff --git a/component-library/src/components/custom/BccNpsResult/BccNpsResult.vue b/component-library/src/components/custom/BccNpsResult/BccNpsResult.vue index 5cd30856..6d05294c 100644 --- a/component-library/src/components/custom/BccNpsResult/BccNpsResult.vue +++ b/component-library/src/components/custom/BccNpsResult/BccNpsResult.vue @@ -10,6 +10,8 @@ export type NpsResultProps = { display?: string; /** Secondary label shown under the main heading. */ underline?: string; + /** Title shown below the underline. */ + title?: string; /** When true, hides the heading and underline so only the gauge is shown. */ hideText?: boolean; /** When true, the gauge needle animates to the score on mount/update. */ @@ -96,6 +98,7 @@ const degrees = computed(() => {

{{ display ?? score }}

+ {{ title }}
From 24c37160ceff5f250dedf5ef9254523a11dd2aa0 Mon Sep 17 00:00:00 2001 From: Edvin Covaci Date: Thu, 10 Sep 2026 14:08:27 +0200 Subject: [PATCH 2/3] fix: adjust BccNpsScore styles based on design --- .../src/components/custom/BccNpsScore/BccNpsScore.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/component-library/src/components/custom/BccNpsScore/BccNpsScore.css b/component-library/src/components/custom/BccNpsScore/BccNpsScore.css index 2bc95849..9c56d9fc 100644 --- a/component-library/src/components/custom/BccNpsScore/BccNpsScore.css +++ b/component-library/src/components/custom/BccNpsScore/BccNpsScore.css @@ -1,6 +1,6 @@ @layer components { .bcc-nps-score { - @apply body-sm flex min-w-70 flex-col gap-y-2 p-4 select-none; + @apply body-md flex min-w-70 flex-col gap-y-1.5 p-4 select-none; } .bcc-nps-score--heading { From fd1dbb66e671198db3cbaf5911a392b2f114bbcf Mon Sep 17 00:00:00 2001 From: Edvin Covaci Date: Thu, 10 Sep 2026 15:25:28 +0200 Subject: [PATCH 3/3] fix: test --- .../custom/BccNpsResult/__snapshots__/BccNpsResult.spec.ts.snap | 1 + 1 file changed, 1 insertion(+) diff --git a/component-library/src/components/custom/BccNpsResult/__snapshots__/BccNpsResult.spec.ts.snap b/component-library/src/components/custom/BccNpsResult/__snapshots__/BccNpsResult.spec.ts.snap index 14940d44..e9128603 100644 --- a/component-library/src/components/custom/BccNpsResult/__snapshots__/BccNpsResult.spec.ts.snap +++ b/component-library/src/components/custom/BccNpsResult/__snapshots__/BccNpsResult.spec.ts.snap @@ -14,6 +14,7 @@ exports[`BccNpsResult > renders a nps result 1`] = `

20

+
" `;