imbric-theme 0.4.1 → 0.4.3

package/molecules/CardProductTypesBooking/constants.js

@@ -0,0 +1 @@
+export const options = { types: [] }

package/molecules/CardProductTypesBooking/index.js

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

package/molecules/CardServices/CardServices.js

@@ -0,0 +1,287 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Horizontal, Vertical } from '../../layout/Spacer/components'
+import Label from '../../atoms/Label'
+import Icon from '../../atoms/Icon'
+
+import styles from './CardServices.module.css'
+import { options } from './constants'
+import withStyles from '../../hocs/withStyles'
+
+
+export const handleClick = ({ onClick }) => (event) => {
+  onClick(event)
+}
+
+export const CardServices = ({
+  getStyles,
+  onClick,
+  isClickable,
+  txtDateService,
+  txtOriginService,
+  txtDestinationService,
+  txtServiceService,
+  txtUserService,
+  txtRefService,
+  txtUserNumberService,
+  
+}) => {
+  return (
+    <div
+      onClick={onClick && handleClick({ onClick })}
+      className={getStyles('card-services', {
+        'is-clickable': isClickable,
+      })}
+    >
+
+      <div>
+
+        <p className={getStyles('card-content-p')}>
+          <Icon
+            name="clock"
+            size="xs"
+          />
+          &nbsp;
+          {txtDateService}
+        </p>
+        <Vertical size="xs" />
+
+        <div className={getStyles('card-content')}>
+
+          <div className={getStyles('card-subcontent')}>
+
+            <Vertical size="xs" />
+
+            <Label >
+              <Icon
+                name="originOrder"
+                size="xs"
+                color="highlight"
+              />
+              &nbsp;
+              Origen
+            </Label>
+
+            <p className={getStyles('card-content-p')}>{txtOriginService}</p>
+
+          </div>
+
+          <Horizontal size="sm" />
+
+          <div className={getStyles('card-subcontent')}>
+
+            <Vertical size="xs" />
+
+            <Label >
+              <Icon
+                name="destinationOrder"
+                size="xs"
+                color="highlight"
+              />
+              &nbsp;
+              Destino
+            </Label>
+
+            <p className={getStyles('card-content-p')}>{txtDestinationService}</p>
+
+          </div>
+
+        </div>
+
+        <Vertical size="xs" />
+
+        <div className={getStyles('card-content')}>
+
+          <div className={getStyles('card-subcontent')}>
+
+            <Vertical size="xs" />
+
+            <Label >
+              <Icon
+                name="travelPrograms"
+                size="xs"
+                color="highlight"
+              />
+              &nbsp;
+              Servicio
+            </Label>
+
+            <p className={getStyles('card-content-p')}>{txtServiceService}</p>
+
+          </div>
+
+          <Horizontal size="sm" />
+
+          <div className={getStyles('card-subcontent')}>
+
+            <Vertical size="xs" />
+
+            <Label >
+              <Icon
+                name="user"
+                size="xs"
+                color="highlight"
+              />
+              &nbsp;
+              Pasajero
+            </Label>
+
+            <p className={getStyles('card-content-p')}>{txtUserService}</p>
+
+          </div>
+
+        </div>
+
+        <Vertical size="xs" />
+
+        <div className={getStyles('card-content')}>
+
+          <div className={getStyles('card-subcontent')}>
+
+            <Vertical size="xs" />
+
+            <Label >
+              <Icon
+                name="reference"
+                size="xs"
+                color="highlight"
+              />
+              &nbsp;
+              REF
+            </Label>
+
+            <p className={getStyles('card-content-p')}>{txtRefService}</p>
+
+          </div>
+
+          <Horizontal size="sm" />
+
+          <div className={getStyles('card-subcontent')}>
+
+            <Vertical size="xs" />
+
+            <Label >
+              <Icon
+                name="userNumber"
+                size="xs"
+                color="highlight"
+              />
+              &nbsp;
+              Usuario
+            </Label>
+
+            <p className={getStyles('card-content-p')}>{txtUserNumberService}</p>
+
+          </div>
+
+        </div>
+
+      </div>
+      {/* <Vertical size="xs" /> */}
+
+      <div className={getStyles('card-content-action')}>
+
+        <div className={getStyles('card-subcontent-action')}>
+
+          <Icon
+            name="userView"
+            onClick={function noRefCheck() { }}
+            size="sm"
+          />
+
+        </div>
+
+
+
+        <div className={getStyles('card-subcontent-action')}>
+
+          <Icon
+            name="returnOrder"
+            onClick={function noRefCheck() { }}
+            size="sm"
+          />
+
+        </div>
+
+
+
+        <div className={getStyles('card-subcontent-action')}>
+
+          <Icon
+            name="repeatOrder"
+            onClick={function noRefCheck() { }}
+            size="sm"
+          />
+
+        </div>
+
+
+
+        <div className={getStyles('card-subcontent-action')}>
+
+          <Icon
+            name="edit"
+            onClick={function noRefCheck() { }}
+            size="sm"
+          />
+
+        </div>
+
+
+
+        <div className={getStyles('card-subcontent-action')}>
+
+          <Icon
+            name="trash"
+            onClick={function noRefCheck() { }}
+            size="sm"
+          />
+
+        </div>
+
+
+
+        <div className={getStyles('card-subcontent-action')}>
+
+          <Icon
+            name="circleStatus"
+            onClick={function noRefCheck() { }}
+            size="sm"
+          />
+
+        </div>
+
+
+
+      </div>
+
+      {/* {children} */}
+    </div>
+  )
+}
+
+CardServices.propTypes = {
+  getStyles: PropTypes.func.isRequired,
+  onClick: PropTypes.func,
+  isClickable: PropTypes.bool,
+  txtDateService: PropTypes.any,
+  txtOriginService: PropTypes.string,
+  txtDestinationService: PropTypes.string,
+  txtServiceService: PropTypes.string,
+  txtUserService: PropTypes.string,
+  txtRefService: PropTypes.string,
+  txtUserNumberService: PropTypes.string,
+}
+
+CardServices.defaultProps = {
+  getStyles: () => { },
+  txtDateService: '31/08/2022 13:21',
+  txtOriginService: 'Aeropuerto Barajas T4, Madrid, España',
+  txtDestinationService: 'Estación de Chamartín, Madrid, España',
+  txtServiceService: 'ECO (Tarifa máxima)',
+  txtUserService: 'Alberto Alvarez',
+  txtRefService: '1946980768',
+  txtUserNumberService: 'WF3941',
+}
+
+export default withStyles(styles)(CardServices)

