Merge pull request #2198 from d-koppenhagen/missing-showcases

docs(react-components): add missing showcases for DBBrand, DBHeader and DBPage
db-ui · Feb 26, 2024 · a73b3b3 · a73b3b3
2 parents 67df343 + 0c5996b
commit a73b3b3
Show file tree

Hide file tree

Showing 7 changed files with 333 additions and 2 deletions.
diff --git a/showcases/patternhub/components/data.ts b/showcases/patternhub/components/data.ts
@@ -16,8 +16,8 @@ export const getVariants = (
 			...example,
 			example: getExample({
 				...example.props,
-				id: example.props.id ?? example.name,
-				children: example.props.children ?? example.name
+				id: example.props?.id ?? example.name,
+				children: example.props?.children ?? example.name
 			})
 		}))
 	}));

diff --git a/showcases/react-showcase/src/components/brand/index.tsx b/showcases/react-showcase/src/components/brand/index.tsx
@@ -0,0 +1,58 @@
+import { DBBrand } from '../../../../../output/react/src';
+import { type DBBrandProps } from '../../../../../output/react/src/components/brand/model';
+import defaultComponentVariants from '../../../../shared/brand.json';
+import { getVariants } from '../data';
+import DefaultComponent from '../index';
+
+const getBrand = ({
+	imgAlt,
+	imgHeight,
+	imgSrc,
+	imgWidth,
+	anchorChildren,
+	anchorRef,
+	anchorTitle,
+	anchorRelation,
+	hideDefaultAsset,
+	children,
+	className,
+	describedbyid,
+	id,
+	key,
+	stylePath,
+	tabIndex,
+	title
+}: DBBrandProps) => (
+	<DBBrand
+		imgAlt={imgAlt}
+		imgHeight={imgHeight}
+		imgSrc="https://db-ui.github.io/images/db_logo.svg"
+		imgWidth={imgWidth}
+		anchorChildren={anchorChildren}
+		anchorRef={anchorRef}
+		anchorTitle={anchorTitle}
+		anchorRelation={anchorRelation}
+		hideDefaultAsset={hideDefaultAsset}
+		className={className}
+		describedbyid={describedbyid}
+		id={id}
+		key={key}
+		stylePath={stylePath}
+		tabIndex={tabIndex}
+		title={title}>
+		{children}
+	</DBBrand>
+);
+
+const BrandComponent = () => {
+	return (
+		<DefaultComponent
+			title="DBBrand"
+			variants={getVariants(
+				defaultComponentVariants,
+				getBrand
+			)}></DefaultComponent>
+	);
+};
+
+export default BrandComponent;
diff --git a/showcases/react-showcase/src/components/header/index.tsx b/showcases/react-showcase/src/components/header/index.tsx
@@ -0,0 +1,93 @@
+import {
+	DBBrand,
+	DBButton,
+	DBHeader,
+	DBLink,
+	DBMainNavigation,
+	DBNavigationItem
+} from '../../../../../output/react/src';
+import { type DBHeaderProps } from '../../../../../output/react/src/components/header/model';
+import defaultComponentVariants from '../../../../shared/header.json';
+import { getVariants } from '../data';
+import DefaultComponent from '../index';
+
+const getHeader = ({
+	drawerOpen,
+	forceMobile,
+	burgerMenuLabel,
+	children,
+	className,
+	describedbyid,
+	id,
+	key,
+	stylePath,
+	tabIndex,
+	title,
+	onToggle
+}: DBHeaderProps) => (
+	<DBHeader
+		slotBrand={
+			<DBBrand
+				title="DBHeader"
+				imgSrc="https://db-ui.github.io/images/db_logo.svg">
+				DBHeader
+			</DBBrand>
+		}
+		slotMetaNavigation={
+			<>
+				<DBLink href="#">Imprint</DBLink>
+				<DBLink href="#">Help</DBLink>
+			</>
+		}
+		slotCallToAction={
+			<DBButton icon="search" variant="text" noText>
+				Search
+			</DBButton>
+		}
+		slotActionBar={
+			<>
+				<DBButton icon="account" variant="text" noText>
+					Profile
+				</DBButton>
+				<DBButton icon="alert" variant="text" noText>
+					Notification
+				</DBButton>
+				<DBButton icon="help" variant="text" noText>
+					Help
+				</DBButton>
+			</>
+		}
+		drawerOpen={drawerOpen}
+		forceMobile={forceMobile}
+		burgerMenuLabel={burgerMenuLabel}
+		className={className}
+		describedbyid={describedbyid}
+		id={id}
+		key={key}
+		stylePath={stylePath}
+		tabIndex={tabIndex}
+		title={title}
+		onToggle={onToggle}>
+		<DBMainNavigation>
+			<DBNavigationItem icon="account">
+				<a href="#">{children}</a>
+			</DBNavigationItem>
+			<DBNavigationItem disabled>
+				<a href="#">{children} disabled</a>
+			</DBNavigationItem>
+		</DBMainNavigation>
+	</DBHeader>
+);
+
+const HeaderComponent = () => {
+	return (
+		<DefaultComponent
+			title="DBHeader"
+			variants={getVariants(
+				defaultComponentVariants,
+				getHeader
+			)}></DefaultComponent>
+	);
+};
+
+export default HeaderComponent;
diff --git a/showcases/react-showcase/src/components/page/index.tsx b/showcases/react-showcase/src/components/page/index.tsx
@@ -0,0 +1,96 @@
+import {
+	DBPage,
+	DBBrand,
+	DBButton,
+	DBHeader,
+	DBLink,
+	DBMainNavigation,
+	DBNavigationItem
+} from '../../../../../output/react/src';
+import { type DBPageProps } from '../../../../../output/react/src/components/page/model';
+import defaultComponentVariants from '../../../../shared/page.json';
+import { getVariants } from '../data';
+import DefaultComponent from '../index';
+
+const getPage = ({
+	type,
+	fadeIn,
+	children,
+	className,
+	describedbyid,
+	id,
+	key,
+	stylePath,
+	tabIndex,
+	title
+}: DBPageProps) => (
+	<DBPage
+		type={type}
+		fadeIn={fadeIn}
+		className={className}
+		describedbyid={describedbyid}
+		id={id}
+		key={key}
+		stylePath={stylePath}
+		tabIndex={tabIndex}
+		slotHeader={
+			<DBHeader
+				slotBrand={
+					<DBBrand
+						title="DBHeader"
+						imgSrc="https://db-ui.github.io/images/db_logo.svg">
+						DBHeader
+					</DBBrand>
+				}
+				slotMetaNavigation={
+					<>
+						<DBLink href="#">Imprint</DBLink>
+						<DBLink href="#">Help</DBLink>
+					</>
+				}
+				slotCallToAction={
+					<DBButton icon="search" variant="text" noText>
+						Search
+					</DBButton>
+				}
+				slotActionBar={
+					<>
+						<DBButton icon="account" variant="text" noText>
+							Profile
+						</DBButton>
+						<DBButton icon="alert" variant="text" noText>
+							Notification
+						</DBButton>
+						<DBButton icon="help" variant="text" noText>
+							Help
+						</DBButton>
+					</>
+				}
+				title={title}>
+				<DBMainNavigation>
+					<DBNavigationItem icon="account">
+						<a href="#">{children}</a>
+					</DBNavigationItem>
+					<DBNavigationItem disabled>
+						<a href="#">{children} disabled</a>
+					</DBNavigationItem>
+				</DBMainNavigation>
+			</DBHeader>
+		}
+		slotFooter={<>Footer Content</>}>
+		My Page Content
+	</DBPage>
+);
+
+const PageComponent = () => {
+	return (
+		<DefaultComponent
+			title="DBPage"
+			variants={getVariants(
+				defaultComponentVariants,
+				getPage
+			)}></DefaultComponent>
+	);
+};
+
+export default PageComponent;
diff --git a/showcases/shared/brand.json b/showcases/shared/brand.json
@@ -0,0 +1,22 @@
+[
+	{
+		"name": "Tonality",
+		"examples": [
+			{
+				"name": "functional",
+				"className": "db-ui-functional",
+				"props": {}
+			},
+			{
+				"name": "regular (Default)",
+				"className": "db-ui-regular",
+				"props": {}
+			},
+			{
+				"name": "expressive",
+				"className": "db-ui-expressive",
+				"props": {}
+			}
+		]
+	}
+]
diff --git a/showcases/shared/header.json b/showcases/shared/header.json
@@ -0,0 +1,40 @@
+[
+	{
+		"name": "Tonality",
+		"examples": [
+			{
+				"name": "functional",
+				"className": "db-ui-functional",
+				"props": {}
+			},
+			{
+				"name": "regular (Default)",
+				"className": "db-ui-regular",
+				"props": {}
+			},
+			{
+				"name": "expressive",
+				"className": "db-ui-expressive",
+				"props": {}
+			}
+		]
+	},
+	{
+		"name": "Behaviour",
+		"examples": [
+			{
+				"name": "Desktop (full width)",
+				"style": {
+					"width": "100%",
+					"display": "block"
+				}
+			},
+			{
+				"name": "Mobile",
+				"props": {
+					"forceMobile": "true"
+				}
+			}
+		]
+	}
+]
diff --git a/showcases/shared/page.json b/showcases/shared/page.json
@@ -0,0 +1,22 @@
+[
+	{
+		"name": "Tonality",
+		"examples": [
+			{
+				"name": "functional",
+				"className": "db-ui-functional",
+				"props": {}
+			},
+			{
+				"name": "regular (Default)",
+				"className": "db-ui-regular",
+				"props": {}
+			},
+			{
+				"name": "expressive",
+				"className": "db-ui-expressive",
+				"props": {}
+			}
+		]
+	}
+]