imbric-theme 0.4.3 → 0.4.5

package/atoms/Icon/Icon.module.css

@@ -21,6 +21,26 @@
   padding: 15px;
 }
 
+.color-success path,
+.color-success circle {
+  fill: var(--color-tertiary-muted);
+}
+
+.color-success line,
+.color-success rect {
+  stroke: var(--color-tertiary-muted);
+}
+
+.color-error path,
+.color-error circle {
+  fill: var(--color-secondary-muted);
+}
+
+.color-error line,
+.color-error rect {
+  stroke: var(--color-secondary-muted);
+}
+
 .color-base path,
 .color-base circle {
   fill: var(--color-font-base);
@@ -75,6 +95,16 @@
   fill: var(--color-base-transparent) !important;
 }
 
+.background-success {
+  background: var(--color-tertiary-muted);
+  border-radius: var(--border-radius-full);
+}
+
+.background-error {
+  background: var(--color-secondary-muted);
+  border-radius: var(--border-radius-full);
+}
+
 .background-base {
   background: var(--color-gray-100);
   border-radius: var(--border-radius-full);

package/atoms/Icon/constants.js

@@ -812,6 +812,75 @@ export const iconsMap = {
       </>
     ),
   },
+  listInvoice: {
+    viewBox: '0 0 24 24',
+    svg: (
+      <>
+        <path d="M23.9,2.3H9c0,0-0.1,0-0.1,0.1v1.4c0,0,0,0.1,0.1,0.1h15c0,0,0.1,0,0.1-0.1L23.9,2.3C24,2.3,24,2.3,23.9,2.3z" />
+        <circle cx="3.5" cy="12.5" r="1.9" />
+        <circle cx="3.5" cy="20.8" r="1.9" />
+        <path d="M9,6.3h7.1c0,0,0.1,0,0.1-0.1V4.9c0,0,0-0.1-0.1-0.1H9c0,0-0.1,0-0.1,0.1L9,6.3C8.9,6.3,9,6.3,9,6.3z" />
+        <path d="M23.9,10.5H9c0,0-0.1,0-0.1,0.1V12C8.9,12,9,12,9,12h15c0,0,0.1,0,0.1-0.1L23.9,10.5C24,10.5,24,10.5,23.9,10.5z" />
+        <path d="M9,14.6h7.1c0,0,0.1,0,0.1-0.1v-1.4c0,0,0-0.1-0.1-0.1H9c0,0-0.1,0-0.1,0.1L9,14.6C8.9,14.5,9,14.6,9,14.6z" />
+        <path d="M23.9,18.7H9c0,0-0.1,0-0.1,0.1v1.4c0,0,0,0.1,0.1,0.1h15c0,0,0.1,0,0.1-0.1L23.9,18.7C24,18.8,24,18.7,23.9,18.7z" />
+        <path d="M16.1,21.3H9c0,0-0.1,0-0.1,0.1v1.4c0,0,0,0.1,0.1,0.1h7.1c0,0,0.1,0,0.1-0.1L16.1,21.3C16.1,21.3,16.1,21.3,16.1,21.3z"
+        />
+        <polygon points="2.6,4.3 1.4,3 0,4.3 1.3,5.6 2.6,7 4,5.6 7.1,2.6 5.7,1.2 		" />
+      </>
+    ),
+  },
+  listXLS: {
+    viewBox: '0 0 24 24',
+    svg: (
+      <>
+        <path d="M20.8,21.6c0,0.4-0.4,0.8-0.8,0.8H4c-0.4,0-0.8-0.4-0.8-0.8v-2.4H1.6v2.4C1.6,22.9,2.7,24,4,24h16c1.3,0,2.4-1.1,2.4-2.4
+		v-2.4h-1.6V21.6z"/>
+        <polygon points="3.2,14.9 3.2,15.2 3.2,17.6 4.8,17.6 4.8,15.5 5.6,14.7 6.4,15.5 6.4,17.6 8,17.6 8,15.2 8,14.9 7.8,14.6 
+		6.7,13.6 7.8,12.6 8,12.3 8,12 8,9.6 6.4,9.6 6.4,11.7 5.6,12.5 4.8,11.7 4.8,9.6 3.2,9.6 3.2,12 3.2,12.3 3.4,12.6 4.5,13.6 
+		3.4,14.6 	"/>
+        <polygon points="16,16 16,17.6 20,17.6 20.8,17.6 20.8,16.8 20.8,13.6 20.8,12.8 20,12.8 17.6,12.8 17.6,11.2 20.8,11.2 20.8,9.6 
+		16.8,9.6 16,9.6 16,10.4 16,13.6 16,14.4 16.8,14.4 19.2,14.4 19.2,16 	"/>
+        <polygon points="9.6,9.6 9.6,16.8 9.6,17.6 10.4,17.6 14.4,17.6 14.4,16 11.2,16 11.2,9.6 	" />
+        <path d="M22.2,5l-4.8-4.8l-0.6,0.6l0,0l0.6-0.6L17.1,0h-0.3H4C2.7,0,1.6,1.1,1.6,2.4V8h1.6V2.4C3.2,2,3.6,1.6,4,1.6h12.5l4.3,4.3V8
+		h1.6V5.6V5.3L22.2,5z"/>
+      </>
+    ),
+  },
+  listCSV: {
+    viewBox: '0 0 24 24',
+    svg: (
+      <>
+        <polygon points="8,11.2 8,9.6 4,9.6 3.2,9.6 3.2,10.4 3.2,16.8 3.2,17.6 4,17.6 8,17.6 8,16 4.8,16 4.8,11.2 	" />
+        <path d="M20.8,21.6c0,0.4-0.4,0.8-0.8,0.8H4c-0.4,0-0.8-0.4-0.8-0.8v-2.4H1.6v2.4C1.6,22.9,2.7,24,4,24h16c1.3,0,2.4-1.1,2.4-2.4
+		v-2.4h-1.6V21.6z"/>
+        <path d="M22.2,5l-4.8-4.8l-0.6,0.6l0,0l0.6-0.6L17.1,0h-0.3H4C2.7,0,1.6,1.1,1.6,2.4V8h1.6V2.4C3.2,2,3.6,1.6,4,1.6h12.5l4.3,4.3V8
+		h1.6V5.6V5.3L22.2,5z"/>
+        <polygon points="9.6,16 9.6,17.6 13.6,17.6 14.4,17.6 14.4,16.8 14.4,13.6 14.4,12.8 13.6,12.8 11.2,12.8 11.2,11.2 14.4,11.2 
+		14.4,9.6 10.4,9.6 9.6,9.6 9.6,10.4 9.6,13.6 9.6,14.4 10.4,14.4 12.8,14.4 12.8,16 	"/>
+        <polygon points="16,9.6 16,15.2 16,15.5 16.2,15.8 16.8,15.2 16.8,15.2 16.2,15.8 17.8,17.4 18.4,17.9 19,17.4 20.6,15.8 
+		20.8,15.5 20.8,15.2 20.8,9.6 19.2,9.6 19.2,14.9 18.4,15.7 17.6,14.9 17.6,9.6 	"/>
+      </>
+    ),
+  },
+  listPDF: {
+    viewBox: '0 0 24 24',
+    svg: (
+      <>
+        <path d="M4.8,14.4h0.8C7,14.4,8,13.3,8,12S7,9.6,5.6,9.6H4H3.3v0.8v3.2v4h1.6V14.4z M6.4,12c0,0.4-0.4,0.8-0.8,0.8H4.8v-1.6h0.8
+		C6.1,11.2,6.4,11.6,6.4,12z"/>
+        <path d="M20.7,21.5c0,0.4-0.4,0.8-0.8,0.8H4c-0.4,0-0.8-0.4-0.8-0.8v-2.4H1.7v2.4c0,1.3,1.1,2.4,2.4,2.4H20c1.3,0,2.4-1.1,2.4-2.4
+		v-2.4h-1.6V21.5z"/>
+        <path d="M14.4,15.2V12c0-1.3-1.1-2.4-2.4-2.4h-1.6H9.6v0.8v6.4v0.8h0.8H12C13.3,17.6,14.4,16.5,14.4,15.2z M11.2,16v-4.8H12
+		c0.4,0,0.8,0.4,0.8,0.8v3.2c0,0.4-0.4,0.8-0.8,0.8H11.2z"/>
+        <polygon points="20.7,11.2 20.7,9.6 17.6,9.6 16.8,9.6 16,9.6 16,17.6 17.6,17.6 17.6,14.4 19.2,14.4 19.2,12.8 17.6,12.8 
+		17.6,11.2 	"/>
+        <path d="M22.1,5.1l-0.6,0.6l0,0L22.1,5.1l-4.8-4.8l-0.6,0.6l0,0l0.6-0.6l-0.2-0.2h-0.3H4c-1.3,0-2.4,1.1-2.4,2.4V8h1.6V2.5
+		C3.3,2,3.6,1.7,4,1.7h12.4L20.7,6V8h1.6V5.6V5.3L22.1,5.1z"/>
+      </>
+    ),
+  },
+
+
 
 }
 
