From 3fc60b1accc4e7ace7f3b6e97c5199cffeb18702 Mon Sep 17 00:00:00 2001
From: Lukas Weiss <lukas.weiss@aboutbits.it>
Date: Mon, 22 Aug 2022 08:58:05 +0200
Subject: [PATCH] Fixes for release 0.2.4 (#104)

* fix naming of `HeaderTitle` story

* use custom `min-h` values for `HeaderArea` styles

* allow to use `ReactNode` for `HeaderBackWithoutAction`'s `title`

* do not use `React.FC` for header components
---
 src/components/header/HeaderBackWithoutAction.tsx      | 10 ++++++----
 src/components/header/areas/HeaderLeftArea.tsx         |  8 ++++----
 src/components/header/areas/HeaderRightArea.tsx        |  8 ++++----
 ...HeaderTitel.stories.mdx => HeaderTitle.stories.mdx} |  0
 src/components/header/theme.ts                         |  2 +-
 5 files changed, 15 insertions(+), 13 deletions(-)
 rename src/components/header/areas/{HeaderTitel.stories.mdx => HeaderTitle.stories.mdx} (100%)

diff --git a/src/components/header/HeaderBackWithoutAction.tsx b/src/components/header/HeaderBackWithoutAction.tsx
index 9b4f7459..6264bfa9 100644
--- a/src/components/header/HeaderBackWithoutAction.tsx
+++ b/src/components/header/HeaderBackWithoutAction.tsx
@@ -1,3 +1,4 @@
+import { ReactElement, ReactNode } from 'react'
 import { useRouter } from '../../framework'
 import { HeaderArea } from './areas/HeaderArea'
 import { HeaderBackAction } from './actions/HeaderBackAction'
@@ -7,7 +8,7 @@ type Props = {
   /**
    * Define a header title.
    **/
-  title: string
+  title: ReactNode
 
   /**
    * Override default onBack action.
@@ -15,7 +16,10 @@ type Props = {
   onBack?: () => void
 }
 
-const HeaderBackWithoutAction: React.FC<Props> = ({ title, onBack }) => {
+export function HeaderBackWithoutAction({
+  title,
+  onBack,
+}: Props): ReactElement {
   const router = useRouter()
 
   return (
@@ -25,5 +29,3 @@ const HeaderBackWithoutAction: React.FC<Props> = ({ title, onBack }) => {
     </HeaderArea>
   )
 }
-
-export { HeaderBackWithoutAction }
diff --git a/src/components/header/areas/HeaderLeftArea.tsx b/src/components/header/areas/HeaderLeftArea.tsx
index d15ceb7a..6961ba2a 100644
--- a/src/components/header/areas/HeaderLeftArea.tsx
+++ b/src/components/header/areas/HeaderLeftArea.tsx
@@ -1,15 +1,15 @@
+import { ReactElement, ReactNode } from 'react'
 import { useTheme } from '../../../framework'
 import { ClassNameProps } from '../../types'
 
-type Props = ClassNameProps
+type Props = ClassNameProps & { children?: ReactNode }
 
-const HeaderLeftArea: React.FC<Props> = ({ className, children }) => {
+export function HeaderLeftArea({ className, children }: Props): ReactElement {
   const { header } = useTheme()
+
   return (
     <div className={className}>
       <div className={header.leftArea.base}>{children}</div>
     </div>
   )
 }
-
-export { HeaderLeftArea }
diff --git a/src/components/header/areas/HeaderRightArea.tsx b/src/components/header/areas/HeaderRightArea.tsx
index 473aa7ea..9f8b00b0 100644
--- a/src/components/header/areas/HeaderRightArea.tsx
+++ b/src/components/header/areas/HeaderRightArea.tsx
@@ -1,15 +1,15 @@
+import { ReactElement, ReactNode } from 'react'
 import { useTheme } from '../../../framework'
 import { ClassNameProps } from '../../types'
 
-type Props = ClassNameProps
+type Props = ClassNameProps & { children?: ReactNode }
 
-const HeaderRightArea: React.FC<Props> = ({ className, children }) => {
+export function HeaderRightArea({ className, children }: Props): ReactElement {
   const { header } = useTheme()
+
   return (
     <div className={className}>
       <div className={header.rightArea.base}>{children}</div>
     </div>
   )
 }
-
-export { HeaderRightArea }
diff --git a/src/components/header/areas/HeaderTitel.stories.mdx b/src/components/header/areas/HeaderTitle.stories.mdx
similarity index 100%
rename from src/components/header/areas/HeaderTitel.stories.mdx
rename to src/components/header/areas/HeaderTitle.stories.mdx
diff --git a/src/components/header/theme.ts b/src/components/header/theme.ts
index cc0a9ff4..36dddee1 100644
--- a/src/components/header/theme.ts
+++ b/src/components/header/theme.ts
@@ -4,7 +4,7 @@ export default {
     desktop: 'hidden lg:inline-block',
   },
   area: {
-    base: 'mb-6 flex min-h-10 items-center lg:min-h-15',
+    base: 'mb-6 flex min-h-[2.5rem] items-center lg:min-h-[3.75rem]',
   },
   leftArea: {
     base: 'flex items-center mr-2 lg:mr-3 space-x-3 lg:space-x-4',