Making progress bar styleable with scss variables

package.json

@@ -41,6 +41,7 @@
   "sideEffects": true,
   "dependencies": {},
   "devDependencies": {
+    "@babel/helper-string-parser": "^7.19.4",
     "@types/jest": "^27.4.0",
     "@types/lodash.merge": "^4.6.6",
     "@typescript-eslint/eslint-plugin": "^5.10.1",

src/components/VtProgressBar.vue

@@ -5,22 +5,25 @@
 <script lang="ts" setup>
 import { computed, ref, watch, nextTick, onMounted, onBeforeUnmount } from "vue"
 
-import { VT_NAMESPACE } from "../ts/constants"
+import { TYPE, VT_NAMESPACE } from "../ts/constants"
 import { TOAST_DEFAULTS } from "../ts/propValidators"
+import { ToastOptionsAndContent } from "../types/toast"
 
 import type { BaseToastOptions } from "../types/toast"
 
 interface ProgressBarProps {
   timeout?: BaseToastOptions["timeout"]
   hideProgressBar?: BaseToastOptions["hideProgressBar"]
   isRunning?: boolean
+  type?: ToastOptionsAndContent["type"]
 }
 
 const emit = defineEmits(["close-toast"])
 const props = withDefaults(defineProps<ProgressBarProps>(), {
   hideProgressBar: TOAST_DEFAULTS.hideProgressBar,
   isRunning: false,
   timeout: TOAST_DEFAULTS.timeout,
+  type: TYPE.DEFAULT,
 })
 
 const el = ref<HTMLElement>()
@@ -35,7 +38,12 @@ const style = computed(() => {
 })
 
 const cpClass = computed(() =>
-  hasClass.value ? `${VT_NAMESPACE}__progress-bar` : ""
+  hasClass.value
+    ? [
+        `${VT_NAMESPACE}__progress-bar`,
+        `${VT_NAMESPACE}__progress-bar--${props.type}`,
+      ]
+    : ""
 )
 
 watch(

src/components/VtToast.vue

@@ -25,6 +25,7 @@
       :is-running="isRunning"
       :hide-progress-bar="hideProgressBar"
       :timeout="timeout"
+      :type="props.type"
       @close-toast="closeToast"
     />
   </div>

src/scss/_progressBar.scss

@@ -14,12 +14,32 @@
   width: 100%;
   height: 5px;
   z-index: ($vt-z-index + 1);
-  background-color: rgba(255, 255, 255, 0.7);
   transform-origin: left;
   animation: scale-x-frames linear 1 forwards;
+
   .#{$vt-namespace}__toast--rtl & {
     right: 0;
     left: unset;
     transform-origin: right;
   }
+
+  &--default {
+    background-color: $vt-progress-bar-color-default;
+  }
+
+  &--info {
+    background-color: $vt-progress-bar-color-info;
+  }
+
+  &--success {
+    background-color: $vt-progress-bar-color-success;
+  }
+
+  &--error {
+    background-color: $vt-progress-bar-color-error;
+  }
+
+  &--warning {
+    background-color: $vt-progress-bar-color-warning;
+  }
 }

src/scss/_variables.scss

@@ -8,14 +8,19 @@ $vt-toast-max-height: 800px !default;
 
 $vt-color-default: #1976d2 !default;
 $vt-text-color-default: #fff !default;
+$vt-progress-bar-color-default: rgba(255, 255, 255, 0.7) !default;
 $vt-color-info: #2196f3 !default;
 $vt-text-color-info: #fff !default;
+$vt-progress-bar-color-info: rgba(255, 255, 255, 0.7) !default;
 $vt-color-success: #4caf50 !default;
 $vt-text-color-success: #fff !default;
+$vt-progress-bar-color-success: rgba(255, 255, 255, 0.7) !default;
 $vt-color-warning: #ffc107 !default;
 $vt-text-color-warning: #fff !default;
+$vt-progress-bar-color-warning: rgba(255, 255, 255, 0.7) !default;
 $vt-color-error: #ff5252 !default;
 $vt-text-color-error: #fff !default;
