@woosmap/ui 2.7.0 → 2.11.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 (20) hide show
  1. package/package.json +1 -1
  2. package/src/components/Demo/AddressDemo.js +1 -1
  3. package/src/components/Demo/LocalitiesAddressDemo.js +370 -0
  4. package/src/components/Demo/LocalitiesAddressDemo.stories.js +12 -0
  5. package/src/components/Demo/LocalitiesAllDemo.js +83 -0
  6. package/src/components/Demo/LocalitiesAllDemo.stories.js +12 -0
  7. package/src/components/Demo/LocalitiesDemo.js +10 -8
  8. package/src/components/Demo/MapDemo.js +2 -2
  9. package/src/components/Demo/MerchantDemo.js +4 -6
  10. package/src/components/Demo/SearchDemo.js +1 -1
  11. package/src/components/Demo/Showcase.stories.js +7 -3
  12. package/src/components/Demo/SkeletonDemo.js +19 -8
  13. package/src/components/Label/Label.js +18 -2
  14. package/src/components/Label/Label.styl +6 -0
  15. package/src/components/Woosmap/AddressAutocomplete.js +1 -1
  16. package/src/locales/en/translation.json +10 -4
  17. package/src/locales/fr/translation.json +12 -6
  18. package/src/styles/console/colors.styl +9 -158
  19. package/src/styles/console/skeletondemo.styl +43 -1
  20. package/src/styles/website/skeletondemo.styl +57 -6
package/src/styles/website/skeletondemo.styl CHANGED
@@ -2,6 +2,7 @@
2
2
  $mapWidth = 40rem
3
3
  $mapWidthSmall = 40rem
4
4
  $mapHeight = 36rem
5
+ $bigMapHeight = 59.5rem
5
6
 
6
7
  // Overall style
7
8
  .demo
@@ -27,6 +28,14 @@ $mapHeight = 36rem
27
28
  max-height 57rem
28
29
  .demo__label
29
30
  white-space normal
31
+ &--localities
32
+ .tab__content
33
+ height 55rem
34
+ max-height 55rem
35
+ &--map
36
+ .tab__content
37
+ height 49.6rem
38
+ max-height 49.6rem
30
39
  &--localities
31
40
  &--uk
32
41
  .tab__content
@@ -55,6 +64,7 @@ $mapHeight = 36rem
55
64
  &__item
56
65
  min-width 16rem !important
57
66
  &--address
67
+ &--localitiesaddress
58
68
  &__formcontainer
59
69
  width 100%
60
70
  height 100%
@@ -67,6 +77,10 @@ $mapHeight = 36rem
67
77
  .demo__map
68
78
  height 59.5rem
69
79
 
80
+ &--map
81
+ .demo__map
82
+ width 55rem
83
+ height 55rem
70
84
 
71
85
  &__header
72
86
  margin-left auto
@@ -86,10 +100,18 @@ $mapHeight = 36rem
86
100
  font-weight 400
87
101
  line-height 3.2rem
88
102
  margin-bottom 3rem
103
+ &__list
104
+ margin-left 60px
105
+ li
106
+ list-style disc
107
+ list-style-position inside
108
+ margin 5px 0 5px 0
89
109
  a
90
110
  color $primary
91
111
  font-weight 600
92
- cursor pointer
112
+ cursor pointer
113
+ p
114
+ margin-bottom 20px
93
115
  &__cost
94
116
  display block
95
117
  margin-bottom 1rem
@@ -103,9 +125,11 @@ $mapHeight = 36rem
103
125
  white-space nowrap
104
126
  .demo--merchant &
105
127
  .demo--geolocation &
106
- color $success
128
+ color black
107
129
  flexMiddle()
108
130
  mbi()
131
+ width 100%
132
+ white-space normal
109
133
  img
110
134
  width 4rem
111
135
  &--wide
@@ -135,10 +159,14 @@ $mapHeight = 36rem
135
159
  .demo--search &
136
160
  .demo--distance &
137
161
  .demo--address &
162
+ .demo--localitiesaddress &
163
+ .demo--localities &
138
164
  margin-bottom 1rem
139
165
  .demo__input-container
140
166
  margin-bottom 2rem
141
167
  .demo--address &
168
+ .demo--localitiesaddress &
169
+ .demo--localities &
142
170
  mbi(4)
143
171
  flex-wrap nowrap
144
172
  > :nth-child(2)
@@ -160,12 +188,14 @@ $mapHeight = 36rem
160
188
  margin-bottom 2rem
161
189
  .demo--distance &
162
190
  .demo--address &
191
+ .demo--localitiesaddress &
163
192
  justify-content flex-start
164
193
  .demo--search &
165
194
  margin-bottom 3rem
166
195
  .demo__input-container
167
196
  margin-bottom 0rem
168
197
  .demo--address &
198
+ .demo--localitiesaddress &
169
199
  mbi(4)
170
200
  :nth-child(2)
171
201
  .select
