imbric-theme 0.5.9 → 0.6.1

package/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "editor.formatOnSave": true
+}

package/Dockerfile

@@ -8,7 +8,6 @@ COPY . /app/
 
 ## build app stage
 RUN yarn install --network-timeout 200000 \
-    && yarn add next@11 react@18 react-dom@18 --network-timeout 200000 \
     && yarn build
 
 ## final image stage

package/helpers/storybook.js

@@ -20,8 +20,8 @@ export const getListTemplate = (Component, styles) => ({ items, ...args }) =>
     )
   })
 
-export const getOptionsArgTypes = (options) => ({
-  description: '**options:**',
+export const getOptionsArgTypes = (options, description = '**Options:**') => ({
+  description: description,
   table: {
     type: { summary: options.map((option) => `'${option}'`).join('|') },
   },

package/layout/Sidebar/Sidebar.module.css

@@ -68,7 +68,7 @@
 }
 
 .logotext {
-  padding: 13px 20px;
+  padding: 15px 20px;
 }
 
 .closemenu {
@@ -157,7 +157,7 @@
   display: none;
 }
 
-.header.collapsed>.pro-sidebar>.pro-sidebar-inner>.pro-sidebar-layout >.pro-sidebar-header {
+.header.collapsed>.pro-sidebar>.pro-sidebar-inner>.pro-sidebar-layout>.pro-sidebar-header {
   width: 80px;
   min-width: 80px;
 }

package/molecules/CardServiceDetail/CardServiceDetail.js

@@ -33,7 +33,18 @@ export const CardServiceDetail = ({
   txtSmsDriverService,
   onClickCross,
   txtTootipCross,
-  selectCard,
+  labelUserService,
+  labelZoneService,
+  labelTimeTotalService,
+  labelDistanceService,
+  labelServiceService,
+  labelPayService,
+  labelPriceService,
+  labelRefService,
+  labelModelCarService,
+  labelCarNumberService,
+  labelNumberDriverService,
+  labelSmsDriverService,
 }) => {
 
   // STATE TOOLTIP
@@ -81,7 +92,7 @@ export const CardServiceDetail = ({
                 color="highlight"
               />
                
-              Creado por:
+              {labelUserService}
             </Label>
 
             <p className={getStyles('card-content-p')}>&nbsp; {txtUserService}</p>
@@ -101,7 +112,7 @@ export const CardServiceDetail = ({
                 color="highlight"
               />
               &nbsp;
-              Recogida
+              {labelZoneService}
             </Label>
 
             <p className={getStyles('card-content-p')}>{txtZoneService}</p>
@@ -117,7 +128,7 @@ export const CardServiceDetail = ({
                 color="highlight"
               />
               &nbsp;
-              Tiempo estimado
+              {labelTimeTotalService}
             </Label>
 
             <p className={getStyles('card-content-p')}>{txtTimeTotalService}</p>
@@ -133,7 +144,7 @@ export const CardServiceDetail = ({
                 color="highlight"
               />
               &nbsp;
-              Distancia
+              {labelDistanceService}
             </Label>
 
             <p className={getStyles('card-content-p')}>{txtDistanceService}</p>
@@ -142,7 +153,6 @@ export const CardServiceDetail = ({
 
         </div>
 
-
         <div className={getStyles('card-content')}>
 
           <div className={getStyles('card-subcontent')}>
@@ -154,7 +164,7 @@ export const CardServiceDetail = ({
                 color="highlight"
               />
               &nbsp;
-              Servicio
+              {labelServiceService}
             </Label>
 
             <p className={getStyles('card-content-p')}>{txtServiceService}</p>
@@ -170,7 +180,7 @@ export const CardServiceDetail = ({
                 color="highlight"
               />
               &nbsp;
-              Método de pago
+              {labelPayService}
             </Label>
 
             <p className={getStyles('card-content-p')}>{txtPayService}</p>
@@ -186,7 +196,7 @@ export const CardServiceDetail = ({
                 color="highlight"
               />
               &nbsp;
-              Precio estimado
+              {labelPriceService}
             </Label>
 
             <p className={getStyles('card-content-p')}>{txtPriceService}</p>
@@ -195,7 +205,6 @@ export const CardServiceDetail = ({
 
         </div>
 
-
         <div className={getStyles('card-content')}>
 
           <div className={getStyles('card-subcontent')}>
@@ -207,7 +216,7 @@ export const CardServiceDetail = ({
                 color="highlight"
               />
               &nbsp;
-              Proveedor
+              {labelRefService}
             </Label>
 
             <p className={getStyles('card-content-p')}>{txtRefService}</p>
@@ -223,7 +232,7 @@ export const CardServiceDetail = ({
                 color="highlight"
               />
               &nbsp;
-              Modelo
+              {labelModelCarService}
             </Label>
 
             <p className={getStyles('card-content-p')}>{txtModelCarService}</p>
@@ -239,7 +248,7 @@ export const CardServiceDetail = ({
                 color="highlight"
               />
               &nbsp;
-              Matrícula
+              {labelCarNumberService}
             </Label>
 
             <p className={getStyles('card-content-p')}>{txtCarNumberService}</p>
@@ -259,7 +268,7 @@ export const CardServiceDetail = ({
                 color="highlight"
               />
               &nbsp;
-              Telefono conductor
+              {labelNumberDriverService}
             </Label>
 
             <p className={getStyles('card-content-p')}>{txtNumberDriverService}</p>
@@ -275,7 +284,7 @@ export const CardServiceDetail = ({
                 color="highlight"
               />
               &nbsp;
-              Mensaje al conductor
+              {labelSmsDriverService}
             </Label>
 
             <p className={getStyles('card-content-p')}>{txtSmsDriverService}</p>
@@ -341,6 +350,18 @@ CardServiceDetail.propTypes = {
   onClickCross: PropTypes.func,
   txtTootipCross: PropTypes.string,
   selectCard: PropTypes.bool,
+  labelUserService: PropTypes.string,
+  labelZoneService: PropTypes.string,
+  labelTimeTotalService: PropTypes.string,
+  labelDistanceService: PropTypes.string,
+  labelServiceService: PropTypes.string,
+  labelPayService: PropTypes.string,
+  labelPriceService: PropTypes.string,
+  labelRefService: PropTypes.string,
+  labelModelCarService: PropTypes.string,
+  labelCarNumberService: PropTypes.string,
+  labelNumberDriverService: PropTypes.string,
+  labelSmsDriverService: PropTypes.string,
 }
 
 CardServiceDetail.defaultProps = {
@@ -362,6 +383,18 @@ CardServiceDetail.defaultProps = {
   onClickCross: () => { },
   txtTootipCross: 'Cerrar',
   selectCard: false,
+  labelUserService: 'Creado por:',
+  labelZoneService: 'Recogida',
+  labelTimeTotalService: 'Tiempo estimado',
+  labelDistanceService: 'Distancia',
+  labelServiceService: 'Servicio',
+  labelPayService: 'Método de pago',
+  labelPriceService: 'Precio estimado',
+  labelRefService: 'Proveedor',
+  labelModelCarService: '  Modelo',
+  labelCarNumberService: ' Matrícula',
+  labelNumberDriverService: ' Telefono conductor',
+  labelSmsDriverService: 'Mensaje al conductor',
 }
 
 export default withStyles(styles)(CardServiceDetail)

package/molecules/CardServices/CardServices.js

@@ -34,8 +34,15 @@ export const CardServices = ({
   txtTootipEdit,
   onClickTrash,
   txtTootipTrash,
+  txtTootipCircleStatus,
   selectCard,
   statusService,
+  labelOriginService,
+  labelDestinationService,
+  labelServiceService,
+  labelUserService,
+  labelRefService,
+  labelUserNumberService,
 }) => {
 
   // STATE TOOLTIP
@@ -85,7 +92,7 @@ export const CardServices = ({
                 color="highlight"
               />
                
-              Origen
+              {labelOriginService}
             </Label>
 
             <p className={getStyles('card-content-p')}>{txtOriginService}</p>
@@ -105,7 +112,7 @@ export const CardServices = ({
                 color="highlight"
               />
               &nbsp;
-              Destino
+              {labelDestinationService}
             </Label>
 
             <p className={getStyles('card-content-p')}>{txtDestinationService}</p>
@@ -129,7 +136,7 @@ export const CardServices = ({
                 color="highlight"
               />
               &nbsp;
-              Servicio
+              {labelServiceService}
             </Label>
 
             <p className={getStyles('card-content-p')}>{txtServiceService}</p>
@@ -149,7 +156,7 @@ export const CardServices = ({
                 color="highlight"
               />
               &nbsp;
-              Pasajero
+              {labelUserService}
             </Label>
 
             <p className={getStyles('card-content-p')}>{txtUserService}</p>
@@ -173,7 +180,7 @@ export const CardServices = ({
                 color="highlight"
               />
               &nbsp;
-              REF
+              {labelRefService}
             </Label>
 
             <p className={getStyles('card-content-p')}>{txtRefService}</p>
@@ -193,7 +200,7 @@ export const CardServices = ({
                 color="highlight"
               />
               &nbsp;
-              Usuario
+              {labelUserNumberService}
             </Label>
 
             <p className={getStyles('card-content-p')}>{txtUserNumberService}</p>
@@ -215,7 +222,7 @@ export const CardServices = ({
             onMouseLeave={handleMouseLeave}
           >
             <Icon
-            color="highlight"
+              color="highlight"
               id='userViewIcon'
               isClickable
               name="userView"
@@ -243,7 +250,7 @@ export const CardServices = ({
             onMouseLeave={handleMouseLeave}
           >
             <Icon
-            color="highlight"
+              color="highlight"
               id='returnOrderIcon'
               isClickable
               name="returnOrder"
@@ -271,7 +278,7 @@ export const CardServices = ({
             onMouseLeave={handleMouseLeave}
           >
             <Icon
-            color="highlight"
+              color="highlight"
               id='repeatOrderIcon'
               isClickable
               name="repeatOrder"
@@ -300,7 +307,7 @@ export const CardServices = ({
             onMouseLeave={handleMouseLeave}
           >
             <Icon
-            color="highlight"
+              color="highlight"
               id='editIcon'
               isClickable
               name="edit"
@@ -329,7 +336,7 @@ export const CardServices = ({
             onMouseLeave={handleMouseLeave}
           >
             <Icon
-            color="highlight"
+              color="highlight"
               id='trashIcon'
               isClickable
               name="trash"
@@ -350,15 +357,30 @@ export const CardServices = ({
 
         <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"
-          />
+          <span
+            data-tip
+            data-for='circleStatus'
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+          >
+
+            <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"
+            />
+
+          </span>
+
+          {isToolTipMounted ? (
+            <ReactTooltip id='circleStatus' type='error'>
+              <span>{txtTootipCircleStatus}</span>
+            </ReactTooltip>
+          ) : null}
 
         </div>
 
@@ -390,8 +412,15 @@ CardServices.propTypes = {
   txtTootipEdit: PropTypes.string,
   onClickTrash: PropTypes.func,
   txtTootipTrash: PropTypes.string,
+  txtTootipCircleStatus: PropTypes.string,
   selectCard: PropTypes.bool,
   statusService: PropTypes.number,
+  labelOriginService: PropTypes.string,
+  labelDestinationService: PropTypes.string,
+  labelServiceService: PropTypes.string,
+  labelUserService: PropTypes.string,
+  labelRefService: PropTypes.string,
+  labelUserNumberService: PropTypes.string,
 }
 
 CardServices.defaultProps = {
@@ -413,8 +442,15 @@ CardServices.defaultProps = {
   txtTootipEdit: 'Editar servicio (solo se puede editar 60min. antes)',
   onClickTrash: () => { },
   txtTootipTrash: 'Cancelar servicio',
+  txtTootipCircleStatus: '',
   selectCard: false,
   statusService: 10,
+  labelOriginService: 'Origen',
+  labelDestinationService: 'Destino',
+  labelServiceService: 'Servicio',
+  labelUserService: 'Pasajero',
+  labelRefService: 'REF',
+  labelUserNumberService: 'Usuario',
 }
 
 export default withStyles(styles)(CardServices)

package/molecules/CardServicesFinalized/CardServicesFinalized.js

@@ -30,6 +30,7 @@ export const CardServicesFinalized = ({
   txtTootipReturnOrder,
   onClickRepeatOrder,
   txtTootipRepeatOrder,
+  txtTootipCircleStatus,
   onClickEdit,
   txtTootipEdit,
   onClickTrash,
@@ -215,7 +216,7 @@ export const CardServicesFinalized = ({
             onMouseLeave={handleMouseLeave}
           >
             <Icon
-            color="highlight"
+              color="highlight"
               id='userViewIcon'
               isClickable
               name="userView"
@@ -243,7 +244,7 @@ export const CardServicesFinalized = ({
             onMouseLeave={handleMouseLeave}
           >
             <Icon
-            color="highlight"
+              color="highlight"
               id='returnOrderIcon'
               isClickable
               name="returnOrder"
@@ -271,7 +272,7 @@ export const CardServicesFinalized = ({
             onMouseLeave={handleMouseLeave}
           >
             <Icon
-            color="highlight"
+              color="highlight"
               id='repeatOrderIcon'
               isClickable
               name="repeatOrder"
@@ -293,22 +294,37 @@ export const CardServicesFinalized = ({
 
         <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"
-          />
+          <span
+            data-tip
+            data-for='circleStatus'
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+          >
+
+            <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"
+            />
+
+          </span>
+
+          {isToolTipMounted ? (
+            <ReactTooltip id='circleStatus' type='error'>
+              <span>{txtTootipCircleStatus}</span>
+            </ReactTooltip>
+          ) : null}
 
         </div>
 
       </div>
 
       {/* {children} */}
-    </div>
+    </div >
   )
 }
 
@@ -335,6 +351,7 @@ CardServicesFinalized.propTypes = {
   txtTootipTrash: PropTypes.string,
   selectCard: PropTypes.bool,
   statusService: PropTypes.number,
+  txtTootipCircleStatus: PropTypes.string
 }
 
 CardServicesFinalized.defaultProps = {
@@ -358,6 +375,7 @@ CardServicesFinalized.defaultProps = {
   txtTootipTrash: 'Cancelar servicio',
   selectCard: false,
   statusService: 10,
+  txtTootipCircleStatus: '',
 }
 
 export default withStyles(styles)(CardServicesFinalized)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "imbric-theme",
-  "version": "0.5.9",
+  "version": "0.6.1",
   "description": "Components library IMBRIC",
   "private": false,
   "main": "index.js",
@@ -97,6 +97,7 @@
     "jest": "26.4.2",
     "lint-staged": "10.3.0",
     "minireset.css": "0.0.6",
+    "next": "11",
     "npm-run-all": "4.1.5",
     "prettier": "2.1.1",
     "react": "18",