Add styles, e2e tests and update sample app

Refs: #5844
public-ui · Jan 8, 2025 · d9d28dc · d9d28dc
1 parent baa06f8
commit d9d28dc
Show file tree

Hide file tree

Showing 11 changed files with 98 additions and 12 deletions.
diff --git a/packages/components/src/components/modal/modal.e2e.ts b/packages/components/src/components/modal/modal.e2e.ts
@@ -114,4 +114,29 @@ test.describe('kol-modal', () => {
 			await expect(eventPromise).resolves.toBeUndefined();
 		});
 	});
+
+	test.describe('kol-modal - variant', () => {
+		test('it renders the close button in card variant', async ({ page }) => {
+			await page.setContent('<kol-modal _variant="card" _label="">Modal content</kol-modal>');
+			const kolModal = page.locator('kol-modal');
+			const dialog = page.locator('dialog');
+			await expect(dialog).toBeHidden();
+			await kolModal.evaluate((element: HTMLKolModalElement) => element.openModal());
+			await expect(dialog).toBeVisible();
+			const closeButton = page.locator('.kol-modal__close-button');
+			await expect(closeButton).toBeVisible();
+			await closeButton.click();
+			await expect(dialog).toBeHidden();
+		});
+
+		test('it does not render the close button in blank variant', async ({ page }) => {
+			await page.setContent('<kol-modal _variant="blank" _label="">Modal content</kol-modal>');
+			const kolModal = page.locator('kol-modal');
+			const dialog = page.locator('dialog');
+			const closeButton = page.locator('.kol-modal__close-button');
+			await kolModal.evaluate((element: HTMLKolModalElement) => element.openModal());
+			await expect(dialog).toBeVisible();
+			await expect(closeButton).toBeHidden();
+		});
+	});
 });
diff --git a/packages/components/src/components/modal/shadow.tsx b/packages/components/src/components/modal/shadow.tsx
@@ -6,6 +6,7 @@ import { dispatchDomEvent, KolEvent } from '../../utils/events';
 import { ModalVariantPropType, validateModalVariant } from '../../schema/props/variant/modal';
 import { KolButtonWcTag } from '../../core/component-names';
 import { translate } from '../../i18n';
