empower-container 0.1.8 → 0.1.11

package/README.md

@@ -7,7 +7,7 @@
 ## 1) Menubar
 ###  Implementation
 ```js
-import { MenuBar } from 'empower-container';
+import { MenuBar } from 'empoower-container';
 ```
 ### Options
 
@@ -19,6 +19,39 @@ config: {
     iconType: ['check', "back", 'standard']
 }
 ```
+```js
+mainButton: {
+    show: true,
+    label: 'File a Request',
+    icon: SVG_ADD,
+    actions: [
+        {
+            
+            label: "File Leave",
+            action: "leave",       // string optional
+            icon: SVG_SUBMIT
+        },
+        {
+            label: "File Overtime",
+            action: "overtime",       // string optional
+            icon: SVG_SUBMIT
+        },
+
+        {
+            label: "File Toil",
+            action: "toil",       // string optional
+            icon: SVG_SUBMIT
+        },
+
+        {
+            label: "File Amendment",
+            action: "amendment",       // string optional
+            icon: SVG_SUBMIT
+        }
+    ]
+}
+```
+
 ```js
 button {
     show: true
@@ -135,6 +168,7 @@ info: 'Sample Information'
 ```html
  <MenuBar
     config={menubar.config}
+    mainButton={menubar.mainButton}
     button={menubar.button}
     pagination={menubar.pagination}
     pivot={menubar.pivot}
@@ -156,7 +190,7 @@ info: 'Sample Information'
 ## 2) Modal
 ### Implementation
 ```js
-import { Modal } from 'empower-container';
+import { Modal } from 'empoower-container';
 ```
 ### Options
 
@@ -172,6 +206,39 @@ config: {
     modalSize: 'lg'
 }
 ```
+```js
+mainButton: {
+    show: true,
+    label: 'File a Request',
+    icon: SVG_ADD,
+    actions: [
+        {
+            
+            label: "File Leave",
+            action: "leave",       // string optional
+            icon: SVG_SUBMIT
+        },
+        {
+            label: "File Overtime",
+            action: "overtime",       // string optional
+            icon: SVG_SUBMIT
+        },
+
+        {
+            label: "File Toil",
+            action: "toil",       // string optional
+            icon: SVG_SUBMIT
+        },
+
+        {
+            label: "File Amendment",
+            action: "amendment",       // string optional
+            icon: SVG_SUBMIT
+        }
+    ]
+}
+```
+
 ```js    
 button {
     show: true
@@ -287,6 +354,7 @@ info: 'Sample Information'
 ```html
 <Modal
     config={menubar.config}
+    mainButton={menubar.mainButton}
     button={menubar.button}
     pagination={menubar.pagination}
     pivot={menubar.pivot}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "empower-container",
-  "version": "0.1.8",
+  "version": "0.1.11",
   "private": false,
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
@@ -36,7 +36,7 @@
     "dist": "npm run  build:esm && npm run  build:cjs && npm run copy-files",
     "build:esm": "tsc -b src/main/",
     "build:cjs": "tsc -p src/main/tsconfig.common.json",
-    "copy-files": "cp -r ./src/scss/ ./dist/",
+    "copy-files": "cp -r ./src/scss/ ./dist/ && cp -r ./src/main/assets/ ./dist/",
     "dev": "npx tsc -p src/sample/tsconfig.json -w"
   },
   "eslintConfig": {

package/src/main/Information.js

@@ -24,6 +24,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
+var Asset_1 = require("./assets/Asset");
 var Information = function (_a) {
     var items = _a.items, listRow = _a.listRow, desc = _a.desc, title = _a.title, hide = _a.hide;
     var _b = (0, react_1.useState)(null), rowAnchorEl = _b[0], setRowAnchorEl = _b[1];
@@ -54,7 +55,7 @@ var Information = function (_a) {
                     react_1.default.createElement("div", { className: "em-popover-i-category", onClick: function (event) { return showRowDetails(event, key); } },
                         react_1.default.createElement("div", null,
                             react_1.default.createElement("h6", null, item)),
-                        rowAnchorEl === key ? (react_1.default.createElement("img", { src: "/images/icons/icon-arrowup-gray.svg", alt: "" })) : (react_1.default.createElement("img", { src: "/images/icons/icon-arrowdown-gray.svg", alt: "" }))),
+                        rowAnchorEl === key ? (Asset_1.SVG_ARROW_UP) : (Asset_1.SVG_ARROWDOWN)),
                     rowAnchorEl === key ? (react_1.default.createElement("div", { className: "em-popover-i-details" }, item === 'COMPANY POLICY' ? (typeof items != 'undefined' && typeof items.companyPolicy != 'undefined' && items.companyPolicy ? renderHtml(items.companyPolicy) : '') :
                         (item === 'SYSTEM POLICY' ? (typeof items != 'undefined' && typeof items.systemPolicy != 'undefined' && items.systemPolicy ? renderHtml(items.systemPolicy) : '') :
                             (typeof items != 'undefined' && typeof items.instruction != 'undefined' && items.instruction ? renderHtml(items.instruction) : '')))) : null)); })) : null) : null))));

