@woosmap/ui 4.23.0 → 4.25.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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@woosmap/ui",
3
- "version": "4.23.0",
3
+ "version": "4.25.0",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/WebGeoServices/ui.git"
@@ -1,295 +1,295 @@
1
1
 
2
2
  .demo
3
- fullwh()
4
- margin auto
5
- color $secondary
6
- line-height 2.2rem
7
- .title
8
- font-size $title3
9
- pre
10
- code
11
- font-size $fontSizeDemo - .1
12
- &__header
13
- fullw()
14
- position relative
15
- &__content
16
- fullw()
17
- br()
18
- font-size $fontSizeDemo
19
- overflow hidden
20
- position relative
21
- // box-shadow 0 0 3rem rgba($logo2, .15)
22
- box-shadow 0 .3rem 1rem rgba($secondary, .15)
23
- .demo--merchant &
24
- border .1rem solid $light
25
-
26
- &__showcase
27
- &__data
28
- display flex
29
- background-color $light
30
- &__filters
31
- border-right .1rem solid rgba($secondary, .1)
32
- padding $demoPadding + .4 $demoPadding
33
- width $demofilterWidth
34
- background-color $light// rgba($logo2, .82)
35
- padding-bottom 2.6rem
36
- mbib(1.6)
37
- .demo--localities--uk &
38
- .demo--localities--fr &
39
- border 0
40
- width auto
41
- flex-grow 1
42
- &__data
43
- max-height 45rem
44
- border-top .1rem solid rgba($secondary, .1)
45
- .demo--localities--uk &
46
- .demo--localities--fr &
47
- max-height unset
48
- .demo--localities--uk &
49
- height 54rem
50
- .demo--localities--fr &
51
- height 38rem
52
- &__showcase
53
- min-height 50rem
54
- max-height 71rem
55
- .demo--localities--uk &
56
- .demo--localities--fr &
57
- position relative
58
- z-index 100
59
- min-height unset
60
- max-height unset
61
- &__map
62
- display flex
63
- align-items center
64
- justify-content center
65
- flex-grow 1
66
- background-color $light
67
- .map
68
- width 100%
69
- height 100%
70
- background-color $inputDemoBgColor
71
- &__results
72
- inputFont()
73
- width $demofilterWidth
74
- display flex
75
- flex-direction column
76
- border-right .1rem solid rgba($secondary, .1)
77
- flex-shrink 0
78
- &__header
79
- display flex
80
- align-items center
81
- flex-shrink 0
82
- font-size $fontSizeDemo - .1
83
- padding 0 $demoPadding
84
- height $footerDemoHeight
85
- background-color $inputDemoBgColor
86
- font-weight 600
87
- &__content
88
- font-weight 400
89
- color $textColor
90
- padding $demoPadding
91
- background-color $light
92
- overflow-y auto
93
- &__code
94
- inputFont()
95
- width 100%
96
- &__input-container
97
- mbib(.6)
98
- &--inline
99
- .demo--localities--uk &
100
- mbib(1.6)
101
- &__label
102
- inputFont()
103
- font-size $inputFontSizeDemo
104
- font-weight 600
105
- margin-bottom .6rem
3
+ fullwh()
4
+ margin auto
5
+ color $secondary
6
+ line-height 2.2rem
7
+ .title
8
+ font-size $title3
9
+ pre
10
+ code
11
+ font-size $fontSizeDemo - .1
12
+ &__header
13
+ fullw()
14
+ position relative
15
+ &__content
16
+ fullw()
17
+ br()
18
+ font-size $fontSizeDemo
19
+ overflow hidden
20
+ position relative
21
+ // box-shadow 0 0 3rem rgba($logo2, .15)
22
+ box-shadow 0 .3rem 1rem rgba($secondary, .15)
23
+ .demo--merchant &
24
+ border .1rem solid $light
25
+
26
+ &__showcase
27
+ &__data
28
+ display flex
29
+ background-color $light
30
+ &__filters
31
+ border-right .1rem solid rgba($secondary, .1)
32
+ padding $demoPadding + .4 $demoPadding
33
+ width $demofilterWidth
34
+ background-color $light// rgba($logo2, .82)
35
+ padding-bottom 2.6rem
36
+ mbib(1.6)
37
+ .demo--localities--uk &
38
+ .demo--localities--fr &
39
+ border 0
40
+ width auto
41
+ flex-grow 1
42
+ &__data
43
+ max-height 45rem
44
+ border-top .1rem solid rgba($secondary, .1)
45
+ .demo--localities--uk &
46
+ .demo--localities--fr &
47
+ max-height unset
48
+ .demo--localities--uk &
49
+ height 54rem
50
+ .demo--localities--fr &
51
+ height 38rem
52
+ &__showcase
53
+ min-height 50rem
54
+ max-height 71rem
55
+ .demo--localities--uk &
56
+ .demo--localities--fr &
57
+ position relative
58
+ z-index 100
59
+ min-height unset
60
+ max-height unset
61
+ &__map
62
+ display flex
63
+ align-items center
64
+ justify-content center
65
+ flex-grow 1
66
+ background-color $light
67
+ .map
68
+ width 100%
69
+ height 100%
70
+ background-color $inputDemoBgColor
71
+ &__results
72
+ inputFont()
73
+ width $demofilterWidth
74
+ display flex
75
+ flex-direction column
76
+ border-right .1rem solid rgba($secondary, .1)
77
+ flex-shrink 0
78
+ &__header
79
+ display flex
80
+ align-items center
81
+ flex-shrink 0
82
+ font-size $fontSizeDemo - .1
83
+ padding 0 $demoPadding
84
+ height $footerDemoHeight
85
+ background-color $inputDemoBgColor
86
+ font-weight 600
87
+ &__content
88
+ font-weight 400
89
+ color $textColor
90
+ padding $demoPadding
91
+ background-color $light
92
+ overflow-y auto
93
+ &__code
94
+ inputFont()
95
+ width 100%
96
+ &__input-container
97
+ mbib(.6)
98
+ &--inline
99
+ .demo--localities--uk &
100
+ mbib(1.6)
101
+ &__label
102
+ inputFont()
103
+ font-size $inputFontSizeDemo
104
+ font-weight 600
105
+ margin-bottom .6rem
106
106
 
