From e6313ca4c2396053e58bbbee78a2db64c59927c1 Mon Sep 17 00:00:00 2001 From: Max Kohler Date: Sun, 13 Apr 2025 13:05:13 +0200 Subject: [PATCH 01/14] Migrate Tokens to typescript --- .../src/DesignTokens/{Tokens.js => Tokens.ts} | 63 +++++++++++-------- 1 file changed, 37 insertions(+), 26 deletions(-) rename components/src/DesignTokens/{Tokens.js => Tokens.ts} (60%) diff --git a/components/src/DesignTokens/Tokens.js b/components/src/DesignTokens/Tokens.ts similarity index 60% rename from components/src/DesignTokens/Tokens.js rename to components/src/DesignTokens/Tokens.ts index 592efd4..7283277 100644 --- a/components/src/DesignTokens/Tokens.js +++ b/components/src/DesignTokens/Tokens.ts @@ -1,4 +1,14 @@ -const shades = { +interface ColourMap { + [index: string]: ColourPalette | ColourList; +} +interface ColourPalette { + [index: string]: string +} +interface ColourList { + [index: number]: string +} + +const shades: ColourMap = { violet: { light5: '#f3eefa', light4: '#e5dbf5', @@ -138,31 +148,32 @@ const shades = { } }; -const scales = { - violets: [ - shades.violet.dark3, - shades.violet.dark2, - shades.violet.dark1, - shades.violet.base, - shades.violet.light1, - shades.violet.light2, - shades.violet.light3 - ], - red_blue: [...Object.entries(shades.red).reverse(), ...Object.entries(shades.blue)], - red_violet: [...Object.entries(shades.red).reverse(), ...Object.entries(shades.violet)], - violet_teal: [...Object.entries(shades.violet).reverse(), ...Object.entries(shades.teal)], - orange_teal: [...Object.entries(shades.orange).reverse(), ...Object.entries(shades.teal)], - red_forest: [...Object.entries(shades.red).reverse(), ...Object.entries(shades.forest)], - red_apple: [...Object.entries(shades.red).reverse(), ...Object.entries(shades.apple)], - red_teal: [...Object.entries(shades.red).reverse(), ...Object.entries(shades.violet)], - violet_orange: [...Object.entries(shades.violet).reverse(), ...Object.entries(shades.orange)], - orange_blue: [...Object.entries(shades.orange).reverse(), ...Object.entries(shades.blue)], - teal_pink: [...Object.entries(shades.teal).reverse(), ...Object.entries(shades.pink)], - blue_pink: [...Object.entries(shades.blue).reverse(), ...Object.entries(shades.pink)], - apple_plum: [...Object.entries(shades.apple).reverse(), ...Object.entries(shades.plum)], - forest_plum: [...Object.entries(shades.forest).reverse(), ...Object.entries(shades.plum)] +const scales: ColourMap = { + red_blue: [...Object.values(shades.red).reverse(), ...Object.values(shades.blue)], + red_violet: [...Object.values(shades.red).reverse(), ...Object.values(shades.violet)], + violet_teal: [...Object.values(shades.violet).reverse(), ...Object.values(shades.teal)], + orange_teal: [...Object.values(shades.orange).reverse(), ...Object.values(shades.teal)], + red_forest: [...Object.values(shades.red).reverse(), ...Object.values(shades.forest)], + red_apple: [...Object.values(shades.red).reverse(), ...Object.values(shades.apple)], + red_teal: [...Object.values(shades.red).reverse(), ...Object.values(shades.violet)], + violet_orange: [...Object.values(shades.violet).reverse(), ...Object.values(shades.orange)], + orange_blue: [...Object.values(shades.orange).reverse(), ...Object.values(shades.blue)], + teal_pink: [...Object.values(shades.teal).reverse(), ...Object.values(shades.pink)], + blue_pink: [...Object.values(shades.blue).reverse(), ...Object.values(shades.pink)], + apple_plum: [...Object.values(shades.apple).reverse(), ...Object.values(shades.plum)], + forest_plum: [...Object.values(shades.forest).reverse(), ...Object.values(shades.plum)] }; -const typography = {}; +const typography = { + sizes: { + 'fs-xxs': '0.75rem', + 'fs-xs': '0.875rem', + 'fs-sm': '1rem', + fs: '1.25rem', + 'fs-md': '1.5rem', + 'fs-lg': '2rem', + 'fs-xl': '2.5rem' + } +}; -export { shades, scales }; +export { shades, scales, typography }; From d32d5c695777ecad55b8420d25b6cab68485a043 Mon Sep 17 00:00:00 2001 From: Max Kohler Date: Sun, 13 Apr 2025 13:05:37 +0200 Subject: [PATCH 02/14] Block out type scale, add Copy component --- components/.storybook/preview.ts | 2 +- components/src/Card/Card.svelte | 6 ++-- components/src/Copy/Copy.stories.svelte | 22 ++++++++++++ components/src/Copy/Copy.svelte | 23 ++++++++++++ components/src/Copy/index.js | 2 ++ components/src/DesignTokens/DesignTokens.mdx | 36 ++++++++++--------- .../src/DesignTokens/DesignTokens.svelte | 5 +-- .../src/HighlightCard/HighlightCard.svelte | 3 +- components/src/Typography.mdx | 6 ++++ 9 files changed, 81 insertions(+), 24 deletions(-) create mode 100644 components/src/Copy/Copy.stories.svelte create mode 100644 components/src/Copy/Copy.svelte create mode 100644 components/src/Copy/index.js create mode 100644 components/src/Typography.mdx diff --git a/components/.storybook/preview.ts b/components/.storybook/preview.ts index ee59718..31df09e 100644 --- a/components/.storybook/preview.ts +++ b/components/.storybook/preview.ts @@ -3,7 +3,7 @@ import type { Preview } from "@storybook/svelte"; const preview: Preview = { parameters: { options: { - storySort: { order: ['About', 'Design Tokens', "Display", "Chart", ["ChartHeader"], "Form", "Deprecated"] }, + storySort: { order: ['About', 'Design Tokens', "Typography", "Display", "Chart", ["ChartHeader"], "Form", "Deprecated"] }, }, controls: { matchers: { diff --git a/components/src/Card/Card.svelte b/components/src/Card/Card.svelte index 0ee5c53..0e1d751 100644 --- a/components/src/Card/Card.svelte +++ b/components/src/Card/Card.svelte @@ -1,5 +1,6 @@ + + + + + Björn Schittenhelm, Apotheker aus Holzgerlingen (Kreis Böblingen), bedient derzeit + größtenteils Allergiegeplagte: "Wir gehen nahtlos von der Erkältungssaison in die Pollensaison + hinein. Wir merken definitiv eine Veränderung über die letzten Jahre: Die Pollensaison wird + länger, die Grippesaison wird länger und dadurch überlappt sich das Ganze." + + + diff --git a/components/src/Copy/Copy.svelte b/components/src/Copy/Copy.svelte new file mode 100644 index 0000000..79a574e --- /dev/null +++ b/components/src/Copy/Copy.svelte @@ -0,0 +1,23 @@ + + +
+ {#if children} + {@render children()} + {/if} +
+ + diff --git a/components/src/Copy/index.js b/components/src/Copy/index.js new file mode 100644 index 0000000..affce32 --- /dev/null +++ b/components/src/Copy/index.js @@ -0,0 +1,2 @@ +import Copy from './Copy.svelte'; +export default Copy; diff --git a/components/src/DesignTokens/DesignTokens.mdx b/components/src/DesignTokens/DesignTokens.mdx index 7d795c9..d4cfa78 100644 --- a/components/src/DesignTokens/DesignTokens.mdx +++ b/components/src/DesignTokens/DesignTokens.mdx @@ -1,13 +1,11 @@ import { Title, Story, ColorPalette, ColorItem, Meta, Typeset } from '@storybook/blocks'; -import { shades, scales } from "./Tokens" +import { shades, scales, typography } from "./Tokens" # Design Tokens -## Usage - -### Web +## Web The `` component makes colours, type sizes and other design tokens available to its children as CSS variables. @@ -35,15 +33,22 @@ import { scaleThreshold } from 'd3-scale'; const sampleScale = scaleThreshold([0, 10], tokens.scales.red_blue); ``` -### Figma +## Figma The tokens on this page are available as a [Figma library](https://www.figma.com/design/Wrd7uUV3GxpNXXkM5ozuHk/Datalab-Design-Tokens?node-id=0-1&t=iOqDxhuMdvEyY8VK-1). This is enabled by default for any file in the [SWR Data Lab team](https://www.figma.com/files/1125823985461580916/team/1415988138343592768). -## Available Tokens -### Typography +## Typography + +### Sizes + + { + return size +})}/> + +### Styles -### Colours +## Colours {["violet", "plum", "pink", "red", "orange", "yellow", "apple" , "forest","teal", "blue", "gray"].map((el, i) => { @@ -61,14 +66,11 @@ The tokens on this page are available as a [Figma library](https://www.figma.com ### Divergent Scales -{["red_blue", "red_violet", "red_forest", "red_apple", "red_teal", "violet_teal","violet_orange", "blue_pink", "teal_pink","forest_plum","apple_plum", "orange_blue", "orange_teal"].map((el, i) => { - return( - {return c[0].toUpperCase() + c.slice(1)}).join("-")}`} - subtitle={el} - colors={scales[el]} - /> - ) +{["red_blue", "red_violet", "red_forest", "red_apple", "red_teal", "violet_teal", "violet_orange", "blue_pink", "teal_pink", "forest_plum", "apple_plum", "orange_blue", "orange_teal"].map((el, _) => { + return( {return c[0].toUpperCase() + c.slice(1)}).join("/")}`} + subtitle={el} + colors={scales[el]} + />) })} \ No newline at end of file diff --git a/components/src/DesignTokens/DesignTokens.svelte b/components/src/DesignTokens/DesignTokens.svelte index 6fc9847..3fce3c6 100644 --- a/components/src/DesignTokens/DesignTokens.svelte +++ b/components/src/DesignTokens/DesignTokens.svelte @@ -1,4 +1,4 @@ - diff --git a/components/src/HighlightCard/HighlightCard.svelte b/components/src/HighlightCard/HighlightCard.svelte index 80a98a7..ba73ebe 100644 --- a/components/src/HighlightCard/HighlightCard.svelte +++ b/components/src/HighlightCard/HighlightCard.svelte @@ -47,8 +47,7 @@ } .middle { - font-family: var(--swr-sans); - font-size: 54px; + font-size: var(--fs-large-4); font-weight: 700; padding-bottom: 0.2em; } diff --git a/components/src/Typography.mdx b/components/src/Typography.mdx new file mode 100644 index 0000000..a8e99c5 --- /dev/null +++ b/components/src/Typography.mdx @@ -0,0 +1,6 @@ +import {Story, Meta, Primary, Controls, Stories } from '@storybook/blocks'; + + +# Typography + +TODO \ No newline at end of file From 4519b19eec445c2628b929eb512d80bc0049e8c6 Mon Sep 17 00:00:00 2001 From: Max Kohler Date: Thu, 24 Apr 2025 11:37:17 +0200 Subject: [PATCH 03/14] Build out headline component --- components/src/ChartHeader/ChartHeader.svelte | 25 +++----- components/src/Copy/Copy.svelte | 9 ++- components/src/Copy/{index.js => index.ts} | 0 .../src/DesignTokens/DesignTokens.svelte | 57 ++++++++++++------- .../src/Headline/Headline.stories.svelte | 17 ++++++ components/src/Headline/Headline.svelte | 23 ++++++++ components/src/Headline/index.ts | 2 + components/src/Typography.mdx | 3 +- components/src/styles/base.scss | 9 ++- 9 files changed, 102 insertions(+), 43 deletions(-) rename components/src/Copy/{index.js => index.ts} (100%) create mode 100644 components/src/Headline/Headline.stories.svelte create mode 100644 components/src/Headline/Headline.svelte create mode 100644 components/src/Headline/index.ts diff --git a/components/src/ChartHeader/ChartHeader.svelte b/components/src/ChartHeader/ChartHeader.svelte index f4b6c52..f1953c6 100644 --- a/components/src/ChartHeader/ChartHeader.svelte +++ b/components/src/ChartHeader/ChartHeader.svelte @@ -1,7 +1,9 @@
-

{title}

+ {title} {#if subtitle} -

{subtitle}

+

{subtitle}

 {/if} {#if children}
@@ -27,19 +29,10 @@ color: var(--violet-blue); font-family: var(--swr-sans); } - .title { - font-size: var(--fs-large-3); - line-height: 1.05; - text-wrap: balance; - font-weight: 700; - margin-bottom: 0.2em; - } .subtitle { text-wrap: balance; - margin-bottom: 0.25em; - font-size: var(--fs-large-1); - &:last-child { - margin-bottom: 0; - } + } + .content { + margin-top: 0.25em; } diff --git a/components/src/Copy/Copy.svelte b/components/src/Copy/Copy.svelte index 79a574e..fb04b0b 100644 --- a/components/src/Copy/Copy.svelte +++ b/components/src/Copy/Copy.svelte @@ -13,11 +13,14 @@ {/if}
- diff --git a/components/src/Copy/index.js b/components/src/Copy/index.ts similarity index 100% rename from components/src/Copy/index.js rename to components/src/Copy/index.ts diff --git a/components/src/DesignTokens/DesignTokens.svelte b/components/src/DesignTokens/DesignTokens.svelte index 3fce3c6..0530c06 100644 --- a/components/src/DesignTokens/DesignTokens.svelte +++ b/components/src/DesignTokens/DesignTokens.svelte @@ -11,26 +11,7 @@ : `--${key}-${ldb}-${index}: ${value}`; }) .join(';'); - }), - , - 'display: contents', - '--fast: 150ms', - '--slow: 300ms', - '--app-max-width: 40rem', - '--br-large: 8px', - '--br-small: 4px', - '--input-height: 2.5rem', - '--swr-sans: "SWR-VAR-Sans", sans-serif', - '--swr-text: "SWR-VAR-Text", sans-serif', - '--ratio: 1.15', - '--fs-small-3: calc(var(--fs-small-2) / var(--ratio))', - '--fs-small-2: calc(var(--fs-small-1) / var(--ratio))', - '--fs-small-1: calc(var(--fs-base) / var(--ratio))', - '--fs-base: clamp(1rem, calc(1.5vw + 0.25rem), 1.125rem)', - '--fs-large-1: calc(var(--fs-base) * var(--ratio))', - '--fs-large-2: calc(var(--fs-large-1) * var(--ratio))', - '--fs-large-3: calc(var(--fs-large-2) * var(--ratio))', - '--fs-large-4: 3.375rem' + }) ]; @@ -38,9 +19,43 @@ - diff --git a/components/src/Headline/Headline.stories.svelte b/components/src/Headline/Headline.stories.svelte new file mode 100644 index 0000000..fcb267d --- /dev/null +++ b/components/src/Headline/Headline.stories.svelte @@ -0,0 +1,17 @@ + + + + + Baden-Württemberg heizt überdurchschnittlich viel mit Wärmepumpe + + diff --git a/components/src/Headline/Headline.svelte b/components/src/Headline/Headline.svelte new file mode 100644 index 0000000..c145960 --- /dev/null +++ b/components/src/Headline/Headline.svelte @@ -0,0 +1,23 @@ + + +

+ {#if children} + {@render children()} + {/if} +

+ + diff --git a/components/src/Headline/index.ts b/components/src/Headline/index.ts new file mode 100644 index 0000000..a5d92a6 --- /dev/null +++ b/components/src/Headline/index.ts @@ -0,0 +1,2 @@ +import Headline from './Headline.svelte'; +export default Headline; diff --git a/components/src/Typography.mdx b/components/src/Typography.mdx index a8e99c5..b0ea9ce 100644 --- a/components/src/Typography.mdx +++ b/components/src/Typography.mdx @@ -1,5 +1,4 @@ -import {Story, Meta, Primary, Controls, Stories } from '@storybook/blocks'; - +import { Story, Meta, Primary, Controls, Stories } from '@storybook/blocks'; # Typography diff --git a/components/src/styles/base.scss b/components/src/styles/base.scss index 65443bd..32db6c2 100644 --- a/components/src/styles/base.scss +++ b/components/src/styles/base.scss @@ -1,3 +1,11 @@ +// Copied 1:1 from swr.de +$bp-xxs: 320px; +$bp-xs: 375px; +$bp-s: 425px; +$bp-m: 768px; +$bp-l: 1024px; +$bp-xl: 1440px; + $break-phone: 510px; $break-tablet: 992px; $break-desktop-small: 1200px; @@ -5,7 +13,6 @@ $break-desktop-large: 1400px; $break-desktop-xl: 1400px; // TODO drop everything below - %caption { font-family: var(--swr-sans); font-size: 0.9rem; From 241178bbd0fb4540a72c1e62822b00943aea39b1 Mon Sep 17 00:00:00 2001 From: Max Kohler Date: Thu, 24 Apr 2025 13:10:20 +0200 Subject: [PATCH 04/14] Add Note component --- components/src/ChartFooter/ChartFooter.svelte | 25 +++--------- components/src/DesignTokens/DesignTokens.mdx | 39 ++++++++++++++++--- components/src/DesignTokens/Tokens.ts | 19 +++++---- components/src/Note/Note.stories.svelte | 23 +++++++++++ components/src/Note/Note.svelte | 38 ++++++++++++++++++ components/src/Note/index.ts | 2 + components/src/Typography.mdx | 6 +-- 7 files changed, 114 insertions(+), 38 deletions(-) create mode 100644 components/src/Note/Note.stories.svelte create mode 100644 components/src/Note/Note.svelte create mode 100644 components/src/Note/index.ts diff --git a/components/src/ChartFooter/ChartFooter.svelte b/components/src/ChartFooter/ChartFooter.svelte index 03a8c62..1384c3b 100644 --- a/components/src/ChartFooter/ChartFooter.svelte +++ b/components/src/ChartFooter/ChartFooter.svelte @@ -1,6 +1,7 @@ + + + + + Daten: Zensus 2022 + (Durchschnittsmieten und Einwohnerzahlen), + OpenStreetMap (Kartenmaterial) In unserer Darstellung wurde das Zensusgitter + auf bewohnte Gebiete begrenzt. + + + diff --git a/components/src/Note/Note.svelte b/components/src/Note/Note.svelte new file mode 100644 index 0000000..0e6bf2f --- /dev/null +++ b/components/src/Note/Note.svelte @@ -0,0 +1,38 @@ + + +
+ {#if children} + {@render children()} + {/if} +
+ + diff --git a/components/src/Note/index.ts b/components/src/Note/index.ts new file mode 100644 index 0000000..9e44112 --- /dev/null +++ b/components/src/Note/index.ts @@ -0,0 +1,2 @@ +import Note from './Note.svelte'; +export default Note; diff --git a/components/src/Typography.mdx b/components/src/Typography.mdx index b0ea9ce..38b5411 100644 --- a/components/src/Typography.mdx +++ b/components/src/Typography.mdx @@ -1,5 +1 @@ -import { Story, Meta, Primary, Controls, Stories } from '@storybook/blocks'; - -# Typography - -TODO \ No newline at end of file +import { Story, Meta, Primary, Controls, Stories } from '@storybook/blocks'; \ No newline at end of file From e3406e6e910de1d37bdcea06d1af590e44a25923 Mon Sep 17 00:00:00 2001 From: Max Kohler Date: Thu, 24 Apr 2025 13:27:20 +0200 Subject: [PATCH 05/14] Tweak weight --- components/src/Switcher/Switcher.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/src/Switcher/Switcher.svelte b/components/src/Switcher/Switcher.svelte index e015026..f88dd29 100644 --- a/components/src/Switcher/Switcher.svelte +++ b/components/src/Switcher/Switcher.svelte @@ -123,7 +123,7 @@ } .is-selected & { background: rgb(247, 247, 247); - font-weight: 700; + font-weight: 600; box-shadow: inset 5px 0px 0 0 var(--violet-dark-5); @media (min-width: base.$break-phone) { box-shadow: inset 0 -3px 0 0 var(--violet-dark-5); From f3a134ec5617c159c411dd7fa374a91f1c8a58c1 Mon Sep 17 00:00:00 2001 From: Max Kohler Date: Thu, 24 Apr 2025 13:27:51 +0200 Subject: [PATCH 06/14] Iterate documentation --- components/src/DesignTokens/DesignTokens.mdx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/components/src/DesignTokens/DesignTokens.mdx b/components/src/DesignTokens/DesignTokens.mdx index fce7ad3..e34f9db 100644 --- a/components/src/DesignTokens/DesignTokens.mdx +++ b/components/src/DesignTokens/DesignTokens.mdx @@ -59,11 +59,8 @@ The tokens on this page are available as a [Figma library](https://www.figma.com ## Typography -### Sizes - { - return size -})}/> +Type sizes and paragraph styles are designed to match the typography on [swr.de](https://www.swr.de/). **Styles** come with built-in settings for `line-height`, `letter-spacing`, etc. and should be preferred over using **sizes** directly. ### Styles #### Headline @@ -75,6 +72,12 @@ The tokens on this page are available as a [Figma library](https://www.figma.com #### Note +### Sizes + { + return size +})}/> + + ## Colours ### Shades From 1f70f771d18b72bd8e4ae257d415039d93bb8375 Mon Sep 17 00:00:00 2001 From: Max Kohler Date: Thu, 24 Apr 2025 13:52:19 +0200 Subject: [PATCH 07/14] Add font-weight prop --- components/.storybook/preview.ts | 2 +- components/src/Copy/Copy.stories.svelte | 10 ++++++++++ components/src/Copy/Copy.svelte | 14 ++++++++++---- components/src/Typography.mdx | 1 - 4 files changed, 21 insertions(+), 6 deletions(-) delete mode 100644 components/src/Typography.mdx diff --git a/components/.storybook/preview.ts b/components/.storybook/preview.ts index 31df09e..b0b5dd4 100644 --- a/components/.storybook/preview.ts +++ b/components/.storybook/preview.ts @@ -3,7 +3,7 @@ import type { Preview } from "@storybook/svelte"; const preview: Preview = { parameters: { options: { - storySort: { order: ['About', 'Design Tokens', "Typography", "Display", "Chart", ["ChartHeader"], "Form", "Deprecated"] }, + storySort: { order: ['About', 'Design Tokens', "Typography", ["Headline", "Copy"], "Display", "Chart", ["ChartHeader"], "Form", "Deprecated"] }, }, controls: { matchers: { diff --git a/components/src/Copy/Copy.stories.svelte b/components/src/Copy/Copy.stories.svelte index 813004c..fc46e45 100644 --- a/components/src/Copy/Copy.stories.svelte +++ b/components/src/Copy/Copy.stories.svelte @@ -20,3 +20,13 @@ + + + + Björn Schittenhelm, Apotheker aus Holzgerlingen (Kreis Böblingen), bedient derzeit + größtenteils Allergiegeplagte: "Wir gehen nahtlos von der Erkältungssaison in die Pollensaison + hinein. Wir merken definitiv eine Veränderung über die letzten Jahre: Die Pollensaison wird + länger, die Grippesaison wird länger und dadurch überlappt sich das Ganze." + + + diff --git a/components/src/Copy/Copy.svelte b/components/src/Copy/Copy.svelte index fb04b0b..0e9dd19 100644 --- a/components/src/Copy/Copy.svelte +++ b/components/src/Copy/Copy.svelte @@ -2,12 +2,13 @@ import type { Snippet } from 'svelte'; interface CopyProps { + weight: 'regular' | 'bold'; children?: Snippet; } - let { children }: CopyProps = $props(); + let { weight = 'regular', children }: CopyProps = $props(); -
+
{#if children} {@render children()} {/if} @@ -17,10 +18,15 @@ .container { font-family: var(--swr-sans); font-size: var(--fs-base); - letter-spacing: 0.0045em; - line-height: 1.5; + letter-spacing: 0.005em; + line-height: 1.475; p { margin-bottom: 0.5em; } } + + .bold { + font-weight: 585; + letter-spacing: 0; + } diff --git a/components/src/Typography.mdx b/components/src/Typography.mdx deleted file mode 100644 index 38b5411..0000000 --- a/components/src/Typography.mdx +++ /dev/null @@ -1 +0,0 @@ -import { Story, Meta, Primary, Controls, Stories } from '@storybook/blocks'; \ No newline at end of file From c08a1361c9f1a6591e1b7b9ad2abe771264cbda9 Mon Sep 17 00:00:00 2001 From: Max Kohler Date: Thu, 24 Apr 2025 15:48:32 +0200 Subject: [PATCH 08/14] Drop %cop-bold --- components/src/Button/Button.stories.svelte | 21 ++++++++++++++++ components/src/Button/Button.svelte | 25 +++++++++++-------- components/src/Copy/Copy.svelte | 5 +--- components/src/DesignTokens/DesignTokens.mdx | 4 +-- .../src/DesignTokens/DesignTokens.svelte | 2 +- components/src/styles/base.scss | 11 +------- 6 files changed, 40 insertions(+), 28 deletions(-) create mode 100644 components/src/Button/Button.stories.svelte diff --git a/components/src/Button/Button.stories.svelte b/components/src/Button/Button.stories.svelte new file mode 100644 index 0000000..8928c24 --- /dev/null +++ b/components/src/Button/Button.stories.svelte @@ -0,0 +1,21 @@ + + + + + + + + + + + + diff --git a/components/src/Button/Button.svelte b/components/src/Button/Button.svelte index a23e5fc..c28adcc 100644 --- a/components/src/Button/Button.svelte +++ b/components/src/Button/Button.svelte @@ -1,7 +1,9 @@ {#if as === 'a'} - {label} + + + {label} + + {:else} - + {/if} diff --git a/components/src/DesignTokens/Tokens.ts b/components/src/DesignTokens/Tokens.ts index ccd0ceb..7ce74e0 100644 --- a/components/src/DesignTokens/Tokens.ts +++ b/components/src/DesignTokens/Tokens.ts @@ -174,7 +174,8 @@ const typography = { "fs-base": "1.25rem", "fs-large-1": "1.5rem", "fs-large-2": "2rem", - "fs-large-3": "2.5rem" + "fs-large-3": "2.5rem", + "fs-large-4": "3.5rem" } } }; From 0f8c48b33d891bb6a91bce37cd9c9792431f3a9a Mon Sep 17 00:00:00 2001 From: Max Kohler Date: Fri, 25 Apr 2025 14:50:35 +0200 Subject: [PATCH 10/14] Migrate %caption to component --- .../src/Autocomplete/Autocomplete.svelte | 6 ++-- components/src/Caption/Caption.stories.svelte | 24 +++++++++++++++ components/src/Caption/Caption.svelte | 29 +++++++++++++++++++ components/src/Caption/index.ts | 2 ++ components/src/styles/base.scss | 12 ++------ 5 files changed, 61 insertions(+), 12 deletions(-) create mode 100644 components/src/Caption/Caption.stories.svelte create mode 100644 components/src/Caption/Caption.svelte create mode 100644 components/src/Caption/index.ts diff --git a/components/src/Autocomplete/Autocomplete.svelte b/components/src/Autocomplete/Autocomplete.svelte index ce301d6..5e91e5d 100644 --- a/components/src/Autocomplete/Autocomplete.svelte +++ b/components/src/Autocomplete/Autocomplete.svelte @@ -1,6 +1,7 @@ + + + + Björn Schittenhelm, Apotheker aus Holzgerlingen (Kreis Böblingen) + + + + + + Björn Schittenhelm, Apotheker aus Holzgerlingen (Kreis Böblingen) + + + diff --git a/components/src/Caption/Caption.svelte b/components/src/Caption/Caption.svelte new file mode 100644 index 0000000..c2d2a6d --- /dev/null +++ b/components/src/Caption/Caption.svelte @@ -0,0 +1,29 @@ + + +
+ {#if children} + {@render children()} + {/if} +
+ + diff --git a/components/src/Caption/index.ts b/components/src/Caption/index.ts new file mode 100644 index 0000000..9fafd15 --- /dev/null +++ b/components/src/Caption/index.ts @@ -0,0 +1,2 @@ +import Caption from './Caption.svelte'; +export default Caption; diff --git a/components/src/styles/base.scss b/components/src/styles/base.scss index e7b2b9d..781e437 100644 --- a/components/src/styles/base.scss +++ b/components/src/styles/base.scss @@ -13,20 +13,12 @@ $break-desktop-large: 1400px; $break-desktop-xl: 1400px; // TODO drop everything below -%caption { + +%form-label { font-family: var(--swr-sans); font-size: 0.9rem; line-height: 1; letter-spacing: 0.0045em; -} - -%caption-bold { - @extend %caption; - font-weight: 600; -} - -%form-label { - @extend %caption; display: block; margin-bottom: 0.5em; } From 9706d1816e81568549d04be4a8f7465e3d058bde Mon Sep 17 00:00:00 2001 From: Max Kohler Date: Fri, 25 Apr 2025 14:54:04 +0200 Subject: [PATCH 11/14] Fix menu order --- components/.storybook/preview.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/.storybook/preview.ts b/components/.storybook/preview.ts index b0b5dd4..4beebcc 100644 --- a/components/.storybook/preview.ts +++ b/components/.storybook/preview.ts @@ -3,7 +3,7 @@ import type { Preview } from "@storybook/svelte"; const preview: Preview = { parameters: { options: { - storySort: { order: ['About', 'Design Tokens', "Typography", ["Headline", "Copy"], "Display", "Chart", ["ChartHeader"], "Form", "Deprecated"] }, + storySort: { order: ['About', 'Design Tokens', "Typography", ["Headline", "Copy", "Caption"], "Display", "Chart", ["ChartHeader"], "Form", "Deprecated"] }, }, controls: { matchers: { From 282384762f1d47b661e617788d06126b7a4dd951 Mon Sep 17 00:00:00 2001 From: Max Kohler Date: Fri, 25 Apr 2025 14:54:11 +0200 Subject: [PATCH 12/14] Consolidate breakpoints --- components/src/Card/Card.svelte | 2 +- components/src/ChartFooter/ChartFooter.svelte | 2 +- components/src/Switcher/Switcher.svelte | 8 ++++---- components/src/styles/base.scss | 7 ------- 4 files changed, 6 insertions(+), 13 deletions(-) diff --git a/components/src/Card/Card.svelte b/components/src/Card/Card.svelte index 0e1d751..e878f21 100644 --- a/components/src/Card/Card.svelte +++ b/components/src/Card/Card.svelte @@ -27,7 +27,7 @@ background: var(--violet-dark-5); border-radius: var(--br-large); padding: 1.5rem; - @media (min-width: base.$break-tablet) { + @media (min-width: base.$bp-m) { padding: 2.5rem; } } diff --git a/components/src/ChartFooter/ChartFooter.svelte b/components/src/ChartFooter/ChartFooter.svelte index 1384c3b..c35399f 100644 --- a/components/src/ChartFooter/ChartFooter.svelte +++ b/components/src/ChartFooter/ChartFooter.svelte @@ -37,7 +37,7 @@ .two-up { display: grid; grid-template-columns: 1fr; - @media (min-width: base.$break-phone) { + @media (min-width: base.$bp-s) { grid-template-columns: 2.5fr 1fr; align-items: last baseline; justify-items: flex-end; diff --git a/components/src/Switcher/Switcher.svelte b/components/src/Switcher/Switcher.svelte index f88dd29..7a99c73 100644 --- a/components/src/Switcher/Switcher.svelte +++ b/components/src/Switcher/Switcher.svelte @@ -66,7 +66,7 @@ border: 1px solid currentColor; border-radius: var(--br-small); - @media (min-width: base.$break-phone) { + @media (min-width: base.$bp-s) { flex-flow: row; } @@ -106,7 +106,7 @@ text-underline-offset: 0.2em; border-bottom: 1px solid currentColor; height: 2.25em; - @media (min-width: base.$break-phone) { + @media (min-width: base.$bp-s) { justify-content: center; padding: 0 1em; flex-basis: 0; @@ -114,7 +114,7 @@ border-right: 1px solid currentColor; border-bottom: 0; } - @media (min-width: base.$break-tablet) { + @media (min-width: base.$bp-s) { height: 2.5em; } &:hover, @@ -125,7 +125,7 @@ background: rgb(247, 247, 247); font-weight: 600; box-shadow: inset 5px 0px 0 0 var(--violet-dark-5); - @media (min-width: base.$break-phone) { + @media (min-width: base.$bp-s) { box-shadow: inset 0 -3px 0 0 var(--violet-dark-5); } } diff --git a/components/src/styles/base.scss b/components/src/styles/base.scss index 781e437..a9a0518 100644 --- a/components/src/styles/base.scss +++ b/components/src/styles/base.scss @@ -6,14 +6,7 @@ $bp-m: 768px; $bp-l: 1024px; $bp-xl: 1440px; -$break-phone: 510px; -$break-tablet: 992px; -$break-desktop-small: 1200px; -$break-desktop-large: 1400px; -$break-desktop-xl: 1400px; - // TODO drop everything below - %form-label { font-family: var(--swr-sans); font-size: 0.9rem; From 84ef05aa594ea2f57483fd68841a2808b0ac43f8 Mon Sep 17 00:00:00 2001 From: Max Kohler Date: Fri, 25 Apr 2025 14:56:45 +0200 Subject: [PATCH 13/14] Fix typo --- components/src/Caption/Caption.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/src/Caption/Caption.svelte b/components/src/Caption/Caption.svelte index c2d2a6d..8e5229d 100644 --- a/components/src/Caption/Caption.svelte +++ b/components/src/Caption/Caption.svelte @@ -1,11 +1,11 @@
From b978acf94b4b6d8d78980fd293a732db178c6de8 Mon Sep 17 00:00:00 2001 From: Max Kohler Date: Fri, 25 Apr 2025 14:57:58 +0200 Subject: [PATCH 14/14] Document Caption --- components/src/DesignTokens/DesignTokens.mdx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/components/src/DesignTokens/DesignTokens.mdx b/components/src/DesignTokens/DesignTokens.mdx index 5647019..5a7112f 100644 --- a/components/src/DesignTokens/DesignTokens.mdx +++ b/components/src/DesignTokens/DesignTokens.mdx @@ -3,6 +3,7 @@ import { shades, scales, typography } from "./Tokens" import * as HeadlineStories from "../Headline/Headline.stories.svelte" import * as CopyStories from "../Copy/Copy.stories.svelte" +import * as CaptionStories from "../Caption/Caption.stories.svelte" import * as NoteStories from "../Note/Note.stories.svelte" @@ -69,6 +70,9 @@ Type sizes and paragraph styles are designed to match the typography on [swr.de] #### Copy +#### Caption + + #### Note