Feat/page header logo

packages/page-header/jest.config.js

@@ -14,4 +14,7 @@ module.exports = {
    * More info: https://jestjs.io/docs/upgrading-to-jest29#snapshot-format
    */
   snapshotFormat: { escapeString: true, printBasicPrototype: true },
+  transformIgnorePatterns: [
+    `/node_modules/(?!@availity/hooks)`
+  ]
 };

packages/page-header/package.json

@@ -39,8 +39,10 @@
     "@availity/mui-link": "workspace:^",
     "@availity/mui-typography": "workspace:^",
     "@mui/material": "^5.15.15",
+    "@tanstack/react-query": "^4.36.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-image": "^4.1.0",
     "tsup": "^8.0.2",
     "typescript": "^5.4.5"
   },
@@ -50,6 +52,7 @@
     "@availity/mui-divider": "workspace:^",
     "@availity/mui-layout": "workspace:^",
     "@availity/mui-link": "workspace:^",
+    "@availity/mui-spaces": "workspace:^",
     "@availity/mui-typography": "workspace:^",
     "@mui/material": "^5.11.9",
     "react": ">=16.3.0"

packages/page-header/src/lib/PageHeader.stories.tsx

@@ -1,6 +1,8 @@
 // Each exported component in the package should have its own stories file
 
 import type { Meta, StoryObj } from '@storybook/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Spaces } from '@availity/mui-spaces';
 import { PageHeader, PageHeaderProps } from './PageHeader';
 
 const meta: Meta<typeof PageHeader> = {
@@ -24,8 +26,7 @@ export const _PageHeaderHelp: StoryObj<typeof PageHeader> = {
   args: {
     headerText: 'This text is a child of PageHeader',
     breadcrumbs: { active: 'This Page' },
-    helpLink: 'https://www.availity.com',
-    helpAppName: undefined
+    help: { helpAppName: undefined, url: 'https://www.availity.com' },
   },
 };
 
@@ -35,8 +36,7 @@ export const _PageHeaderHelpDemo: StoryObj<typeof PageHeader> = {
   args: {
     headerText: 'This text is a child of PageHeader',
     breadcrumbs: { active: 'This Page' },
-    helpLink: 'https://www.availity.com',
-    helpAppName: 'This App'
+    help: { helpAppName: 'This App', url: 'https://www.availity.com' },
   },
 };
 
@@ -60,3 +60,40 @@ export const _PageHeaderDoubleButtons: StoryObj<typeof PageHeader> = {
     ],
   },
 };
+
+const queryClient = new QueryClient();
+
+export const _PageHeaderLogo: StoryObj<typeof PageHeader> = {
+  render: (args: PageHeaderProps) => (
+    <QueryClientProvider client={queryClient}>
+      <Spaces spaceIds={['11', '22', '33']}>
+        <PageHeader {...args} />
+      </Spaces>
+    </QueryClientProvider>
+  ),
+  args: {
+    headerText: 'App Name',
+    breadcrumbs: { active: 'This Page' },
+    logo: {
+      spaceId: '11',
+    },
+  },
+};
+
+export const _PageHeaderLogoAndHelp: StoryObj<typeof PageHeader> = {
+  render: (args: PageHeaderProps) => (
+    <QueryClientProvider client={queryClient}>
+      <Spaces spaceIds={['11', '22', '33']}>
+        <PageHeader {...args} />
+      </Spaces>
+    </QueryClientProvider>
+  ),
+  args: {
+    headerText: 'App Name',
+    breadcrumbs: { active: 'This Page' },
+    help: { helpAppName: 'This App', url: 'https://www.availity.com' },
+    logo: {
+      spaceId: '11',
+    },
+  },
+};

packages/page-header/src/lib/PageHeader.test.tsx

@@ -1,7 +1,29 @@
-import { render } from '@testing-library/react';
+import { render, waitForElementToBeRemoved } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Spaces } from '@availity/mui-spaces';
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import { server } from '@availity/mock/src/lib/server';
 import { PageHeader } from './PageHeader';
 