107
- input
108
- &:not([type=button]):not([type=checkbox]):not([type=radio]):not([type=textarea])
109
- inputFont()
110
- br($demoBr)
111
- background-color $inputDemoBgColor !important
112
- border-color $inputDemoBorderColor
113
- font-size $inputFontSizeDemo !important
114
- height $inputDemoHeight
115
- padding 0 1rem 0 1rem
116
- .mbi
117
- mbi(.6)
118
- .input
119
- &__label
120
- inputFont()
121
- font-size $inputFontSizeDemo !important
122
- .select
123
- .asyncselect
124
- &__control
125
- inputFont()
126
- font-size $inputFontSizeDemo !important
127
- border-radius $demoBr !important
128
- background-color $inputDemoBgColor !important
129
- min-height $inputDemoHeight !important
130
- height auto !important
131
- &:not(.select__control--is-focused):not(.asyncselect__control--is-focused)
132
- border-color $inputDemoBorderColor !important
133
- .css-g1d714-ValueContainer
134
- .css-tlfecz-indicatorContainer
135
- padding 0
136
- .css-g1d714-ValueContainer
137
- height 100%
138
- .css-tlfecz-indicatorContainer
139
- cursor pointer
140
- input
141
- &:not([type=button]):not([type=checkbox]):not([type=radio]):not([type=textarea])
142
- &.select
143
- &.asyncselect
144
- &__input
145
- background-color unset !important
146
- height auto !important
147
- &__placeholder
148
- color $inputDemoPlaceholderColor
149
- &__dropdown-indicator
150
- &__clear-indicator
151
- padding 0
152
- &__value-container
153
- padding-left .6rem !important
154
- &__indicator
155
- padding-left .5rem !important
156
- padding-right .5rem !important
157
- svg
158
- fill $activeColor
159
- &__indicator-separator
160
- background-color $activeColor
161
- &__multi-value
162
- background-color $activeColorDark !important
163
- &__label
164
- inputFont() !important
165
- height 2.1rem
166
- line-height 1.1rem
167
- font-size $inputFontSizeDemo - .1 !important
168
- &__remove
169
- padding .2rem !important
170
-
171
- .flag
172
- width 1.6rem
173
- height 1.1rem
174
- &__option
175
- padding .6rem
176
- .flag
177
- margin 0 .6rem 0 0
178
- &--is-selected
179
- color $light !important
180
- background-color #819cb9 !important
181
- &.select__option--is-focused
182
- color $light !important
183
- background-color #819cb9 !important
184
- &--is-focused:not(.select__option--is-selected)
185
- background-color #cddbeb !important
186
- color $secondary !important
187
-
188
- &__filters
189
- .btn
190
- br(.2)
191
- font-size $inputFontSizeDemo !important
192
- line-height 2.2rem
193
- padding 0 .8rem
194
- height $inputDemoHeight
195
- inputFont()
196
- border-color $inputDemoBorderColor
197
- .active
198
- &--primary
199
- background-color $activeColor
200
- border-color $activeColor
201
- &--group
202
- height 2.8rem
203
- &-container
204
- color $inputDemoBgColor
205
- .btn
206
- padding 0 .8rem
207
- &:first-child
208
- border-radius 2rem 0 0 2rem
209
- &:last-child
210
- border-radius 0 2rem 2rem 0
211
- &--light
212
- .btn.active
213
- background-color $activeColorDark
214
- border-color $activeColorDark
215
- color $inputDemoBgColor
216
- &:hover
217
- background-color $activeColorDark
218
- &.language
219
- &.transportation
220
- mbi(.6)
221
- .btn
222
- border-radius .3rem !important
223
- border 0
224
- height 2.2rem
225
- padding .4rem
226
- &.active
227
- background-color $light
228
- box-shadow 0 0 .1rem .1rem $activeColorDark
229
- .flag
230
- width 2.4rem
231
- height 1.6rem
232
- &.transportation
233
- .btn
234
- height 2.8rem
235
- img
236
- max-width 2.4rem
237
- &__code
238
- .tab
239
- &__header
240
- height $footerDemoHeight
241
- background-color $inputDemoBgColor
242
- &__content
243
- padding $demoPadding
244
- overflow auto
245
- max-height 40rem
246
- .demo--localities--uk &
247
- max-height 49rem
248
- .demo--localities--fr &
249
- max-height 33rem
250
- &--address
251
- &--localitiesaddress
252
- &__formcontainer
253
- position relative
254
-
255
- &--address
256
- &__formcontainer
257
- .input
258
- &__label
259
- margin-bottom .4rem
260
- &__line
261
- margin-bottom 1rem
262
- &--localities--uk
263
- &--localities--fr
264
- &__formcontainer
265
- mbib(1.6)
266
- position relative
267
- .input__label
268
- font-weight 600
269
- .overlay
270
- position absolute
271
- top 0
272
- left 0
273
- z-index 10
274
- width 100%
275
- height 100%
276
- background-color $light70
107
+ input
108
+ &:not([type=button]):not([type=checkbox]):not([type=radio]):not([type=textarea])
109
+ inputFont()
110
+ br($demoBr)
111
+ background-color $inputDemoBgColor !important
112
+ border-color $inputDemoBorderColor
113
+ font-size $inputFontSizeDemo !important
114
+ height $inputDemoHeight
115
+ padding 0 1rem 0 1rem
116
+ .mbi
117
+ mbi(.6)
118
+ .input
119
+ &__label
120
+ inputFont()
121
+ font-size $inputFontSizeDemo !important
122
+ .select
123
+ .asyncselect
124
+ &__control
125
+ inputFont()
126
+ font-size $inputFontSizeDemo !important
127
+ border-radius $demoBr !important
128
+ background-color $inputDemoBgColor !important
129
+ min-height $inputDemoHeight !important
130
+ height auto !important
131
+ &:not(.select__control--is-focused):not(.asyncselect__control--is-focused)
132
+ border-color $inputDemoBorderColor !important
133
+ .css-g1d714-ValueContainer
134
+ .css-tlfecz-indicatorContainer
135
+ padding 0
136
+ .css-g1d714-ValueContainer
137
+ height 100%
138
+ .css-tlfecz-indicatorContainer
139
+ cursor pointer
140
+ input
141
+ &:not([type=button]):not([type=checkbox]):not([type=radio]):not([type=textarea])
142
+ &.select
143
+ &.asyncselect
144
+ &__input
145
+ background-color unset !important
146
+ height auto !important
147
+ &__placeholder
148
+ color $inputDemoPlaceholderColor
149
+ &__dropdown-indicator
150
+ &__clear-indicator
151
+ padding 0
152
+ &__value-container
153
+ padding-left .6rem !important
154
+ &__indicator
155
+ padding-left .5rem !important
156
+ padding-right .5rem !important
157
+ svg
158
+ fill $activeColor
159
+ &__indicator-separator
160
+ background-color $activeColor
161
+ &__multi-value
162
+ background-color $activeColorDark !important
163
+ &__label
164
+ inputFont() !important
165
+ height 2.1rem
166
+ line-height 1.1rem
167
+ font-size $inputFontSizeDemo - .1 !important
168
+ &__remove
169
+ padding .2rem !important
170
+
171
+ .flag
172
+ width 1.6rem
173
+ height 1.1rem
174
+ &__option
175
+ padding .6rem
176
+ .flag
177
+ margin 0 .6rem 0 0
178
+ &--is-selected
179
+ color $light !important
180
+ background-color #819cb9 !important
181
+ &.select__option--is-focused
182
+ color $light !important
183
+ background-color #819cb9 !important
184
+ &--is-focused:not(.select__option--is-selected)
185
+ background-color #cddbeb !important
186
+ color $secondary !important
187
+
188
+ &__filters
189
+ .btn
190
+ br(.2)
191
+ font-size $inputFontSizeDemo !important
192
+ line-height 2.2rem
193
+ padding 0 .8rem
194
+ height $inputDemoHeight
195
+ inputFont()
196
+ border-color $inputDemoBorderColor
197
+ .active
198
+ &--primary
199
+ background-color $activeColor
200
+ border-color $activeColor
201
+ &--group
202
+ height 2.8rem
203
+ &-container
204
+ color $inputDemoBgColor
205
+ .btn
206
+ padding 0 .8rem
207
+ &:first-child
208
+ border-radius 2rem 0 0 2rem
209
+ &:last-child
210
+ border-radius 0 2rem 2rem 0
211
+ &--light
212
+ .btn.active
213
+ background-color $activeColorDark
214
+ border-color $activeColorDark
215
+ color $inputDemoBgColor
216
+ &:hover
217
+ background-color $activeColorDark
218
+ &.language
219
+ &.transportation
220
+ mbi(.6)
221
+ .btn
222
+ border-radius .3rem !important
223
+ border 0
224
+ height 2.2rem
225
+ padding .4rem
226
+ &.active
227
+ background-color $light
228
+ box-shadow 0 0 .1rem .1rem $activeColorDark
229
+ .flag
230
+ width 2.4rem
231
+ height 1.6rem
232
+ &.transportation
233
+ .btn
234
+ height 2.8rem
235
+ img
236
+ max-width 2.4rem
237
+ &__code
238
+ .tab
239
+ &__header
240
+ height $footerDemoHeight
241
+ background-color $inputDemoBgColor
242
+ &__content
243
+ padding $demoPadding
244
+ overflow auto
245
+ max-height 40rem
246
+ .demo--localities--uk &
247
+ max-height 49rem
248
+ .demo--localities--fr &
249
+ max-height 33rem
250
+ &--address
251
+ &--localitiesaddress
252
+ &__formcontainer
253
+ position relative
254
+
255
+ &--address
256
+ &__formcontainer
257
+ .input
258
+ &__label
259
+ margin-bottom .4rem
260
+ &__line
261
+ margin-bottom 1rem
262
+ &--localities--uk
263
+ &--localities--fr
264
+ &__formcontainer
265
+ mbib(1.6)
266
+ position relative
267
+ .input__label
268
+ font-weight 600
269
+ .overlay
270
+ position absolute
271
+ top 0
272
+ left 0
273
+ z-index 10
274
+ width 100%
275
+ height 100%
276
+ background-color $light70
277
277
  @media screen and (max-width 769px)
