Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/main' into test/migration-visual…
Browse files Browse the repository at this point in the history 
…-link
  • Loading branch information
@DavideMininni-Fincons
DavideMininni-Fincons committed Jun 27, 2024
2 parents 2bdd05c + 411dfb0 commit e413350
Show file tree
Hide file tree
Showing 38 changed files with 1,241 additions and 1,087 deletions.
20 changes: 10 additions & 10 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,15 +85,15 @@
"@open-wc/lit-helpers": "0.7.0",
"@open-wc/testing": "4.0.0",
"@sbb-esta/lyne-design-tokens": "1.0.1",
"@storybook/addon-a11y": "8.1.10",
"@storybook/addon-actions": "8.1.10",
"@storybook/addon-essentials": "8.1.10",
"@storybook/addon-interactions": "8.1.10",
"@storybook/addon-links": "8.1.10",
"@storybook/blocks": "8.1.10",
"@storybook/test": "8.1.10",
"@storybook/web-components": "8.1.10",
"@storybook/web-components-vite": "8.1.10",
"@storybook/addon-a11y": "8.1.11",
"@storybook/addon-actions": "8.1.11",
"@storybook/addon-essentials": "8.1.11",
"@storybook/addon-interactions": "8.1.11",
"@storybook/addon-links": "8.1.11",
"@storybook/blocks": "8.1.11",
"@storybook/test": "8.1.11",
"@storybook/web-components": "8.1.11",
"@storybook/web-components-vite": "8.1.11",
"@types/glob": "8.1.0",
"@types/mocha": "10.0.7",
"@types/node": "20.14.9",
Expand Down Expand Up @@ -135,7 +135,7 @@
"rollup-plugin-postcss-lit": "2.1.0",
"sass": "1.77.6",
"sinon": "18.0.0",
"storybook": "8.1.10",
"storybook": "8.1.11",
"stylelint": "16.6.1",
"stylelint-config-prettier-scss": "1.0.0",
"stylelint-config-standard-scss": "13.1.0",
Expand Down
2 changes: 1 addition & 1 deletion src/elements/accordion/accordion.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export class SbbAccordionElement extends SbbHydrationMixin(LitElement) {
}
private _multi: boolean = false;

/** Size variant, either l or s; overrides the size on any projected `sbb-expansion-panel`. `*/
/** Size variant, either l or s; overrides the size on any projected `sbb-expansion-panel`. */
@property({ reflect: true }) public size: 's' | 'l' = 'l';

private _abort = new SbbConnectedAbortController(this);
Expand Down
10 changes: 5 additions & 5 deletions src/elements/accordion/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,11 +50,11 @@ In the following example, all the `sbb-expansion-panel-header` would be wrapped

## Properties

