@swr-data-lab/components 1.3.2 → 1.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/.storybook/preview-head.html +1 -1
  2. package/package.json +1 -1
  3. package/src/Card/Card.svelte +0 -1
  4. package/src/HighlightCard/HighlightCard.stories.svelte +19 -12
  5. package/src/HighlightCard/HighlightCard.svelte +5 -7
package/.storybook/preview-head.html CHANGED
@@ -1,5 +1,5 @@
1
1
  <style>
2
- /* Load SWR.de fonts for preview: */
2
+ /* Load original SWR.de fonts for consistent component preview: */
3
3
  @font-face {
4
4
  font-family: 'SWR-VAR-Text';
5
5
  src: url('https://www.swr.de/assets/fonts/swr_type/SWR_VAR_WEB/SWR-VAR-Text.woff2')
package/package.json CHANGED
@@ -61,5 +61,5 @@
61
61
  "svelte": "./src/index.js"
62
62
  }
63
63
  },
64
- "version": "1.3.2"
64
+ "version": "1.4.1"
65
65
  }
package/src/Card/Card.svelte CHANGED
@@ -11,7 +11,6 @@
11
11
  color: white;
12
12
  background: $color-violetblue;
13
13
  border-radius: $border-radius-container;
14
- margin: 0 1rem;
15
14
  padding: 1.5rem;
16
15
  @include bp($break-tablet) {
17
16
  padding: 2.5rem;
package/src/HighlightCard/HighlightCard.stories.svelte CHANGED
@@ -25,36 +25,43 @@
25
25
  <Story name="Basic HighlightCard">
26
26
  <HighlightCard
27
27
  topline="Die letzte Großspende liegt bei"
28
- highlight="375.000"
29
- highlightSecondary="Euro"
28
+ value="375.000"
29
+ unit="Euro"
30
30
  subline="Der Betrag ging am 7. Januar von Dr. Kim Musterperson ein."
31
31
  />
32
32
  </Story>
33
33
 
34
34
  <Story name="Basic HighlightCard">
35
- <div class="columns">
35
+ <div class="highlight-cards">
36
36
  <HighlightCard
37
37
  topline="Im aktuellen Jahr wurden bisher"
38
- highlight="375.000"
39
- highlightSecondary="€"
38
+ value="375.000"
39
+ unit="€"
40
40
  subline="an Parteien gespendet."
41
41
  />
42
42
  <HighlightCard
43
43
  topline="Die letzte Großspende liegt bei"
44
- highlight="37.500"
45
- highlightSecondary="€"
44
+ value="37.500"
45
+ unit="€"
46
46
  subline="Der Betrag ging am 7. Januar von Dr. Kim Musterperson ein."
47
47
  />
48
48
  </div>
49
49
  </Story>
50
50
 
51
51
  <style>
52
- .columns {
53
- display: flex;
54
- margin-top: 2rem;
52
+ .highlight-cards {
53
+ @media (min-width: 900px) {
54
+ margin: 0 -1rem;
55
+ display: flex;
56
+ }
55
57
  }
56
58
 
57
- :global(.columns > *) {
58
- flex: 1;
59
+ :global(.highlight-cards > *) {
60
+ margin: 1rem 0;
61
+
62
+ @media (min-width: 900px) {
63
+ margin: 2rem 1rem;
64
+ flex: 1;
65
+ }
59
66
  }
60
67
  </style>
package/src/HighlightCard/HighlightCard.svelte CHANGED
@@ -2,11 +2,9 @@
2
2
  import Card from '../Card/Card.svelte';
3
3
 
4
4
  export let topline = '';
5
- export let highlight = '';
6
- export let highlightSecondary = '';
5
+ export let value = '';
6
+ export let unit = '';
7
7
  export let subline = '';
8
- export let alignCards = true;
9
- export let maxWidth = '500px';
10
8
  </script>
11
9
 
12
10
  <Card>
@@ -18,9 +16,9 @@
18
16
  {/if}
19
17
  <div class="middle">
20
18
  <span class="underline">
21
- {highlight}
19
+ {value}
22
20
  </span>
23
- {highlightSecondary}
21
+ {unit}
24
22
  </div>
25
23
  <div class="bottom">
26
24
  {@html subline}
@@ -46,7 +44,7 @@
46
44
 
47
45
  .middle {
48
46
  font-family: $swr-sans;
49
- font-size: 60px;
47
+ font-size: 54px;
50
48
  font-weight: 700;
51
49
  padding-bottom: 0.2em;
52
50
  }