imbric-theme 0.1.0

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/layout/Spacer/Spacer.js

@@ -0,0 +1,40 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { Vertical, Horizontal } from './components'
+
+import styles from './Spacer.module.css'
+import { mapSize } from './helpers'
+import withStyles from '../../hocs/withStyles'
+
+export const Spacer = ({ getStyles, size, isPlayground }) => (
+  <div
+    className={getStyles('spacer', {
+      'is-playground': isPlayground,
+    })}
+    style={{
+      display: 'inline-block',
+      width: mapSize(size),
+      height: mapSize(size),
+    }}
+  />
+)
+
+Spacer.propTypes = {
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  getStyles: PropTypes.func.isRequired,
+  isPlayground: PropTypes.bool,
+}
+
+Spacer.defaultProps = {
+  size: 'none',
+  isPlayground: false,
+  getStyles: () => {},
+}
+
+const SpacerWithStyles = withStyles(styles)(Spacer)
+
+SpacerWithStyles.Vertical = Vertical
+SpacerWithStyles.Horizontal = Horizontal
+
+export default SpacerWithStyles

package/layout/Spacer/Spacer.module.css

@@ -0,0 +1,12 @@
+.is-playground {
+  border: var(--border-width-thick) dashed var(--color-primary);
+}
+
+.horizontal {
+  display: inline-block;
+}
+
+.vertical {
+  display: block;
+  width: 100%;
+}

package/layout/Spacer/Spacer.stories.js

@@ -0,0 +1,25 @@
+import { Spacer, options, styles } from '.'
+
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(Spacer, styles)
+const ListTemplate = getListTemplate(Spacer, styles)
+
+export default {
+  title: 'Layout/Spacer/Default',
+  component: Spacer,
+  args: { isPlayground: true },
+  argTypes: {
+    size: getOptionsArgTypes(options.sizes),
+  },
+  parameters: { __sb: { fd: 'row' } },
+}
+
+export const Default = Template.bind({})
+
+export const Sizes = ListTemplate.bind({})
+Sizes.args = { items: options.sizes.map((size) => ({ size })) }