@availity/mui-page-header 0.1.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.
- package/CHANGELOG.md +10 -0
- package/README.md +61 -0
- package/dist/index.d.ts +15 -0
- package/dist/index.js +106 -0
- package/dist/index.mjs +79 -0
- package/introduction.mdx +7 -0
- package/jest.config.js +7 -0
- package/package.json +59 -0
- package/project.json +42 -0
- package/src/index.ts +1 -0
- package/src/lib/PageHeader.stories.tsx +50 -0
- package/src/lib/PageHeader.test.tsx +36 -0
- package/src/lib/PageHeader.tsx +48 -0
- package/tsconfig.json +5 -0
- package/tsconfig.spec.json +10 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
|
|
4
|
+
|
|
5
|
+
## 0.1.0 (2023-09-06)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
* **mui-page-header:** add PageHeader package ([8401f4b](https://github.com/Availity/element/commit/8401f4ba1ca200824b0542d411ed9d0496bad6ae))
|
package/README.md
ADDED
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
# @availity/mui-page-header
|
|
2
|
+
|
|
3
|
+
> Availity MUI PageHeader component to be used with @availity/element design system.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@availity/mui-page-header)
|
|
6
|
+
[](https://www.npmjs.com/package/@availity/mui-page-header)
|
|
7
|
+
[](https://github.com/Availity/element/blob/main/packages/mui-page-header/package.json)
|
|
8
|
+
|
|
9
|
+
## Documentation
|
|
10
|
+
|
|
11
|
+
This package extends the MUI PageHeader component: [MUI PageHeader Docs](https://mui.com/components/page-header/)
|
|
12
|
+
|
|
13
|
+
Live demo and documentation in our [Storybook](https://availity.github.io/element/?path=/docs/components-page-header-introduction--docs)
|
|
14
|
+
|
|
15
|
+
Availity standards for design and usage can be found in the [Availity Design Guide](https://zeroheight.com/2e36e50c7)
|
|
16
|
+
|
|
17
|
+
## Installation
|
|
18
|
+
|
|
19
|
+
### Import Through @availity/element (Recommended)
|
|
20
|
+
|
|
21
|
+
#### NPM
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
npm install @availity/element
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
#### Yarn
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
yarn add @availity/element
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
### Direct Import
|
|
34
|
+
|
|
35
|
+
#### NPM
|
|
36
|
+
|
|
37
|
+
_This package has a few peer dependencies. Add `@mui/material` & `@emotion/react` to your project if not already installed._
|
|
38
|
+
|
|
39
|
+
```bash
|
|
40
|
+
npm install @availity/mui-page-header
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
#### Yarn
|
|
44
|
+
|
|
45
|
+
```bash
|
|
46
|
+
yarn add @availity/mui-page-header
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
### Usage
|
|
50
|
+
|
|
51
|
+
#### Import through @availity/element
|
|
52
|
+
|
|
53
|
+
```tsx
|
|
54
|
+
import { PageHeader } from '@availity/element';
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
#### Direct import
|
|
58
|
+
|
|
59
|
+
```tsx
|
|
60
|
+
import { PageHeader } from '@availity/mui-page-header';
|
|
61
|
+
```
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { BreadcrumbsProps } from '@availity/mui-breadcrumbs';
|
|
2
|
+
import { ButtonProps } from '@availity/mui-button';
|
|
3
|
+
|
|
4
|
+
interface ButtonsProps extends Omit<ButtonProps, 'size' | 'height'> {
|
|
5
|
+
key: string;
|
|
6
|
+
}
|
|
7
|
+
interface PageHeaderProps {
|
|
8
|
+
breadcrumbs: BreadcrumbsProps;
|
|
9
|
+
buttons?: [ButtonsProps?, ButtonsProps?];
|
|
10
|
+
headerText: string;
|
|
11
|
+
helpLink?: string;
|
|
12
|
+
}
|
|
13
|
+
declare const PageHeader: ({ breadcrumbs, buttons, headerText, helpLink }: PageHeaderProps) => JSX.Element;
|
|
14
|
+
|
|
15
|
+
export { ButtonsProps, PageHeader, PageHeaderProps };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/index.ts
|
|
21
|
+
var src_exports = {};
|
|
22
|
+
__export(src_exports, {
|
|
23
|
+
PageHeader: () => PageHeader
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(src_exports);
|
|
26
|
+
|
|
27
|
+
// src/lib/PageHeader.tsx
|
|
28
|
+
var import_material = require("@mui/material");
|
|
29
|
+
var import_mui_divider = require("@availity/mui-divider");
|
|
30
|
+
var import_mui_typography = require("@availity/mui-typography");
|
|
31
|
+
var import_mui_breadcrumbs = require("@availity/mui-breadcrumbs");
|
|
32
|
+
var import_mui_link = require("@availity/mui-link");
|
|
33
|
+
var import_mui_button = require("@availity/mui-button");
|
|
34
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
35
|
+
var PageHeader = ({ breadcrumbs, buttons, headerText, helpLink }) => {
|
|
36
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Grid, {
|
|
37
|
+
component: import_material.Container,
|
|
38
|
+
container: true,
|
|
39
|
+
direction: "column",
|
|
40
|
+
children: [
|
|
41
|
+
breadcrumbs || helpLink ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Grid, {
|
|
42
|
+
direction: "row",
|
|
43
|
+
item: true,
|
|
44
|
+
container: true,
|
|
45
|
+
justifyContent: "space-between",
|
|
46
|
+
marginBottom: 4,
|
|
47
|
+
children: [
|
|
48
|
+
breadcrumbs && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Grid, {
|
|
49
|
+
item: true,
|
|
50
|
+
component: import_mui_breadcrumbs.Breadcrumbs,
|
|
51
|
+
...breadcrumbs
|
|
52
|
+
}),
|
|
53
|
+
helpLink && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Grid, {
|
|
54
|
+
item: true,
|
|
55
|
+
marginLeft: 2,
|
|
56
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_mui_typography.Typography, {
|
|
57
|
+
variant: "body1",
|
|
58
|
+
children: [
|
|
59
|
+
"Need help? ",
|
|
60
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_link.Link, {
|
|
61
|
+
href: helpLink,
|
|
62
|
+
target: "_blank",
|
|
63
|
+
children: "Watch a demo"
|
|
64
|
+
})
|
|
65
|
+
]
|
|
66
|
+
})
|
|
67
|
+
})
|
|
68
|
+
]
|
|
69
|
+
}) : null,
|
|
70
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Grid, {
|
|
71
|
+
direction: "row",
|
|
72
|
+
item: true,
|
|
73
|
+
container: true,
|
|
74
|
+
marginBottom: 2,
|
|
75
|
+
alignItems: "center",
|
|
76
|
+
justifyContent: "space-between",
|
|
77
|
+
children: [
|
|
78
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Grid, {
|
|
79
|
+
item: true,
|
|
80
|
+
component: import_mui_typography.Typography,
|
|
81
|
+
variant: "h1",
|
|
82
|
+
children: headerText
|
|
83
|
+
}),
|
|
84
|
+
buttons && buttons.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Grid, {
|
|
85
|
+
item: true,
|
|
86
|
+
container: true,
|
|
87
|
+
width: "auto",
|
|
88
|
+
children: buttons == null ? void 0 : buttons.map((buttonProps) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Grid, {
|
|
89
|
+
item: true,
|
|
90
|
+
marginLeft: 2,
|
|
91
|
+
component: import_mui_button.Button,
|
|
92
|
+
...buttonProps,
|
|
93
|
+
size: "large",
|
|
94
|
+
height: "100%"
|
|
95
|
+
}))
|
|
96
|
+
})
|
|
97
|
+
]
|
|
98
|
+
}),
|
|
99
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_divider.Divider, {})
|
|
100
|
+
]
|
|
101
|
+
});
|
|
102
|
+
};
|
|
103
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
104
|
+
0 && (module.exports = {
|
|
105
|
+
PageHeader
|
|
106
|
+
});
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
// src/lib/PageHeader.tsx
|
|
2
|
+
import { Container, Grid } from "@mui/material";
|
|
3
|
+
import { Divider } from "@availity/mui-divider";
|
|
4
|
+
import { Typography } from "@availity/mui-typography";
|
|
5
|
+
import { Breadcrumbs } from "@availity/mui-breadcrumbs";
|
|
6
|
+
import { Link } from "@availity/mui-link";
|
|
7
|
+
import { Button } from "@availity/mui-button";
|
|
8
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
9
|
+
var PageHeader = ({ breadcrumbs, buttons, headerText, helpLink }) => {
|
|
10
|
+
return /* @__PURE__ */ jsxs(Grid, {
|
|
11
|
+
component: Container,
|
|
12
|
+
container: true,
|
|
13
|
+
direction: "column",
|
|
14
|
+
children: [
|
|
15
|
+
breadcrumbs || helpLink ? /* @__PURE__ */ jsxs(Grid, {
|
|
16
|
+
direction: "row",
|
|
17
|
+
item: true,
|
|
18
|
+
container: true,
|
|
19
|
+
justifyContent: "space-between",
|
|
20
|
+
marginBottom: 4,
|
|
21
|
+
children: [
|
|
22
|
+
breadcrumbs && /* @__PURE__ */ jsx(Grid, {
|
|
23
|
+
item: true,
|
|
24
|
+
component: Breadcrumbs,
|
|
25
|
+
...breadcrumbs
|
|
26
|
+
}),
|
|
27
|
+
helpLink && /* @__PURE__ */ jsx(Grid, {
|
|
28
|
+
item: true,
|
|
29
|
+
marginLeft: 2,
|
|
30
|
+
children: /* @__PURE__ */ jsxs(Typography, {
|
|
31
|
+
variant: "body1",
|
|
32
|
+
children: [
|
|
33
|
+
"Need help? ",
|
|
34
|
+
/* @__PURE__ */ jsx(Link, {
|
|
35
|
+
href: helpLink,
|
|
36
|
+
target: "_blank",
|
|
37
|
+
children: "Watch a demo"
|
|
38
|
+
})
|
|
39
|
+
]
|
|
40
|
+
})
|
|
41
|
+
})
|
|
42
|
+
]
|
|
43
|
+
}) : null,
|
|
44
|
+
/* @__PURE__ */ jsxs(Grid, {
|
|
45
|
+
direction: "row",
|
|
46
|
+
item: true,
|
|
47
|
+
container: true,
|
|
48
|
+
marginBottom: 2,
|
|
49
|
+
alignItems: "center",
|
|
50
|
+
justifyContent: "space-between",
|
|
51
|
+
children: [
|
|
52
|
+
/* @__PURE__ */ jsx(Grid, {
|
|
53
|
+
item: true,
|
|
54
|
+
component: Typography,
|
|
55
|
+
variant: "h1",
|
|
56
|
+
children: headerText
|
|
57
|
+
}),
|
|
58
|
+
buttons && buttons.length > 0 && /* @__PURE__ */ jsx(Grid, {
|
|
59
|
+
item: true,
|
|
60
|
+
container: true,
|
|
61
|
+
width: "auto",
|
|
62
|
+
children: buttons == null ? void 0 : buttons.map((buttonProps) => /* @__PURE__ */ jsx(Grid, {
|
|
63
|
+
item: true,
|
|
64
|
+
marginLeft: 2,
|
|
65
|
+
component: Button,
|
|
66
|
+
...buttonProps,
|
|
67
|
+
size: "large",
|
|
68
|
+
height: "100%"
|
|
69
|
+
}))
|
|
70
|
+
})
|
|
71
|
+
]
|
|
72
|
+
}),
|
|
73
|
+
/* @__PURE__ */ jsx(Divider, {})
|
|
74
|
+
]
|
|
75
|
+
});
|
|
76
|
+
};
|
|
77
|
+
export {
|
|
78
|
+
PageHeader
|
|
79
|
+
};
|
package/introduction.mdx
ADDED
package/jest.config.js
ADDED
package/package.json
ADDED
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@availity/mui-page-header",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Availity MUI PageHeader Component - part of the @availity/element design system",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"react",
|
|
7
|
+
"typescript",
|
|
8
|
+
"availity",
|
|
9
|
+
"mui"
|
|
10
|
+
],
|
|
11
|
+
"homepage": "https://availity.github.io/element/?path=/docs/components-page-header-introduction--docs",
|
|
12
|
+
"bugs": {
|
|
13
|
+
"url": "https://github.com/Availity/element/issues"
|
|
14
|
+
},
|
|
15
|
+
"repository": {
|
|
16
|
+
"type": "git",
|
|
17
|
+
"url": "https://github.com/Availity/element.git",
|
|
18
|
+
"directory": "packages/page-header"
|
|
19
|
+
},
|
|
20
|
+
"license": "MIT",
|
|
21
|
+
"author": "Availity Developers <AVOSS@availity.com>",
|
|
22
|
+
"browser": "./dist/index.js",
|
|
23
|
+
"main": "./dist/index.js",
|
|
24
|
+
"module": "./dist/index.mjs",
|
|
25
|
+
"types": "./dist/index.d.ts",
|
|
26
|
+
"scripts": {
|
|
27
|
+
"build": "tsup src/index.ts --format esm,cjs --dts",
|
|
28
|
+
"dev": "tsup src/index.ts --format esm,cjs --watch --dts",
|
|
29
|
+
"clean": "rm -rf dist",
|
|
30
|
+
"clean:nm": "rm -rf node_modules",
|
|
31
|
+
"bundlesize": "bundlesize",
|
|
32
|
+
"publish": "yarn npm publish --tolerate-republish --access public",
|
|
33
|
+
"publish:canary": "yarn npm publish --access public --tag canary"
|
|
34
|
+
},
|
|
35
|
+
"devDependencies": {
|
|
36
|
+
"@availity/mui-breadcrumbs": "^0.1.3",
|
|
37
|
+
"@availity/mui-button": "^0.3.1",
|
|
38
|
+
"@availity/mui-divider": "^0.3.1",
|
|
39
|
+
"@availity/mui-link": "^0.1.1",
|
|
40
|
+
"@availity/mui-typography": "^0.1.0",
|
|
41
|
+
"@mui/material": "^5.11.9",
|
|
42
|
+
"react": "18.2.0",
|
|
43
|
+
"react-dom": "18.2.0",
|
|
44
|
+
"tsup": "^5.12.7",
|
|
45
|
+
"typescript": "^4.6.4"
|
|
46
|
+
},
|
|
47
|
+
"peerDependencies": {
|
|
48
|
+
"@availity/mui-breadcrumbs": "^0.1.3",
|
|
49
|
+
"@availity/mui-button": "^0.3.1",
|
|
50
|
+
"@availity/mui-divider": "^0.3.1",
|
|
51
|
+
"@availity/mui-link": "^0.1.1",
|
|
52
|
+
"@availity/mui-typography": "^0.1.0",
|
|
53
|
+
"@mui/material": "^5.11.9",
|
|
54
|
+
"react": ">=16.3.0"
|
|
55
|
+
},
|
|
56
|
+
"publishConfig": {
|
|
57
|
+
"access": "public"
|
|
58
|
+
}
|
|
59
|
+
}
|
package/project.json
ADDED
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "mui-page-header",
|
|
3
|
+
"$schema": "../../node_modules/nx/schemas/project-schema.json",
|
|
4
|
+
"sourceRoot": "packages/page-header/src",
|
|
5
|
+
"projectType": "library",
|
|
6
|
+
"tags": [],
|
|
7
|
+
"targets": {
|
|
8
|
+
"lint": {
|
|
9
|
+
"executor": "@nrwl/linter:eslint",
|
|
10
|
+
"options": {
|
|
11
|
+
"eslintConfig": ".eslintrc.json",
|
|
12
|
+
"lintFilePatterns": ["packages/page-header/**/*.{js,ts}"],
|
|
13
|
+
"silent": false,
|
|
14
|
+
"fix": false,
|
|
15
|
+
"cache": true,
|
|
16
|
+
"cacheLocation": "./node_modules/.cache/page-header/.eslintcache",
|
|
17
|
+
"maxWarnings": -1,
|
|
18
|
+
"quiet": false,
|
|
19
|
+
"noEslintrc": false,
|
|
20
|
+
"hasTypeAwareRules": true,
|
|
21
|
+
"cacheStrategy": "metadata"
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
"test": {
|
|
25
|
+
"executor": "@nrwl/jest:jest",
|
|
26
|
+
"outputs": ["coverage/page-header"],
|
|
27
|
+
"options": {
|
|
28
|
+
"jestConfig": "packages/page-header/jest.config.js",
|
|
29
|
+
"passWithNoTests": true
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
"version": {
|
|
33
|
+
"executor": "@jscutlery/semver:version",
|
|
34
|
+
"options": {
|
|
35
|
+
"preset": "conventional",
|
|
36
|
+
"commitMessageFormat": "chore(${projectName}): release version ${version} [skip ci]",
|
|
37
|
+
"tagPrefix": "@availity/${projectName}@"
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
"trackDeps": true
|
|
42
|
+
}
|
package/src/index.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './lib/PageHeader';
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
// Each exported component in the package should have its own stories file
|
|
2
|
+
|
|
3
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
4
|
+
import { PageHeader, PageHeaderProps } from './PageHeader';
|
|
5
|
+
|
|
6
|
+
const meta: Meta<typeof PageHeader> = {
|
|
7
|
+
title: 'Components/PageHeader/PageHeader',
|
|
8
|
+
component: PageHeader,
|
|
9
|
+
tags: ['autodocs'],
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
export default meta;
|
|
13
|
+
|
|
14
|
+
export const _PageHeader: StoryObj<typeof PageHeader> = {
|
|
15
|
+
render: (args: PageHeaderProps) => <PageHeader {...args} />,
|
|
16
|
+
args: {
|
|
17
|
+
headerText: 'This text is a child of PageHeader',
|
|
18
|
+
breadcrumbs: { active: 'This Page' },
|
|
19
|
+
},
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
export const _PageHeaderHelp: StoryObj<typeof PageHeader> = {
|
|
23
|
+
render: (args: PageHeaderProps) => <PageHeader {...args} />,
|
|
24
|
+
args: {
|
|
25
|
+
headerText: 'This text is a child of PageHeader',
|
|
26
|
+
breadcrumbs: { active: 'This Page' },
|
|
27
|
+
helpLink: 'https://www.availity.com',
|
|
28
|
+
},
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
export const _PageHeaderSingleButton: StoryObj<typeof PageHeader> = {
|
|
32
|
+
render: (args: PageHeaderProps) => <PageHeader {...args} />,
|
|
33
|
+
args: {
|
|
34
|
+
headerText: 'This text is a child of PageHeader',
|
|
35
|
+
breadcrumbs: { active: 'This Page' },
|
|
36
|
+
buttons: [{ children: 'Button 1', key: 'button1' }],
|
|
37
|
+
},
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
export const _PageHeaderDoubleButtons: StoryObj<typeof PageHeader> = {
|
|
41
|
+
render: (args: PageHeaderProps) => <PageHeader {...args} />,
|
|
42
|
+
args: {
|
|
43
|
+
headerText: 'This text is a child of PageHeader',
|
|
44
|
+
breadcrumbs: { active: 'This Page' },
|
|
45
|
+
buttons: [
|
|
46
|
+
{ children: 'Button 1', key: 'button1' },
|
|
47
|
+
{ children: 'Button 2', key: 'button2' },
|
|
48
|
+
],
|
|
49
|
+
},
|
|
50
|
+
};
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { render } from '@testing-library/react';
|
|
2
|
+
import { PageHeader } from './PageHeader';
|
|
3
|
+
|
|
4
|
+
describe('PageHeader', () => {
|
|
5
|
+
test('should render simple page header successfully', () => {
|
|
6
|
+
const { getByText } = render(<PageHeader breadcrumbs={{ active: 'This page' }} headerText="This is the header" />);
|
|
7
|
+
expect(getByText('This is the header')).toBeTruthy();
|
|
8
|
+
expect(getByText('This page')).toBeTruthy();
|
|
9
|
+
});
|
|
10
|
+
|
|
11
|
+
test('should render page header with help successfully', () => {
|
|
12
|
+
const { getByText } = render(
|
|
13
|
+
<PageHeader
|
|
14
|
+
breadcrumbs={{ active: 'This page' }}
|
|
15
|
+
headerText="This is the header"
|
|
16
|
+
helpLink="https://www.availity.com"
|
|
17
|
+
/>
|
|
18
|
+
);
|
|
19
|
+
expect(getByText('This is the header')).toBeTruthy();
|
|
20
|
+
expect(getByText('This page')).toBeTruthy();
|
|
21
|
+
expect(getByText('Need help?').getElementsByTagName('a')[0].getAttribute('href')).toBe('https://www.availity.com');
|
|
22
|
+
});
|
|
23
|
+
|
|
24
|
+
test('should render page header with a button successfully', () => {
|
|
25
|
+
const { getByText } = render(
|
|
26
|
+
<PageHeader
|
|
27
|
+
breadcrumbs={{ active: 'This page' }}
|
|
28
|
+
headerText="This is the header"
|
|
29
|
+
buttons={[{ children: 'Button 1', key: 'button1' }]}
|
|
30
|
+
/>
|
|
31
|
+
);
|
|
32
|
+
expect(getByText('This is the header')).toBeTruthy();
|
|
33
|
+
expect(getByText('This page')).toBeTruthy();
|
|
34
|
+
expect(getByText('Button 1')).toBeTruthy();
|
|
35
|
+
});
|
|
36
|
+
});
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { Container, Grid } from '@mui/material';
|
|
2
|
+
import { Divider } from '@availity/mui-divider';
|
|
3
|
+
import { Typography } from '@availity/mui-typography';
|
|
4
|
+
import { Breadcrumbs, BreadcrumbsProps } from '@availity/mui-breadcrumbs';
|
|
5
|
+
import { Link } from '@availity/mui-link';
|
|
6
|
+
import { Button, ButtonProps } from '@availity/mui-button';
|
|
7
|
+
|
|
8
|
+
export interface ButtonsProps extends Omit<ButtonProps, 'size' | 'height'> {
|
|
9
|
+
key: string;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export interface PageHeaderProps {
|
|
13
|
+
breadcrumbs: BreadcrumbsProps;
|
|
14
|
+
buttons?: [ButtonsProps?, ButtonsProps?];
|
|
15
|
+
headerText: string;
|
|
16
|
+
helpLink?: string;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
export const PageHeader = ({ breadcrumbs, buttons, headerText, helpLink }: PageHeaderProps): JSX.Element => {
|
|
20
|
+
return (
|
|
21
|
+
<Grid component={Container} container direction="column">
|
|
22
|
+
{breadcrumbs || helpLink ? (
|
|
23
|
+
<Grid direction="row" item container justifyContent="space-between" marginBottom={4}>
|
|
24
|
+
{breadcrumbs && <Grid item component={Breadcrumbs} {...breadcrumbs} />}
|
|
25
|
+
{helpLink && (
|
|
26
|
+
<Grid item marginLeft={2}>
|
|
27
|
+
<Typography variant="body1">
|
|
28
|
+
Need help? <Link href={helpLink} target="_blank" children="Watch a demo" />
|
|
29
|
+
</Typography>
|
|
30
|
+
</Grid>
|
|
31
|
+
)}
|
|
32
|
+
</Grid>
|
|
33
|
+
) : null}
|
|
34
|
+
|
|
35
|
+
<Grid direction="row" item container marginBottom={2} alignItems="center" justifyContent="space-between">
|
|
36
|
+
<Grid item component={Typography} variant="h1" children={headerText} />
|
|
37
|
+
{buttons && buttons.length > 0 && (
|
|
38
|
+
<Grid item container width="auto">
|
|
39
|
+
{buttons?.map((buttonProps) => (
|
|
40
|
+
<Grid item marginLeft={2} component={Button} {...buttonProps} size="large" height="100%" />
|
|
41
|
+
))}
|
|
42
|
+
</Grid>
|
|
43
|
+
)}
|
|
44
|
+
</Grid>
|
|
45
|
+
<Divider />
|
|
46
|
+
</Grid>
|
|
47
|
+
);
|
|
48
|
+
};
|
package/tsconfig.json
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
{
|
|
2
|
+
"extends": "./tsconfig.json",
|
|
3
|
+
"compilerOptions": {
|
|
4
|
+
"outDir": "../../dist/out-tsc",
|
|
5
|
+
"module": "commonjs",
|
|
6
|
+
"types": ["jest", "node", "@testing-library/jest-dom"],
|
|
7
|
+
"allowJs": true
|
|
8
|
+
},
|
|
9
|
+
"include": ["**/*.test.js", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"]
|
|
10
|
+
}
|