package/src/main/Information.tsx

@@ -1,5 +1,7 @@
 
 import React, { useState } from 'react';
+import {SVG_ARROWDOWN, SVG_ARROW_UP} from  './assets/Asset';
+
 // @ts-ignore
 // import renderHtml from 'react-render-html';
 
@@ -69,7 +71,7 @@ const Information: React.FunctionComponent<IInformationProps> = ({ items, listRo
                                                 </div>
 
                                                 {
-                                                    rowAnchorEl === key ? (<img src="/images/icons/icon-arrowup-gray.svg" alt="" />) : (<img src="/images/icons/icon-arrowdown-gray.svg" alt="" />)
+                                                    rowAnchorEl === key ? (SVG_ARROW_UP ) : (SVG_ARROWDOWN)
                                                 }
                                             </div>
                                             {

package/src/main/MenuBar.js

@@ -490,13 +490,14 @@ var MenuBar = function (_a) {
                     config && config.addedTitle ? (react_1.default.createElement("p", null, config.addedTitle)) : null),
                 react_1.default.createElement("div", { className: "em-beltleft-cta" },
                     mainButton && mainButton.show ? (mainButton.actions && mainButton.actions.constructor === Array && mainButton.actions.length > 1 ? (react_1.default.createElement(react_1.Fragment, null,
-                        react_1.default.createElement("a", { className: "belt-action-main", id: "main-button", href: "#", onClick: function (event) { return popoverRequestHandler(event, 'main-button'); } },
-                            react_1.default.createElement("div", { className: "belt-icon" }, mainButton.icon ? mainButton.icon : ''),
-                            react_1.default.createElement("span", null, mainButton.label ? mainButton.label : 'File a Request')),
-                        react_1.default.createElement(Select_1.Popover, { id: "mainButtonPopover", open: Boolean(mainButtonPopover), onClick: function (event) { return popoverRequestHandler(event, 'main-button'); }, className: Boolean(dropdownPopover) ? 'open-popover' : '' },
-                            react_1.default.createElement("div", { className: "popover em-popover-list" }, mainButton.actions.map(function (btn, idx) {
-                                return react_1.default.createElement("a", { href: "#", key: idx, onClick: function (event) { return actionRequestHandler(event, 'main-button', btn.action); } }, btn.label);
-                            }))))) : mainButton.actions && mainButton.actions.constructor === Array && mainButton.actions.length === 1 ? (mainButton.actions.map(function (btn, idx) {
+                        react_1.default.createElement("div", { className: "em-dropdown" },
+                            react_1.default.createElement("a", { className: "em-button belt-action-main", id: "main-button", href: "#", onClick: function (event) { return popoverRequestHandler(event, 'main-button'); } },
+                                react_1.default.createElement("div", { className: "belt-icon" }, mainButton.icon ? mainButton.icon : ''),
+                                react_1.default.createElement("span", null, mainButton.label ? mainButton.label : 'File a Request')),
+                            react_1.default.createElement(Select_1.Popover, { id: "mainButtonPopover", open: Boolean(mainButtonPopover), onClick: function (event) { return popoverRequestHandler(event, 'main-button'); }, className: Boolean(dropdownPopover) ? 'open-popover' : '' },
+                                react_1.default.createElement("div", { className: "popover em-popover-list" }, mainButton.actions.map(function (btn, idx) {
+                                    return react_1.default.createElement("a", { href: "#", key: idx, onClick: function (event) { return actionRequestHandler(event, 'main-button', btn.action); } }, btn.label);
+                                })))))) : mainButton.actions && mainButton.actions.constructor === Array && mainButton.actions.length === 1 ? (mainButton.actions.map(function (btn, idx) {
                         return (react_1.default.createElement("a", { className: btn.class ? 'belt-action ' + btn.class : 'belt-action', href: "#", key: idx, onClick: function (event) { return actionRequestHandler(event, 'main-button', btn.action); } },
                             react_1.default.createElement("div", { className: "belt-icon " }, btn.icon ? btn.icon : ''),
                             react_1.default.createElement("span", null, btn.label ? btn.label : '')));
@@ -504,14 +505,14 @@ var MenuBar = function (_a) {
                     // Button Actions Configuration
                     button && button.show && button.show.constructor === Boolean &&
                         button.actions && button.actions.constructor === Array && button.actions.length > 0 ? (button.actions.map(function (btn, idx) {
-                        return (react_1.default.createElement("a", { className: btn.class ? btn.class : 'belt-action' + ' ' + (idx === 0 ? 'is-primary' : ''), href: "#", key: idx, onClick: function (event) { return actionRequestHandler(event, 'button', btn.action); }, "data-testid": "menubar-button" },
+                        return (react_1.default.createElement("a", { className: btn.class ? btn.class : ' belt-action' + ' ' + (idx === 0 ? 'is-primary' : ''), href: "#", key: idx, onClick: function (event) { return actionRequestHandler(event, 'button', btn.action); }, "data-testid": "menubar-button" },
                             react_1.default.createElement("div", { className: "belt-icon belt-buttons" }, btn.icon ? btn.icon : ''),
                             react_1.default.createElement("span", { "data-testid": 'button-action-' + btn.action }, btn.label ? btn.label : '')));
                     })) : null,
                     // UndoButton Actions Configuration
                     undoButton && undoButton.show && !undoButton.isFooter &&
                         undoButton.actions && undoButton.actions.constructor === Array && undoButton.actions.length > 0 ? (undoButton.actions.map(function (btn, idx) {
-                        return seconds > 0 || (btn.timer !== undefined) ? (react_1.default.createElement("a", __assign({ className: btn.class ? btn.class : 'belt-action' + ' ' + (idx === 0 ? 'is-primary' : '') + (btn.disabled === true ? ' is-disabled' : ' button outline button-undo'), href: "#", "data-testid": "undo-button-".concat(btn.action), key: idx }, (btn.disabled === true ? { onClick: function (event) { event.preventDefault(); } } : { onClick: function (event) { return actionRequestHandler(event, 'undo-button', btn.action); } })),
+                        return seconds > 0 || (btn.timer !== undefined) ? (react_1.default.createElement("a", __assign({ className: btn.class ? btn.class : 'belt-action' + ' ' + (idx === 0 ? 'is-primary' : '') + (btn.disabled === true ? ' is-disabled' : ' em-button outline button-undo'), href: "#", "data-testid": "undo-button-".concat(btn.action), key: idx }, (btn.disabled === true ? { onClick: function (event) { event.preventDefault(); } } : { onClick: function (event) { return actionRequestHandler(event, 'undo-button', btn.action); } })),
                             react_1.default.createElement("div", { className: "belt-icon" }, btn.icon ? btn.icon : ''),
                             react_1.default.createElement("span", { "data-testid": "undo-button-text" }, btn.label ? ("".concat(btn.label, " ").concat(btn.timer !== undefined && btn.timer.constructor === Number && seconds > 0 ? ("in ".concat(seconds, "s")) : '')) : ''))) : null;
                     })) : null)),
@@ -636,13 +637,13 @@ var MenuBar = function (_a) {
         react_1.default.createElement("div", { className: "em-card-footer" },
             buttonFooter && buttonFooter.show && buttonFooter.actions.length > 0 &&
                 react_1.default.createElement("div", { className: buttonFooter.className }, buttonFooter.actions.map(function (btn, idx) { return (btn.show &&
-                    react_1.default.createElement("a", __assign({ className: 'button ' + btn.className, href: "#", key: idx }, (btn.disabled === true ? { onClick: function (event) { event.preventDefault(); } } : { onClick: function (event) { return actionRequestHandler(event, 'button', btn.action); } }), { "data-testid": btn.id && btn.id.constructor === String ? btn.id : 'default-button-footer' }),
+                    react_1.default.createElement("a", __assign({ className: 'em-button ' + btn.className, href: "#", key: idx }, (btn.disabled === true ? { onClick: function (event) { event.preventDefault(); } } : { onClick: function (event) { return actionRequestHandler(event, 'button', btn.action); } }), { "data-testid": btn.id && btn.id.constructor === String ? btn.id : 'default-button-footer' }),
                         react_1.default.createElement("div", { className: "icon" }, btn.icon ? btn.icon : ''),
                         react_1.default.createElement("span", { "data-testid": 'button-action-' + btn.action }, btn.label ? btn.label : ''))); })),
             // UndoButton Actions Configuration
             undoButton && undoButton.show && undoButton.isFooter &&
                 undoButton.actions && undoButton.actions.constructor === Array && undoButton.actions.length > 0 ? (undoButton.actions.map(function (btn, idx) {
-                return seconds > 0 || (btn.timer !== undefined) ? (react_1.default.createElement("a", __assign({ className: btn.class ? btn.class : 'button ' + ' ' + (idx === 0 ? 'disabled' : 'outline button-undo') + (btn.disabled === true ? ' is-disabled button-undo' : ''), href: "#", "data-testid": "undo-button-".concat(btn.action), key: idx }, (btn.disabled === true ? { onClick: function (event) { event.preventDefault(); } } : { onClick: function (event) { return actionRequestHandler(event, 'undo-button', btn.action); } })),
+                return seconds > 0 || (btn.timer !== undefined) ? (react_1.default.createElement("a", __assign({ className: btn.class ? btn.class : 'em-button  ' + ' ' + (idx === 0 ? 'disabled' : 'outline button-undo') + (btn.disabled === true ? ' is-disabled button-undo' : ''), href: "#", "data-testid": "undo-button-".concat(btn.action), key: idx }, (btn.disabled === true ? { onClick: function (event) { event.preventDefault(); } } : { onClick: function (event) { return actionRequestHandler(event, 'undo-button', btn.action); } })),
                     react_1.default.createElement("div", { className: "belt-icon" }, btn.icon ? btn.icon : ''),
                     react_1.default.createElement("span", { "data-testid": "undo-button-text" }, btn.label ? ("".concat(btn.label, " ").concat(btn.timer !== undefined && btn.timer.constructor === Number && seconds > 0 ? ("in ".concat(seconds, "s")) : '')) : ''))) : null;
             })) : null)));

package/src/main/MenuBar.tsx

@@ -606,22 +606,24 @@ const MenuBar: React.FunctionComponent<IMenuBarProps> = ({ config, info, button,
                             mainButton && mainButton.show ? (
                                 mainButton.actions && mainButton.actions.constructor === Array && mainButton.actions.length > 1 ? (
                                     <Fragment>
-                                        <a className="belt-action-main" id="main-button" href="#" onClick={event => popoverRequestHandler(event, 'main-button')}>
-                                            <div className="belt-icon">{mainButton.icon ? mainButton.icon : ''}</div>
-                                            <span>{mainButton.label ? mainButton.label : 'File a Request'}</span>
-                                        </a>
-                                        <Popover
-                                            id="mainButtonPopover"
-                                            open={Boolean(mainButtonPopover)}
-                                            onClick={event => popoverRequestHandler(event, 'main-button')}
-                                            className={Boolean(dropdownPopover) ? 'open-popover' : ''}
-                                        >
-                                            <div className="popover em-popover-list">
-                                                {mainButton.actions.map((btn: any, idx: number) =>
-                                                    <a href="#" key={idx} onClick={event => actionRequestHandler(event, 'main-button', btn.action)}>{btn.label}</a>
-                                                )}
-                                            </div>
-                                        </Popover>
+                                        <div className="em-dropdown">
+                                            <a className="em-button belt-action-main" id="main-button" href="#" onClick={event => popoverRequestHandler(event, 'main-button')}>
+                                                <div className="belt-icon">{mainButton.icon ? mainButton.icon : ''}</div>
+                                                <span>{mainButton.label ? mainButton.label : 'File a Request'}</span>
+                                            </a>
+                                            <Popover
+                                                id="mainButtonPopover"
+                                                open={Boolean(mainButtonPopover)}
+                                                onClick={event => popoverRequestHandler(event, 'main-button')}
+                                                className={Boolean(dropdownPopover) ? 'open-popover' : ''}
+                                            >
+                                                <div className="popover em-popover-list">
+                                                    {mainButton.actions.map((btn: any, idx: number) =>
+                                                        <a href="#" key={idx} onClick={event => actionRequestHandler(event, 'main-button', btn.action)}>{btn.label}</a>
+                                                    )}
+                                                </div>
+                                            </Popover>
+                                        </div>
                                     </Fragment>
                                 ) : mainButton.actions && mainButton.actions.constructor === Array && mainButton.actions.length === 1 ? (
                                     mainButton.actions.map((btn: any, idx: number) => {
@@ -642,7 +644,7 @@ const MenuBar: React.FunctionComponent<IMenuBarProps> = ({ config, info, button,
                                 button.actions && button.actions.constructor === Array && button.actions.length > 0 ? (
                                 button.actions.map((btn: any, idx: number) => {
                                     return (
-                                        <a className={btn.class ? btn.class : 'belt-action' + ' ' + (idx === 0 ? 'is-primary' : '')} href="#" key={idx} onClick={event => actionRequestHandler(event, 'button', btn.action)} data-testid="menubar-button">
+                                        <a className={btn.class ? btn.class : ' belt-action' + ' ' + (idx === 0 ? 'is-primary' : '')} href="#" key={idx} onClick={event => actionRequestHandler(event, 'button', btn.action)} data-testid="menubar-button">
                                             <div className="belt-icon belt-buttons">{btn.icon ? btn.icon : ''}</div>
                                             <span data-testid={'button-action-' + btn.action}>{btn.label ? btn.label : ''}</span>
                                         </a>
@@ -658,7 +660,7 @@ const MenuBar: React.FunctionComponent<IMenuBarProps> = ({ config, info, button,
                                 undoButton.actions.map((btn: any, idx: number) => {
                                     return seconds > 0 || (btn.timer !== undefined) ? (
                                         <a
-                                            className={btn.class ? btn.class : 'belt-action' + ' ' + (idx === 0 ? 'is-primary' : '') + (btn.disabled === true ? ' is-disabled' : ' button outline button-undo')}
+                                            className={btn.class ? btn.class : 'belt-action' + ' ' + (idx === 0 ? 'is-primary' : '') + (btn.disabled === true ? ' is-disabled' : ' em-button outline button-undo')}
                                             href="#"
                                             data-testid={`undo-button-${btn.action}`}
                                             key={idx}
@@ -1025,7 +1027,7 @@ const MenuBar: React.FunctionComponent<IMenuBarProps> = ({ config, info, button,
                         {
                             buttonFooter.actions.map((btn: any, idx: number) => (
                                 btn.show &&
-                                <a className={'button ' + btn.className}
+                                <a className={'em-button ' + btn.className}
                                     href="#" key={idx}
                                     {...(btn.disabled === true ? { onClick: event => { event.preventDefault() } } : { onClick: event => actionRequestHandler(event, 'button', btn.action) })}
                                     data-testid={btn.id && btn.id.constructor === String ? btn.id : 'default-button-footer'}
@@ -1048,7 +1050,7 @@ const MenuBar: React.FunctionComponent<IMenuBarProps> = ({ config, info, button,
                             return seconds > 0 || (btn.timer !== undefined) ? (
 
                                 <a
-                                    className={btn.class ? btn.class : 'button ' + ' ' + (idx === 0 ? 'disabled' : 'outline button-undo') + (btn.disabled === true ? ' is-disabled button-undo' : '')}
+                                    className={btn.class ? btn.class : 'em-button  ' + ' ' + (idx === 0 ? 'disabled' : 'outline button-undo') + (btn.disabled === true ? ' is-disabled button-undo' : '')}
                                     href="#"
                                     data-testid={`undo-button-${btn.action}`}
                                     key={idx}

package/src/main/assets/Asset.d.ts

@@ -10,6 +10,7 @@ export declare const SVG_UNDO: JSX.Element;
 export declare const SVG_ARROWRIGHT: JSX.Element;
 export declare const SVG_ARROWLEFT: JSX.Element;
 export declare const SVG_ARROWDOWN: JSX.Element;
+export declare const SVG_ARROW_UP: JSX.Element;
 export declare const SVG_REQUEST: JSX.Element;
 export declare const SVG_ADD: JSX.Element;
 export declare const SVG_INFORMATION: JSX.Element;

package/src/main/assets/Asset.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SVG_INFORMATION = exports.SVG_ADD = exports.SVG_REQUEST = exports.SVG_ARROWDOWN = exports.SVG_ARROWLEFT = exports.SVG_ARROWRIGHT = exports.SVG_UNDO = exports.SVG_SUBMIT = exports.SVG_CLOSE_GRAY = exports.SVG_CHECK_NEUTRAL = exports.SVG_CHECK_INACTIVE = exports.SVG_CHECK_ACTIVE = exports.SVG_CHECK = exports.SVG_BACK = void 0;
+exports.SVG_INFORMATION = exports.SVG_ADD = exports.SVG_REQUEST = exports.SVG_ARROW_UP = exports.SVG_ARROWDOWN = exports.SVG_ARROWLEFT = exports.SVG_ARROWRIGHT = exports.SVG_UNDO = exports.SVG_SUBMIT = exports.SVG_CLOSE_GRAY = exports.SVG_CHECK_NEUTRAL = exports.SVG_CHECK_INACTIVE = exports.SVG_CHECK_ACTIVE = exports.SVG_CHECK = exports.SVG_BACK = void 0;
 var react_1 = __importDefault(require("react"));
 exports.SVG_BACK = react_1.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
     react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.69612 4.29289C8.08664 4.68342 8.08664 5.31658 7.69612 5.70711L3.40323 10L7.69612 14.2929C8.08664 14.6834 8.08664 15.3166 7.69612 15.7071C7.3056 16.0976 6.67243 16.0976 6.28191 15.7071L1.28191 10.7071C0.891382 10.3166 0.891382 9.68342 1.28191 9.29289L6.28191 4.29289C6.67243 3.90237 7.3056 3.90237 7.69612 4.29289Z", fill: "#393F5A" }),
@@ -31,8 +31,10 @@ exports.SVG_ARROWRIGHT = react_1.default.createElement("svg", { width: "20", hei
     react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.79289 16.2071C7.40237 15.8166 7.40237 15.1834 7.79289 14.7929L12.0858 10.5L7.79289 6.20711C7.40237 5.81658 7.40237 5.18342 7.79289 4.79289C8.18342 4.40237 8.81658 4.40237 9.20711 4.79289L14.2071 9.79289C14.5976 10.1834 14.5976 10.8166 14.2071 11.2071L9.20711 16.2071C8.81658 16.5976 8.18342 16.5976 7.79289 16.2071Z", fill: "#9FA5B7" }));
 exports.SVG_ARROWLEFT = react_1.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
     react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.2071 4.79289C13.5976 5.18342 13.5976 5.81658 13.2071 6.20711L8.91421 10.5L13.2071 14.7929C13.5976 15.1834 13.5976 15.8166 13.2071 16.2071C12.8166 16.5976 12.1834 16.5976 11.7929 16.2071L6.79289 11.2071C6.40237 10.8166 6.40237 10.1834 6.79289 9.79289L11.7929 4.79289C12.1834 4.40237 12.8166 4.40237 13.2071 4.79289Z", fill: "#9FA5B7" }));
-exports.SVG_ARROWDOWN = react_1.default.createElement("svg", { width: "12", height: "7", viewBox: "0 0 12 7", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0.292893 0.292893C0.683417 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L6 4.58579L10.2929 0.292893C10.6834 -0.0976311 11.3166 -0.0976311 11.7071 0.292893C12.0976 0.683417 12.0976 1.31658 11.7071 1.70711L6.70711 6.70711C6.31658 7.09763 5.68342 7.09763 5.29289 6.70711L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683417 0.292893 0.292893Z", fill: "#9FA5B7" }));
+exports.SVG_ARROWDOWN = react_1.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    react_1.default.createElement("path", { fillRule: "evenodd", "clip-rule": "evenodd", d: "M4.29289 7.29289C4.68342 6.90237 5.31658 6.90237 5.70711 7.29289L10 11.5858L14.2929 7.29289C14.6834 6.90237 15.3166 6.90237 15.7071 7.29289C16.0976 7.68342 16.0976 8.31658 15.7071 8.70711L10.7071 13.7071C10.3166 14.0976 9.68342 14.0976 9.29289 13.7071L4.29289 8.70711C3.90237 8.31658 3.90237 7.68342 4.29289 7.29289Z", fill: "#9FA5B7" }));
+exports.SVG_ARROW_UP = react_1.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.29289 13.7071C4.68342 14.0976 5.31658 14.0976 5.70711 13.7071L10 9.41421L14.2929 13.7071C14.6834 14.0976 15.3166 14.0976 15.7071 13.7071C16.0976 13.3166 16.0976 12.6834 15.7071 12.2929L10.7071 7.29289C10.3166 6.90237 9.68342 6.90237 9.29289 7.29289L4.29289 12.2929C3.90237 12.6834 3.90237 13.3166 4.29289 13.7071Z", fill: "#9FA5B7" }));
 exports.SVG_REQUEST = react_1.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
     react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6 2L6 4L14 4L14 2L6 2ZM4 4C4 5.10457 4.89543 6 6 6L14 6C15.1046 6 16 5.10457 16 4L16 2C16 0.895431 15.1046 -8.55899e-09 14 3.97233e-08L6 3.89414e-07C4.89543 4.37697e-07 4 0.895431 4 2L4 4Z", fill: "#393F5A" }),
     react_1.default.createElement("path", { d: "M16 10C16 10.5523 15.5523 11 15 11L5 11C4.44771 11 4 10.5523 4 10C4 9.44772 4.44772 9 5 9L15 9C15.5523 9 16 9.44771 16 10Z", fill: "#393F5A" }),

package/src/main/assets/Asset.tsx

@@ -49,10 +49,16 @@ export const SVG_ARROWLEFT = <svg width="20" height="20" viewBox="0 0 20 20" fil
     <path fillRule="evenodd" clipRule="evenodd" d="M13.2071 4.79289C13.5976 5.18342 13.5976 5.81658 13.2071 6.20711L8.91421 10.5L13.2071 14.7929C13.5976 15.1834 13.5976 15.8166 13.2071 16.2071C12.8166 16.5976 12.1834 16.5976 11.7929 16.2071L6.79289 11.2071C6.40237 10.8166 6.40237 10.1834 6.79289 9.79289L11.7929 4.79289C12.1834 4.40237 12.8166 4.40237 13.2071 4.79289Z" fill="#9FA5B7"/>
 </svg>
 
-export const SVG_ARROWDOWN = <svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fillRule="evenodd" clipRule="evenodd" d="M0.292893 0.292893C0.683417 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L6 4.58579L10.2929 0.292893C10.6834 -0.0976311 11.3166 -0.0976311 11.7071 0.292893C12.0976 0.683417 12.0976 1.31658 11.7071 1.70711L6.70711 6.70711C6.31658 7.09763 5.68342 7.09763 5.29289 6.70711L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683417 0.292893 0.292893Z" fill="#9FA5B7"/>
+export const SVG_ARROWDOWN = <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fillRule="evenodd" clip-rule="evenodd" d="M4.29289 7.29289C4.68342 6.90237 5.31658 6.90237 5.70711 7.29289L10 11.5858L14.2929 7.29289C14.6834 6.90237 15.3166 6.90237 15.7071 7.29289C16.0976 7.68342 16.0976 8.31658 15.7071 8.70711L10.7071 13.7071C10.3166 14.0976 9.68342 14.0976 9.29289 13.7071L4.29289 8.70711C3.90237 8.31658 3.90237 7.68342 4.29289 7.29289Z" fill="#9FA5B7"/>
 </svg>
 
+
+export const SVG_ARROW_UP = <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fillRule="evenodd" clipRule="evenodd" d="M4.29289 13.7071C4.68342 14.0976 5.31658 14.0976 5.70711 13.7071L10 9.41421L14.2929 13.7071C14.6834 14.0976 15.3166 14.0976 15.7071 13.7071C16.0976 13.3166 16.0976 12.6834 15.7071 12.2929L10.7071 7.29289C10.3166 6.90237 9.68342 6.90237 9.29289 7.29289L4.29289 12.2929C3.90237 12.6834 3.90237 13.3166 4.29289 13.7071Z" fill="#9FA5B7" />
+</svg>
+
+
 export const SVG_REQUEST = <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path fillRule="evenodd" clipRule="evenodd" d="M6 2L6 4L14 4L14 2L6 2ZM4 4C4 5.10457 4.89543 6 6 6L14 6C15.1046 6 16 5.10457 16 4L16 2C16 0.895431 15.1046 -8.55899e-09 14 3.97233e-08L6 3.89414e-07C4.89543 4.37697e-07 4 0.895431 4 2L4 4Z" fill="#393F5A"/>
     <path d="M16 10C16 10.5523 15.5523 11 15 11L5 11C4.44771 11 4 10.5523 4 10C4 9.44772 4.44772 9 5 9L15 9C15.5523 9 16 9.44771 16 10Z" fill="#393F5A"/>

package/src/sample/TestMenuBar.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const TestMenuBar: () => JSX.Element;
 export default TestMenuBar;

package/src/sample/TestMenuBar.js

@@ -80,14 +80,13 @@ var TestMenuBar = function () {
                 show: true,
                 actions: [
                     {
-                        class: 'button',
+                        class: 'em-button',
                         label: "Submit",
                         action: "readytosubmit",
                         icon: Asset_1.SVG_SUBMIT
                     }
                 ]
             },
-            info: null
         },
         menubar: {
             config: {
@@ -96,11 +95,38 @@ var TestMenuBar = function () {
                 showInfo: true,
                 iconType: ['check', "back", 'standard']
             },
+            mainButton: {
+                show: true,
+                label: 'File a Request',
+                icon: Asset_1.SVG_ADD,
+                actions: [
+                    {
+                        label: "File Leave",
+                        action: "leave",
+                        icon: Asset_1.SVG_SUBMIT
+                    },
+                    {
+                        label: "File Overtime",
+                        action: "overtime",
+                        icon: Asset_1.SVG_SUBMIT
+                    },
+                    {
+                        label: "File Toil",
+                        action: "toil",
+                        icon: Asset_1.SVG_SUBMIT
+                    },
+                    {
+                        label: "File Amendment",
+                        action: "amendment",
+                        icon: Asset_1.SVG_SUBMIT
+                    }
+                ]
+            },
             button: {
                 show: true,
                 actions: [
                     {
-                        class: 'button',
+                        class: 'em-button',
                         label: "Submit",
                         action: "readytosubmit",
                         icon: Asset_1.SVG_SUBMIT
@@ -111,7 +137,7 @@ var TestMenuBar = function () {
                 show: true,
                 actions: [
                     {
-                        class: 'button',
+                        class: 'em-button',
                         label: "Submit",
                         action: "footer-submit",
                         icon: Asset_1.SVG_SUBMIT,
@@ -171,7 +197,7 @@ var TestMenuBar = function () {
                 isFooter: true,
                 actions: [
                     {
-                        class: 'button disabled',
+                        class: 'em-button disabled',
                         show: true,
                         label: "Submit",
                         action: "submit",
@@ -261,14 +287,7 @@ var TestMenuBar = function () {
         console.log(action, data, 'action modal');
         switch (action) {
             case 'icon':
-                switch (data) {
-                    case 'close':
-                        modal.show = false;
-                        break;
-                    case 'info':
-                        modal.info = 'Hello menubar info';
-                        break;
-                }
+                modal.show = false;
                 break;
             default: break;
         }
@@ -277,7 +296,7 @@ var TestMenuBar = function () {
     };
     var View = function () {
         return (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(main_1.MenuBar, { config: menubar.config, button: menubar.button, pagination: menubar.pagination, pivot: menubar.pivot, dropdown: menubar.dropdown, search: menubar.search, undoButton: menubar.undoButton, buttonFooter: menubar.buttonFooter, check: menubar.check, info: menubar.info, getActions: function (action, data) { return getActions(action, data); } },
+            react_1.default.createElement(main_1.MenuBar, { config: menubar.config, button: menubar.button, mainButton: menubar.mainButton, pagination: menubar.pagination, pivot: menubar.pivot, dropdown: menubar.dropdown, search: menubar.search, undoButton: menubar.undoButton, buttonFooter: menubar.buttonFooter, check: menubar.check, info: menubar.info, getActions: function (action, data) { return getActions(action, data); } },
                 react_1.default.createElement("h2", null, "CHILDREN")),
             react_1.default.createElement(main_1.MenuBar, { config: menubar.config, dropdown: {
                     show: true,
@@ -302,10 +321,10 @@ var TestMenuBar = function () {
                             value: "view-shift-schedule", // string optional
                         },
                     ]
-                }, info: menubar.info, getActions: function (action, data) { return getActions(action, data); } },
+                }, getActions: function (action, data) { return getActions(action, data); } },
                 react_1.default.createElement("h2", null, "CHILDREN AGAIN")),
             react_1.default.createElement("div", null,
-                react_1.default.createElement("button", { className: "button", onClick: function (event) { return displayModal(event); } },
+                react_1.default.createElement("button", { className: "em-button", onClick: function (event) { return displayModal(event); } },
                     react_1.default.createElement("span", null, "DISPLAY MODAL"))),
             react_1.default.createElement(main_1.Modal, __assign({}, modal, { getActions: function (action, data) { return getModalActions(action, data); } }),
                 react_1.default.createElement("div", { className: "card-grid card-grid-multiple" },