imbric-theme 0.2.7 → 0.3.0

package/molecules/ItemMenu/ItemMenu.module.css

@@ -0,0 +1,378 @@
+@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);
+  }
+}
+
+.item-menu {
+  display: flex;
+}
+
+.pro-menu-item {
+  font-size: 15px;
+  list-style: none;
+}
+
+.pro-inner-item {
+  color: var(--color-font-highlight);
+  margin: 6px 0px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 8px 35px 8px 20px;
+  cursor: pointer;
+}
+
+.pro-inner-item:focus {
+  outline: none;
+  color: #d8d8d8;
+}
+
+.pro-icon-wrapper {
+  margin-right: 10px;
+  font-size: 14px;
+  width: 35px;
+  min-width: 35px;
+  height: 35px;
+  line-height: 35px;
+  text-align: center;
+  display: inline-block;
+}
+
+.pro-icon {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+.pro-inner-item:hover .pro-icon-wrapper .pro-icon {
+  animation: swing ease-in-out 0.5s 1 alternate;
+}
+
+
+.pro-sidebar.collapsed .pro-menu>ul>.pro-menu-item.pro-sub-menu:hover .pro-icon-wrapper .pro-icon {
+  animation: swing ease-in-out 0.5s 1 alternate;
+}
+
+.pro-item-content {
+  /* color: var(--color-font-highlight); */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex-grow: 1;
+  flex-shrink: 1;
+}
+
+.pro-inner-item:hover .pro-item-content {
+  color: var(--color-primary);
+}
+
+
+/* ////////////////////// */
+
+
+.pro-menu-item.active {
+  color: #d8d8d8;
+}
+
+.pro-menu-item .suffix-wrapper {
+  opacity: 1;
+  transition: opacity 0.2s;
+}
+
+.pro-menu-item .prefix-wrapper {
+  display: flex;
+  margin-right: 5px;
+  opacity: 1;
+  transition: opacity 0.2s;
+}
+
+.pro-menu-item>.pro-inner-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 8px 35px 8px 20px;
+  cursor: pointer;
+}
+
+.pro-menu-item>.pro-inner-item:focus {
+  outline: none;
+  color: #d8d8d8;
+}
+
+.pro-menu-item>.pro-inner-item>.pro-icon-wrapper {
+  margin-right: 10px;
+  font-size: 14px;
+  width: 35px;
+  min-width: 35px;
+  height: 35px;
+  line-height: 35px;
+  text-align: center;
+  display: inline-block;
+}
+
+.pro-menu-item>.pro-inner-item>.pro-icon-wrapper .pro-icon {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+.pro-menu-item>.pro-inner-item>.pro-item-content {
+  flex-grow: 1;
+  flex-shrink: 1;
+}
+
+.pro-menu-item>.pro-inner-item:hover {
+  color: #d8d8d8;
+}
+
+.pro-menu-item>.pro-inner-item:hover .pro-icon-wrapper .pro-icon {
+  animation: swing ease-in-out 0.5s 1 alternate;
+}
+
+.pro-menu-item.pro-sub-menu>.pro-inner-item:before {
+  background: #adadad;
+}
+
+.pro-menu-item.pro-sub-menu>.pro-inner-item>.pro-arrow-wrapper {
+  position: absolute;
+  right: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.pro-menu-item.pro-sub-menu>.pro-inner-item>.pro-arrow-wrapper .pro-arrow {
+  display: inline-block;
+  border-style: solid;
+  border-color: #adadad;
+  border-width: 0 2px 2px 0;
+  padding: 2.5px;
+  vertical-align: middle;
+  transition: transform 0.3s;
+  transform: rotate(-45deg);
+}
+
+.pro-menu-item.pro-sub-menu.open>.pro-inner-item:before {
+  background: transparent !important;
+}
+
+.pro-menu-item.pro-sub-menu.open>.pro-inner-item>.pro-arrow-wrapper .pro-arrow {
+  transform: rotate(45deg);
+}
+
+.pro-menu-item.pro-sub-menu .pro-inner-list-item {
+  padding-left: 50px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+
+.pro-menu-item.pro-sub-menu .pro-inner-list-item .pro-inner-item {
+  padding: 14px 30px 14px 15px;
+  margin: 0;
+}
+
+.pro-menu-item.pro-sub-menu .pro-inner-list-item .pro-inner-item>.pro-icon-wrapper {
+  background: none;
+  width: auto;
+  min-width: auto;
+  height: auto;
+  line-height: auto;
+}
+
+
+.pro-menu:not(.inner-submenu-arrows) .pro-inner-list-item .pro-menu-item.pro-sub-menu .pro-inner-item .pro-arrow-wrapper {
+  display: none;
+}
+
+
+.pro-sidebar.collapsed .pro-menu>ul>.pro-menu-item {
+  position: relative;
+}
+
+.pro-sidebar.collapsed .pro-menu>ul>.pro-menu-item>.pro-inner-item>.suffix-wrapper,
+.pro-sidebar.collapsed .pro-menu>ul>.pro-menu-item>.pro-inner-item>.prefix-wrapper {
+  opacity: 0;
+}
+
+.pro-sidebar.collapsed .pro-menu>ul>.pro-menu-item>.pro-inner-list-item {
+  background-color: #2b2b2b;
+  z-index: 111;
+}
+
+.pro-sidebar.collapsed .pro-menu>ul>.pro-menu-item::before {
+  content: '';
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  cursor: pointer;
+}
+
+.pro-sidebar.collapsed .pro-menu>ul>.pro-menu-item.pro-sub-menu {
+  position: relative;
+}
+
+.pro-sidebar.collapsed .pro-menu>ul>.pro-menu-item.pro-sub-menu>.pro-inner-item {
+  pointer-events: none;
+}
+
+.pro-sidebar.collapsed .pro-menu>ul>.pro-menu-item.pro-sub-menu>.pro-inner-item>.pro-arrow-wrapper {
+  display: none;
+}
+
+.pro-sidebar.collapsed .pro-menu>ul>.pro-menu-item.pro-sub-menu>.pro-inner-list-item {
+  height: auto !important;
+  position: fixed;
+  visibility: hidden;
+  min-width: 220px;
+  max-width: 270px;
+  background-color: transparent;
+  max-height: 100%;
+  padding-left: 3px;
+}
+
+.pro-sidebar.collapsed .pro-menu>ul>.pro-menu-item.pro-sub-menu>.pro-inner-list-item.has-arrow {
+  padding-left: 10px;
+}
+
+.pro-sidebar.collapsed .pro-menu>ul>.pro-menu-item.pro-sub-menu>.pro-inner-list-item>.popper-inner {
+  max-height: 100vh;
+  overflow-y: auto;
+  background-color: #2b2b2b;
+  padding-left: 20px;
+  border-radius: 4px;
+}
+
+.pro-sidebar.collapsed .pro-menu>ul>.pro-menu-item.pro-sub-menu:hover>.pro-inner-list-item {
+  transition: visibility, transform 0.3s;
+  visibility: visible;
+}
+
+.pro-sidebar.collapsed .pro-menu>ul>.pro-menu-item.pro-sub-menu:hover .pro-icon-wrapper .pro-icon {
+  animation: swing ease-in-out 0.5s 1 alternate;
+}
+
+.pro-sidebar.collapsed .pro-menu>ul>.pro-menu-item.pro-sub-menu .pro-inner-list-item .pro-sub-menu-item,
+.pro-sidebar.collapsed .pro-menu>ul>.pro-menu-item.pro-sub-menu .pro-inner-list-item .pro-inner-item {
+  padding: 8px 30px 8px 5px;
+}
+
+/* ////////////////////// */
+
+
+.pro-menu.submenu-bullets .pro-menu-item.pro-sub-menu .pro-inner-list-item .pro-inner-item:before {
+  content: '';
+  display: inline-block;
+  width: 4px;
+  min-width: 4px;
+  height: 4px;
+  border: 1px solid #2b2b2b;
+  border-radius: 50%;
+  margin-right: 15px;
+  position: relative;
+  box-shadow: 1px 0px 0px #adadad, 0px -1px 0px #adadad, 0px 1px 0px #adadad, -1px 0px 0px #adadad;
+}
+
+.pro-menu .pro-menu-item>.pro-inner-item>.pro-item-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.react-slidedown {
+  height: 0;
+  transition-property: none;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
+}
+
+.react-slidedown.transitioning {
+  overflow-y: hidden;
+}
+
+.react-slidedown.closed {
+  display: none;
+}
+
+.react-slidedown {
+  height: auto;
+  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%);
+}
+
+.pro-sub-menu>.pro-inner-list-item>div>ul {
+  padding-top: 15px;
+  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;
+  width: 0;
+  height: 0;
+  border-top: 7px solid transparent;
+  border-bottom: 7px solid transparent;
+}
+
+.popper-element[data-popper-placement^='left']>.popper-arrow {
+  right: 0;
+  border-right: 7px solid #2b2b2b;
+}
+
+.popper-element[data-popper-placement^='right']>.popper-arrow {
+  left: 0;
+  border-left: 7px solid #2b2b2b;
+}

package/molecules/ItemMenu/ItemMenu.stories.js

@@ -0,0 +1,40 @@
+import { ItemMenu, styles, options } from '.'
+
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(ItemMenu, styles)
+const ListTemplate = getListTemplate(ItemMenu, styles)
+
+export default {
+  title: 'Molecules/ItemMenu',
+  component: ItemMenu,
+  args: {
+    children: 'Home',
+    subMenu: false,
+    itemSubmenu: options.itemSubmenu,
+  },
+  argTypes: {
+    itemSubmenu: {
+      description: '**array of shaped objects:**',
+      table: {
+        type: {
+          summary: 'object',
+          detail: "{ text: 'string', href: 'string', view: 'bool'}",
+        },
+      },
+    },
+    size: getOptionsArgTypes(options.sizes),
+    icon: getOptionsArgTypes(options.icons),
+    color: getOptionsArgTypes(options.colors),
+    background: getOptionsArgTypes(options.backgrounds),
+    children: { control: 'text' },
+  },
+}
+
+export const Default = Template.bind({})
+// export const List = ListTemplate.bind({})
+// List.args = { items: options.types.map((type) => ({ type })) }

package/molecules/ItemMenu/constants.js

@@ -0,0 +1,33 @@
+import { options as iconOptions } from '../../atoms/Icon/constants'
+
+export const options = {
+    sizes: ['xs', 'sm', 'md', 'lg', 'xl'],
+    icons: iconOptions.names,
+    colors: ['base', 'highlight', 'muted', 'primary', 'inverted'],
+    backgrounds: [
+      'transparent',
+      'base',
+      'highlight',
+      'inverted',
+      'muted',
+      'spotlight',
+    ],
+    subMenu: false,
+    itemSubmenu: [
+      {
+          text: "Taxi",
+          href: "/taxi",
+          view: true,
+      },
+      {
+          text: "Parking",
+          href: "/parking",
+          view: true,
+      },
+      {
+          text: "Sharing",
+          href: "/sharing",
+          view: true,
+      },
+  ],
+  }

package/molecules/ItemMenu/index.js

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

package/package.json

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