+$vt-progress-bar-color-error: rgba(255, 255, 255, 0.7) !default;
 
 $vt-color-progress-default: linear-gradient(
   to right,

tests/unit/components/__snapshots__/VtProgressBar.spec.ts.snap

@@ -2,28 +2,28 @@
 
 exports[`VtProgressBar matches snapshot 1`] = `
 <div
-  class="Vue-Toastification__progress-bar"
+  class="Vue-Toastification__progress-bar Vue-Toastification__progress-bar--default"
   style="animation-duration: 5000ms; animation-play-state: paused; opacity: 1;"
 />
 `;
 
 exports[`VtProgressBar sets opacity to 0 from from hideProgressBar 1`] = `
 <div
-  class="Vue-Toastification__progress-bar"
+  class="Vue-Toastification__progress-bar Vue-Toastification__progress-bar--default"
   style="animation-duration: 5000ms; animation-play-state: paused; opacity: 0;"
 />
 `;
 
 exports[`VtProgressBar sets playstate from isRunning 1`] = `
 <div
-  class="Vue-Toastification__progress-bar"
+  class="Vue-Toastification__progress-bar Vue-Toastification__progress-bar--default"
   style="animation-duration: 5000ms; animation-play-state: running; opacity: 1;"
 />
 `;
 
 exports[`VtProgressBar sets style duration from timeout 1`] = `
 <div
-  class="Vue-Toastification__progress-bar"
+  class="Vue-Toastification__progress-bar Vue-Toastification__progress-bar--default"
   style="animation-duration: 1000ms; animation-play-state: paused; opacity: 1;"
 />
 `;
@@ -37,7 +37,7 @@ exports[`VtProgressBar triggers class reset on timeout change 1`] = `
 
 exports[`VtProgressBar triggers class reset on timeout change 2`] = `
 <div
-  class="Vue-Toastification__progress-bar"
+  class="Vue-Toastification__progress-bar Vue-Toastification__progress-bar--default"
   style="animation-duration: 1000ms; animation-play-state: paused; opacity: 1;"
 />
 `;

tests/unit/components/__snapshots__/VtToast.spec.ts.snap

@@ -32,7 +32,7 @@ exports[`VtToast snapshots renders 1`] = `
      × 
   </button>
   <div
-    class="Vue-Toastification__progress-bar"
+    class="Vue-Toastification__progress-bar Vue-Toastification__progress-bar--default"
     style="animation-duration: 5000ms; animation-play-state: running; opacity: 1;"
   />
 </div>
@@ -65,7 +65,7 @@ exports[`VtToast ui closeButton = false removes it 1`] = `
   </div>
   <!--v-if-->
   <div
-    class="Vue-Toastification__progress-bar"
+    class="Vue-Toastification__progress-bar Vue-Toastification__progress-bar--default"
     style="animation-duration: 5000ms; animation-play-state: running; opacity: 1;"
   />
 </div>
@@ -103,7 +103,7 @@ exports[`VtToast ui has all default sub components 1`] = `
      × 
   </button>
   <div
-    class="Vue-Toastification__progress-bar"
+    class="Vue-Toastification__progress-bar Vue-Toastification__progress-bar--default"
     style="animation-duration: 5000ms; animation-play-state: running; opacity: 1;"
   />
 </div>
@@ -129,7 +129,7 @@ exports[`VtToast ui icon = false removes it 1`] = `
      × 
   </button>
   <div
-    class="Vue-Toastification__progress-bar"
+    class="Vue-Toastification__progress-bar Vue-Toastification__progress-bar--default"
     style="animation-duration: 5000ms; animation-play-state: running; opacity: 1;"
   />
 </div>
@@ -167,7 +167,7 @@ exports[`VtToast ui renders custom aria role and button aria label 1`] = `
      × 
   </button>
   <div
-    class="Vue-Toastification__progress-bar"
+    class="Vue-Toastification__progress-bar Vue-Toastification__progress-bar--default"
     style="animation-duration: 5000ms; animation-play-state: running; opacity: 1;"
   />
 </div>
@@ -207,7 +207,7 @@ exports[`VtToast ui renders custom component 1`] = `
      × 
   </button>
   <div
-    class="Vue-Toastification__progress-bar"
+    class="Vue-Toastification__progress-bar Vue-Toastification__progress-bar--default"
     style="animation-duration: 5000ms; animation-play-state: running; opacity: 1;"
   />
 </div>
@@ -245,7 +245,7 @@ exports[`VtToast ui renders default aria role and button aria label 1`] = `
      × 
   </button>
   <div
-    class="Vue-Toastification__progress-bar"
+    class="Vue-Toastification__progress-bar Vue-Toastification__progress-bar--default"
     style="animation-duration: 5000ms; animation-play-state: running; opacity: 1;"
   />
 </div>
@@ -283,7 +283,7 @@ exports[`VtToast ui renders ltr by default 1`] = `
      × 
   </button>
   <div
-    class="Vue-Toastification__progress-bar"
+    class="Vue-Toastification__progress-bar Vue-Toastification__progress-bar--default"
     style="animation-duration: 5000ms; animation-play-state: running; opacity: 1;"
   />
 </div>
@@ -321,7 +321,7 @@ exports[`VtToast ui renders rtl if set 1`] = `
      × 
   </button>
   <div
-    class="Vue-Toastification__progress-bar"
+    class="Vue-Toastification__progress-bar Vue-Toastification__progress-bar--default"
     style="animation-duration: 5000ms; animation-play-state: running; opacity: 1;"
   />
 </div>

tests/unit/components/__snapshots__/VtToastContainer.spec.ts.snap

@@ -167,7 +167,7 @@ exports[`VtToastContainer snapshots with toasts 1`] = `
            × 
         </button>
         <div
-          class="Vue-Toastification__progress-bar"
+          class="Vue-Toastification__progress-bar Vue-Toastification__progress-bar--info"
           style="animation-duration: 5000ms; animation-play-state: running; opacity: 1;"
         />
       </div>
@@ -203,7 +203,7 @@ exports[`VtToastContainer snapshots with toasts 1`] = `
            × 
         </button>
         <div
-          class="Vue-Toastification__progress-bar"
+          class="Vue-Toastification__progress-bar Vue-Toastification__progress-bar--default"
           style="animation-duration: 5000ms; animation-play-state: running; opacity: 1;"
         />
       </div>
@@ -265,7 +265,7 @@ exports[`VtToastContainer snapshots with toasts 1`] = `
            × 
         </button>
         <div
-          class="Vue-Toastification__progress-bar"
+          class="Vue-Toastification__progress-bar Vue-Toastification__progress-bar--error"
           style="animation-duration: 5000ms; animation-play-state: running; opacity: 1;"
         />
       </div>

yarn.lock

@@ -263,6 +263,11 @@
   dependencies:
     "@babel/types" "^7.16.7"
 
+"@babel/helper-string-parser@^7.19.4":
+  version "7.19.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz#38d3acb654b4701a9b77fb0615a96f775c3a9e63"
+  integrity sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==
+
 "@babel/helper-validator-identifier@^7.14.5", "@babel/helper-validator-identifier@^7.14.9", "@babel/helper-validator-identifier@^7.15.7":
   version "7.15.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz#220df993bfe904a4a6b02ab4f3385a5ebf6e2389"