imbric-theme 0.1.2 → 0.1.3

package/layout/Sidebar/Sidebar.module.css

@@ -0,0 +1,387 @@
+.divider {
+  height: auto;
+}
+
+.is-home {
+  display: none;
+}
+
+@keyframes swing {
+
+  0%,
+  30%,
+  50%,
+  70%,
+  100% {
+    transform: rotate(0deg);
+  }
+
+  10% {
+    transform: rotate(10deg);
+  }
+
+  40% {
+    transform: rotate(-10deg);
+  }
+
+  60% {
+    transform: rotate(5deg);
+  }
+
+  80% {
+    transform: rotate(-5deg);
+  }
+}
+
+.header {
+  width: 220px;
+  /* position: fixed;
+  padding-top: 43px; */
+}
+
+.pro-sidebar {
+  width: 100%;
+  min-width: 100%;
+  color: #adadad;
+  height: 100vh;
+  text-align: left;
+  transition: width, left, right, 0.3s;
+  position: relative;
+  z-index: 1009;
+}
+
+.pro-sidebar-inner {
+  background-color: var(--color-base-white);
+  box-shadow: 0.5px 0.866px 2px 0px rgba(0, 0, 0, 0.15);
+  height: 100%;
+  position: relative;
+  z-index: 101;
+}
+
+.pro-sidebar-layout::-webkit-scrollbar {
+  display: none;
+}
+
+.collapsed {
+  width: 80px;
+  min-width: 80px;
+}
+
+.logotext {
+  padding: 15px 20px;
+}
+
+.closemenu {
+  color: var(--color-primary);
+  position: absolute;
+  right: -7px;
+  z-index: 9999;
+  line-height: 20px;
+  border-radius: 50%;
+  font-weight: bold;
+  font-size: 22px;
+  top: 4px;
+  cursor: pointer;
+}
+
+.pro-sub-menu>.pro-inner-list-item {
+  position: relative;
+  background-color: var(--color-brand-hint-of-red);
+  padding-left: 44px;
+  padding-bottom: 4px;
+  padding-top: 4px;
+}
+
+.pro-sidebar-content {
+  flex-grow: 1;
+  margin-top: 38px;
+  background-color: #f2fcfc;
+}
+
+.pro-sidebar-inner .pro-sidebar-layout ul {
+  padding: 0 5px;
+}
+
+.pro-sidebar-inner .pro-sidebar-layout .active {
+  background-image: linear-gradient(0deg, #fece00 0%, #ffe172 100%);
+}
+
+.logo {
+  padding: 20px;
+}
+
+/* @media only screen and (max-width: 720px) {
+  html {
+    overflow: hidden;
+  }
+} */
+
+/* /////////// */
+
+.pro-sidebar>.pro-sidebar-inner>.pro-sidebar-layout {
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  z-index: 101;
+}
+
+.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 {
+  border-top: 1px solid rgba(173, 173, 173, 0.2);
+}
+
+.pro-sidebar>.pro-sidebar-inner>.pro-sidebar-layout ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+.pro-sidebar .overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.3);
+  z-index: 100;
+  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:hover {
+  color: #d8d8d8;
+}
+
+@media (max-width: 480px) {
+  .pro-sidebar.xs {
+    position: fixed;
+    left: -270px;
+  }
+
+  .pro-sidebar.xs.collapsed {
+    left: -80px;
+  }
+
+  .pro-sidebar.xs.toggled {
+    left: 0;
+  }
+
+  .pro-sidebar.xs.toggled .overlay {
+    display: block;
+  }
+
+  .pro-sidebar.xs.rtl {
+    left: auto;
+    right: -270px;
+  }
+
+  .pro-sidebar.xs.rtl.collapsed {
+    left: auto;
+    right: -80px;
+  }
+
+  .pro-sidebar.xs.rtl.toggled {
+    left: auto;
+    right: 0;
+  }
+}
+
+@media (max-width: 576px) {
+  .pro-sidebar.sm {
+    position: fixed;
+    left: -270px;
+  }
+
+  .pro-sidebar.sm.collapsed {
+    left: -80px;
+  }
+
+  .pro-sidebar.sm.toggled {
+    left: 0;
+  }
+
+  .pro-sidebar.sm.toggled .overlay {
+    display: block;
+  }
+
+  .pro-sidebar.sm.rtl {
+    left: auto;
+    right: -270px;
+  }
+
+  .pro-sidebar.sm.rtl.collapsed {
+    left: auto;
+    right: -80px;
+  }
+
+  .pro-sidebar.sm.rtl.toggled {
+    left: auto;
+    right: 0;
+  }
+}
+
+@media (max-width: 768px) {
+  .pro-sidebar.md {
+    position: fixed;
+    left: -270px;
+  }
+
+  .pro-sidebar.md.collapsed {
+    left: -80px;
+  }
+
+  .pro-sidebar.md.toggled {
+    left: 0;
+  }
+
+  .pro-sidebar.md.toggled .overlay {
+    display: block;
+  }
+
+  .pro-sidebar.md.rtl {
+    left: auto;
+    right: -270px;
+  }
+
+  .pro-sidebar.md.rtl.collapsed {
+    left: auto;
+    right: -80px;
+  }
+
+  .pro-sidebar.md.rtl.toggled {
+    left: auto;
+    right: 0;
+  }
+}
+
+@media (max-width: 992px) {
+  .pro-sidebar.lg {
+    position: fixed;
+    left: -270px;
+  }
+
+  .pro-sidebar.lg.collapsed {
+    left: -80px;
+  }
+
+  .pro-sidebar.lg.toggled {
+    left: 0;
+  }
+
+  .pro-sidebar.lg.toggled .overlay {
+    display: block;
+  }
+
+  .pro-sidebar.lg.rtl {
+    left: auto;
+    right: -270px;
+  }
+
+  .pro-sidebar.lg.rtl.collapsed {
+    left: auto;
+    right: -80px;
+  }
+
+  .pro-sidebar.lg.rtl.toggled {
+    left: auto;
+    right: 0;
+  }
+}
+
+@media (max-width: 1200px) {
+  .pro-sidebar.xl {
+    position: fixed;
+    left: -270px;
+  }
+
+  .pro-sidebar.xl.collapsed {
+    left: -80px;
+  }
+
+  .pro-sidebar.xl.toggled {
+    left: 0;
+  }
+
+  .pro-sidebar.xl.toggled .overlay {
+    display: block;
+  }
+
+  .pro-sidebar.xl.rtl {
+    left: auto;
+    right: -270px;
+  }
+
+  .pro-sidebar.xl.rtl.collapsed {
+    left: auto;
+    right: -80px;
+  }
+
+  .pro-sidebar.xl.rtl.toggled {
+    left: auto;
+    right: 0;
+  }
+}
+
+@media (max-width: 1600px) {
+  .pro-sidebar.xxl {
+    position: fixed;
+    left: -270px;
+  }
+
+  .pro-sidebar.xxl.collapsed {
+    left: -80px;
+  }
+
+  .pro-sidebar.xxl.toggled {
+    left: 0;
+  }
+
+  .pro-sidebar.xxl.toggled .overlay {
+    display: block;
+  }
+
+  .pro-sidebar.xxl.rtl {
+    left: auto;
+    right: -270px;
+  }
+
+  .pro-sidebar.xxl.rtl.collapsed {
+    left: auto;
+    right: -80px;
+  }
+
+  .pro-sidebar.xxl.rtl.toggled {
+    left: auto;
+    right: 0;
+  }
+}

