imbric-theme 0.3.2 → 0.3.5

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,
+	},
+]

package/molecules/CheckList/CheckList.js

@@ -0,0 +1,135 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Icon from '../../atoms/Icon'
+import Paragraph from '../../atoms/Paragraph'
+
+import styles from './CheckList.module.css'
+import withStyles from '../../hocs/withStyles'
+
+
+// export const handleChange = e => {
+//   const { name, value } = e.target;
+
+//   this.setState({
+//     [name]: value
+//   });
+// }
+
+// const handleChange = ({ onChange }) => () => {
+//   // onChange()
+
+//   const { name, value } = e.target;
+
+//   this.setState({
+//     [name]: value
+//   });
+
+// }
+
+// export const handleClick = ({ onClick }) => (event) => {
+//   onClick(event)
+// }
+
+// const handleChange = ({ onChange }) => () => {
+//   onChange()
+// }
+
+
+export const CheckList = ({ getStyles, options, onChange }) => {
+
+  // this.state = {};
+
+  return (
+
+    <div className={getStyles('check-list')}>
+
+      <ul id="platform"  className={getStyles('boxul')}>
+        {options.data.map((item, index) => (
+          <li key={index} className={getStyles('boxlist')}>
+
+            <label className={getStyles('rad-label')}>
+
+              <input
+                className={getStyles('rad-input')}
+                id={item.id}
+                value={item.value}
+                name={item.name}
+                type="radio"
+                onChange={onChange}
+              />
+
+              <div className={getStyles('rad-design')} ></div>
+
+              <div className={getStyles('rad-text')}>
+                <Paragraph
+                  className={getStyles('title-list')}
+                  color="primary"
+                  isInline
+                  size="sm"
+                >
+                  {item.title}
+                </Paragraph>
+
+                <Paragraph
+                  className={getStyles('subtitle-list')}
+                  color="muted"
+                  isInline
+                  size="xs"
+                >
+                  {item.subTitle}
+                </Paragraph>
+              </div>
+
+            </label>
+
+
+          </li>
+        ))}
+      </ul>
+
+      {/* <div className="radio-buttons">
+        Windows
+        <input
+          id="windows"
+          value="windows"
+          name="platform"
+          type="radio"
+          onChange={handleChange}
+        />
+        Mac
+        <input
+          id="mac"
+          value="mac"
+          name="platform"
+          type="radio"
+          onChange={handleChange}
+        />
+        Linux
+        <input
+          id="linux"
+          value="linux"
+          name="platform"
+          type="radio"
+          onChange={handleChange}
+        />
+      </div> */}
+
+    </div>
+
+  )
+}
+
+CheckList.propTypes = {
+  // children: PropTypes.node.isRequired,
+  getStyles: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  // type: PropTypes.oneOf(options.types),
+}
+
+CheckList.defaultProps = {
+  getStyles: () => { },
+  onChange: () => {},
+}
+
+export default withStyles(styles)(CheckList)

package/molecules/CheckList/CheckList.module.css

@@ -0,0 +1,94 @@
+
+.boxul {
+  display: block;
+  list-style-type: disc;
+  margin-block-start: 0em;
+  margin-block-end: 0em;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+  padding-inline-start: 0px;
+}
+
+
+.check-list {
+  display: flex;
+}
+
+.boxlist {
+  list-style-type: none;
+}
+
+.title-list {
+  padding-left: 0px;
+}
+
+.subtitle-list {
+  display: flex;
+}
+
+.rad-label {
+  display: flex;
+  align-items: center;
+
+  border-radius: 100px;
+  padding: 12px 16px;
+  margin: 6px 0;
+
+  cursor: pointer;
+  transition: .3s;
+}
+
+.rad-label:hover,
+.rad-label:focus-within {
+  background: hsla(0, 0%, 80%, .14);
+}
+
+.rad-input {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  z-index: -1;
+}
+
+.rad-design {
+  width: 22px;
+  height: 22px;
+  border-radius: 100px;
+
+  background: linear-gradient(to right bottom, hsl(154, 97%, 62%), hsl(225, 97%, 62%));
+  position: relative;
+}
+
+.rad-design::before {
+  content: '';
+
+  display: inline-block;
+  width: inherit;
+  height: inherit;
+  border-radius: inherit;
+
+  background: hsl(0, 0%, 90%);
+  transform: scale(1.1);
+  transition: .3s;
+}
+
+.rad-input:checked+.rad-design::before {
+  transform: scale(0);
+}
+
+.rad-text {
+  /* color: hsl(0, 0%, 60%); */
+  margin-left: 14px;
+  /* letter-spacing: 3px;
+  text-transform: uppercase;
+  font-size: 18px;
+  font-weight: 900; */
+  transition: .3s;
+}
+
+.rad-input:checked~.rad-text {
+  color: hsl(0, 0%, 40%);
+}

package/molecules/CheckList/CheckList.stories.js

@@ -0,0 +1,25 @@
+import { CheckList, styles, options } from '.'
+
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(CheckList, styles)
+const ListTemplate = getListTemplate(CheckList, styles)
+
+export default {
+  title: 'Molecules/CheckList',
+  component: CheckList,
+  args: {
+    options: options,
+  },
+  argTypes: {
+    // types: getOptionsArgTypes(options.types),
+  },
+}
+
+export const Default = Template.bind({})
+// export const List = ListTemplate.bind({})
+// List.args = { items: options.types.map((type) => ({ type })) }