@woosmap/ui 4.3.0 → 4.4.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 (4) hide show
  1. package/package.json +1 -1
  2. package/src/components/UseCase/UseCase.js +115 -0
  3. package/src/components/UseCase/UseCase.stories.js +24 -0
  4. package/src/components/UseCase/UseCase.styl +38 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@woosmap/ui",
3
- "version": "4.3.0",
3
+ "version": "4.4.0",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/WebGeoServices/ui.git"
package/src/components/UseCase/UseCase.js ADDED
@@ -0,0 +1,115 @@
1
+ // eslint-disable-next-line max-classes-per-file
2
+ import React, { Component } from 'react';
3
+ import cl from 'classnames';
4
+ import PropTypes from 'prop-types';
5
+
6
+ import localitiesImgSq from '../../images/products/product-localities-sq.png';
7
+ import localitiesUkImgSq from '../../images/products/product-localities-uk-sq.png';
8
+ import geolocationImgSq from '../../images/products/product-geolocation-sq.png';
9
+ import storesImgSq from '../../images/products/product-stores-sq.png';
10
+ import distanceImgSq from '../../images/products/product-distance-sq.png';
11
+ import addressImgSq from '../../images/products/product-address-sq.png';
12
+ import mapImgSq from '../../images/products/product-map-sq.png';
13
+ import trafficImgSq from '../../images/products/product-traffic-sq.png';
14
+ import merchantImgSq from '../../images/products/product-merchant-sq.png';
15
+ import indoorMapImgSq from '../../images/products/product-indoor-map-sq.png';
16
+ import indoorSearchImgSq from '../../images/products/product-indoor-search-sq.png';
17
+ import indoorDistanceImgSq from '../../images/products/product-indoor-distance-sq.png';
18
+ import indoorDatabaseImgSq from '../../images/products/product-indoor-database-sq.png';
19
+
20
+ const productImg = {
21
+ LOCALITIES: localitiesImgSq,
22
+ LOCALITIES_ADDRESS_UK: localitiesUkImgSq,
23
+ GEOLOCATION: geolocationImgSq,
24
+ STORES: storesImgSq,
25
+ DISTANCE: distanceImgSq,
26
+ ADDRESS: addressImgSq,
27
+ MAP: mapImgSq,
28
+ TRAFFIC: trafficImgSq,
29
+ MERCHANTS: merchantImgSq,
30
+ INDOOR_MAP: indoorMapImgSq,
31
+ INDOOR_SEARCH: indoorSearchImgSq,
32
+ INDOOR_DISTANCE: indoorDistanceImgSq,
33
+ INDOOR_DATABASE: indoorDatabaseImgSq,
34
+ };
35
+ class Footer extends Component {
36
+ render() {
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
+ ))}
50
+ </div>
51
+ );
52
+ }
53
+ }
54
+
55
+ Footer.propTypes = {
56
+ products: PropTypes.array.isRequired,
57
+ };
58
+
59
+ class UseCase extends Component {
60
+ constructor(props) {
61
+ super(props);
62
+ this.state = { stateSelected: false };
63
+ }
64
+
65
+ render() {
66
+ const { className, children, testId, ...rest } = this.props;
67
+ const { stateSelected } = this.state;
68
+ const classes = cl('use-case', stateSelected ? 'use-case--selected' : false, className);
69
+ return (
70
+ <div
71
+ className={classes}
72
+ role="button"
73
+ data-testid={testId}
74
+ onClick={() => this.setState({ stateSelected: !stateSelected })}
75
+ onKeyDown={() => {}}
76
+ tabIndex="-1"
77
+ {...rest}
78
+ >
79
+ {children}
80
+ </div>
81
+ );
82
+ }
83
+ }
84
+
85
+ UseCase.defaultProps = {
86
+ testId: 'usecase',
87
+ className: '',
88
+ product: PropTypes.oneOf([
89
+ 'LOCALITIES',
90
+ 'LOCALITIES_ADDRESS_UK',
91
+ 'GEOLOCATION',
92
+ 'STORES',
93
+ 'DISTANCE',
94
+ 'ADDRESS',
95
+ 'MAP',
96
+ 'TRAFFIC',
97
+ 'MERCHANTS',
98
+ 'LOCALITIES',
99
+ 'INDOOR_MAP',
100
+ 'INDOOR_SEARCH',
101
+ 'INDOOR_DISTANCE',
102
+ 'INDOOR_DATABASE',
103
+ ]),
104
+ };
105
+
106
+ UseCase.propTypes = {
107
+ children: PropTypes.node.isRequired,
108
+ testId: PropTypes.string,
109
+ className: PropTypes.string,
110
+ product: PropTypes.string,
111
+ };
112
+
113
+ export default Object.assign(UseCase, {
114
+ Footer,
115
+ });
package/src/components/UseCase/UseCase.stories.js ADDED
@@ -0,0 +1,24 @@
1
+ import React from 'react';
2
+ import UseCase from './UseCase';
3
+
4
+ const Story = {
5
+ title: 'base/UseCase',
6
+ component: UseCase,
7
+ };
8
+
9
+ export default Story;
10
+
11
+ const Template = () => (
12
+ <div className="mbib flex-column">
13
+ <UseCase>
14
+ <div className="use-case__header">Store Locator</div>
15
+ <div className="use-case__body">Store Locator</div>
16
+ <div className="use-case__footer">
17
+ <h4 className="title">Products :</h4>
18
+ <UseCase.Footer products={[{ id: 'LOCALITIES_ADDRESS_UK', name: 'Localisties UK' }]} />
19
+ </div>
20
+ </UseCase>
21
+ </div>
22
+ );
23
+ export const Default = Template.bind({});
24
+ Default.args = {};
package/src/components/UseCase/UseCase.styl ADDED
@@ -0,0 +1,38 @@
1
+ .use-case
2
+ br()
3
+ box()
4
+ width 30rem
5
+ height 100%
6
+ transition .2s all
7
+ display flex
8
+ flex-direction column
9
+ cursor pointer
10
+ padding 2rem 2.4rem
11
+ &--selected
12
+ border .1rem solid $success2
13
+ box-shadow 0 0 .6rem $success2
14
+ background-color rgba($success2, .03)
15
+ &__header
16
+ text-align center
17
+ font-size $title
18
+ margin-bottom 2rem
19
+ &__body
20
+ position inherit
21
+ height 100%
22
+ margin-bottom 2rem
23
+ &__footer
24
+ position relative
25
+ &__product-item
26
+ mbi()
27
+ display flex
28
+ align-items center
29
+ margin-bottom .6rem
30
+ &__image
31
+ br()
32
+ sq(2.4)
33
+ overflow hidden
34
+ &__name
35
+ font-weight 600
36
+ .title
37
+ margin-bottom 1rem
38
+ font-weight 600