+import clsx from 'clsx';
 
 /**
  * https://en.wikipedia.org/wiki/Modal_window
@@ -56,7 +57,7 @@ export class KolModal implements ModalAPI {
 	public render(): JSX.Element {
 		return (
 			<dialog
-				class="kol-modal"
+				class={clsx('kol-modal', { 'kol-modal__card': this.state._variant === 'card' && true })}
 				ref={(el) => {
 					this.refDialog = el;
 				}}

diff --git a/packages/samples/react/src/components/modal/basic.tsx b/packages/samples/react/src/components/modal/basic.tsx
@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
 import { KolButton, KolCard, KolModal } from '@public-ui/react';
@@ -10,7 +10,7 @@ export const ModalBasic: FC = () => {
 	const modalState = searchParams.get('show-modal') as string;
 	const modalElement = useRef<HTMLKolModalElement>(null);
 	const stackedModalElement = useRef<HTMLKolModalElement>(null);
-
+	const [variant, setVariant] = useState('blank');
 	useEffect(() => {
 		if (modalState === 'true') {
 			modalElement.current?.openModal();
@@ -27,7 +27,7 @@ export const ModalBasic: FC = () => {
 			</SampleDescription>
 
 			<div className="flex">
-				<KolModal _label="Primary modal" _width="80%" ref={modalElement} _on={{ onClose: () => console.log('Modal closed') }} _variant="card">
+				<KolModal _label="Primary modal" _width="80%" ref={modalElement} _on={{ onClose: () => console.log('Modal closed') }} _variant={variant}>
 					<KolCard _label="I am a modal.">
 						<KolButton
 							_label="Open stacked modal"
@@ -62,15 +62,27 @@ export const ModalBasic: FC = () => {
 						/>
 					</KolCard>
 				</KolModal>
+				<div className="grid gap-4">
+					<KolButton
+						_label="Open modal"
+						_on={{
+							onClick: () => {
+								setVariant('blank');
+								modalElement.current?.openModal();
+							},
+						}}
+					/>
 
-				<KolButton
-					_label="Open modal"
-					_on={{
-						onClick: () => {
-							modalElement.current?.openModal();
-						},
-					}}
-				/>
+					<KolButton
+						_label="Open card modal"
+						_on={{
+							onClick: () => {
+								setVariant('card');
+								modalElement.current?.openModal();
+							},
+						}}
+					/>
+				</div>
 			</div>
 		</>
 	);

diff --git a/packages/themes/default/src/components/modal.scss b/packages/themes/default/src/components/modal.scss
@@ -0,0 +1,10 @@
+@import '../mixins/rem';
+
+@layer kol-theme-component {
+	.kol-modal {
+		&__card {
+			box-shadow: 0 0 rem(4) var(--color-subtle);
+			border-radius: var(--border-radius);
+		}
+	}
+}
diff --git a/packages/themes/default/src/index.ts b/packages/themes/default/src/index.ts
@@ -25,6 +25,7 @@ import inputRangeCss from './components/input-range.scss';
 import inputTextCss from './components/input-text.scss';
 import kolibriCss from './components/kolibri.scss';
 import linkButtonCss from './components/link-button.scss';
+import modalCss from './components/modal.scss';
 import linkCss from './components/link.scss';
 import navCss from './components/nav.scss';
 import paginationCss from './components/pagination.scss';
@@ -70,6 +71,7 @@ export const DEFAULT = KoliBri.createTheme('default', {
 	'KOL-KOLIBRI': kolibriCss,
 	'KOL-LINK': linkCss,
 	'KOL-LINK-BUTTON': linkButtonCss,
+	'KOL-MODAL': modalCss,
 	'KOL-NAV': navCss,
 	'KOL-PAGINATION': paginationCss,
 	'KOL-PROGRESS': progressCss,

diff --git a/packages/themes/ecl/src/ecl-ec/components/modal.scss b/packages/themes/ecl/src/ecl-ec/components/modal.scss
@@ -0,0 +1,9 @@
+@import '../mixins/rem';
+
+@layer kol-theme-component {
+	.kol-modal {
+		&__card {
+			box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);
+		}
+	}
+}
diff --git a/packages/themes/ecl/src/ecl-ec/index.ts b/packages/themes/ecl/src/ecl-ec/index.ts
@@ -26,6 +26,7 @@ import inputTextCss from './components/input-text.scss';
 import linkButtonCss from './components/link-button.scss';
 import kolibriCss from './components/kolibri.scss';
 import linkCss from './components/link.scss';
+import modalCss from './components/modal.scss';
 import navCss from './components/nav.scss';
 import paginationCss from './components/pagination.scss';
 import progressCss from './components/progress.scss';
@@ -76,6 +77,7 @@ export const ECL_EC = KoliBri.createTheme('ecl-ec', {
 	'KOL-INPUT-DATE': inputDateCss,
 	'KOL-INPUT-EMAIL': inputEmailCss,
 	'KOL-INPUT-FILE': inputFileCss,
+	'KOL-MODAL': modalCss,
 	'KOL-SELECT': selectCss,
 	'KOL-TEXTAREA': textareaCss,
 	'KOL-TABLE-STATEFUL': tableStatefulCss,

diff --git a/packages/themes/ecl/src/ecl-eu/components/modal.scss b/packages/themes/ecl/src/ecl-eu/components/modal.scss
@@ -0,0 +1,9 @@
+@import '../mixins/rem';
+
+@layer kol-theme-component {
+	.kol-modal {
+		&__card {
+			box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);
+		}
+	}
+}
diff --git a/packages/themes/ecl/src/ecl-eu/index.ts b/packages/themes/ecl/src/ecl-eu/index.ts
@@ -26,6 +26,7 @@ import inputTextCss from './components/input-text.scss';
 import kolibriCss from './components/kolibri.scss';
 import linkButtonCss from './components/link-button.scss';
 import linkCss from './components/link.scss';
+import modalCss from './components/modal.scss';
 import navCss from './components/nav.scss';
 import paginationCss from './components/pagination.scss';
 import progressCss from './components/progress.scss';
@@ -74,6 +75,7 @@ export const ECL_EU = KoliBri.createTheme('ecl-eu', {
 	'KOL-AVATAR': avatarCss,
 	'KOL-TABS': tabsCss,
 	'KOL-LINK': linkCss,
+	'KOL-MODAL': modalCss,
 	'KOL-BUTTON-LINK': buttonLinkCss,
 	'KOL-BREADCRUMB': breadcrumbCss,
 	'KOL-DETAILS': detailsCss,

diff --git a/packages/themes/itzbund/src/components/modal.scss b/packages/themes/itzbund/src/components/modal.scss
@@ -0,0 +1,12 @@
+@import '../mixins/rem';
+
+@layer kol-theme-component {
+	.kol-modal {
+		&__card {
+			border-color: var(--border-color);
+			border-style: solid;
+			border-width: rem(1);
+			border-radius: calc(2 * var(--border-radius));
+		}
+	}
+}
diff --git a/packages/themes/itzbund/src/index.ts b/packages/themes/itzbund/src/index.ts
@@ -23,6 +23,7 @@ import inputRadioCss from './components/input-radio.scss';
 import inputTextCss from './components/input-text.scss';
 import linkButtonCss from './components/link-button.scss';
 import linkCss from './components/link.scss';
+import modalCss from './components/modal.scss';
 import navCss from './components/nav.scss';
 import paginationCss from './components/pagination.scss';
 import progressCss from './components/progress.scss';
@@ -59,6 +60,7 @@ export const ITZBund = KoliBri.createTheme('itzbund', {
 	'KOL-HEADING': headingCss,
 	'KOL-BADGE': badgeCss,
 	'KOL-LINK': linkCss,
+	'KOL-MODAL': modalCss,
 	'KOL-BREADCRUMB': breadcrumbCss,
 	'KOL-SPIN': spinCss,
 	'KOL-SINGLE-SELECT': singleSelectCss,