@klodd/ds 5.0.0 → 5.1.0
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.
|
@@ -87,3 +87,52 @@
|
|
|
87
87
|
transition: none;
|
|
88
88
|
}
|
|
89
89
|
}
|
|
90
|
+
|
|
91
|
+
/* ================================================================
|
|
92
|
+
.progress-list (v5.1.0): wrapper-pattern for stack av items dar
|
|
93
|
+
varje item har en label-row + en .progress-bar. Lyft fran Ekonoms
|
|
94
|
+
ekonom.css (cat-bar-list/cat-bar-row) till paketet sa apparna delar
|
|
95
|
+
list-pattern istallet for att ha lokala dubletter.
|
|
96
|
+
|
|
97
|
+
Anvands:
|
|
98
|
+
<ul class="progress-list">
|
|
99
|
+
<li>
|
|
100
|
+
<div class="progress-list__row">
|
|
101
|
+
<span>Mat</span>
|
|
102
|
+
<span class="text-num ml-auto">3 240 kr</span>
|
|
103
|
+
</div>
|
|
104
|
+
<div class="progress">
|
|
105
|
+
<div class="progress__bar cat-mat" data-bar-width="80%"></div>
|
|
106
|
+
</div>
|
|
107
|
+
</li>
|
|
108
|
+
</ul>
|
|
109
|
+
|
|
110
|
+
Blocks:
|
|
111
|
+
.progress-list - <ul>-reset + spacing mellan items
|
|
112
|
+
|
|
113
|
+
Element:
|
|
114
|
+
.progress-list__row - flex-row for label + amount ovan en .progress
|
|
115
|
+
================================================================ */
|
|
116
|
+
.progress-list {
|
|
117
|
+
list-style: none;
|
|
118
|
+
padding: 0;
|
|
119
|
+
margin: 0;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.progress-list > li {
|
|
123
|
+
margin-bottom: var(--space-14);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.progress-list > li:last-child {
|
|
127
|
+
margin-bottom: 0;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.progress-list__row {
|
|
131
|
+
display: flex;
|
|
132
|
+
align-items: center;
|
|
133
|
+
gap: var(--space-10);
|
|
134
|
+
margin-bottom: var(--space-6);
|
|
135
|
+
font-size: var(--fs-14);
|
|
136
|
+
color: var(--text-default);
|
|
137
|
+
flex-wrap: wrap;
|
|
138
|
+
}
|
package/package.json
CHANGED
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
# 0023 - .progress-list utility lyft till paketet
|
|
2
|
+
|
|
3
|
+
**Status:** Locked
|
|
4
|
+
**Datum:** 2026-05-15
|
|
5
|
+
**Version:** @klodd/ds 5.1.0
|
|
6
|
+
|
|
7
|
+
## Beslut
|
|
8
|
+
|
|
9
|
+
Lägg `.progress-list` + `.progress-list__row` i `components/progress.css`
|
|
10
|
+
som generic wrapper-pattern för "lista av items där varje har label-row +
|
|
11
|
+
en .progress-bar".
|
|
12
|
+
|
|
13
|
+
Tidigare bodde dessa som `.cat-bar-list` + `.cat-bar-row` i Ekonoms
|
|
14
|
+
`ekonom.css` (legacy-namn från innan v5.0.0 när bar-komponenter var
|
|
15
|
+
separata). Lyft till paketet för att:
|
|
16
|
+
|
|
17
|
+
1. Eliminera Ekonom-domain-CSS som inte är domain-specifikt
|
|
18
|
+
2. Ge framtida appar samma list-pattern utan kopiering
|
|
19
|
+
3. Tydliggöra att klassen wrappar `.progress` (inte är en alternativ
|
|
20
|
+
bar-stil)
|
|
21
|
+
|
|
22
|
+
## Konsekvens
|
|
23
|
+
|
|
24
|
+
- Ekonoms `ekonom.css` raderar `.cat-bar-list`, `.cat-bar-row`,
|
|
25
|
+
`.budget-bar-wrapper` (43 rader)
|
|
26
|
+
- Ekonoms 4 templates (avstamning, kategorier, privat, bolan) migreras
|
|
27
|
+
till `.progress-list` / `.progress-list__row`
|
|
28
|
+
- `.budget-bar-wrapper` (padding 0 0 8 0 wrapper) raderas helt - parent-
|
|
29
|
+
spacing räcker, ingen ersättning
|
|
30
|
+
- /design "local-wrappers"-sektion raderas (Ekonom-domain krymper från
|
|
31
|
+
5 till 3 sektioner: review-flow, avi-flow, cat-bindings)
|
|
32
|
+
|
|
33
|
+
## Definitioner
|
|
34
|
+
|
|
35
|
+
```css
|
|
36
|
+
.progress-list {
|
|
37
|
+
list-style: none;
|
|
38
|
+
padding: 0;
|
|
39
|
+
margin: 0;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.progress-list > li {
|
|
43
|
+
margin-bottom: var(--space-14);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.progress-list > li:last-child {
|
|
47
|
+
margin-bottom: 0;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.progress-list__row {
|
|
51
|
+
display: flex;
|
|
52
|
+
align-items: center;
|
|
53
|
+
gap: var(--space-10);
|
|
54
|
+
margin-bottom: var(--space-6);
|
|
55
|
+
font-size: var(--fs-14);
|
|
56
|
+
color: var(--text-default);
|
|
57
|
+
flex-wrap: wrap;
|
|
58
|
+
}
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
## Användning
|
|
62
|
+
|
|
63
|
+
```html
|
|
64
|
+
<ul class="progress-list">
|
|
65
|
+
<li>
|
|
66
|
+
<div class="progress-list__row">
|
|
67
|
+
<span>Mat</span>
|
|
68
|
+
<span class="text-num ml-auto">3 240 kr</span>
|
|
69
|
+
</div>
|
|
70
|
+
<div class="progress">
|
|
71
|
+
<div class="progress__bar cat-mat" data-bar-width="80%"></div>
|
|
72
|
+
</div>
|
|
73
|
+
</li>
|
|
74
|
+
</ul>
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
## Calle's direktiv (2026-05-15)
|
|
78
|
+
|
|
79
|
+
> "Vi ska ha en bar-stil, och den ska definieras under 'progress' eller
|
|
80
|
+
> 'bar' eller vad som är tydligast. Alla andra ska raderas, och alla
|
|
81
|
+
> som idag använder någon form av bar ska ha den nya."
|
|
82
|
+
|
|
83
|
+
Konsoliderar EN bar-stil (.progress, ADR 0022) + EN list-pattern för
|
|
84
|
+
bars (.progress-list, denna ADR), båda i paketet, ingen i app-domain.
|