Animate client rail icons on menu activation
Build and Deploy Gateway / build-and-push (push) Successful in 13s
Build and Deploy Gateway / deploy (push) Successful in 7s

This commit is contained in:
2026-08-07 22:46:23 +03:00
parent a84e54f9dd
commit 9751f4b8c8
4 changed files with 101 additions and 22 deletions
+8 -2
View File
@@ -112,8 +112,11 @@ test('secondary menus share one right rail and both drawers open from the right'
assert.match(disabledRulesLabel, /opacity:\s*0/);
assert.match(disabledRulesLabel, /filter:\s*blur\(5px\)/);
assert.match(styles, /\.client-local-rules-toggle:disabled:hover span\s*\{[\s\S]*opacity:\s*1/);
assert.match(styles, /\.client-instructions-toggle:hover svg,[\s\S]*\.client-instructions-toggle:focus-visible svg \{[\s\S]*client-secondary-icon-motion 620ms/);
assert.match(styles, /@keyframes client-secondary-icon-motion[\s\S]*rotate\(-8deg\)[\s\S]*rotate\(5deg\)/);
assert.match(component, /client-rail-info-ring[\s\S]*client-rail-device-primary[\s\S]*client-rail-device-secondary[\s\S]*client-rail-device-link[\s\S]*client-rail-diagnostics-wave[\s\S]*client-rail-rule-knob is-top[\s\S]*client-rail-rule-knob is-bottom/);
assert.match(styles, /client-rail-info-refill[\s\S]*client-rail-device-left[\s\S]*client-rail-device-right[\s\S]*client-rail-device-link[\s\S]*client-rail-diagnostics-wave[\s\S]*client-rail-rule-top[\s\S]*client-rail-rule-bottom/);
assert.match(styles, /@keyframes client-rail-diagnostics-wave[\s\S]*scaleY\(0\.68\)[\s\S]*scaleY\(1\.32\)/);
assert.match(styles, /@keyframes client-rail-info-refill[\s\S]*stroke-dashoffset: 1[\s\S]*stroke-dashoffset: 0/);
assert.doesNotMatch(styles, /client-secondary-icon-motion|\.client-local-rules-toggle\.is-open svg\s*\{[^}]*rotate/);
assert.match(rule('.client-drawer'), /inset:\s*0 0 0 auto/);
assert.match(rule('.client-drawer'), /transform:\s*translateX\(104%\)/);
assert.match(rule('.client-drawer'), /z-index:\s*50/);
@@ -177,6 +180,9 @@ test('responsive motion has a reduced-motion fallback', () => {
assert.match(reducedMotion, /\.client-power-section/);
assert.match(reducedMotion, /\.client-form/);
assert.match(reducedMotion, /\.harbor-brand/);
assert.match(reducedMotion, /\.client-instructions-toggle circle/);
assert.match(reducedMotion, /\.client-instructions-toggle rect/);
assert.match(reducedMotion, /\.client-local-rules-toggle circle/);
assert.match(reducedMotion, /transition:\s*none/);
assert.match(reducedMotion, /animation:\s*none/);
});