@@ -819,7 +888,7 @@ export const iconsMap = {
 export const options = {
   sizes: ['xs', 'sm', 'md', 'lg', 'xl'],
   names: Object.keys(iconsMap),
-  colors: ['base', 'highlight', 'muted', 'primary', 'inverted'],
+  colors: ['base', 'highlight', 'muted', 'primary', 'inverted', 'error', 'success'],
   backgrounds: [
     'transparent',
     'base',
@@ -827,5 +896,7 @@ export const options = {
     'inverted',
     'muted',
     'spotlight',
+    'error',
+    'success',
   ],
 }

package/atoms/Input/Input.js

@@ -4,6 +4,9 @@ import PropTypes from 'prop-types'
 import styles from './Input.module.css'
 import { options } from './constants'
 import withStyles from '../../hocs/withStyles'
+import Icon from '../Icon'
+import { Horizontal } from '../../layout/Spacer/components'
+
 
 // const handleChange = ({ onChange }) => () => {
 //   onChange()
@@ -17,29 +20,93 @@ export const Input = ({
   isInline,
   isInlineCode,
   isInputFilter,
+  isInputSecondary,
   onChange,
+  onFocus,
+  onBlur,
   onClick,
+  onKeyDown,
   placeholder,
+  autocomplete,
+  disabled,
+  isViewIcon,
+  idIcon,
+  nameIcon,
+  sizeIcon,
+  colorIcon,
+  backgroundIcon,
   pattern,
 }) => (
-  <input
-    className={getStyles('input', {
-      'is-inline': isInline,
-      'is-inline-code': isInlineCode,
-      'is-input-filter': isInputFilter,
-    })}
-    type={type}
-    id={id}
-    value={value}
-    placeholder={placeholder}
-    onChange={onChange}
-    onClick={onClick}
-  ></input>
+
+  <>
+
+    {isViewIcon ?
+
+      <div className={getStyles('box-icon-input')}>
+
+        <Icon
+          id={idIcon}
+          name={nameIcon}
+          size={sizeIcon}
+          color={colorIcon}
+          background={backgroundIcon}
+        />
+
+        <Horizontal size="xs" />
+
+        <input
+          className={getStyles('input', {
+            'is-inline': isInline,
+            'is-inline-code': isInlineCode,
+            'is-input-filter': isInputFilter,
+            'is-input-secondary': isInputSecondary,
+          })}
+          type={type}
+          id={id}
+          value={value}
+          placeholder={placeholder}
+          onChange={onChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          onClick={onClick}
+          onKeyDown={onKeyDown}
+          autocomplete={autocomplete}
+          disabled={disabled}
+        ></input>
+
+      </div> :
+
+      <input
+        className={getStyles('input', {
+          'is-inline': isInline,
+          'is-inline-code': isInlineCode,
+          'is-input-filter': isInputFilter,
+          'is-input-secondary': isInputSecondary,
+        })}
+        type={type}
+        id={id}
+        value={value}
+        placeholder={placeholder}
+        onChange={onChange}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        onClick={onClick}
+        onKeyDown={onKeyDown}
+        autocomplete={autocomplete}
+        disabled={disabled}
+      ></input>
+
+    }
+
+  </>
 )
 
 Input.propTypes = {
   onChange: PropTypes.func.isRequired,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
   onClick: PropTypes.func,
+  onKeyDown: PropTypes.func,
   getStyles: PropTypes.func.isRequired,
   type: PropTypes.oneOf(options.types),
   id: PropTypes.string.isRequired,
@@ -48,6 +115,15 @@ Input.propTypes = {
   isInline: PropTypes.bool,
   isInlineCode: PropTypes.bool,
   isInputFilter: PropTypes.bool,
+  isInputSecondary: PropTypes.bool,
+  isViewIcon: PropTypes.bool,
+  idIcon: PropTypes.string,
+  nameIcon: PropTypes.string,
+  sizeIcon: PropTypes.string,
+  colorIcon: PropTypes.string,
+  backgroundIcon: PropTypes.string,
+  autocomplete: PropTypes.string,
+  disabled: PropTypes.bool,
 }
 
 Input.defaultProps = {
@@ -58,9 +134,21 @@ Input.defaultProps = {
   isInline: false,
   isInlineCode: false,
   isInputFilter: false,
-  onChange: () => {},
-  onClick: () => {},
-  getStyles: () => {},
+  isInputSecondary: false,
+  onChange: () => { },
+  onFocus: () => { },
+  onBlur: () => { },
+  onClick: () => { },
+  onKeyDown: () => { },
+  getStyles: () => { },
+  isViewIcon: false,
+  idIcon: 'Ejemplo',
+  nameIcon: 'user',
+  sizeIcon: 'md',
+  colorIcon: 'highlight',
+  backgroundIcon: 'base',
+  autocomplete: 'on',
+  disabled: false
 }
 
 export default withStyles(styles)(Input)

package/atoms/Input/Input.module.css

@@ -23,6 +23,10 @@
   outline: none;
 }
 
+.input:disabled {
+  background: #dedede;
+}
+
 .is-inline {
   max-width: max-content;
 }
@@ -45,3 +49,17 @@
   text-align: left;
   height: 28px;
 }
+
+.is-input-secondary {
+  border-radius: var(--border-radius-sm);
+  color: var(--color-font-base);
+  padding: 7px 9px;
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-light);
+  text-align: left;
+  height: 28px;
+}
+
+.box-icon-input {
+  display: flex;
+}

package/atoms/Modal/Modal.js

@@ -36,6 +36,7 @@ export const Modal = ({
   type,
   isPlayground,
   titleModal,
+  isFullWidth,
 }) => {
   const isDesktop = useMedia(['(min-width: 992px)'], [true])
   const [onFadeOut, setOnFadeOut] = useState(false)
@@ -51,7 +52,7 @@ export const Modal = ({
       onClick={handleClose}
     >
       <div
-        className={getStyles('modal', ['type'])}
+        className={getStyles(isFullWidth ? 'modal-full' : 'modal', ['type'])}
         onClick={createHandlerClick()}
       >
         <div className={getStyles('heading')}>
@@ -78,7 +79,9 @@ export const Modal = ({
 						{titleModal}
 					</Heading>
         </div>
-        <Container><div className={getStyles('container')}>{children}</div></Container>
+
+        {isFullWidth ? <div className={getStyles('container-full')}>{children}</div> : <Container><div className={getStyles('container')}>{children}</div></Container>}
+        
       </div>
     </div>
   )
@@ -94,13 +97,15 @@ Modal.propTypes = {
   }),
   type: PropTypes.oneOf(options.types),
   isPlayground: PropTypes.bool,
+  isFullWidth: PropTypes.bool,
   titleModal: PropTypes.string,
 }
 
 Modal.defaultProps = {
   getStyles: () => {},
   type: 'primary',
-  titleModal: 'Ejemplo titulo'
+  titleModal: 'Ejemplo titulo',
+  isFullWidth: false
 }
 
 export default withStyles(styles)(Modal)

package/atoms/Modal/Modal.module.css

@@ -24,15 +24,32 @@
   padding: 16px 32px;
 }
 
+.modal-full {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  padding: 16px 32px;
+}
+
 :not(.is-playground)>.modal {
   animation: fadeInModal 0.4s ease-in forwards;
   opacity: 0;
 }
 
+:not(.is-playground)>.modal-full {
+  animation: fadeInModal 0.4s ease-in forwards;
+  opacity: 0;
+}
+
 .backdrop.on-fade-out .modal {
   animation: fadeOutModal 0.4s ease-in forwards;
 }
 
+.backdrop.on-fade-out .modal-full {
+  animation: fadeOutModal 0.4s ease-in forwards;
+}
+
 .heading {
   display: flex;
   justify-content: space-between;
@@ -61,6 +78,12 @@
     overflow: auto; */
   }
 
+  .modal-full {
+    width: 100%;
+    height: 100%;
+    padding: 16px 32px;
+  }
+
   .heading {
     flex-direction: row-reverse;
   }
@@ -70,6 +93,11 @@
     overflow: auto;
     min-width: 100%;
   }
+
+  .container-full {
+    overflow: auto;
+    min-width: 100%;
+  }
 }
 
 @keyframes fadeInModal {

package/index.js

@@ -45,12 +45,16 @@ export { default as Task } from './molecules/Task'
 export { default as TaskCounter } from './molecules/TaskCounter'
 export { default as IconLabel } from './molecules/IconLabel'
 export { default as ItemMenu } from './molecules/ItemMenu'
+export { default as InputAutocomplete } from './molecules/InputAutocomplete'
 export { default as CheckList } from './molecules/CheckList'
 export { default as ColumnTable } from './molecules/ColumnTable'
 export { default as RowTable } from './molecules/RowTable'
 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 useTable } from './hook/useTable'
 export { default as useStateDate } from './hook/useStateDate'

package/molecules/CardDefault/CardDefault.js

@@ -0,0 +1,64 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import styles from './CardDefault.module.css'
+import { options } from './constants'
+import withStyles from '../../hocs/withStyles'
+import Button from '../../atoms/Button'
+import Paragraph from '../../atoms/Paragraph'
+import Spacer from '../../layout/Spacer'
+
+
+export const CardDefault = ({ children, titleCardDefault, titleBtnCardDefault, typeBtnCardDefault, onClickBtnCardDefault, getStyles }) => {
+
+
+  return <div className={getStyles('card-default')}>
+
+
+    <div className={getStyles('card-default-title')}>
+      {titleCardDefault}
+    </div>
+
+    <div className={getStyles('card-default-content')}>
+      {children}
+      <Spacer.Vertical size="md" />
+    </div>
+
+    <div className={getStyles('card-default-actions')}>
+
+      <Button
+        onClick={onClickBtnCardDefault}
+        type={typeBtnCardDefault}
+      >
+        {titleBtnCardDefault}
+      </Button>
+
+    </div>
+
+
+
+  </div>
+}
+
+CardDefault.propTypes = {
+  children: PropTypes.node.isRequired,
+  titleCardDefault: PropTypes.string.isRequired,
+  titleBtnCardDefault: PropTypes.string.isRequired,
+  typeBtnCardDefault: PropTypes.string.isRequired,
+  onClickBtnCardDefault: PropTypes.func,
+  getStyles: PropTypes.func.isRequired,
+  // type: PropTypes.oneOf(options.types),
+}
+
+// const renderValue = () => <Paragraph isCentered size="lg" weight="semibold"> 20 EUR </Paragraph>
+
+CardDefault.defaultProps = {
+  children: <Paragraph isCentered size="lg" weight="semibold"> 20 EUR </Paragraph>,
+  titleCardDefault: 'Saldo actual',
+  typeBtnCardDefault: 'primary',
+  titleBtnCardDefault: '+ Añadir fondos',
+  onClickBtnCardDefault: () => { },
+  getStyles: () => { },
+}
+
+export default withStyles(styles)(CardDefault)

package/molecules/CardDefault/CardDefault.module.css

@@ -0,0 +1,18 @@
+.card-default {
+  text-align: center;
+  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%);
+  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
+  display: block;
+  position: relative;
+  padding: 16px;
+  border-radius: 4px;
+  background: white;
+  color: rgba(0, 0, 0, 0.87);
+}
+
+.card-default-title {
+  font-weight: 400;
+  font-size: 18px;
+  letter-spacing: -0.03em;
+  margin: 0 0 16px;
+}

