From b3239165243f5bee1e7c1aeb2c1c1e4ae50d6ed2 Mon Sep 17 00:00:00 2001
From: "Taushanova-Atanasova, Inna" <inna.taushanova-atanasova@sap.com>
Date: Mon, 29 Oct 2018 16:45:23 -0400
Subject: [PATCH] Issue#14: refactor action bar

---
 src/ActionBar/ActionBar.Component.js | 244 +++++++++++++++++++++------
 src/ActionBar/ActionBar.js           |  61 ++++---
 src/index.js                         |  10 +-
 3 files changed, 242 insertions(+), 73 deletions(-)

diff --git a/src/ActionBar/ActionBar.Component.js b/src/ActionBar/ActionBar.Component.js
index 62895e03f..3f52334c3 100644
--- a/src/ActionBar/ActionBar.Component.js
+++ b/src/ActionBar/ActionBar.Component.js
@@ -1,30 +1,91 @@
 import React from 'react';
-import { ActionBar } from '../';
+import { ActionBar, ActionBarBack, ActionBarHeader, ActionBarActions } from '../';
 import { Button, Popover, Menu, MenuList, MenuItem } from '../';
 import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../';
 
 export const ActionBarComponent = () => {
-    const titleActionBarCode = `<ActionBar title="Page Title"/>`;
+    const actionBarBackBtnCode = `<ActionBar>
+    <ActionBarBack />
+    <ActionBarHeader title={'Page Title'} description={'Action Bar Description'} />
+    <ActionBarActions>
+        <Button type="primary" size="l">
+            Button
+        </Button>
+        <Button type="main" size="l">
+            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>
+    </ActionBarActions>
+</ActionBar>`;
 
-    const mainActionsActionBarCode = `<ActionBar title="Page Title" hasActions={true}>
-    <Button type="secondary">Cancel</Button>
-    <Button type="main">Save</Button>
+    const actionBarContextualCode = `<ActionBar>
+    <ActionBarHeader title={'Page Title'} description={'Action Bar Description'} />
+    <ActionBarActions>
+        <Popover
+            control={<Button type="secondary" glyph="vertical-grip" />}
+            body={
+                <Menu>
+                    <MenuList>
+                        <MenuItem url="/">Option 1</MenuItem>
+                        <MenuItem url="/">Option 2</MenuItem>
+                        <MenuItem url="/">Option 3</MenuItem>
+                        <MenuItem url="/">Option 4</MenuItem>
+                    </MenuList>
+                </Menu>
+            }
+        />
+    </ActionBarActions>
 </ActionBar>`;
 
-    const severalActionsActionBarCode = `<ActionBar title="Page Title" hasActions={true}>
-    <Popover
-        control={<Button type="secondary" glyph="vertical-grip" />}
-        body={
-            <Menu>
-                <MenuList>
-                    <MenuItem url="/">Option 1</MenuItem>
-                    <MenuItem url="/">Option 2</MenuItem>
-                    <MenuItem url="/">Option 3</MenuItem>
-                    <MenuItem url="/">Option 4</MenuItem>
-                </MenuList>
-            </Menu>
-        }
-    />
+    const mobileActionBarCode = `<ActionBar mobile={true}>
+    <ActionBarBack />
+    <ActionBarHeader title={'Action Bar with description and back button'} />
+    <ActionBarActions>
+        <Popover
+            control={<Button type="secondary" glyph="vertical-grip" />}
+            body={
+                <Menu>
+                    <MenuList>
+                        <MenuItem url="/">Option 1</MenuItem>
+                        <MenuItem url="/">Option 2</MenuItem>
+                        <MenuItem url="/">Option 3</MenuItem>
+                        <MenuItem url="/">Option 4</MenuItem>
+                    </MenuList>
+                </Menu>
+            }
+        />
+    </ActionBarActions>
+</ActionBar>`;
+
+    const mobileCustomWidthActionBarCode = `<ActionBar mobile={true} width="768px">
+    <ActionBarBack />
+    <ActionBarHeader title={'Action Bar with description and back button'} />
+    <ActionBarActions>
+        <Popover
+            control={<Button type="secondary" glyph="vertical-grip" />}
+            body={
+                <Menu>
+                    <MenuList>
+                        <MenuItem url="/">Option 1</MenuItem>
+                        <MenuItem url="/">Option 2</MenuItem>
+                        <MenuItem url="/">Option 3</MenuItem>
+                        <MenuItem url="/">Option 4</MenuItem>
+                    </MenuList>
+                </Menu>
+            }
+        />
+    </ActionBarActions>
 </ActionBar>`;
 
     return (
@@ -41,40 +102,58 @@ export const ActionBarComponent = () => {
             <Properties
                 type="Inputs"
                 properties={[
-                    { name: 'title', description: 'String (required) - Title of the action bar' },
+                    { name: 'mobile', description: 'bool - set to "true" for mobile view of the Action Bar.' },
+                    {
+                        name: 'width',
+                        description: 'string - the width of the Action Bar in mobile view. The default is 319px.'
+                    },
+                    {
+                        name: 'title',
+                        description: 'string - the title of the action bar. Specified in ActionBarHeader.'
+                    },
                     {
-                        name: 'hasActions',
-                        description: "Bool - when set to 'true' displays actions within the Action Bar."
+                        name: 'description',
+                        description: 'string - Action bar description. Specified in ActionBarHeader.'
                     }
                 ]}
             />
 
             <Separator />
 
-            <h2>Title</h2>
-            <Description>
-                The page title is displayed prominently in the Action Bar. This is helpful for the user to know exactly
-                where they are.
-            </Description>
+            <h2>Action bar with back button, description and action buttons.</h2>
             <DocsTile>
-                <ActionBar title="Page Title" />
+                <ActionBar>
+                    <ActionBarBack />
+                    <ActionBarHeader title={'Page Title'} description={'Action Bar Description'} />
+                    <ActionBarActions>
+                        <Button type="primary" size="l">
+                            Button
+                        </Button>
+                        <Button type="main" size="l">
+                            Button
+                        </Button>
+                    </ActionBarActions>
+                </ActionBar>
             </DocsTile>
-            <DocsText>{titleActionBarCode}</DocsText>
+            <DocsText>{actionBarBackBtnCode}</DocsText>
 
             <Separator />
 
-            <h2>Main Actions</h2>
-            <Description>
-                Display main actions within the Action bar. This allows for users to find important page actions in a
-                consistent area no matter what page they are on within the application.
-            </Description>
+            <h2>Action bar with no Back button</h2>
             <DocsTile>
-                <ActionBar title="Page Title" hasActions={true}>
-                    <Button type="secondary">Cancel</Button>
-                    <Button type="main">Save</Button>
+                <ActionBar>
+                    <ActionBarHeader title={'Page Title'} description={'Action Bar Description'} />
+                    <ActionBarActions>
+                        <Button type="primary" size="l">
+                            Button
+                        </Button>
+                        <Button type="main" size="l">
+                            Button
+                        </Button>
+                    </ActionBarActions>
                 </ActionBar>
             </DocsTile>
-            <DocsText>{mainActionsActionBarCode}</DocsText>
+            <DocsText>{actionBarNoBackBtnCode}</DocsText>
 
             <Separator />
 
@@ -85,23 +164,84 @@ export const ActionBarComponent = () => {
                 more than 3-4 actions. This also works well for a responsive/adaptive application.
             </Description>
             <DocsTile>
-                <ActionBar title="Page Title" hasActions={true}>
-                    <Popover
-                        control={<Button type="secondary" glyph="vertical-grip" />}
-                        body={
-                            <Menu>
-                                <MenuList>
-                                    <MenuItem url="/">Option 1</MenuItem>
-                                    <MenuItem url="/">Option 2</MenuItem>
-                                    <MenuItem url="/">Option 3</MenuItem>
-                                    <MenuItem url="/">Option 4</MenuItem>
-                                </MenuList>
-                            </Menu>
-                        }
+                <ActionBar>
+                    <ActionBarHeader title={'Page Title'} description={'Action Bar Description'} />
+                    <ActionBarActions>
+                        <Popover
+                            control={<Button type="secondary" glyph="vertical-grip" />}
+                            body={
+                                <Menu>
+                                    <MenuList>
+                                        <MenuItem url="/">Option 1</MenuItem>
+                                        <MenuItem url="/">Option 2</MenuItem>
+                                        <MenuItem url="/">Option 3</MenuItem>
+                                        <MenuItem url="/">Option 4</MenuItem>
+                                    </MenuList>
+                                </Menu>
+                            }
+                        />
+                    </ActionBarActions>
+                </ActionBar>
+            </DocsTile>
+            <DocsText>{actionBarContextualCode}</DocsText>
+
+            <Separator />
+
+            <h2>Action bar mobile view</h2>
+            <DocsTile>
+                <ActionBar mobile={true}>
+                    <ActionBarBack />
+                    <ActionBarHeader
+                        title={'Action Bar with description and back button'}
+                        description={'Action Bar Description'}
+                    />
+                    <ActionBarActions>
+                        <Popover
+                            control={<Button type="secondary" glyph="vertical-grip" />}
+                            body={
+                                <Menu>
+                                    <MenuList>
+                                        <MenuItem url="/">Option 1</MenuItem>
+                                        <MenuItem url="/">Option 2</MenuItem>
+                                        <MenuItem url="/">Option 3</MenuItem>
+                                        <MenuItem url="/">Option 4</MenuItem>
+                                    </MenuList>
+                                </Menu>
+                            }
+                        />
+                    </ActionBarActions>
+                </ActionBar>
+            </DocsTile>
+            <DocsText>{mobileActionBarCode}</DocsText>
+
+            <Separator />
+
+            <h2>Action bar mobile view with custom width</h2>
+            <DocsTile>
+                <ActionBar mobile={true} width="768px">
+                    <ActionBarBack />
+                    <ActionBarHeader
+                        title={'Action Bar with description and back button'}
+                        description={'Action Bar Description'}
                     />
+                    <ActionBarActions>
+                        <Popover
+                            control={<Button type="secondary" glyph="vertical-grip" />}
+                            body={
+                                <Menu>
+                                    <MenuList>
+                                        <MenuItem url="/">Option 1</MenuItem>
+                                        <MenuItem url="/">Option 2</MenuItem>
+                                        <MenuItem url="/">Option 3</MenuItem>
+                                        <MenuItem url="/">Option 4</MenuItem>
+                                    </MenuList>
+                                </Menu>
+                            }
+                        />
+                    </ActionBarActions>
                 </ActionBar>
             </DocsTile>
-            <DocsText>{severalActionsActionBarCode}</DocsText>
+            <DocsText>{mobileCustomWidthActionBarCode}</DocsText>
 
             <Separator />
         </div>
diff --git a/src/ActionBar/ActionBar.js b/src/ActionBar/ActionBar.js
index 2800d0e00..02302f05d 100644
--- a/src/ActionBar/ActionBar.js
+++ b/src/ActionBar/ActionBar.js
@@ -1,29 +1,50 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export const ActionBar = (props) => {
-    const { title, hasActions, children } = props;
+export const ActionBar = props => {
+    const { mobile, width, children } = props;
+
     return (
-        <div className="fd-action-bar">
-            <div className="fd-action-bar__header">
-                <h1 className="fd-action-bar__title">
-                    {title}
-                </h1>
-            </div>
-            {
-                hasActions ? (
-                    <div className="fd-action-bar__actions">
-                { children }
-                    </div>
-                ) : null
-            }
-        </div>
+        <React.Fragment>
+            {mobile ? (
+                <div style={{ width: width ? width : '319px' }}>
+                    <div className="fd-action-bar">{children}</div>
+                </div>
+            ) : (
+                <div className="fd-action-bar">{children}</div>
+            )}
+        </React.Fragment>
     );
-}
+};
 
 ActionBar.propTypes = {
-    title: PropTypes.string.isRequired,
-    hasActions: PropTypes.bool
-}
+    mobile: PropTypes.bool
+};
+
+export const ActionBarBack = props => {
+    return (
+        <div class="fd-action-bar__back">
+            <button class=" fd-button--secondary fd-button--compact sap-icon--nav-back" />
+        </div>
+    );
+};
+
+export const ActionBarHeader = props => {
+    const { title, description } = props;
+    return (
+        <div class="fd-action-bar__header">
+            <h1 class="fd-action-bar__title">{title}</h1>
+            <p class="fd-action-bar__description">{description} </p>
+        </div>
+    );
+};
 
+ActionBarHeader.propTypes = {
+    title: PropTypes.string,
+    description: PropTypes.string
+};
 
+export const ActionBarActions = props => {
+    const { children } = props;
+    return <div class="fd-action-bar__actions">{children}</div>;
+};
diff --git a/src/index.js b/src/index.js
index 762ab9522..b9ae0d1fd 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,7 +4,12 @@ import './index.css';
 import App from './App';
 import registerServiceWorker from './registerServiceWorker';
 
-import { ActionBar } from '../src/ActionBar/ActionBar';
+import {
+    ActionBar,
+    ActionBarBack,
+    ActionBarHeader,
+    ActionBarActions
+} from '../src/ActionBar/ActionBar';
 import { Alert } from '../src/Alert/Alert';
 import { Badge, Label, Status } from '../src/Badge/Badge';
 import { Breadcrumb, BreadcrumbItem } from '../src/Breadcrumb/Breadcrumb';
@@ -69,6 +74,9 @@ export {
     Properties,
     Playground,
     ActionBar,
+    ActionBarBack,
+    ActionBarHeader,
+    ActionBarActions,
     Alert,
     Badge,
     Label,