@klodd/ds 5.1.0 → 5.2.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.
- package/css/components/progress-bar.css +110 -0
- package/css/index.css +1 -0
- package/js/hero-roll.js +33 -6
- package/package.json +1 -1
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
/* ================================================================
|
|
2
|
+
components/progress-bar.css
|
|
3
|
+
|
|
4
|
+
Två sibling-blocks for polling-driven progress-UI:
|
|
5
|
+
|
|
6
|
+
.pipeline-progress - overst pa /korningar nar DigestRun pagar
|
|
7
|
+
(cron-morning/cron-alert/cron-signals)
|
|
8
|
+
.brief-progress - pa /jobb/{id} nar bolagsanalys eller
|
|
9
|
+
brevgenerering pagar (job_briefs)
|
|
10
|
+
|
|
11
|
+
Samma visuella formspraket (6px-bar, 0.4s width-transition, accent-9-
|
|
12
|
+
fill, sunken-track) men separata block-klasser sa de inte krockar
|
|
13
|
+
med varandra. Olika DOM-id:n och olika underlag (digest_runs vs
|
|
14
|
+
job_briefs) - hade kunnat slas ihop till en .progress-bar med
|
|
15
|
+
modifiers, men kept separata for tydligare BEM-block per use-case.
|
|
16
|
+
|
|
17
|
+
Blocks:
|
|
18
|
+
.pipeline-progress - root, /korningar
|
|
19
|
+
.brief-progress - root, /jobb/{id}
|
|
20
|
+
|
|
21
|
+
BEM-element (samma per block):
|
|
22
|
+
__header - flex-row: label vänster, pct hoger
|
|
23
|
+
__bar-track - bakgrund-track 6px hojd
|
|
24
|
+
__bar - accent-fyllning, width transition
|
|
25
|
+
__sub - sub-text under bar (.pipeline-progress)
|
|
26
|
+
__hint - hint-text under bar (.brief-progress)
|
|
27
|
+
__label - inline label-element (anvandbart pa /design)
|
|
28
|
+
__pct - inline pct-element (anvandbart pa /design)
|
|
29
|
+
|
|
30
|
+
Lyftad fran jubb.css 2026-05-18 till komponent-mappen sa /design
|
|
31
|
+
kan ladda bara denna fil utan att dra in hela Jubb-domain-CSS:n
|
|
32
|
+
(per Calles brief 2026-05-07: ingenting i styleguiden far paverka
|
|
33
|
+
appens overiga CSS).
|
|
34
|
+
|
|
35
|
+
Tokens: --surface-sunken, --accent-9, --text-default, --text-muted,
|
|
36
|
+
--space-6/-8/-12/-16, --radius-full, --fs-12/-13.
|
|
37
|
+
================================================================ */
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
/* ─── .pipeline-progress (/korningar) ──────────────────────────── */
|
|
41
|
+
|
|
42
|
+
.pipeline-progress {
|
|
43
|
+
margin: 0 0 var(--space-16);
|
|
44
|
+
padding: var(--space-12) 0;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.pipeline-progress__header {
|
|
48
|
+
display: flex;
|
|
49
|
+
justify-content: space-between;
|
|
50
|
+
align-items: baseline;
|
|
51
|
+
margin-bottom: var(--space-8);
|
|
52
|
+
font-size: var(--fs-13);
|
|
53
|
+
color: var(--text-default);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.pipeline-progress__bar-track {
|
|
57
|
+
height: 6px;
|
|
58
|
+
background: var(--surface-sunken);
|
|
59
|
+
border-radius: var(--radius-full);
|
|
60
|
+
overflow: hidden;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.pipeline-progress__bar {
|
|
64
|
+
height: 100%;
|
|
65
|
+
background: var(--accent-9);
|
|
66
|
+
border-radius: inherit;
|
|
67
|
+
transition: width 0.4s ease;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.pipeline-progress__sub {
|
|
71
|
+
margin-top: var(--space-6);
|
|
72
|
+
font-size: var(--fs-12);
|
|
73
|
+
color: var(--text-muted);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
/* ─── .brief-progress (/jobb/{id}) ─────────────────────────────── */
|
|
78
|
+
|
|
79
|
+
.brief-progress {
|
|
80
|
+
margin: var(--space-12) 0 var(--space-16);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.brief-progress__header {
|
|
84
|
+
display: flex;
|
|
85
|
+
justify-content: space-between;
|
|
86
|
+
align-items: baseline;
|
|
87
|
+
margin-bottom: var(--space-8);
|
|
88
|
+
font-size: var(--fs-13);
|
|
89
|
+
color: var(--text-default);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.brief-progress__bar-track {
|
|
93
|
+
height: 6px;
|
|
94
|
+
background: var(--surface-sunken);
|
|
95
|
+
border-radius: var(--radius-full);
|
|
96
|
+
overflow: hidden;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.brief-progress__bar {
|
|
100
|
+
height: 100%;
|
|
101
|
+
background: var(--accent-9);
|
|
102
|
+
border-radius: inherit;
|
|
103
|
+
transition: width 0.4s ease;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.brief-progress__hint {
|
|
107
|
+
margin: var(--space-6) 0 0;
|
|
108
|
+
font-size: var(--fs-12);
|
|
109
|
+
color: var(--text-muted);
|
|
110
|
+
}
|
package/css/index.css
CHANGED
package/js/hero-roll.js
CHANGED
|
@@ -107,7 +107,10 @@
|
|
|
107
107
|
function buildAndAnimate ( el ) {
|
|
108
108
|
if ( ! el ) return;
|
|
109
109
|
if ( el.dataset.rolled === 'true' ) return;
|
|
110
|
-
|
|
110
|
+
// parseFloat sa decimaler stods. 'data-animate-roll="8.5"' rullar
|
|
111
|
+
// "8" som digit-roller och "5" som digit-roller, med "." mellan
|
|
112
|
+
// som static-char.
|
|
113
|
+
const target = parseFloat( el.dataset.animateRoll );
|
|
111
114
|
if ( isNaN( target ) ) return;
|
|
112
115
|
|
|
113
116
|
// No-op for 0
|
|
@@ -121,8 +124,14 @@
|
|
|
121
124
|
const originalText = el.textContent;
|
|
122
125
|
const isNegative = target < 0;
|
|
123
126
|
const absTarget = Math.abs( target );
|
|
124
|
-
|
|
125
|
-
|
|
127
|
+
// Split bevarar decimal-punkt som '.' i array. Heltalsdel separat
|
|
128
|
+
// fran decimaldel for thousand-separator-injektion (1 234 567).
|
|
129
|
+
const targetStr = String( absTarget );
|
|
130
|
+
const dotIndex = targetStr.indexOf( '.' );
|
|
131
|
+
const intPart = dotIndex >= 0 ? targetStr.slice( 0, dotIndex ) : targetStr;
|
|
132
|
+
const decPart = dotIndex >= 0 ? targetStr.slice( dotIndex + 1 ) : '';
|
|
133
|
+
const intDigits = intPart.split( '' ).map( Number );
|
|
134
|
+
const intLen = intDigits.length;
|
|
126
135
|
|
|
127
136
|
const fragment = document.createDocumentFragment();
|
|
128
137
|
|
|
@@ -131,17 +140,35 @@
|
|
|
131
140
|
}
|
|
132
141
|
|
|
133
142
|
const rollers = [];
|
|
134
|
-
|
|
143
|
+
// Heltalsdel: digit-rollers med thousand-separator var 3:e siffra
|
|
144
|
+
// fran hoger.
|
|
145
|
+
intDigits.forEach( function ( d, i ) {
|
|
135
146
|
const r = buildRoller( d );
|
|
136
147
|
fragment.appendChild( r.roller );
|
|
137
148
|
rollers.push( r );
|
|
138
|
-
const fromRight =
|
|
149
|
+
const fromRight = intLen - 1 - i;
|
|
139
150
|
if ( fromRight > 0 && fromRight % 3 === 0 ) {
|
|
140
151
|
fragment.appendChild( buildStaticChar( ' ' ) );
|
|
141
152
|
}
|
|
142
153
|
} );
|
|
143
154
|
|
|
144
|
-
|
|
155
|
+
// Decimal-del: punkt + digit-rollers per decimalsiffra.
|
|
156
|
+
if ( decPart.length > 0 ) {
|
|
157
|
+
fragment.appendChild( buildStaticChar( '.' ) );
|
|
158
|
+
decPart.split( '' ).map( Number ).forEach( function ( d ) {
|
|
159
|
+
const r = buildRoller( d );
|
|
160
|
+
fragment.appendChild( r.roller );
|
|
161
|
+
rollers.push( r );
|
|
162
|
+
} );
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
// Suffix konfigurerbart via data-roll-suffix. Default ' kr'
|
|
166
|
+
// for Ekonom-bakatkompat - appar utan kr-suffix sattler
|
|
167
|
+
// data-roll-suffix="" pa elementet.
|
|
168
|
+
const suffix = el.dataset.rollSuffix !== undefined ? el.dataset.rollSuffix : ' kr';
|
|
169
|
+
if ( suffix ) {
|
|
170
|
+
fragment.appendChild( buildStaticChar( suffix ) );
|
|
171
|
+
}
|
|
145
172
|
|
|
146
173
|
// Mat font-line-height for digit-roller-hojd.
|
|
147
174
|
const computed = window.getComputedStyle( el );
|