diff --git a/packages/components-dev/e2e/components/__screenshots__/KbqToggleModule-DevToggleStateAndStyle-default-1.png b/packages/components-dev/e2e/components/__screenshots__/KbqToggleModule-DevToggleStateAndStyle-default-1.png new file mode 100644 index 0000000000..031be9c896 Binary files /dev/null and b/packages/components-dev/e2e/components/__screenshots__/KbqToggleModule-DevToggleStateAndStyle-default-1.png differ diff --git a/packages/components-dev/e2e/components/__screenshots__/KbqToggleModule-DevToggleStateAndStyle-default-dark-theme-1.png b/packages/components-dev/e2e/components/__screenshots__/KbqToggleModule-DevToggleStateAndStyle-default-dark-theme-1.png new file mode 100644 index 0000000000..55b8abdc43 Binary files /dev/null and b/packages/components-dev/e2e/components/__screenshots__/KbqToggleModule-DevToggleStateAndStyle-default-dark-theme-1.png differ diff --git a/packages/components-dev/e2e/components/__screenshots__/KbqToggleModule-DevToggleStateAndStyle-indeterminate-1.png b/packages/components-dev/e2e/components/__screenshots__/KbqToggleModule-DevToggleStateAndStyle-indeterminate-1.png new file mode 100644 index 0000000000..b47767ad51 Binary files /dev/null and b/packages/components-dev/e2e/components/__screenshots__/KbqToggleModule-DevToggleStateAndStyle-indeterminate-1.png differ diff --git a/packages/components-dev/e2e/components/__screenshots__/KbqToggleModule-DevToggleWithTextAndCaption-big-1.png b/packages/components-dev/e2e/components/__screenshots__/KbqToggleModule-DevToggleWithTextAndCaption-big-1.png new file mode 100644 index 0000000000..01e4578ea5 Binary files /dev/null and b/packages/components-dev/e2e/components/__screenshots__/KbqToggleModule-DevToggleWithTextAndCaption-big-1.png differ diff --git a/packages/components-dev/e2e/components/__screenshots__/KbqToggleModule-DevToggleWithTextAndCaption-default-1.png b/packages/components-dev/e2e/components/__screenshots__/KbqToggleModule-DevToggleWithTextAndCaption-default-1.png new file mode 100644 index 0000000000..2ff03376a8 Binary files /dev/null and b/packages/components-dev/e2e/components/__screenshots__/KbqToggleModule-DevToggleWithTextAndCaption-default-1.png differ diff --git a/packages/components-dev/e2e/components/__screenshots__/KbqToggleModule-DevToggleWithTextAndCaption-default-dark-theme-1.png b/packages/components-dev/e2e/components/__screenshots__/KbqToggleModule-DevToggleWithTextAndCaption-default-dark-theme-1.png new file mode 100644 index 0000000000..3bb07f9b7b Binary files /dev/null and b/packages/components-dev/e2e/components/__screenshots__/KbqToggleModule-DevToggleWithTextAndCaption-default-dark-theme-1.png differ diff --git a/packages/components-dev/e2e/components/toggle.playwright-spec.ts b/packages/components-dev/e2e/components/toggle.playwright-spec.ts new file mode 100644 index 0000000000..ecfbbca560 --- /dev/null +++ b/packages/components-dev/e2e/components/toggle.playwright-spec.ts @@ -0,0 +1,72 @@ +import { expect, Locator, Page, test } from '@playwright/test'; +import { devEnableDarkTheme, devGoToRootPage } from '../utils'; + +test.describe('KbqToggleModule', () => { + const getScreenshotTarget = (locator: Locator): Locator => locator.getByTestId('e2eScreenshotTarget'); + const getIndeterminateToggle = (locator: Locator): Locator => locator.getByTestId('e2eIndeterminateToggle'); + const getBigToggle = (locator: Locator): Locator => locator.getByTestId('e2eBigToggle'); + + test.describe('DevToggleStateAndStyle', () => { + const getComponent = (page: Page): Locator => page.getByTestId('e2eToggleStateAndStyle'); + const getFirstToggle = (locator: Locator): Locator => locator.locator('kbq-toggle').first(); + + test('default', async ({ page }) => { + await devGoToRootPage(page); + await expect(getScreenshotTarget(getComponent(page))).toHaveScreenshot(); + }); + + test('default (dark theme)', async ({ page }) => { + await devGoToRootPage(page); + await devEnableDarkTheme(page); + await expect(getScreenshotTarget(getComponent(page))).toHaveScreenshot(); + }); + + test('should have correct size', async ({ page }) => { + await devGoToRootPage(page); + + const component = getComponent(page); + const { width, height } = (await getFirstToggle(component).boundingBox()) ?? {}; + + expect(width).toBe(28); + expect(height).toBe(16); + + await getBigToggle(component).click(); + + expect(width).toBe(28); + expect(height).toBe(16); + }); + + test('indeterminate', async ({ page }) => { + await devGoToRootPage(page); + + const component = getComponent(page); + + await getIndeterminateToggle(component).click(); + await expect(getScreenshotTarget(component)).toHaveScreenshot(); + }); + }); + + test.describe('DevToggleWithTextAndCaption', () => { + const getComponent = (page: Page): Locator => page.getByTestId('e2eToggleWithTextAndCaption'); + + test('default', async ({ page }) => { + await devGoToRootPage(page); + await expect(getScreenshotTarget(getComponent(page))).toHaveScreenshot(); + }); + + test('default (dark theme)', async ({ page }) => { + await devGoToRootPage(page); + await devEnableDarkTheme(page); + await expect(getScreenshotTarget(getComponent(page))).toHaveScreenshot(); + }); + + test('big', async ({ page }) => { + await devGoToRootPage(page); + + const component = getComponent(page); + + await getBigToggle(component).click(); + await expect(getScreenshotTarget(component)).toHaveScreenshot(); + }); + }); +}); diff --git a/packages/components-dev/e2e/components/toggle.ts b/packages/components-dev/e2e/components/toggle.ts new file mode 100644 index 0000000000..3258326498 --- /dev/null +++ b/packages/components-dev/e2e/components/toggle.ts @@ -0,0 +1,120 @@ +import { ChangeDetectionStrategy, Component, model } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { KbqComponentColors } from '@koobiq/components/core'; +import { KbqFormFieldModule } from '@koobiq/components/form-field'; +import { KbqToggleModule } from '@koobiq/components/toggle'; + +@Component({ + standalone: true, + imports: [KbqToggleModule, FormsModule], + selector: 'dev-toggle-state-and-style', + host: { + 'data-testid': 'e2eToggleStateAndStyle' + }, + template: ` + + + + + + @for (color of colors; track color) { + + @for (state of states; track state) { + + } + + } + +
+
+ @for (type of types; track type) { + + } +
+
+ `, + styles: ` + td { + padding: var(--kbq-size-xs); + width: 1px; + } + + div { + display: flex; + flex-direction: column; + gap: var(--kbq-size-xxs); + } + `, + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class DevToggleStateAndStyle { + readonly states = ['normal', 'hovered', 'focused', 'disabled', 'loading'] as const; + readonly colors = [KbqComponentColors.Theme, KbqComponentColors.Error]; + readonly types = ['default', 'checked'] as const; + + readonly indeterminate = model(false); + readonly big = model(false); +} + +@Component({ + standalone: true, + imports: [KbqToggleModule, KbqFormFieldModule, FormsModule], + selector: 'dev-toggle-with-text-and-caption', + host: { + 'data-testid': 'e2eToggleWithTextAndCaption' + }, + template: ` + + + + + @for (state of states; track state) { + + @for (position of positions; track position) { + + } + + } + +
+
+ + Text + Caption + +
+
+ `, + styles: ` + td { + padding: var(--kbq-size-xs); + width: 1px; + } + + div { + display: flex; + flex-direction: column; + gap: var(--kbq-size-m); + } + `, + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class DevToggleWithTextAndCaption { + readonly states = ['normal', 'disabled'] as const; + readonly positions = ['left', 'right'] as const; + + readonly big = model(false); +} diff --git a/packages/components-dev/e2e/module.ts b/packages/components-dev/e2e/module.ts index 1eb01b0691..98559b6e80 100644 --- a/packages/components-dev/e2e/module.ts +++ b/packages/components-dev/e2e/module.ts @@ -4,6 +4,7 @@ import { DevActionsPanelWithOverlayContainer } from './components/actions-panel' import { DevButtonStateAndStyle } from './components/button'; import { DevFileUploadStateAndStyle } from './components/file-upload'; import { DevTagEditable, DevTagStateAndStyle } from './components/tag'; +import { DevToggleStateAndStyle, DevToggleWithTextAndCaption } from './components/toggle'; @Component({ standalone: true, @@ -13,7 +14,9 @@ import { DevTagEditable, DevTagStateAndStyle } from './components/tag'; DevFileUploadStateAndStyle, DevActionsPanelWithOverlayContainer, DevTagStateAndStyle, - DevTagEditable + DevTagEditable, + DevToggleStateAndStyle, + DevToggleWithTextAndCaption ], selector: 'dev-app', templateUrl: 'template.html', diff --git a/packages/components-dev/e2e/template.html b/packages/components-dev/e2e/template.html index c80ccc1cc8..8724e05a0e 100644 --- a/packages/components-dev/e2e/template.html +++ b/packages/components-dev/e2e/template.html @@ -18,4 +18,13 @@
+ + +
+ + + +
+ + diff --git a/packages/components/toggle/_toggle-theme.scss b/packages/components/toggle/_toggle-theme.scss index 13670d8415..0b590b1031 100644 --- a/packages/components/toggle/_toggle-theme.scss +++ b/packages/components/toggle/_toggle-theme.scss @@ -16,18 +16,17 @@ @mixin _kbq-toggle-color($type) { @include _kbq-toggle-state($type, default); - &:hover { + &:is(:hover, .kbq-hovered) { @include _kbq-toggle-state($type, states-hover); } &.kbq-active, &.kbq-indeterminate { @include _kbq-toggle-state($type, states-checked); - } - &.kbq-active:hover, - &.kbq-indeterminate:hover { - @include _kbq-toggle-state($type, states-checked-hover); + &:is(:hover, .kbq-hovered) { + @include _kbq-toggle-state($type, states-checked-hover); + } } &.cdk-keyboard-focused { diff --git a/packages/components/toggle/toggle-tokens.scss b/packages/components/toggle/toggle-tokens.scss index ea0796014e..0caacf9f82 100644 --- a/packages/components/toggle/toggle-tokens.scss +++ b/packages/components/toggle/toggle-tokens.scss @@ -5,7 +5,6 @@ --kbq-toggle-size-big-height: var(--kbq-size-l); --kbq-toggle-size-big-width: 28px; --kbq-toggle-size-big-horizontal-content-padding: var(--kbq-size-s); - --kbq-toggle-size-big-vertical-content-padding: var(--kbq-size-s); /* THEME TOKENS */ --kbq-toggle-theme-default-border: var(--kbq-line-contrast-less); --kbq-toggle-theme-default-background: var(--kbq-background-bg);