@availity/mui-page-header 0.4.11 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/dist/index.d.mts +28 -10
  3. package/dist/index.d.ts +28 -10
  4. package/dist/index.js +48 -11
  5. package/dist/index.mjs +38 -11
  6. package/jest.config.js +3 -0
  7. package/package.json +17 -14
  8. package/src/lib/PageHeader.stories.tsx +41 -4
  9. package/src/lib/PageHeader.test.tsx +40 -2
  10. package/src/lib/PageHeader.tsx +71 -21
package/CHANGELOG.md CHANGED
@@ -2,6 +2,33 @@
2
2
 
3
3
  This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
4
4
 
5
+ ## [1.0.0](https://github.com/Availity/element/compare/@availity/mui-page-header@0.4.12...@availity/mui-page-header@1.0.0) (2024-11-06)
6
+
7
+ ### Dependency Updates
8
+
9
+ * `mui-spaces` updated to version `0.4.12`
10
+
11
+ ### ⚠ BREAKING CHANGES
12
+
13
+ * **mui-page-header:** helpLink and helpAppName removed in favor of the help object
14
+
15
+ ### Features
16
+
17
+ * **mui-page-header:** add logo ([c94a95c](https://github.com/Availity/element/commit/c94a95c19f4d4364394a9bdffc87ff53bfd67c5d))
18
+ * **mui-page-header:** add logo ([4930c76](https://github.com/Availity/element/commit/4930c76b85aaa72590330fb53a60135dca743c71))
19
+ * **mui-spaces:** allow custom Loaders in SpacesImage ([7a585c9](https://github.com/Availity/element/commit/7a585c9aeb1255abf56b87692f8c134820a20e60))
20
+
21
+ ## [0.4.12](https://github.com/Availity/element/compare/@availity/mui-page-header@0.4.11...@availity/mui-page-header@0.4.12) (2024-10-31)
22
+
23
+ ### Dependency Updates
24
+
25
+ * `mui-breadcrumbs` updated to version `0.4.11`
26
+ * `mui-button` updated to version `0.4.11`
27
+ * `mui-divider` updated to version `0.4.11`
28
+ * `mui-layout` updated to version `0.4.11`
29
+ * `mui-link` updated to version `0.4.11`
30
+ * `mui-typography` updated to version `0.4.11`
31
+ * `mui-feedback` updated to version `0.4.11`
5
32
  ## [0.4.11](https://github.com/Availity/element/compare/@availity/mui-page-header@0.4.10...@availity/mui-page-header@0.4.11) (2024-10-25)
6
33
 
7
34
  ### Dependency Updates
package/dist/index.d.mts CHANGED
@@ -4,9 +4,30 @@ import { ButtonProps } from '@availity/mui-button';
4
4
  interface ButtonsProps extends Omit<ButtonProps, 'size' | 'height' | 'color'> {
5
5
  key: string;
6
6
  }
7
+ type Help = {
8
+ /** The URL to the Help Demo */
9
+ url: string;
10
+ /** The name that displays in the help text. Should be used when the help is a demo video.
11
+ * @example "This App"
12
+ * @returns Need Help? Watch a demo for This App
13
+ */
14
+ helpAppName?: string;
15
+ };
16
+ type LogoSpaceId = {
17
+ /** The spaceId associated with the app. Required if payerId is not present. */
18
+ spaceId: string;
19
+ /** The payerId associated with the app. Required if spaceId is not present. */
20
+ payerId?: string;
21
+ };
22
+ type LogoPayerId = {
23
+ /** The spaceId associated with the app. Required if payerId is not present. */
24
+ spaceId?: string;
25
+ /** The payerId associated with the app. Required if spaceId is not present. */
26
+ payerId: string;
27
+ };
7
28
  interface PageHeaderProps {
8
29
  /** Render breadcrumbs above the header */
9
- breadcrumbs: BreadcrumbsProps;
30
+ breadcrumbs?: BreadcrumbsProps;
10
31
  /** Renders buttons in the right side of the header */
11
32
  buttons?: ButtonsProps[];
12
33
  /** If true, the Feedback button displays
@@ -15,14 +36,11 @@ interface PageHeaderProps {
15
36
  feedback?: boolean;
16
37
  /** The text that displays in the header */
17
38
  headerText: string;
18
- /** The name that displays in the help text. Should be used when the help is a demo video.
19
- * @example "This App"
20
- * @returns Need Help? Watch a demo for This App
21
- */
22
- helpAppName?: string;
23
- /** The URL to the Help Demo */
24
- helpLink?: string;
39
+ /** Help attributes */
40
+ help?: Help;
41
+ /** Logo attributes */
42
+ logo?: LogoSpaceId | LogoPayerId;
25
43
  }
26
- declare const PageHeader: ({ breadcrumbs, buttons, feedback, headerText, helpAppName, helpLink, }: PageHeaderProps) => JSX.Element;
44
+ declare const PageHeader: ({ breadcrumbs, buttons, feedback, headerText, logo, help, }: PageHeaderProps) => JSX.Element;
27
45
 
28
- export { type ButtonsProps, PageHeader, type PageHeaderProps };
46
+ export { type ButtonsProps, type Help, PageHeader, type PageHeaderProps };
package/dist/index.d.ts CHANGED
@@ -4,9 +4,30 @@ import { ButtonProps } from '@availity/mui-button';
4
4
  interface ButtonsProps extends Omit<ButtonProps, 'size' | 'height' | 'color'> {
5
5
  key: string;
6
6
  }
7
+ type Help = {
8
+ /** The URL to the Help Demo */
9
+ url: string;
10
+ /** The name that displays in the help text. Should be used when the help is a demo video.
11
+ * @example "This App"
12
+ * @returns Need Help? Watch a demo for This App
13
+ */
14
+ helpAppName?: string;
15
+ };
16
+ type LogoSpaceId = {
17
+ /** The spaceId associated with the app. Required if payerId is not present. */
18
+ spaceId: string;
19
+ /** The payerId associated with the app. Required if spaceId is not present. */
20
+ payerId?: string;
21
+ };
22
+ type LogoPayerId = {
23
+ /** The spaceId associated with the app. Required if payerId is not present. */
24
+ spaceId?: string;
25
+ /** The payerId associated with the app. Required if spaceId is not present. */
26
+ payerId: string;
27
+ };
7
28
  interface PageHeaderProps {
8
29
  /** Render breadcrumbs above the header */
9
- breadcrumbs: BreadcrumbsProps;
30
+ breadcrumbs?: BreadcrumbsProps;
10
31
  /** Renders buttons in the right side of the header */
11
32
  buttons?: ButtonsProps[];
12
33
  /** If true, the Feedback button displays
@@ -15,14 +36,11 @@ interface PageHeaderProps {
15
36
  feedback?: boolean;
16
37
  /** The text that displays in the header */
17
38
  headerText: string;
18
- /** The name that displays in the help text. Should be used when the help is a demo video.
19
- * @example "This App"
20
- * @returns Need Help? Watch a demo for This App
21
- */
22
- helpAppName?: string;
23
- /** The URL to the Help Demo */
24
- helpLink?: string;
39
+ /** Help attributes */
40
+ help?: Help;
41
+ /** Logo attributes */
42
+ logo?: LogoSpaceId | LogoPayerId;
25
43
  }
26
- declare const PageHeader: ({ breadcrumbs, buttons, feedback, headerText, helpAppName, helpLink, }: PageHeaderProps) => JSX.Element;
44
+ declare const PageHeader: ({ breadcrumbs, buttons, feedback, headerText, logo, help, }: PageHeaderProps) => JSX.Element;
27
45
 
28
- export { type ButtonsProps, PageHeader, type PageHeaderProps };
46
+ export { type ButtonsProps, type Help, PageHeader, type PageHeaderProps };
package/dist/index.js CHANGED
@@ -1,10 +1,12 @@
1
1
  "use strict";
2
+ var __create = Object.create;
2
3
  var __defProp = Object.defineProperty;
3
4
  var __defProps = Object.defineProperties;
4
5
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
6
  var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
6
7
  var __getOwnPropNames = Object.getOwnPropertyNames;
7
8
  var __getOwnPropSymbols = Object.getOwnPropertySymbols;
9
+ var __getProtoOf = Object.getPrototypeOf;
8
10
  var __hasOwnProp = Object.prototype.hasOwnProperty;
9
11
  var __propIsEnum = Object.prototype.propertyIsEnumerable;
10
12
  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -32,6 +34,14 @@ var __copyProps = (to, from, except, desc) => {
32
34
  }
33
35
  return to;
34
36
  };
37
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
38
+ // If the importer is in node compatibility mode or this is not an ESM
39
+ // file that has been converted to a CommonJS file using a Babel-
40
+ // compatible transform (i.e. "__esModule" has not been set), then set
41
+ // "default" to the CommonJS "module.exports" for node compatibility.
42
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
43
+ mod
44
+ ));
35
45
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
36
46
 
37
47
  // src/index.ts
@@ -49,14 +59,38 @@ var import_mui_link = require("@availity/mui-link");
49
59
  var import_mui_button = require("@availity/mui-button");
50
60
  var import_mui_feedback = require("@availity/mui-feedback");
51
61
  var import_mui_layout = require("@availity/mui-layout");
62
+ var import_mui_spaces = require("@availity/mui-spaces");
63
+ var import_Skeleton = __toESM(require("@mui/material/Skeleton"));
52
64
  var import_jsx_runtime = require("react/jsx-runtime");
65
+ var Logo = (props) => {
66
+ if (props.spaceId)
67
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
68
+ import_mui_spaces.SpacesImage,
69
+ {
70
+ imageType: "images.logo",
71
+ spaceId: props.spaceId,
72
+ Loader: ({ id }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Skeleton.default, { id, height: "60px", width: "234px" })
73
+ }
74
+ );
75
+ else if (props.payerId)
76
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
77
+ import_mui_spaces.SpacesImage,
78
+ {
79
+ imageType: "images.logo",
80
+ payerId: props.payerId,
81
+ Loader: ({ id }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Skeleton.default, { id, height: "60px", width: "234px" })
82
+ }
83
+ );
84
+ else
85
+ return null;
86
+ };
53
87
  var PageHeader = ({
54
88
  breadcrumbs,
55
89
  buttons,
56
90
  feedback = false,
57
91
  headerText,
58
- helpAppName,
59
- helpLink
92
+ logo,
93
+ help
60
94
  }) => {
61
95
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
62
96
  import_mui_layout.Grid,
@@ -69,15 +103,18 @@ var PageHeader = ({
69
103
  paddingLeft: 3,
70
104
  paddingRight: 3,
71
105
  children: [
72
- breadcrumbs || helpLink ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_mui_layout.Grid, { direction: "row", container: true, justifyContent: "space-between", marginBottom: 4, children: [
73
- breadcrumbs && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_layout.Grid, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_breadcrumbs.Breadcrumbs, __spreadValues({}, breadcrumbs)) }),
74
- helpLink && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_layout.Grid, { marginLeft: 2, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_mui_typography.Typography, { variant: "body1", children: [
75
- "Need help?",
76
- " ",
77
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_link.Link, { href: helpLink, target: "_blank", loadApp: false, children: helpAppName ? "Watch a demo" : "Learn More" }),
78
- " ",
79
- helpAppName ? ` for ${helpAppName}` : null
80
- ] }) })
106
+ breadcrumbs || logo || help ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_mui_layout.Grid, { direction: "row", container: true, justifyContent: "space-between", marginBottom: 4, children: [
107
+ breadcrumbs && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_layout.Grid, { marginRight: 2, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_breadcrumbs.Breadcrumbs, __spreadValues({}, breadcrumbs)) }),
108
+ (logo || help) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_mui_layout.Grid, { children: [
109
+ help && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_mui_typography.Typography, { variant: "body1", children: [
110
+ "Need help?",
111
+ " ",
112
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_link.Link, { href: help.url, target: "_blank", loadApp: false, children: help.helpAppName ? "Watch a demo" : "Learn More" }),
113
+ " ",
114
+ help.helpAppName ? ` for ${help.helpAppName}` : null
115
+ ] }),
116
+ logo && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_layout.Grid, { container: true, justifyContent: "end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Logo, __spreadValues({}, logo)) })
117
+ ] })
81
118
  ] }) : null,