package/molecules/CardServices/CardServices.module.css

@@ -0,0 +1,93 @@
+.card-services {
+  /* display: flex; */
+  width: 100%;
+  align-items: center;
+  padding: 10px;
+  border: var(--border-width-thin) solid var(--color-base-transparent);
+  border-radius: var(--card-border-radius);
+  box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);
+  color: var(--color-font-base);
+  transition: box-shadow .28s cubic-bezier(.4, 0, .2, 1);
+  background-color: #fff;
+  margin: 0;
+  cursor: auto;
+  max-width: 450px;
+  min-width: 450px;
+
+  align-items: center;
+  align-content: center;
+  justify-content: space-around;
+  margin-right: 10px;
+  display: flex;
+
+}
+
+.card-content {
+  display: flex;
+  align-items: flex-start;
+  align-content: space-between;
+  border-top: 1px solid #dfe8f2;
+}
+
+.card-content-action {
+  padding-left: 10px;
+  border-left: 1px solid #dfe8f2;
+}
+
+.card-content-p {
+  margin: 0;
+  padding: 0;
+  font-size: var(--font-size-mini);
+  font-weight: var(--font-weight-normal);
+  line-height: var(--line-height-tight);
+}
+
+.card-subcontent {
+  width: 100%;
+}
+
+.card-subcontent-action {
+  display: flex;
+  align-items: center;
+}
+
+.size-sm {
+  min-height: 45px;
+}
+
+.size-md {
+  min-height: 80px;
+}
+
+.size-lg {
+  min-height: 115px;
+}
+
+.color-primary {
+  background: var(--color-primary);
+  color: var(--color-primary-inverted);
+}
+
+.color-secondary {
+  background: var(--color-secondary);
+  color: var(--color-secondary-inverted);
+}
+
+.color-base {
+  border: var(--border-width-thin) solid var(--color-gray-400);
+  background: var(--background-color-primary-highlight);
+}
+
+.is-clickable {
+  cursor: pointer;
+}
+
+.is-draggable {
+  cursor: grab;
+  user-select: none;
+}
+
+.card-services.is-clickable:active,
+.card-services.is-draggable:active {
+  box-shadow: var(--box-shadow-xs);
+}

