Tipografía
Encabezados
Los componentes Heading1, Heading2, Heading3, etc. se renderizan respectivamente como un h1, h2, h3, etc. Si, por motivos semánticos, queremos que un encabezado tenga un aspecto pero utilice otra etiqueta, podemos usar el prop as de Styled Components.
Heading1
Heading2
Heading3
Heading4
Heading5
Heading6
Editorial
A los componentes Heading1, Heading2, y Heading3 se les puede añadir el prop editorial que añade un detalle visual al encabezado.
Heading1
Heading2
Heading3
Encabezados app
Estilo alternativo de encabezado, usado principalmente en el portal y las modales, con los componentes AppHeading1, AppHeading2, AppHeading3, etc.
AppHeading1
AppHeading2
AppHeading3
AppHeading4
AppHeading5
AppHeading6
Botones
Todas las variantes son válidas tanto para el componente Button como para ButtonLink.
Role variants
Las variantes se pasan con el prop variant
Size variants
Las variantes de tamaño se pasan con el prop sizes
Icono solo
Un botón con solo un icono tiene el prop isIcon
Dropdown trigger
Se añade un caret a la derecha con el prop isTrigger
Con badge
Si el botón tiene un badge, necesita el prop hasBadge
Formularios
Los elementos de formulario usan el componente FormGroup, al que hay que pasarle los props forId y label. Dentro del componente le pasaremos como children el control de formulario correspondiente.
Input text
El componente InputText se usa para cualquier input de entrada textual (text, email, password o number). El type por defecto es text, y lo podemos cambiar con el prop type. El único prop obligatorio es id, que debería coincidir con el forId del FormGroup. Otros props que admite son: title, placeholder, value, readonly. También podemos usar onChange, onClick e ref para asociar eventos. Si el input es de tipo number también podemos usar el prop step.
Tamaños
Existen diferentes tamaños de input. Se llaman con el prop sizes y actualmente solo existe sm.
Variantes: input especiales
Existen una serie de inputs especiales, que añaden un icono a modo de ayuda. Se llaman con el prop variant y actualmente existen thousands, currencyThousands, copy, error, success, loading y linkedin.
Select
Select nativo con estilos básicos. Props obligatorios: id y options. Props opcionales: title, placeholder y onChange.
Custom Select
Select custom, usando React Select. Props obligatorios: options e id. Props opcionales: isMulti, isSmall, isTransparent y placeholder. Pendiente de incluir los props de accesibilidad.
Radio button
No necesita el componente FormGroup. Props obligatorios: id y label. Props opcionales: name, checked, disabled, onClick y onChange.
Checkbox
No necesita el componente FormGroup. Props obligatorios: id y label. Props opcionales: name, checked, disabled, onClick y onChange.
Switcher
No necesita el componente FormGroup. Props obligatorios: id y label. Props opcionales: checked, disabled, y onChange.
Input file
Props obligatorios: id y label. Props opcionales: fileType.
Input tel
Props obligatorios: id. Props opcionales: placeholder y defaultCountry.
Badges
Role variants
Las variantes se pasan con el prop variant. Actualmente existen: primary, secondary, negative, primaryInverse y secondaryInverse.
Size variants
Las variantes se pasan con el prop sizes
Badge Flags
Reciben por props icon text &color.
Avatar
Props avatarImg y avatarAlt.
Size variants
Las variantes se pasan con el prop sizes
Notificaciones
Acordeón
Básico
¿Te ayudamos?
- Quién eres y cuáles son las experiencias profesionales y/o vitales significativas para ti.
- Tus aptitudes principales.
- Tu actitud ante retos y problemas.
“He pasado más de 15 años desarrollando software y liderando equipos de desarrollo. También he vivido la experiencia de ser el responsable de selección de los perfiles tecnológicos de una fintech durante 2 años. Si ponemos todo eso en una coctelera, podéis imaginar las mil y una experiencias vividas”.
Software Developer, Madrid.
Con niveles
¿Te ayudamos?
Puedo desenvolverme con cierta dificultad en una corta conversación oral, aunque necesito que mi interlocutor hable despacio y con claridad.
Puedo dar y pedir algunos datos de mí mismo/a y relacionar algún aspecto extra, como tareas, mi día a día o mi entorno.
Sin embargo, soy capaz de leer y escribir con cierta soltura.
Me comunico de manera puntual con profesionales nativos en situaciones laborales cotidianas (dailies, dudas, reuniones informativas...).
Entiendo y produzco textos complejos sobre temas concretos y con cierto nivel de abstracción.
Tengo la capacidad de entender un podcast o charla de mi campo laboral.
Puedo trabajar un gran % de mi tiempo en este idioma, incluso liderando reuniones y equipos.
Soy capaz de comprender una amplia variedad de textos, tanto escuchados como escritos, y hacer un uso flexible y correcto del idioma en aspectos sociales, técnicos y profesionales.
Tengo una comprensión total del idioma en cualquier ámbito, hablado y escrito, con todos los matices que puedan surgir.
Soy capaz de entender a la perfección noticias, debatir con argumentos sólidos o dar ponencias en ese idioma.
Con slider
¿Te ayudamos?
- Quién eres y cuáles son las experiencias profesionales y/o vitales significativas para ti.
- Tus aptitudes principales.
- Tu actitud ante retos y problemas.