Skip to content

Commit d6176e5

Browse files
Merge pull request #50 from SAP/feature/Issue#45-transition-to-fiori-fundamentals-v1.3.1
Feature/issue#45 transition to fiori fundamentals v1.3.1
2 parents cc764bb + 8d17973 commit d6176e5

39 files changed

+2098
-8001
lines changed

package-lock.json

Lines changed: 6 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
"eject": "react-scripts eject"
2828
},
2929
"devDependencies": {
30-
"fundamental-ui": "^1.2.2",
30+
"fiori-fundamentals": "^1.3.1",
3131
"gh-pages": "^2.0.1"
3232
},
3333
"browserslist": [

src/ActionBar/ActionBar.Component.js

Lines changed: 13 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -8,32 +8,24 @@ export const ActionBarComponent = () => {
88
<ActionBarBack />
99
<ActionBarHeader title={'Page Title'} description={'Action Bar Description'} />
1010
<ActionBarActions>
11-
<Button type="primary" size="l">
12-
Button
13-
</Button>
14-
<Button type="main" size="l">
15-
Button
16-
</Button>
11+
<Button>Button</Button>
12+
<Button option="emphasized">Button</Button>
1713
</ActionBarActions>
1814
</ActionBar>`;
1915

2016
const actionBarNoBackBtnCode = `<ActionBar>
2117
<ActionBarHeader title={'Page Title'} description={'Action Bar Description'} />
2218
<ActionBarActions>
23-
<Button type="primary" size="l">
24-
Button
25-
</Button>
26-
<Button type="main" size="l">
27-
Button
28-
</Button>
19+
<Button>Button</Button>
20+
<Button option="emphasized">Button</Button>
2921
</ActionBarActions>
3022
</ActionBar>`;
3123

3224
const actionBarContextualCode = `<ActionBar>
3325
<ActionBarHeader title={'Page Title'} description={'Action Bar Description'} />
3426
<ActionBarActions>
3527
<Popover
36-
control={<Button type="secondary" glyph="vertical-grip" />}
28+
control={<Button option="light" glyph="vertical-grip" />}
3729
body={
3830
<Menu>
3931
<MenuList>
@@ -53,7 +45,7 @@ export const ActionBarComponent = () => {
5345
<ActionBarHeader title={'Action Bar with description and back button'} />
5446
<ActionBarActions>
5547
<Popover
56-
control={<Button type="secondary" glyph="vertical-grip" />}
48+
control={<Button option="light" glyph="vertical-grip" />}
5749
body={
5850
<Menu>
5951
<MenuList>
@@ -126,12 +118,8 @@ export const ActionBarComponent = () => {
126118
<ActionBarBack />
127119
<ActionBarHeader title={'Page Title'} description={'Action Bar Description'} />
128120
<ActionBarActions>
129-
<Button type="primary" size="l">
130-
Button
131-
</Button>
132-
<Button type="main" size="l">
133-
Button
134-
</Button>
121+
<Button>Button</Button>
122+
<Button option="emphasized">Button</Button>
135123
</ActionBarActions>
136124
</ActionBar>
137125
</DocsTile>
@@ -144,12 +132,8 @@ export const ActionBarComponent = () => {
144132
<ActionBar>
145133
<ActionBarHeader title={'Page Title'} description={'Action Bar Description'} />
146134
<ActionBarActions>
147-
<Button type="primary" size="l">
148-
Button
149-
</Button>
150-
<Button type="main" size="l">
151-
Button
152-
</Button>
135+
<Button>Button</Button>
136+
<Button option="emphasized">Button</Button>
153137
</ActionBarActions>
154138
</ActionBar>
155139
</DocsTile>
@@ -168,7 +152,7 @@ export const ActionBarComponent = () => {
168152
<ActionBarHeader title={'Page Title'} description={'Action Bar Description'} />
169153
<ActionBarActions>
170154
<Popover
171-
control={<Button type="secondary" glyph="vertical-grip" />}
155+
control={<Button option="light" glyph="vertical-grip" />}
172156
body={
173157
<Menu>
174158
<MenuList>
@@ -197,7 +181,7 @@ export const ActionBarComponent = () => {
197181
/>
198182
<ActionBarActions>
199183
<Popover
200-
control={<Button type="secondary" glyph="vertical-grip" />}
184+
control={<Button option="light" glyph="vertical-grip" />}
201185
body={
202186
<Menu>
203187
<MenuList>
@@ -226,7 +210,7 @@ export const ActionBarComponent = () => {
226210
/>
227211
<ActionBarActions>
228212
<Popover
229-
control={<Button type="secondary" glyph="vertical-grip" />}
213+
control={<Button option="light" glyph="vertical-grip" />}
230214
body={
231215
<Menu>
232216
<MenuList>

src/ActionBar/ActionBar.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ ActionBar.propTypes = {
2424
export const ActionBarBack = props => {
2525
return (
2626
<div class="fd-action-bar__back">
27-
<button class=" fd-button--secondary fd-button--compact sap-icon--nav-back" />
27+
<button class="fd-button--light fd-button--compact sap-icon--nav-back"></button>
2828
</div>
2929
);
3030
};

src/Alert/Alert.Component.js

Lines changed: 95 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,120 @@
1-
import React from 'react'
2-
import { Alert } from '../'
3-
import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../'
1+
import React from 'react';
2+
import { Alert } from '../';
3+
import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../';
44
import { Playground } from '../documentation/Playground/Playground';
55

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

9-
const warningAlertCode = `<Alert type="warning" dismissable={true}>
11+
const warningAlertCode = `<Alert type="warning" dismissable>
1012
<h3>A dismissible error type alert with template.</h3>
1113
<p>More information...</p>
12-
</Alert>`
14+
</Alert>
1315
14-
const errorAlertCode = `<Alert type="error" dismissable={true} link="#" linkText="link">Error message with a </Alert>`
16+
<Alert type="warning" dismissable rtl>
17+
تم. بسبب أمام وشعار ولم بـ. أحكم والكساد ما فقد. كل وعُرفت الإنزال مدن. انه
18+
</Alert>`;
19+
20+
const errorAlertCode = ` <Alert type="error" dismissable link="#" linkText="link">
21+
Error message with a
22+
</Alert>
23+
24+
<Alert type="error" dismissable rtl>
25+
تم. بسبب أمام وشعار ولم بـ. أحكم والكساد ما فقد. كل وعُرفت الإنزال مدن. انه
26+
</Alert>`;
1527

1628
return (
1729
<div>
1830
<Header>Alert</Header>
19-
<Description>Alerts provide messages within the application that are color-coded to emphasize the level of urgency.</Description>
31+
<Description>
32+
Alerts provide messages within the application that are color-coded to emphasize the level of urgency.
33+
</Description>
2034
<Import module="Alert" path="/fundamental-react/src/" />
21-
35+
2236
<Separator />
2337

24-
<Properties type="Inputs" properties=
25-
{[
26-
{name: 'type', description: 'String - Determines the type of alert - \'error\' (red) or \'warning\' (orange). Defaults to white if no type is provided.'},
27-
{name: 'dismissible', description: 'Bool - Shows a dismissible button if set to true. Default is false.'}
28-
]}/>
29-
<Properties type="Outputs" properties=
30-
{[
31-
{name: 'close', description: 'Emitted when the close button is clicked.'}
32-
]}/>
38+
<Properties
39+
type="Inputs"
40+
properties={[
41+
{
42+
name: 'type',
43+
description:
44+
"String - Determines the type of alert - 'error' (red) or 'warning' (orange). Defaults to white if no type is provided."
45+
},
46+
{
47+
name: 'dismissible',
48+
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.'
53+
}
54+
]}
55+
/>
56+
<Properties
57+
type="Outputs"
58+
properties={[{ name: 'close', description: 'Emitted when the close button is clicked.' }]}
59+
/>
3360

3461
<Separator />
3562

3663
<h2>Default Alert</h2>
37-
<Description>The alert provides information that is useful and relevant, but not critical. It can also provide feedback that an action has been executed. The user will need to dismiss the message.</Description>
64+
<Description>
65+
The alert provides information that is useful and relevant, but not critical. It can also provide
66+
feedback that an action has been executed. The user will need to dismiss the message.
67+
</Description>
3868
<DocsTile>
39-
<Alert dismissable={true} link="#" linkText="link">Default alert with a </Alert>
69+
<Alert dismissable link="#" linkText=" link">
70+
Default alert with a {' '}
71+
</Alert>
72+
<br />
73+
<Alert dismissable linkText="link" rtl>
74+
تم. بسبب أمام وشعار ولم بـ. أحكم والكساد ما فقد. كل وعُرفت الإنزال مدن. انه
75+
</Alert>
4076
</DocsTile>
4177
<DocsText>{defaultAlertCode}</DocsText>
4278

4379
<Separator />
4480

4581
<h2>Warning Alert</h2>
46-
<Description>The alert warns of potential issues, but the user can still continue. The user will need to dismiss the message. Apply type="warning".</Description>
82+
<Description>
83+
The alert warns of potential issues, but the user can still continue. The user will need to dismiss the
84+
message. Apply type="warning".
85+
</Description>
4786
<DocsTile>
48-
<Alert type="warning" dismissable={true}>
87+
<Alert type="warning" dismissable>
4988
<h3>A dismissible error type alert with template.</h3>
5089
<p>More information...</p>
5190
</Alert>
91+
92+
<br />
93+
94+
<Alert type="warning" dismissable rtl>
95+
تم. بسبب أمام وشعار ولم بـ. أحكم والكساد ما فقد. كل وعُرفت الإنزال مدن. انه
96+
</Alert>
5297
</DocsTile>
5398
<DocsText>{warningAlertCode}</DocsText>
5499

55100
<Separator />
56101

57102
<h2>Error Alert</h2>
58-
<Description>This alert is triggered after the user entered data incorrectly or a system error has occurred. It should interrupt the user. A final action such as Submit cannot be carried out until the user has rectified the error. The user will need to dismiss the message. Apply type="error".</Description>
103+
<Description>
104+
This alert is triggered after the user entered data incorrectly or a system error has occurred. It
105+
should interrupt the user. A final action such as Submit cannot be carried out until the user has
106+
rectified the error. The user will need to dismiss the message. Apply type="error".
107+
</Description>
59108
<DocsTile>
60-
<Alert type="error" dismissable={true} link="#" linkText="link" >Error message with a </Alert>
109+
<Alert type="error" dismissable link="#" linkText=" link">
110+
Error message with a {' '}
111+
</Alert>
112+
113+
<br />
114+
115+
<Alert type="error" dismissable rtl>
116+
تم. بسبب أمام وشعار ولم بـ. أحكم والكساد ما فقد. كل وعُرفت الإنزال مدن. انه
117+
</Alert>
61118
</DocsTile>
62119
<DocsText>{errorAlertCode}</DocsText>
63120

@@ -66,16 +123,24 @@ export const AlertComponent = () => {
66123
<Separator />
67124

68125
<h2>Playground</h2>
69-
<Playground component="alert" schema= {[{
126+
<Playground
127+
component="alert"
128+
schema={[
129+
{
70130
attribute: 'type',
71131
typeOfAttribute: 'string',
72132
enum: ['default', 'warning', 'error']
73-
}, {attribute: 'dismissable',
133+
},
134+
{
135+
attribute: 'dismissable',
74136
typeOfAttribute: 'boolean'
75-
}]}>
76-
<Alert type="default" dismissable={false} link="#" linkText="link">Default alert with a </Alert>
137+
}
138+
]}
139+
>
140+
<Alert type="default" dismissable={false} link="#" linkText="link">
141+
Default alert with a{' '}
142+
</Alert>
77143
</Playground>
78144
</div>
79145
);
80-
}
81-
146+
};

src/Alert/Alert.js

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,27 @@ export class Alert extends Component {
1616
}
1717

1818
render() {
19-
const { type, link, linkText, dismissable, children } = this.props;
19+
const { type, link, linkText, dismissable, rtl, children } = this.props;
2020
return (
2121
<div>
2222
{
23-
this.state.isActive && <div className={`fd-alert${dismissable ? ' fd-alert--dismissible' : ''}${type ? ' fd-alert--' + type : ''}`} role="alert" id="j2ALl423">
23+
rtl ? (
24+
this.state.isActive && <div className={`fd-alert${dismissable ? ' fd-alert--dismissible' : ''}${type ? ' fd-alert--' + type : ''}`} role="alert" id="j2ALl423" dir="rtl">
2425
{dismissable?<button className="fd-alert__close" aria-controls="j2ALl423" aria-label="Close" onClick={() => this.closeAlertHandler()}></button>:null}
2526
{children}
2627
{link ? (
2728
<a href={link} className="fd-link">{linkText} <span className="sap-icon--arrow-right sap-icon--s"></span></a>
2829
) : undefined}
2930
</div>
31+
) : (
32+
this.state.isActive && <div className={`fd-alert${dismissable ? ' fd-alert--dismissible' : ''}${type ? ' fd-alert--' + type : ''}`} role="alert" id="j2ALl423">
33+
{dismissable?<button className="fd-alert__close" aria-controls="j2ALl423" aria-label="Close" onClick={() => this.closeAlertHandler()}></button>:null}
34+
{children}
35+
{link ? (
36+
<a href={link} className="fd-link">{linkText} <span className="sap-icon--arrow-right sap-icon--s"></span></a>
37+
) : undefined}
38+
</div>
39+
)
3040
}
3141
</div>
3242
);

0 commit comments

Comments
 (0)