fix(ui): fix broken pageheader layout (#506, #473) (#510)

* fix(ui): fix broken PageHeader * fix(ui): fix story template * fix(ui): remove obsolete * fix(ui): fix story es-lint error remove explicit destructuring of children, leave type-checking to TypeScript * Create blue-news-wash.md * fix(ui): rename Pageheader story * fix(ui): always render heading div * fix(ui): prevent rendering null, false or undefined as page header title at all cost Fixes #506 , Fixes #473 --------- Co-authored-by: Wowa Barsukov <[email protected]>
cloudoperators · Oct 16, 2024 · f307966 · f307966
1 parent 792e0c2
commit f307966
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 25 deletions.
diff --git a/.changeset/blue-news-wash.md b/.changeset/blue-news-wash.md
@@ -0,0 +1,5 @@
+---
+"@cloudoperators/juno-ui-components": patch
+---
+
+fix(ui): fix broken pageheader layout (#506)
diff --git a/packages/ui-components/src/components/PageHeader/PageHeader.component.tsx b/packages/ui-components/src/components/PageHeader/PageHeader.component.tsx
@@ -22,7 +22,6 @@ const pageHeaderInnerStyles = `
   jn-gap-3
   jn-h-7
   jn-w-full
-  jn-overflow-hidden
   jn-items-center
 `
 
@@ -35,13 +34,21 @@ const logoContainerStyles = `
   [&>*]:jn-object-contain
 `
 
-const headingStyles = (clickable: boolean) => {
-  return `
-    jn-text-lg
-    jn-text-theme-high
-    ${clickable && "jn-cursor-pointer"}
-    `
-}
+const contentContainerStyles = `
+  jn-grid
+  jn-grid-cols-[1fr,minmax(0,max-content)]
+`
+
+const optionsStyles = `
+  jn-flex
+  jn-flex-row
+  jn-items-center
+`
+
+const headingStyles = `
+  jn-text-lg
+  jn-text-theme-high
+`
 
 /**
  * The PageHeader component renders a header to the application.
@@ -67,14 +74,15 @@ export const PageHeader = ({
               ((logo === true || logo === undefined) && <DefaultLogo data-testid="default-logo" alt={""} />) // Render default logo if logo is true or undefined
           }
         </div>
-        <div>
-          {heading && (
-            <div className={headingStyles(onClick !== undefined)} onClick={onClick}>
-              {heading}
-            </div>
-          )}
+        <div className={`juno-pageheader-content-container ${contentContainerStyles}`}>
+          <div
+            className={`juno-pageheader-heading ${headingStyles} ${typeof onClick === "function" ? "jn-cursor-pointer" : ""}`}
+            onClick={onClick}
+          >
+            {heading && heading}
+          </div>
+          <div className={`juno-pageheader-options ${optionsStyles}`}>{children}</div>
         </div>
-        {children}
       </div>
     </div>
   )
@@ -88,5 +96,6 @@ export interface PageHeaderProps {
   logo?: boolean | Boolean | JSX.Element | null
   /** Optional: onClick handler for brand logo/page title. To be used to navigate to the home page.  */
   onClick?: React.MouseEventHandler<EventTarget>
+  /** Children to render in the header such as user name, avatar, log-in/out button, etc. */
   children?: React.ReactNode
 }
diff --git a/packages/ui-components/src/components/PageHeader/PageHeader.stories.tsx b/packages/ui-components/src/components/PageHeader/PageHeader.stories.tsx
@@ -12,10 +12,20 @@ import CustomLogoLandscapePNG from "./custom-logo-placeholders/custom-logo-lands
 import CustomLogoPortraitPNG from "./custom-logo-placeholders/custom-logo-portrait.png"
 import CustomLogoSquarePNG from "./custom-logo-placeholders/custom-logo-square.png"
 import { PageHeader, PageHeaderProps } from "./index"
+import { Button } from "../Button/"
 
 const CustomLogoImagePNGSquare = () => <img src={CustomLogoSquarePNG} alt="Custom Logo Square" />
 const CustomLogoImagePNGLandscape = () => <img src={CustomLogoLandscapePNG} alt="Custom Logo Landscape" />
 const CustomLogoImagePNGPortrait = () => <img src={CustomLogoPortraitPNG} alt="Custom Logo Portrait" />
+const HeaderOptions = () => {
+  const userNameStyles = { marginRight: "1rem" }
+  return (
+    <>
+      <span style={userNameStyles}>Jane Doe</span>
+      <Button size="small">Log Out</Button>
+    </>
+  )
+}
 
 type Story = StoryObj<PageHeaderProps>
 
@@ -34,23 +44,18 @@ const meta: Meta<PageHeaderProps> = {
 }
 export default meta
 
-const Template: StoryFn<PageHeaderProps> = (args) => <PageHeader {...args} />
+const Template: StoryFn<PageHeaderProps> = (args) => {
+  return <PageHeader {...args} />
+}
 
-export const Default = Template.bind({
+export const Default: Story = {
   render: Template,
-  parameters: {
-    docs: {
-      description: {
-        story: "The PageHeader component renders a header at the top of the website. Place as first child of AppBody.",
-      },
-    },
-  },
 
   args: {
     heading: "My App",
     logo: true,
   },
-})
+}
 
 export const WithHeading: Story = {
   parameters: {
@@ -64,24 +69,40 @@ export const WithHeading: Story = {
   },
 }
 
+export const WithHeadingAndChildren: Story = {
+  args: {
+    heading: "My Awesome App",
+    children: <HeaderOptions />,
+  },
+}
+
+export const NoHeadingWithChildren: Story = {
+  args: {
+    children: <HeaderOptions />,
+  },
+}
+
 export const NoLogo: Story = {
   args: {
     logo: false,
     heading: "My Awesome App",
+    children: <HeaderOptions />,
   },
 }
 
 export const WithCustomLogoSquareInline: Story = {
   args: {
     logo: <CustomLogoSquare alt={""} />,
     heading: "My Awesome App",
+    children: <HeaderOptions />,
   },
 }
 
 export const WithCustomLogoLandscapeInline: Story = {
   args: {
     logo: <CustomLogoLandscape alt={""} />,
     heading: "My Awesome App",
+    children: <HeaderOptions />,
   },
 }
 
@@ -96,19 +117,22 @@ export const WithCustomLogoPNGSquare: Story = {
   args: {
     logo: <CustomLogoImagePNGSquare />,
     heading: "My Awesome App",
+    children: <HeaderOptions />,
   },
 }
 
 export const WithCustomLogoPNGLandscape: Story = {
   args: {
     logo: <CustomLogoImagePNGLandscape />,
     heading: "My Awesome App",
+    children: <HeaderOptions />,
   },
 }
 
 export const WithCustomLogoPNGPortrait: Story = {
   args: {
     logo: <CustomLogoImagePNGPortrait />,
     heading: "My Awesome App",
+    children: <HeaderOptions />,
   },
 }