@woosmap/ui 3.149.0 → 3.151.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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/components/Card/Card.js +54 -14
  3. package/src/components/Card/Card.stories.js +2 -37
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@woosmap/ui",
3
- "version": "3.149.0",
3
+ "version": "3.151.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,13 +110,58 @@ Footer.propTypes = {
110
110
 
111
111
  class Aside extends Component {
112
112
  render() {
113
- const { children, isGreyBg, isSmall, isAddon, ...rest } = this.props;
114
- const greyClass = isGreyBg ? 'card__aside--grey' : null;
115
- const smallClass = isSmall ? 'card__aside--small' : null;
116
- const addonClass = isAddon ? 'card__aside--addon' : null;
113
+ const { product, mode, children } = 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
+ <div>{children}</div>
145
+ </div>
146
+ </li>
147
+ </ul>
148
+ </div>
149
+ );
150
+ }
117
151
  return (
118
- <div className={cl('card__aside', greyClass, smallClass, addonClass)} {...rest}>
119
- {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>
120
165
  </div>
121
166
  );
122
167
  }
@@ -124,15 +169,10 @@ class Aside extends Component {
124
169
 
125
170
  Aside.propTypes = {
126
171
  children: PropTypes.node.isRequired,
127
- isGreyBg: PropTypes.bool,
128
- isSmall: PropTypes.bool,
129
- isAddon: PropTypes.bool,
130
- };
131
- Aside.defaultProps = {
132
- isGreyBg: false,
133
- isSmall: false,
134
- isAddon: false,
172
+ product: PropTypes.object.isRequired,
173
+ mode: PropTypes.oneOf(['pluggedTo', 'addon', 'worksWith']).isRequired,
135
174
  };
175
+
136
176
  class Card extends Component {
137
177
  render() {
138
178
  const {
package/src/components/Card/Card.stories.js CHANGED
@@ -5,9 +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
- import localitiesUkImgSq from '../../images/products/product-localities-uk-sq.png';
11
8
 
12
9
  const Story = {
13
10
  title: 'base/Card',
@@ -17,40 +14,8 @@ const Story = {
17
14
  export default Story;
18
15
  const renderAsideContent = () => (
19
16
  <>
20
- <Card.Aside isAddon isGrey>
21
- <div className="card__aside__title">Addon</div>
22
- <ul className="card__aside__list">
23
- <li className="card__aside__list__item">
24
- <img className="card__aside__list__item__image" src={localitiesUkImgSq} alt="Localities UK API" />
25
- <div>
26
- <div className="card__aside__list__item__title mb--5">Localities UK API</div>
27
- <Switch text="Activate" />
28
- </div>
29
- </li>
30
- </ul>
31
- </Card.Aside>
32
- <Card.Aside isGreyBg isSmall>
33
- <div className="card__aside__title">Plugged to</div>
34
- <ul className="card__aside__list">
35
- <li className="card__aside__list__item">
36
- <img className="card__aside__list__item__image" src={indoorDatabaseImgSq} alt="Database API" />
37
- <span className="card__aside__list__item__title">Indoor Database API</span>
38
- </li>
39
- <li className="card__aside__list__item">
40
- <img className="card__aside__list__item__image" src={indoorDatabaseImgSq} alt="Database API" />
41
- <span className="card__aside__list__item__title">Indoor Database API</span>
42
- </li>
43
- </ul>
44
- </Card.Aside>
45
- <Card.Aside>
46
- <div className="card__aside__title">Work with</div>
47
- <ul className="card__aside__list">
48
- <li className="card__aside__list__item">
49
- <img className="card__aside__list__item__image" src={mapImgSq} alt="Map API" />
50
- <span className="card__aside__list__item__title">Map API</span>
51
- </li>
52
- </ul>
53
- <div className="card__aside__footer">Will be atomatically activated</div>
17
+ <Card.Aside mode="addon" product={{ id: 'INDOOR_MAP', name: 'Indoor Map' }}>
18
+ switch
54
19
  </Card.Aside>
55
20
  </>
56
21
  );