@@ -197,6 +227,8 @@ $mapHeight = 36rem
197
227
  button
198
228
  &:focus
199
229
  box-shadow 0 0 0 .1rem $focus
230
+ .demo--localities &
231
+ height $bigMapHeight
200
232
  &__results
201
233
  background $result
202
234
  width 30rem
@@ -204,6 +236,8 @@ $mapHeight = 36rem
204
236
  max-height $mapHeight
205
237
  box-shadow 0 0 1rem $dark15
206
238
  z-index 2
239
+ .demo--localities &
240
+ max-height unset
207
241
  .demo--localities--uk &
208
242
  width 50rem
209
243
  max-height unset
@@ -221,6 +255,7 @@ $mapHeight = 36rem
221
255
  background-color transparent
222
256
  box-shadow none
223
257
  .demo--address &
258
+ .demo--localitiesaddress &
224
259
  width 34rem
225
260
  &__header
226
261
  background $tabHeader
@@ -236,6 +271,7 @@ $mapHeight = 36rem
236
271
  .demo--localities--uk &
237
272
  .demo--localities--fr &
238
273
  .demo--address &
274
+ .demo--localitiesaddress &
239
275
  display none
240
276
  &__leftcontent
241
277
  position relative
@@ -253,11 +289,14 @@ $mapHeight = 36rem
253
289
  .demo--localities--uk &
254
290
  .demo--localities--fr &
255
291
  .demo--address &
292
+ .demo--localitiesaddress &
256
293
  padding 0
257
294
  font-size 1.5rem
258
295
  mbib(2)
259
296
  background-color #f3f9fd
260
297
  .demo--address &
298
+ .demo--localitiesaddress &
299
+ .demo--localities &
261
300
  height auto
262
301
  .localities-matched
263
302
  background-color $resultMatch
@@ -317,6 +356,7 @@ $mapHeight = 36rem
317
356
  &-footer
318
357
  .demo--distance &
319
358
  .demo--address &
359
+ .demo--localitiesaddress &
320
360
  .demo--map &
321
361
  margin-bottom 0
322
362
  .demo
@@ -338,6 +378,7 @@ $mapHeight = 36rem
338
378
  margin-bottom 0
339
379
  &-header
340
380
  .demo--address &
381
+ .demo--localitiesaddress &
341
382
  flex-wrap wrap
342
383
  .demo--geolocation &
343
384
  margin-bottom 2rem
@@ -346,6 +387,7 @@ $mapHeight = 36rem
346
387
  margin-bottom 0
347
388
  .demo--distance &
348
389
  .demo--address &
390
+ .demo--localitiesaddress &
349
391
  .demo--search &
350
392
  .demo--map &
351
393
  .demo
@@ -377,9 +419,6 @@ $mapHeight = 36rem
377
419
  width 100%
378
420
  flexAxis()
379
421
  @media screen and (max-width 960px)
380
- .demo.demo--localities
381
- .demo__input-container
382
- margin-right 0
383
422
  .demo
384
423
  &__results
385
424
  &__content
@@ -398,6 +437,7 @@ $mapHeight = 36rem
398
437
  flex-direction column
399
438
  .demo--distance &
400
439
  .demo--address &
440
+ .demo--localitiesaddress &
401
441
  .demo--map &
402
442
  flex-direction row
403
443
  &__results
@@ -420,10 +460,17 @@ $mapHeight = 36rem
420
460
  font-size $inputFontSize - .2
421
461
  .demo--merchant &
422
462
  justify-content center
463
+ &.demo--localities
464
+ .demo
465
+ &__content-header
466
+ flex-direction column
467
+ &__input-container
468
+ margin-right 0
423
469
  @media screen and (max-width 440px)
424
470
  .demo
425
471
  &.demo--distance
426
472
  &.demo--address
473
+ &.demo--localitiesaddress
427
474
  &.demo--map
428
475
  .demo__input-container
429
476
  &:nth-child(3)
@@ -437,6 +484,7 @@ $mapHeight = 36rem
437
484
  &.demo--localities
438
485
  &.demo--localities--uk
439
486
  &.demo--address
487
+ &.demo--localitiesaddress
440
488
  .flag
441
489
  width 2rem
442
490
  height 1.4rem
@@ -446,6 +494,7 @@ $mapHeight = 36rem
446
494
  margin 0 0 2rem 0
447
495
  &.demo--localities--uk
448
496
  &.demo--address
497
+ &.demo--localitiesaddress
449
498
  .demo__input-container--inline
450
499
  .input
451
500
  margin 0 0 2rem 0
@@ -469,7 +518,9 @@ $mapHeight = 36rem
469
518
  font-size 1.4rem
470
519
  height 3.6rem
471
520
  padding 0 .8rem
472
-
521
+ &__desc
522
+ &__list
523
+ margin-left 20px
473
524
  @media screen and (max-width 370px)
474
525
  .demo
475
526
  &.demo--merchant