@availity/page-header 11.1.30 → 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 +11 -0
  2. package/package.json +2 -2
  3. package/src/PageHeader.js +9 -25
  4. package/styles.scss +47 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
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
+
6
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)
7
18
 
8
19
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@availity/page-header",
3
- "version": "11.1.30",
3
+ "version": "11.2.0",
4
4
  "description": "The standard page header for Availity Portal Applications",
5
5
  "keywords": [
6
6
  "react",
@@ -51,5 +51,5 @@
51
51
  "publishConfig": {
52
52
  "access": "public"
53
53
  },
54
- "gitHead": "1c1684571eb5cac868f984efa88916b93ca4dc1c"
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,
@@ -81,20 +82,11 @@ const PageHeader = ({
81
82
  crumbs = [{ name: _spaceName, url }];
82
83
  }
83
84
 
84
- const feedback = useMemo(
85
- () => (
86
- <Feedback
87
- appName={appName}
88
- className={`d-inline-flex flex-shrink-0 ${payerId ? 'mx-3' : ''}`}
89
- {...feedbackProps}
90
- />
91
- ),
92
- [appName, feedbackProps, payerId]
93
- );
85
+ const feedback = useMemo(() => <Feedback appName={appName} {...feedbackProps} />, [appName, feedbackProps]);
94
86
 
95
87
  return (
96
88
  <>
97
- <div className="d-flex align-items-start flex-shrink-0">
89
+ <div className="page-header-above">
98
90
  {showCrumbs ? (
99
91
  <>
100
92
  {React.isValidElement(crumbs) ? (
@@ -106,36 +98,29 @@ const PageHeader = ({
106
98
  ) : null}
107
99
  {component}
108
100
  </div>
109
- <div
110
- className={classNames(
111
- 'page-header page-header-brand d-flex justify-content-between align-items-end',
112
- className
113
- )}
114
- data-testid="page-header"
115
- {...props}
116
- >
101
+ <div className={classNames('page-header', className)} data-testid="page-header" {...props}>
117
102
  <Tag
118
- className={classNames('page-header-title page-header-left d-flex align-items-center mb-0', titleClassName)}
103
+ className={classNames('page-header-title', titleClassName)}
119
104
  data-testid="page-header-title"
120
105
  {...restTitleProps}
121
106
  >
122
107
  {!payerId && appAbbr && (
123
108
  <AppIcon
124
- className="mr-2"
125
109
  data-testid="page-header-app-icon"
126
110
  color={iconColor}
127
111
  branded={branded}
128
112
  title={appName}
129
113
  src={iconSrc}
130
114
  alt={iconAlt}
115
+ aria-hidden
131
116
  >
132
117
  {appAbbr}
133
118
  </AppIcon>
134
119
  )}
135
- {children || <h1 className="mb-0">{appName}</h1>}
120
+ {children || <h1>{appName}</h1>}
136
121
  </Tag>
137
122
  {!RenderRightContent ? (
138
- <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">
139
124
  {showFeedback && feedback}
140
125
  {payerLogo}
141
126
  </div>
@@ -190,8 +175,7 @@ PageHeader.defaultProps = {
190
175
  payerId: null,
191
176
  homeUrl: '/public/apps/dashboard',
192
177
  titleProps: {},
193
- renderRightClassName:
194
- 'page-header-left d-flex flex-wrap flex-md-nowrap flex-grow align-items-end justify-content-end',
178
+ renderRightClassName: 'page-header-right',
195
179
  showCrumbs: true,
196
180
  };
197
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
+ }