diff --git a/components/package.json b/components/package.json index be1e1c69..25ed59cd 100644 --- a/components/package.json +++ b/components/package.json @@ -16,6 +16,8 @@ "build": "vite build", "preview": "vite preview", "package": "svelte-kit sync && svelte-package -i src && publint", + "package:dev": "svelte-kit sync && svelte-package -i src", + "package:watch": "nodemon --watch src --ext svelte,js,ts,css --ignore '**/*.test.*' --ignore '**/*.spec.*' --ignore '**/*.stories.*' --exec 'npm run package:dev'", "prepublishOnly": "npm run package", "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", @@ -37,7 +39,6 @@ "svelte-select": "5.8.3" }, "devDependencies": { - "layercake": "^10.0.2", "@semantic-release/changelog": "6.0.3", "@semantic-release/git": "10.0.1", "@semantic-release/npm": "13.1.3", @@ -55,24 +56,26 @@ "@types/geojson": "7946.0.16", "@versatiles/style": "5.7.0", "@vitest/browser": "4.0.18", + "@vitest/browser-playwright": "4.0.18", "@vitest/coverage-v8": "4.0.18", "@vueless/storybook-dark-mode": "9.0.8", "concurrently": "9.2.1", "http-server": "14.1.1", + "layercake": "^10.0.2", "mdx-mermaid": "2.0.3", + "nodemon": "^3.1.11", "playwright": "1.58.1", "publint": "0.3.17", "sass": "1.93.2", "sass-embedded": "1.97.3", "semantic-release": "25.0.3", - "storybook": "10.2.3", + "storybook": "10.2.4", "svelte": "5.49.1", "svelte-check": "4.3.2", "svelte-preprocess": "6.0.3", "typescript": "5.9.3", "vite": "7.3.0", "vitest": "4.0.18", - "@vitest/browser-playwright": "4.0.18", "wait-on": "8.0.3" }, "overrides": { diff --git a/components/src/Breakout/Breakout.svelte b/components/src/Breakout/Breakout.svelte index 2f285d4e..7c45b4e2 100644 --- a/components/src/Breakout/Breakout.svelte +++ b/components/src/Breakout/Breakout.svelte @@ -13,69 +13,89 @@ diff --git a/components/src/DesignTokens/DesignTokens.svelte b/components/src/DesignTokens/DesignTokens.svelte index 7290aba8..d8f32d23 100644 --- a/components/src/DesignTokens/DesignTokens.svelte +++ b/components/src/DesignTokens/DesignTokens.svelte @@ -98,7 +98,7 @@ --fs-base: 1.25rem; --fs-large-1: 1.5rem; --fs-large-2: 2rem; - --fs-large-3: 3rem; + --fs-large-3: 2.5rem; --fs-large-4: 3.5rem; } } diff --git a/components/src/DevContainer/ArrowRight.svg.svelte b/components/src/DevContainer/ArrowRight.svg.svelte new file mode 100644 index 00000000..eaef850d --- /dev/null +++ b/components/src/DevContainer/ArrowRight.svg.svelte @@ -0,0 +1,10 @@ + + + diff --git a/components/src/DevContainer/DevContainer.svelte b/components/src/DevContainer/DevContainer.svelte index 90a69bba..47adaeba 100644 --- a/components/src/DevContainer/DevContainer.svelte +++ b/components/src/DevContainer/DevContainer.svelte @@ -2,6 +2,8 @@ import type { Snippet } from 'svelte'; import SwrLogo from './SwrLogo.svg.svelte'; + import Home from './Home.svg.svelte'; + import ArrowRight from './ArrowRight.svg.svelte'; import GridInspector from './GridInspector.svelte'; import DesignTokens from '../DesignTokens/DesignTokens.svelte'; import Copy from '../Copy/Copy.svelte'; @@ -70,7 +72,15 @@ {/if} {#if showBreadcrumbs} -
+
+ + + + + SWR Aktuell + + Bundesland +
{/if} {#if showPlayer} @@ -103,6 +113,9 @@ +
+ Von Autor:in 1, Autor:in 2, Autor:in 3, SWR Data Lab +
@@ -144,6 +157,12 @@ diff --git a/components/src/SwrHeader/SwrHeader.svelte b/components/src/SwrHeader/SwrHeader.svelte index e8a95076..bf0176b0 100644 --- a/components/src/SwrHeader/SwrHeader.svelte +++ b/components/src/SwrHeader/SwrHeader.svelte @@ -2,10 +2,12 @@ import { type Snippet } from 'svelte'; import Caption from '../Caption/Caption.svelte'; + import dataLabImage from '../assets/data_lab.jpg?enhanced&w=200'; interface Byline { name: string; image?: string; + url?: string; } interface SwrHeaderProps { @@ -15,6 +17,7 @@ imageModules?: Record; updated?: Date | string; bylines?: Byline[]; + showTextShadow?: boolean; } const { @@ -23,13 +26,14 @@ eyebrow, imageModules, updated, - bylines = [] + bylines = [], + showTextShadow = false }: SwrHeaderProps = $props(); const updated_on = updated ? (updated instanceof Date ? updated : new Date(updated)) : null; -
+
{#if eyebrow}

{eyebrow}

{/if} @@ -40,45 +44,93 @@

{/if}
+ {#if updated_on} +
+
Stand:
+
{updated_on.toLocaleDateString('de-DE')}
+
+ {/if} {#if bylines && bylines.length > 0} - {@const nameString = `Von ${bylines.map((el) => (el.url ? `${el.name}` : el.name)).join(', ')}, SWR Data Lab`}
{#if imageModules}
    {#each bylines.filter((el) => el.image && el.image in imageModules) as b, i} {@const src = imageModules[b.image].default} -
  • +
    • {/each} +
  • + +
{/if} -

{@html nameString}

+

+ Von + {#each bylines as byline, i} + {#if i > 0},{/if} + {#if byline.url} + {byline.name} + {:else} + {byline.name} + {/if} + {/each}, SWR Data Lab +

{/if} - {#if updated_on} -

Stand: {updated_on.toLocaleDateString('de-DE')}

- {/if}