@woosmap/ui 3.144.0 → 3.145.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@woosmap/ui",
-  "version": "3.144.0",
+  "version": "3.145.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/WebGeoServices/ui.git"

package/src/components/Card/Card.js

@@ -13,6 +13,11 @@ import addressImg from '../../images/products/product-address.png';
 import mapImg from '../../images/products/product-map.png';
 import trafficImg from '../../images/products/product-traffic.png';
 import merchantImg from '../../images/products/product-merchant.png';
+import indoorMappingImg from '../../images/products/product-indoor-mapping.png';
+import indoorSearchImg from '../../images/products/product-indoor-search.png';
+import indoorDistanceImg from '../../images/products/product-indoor-distance.png';
+import indoorDatabaseImg from '../../images/products/product-indoor-database.png';
+
 import localitiesImgSq from '../../images/products/product-localities-sq.png';
 import localitiesUkImgSq from '../../images/products/product-localities-uk-sq.png';
 import geolocationImgSq from '../../images/products/product-geolocation-sq.png';
@@ -22,6 +27,10 @@ import addressImgSq from '../../images/products/product-address-sq.png';
 import mapImgSq from '../../images/products/product-map-sq.png';
 import trafficImgSq from '../../images/products/product-traffic-sq.png';
 import merchantImgSq from '../../images/products/product-merchant-sq.png';
