@woosmap/ui 4.2.1 → 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.
- package/package.json +1 -1
- package/src/components/Demo/skeletondemo.styl +7 -3
- package/src/components/UseCase/UseCase.js +115 -0
- package/src/components/UseCase/UseCase.stories.js +24 -0
- package/src/components/UseCase/UseCase.styl +38 -0
- package/.idea/encodings.xml +0 -6
- package/.idea/inspectionProfiles/Project_Default.xml +0 -18
- package/.idea/inspectionProfiles/profiles_settings.xml +0 -6
- package/.idea/misc.xml +0 -4
- package/.idea/modules.xml +0 -8
- package/.idea/prettier.xml +0 -6
- package/.idea/ui.iml +0 -15
- package/.idea/vcs.xml +0 -6
package/package.json
CHANGED
|
@@ -137,9 +137,13 @@
|
|
|
137
137
|
height 100%
|
|
138
138
|
.css-tlfecz-indicatorContainer
|
|
139
139
|
cursor pointer
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
140
|
+
input
|
|
141
|
+
&:not([type=button]):not([type=checkbox]):not([type=radio]):not([type=textarea])
|
|
142
|
+
&.select
|
|
143
|
+
&.asyncselect
|
|
144
|
+
&__input
|
|
145
|
+
background-color unset !important
|
|
146
|
+
height auto !important
|
|
143
147
|
&__placeholder
|
|
144
148
|
color $inputDemoPlaceholderColor
|
|
145
149
|
&__dropdown-indicator
|
|
@@ -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
|
+
});
|
|
@@ -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 = {};
|
|
@@ -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
|
package/.idea/encodings.xml
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
<component name="InspectionProjectProfileManager">
|
|
2
|
-
<profile version="1.0">
|
|
3
|
-
<option name="myName" value="Project Default" />
|
|
4
|
-
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
|
|
5
|
-
<inspection_tool class="PyPackageRequirementsInspection" enabled="true" level="WARNING" enabled_by_default="true">
|
|
6
|
-
<option name="ignoredPackages">
|
|
7
|
-
<value>
|
|
8
|
-
<list size="4">
|
|
9
|
-
<item index="0" class="java.lang.String" itemvalue="Fabric" />
|
|
10
|
-
<item index="1" class="java.lang.String" itemvalue="PyYAML" />
|
|
11
|
-
<item index="2" class="java.lang.String" itemvalue="Jinja2" />
|
|
12
|
-
<item index="3" class="java.lang.String" itemvalue="github3.py" />
|
|
13
|
-
</list>
|
|
14
|
-
</value>
|
|
15
|
-
</option>
|
|
16
|
-
</inspection_tool>
|
|
17
|
-
</profile>
|
|
18
|
-
</component>
|
package/.idea/misc.xml
DELETED
package/.idea/modules.xml
DELETED
package/.idea/prettier.xml
DELETED
package/.idea/ui.iml
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
-
<module type="PYTHON_MODULE" version="4">
|
|
3
|
-
<component name="NewModuleRootManager">
|
|
4
|
-
<content url="file://$MODULE_DIR$" />
|
|
5
|
-
<orderEntry type="inheritedJdk" />
|
|
6
|
-
<orderEntry type="sourceFolder" forTests="false" />
|
|
7
|
-
</component>
|
|
8
|
-
<component name="TemplatesService">
|
|
9
|
-
<option name="TEMPLATE_FOLDERS">
|
|
10
|
-
<list>
|
|
11
|
-
<option value="$MODULE_DIR$/node_modules/@storybook/core/dist/server/templates" />
|
|
12
|
-
</list>
|
|
13
|
-
</option>
|
|
14
|
-
</component>
|
|
15
|
-
</module>
|