Feature/issue#45 transition to fiori fundamentals v1.3.1

package.json

@@ -27,7 +27,7 @@
         "eject": "react-scripts eject"
     },
     "devDependencies": {
-        "fundamental-ui": "^1.2.2",
+        "fiori-fundamentals": "^1.3.1",
         "gh-pages": "^2.0.1"
     },
     "browserslist": [

src/ActionBar/ActionBar.Component.js

@@ -8,32 +8,24 @@ export const ActionBarComponent = () => {
     <ActionBarBack />
     <ActionBarHeader title={'Page Title'} description={'Action Bar Description'} />
     <ActionBarActions>
-        <Button type="primary" size="l">
-            Button
-        </Button>
-        <Button type="main" size="l">
-            Button
-        </Button>
+        <Button>Button</Button>
+        <Button option="emphasized">Button</Button>
     </ActionBarActions>
 </ActionBar>`;
 
     const actionBarNoBackBtnCode = `<ActionBar>
     <ActionBarHeader title={'Page Title'} description={'Action Bar Description'} />
     <ActionBarActions>
-        <Button type="primary" size="l">
-            Button
-        </Button>
-        <Button type="main" size="l">
-            Button
-        </Button>
+        <Button>Button</Button>
+        <Button option="emphasized">Button</Button>
     </ActionBarActions>
 </ActionBar>`;
 
     const actionBarContextualCode = `<ActionBar>
     <ActionBarHeader title={'Page Title'} description={'Action Bar Description'} />
     <ActionBarActions>
         <Popover
-            control={<Button type="secondary" glyph="vertical-grip" />}
+            control={<Button option="light" glyph="vertical-grip" />}
             body={
                 <Menu>
                     <MenuList>
@@ -53,7 +45,7 @@ export const ActionBarComponent = () => {
     <ActionBarHeader title={'Action Bar with description and back button'} />
     <ActionBarActions>
         <Popover
-            control={<Button type="secondary" glyph="vertical-grip" />}
+            control={<Button option="light" glyph="vertical-grip" />}
             body={
                 <Menu>
                     <MenuList>
@@ -126,12 +118,8 @@ export const ActionBarComponent = () => {
                     <ActionBarBack />
                     <ActionBarHeader title={'Page Title'} description={'Action Bar Description'} />
                     <ActionBarActions>
-                        <Button type="primary" size="l">
-                            Button
-                        </Button>
-                        <Button type="main" size="l">
-                            Button
-                        </Button>
+                        <Button>Button</Button>
+                        <Button option="emphasized">Button</Button>
                     </ActionBarActions>
                 </ActionBar>
             </DocsTile>
@@ -144,12 +132,8 @@ export const ActionBarComponent = () => {
                 <ActionBar>
                     <ActionBarHeader title={'Page Title'} description={'Action Bar Description'} />
                     <ActionBarActions>
-                        <Button type="primary" size="l">
-                            Button
-                        </Button>
-                        <Button type="main" size="l">
-                            Button
-                        </Button>
+                        <Button>Button</Button>
+                        <Button option="emphasized">Button</Button>
                     </ActionBarActions>
                 </ActionBar>
             </DocsTile>
@@ -168,7 +152,7 @@ export const ActionBarComponent = () => {
                     <ActionBarHeader title={'Page Title'} description={'Action Bar Description'} />
                     <ActionBarActions>
                         <Popover
-                            control={<Button type="secondary" glyph="vertical-grip" />}
+                            control={<Button option="light" glyph="vertical-grip" />}
                             body={
                                 <Menu>
                                     <MenuList>
@@ -197,7 +181,7 @@ export const ActionBarComponent = () => {
                     />
                     <ActionBarActions>
                         <Popover
-                            control={<Button type="secondary" glyph="vertical-grip" />}
+                            control={<Button option="light" glyph="vertical-grip" />}
                             body={
                                 <Menu>
                                     <MenuList>
@@ -226,7 +210,7 @@ export const ActionBarComponent = () => {
                     />
                     <ActionBarActions>
                         <Popover
-                            control={<Button type="secondary" glyph="vertical-grip" />}
+                            control={<Button option="light" glyph="vertical-grip" />}
                             body={
                                 <Menu>
                                     <MenuList>

src/ActionBar/ActionBar.js

@@ -24,7 +24,7 @@ ActionBar.propTypes = {
 export const ActionBarBack = props => {
     return (
         <div class="fd-action-bar__back">
-            <button class=" fd-button--secondary fd-button--compact sap-icon--nav-back" />
+             <button class="fd-button--light fd-button--compact sap-icon--nav-back"></button>
         </div>
     );
 };

src/Alert/Alert.Component.js

@@ -1,63 +1,120 @@
-import React from 'react'
-import { Alert } from '../'
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../'
+import React from 'react';
+import { Alert } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../';
 import { Playground } from '../documentation/Playground/Playground';
 
 export const AlertComponent = () => {
-    const defaultAlertCode = `<Alert  dismissable={true} link="#" linkText="link">Default alert with a </Alert>`
+    const defaultAlertCode = `<Alert dismissable link="#" linkText="link">Default alert with a </Alert>
+
+<Alert dismissable linkText="link" rtl>تم. بسبب أمام وشعار ولم بـ. أحكم والكساد ما فقد. كل وعُرفت الإنزال مدن. انه </Alert>`;
 
-    const warningAlertCode = `<Alert type="warning" dismissable={true}>
+    const warningAlertCode = `<Alert type="warning" dismissable>
     <h3>A dismissible error type alert with template.</h3>
     <p>More information...</p>
-</Alert>`
+</Alert>
 
-    const errorAlertCode = `<Alert type="error"  dismissable={true} link="#" linkText="link">Error message with a </Alert>`
+<Alert type="warning" dismissable rtl>
+    تم. بسبب أمام وشعار ولم بـ. أحكم والكساد ما فقد. كل وعُرفت الإنزال مدن. انه
+</Alert>`;
+
+    const errorAlertCode = ` <Alert type="error" dismissable link="#" linkText="link">
+    Error message with a
+</Alert>
+
+<Alert type="error" dismissable rtl>
+    تم. بسبب أمام وشعار ولم بـ. أحكم والكساد ما فقد. كل وعُرفت الإنزال مدن. انه
+</Alert>`;
 
     return (
         <div>
             <Header>Alert</Header>
-            <Description>Alerts provide messages within the application that are color-coded to emphasize the level of urgency.</Description>
+            <Description>
+                Alerts provide messages within the application that are color-coded to emphasize the level of urgency.
+            </Description>
             <Import module="Alert" path="/fundamental-react/src/" />
-            
+
             <Separator />
 
-            <Properties type="Inputs" properties=
-            {[
-                {name: 'type', description: 'String - Determines the type of alert - \'error\' (red) or \'warning\' (orange). Defaults to white if no type is provided.'}, 
-                {name: 'dismissible', description: 'Bool - Shows a dismissible button if set to true. Default is false.'}
-            ]}/>
-            <Properties type="Outputs" properties=
-            {[
-                {name: 'close', description: 'Emitted when the close button is clicked.'}
-            ]}/>
+            <Properties
+                type="Inputs"
+                properties={[
+                    {
+                        name: 'type',
+                        description:
+                            "String - Determines the type of alert - 'error' (red) or 'warning' (orange). Defaults to white if no type is provided."
+                    },
+                    {
+                        name: 'dismissible',
+                        description: 'bool - Shows a dismissible button if set to true. Default is false.'
+                    },
+                    {
+                        name: 'rtl',
+                        description: 'bool - Set to true to enable Right-to-Left support. Default is false.'
+                    }
+                ]}
+            />
+            <Properties
+                type="Outputs"
+                properties={[{ name: 'close', description: 'Emitted when the close button is clicked.' }]}
+            />
 
             <Separator />
 
             <h2>Default Alert</h2>
-            <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>
+            <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>
             <DocsTile>
-                <Alert dismissable={true} link="#" linkText="link">Default alert with a </Alert>
+                <Alert dismissable link="#" linkText=" link">
+                    Default alert with a {' '}
+                </Alert>
+                <br />
+                <Alert dismissable linkText="link" rtl>
+                    تم. بسبب أمام وشعار ولم بـ. أحكم والكساد ما فقد. كل وعُرفت الإنزال مدن. انه
+                </Alert>
             </DocsTile>
             <DocsText>{defaultAlertCode}</DocsText>
 
             <Separator />
 
             <h2>Warning Alert</h2>
-            <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>
+            <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>
             <DocsTile>
-                <Alert type="warning" dismissable={true}>
+                <Alert type="warning" dismissable>
                     <h3>A dismissible error type alert with template.</h3>
                     <p>More information...</p>
                 </Alert>
+
+                <br />
+
+                <Alert type="warning" dismissable rtl>
+                    تم. بسبب أمام وشعار ولم بـ. أحكم والكساد ما فقد. كل وعُرفت الإنزال مدن. انه
+                </Alert>
             </DocsTile>
             <DocsText>{warningAlertCode}</DocsText>
 
             <Separator />
 
             <h2>Error Alert</h2>
-            <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>
+            <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>
             <DocsTile>
-                <Alert type="error" dismissable={true} link="#" linkText="link" >Error message with a </Alert>
+                <Alert type="error" dismissable link="#" linkText=" link">
+                    Error message with a {' '}
+                </Alert>
+
+                <br />
+
+                <Alert type="error" dismissable rtl>
+                    تم. بسبب أمام وشعار ولم بـ. أحكم والكساد ما فقد. كل وعُرفت الإنزال مدن. انه
+                </Alert>
             </DocsTile>
             <DocsText>{errorAlertCode}</DocsText>
 
@@ -66,16 +123,24 @@ export const AlertComponent = () => {
             <Separator />
 
             <h2>Playground</h2>
-            <Playground component="alert" schema= {[{
+            <Playground
+                component="alert"
+                schema={[
+                    {
                         attribute: 'type',
                         typeOfAttribute: 'string',
                         enum: ['default', 'warning', 'error']
-                    }, {attribute: 'dismissable',
+                    },
+                    {
+                        attribute: 'dismissable',
                         typeOfAttribute: 'boolean'
-                    }]}>
-                <Alert type="default" dismissable={false} link="#" linkText="link">Default alert with a </Alert>
+                    }
+                ]}
+            >
+                <Alert type="default" dismissable={false} link="#" linkText="link">
+                    Default alert with a{' '}
+                </Alert>
             </Playground>
         </div>
     );
-}
-
+};

src/Alert/Alert.js

@@ -16,17 +16,27 @@ export class Alert extends Component {
     }
 
     render() {
-        const { type, link, linkText, dismissable, children } = this.props;
+        const { type, link, linkText, dismissable, rtl, children } = this.props;
         return (
             <div>
                 {
-                    this.state.isActive && <div className={`fd-alert${dismissable ? ' fd-alert--dismissible' : ''}${type ? ' fd-alert--' + type : ''}`} role="alert" id="j2ALl423">
+                    rtl ? (
+                        this.state.isActive && <div className={`fd-alert${dismissable ? ' fd-alert--dismissible' : ''}${type ? ' fd-alert--' + type : ''}`} role="alert" id="j2ALl423" dir="rtl">
                         {dismissable?<button className="fd-alert__close" aria-controls="j2ALl423" aria-label="Close" onClick={() => this.closeAlertHandler()}></button>:null}
                         {children}
                         {link ? (
                             <a href={link} className="fd-link">{linkText} <span className="sap-icon--arrow-right sap-icon--s"></span></a>
                         ) : undefined}
                     </div>
+                    ) : (
+                        this.state.isActive && <div className={`fd-alert${dismissable ? ' fd-alert--dismissible' : ''}${type ? ' fd-alert--' + type : ''}`} role="alert" id="j2ALl423">
+                        {dismissable?<button className="fd-alert__close" aria-controls="j2ALl423" aria-label="Close" onClick={() => this.closeAlertHandler()}></button>:null}
+                        {children}
+                        {link ? (
+                            <a href={link} className="fd-link">{linkText} <span className="sap-icon--arrow-right sap-icon--s"></span></a>
+                        ) : undefined}
+                    </div>
+                    )
                 }
             </div>
         );