278
- .demo__showcase
279
- max-height 100%
280
- min-height auto
278
+ .demo__showcase
279
+ max-height 100%
280
+ min-height auto
281
281
  @media screen and (max-width 696px)
282
- .demo
283
- &__data
284
- &__showcase
285
- flex-direction column
286
- max-height 100%
287
- &__results
288
- &__filters
289
- width auto
290
- border-bottom .1rem solid rgba($secondary, .1)
291
- border-right 0
292
- &__map
293
- height 32rem
294
- .demo--merchant &
295
- height auto
282
+ .demo
283
+ &__data
284
+ &__showcase
285
+ flex-direction column
286
+ max-height 100%
287
+ &__results
288
+ &__filters
289
+ width auto
290
+ border-bottom .1rem solid rgba($secondary, .1)
291
+ border-right 0
292
+ &__map
293
+ height 32rem
294
+ .demo--merchant &
295
+ height auto
@@ -1,6 +1,7 @@
1
1
  import React from 'react';
2
2
  import UseCase from './UseCase';
3
3
  import Icon from '../Icon/Icon';
4
+ import Button from '../Button/Button';
4
5
  import { tr } from '../utils/locale';
5
6
 
6
7
  const Story = {
@@ -14,9 +15,15 @@ const Template = () => (
14
15
  <div className="mbib flex-column">
15
16
  <UseCase isSelectable useCaseStory="addressAutocomplete">
16
17
  <div className="use-case__header">Store Locator</div>
17
- <div className="use-case__body">Store Locator</div>
18
+ <div className="use-case__body">
19
+ Help your visitors searching for your stores and increase your store footfall
20
+ </div>
18
21
  <div className="use-case__footer">
19
- <h4 className="title">Products :</h4>
22
+ <div className="use-case__product-item ready">
23
+ <Icon icon="big-commerce" />
24
+ <span className="use-case__product-item__name">{tr('BigCommerce ready')}</span>
25
+ </div>
26
+ <span className="title">Products :</span>
20
27
  <UseCase.Footer
21
28
  products={[
22
29
  { id: 'INDOOR', name: 'Indoor' },
@@ -27,10 +34,9 @@ const Template = () => (
27
34
  { id: 'ADDRESS', name: 'Address' },
28
35
  ]}
29
36
  />
30
- <div className="use-case__product-item ready">
31
- <Icon icon="big-commerce" />
32
- <span className="use-case__product-item__name">{tr('BigCommerce ready')}</span>
33
- </div>
37
+ </div>
38
+ <div className="use-case__cta">
39
+ <Button label={tr('Create a project')} />
34
40
  </div>
35
41
  </UseCase>
36
42
  </div>
@@ -1,6 +1,8 @@
1
1
  .use-case
2
2
  box()
3
- width 76rem
3
+ width 100%
4
+ max-width 96rem
5
+ margin 0 auto 4rem auto
4
6
  transition .2s all
5
7
  display flex
6
8
  overflow hidden
@@ -16,12 +18,14 @@
16
18
  &:hover
17
19
  border .1rem solid $success2
18
20
  &__image
19
- min-width 46rem
21
+ min-height 40rem
22
+ min-width 60rem
20
23
  background-size cover
21
24
  background-repeat no-repeat
22
25
  background-position center
23
26
  &__content
24
- height 100%
27
+ height auto
28
+ padding 3rem
25
29
  padding 2rem 2.4rem
26
30
  display flex
27
31
  flex-direction column
@@ -50,15 +54,17 @@
50
54
  .use-case__image
51
55
  background-image url('../../images/usecases/indoor-mapping.png')
52
56
  &__header
53
- text-align center
54
57
  font-size $title
58
+ font-weight 600
55
59
  margin-bottom 2rem
56
60
  &__body
57
- position inherit
61
+ font-size $title4
58
62
  margin-bottom 2rem
59
63
  &__footer
60
64
  flex-grow 1
61
- position relative
65
+ display flex
66
+ align-items flex-start
67
+ flex-direction column
62
68
  &__cta
63
69
  margin 2rem 0 0 0
64
70
  &__product-item
@@ -74,9 +80,10 @@
74
80
  font-weight 600
75
81
  .title
76
82
  margin-bottom 1rem
77
- font-weight 600
83
+ color $dark30
84
+ font-size $fontSizeSmall - .1
78
85
  .ready
79
86
  box()
80
87
  background-color $light
81
88
  padding .4rem 1rem
82
- margin 0 0 2rem 0
89
+ margin 0 0 4rem 0
Binary file