+const mockImage = jest.fn();
+
+jest.mock('react-image', () => ({
+  ...(jest.requireActual('react-image') as any),
+  Img: (props: any) => mockImage(props),
+}));
+
 describe('PageHeader', () => {
+  beforeAll(() => {
+    // Start the interception.
+    server.listen();
+  });
+
+  afterEach(() => {
+    // Remove any handlers you may have added
+    // in individual tests (runtime handlers).
+    server.resetHandlers();
+    jest.restoreAllMocks();
+  });
   test('should render simple page header successfully', () => {
     const { getByText } = render(<PageHeader breadcrumbs={{ active: 'This page' }} headerText="This is the header" />);
     expect(getByText('This is the header')).toBeTruthy();
@@ -13,7 +35,7 @@ describe('PageHeader', () => {
       <PageHeader
         breadcrumbs={{ active: 'This page' }}
         headerText="This is the header"
-        helpLink="https://www.availity.com"
+        help={{ url: 'https://www.availity.com' }}
       />
     );
     expect(getByText('This is the header')).toBeTruthy();
@@ -33,4 +55,20 @@ describe('PageHeader', () => {
     expect(getByText('This page')).toBeTruthy();
     expect(getByText('Button 1')).toBeTruthy();
   });
+
+  test('should render page header with a logo successfully', async () => {
+    const queryClient = new QueryClient();
+    const { getByText, container } = render(
+      <QueryClientProvider client={queryClient}>
+        <Spaces spaceIds={['11', '22', '33']}>
+          <PageHeader breadcrumbs={{ active: 'This page' }} headerText="This is the header" logo={{ spaceId: '11' }} />
+        </Spaces>
+      </QueryClientProvider>
+    );
+    expect(getByText('This is the header')).toBeTruthy();
+    expect(getByText('This page')).toBeTruthy();
+    await waitForElementToBeRemoved(container.getElementsByClassName('MuiSkeleton-root')[0]);
+    // Ensure the correct src was selected.
+    expect(mockImage.mock.calls[0][0].src).toEqual('/spaces/test_logo.png');
+  });
 });

packages/page-header/src/lib/PageHeader.tsx

@@ -5,14 +5,40 @@ import { Link } from '@availity/mui-link';
 import { Button, ButtonProps } from '@availity/mui-button';
 import { Feedback } from '@availity/mui-feedback';
 import { Box, Grid } from '@availity/mui-layout';
+import { SpacesImage } from '@availity/mui-spaces';
+import Skeleton from '@mui/material/Skeleton';
 
 export interface ButtonsProps extends Omit<ButtonProps, 'size' | 'height' | 'color'> {
   key: string;
 }
 
+export type Help = {
+  /** The URL to the Help Demo */
+  url: string;
+  /** The name that displays in the help text. Should be used when the help is a demo video.
+   * @example "This App"
+   * @returns Need Help? Watch a demo for This App
+   */
+  helpAppName?: string;
+};
+
+type LogoSpaceId = {
+  /** The spaceId associated with the app. Required if payerId is not present. */
+  spaceId: string;
+  /** The payerId associated with the app. Required if spaceId is not present. */
+  payerId?: string;
+};
+
+type LogoPayerId = {
+  /** The spaceId associated with the app. Required if payerId is not present. */
+  spaceId?: string;
+  /** The payerId associated with the app. Required if spaceId is not present. */
+  payerId: string;
+};
+
 export interface PageHeaderProps {
   /** Render breadcrumbs above the header */
-  breadcrumbs: BreadcrumbsProps;
+  breadcrumbs?: BreadcrumbsProps;
   /** Renders buttons in the right side of the header */
   buttons?: ButtonsProps[];
   /** If true, the Feedback button displays
@@ -21,22 +47,39 @@ export interface PageHeaderProps {
   feedback?: boolean;
   /** The text that displays in the header  */
   headerText: string;
-  /** The name that displays in the help text. Should be used when the help is a demo video.
-   * @example "This App"
-   * @returns Need Help? Watch a demo for This App
-   */
-  helpAppName?: string;
-  /** The URL to the Help Demo */
-  helpLink?: string;
+  /** Help attributes */
+  help?: Help;
+  /** Logo attributes */
+  logo?: LogoSpaceId | LogoPayerId;
 }
 
+const Logo = (props: LogoSpaceId | LogoPayerId) => {
+  if (props.spaceId)
+    return (
+      <SpacesImage
+        imageType="images.logo"
+        spaceId={props.spaceId}
+        Loader={({ id }) => <Skeleton id={id} height="60px" width="234px" />}
+      />
+    );
+  else if (props.payerId)
+    return (
+      <SpacesImage
+        imageType="images.logo"
+        payerId={props.payerId}
+        Loader={({ id }) => <Skeleton id={id} height="60px" width="234px" />}
+      />
+    );
+  else return null;
+};
+
 export const PageHeader = ({
   breadcrumbs,
   buttons,
   feedback = false,
   headerText,
-  helpAppName,
-  helpLink,
+  logo,
+  help,
 }: PageHeaderProps): JSX.Element => {
   return (
     <Grid
@@ -48,22 +91,29 @@ export const PageHeader = ({
       paddingLeft={3}
       paddingRight={3}
     >
-      {breadcrumbs || helpLink ? (
+      {breadcrumbs || logo || help ? (
         <Grid direction="row" container justifyContent="space-between" marginBottom={4}>
           {breadcrumbs && (
-            <Grid>
+            <Grid marginRight={2}>
               <Breadcrumbs {...breadcrumbs} />
             </Grid>
           )}
-          {helpLink && (
-            <Grid marginLeft={2}>
-              <Typography variant="body1">
-                Need help?{' '}
-                <Link href={helpLink} target="_blank" loadApp={false}>
-                  {helpAppName ? 'Watch a demo' : 'Learn More'}
-                </Link>{' '}
-                {helpAppName ? ` for ${helpAppName}` : null}
-              </Typography>
+          {(logo || help) && (
+            <Grid>
+              {help && (
+                <Typography variant="body1">
+                  Need help?{' '}
+                  <Link href={help.url} target="_blank" loadApp={false}>
+                    {help.helpAppName ? 'Watch a demo' : 'Learn More'}
+                  </Link>{' '}
+                  {help.helpAppName ? ` for ${help.helpAppName}` : null}
+                </Typography>
+              )}
+              {logo && (
+                <Grid container justifyContent="end">
+                  <Logo {...logo} />
+                </Grid>
+              )}
             </Grid>
           )}
         </Grid>

packages/spaces/src/lib/SpacesImage.tsx

@@ -12,6 +12,7 @@ type BaseSpacesImageProps = {
     | 'images.promotionalHover';
   fallback?: string;
   id?: string;
+  Loader?: ({ id }: { id: string }) => JSX.Element;
 };
 
 type SpacesImageSpaceId = {
@@ -26,7 +27,14 @@ type SpacesImagePayerId = {
 
 export type SpacesImageProps = SpacesImageSpaceId | SpacesImagePayerId;
 
-export const SpacesImage = ({ spaceId, payerId, imageType = 'url', fallback, ...props }: SpacesImageProps) => {
+export const SpacesImage = ({
+  spaceId,
+  payerId,
+  imageType = 'url',
+  fallback,
+  Loader = CircularProgress,
+  ...props
+}: SpacesImageProps) => {
   let spaces;
 
   if (spaceId) {
@@ -51,7 +59,7 @@ export const SpacesImage = ({ spaceId, payerId, imageType = 'url', fallback, ...
   let url = imageMap[imageType];
 
   if (!url && loading) {
-    return <CircularProgress id={`app-${id}-loading`} />;
+    return <Loader id={`app-${id}-loading`} />;
   }
 
   if (!url && !loading && fallback) {
@@ -65,7 +73,7 @@ export const SpacesImage = ({ spaceId, payerId, imageType = 'url', fallback, ...
       id={props.id || `app-img-${id}`}
       src={url}
       alt={`Space ${imageType}`}
-      loader={<CircularProgress id={`app-img-${id}-loading`} />}
+      loader={<Loader id={`app-img-${id}-loading`} />}
       {...props}
     />
   );

yarn.lock

@@ -708,8 +708,10 @@ __metadata:
     "@availity/mui-link": "workspace:^"
     "@availity/mui-typography": "workspace:^"
     "@mui/material": ^5.15.15
+    "@tanstack/react-query": ^4.36.1
     react: 18.2.0
     react-dom: 18.2.0
+    react-image: ^4.1.0
     tsup: ^8.0.2
     typescript: ^5.4.5
   peerDependencies:
@@ -718,6 +720,7 @@ __metadata:
     "@availity/mui-divider": "workspace:^"
     "@availity/mui-layout": "workspace:^"
     "@availity/mui-link": "workspace:^"
+    "@availity/mui-spaces": "workspace:^"
     "@availity/mui-typography": "workspace:^"
     "@mui/material": ^5.11.9
     react: ">=16.3.0"