@dropi/react-native-design-system 0.1.16 → 0.1.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -1,8 +1,67 @@
|
|
|
1
|
-
#
|
|
2
|
-
-
|
|
1
|
+
# 🎨 Dropi - React Native Design System
|
|
3
2
|
|
|
4
3
|
El **Design System de Dropi** para aplicaciones **React Native**. Este paquete reúne la base visual y funcional de nuestros productos móviles, ofreciendo **tokens de diseño, componentes reutilizables y patrones consistentes** para mantener la coherencia en la experiencia de usuario. Su objetivo es simplificar el desarrollo, acelerar la implementación de interfaces y garantizar que cada proyecto Dropi mantenga una identidad visual sólida y escalable.
|
|
5
|
-
|
|
4
|
+
|
|
5
|
+
## 📦 Instalación
|
|
6
|
+
|
|
7
|
+
Para instalar @dropi/react-native-design-system, sigue estos pasos según tu entorno (Expo o React Native CLI).
|
|
8
|
+
|
|
9
|
+
## 1️⃣ Requisitos previos (peerDependencies)
|
|
10
|
+
|
|
11
|
+
Tu proyecto debe tener instaladas estas dependencias mínimas:
|
|
12
|
+
```JSON
|
|
13
|
+
"react": ">=19.0.0",
|
|
14
|
+
"react-native": ">=0.79.5",
|
|
15
|
+
"dropi-lib-icons": ">=1.2.5",
|
|
16
|
+
"expo-image": ">=2.4.0"
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
Si no estás seguro, instálalas con:
|
|
21
|
+
|
|
22
|
+
```sh
|
|
23
|
+
npm install react@latest react-native@latest
|
|
24
|
+
npm install dropi-lib-icons expo-image
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
O con yarn:
|
|
29
|
+
```sh
|
|
30
|
+
yarn add dropi-lib-icons expo-image
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## 2️⃣ Instalación del Design System
|
|
34
|
+
### Usando npm
|
|
35
|
+
```sh
|
|
36
|
+
npm install @tulibreria/react-native-design-system
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
### Usando yarn
|
|
40
|
+
```sh
|
|
41
|
+
yarn add @tulibreria/react-native-design-system
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
## 3️⃣ Configuración adicional según tu entorno
|
|
45
|
+
### 🔹 Si usas Expo
|
|
46
|
+
|
|
47
|
+
Nada más que instalar: Expo ya incluye soporte para expo-image, así que todo funcionará out of the box.
|
|
48
|
+
|
|
49
|
+
### 🔹 Si usas React Native CLI
|
|
50
|
+
|
|
51
|
+
Debes asegurarte de instalar y configurar:
|
|
52
|
+
|
|
53
|
+
`expo-image`
|
|
54
|
+
|
|
55
|
+
`react-native-svg` (solo si tus íconos o componentes lo requieren)
|
|
56
|
+
|
|
57
|
+
Instala manualmente si no lo tienes:
|
|
58
|
+
```sh
|
|
59
|
+
npm install expo-image
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
<details>
|
|
63
|
+
<summary style="font-size: 2em; font-weight: 700;">Tokens</summary>
|
|
64
|
+
|
|
6
65
|
## Radius
|
|
7
66
|
Tokens de radio de borde utilizados en todos los componentes para mantener una coherencia visual en las esquinas redondeadas.
|
|
8
67
|
|
|
@@ -10,18 +69,15 @@ Los tokens `radius` definen los niveles estándar de redondez de esquinas dentro
|
|
|
10
69
|
Son valores numéricos expresados en píxeles, pensados para ser usados en cualquier componente que soporte propiedades de radio de borde (`borderRadius`).
|
|
11
70
|
Estos tokens aseguran una identidad visual consistente y permiten ajustar globalmente la suavidad de las esquinas con facilidad.
|
|
12
71
|
|
|
13
|
-
|
|
14
|
-
|
|
|
15
|
-
|
|
|
16
|
-
|
|
|
17
|
-
|
|
|
18
|
-
|
|
|
19
|
-
|
|
|
20
|
-
|
|
|
21
|
-
|
|
|
22
|
-
| `circle` | `50` | Radio perfecto para formar círculos (por ejemplo, avatares o botones circulares). |
|
|
23
|
-
|
|
24
|
-
```
|
|
72
|
+
| Token | Valor | Descripción |
|
|
73
|
+
| :--- | :---: | :--- |
|
|
74
|
+
| none | 0 | Sin radio de borde (esquinas rectas). |
|
|
75
|
+
| border-1 | 4 | Redondeo sutil para elementos pequeños como etiquetas o insignias. |
|
|
76
|
+
| border-2 | 8 | Radio estándar para la mayoría de los componentes. |
|
|
77
|
+
| border-3 | 12 | Redondeo visible, ideal para tarjetas o modales. |
|
|
78
|
+
| border-4 | 24 | Esquinas más pronunciadas, usadas en contenedores grandes o interactivos. |
|
|
79
|
+
| border-5 | 32 | Redondeo máximo estándar, da una apariencia más expresiva. |
|
|
80
|
+
| circle | 50 | Radio perfecto para formar círculos (por ejemplo, avatares o botones circulares). |
|
|
25
81
|
|
|
26
82
|
## Spacing
|
|
27
83
|
Tokens de espaciado que definen los márgenes y rellenos estándar utilizados en todo el sistema de diseño.
|
|
@@ -30,21 +86,18 @@ Los tokens `spacing` controlan la separación visual entre elementos (márgenes,
|
|
|
30
86
|
El valor de cada token se adapta automáticamente dependiendo del dispositivo:
|
|
31
87
|
si es una tableta (`isTablet = true`), los valores aumentan ligeramente para mantener una proporción visual equilibrada en pantallas más grandes.
|
|
32
88
|
|
|
33
|
-
|
|
34
|
-
|
|
|
35
|
-
|
|
|
36
|
-
|
|
|
37
|
-
|
|
|
38
|
-
|
|
|
39
|
-
|
|
|
40
|
-
|
|
|
41
|
-
|
|
|
42
|
-
|
|
|
43
|
-
|
|
|
44
|
-
|
|
|
45
|
-
| `size-10` | 64 | 72 | Máximo espaciado estándar del sistema. |
|
|
46
|
-
|
|
47
|
-
```
|
|
89
|
+
| Token | Valor base (px) | En tablet (px) | Descripción |
|
|
90
|
+
| :-------- | :-------------: | :------------: | :----------- |
|
|
91
|
+
| size-1 | 4 | 12 | Espaciado mínimo, ideal para pequeños detalles visuales. |
|
|
92
|
+
| size-2 | 8 | 16 | Margen corto entre textos o íconos. |
|
|
93
|
+
| size-3 | 12 | 20 | Separación común en layouts compactos. |
|
|
94
|
+
| size-4 | 16 | 24 | Espaciado estándar para la mayoría de los componentes. |
|
|
95
|
+
| size-5 | 24 | 32 | Espaciado medio, común entre secciones. |
|
|
96
|
+
| size-6 | 32 | 40 | Espaciado grande, ideal para pantallas amplias o bloques visuales. |
|
|
97
|
+
| size-7 | 40 | 48 | Separación generosa entre bloques de contenido. |
|
|
98
|
+
| size-8 | 48 | 56 | Margen grande para layouts aireados. |
|
|
99
|
+
| size-9 | 56 | 64 | Espaciado extra grande, usado en vistas principales. |
|
|
100
|
+
| size-10 | 64 | 72 | Máximo espaciado estándar del sistema. |
|
|
48
101
|
|
|
49
102
|
## Sizes
|
|
50
103
|
Tokens de tamaño tipográfico utilizados en el sistema de diseño para mantener una jerarquía visual clara y consistente entre dispositivos.
|
|
@@ -55,20 +108,17 @@ El cálculo de cada tamaño depende de dos factores:
|
|
|
55
108
|
* **factor de escala de fuente**`PixelRatio.getFontScale()`
|
|
56
109
|
Gracias a esto, las fuentes se adaptan suavemente en tabletas o pantallas grandes sin distorsionar el diseño original.
|
|
57
110
|
|
|
58
|
-
```
|
|
59
111
|
| Token | Valor base (px) | Descripción |
|
|
60
|
-
|
|
|
61
|
-
|
|
|
62
|
-
|
|
|
63
|
-
|
|
|
64
|
-
|
|
|
65
|
-
|
|
|
66
|
-
|
|
|
67
|
-
|
|
|
68
|
-
|
|
|
69
|
-
|
|
|
70
|
-
|
|
71
|
-
```
|
|
112
|
+
| :------ | :-------------: | :---------------------------------------------------- |
|
|
113
|
+
| xxs | 10 | Texto auxiliar o etiquetas pequeñas. |
|
|
114
|
+
| xs | 12 | Subtítulos o texto de apoyo en componentes compactos. |
|
|
115
|
+
| s | 14 | Texto secundario o descripciones. |
|
|
116
|
+
| m | 16 | Tamaño de texto base, ideal para párrafos. |
|
|
117
|
+
| l | 18 | Texto destacado o títulos pequeños. |
|
|
118
|
+
| xl | 20 | Encabezados medianos o botones grandes. |
|
|
119
|
+
| xxl | 24 | Títulos principales o énfasis visual. |
|
|
120
|
+
| xxxl | 28 | Secciones destacadas o headers grandes. |
|
|
121
|
+
| xxxxl | 32 | Títulos hero o pantallas de bienvenida. |
|
|
72
122
|
|
|
73
123
|
### Escalado interno:
|
|
74
124
|
```Typescript
|
|
@@ -85,15 +135,13 @@ Tokens de peso tipográfico utilizados para controlar la jerarquía visual y el
|
|
|
85
135
|
|
|
86
136
|
Los tokens `weights` establecen los distintos **niveles de grosor** de las fuentes usados en todos los componentes del sistema. Permiten mantener **consistencia tipográfica** en botones, títulos, subtítulos y párrafos, evitando el uso arbitrario de valores numéricos. Estos valores siguen la escala estándar de CSS para `fontWeight`, lo que garantiza compatibilidad con cualquier fuente que soporte pesos variables.
|
|
87
137
|
|
|
88
|
-
|
|
89
|
-
|
|
|
90
|
-
|
|
|
91
|
-
|
|
|
92
|
-
|
|
|
93
|
-
|
|
|
94
|
-
|
|
|
95
|
-
| `bold` | `'700'` | Peso más alto, usado en títulos o llamadas a la acción. |
|
|
96
|
-
```
|
|
138
|
+
| Token | Valor | Descripción |
|
|
139
|
+
| :--------- | :---: | :---------------------------------------------------------- |
|
|
140
|
+
| light | '300' | Ideal para textos secundarios o información complementaria. |
|
|
141
|
+
| regular | '400' | Peso base para la mayoría de los textos. |
|
|
142
|
+
| medium | '500' | Ligeramente más grueso, usado en botones o subtítulos. |
|
|
143
|
+
| semibold | '600' | Para destacar encabezados o valores clave. |
|
|
144
|
+
| bold | '700' | Peso más alto, usado en títulos o llamadas a la acción. |
|
|
97
145
|
|
|
98
146
|
## Colors
|
|
99
147
|
Los tokens de color definen la **paleta cromática oficial de Dropi** para interfaces móviles. Están diseñados para ofrecer **consistencia visual**, **legibilidad** y **accesibilidad** tanto en modo claro como en modo oscuro.
|
|
@@ -103,37 +151,38 @@ Esto permite crear jerarquías visuales precisas —por ejemplo, usar tonos `500
|
|
|
103
151
|
Cada token incluye dos variantes:
|
|
104
152
|
* `light`
|
|
105
153
|
* `dark`
|
|
154
|
+
|
|
106
155
|
De esta forma, el sistema puede alternar entre temas sin perder coherencia cromática ni contraste visual.
|
|
107
156
|
|
|
108
|
-
|
|
109
|
-
|
|
|
110
|
-
|
|
|
111
|
-
|
|
|
112
|
-
|
|
|
113
|
-
|
|
|
114
|
-
|
|
|
115
|
-
|
|
|
116
|
-
|
|
|
117
|
-
|
|
118
|
-
|
|
157
|
+
| Familia | Propósito principal |
|
|
158
|
+
| :--------- | :---------------------------------------------------------------------------------------------- |
|
|
159
|
+
| Primary | Color de marca principal. Se usa en botones primarios, íconos destacados y elementos de acción. |
|
|
160
|
+
| Secondary | Color de acento o refuerzo visual para elementos secundarios. |
|
|
161
|
+
| Gray | Escala neutra para fondos, textos y bordes. Define la estructura visual base. |
|
|
162
|
+
| Success | Representa estados exitosos, confirmaciones o acciones completadas. |
|
|
163
|
+
| Error | Indica errores, validaciones fallidas o acciones críticas. |
|
|
164
|
+
| Info | Se usa para mostrar información contextual o mensajes neutrales. |
|
|
165
|
+
| Warning | Señala advertencias, riesgos o acciones pendientes.
|
|
166
|
+
|
|
167
|
+
</details>
|
|
119
168
|
|
|
120
|
-
|
|
121
|
-
|
|
169
|
+
<details>
|
|
170
|
+
<summary style="font-size: 2em; font-weight: 700;">Átomos</summary>
|
|
171
|
+
<details>
|
|
172
|
+
<summary style="font-size: 2em; font-weight: 700; margin-left: 1rem;">Textos</summary>
|
|
122
173
|
|
|
174
|
+
## Body
|
|
123
175
|
|
|
124
176
|
```Typescript
|
|
125
177
|
import { Body } from '@dropi/react-native-design-system';
|
|
126
178
|
```
|
|
127
179
|
### ⚙️ Props:
|
|
128
180
|
|
|
129
|
-
|
|
130
|
-
|
|
|
131
|
-
|
|
|
132
|
-
|
|
|
133
|
-
|
|
|
134
|
-
| `...rest` | `TextProps` | Todas las props nativas de `Text` disponibles en React Native. |
|
|
135
|
-
|
|
136
|
-
```
|
|
181
|
+
| Prop | Tipo | Descripción |
|
|
182
|
+
| :------- | :------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- |
|
|
183
|
+
| type | 'xs-regular' \| 'xs-medium' \| 's-regular' \| 's-medium' \| 'm-regular' \| 'm-medium' \| 'l-regular' \| 'l-medium' | Define el tamaño y el peso del texto. |
|
|
184
|
+
| style | TextStyle | (Opcional) Estilos adicionales que se aplican al texto. |
|
|
185
|
+
| ...rest | TextProps | Todas las props nativas de Text disponibles en React Native. |
|
|
137
186
|
### 🧩 Ejemplo de uso:
|
|
138
187
|
```Typescript
|
|
139
188
|
<Body type="m-regular"> Este es un texto de ejemplo utilizando el componente body </Body>
|
|
@@ -148,15 +197,14 @@ Forma parte de la familia tipográfica del sistema y mantiene proporciones ajust
|
|
|
148
197
|
import { Caption } from '@dropi/react-native-design-system';
|
|
149
198
|
```
|
|
150
199
|
### ⚙️ Props:
|
|
151
|
-
|
|
152
|
-
|
|
|
153
|
-
|
|
|
154
|
-
|
|
|
155
|
-
|
|
|
156
|
-
|
|
157
|
-
```
|
|
200
|
+
| Prop | Tipo | Descripción |
|
|
201
|
+
| :------- | :------------------------------------- | :-------------------------------------------------------------- |
|
|
202
|
+
| type | 's' \| 'm' \| 's-light' \| 'm-light' | Define el tamaño y el peso del texto. |
|
|
203
|
+
| style | TextStyle | (Opcional) Estilos adicionales para personalizar la apariencia. |
|
|
204
|
+
| ...rest | TextProps | Todas las props nativas disponibles en Text de React Native. |
|
|
205
|
+
|
|
158
206
|
### 🧩 Ejemplo de uso:
|
|
159
|
-
```
|
|
207
|
+
```Typescript
|
|
160
208
|
<Caption type="m">Última actualización</Caption>
|
|
161
209
|
|
|
162
210
|
<Caption type="s-light" style={{ color: '#999' }}>2 horas atrás</Caption>
|
|
@@ -171,15 +219,14 @@ Cada nivel (`h1` a `h5`) conserva proporciones equilibradas entre tamaño, peso
|
|
|
171
219
|
import { Heading } from '@dropi/react-native-design-system';
|
|
172
220
|
```
|
|
173
221
|
### ⚙️ Props:
|
|
174
|
-
|
|
175
|
-
|
|
|
176
|
-
|
|
|
177
|
-
|
|
|
178
|
-
|
|
|
179
|
-
|
|
180
|
-
```
|
|
222
|
+
| Prop | Tipo | Descripción |
|
|
223
|
+
| :------- | :------------------------------------- | :------------------------------------------------------------ |
|
|
224
|
+
| type | 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' | Define el nivel jerárquico del título. |
|
|
225
|
+
| style | TextStyle | (Opcional) Permite agregar estilos adicionales al encabezado. |
|
|
226
|
+
| ...rest | TextProps | Cualquier prop nativa del componente Text de React Native. |
|
|
227
|
+
|
|
181
228
|
### 🧩 Ejemplo de uso:
|
|
182
|
-
```
|
|
229
|
+
```Typescript
|
|
183
230
|
<Heading type="h1">Bienvenido a la experiencia Dropi</Heading>
|
|
184
231
|
|
|
185
232
|
<Heading type="h4" style={{ color: '#666' }}>Configuración avanzada</Heading>
|
|
@@ -193,44 +240,43 @@ Su diseño mantiene un tamaño reducido con alto contraste tipográfico (peso `b
|
|
|
193
240
|
import { Label } from '@dropi/react-native-design-system';
|
|
194
241
|
```
|
|
195
242
|
### ⚙️ Props:
|
|
196
|
-
|
|
197
|
-
|
|
|
198
|
-
|
|
|
199
|
-
|
|
|
200
|
-
|
|
|
201
|
-
|
|
202
|
-
```
|
|
243
|
+
| Prop | Tipo | Descripción |
|
|
244
|
+
| :------- | :----------------- | :----------------------------------------------------------- |
|
|
245
|
+
| type | 's' \| 'm' \| 'l' | Define el tamaño de la etiqueta. |
|
|
246
|
+
| style | TextStyle | (Opcional) Estilos adicionales para personalización. |
|
|
247
|
+
| ...rest | TextProps | Cualquier prop nativa del componente Text de React Native. |
|
|
248
|
+
|
|
203
249
|
### 🧩 Ejemplo de usu:
|
|
204
250
|
```Typescript
|
|
205
251
|
<Label type="m">Dirección</Label>
|
|
206
252
|
|
|
207
253
|
<Label type="s" style={{ color: '#999' }}>En proceso</Label>
|
|
208
254
|
```
|
|
255
|
+
</details>
|
|
209
256
|
|
|
257
|
+
<details>
|
|
258
|
+
<summary style="font-size: 2em; font-weight: 700; margin-left: 1rem;">Botones</summary>
|
|
210
259
|
|
|
211
|
-
|
|
212
|
-
### Default Button:
|
|
260
|
+
## Default Button:
|
|
213
261
|
El componente `DefaultButton` es el botón base del sistema de diseño. Está diseñado para ser **consistente, flexible y accesible**, permitiendo manejar variaciones visuales (`variant`), tamaños (`size`), e iconos opcionales antes o después del texto. Además, integra estados de desactivación y carga sin perder la coherencia visual.
|
|
214
262
|
### 📦 Importación:
|
|
215
|
-
```
|
|
263
|
+
```Typescript
|
|
216
264
|
import { DefaultButton } from '@dropi/react-native-design-system';
|
|
217
265
|
```
|
|
218
266
|
### ⚙️ Props:
|
|
219
|
-
|
|
220
|
-
|
|
|
221
|
-
|
|
|
222
|
-
|
|
|
223
|
-
|
|
|
224
|
-
|
|
|
225
|
-
|
|
|
226
|
-
|
|
|
227
|
-
|
|
|
228
|
-
|
|
|
229
|
-
| `...rest` | `TouchableOpacityProps` | Props nativas de React Native para eventos o estilos adicionales. |
|
|
267
|
+
| Prop | Tipo | Descripción |
|
|
268
|
+
| :---------------- | :----------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------- |
|
|
269
|
+
| label | string | Texto visible del botón. |
|
|
270
|
+
| variant | 'primary' \| 'secondary' \| 'tertiary' | Define el estilo visual del botón. |
|
|
271
|
+
| size | 'small' \| 'normal' \| 'large' | Controla el tamaño del botón y del texto. |
|
|
272
|
+
| preIcon | IconName | (Opcional) Ícono mostrado antes del texto. |
|
|
273
|
+
| postIcon | IconName | (Opcional) Ícono mostrado después del texto. |
|
|
274
|
+
| disabled | boolean | (Opcional) Desactiva la interacción y reduce la opacidad. |
|
|
275
|
+
| isMakingRequest | boolean | (Opcional) Muestra un ActivityIndicator en lugar del texto mientras se realiza una acción. |
|
|
276
|
+
| ...rest | TouchableOpacityProps | Props nativas de React Native para eventos o estilos adicionales. |
|
|
230
277
|
|
|
231
|
-
```
|
|
232
278
|
### 🧩 Ejemplos de uso:
|
|
233
|
-
```
|
|
279
|
+
```Typescript
|
|
234
280
|
<DefaultButton
|
|
235
281
|
label="Guardar cambios"
|
|
236
282
|
variant="primary"
|
|
@@ -259,22 +305,20 @@ import { DefaultButton } from '@dropi/react-native-design-system';
|
|
|
259
305
|
El `FeedbackButton` es un botón semántico diseñado para comunicar **estados del sistema** (éxito, error, advertencia, información) a través de una codificación cromática clara y reutilizable. Combina tres variantes visuales (`primary`, `secondary`, `text`) con tres tamaños (`small`, `normal`, `large`), soporte para iconos antes y después del texto, y control de estados (deshabilitado / en proceso). Su propósito es facilitar acciones que requieren **retroalimentación inmediata** al usuario sin perder la consistencia tipográfica y espacial del sistema; por eso deriva sus colores de los tokens `Success/Error/Warning/Info` y reutiliza `Label`, `spacing` y `radius` para garantizar uniformidad en toda la interfaz.
|
|
260
306
|
|
|
261
307
|
### 📦 Importación:
|
|
262
|
-
```
|
|
308
|
+
```Typescript
|
|
263
309
|
import { FeedbackButton } from '@dropi/react-native-design-system'
|
|
264
310
|
```
|
|
265
311
|
### ⚙️ Props:
|
|
266
|
-
|
|
267
|
-
|
|
|
268
|
-
|
|
|
269
|
-
|
|
|
270
|
-
|
|
|
271
|
-
|
|
|
272
|
-
|
|
|
273
|
-
|
|
|
274
|
-
|
|
|
275
|
-
|
|
|
276
|
-
| `isMakingRerequest` | `boolean` *(opcional)* | Indica que hay una solicitud o acción en curso. |
|
|
277
|
-
```
|
|
312
|
+
| Prop | Tipo | Descripción |
|
|
313
|
+
| :------------------ | :------------------------------------------------------------------ | :------------------------------------------------------------- |
|
|
314
|
+
| label | string | Texto visible en el botón. |
|
|
315
|
+
| feedbackType | 'success' \| 'error' \| 'warning' \| 'info' | Define el tipo de feedback visual (color principal del botón). |
|
|
316
|
+
| variant | 'primary' \| 'secondary' \| 'text' | Determina el estilo del botón (relleno, borde o texto plano). |
|
|
317
|
+
| size | 'small' \| 'normal' \| 'large' | Ajusta padding, tamaño de ícono y tipografía. |
|
|
318
|
+
| preIcon | IconName *(opcional)* | Ícono mostrado antes del texto. |
|
|
319
|
+
| postIcon | IconName *(opcional)* | Ícono mostrado después del texto. |
|
|
320
|
+
| disabled | boolean *(opcional)* | Desactiva interacción y aplica opacidad reducida. |
|
|
321
|
+
| isMakingRerequest | boolean *(opcional)* | Indica que hay una solicitud o acción en curso. |
|
|
278
322
|
### 🧩 Ejemplos de uso:
|
|
279
323
|
```Typescript
|
|
280
324
|
<FeedbackButton
|
|
@@ -292,23 +336,22 @@ import { FeedbackButton } from '@dropi/react-native-design-system'
|
|
|
292
336
|
El `TextButton` es un botón **ligero y no intrusivo**, pensado para acciones secundarias donde el énfasis visual debe recaer en el texto más que en el fondo. Puede incluir íconos antes o después del texto y adaptarse a diferentes tamaños (`small`, `normal`, `large`). Su diseño se basa en la simplicidad y flexibilidad: hereda la tipografía desde `Label`, respeta los espacios del sistema (`spacing`) y se ajusta automáticamente en tablets gracias a `isTablet`. Además, permite sobrescribir el color con `replaceColor` para integrarse fácilmente en contextos personalizados.
|
|
293
337
|
|
|
294
338
|
### 📦 Importación:
|
|
295
|
-
```
|
|
339
|
+
```Typescript
|
|
296
340
|
import { TextButton } from "@dropi/react-native-design-system";
|
|
297
341
|
```
|
|
298
342
|
### ⚙️ Props:
|
|
299
|
-
```
|
|
300
343
|
| Prop | Tipo | Descripción |
|
|
301
|
-
|
|
|
302
|
-
|
|
|
303
|
-
|
|
|
304
|
-
|
|
|
305
|
-
|
|
|
306
|
-
|
|
|
307
|
-
|
|
|
308
|
-
|
|
|
309
|
-
|
|
344
|
+
| :------------- | :------------------------------- | :------------------------------------------------ |
|
|
345
|
+
| label | string | Texto visible dentro del botón. |
|
|
346
|
+
| variant | 'primary' \| 'secondary' | Define el color base del texto e íconos. |
|
|
347
|
+
| size | 'small' \| 'normal' \| 'large' | Controla el tamaño del texto e íconos. |
|
|
348
|
+
| preIcon | IconName | Ícono que aparece antes del texto. |
|
|
349
|
+
| postIcon | IconName | Ícono que aparece después del texto. |
|
|
350
|
+
| replaceColor | string | Sobrescribe el color del texto y los íconos. |
|
|
351
|
+
| ...rest | TouchableOpacityProps | Hereda cualquier propiedad de TouchableOpacity. |
|
|
352
|
+
|
|
310
353
|
### 🧩 Ejemplos de uso:
|
|
311
|
-
```
|
|
354
|
+
```Typescript
|
|
312
355
|
<TextButton
|
|
313
356
|
label="Ver más"
|
|
314
357
|
variant="primary"
|
|
@@ -327,31 +370,33 @@ import { TextButton } from "@dropi/react-native-design-system";
|
|
|
327
370
|
/>
|
|
328
371
|
|
|
329
372
|
```
|
|
330
|
-
|
|
373
|
+
</details>
|
|
374
|
+
</details>
|
|
375
|
+
|
|
376
|
+
<details>
|
|
377
|
+
<summary style="font-size: 2em; font-weight: 700;">Moléculas</summary>
|
|
378
|
+
|
|
331
379
|
## 🚨 Alert
|
|
332
380
|
|
|
333
381
|
El componente Alert muestra un mensaje contextual acompañado de un ícono y colores que representan su nivel de severidad. Está diseñado para comunicar información relevante al usuario: advertencias, errores, confirmaciones o simples avisos informativos.
|
|
334
382
|
|
|
335
383
|
Cada variante (info, warning, error, success) aplica automáticamente colores de fondo, borde e ícono usando el sistema de tokens (colors, sizes, radius, spacing). Además, permite incluir un botón de acción secundaria y un botón de cierre opcional.
|
|
336
384
|
|
|
337
|
-
|
|
338
|
-
```
|
|
385
|
+
### 📦 Importación:
|
|
386
|
+
```Typescript
|
|
339
387
|
import { Alert } from "@dropi/react-native-design-system";
|
|
340
388
|
|
|
341
389
|
```
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
|
345
|
-
|
|
346
|
-
|
|
|
347
|
-
|
|
|
348
|
-
|
|
|
349
|
-
|
|
|
350
|
-
| `onClosePress` | `() => void` | Acción ejecutada al presionar el botón de cierre (`close-small`). |
|
|
351
|
-
|
|
352
|
-
```
|
|
390
|
+
### ⚙️ Props:
|
|
391
|
+
| Prop | Tipo | Descripción |
|
|
392
|
+
| :-------------- | :------------------------------------------- | :---------------------------------------------------------------- |
|
|
393
|
+
| message | string | Texto principal que describe la alerta. |
|
|
394
|
+
| variant | 'info' \| 'warning' \| 'error' \| 'success' | Define los colores, ícono y estilo visual general. |
|
|
395
|
+
| buttonLabel | string | Texto del botón opcional dentro de la alerta. |
|
|
396
|
+
| onButtonPress | () => void | Acción ejecutada al presionar el botón opcional. |
|
|
397
|
+
| onClosePress | () => void | Acción ejecutada al presionar el botón de cierre (`close-small`). |
|
|
353
398
|
|
|
354
|
-
|
|
399
|
+
### 🧩 Ejemplos de uso:
|
|
355
400
|
```Typescript
|
|
356
401
|
<Alert
|
|
357
402
|
message="Tu información ha sido guardada correctamente."
|
|
@@ -369,29 +414,28 @@ import { Alert } from "@dropi/react-native-design-system";
|
|
|
369
414
|
|
|
370
415
|
```
|
|
371
416
|
|
|
372
|
-
|
|
417
|
+
## Empty State
|
|
373
418
|
|
|
374
419
|
El EmptyState es un componente visual diseñado para mostrar pantallas vacías en escenarios donde no hay datos disponibles, ocurrió un estado inicial o se requiere una primera acción del usuario. Puede incluir una imagen, un título opcional, un mensaje descriptivo y un botón configurable. Mantiene una composición centrada y un diseño minimalista, usando automáticamente tamaños distintos para tablet gracias a isTablet.
|
|
375
420
|
|
|
376
|
-
|
|
377
|
-
```
|
|
421
|
+
### 📦 Importación:
|
|
422
|
+
```Typescript
|
|
378
423
|
import { EmptyState } from "@dropi/react-native-design-system";
|
|
379
424
|
```
|
|
380
425
|
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
|
384
|
-
|
|
|
385
|
-
|
|
|
386
|
-
|
|
|
387
|
-
|
|
|
388
|
-
|
|
|
389
|
-
| `onButtonPress` | `() => void` | Callback del botón. Si existe, el botón se muestra. |
|
|
390
|
-
```
|
|
426
|
+
### ⚙️ Props:
|
|
427
|
+
| Prop | Tipo | Descripción |
|
|
428
|
+
| :------------- | :------------------ | :----------------------------------------------------------------------- |
|
|
429
|
+
| imageSource | string \| number | Imagen opcional (URL o require local) mostrada en la parte superior. |
|
|
430
|
+
| title | string | Título corto que introduce el estado vacío. |
|
|
431
|
+
| message | string | Texto principal explicando el estado. *(obligatorio)* |
|
|
432
|
+
| buttonLabel | string | Texto del botón opcional. |
|
|
433
|
+
| onButtonPress | () => void | Callback del botón. Si existe, el botón se muestra. |
|
|
391
434
|
|
|
392
|
-
## 🧩 Ejemplos de uso:
|
|
393
435
|
|
|
394
|
-
|
|
436
|
+
### 🧩 Ejemplos de uso:
|
|
437
|
+
|
|
438
|
+
```Typescript
|
|
395
439
|
<EmptyState
|
|
396
440
|
imageSource={require("../../assets/empty-orders.png")}
|
|
397
441
|
title="Sin pedidos todavía"
|
|
@@ -404,4 +448,91 @@ import { EmptyState } from "@dropi/react-native-design-system";
|
|
|
404
448
|
buttonLabel="Explorar productos"
|
|
405
449
|
onButtonPress={() => console.log("Ir a explorar")}
|
|
406
450
|
/>
|
|
407
|
-
```
|
|
451
|
+
```
|
|
452
|
+
|
|
453
|
+
## Title Description
|
|
454
|
+
|
|
455
|
+
El TitleDescription es un componente de selección diseñado para mostrar opciones con un título principal, una descripción opcional, una imagen y un indicador visual circular que refleja si la opción está activa. Es ideal para flujos donde el usuario debe elegir entre varias alternativas.
|
|
456
|
+
Adapta automáticamente tamaños en tablets usando isTablet, mantiene una disposición horizontal limpia y un estilo consistente con el design system.
|
|
457
|
+
|
|
458
|
+
### 📦 Importación:
|
|
459
|
+
```Typescript
|
|
460
|
+
import { TitleDescription } from "@dropi/react-native-design-system";
|
|
461
|
+
```
|
|
462
|
+
|
|
463
|
+
### ⚙️ Props:
|
|
464
|
+
| Prop | Tipo | Descripción |
|
|
465
|
+
| :------------- | :------------------------ | :-----------------------------------------------------------------------------|
|
|
466
|
+
| title | string | Título principal de la opción. |
|
|
467
|
+
| label | string | Texto descriptivo o subtítulo opcional. |
|
|
468
|
+
| imageSource | string \| number | Imagen opcional (URL o require local) que acompaña la opción. |
|
|
469
|
+
| isActive | boolean | Indica si la opción está seleccionada. Cambia estilos y muestra el inner dot. |
|
|
470
|
+
| isDisabled | boolean | Desactiva la interacción y reduce opacidad. |
|
|
471
|
+
| ...rest | TouchableOpacityProps | Props adicionales del contenedor presionable. |
|
|
472
|
+
|
|
473
|
+
|
|
474
|
+
### 🧩 Ejemplos de uso:
|
|
475
|
+
```Typescript
|
|
476
|
+
<TitleDescription
|
|
477
|
+
title="Domicilio"
|
|
478
|
+
label="Entrega en tu dirección registrada"
|
|
479
|
+
imageSource={require("../../assets/location.png")}
|
|
480
|
+
isActive={selected === "home"}
|
|
481
|
+
onPress={() => setSelected("home")}
|
|
482
|
+
/>
|
|
483
|
+
|
|
484
|
+
<TitleDescription
|
|
485
|
+
title="Punto de recogida"
|
|
486
|
+
label="Elige una tienda cercana"
|
|
487
|
+
imageSource="https://example.com/pickup.png"
|
|
488
|
+
isActive={false}
|
|
489
|
+
isDisabled={true}
|
|
490
|
+
/>
|
|
491
|
+
```
|
|
492
|
+
|
|
493
|
+
## Tooltip
|
|
494
|
+
|
|
495
|
+
Componente flotante para mostrar información contextual en una posición específica. Incluye flecha automática, manejo de overflow horizontal y botón opcional de cierre.
|
|
496
|
+
|
|
497
|
+
### 📦 Importación:
|
|
498
|
+
```Typescript
|
|
499
|
+
import { TitleDescription } from "@dropi/react-native-design-system";
|
|
500
|
+
```
|
|
501
|
+
|
|
502
|
+
### ⚙️ Props:
|
|
503
|
+
| Prop | Tipo | Descripción |
|
|
504
|
+
| -------------| ---------------| ------------------------------------------------------------------------------ |
|
|
505
|
+
| width | number | Ancho exacto del tooltip. |
|
|
506
|
+
| xPosition | number | Coordenada X donde debe alinearse el tooltip respecto al elemento origen. |
|
|
507
|
+
| yPosition | number | Coordenada Y donde debe mostrarse el tooltip (debajo de la flecha). |
|
|
508
|
+
| title | string | Título opcional que aparece sobre el contenido. |
|
|
509
|
+
| children | ReactNode | Contenido interno del tooltip. |
|
|
510
|
+
| onClosePress | () => void | Acción ejecutada al presionar el botón de cierre (close-small). |
|
|
511
|
+
|
|
512
|
+
### 🧩 Ejemplos de uso:
|
|
513
|
+
```Typescript
|
|
514
|
+
|
|
515
|
+
<Tooltip
|
|
516
|
+
width={220}
|
|
517
|
+
xPosition={touchX}
|
|
518
|
+
yPosition={touchY}
|
|
519
|
+
>
|
|
520
|
+
<Body type="s-regular" style={{ color: '#fff' }}>
|
|
521
|
+
Este es un tooltip básico con contenido libre.
|
|
522
|
+
</Body>
|
|
523
|
+
</Tooltip>
|
|
524
|
+
|
|
525
|
+
<Tooltip
|
|
526
|
+
width={250}
|
|
527
|
+
xPosition={x}
|
|
528
|
+
yPosition={y}
|
|
529
|
+
title="Información"
|
|
530
|
+
>
|
|
531
|
+
<Body type="s-regular" style={{ color: '#fff' }}>
|
|
532
|
+
Aquí puedes colocar detalles adicionales, explicaciones o instrucciones.
|
|
533
|
+
</Body>
|
|
534
|
+
</Tooltip>
|
|
535
|
+
|
|
536
|
+
```
|
|
537
|
+
|
|
538
|
+
</details>
|
|
@@ -10,6 +10,16 @@ var _utils = require("../../../utils");
|
|
|
10
10
|
var _constants = require("../../../constants");
|
|
11
11
|
var _atoms = require("../../../atoms");
|
|
12
12
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
|
+
const OptionSelector = ({
|
|
14
|
+
isActive
|
|
15
|
+
}) => {
|
|
16
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
17
|
+
style: isActive ? styles.selectedOptionSelector : styles.optionSelector,
|
|
18
|
+
children: isActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
19
|
+
style: styles.innerSelector
|
|
20
|
+
})
|
|
21
|
+
});
|
|
22
|
+
};
|
|
13
23
|
const TitleDescription = ({
|
|
14
24
|
title,
|
|
15
25
|
label,
|
|
@@ -18,50 +28,29 @@ const TitleDescription = ({
|
|
|
18
28
|
isDisabled,
|
|
19
29
|
...rest
|
|
20
30
|
}) => {
|
|
21
|
-
return /*#__PURE__*/(0, _jsxRuntime.
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
})]
|
|
31
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
|
|
32
|
+
style: [isActive ? styles.selectedOption : styles.option, {
|
|
33
|
+
opacity: isDisabled ? 0.5 : 1
|
|
34
|
+
}],
|
|
35
|
+
disabled: isActive || isDisabled,
|
|
36
|
+
...rest,
|
|
37
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(OptionSelector, {
|
|
38
|
+
isActive: isActive
|
|
39
|
+
}), imageSource && /*#__PURE__*/(0, _jsxRuntime.jsx)(_expoImage.Image, {
|
|
40
|
+
source: imageSource,
|
|
41
|
+
style: styles.image
|
|
42
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
43
|
+
style: styles.textContainer,
|
|
44
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
|
|
45
|
+
type: "m-regular",
|
|
46
|
+
style: styles.titleText,
|
|
47
|
+
children: title
|
|
48
|
+
}), label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
|
|
49
|
+
type: "s-regular",
|
|
50
|
+
style: styles.optionText,
|
|
51
|
+
children: label
|
|
43
52
|
})]
|
|
44
|
-
})
|
|
45
|
-
style: styles.option,
|
|
46
|
-
...rest,
|
|
47
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
48
|
-
style: styles.optionSelector
|
|
49
|
-
}), imageSource && /*#__PURE__*/(0, _jsxRuntime.jsx)(_expoImage.Image, {
|
|
50
|
-
source: imageSource,
|
|
51
|
-
style: styles.image
|
|
52
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
53
|
-
style: styles.textContainer,
|
|
54
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
|
|
55
|
-
type: "m-regular",
|
|
56
|
-
style: styles.optionText,
|
|
57
|
-
children: title
|
|
58
|
-
}), label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
|
|
59
|
-
type: "s-regular",
|
|
60
|
-
style: styles.optionText,
|
|
61
|
-
children: label
|
|
62
|
-
})]
|
|
63
|
-
})]
|
|
64
|
-
})
|
|
53
|
+
})]
|
|
65
54
|
});
|
|
66
55
|
};
|
|
67
56
|
exports.TitleDescription = TitleDescription;
|
|
@@ -110,18 +99,18 @@ const styles = _reactNative.StyleSheet.create({
|
|
|
110
99
|
backgroundColor: _constants.colors["Primary-500"].light
|
|
111
100
|
},
|
|
112
101
|
image: {
|
|
113
|
-
width: 32,
|
|
114
|
-
height: 32,
|
|
102
|
+
width: !_utils.isTablet ? 32 : 32 * 1.5,
|
|
103
|
+
height: !_utils.isTablet ? 32 : 32 * 1.5,
|
|
115
104
|
marginRight: _constants.spacing['size-3'],
|
|
116
105
|
borderRadius: _constants.radius.circle
|
|
117
106
|
},
|
|
118
107
|
textContainer: {
|
|
119
108
|
flexDirection: 'column'
|
|
120
109
|
},
|
|
121
|
-
|
|
110
|
+
titleText: {
|
|
122
111
|
color: _constants.colors['Gray-700'].light
|
|
123
112
|
},
|
|
124
|
-
|
|
113
|
+
optionText: {
|
|
125
114
|
color: _constants.colors['Gray-600'].light
|
|
126
115
|
}
|
|
127
116
|
});
|
|
@@ -5,6 +5,7 @@ interface Props {
|
|
|
5
5
|
xPosition: number;
|
|
6
6
|
yPosition: number;
|
|
7
7
|
children: ReactNode;
|
|
8
|
+
title?: string;
|
|
8
9
|
}
|
|
9
|
-
export declare const Tooltip: ({ width, xPosition, yPosition, children, onClosePress }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export declare const Tooltip: ({ width, xPosition, yPosition, title, children, onClosePress }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
10
11
|
export {};
|
|
@@ -9,37 +9,48 @@ var _constants = require("../../constants");
|
|
|
9
9
|
var _atoms = require("../../atoms");
|
|
10
10
|
var _utils = require("../../utils");
|
|
11
11
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
12
|
+
const SAFE_MARGIN = _constants.spacing['size-5'];
|
|
12
13
|
const Tooltip = ({
|
|
13
14
|
width,
|
|
14
15
|
xPosition,
|
|
15
16
|
yPosition,
|
|
17
|
+
title,
|
|
16
18
|
children,
|
|
17
19
|
onClosePress
|
|
18
20
|
}) => {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
21
|
+
// Ajuste horizontal del tooltip para evitar overflow
|
|
22
|
+
let localXPosition = xPosition + width > _utils.windowWidth ? _utils.windowWidth - width - SAFE_MARGIN : xPosition - SAFE_MARGIN;
|
|
23
|
+
|
|
24
|
+
// Tamaño de la flecha
|
|
25
|
+
const arrowSize = 14;
|
|
26
|
+
|
|
27
|
+
// Cálculo de la posición horizontal de la flecha
|
|
28
|
+
let arrowLeft = xPosition - localXPosition - arrowSize / 2;
|
|
29
|
+
|
|
30
|
+
// Corrección para evitar que la flecha se salga del tooltip
|
|
31
|
+
if (arrowLeft < _constants.spacing['size-3']) arrowLeft = _constants.spacing['size-3'];
|
|
32
|
+
if (arrowLeft > width - arrowSize - _constants.spacing['size-3']) arrowLeft = width - arrowSize - _constants.spacing['size-3'];
|
|
33
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
34
|
+
style: [styles.container, {
|
|
35
|
+
top: yPosition + arrowSize,
|
|
24
36
|
left: localXPosition,
|
|
25
|
-
width
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
37
|
+
width
|
|
38
|
+
}],
|
|
39
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
40
|
+
style: [styles.arrow, {
|
|
41
|
+
left: arrowLeft
|
|
42
|
+
}]
|
|
43
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
44
|
+
style: styles.wrapper,
|
|
45
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
46
|
+
style: styles.contentContainer,
|
|
47
|
+
children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
|
|
48
|
+
type: "m-medium",
|
|
49
|
+
style: styles.title,
|
|
50
|
+
children: title
|
|
51
|
+
}), children]
|
|
39
52
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
40
|
-
style:
|
|
41
|
-
paddingLeft: _constants.spacing['size-1']
|
|
42
|
-
},
|
|
53
|
+
style: styles.buttonContainer,
|
|
43
54
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.TextButton, {
|
|
44
55
|
label: "",
|
|
45
56
|
size: "large",
|
|
@@ -49,7 +60,39 @@ const Tooltip = ({
|
|
|
49
60
|
onPress: onClosePress
|
|
50
61
|
})
|
|
51
62
|
})]
|
|
52
|
-
})
|
|
63
|
+
})]
|
|
53
64
|
});
|
|
54
65
|
};
|
|
55
|
-
exports.Tooltip = Tooltip;
|
|
66
|
+
exports.Tooltip = Tooltip;
|
|
67
|
+
const styles = _reactNative.StyleSheet.create({
|
|
68
|
+
container: {
|
|
69
|
+
position: 'absolute',
|
|
70
|
+
backgroundColor: _constants.colors['Gray-800'].light,
|
|
71
|
+
padding: _constants.spacing['size-4'],
|
|
72
|
+
borderRadius: _constants.radius['border-2']
|
|
73
|
+
},
|
|
74
|
+
arrow: {
|
|
75
|
+
position: 'absolute',
|
|
76
|
+
top: -7,
|
|
77
|
+
width: 14,
|
|
78
|
+
height: 14,
|
|
79
|
+
backgroundColor: _constants.colors['Gray-800'].light,
|
|
80
|
+
transform: [{
|
|
81
|
+
rotate: '45deg'
|
|
82
|
+
}],
|
|
83
|
+
borderRadius: 2
|
|
84
|
+
},
|
|
85
|
+
wrapper: {
|
|
86
|
+
flexDirection: 'row'
|
|
87
|
+
},
|
|
88
|
+
contentContainer: {
|
|
89
|
+
flex: 1
|
|
90
|
+
},
|
|
91
|
+
buttonContainer: {
|
|
92
|
+
paddingLeft: _constants.spacing['size-2']
|
|
93
|
+
},
|
|
94
|
+
title: {
|
|
95
|
+
color: _constants.colors.White.light,
|
|
96
|
+
marginBottom: _constants.spacing['size-1']
|
|
97
|
+
}
|
|
98
|
+
});
|