| Name | Attribute | Privacy | Type | Default | Description |
| ------------ | ------------- | ------- | ----------------------- | ------- | ----------------------------------------------------------------------------------------- |
| `multi` | `multi` | public | `boolean` | `false` | Whether more than one sbb-expansion-panel can be open at the same time. |
| `size` | `size` | public | `'s' \| 'l'` | `'l'` | Size variant, either l or s; overrides the size on any projected `sbb-expansion-panel`. ` |
| `titleLevel` | `title-level` | public | `SbbTitleLevel \| null` | `null` | The heading level for the sbb-expansion-panel-headers within the component. |
| Name | Attribute | Privacy | Type | Default | Description |
| ------------ | ------------- | ------- | ----------------------- | ------- | --------------------------------------------------------------------------------------- |
| `multi` | `multi` | public | `boolean` | `false` | Whether more than one sbb-expansion-panel can be open at the same time. |
| `size` | `size` | public | `'s' \| 'l'` | `'l'` | Size variant, either l or s; overrides the size on any projected `sbb-expansion-panel`. |
| `titleLevel` | `title-level` | public | `SbbTitleLevel \| null` | `null` | The heading level for the sbb-expansion-panel-headers within the component. |

## Slots

Expand Down
2 changes: 1 addition & 1 deletion src/elements/clock/__snapshots__/clock.snapshot.spec.snap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ snapshots["sbb-clock renders with fixed time DOM"] =
`<sbb-clock
data-initialized=""
now="12:30:00"
style="--sbb-clock-hours-animation-start-angle: 15deg; --sbb-clock-hours-animation-duration: 41400s; --sbb-clock-seconds-animation-start-angle: 0deg; --sbb-clock-seconds-animation-duration: 60s; --sbb-clock-animation-play-state: running;"
style="--sbb-clock-animation-play-state: paused; --sbb-clock-hours-animation-start-angle: 15deg; --sbb-clock-hours-animation-duration: 41400s; --sbb-clock-seconds-animation-start-angle: 0deg; --sbb-clock-seconds-animation-duration: 60s;"
>
</sbb-clock>
`;
Expand Down
180 changes: 91 additions & 89 deletions src/elements/clock/clock.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,20 +86,28 @@ export class SbbClockElement extends LitElement {
/** Move the minutes hand every minute. */
private _handMovement?: ReturnType<typeof setInterval>;

protected override willUpdate(changedProperties: PropertyValues<this>): void {
protected override async willUpdate(changedProperties: PropertyValues<this>): Promise<void> {
super.willUpdate(changedProperties);

if (!isServer && changedProperties.has('now')) {
if (this.now) {
this._removeSecondsAnimationStyles();
this._removeHoursAnimationStyles();
this._stopClock();
} else {
this._startClock();
}
await this._startOrConfigureClock();
}
}

protected override async firstUpdated(changedProperties: PropertyValues<this>): Promise<void> {
super.firstUpdated(changedProperties);

if (!isServer) {
document.addEventListener('visibilitychange', this._handlePageVisibilityChange, false);
await this._startOrConfigureClock();
}
}

public override disconnectedCallback(): void {
super.disconnectedCallback();
this._removeEventListeners();
}

private _handlePageVisibilityChange = async (): Promise<void> => {
if (document.visibilityState === 'hidden') {
await this._stopClock();
Expand All @@ -108,40 +116,51 @@ export class SbbClockElement extends LitElement {
}
};

private _addEventListeners(): void {
document.addEventListener('visibilitychange', this._handlePageVisibilityChange, false);
private async _startOrConfigureClock(): Promise<void> {
if (this.now) {
await this._stopClock();
this._resetSecondsHandAnimation();
this._setHandsStartingPosition();
} else {
await this._startClock();
}
}

private _removeEventListeners(): void {
document?.removeEventListener('visibilitychange', this._handlePageVisibilityChange);
this._clockHandHours?.removeEventListener('animationend', this._moveHoursHandFn);
this._clockHandSeconds?.removeEventListener('animationend', this._moveMinutesHandFn);
clearInterval(this._handMovement);
}
/** Starts the clock by defining the hands starting position then starting the animations. */
private async _startClock(): Promise<void> {
this._clockHandHours?.addEventListener(
'animationend',
this._moveHoursHandFn,
ADD_EVENT_LISTENER_OPTIONS,
);
this._clockHandSeconds?.addEventListener(
'animationend',
this._moveMinutesHandFn,
ADD_EVENT_LISTENER_OPTIONS,
);

private _removeHoursAnimationStyles(): void {
this._clockHandHours?.classList.remove('sbb-clock__hand-hours--initial-hour');
this.style.removeProperty('--sbb-clock-hours-animation-start-angle');
this.style.removeProperty('--sbb-clock-hours-animation-duration');
}
await new Promise(() =>
setTimeout(() => {
this._setHandsStartingPosition();

private _removeSecondsAnimationStyles(): void {
this._clockHandSeconds?.classList.remove('sbb-clock__hand-seconds--initial-minute');
this._clockHandMinutes?.classList.remove('sbb-clock__hand-minutes--no-transition');
this.style.removeProperty('--sbb-clock-seconds-animation-start-angle');
this.style.removeProperty('--sbb-clock-seconds-animation-duration');
this.style?.setProperty('--sbb-clock-animation-play-state', 'running');
}, INITIAL_TIMEOUT_DURATION),
);
}

/** Given the current date, calculates the hh/mm/ss values and the hh/mm/ss left to the next midnight. */
private _assignCurrentTime(): void {
const date = this.now ? null : new Date();
const [hours, minutes, seconds] = date
? [date.getHours(), date.getMinutes(), date.getSeconds()]
: this.now!.split(':').map((p) => +p);
/** Stops the clock by removing all the animations. */
private async _stopClock(): Promise<void> {
clearInterval(this._handMovement);

this._hours = hours % 12;
this._minutes = minutes;
this._seconds = seconds;
this._removeSecondsAnimationStyles();
this._removeHoursAnimationStyles();

this._clockHandHours?.removeEventListener('animationend', this._moveHoursHandFn);
this._clockHandSeconds?.removeEventListener('animationend', this._moveMinutesHandFn);

this._clockHandMinutes?.classList.add('sbb-clock__hand-minutes--no-transition');

this.style?.setProperty('--sbb-clock-animation-play-state', 'paused');
}

/** Set the starting position for the three hands on the clock face. */
Expand Down Expand Up @@ -185,11 +204,22 @@ export class SbbClockElement extends LitElement {

this._clockHandSeconds?.classList.add('sbb-clock__hand-seconds--initial-minute');
this._clockHandHours?.classList.add('sbb-clock__hand-hours--initial-hour');
this.style?.setProperty('--sbb-clock-animation-play-state', 'running');

this.toggleAttribute('data-initialized', true);
}

/** Given the current date, calculates the hh/mm/ss values and the hh/mm/ss left to the next midnight. */
private _assignCurrentTime(): void {
const date = this.now ? null : new Date();
const [hours, minutes, seconds] = date
? [date.getHours(), date.getMinutes(), date.getSeconds()]
: this.now!.split(':').map((p) => +p);

this._hours = hours % 12;
this._minutes = minutes;
this._seconds = seconds;
}

/** Set the starting position for the minutes hand. */
private _setMinutesHand(): void {
this._clockHandMinutes?.style.setProperty(
Expand Down Expand Up @@ -230,67 +260,39 @@ export class SbbClockElement extends LitElement {
this._setMinutesHand();
}

/** Stops the clock by removing all the animations. */
private async _stopClock(): Promise<void> {
clearInterval(this._handMovement);

if (this.now) {
this._setHandsStartingPosition();

// Wait a tick to before animation is added. Otherwise, the animation gets not completely
// removed which can lead to a mispositioned seconds hand.
await new Promise((resolve) => setTimeout(resolve));

this._clockHandSeconds?.classList.add('sbb-clock__hand-seconds--initial-minute');
this._clockHandHours?.classList.add('sbb-clock__hand-hours--initial-hour');
} else {
this._removeSecondsAnimationStyles();
this._removeHoursAnimationStyles();
/**
* Removing animation by overriding with empty string,
* then triggering a reflow and re add original animation by removing override.
* @private
*/
private _resetSecondsHandAnimation(): void {
if (!this._clockHandSeconds) {
return;
}
this._clockHandSeconds.style.animation = '';
// Hack to trigger reflow
this._clockHandSeconds.offsetHeight;
this._clockHandSeconds.style.removeProperty('animation');
}

private _removeEventListeners(): void {
document?.removeEventListener('visibilitychange', this._handlePageVisibilityChange);
this._clockHandHours?.removeEventListener('animationend', this._moveHoursHandFn);
this._clockHandSeconds?.removeEventListener('animationend', this._moveMinutesHandFn);

this._clockHandMinutes?.classList.add('sbb-clock__hand-minutes--no-transition');

this.style?.setProperty('--sbb-clock-animation-play-state', 'paused');
}

/** Starts the clock by defining the hands starting position then starting the animations. */
private async _startClock(): Promise<void> {
this._clockHandHours?.addEventListener(
'animationend',
this._moveHoursHandFn,
ADD_EVENT_LISTENER_OPTIONS,
);
this._clockHandSeconds?.addEventListener(
'animationend',
this._moveMinutesHandFn,
ADD_EVENT_LISTENER_OPTIONS,
);

await new Promise(() =>
setTimeout(() => this._setHandsStartingPosition(), INITIAL_TIMEOUT_DURATION),
);
clearInterval(this._handMovement);
}

protected override async firstUpdated(changedProperties: PropertyValues<this>): Promise<void> {
super.firstUpdated(changedProperties);

if (!isServer) {
this._addEventListeners();

if (this.now) {
await this._stopClock();
} else {
await this._startClock();
}
}
private _removeHoursAnimationStyles(): void {
this._clockHandHours?.classList.remove('sbb-clock__hand-hours--initial-hour');
this.style.removeProperty('--sbb-clock-hours-animation-start-angle');
this.style.removeProperty('--sbb-clock-hours-animation-duration');
}

public override disconnectedCallback(): void {
super.disconnectedCallback();
this._removeEventListeners();
private _removeSecondsAnimationStyles(): void {
this._clockHandSeconds?.classList.remove('sbb-clock__hand-seconds--initial-minute');
this._clockHandMinutes?.classList.remove('sbb-clock__hand-minutes--no-transition');
this.style.removeProperty('--sbb-clock-seconds-animation-start-angle');
this.style.removeProperty('--sbb-clock-seconds-animation-duration');
}

protected override render(): TemplateResult {
Expand Down
12 changes: 11 additions & 1 deletion src/elements/core/testing/private/fixture.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import type { TemplateResult } from 'lit';
import { styleMap } from 'lit/directives/style-map.js';

import { waitForLitRender } from '../wait-for-render.js';

Expand Down Expand Up @@ -87,14 +88,23 @@ export async function visualRegressionFixture<T extends HTMLElement>(
color?: string;
focusOutlineDark?: boolean;
padding?: string;
minHeight?: string;
},
): Promise<T> {
const base = tryFindBase(new Error().stack!);
const { html } = await import('lit-html');
return await fixture<T>(
html`<div
id="visual-regression-fixture-wrapper"
style=${`padding: ${wrapperStyles?.padding ?? '2rem'};background-color: ${wrapperStyles?.backgroundColor ?? 'var(--sbb-color-white)'};${wrapperStyles?.color ? `color: ${wrapperStyles?.color};` : ''}${wrapperStyles?.focusOutlineDark ? ' --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);' : ''}`}
style=${styleMap({
padding: wrapperStyles?.padding ?? '2rem',
'background-color': wrapperStyles?.backgroundColor ?? 'var(--sbb-color-white)',
color: wrapperStyles?.color,
'--sbb-focus-outline-color': wrapperStyles?.focusOutlineDark
? 'var(--sbb-focus-outline-color-dark)'
: undefined,
'min-height': wrapperStyles?.minHeight,
})}
tabindex="0"
>
${template}
Expand Down
2 changes: 1 addition & 1 deletion src/elements/core/testing/private/visual-regression-snapshot.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { visualRegressionFixture } from './fixture.js';
import { tabKey } from './keys.js';

export function imageName(test: Mocha.Runnable): string {
return test!.fullTitle().replaceAll(', ', '-').replaceAll(' ', '_');
return test!.fullTitle().replaceAll(', ', '-').replaceAll(' ', '_').replaceAll('.', '_');
}

class VisualDiffSetupBuilder {
Expand Down
Loading

0 comments on commit e413350

Please sign in to comment.