@availity/page-header 11.1.28 → 11.2.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 (4) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/package.json +3 -3
  3. package/src/PageHeader.js +23 -30
  4. package/styles.scss +47 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,36 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [11.2.0](https://github.com/Availity/availity-react/compare/@availity/page-header@11.1.30...@availity/page-header@11.2.0) (2022-04-20)
7
+
8
+
9
+ ### Features
10
+
11
+ * **page-header:** responsiveness and debootstrapifying ([ce4b2f9](https://github.com/Availity/availity-react/commit/ce4b2f9086d2fe2c808297fc606db6581b768a7b))
12
+
13
+
14
+
15
+
16
+
17
+ ## [11.1.30](https://github.com/Availity/availity-react/compare/@availity/page-header@11.1.29...@availity/page-header@11.1.30) (2022-04-14)
18
+
19
+
20
+ ### Bug Fixes
21
+
22
+ * **page-header:** account for payerId with multiple associated spaces and no spaceId passed ([871caf0](https://github.com/Availity/availity-react/commit/871caf05ad4d94bcd51f3df8a899d7a36191a227))
23
+
24
+
25
+
26
+
27
+
28
+ ## [11.1.29](https://github.com/Availity/availity-react/compare/@availity/page-header@11.1.28...@availity/page-header@11.1.29) (2022-04-13)
29
+
30
+ **Note:** Version bump only for package @availity/page-header
31
+
32
+
33
+
34
+
35
+
6
36
  ## [11.1.28](https://github.com/Availity/availity-react/compare/@availity/page-header@11.1.27...@availity/page-header@11.1.28) (2022-04-13)
7
37
 
8
38
  **Note:** Version bump only for package @availity/page-header
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@availity/page-header",
3
- "version": "11.1.28",
3
+ "version": "11.2.0",
4
4
  "description": "The standard page header for Availity Portal Applications",
5
5
  "keywords": [
6
6
  "react",
@@ -31,7 +31,7 @@
31
31
  },
32
32
  "devDependencies": {
33
33
  "@availity/api-axios": "^6.0.0",
34
- "@availity/spaces": "^5.2.0",
34
+ "@availity/spaces": "^6.0.0",
35
35
  "@availity/training-link": "^1.4.2",
36
36
  "axios": "^0.21.1",
37
37
  "formik": "^2.2.8",
@@ -51,5 +51,5 @@
51
51
  "publishConfig": {
52
52
  "access": "public"
53
53
  },
54
- "gitHead": "3aa8f3dcdb7511c76bf7952a132dd1cfac895c07"
54
+ "gitHead": "22f294c074767741af257d1198615052248a08fc"
55
55
  }
package/src/PageHeader.js CHANGED
@@ -5,6 +5,7 @@ import Breadcrumbs from '@availity/breadcrumbs';
5
5
  import AppIcon from '@availity/app-icon';
6
6
  import Feedback from '@availity/feedback';
7
7
  import Spaces, { SpacesLogo, useSpaces, useSpacesContext } from '@availity/spaces';
8
+ import '../styles.scss';
8
9
 
9
10
  const PageHeader = ({
10
11
  payerId,
@@ -33,10 +34,19 @@ const PageHeader = ({
33
34
  className,
34
35
  ...props
35
36
  }) => {
36
- const [spaceForSpaceID, spaceForPayerID] = useSpaces(spaceId, payerId);
37
+ const spaces = useSpaces(spaceId, payerId);
38
+
39
+ let firstSpaceForPayerID;
40
+ let firstSpaceForSpaceID;
41
+ if (!spaceId && payerId && spaces[0]) {
42
+ firstSpaceForPayerID = spaces[0];
43
+ } else {
44
+ firstSpaceForSpaceID = spaces[0];
45
+ firstSpaceForPayerID = spaces[1];
46
+ }
37
47
  const { loading: spacesIsLoading } = useSpacesContext() || {};
38
48
 
39
- const _space = spaceForSpaceID || spaceForPayerID;
49
+ const _space = firstSpaceForSpaceID || firstSpaceForPayerID;
40
50
 
41
51
  let payerLogo = null;
42
52
  if (payerId || logo) {
@@ -50,7 +60,7 @@ const PageHeader = ({
50
60
  },
51
61
  };
52
62
  payerLogo =
53
- spaceForPayerID || (logo && spaceForSpaceID) || spacesIsLoading ? (
63
+ firstSpaceForPayerID || (logo && firstSpaceForSpaceID) || spacesIsLoading ? (
54
64
  <SpacesLogo {...logoAttrs} />
55
65
  ) : (
56
66
  <Spaces
@@ -66,26 +76,17 @@ const PageHeader = ({
66
76
  const _spaceName = spaceName || (_space && _space.name);
67
77
  if ((spaceId || _spaceName) && !crumbs) {
68
78
  const url =
69
- spaceForSpaceID && spaceForSpaceID.link && spaceForSpaceID.link.url
70
- ? spaceForSpaceID.link.url
79
+ firstSpaceForSpaceID && firstSpaceForSpaceID.link && firstSpaceForSpaceID.link.url
80
+ ? firstSpaceForSpaceID.link.url
71
81
  : `/web/spc/spaces/#/${spaceId}`;
72
82
  crumbs = [{ name: _spaceName, url }];
73
83
  }
74
84
 
75
- const feedback = useMemo(
76
- () => (
77
- <Feedback
78
- appName={appName}
79
- className={`d-inline-flex flex-shrink-0 ${payerId ? 'mx-3' : ''}`}
80
- {...feedbackProps}
81
- />
82
- ),
83
- [appName, feedbackProps, payerId]
84
- );
85
+ const feedback = useMemo(() => <Feedback appName={appName} {...feedbackProps} />, [appName, feedbackProps]);
85
86
 
86
87
  return (
87
88
  <>
88
- <div className="d-flex align-items-start flex-shrink-0">
89
+ <div className="page-header-above">
89
90
  {showCrumbs ? (
90
91
  <>
91
92
  {React.isValidElement(crumbs) ? (
@@ -97,36 +98,29 @@ const PageHeader = ({
97
98
  ) : null}
98
99
  {component}
99
100
  </div>
100
- <div
101
- className={classNames(
102
- 'page-header page-header-brand d-flex justify-content-between align-items-end',
103
- className
104
- )}
105
- data-testid="page-header"
106
- {...props}
107
- >
101
+ <div className={classNames('page-header', className)} data-testid="page-header" {...props}>
108
102
  <Tag
109
- className={classNames('page-header-title page-header-left d-flex align-items-center mb-0', titleClassName)}
103
+ className={classNames('page-header-title', titleClassName)}
110
104
  data-testid="page-header-title"
111
105
  {...restTitleProps}
112
106
  >
113
107
  {!payerId && appAbbr && (
114
108
  <AppIcon
115
- className="mr-2"
116
109
  data-testid="page-header-app-icon"
117
110
  color={iconColor}
118
111
  branded={branded}
119
112
  title={appName}
120
113
  src={iconSrc}
121
114
  alt={iconAlt}
115
+ aria-hidden
122
116
  >
123
117
  {appAbbr}
124
118
  </AppIcon>
125
119
  )}
126
- {children || <h1 className="mb-0">{appName}</h1>}
120
+ {children || <h1>{appName}</h1>}
127
121
  </Tag>
128
122
  {!RenderRightContent ? (
129
- <div className="page-header-left d-flex flex-wrap flex-md-nowrap flex-grow align-items-end justify-content-end">
123
+ <div className="page-header-right">
130
124
  {showFeedback && feedback}
131
125
  {payerLogo}
132
126
  </div>
@@ -181,8 +175,7 @@ PageHeader.defaultProps = {
181
175
  payerId: null,
182
176
  homeUrl: '/public/apps/dashboard',
183
177
  titleProps: {},
184
- renderRightClassName:
185
- 'page-header-left d-flex flex-wrap flex-md-nowrap flex-grow align-items-end justify-content-end',
178
+ renderRightClassName: 'page-header-right',
186
179
  showCrumbs: true,
187
180
  };
188
181
 
package/styles.scss ADDED
@@ -0,0 +1,47 @@
1
+ .page-header {
2
+ border-bottom: 1px solid #dadfdf;
3
+ margin: 40px 0 20px;
4
+ padding-bottom: 9px;
5
+ display: flex;
6
+ flex-wrap: wrap;
7
+ align-items: flex-end;
8
+ justify-content: space-between;
9
+ }
10
+
11
+ .page-header-right {
12
+ display: flex;
13
+ flex-wrap: wrap;
14
+ flex-shrink: 1;
15
+ align-items: flex-end;
16
+ margin: -.15rem;
17
+
18
+ img,
19
+ button, .btn,
20
+ a {
21
+ flex-grow: 0;
22
+ margin: .15rem;
23
+ max-width: 100%;
24
+ }
25
+ }
26
+
27
+ .page-header-title {
28
+ margin-bottom: 0;
29
+ align-items: center;
30
+ display: flex;
31
+
32
+ h1 {
33
+ margin-bottom: 0;
34
+ }
35
+
36
+ .app-icon {
37
+ margin-right: 0.5rem;
38
+ }
39
+ }
40
+
41
+ .page-header-above {
42
+ display: flex;
43
+ flex-wrap: wrap;
44
+ flex-shrink: 0;
45
+ align-items: flex-start;
46
+ justify-content: space-between;
47
+ }