@availity/page-header 0.0.0-t325224b2 → 1.0.0

package/README.md

@@ -2,59 +2,24 @@
 
 > The standard page header for Availity Portal Applications
 
+[![Version](https://img.shields.io/npm/v/@availity/page-header.svg?style=for-the-badge)](https://www.npmjs.com/package/@availity/page-header)
+[![NPM Downloads](https://img.shields.io/npm/dt/@availity/page-header.svg?style=for-the-badge)](https://www.npmjs.com/package/@availity/page-header)
+[![Dependecy Status](https://img.shields.io/librariesio/release/npm/@availity/page-header?style=for-the-badge)](https://github.com/Availity/availity-react/blob/master/packages/page-header/package.json)
+
 ## Installation
 
+### NPM
+
 ```bash
-npm install @availity/page-header --save
+npm install @availity/page-header
 ```
 
-### Usage
+### Yarn
 
-```javascript
-import React from 'react';
-import PageHeader from '@availity/page-header';
-// ... 
-<PageHeader appName="Applicaiton Name" />
-// ...
+```bash
+yarn add @availity/page-header
 ```
 
-#### PageHeader (Default export)
-The standard Availity application header which appears at the top of the page. It can include an app icon, payer logo, and/or the feedback loop.
-
-##### Props
-
-- **`children`**: Node. Optional. This value will appear at the `h1` of the page. Overrides the `appName` to allow for custom elements (such as a "beta" tag) Default: value of `appName` prop
-- **`appName`**: String. Required. Name of the application
-- **`spaceName`**: String. Optional. Payer Space Name of the space in which this page is under.
-- **`spaceId`**: String. Optional. Payer Space ID of the space in which this page is under.
-- **`appAbbr`**: String. Optional. If provided and payerId is not provided the app icon will appear.
-- **`iconColor`**: String, optional. Potential values: `"black"`, `"blue"`, `"green"`, `"orange"`. Only used if the app icon should appear. Default value: `"black"`
-- **`branded`**: String. Optional. Triggers the app icon's "branded" styles. Only used if the app icon should appear.
-- **`payerId`**: String. Optional. The ID of the payer if the application is payer specific. If provided the payer logo will appear and not the app icon.
-- **`feedback`**: Boolean. Optional. If `true` the feedback loop button will appear. Default: `false`.
-- **`crumbs`**: Array of Objects contains `name` (String) and `url` (string) properties. Optional. The ancestor pages which gets passed to the `Breadcrumbs` component.
-- **`component`**: Component. Optional. Allow rendering of an optional component in the top right of the header.
-
-##### PageHeader Usage
-
-```javascript
-import React from 'react';
-import PageHeader from '@availity/page-header';
-// ... 
-<PageHeader
-  appName="Payer Space"
-  appAbbr="PS"
-  iconColor="blue"
-  feedback
-/>
-
-<PageHeader
-  appName="Payer Space"
-  payerId="PayerID"
-  spaceName="Payer's Space"
-  spaceId="73162546201441126239486200007187"
->
-  Payer Space<sup>beta</sup>
-</PageHeader>
-// ...
-```
+## Documentation
+
+Check out more documentation at [availity.github.io](https://availity.github.io/availity-react/components/page-header)

package/index.d.ts

@@ -1,3 +1,2 @@
-import PageHeader from './PageHeader';
-
-export default PageHeader;
+export { default } from './types/PageHeader';
+export * from './types/PageHeader';

package/index.js

@@ -1,3 +1 @@
-import PageHeader from './PageHeader';
-
-export default PageHeader;
+export { default } from './src/PageHeader';

package/jest.config.js

@@ -0,0 +1,7 @@
+const global = require('../../jest/global-config');
+
+module.exports = {
+  ...global,
+  displayName: 'page-header',
+  coverageDirectory: '../../coverage/page-header',
+};

package/package.json

@@ -1,39 +1,58 @@
 {
   "name": "@availity/page-header",
-  "version": "0.0.0-t325224b2",
-  "author": "Evan Sharp <evan.sharp@availity.com>",
+  "version": "1.0.0",
   "description": "The standard page header for Availity Portal Applications",
-  "main": "index.js",
   "keywords": [
     "react",
-    "availity"
+    "availity",
+    "page",
+    "header"
   ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/Availity/availity-react.git"
-  },
+  "homepage": "https://availity.github.io/availity-react/components/page-header",
   "bugs": {
     "url": "https://github.com/Availity/availity-react/issues"
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Availity/availity-react.git",
+    "directory": "packages/page-header"
+  },
   "license": "MIT",
-  "publishConfig": {
-    "access": "public"
+  "author": "Evan Sharp <evan.sharp@availity.com>",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "scripts": {
+    "publish": "yarn npm publish --tolerate-republish --access public",
+    "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "dependencies": {
-    "@availity/app-icon": "^0.0.0-t325224b2",
-    "@availity/breadcrumbs": "^0.0.0-t325224b2",
-    "@availity/feedback": "^0.0.0-t325224b2",
-    "@availity/payer-logo": "^0.0.0-t325224b2",
-    "@availity/training-link": "^0.0.0-t325224b2",
-    "prop-types": "^15.5.8"
+    "@availity/app-icon": "0.1.0",
+    "@availity/breadcrumbs": "1.0.0",
+    "@availity/feedback": "1.0.0",
+    "@availity/payer-logo": "1.0.0",
+    "classnames": "^2.5.1",
+    "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "react": "^16.3.0",
-    "react-dom": "^16.3.0",
-    "react-testing-library": "^5.4.4"
+    "@availity/api-axios": "^9.0.0",
+    "@availity/spaces": "1.0.0",
+    "@availity/training-link": "0.1.0",
+    "axios": "^1.7.4",
+    "formik": "^2.4.6",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "yup": "^0.32.11"
   },
   "peerDependencies": {
-    "react": "^16.3.0"
+    "@availity/api-axios": "^8.0.0",
+    "@availity/spaces": "^8.0.0",
+    "axios": "^1.7.4",
+    "formik": "^2.0.1",
+    "react": ">=16.11.0",
+    "react-dom": ">=16.11.0",
+    "yup": "^0.32.0"
   },
-  "gitHead": "ca7f4108bea3ef671aada738d15a8628c495dd1d"
-}
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/project.json

@@ -0,0 +1,39 @@
+{
+  "name": "@availity/page-header",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "library",
+  "targets": {
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/page-header"],
+      "options": {
+        "jestConfig": "packages/page-header/jest.config.js"
+      }
+    },
+    "version": {
+      "executor": "@jscutlery/semver:version",
+      "options": {
+        "preset": "angular",
+        "commitMessageFormat": "chore({projectName}): release version ${version} [skip ci]",
+        "tagPrefix": "@availity/{projectName}@",
+        "baseBranch": "master",
+        "trackDeps": true
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "options": {
+        "eslintConfig": ".eslintrc.yaml",
+        "silent": false,
+        "fix": false,
+        "cache": true,
+        "cacheLocation": "./node_modules/.cache/page-header/.eslintcache",
+        "maxWarnings": -1,
+        "quiet": false,
+        "noEslintrc": false,
+        "hasTypeAwareRules": true,
+        "cacheStrategy": "metadata"
+      }
+    }
+  }
+}

package/src/PageHeader.js

@@ -0,0 +1,195 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Breadcrumbs from '@availity/breadcrumbs';
+import AppIcon from '@availity/app-icon';
+import Feedback from '@availity/feedback';
+import Spaces, { SpacesLogo, useSpaces, useSpacesContext } from '@availity/spaces';
+import '../styles.scss';
+
+const PageHeader = ({
+  payerId = null,
+  logo,
+  spaceName,
+  spaceId = null,
+  children,
+  appName,
+  appAbbr,
+  iconColor,
+  branded,
+  showCrumbs = true,
+  crumbs,
+  feedback: showFeedback,
+  feedbackProps,
+  titleProps: { className: titleClassName, ...restTitleProps } = {},
+  renderRightContent: RenderRightContent,
+  renderRightClassName = 'page-header-right',
+  component,
+  tag: Tag = 'div',
+  clientId,
+  iconSrc,
+  iconAlt,
+  homeUrl = '/public/apps/dashboard',
+  linkTag,
+  className,
+  ...props
+}) => {
+  const spaces = useSpaces(spaceId, payerId);
+
+  let firstSpaceForPayerID;
+  let firstSpaceForSpaceID;
+  if (!spaceId && payerId && spaces[0]) {
+    firstSpaceForPayerID = spaces[0];
+  } else {
+    firstSpaceForSpaceID = spaces[0];
+    firstSpaceForPayerID = spaces[1];
+  }
+  const { loading: spacesIsLoading } = useSpacesContext() || {};
+
+  const _space = firstSpaceForSpaceID || firstSpaceForPayerID;
+
+  let payerLogo = null;
+  if (payerId || logo) {
+    const logoAttrs = {
+      spaceId,
+      payerId,
+      className: 'd-inline-flex',
+      skeletonProps: {
+        width: 180,
+        height: '100%',
+      },
+    };
+    payerLogo =
+      firstSpaceForPayerID || (logo && firstSpaceForSpaceID) || spacesIsLoading ? (
+        <SpacesLogo {...logoAttrs} />
+      ) : (
+        <Spaces
+          spaceIds={spaceId ? [spaceId] : undefined}
+          payerIds={payerId ? [payerId] : undefined}
+          clientId={clientId}
+        >
+          <SpacesLogo {...logoAttrs} />
+        </Spaces>
+      );
+  }
+
+  const _spaceName = spaceName || (_space && _space.name);
+  if ((spaceId || _spaceName) && !crumbs) {
+    const url =
+      firstSpaceForSpaceID && firstSpaceForSpaceID.link && firstSpaceForSpaceID.link.url
+        ? firstSpaceForSpaceID.link.url
+        : `/web/spc/spaces/#/${spaceId}`;
+    crumbs = [{ name: _spaceName, url }];
+  }
+
+  const feedback = useMemo(() => <Feedback appName={appName} {...feedbackProps} />, [appName, feedbackProps]);
+
+  return (
+    <>
+      <div className="page-header-above">
+        {showCrumbs ? (
+          // eslint-disable-next-line react/jsx-no-useless-fragment
+          <>
+            {React.isValidElement(crumbs) ? (
+              crumbs
+            ) : (
+              <Breadcrumbs crumbs={crumbs} active={appName || children} homeUrl={homeUrl} linkTag={linkTag} />
+            )}
+          </>
+        ) : null}
+        {component}
+      </div>
+      <div className={classNames('page-header', className)} data-testid="page-header" {...props}>
+        <Tag
+          className={classNames('page-header-title', titleClassName)}
+          data-testid="page-header-title"
+          {...restTitleProps}
+        >
+          {!payerId && appAbbr && (
+            <AppIcon
+              data-testid="page-header-app-icon"
+              color={iconColor}
+              branded={branded}
+              title={appName}
+              src={iconSrc}
+              alt={iconAlt}
+              aria-hidden
+            >
+              {appAbbr}
+            </AppIcon>
+          )}
+          {children || <h1>{appName}</h1>}
+        </Tag>
+        {!RenderRightContent ? (
+          <div className="page-header-right">
+            {showFeedback && feedback}
+            {payerLogo}
+          </div>
+        ) : (
+          <RenderRightContent className={renderRightClassName} payerLogo={payerLogo} feedback={feedback} />
+        )}
+      </div>
+    </>
+  );
+};
+
+PageHeader.propTypes = {
+  /** Name of the application. */
+  appName: PropTypes.string.isRequired,
+  /** The name of the class. */
+  className: PropTypes.string,
+  /** Payer Space Name of the space in which this page is under. */
+  spaceName: PropTypes.string,
+  /** Payer Space ID of the space in which this page is under. */
+  spaceId: PropTypes.string,
+  /** If provided and payerId is not provided, the app icon will appear. */
+  appAbbr: PropTypes.string,
+  /** Potential values: "black", "blue", "green", "orange", "red". Only used if the app icon should appear. Default: "black". */
+  iconColor: PropTypes.string,
+  /** Triggers the app icon's "branded" styles. Only used if the app icon should appear. */
+  branded: PropTypes.bool,
+  /** The ID of the payer the application is for. If provided, the payer logo appears and not the app icon. */
+  payerId: PropTypes.string,
+  /** Allow rendering of an optional component in the top right of the header. */
+  component: PropTypes.element,
+  /** If true, the feedback loop button appears. */
+  feedback: PropTypes.bool,
+  /** See Feedback. Props to send to <Feedback /> component */
+  feedbackProps: PropTypes.shape({ ...Feedback.propTypes }),
+  /** Additional props passed to the page-header-title. */
+  titleProps: PropTypes.object,
+  /** This value appears at the h1 of the page. Overrides the appName to allow for custom elements (such as a "beta" tag). Default: ${appName}. */
+  children: PropTypes.node,
+  /** Custom link tag for the links. Default: <a> */
+  linkTag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  /** Flag whether or not to show the breadcrumbs. Default: true */
+  showCrumbs: PropTypes.bool,
+  /** Array of Objects containing name (String) and url (String) properties. The ancestor pages which get passed to the Breadcrumbs component. See Breadcrumbs */
+  crumbs: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.shape({
+        name: PropTypes.string,
+        url: PropTypes.string,
+      })
+    ),
+    PropTypes.node,
+  ]),
+  /** If true will fetch the payer logo using the spaceId or payerId. */
+  logo: PropTypes.bool,
+  /** The tag to render the page header as. Default: <h1>. */
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  /** Used to customize the contents of the right side of the page header where the feedback and payer logo get rendered. Accepts the rendered payerLogo and feedback as props */
+  renderRightContent: PropTypes.func,
+  /** Renders the name of the right side of the page header */
+  renderRightClassName: PropTypes.string,
+  /** Url for the Home route. Default: public/apps/dashboard. */
+  homeUrl: PropTypes.string,
+  /** Client ID to use in Spaces to fetch the payer's logo */
+  clientId: PropTypes.string,
+  /** Image source for <AppIcon /> to be used instead of appAbbr. */
+  iconSrc: PropTypes.string,
+  /** Required if iconSrc is used. Image alt property of <AppIcon /> */
+  iconAlt: PropTypes.string,
+};
+
+export default PageHeader;

package/styles.scss

@@ -0,0 +1,47 @@
+.page-header {
+  border-bottom: 1px solid #dadfdf;
+  margin: 40px 0 20px;
+  padding-bottom: 9px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  justify-content: space-between;
+}
+
+.page-header-right {
+  display: flex;
+  flex-wrap: wrap;
+  flex-shrink: 1;
+  align-items: flex-end;
+  margin: -.15rem;
+
+  img,
+  button, .btn,
+  a {
+    flex-grow: 0;
+    margin: .15rem;
+    max-width: 100%;
+  }
+}
+
+.page-header-title {
+  margin-bottom: 0;
+  align-items: center;
+  display: flex;
+
+  h1 {
+    margin-bottom: 0;
+  }
+
+  .app-icon {
+    margin-right: 0.5rem;
+  }
+}
+
+.page-header-above {
+  display: flex;
+  flex-wrap: wrap;
+  flex-shrink: 0;
+  align-items: flex-start;
+  justify-content: space-between;
+}

package/tsconfig.json

@@ -1,27 +1,5 @@
 {
-    "compilerOptions": {
-      "outDir": "build/lib",
-      "module": "commonjs",
-      "target": "es5",
-      "lib": ["es5", "es6", "es7", "es2017", "dom"],
-      "sourceMap": true,
-      "allowJs": false,
-      "jsx": "react",
-      "moduleResolution": "node",
-      "rootDirs": ["./"],
-      "baseUrl": "",
-      "forceConsistentCasingInFileNames": true,
-      "noImplicitReturns": true,
-      "noImplicitThis": true,
-      "noImplicitAny": true,
-      "strictNullChecks": true,
-      "suppressImplicitAnyIndexErrors": true,
-      "noUnusedLocals": true,
-      "declaration": true,
-      "allowSyntheticDefaultImports": true,
-      "experimentalDecorators": true,
-      "emitDecoratorMetadata": true
-    },
-    "include": ["**/*"],
-    "exclude": ["node_modules", "build", "scripts"]
-  }
+  "extends": "../../tsconfig.json",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
+}

