From 555f28a6e25c23fa82308a3e2c064eb8ba7eeeaf Mon Sep 17 00:00:00 2001
From: devgioele <gioele.devitti@aboutbits.it>
Date: Mon, 12 Jun 2023 17:04:50 +0200
Subject: [PATCH] Header without truncation (#204)

* add possibility of not truncating header title
---
 src/components/header/Header.tsx            |  8 ++++----
 src/components/header/areas/HeaderTitle.tsx | 21 ++++++++++++++++++---
 src/components/header/theme.ts              |  3 ++-
 3 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
index 5c95305a..e36a62e1 100644
--- a/src/components/header/Header.tsx
+++ b/src/components/header/Header.tsx
@@ -1,17 +1,17 @@
 import { ReactElement, ReactNode } from 'react'
-import { HeaderArea, HeaderTitle } from '.'
+import { HeaderArea, HeaderTitle, HeaderTitleProps } from '.'
 
 export type HeaderProps = {
   /**
    * Defines the title of the header.
    **/
   title: ReactNode
-}
+} & Pick<HeaderTitleProps, 'noTruncate'>
 
-export function Header({ title }: HeaderProps): ReactElement {
+export function Header({ title, noTruncate }: HeaderProps): ReactElement {
   return (
     <HeaderArea>
-      <HeaderTitle>{title}</HeaderTitle>
+      <HeaderTitle noTruncate={noTruncate}>{title}</HeaderTitle>
     </HeaderArea>
   )
 }
diff --git a/src/components/header/areas/HeaderTitle.tsx b/src/components/header/areas/HeaderTitle.tsx
index d58a7a87..50de0a2a 100644
--- a/src/components/header/areas/HeaderTitle.tsx
+++ b/src/components/header/areas/HeaderTitle.tsx
@@ -3,12 +3,27 @@ import { ReactElement, ReactNode } from 'react'
 import { useTheme } from '../../../framework'
 import { ClassNameProps } from '../../types'
 
-type Props = ClassNameProps & { children?: ReactNode }
+export type HeaderTitleProps = ClassNameProps & {
+  children?: ReactNode
+  noTruncate?: boolean
+}
 
-export function HeaderTitle({ className, children }: Props): ReactElement {
+export function HeaderTitle({
+  className,
+  children,
+  noTruncate = false,
+}: HeaderTitleProps): ReactElement {
   const { header } = useTheme()
 
   return (
-    <h1 className={classNames(className, header.title.base)}>{children}</h1>
+    <h1
+      className={classNames(
+        className,
+        header.title.base,
+        !noTruncate && header.title.truncate
+      )}
+    >
+      {children}
+    </h1>
   )
 }
diff --git a/src/components/header/theme.ts b/src/components/header/theme.ts
index 42f9e3ff..9f55f726 100644
--- a/src/components/header/theme.ts
+++ b/src/components/header/theme.ts
@@ -13,7 +13,8 @@ export default {
     base: 'flex items-center ml-2 lg:ml-3 space-x-3 lg:space-x-4',
   },
   title: {
-    base: 'flex-1 text-3xl leading-10 font-medium lg:text-4xl lg:leading-12 truncate',
+    base: 'flex-1 text-3xl leading-10 font-medium lg:text-4xl lg:leading-12',
+    truncate: 'truncate',
   },
   leftActionIcon: {
     base: '-ml-2 lg:-ml-4',