Skip to content

Commit b9d2b6d

Browse files
gleknerjeff-phillips-18
glekner
authored and
jeff-phillips-18
committed
feat(notification-drawer): Adds Notification Drawer
1 parent 0b5fc10 commit b9d2b6d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+3500
-2
lines changed

‎less/notificationdrawer.less‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
.drawer-pf.drawer-alt-pf {
2+
overflow-y: hidden;
3+
display: flex;
4+
flex-direction: column;
5+
6+
.drawer-pf-title {
7+
position: relative;
8+
}
9+
10+
.panel-group {
11+
display: flex;
12+
flex-direction: column;
13+
position: initial;
14+
bottom: initial;
15+
top: initial;
16+
overflow-y: auto;
17+
18+
.panel.panel-default.expanded {
19+
min-height: 175px;
20+
flex: 1 1 auto;
21+
display: flex;
22+
flex-direction: column;
23+
}
24+
25+
.panel-collapse.in {
26+
display: flex;
27+
flex-direction: column;
28+
flex: 1 1 auto;
29+
min-height: 0;
30+
31+
.panel-body {
32+
flex: 1 1 auto;
33+
overflow-y: auto;
34+
}
35+
}
36+
}
37+
38+
.drawer-pf-action {
39+
flex: none;
40+
}
41+
}

‎less/patternfly-react.less‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
Patternfly React Specific Extensions
33
*/
44
@import 'card';
5-
65
@import 'utilization-bar';
76
@import 'breadcrumb';
8-
@import "label-remove";
7+
@import 'label-remove';
8+
@import 'notificationdrawer';

‎sass/patternfly-react/_notificationdrawer.scss‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
.drawer-pf.drawer-alt-pf {
2+
overflow-y: hidden;
3+
display: flex;
4+
flex-direction: column;
5+
6+
.drawer-pf-title {
7+
position: relative;
8+
}
9+
10+
.panel-group {
11+
display: flex;
12+
flex-direction: column;
13+
position: initial;
14+
bottom: initial;
15+
top: initial;
16+
overflow-y: auto;
17+
18+
.panel.panel-default.expanded {
19+
min-height: 175px;
20+
flex: 1 1 auto;
21+
display: flex;
22+
flex-direction: column;
23+
}
24+
25+
.panel-collapse.in {
26+
display: flex;
27+
flex-direction: column;
28+
flex: 1 1 auto;
29+
min-height: 0;
30+
31+
.panel-body {
32+
flex: 1 1 auto;
33+
overflow-y: auto;
34+
}
35+
}
36+
}
37+
38+
.drawer-pf-action {
39+
flex: none;
40+
}
41+
}

‎sass/patternfly-react/_patternfly-react.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,4 @@
55
@import 'utilization-bar';
66
@import 'breadcrumb';
77
@import 'label-remove';
8+
@import 'notificationdrawer';

‎src/components/Notification/Notification.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import classNames from 'classnames';
2+
import React from 'react';
3+
import PropTypes from 'prop-types';
4+
import Spinner from '../Spinner/Spinner';
5+
6+
const Notification = ({ type, children, seen, className, ...props }) => {
7+
const classes = classNames(
8+
{
9+
'drawer-pf-notification': type === 'notification',
10+
'drawer-pf-loading text-center': type === 'loading'
11+
},
12+
{ unread: !seen },
13+
className
14+
);
15+
16+
return (
17+
<div className={classes} {...props}>
18+
{type === 'loading'
19+
? [
20+
<Spinner key="notification_spinner" inline loading size="xs" />,
21+
' Loading More'
22+
]
23+
: children}
24+
</div>
25+
);
26+
};
27+
Notification.propTypes = {
28+
/** Child node - contents of the element */
29+
children: PropTypes.node,
30+
/** Additional element css classes */
31+
className: PropTypes.string,
32+
/** seen Notification Bool */
33+
seen: PropTypes.bool,
34+
/** show Loading Notification */
35+
type: PropTypes.string
36+
};
37+
Notification.defaultProps = {
38+
children: null,
39+
className: '',
40+
seen: false,
41+
type: 'notification'
42+
};
43+
44+
export default Notification;

