Toast icon

playwright.config.js

@@ -9,7 +9,7 @@ const config = {
     port: dev ? 5173 : 4173,
     reuseExistingServer: dev
   },
-  testDir: 'tests'
+  testDir: 'tests',
 }
 
 export default config

src/lib/SvelteToast.svelte

@@ -12,7 +12,11 @@ export let target = 'default'
 let items = []
 
 function getCss(theme) {
-  return Object.keys(theme).reduce((a, c) => `${a}${c}:${theme[c]};`, '')
+  let ret = Object.keys(theme).reduce((a, c) => `${a}${c}:${theme[c]};`, '')
+  console.log('====================================');
+  console.log(ret);
+  console.log('====================================');
+  return ret;
 }
 
 $: toast._init(target, options)

src/lib/ToastItem.svelte

@@ -87,6 +87,10 @@ onDestroy(() => {
   }}
   on:mouseleave={resume}
 >
+  {#if item.image}
+    <img src={item.image} alt="toast" class="_toastImg" />
+  {/if}
+    <div class="_toastIcon"></div>
   <div role="status" class="_toastMsg" class:pe={item.component}>
     {#if item.component}
       <svelte:component this={item.component.src} {...cprops} />
@@ -136,6 +140,13 @@ onDestroy(() => {
   padding: var(--toastMsgPadding, 0.75rem 0.5rem);
   flex: 1 1 0%;
 }
+
+._toastImg {
+  height: 100%;
+  width: 2rem;
+  padding-left: 0.75rem;
+}
+
 .pe,
 ._toastMsg :global(a) {
   pointer-events: auto;
@@ -153,6 +164,7 @@ onDestroy(() => {
   align-items: center;
   justify-content: center;
 }
+
 ._toastBar {
   top: var(--toastBarTop, auto);
   right: var(--toastBarRight, auto);
@@ -179,4 +191,15 @@ onDestroy(() => {
 ._toastBar::-moz-progress-bar {
   background: var(--toastProgressBackground, var(--toastBarBackground, rgba(33, 150, 243, 0.75)));
 }
+
+._toastIcon::after {
+  content: var(--toastIconContent);
+  font: var(--toastIconFont, 1rem sans-serif);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--toastIconWidth, 2rem);
+  height: var(--toastIconHeight, 100%);
+}
+
 </style>

src/lib/stores.js

@@ -37,6 +37,7 @@ import { writable } from 'svelte/store'
  * @property {SvelteToastOnPopCallback} [onpop] - callback that runs on toast dismiss
  * @property {SvelteToastCustomComponent} [component] - send custom Svelte Component as a message
  * @property {number} [progress] - DEPRECATED
+ * @property {string} [image] - The image next to the text in the toast
  */
 
 /** @type {SvelteToastOptions} */

src/routes/+page.svelte

@@ -345,12 +345,41 @@ toast.pop(0)`,
 }`,
     run: () =>
       toast.push('Say cheese!', {
+        initial: 0,
         theme: {
           '--toastBtnContent': window.TEST_MODE
             ? `'x'`
             : `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' fill='%23F1CB30' viewBox='0 0 512 512' xml:space='preserve'%3E%3Cpath d='M256,0C114.842,0,0,114.842,0,256s114.842,256,256,256s256-114.842,256-256S397.158,0,256,0z'/%3E%3Cg%3E%3Cpath style='fill:%2357575C;' d='M355.297,175.321c-8.161,0-16.167,3.305-21.938,9.092c-5.773,5.772-9.092,13.762-9.092,21.938 c0,8.163,3.32,16.168,9.092,21.94c5.772,5.772,13.777,9.09,21.938,9.09c8.161,0,16.167-3.32,21.938-9.09 c5.773-5.772,9.092-13.777,9.092-21.94c0-8.176-3.32-16.167-9.092-21.938C371.464,178.626,363.472,175.321,355.297,175.321z'/%3E%3Cpath style='fill:%2357575C;' d='M178.641,228.291c5.773-5.772,9.092-13.762,9.092-21.94c0-8.176-3.32-16.167-9.092-21.938 c-5.772-5.787-13.777-9.092-21.938-9.092c-8.161,0-16.167,3.305-21.938,9.092c-5.772,5.772-9.092,13.762-9.092,21.938 c0,8.176,3.32,16.168,9.092,21.94c5.772,5.786,13.777,9.09,21.938,9.09C164.864,237.382,172.87,234.077,178.641,228.291z'/%3E%3C/g%3E%3Cpath style='fill:%23DF6246;' d='M356.49,326.085c-3.603-8.696-12.088-14.367-21.501-14.367H256h-78.991 c-9.413,0-17.898,5.671-21.501,14.367c-3.601,8.696-1.61,18.708,5.046,25.363c25.495,25.493,59.392,39.534,95.446,39.534 s69.952-14.041,95.446-39.534C358.102,344.792,360.093,334.78,356.49,326.085z'/%3E%3Cpath style='fill:%23E69629;' d='M160.552,351.448c-6.656-6.654-8.647-16.665-5.046-25.363c3.603-8.696,12.088-14.367,21.501-14.367 H256V0C114.842,0,0,114.842,0,256s114.842,256,256,256V390.982C219.946,390.982,186.048,376.941,160.552,351.448z M125.673,206.352 c0-8.176,3.32-16.167,9.092-21.938c5.772-5.787,13.777-9.092,21.938-9.092c8.161,0,16.167,3.305,21.938,9.092 c5.773,5.772,9.092,13.762,9.092,21.938c0,8.176-3.32,16.168-9.092,21.94c-5.772,5.786-13.777,9.09-21.938,9.09 c-8.161,0-16.167-3.305-21.938-9.09C128.993,222.52,125.673,214.528,125.673,206.352z'/%3E%3Cpath style='fill:%23DD512A;' d='M177.009,311.718c-9.413,0-17.898,5.671-21.501,14.367c-3.601,8.696-1.61,18.708,5.046,25.363 c25.495,25.493,59.39,39.534,95.445,39.534v-79.264H177.009z'/%3E%3C/svg%3E")`
         }
       })
+  },
+  {
+    name: 'Toast with an image',
+    code: `toast.push('I am with an image', {
+      image: '/favicon.png'
+    })`,
+    run: () => {
+      toast.push('I am with an image', {
+        duration: 20000,
+        image: '/favicon.png'
+      })
+   }
+  },
+  {
+    name: 'Toast with an icon',
+    code: ` toast.push('I am with an icon', {
+      initial: 0,
+      theme: {
+        '--toastIconContent': \`'✓'\`
+      }
+    })`,
+    run: () => {
+      toast.push('I am with an icon', {
+        theme: {
+        '--toastIconContent': `'✓'`
+        }
+      })
+    }
   }
 ]
 

tests/test.js

@@ -262,3 +262,19 @@ test('deprecated css vars still work', async ({ page }) => {
   const ss1 = await snap('._toastContainer li:last-child ._toastBar')
   expect(ss0).toEqual(ss1)
 })
+
+
+test('can add icon next to the message', async ({ page }) => {
+  await page.goto('/')
+  await page.getByTestId('toastWithAnIcon').click()
+ const icon = await page
+    .locator('._toastIcon')
+    .evaluate((e) => window.getComputedStyle(e, ':after').content)
+    expect(icon).toBe('"✓"')
+  })
+
+  test('can add image next to the message', async ({ page }) => {
+    await page.goto('/')
+    await page.getByTestId('toastWithAnImage').click()
+    await expect(page.locator('._toastImg')).toHaveAttribute("src", "/favicon.png")
+})