From ac663e77fbace869ed70d05064736b028d2751b0 Mon Sep 17 00:00:00 2001 From: Rawan Abbas Date: Mon, 27 Feb 2023 19:38:01 -0500 Subject: [PATCH 1/2] Add Icon next to Message --- src/lib/SvelteToast.svelte | 6 +++++- src/lib/ToastItem.svelte | 23 +++++++++++++++++++++++ src/lib/stores.js | 1 + src/routes/+page.svelte | 28 ++++++++++++++++++++++++++++ tests/test.js | 11 +++++++++++ 5 files changed, 68 insertions(+), 1 deletion(-) diff --git a/src/lib/SvelteToast.svelte b/src/lib/SvelteToast.svelte index ef4775c..456bd66 100644 --- a/src/lib/SvelteToast.svelte +++ b/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) diff --git a/src/lib/ToastItem.svelte b/src/lib/ToastItem.svelte index 4a70013..fcf35d2 100644 --- a/src/lib/ToastItem.svelte +++ b/src/lib/ToastItem.svelte @@ -87,6 +87,10 @@ onDestroy(() => { }} on:mouseleave={resume} > + {#if item.image} + toast + {/if} +
{#if item.component} @@ -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%); +} + diff --git a/src/lib/stores.js b/src/lib/stores.js index 98a2019..75218eb 100644 --- a/src/lib/stores.js +++ b/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} */ diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 0947d8e..e23cd7f 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -345,12 +345,40 @@ 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', { + 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': `'✓'` + } + }) + } } ] diff --git a/tests/test.js b/tests/test.js index 2041178..1ac3f02 100644 --- a/tests/test.js +++ b/tests/test.js @@ -262,3 +262,14 @@ 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.evaluate(`window.TEST_MODE=true`) + await page.getByTestId('toastWithAnIcon').click() + const btn = await page + .locator('._toastIcon') + .evaluate((e) => window.getComputedStyle(e, ':after').content) + expect(btn).toBe('"✓"') +}) \ No newline at end of file From c416a13804297dc6d1facafb0142310fddd9159f Mon Sep 17 00:00:00 2001 From: Rawan Abbas Date: Mon, 27 Feb 2023 20:53:46 -0500 Subject: [PATCH 2/2] Add Unit Tests for Icon and Image --- playwright.config.js | 2 +- src/routes/+page.svelte | 5 +++-- tests/test.js | 11 ++++++++--- 3 files changed, 12 insertions(+), 6 deletions(-) diff --git a/playwright.config.js b/playwright.config.js index 7c36730..bd55c8d 100644 --- a/playwright.config.js +++ b/playwright.config.js @@ -9,7 +9,7 @@ const config = { port: dev ? 5173 : 4173, reuseExistingServer: dev }, - testDir: 'tests' + testDir: 'tests', } export default config diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index e23cd7f..e9a37d5 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -360,8 +360,9 @@ toast.pop(0)`, })`, run: () => { toast.push('I am with an image', { - image: '/favicon.png' - }) + duration: 20000, + image: '/favicon.png' + }) } }, { diff --git a/tests/test.js b/tests/test.js index 1ac3f02..2bef899 100644 --- a/tests/test.js +++ b/tests/test.js @@ -266,10 +266,15 @@ test('deprecated css vars still work', async ({ page }) => { test('can add icon next to the message', async ({ page }) => { await page.goto('/') - await page.evaluate(`window.TEST_MODE=true`) await page.getByTestId('toastWithAnIcon').click() - const btn = await page + const icon = await page .locator('._toastIcon') .evaluate((e) => window.getComputedStyle(e, ':after').content) - expect(btn).toBe('"✓"') + 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") }) \ No newline at end of file