@shoutem/ui 5.3.0 → 5.5.0

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.
Files changed (32) hide show
  1. package/README.md +0 -78
  2. package/components/DropDownMenu/DropDownMenu.js +1 -1
  3. package/components/EmptyListImage.js +0 -1
  4. package/components/GridRow.js +2 -2
  5. package/components/Image.js +2 -1
  6. package/components/NumberInput.js +4 -4
  7. package/components/ShareButton.js +6 -2
  8. package/components/Text.js +2 -1
  9. package/components/TextInput.js +2 -1
  10. package/components/View.js +2 -1
  11. package/index.js +2 -4
  12. package/package.json +8 -6
  13. package/theme.js +46 -32
  14. package/examples/components/Buttons.js +0 -95
  15. package/examples/components/Cards.js +0 -79
  16. package/examples/components/Dividers.js +0 -36
  17. package/examples/components/DropDownMenus.js +0 -93
  18. package/examples/components/Examples.js +0 -70
  19. package/examples/components/FormComponents.js +0 -48
  20. package/examples/components/Headers.js +0 -62
  21. package/examples/components/HorizontalPagers.js +0 -71
  22. package/examples/components/ImageGalleries.js +0 -55
  23. package/examples/components/Images.js +0 -140
  24. package/examples/components/InlineGalleries.js +0 -117
  25. package/examples/components/NavigationBars.js +0 -309
  26. package/examples/components/Rows.js +0 -200
  27. package/examples/components/Spinners.js +0 -14
  28. package/examples/components/Stage.js +0 -46
  29. package/examples/components/Tiles.js +0 -324
  30. package/examples/components/Typography.js +0 -30
  31. package/examples/components/Videos.js +0 -35
  32. package/examples/components/index.js +0 -1
