Skip to content

Commit fe7de54

Browse files
InnaAtanasovaInnaAtanasova
authored
Merge pull request #88 from SAP/feature/code-improvements
Feature/code improvements
2 parents bbc66f8 + 7fb87ab commit fe7de54

32 files changed

+965
-1115
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
"deploy": "gh-pages -d build",
2121
"start": "react-scripts start",
2222
"build-doc": "react-scripts build",
23-
"build": "rm -rf dist && NODE_ENV=production babel src --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,__snapshots__",
23+
"build": "rm -rf dist && NODE_ENV=production babel src --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,__snapshots__,Component.js",
2424
"test": "react-scripts test",
2525
"eject": "react-scripts eject"
2626
},

‎src/ActionBar/ActionBar.Component.js‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
11
import React from 'react';
2-
import { ActionBar, ActionBarBack, ActionBarHeader, ActionBarActions } from '../';
3-
import { Button, Popover, Menu, MenuList, MenuItem } from '../';
2+
import { ActionBar, ActionBarBack, ActionBarHeader, ActionBarActions, Button, Popover, Menu, MenuList, MenuItem } from '../';
43
import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../';
54

65
export const ActionBarComponent = () => {
76
const actionBarBackBtnCode = `<ActionBar>
8-
<ActionBarBack />
7+
<ActionBarBack onclick={clickBackBtn}/>
98
<ActionBarHeader title={'Page Title'} description={'Action Bar Description'} />
109
<ActionBarActions>
1110
<Button>Button</Button>
1211
<Button option="emphasized">Button</Button>
1312
</ActionBarActions>
14-
</ActionBar>`;
13+
</ActionBar>
14+
15+
const clickBackBtn = () => {
16+
alert("You clicked me!");
17+
}`;
1518

1619
const actionBarNoBackBtnCode = `<ActionBar>
1720
<ActionBarHeader title={'Page Title'} description={'Action Bar Description'} />
@@ -80,6 +83,10 @@ export const ActionBarComponent = () => {
8083
</ActionBarActions>
8184
</ActionBar>`;
8285

86+
const clickBackBtn = () => {
87+
alert("You clicked me!");
88+
}
89+
8390
return (
8491
<div>
8592
<Header>Action Bar</Header>
@@ -106,6 +113,10 @@ export const ActionBarComponent = () => {
106113
{
107114
name: 'description',
108115
description: 'string - Action bar description. Specified in ActionBarHeader.'
116+
},
117+
{
118+
name: 'onclick',
119+
description: 'func - The function that is executed when the back button is clicked.'
109120
}
110121
]}
111122
/>
@@ -115,7 +126,7 @@ export const ActionBarComponent = () => {
115126
<h2>Action bar with back button, description and action buttons.</h2>
116127
<DocsTile>
117128
<ActionBar>
118-
<ActionBarBack />
129+
<ActionBarBack onclick={clickBackBtn}/>
119130
<ActionBarHeader title={'Page Title'} description={'Action Bar Description'} />
120131
<ActionBarActions>
121132
<Button>Button</Button>

‎src/ActionBar/ActionBar.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,18 @@ ActionBar.propTypes = {
2323
};
2424

2525
export const ActionBarBack = props => {
26+
const { onclick } = props;
2627
return (
2728
<div className="fd-action-bar__back">
28-
<button className="fd-button--light fd-button--compact sap-icon--nav-back" />
29+
<button className="fd-button--light fd-button--compact sap-icon--nav-back" onClick={onclick} />
2930
</div>
3031
);
3132
};
3233

34+
ActionBarBack.propTypes = {
35+
onclick: PropTypes.func
36+
}
37+
3338
export const ActionBarHeader = props => {
3439
const { title, description } = props;
3540
return (

‎src/Alert/Alert.Component.js‎

Lines changed: 5 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,18 @@
11
import React from 'react';
22
import { Alert } from '../';
3-
import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../';
4-
import { Playground } from '../documentation/Playground/Playground';
3+
import { DocsTile, DocsText, Separator, Header, Description, Import, Properties, Playground } from '../';
4+
55

66
export const AlertComponent = () => {
7-
const defaultAlertCode = `<Alert dismissable link="#" linkText="link">Default alert with a </Alert>
8-
9-
<Alert dismissable linkText="link" rtl>تم. بسبب أمام وشعار ولم بـ. أحكم والكساد ما فقد. كل وعُرفت الإنزال مدن. انه </Alert>`;
7+
const defaultAlertCode = `<Alert dismissable link="#" linkText="link">Default alert with a </Alert>`;
108

119
const warningAlertCode = `<Alert type="warning" dismissable>
1210
<h3>A dismissible error type alert with template.</h3>
1311
<p>More information...</p>
14-
</Alert>
15-
16-
<Alert type="warning" dismissable rtl>
17-
تم. بسبب أمام وشعار ولم بـ. أحكم والكساد ما فقد. كل وعُرفت الإنزال مدن. انه
1812
</Alert>`;
1913

2014
const errorAlertCode = `<Alert type="error" dismissable link="#" linkText="link">
2115
Error message with a
22-
</Alert>
23-
24-
<Alert type="error" dismissable rtl>
25-
تم. بسبب أمام وشعار ولم بـ. أحكم والكساد ما فقد. كل وعُرفت الإنزال مدن. انه
2616
</Alert>`;
2717

2818
return (
@@ -46,10 +36,6 @@ export const AlertComponent = () => {
4636
{
4737
name: 'dismissible',
4838
description: 'bool - Shows a dismissible button if set to true. Default is false.'
49-
},
50-
{
51-
name: 'rtl',
52-
description: 'bool - Set to true to enable Right-to-Left support. Default is false.'
5339
}
5440
]}
5541
/>
@@ -69,10 +55,6 @@ export const AlertComponent = () => {
6955
<Alert dismissable link="#" linkText=" link">
7056
Default alert with a {' '}
7157
</Alert>
72-
<br />
73-
<Alert dismissable linkText="link" rtl>
74-
تم. بسبب أمام وشعار ولم بـ. أحكم والكساد ما فقد. كل وعُرفت الإنزال مدن. انه
75-
</Alert>
7658
</DocsTile>
7759
<DocsText>{defaultAlertCode}</DocsText>
7860

@@ -88,12 +70,6 @@ export const AlertComponent = () => {
8870
<h3>A dismissible error type alert with template.</h3>
8971
<p>More information...</p>
9072
</Alert>
91-
92-
<br />
93-
94-
<Alert type="warning" dismissable rtl>
95-
تم. بسبب أمام وشعار ولم بـ. أحكم والكساد ما فقد. كل وعُرفت الإنزال مدن. انه
96-
</Alert>
9773
</DocsTile>
9874
<DocsText>{warningAlertCode}</DocsText>
9975

@@ -109,12 +85,6 @@ export const AlertComponent = () => {
10985
<Alert type="error" dismissable link="#" linkText=" link">
11086
Error message with a {' '}
11187
</Alert>
112-
113-
<br />
114-
115-
<Alert type="error" dismissable rtl>
116-
تم. بسبب أمام وشعار ولم بـ. أحكم والكساد ما فقد. كل وعُرفت الإنزال مدن. انه
117-
</Alert>
11888
</DocsTile>
11989
<DocsText>{errorAlertCode}</DocsText>
12090

@@ -129,15 +99,15 @@ export const AlertComponent = () => {
12999
{
130100
attribute: 'type',
131101
typeOfAttribute: 'string',
132-
enum: ['default', 'warning', 'error']
102+
enum: ['', 'warning', 'error']
133103
},
134104
{
135105
attribute: 'dismissable',
136106
typeOfAttribute: 'boolean'
137107
}
138108
]}
139109
>
140-
<Alert type="default" dismissable={false} link="#" linkText="link">
110+
<Alert type="" dismissable={false} link="#" linkText="link">
141111
Default alert with a{' '}
142112
</Alert>
143113
</Playground>

‎src/Alert/Alert.js‎

Lines changed: 28 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -16,63 +16,35 @@ export class Alert extends Component {
1616
}
1717

1818
render() {
19-
const { type, link, linkText, dismissable, rtl, children } = this.props;
19+
const { type, link, linkText, dismissable, children } = this.props;
2020
return (
2121
<div>
22-
{rtl
23-
? this.state.isActive && (
24-
<div
25-
className={`fd-alert${dismissable ? ' fd-alert--dismissible' : ''}${
26-
type ? ' fd-alert--' + type : ''
27-
}`}
28-
role="alert"
29-
id="j2ALl423"
30-
dir="rtl"
31-
>
32-
{dismissable ? (
33-
<button
34-
className="fd-alert__close"
35-
aria-controls="j2ALl423"
36-
aria-label="Close"
37-
onClick={() => this.closeAlertHandler()}
38-
/>
39-
) : null}
40-
{children}
41-
{link ? (
42-
<a href={link} className="fd-link">
43-
{linkText} <span className="sap-icon--arrow-right sap-icon--s" />
44-
</a>
45-
) : (
46-
undefined
47-
)}
48-
</div>
49-
)
50-
: this.state.isActive && (
51-
<div
52-
className={`fd-alert${dismissable ? ' fd-alert--dismissible' : ''}${
53-
type ? ' fd-alert--' + type : ''
54-
}`}
55-
role="alert"
56-
id="j2ALl423"
57-
>
58-
{dismissable ? (
59-
<button
60-
className="fd-alert__close"
61-
aria-controls="j2ALl423"
62-
aria-label="Close"
63-
onClick={() => this.closeAlertHandler()}
64-
/>
65-
) : null}
66-
{children}
67-
{link ? (
68-
<a href={link} className="fd-link">
69-
{linkText} <span className="sap-icon--arrow-right sap-icon--s" />
70-
</a>
71-
) : (
72-
undefined
73-
)}
74-
</div>
75-
)}
22+
{this.state.isActive && (
23+
<div
24+
className={`fd-alert${dismissable ? ' fd-alert--dismissible' : ''}${
25+
type ? ' fd-alert--' + type : ''
26+
}`}
27+
role="alert"
28+
id="j2ALl423"
29+
>
30+
{dismissable ? (
31+
<button
32+
className="fd-alert__close"
33+
aria-controls="j2ALl423"
34+
aria-label="Close"
35+
onClick={() => this.closeAlertHandler()}
36+
/>
37+
) : null}
38+
{children}
39+
{link ? (
40+
<a href={link} className="fd-link">
41+
{linkText} <span className="sap-icon--arrow-right sap-icon--s" />
42+
</a>
43+
) : (
44+
undefined
45+
)}
46+
</div>
47+
)}
7648
</div>
7749
);
7850
}
@@ -82,6 +54,5 @@ Alert.propTypes = {
8254
type: PropTypes.oneOf(['', 'warning', 'error']),
8355
link: PropTypes.string,
8456
linkText: PropTypes.string,
85-
dismissable: PropTypes.bool,
86-
rtl: PropTypes.bool
57+
dismissable: PropTypes.bool
8758
};

‎src/Alert/Alert.test.js‎

Lines changed: 0 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -19,23 +19,12 @@ describe('<Alert />', () => {
1919
</Alert>
2020
);
2121

22-
const basicRTLAlert = (
23-
<Alert dismissable rtl link="#" linkText="link">
24-
Error message with a
25-
</Alert>
26-
);
27-
2822
const nonDismissableAlert = (
2923
<Alert link="#" linkText="link">
3024
Default alert that cannot be dismissed
3125
</Alert>
3226
);
3327

34-
const nonDismissableRTLAlert = (
35-
<Alert rtl type="warning" linkText="link">
36-
Default alert that cannot be dismissed
37-
</Alert>
38-
);
3928

4029
test('create basic alert', () => {
4130
let component = renderer.create(basicAlert);
@@ -46,23 +35,11 @@ describe('<Alert />', () => {
4635
tree = component.toJSON();
4736
expect(tree).toMatchSnapshot();
4837

49-
component = renderer.create(basicRTLAlert);
50-
tree = component.toJSON();
51-
expect(tree).toMatchSnapshot();
52-
53-
component = renderer.create(nonDismissableRTLAlert);
54-
tree = component.toJSON();
55-
expect(tree).toMatchSnapshot();
56-
5738
let wrapper = shallow(basicAlert);
5839
expect(wrapper.state(['isActive'])).toBeTruthy();
5940
wrapper.find('button.fd-alert__close').simulate('click');
6041
expect(wrapper.state(['isActive'])).toBeFalsy();
6142

62-
wrapper = shallow(basicRTLAlert);
63-
expect(wrapper.state(['isActive'])).toBeTruthy();
64-
wrapper.find('button.fd-alert__close').simulate('click');
65-
expect(wrapper.state(['isActive'])).toBeFalsy();
6643
});
6744

6845
test('create non-dismissable alert', () => {

‎src/Alert/__snapshots__/Alert.test.js.snap‎

Lines changed: 0 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -46,48 +46,6 @@ exports[`<Alert /> create basic alert 2`] = `
4646
</div>
4747
`;
4848

49-
exports[`<Alert /> create basic alert 3`] = `
50-
<div>
51-
<div
52-
className="fd-alert fd-alert--dismissible"
53-
dir="rtl"
54-
id="j2ALl423"
55-
role="alert"
56-
>
57-
<button
58-
aria-controls="j2ALl423"
59-
aria-label="Close"
60-
className="fd-alert__close"
61-
onClick={[Function]}
62-
/>
63-
Error message with a
64-
<a
65-
className="fd-link"
66-
href="#"
67-
>
68-
link
69-
70-
<span
71-
className="sap-icon--arrow-right sap-icon--s"
72-
/>
73-
</a>
74-
</div>
75-
</div>
76-
`;
77-
78-
exports[`<Alert /> create basic alert 4`] = `
79-
<div>
80-
<div
81-
className="fd-alert fd-alert--warning"
82-
dir="rtl"
83-
id="j2ALl423"
84-
role="alert"
85-
>
86-
Default alert that cannot be dismissed
87-
</div>
88-
</div>
89-
`;
90-
9149
exports[`<Alert /> create non-dismissable alert 1`] = `
9250
<div>
9351
<div

‎src/Badge/Badge.Component.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@ import {
77
Header,
88
Description,
99
Import,
10-
Properties
10+
Properties,
11+
Playground
1112
} from '../';
12-
import { Playground } from '../documentation/Playground/Playground';
1313

1414
export const BadgeComponent = () => {
1515
const defaultBadgeCode = `<Badge>Default</Badge>

0 commit comments

Comments
 (0)