imbric-theme 0.1.0

package/molecules/ItemMenu/ItemMenu.module.css

@@ -0,0 +1,363 @@
+@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: var(--font-size-base);
+  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 .pro-item-content {
+  color: var(--color-primary);
+}
+
+.pro-sub-menu .pro-menu-item.activesub .pro-item-content {
+  color: var(--color-primary);
+}
+
+.pro-menu-item.pro-sub-menu.activesubtxt .pro-inner-item .pro-item-content.title {
+  color: var(--color-primary);
+  /* font-size: 32px; */
+}
+
+/* ////////////////////// */
+
+.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: 10px 30px 10px 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-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;
+}
+
+.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,42 @@
+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,
+    itemActive: false,
+    itemHref: '/'
+  },
+  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,36 @@
+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,
+          active: false,
+      },
+      {
+          text: "Parking",
+          href: "/parking",
+          view: true,
+          active: false,
+      },
+      {
+          text: "Sharing",
+          href: "/sharing",
+          view: true,
+          active: false,
+      },
+  ],
+  }

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/molecules/LoadingError/LoadingError.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Loading from '../../atoms/Loading'
+import Error from '../Error'
+
+export const LoadingError = ({
+  children,
+  isLoading,
+  errorMessage,
+  errorTitle,
+}) => {
+  if (isLoading) {
+    return <Loading isShown={isLoading} />
+  }
+
+  if (errorMessage) {
+    return <Error title={errorTitle}>{errorMessage}</Error>
+  }
+
+  return <>{children}</>
+}
+
+LoadingError.propTypes = {
+  children: PropTypes.node.isRequired,
+  isLoading: PropTypes.bool,
+  errorMessage: PropTypes.string,
+  errorTitle: PropTypes.string,
+}
+
+export default LoadingError

package/molecules/LoadingError/LoadingError.stories.js

@@ -0,0 +1,24 @@
+import { LoadingError } from '.'
+
+import { getTemplate } from '../../helpers/storybook'
+
+const Template = getTemplate(LoadingError)
+
+export default {
+  title: 'Molecules/LoadingError',
+  component: LoadingError,
+  args: {
+    children:
+      "Exile ruins brook Angmar inn wars retaken. Swiftly attacks Grma merely! Opinion Eorlingas inquisitive windlance? You are full of surprises, Master Baggins. Houses warning garden noble innocent silver charm numerous thirsty came Treebeard's warm.",
+  },
+}
+
+export const Default = Template.bind({})
+
+export const Loading = Template.bind({})
+Loading.args = { isLoading: true }
+
+export const Error = Template.bind({})
+Error.args = {
+  errorMessage: 'ext Grimbold sneak-thief cheekbones myth overfond task',
+}

package/molecules/LoadingError/__snapshots__/LoadingError.stories.js.snap

@@ -0,0 +1,109 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Molecules/LoadingError Default 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  Exile ruins brook Angmar inn wars retaken. Swiftly attacks Grma merely! Opinion Eorlingas inquisitive windlance? You are full of surprises, Master Baggins. Houses warning garden noble innocent silver charm numerous thirsty came Treebeard's warm.
+</div>
+`;
+
+exports[`Storyshots Molecules/LoadingError Error 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <div
+    className="error"
+  >
+    <div
+      className="icon-warning icon color-base size-md background-transparent"
+      style={
+        Object {
+          "height": 35,
+          "width": 35,
+        }
+      }
+    >
+      <svg
+        height={35}
+        viewBox="0 0 20 20"
+        width={35}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clipRule="evenodd"
+          d="M10 20C4.48612 20 0 15.5139 0 10C0 4.48612 4.48612 0 10 0C15.5139 0 20 4.48612 20 10C20 15.5139 15.5139 20 10 20ZM10 1.09864C5.09155 1.09864 1.09864 5.09155 1.09864 10C1.09864 14.9084 5.09155 18.9014 10 18.9014C14.9084 18.9014 18.9014 14.9084 18.9014 10C18.9014 5.09155 14.9084 1.09864 10 1.09864Z"
+          fillRule="evenodd"
+        />
+        <path
+          d="M10.7837 11.8579H9.25293L9.08447 4.33594H10.9595L10.7837 11.8579ZM9.0332 14.1577C9.0332 13.8794 9.12354 13.6499 9.3042 13.4692C9.48486 13.2837 9.73145 13.1909 10.0439 13.1909C10.3564 13.1909 10.603 13.2837 10.7837 13.4692C10.9644 13.6499 11.0547 13.8794 11.0547 14.1577C11.0547 14.4263 10.9668 14.6509 10.791 14.8315C10.6152 15.0122 10.3662 15.1025 10.0439 15.1025C9.72168 15.1025 9.47266 15.0122 9.29688 14.8315C9.12109 14.6509 9.0332 14.4263 9.0332 14.1577Z"
+        />
+      </svg>
+    </div>
+    <div
+      className="spacer horizontal"
+      style={
+        Object {
+          "height": "100%",
+          "maxHeight": "auto",
+          "width": 15,
+        }
+      }
+    />
+    <div>
+      <p
+        className="paragraph color-base size-md weight-normal"
+      >
+        ext Grimbold sneak-thief cheekbones myth overfond task
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Molecules/LoadingError Loading 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <div
+    className="container"
+  >
+    <div
+      className="loading is-shown"
+    />
+  </div>
+</div>
+`;

package/molecules/LoadingError/index.js

@@ -0,0 +1 @@
+export { default, LoadingError } from './LoadingError'