82
119
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_mui_layout.Grid, { direction: "row", container: true, marginBottom: 2, alignItems: "center", justifyContent: "space-between", children: [
83
120
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_layout.Grid, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_typography.Typography, { variant: "h1", children: headerText }) }),
package/dist/index.mjs CHANGED
@@ -26,14 +26,38 @@ import { Link } from "@availity/mui-link";
26
26
  import { Button } from "@availity/mui-button";
27
27
  import { Feedback } from "@availity/mui-feedback";
28
28
  import { Box, Grid } from "@availity/mui-layout";
29
+ import { SpacesImage } from "@availity/mui-spaces";
30
+ import Skeleton from "@mui/material/Skeleton";
29
31
  import { jsx, jsxs } from "react/jsx-runtime";
32
+ var Logo = (props) => {
33
+ if (props.spaceId)
34
+ return /* @__PURE__ */ jsx(
35
+ SpacesImage,
36
+ {
37
+ imageType: "images.logo",
38
+ spaceId: props.spaceId,
39
+ Loader: ({ id }) => /* @__PURE__ */ jsx(Skeleton, { id, height: "60px", width: "234px" })
40
+ }
41
+ );
42
+ else if (props.payerId)
43
+ return /* @__PURE__ */ jsx(
44
+ SpacesImage,
45
+ {
46
+ imageType: "images.logo",
47
+ payerId: props.payerId,
48
+ Loader: ({ id }) => /* @__PURE__ */ jsx(Skeleton, { id, height: "60px", width: "234px" })
49
+ }
50
+ );
51
+ else
52
+ return null;
53
+ };
30
54
  var PageHeader = ({
31
55
  breadcrumbs,
32
56
  buttons,
33
57
  feedback = false,
34
58
  headerText,
35
- helpAppName,
36
- helpLink
59
+ logo,
60
+ help
37
61
  }) => {
38
62
  return /* @__PURE__ */ jsxs(
39
63
  Grid,
@@ -46,15 +70,18 @@ var PageHeader = ({
46
70
  paddingLeft: 3,
47
71
  paddingRight: 3,
48
72
  children: [
49
- breadcrumbs || helpLink ? /* @__PURE__ */ jsxs(Grid, { direction: "row", container: true, justifyContent: "space-between", marginBottom: 4, children: [
50
- breadcrumbs && /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(Breadcrumbs, __spreadValues({}, breadcrumbs)) }),
51
- helpLink && /* @__PURE__ */ jsx(Grid, { marginLeft: 2, children: /* @__PURE__ */ jsxs(Typography, { variant: "body1", children: [
52
- "Need help?",
53
- " ",
54
- /* @__PURE__ */ jsx(Link, { href: helpLink, target: "_blank", loadApp: false, children: helpAppName ? "Watch a demo" : "Learn More" }),
55
- " ",
56
- helpAppName ? ` for ${helpAppName}` : null
57
- ] }) })
73
+ breadcrumbs || logo || help ? /* @__PURE__ */ jsxs(Grid, { direction: "row", container: true, justifyContent: "space-between", marginBottom: 4, children: [
74
+ breadcrumbs && /* @__PURE__ */ jsx(Grid, { marginRight: 2, children: /* @__PURE__ */ jsx(Breadcrumbs, __spreadValues({}, breadcrumbs)) }),
75
+ (logo || help) && /* @__PURE__ */ jsxs(Grid, { children: [
76
+ help && /* @__PURE__ */ jsxs(Typography, { variant: "body1", children: [
77
+ "Need help?",
78
+ " ",
79
+ /* @__PURE__ */ jsx(Link, { href: help.url, target: "_blank", loadApp: false, children: help.helpAppName ? "Watch a demo" : "Learn More" }),
80
+ " ",
81
+ help.helpAppName ? ` for ${help.helpAppName}` : null
82
+ ] }),
83
+ logo && /* @__PURE__ */ jsx(Grid, { container: true, justifyContent: "end", children: /* @__PURE__ */ jsx(Logo, __spreadValues({}, logo)) })
84
+ ] })
58
85
  ] }) : null,
59
86
  /* @__PURE__ */ jsxs(Grid, { direction: "row", container: true, marginBottom: 2, alignItems: "center", justifyContent: "space-between", children: [
60
87
  /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(Typography, { variant: "h1", children: headerText }) }),
package/jest.config.js CHANGED
@@ -14,4 +14,7 @@ module.exports = {
14
14
  * More info: https://jestjs.io/docs/upgrading-to-jest29#snapshot-format
15
15
  */
16
16
  snapshotFormat: { escapeString: true, printBasicPrototype: true },
17
+ transformIgnorePatterns: [
18
+ `/node_modules/(?!@availity/hooks)`
19
+ ]
17
20
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@availity/mui-page-header",
3
- "version": "0.4.11",
3
+ "version": "1.0.0",
4
4
  "description": "Availity MUI PageHeader Component - part of the @availity/element design system",
5
5
  "keywords": [
6
6
  "react",
@@ -32,25 +32,28 @@
32
32
  "publish:canary": "yarn npm publish --access public --tag canary"
33
33
  },
34
34
  "devDependencies": {
35
- "@availity/mui-breadcrumbs": "^0.2.11",
36
- "@availity/mui-button": "^0.6.10",
37
- "@availity/mui-divider": "^0.3.7",
38
- "@availity/mui-layout": "^0.1.6",
39
- "@availity/mui-link": "^0.4.3",
40
- "@availity/mui-typography": "^0.2.0",
35
+ "@availity/mui-breadcrumbs": "^0.2.12",
36
+ "@availity/mui-button": "^0.6.11",
37
+ "@availity/mui-divider": "^0.4.0",
38
+ "@availity/mui-layout": "^0.2.0",
39
+ "@availity/mui-link": "^0.4.4",
40
+ "@availity/mui-typography": "^0.2.1",
41
41
  "@mui/material": "^5.15.15",
42
+ "@tanstack/react-query": "^4.36.1",
42
43
  "react": "18.2.0",
43
44
  "react-dom": "18.2.0",
45
+ "react-image": "^4.1.0",
44
46
  "tsup": "^8.0.2",
45
47
  "typescript": "^5.4.5"
46
48
  },
47
49
  "peerDependencies": {
48
- "@availity/mui-breadcrumbs": "^0.2.11",
49
- "@availity/mui-button": "^0.6.10",
50
- "@availity/mui-divider": "^0.3.7",
51
- "@availity/mui-layout": "^0.1.6",
52
- "@availity/mui-link": "^0.4.3",
53
- "@availity/mui-typography": "^0.2.0",
50
+ "@availity/mui-breadcrumbs": "^0.2.12",
51
+ "@availity/mui-button": "^0.6.11",
52
+ "@availity/mui-divider": "^0.4.0",
53
+ "@availity/mui-layout": "^0.2.0",
54
+ "@availity/mui-link": "^0.4.4",
55
+ "@availity/mui-spaces": "^0.5.0",
56
+ "@availity/mui-typography": "^0.2.1",
54
57
  "@mui/material": "^5.11.9",
55
58
  "react": ">=16.3.0"
56
59
  },
@@ -58,6 +61,6 @@
58
61
  "access": "public"
59
62
  },
60
63
  "dependencies": {
61
- "@availity/mui-feedback": "^0.2.12"
64
+ "@availity/mui-feedback": "^0.3.0"
62
65
  }
63
66
  }
package/src/lib/PageHeader.stories.tsx CHANGED
@@ -1,6 +1,8 @@
1
1
  // Each exported component in the package should have its own stories file
2
2
 
3
3
  import type { Meta, StoryObj } from '@storybook/react';
4
+ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
5
+ import { Spaces } from '@availity/mui-spaces';
4
6
  import { PageHeader, PageHeaderProps } from './PageHeader';
5
7
 
6
8
  const meta: Meta<typeof PageHeader> = {
@@ -24,8 +26,7 @@ export const _PageHeaderHelp: StoryObj<typeof PageHeader> = {
24
26
  args: {
25
27
  headerText: 'This text is a child of PageHeader',
26
28
  breadcrumbs: { active: 'This Page' },
27
- helpLink: 'https://www.availity.com',
28
- helpAppName: undefined
29
+ help: { helpAppName: undefined, url: 'https://www.availity.com' },
29
30
  },
30
31
  };
31
32
 
@@ -35,8 +36,7 @@ export const _PageHeaderHelpDemo: StoryObj<typeof PageHeader> = {
35
36
  args: {
36
37
  headerText: 'This text is a child of PageHeader',
37
38
  breadcrumbs: { active: 'This Page' },
38
- helpLink: 'https://www.availity.com',
39
- helpAppName: 'This App'
39
+ help: { helpAppName: 'This App', url: 'https://www.availity.com' },
40
40
  },
41
41
  };
42
42
 
@@ -60,3 +60,40 @@ export const _PageHeaderDoubleButtons: StoryObj<typeof PageHeader> = {
60
60
  ],
61
61
  },
62
62
  };
63
+
64
+ const queryClient = new QueryClient();
65
+
66
+ export const _PageHeaderLogo: StoryObj<typeof PageHeader> = {
67
+ render: (args: PageHeaderProps) => (
68
+ <QueryClientProvider client={queryClient}>
69
+ <Spaces spaceIds={['11', '22', '33']}>
70
+ <PageHeader {...args} />
71
+ </Spaces>
72
+ </QueryClientProvider>
73
+ ),
74
+ args: {
75
+ headerText: 'App Name',
76
+ breadcrumbs: { active: 'This Page' },
77
+ logo: {
78
+ spaceId: '11',
79
+ },
80
+ },
81
+ };
82
+
83
+ export const _PageHeaderLogoAndHelp: StoryObj<typeof PageHeader> = {
84
+ render: (args: PageHeaderProps) => (
85
+ <QueryClientProvider client={queryClient}>
86
+ <Spaces spaceIds={['11', '22', '33']}>
87
+ <PageHeader {...args} />
88
+ </Spaces>
89
+ </QueryClientProvider>
90
+ ),
91
+ args: {
92
+ headerText: 'App Name',
93
+ breadcrumbs: { active: 'This Page' },
94
+ help: { helpAppName: 'This App', url: 'https://www.availity.com' },
95
+ logo: {
96
+ spaceId: '11',
97
+ },
98
+ },
99
+ };
package/src/lib/PageHeader.test.tsx CHANGED
@@ -1,7 +1,29 @@
1
- import { render } from '@testing-library/react';
1
+ import { render, waitForElementToBeRemoved } from '@testing-library/react';
2
+ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
3
+ import { Spaces } from '@availity/mui-spaces';
4
+ // eslint-disable-next-line @nx/enforce-module-boundaries
5
+ import { server } from '@availity/mock/src/lib/server';
2
6
  import { PageHeader } from './PageHeader';
3
7
 
8
+ const mockImage = jest.fn();
9
+
10
+ jest.mock('react-image', () => ({
11
+ ...(jest.requireActual('react-image') as any),
12
+ Img: (props: any) => mockImage(props),
13
+ }));
14
+
4
15
  describe('PageHeader', () => {
16
+ beforeAll(() => {
17
+ // Start the interception.
18
+ server.listen();
19
+ });
20
+
21
+ afterEach(() => {
22
+ // Remove any handlers you may have added
23
+ // in individual tests (runtime handlers).
24
+ server.resetHandlers();
25
+ jest.restoreAllMocks();
26
+ });
5
27
  test('should render simple page header successfully', () => {
6
28
  const { getByText } = render(<PageHeader breadcrumbs={{ active: 'This page' }} headerText="This is the header" />);
7
29
  expect(getByText('This is the header')).toBeTruthy();
@@ -13,7 +35,7 @@ describe('PageHeader', () => {
13
35
  <PageHeader
14
36
  breadcrumbs={{ active: 'This page' }}
15
37
  headerText="This is the header"
16
- helpLink="https://www.availity.com"
38
+ help={{ url: 'https://www.availity.com' }}
17
39
  />
18
40
  );
19
41
  expect(getByText('This is the header')).toBeTruthy();
@@ -33,4 +55,20 @@ describe('PageHeader', () => {
33
55
  expect(getByText('This page')).toBeTruthy();
34
56
  expect(getByText('Button 1')).toBeTruthy();
35
57
  });
58
+
59
+ test('should render page header with a logo successfully', async () => {
60
+ const queryClient = new QueryClient();
61
+ const { getByText, container } = render(
62
+ <QueryClientProvider client={queryClient}>
63
+ <Spaces spaceIds={['11', '22', '33']}>
64
+ <PageHeader breadcrumbs={{ active: 'This page' }} headerText="This is the header" logo={{ spaceId: '11' }} />
65
+ </Spaces>
66
+ </QueryClientProvider>
67
+ );
68
+ expect(getByText('This is the header')).toBeTruthy();
69
+ expect(getByText('This page')).toBeTruthy();
70
+ await waitForElementToBeRemoved(container.getElementsByClassName('MuiSkeleton-root')[0]);
71
+ // Ensure the correct src was selected.
72
+ expect(mockImage.mock.calls[0][0].src).toEqual('/spaces/test_logo.png');
73
+ });
36
74
  });
package/src/lib/PageHeader.tsx CHANGED
@@ -5,14 +5,40 @@ import { Link } from '@availity/mui-link';
5
5
  import { Button, ButtonProps } from '@availity/mui-button';
6
6
  import { Feedback } from '@availity/mui-feedback';
7
7
  import { Box, Grid } from '@availity/mui-layout';
8
+ import { SpacesImage } from '@availity/mui-spaces';
9
+ import Skeleton from '@mui/material/Skeleton';
8
10
 
9
11
  export interface ButtonsProps extends Omit<ButtonProps, 'size' | 'height' | 'color'> {
10
12
  key: string;
11
13
  }
12
14
 
15
+ export type Help = {
16
+ /** The URL to the Help Demo */
17
+ url: string;
18
+ /** The name that displays in the help text. Should be used when the help is a demo video.
19
+ * @example "This App"
20
+ * @returns Need Help? Watch a demo for This App
21
+ */
22
+ helpAppName?: string;
23
+ };
24
+
25
+ type LogoSpaceId = {
26
+ /** The spaceId associated with the app. Required if payerId is not present. */
27
+ spaceId: string;
28
+ /** The payerId associated with the app. Required if spaceId is not present. */
29
+ payerId?: string;
30
+ };
31
+
32
+ type LogoPayerId = {
33
+ /** The spaceId associated with the app. Required if payerId is not present. */
34
+ spaceId?: string;
35
+ /** The payerId associated with the app. Required if spaceId is not present. */
36
+ payerId: string;
37
+ };
38
+
13
39
  export interface PageHeaderProps {
14
40
  /** Render breadcrumbs above the header */
15
- breadcrumbs: BreadcrumbsProps;
41
+ breadcrumbs?: BreadcrumbsProps;
16
42
  /** Renders buttons in the right side of the header */
17
43
  buttons?: ButtonsProps[];
18
44
  /** If true, the Feedback button displays
@@ -21,22 +47,39 @@ export interface PageHeaderProps {
21
47
  feedback?: boolean;
22
48
  /** The text that displays in the header */
23
49
  headerText: string;
24
- /** The name that displays in the help text. Should be used when the help is a demo video.
25
- * @example "This App"
26
- * @returns Need Help? Watch a demo for This App
27
- */
28
- helpAppName?: string;
29
- /** The URL to the Help Demo */
30
- helpLink?: string;
50
+ /** Help attributes */
51
+ help?: Help;
52
+ /** Logo attributes */
53
+ logo?: LogoSpaceId | LogoPayerId;
31
54
  }
32
55
 
56
+ const Logo = (props: LogoSpaceId | LogoPayerId) => {
57
+ if (props.spaceId)
58
+ return (
59
+ <SpacesImage
60
+ imageType="images.logo"
61
+ spaceId={props.spaceId}
62
+ Loader={({ id }) => <Skeleton id={id} height="60px" width="234px" />}
63
+ />
64
+ );
65
+ else if (props.payerId)
66
+ return (
67
+ <SpacesImage
68
+ imageType="images.logo"
69
+ payerId={props.payerId}
70
+ Loader={({ id }) => <Skeleton id={id} height="60px" width="234px" />}
71
+ />
72
+ );
73
+ else return null;
74
+ };
75
+
33
76
  export const PageHeader = ({
34
77
  breadcrumbs,
35
78
  buttons,
36
79
  feedback = false,
37
80
  headerText,
38
- helpAppName,
39
- helpLink,
81
+ logo,
82
+ help,
40
83
  }: PageHeaderProps): JSX.Element => {
41
84
  return (
42
85
  <Grid
@@ -48,22 +91,29 @@ export const PageHeader = ({
48
91
  paddingLeft={3}
49
92
  paddingRight={3}
50
93
  >
51
- {breadcrumbs || helpLink ? (
94
+ {breadcrumbs || logo || help ? (
52
95
  <Grid direction="row" container justifyContent="space-between" marginBottom={4}>
53
96
  {breadcrumbs && (
54
- <Grid>
97
+ <Grid marginRight={2}>
55
98
  <Breadcrumbs {...breadcrumbs} />
56
99
  </Grid>
57
100
  )}
58
- {helpLink && (
59
- <Grid marginLeft={2}>
60
- <Typography variant="body1">
61
- Need help?{' '}
62
- <Link href={helpLink} target="_blank" loadApp={false}>
63
- {helpAppName ? 'Watch a demo' : 'Learn More'}
64
- </Link>{' '}
65
- {helpAppName ? ` for ${helpAppName}` : null}
66
- </Typography>
101
+ {(logo || help) && (
102
+ <Grid>
103
+ {help && (
104
+ <Typography variant="body1">
105
+ Need help?{' '}
106
+ <Link href={help.url} target="_blank" loadApp={false}>
107
+ {help.helpAppName ? 'Watch a demo' : 'Learn More'}
108
+ </Link>{' '}
109
+ {help.helpAppName ? ` for ${help.helpAppName}` : null}
110
+ </Typography>
111
+ )}
112
+ {logo && (
113
+ <Grid container justifyContent="end">
114
+ <Logo {...logo} />
115
+ </Grid>
116
+ )}
67
117
  </Grid>
68
118
  )}
69
119
  </Grid>