imbric-theme 0.5.8 → 0.6.0

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/index.js

@@ -58,6 +58,7 @@ export { default as FooterTable } from './molecules/FooterTable'
 export { default as DynamicSelect } from './molecules/DynamicSelect'
 export { default as DatePicker } from './molecules/DynamicSelect'
 export { default as CardDefault } from './molecules/CardDefault'
+export { default as Tabs } from './molecules/Tabs'
 
 
 

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

@@ -36,6 +36,12 @@ export const CardServices = ({
   txtTootipTrash,
   selectCard,
   statusService,
+  labelOriginService,
+  labelDestinationService,
+  labelServiceService,
+  labelUserService,
+  labelRefService,
+  labelUserNumberService,
 }) => {
 
   // STATE TOOLTIP
@@ -85,7 +91,7 @@ export const CardServices = ({
                 color="highlight"
               />
                
-              Origen
+              {labelOriginService}
             </Label>
 
             <p className={getStyles('card-content-p')}>{txtOriginService}</p>
@@ -105,7 +111,7 @@ export const CardServices = ({
                 color="highlight"
               />
               &nbsp;
-              Destino
+              {labelDestinationService}
             </Label>
 
             <p className={getStyles('card-content-p')}>{txtDestinationService}</p>
@@ -129,7 +135,7 @@ export const CardServices = ({
                 color="highlight"
               />
               &nbsp;
-              Servicio
+              {labelServiceService}
             </Label>
 
             <p className={getStyles('card-content-p')}>{txtServiceService}</p>
@@ -149,7 +155,7 @@ export const CardServices = ({
                 color="highlight"
               />
               &nbsp;
-              Pasajero
+              {labelUserService}
             </Label>
 
             <p className={getStyles('card-content-p')}>{txtUserService}</p>
@@ -173,7 +179,7 @@ export const CardServices = ({
                 color="highlight"
               />
               &nbsp;
-              REF
+              {labelRefService}
             </Label>
 
             <p className={getStyles('card-content-p')}>{txtRefService}</p>
@@ -193,7 +199,7 @@ export const CardServices = ({
                 color="highlight"
               />
               &nbsp;
-              Usuario
+              {labelUserNumberService}
             </Label>
 
             <p className={getStyles('card-content-p')}>{txtUserNumberService}</p>
@@ -215,7 +221,7 @@ export const CardServices = ({
             onMouseLeave={handleMouseLeave}
           >
             <Icon
-            color="highlight"
+              color="highlight"
               id='userViewIcon'
               isClickable
               name="userView"
@@ -243,7 +249,7 @@ export const CardServices = ({
             onMouseLeave={handleMouseLeave}
           >
             <Icon
-            color="highlight"
+              color="highlight"
               id='returnOrderIcon'
               isClickable
               name="returnOrder"
@@ -271,7 +277,7 @@ export const CardServices = ({
             onMouseLeave={handleMouseLeave}
           >
             <Icon
-            color="highlight"
+              color="highlight"
               id='repeatOrderIcon'
               isClickable
               name="repeatOrder"
@@ -300,7 +306,7 @@ export const CardServices = ({
             onMouseLeave={handleMouseLeave}
           >
             <Icon
-            color="highlight"
+              color="highlight"
               id='editIcon'
               isClickable
               name="edit"
@@ -329,7 +335,7 @@ export const CardServices = ({
             onMouseLeave={handleMouseLeave}
           >
             <Icon
-            color="highlight"
+              color="highlight"
               id='trashIcon'
               isClickable
               name="trash"
@@ -351,11 +357,11 @@ 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 },
-          )}
+            className={getStyles(
+              { 'icon-view-status10': statusService === 10 || -30 },
+              { 'icon-view-status20': statusService === 20 },
+              // { 'icon-view-status30': statusService === 30 || -20 || -40 },
+            )}
             name="circleStatus"
             size="sm"
           />
@@ -392,6 +398,12 @@ CardServices.propTypes = {
   txtTootipTrash: 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 = {
@@ -415,6 +427,12 @@ CardServices.defaultProps = {
   txtTootipTrash: 'Cancelar servicio',
   selectCard: false,
   statusService: 10,
+  labelOriginService: 'Origen',
+  labelDestinationService: 'Destino',
+  labelServiceService: 'Servicio',
+  labelUserService: 'Pasajero',
+  labelRefService: 'REF',
+  labelUserNumberService: 'Usuario',
 }
 
 export default withStyles(styles)(CardServices)

package/molecules/Tabs/Tabs.js

@@ -7,7 +7,11 @@ import withStyles from '../../hocs/withStyles'
 
 import Tab from '../../atoms/Tab/Tab'
 
-export const Tabs = ({ getStyles, viewTabs }) => {
+export const handleClick = ({ onClickTab }) => (e, index) => {
+  onClickTab(e, index)
+}
+
+export const Tabs = ({ getStyles, viewTabs, options, onClickTab }) => {
 
   if (viewTabs) {
     return (
@@ -18,12 +22,12 @@ export const Tabs = ({ getStyles, viewTabs }) => {
 
           <ul>
 
-            {options.itemTabs.map((item, index) => (
+            {options.map((item, index) => (
 
               <Tab
                 key={index}
-                activeTab={false}
-                onClick={function noRefCheck() { }}
+                activeTab={item.active}
+                onClick={(e) => onClickTab(e, index) && handleClick({ onClickTab } )}
                 viewTab={item.view}
               >
                 {item.text}
@@ -44,10 +48,12 @@ export const Tabs = ({ getStyles, viewTabs }) => {
 
 Tabs.propTypes = {
   getStyles: PropTypes.func.isRequired,
+  onClickTab: PropTypes.func
 }
 
 Tabs.defaultProps = {
   getStyles: () => { },
+  onClickTab: () => { },
 }
 
-export default withStyles(styles)(Tabs)
+export default withStyles(styles)(Tabs)

package/molecules/Tabs/Tabs.module.css

@@ -9,4 +9,5 @@
   justify-content: center;
   align-items: center;
   margin: 0;
+  padding: 0;
 }

package/molecules/Tabs/constants.js

@@ -4,26 +4,31 @@ export const options = {
             text: "Taxi",
             href: "/taxi",
             view: true,
+            active: false,
         },
         {
             text: "Parking",
             href: "/parking",
             view: true,
+            active: false,
         },
         {
             text: "Sharing",
             href: "/sharing",
             view: true,
+            active: false,
         },
         {
             text: "T. Publico",
             href: "/sharing",
             view: true,
+            active: false,
         },
         {
             text: "Hoja de Km",
             href: "/sharing",
             view: true,
+            active: false,
         },
     ],
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "imbric-theme",
-  "version": "0.5.8",
+  "version": "0.6.0",
   "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",