package/tsconfig.spec.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node", "@testing-library/jest-dom"],
+    "allowJs": true
+  },
+  "include": ["**/*.test.js", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"]
+}

package/types/PageHeader.d.ts

@@ -0,0 +1,36 @@
+type CrumbType = {
+  name?: string;
+  url?: string;
+};
+
+export interface RightContentProps extends React.HTMLAttributes<HTMLElement> {
+  payerLogo?: React.ReactNode;
+  feedback?: React.ReactNode;
+}
+
+export interface PageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  appName: string;
+  spaceName?: string;
+  spaceId?: string;
+  appAbbr?: string;
+  iconColor?: string;
+  branded?: boolean;
+  payerId?: string;
+  component?: React.ReactNode;
+  feedback?: boolean;
+  feedbackProps?: any;
+  logo?: boolean;
+  linkTag?: React.ComponentType<React.HTMLAttributes<HTMLAnchorElement>> | string;
+  titleProps?: React.HTMLAttributes<HTMLDivElement>;
+  renderRightContent?: React.FC<RightContentProps>;
+  crumbs?: CrumbType[] | React.ReactNode;
+  iconSrc?: string;
+  iconAlt?: string;
+  clientId?: string;
+  homeUrl?: string;
+  showCrumbs?: boolean;
+}
+
+declare const PageHeader: React.FC<PageHeaderProps>;
+
+export default PageHeader;

