Header without truncation (#204)

* add possibility of not truncating header title

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>
   )
 }

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>
   )
 }

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',