imbric-theme 0.4.6 → 0.4.8

package/.dockerignore

@@ -0,0 +1,14 @@
+# Config folders
+.idea/
+.vscode/
+
+# Generated by MacOS
+.DS_Store
+
+# Generated by Windows
+Thumbs.db
+
+# Cache & build files
+node_modules/
+storybook-static/
+.eslintcache

package/.eslintignore

@@ -0,0 +1 @@
+node_modules

package/.prettierignore

@@ -0,0 +1 @@
+node_modules

package/atoms/Button/Button.js

@@ -20,6 +20,8 @@ export const Button = ({
   addons,
   isMuted,
   isInline,
+  isFloatRight,
+  isFloatLeft,
   onClick,
   getStyles,
 }) => (
@@ -29,6 +31,8 @@ export const Button = ({
     className={getStyles('button', ['type'], {
       'is-inline': isInline || type === 'tertiary',
       'is-muted': isMuted && type === 'primary',
+      'is-float-right': isFloatRight,
+      'is-float-left': isFloatLeft,
     })}
     onClick={onClick && handleClick({ onClick })}
   >
@@ -59,6 +63,8 @@ Button.propTypes = {
   onClick: PropTypes.func,
   isInline: PropTypes.bool,
   isMuted: PropTypes.bool,
+  isFloatRight: PropTypes.bool,
+  isFloatLeft: PropTypes.bool,
 }
 
 Button.defaultProps = {
@@ -66,6 +72,8 @@ Button.defaultProps = {
   getStyles: () => { },
   onClick: () => { },
   isInline: false,
+  isFloatRight: false,
+  isFloatLeft: false,
 }
 
 export default withStyles(styles)(Button)

package/atoms/Button/Button.module.css

@@ -64,3 +64,11 @@
   box-shadow: var(--box-shadow-none) !important;
   filter: brightness(1) !important;
 }
+
+.is-float-right {
+  float: right;
+}
+
+.is-float-left {
+  float: left;
+}

package/atoms/Icon/constants.js

@@ -934,6 +934,35 @@ export const iconsMap = {
       </>
     ),
   },
+  firstElement: {
+    viewBox: '0 0 24 24',
+    svg: (
+      <>
+        <path class="st0" d="M20.4,0H3.6C3.2,0,2.9,0.3,2.9,0.6v22.7c0,0.4,0.3,0.6,0.6,0.6h12.6c0.2,0,0.4-0.1,0.5-0.2l4.3-4.8
+			c0.1-0.1,0.2-0.3,0.2-0.4V0.6C21.1,0.3,20.8,0,20.4,0z M19,16.8l-3.8,0l0,0c-0.2,0-0.4,0.1-0.5,0.2c-0.1,0.1-0.2,0.3-0.2,0.5
+			l0,4.8H4.9V1.6H19C19,1.6,19,16.8,19,16.8z"/>
+        <path class="st0" d="M15.8,13.2h-4v0l1-0.8c1.6-1.4,2.9-2.8,2.9-4.6c0-1.9-1.3-3.4-3.8-3.4c-1.5,0-2.7,0.5-3.5,1.1L9,7.2
+			c0.6-0.4,1.4-0.9,2.3-0.9c1.2,0,1.8,0.7,1.8,1.6c0,1.3-1.2,2.5-3.5,4.6l-1.4,1.3v1.5h7.6V13.2z"/>
+      </>
+    ),
+  },
+  secondElement: {
+    viewBox: '0 0 24 24',
+    svg: (
+      <>
+        <g>
+          <g>
+            <path class="st0" d="M20.4,0H3.6C3.2,0,2.9,0.3,2.9,0.6v22.7c0,0.4,0.3,0.6,0.6,0.6h12.6c0.2,0,0.4-0.1,0.5-0.2l4.3-4.8
+			c0.1-0.1,0.2-0.3,0.2-0.4V0.6C21.1,0.3,20.8,0,20.4,0z M19,16.8h-3.8l0,0c-0.2,0-0.4,0.1-0.5,0.2s-0.2,0.3-0.2,0.5v4.8H4.9V1.6H19
+			V16.8z"/>
+          </g>
+        </g>
+        <g>
+          <path d="M13.4,15.3h-2.1V7.6c-0.8,0.7-1.6,1.2-2.7,1.6V7.3c0.5-0.2,1.1-0.5,1.8-1c0.6-0.5,1.1-1.1,1.3-1.7h1.7V15.3z" />
+        </g>
+      </>
+    ),
+  },
 
 }
 

package/index.js

@@ -41,6 +41,7 @@ export { default as AddButton } from './molecules/AddButton'
 export { default as ButtonIcon } from './molecules/ButtonIcon'
 export { default as CardServiceDetail } from './molecules/CardServiceDetail'
 export { default as CardServices } from './molecules/CardServices'
+export { default as CardServicesFinalized } from './molecules/CardServicesFinalized'
 export { default as CardProductTypesBooking } from './molecules/CardProductTypesBooking'
 export { default as Dropdown } from './molecules/Dropdown'
 export { default as LoadingError } from './molecules/LoadingError'

package/molecules/Accordion/Accordion.js

@@ -20,6 +20,7 @@ export const Accordion = ({
   onToggle,
   getStyles,
   defaultIsCollapsed,
+  idAccordion,
   addons,
 }) => {
   const [isCollapsed, setIsCollapsed] = useState(defaultIsCollapsed)
@@ -27,6 +28,7 @@ export const Accordion = ({
   return (
     <div className={getStyles('accordion')}>
       <div
+      id={idAccordion}
         className={getStyles('container')}
         onClick={handleToggle({ onToggle, isCollapsed, setIsCollapsed })}
       >

package/molecules/CardDefault/CardDefault.module.css

@@ -8,6 +8,7 @@
   border-radius: 4px;
   background: white;
   color: rgba(0, 0, 0, 0.87);
+  height: 100%;
 }
 
 .card-default-title {

package/molecules/CardServiceDetail/CardServiceDetail.module.css

@@ -43,7 +43,7 @@
   padding: 10px;
   color: #fff;
   margin: 0;
-  /* margin-left: 4px; */
+  margin-left: 4px;
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-normal);
   line-height: var(--line-height-tight);

package/molecules/CardServices/CardServices.js

@@ -60,7 +60,7 @@ export const CardServices = ({
       )}
     >
 
-      <div>
+      <div className={getStyles('card-content-p-box')}>
 
         <p className={getStyles('card-content-p')}>
           <Icon

package/molecules/CardServices/CardServices.module.css

@@ -29,9 +29,17 @@
   border-top: 1px solid #dfe8f2;
 }
 
+.card-content-p-box {
+  padding: 6px;
+}
+
 .card-content-action {
   padding-left: 10px;
   border-left: 1px solid #dfe8f2;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
 }
 
 .card-content-p {

package/molecules/CardServicesFinalized/CardServicesFinalized.js

@@ -0,0 +1,363 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+import ReactTooltip from 'react-tooltip'
+import { Horizontal, Vertical } from '../../layout/Spacer/components'
+import Label from '../../atoms/Label'
+import Icon from '../../atoms/Icon'
+
+import styles from './CardServicesFinalized.module.css'
+import { options } from './constants'
+import withStyles from '../../hocs/withStyles'
+
+export const handleClick = ({ onClick }) => (event) => {
+  onClick(event)
+}
+
+export const CardServicesFinalized = ({
+  getStyles,
+  onClick,
+  isClickable,
+  txtDateService,
+  txtOriginService,
+  txtDestinationService,
+  txtPriceService,
+  txtUserService,
+  txtRefService,
+  txtUserNumberService,
+  onClickUserView,
+  txtTootipUserView,
+  onClickReturnOrder,
+  txtTootipReturnOrder,
+  onClickRepeatOrder,
+  txtTootipRepeatOrder,
+  onClickEdit,
+  txtTootipEdit,
+  onClickTrash,
+  txtTootipTrash,
+  selectCard,
+  statusService,
+}) => {
+
+  // STATE TOOLTIP
+  const [isToolTipMounted, setIsToolTipMounted] = useState(false)
+
+  // TOOLTIP
+  const handleMouseEnter = () => {
+    setIsToolTipMounted(true)
+  }
+  const handleMouseLeave = () => {
+    setIsToolTipMounted(false)
+  }
+
+
+  return (
+    <div
+      onClick={onClick && handleClick({ onClick })}
+      className={getStyles('card-services-finalized',
+        { 'is-clickable': isClickable, },
+        { 'selectCard': selectCard },
+        // { 'flip-out-hor-bottom': selectCard }
+      )}
+    >
+
+      <div className={getStyles('card-content-p-box')}>
+
+        <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="price"
+                size="xs"
+                color="highlight"
+              />
+              &nbsp;
+              Precio
+            </Label>
+
+            <p className={getStyles('card-content-p')}>{txtPriceService}</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>
+
+      <div className={getStyles('card-content-action')}>
+
+        <div className={getStyles('card-subcontent-action')}>
+
+          <span
+            data-tip
+            data-for='userView'
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+          >
+            <Icon
+            color="highlight"
+              id='userViewIcon'
+              isClickable
+              name="userView"
+              onClick={onClickUserView}
+              size="sm"
+              className={getStyles('icon-view')}
+            />
+
+          </span>
+
+          {isToolTipMounted ? (
+            <ReactTooltip id='userView' type='error'>
+              <span>{txtTootipUserView}</span>
+            </ReactTooltip>
+          ) : null}
+
+        </div>
+
+        <div className={getStyles('card-subcontent-action')}>
+
+          <span
+            data-tip
+            data-for='returnOrder'
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+          >
+            <Icon
+            color="highlight"
+              id='returnOrderIcon'
+              isClickable
+              name="returnOrder"
+              onClick={onClickReturnOrder}
+              size="sm"
+              className={getStyles('icon-view')}
+            />
+
+          </span>
+
+          {isToolTipMounted ? (
+            <ReactTooltip id='returnOrder' type='error'>
+              <span>{txtTootipReturnOrder}</span>
+            </ReactTooltip>
+          ) : null}
+
+        </div>
+
+        <div className={getStyles('card-subcontent-action')}>
+
+          <span
+            data-tip
+            data-for='repeatOrder'
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+          >
+            <Icon
+            color="highlight"
+              id='repeatOrderIcon'
+              isClickable
+              name="repeatOrder"
+              onClick={onClickRepeatOrder}
+              size="sm"
+              className={getStyles('icon-view')}
+            />
+
+          </span>
+
+          {isToolTipMounted ? (
+            <ReactTooltip id='repeatOrder' type='error'>
+              <span>{txtTootipRepeatOrder}</span>
+            </ReactTooltip>
+          ) : null}
+
+
+        </div>
+
+        <div className={getStyles('card-subcontent-action')}>
+
+          <Icon
+          className={getStyles(
+            // { 'icon-view-status10': statusService === 10 || -30 },
+            // { 'icon-view-status20': statusService === 20 },
+            { 'icon-view-status30': statusService === 30 || -20 || -40 },
+          )}
+            name="circleStatus"
+            size="sm"
+          />
+
+        </div>
+
+      </div>
+
+      {/* {children} */}
+    </div>
+  )
+}
+
+CardServicesFinalized.propTypes = {
+  getStyles: PropTypes.func.isRequired,
+  onClick: PropTypes.func,
+  isClickable: PropTypes.bool,
+  txtDateService: PropTypes.any,
+  txtOriginService: PropTypes.string,
+  txtDestinationService: PropTypes.string,
+  txtPriceService: PropTypes.string,
+  txtUserService: PropTypes.string,
+  txtRefService: PropTypes.string,
+  txtUserNumberService: PropTypes.string,
+  onClickUserView: PropTypes.func,
+  txtTootipUserView: PropTypes.string,
+  onClickReturnOrder: PropTypes.func,
+  txtTootipReturnOrder: PropTypes.string,
+  onClickRepeatOrder: PropTypes.func,
+  txtTootipRepeatOrder: PropTypes.string,
+  onClickEdit: PropTypes.func,
+  txtTootipEdit: PropTypes.string,
+  onClickTrash: PropTypes.func,
+  txtTootipTrash: PropTypes.string,
+  selectCard: PropTypes.bool,
+  statusService: PropTypes.number,
+}
+
+CardServicesFinalized.defaultProps = {
+  getStyles: () => { },
+  txtDateService: '31/08/2022 13:21',
+  txtOriginService: 'Aeropuerto Barajas T4, Madrid, España',
+  txtDestinationService: 'Estación de Chamartín, Madrid, España',
+  txtPriceService: '15,50 €',
+  txtUserService: 'Alberto Alvarez',
+  txtRefService: '1946980768',
+  txtUserNumberService: 'WF3941',
+  onClickUserView: () => { },
+  txtTootipUserView: 'Ver detalle del servicio',
+  onClickReturnOrder: () => { },
+  txtTootipReturnOrder: 'Crear retorno del servicio',
+  onClickRepeatOrder: () => { },
+  txtTootipRepeatOrder: 'Repetir servicio',
+  onClickEdit: () => { },
+  txtTootipEdit: 'Editar servicio (solo se puede editar 60min. antes)',
+  onClickTrash: () => { },
+  txtTootipTrash: 'Cancelar servicio',
+  selectCard: false,
+  statusService: 10,
+}
+
+export default withStyles(styles)(CardServicesFinalized)