@woosmap/ui 3.158.0 → 3.160.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 +1 -1
- package/src/components/Card/Card.js +3 -3
- package/src/components/Card/Card.stories.js +1 -1
- package/src/components/Card/Card.styl +65 -6
- package/src/components/Card/Card.test.js +3 -3
- package/src/components/Label/Label.styl +1 -1
- package/src/components/Tooltip/Tooltip.styl +1 -1
- package/src/styles/console/badge.styl +1 -1
- package/src/styles/website/colors.styl +3 -3
package/package.json
CHANGED
|
@@ -139,9 +139,9 @@ class Aside extends Component {
|
|
|
139
139
|
src={productImgSq[product.id]}
|
|
140
140
|
alt={product.name}
|
|
141
141
|
/>
|
|
142
|
-
<div>
|
|
143
|
-
<div className="
|
|
144
|
-
<div>{children}</div>
|
|
142
|
+
<div className="card__aside__list__item__section">
|
|
143
|
+
<div className="card__aside__list__item__section__title">{product.name}</div>
|
|
144
|
+
<div className="card__aside__list__item__section__item">{children}</div>
|
|
145
145
|
</div>
|
|
146
146
|
</li>
|
|
147
147
|
</ul>
|
|
@@ -14,7 +14,7 @@ const Story = {
|
|
|
14
14
|
export default Story;
|
|
15
15
|
const renderAsideContent = () => (
|
|
16
16
|
<>
|
|
17
|
-
<Card.Aside mode="
|
|
17
|
+
<Card.Aside mode="pluggedTo" product={{ id: 'INDOOR_MAP', name: 'Indoor Map' }}>
|
|
18
18
|
switch
|
|
19
19
|
</Card.Aside>
|
|
20
20
|
</>
|
|
@@ -8,6 +8,61 @@
|
|
|
8
8
|
flex-shrink 0
|
|
9
9
|
background-color $light
|
|
10
10
|
border .1rem solid $secondary20
|
|
11
|
+
&--localities
|
|
12
|
+
.card
|
|
13
|
+
&__content
|
|
14
|
+
&__wrapper
|
|
15
|
+
background-color lighten($localities, 8%)
|
|
16
|
+
&--geolocation
|
|
17
|
+
&.card--vertical.card--small
|
|
18
|
+
.card
|
|
19
|
+
&__aside--grey
|
|
20
|
+
background-color lighten($geolocation , 90%)
|
|
21
|
+
&--distance
|
|
22
|
+
&.card--vertical.card--small
|
|
23
|
+
.card
|
|
24
|
+
&__aside--grey
|
|
25
|
+
background-color lighten($distance , 90%)
|
|
26
|
+
&--stores
|
|
27
|
+
&.card--vertical.card--small
|
|
28
|
+
.card
|
|
29
|
+
&__aside--grey
|
|
30
|
+
background-color lighten($search , 90%)
|
|
31
|
+
&--address
|
|
32
|
+
&.card--vertical.card--small
|
|
33
|
+
.card
|
|
34
|
+
&__aside--grey
|
|
35
|
+
background-color lighten($address, 90%)
|
|
36
|
+
&--map
|
|
37
|
+
&.card--vertical.card--small
|
|
38
|
+
.card
|
|
39
|
+
&__aside--grey
|
|
40
|
+
background-color lighten($map, 90%)
|
|
41
|
+
&--merchants
|
|
42
|
+
&.card--vertical.card--small
|
|
43
|
+
.card
|
|
44
|
+
&__aside--grey
|
|
45
|
+
background-color lighten($merchant, 90%)
|
|
46
|
+
&--traffic
|
|
47
|
+
&.card--vertical.card--small
|
|
48
|
+
.card
|
|
49
|
+
&__aside--grey
|
|
50
|
+
background-color lighten($traffic, 90%)
|
|
51
|
+
&--indoor_map
|
|
52
|
+
&.card--vertical.card--small
|
|
53
|
+
.card
|
|
54
|
+
&__aside--grey
|
|
55
|
+
background-color lighten($indoorMap, 90%)
|
|
56
|
+
&--indoor_search
|
|
57
|
+
&.card--vertical.card--small
|
|
58
|
+
.card
|
|
59
|
+
&__aside--grey
|
|
60
|
+
background-color lighten($indoorSearch, 90%)
|
|
61
|
+
&--indoor_distance
|
|
62
|
+
&.card--vertical.card--small
|
|
63
|
+
.card
|
|
64
|
+
&__aside--grey
|
|
65
|
+
background-color lighten($indoorDistance , 90%)
|
|
11
66
|
&--unique
|
|
12
67
|
display flex
|
|
13
68
|
align-items center
|
|
@@ -111,7 +166,8 @@
|
|
|
111
166
|
padding 1.4rem
|
|
112
167
|
font-size $fontSizeSmall
|
|
113
168
|
&--grey
|
|
114
|
-
|
|
169
|
+
&:last-child
|
|
170
|
+
border-radius 0 0 .5rem .5rem
|
|
115
171
|
&__list
|
|
116
172
|
mbib(.8)
|
|
117
173
|
display flex
|
|
@@ -123,9 +179,12 @@
|
|
|
123
179
|
&__image
|
|
124
180
|
sq(3)
|
|
125
181
|
br()
|
|
126
|
-
&
|
|
127
|
-
|
|
128
|
-
|
|
182
|
+
&__section
|
|
183
|
+
width 100%
|
|
184
|
+
&__title
|
|
185
|
+
font-weight 600
|
|
186
|
+
font-size $fontSize
|
|
187
|
+
margin-bottom .5rem
|
|
129
188
|
&__footer
|
|
130
189
|
color $dark40
|
|
131
190
|
&--small
|
|
@@ -164,7 +223,7 @@
|
|
|
164
223
|
background $distance10
|
|
165
224
|
&.card--stores
|
|
166
225
|
.card__content
|
|
167
|
-
background $
|
|
226
|
+
background $search10
|
|
168
227
|
&.card--address
|
|
169
228
|
.card__content
|
|
170
229
|
background $address10
|
|
@@ -196,7 +255,7 @@
|
|
|
196
255
|
.card--distance &
|
|
197
256
|
background $distance
|
|
198
257
|
.card--stores &
|
|
199
|
-
background $
|
|
258
|
+
background $search
|
|
200
259
|
.card--address &
|
|
201
260
|
background $address
|
|
202
261
|
.card--map &
|
|
@@ -10,7 +10,7 @@ it('renders a Card component ', () => {
|
|
|
10
10
|
<Card.Header>header</Card.Header>
|
|
11
11
|
<Card.Body>body</Card.Body>
|
|
12
12
|
<Card.Footer>footer</Card.Footer>
|
|
13
|
-
<Card.Aside>aside</Card.Aside>
|
|
13
|
+
<Card.Aside product={{ id: 'LOCALITIES', name: 'aside' }}>aside</Card.Aside>
|
|
14
14
|
</Card>
|
|
15
15
|
);
|
|
16
16
|
expect(getByTestId('card')).toHaveClass('card');
|
|
@@ -18,7 +18,7 @@ it('renders a Card component ', () => {
|
|
|
18
18
|
expect(screen.getByText('header')).toHaveClass('card__header');
|
|
19
19
|
expect(screen.getByText('body')).toHaveClass('card__body');
|
|
20
20
|
expect(screen.getByText('footer')).toHaveClass('card__footer');
|
|
21
|
-
expect(screen.getByText('aside')).toHaveClass('
|
|
21
|
+
expect(screen.getByText('aside')).toHaveClass('card__aside__list__item__title');
|
|
22
22
|
});
|
|
23
23
|
|
|
24
24
|
it('renders a Card component in list ', () => {
|
|
@@ -27,7 +27,7 @@ it('renders a Card component in list ', () => {
|
|
|
27
27
|
<Card.Header>header</Card.Header>
|
|
28
28
|
<Card.Body>body</Card.Body>
|
|
29
29
|
<Card.Footer>footer</Card.Footer>
|
|
30
|
-
<Card.Aside>aside</Card.Aside>
|
|
30
|
+
<Card.Aside product={{ id: 'LOCALITIES', name: 'Localities' }}>aside</Card.Aside>
|
|
31
31
|
</Card>
|
|
32
32
|
);
|
|
33
33
|
expect(container.firstChild).toHaveClass('card--list');
|
|
@@ -341,9 +341,9 @@ $indoor10 = rgba($indoor, .1)
|
|
|
341
341
|
$indoorDark = #77735A
|
|
342
342
|
|
|
343
343
|
|
|
344
|
-
$
|
|
345
|
-
$
|
|
346
|
-
$
|
|
344
|
+
$indoorMap = #B7B38B
|
|
345
|
+
$indoorMap10 = rgba($indoorMap, .1)
|
|
346
|
+
$indoorMapDark = #918C66
|
|
347
347
|
|
|
348
348
|
$indoorSearch = #DBC649
|
|
349
349
|
$indoorSearch10 = rgba($indoorSearch, .1)
|