package/molecules/CardServices/CardServices.stories.js

@@ -0,0 +1,41 @@
+import { CardServices, options, styles } from '.'
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(CardServices, styles)
+const ListTemplate = getListTemplate(CardServices, styles)
+
+export default {
+  title: 'Molecules/CardServices',
+  component: CardServices,
+  args: {
+    // children:
+    //   'Lacerations coaster sort comings windlance happily EIf-witch handful unbefitting? Decide rising startled Aragorn invitations midnight deserves fortunes innards. You cannot hide. I see you. There is no life in the void. Only death. Mirror Emyn dreamed!',
+  },
+  argTypes: {
+    // color: getOptionsArgTypes(options.colors),
+    // size: getOptionsArgTypes(options.sizes),
+    // children: { control: 'text' },
+  },
+}
+
+export const Default = Template.bind({})
+
+// export const Clickable = Template.bind({})
+// Clickable.args = {
+//   isClickable: true,
+// }
+
+// export const Dragabble = Template.bind({})
+// Dragabble.args = {
+//   isDraggable: true,
+// }
+
+// export const Colors = ListTemplate.bind({})
+// Colors.args = { items: options.colors.map((color) => ({ color })) }
+
+// export const Sizes = ListTemplate.bind({})
+// Sizes.args = { items: options.sizes.map((size) => ({ size })) }

package/molecules/CardServices/constants.js

@@ -0,0 +1,5 @@
+export const options = {
+    colors: ['base', 'primary', 'secondary'],
+    sizes: ['sm', 'md', 'lg'],
+  }
+  

package/molecules/CardServices/index.js

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

package/molecules/ItemMenu/ItemMenu.js

