Skip to content

Commit 3920860

Browse files
greg-a-smithgreg-a-smith
authored
fix: One component per file for Panel (#445)
* Rename file * Rename temp * Restore original * Rename file * Rename temp * Restore original * Rename file * Rename temp * Restore original * Rename file * Rename temp * Restore original * Rename file * Rename temp * Restore original * Rename file * Rename temp * Restore original * Rename file * Rename temp * Restore original * Changes to refactor Panel into separate source files * Updated snapshots * Remove script file
1 parent 909d27d commit 3920860

File tree

12 files changed

+345
-346
lines changed

12 files changed

+345
-346
lines changed

‎src/Panel/Panel.Component.js‎

Lines changed: 95 additions & 95 deletions
Large diffs are not rendered by default.

‎src/Panel/Panel.js‎

Lines changed: 15 additions & 170 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
import classnames from 'classnames';
22
import CustomPropTypes from '../utils/CustomPropTypes/CustomPropTypes';
3+
import PanelActions from './_PanelActions';
4+
import PanelBody from './_PanelBody';
5+
import PanelFilters from './_PanelFilters';
6+
import PanelFooter from './_PanelFooter';
7+
import PanelHead from './_PanelHead';
8+
import PanelHeader from './_PanelHeader';
39
import PropTypes from 'prop-types';
410
import React from 'react';
511

6-
// ------------------------------------------- Panel ------------------------------------------
7-
export const Panel = props => {
12+
const Panel = props => {
813
const { colSpan, children, className, ...rest } = props;
914

1015
const panelClasses = classnames(
@@ -17,6 +22,7 @@ export const Panel = props => {
1722

1823
return <div {...rest} className={panelClasses}>{children}</div>;
1924
};
25+
2026
Panel.displayName = 'Panel';
2127

2228
Panel.propTypes = {
@@ -28,172 +34,11 @@ Panel.propDescriptions = {
2834
colSpan: 'The number of columns to span inside a `PanelGrid`.'
2935
};
3036

31-
// ------------------------------------------- Panel Grid ------------------------------------------
32-
export const PanelGrid = props => {
33-
const { nogap, cols, children, className, ...rest } = props;
34-
35-
const panelGridClasses = classnames(
36-
'fd-panel-grid',
37-
{
38-
'fd-panel-grid--nogap': nogap,
39-
[`fd-panel-grid--${cols}col`]: !!cols
40-
},
41-
className
42-
);
43-
44-
return (
45-
<div
46-
{...rest}
47-
className={panelGridClasses}>
48-
{children}
49-
</div>
50-
);
51-
};
52-
PanelGrid.displayName = 'PanelGrid';
53-
54-
PanelGrid.propTypes = {
55-
className: PropTypes.string,
56-
cols: CustomPropTypes.range(1, 6),
57-
nogap: PropTypes.bool
58-
};
59-
60-
PanelGrid.propDescriptions = {
61-
cols: 'The number of columns in the grid.',
62-
nogap: 'Set to **true** to remove the margins between the panels.'
63-
};
64-
65-
// ------------------------------------------- Panel Body ------------------------------------------
66-
export const PanelBody = props => {
67-
const { children, className, ...rest } = props;
68-
69-
const panelBodyClasses = classnames(
70-
'fd-panel__body',
71-
className
72-
);
73-
74-
return <div {...rest} className={panelBodyClasses}>{children}</div>;
75-
};
76-
PanelBody.displayName = 'PanelBody';
77-
78-
PanelBody.propTypes = {
79-
className: PropTypes.string
80-
};
81-
82-
// ------------------------------------------- Panel Header ------------------------------------------
83-
export const PanelHeader = props => {
84-
const { children, className, ...rest } = props;
85-
86-
const panelHeaderClasses = classnames(
87-
'fd-panel__header',
88-
className
89-
);
37+
Panel.Actions = PanelActions;
38+
Panel.Body = PanelBody;
39+
Panel.Filters = PanelFilters;
40+
Panel.Footer = PanelFooter;
41+
Panel.Head = PanelHead;
42+
Panel.Header = PanelHeader;
9043

91-
return <div {...rest} className={panelHeaderClasses}>{children}</div>;
92-
};
93-
PanelHeader.displayName = 'PanelHeader';
94-
95-
PanelHeader.propTypes = {
96-
className: PropTypes.string
97-
};
98-
99-
// ------------------------------------------- Panel Head ------------------------------------------
100-
export const PanelHead = props => {
101-
const { title, description, className, ...rest } = props;
102-
103-
const panelHeadClasses = classnames(
104-
'fd-panel__head',
105-
className
106-
);
107-
108-
return (
109-
<div {...rest} className={panelHeadClasses}>
110-
{title ? <h1 className='fd-panel__title'>{title}</h1> : null}
111-
{description ? <p className='fd-panel__description'>{description}</p> : null}
112-
</div>
113-
);
114-
};
115-
PanelHead.displayName = 'PanelHead';
116-
117-
PanelHead.propTypes = {
118-
className: PropTypes.string,
119-
description: PropTypes.string,
120-
title: PropTypes.string
121-
};
122-
123-
PanelHead.propDescriptions = {
124-
description: 'Localized text for the description of the panel.',
125-
title: 'Localized text for the title of the panel.'
126-
};
127-
128-
// ------------------------------------------- Panel Actions ------------------------------------------
129-
export const PanelActions = props => {
130-
const { children, className, ...rest } = props;
131-
132-
const panelActionsClasses = classnames(
133-
'fd-panel__actions',
134-
className
135-
);
136-
137-
return <div {...rest} className={panelActionsClasses}>{children}</div>;
138-
};
139-
PanelActions.displayName = 'PanelActions';
140-
141-
PanelActions.propTypes = {
142-
className: PropTypes.string
143-
};
144-
145-
// ------------------------------------------- Panel Filters ------------------------------------------
146-
export const PanelFilters = props => {
147-
const { children, className, ...rest } = props;
148-
149-
const panelFiltersClasses = classnames(
150-
'fd-panel__filters',
151-
className
152-
);
153-
154-
return (
155-
<div {...rest} className={panelFiltersClasses}>
156-
{children}
157-
</div>
158-
);
159-
};
160-
PanelFilters.displayName = 'PanelFilters';
161-
162-
PanelFilters.propTypes = {
163-
className: PropTypes.string
164-
};
165-
166-
167-
// ------------------------------------------- Panel Content ------------------------------------------
168-
export const PanelContent = props => {
169-
const { children, className, ...rest } = props;
170-
171-
const panelContentClasses = classnames(
172-
'fd-panel__content',
173-
className
174-
);
175-
176-
return <div {...rest} className={panelContentClasses}>{children}</div>;
177-
};
178-
PanelContent.displayName = 'PanelContent';
179-
180-
PanelContent.propTypes = {
181-
className: PropTypes.string
182-
};
183-
184-
// ------------------------------------------- Panel Footer ------------------------------------------
185-
export const PanelFooter = props => {
186-
const { children, className, ...rest } = props;
187-
188-
const panelFooterClasses = classnames(
189-
'fd-panel__footer',
190-
className
191-
);
192-
193-
return <div {...rest} className={panelFooterClasses}>{children}</div>;
194-
};
195-
PanelFooter.displayName = 'PanelFooter';
196-
197-
PanelFooter.propTypes = {
198-
className: PropTypes.string
199-
};
44+
export default Panel;

0 commit comments

Comments
 (0)