docs: fix wrong react props for slots for db-header

db-ui · Apr 12, 2024 · a4eda92 · a4eda92
1 parent 66dc4cd
commit a4eda92
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 18 deletions.
diff --git a/packages/components/src/components/header/docs/React.md b/packages/components/src/components/header/docs/React.md
@@ -10,7 +10,7 @@ For general installation and configuration take a look at the [react-components]
 // App.tsx
 import { DBHeader, DBBrand } from "@db-ui/react-components";
 
-const App = () => <DBHeader slotBrand={<DBBrand>Header</DBBrand>} />;
+const App = () => <DBHeader brand={<DBBrand>Header</DBBrand>} />;
 
 export default App;
 ```
@@ -28,19 +28,19 @@ const App = () => (
 	<DBHeader
 		drawerOpen={drawerOpen}
 		onToggle={setDrawerOpen}
-		slotBrand={<DBBrand>My Awesome App</DBBrand>}
-		slotMetaNavigation={
+		brand={<DBBrand>My Awesome App</DBBrand>}
+		metaNavigation={
 			<>
 				<DBLink href="#">Imprint</DBLink>
 				<DBLink href="#">Help</DBLink>
 			</>
 		}
-		slotCallToAction={
+		callToAction={
 			<DBButton icon="search" variant="ghost" noText>
 				Search
 			</DBButton>
 		}
-		slotActionBar={
+		actionBar={
 			<>
 				<DBButton icon="account" variant="ghost" noText>
 					Profile

diff --git a/showcases/react-showcase/src/components/header/index.tsx b/showcases/react-showcase/src/components/header/index.tsx
@@ -37,19 +37,19 @@ const getHeader = ({
 			</>
 		}
 		callToAction={
-			<DBButton icon="search" variant="text" noText>
+			<DBButton icon="search" variant="ghost" noText>
 				Search
 			</DBButton>
 		}
 		actionBar={
 			<>
-				<DBButton icon="account" variant="text" noText>
+				<DBButton icon="account" variant="ghost" noText>
 					Profile
 				</DBButton>
-				<DBButton icon="alert" variant="text" noText>
+				<DBButton icon="alert" variant="ghost" noText>
 					Notification
 				</DBButton>
-				<DBButton icon="help" variant="text" noText>
+				<DBButton icon="help" variant="ghost" noText>
 					Help
 				</DBButton>
 			</>

diff --git a/showcases/react-showcase/src/components/page/index.tsx b/showcases/react-showcase/src/components/page/index.tsx
@@ -44,19 +44,19 @@ const getPage = ({
 					</>
 				}
 				callToAction={
-					<DBButton icon="search" variant="text" noText>
+					<DBButton icon="search" variant="ghost" noText>
 						Search
 					</DBButton>
 				}
 				actionBar={
 					<>
-						<DBButton icon="account" variant="text" noText>
+						<DBButton icon="account" variant="ghost" noText>
 							Profile
 						</DBButton>
-						<DBButton icon="alert" variant="text" noText>
+						<DBButton icon="alert" variant="ghost" noText>
 							Notification
 						</DBButton>
-						<DBButton icon="help" variant="text" noText>
+						<DBButton icon="help" variant="ghost" noText>
 							Help
 						</DBButton>
 					</>