@public-ui/sample-react 2.0.4 → 2.0.6

package/src/components/input-password/partials/cases.tsx

@@ -2,9 +2,9 @@ import React, { forwardRef } from 'react';
 
 import { KolInputPassword } from '@public-ui/react';
 
-import { Components } from '@public-ui/components';
 import { ERROR_MSG } from '../../../shares/constants';
 
+import type { Components } from '@public-ui/components';
 export const InputPasswordCases = forwardRef<HTMLKolInputPasswordElement, Components.KolInputPassword>(function InputPasswordCases(props, ref) {
 	return (
 		<div className="grid gap-4">

package/src/components/input-password/partials/variants.tsx

@@ -1,8 +1,8 @@
 import React, { forwardRef } from 'react';
 
-import { Components } from '@public-ui/components';
 import { InputPasswordCases } from './cases';
 
+import type { Components } from '@public-ui/components';
 export const InputPasswordVariants = forwardRef<HTMLKolInputPasswordElement, Components.KolInputPassword>(function InputPasswordVariant(props, ref) {
 	return (
 		<div className="grid md:grid-cols-2 gap-4">

package/src/components/input-password/routes.ts

@@ -1,5 +1,4 @@
 import { Routes } from '../../shares/types';
-
 import { InputPasswordBasic } from './basic';
 import { InputPasswordShowPassword } from './show-password';
 

package/src/components/input-password/show-password.tsx

@@ -1,4 +1,6 @@
-import React, { FC, useEffect, useRef, useState } from 'react';
+import type { FC } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+
 import { KolForm, KolInputPassword } from '@public-ui/react';
 
 export const InputPasswordShowPassword: FC = () => {

package/src/components/input-radio/basic.tsx

@@ -1,4 +1,6 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
+
 import { FormWrap } from '../FormWrap';
 import { InputRadioVariants } from './partials/variants';
 

package/src/components/input-radio/horizontal.tsx

@@ -1,9 +1,11 @@
-import React, { FC, useState } from 'react';
+import type { FC } from 'react';
+import React, { useState } from 'react';
 
-import { Orientation } from '@public-ui/components';
 import { KolButton, KolForm, KolInputCheckbox, KolInputRadio } from '@public-ui/react';
+
 import { SampleDescription } from '../SampleDescription';
 
+import type { Orientation } from '@public-ui/components';
 export const InputRadioHorizontal: FC = () => {
 	const [show, setShow] = useState(true);
 	const [orientation, setOrientation] = useState<Orientation>('horizontal');

package/src/components/input-radio/partials/cases.tsx

@@ -2,9 +2,9 @@ import React, { forwardRef } from 'react';
 
 import { KolInputRadio } from '@public-ui/react';
 
-import { Components } from '@public-ui/components';
 import { ERROR_MSG } from '../../../shares/constants';
 
+import type { Components } from '@public-ui/components';
 export const InputRadioCases = forwardRef<HTMLKolInputRadioElement, Components.KolInputRadio>(function InputRadioCases(props, ref) {
 	return (
 		<div className="grid gap-4">

package/src/components/input-radio/partials/variants.tsx

@@ -1,8 +1,8 @@
 import React, { forwardRef } from 'react';
 
-import { Components } from '@public-ui/components';
 import { InputRadioCases } from './cases';
 
+import type { Components } from '@public-ui/components';
 export const InputRadioVariants = forwardRef<HTMLKolInputRadioElement, Components.KolInputRadio>(function InputRadioVariant(props, ref) {
 	return (
 		<div className="grid md:grid-cols-2 gap-4">

package/src/components/input-radio/routes.ts

@@ -1,8 +1,6 @@
 import { Routes } from '../../shares/types';
-
 import { InputRadioBasic } from './basic';
 import { InputRadioHorizontal } from './horizontal';
-
 import { InputRadioSelect } from './select';
 
 export const INPUT_RADIO_ROUTES: Routes = {

package/src/components/input-radio/select.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
-import { KolForm, KolInputRadio } from '@public-ui/react';
 
-import { FC } from 'react';
+import { KolForm, KolInputRadio } from '@public-ui/react';
 
 import { ERROR_MSG } from '../../shares/constants';
 
+import type { FC } from 'react';
+
 const options = [
 	{ label: 'Frau', value: 'Frau' },
 	{ disabled: true, label: 'Herr (disabled)', value: 'Herr' },

package/src/components/input-range/basic.tsx

@@ -1,4 +1,6 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
+
 import { FormWrap } from '../FormWrap';
 import { InputRangeVariants } from './partials/variants';
 

package/src/components/input-range/partials/cases.tsx

@@ -2,9 +2,9 @@ import React, { forwardRef } from 'react';
 
 import { KolInputRange } from '@public-ui/react';
 
-import { Components } from '@public-ui/components';
 import { ERROR_MSG } from '../../../shares/constants';
 
+import type { Components } from '@public-ui/components';
 export const InputRangeCases = forwardRef<HTMLKolInputRangeElement, Components.KolInputRange>(function InputRangeCases(props, ref) {
 	return (
 		<div className="grid gap-4">

package/src/components/input-range/partials/variants.tsx

@@ -1,8 +1,8 @@
 import React, { forwardRef } from 'react';
 
-import { Components } from '@public-ui/components';
 import { InputRangeCases } from './cases';
 
+import type { Components } from '@public-ui/components';
 export const InputRangeVariants = forwardRef<HTMLKolInputRangeElement, Components.KolInputRange>(function InputRangeVariant(props, ref) {
 	return (
 		<div className="grid md:grid-cols-2 gap-4">

package/src/components/input-range/routes.ts

@@ -1,5 +1,4 @@
 import { Routes } from '../../shares/types';
-
 import { InputRangeBasic } from './basic';
 
 export const INPUT_RANGE_ROUTES: Routes = {

package/src/components/input-text/basic.tsx

@@ -1,4 +1,6 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
+
 import { FormWrap } from '../FormWrap';
 import { InputTextVariants } from './partials/variants';
 

package/src/components/input-text/blur.tsx

@@ -1,6 +1,8 @@
+import React from 'react';
+
 import { KolForm, KolInputText } from '@public-ui/react';
-import React, { FC } from 'react';
 
+import type { FC } from 'react';
 export const InputTextBlur: FC = () => (
 	<KolForm>
 		<KolInputText

package/src/components/input-text/focus.tsx

@@ -1,7 +1,8 @@
 import React, { useLayoutEffect, useRef } from 'react';
+
 import { KolButton, KolForm, KolInputText } from '@public-ui/react';
 
-import { FC } from 'react';
+import type { FC } from 'react';
 
 export const InputTextFocus: FC = () => {
 	const ref = useRef<HTMLKolInputTextElement | null>(null);

package/src/components/input-text/hide-errors.tsx

@@ -0,0 +1,25 @@
+import { KolAlert, KolCard, KolInputText } from '@public-ui/react';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const InputTextHideErrors: FC = () => (
+	<div className="grid gap-4">
+		<SampleDescription>
+			This case shows the <code>_hideError</code> feature in the se. You can use the <code>_error</code> prop to show an error message.
+		</SampleDescription>
+		<KolCard _label="Normal input field with error" _level={0}>
+			<KolInputText _error="Error message" _label="Input with error" _touched />
+		</KolCard>
+		<KolCard _label="Input field with hidden error" _level={0}>
+			<fieldset className="grid md:grid-cols-2 gap-4">
+				<legend>Combined input field</legend>
+				<KolAlert className="col-span-2" _level={0} _type="error">
+					This is a combined error message
+				</KolAlert>
+				<KolInputText _error="This is a combined error message" _hideError _label="First input" _touched />
+				<KolInputText _error="This is a combined error message" _hideError _label="Second input with error" _touched />
+			</fieldset>
+		</KolCard>
+	</div>
+);

package/src/components/input-text/partials/cases.tsx

@@ -2,9 +2,9 @@ import React, { forwardRef } from 'react';
 
 import { KolInputText } from '@public-ui/react';
 
-import { Components } from '@public-ui/components';
 import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 
+import type { Components } from '@public-ui/components';
 export const InputTextCases = forwardRef<HTMLKolInputTextElement, Components.KolInputText>(function InputTextCases(props, ref) {
 	return (
 		<div className="grid gap-4">

package/src/components/input-text/partials/variants.tsx

@@ -1,8 +1,8 @@
 import React, { forwardRef } from 'react';
 
-import { Components } from '@public-ui/components';
 import { InputTextCases } from './cases';
 
+import type { Components } from '@public-ui/components';
 export const InputTextVariants = forwardRef<HTMLKolInputTextElement, Components.KolInputText>(function InputTextVariant(props, ref) {
 	return (
 		<div className="grid md:grid-cols-2 gap-4">

package/src/components/input-text/routes.ts

@@ -1,13 +1,14 @@
 import { Routes } from '../../shares/types';
-
 import { InputTextBasic } from './basic';
 import { InputTextBlur } from './blur';
 import { InputTextFocus } from './focus';
+import { InputTextHideErrors } from './hide-errors';
 
 export const INPUT_TEXT_ROUTES: Routes = {
 	'input-text': {
 		basic: InputTextBasic,
 		blur: InputTextBlur,
 		focus: InputTextFocus,
+		'hide-errors': InputTextHideErrors,
 	},
 };

package/src/components/kolibri/basic.tsx

@@ -1,5 +1,8 @@
-import React, { FC } from 'react';
-import { KolKolibri, KolHeading } from '@public-ui/react';
+import type { FC } from 'react';
+import React from 'react';
+
+import { KolHeading, KolKolibri } from '@public-ui/react';
+
 import { SampleDescription } from '../SampleDescription';
 
 export const KolibriBasic: FC = () => (

package/src/components/kolibri/routes.ts

@@ -1,5 +1,4 @@
 import { Routes } from '../../shares/types';
-
 import { KolibriBasic } from './basic';
 
 export const KOLIBRI_ROUTES: Routes = {

package/src/components/link/basic.tsx

@@ -1,21 +1,26 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
+
 import { KolLink } from '@public-ui/react';
 
 export const LinkBasic: FC = () => (
 	<div className="grid gap-4">
-		<KolLink _href="#" _label="Simple Link" />
+		<KolLink _href="#/back-page" _label="Simple Link" />
+		<KolLink _disabled _href="#/back-page" _label="Simple Link (deaktiviert)" />
+		<KolLink _hideLabel _icons="codicon codicon-home" _href="#/back-page" _label="Icon Link" />
+		<KolLink _disabled _hideLabel _icons="codicon codicon-home" _href="#/back-page" _label="Icon Link (deaktiviert)" />
 		<p>
-			In diesem Absatz wird ein Link gesetzt, der keine weiteren Attribute enthält. <KolLink _href="#" _label="Simple Link" /> Er wird standardmäßig als{' '}
-			<strong>inline-Element</strong> ausgegeben.
+			In diesem Absatz wird ein Link gesetzt, der keine weiteren Attribute enthält. <KolLink _href="#/back-page" _label="Simple Link" /> Er wird standardmäßig
+			als <strong>inline-Element</strong> ausgegeben.
 		</p>
 		<p>
 			In diesem Absatz wird ein Link gesetzt, der einmal als inline-block-Element ausgegeben wird.{' '}
-			<KolLink class="d-inline-block" _accessKey="S" _href="#" _label="Simple Link" />. Damit kann man mir per CSS-Styles eine Breite, eine Höhe und andere
-			Eigenschaften zuweisen.
+			<KolLink class="d-inline-block" _accessKey="S" _href="#/back-page" _label="Simple Link" />. Damit kann man mir per CSS-Styles eine Breite, eine Höhe und
+			andere Eigenschaften zuweisen.
 			<br />
 			<br />
-			Danach folgt ein Link, der als block-Element ausgegeben wird.
-			<KolLink class="d-block" _href="#" _label="Simple Link" />, daher gehe ich über die ganze Breite des Eltern-Elements erzeuge so einen Zeilenumbruch.
+			Danach folgt ein Link, der als block-Element ausgegeben wird. <KolLink class="d-block" _href="#/back-page" _label="Simple Link" />, daher gehe ich über
+			die ganze Breite des Eltern-Elements erzeuge so einen Zeilenumbruch.
 		</p>
 	</div>
 );

package/src/components/link/icons.tsx

@@ -1,28 +1,32 @@
 import React from 'react';
+
 import { KolLink } from '@public-ui/react';
 
-import { FC } from 'react';
+import type { FC } from 'react';
 
 export const LinkIcons: FC = () => (
 	<div className="grid gap-4">
-		<KolLink _icons="codicon codicon-home" _label="Ich bin ein Link mit Icon links" />
+		<KolLink _icons="codicon codicon-home" _label="Ich bin ein Link mit Icon links" _href="#/back-page" />
 		<KolLink
 			_icons={{
 				right: 'codicon codicon-home',
 			}}
 			_label="Ich bin ein Link mit Icon rechts"
+			_href="#/back-page"
 		/>
 		<KolLink
 			_icons={{
 				top: 'codicon codicon-home',
 			}}
 			_label="Ich bin ein Link mit Icon oben"
+			_href="#/back-page"
 		/>
 		<KolLink
 			_icons={{
 				bottom: 'codicon codicon-home',
 			}}
 			_label="Ich bin ein Link mit Icon unten"
+			_href="#/back-page"
 		/>
 		<KolLink
 			_icons={{
@@ -32,6 +36,7 @@ export const LinkIcons: FC = () => (
 				left: 'codicon codicon-home',
 			}}
 			_label="Ich bin ein Link mit allen Icons"
+			_href="#/back-page"
 		/>
 	</div>
 );

package/src/components/link/image.tsx

@@ -1,18 +1,19 @@
 import React from 'react';
+
 import { KolKolibri, KolLink } from '@public-ui/react';
 
-import { FC } from 'react';
+import type { FC } from 'react';
 
 export const LinkImage: FC = () => (
 	<div className="grid gap-4">
-		<KolLink _href="#" _label="Ich bin ein Link, der als Text gerendert wird" />
+		<KolLink _href="#/back-page" _label="Ich bin ein Link, der als Text gerendert wird" />
 		<br />
-		<KolLink _href="#" _label="">
+		<KolLink _href="#/back-page" _label="">
 			<img alt="Darstellung des KoliBri-Theming" slot="expert" src="abgrenzung.jpg" width="300" />
 			<KolKolibri style={{ width: '300px' }}></KolKolibri>
 		</KolLink>
 		<br />
-		<KolLink _href="#" _label="">
+		<KolLink _href="#/back-page" _label="">
 			<img alt="Darstellung des KoliBri-Theming" slot="expert" src="abgrenzung.jpg" width="300" />
 		</KolLink>
 	</div>

package/src/components/link/routes.ts

@@ -1,11 +1,7 @@
 import { Routes } from '../../shares/types';
-
 import { LinkBasic } from './basic';
-
 import { LinkIcons } from './icons';
-
 import { LinkImage } from './image';
-
 import { LinkTarget } from './target';
 
 export const LINK_ROUTES: Routes = {

package/src/components/link/target.tsx

@@ -1,14 +1,16 @@
 import React from 'react';
+
 import { KolLink } from '@public-ui/react';
 
-import { FC } from 'react';
+import type { FC } from 'react';
 
 export const LinkTarget: FC = () => (
 	<div className="d-flex gap-4">
-		<KolLink _href="#" _label="Ich bin ein Link ohne Target" /> <KolLink _href="#" _label="Ich bin ein Link mit Target (_self)" _target="_self" />{' '}
-		<KolLink _href="#" _label="Ich bin ein Link mit Target (_blank)" _target="_blank" />{' '}
-		<KolLink _href="#" _icons="codicon codicon-home" _hideLabel _label="Ich bin ein Link ohne Target" />{' '}
-		<KolLink _href="#" _icons="codicon codicon-home" _hideLabel _label="Ich bin ein Link mit Target (_self)" _target="_self" />{' '}
-		<KolLink _href="#" _icons="codicon codicon-home" _hideLabel _label="Ich bin ein Link mit Target (_blank)" _target="_blank" />
+		<KolLink _href="#/back-page" _label="Ich bin ein Link ohne Target" />{' '}
+		<KolLink _href="#/back-page" _label="Ich bin ein Link mit Target (_self)" _target="_self" />{' '}
+		<KolLink _href="#/back-page" _label="Ich bin ein Link mit Target (_blank)" _target="_blank" />{' '}
+		<KolLink _href="#/back-page" _icons="codicon codicon-home" _hideLabel _label="Ich bin ein Link ohne Target" />{' '}
+		<KolLink _href="#/back-page" _icons="codicon codicon-home" _hideLabel _label="Ich bin ein Link mit Target (_self)" _target="_self" />{' '}
+		<KolLink _href="#/back-page" _icons="codicon codicon-home" _hideLabel _label="Ich bin ein Link mit Target (_blank)" _target="_blank" />
 	</div>
 );

package/src/components/link-button/basic.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
+
 import { KolLinkButton } from '@public-ui/react';
 
-import { FC } from 'react';
+import type { FC } from 'react';
 
 const ARGS = {
-	_on: {
-		onClick: (_event, _value) => alert('Klick!'),
-	},
+	_href: '#/back-page',
 };
 
 export const LinkButtonBasic: FC = () => (

package/src/components/link-button/routes.ts

@@ -1,5 +1,4 @@
 import { Routes } from '../../shares/types';
-
 import { LinkButtonBasic } from './basic';
 
 export const LINK_BUTTON_ROUTES: Routes = {

package/src/components/link-group/basic.tsx

@@ -1,9 +1,11 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
+
 import { KolLinkGroup } from '@public-ui/react';
 
 const links = [
-	{ _label: 'Link 1', _href: 'https://www.w3.org' },
-	{ _label: 'Link 2', _href: 'https://www.w3.org' },
-	{ _label: 'Link 3', _href: 'https://www.w3.org' },
+	{ _label: 'Link 1', _href: '#/back-page' },
+	{ _label: 'Link 2', _href: '#/back-page' },
+	{ _label: 'Link 3', _href: '#/back-page' },
 ];
 export const LinkGroupBasic: FC = () => <KolLinkGroup _links={links} _label="" />;

package/src/components/link-group/horizontal.tsx

@@ -1,9 +1,11 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
+
 import { KolLinkGroup } from '@public-ui/react';
 
 const links = [
-	{ _label: 'Link 1', _href: 'https://www.w3.org' },
-	{ _label: 'Link 2', _href: 'https://www.w3.org' },
-	{ _label: 'Link 3', _href: 'https://www.w3.org' },
+	{ _label: 'Link 1', _href: '#/back-page' },
+	{ _label: 'Link 2', _href: '#/back-page' },
+	{ _label: 'Link 3', _href: '#/back-page' },
 ];
 export const LinkGroupHorizontal: FC = () => <KolLinkGroup _links={links} _orientation="horizontal" _label="" />;

package/src/components/logo/basic.tsx

@@ -1,5 +1,7 @@
-import React, { FC } from 'react';
-import { KolLogo } from '@public-ui/react';
+import type { FC } from 'react';
+import React from 'react';
+
 import { Bundesministerium } from '@public-ui/components';
+import { KolLogo } from '@public-ui/react';
 
 export const LogoBasic: FC = () => <KolLogo className="w-50%" _org={Bundesministerium['Die Bundesregierung']} />;

package/src/components/logo/routes.ts

@@ -1,5 +1,4 @@
 import { Routes } from '../../shares/types';
-
 import { LogoBasic } from './basic';
 
 export const LOGO_ROUTES: Routes = {

package/src/components/modal/basic.tsx

@@ -1,4 +1,6 @@
-import React, { FC, useRef } from 'react';
+import type { FC } from 'react';
+import React, { useRef } from 'react';
+
 import { KolButton, KolCard, KolModal } from '@public-ui/react';
 
 export const ModalBasic: FC = () => {

package/src/components/modal/routes.ts

@@ -1,5 +1,4 @@
 import { Routes } from '../../shares/types';
-
 import { ModalBasic } from './basic';
 
 export const MODAL_ROUTES: Routes = {

package/src/components/nav/aria-current.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
+
 import { KolNav } from '@public-ui/react';
 
-import { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';
 
+import type { FC } from 'react';
 export const NavAriaCurrent: FC = () => (
 	<>
 		<SampleDescription>
@@ -19,11 +20,11 @@ export const NavAriaCurrent: FC = () => (
 			_links={[
 				{
 					_label: 'Homepage',
-					_href: '#/',
+					_href: '#/back-page',
 				},
 				{
 					_label: 'Nav - aria-current (Aktuelle Seite)',
-					_href: '#/nav/aria-current',
+					_href: '#/back-page',
 					_active: true,
 				},
 			]}

package/src/components/nav/basic.tsx

@@ -1,7 +1,25 @@
-import React from 'react';
-import { KolNav } from '@public-ui/react';
+import React, { useState } from 'react';
+
+import { KolInputCheckbox, KolNav } from '@public-ui/react';
 
-import { FC } from 'react';
 import { LINKS } from './links';
 
-export const NavBasic: FC = () => <KolNav class="block w-fit" _label="Main navigation" _links={LINKS} _hasCompactButton />;
+import type { FC } from 'react';
+export const NavBasic: FC = () => {
+	const [hasIconsWhenExpanded, setHasIconsWhenExpanded] = useState(false);
+
+	return (
+		<>
+			<KolInputCheckbox
+				_label="Show icons when expanded"
+				_checked={hasIconsWhenExpanded}
+				_on={{
+					onChange: (_event, value: unknown) => {
+						setHasIconsWhenExpanded(value as boolean);
+					},
+				}}
+			></KolInputCheckbox>
+			<KolNav class="block w-fit" _label="Main navigation" _links={LINKS} _hasCompactButton _hasIconsWhenExpanded={hasIconsWhenExpanded} />
+		</>
+	);
+};

package/src/components/nav/horizontal.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+
 import { KolNav } from '@public-ui/react';
 
-import { FC } from 'react';
 import { LINKS } from './links';
 
+import type { FC } from 'react';
 export const NavHorizontal: FC = () => <KolNav _label="Main navigation" _links={LINKS} _orientation="horizontal" />;