diff --git a/.changeset/hip-pumas-jam.md b/.changeset/hip-pumas-jam.md new file mode 100644 index 0000000000..f6ff2520d9 --- /dev/null +++ b/.changeset/hip-pumas-jam.md @@ -0,0 +1,5 @@ +--- +'@evidence-dev/core-components': patch +--- + +Add lightLogo and darkLogo props to EvidenceDefaultLayout to show different custom logos in light/dark mode diff --git a/e2e/basic/evidence.config.yaml b/e2e/basic/evidence.config.yaml index b73c074955..ce8da7556d 100644 --- a/e2e/basic/evidence.config.yaml +++ b/e2e/basic/evidence.config.yaml @@ -1,3 +1,7 @@ +appearance: + default: system + switcher: true + plugins: components: # This loads all of evidence's core charts and UI components diff --git a/e2e/basic/pages/+layout.svelte b/e2e/basic/pages/+layout.svelte new file mode 100644 index 0000000000..0dd45d3608 --- /dev/null +++ b/e2e/basic/pages/+layout.svelte @@ -0,0 +1,10 @@ + + + + + diff --git a/e2e/basic/static/darkLogo.png b/e2e/basic/static/darkLogo.png new file mode 100644 index 0000000000..92fc101c74 Binary files /dev/null and b/e2e/basic/static/darkLogo.png differ diff --git a/e2e/basic/static/lightLogo.png b/e2e/basic/static/lightLogo.png new file mode 100644 index 0000000000..69afe6d30d Binary files /dev/null and b/e2e/basic/static/lightLogo.png differ diff --git a/e2e/basic/tests/tests.spec.js b/e2e/basic/tests/tests.spec.js index a89790f1f8..0fb62a3649 100644 --- a/e2e/basic/tests/tests.spec.js +++ b/e2e/basic/tests/tests.spec.js @@ -1,6 +1,6 @@ // @ts-check import { test, expect } from '@playwright/test'; -import { waitForPageToLoad } from '../../test-utils'; +import { getLogo, switchAppearance, waitForPageToLoad } from '../../test-utils'; test('has title', async ({ page }) => { await page.goto('/'); @@ -15,3 +15,16 @@ test('has hidden sidebar', async ({ page }) => { await expect(page.getByRole('button', { name: 'Open sidebar' })).toBeVisible(); }); + +test('shows different logo in light and dark mode', async ({ page }) => { + await page.goto('/'); + await waitForPageToLoad(page); + + await switchAppearance(page, 'light'); + let logo = await getLogo(page); + await expect(logo).toHaveAttribute('src', '/lightLogo.png'); + + await switchAppearance(page, 'dark'); + logo = await getLogo(page); + await expect(logo).toHaveAttribute('src', '/darkLogo.png'); +}); diff --git a/e2e/test-utils.js b/e2e/test-utils.js index 6241c43f2c..3a7df48026 100644 --- a/e2e/test-utils.js +++ b/e2e/test-utils.js @@ -126,3 +126,11 @@ export const switchAppearance = async (page, appearance) => { await closeKebabMenu(page); } }; + +/** + * @param {import('@playwright/test').Page} page + * @returns {Promise} + */ +export const getLogo = async (page) => + // We render multiple logos and show/hide them in light/dark mode accordingly, so we need to get just the visible one here + page.getByAltText('Home', { exact: true }).locator('visible=true'); diff --git a/packages/ui/core-components/src/lib/organisms/layout/EvidenceDefaultLayout.svelte b/packages/ui/core-components/src/lib/organisms/layout/EvidenceDefaultLayout.svelte index beb5c7a415..f1b3c42135 100644 --- a/packages/ui/core-components/src/lib/organisms/layout/EvidenceDefaultLayout.svelte +++ b/packages/ui/core-components/src/lib/organisms/layout/EvidenceDefaultLayout.svelte @@ -25,8 +25,12 @@ // Layout options /** @type {string} */ export let title = undefined; - /** @type {string} */ + /** @type {string | undefined} */ export let logo = undefined; + /** @type {string | undefined} */ + export let lightLogo = undefined; + /** @type {string | undefined} */ + export let darkLogo = undefined; /** @type {boolean} */ export let neverShowQueries = false; /** @type {boolean} */ @@ -137,6 +141,8 @@ bind:mobileSidebarOpen {title} {logo} + {lightLogo} + {darkLogo} {neverShowQueries} {fullWidth} {maxWidth} diff --git a/packages/ui/core-components/src/lib/organisms/layout/Logo.svelte b/packages/ui/core-components/src/lib/organisms/layout/Logo.svelte index 55b3533685..d2ece26e27 100644 --- a/packages/ui/core-components/src/lib/organisms/layout/Logo.svelte +++ b/packages/ui/core-components/src/lib/organisms/layout/Logo.svelte @@ -3,23 +3,30 @@ import evidenceLogoBlack from './wordmark-black.png'; import { addBasePath } from '@evidence-dev/sdk/utils/svelte'; + + /** @type {string | undefined} */ export let logo; + + /** @type {string | undefined} */ + export let lightLogo; + + /** @type {string | undefined} */ + export let darkLogo; + export let title; -{#if logo} - Home -{:else if title} +{#if title} {title} {:else} Home {#if hideSidebar || sidebarFrontMatter === 'never'} - + {:else}
@@ -63,7 +68,7 @@ {/if}
{/if} diff --git a/sites/docs/pages/reference/layouts/index.md b/sites/docs/pages/reference/layouts/index.md index aeae9ff4ca..af9f605a1b 100644 --- a/sites/docs/pages/reference/layouts/index.md +++ b/sites/docs/pages/reference/layouts/index.md @@ -47,6 +47,8 @@ With a logo file in `./static/my-logo.png`. ``` +If you want to use a different logo in light and dark mode, use the `lightLogo` and `darkLogo` props instead of `logo`. + ## Options The `EvidenceDefaultLayout` component includes a number of features on every page that can be removed or customized via props @@ -71,6 +73,24 @@ App title that will replace the Evidence Logo. Link to an image which will replace the Evidence logo. This will also override any app title in the header. If the image is in your project's static directory, the link should be relative to the static directory. + + + +Link to an image which will replace the Evidence logo in light mode. This will also override any app title in the header. If the image is in your project's static directory, the link should be relative to the static directory. + + + + +Link to an image which will replace the Evidence logo in dark mode. This will also override any app title in the header. If the image is in your project's static directory, the link should be relative to the static directory. +