‎src/components/Notification/Notification.test.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import React from 'react';
2+
import { mount } from 'enzyme';
3+
import { Notification } from './index';
4+
5+
test('Notification is working properly', () => {
6+
const component = mount(
7+
<Notification>
8+
<div>Child</div>
9+
</Notification>
10+
);
11+
expect(component.render()).toMatchSnapshot();
12+
});
13+
14+
test('Notification Content is working properly', () => {
15+
const component = mount(
16+
<Notification.Content>
17+
<div>Child</div>
18+
</Notification.Content>
19+
);
20+
expect(component.render()).toMatchSnapshot();
21+
});
22+
23+
test('Notification Info is working properly', () => {
24+
const component = mount(<Notification.Info />);
25+
26+
expect(component.render()).toMatchSnapshot();
27+
});
28+
29+
test('Notification Info Right is working properly', () => {
30+
const component = mount(<Notification.InfoRight text="right" />);
31+
32+
expect(component.render()).toMatchSnapshot();
33+
});
34+
35+
test('Notification Info Left is working properly', () => {
36+
const component = mount(<Notification.InfoLeft text="left" />);
37+
38+
expect(component.render()).toMatchSnapshot();
39+
});
40+
41+
test('Notification Message is working properly', () => {
42+
const component = mount(
43+
<Notification.Message>
44+
<div>Child</div>
45+
</Notification.Message>
46+
);
47+
expect(component.render()).toMatchSnapshot();
48+
});

‎src/components/Notification/NotificationContent.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import classNames from 'classnames';
2+
import React from 'react';
3+
import PropTypes from 'prop-types';
4+
5+
const NotificationContent = ({ children, className, ...props }) => {
6+
const classes = classNames('drawer-pf-notification-content', className);
7+
8+
return (
9+
<div className={classes} {...props}>
10+
{children}
11+
</div>
12+
);
13+
};
14+
NotificationContent.propTypes = {
15+
/** Child node - contents of the element */
16+
children: PropTypes.node.isRequired,
17+
/** Additional element css classes */
18+
className: PropTypes.string
19+
};
20+
NotificationContent.defaultProps = {
21+
className: ''
22+
};
23+
24+
export default NotificationContent;

‎src/components/Notification/NotificationDrawer/NotificationDrawer.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import classNames from 'classnames';
2+
import React from 'react';
3+
import PropTypes from 'prop-types';
4+
5+
const NotificationDrawer = ({
6+
hide,
7+
expanded,
8+
children,
9+
className,
10+
...props
11+
}) => {
12+
const classes = classNames(
13+
'drawer-pf drawer-alt-pf drawer-pf-notifications',
14+
{ 'drawer-pf-expanded': expanded },
15+
{ hide },
16+
className
17+
);
18+
return (
19+
<div className={classes} {...props}>
20+
{children}
21+
</div>
22+
);
23+
};
24+
NotificationDrawer.propTypes = {
25+
/** Child node - contents of the element */
26+
children: PropTypes.node.isRequired,
27+
/** Additional element css classes */
28+
className: PropTypes.string,
29+
/** Expanded bool */
30+
expanded: PropTypes.bool,
31+
/** Hide Bool */
32+
hide: PropTypes.bool
33+
};
34+
NotificationDrawer.defaultProps = {
35+
className: '',
36+
expanded: false,
37+
hide: false
38+
};
39+
40+
export default NotificationDrawer;

