feat: adding local variables in banner, chart and contextualbar

Author: Afriq Yasin Ramadhan

src/components/banner/Banner.spec.ts

@@ -164,7 +164,7 @@ 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")' })
 })
 
 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="{ '--p-banner-bg-image' : bannerBgImage }">
     <div
       v-if="!noIcon"
       class="banner__icon"
@@ -85,6 +85,8 @@ const classNames = computed(() => {
   return result
 })
 
+const bannerBgImage = `url("${props.backgroundUrl}")`
+
 const icon = computed(() => {
   return BannerIcons[props.variant]
 })
@@ -105,7 +107,10 @@ defineSlots<{
 
 <style lang="postcss">
 .banner {
-  @apply p-4 flex space-x-2 rounded text-subtle;
+  --p-banner-padding-x: theme(spacing.4);
+  --p-banner-padding-y: theme(spacing.4);
+
+  @apply px-[var(--p-banner-padding-x)] py-[var(--p-banner-padding-y)] flex space-x-2 rounded text-subtle;
   @apply dark:text-dark-subtle;
 
   a {
@@ -124,7 +129,7 @@ defineSlots<{
   }
 
   &&--custom-background {
-    @apply bg-cover bg-no-repeat bg-center overflow-hidden;
+    @apply bg-cover bg-no-repeat bg-center overflow-hidden bg-[image:var(--p-banner-bg-image)];
   }
 
   &&--overlay {

src/components/banner/index.md

@@ -232,6 +232,13 @@ You can hide close button with `dismissable` set to `false`
 </template>
 ```
 
+## Variables
+Banner use local CSS variables on `.banner` for enhanced real-time customization.
+
+```sass
+--p-banner-padding-x: theme(spacing.4);
+--p-banner-padding-y: theme(spacing.4);
+```
 
 ## API
 

src/components/chart/Chart.vue

@@ -148,7 +148,10 @@ onBeforeUnmount(() => {
 
 <style lang="postcss">
 .chart {
-  @apply w-full bg-default p-4;
+  --p-chart-padding-x: theme(spacing.4);
+  --p-chart-padding-y: theme(spacing.4);
+
+  @apply w-full bg-default px-[var(--p-chart-padding-x)] py-[var(--p-chart-padding-y)];
   @apply dark:bg-dark-default;
 }
 </style>

src/components/chart/index.md

@@ -517,6 +517,14 @@ If renderless not satisfies your needs, you can manually set the datasets and op
 </script>
 ```
 
+## Variables
+Chart use local CSS variables on `.chart` for enhanced real-time customization.
+
+```sass
+--p-chart-padding-x: theme(spacing.4);
+--p-chart-padding-y: theme(spacing.4);
+```
+
 ## API
 
 ### Props `<p-chart>`

src/components/contextual-bar/ContextualBar.spec.ts

@@ -145,7 +145,7 @@ it('should be able to add custom background via prop `background-url`', () => {
 
   expect(bar).toBeInTheDocument()
   expect(bar).toHaveClass('contextual-bar--background-image')
-  expect(bar).toHaveStyle({ 'background-image': 'url("assets/images/img-background-contextualbar.svg")' })
+  expect(bar).toHaveStyle({ '--p-contextualbar-bg-image': 'url("assets/images/img-background-contextualbar.svg")' })
 })
 
 it('should be able to add icon via slot `icon`', () => {

src/components/contextual-bar/ContextualBar.vue

@@ -11,7 +11,7 @@
       class="contextual-bar"
       v-bind="$attrs"
       :class="classNames"
-      :style="{ 'background-image': backgroundUrl ? `url('${backgroundUrl}')`: 'none' }">
+      :style="{ '--p-contextualbar-bg-image': backgroundImageUrl }">
       <div
         data-testid="contextual-bar-wrapper"
         :class="[{ 'contextual-bar__wrapper--with-message' : (message || $slots.message), 'contextual-bar__wrapper--with-action' : $slots.action } ,'contextual-bar__wrapper']">
@@ -142,6 +142,10 @@ const classNames = computed(() => {
   return result
 })
 
+const backgroundImageUrl = computed(() => {
+  return `url("${props.backgroundUrl}")`
+})
+
 function onEnter (target: HTMLDivElement) {
   target.style.setProperty('transform', `translateY(-${target.clientHeight}px)`)
 
@@ -207,7 +211,7 @@ defineSlots<{
   * are available
   */
   &--background-image {
-    @apply bg-no-repeat bg-cover bg-[top_center];
+    @apply bg-no-repeat bg-cover bg-[top_center] !bg-[image:var(--p-contextualbar-bg-image)];
   }
 
   /**

src/components/contextual-bar/index.md

@@ -211,7 +211,7 @@ import IconInfo from '@privyid/persona-icon/vue/information-circle-solid/20.vue'
     message="You will be unable to sign or seal a document"
     background-url="../../public/assets/images/img-contextualbar-bg.svg">
     <template #icon>
-      <img src="../avatar/assets/avatar.png" />
+      <img src="../../public/assets/images/user.png" />
     </template>
   </p-contextual-bar>
 </preview>
@@ -288,7 +288,7 @@ To align Contextual Bar content, use align prop. Available value are `left`, `ri
     title="Hey! This is Title Text and telling less as possible"
     background-url="../../public/assets/images/img-contextualbar-bg.svg">
     <template #icon>
-      <img src="../avatar/assets/avatar.png" />
+      <img src="../../public/assets/images/user.png" />
     </template>
     <template #action>
       <p-button size="sm" color="secondary" variant="link">Cancel</p-button>

src/components/pdf-viewer/PdfNavigation.vue

@@ -91,7 +91,7 @@ const pages = computed<SelectItem[]>(() => {
       @apply flex bg-inverse text-subtlest rounded p-2 space-x-1 items-center;
       @apply dark:text-dark-default;
 
-      > .btn {
+      > .btn.btn--variant-ghost {
         @apply text-subtlest hover:text-muted focus:text-muted;
         @apply dark:text-dark-subtle hover:dark:text-dark-default focus:dark:text-dark-default;
       }