package/LICENSE

@@ -1,20 +0,0 @@
-Copyright (c) 2017-present Availity, LLC
-
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of this software and associated documentation files (the
-"Software"), to deal in the Software without restriction, including
-without limitation the rights to use, copy, modify, merge, publish,
-distribute, sublicense, and/or sell copies of the Software, and to
-permit persons to whom the Software is furnished to do so, subject to
-the following conditions:
-
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/PageHeader.d.ts

@@ -1,22 +0,0 @@
-type CrumbType = {
-    name?: string;
-    url?: string;
-};
-
-export interface PageHeaderProps {
-    appName: string;
-    spaceName?: string;
-    spaceId?: string;
-    appAbbr?: string;
-    iconColor?: string;
-    branded?: boolean;
-    payerId?: string;
-    component?: React.ReactType;
-    feedback?: boolean;
-    children?: Node;
-    crumbs?: Array<CrumbType>;
-}
-
-declare const PageHeader: React.FunctionComponent<PageHeaderProps>;
-
-export default PageHeader;

package/PageHeader.js

@@ -1,79 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Breadcrumbs from '@availity/breadcrumbs';
-import AppIcon from '@availity/app-icon';
-import Feedback from '@availity/feedback';
-import PayerLogo from '@availity/payer-logo';
-
-const PageHeader = ({
-  payerId,
-  spaceName,
-  spaceId,
-  children,
-  appName,
-  appAbbr,
-  iconColor,
-  branded,
-  crumbs: ogCrumbs,
-  feedback,
-  component,
-  ...props
-}) => {
-  let crumbs = ogCrumbs;
-  if (spaceId || spaceName) {
-    crumbs = [
-      { name: spaceName, url: spaceId && `/web/spaces/spaces/#/${spaceId}` },
-    ];
-  }
-  return (
-    <React.Fragment>
-      <div className="d-flex align-items-start">
-        <Breadcrumbs crumbs={crumbs} active={appName || children} /> {component}
-      </div>
-      <h1 className="h4 page-header page-header-brand" {...props}>
-        <div className="page-header-title">
-          {!payerId && appAbbr && (
-            <AppIcon color={iconColor} branded={branded} title={appName}>
-              {appAbbr}
-            </AppIcon>
-          )}{' '}
-          {children || appName}
-        </div>
-        {!payerId && feedback && (
-          <Feedback
-            appName={appName}
-            className="float-md-right d-inline-block"
-          />
-        )}
-        {payerId && (
-          <PayerLogo
-            spaceId={spaceId}
-            payerId={payerId}
-            className="float-md-right d-inline-block"
-          />
-        )}
-      </h1>
-    </React.Fragment>
-  );
-};
-
-PageHeader.propTypes = {
-  appName: PropTypes.string.isRequired,
-  spaceName: PropTypes.string,
-  spaceId: PropTypes.string,
-  appAbbr: PropTypes.string,
-  iconColor: PropTypes.string,
-  branded: PropTypes.bool,
-  payerId: PropTypes.string,
-  component: PropTypes.element,
-  feedback: PropTypes.bool,
-  children: PropTypes.node,
-  crumbs: PropTypes.arrayOf(
-    PropTypes.shape({
-      name: PropTypes.string,
-      url: PropTypes.string,
-    })
-  ),
-};
-
-export default PageHeader;