- {heading}
+
+
+
+ {
+ typeof logo === "function" || // Render if logo is a function (component)
+ (React.isValidElement(logo) && logo) || // Render if logo is a valid React element
+ ((logo === true || logo === undefined) && ) // Render default logo if logo is true or undefined
+ }
- )}
-
- {children}
+
+ {heading && (
+
+ {heading}
+
+ )}
+
+ {children}
+
)
}
export interface PageHeaderProps {
/** Heading (typically the name of the application) */
- heading?: string | React.ReactNode | null
+ heading?: string | String | JSX.Element | null // Union type to avoid `any`
/** Add custom class name */
className?: string
+ 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
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
index 1f36b857f..07791c463 100644
--- a/packages/ui-components/src/components/PageHeader/PageHeader.stories.tsx
+++ b/packages/ui-components/src/components/PageHeader/PageHeader.stories.tsx
@@ -4,38 +4,55 @@
*/
import React from "react"
-
+import type { Meta, StoryFn, StoryObj } from "@storybook/react"
+import CustomLogoLandscape from "./custom-logo-placeholders/custom-logo-landscape.svg"
+import CustomLogoPortrait from "./custom-logo-placeholders/custom-logo-portrait.svg"
+import CustomLogoSquare from "./custom-logo-placeholders/custom-logo-square.svg"
+import CustomLogoLandscapePNG from "./custom-logo-placeholders/custom-logo-landscape.png"
+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"
-export default {
+const CustomLogoImagePNGSquare = () => 
+const CustomLogoImagePNGLandscape = () => 
+const CustomLogoImagePNGPortrait = () => 
+
+type Story = StoryObj
+
+const meta: Meta = {
title: "Layout/PageHeader",
component: PageHeader,
argTypes: {
children: {
control: false,
},
+ heading: {
+ control: "text", // You can use "text", "object", or "null" depending on your use case
+ },
+ logo: { control: "boolean" }, // Control type for `logo`
},
}
+export default meta
-const Template = (args: PageHeaderProps) =>
+const Template: StoryFn = (args) =>
-export const Simple = {
+export const Default = Template.bind({
render: Template,
-
parameters: {
docs: {
description: {
- story: "The page header component renders a header at the top of the website. Place as first child of AppBody.",
+ story: "The PageHeader component renders a header at the top of the website. Place as first child of AppBody.",
},
},
},
- args: {},
-}
-
-export const WithHeading = {
- render: Template,
+ args: {
+ heading: "My App",
+ logo: true,
+ },
+})
+export const WithHeading: Story = {
parameters: {
docs: {
description: { story: "PageHeader with Heading." },
@@ -46,3 +63,52 @@ export const WithHeading = {
heading: "My Awesome App",
},
}
+
+export const NoLogo: Story = {
+ args: {
+ logo: false,
+ heading: "My Awesome App",
+ },
+}
+
+export const WithCustomLogoSquareInline: Story = {
+ args: {
+ logo: ,
+ heading: "My Awesome App",
+ },
+}
+
+export const WithCustomLogoLandscapeInline: Story = {
+ args: {
+ logo: ,
+ heading: "My Awesome App",
+ },
+}
+
+export const WithCustomLogoPortraitInline: Story = {
+ args: {
+ logo: ,
+ heading: "My Awesome App",
+ },
+}
+
+export const WithCustomLogoPNGSquare: Story = {
+ args: {
+ logo: ,
+ heading: "My Awesome App",
+ },
+}
+
+export const WithCustomLogoPNGLandscape: Story = {
+ args: {
+ logo: ,
+ heading: "My Awesome App",
+ },
+}
+
+export const WithCustomLogoPNGPortrait: Story = {
+ args: {
+ logo: ,
+ heading: "My Awesome App",
+ },
+}
diff --git a/packages/ui-components/src/components/PageHeader/PageHeader.test.tsx b/packages/ui-components/src/components/PageHeader/PageHeader.test.tsx
index e1795a303..622e038de 100644
--- a/packages/ui-components/src/components/PageHeader/PageHeader.test.tsx
+++ b/packages/ui-components/src/components/PageHeader/PageHeader.test.tsx
@@ -8,11 +8,13 @@ import { render, screen } from "@testing-library/react"
import userEvent from "@testing-library/user-event"
import { PageHeader } from "./index"
+const CustomLogoComponent = () =>
+
describe("PageHeader", () => {
test("renders a simple Page Header and has flexbox layout", () => {
render()
expect(screen.getByRole("banner")).toBeInTheDocument()
- expect(screen.getByRole("banner")).toHaveClass("jn-flex")
+ expect(screen.getByRole("banner")).toHaveClass("juno-pageheader")
})
test("renders a Page Header with heading as passed", () => {
@@ -31,6 +33,28 @@ describe("PageHeader", () => {
expect(screen.getByRole("button")).toBeInTheDocument()
})
+ test("renders a default logo by default", () => {
+ render()
+ const element = screen.getByTestId("default-logo")
+ expect(element).toBeInTheDocument()
+ })
+
+ test("does not render any logo as passed", () => {
+ render()
+ expect(screen.getByRole("banner")).toBeInTheDocument()
+ expect(screen.queryByAltText("Juno UI")).not.toBeInTheDocument()
+ const logoContainer = document.querySelector(".juno-pageheader-logo-container")
+ expect(logoContainer).toBeInTheDocument()
+ expect(logoContainer).toBeEmptyDOMElement()
+ })
+
+ test("renders a custom logo component as passed", () => {
+ render(} />)
+ expect(screen.getByRole("banner")).toBeInTheDocument()
+ expect(screen.getByRole("img")).toBeInTheDocument()
+ expect(screen.getByRole("img")).toHaveClass("juno-test-logo")
+ })
+
test("renders a custom className", () => {
render()
expect(screen.getByRole("banner")).toBeInTheDocument()
diff --git a/packages/ui-components/src/components/PageHeader/custom-logo-placeholders/custom-logo-landscape.png b/packages/ui-components/src/components/PageHeader/custom-logo-placeholders/custom-logo-landscape.png
new file mode 100644
index 000000000..4717e5586
Binary files /dev/null and b/packages/ui-components/src/components/PageHeader/custom-logo-placeholders/custom-logo-landscape.png differ
diff --git a/packages/ui-components/src/components/PageHeader/custom-logo-placeholders/custom-logo-landscape.svg b/packages/ui-components/src/components/PageHeader/custom-logo-placeholders/custom-logo-landscape.svg
new file mode 100644
index 000000000..e3642aed4
--- /dev/null
+++ b/packages/ui-components/src/components/PageHeader/custom-logo-placeholders/custom-logo-landscape.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/ui-components/src/components/PageHeader/custom-logo-placeholders/custom-logo-portrait.png b/packages/ui-components/src/components/PageHeader/custom-logo-placeholders/custom-logo-portrait.png
new file mode 100644
index 000000000..91ec0d022
Binary files /dev/null and b/packages/ui-components/src/components/PageHeader/custom-logo-placeholders/custom-logo-portrait.png differ
diff --git a/packages/ui-components/src/components/PageHeader/custom-logo-placeholders/custom-logo-portrait.svg b/packages/ui-components/src/components/PageHeader/custom-logo-placeholders/custom-logo-portrait.svg
new file mode 100644
index 000000000..7dcbc76e5
--- /dev/null
+++ b/packages/ui-components/src/components/PageHeader/custom-logo-placeholders/custom-logo-portrait.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/ui-components/src/components/PageHeader/custom-logo-placeholders/custom-logo-square.png b/packages/ui-components/src/components/PageHeader/custom-logo-placeholders/custom-logo-square.png
new file mode 100644
index 000000000..6a21fb785
Binary files /dev/null and b/packages/ui-components/src/components/PageHeader/custom-logo-placeholders/custom-logo-square.png differ
diff --git a/packages/ui-components/src/components/PageHeader/custom-logo-placeholders/custom-logo-square.svg b/packages/ui-components/src/components/PageHeader/custom-logo-placeholders/custom-logo-square.svg
new file mode 100644
index 000000000..5a14d3141
--- /dev/null
+++ b/packages/ui-components/src/components/PageHeader/custom-logo-placeholders/custom-logo-square.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/ui-components/src/img/JunoUI_logo.svg b/packages/ui-components/src/img/JunoUI_logo.svg
index f84ca1080..b66af4361 100644
--- a/packages/ui-components/src/img/JunoUI_logo.svg
+++ b/packages/ui-components/src/img/JunoUI_logo.svg
@@ -1,4 +1,4 @@
-