package/molecules/CardDefault/CardDefault.stories.js

@@ -0,0 +1,23 @@
+import { CardDefault, styles, options } from '.'
+
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(CardDefault, styles)
+const ListTemplate = getListTemplate(CardDefault, styles)
+
+export default {
+  title: 'Molecules/CardDefault',
+  component: CardDefault,
+  args: {},
+  argTypes: {
+    // types: getOptionsArgTypes(options.types),
+  },
+}
+
+export const Default = Template.bind({})
+// export const List = ListTemplate.bind({})
+// List.args = { items: options.types.map((type) => ({ type })) }

package/molecules/CardDefault/constants.js

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

package/molecules/CardDefault/index.js

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

package/molecules/CardProductTypesBooking/CardProductTypesBooking.js

@@ -7,19 +7,30 @@ import withStyles from '../../hocs/withStyles'
 import Picture from '../../atoms/Picture'
 import { Horizontal, Vertical } from '../../layout/Spacer/components'
 
-export const CardProductTypesBooking = ({ srcImg, getStyles }) => {
-  return <div className={getStyles('card-product-types-booking')}>
+export const CardProductTypesBooking = ({
+  srcImg,
+  onClick,
+  textNotification,
+  textProductTypes,
+  textEtaProductTypesSub,
+  textDescription,
+  priceProductTypes,
+  priceProductTypesSub,
+  selectCard,
+  getStyles
+}) => {
+  return <div className={getStyles('card-product-types-booking', {'selectCard': selectCard})} onClick={onClick}>
 
     <div className={getStyles('labelNotification')}>
-      Reserve 2 h antes de la salida de su vuelo si es nacional, 3 h antes si es internacional.
+      {textNotification}
     </div>
 
     <div className={getStyles('card-product-content')}>
 
-      <div>
+      <div className={getStyles('card-product-img')}>
         <Picture
           src={srcImg}
-          width={110}
+          width={70}
         // height={100}
         />
       </div>
@@ -27,16 +38,16 @@ export const CardProductTypesBooking = ({ srcImg, getStyles }) => {
       <Horizontal size="sm" />
 
       <div>
-        <div className={getStyles('titleCardProductTypes')}>ECO (Tarifa máxima)</div>
-        <div className={getStyles('etaCardProductTypesSub')}>4 - 8 min.</div>
-        <div className={getStyles('titleCardProductTypesSub')}>Envío urgente de sobres y paquetes pequeños con taxi.</div>
+        <div className={getStyles('titleCardProductTypes')}>{textProductTypes}</div>
+        <div className={getStyles('etaCardProductTypesSub')}>{textEtaProductTypesSub}</div>
+        <div className={getStyles('titleCardProductTypesSub')}>{textDescription}</div>
       </div>
 
       <Horizontal size="sm" />
 
       <div class={getStyles('contentPrice')}>
-        <div class={getStyles('priceCardProductTypes')}>30€ - 30€</div>
-        <div class={getStyles('priceCardProductTypesSub')}> Máx.</div>
+        <div class={getStyles('priceCardProductTypes')}>{priceProductTypes}</div>
+        <div class={getStyles('priceCardProductTypesSub')}>{priceProductTypesSub}</div>
       </div>
 
     </div>
@@ -45,13 +56,29 @@ export const CardProductTypesBooking = ({ srcImg, getStyles }) => {
 }
 
 CardProductTypesBooking.propTypes = {
-  srcImg: PropTypes.string.isRequired,
+  onClick: PropTypes.func,
+  srcImg: PropTypes.string,
+  textNotification: PropTypes.string,
+  textProductTypes: PropTypes.string,
+  textEtaProductTypesSub: PropTypes.string,
+  textDescription: PropTypes.string,
+  priceProductTypes: PropTypes.string,
+  priceProductTypesSub: PropTypes.string,
+  selectCard: PropTypes.bool,
   getStyles: PropTypes.func.isRequired,
-  type: PropTypes.oneOf(options.types),
+
 }
 
 CardProductTypesBooking.defaultProps = {
   getStyles: () => { },
+  onClick: () => { },
+  textNotification: 'Reserve 2 h antes de la salida de su vuelo si es nacional, 3 h antes si es internacional.',
+  textProductTypes: 'ECO (Tarifa máxima)',
+  textEtaProductTypesSub: '4 - 8 min.',
+  textDescription: 'Envío urgente de sobres y paquetes pequeños con taxi.',
+  priceProductTypes: '30€ - 30€',
+  priceProductTypesSub: 'Máx.',
+  selectCard: 'false'
 }
 
 export default withStyles(styles)(CardProductTypesBooking)