+import indoorMappingImgSq from '../../images/products/product-indoor-mapping-sq.png';
+import indoorSearchImgSq from '../../images/products/product-indoor-search-sq.png';
+import indoorDistanceImgSq from '../../images/products/product-indoor-distance-sq.png';
+import indoorDatabaseImgSq from '../../images/products/product-indoor-database-sq.png';
 
 const productImg = {
     LOCALITIES: localitiesImg,
@@ -33,6 +42,10 @@ const productImg = {
     MAP: mapImg,
     TRAFFIC: trafficImg,
     MERCHANTS: merchantImg,
+    INDOOR_MAPPING: indoorMappingImg,
+    INDOOR_SEARCH: indoorSearchImg,
+    INDOOR_DISTANCE: indoorDistanceImg,
+    INDOOR_DATABASE: indoorDatabaseImg,
 };
 const productImgSq = {
     LOCALITIES: localitiesImgSq,
@@ -44,6 +57,10 @@ const productImgSq = {
     MAP: mapImgSq,
     TRAFFIC: trafficImgSq,
     MERCHANTS: merchantImgSq,
+    INDOOR_MAPPING: indoorMappingImgSq,
+    INDOOR_SEARCH: indoorSearchImgSq,
+    INDOOR_DISTANCE: indoorDistanceImgSq,
+    INDOOR_DATABASE: indoorDatabaseImgSq,
 };
 
 class Header extends Component {
@@ -91,6 +108,28 @@ Footer.propTypes = {
     children: PropTypes.node.isRequired,
 };
 
+class Aside extends Component {
+    render() {
+        const { children, isGreyBg, isSmall, ...rest } = this.props;
+        const greyClass = isGreyBg ? 'card__aside--grey' : null;
+        const smallClass = isSmall ? 'card__aside--small' : null;
+        return (
+            <div className={cl('card__aside', greyClass, smallClass)} {...rest}>
+                {children}
+            </div>
+        );
+    }
+}
+
+Aside.propTypes = {
+    children: PropTypes.node.isRequired,
+    isGreyBg: PropTypes.bool,
+    isSmall: PropTypes.bool,
+};
+Aside.defaultProps = {
+    isGreyBg: false,
+    isSmall: false,
+};
 class Card extends Component {
     render() {
         const {
@@ -107,6 +146,8 @@ class Card extends Component {
             size,
             testId,
             isNew,
+            orientation,
+            asideContent,
             ...rest
         } = this.props;
 
@@ -125,12 +166,30 @@ class Card extends Component {
             default:
                 imgSize = productImg[product];
         }
+        const cardContent = (
+            <>
+                <div className={itemClass}>
+                    {useIcon ? (
+                        <Icon icon={product.toLowerCase()} size={iconSize} alt={product} />
+                    ) : (
+                        <img className="card__img" src={imgSize} alt={product} />
+                    )}
+                    {isNew && !isList ? <div className="card__new-label">{tr('New')}</div> : null}
+                </div>
+                <div className="card__content">
+                    {isNew && isList ? <div className="card__new-label">{tr('New')}</div> : null}
+                    {children}
+                </div>
+            </>
+        );
         return (
             <div
                 role="button"
                 className={cl(
                     'card',
+                    `card--${orientation}`,
                     `card--${size}`,
+                    { 'card--aside': asideContent },
                     { 'card--no-border': noBorder },
                     { 'card--clickable': isClickable },
                     `card--${product.toLowerCase()}`,
@@ -144,31 +203,29 @@ class Card extends Component {
                 tabIndex="0"
                 data-testid={testId}
             >
-                <div className={itemClass}>
-                    {useIcon ? (
-                        <Icon icon={product.toLowerCase()} size={iconSize} alt={product} />
-                    ) : (
-                        <img className="card__img" src={imgSize} alt={product} />
-                    )}
-                    {isNew && !isList ? <div className="card__new-label">{tr('New')}</div> : null}
-                </div>
-                <div className="card__content">
-                    {isNew && isList ? <div className="card__new-label">{tr('New')}</div> : null}
-                    {children}
-                </div>
+                {asideContent ? (
+                    <>
+                        <div className="card__wrapper">{cardContent}</div>
+                        {asideContent}
+                    </>
+                ) : (
+                    cardContent
+                )}
             </div>
         );
     }
 }
 
 Card.defaultProps = {
+    asideContent: null,
     size: 'normal',
+    orientation: 'horizontal',
     useIcon: false,
     isList: false,
     className: null,
     active: false,
     onClick: null,
-    product: 'LOCALITIES',
+    product: null,
     iconSize: 38,
     isClickable: false,
     noBorder: false,
@@ -177,7 +234,9 @@ Card.defaultProps = {
 };
 
 Card.propTypes = {
+    asideContent: PropTypes.node,
     size: PropTypes.oneOf(['small', 'large', 'normal']),
+    orientation: PropTypes.oneOf(['horizontal', 'vertical']),
     testId: PropTypes.string,
     children: PropTypes.node.isRequired,
     useIcon: PropTypes.bool,
@@ -196,6 +255,10 @@ Card.propTypes = {
         'TRAFFIC',
         'MERCHANTS',
         'LOCALITIES',
+        'INDOOR_MAPPING',
+        'INDOOR_SEARCH',
+        'INDOOR_DISTANCE',
+        'INDOOR_DATABASE',
     ]),
     iconSize: PropTypes.number,
     isClickable: PropTypes.bool,
@@ -207,4 +270,5 @@ export default Object.assign(Card, {
     Header,
     Body,
     Footer,
+    Aside,
 });

package/src/components/Card/Card.stories.js

@@ -1,8 +1,12 @@
 import React from 'react';
 import Card from './Card';
+import Button from '../Button/Button';
+import Switch from '../Switch/Switch';
 import Label from '../Label/Label';
 import Tooltip from '../Tooltip/Tooltip';
 import SimpleCard from './SimpleCard';
+import mapImgSq from '../../images/products/product-map-sq.png';
+import indoorDatabaseImgSq from '../../images/products/product-indoor-database-sq.png';
 
 const Story = {
     title: 'base/Card',
@@ -10,29 +14,64 @@ const Story = {
 };
 
 export default Story;
+const renderAsideContent = () => (
+    <>
+        <Card.Aside isGreyBg isSmall>
+            <div className="card__aside__title">Plugged to</div>
+            <div className="card__aside__body">
+                <img className="card__aside__body__image" src={indoorDatabaseImgSq} alt="Database API" />
+                <span className="card__aside__body__title">Indoor Database API</span>
+            </div>
+        </Card.Aside>
+        <Card.Aside>
+            <div className="card__aside__title">Work with</div>
+            <div className="card__aside__body">
+                <img className="card__aside__body__image" src={mapImgSq} alt="Map API" />
+                <span className="card__aside__body__title">Map API</span>
+            </div>
+            <div className="card__aside__footer">Will be atomatically activated</div>
+        </Card.Aside>
+    </>
+);
 
 const Template = () => (
     <div className="flex-column mbib--large">
-        <Card isClickable product="GEOLOCATION">
+        <Card asideContent={renderAsideContent()} orientation="vertical" size="small" product="INDOOR_MAPPING">
             <Card.Header>
-                <h4 className="card__header__title">My header</h4>
+                <h4 className="card__header__title">Geolocation API</h4>
             </Card.Header>
             <Card.Body>
-                <p className="card__body__desc">My content</p>
+                <p className="card__body__desc">
+                    A dual-function API for automated location services : App and website background customisation and
+                    list of stores nearby. Automatically retrieve and analyse your user location in your mobile
+                    application or on your website to personalise it, and list your nearby points of sale. Propose the
+                    suitable country, currency or language, catchment area, or initialise your map display around the
+                    end user and retrieve your own Points of Interest, with less clicks.
+                </p>
+                <Button type="link-primary" label="Discover" />
             </Card.Body>
             <Card.Footer>
-                <span className="btn btn--link-primary">Discover</span>
+                <Switch text="Activate" />
             </Card.Footer>
         </Card>
-        <Card isClickable isList isNew size="small" product="LOCALITIES">
+        <Card orientation="vertical" size="large" product="TRAFFIC">
             <Card.Header>
-                <h4 className="card__header__title">My header</h4>
+                <h4 className="card__header__title">Traffic API</h4>
+                <div className="card__status">
+                    <div className="badge badge--active badge--small" />
+                    <span className="card__status__label">Activated</span>
+                    <Button type="link-flex" label="99 groups" />
+                </div>
             </Card.Header>
             <Card.Body>
-                <p className="card__body__desc">My content</p>
+                <p className="card__body__desc">
+                    The Woosmap Traffic API is a service that provides travel distances and durations with traffic.
+                    Compared to the Woosmap Distance API this API uses traffic information when returning duration
+                    times.
+                </p>
             </Card.Body>
             <Card.Footer>
-                <span className="btn btn--link-primary">Discover</span>
+                <Button label="Discover" />
             </Card.Footer>
         </Card>
     </div>

package/src/components/Card/Card.styl

@@ -20,6 +20,18 @@
 	&__img
 		display block
 		br(1)
+	&__status
+		display flex
+		align-items center
+		margin-top .4rem
+		mbi(.4)
+		&__label
+			color $secondary60
+		.badge
+			&--small
+				margin-right .6rem
+		.btn
+			color $secondary60
 	&--normal
 		.card
 			&__img
@@ -52,6 +64,88 @@
 			border .1rem solid $secondary40
 	&--no-border
 		border 0
+	&--vertical
+		&.card--large
+			br(1)
+			flex-direction column
+			width 26rem
+			.card
+				&__img
+					border-radius .9rem .9rem 0 0
+					max-width 100%
+					width 100%
+				&__content
+					padding-bottom 2rem
+				&__header
+					&__title
+						line-height 2.6rem
+						font-weight 600
+				&__body
+					&__desc
+						margin-bottom 1rem
+		&.card--small
+			flex-direction row
+			width 26rem
+			&.card--aside
+				flex-direction column
+			.card
+				&__img
+					br()
+					sq(5)
+					margin 1.4rem
+				&__content
+					mbib(1.2)
+					padding 0
+					margin 1.4rem 1.4rem 1.4rem 0
+				&__header
+					&__title
+						font-size 1.6rem
+						line-height 1
+						font-weight 600
+				&__body
+					mbib(.6)
+				&__footer
+					padding-top 1rem
+				&__aside
+					padding 1.4rem
+					font-size $fontSizeSmall
+					&:not(.card__aside--small)
+						mbib(1.1)
+					&--grey
+						background-color $dark3
+					&__body
+						mbi(1.4)
+						display flex
+						align-items center
+						&__image
+							sq(3)
+							br()
+						&__title
+							font-weight 600
+							font-size $fontSize
+					&__footer
+						color $dark40
+					&--small
+						mbi(1)
+						display flex
+						align-items center
+						font-size $fontSizeSmall
+						.card__aside
+							&__body
+								mbi(1)
+								&__image
+									sq(2.2)
+									br(50)
+								&__title
+									font-size $fontSizeSmall
+
+
+
+	&__wrapper
+		display flex
+		padding-bottom 1rem
+	&__aside
+		border-top .1rem solid $borderColor
 	&.active
 		cursor default
 		border-color $secondary60

package/src/styles/console/badge.styl

@@ -0,0 +1,39 @@
+.badge
+	br(50)
+	sq(1.4)
+	margin-right 1.4rem
+	flex-shrink 0
+	background-color $secondary20
+	&--line
+		br()
+		width 2.6rem
+		height .4rem
+	&--small
+		sq(1)
+		margin-right .6rem
+	&--active
+		background $success2
+	&--localities
+		background-color $localities
+	&--geolocation
+		background-color $geolocation
+	&--distance
+		background-color $distance
+	&--stores
+		background-color $stores
+	&--address
+		background-color $address
+	&--map
+		background-color $map
+	&--merchant
+		background-color $merchant
+	&--traffic
+		background-color $traffic
+	&--indoor-mapping
+		background-color $indoorMapping
+	&--indoor-search
+		background-color $indoorSearch
+	&--indoor-distance
+		background-color $indoorDistance
+	&--indoor-database
+		background-color $indoorDatabase

package/src/styles/console/colors.styl

@@ -398,7 +398,23 @@ $mapping = #B9715A
 $mapping10 = rgba($mapping, .1)
 $mappingDark = #96503A
 
-
 $showcases = #68668E
 $showcases10 = rgba($showcases, .1)
 $showcasesDark = #444177
+
+
+$indoorMapping = #B7B38B
+$indoorMapping10 = rgba($indoorMapping, .1)
+$indoorMappingDark = #918C66
+
+$indoorSearch = #DBC649
+$indoorSearch10 = rgba($indoorSearch, .1)
+$indoorSearchDark = #B7A134
+
+$indoorDistance = #E5AA53
+$indoorDistance10 = rgba($indoorDistance, .1)
+$indoorDistanceDark = #BF873C
+
+$indoorDatabase = #A09B8A
+$indoorDatabase10 = rgba($indoorDatabase, .1)
+$indoorDatabaseDark = #7C7663

package/src/styles/style-console.styl

@@ -16,6 +16,7 @@
 @import "../components/**/*.styl"
 
 // Console override
+@import "./console/badge.styl"
 @import "./console/button.styl"
 @import "./console/input.styl"
 @import "./console/select.styl"

package/src/styles/website/colors.styl

@@ -339,3 +339,20 @@ $showcasesDark = #444177
 $indoor = #B7B38B
 $indoor10 = rgba($indoor, .1)
 $indoorDark = #77735A
+
+
+$indoorMapping = #B7B38B
+$indoorMapping10 = rgba($indoorMapping, .1)
+$indoorMappingDark = #918C66
+
+$indoorSearch = #DBC649
+$indoorSearch10 = rgba($indoorSearch, .1)
+$indoorSearchDark = #B7A134
+
+$indoorDistance = #E5AA53
+$indoorDistance10 = rgba($indoorDistance, .1)
+$indoorDistanceDark = #BF873C
+
+$indoorDatabase = #A09B8A
+$indoorDatabase10 = rgba($indoorDatabase, .1)
+$indoorDatabaseDark = #7C7663

package/src/styles/website/dropdown.styl

@@ -62,6 +62,16 @@
 								background $mappingDark !important
 							&.showcases
 								background $showcasesDark !important
+							&.indoor
+								background $indoorDark !important
+							&.indoor-mapping
+								background $indoorMappingDark !important
+							&.indoor-search
+								background $indoorSearchDark !important
+							&.indoor-distance
+								background $indoorDistanceDark !important
+							&.indoor-database
+								background $indoorDatabaseDark !important
 						&__desc
 							color $dark !important
 			&__icon