package/layout/Sidebar/Sidebar.stories.js

@@ -0,0 +1,28 @@
+import { Sidebar, styles } from '.'
+import { options } from './constants'
+
+import { getTemplate } from '../../helpers/storybook'
+
+const Template = getTemplate(Sidebar, styles)
+
+export default {
+  title: 'Layout/Sidebar',
+  component: Sidebar,
+  args: {
+    options: options,
+    menuCollapseView: false,
+  },
+  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({})

package/layout/Sidebar/constants.js

@@ -0,0 +1,228 @@
+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,
+	},
+]

package/layout/Sidebar/index.js

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

package/molecules/Accordion/Accordion.js

@@ -9,26 +9,26 @@ import Spacer from '../../layout/Spacer'
 import styles from './Accordion.module.css'
 import withStyles from '../../hocs/withStyles'
 
-const handleToggle = ({ onToggle, isCollapsed, setIsCollapsed }) => () => {
-  setIsCollapsed(!isCollapsed)
-  onToggle(!isCollapsed)
-}
-
 export const Accordion = ({
   title,
   children,
   onToggle,
   getStyles,
-  defaultIsCollapsed,
+  collapsed,
+  idAccordion,
   addons,
 }) => {
-  const [isCollapsed, setIsCollapsed] = useState(defaultIsCollapsed)
+  const [isCollapsed, setIsCollapsed] = useState(collapsed)
 
   return (
     <div className={getStyles('accordion')}>
       <div
+        id={idAccordion}
         className={getStyles('container')}
-        onClick={handleToggle({ onToggle, isCollapsed, setIsCollapsed })}
+        onClick={() => {
+          setIsCollapsed(!isCollapsed)
+          onToggle(!isCollapsed)
+        }}
       >
         <Icon
           color="inverted"
@@ -51,9 +51,9 @@ export const Accordion = ({
 Accordion.propTypes = {
   title: PropTypes.string.isRequired,
   getStyles: PropTypes.func.isRequired,
+  collapsed: PropTypes.bool.isRequired,
   children: PropTypes.node,
   onToggle: PropTypes.func,
-  defaultIsCollapsed: PropTypes.bool,
   addons: PropTypes.shape({
     prepend: PropTypes.node,
     append: PropTypes.node,
@@ -61,10 +61,10 @@ Accordion.propTypes = {
 }
 
 Accordion.defaultProps = {
+  title: '',
   getStyles: () => {},
+  collapsed: true,
   onToggle: () => {},
-  current: 0,
-  defaultIsCollapsed: true,
 }
 
 export default withStyles(styles)(Accordion)