package/examples/components/Tiles.js DELETED
@@ -1,324 +0,0 @@
1
- import React from 'react';
2
- import { Button } from '../../components/Button';
3
- import { Icon } from '../../components/Icon';
4
- import { Image } from '../../components/Image';
5
- import { ImageBackground } from '../../components/ImageBackground';
6
- import { Overlay } from '../../components/Overlay';
7
- import { Caption, Heading, Subtitle, Text, Title } from '../../components/Text';
8
- import { Tile } from '../../components/Tile';
9
- import { View } from '../../components/View';
10
- import { Stage } from './Stage';
11
-
12
- export function Tiles() {
13
- return (
14
- <View styleName="vertical collapsed">
15
- <Stage title="Tile">
16
- <Tile styleName="small clear">
17
- <Image
18
- styleName="medium-square"
19
- source={{
20
- uri:
21
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-12.png',
22
- }}
23
- />
24
- <View styleName="content">
25
- <Subtitle numberOfLines={2}>
26
- When The Morning Dawns - DJ Silver Sample Album
27
- </Subtitle>
28
- <Caption>20 hours ago</Caption>
29
- </View>
30
- </Tile>
31
- </Stage>
32
-
33
- <Stage title="Tile + Icon">
34
- <Tile styleName="small clear">
35
- <ImageBackground
36
- styleName="medium-square"
37
- source={{
38
- uri:
39
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-2.png',
40
- }}
41
- >
42
- <Overlay styleName="rounded-small">
43
- <Icon name="play" />
44
- </Overlay>
45
- </ImageBackground>
46
- <View styleName="content">
47
- <Subtitle numberOfLines={2}>
48
- When The Morning Dawns - DJ Silver Sample Album
49
- </Subtitle>
50
- <Caption>20 hours ago</Caption>
51
- </View>
52
- </Tile>
53
- </Stage>
54
-
55
- <Stage title="Large (featured) tile">
56
- <ImageBackground
57
- styleName="featured"
58
- source={{
59
- uri:
60
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-4.png',
61
- }}
62
- >
63
- <Tile>
64
- <Title styleName="md-gutter-bottom">
65
- MIKE PATTON TEAMING WITH JOHN KAADA FOR COLLAB ALBUM BACTERIA CULT
66
- </Title>
67
- <Caption>Sophia Jackson 21 hours ago</Caption>
68
- </Tile>
69
- </ImageBackground>
70
- </Stage>
71
-
72
- <Stage title="Large (featured) tile + Button + Sale tag">
73
- <ImageBackground
74
- styleName="featured"
75
- source={{
76
- uri:
77
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-11.png',
78
- }}
79
- >
80
- <Tile>
81
- <Overlay styleName="image-overlay">
82
- <Heading>-20%</Heading>
83
- </Overlay>
84
- <Title styleName="md-gutter-top">
85
- COOL BLACK AND WHITE STYLISH WATCHES
86
- </Title>
87
- <Subtitle styleName="line-through sm-gutter-top">$280.00</Subtitle>
88
- <Heading>$250.00</Heading>
89
- <Button styleName="md-gutter-top">
90
- <Icon name="cart" />
91
- <Text>ADD TO BASKET</Text>
92
- </Button>
93
- </Tile>
94
- </ImageBackground>
95
- </Stage>
96
-
97
- <Stage title="Large (featured) tile + Button">
98
- <ImageBackground
99
- styleName="featured"
100
- source={{
101
- uri:
102
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-9.png',
103
- }}
104
- >
105
- <Tile>
106
- <Title>MIKE PATTON TEAMING WITH JOHN KAADA</Title>
107
- <Subtitle styleName="line-through sm-gutter-top">150.00</Subtitle>
108
- <Heading>99.99</Heading>
109
- <Button styleName="md-gutter-top">
110
- <Text>CLAIM COUPON</Text>
111
- </Button>
112
- </Tile>
113
- </ImageBackground>
114
- </Stage>
115
-
116
- <Stage title="Large list item">
117
- <Tile>
118
- <Image
119
- styleName="large-banner"
120
- source={{
121
- uri:
122
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-5.png',
123
- }}
124
- />
125
- <View styleName="content">
126
- <Title>MAUI BY AIR THE BEST WAY AROUND THE ISLAND</Title>
127
- <View styleName="horizontal space-between">
128
- <Caption>1 hour ago</Caption>
129
- <Caption>15:34</Caption>
130
- </View>
131
- </View>
132
- </Tile>
133
- </Stage>
134
-
135
- <Stage title="Large list item + Icon + Timestamp">
136
- <Tile>
137
- <ImageBackground
138
- styleName="large-banner"
139
- source={{
140
- uri:
141
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-7.png',
142
- }}
143
- >
144
- <Overlay styleName="rounded-small">
145
- <Icon name="play" />
146
- </Overlay>
147
- </ImageBackground>
148
- <View styleName="content">
149
- <Title>MAUI BY AIR THE BEST WAY AROUND THE ISLAND</Title>
150
- <View styleName="horizontal space-between">
151
- <Caption>1 hour ago</Caption>
152
- <Caption>15:34</Caption>
153
- </View>
154
- </View>
155
- </Tile>
156
- </Stage>
157
-
158
- <Stage title="Large list item + Price tag">
159
- <ImageBackground
160
- styleName="large-banner"
161
- source={{
162
- uri:
163
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png',
164
- }}
165
- >
166
- <Tile>
167
- <Title styleName="md-gutter-bottom">
168
- SMOKED SALMON, CLASSIC CONDIMENTS, BRIOCHE
169
- </Title>
170
- <Overlay>
171
- <Subtitle styleName="sm-gutter-horizontal">$18.30</Subtitle>
172
- </Overlay>
173
- </Tile>
174
- </ImageBackground>
175
- </Stage>
176
-
177
- <Stage title="Large list item + Action icon">
178
- <ImageBackground
179
- styleName="large-banner"
180
- source={{
181
- uri:
182
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png',
183
- }}
184
- >
185
- <Tile>
186
- <View virtual styleName="actions">
187
- <Button styleName="tight clear">
188
- <Icon name="add-to-favorites-off" />
189
- </Button>
190
- </View>
191
- <Title>HOW TO MAINTAIN YOUR MENTAL HEALTH IN 2016</Title>
192
- <Caption>6557 Americo Hills Apt. 118</Caption>
193
- </Tile>
194
- </ImageBackground>
195
- </Stage>
196
-
197
- <Stage title="Detail square + Price tag">
198
- <ImageBackground
199
- styleName="large-square"
200
- source={{
201
- uri:
202
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png',
203
- }}
204
- >
205
- <Tile>
206
- <Title styleName="md-gutter-bottom">
207
- SMOKED SALMON, CLASSIC CONDIMENTS, BRIOCHE
208
- </Title>
209
- <Overlay>
210
- <Subtitle styleName="sm-gutter-horizontal">$18.30</Subtitle>
211
- </Overlay>
212
- </Tile>
213
- </ImageBackground>
214
- </Stage>
215
-
216
- <Stage title="Detail square + Button">
217
- <ImageBackground
218
- styleName="large-square"
219
- source={{
220
- uri:
221
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-9.png',
222
- }}
223
- >
224
- <Tile>
225
- <Title>MIKE PATTON TEAMING WITH JOHN KAADA</Title>
226
- <Subtitle styleName="line-through sm-gutter-top">150.00</Subtitle>
227
- <Heading>99.99</Heading>
228
- <Button styleName="md-gutter-top">
229
- <Text>CLAIM COUPON</Text>
230
- </Button>
231
- </Tile>
232
- </ImageBackground>
233
- </Stage>
234
-
235
- <Stage title="Detail square + Button + Sale tag">
236
- <ImageBackground
237
- styleName="large-square"
238
- source={{
239
- uri:
240
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-11.png',
241
- }}
242
- >
243
- <Tile>
244
- <Overlay styleName="image-overlay">
245
- <Heading>-20%</Heading>
246
- </Overlay>
247
- <Title styleName="md-gutter-top">
248
- COOL BLACK AND WHITE STYLISH WATCHES
249
- </Title>
250
- <Subtitle styleName="line-through sm-gutter-top">$280.00</Subtitle>
251
- <Heading>$250.00</Heading>
252
- <Button styleName="md-gutter-top">
253
- <Icon name="cart" />
254
- <Text>ADD TO BASKET</Text>
255
- </Button>
256
- </Tile>
257
- </ImageBackground>
258
- </Stage>
259
-
260
- <Stage title="Detail large + Price tag">
261
- <ImageBackground
262
- styleName="large-portrait"
263
- source={{
264
- uri:
265
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png',
266
- }}
267
- >
268
- <Tile>
269
- <Title styleName="md-gutter-bottom">
270
- SMOKED SALMON, CLASSIC CONDIMENTS, BRIOCHE
271
- </Title>
272
- <Overlay>
273
- <Subtitle styleName="sm-gutter-horizontal">$18.30</Subtitle>
274
- </Overlay>
275
- </Tile>
276
- </ImageBackground>
277
- </Stage>
278
-
279
- <Stage title="Detail large + Button">
280
- <ImageBackground
281
- styleName="large-portrait"
282
- source={{
283
- uri:
284
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-9.png',
285
- }}
286
- >
287
- <Tile>
288
- <Title>MIKE PATTON TEAMING WITH JOHN KAADA</Title>
289
- <Subtitle styleName="line-through sm-gutter-top">150.00</Subtitle>
290
- <Heading>99.99</Heading>
291
- <Button styleName="md-gutter-top">
292
- <Text>CLAIM COUPON</Text>
293
- </Button>
294
- </Tile>
295
- </ImageBackground>
296
- </Stage>
297
-
298
- <Stage title="Detail large + Button + Sale tag">
299
- <ImageBackground
300
- styleName="large-portrait"
301
- source={{
302
- uri:
303
- 'https://shoutem.github.io/img/ui-toolkit/examples/image-11.png',
304
- }}
305
- >
306
- <Tile>
307
- <Overlay styleName="image-overlay">
308
- <Heading>-20%</Heading>
309
- </Overlay>
310
- <Title styleName="md-gutter-top">
311
- COOL BLACK AND WHITE STYLISH WATCHES
312
- </Title>
313
- <Subtitle styleName="line-through sm-gutter-top">$280.00</Subtitle>
314
- <Heading>$250.00</Heading>
315
- <Button styleName="md-gutter-top">
316
- <Icon name="cart" />
317
- <Text>ADD TO BASKET</Text>
318
- </Button>
319
- </Tile>
320
- </ImageBackground>
321
- </Stage>
322
- </View>
323
- );
324
- }
package/examples/components/Typography.js DELETED
@@ -1,30 +0,0 @@
1
- import React from 'react';
2
- import { Caption, Heading, Subtitle, Text, Title } from '../../components/Text';
3
- import { View } from '../../components/View';
4
- import { Stage } from './Stage';
5
-
6
- export function Typography() {
7
- return (
8
- <View styleName="vertical collapsed">
9
- <Stage title="Heading">
10
- <Heading>Mobile App Creator</Heading>
11
- </Stage>
12
-
13
- <Stage title="Title">
14
- <Title>MOBILE APP CREATOR</Title>
15
- </Stage>
16
-
17
- <Stage title="Subtitle">
18
- <Subtitle>Mobile App Creator</Subtitle>
19
- </Stage>
20
-
21
- <Stage title="Text">
22
- <Text>Mobile App Creator</Text>
23
- </Stage>
24
-
25
- <Stage title="Caption">
26
- <Caption>Mobile App Creator</Caption>
27
- </Stage>
28
- </View>
29
- );
30
- }
package/examples/components/Videos.js DELETED
@@ -1,35 +0,0 @@
1
- import React from 'react';
2
- import { Video } from '../../components/Video';
3
- import { View } from '../../components/View';
4
- import { Stage } from './Stage';
5
-
6
- export function Videos() {
7
- return (
8
- <View styleName="vertical collapsed">
9
- <Stage title="YouTube video">
10
- <Video
11
- source={{ uri: 'https://www.youtube.com/embed/2zuisMXzyaI' }}
12
- width={320}
13
- height={180}
14
- />
15
- </Stage>
16
- <Stage title="Vimeo video">
17
- <Video
18
- source={{ uri: 'https://vimeo.com/182267614' }}
19
- width={320}
20
- height={180}
21
- />
22
- </Stage>
23
- <Stage title="Stream video">
24
- <Video
25
- source={{
26
- uri:
27
- 'https://archive.org/download/Sintel/sintel-2048-stereo_512kb.mp4',
28
- }}
29
- width={320}
30
- height={180}
31
- />
32
- </Stage>
33
- </View>
34
- );
35
- }
package/examples/components/index.js DELETED
@@ -1 +0,0 @@
1
- export { Examples } from './Examples';