fix(banner): fix background url broken on production build

src/components/banner/Banner.spec.ts

@@ -164,7 +164,32 @@ it('should be able to add background image via slot `background-url`', () => {
   const banner = screen.queryByTestId('banner')
 
   expect(banner).toBeInTheDocument()
-  expect(banner).toHaveStyle({ 'background-image': 'url("assets/images/img-background-banner.svg")' })
+  expect(banner).toHaveStyle({
+    '--p-banner-bg-image'     : 'url("assets/images/img-background-banner.svg")',
+    '--p-banner-bg-dark-image': 'url("assets/images/img-background-banner.svg")',
+  })
+})
+
+it('should be able to add background image for dark mode via slot `background-dark-url`', () => {
+  const screen = render({
+    components: { Banner },
+    template  : `
+    <Banner
+      background-url="assets/images/img-background-banner.svg"
+      background-dark-url="assets/images/img-background-banner-dark.svg"
+    >
+      Text
+    </Banner>
+    `,
+  })
+
+  const banner = screen.queryByTestId('banner')
+
+  expect(banner).toBeInTheDocument()
+  expect(banner).toHaveStyle({
+    '--p-banner-bg-image'     : 'url("assets/images/img-background-banner.svg")',
+    '--p-banner-bg-dark-image': 'url("assets/images/img-background-banner-dark.svg")',
+  })
 })
 
 it('should be able to add background overlay via slot `background-overlay`', () => {

src/components/banner/Banner.vue

@@ -3,7 +3,7 @@
     v-if="show"
     data-testid="banner"
     :class="classNames"
-    :style="{ 'background-image': backgroundUrl ? `url('${backgroundUrl}')`: 'none' }">
+    :style="styleBg">
     <div
       v-if="!noIcon"
       class="banner__icon"
@@ -32,7 +32,11 @@
 import IconInfo from '@privyid/persona-icon/vue/information-circle-solid/20.vue'
 import IconDanger from '@privyid/persona-icon/vue/exclamation-circle-solid/20.vue'
 import IconClose from '@privyid/persona-icon/vue/close/16.vue'
-import type { PropType, VNode } from 'vue-demi'
+import type {
+  PropType,
+  StyleValue,
+  VNode,
+} from 'vue-demi'
 import { ref, computed } from 'vue-demi'
 import type { StyleVariant } from '.'
 
@@ -58,6 +62,10 @@ const props = defineProps({
     type   : String,
     default: undefined,
   },
+  backgroundDarkUrl: {
+    type   : String,
+    default: undefined,
+  },
   backgroundOverlay: {
     type   : Boolean,
     default: false,
@@ -85,6 +93,19 @@ const classNames = computed(() => {
   return result
 })
 
+const styleBg = computed<StyleValue>(() => {
+  const result: StyleValue = {}
+
+  if (props.backgroundUrl) {
+    result['--p-banner-bg-image']      = `url("${props.backgroundUrl}")`
+    result['--p-banner-bg-dark-image'] = props.backgroundDarkUrl
+      ? `url("${props.backgroundDarkUrl}")`
+      : `url("${props.backgroundUrl}")`
+  }
+
+  return result
+})
+
 const icon = computed(() => {
   return BannerIcons[props.variant]
 })
@@ -105,8 +126,11 @@ defineSlots<{
 
 <style lang="postcss">
 .banner {
-  @apply p-4 flex space-x-2 rounded text-subtle;
-  @apply dark:text-dark-subtle;
+  --p-banner-bg-image: none;
+  --p-banner-bg-dark-image: none;
+
+  @apply p-4 flex space-x-2 rounded text-subtle bg-[image:var(--p-banner-bg-image)];
+  @apply dark:text-dark-subtle dark:bg-[image:var(--p-banner-bg-dark-image)];
 
   a {
     &:not(.btn) {

src/components/banner/index.md

@@ -242,6 +242,7 @@ You can hide close button with `dismissable` set to `false`
 | `variant`           | `String`  | `info`  | Banner variant, valid value is `info`, `danger` |
 | `dismissable`       | `Boolean` | `true`  | Show / Hide dismiss button                      |
 | `backgroundUrl`     | `String`  |    -    | Custom background image of banner               |
+| `backgroundDarkUrl` | `String`  |    -    | Custom background image of banner in Dark Mode  |
 | `backgroundOverlay` | `Boolean` | `false` | Activate background overlay of banner           |
 
 ### Slots