@woosmap/ui 4.6.0 → 4.8.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.6.0",
3
+ "version": "4.8.0",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/WebGeoServices/ui.git"
@@ -35,20 +35,12 @@ const productImg = {
35
35
  class Footer extends Component {
36
36
  render() {
37
37
  const { products, ...rest } = this.props;
38
- return (
39
- <div className="use-case__product-item" {...rest}>
40
- {products.map((product) => (
41
- <>
42
- <img
43
- className="use-case__product-item__image"
44
- src={productImg[product.id]}
45
- alt={product.name}
46
- />
47
- <span className="use-case__product-item__name">{product.name}</span>
48
- </>
49
- ))}
38
+ return products.map((product) => (
39
+ <div className="use-case__product-item" {...rest} key={product.id}>
40
+ <img className="use-case__product-item__image" src={productImg[product.id]} alt={product.name} />
41
+ <span className="use-case__product-item__name">{product.name}</span>
50
42
  </div>
51
- );
43
+ ));
52
44
  }
53
45
  }
54
46
 
@@ -73,7 +65,12 @@ class UseCase extends Component {
73
65
  render() {
74
66
  const { className, children, isSelectable, testId, ...rest } = this.props;
75
67
  const { stateSelected } = this.state;
76
- const classes = cl('use-case', stateSelected ? 'use-case--selected' : false, className);
68
+ const classes = cl(
69
+ 'use-case',
70
+ { 'use-case--selectable': isSelectable },
71
+ { 'use-case--selected': stateSelected },
72
+ className
73
+ );
77
74
  return (
78
75
  <div
79
76
  className={classes}
@@ -2,16 +2,21 @@
2
2
  br()
3
3
  box()
4
4
  width 30rem
5
- height 100%
6
5
  transition .2s all
7
6
  display flex
8
7
  flex-direction column
9
- cursor pointer
10
8
  padding 2rem 2.4rem
9
+ &--selectable
10
+ cursor pointer
11
+ &:hover
12
+ border .1rem solid rgba($success2, .5)
13
+ background-color rgba($success2, .03)
11
14
  &--selected
12
15
  border .1rem solid $success2
13
16
  box-shadow 0 0 .6rem $success2
14
17
  background-color rgba($success2, .03)
18
+ &:hover
19
+ border .1rem solid $success2
15
20
  &__header
16
21
  text-align center
17
22
  font-size $title