Port zoll-v3 theme back to KolibBri 1

packages/components/src/components/button/component.tsx

@@ -98,7 +98,7 @@ export class KolButtonWc implements API {
 					tabIndex={this.state._tabIndex}
 					type={this.state._type}
 				>
-					<kol-span-wc _icons={this.state._icons} _hideLabel={this.state._hideLabel} _label={hasExpertSlot ? '' : this.state._label}>
+					<kol-span-wc class="button-inner" _icons={this.state._icons} _hideLabel={this.state._hideLabel} _label={hasExpertSlot ? '' : this.state._label}>
 						<slot name="expert" slot="expert"></slot>
 					</kol-span-wc>
 				</button>

packages/components/src/components/button/test/html.mock.ts

@@ -48,7 +48,8 @@ export const getButtonWcHtml = (
 				...props,
 				_label: state._label,
 			},
-			slots
+			slots,
+			{ additionalClassNames: ['button-inner'] }
 		)}
 	</button>
 	${getTooltipHtml(

packages/components/src/components/span/test/html.mock.ts

@@ -13,6 +13,7 @@ type Slots = {
 } & Record<string, undefined | string>;
 export type SpanOptions = {
 	additionalAttrs?: string;
+	additionalClassNames?: string[];
 };
 export const getSpanWcHtml = (
 	props: Props,
@@ -38,8 +39,9 @@ export const getSpanWcHtml = (
 
 	const hideExpertSlot = !showExpertSlot(state._label);
 	const icon = mapIconProp2State(state._icons as KoliBriIconsProp);
+	const classNames: string[] = [...(state._hideLabel === true ? [`icon-only hide-label`] : []), ...(options?.additionalClassNames ?? [])];
 	return `
-<kol-span-wc${state._hideLabel === true ? ` class="icon-only hide-label"` : ``}${options?.additionalAttrs ?? ''}>
+<kol-span-wc${classNames.length ? ` class="${classNames.join(' ')}"` : ``}${options?.additionalAttrs ?? ''}>
 	${
 		icon.top
 			? getIconHtml({

packages/samples/react/src/components/input-checkbox/partials/cases.tsx

@@ -15,6 +15,7 @@ export const InputCheckboxCases = forwardRef<HTMLKolInputCheckboxElement, Compon
 				}}
 				_label="Nicht ausgewählt"
 				_value={false}
+				_required
 			/>
 			<KolInputCheckbox
 				{...props}

packages/samples/react/src/components/pagination/basic.tsx

@@ -8,6 +8,8 @@ export const PaginationBasic: FC = () => (
 		<KolPagination _max={10} _page={6} _siblingCount={0} _label="Test Paginierung 1" />
 		<KolPagination _max={10} _page={6} _siblingCount={2} _variant="danger" _label="Test Paginierung 2" />
 		<KolPagination _max={10} _page={6} _siblingCount={0} _boundaryCount={2} _variant="ghost" _label="Test Paginierung 3" />
-		<KolPagination _max={6} _page={6} _siblingCount={0} _boundaryCount={2} _variant="ghost" _label="Test Paginierung 3" />
+		<KolPagination _max={6} _page={6} _siblingCount={0} _boundaryCount={2} _variant="ghost" _label="Test Paginierung 4" />
+		<KolPagination _max={4} _page={6} _siblingCount={0} _boundaryCount={2} _variant="ghost" _hasButtons={false} />
+		<KolPagination _max={4} _page={1} _siblingCount={0} _boundaryCount={2} _variant="ghost" />
 	</div>
 );

packages/samples/react/src/components/select/partials/cases.tsx

@@ -15,7 +15,7 @@ type Country = {
 
 const SALUTATION_OPTIONS: SelectOption<string>[] = [
 	{
-		label: '- Keine Auswahl',
+		label: 'Keine Auswahl',
 		value: '',
 		disabled: true,
 	},
@@ -59,6 +59,7 @@ export const SelectCases = forwardRef<HTMLKolSelectElement, Components.KolSelect
 				}}
 				_touched
 			/>
+			<KolSelect {...props} _options={SALUTATION_OPTIONS} _label="Disabled" _disabled />
 			<KolSelect {...props} _options={SALUTATION_OPTIONS} _label="Anrede mit Fehler" _error={ERROR_MSG} _touched />
 			<KolSelect {...props} _options={COUNTRY_OPTIONS} _label="Mehrfachauswahl" _multiple />
 			<KolSelect {...props} _options={COUNTRY_OPTIONS} _label="Mehrfachauswahl mit Fehler" _multiple _required _error={ERROR_MSG} _touched />

packages/samples/react/src/react.main.tsx

@@ -5,7 +5,7 @@ import { HashRouter as Router } from 'react-router-dom';
 import { defineCustomElements } from '@public-ui/components/dist/loader';
 import type { Generic } from '@a11y-ui/core';
 import { register } from '@public-ui/components';
-import { BAMF, BMF, BZSt, DEFAULT, DESYv1, DESYv2, ECL_EC, ECL_EU, ITZBund, MAPZ, ZOLLv2 } from '@public-ui/themes';
+import { BAMF, BMF, BZSt, DEFAULT, DESYv1, DESYv2, ECL_EC, ECL_EU, ITZBund, MAPZ, ZOLLv2, ZOLLv3 } from '@public-ui/themes';
 import { TH } from '@public-oss/kolibri-themes';
 import { App } from './App';
 
@@ -23,7 +23,7 @@ void (async () => {
 	} else {
 		/* Regular mode: Register all known themes. */
 		try {
-			await register([BAMF, BMF, DEFAULT, BZSt, DESYv1, DESYv2, ECL_EC, ECL_EU, ITZBund, MAPZ, ZOLLv2, TH], defineCustomElements, {
+			await register([BAMF, BMF, DEFAULT, BZSt, DESYv1, DESYv2, ECL_EC, ECL_EU, ITZBund, MAPZ, ZOLLv2, ZOLLv3, TH], defineCustomElements, {
 				theme: {
 					detect: 'auto',
 				},

packages/samples/react/src/shares/theme.ts

@@ -14,7 +14,8 @@ export type Theme =
 	| 'mapz'
 	| 'th'
 	| 'unstyled'
-	| 'zoll-v2';
+	| 'zoll-v2'
+	| 'zoll-v3';
 
 export const isTheme = (value: unknown) => {
 	return (
@@ -32,7 +33,8 @@ export const isTheme = (value: unknown) => {
 			value === 'itzbund' ||
 			value === 'mapz' ||
 			value === 'th' ||
-			value === 'zoll-v2')
+			value === 'zoll-v2' ||
+			value === 'zoll-v3')
 	);
 };
 
@@ -88,16 +90,20 @@ export const THEME_OPTIONS: SelectOption<Theme>[] = [
 		label: 'Informationstechnikzentrum Bund',
 		value: 'itzbund',
 	},
-	{
-		label: 'MAPZoll-Styleguide',
-		value: 'mapz',
-	},
 	{
 		label: 'Freistaat Thüringen',
 		value: 'th',
 	},
 	{
-		label: 'Design System Zoll (v2)',
+		label: '.',
+		value: 'mapz',
+	},
+	{
+		label: '..',
 		value: 'zoll-v2',
 	},
+	{
+		label: '...',
+		value: 'zoll-v3',
+	},
 ];

packages/themes/zoll/package.json

@@ -9,9 +9,11 @@
 		"test": "npm-run-all test:*",
 		"test:mapz": "THEME_MODULE=src/index THEME_EXPORT=MAPZ kolibri-visual-test theme-snapshots.spec.js",
 		"test:zoll-v2": "THEME_MODULE=src/index THEME_EXPORT=ZOLLv2 kolibri-visual-test theme-snapshots.spec.js",
+		"test:zoll-v3": "THEME_MODULE=src/v3/index THEME_EXPORT=ZOLLv3 kolibri-visual-test",
 		"test-update": "npm-run-all test-update:*",
 		"test-update:mapz": "THEME_MODULE=src/index THEME_EXPORT=MAPZ kolibri-visual-test --update-snapshots theme-snapshots.spec.js",
-		"test-update:zoll-v2": "THEME_MODULE=src/index THEME_EXPORT=ZOLLv2 kolibri-visual-test --update-snapshots theme-snapshots.spec.js"
+		"test-update:zoll-v2": "THEME_MODULE=src/index THEME_EXPORT=ZOLLv2 kolibri-visual-test --update-snapshots",
+		"test-update:zoll-v3": "THEME_MODULE=src/v3/index THEME_EXPORT=ZOLLv3 kolibri-visual-test --update-snapshots"
 	},
 	"devDependencies": {
 		"@public-ui/schema": "1.7.6-rc.1",

packages/themes/zoll/src/cssTag.ts

@@ -0,0 +1,4 @@
+/**
+ * No-op tag function to help with CSS syntax highlighting and provide Prettier support
+ */
+export const css = (input: TemplateStringsArray): string => input.join(``);

packages/themes/zoll/src/index.ts

@@ -1,2 +1,3 @@
 export * from './mapz';
 export * from './zoll-v2';
+export * from './v3';

packages/themes/zoll/src/v3/components/alert.ts

@@ -0,0 +1,181 @@
+import { css } from '../../cssTag';
+
+export default css`
+	kol-alert-wc {
+		border-width: 2px;
+		border-style: solid;
+		border-radius: 0.25rem;
+		color: var(--color-grau-60);
+	}
+
+	kol-alert-wc .content {
+		font-size: 0.8rem;
+	}
+
+	.card {
+		display: grid;
+		gap: 1rem;
+		padding: 1.5rem 1.5rem 2rem 1.5rem;
+	}
+
+	.card .heading .heading-icon {
+		align-items: center;
+		display: inline-flex;
+		font-size: 2rem;
+		margin-right: 1.5rem;
+		padding: 0;
+	}
+
+	.default {
+		border-color: var(--color-grau-60);
+	}
+
+	.card.default .heading {
+		color: var(--color-grau-60);
+	}
+
+	.info {
+		border-color: var(--color-blau-light);
+	}
+
+	.card.info .heading {
+		color: var(--color-blau-light);
+	}
+
+	.warning {
+		background-color: var(--color-gelb);
+		border-color: var(--color-gelb);
+		color: var(--color-neutral-dark-correct);
+	}
+
+	.card.warning .heading {
+	}
+
+	.error {
+		border-color: var(--color-rot);
+	}
+
+	.card.error .heading {
+		color: var(--color-rot);
+	}
+
+	.success {
+		border-color: var(--color-gruen);
+	}
+
+	.card.success .heading {
+		color: var(--color-gruen);
+	}
+
+	.card .content {
+		line-height: 1.5rem;
+		padding-left: 3.5rem;
+	}
+
+	.msg {
+		border-width: 0;
+		display: flex;
+		gap: calc(2 * var(--gap));
+		padding: var(--gap);
+	}
+
+	.msg .heading {
+		display: flex;
+		gap: var(--spacing);
+		flex-grow: 1;
+		align-items: center;
+	}
+
+	.msg .heading > div {
+		display: flex;
+		flex-direction: column;
+		flex-grow: 1;
+	}
+
+	.info .heading kol-icon.heading-icon {
+		display: grid;
+		place-items: center;
+		background-color: var(--color-blau-light);
+		border-radius: 100%;
+		min-width: 2em;
+		min-height: 2em;
+	}
+
+	.card.info .heading kol-icon.heading-icon {
+		font-size: 1em;
+	}
+
+	.msg.info .heading kol-icon.heading-icon {
+		font-size: 0.5em;
+	}
+
+	.info .heading kol-icon.heading-icon::part(icon) {
+		color: white;
+	}
+
+	.msg.default {
+		color: var(--color-grau-60);
+	}
+
+	.msg.error {
+		color: var(--color-rot);
+	}
+
+	.msg.info {
+		color: var(--color-blau-light);
+	}
+
+	.msg.warning {
+		color: var(--color-neutral-dark-correct);
+	}
+
+	.msg.success {
+		color: var(--color-gruen);
+	}
+
+	div > div > kol-heading-wc {
+		grid-column: 1 / span 3;
+	}
+
+	.close button {
+		border-radius: var(--border-radius);
+		min-height: 44px;
+		min-width: 44px;
+		background-color: var(--color-neutral);
+		padding: 0.75rem;
+		color: var(--color-blau-light);
+	}
+
+	.card .close button {
+		transform: translateX(1.5rem) translateY(-1.5rem);
+	}
+
+	kol-icon::part(icon) {
+		font-family: 'Font Awesome 6 Free';
+		font-weight: 900;
+	}
+
+	.default kol-icon::part(icon)::before {
+		content: '\\f05a';
+	}
+
+	.error kol-icon::part(icon)::before {
+		content: '\\f06a';
+	}
+
+	.info kol-icon::part(icon)::before {
+		content: '\\f0eb';
+	}
+
+	.success kol-icon::part(icon)::before {
+		content: '\\f058';
+	}
+
+	.warning kol-icon::part(icon)::before {
+		content: '\\f071';
+	}
+
+	.close button kol-icon::part(icon)::before {
+		content: '\\f00d';
+	}
+`;