‎src/components/Notification/NotificationDrawer/NotificationDrawer.test.js‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import React from 'react';
2+
import { mount } from 'enzyme';
3+
import { NotificationDrawer } from './index';
4+
5+
test('NotificationDrawer is working properly', () => {
6+
const component = mount(
7+
<NotificationDrawer>
8+
<div>Child</div>
9+
</NotificationDrawer>
10+
);
11+
12+
expect(component.render()).toMatchSnapshot();
13+
});
14+
15+
test('NotificationDrawer Title is working properly', () => {
16+
const component = mount(<NotificationDrawer.Title />);
17+
18+
expect(component.render()).toMatchSnapshot();
19+
});
20+
21+
test('NotificationDrawer Accordion is working properly', () => {
22+
const component = mount(
23+
<NotificationDrawer.Accordion>
24+
<div>Child</div>
25+
</NotificationDrawer.Accordion>
26+
);
27+
28+
expect(component.render()).toMatchSnapshot();
29+
});
30+
31+
test('NotificationDrawer Toggle is working properly', () => {
32+
const component = mount(<NotificationDrawer.Toggle />);
33+
34+
expect(component.render()).toMatchSnapshot();
35+
});
36+
37+
test('NotificationDrawer Dropdown is working properly', () => {
38+
const component = mount(
39+
<NotificationDrawer.Dropdown id="1">
40+
<div>Child</div>
41+
</NotificationDrawer.Dropdown>
42+
);
43+
44+
expect(component.render()).toMatchSnapshot();
45+
});
46+
47+
test('NotificationDrawer Panel is working properly', () => {
48+
const component = mount(
49+
<NotificationDrawer.Panel expanded>
50+
<div>Child</div>
51+
</NotificationDrawer.Panel>
52+
);
53+
54+
expect(component.render()).toMatchSnapshot();
55+
});
56+
57+
test('NotificationDrawer Panel Action and Link is working properly', () => {
58+
const component = mount(
59+
<NotificationDrawer.PanelAction>
60+
<NotificationDrawer.PanelActionLink>
61+
<div>Child</div>
62+
</NotificationDrawer.PanelActionLink>
63+
</NotificationDrawer.PanelAction>
64+
);
65+
66+
expect(component.render()).toMatchSnapshot();
67+
});
68+
69+
test('NotificationDrawer Panel Body is working properly', () => {
70+
const component = mount(
71+
<NotificationDrawer.PanelBody maxHeight={350}>
72+
<div>Child</div>
73+
</NotificationDrawer.PanelBody>
74+
);
75+
76+
expect(component.render()).toMatchSnapshot();
77+
});
78+
79+
test('NotificationDrawer Panel Collapse is working properly', () => {
80+
const component = mount(
81+
<NotificationDrawer.PanelCollapse collapseIn>
82+
<div>Child</div>
83+
</NotificationDrawer.PanelCollapse>
84+
);
85+
86+
expect(component.render()).toMatchSnapshot();
87+
});
88+
89+
test('NotificationDrawer Panel Counter is working properly', () => {
90+
const component = mount(
91+
<NotificationDrawer.PanelCounter>
92+
<div>Child</div>
93+
</NotificationDrawer.PanelCounter>
94+
);
95+
96+
expect(component.render()).toMatchSnapshot();
97+
});
98+
99+
test('NotificationDrawer Panel Heading is working properly', () => {
100+
const component = mount(
101+
<NotificationDrawer.PanelHeading>
102+
<div>Child</div>
103+
</NotificationDrawer.PanelHeading>
104+
);
105+
106+
expect(component.render()).toMatchSnapshot();
107+
});
108+
109+
test('NotificationDrawer Panel Title is working properly', () => {
110+
const component = mount(<NotificationDrawer.PanelTitle />);
111+
112+
expect(component.render()).toMatchSnapshot();
113+
});

‎src/components/Notification/NotificationDrawer/NotificationDrawerAccordion/NotificationDrawerAccordion.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import classNames from 'classnames';
2+
import React from 'react';
3+
import PropTypes from 'prop-types';
4+
5+
const NotificationDrawerAccordion = ({ children, className, ...props }) => {
6+
const classes = classNames('panel-group', className);
7+
8+
return (
9+
<div className={classes} id="notification-drawer-accordion" {...props}>
10+
{children}
11+
</div>
12+
);
13+
};
14+
NotificationDrawerAccordion.propTypes = {
15+
/** Child node - contents of the element */
16+
children: PropTypes.node.isRequired,
17+
/** Additional element css classes */
18+
className: PropTypes.string
19+
};
20+
NotificationDrawerAccordion.defaultProps = {
21+
className: ''
22+
};
23+
24+
export default NotificationDrawerAccordion;

0 commit comments

Comments
 (0)