imbric-theme 0.3.1 → 0.3.4

package/layout/DynamicTable/index.js

@@ -0,0 +1,3 @@
+export { default, DynamicTable } from './DynamicTable'
+export { options } from './constants'
+export { default as styles } from './DynamicTable.module.css'

package/layout/Navbar/Navbar.js

@@ -6,16 +6,14 @@ import withStyles from '../../hocs/withStyles'
 import Heading from '../../atoms/Heading/Heading'
 import Tabs from '../../molecules/Tabs/Tabs'
 
-export const Navbar = ({ getStyles, isPlayground, children }) => {
+export const Navbar = ({ getStyles, viewTabsNav, viewOptionsNav, children, linkLogout }) => {
   return (
     <>
-      <header className={getStyles('navbar', {
-        'is-playground': isPlayground,
-      })}>
+      <header className={getStyles('navbar')}>
 
         <Heading
-          color="primary"
-          size="sm"
+          color="base"
+          size="xs"
           weight="light"
           isInline
         >
@@ -50,14 +48,21 @@ export const Navbar = ({ getStyles, isPlayground, children }) => {
               view: true
             }
           ]}
-          viewTabs
+          viewTabs={viewTabsNav}
         />
 
 
         {/* <div className={getStyles('navbar__title', 'navbar__item')}>Taksee</div> */}
         {/* <div className={getStyles('navbar__item')}>Legal</div>
         <div className={getStyles('navbar__item')}>User Guide</div> */}
-        <div className={getStyles('navbar__item')}>Logout</div>
+
+        {viewOptionsNav ? (
+          <div onClick={linkLogout} className={getStyles('navbar__item', { 'is-playground': viewTabsNav })}>
+            Logout
+          </div>
+        ) : null}
+
+
       </header>
 
 
@@ -67,12 +72,15 @@ export const Navbar = ({ getStyles, isPlayground, children }) => {
 
 Navbar.propTypes = {
   getStyles: PropTypes.func.isRequired,
-  children: PropTypes.string.isRequired,
-  isPlayground: PropTypes.bool,
+  children: PropTypes.any.isRequired,
+  viewTabsNav: PropTypes.bool,
+  viewOptionsNav: PropTypes.bool,
+  linkLogout: PropTypes.string,
 }
 
 Navbar.defaultProps = {
-  isPlayground: false,
+  viewTabsNav: false,
+  viewOptionsNav: true,
   getStyles: () => { },
 }
 

package/layout/Navbar/Navbar.module.css

@@ -6,13 +6,15 @@
 
 .navbar {
     display: flex;
-    flex-shrink: 0;
     align-items: center;
+    justify-content: space-between;
+    flex-shrink: 0;
     color: #000;
-    background-color: #FFFFFF;
     box-shadow: 0px 1px 4px rgb(100 116 139 / 12%);
     width: calc(100%);
     padding-left: 18px;
+    min-height: 51px;
+    background-color: #f2fcfc;
 }
 
 .navbar__title {

package/layout/Navbar/Navbar.stories.js

@@ -8,7 +8,8 @@ export default {
   title: 'Layout/Navbar',
   component: Navbar,
   args: {
-    isPlayground: true,
+    viewTabsNav: false,
+    viewOptionsNav: true,
     children: 'Taksee',
   },
   argTypes: {

package/layout/Sidebar/Sidebar.js

@@ -2,7 +2,7 @@ import React, { ReactNode, useRef, useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import withStyles from '../../hocs/withStyles'
 
-import { options } from './constants'
+// import { options } from './constants'
 
 import styles from './Sidebar.module.css'
 
@@ -11,7 +11,7 @@ import Icon from '../../atoms/Icon'
 import Divider from '../../atoms/Divider'
 import ItemMenu from '../../molecules/ItemMenu/ItemMenu'
 
-export const Sidebar = ({ getStyles, menuCollapseView }) => {
+export const Sidebar = ({ getStyles, menuCollapseView, options }) => {
 
 
   return (
@@ -57,13 +57,15 @@ export const Sidebar = ({ getStyles, menuCollapseView }) => {
 
                   <ul>
 
-                    {options.itemsMenu.map((item, index) => (
+                    {options.map((item, index) => (
                       item.view ?
                         <ItemMenu
                           key={index}
                           icon={item.icon}
                           subMenu={item.viewSubMenu}
                           itemSubmenu={item.submenu}
+                          itemHref={item.href}
+                          itemActive={item.active}
                         >
                           {item.text}
                         </ItemMenu>

package/layout/Sidebar/Sidebar.module.css

@@ -95,6 +95,7 @@
 .pro-sidebar-content {
   flex-grow: 1;
   margin-top: 38px;
+  background-color: #f2fcfc;
 }
 
 .pro-sidebar-inner .pro-sidebar-layout ul {
@@ -177,16 +178,6 @@
   color: #adadad;
 }
 
-.pro-menu a:before {
-  content: '';
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background-color: transparent;
-}
-
 .pro-menu a:hover {
   color: #d8d8d8;
 }

package/layout/Sidebar/Sidebar.stories.js

@@ -9,7 +9,7 @@ export default {
   title: 'Layout/Sidebar',
   component: Sidebar,
   args: {
-    options: options.itemsMenu,
+    options: options,
     menuCollapseView: false,
   },
   argTypes: {

package/layout/Sidebar/constants.js

@@ -1,205 +1,228 @@
-export const options = {
-    itemsMenu: [
-        {
-            text: "Home",
-            icon: "home",
-            href: "/home",
-            view: true,
-            viewSubMenu: false,
-        },
-        {
-            text: "Activity",
-            icon: "activity",
-            href: "/home",
-            view: true,
-            viewSubMenu: true,
-            submenu: [
-                {
-                    text: "Taxi",
-                    href: "/taxi",
-                    view: true,
-                },
-                {
-                    text: "Parking",
-                    href: "/parking",
-                    view: true,
-                },
-                {
-                    text: "Sharing",
-                    href: "/sharing",
-                    view: true,
-                },
-                {
-                    text: "Public transport",
-                    href: "/publictransport ",
-                    view: true,
-                },
-                {
-                    text: "Kilometer sheet",
-                    href: "/kilometersheet",
-                    view: true,
-                }
-            ],
-        },
-        {
-            text: "Staff",
-            icon: "staff",
-            href: "/home",
-            view: true,
-            viewSubMenu: true,
-            submenu: [
-                {
-                    text: "People Add",
-                    href: "/staff/taxi",
-                    view: true,
-                },
-                {
-                    text: "People View",
-                    href: "/staff/taxi",
-                    view: true,
-                },
-                {
-                    text: "People Group",
-                    href: "/staff/taxi",
-                    view: true,
-                },
-
-            ],
-        },
-        {
-            text: "Services",
-            icon: "travelPrograms",
-            href: "/home",
-            view: true,
-            viewSubMenu: false,
-        },
-        {
-            text: "Billing",
-            icon: "billing",
-            href: "/home",
-            view: true,
-            viewSubMenu: false,
-        },
-        {
-            text: "Setting",
-            icon: "setting",
-            href: "/home",
-            view: true,
-            viewSubMenu: true,
-            submenu: [
-                {
-                    text: "Company",
-                    href: "/company/edit",
-                    view: true,
-                },
-                {
-                    text: "Wallet",
-                    href: "/company/wallet",
-                    view: true,
-                },
-
-            ],
-
-        },
-        {
-            text: "Order Taxi",
-            icon: "orderTaxi",
-            href: "/home",
-            view: true,
-            viewSubMenu: false,
-        },
-        {
-            text: "Dashboards",
-            icon: "dashboardsUwa",
-            href: "/home",
-            view: true,
-            viewSubMenu: false,
-        },
-        {
-            text: "Projects",
-            icon: "projectsUwa",
-            href: "/home",
-            view: true,
-            viewSubMenu: false,
-        },
-        {
-            text: "Permissions",
-            icon: "permissions",
-            href: "/home",
-            view: true,
-            viewSubMenu: true,
-            submenu: [
-                {
-                    text: "Permissions",
-                    href: "/permissions/managestaff",
-                    view: true,
-                },
-
-            ],
-        },
-        {
-            text: "Analytics",
-            icon: "analytics",
-            href: "/home",
-            view: true,
-            viewSubMenu: true,
-            submenu: [
-                {
-                    text: "Dashboard",
-                    href: "/analytics/dashboard",
-                    view: true,
-                },
-                {
-                    text: "Taxi",
-                    href: "/analytics/taxi",
-                    view: true,
-                },
-                {
-                    text: "Parking",
-                    href: "/analytics/tollsparking",
-                    view: true,
-                },
-            ],
-        },
-        {
-            text: "Legal",
-            icon: "legal",
-            href: "/home",
-            view: true,
-            viewSubMenu: true,
-            submenu: [
-                {
-                    text: "Privacy policy",
-                    href: "/legal/dashboard",
-                    view: true,
-                },
-                {
-                    text: "General terms",
-                    href: "/legal/taxi",
-                    view: true,
-                },
-                {
-                    text: "Particular terms",
-                    href: "/legal/tollsparking",
-                    view: true,
-                },
-            ],
-
-        },
-        {
-            text: "User Guide",
-            icon: "info",
-            href: "/home",
-            view: true,
-            viewSubMenu: false,
-        },
-        {
-            text: "My profile",
-            icon: "profile",
-            href: "/home",
-            view: true,
-            viewSubMenu: false,
-        },
-    ],
-
-}
+export const options = [
+	{
+		active: false,
+		href: '/',
+		icon: 'home',
+		text: 'Home',
+		view: true,
+		viewSubMenu: false,
+	},
+	{
+		active: false,
+		href: '/activity/activity-taxi',
+		icon: 'activity',
+		submenu: [
+			{
+				active: false,
+				href: '/activity/activity-taxi',
+				text: 'Taxi',
+				view: true,
+			},
+			{
+				active: false,
+				href: '/activity/activity-parking',
+				text: 'Parking',
+				view: true,
+			},
+			{
+				active: false,
+				href: '/activity/activity-sharing',
+				text: 'Sharing',
+				view: true,
+			},
+			{
+				active: false,
+				href: '/activity/activity-public-transport',
+				text: 'Public transport',
+				view: true,
+			},
+			{
+				active: false,
+				href: '/activity/activity-kilometer-sheet',
+				text: 'Kilometer sheet',
+				view: true,
+			},
+		],
+		text: 'Activity',
+		view: true,
+		viewSubMenu: true,
+	},
+	{
+		active: false,
+		href: '/staff/staff-add',
+		icon: 'staff',
+		submenu: [
+			{
+				active: false,
+				href: '/staff/staff-add',
+				text: 'Staff Add',
+				view: true,
+			},
+			{
+				active: false,
+				href: '/staff/staff-view',
+				text: 'Staff View',
+				view: true,
+			},
+			{
+				active: false,
+				href: '/staff/staff-group',
+				text: 'Staff Group',
+				view: true,
+			},
+		],
+		text: 'Staff',
+		view: true,
+		viewSubMenu: true,
+	},
+	{
+		active: false,
+		href: '/services',
+		icon: 'travelPrograms',
+		text: 'Services',
+		view: true,
+		viewSubMenu: false,
+	},
+	{
+		active: false,
+		href: '/billing',
+		icon: 'billing',
+		text: 'Billing',
+		view: true,
+		viewSubMenu: false,
+	},
+	{
+		active: false,
+		href: '/setting/setting-company',
+		icon: 'setting',
+		submenu: [
+			{
+				active: false,
+				href: '/setting/setting-company',
+				text: 'Company',
+				view: true,
+			},
+			{
+				active: false,
+				href: '/setting/setting-wallet',
+				text: 'Wallet',
+				view: true,
+			},
+		],
+		text: 'Setting',
+		view: true,
+		viewSubMenu: true,
+	},
+	{
+		active: false,
+		href: '/order-taxi',
+		icon: 'orderTaxi',
+		text: 'Order Taxi',
+		view: true,
+		viewSubMenu: false,
+	},
+	{
+		active: false,
+		href: '/dashboards',
+		icon: 'dashboardsUwa',
+		text: 'Dashboards',
+		view: true,
+		viewSubMenu: false,
+	},
+	{
+		active: false,
+		href: '/projects',
+		icon: 'projectsUwa',
+		text: 'Projects',
+		view: true,
+		viewSubMenu: false,
+	},
+	{
+		active: false,
+		href: '/permissions/permissions-manage-staff',
+		icon: 'permissions',
+		submenu: [
+			{
+				active: false,
+				href: '/permissions/permissions-manage-staff',
+				text: 'Permissions',
+				view: true,
+			},
+		],
+		text: 'Permissions',
+		view: true,
+		viewSubMenu: true,
+	},
+	{
+		active: false,
+		href: '#',
+		icon: 'analytics',
+		submenu: [
+			{
+				active: false,
+				href: '/analytics/analytics-dashboard',
+				text: 'Dashboard',
+				view: true,
+			},
+			{
+				active: false,
+				href: '/analytics/analytics-taxi',
+				text: 'Taxi',
+				view: true,
+			},
+			{
+				active: false,
+				href: '/analytics/analytics-tollsparking',
+				text: 'Parking',
+				view: true,
+			},
+		],
+		text: 'Analytics',
+		view: true,
+		viewSubMenu: true,
+	},
+	{
+		active: false,
+		href: '#',
+		icon: 'legal',
+		submenu: [
+			{
+				active: false,
+				href: '/legal/dashboard',
+				text: 'Privacy policy',
+				view: true,
+			},
+			{
+				active: false,
+				href: '/legal/taxi',
+				text: 'General terms',
+				view: true,
+			},
+			{
+				active: false,
+				href: '/legal/tollsparking',
+				text: 'Particular terms',
+				view: true,
+			},
+		],
+		text: 'Legal',
+		view: true,
+		viewSubMenu: true,
+	},
+	{
+		active: false,
+		href: '/home',
+		icon: 'info',
+		text: 'User Guide',
+		view: true,
+		viewSubMenu: false,
+	},
+	{
+		active: false,
+		href: '/home',
+		icon: 'profile',
+		text: 'My profile',
+		view: true,
+		viewSubMenu: false,
+	},
+]