@woosmap/ui 3.148.0 → 3.150.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 (5) hide show
  1. package/package.json +1 -1
  2. package/src/components/Card/Card.js +54 -12
  3. package/src/components/Card/Card.stories.js +1 -17
  4. package/src/components/Card/Card.styl +28 -24
  5. package/src/components/Switch/Switch.styl +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@woosmap/ui",
3
- "version": "3.148.0",
3
+ "version": "3.150.0",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/WebGeoServices/ui.git"
package/src/components/Card/Card.js CHANGED
@@ -110,26 +110,68 @@ Footer.propTypes = {
110
110
 
111
111
  class Aside extends Component {
112
112
  render() {
113
- const { children, isGreyBg, isSmall, ...rest } = this.props;
114
- const greyClass = isGreyBg ? 'card__aside--grey' : null;
115
- const smallClass = isSmall ? 'card__aside--small' : null;
113
+ const { product, mode } = this.props;
114
+ if (mode === 'pluggedto') {
115
+ return (
116
+ <div className="card__aside card__aside--small card__aside--grey">
117
+ <div className="card__aside__title">{tr('Plugged to')}</div>
118
+ <ul className="card__aside__list">
119
+ <li className="card__aside__list__item">
120
+ <img
121
+ className="card__aside__list__item__image"
122
+ src={productImg[product.id]}
123
+ alt={product.name}
124
+ />
125
+ <span className="card__aside__list__item__title">{product.name}</span>
126
+ </li>
127
+ </ul>
128
+ </div>
129
+ );
130
+ }
131
+ if (mode === 'addon') {
132
+ return (
133
+ <div className="card__aside card__aside--addon">
134
+ <div className="card__aside__title">{tr('Addon')}</div>
135
+ <ul className="card__aside__list">
136
+ <li className="card__aside__list__item">
137
+ <img
138
+ className="card__aside__list__item__image"
139
+ src={productImg[product.id]}
140
+ alt={product.name}
141
+ />
142
+ <div>
143
+ <div className="card__aside__list__item__title mb--5">{product.name}</div>
144
+ <siv>switch</siv>
145
+ </div>
146
+ </li>
147
+ </ul>
148
+ </div>
149
+ );
150
+ }
116
151
  return (
117
- <div className={cl('card__aside', greyClass, smallClass)} {...rest}>
118
- {children}
152
+ <div className="card__aside">
153
+ <div className="card__aside__title">{tr('Work with')}</div>
154
+ <ul className="card__aside__list">
155
+ <li className="card__aside__list__item">
156
+ <img
157
+ className="card__aside__list__item__image"
158
+ src={productImg[product.id]}
159
+ alt={product.name}
160
+ />
161
+ <span className="card__aside__list__item__title">{product.name}</span>
162
+ </li>
163
+ </ul>
164
+ <div className="card__aside__footer">Will be atomatically activated</div>
119
165
  </div>
120
166
  );
121
167
  }
122
168
  }
123
169
 
124
170
  Aside.propTypes = {
125
- children: PropTypes.node.isRequired,
126
- isGreyBg: PropTypes.bool,
127
- isSmall: PropTypes.bool,
128
- };
129
- Aside.defaultProps = {
130
- isGreyBg: false,
131
- isSmall: false,
171
+ product: PropTypes.object.isRequired,
172
+ mode: PropTypes.oneOf(['pluggedto', 'addon', 'workwith']).isRequired,
132
173
  };
174
+
133
175
  class Card extends Component {
134
176
  render() {
135
177
  const {
package/src/components/Card/Card.stories.js CHANGED
@@ -5,8 +5,6 @@ import Switch from '../Switch/Switch';
5
5
  import Label from '../Label/Label';
6
6
  import Tooltip from '../Tooltip/Tooltip';
7
7
  import SimpleCard from './SimpleCard';
8
- import mapImgSq from '../../images/products/product-map-sq.png';
9
- import indoorDatabaseImgSq from '../../images/products/product-indoor-database-sq.png';
10
8
 
11
9
  const Story = {
12
10
  title: 'base/Card',
@@ -16,21 +14,7 @@ const Story = {
16
14
  export default Story;
17
15
  const renderAsideContent = () => (
18
16
  <>
19
- <Card.Aside isGreyBg isSmall>
20
- <div className="card__aside__title">Plugged to</div>
21
- <div className="card__aside__body">
22
- <img className="card__aside__body__image" src={indoorDatabaseImgSq} alt="Database API" />
23
- <span className="card__aside__body__title">Indoor Database API</span>
24
- </div>
25
- </Card.Aside>
26
- <Card.Aside>
27
- <div className="card__aside__title">Work with</div>
28
- <div className="card__aside__body">
29
- <img className="card__aside__body__image" src={mapImgSq} alt="Map API" />
30
- <span className="card__aside__body__title">Map API</span>
31
- </div>
32
- <div className="card__aside__footer">Will be atomatically activated</div>
33
- </Card.Aside>
17
+ <Card.Aside mode="addon" product={{ id: 'INDOOR_MAP', name: 'Indoor Map' }} />
34
18
  </>
35
19
  );
36
20
 
package/src/components/Card/Card.styl CHANGED
@@ -96,7 +96,7 @@
96
96
  &__content
97
97
  mbib(1.2)
98
98
  padding 0
99
- margin 1.4rem 1.4rem 1.4rem 0
99
+ margin 2rem 1.4rem 2rem 0
100
100
  &__header
101
101
  &__title
102
102
  font-size 1.6rem
@@ -107,43 +107,47 @@
107
107
  &__footer
108
108
  padding-top 1rem
109
109
  &__aside
110
+ mbib(1.1)
110
111
  padding 1.4rem
111
112
  font-size $fontSizeSmall
112
- &:not(.card__aside--small)
113
- mbib(1.1)
114
113
  &--grey
115
114
  background-color $dark3
116
- &__body
117
- mbi(1.4)
115
+ &__list
116
+ mbib(.8)
118
117
  display flex
119
- align-items center
120
- &__image
121
- sq(3)
122
- br()
123
- &__title
124
- font-weight 600
125
- font-size $fontSize
118
+ flex-direction column
119
+ &__item
120
+ mbi(1.4)
121
+ display flex
122
+ align-items center
123
+ &__image
124
+ sq(3)
125
+ br()
126
+ &__title
127
+ font-weight 600
128
+ font-size $fontSize
126
129
  &__footer
127
130
  color $dark40
128
131
  &--small
129
- mbi(1)
130
- display flex
131
- align-items center
132
132
  font-size $fontSizeSmall
133
133
  .card__aside
134
- &__body
134
+ &__list
135
135
  mbi(1)
136
- &__image
137
- sq(2.2)
138
- br(50)
139
- &__title
140
- font-size $fontSizeSmall
141
-
142
-
136
+ &__item
137
+ &__image
138
+ sq(2.2)
139
+ br(50)
140
+ &__title
141
+ font-size $fontSizeSmall
142
+ &--addon
143
+ .card__aside
144
+ &__list
145
+ &__item
146
+ &__image
147
+ sq(4.2)
143
148
 
144
149
  &__wrapper
145
150
  display flex
146
- padding-bottom 1rem
147
151
  &__aside
148
152
  border-top .1rem solid $borderColor
149
153
  &.active
package/src/components/Switch/Switch.styl CHANGED
@@ -5,7 +5,7 @@
5
5
  &__container
6
6
  position relative
7
7
  margin-right 1rem
8
- width 3.8rem
8
+ width 3.4rem
9
9
  display inline-block
10
10
  vertical-align middle
11
11
  user-select none
@@ -66,7 +66,7 @@
66
66
  position absolute
67
67
  top 0
68
68
  bottom 0
69
- right 2rem
69
+ right 1.6rem
70
70
  transition all 0.3s ease-in 0s
71
71
  &__checkbox
72
72
  &:checked + .switch__label