@@ -87,12 +87,14 @@ export const ItemMenu = ({ children, getStyles, size, icon, color, background, s
               <ul>
 
                 {itemSubmenu.map((item, index) => (
+                  item.view ?
                   <Link key={index} href={item.href} passHref>
                     <li className={getStyles('pro-menu-item', { 'activesub': item.active })}>
                       <div className={getStyles('pro-inner-item')} role="button">
                         <span className={getStyles('pro-item-content')}>{item.text}</span></div>
                     </li>
                   </Link>
+                  : null
                 ))}
               </ul>
             </div>

package/molecules/RowTable/RowTable.js

@@ -7,6 +7,7 @@ import withStyles from '../../hocs/withStyles'
 
 import Moment from 'react-moment'
 import Icon from '../../atoms/Icon'
+import Picture from '../../atoms/Picture'
 import { Horizontal, Vertical } from '../../layout/Spacer/components'
 
 export const RowTable = ({ getStyles, slice, columnsData, onClickActionEdit, onClickActionSendEmail, onClickActionDelete }) => {
@@ -31,100 +32,126 @@ export const RowTable = ({ getStyles, slice, columnsData, onClickActionEdit, onC
                 itemTd.activeView ?
                   (
 
-
-                    itemTd.subAccessor === 'action'
+                    itemTd.isPicture
 
                       ?
-
-                      <td className={getStyles('td')} key={[itemTd.accessor]}>
-
-                        <Icon
-                          background="base"
-                          name="settings"
-                          onClick={(e) => { onClickActionEdit(e, item) }}
-                        />
-                        <Horizontal size="xs" />
-                        <Icon
-                          background="base"
-                          name="arrowUp"
-                          // onClick={(e) => onClickEdit(e, item)}
-                          onClick={e => { onClickActionSendEmail(e, item) }}
-                        />
-                        <Horizontal size="xs" />
-                        <Icon
-                          background="base"
-                          name="trash"
-                          // onClick={(e) => onClickEdit(e, item)}
-                          onClick={e => { onClickActionDelete(e, item) }}
+                      <td className={getStyles('td', 'tdacction')} key={[itemTd.accessor]}>
+                        <Picture
+                          src={item[itemTd.accessor]}
+                          width={50}
                         />
                       </td>
-
                       :
 
-                      itemTd.subAccessor !== ''
+                      itemTd.subAccessor === 'action'
 
                         ?
 
-                        <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor][itemTd.subAccessor]}</td>
+                        <td className={getStyles('td')} key={[itemTd.accessor]}>
+
+                          {itemTd.viewEdit ?
+                            <>
+                              <Icon
+                                background="base"
+                                name="edit"
+                                onClick={(e) => { onClickActionEdit(e, item) }}
+                              />
+                              <Horizontal size="xs" />
+                            </>
+                            : null}
+
+                          {itemTd.viewEmailSend ?
+                            <>
+                              <Icon
+                                background="base"
+                                name="sendEmail"
+                                // onClick={(e) => onClickEdit(e, item)}
+                                onClick={e => { onClickActionSendEmail(e, item) }}
+                              />
+                              <Horizontal size="xs" />
+                            </>
+                            : null}
+
+                          {itemTd.viewTrash ?
+                            <>
+                              <Icon
+                                background="base"
+                                name="trash"
+                                // onClick={(e) => onClickEdit(e, item)}
+                                onClick={e => { onClickActionDelete(e, item) }}
+                              />
+                              <Horizontal size="xs" />
+                            </>
+                            : null}
+
+                        </td>
 
                         :
 
-                        itemTd.typeFilter === 'date'
+                        itemTd.subAccessor !== ''
 
                           ?
 
-                          <td className={getStyles('td')} key={[itemTd.accessor]}>
-                            <Moment format="DD/MM/YYYY hh:mm:ss">
-                              {item[itemTd.accessor]}
-                            </Moment>
-                          </td>
+                          <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor][itemTd.subAccessor]}</td>
 
                           :
 
-                          itemTd.typeFilter === 'select'
+                          itemTd.typeFilter === 'date'
 
                             ?
 
-                            itemTd.optionsSelect.map((itemSelect) => (
-                              
+                            <td className={getStyles('td')} key={[itemTd.accessor]}>
+                              <Moment format="DD/MM/YYYY hh:mm:ss">
+                                {item[itemTd.accessor]}
+                              </Moment>
+                            </td>
 
-                              item[itemTd.accessor] === itemSelect.value ?
+                            :
 
-                                <td className={getStyles('td')} key={[itemTd.accessor]}>
-                                  {itemSelect.label}
-                                </td>
+                            itemTd.typeFilter === 'select'
 
-                                :
+                              ?
 
-                                null
-                            ))
+                              itemTd.optionsSelect.map((itemSelect) => (
 
-                            :
 
-                            itemTd.typeFilter === 'number'
+                                item[itemTd.accessor] === itemSelect.value ?
 
-                              ?
+                                  <td className={getStyles('td')} key={[itemTd.accessor]}>
+                                    {itemSelect.label}
+                                  </td>
 
-                              itemTd.subTypeFilter
+                                  :
 
-                                ?
-
-                                itemTd.characterExtra === 'km' 
-                                  ?
-                                  <td className={getStyles('td')} key={[itemTd.accessor]}>{(item[itemTd.accessor]/1000).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
-                                  : 
-                                  <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor].toFixed(2).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
-                                :
-                                <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor]}</td>
+                                  null
+                              ))
 
                               :
 
-                              itemTd.subTypeFilter
+                              itemTd.typeFilter === 'number'
 
                                 ?
-                                <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor].toString().replace(/\./g, ',').slice(0, 5)} {itemTd.characterExtra}</td>
+
+                                itemTd.subTypeFilter
+
+                                  ?
+
+                                  itemTd.characterExtra === 'km'
+                                    ?
+                                    <td className={getStyles('td')} key={[itemTd.accessor]}>{(item[itemTd.accessor] / 1000).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
+                                    :
+                                    <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor].toFixed(2).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
+                                  :
+                                  <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor]}</td>
+
                                 :
-                                <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor]}</td>
+
+                                itemTd.subTypeFilter
+
+                                  ?
+                                  <td className={getStyles('td')} key={[itemTd.accessor]}>{Number(item[itemTd.accessor]).toFixed(2).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
+                                  :
+                                  <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor]}</td>
 
                   ) : null
               ))}

package/molecules/RowTable/RowTable.module.css

@@ -19,4 +19,10 @@
   font-size: 12px;
   color: var(--color-font-base);
   border-bottom: solid 1px rgba(0, 0, 0, 0.1);
+}
+
+.tdacction {
+  max-width: 80px;
+  min-width: 80px;
+  width: 80px;
 }