imbric-theme 0.3.0 → 0.3.1

package/layout/Navbar/Navbar.module.css

@@ -12,16 +12,17 @@
     background-color: #FFFFFF;
     box-shadow: 0px 1px 4px rgb(100 116 139 / 12%);
     width: calc(100%);
+    padding-left: 18px;
 }
 
 .navbar__title {
     margin-right: auto;
     font-size: 150%;
-    padding: 9px 16px;
+    padding: 0.67em 1.5em;
 }
 
 .navbar__item {
-    padding: 9px 16px;
+    padding: 0.67em 1.5em;
     cursor: pointer;
     vertical-align: middle;
 }

package/layout/Navbar/Navbar.stories.js

@@ -9,10 +9,7 @@ export default {
   component: Navbar,
   args: {
     isPlayground: true,
-    children: `Farthings pulled strain? Half they'll greater land sordid Elessar. Glamdring um 17 13 motion? Creaked fate spawning chief lords loved loveliest ashes Elfs witness. Brook born Caradhras dining raining! Seeing-stones taking unlost working. A wizard is never late, Frodo Baggins. Nor is he early. He arrives precisely when he means to. Oakenshield despite distinct prosperous wields relight dark weighed leader reaches rid honor. Moments poison Sackville-Bagginses echoes dozens fend get. Scales exist apple Gundabad retaken bunch agreeable mantle cannot name's seasoning private.
-    Brave dry defeats? Remembered unleashed Denethor niceties legacy. Streets cares pretty Brandybucks ostler. Intact dispatch their expenses suffered flaming bacon should Fili? Jacksie begins hallway needed tracked Gondor's wonderful popularity. Seemed ears perfectly Oakenshield's pale fall animals stabs betrayed grumbling? Stuff awake Brandybuck large done. Curse you and all the halflings!
-    Dared sit torment goes Anárion forgiven west. Summon Bucklebury ship. Terms none Farthings. Tea choose Dwarvish! Leagues gracious carpet payment Brandywine senses very thousand! Don't you leave him, Samwise Gamgee. Firestorm raising Shire reaction mud morninged shines death should! It'll Halflings nab pot drove start. Carpet Lasgalen seen sleepies!
-    Seeing renown knocked battered contend World shepherd. Roof sautéed kingdom agree curtain lived preparing down material Galion appearance! Faramir one-fourteenth study talked amongst fisherman barren recoil responsible. There is one Dwarf yet in Moria who still draws breath. Boats wait exaggerate guessed Muil usurper suffice. Unspoken swears stands serpent depart Mithril. Ugly threat Dwarf possessions yours homage long-term unmade. Well-earned suffice tapestry tongue piled smoke lacerations talisman helps Dragon-Slayer crown? Blanket shan't dare appearances hours grave Muil.`,
+    children: 'Taksee',
   },
   argTypes: {
     children: { control: 'text' },

package/layout/Sidebar/Sidebar.js

@@ -11,21 +11,13 @@ import Icon from '../../atoms/Icon'
 import Divider from '../../atoms/Divider'
 import ItemMenu from '../../molecules/ItemMenu/ItemMenu'
 
-export const Sidebar = ({ getStyles }) => {
+export const Sidebar = ({ getStyles, menuCollapseView }) => {
 
-  //create initial menuCollapse state using useState hook
-  const [menuCollapse, setMenuCollapse] = useState(false)
-
-  //create a custom function that will change menucollapse state from false to true and true to false
-  const menuIconClick = () => {
-    //condition checking to change state from true to false and vice versa
-    menuCollapse ? setMenuCollapse(false) : setMenuCollapse(true);
-  };
 
   return (
     <>
       <div className={getStyles('header', {
-        'collapsed': menuCollapse,
+        'collapsed': menuCollapseView,
       })}>
 
         <div className={getStyles('pro-sidebar')}>
@@ -37,25 +29,25 @@ export const Sidebar = ({ getStyles }) => {
               <div className={getStyles('pro-sidebar-header')}>
 
                 <div className={getStyles('logotext')}>
-                  {/* small and big change using menucollapse state */}
-                  {menuCollapse ? <Picture src="/static/logotipoS.svg" width={30}></Picture> : <Picture src="/static/logotipo.svg" width={120}></Picture>}
+                  {/* small and big change using menuCollapseView state */}
+                  {menuCollapseView ? <Picture src="/static/logotipoS.svg" width={19}></Picture> : <Picture src="/static/logotipo.svg" width={100}></Picture>}
                 </div>
-                <div className={getStyles('closemenu')} onClick={menuIconClick}>
-                  {/* changing menu collapse icon on click */}
-                  {menuCollapse ? (
+                {/* <div className={getStyles('closemenu')}>
+
+                  {menuCollapseView ? (
 
                     <Icon
                       name="angleRight"
-                      onClick={function noRefCheck() { }}
+                      onClick={menuIconClick}
                     />
 
                   ) : (
                     <Icon
                       name="angleLeft"
-                      onClick={function noRefCheck() { }}
+                      onClick={menuIconClick}
                     />
                   )}
-                </div>
+                </div> */}
 
               </div>
 
@@ -65,17 +57,19 @@ export const Sidebar = ({ getStyles }) => {
 
                   <ul>
 
-                    {options.itemsMenu.map((item) => (
+                    {options.itemsMenu.map((item, index) => (
                       item.view ?
                         <ItemMenu
+                          key={index}
                           icon={item.icon}
-                          subMenu={item.submenu}
+                          subMenu={item.viewSubMenu}
                           itemSubmenu={item.submenu}
                         >
                           {item.text}
                         </ItemMenu>
+                        
                         : null
-                      
+
                     ))}
 
                   </ul>
@@ -107,6 +101,7 @@ Sidebar.propTypes = {
 
 Sidebar.defaultProps = {
   getStyles: () => { },
+  menuCollapseView: false,
 }
 
 export default withStyles(styles)(Sidebar)

package/layout/Sidebar/Sidebar.module.css

@@ -34,8 +34,9 @@
 }
 
 .header {
-  position: absolute;
   width: 220px;
+  /* position: fixed;
+  padding-top: 43px; */
 }
 
 .pro-sidebar {
@@ -67,7 +68,7 @@
 }
 
 .logotext {
-  padding: 8px 20px;
+  padding: 13px 20px;
 }
 
 .closemenu {
@@ -79,7 +80,7 @@
   border-radius: 50%;
   font-weight: bold;
   font-size: 22px;
-  top: 8px;
+  top: 4px;
   cursor: pointer;
 }
 
@@ -93,6 +94,7 @@
 
 .pro-sidebar-content {
   flex-grow: 1;
+  margin-top: 38px;
 }
 
 .pro-sidebar-inner .pro-sidebar-layout ul {
@@ -107,11 +109,11 @@
   padding: 20px;
 }
 
-@media only screen and (max-width: 720px) {
+/* @media only screen and (max-width: 720px) {
   html {
     overflow: hidden;
   }
-}
+} */
 
 /* /////////// */
 
@@ -125,8 +127,12 @@
   z-index: 101;
 }
 
-.pro-sidebar>.pro-sidebar-inner>.pro-sidebar-layout .pro-sidebar-header {
+.pro-sidebar-header {
   border-bottom: 1px solid rgba(173, 173, 173, 0.2);
+  position: fixed;
+  background-color: #fff;
+  width: 220px;
+  z-index: 1;
 }
 
 .pro-sidebar>.pro-sidebar-inner>.pro-sidebar-layout .pro-sidebar-footer {
@@ -150,11 +156,41 @@
   display: none;
 }
 
+.header.collapsed>.pro-sidebar>.pro-sidebar-inner>.pro-sidebar-layout >.pro-sidebar-header {
+  width: 80px;
+  min-width: 80px;
+}
+
 .pro-sidebar.collapsed {
   width: 80px;
   min-width: 80px;
 }
 
+
+.pro-menu {
+  padding-top: 10px;
+  padding-bottom: 40px;
+}
+
+.pro-menu a {
+  text-decoration: none;
+  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;
+}
+
 @media (max-width: 480px) {
   .pro-sidebar.xs {
     position: fixed;

package/layout/Sidebar/Sidebar.stories.js

@@ -9,7 +9,8 @@ export default {
   title: 'Layout/Sidebar',
   component: Sidebar,
   args: {
-    options: options.itemsMenu
+    options: options.itemsMenu,
+    menuCollapseView: false,
   },
   argTypes: {
     options: {
@@ -17,7 +18,7 @@ export default {
       table: {
         type: {
           summary: 'object',
-          detail: "{ text: 'string', view: 'bool'}",
+          detail: "{ text: 'string', icon: 'string', href: 'string', view: 'bool', viewSubMenu: 'bool'}",
         },
       },
     },

package/layout/Sidebar/constants.js

@@ -1,22 +1,3 @@
-export const subItems = {
-
-    subItemsLegal: [
-        {
-            href: 'https://www.imbric.com/privacypolicy/',
-            title: 'Privacy policy',
-        },
-        {
-            href: 'https://www.imbric.com/general-terms/',
-            title: 'General terms',
-        },
-        {
-            href: 'https://www.imbric.com/particular-terms/',
-            title: 'Particular terms',
-        },
-    ],
-
-}
-
 export const options = {
     itemsMenu: [
         {
@@ -24,12 +5,14 @@ export const options = {
             icon: "home",
             href: "/home",
             view: true,
+            viewSubMenu: false,
         },
         {
             text: "Activity",
             icon: "activity",
             href: "/home",
             view: true,
+            viewSubMenu: true,
             submenu: [
                 {
                     text: "Taxi",
@@ -63,6 +46,7 @@ export const options = {
             icon: "staff",
             href: "/home",
             view: true,
+            viewSubMenu: true,
             submenu: [
                 {
                     text: "People Add",
@@ -87,20 +71,21 @@ export const options = {
             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",
@@ -121,27 +106,28 @@ export const options = {
             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",
@@ -156,6 +142,7 @@ export const options = {
             icon: "analytics",
             href: "/home",
             view: true,
+            viewSubMenu: true,
             submenu: [
                 {
                     text: "Dashboard",
@@ -179,6 +166,7 @@ export const options = {
             icon: "legal",
             href: "/home",
             view: true,
+            viewSubMenu: true,
             submenu: [
                 {
                     text: "Privacy policy",
@@ -203,14 +191,14 @@ export const options = {
             icon: "info",
             href: "/home",
             view: true,
-
+            viewSubMenu: false,
         },
         {
             text: "My profile",
             icon: "profile",
             href: "/home",
             view: true,
-
+            viewSubMenu: false,
         },
     ],
 

package/layout/Sidebar/index.js

@@ -1,4 +1,3 @@
 export { default, Sidebar } from './Sidebar'
-export { subItems, options } from './constants'
+export { options } from './constants'
 export { default as styles } from './Sidebar.module.css'
-export { default as SidebarCss } from './Sidebar.css'

package/molecules/ItemMenu/ItemMenu.js

@@ -5,9 +5,12 @@ import styles from './ItemMenu.module.css'
 import { options } from './constants'
 import withStyles from '../../hocs/withStyles'
 
+import { Link, Route, BrowserRouter } from 'react-router-dom'
+
 import Icon from '../../atoms/Icon'
 
-export const ItemMenu = ({ children, getStyles, size, icon, color, background, subMenu, itemSubmenu }) => {
+
+export const ItemMenu = ({ children, getStyles, size, icon, color, background, subMenu, itemSubmenu, toHref }) => {
 
   //create initial menuCollapse state using useState hook
   const [subMenuCollapse, setSubMenuCollapse] = useState(false)
@@ -22,29 +25,33 @@ export const ItemMenu = ({ children, getStyles, size, icon, color, background, s
   if (!subMenu) {
     return (
       <>
-        <li className={getStyles('pro-menu-item')}>
+        <BrowserRouter>
+          <Link to={toHref}>
+            <li className={getStyles('pro-menu-item')}>
 
-          <div className={getStyles('pro-inner-item')}>
+              <div className={getStyles('pro-inner-item')}>
 
-            <span className={getStyles('pro-icon-wrapper')}>
+                <span className={getStyles('pro-icon-wrapper')}>
 
-              <span className={getStyles('pro-icon')}>
-                <Icon
-                  size={size}
-                  name={icon}
-                  color={color}
-                  background={background}
-                  onClick={function noRefCheck() { }}
-                />
-              </span>
+                  <span className={getStyles('pro-icon')}>
+                    <Icon
+                      size={size}
+                      name={icon}
+                      color={color}
+                      background={background}
+                      onClick={function noRefCheck() { }}
+                    />
+                  </span>
 
-            </span>
+                </span>
 
-            <span className={getStyles('pro-item-content', { 'color': color })}>{children}</span>
+                <span className={getStyles('pro-item-content', { 'color': color })}>{children}</span>
 
-          </div>
+              </div>
 
-        </li>
+            </li>
+          </Link>
+        </BrowserRouter>
       </>
     )
   } else {
@@ -80,8 +87,8 @@ export const ItemMenu = ({ children, getStyles, size, icon, color, background, s
             <div>
               <ul>
 
-                {itemSubmenu.map((item) => (
-                  <li className={getStyles('pro-menu-item')} href={item.href}>
+                {itemSubmenu.map((item, index) => (
+                  <li key={index} className={getStyles('pro-menu-item')} href={item.href}>
                     <div className={getStyles('pro-inner-item')} role="button">
                       <span className={getStyles('pro-item-content')}>{item.text}</span></div>
                   </li>
@@ -110,6 +117,7 @@ ItemMenu.propTypes = {
 
 ItemMenu.defaultProps = {
   subMenu: false,
+  toHref: '/',
   icon: 'home',
   size: 'lg',
   color: 'highlight',

package/molecules/ItemMenu/ItemMenu.module.css

@@ -30,7 +30,7 @@
 }
 
 .pro-menu-item {
-  font-size: 15px;
+  font-size: var(--font-size-base);
   list-style: none;
 }
 
@@ -324,11 +324,6 @@
   transition-property: none;
 }
 
-.pro-menu {
-  padding-top: 10px;
-  padding-bottom: 10px;
-}
-
 .pro-sub-menu>.pro-inner-list-item {
   position: relative;
   background-color: hsl(0deg 0% 0% / 2%);
@@ -339,25 +334,6 @@
   padding-bottom: 15px;
 }
 
-.pro-menu a {
-  text-decoration: none;
-  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;
-}
-
 .popper-arrow {
   position: absolute;
   z-index: -1;

package/molecules/ItemMenu/ItemMenu.stories.js

@@ -16,6 +16,7 @@ export default {
     children: 'Home',
     subMenu: false,
     itemSubmenu: options.itemSubmenu,
+    toHref: '/',
   },
   argTypes: {
     itemSubmenu: {

package/molecules/Tabs/Tabs.js

@@ -0,0 +1,53 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import styles from './Tabs.module.css'
+import { options } from './constants'
+import withStyles from '../../hocs/withStyles'
+
+import Tab from '../../atoms/Tab/Tab'
+
+export const Tabs = ({ getStyles, viewTabs }) => {
+
+  if (viewTabs) {
+    return (
+
+      <div className={getStyles('tabs')}>
+
+        <nav className={getStyles('pro-nav')}>
+
+          <ul>
+
+            {options.itemTabs.map((item, index) => (
+
+              <Tab
+                key={index}
+                activeTab={false}
+                onClick={function noRefCheck() { }}
+                viewTab={item.view}
+              >
+                {item.text}
+              </Tab>
+
+            ))}
+
+          </ul>
+
+        </nav>
+
+      </div>
+    )
+  } else {
+    null
+  }
+}
+
+Tabs.propTypes = {
+  getStyles: PropTypes.func.isRequired,
+}
+
+Tabs.defaultProps = {
+  getStyles: () => { },
+}
+
+export default withStyles(styles)(Tabs)

package/molecules/Tabs/Tabs.module.css

@@ -0,0 +1,12 @@
+.tabs {
+  display: flex;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.pro-nav ul {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+}

package/molecules/Tabs/Tabs.stories.js

@@ -0,0 +1,34 @@
+import { Tabs, styles, options } from '.'
+
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(Tabs, styles)
+const ListTemplate = getListTemplate(Tabs, styles)
+
+export default {
+  title: 'Molecules/Tabs',
+  component: Tabs,
+  args: {
+    options: options.itemTabs,
+    viewTabs: true,
+  },
+  argTypes: {
+    options: {
+      description: '**array of shaped objects:**',
+      table: {
+        type: {
+          summary: 'object',
+          detail: "{ text: 'string', icon: 'string', href: 'string', view: 'bool', viewSubMenu: 'bool'}",
+        },
+      },
+    },
+  },
+}
+
+export const Default = Template.bind({})
+// export const List = ListTemplate.bind({})
+// List.args = { items: options.types.map((type) => ({ type })) }

package/molecules/Tabs/constants.js

@@ -0,0 +1,29 @@
+export const options = {
+    itemTabs: [
+        {
+            text: "Taxi",
+            href: "/taxi",
+            view: true,
+        },
+        {
+            text: "Parking",
+            href: "/parking",
+            view: true,
+        },
+        {
+            text: "Sharing",
+            href: "/sharing",
+            view: true,
+        },
+        {
+            text: "T. Publico",
+            href: "/sharing",
+            view: true,
+        },
+        {
+            text: "Hoja de Km",
+            href: "/sharing",
+            view: true,
+        },
+    ],
+}

package/molecules/Tabs/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "imbric-theme",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Components library IMBRIC",
   "private": false,
   "main": "index.js",
@@ -51,7 +51,9 @@
   "license": "MIT",
   "dependencies": {
     "classnames": "2.3.1",
-    "react-icons": "4.3.1"
+    "react-icons": "4.3.1",
+    "react-router": "6.3.0",
+    "react-router-dom": "6.3.0"
   },
   "devDependencies": {
     "@babel/core": "7.11.6",