@woosmap/ui 3.49.0 → 3.54.0

package/package.json

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

package/src/components/Demo/AddressDemo.js

@@ -2,17 +2,17 @@
 import React, { Component } from 'react';
 import axios from 'axios';
 import cl from 'classnames';
-import GoogleMapReact from 'google-map-react';
 import Demo from './SkeletonDemo';
-import AddressAutocomplete from '../Woosmap/AddressAutocomplete';
-import Marker from '../Map/Marker';
 import Constants from '../../Constants';
-import { viewpoint } from '../Map/drawOnMap';
+import { createWoosmapMap, WoosmapMapBoundingBox } from '../Map/drawOnMap';
 import Button from '../Button/Button';
 import ButtonGroup from '../Button/ButtonGroup';
 import CountrySelect from '../Select/CountrySelect';
 import { tr } from '../utils/locale';
 import Input from '../Input/Input';
+import Script from '../utils/Script';
+import markerIcon from '../../images/marker.png';
+import AddressAutocomplete from '../Woosmap/AddressAutocomplete';
 
 const languages = [
     { value: 'fr', label: 'French' },
@@ -49,6 +49,11 @@ export default class AddressDemo extends Component {
         this.requestGeocodeUrl = 'https://api.woosmap.com/address/geocode/json';
         this.inputRef = React.createRef();
         this.addressAutocompleteRef = React.createRef();
+        this.demoRef = React.createRef();
+    }
+
+    componentDidMount() {
+        this.displayMap();
     }
 
     componentWillUnmount() {
@@ -80,9 +85,9 @@ export default class AddressDemo extends Component {
                     };
                     if (usecase === 'geocode') {
                         // eslint-disable-next-line prefer-destructuring
-                        state.selectedLocality = response.data.results[0];
+                        state.selectedAddress = response.data.results[0];
                     }
-                    this.setState(state);
+                    this.setState(state, this.displayOnMap);
                 }
             })
             .catch((error) => {
@@ -107,12 +112,15 @@ export default class AddressDemo extends Component {
             })
             .then((response) => {
                 if (this.mounted) {
-                    this.setState({
-                        error: null,
-                        showDetails: true,
-                        response: response.data.result,
-                        selectedLocality: response.data.result,
-                    });
+                    this.setState(
+                        {
+                            error: null,
+                            showDetails: true,
+                            response: response.data.result,
+                            selectedAddress: response.data.result,
+                        },
+                        this.displayOnMap
+                    );
                 }
             })
             .catch((error) => {
@@ -122,12 +130,10 @@ export default class AddressDemo extends Component {
     };
 
     getRequestparams = () => {
-        const { input, geocodeInput, selectedLocality, language, countries, showDetails, usecase, geometry } =
-            this.state;
+        const { input, geocodeInput, language, countries, showDetails, usecase, geometry } = this.state;
         if (showDetails) {
             const detailsParam = {
                 key: Constants.woosmapKey,
-                public_id: selectedLocality.public_id,
             };
             if (geometry) {
                 detailsParam.fields = 'geometry';
@@ -154,14 +160,37 @@ export default class AddressDemo extends Component {
 
     displayOnMap = () => {
         const { selectedAddress } = this.state;
-        if (this.viewport) {
-            this.viewport.setMap(null);
-        }
-        if (this.map && selectedAddress) {
-            if (selectedAddress.viewpoint) {
-                this.viewport = viewpoint(this.map, selectedAddress.viewpoint);
-                this.map.fitBounds(selectedAddress.viewpoint.bounds, 10);
+
+        if (this.map && selectedAddress?.geometry.location) {
+            if (this.marker) {
+                this.marker.setMap(null);
+                this.marker = null;
+            }
+
+            if (this.overlay) {
+                this.overlay.setMap(null);
+                this.overlay = null;
+            }
+
+            this.marker = new window.woosmap.map.Marker({
+                icon: { url: markerIcon, scaledSize: { height: 46, width: 30 } },
+                position: selectedAddress.geometry.location,
+                map: this.map,
+            });
+
+            if (selectedAddress.geometry.viewport) {
+                const { northeast, southwest } = selectedAddress.geometry.viewport;
+                const bounds = {
+                    north: northeast.lat,
+                    east: northeast.lng,
+                    south: southwest.lat,
+                    west: southwest.lng,
+                };
+                this.overlay = new WoosmapMapBoundingBox(bounds);
+                this.overlay.setMap(this.map);
+                this.map.fitBounds(bounds, { top: 70, bottom: 70, left: 70, right: 70 });
             } else {
+                this.map.setCenter(selectedAddress.geometry.location);
                 this.map.setZoom(10);
             }
         }
@@ -171,7 +200,7 @@ export default class AddressDemo extends Component {
         this.setState(
             {
                 error: null,
-                selectedLocality: address,
+                selectedAddress: address,
             },
             this.requestAddress
         );
@@ -194,7 +223,7 @@ export default class AddressDemo extends Component {
                         key="autocomplete"
                         active={usecase === 'autocomplete'}
                         onClick={() => {
-                            this.setState({ usecase: 'autocomplete', selectedLocality: null, showDetails: false });
+                            this.setState({ usecase: 'autocomplete', selectedAddress: null, showDetails: false });
                         }}
                         label={tr('Autocomplete')}
                     />
@@ -203,7 +232,7 @@ export default class AddressDemo extends Component {
                         key="geocode"
                         active={usecase === 'geocode'}
                         onClick={() => {
-                            this.setState({ usecase: 'geocode', selectedLocality: null, showDetails: false });
+                            this.setState({ usecase: 'geocode', selectedAddress: null, showDetails: false });
                         }}
                         label={tr('Geocode')}
                     />
@@ -296,14 +325,14 @@ export default class AddressDemo extends Component {
     };
 
     renderAddress = () => {
-        const { selectedLocality, geometry } = this.state;
+        const { selectedAddress, geometry } = this.state;
         if (geometry) {
             return null;
         }
         let addressComponents = [];
-        const hasComponents = selectedLocality && selectedLocality.address_components;
+        const hasComponents = selectedAddress && selectedAddress.address_components;
         if (hasComponents) {
-            addressComponents = selectedLocality.address_components;
+            addressComponents = selectedAddress.address_components;
         }
         let shippingAddress = '';
         let shippingAddress2 = '';
@@ -393,29 +422,17 @@ export default class AddressDemo extends Component {
         );
     };
 
-    renderMap = () => {
-        const { selectedLocality } = this.state;
+    displayMap = () => {
+        if (this.timeoutMap) {
+            clearTimeout(this.timeoutMap);
+        }
 
-        const location =
-            selectedLocality && selectedLocality.geometry
-                ? selectedLocality.geometry.location
-                : { lat: 48.863350992156306, lng: 2.3484066674237796 };
-        const marker =
-            selectedLocality && selectedLocality.geometry ? <Marker lat={location.lat} lng={location.lng} /> : null;
-        return (
-            <GoogleMapReact
-                defaultZoom={10}
-                center={[location.lat, location.lng]}
-                bootstrapURLKeys={{ key: Constants.gmapKey, libraries: ['geometry', 'places'] }}
-                yesIWantToUseGoogleMapApiInternals
-                onGoogleApiLoaded={({ map }) => {
-                    this.map = map;
-                    this.displayOnMap();
-                }}
-            >
-                {marker}
-            </GoogleMapReact>
-        );
+        if (window.woosmap && window.woosmap.map && this.demoRef.current) {
+            window.woosmap.map.config.setApiKey(Constants.woosmapKey);
+            this.map = createWoosmapMap(this.demoRef.current.getMap());
+        } else {
+            this.timeoutMap = setTimeout(this.displayMap, 300);
+        }
     };
 
     render() {
@@ -429,19 +446,23 @@ export default class AddressDemo extends Component {
             }
         }
         return (
-            <Demo
-                noheader
-                id="address-demo"
-                className="demo--address"
-                footerFilters={this.renderFooterFilters()}
-                headerFilters={this.renderHeaderFilters()}
-                request={request}
-                params={this.getRequestparams()}
-                referer="http://localhost/"
-                response={error || response}
-                result={this.renderAddress()}
-                map={this.renderMap()}
-            />
+            <>
+                <Script url="https://sdk.woosmap.com/map/map.js" />
+                <Demo
+                    noheader
+                    id="address-demo"
+                    className="demo--address"
+                    footerFilters={this.renderFooterFilters()}
+                    headerFilters={this.renderHeaderFilters()}
+                    request={request}
+                    params={this.getRequestparams()}
+                    referer="http://localhost/"
+                    response={error || response}
+                    result={this.renderAddress()}
+                    ref={this.demoRef}
+                    withMap
+                />
+            </>
         );
     }
 }

package/src/components/Demo/MerchantDemo.styl

@@ -68,18 +68,17 @@
 					.merchant__mobile--details--dirty &
 						opacity 1
 				&__button
-					&.btn
-						sq(3)
-						position absolute
-						background-color transparent
-						left -.6rem
-						padding 0
-						display flex
-						align-items center
-						justify-content center
-						flex-shrink 0
-						&:hover
-							background-color $dark30
+					sq(3)
+					position absolute
+					background-color transparent
+					left -.6rem
+					padding 0
+					display flex
+					align-items center
+					justify-content center
+					flex-shrink 0
+					&:hover
+						background-color $dark30
 
 		&__section
 			padding 1.4rem 2rem

package/src/components/Tooltip/Tooltip.js

@@ -14,6 +14,7 @@ export default class Tooltip extends Component {
             noDelay && 'tooltipped-no-delay',
             wrap && 'tooltipped-multiline'
         );
+        delete rest.closeCb; // Avoid none DOM props
         return (
             <div aria-label={text} data-testid={testId} {...rest} className={classes}>
                 {children}

package/src/icons/indoor.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70"><rect width="70" height="70" fill="none"/><path d="M56.094,6.994H13.906A6.919,6.919,0,0,0,7,13.905V56.1a6.919,6.919,0,0,0,6.911,6.911H56.094A6.919,6.919,0,0,0,63.005,56.1V13.905A6.919,6.919,0,0,0,56.094,6.994ZM54.948,29.311c0,.019-.011.036-.011.056v6.609H42.9V29.311Zm1.978,0h4.079v6.665H56.937V29.367C56.937,29.347,56.927,29.33,56.926,29.311Zm4.079-15.406V27.311H51.386V14.9a1,1,0,0,0-2,0V27.311H41.9a1,1,0,0,0-1,1v8.665a1,1,0,0,0,1,1h19.1v7.363H41.9a1,1,0,0,0-1,1V61.006H29.235V40.938a1,1,0,0,0-1-1H8.995V28.794H23.908a1,1,0,0,0,1-1V8.994H34v8.9a1,1,0,0,0,1,1h6.33a1,1,0,0,0,1-1v-8.9H56.094A4.916,4.916,0,0,1,61.005,13.905ZM42.9,55.172h6.485v5.834H42.9Zm6.485-2H42.9V47.339h6.485ZM18.817,41.938h8.418v9.57H18.817ZM8.995,20.031H22.908v6.763H8.995Zm31.335-11V16.9H36V9.026ZM13.906,8.994h9v9.037H8.995V13.905A4.916,4.916,0,0,1,13.906,8.994ZM8.995,56.1V41.938h7.822v10.57a1,1,0,0,0,1,1h9.418v7.5H13.906A4.916,4.916,0,0,1,8.995,56.1Zm47.1,4.911H51.386V47.339h9.619V56.1A4.916,4.916,0,0,1,56.094,61.006Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70"><path d="M56.094 6.994H13.906A6.919 6.919 0 0 0 7 13.905V56.1a6.919 6.919 0 0 0 6.911 6.911h42.183a6.919 6.919 0 0 0 6.911-6.911V13.905a6.919 6.919 0 0 0-6.911-6.911Zm-1.146 22.317c0 .019-.011.036-.011.056v6.609H42.9v-6.665Zm1.978 0h4.079v6.665h-4.068v-6.609c0-.02-.01-.037-.011-.056Zm4.079-15.406v13.406h-9.619V14.9a1 1 0 0 0-2 0v12.411H41.9a1 1 0 0 0-1 1v8.665a1 1 0 0 0 1 1H61v7.363H41.9a1 1 0 0 0-1 1v14.667H29.235V40.938a1 1 0 0 0-1-1H8.995V28.794h14.913a1 1 0 0 0 1-1v-18.8H34v8.9a1 1 0 0 0 1 1h6.33a1 1 0 0 0 1-1v-8.9h13.764a4.916 4.916 0 0 1 4.911 4.911ZM42.9 55.172h6.485v5.834H42.9Zm6.485-2H42.9v-5.833h6.485ZM18.817 41.938h8.418v9.57h-8.418ZM8.995 20.031h13.913v6.763H8.995Zm31.335-11V16.9H36V9.026Zm-26.424-.037h9v9.037H8.995v-4.126a4.916 4.916 0 0 1 4.911-4.911ZM8.995 56.1V41.938h7.822v10.57a1 1 0 0 0 1 1h9.418v7.5H13.906A4.916 4.916 0 0 1 8.995 56.1Zm47.1 4.911h-4.709V47.339h9.619V56.1a4.916 4.916 0 0 1-4.911 4.906Z"/></svg>

package/src/icons/more.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.653 8.293c.688-.243.76-1.135.517-1.823s-1.136-.759-1.823-.516-.76 1.136-.517 1.823 1.136.759 1.823.516Zm0 4.877c.688-.244.76-1.136.517-1.823s-1.136-.76-1.823-.517-.76 1.136-.517 1.823 1.136.76 1.823.517Zm0 4.876c.688-.243.76-1.136.517-1.823s-1.136-.759-1.823-.516-.76 1.135-.517 1.823 1.136.759 1.823.516Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.653 8.293c.688-.243.76-1.135.517-1.823s-1.136-.759-1.823-.516-.76 1.136-.517 1.823 1.136.759 1.823.516ZM12.653 13.17c.688-.244.76-1.136.517-1.823s-1.136-.76-1.823-.517-.76 1.136-.517 1.823 1.136.76 1.823.517ZM12.653 18.046c.688-.243.76-1.136.517-1.823s-1.136-.759-1.823-.516-.76 1.135-.517 1.823 1.136.759 1.823.516Z"/></svg>

package/src/styles/console/MerchantDemo.styl

@@ -0,0 +1,210 @@
+.merchant
+	&__mobilewrapper
+		position relative
+		height 58.2rem
+		overflow hidden
+		flex-grow 1
+	&__mobilecontainer
+		position relative
+		height 100%
+		width 28rem
+		margin auto
+		&__title
+			text-align center
+			color $light
+			font-size 1.7rem
+			font-weight 600
+			margin 1rem 0 2rem 0
+	&__mobile
+		width 100%
+		height 52.9rem
+		background-color $light
+		br(2)
+		overflow hidden
+		&--dirty
+		&--details--dirty
+			.merchant__mobile__header
+				background #666767
+		&--clean
+		&--details
+			.merchant__mobile__header
+				background #4F70FF
+		&--details
+			height 52.9rem
+		&__header
+			padding 1.6rem
+			color #fff
+			text-transform uppercase
+			font-size 1.7rem
+			font-weight 600
+			&__nav
+			&__icons
+				flexSpread()
+			&__icons
+				img
+					max-height 1.2rem
+			&__nav
+				margin-top 2rem
+				position relative
+				.merchant__mobile--details &
+				.merchant__mobile--details--dirty &
+					flexAxis()
+				&__avatar
+					max-width 3.2rem
+				&__back
+					max-width 1.4rem
+					opacity 0
+					.merchant__mobile--details &
+					.merchant__mobile--details--dirty &
+						opacity 1
+				&__button
+					position absolute
+					background-color transparent
+					left -1.2rem
+					&:hover
+						background-color $dark30
+
+		&__section
+			font-size 1.5rem
+			padding 1.4rem 2rem
+			height 100%
+			overflow auto
+			.merchant__mobile--details &
+				padding 0
+			.merchant__mobile--details--dirty &
+				border .1rem solid $dark20
+				background-color $dark3
+				margin 2rem
+				br(1)
+				height auto
+				overflow hidden
+			&__map
+				overflow hidden
+				height 20rem
+			&__no-map
+				height 6rem
+			&__date
+				color #C8C8C7
+				font-size 1.4rem
+				margin-bottom 1.6rem
+				.merchant__mobile--details &
+				.merchant__mobile--details--dirty &
+					text-align center
+					margin .4rem 0 0 0
+				.merchant__mobile--details--dirty &
+					margin 0 0 2rem 0
+			&__transaction
+				flexSpread()
+				br(1)
+				trans()
+				cursor pointer
+				height 6.2rem
+				padding .8rem
+				box-shadow 0 0 1rem $dark10
+				width 100%
+				margin-bottom 1.2rem
+				&:hover
+					background-color #666767
+					.merchant__mobile--clean &
+						background-color #4F70FF
+					.merchant__mobile__section__transaction
+						&__link
+							color $light
+						&__info
+							&__name
+								color $light
+							&__date
+								color $light50
+						&__price
+							color $light
+				&__link
+					color #999
+					margin 0 .6rem 0 1.4rem
+					img
+						max-width .7rem
+				&__info
+					width 100%
+					min-width 0
+					margin-right 1.2rem
+					.merchant__mobile--clean &
+						flexMiddle()
+					.merchant__mobile--details &
+						margin 0
+					&__address
+						padding 1rem 2rem
+						color#999
+						text-align center
+					&__logo
+						sq(4.6)
+						br(50)
+						position relative
+						margin-right 1.2rem
+						flex-shrink 0
+						.merchant__mobile--details &
+							width 100%
+							height 5rem
+						img
+							ellipsis()
+							br(50)
+							sq(4.6)
+							background #fff
+							border .1rem solid #f1f1f1
+							box-shadow 0 0 .6rem $dark10
+							
+							.merchant__mobile--details &
+								sq(8)
+								position absolute
+								left calc(50% - 4rem)
+								top -4rem
+								box-shadow 0 0 1rem $dark25
+								border .3rem solid #fff
+					&__name
+						ellipsis()
+						font-weight 500
+						.merchant__mobile--details &
+						.merchant__mobile--details--dirty &
+							text-align center
+							font-size 2rem
+					&__date
+						color #7E7F7F
+						font-size 1.2rem
+				&__price
+					font-weight 600
+					.merchant__mobile--details &
+					.merchant__mobile--details--dirty &
+						margin-top 1rem
+						font-size 5rem
+						line-height 1
+						text-align center
+						font-weight 400
+					.merchant__mobile--details--dirty &
+						font-size 3.5rem
+@media screen and (max-width 720px)
+	.merchant
+		&__mobile
+			&--dirty
+				border 1rem solid #666767
+			&--clean
+				border 1rem solid $primary
+
+@media screen and (max-width 660px)
+	.merchant
+		&__mobilewrapper
+			margin-right 0 !important
+@media screen and (max-width 370px)
+	.merchant
+		&__mobilewrapper
+			width 100%
+		&__mobilecontainer
+			width 100%
+			&__title
+				color #454545
+		&__mobile__section__transaction
+			font-size 85%
+@media screen and (max-width 350px)
+	.merchant
+		&__mobile__section__transaction__info__logo
+		&__mobile__section__transaction__info__logo img
+			sq(3.6)
+		
+

package/src/styles/console/fonts.styl

@@ -1 +1 @@
-@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap')
+@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Roboto+Mono:wght@400;600&display=swap')

package/src/styles/style-website.styl

@@ -1,8 +1,8 @@
 // Common styles - Don't change order
+@import "./website/fonts.styl"
 @import "./commons/reset.styl"
 
 // Specicif style - Do not change order
-@import "./website/fonts.styl"
 @import "./website/mixins.styl"
 @import "./website/variables.styl"
 @import "./website/colors.styl"

package/src/styles/website/button.styl

@@ -85,8 +85,89 @@
 		&:disabled
 			&:hover
 				background-color $primary
+		&.btn--default
+			position inherit
+		&.btn--white
+			color $secondary
+			background-color $light
+			border .1rem solid $inputBorderColor
+			text-shadow unset
+			.icon
+				fill $secondary
+			&:disabled
+				&:hover
+					color $secondary
+					background-color $light
+					border .1rem solid $inputBorderColor
+			&:hover
+				textShadow()
+				color $light
+				border-color $linkColorHover
+		&.btn--color1
+			background-color $logo1
+			&:disabled
+				&:hover
+					background-color $logo1
+		&.btn--color2
+			background-color $logo2
+			&:disabled
+				&:hover
+					background-color $logo2
+
+		&.btn--color3
+			background-color $logo3
+			&:disabled
+				&:hover
+					background-color $logo3
+
+		&.btn--color4
+			background-color $logo4
+			&:disabled
+				&:hover
+					background-color $logo4
+
+		&.btn--color5
+			background-color $logo5
+			&:disabled
+				&:hover
+					background-color $logo5
+
+		&.btn--color6
+			background-color $logo6
+			&:disabled
+				&:hover
+					background-color $logo6
+
+		&.btn--color7
+			background-color $logo7
+			&:disabled
+				&:hover
+					background-color $logo7
+
+		&.btn--color8
+			background-color $logo8
+			&:disabled
+				&:hover
+					background-color $logo8
+			&:hover
+				background-color $success2
+		.section--dark .article &
+		.section--light .article &
+		.section--white .article &
+		.section--dark .for-colored-cta &
+		.section--light .for-colored-cta &
+		.section--white .for-colored-cta &
+			background-color $primary
+			border unset
+			color $light
+			&:disabled
+				&:hover
+					background-color $primary
+			&:hover
+				background-color $linkColorHover
 		&:hover
 			background-color $linkColorHover
+
 	&--important
 		background-color $error
 		&:disabled
@@ -108,9 +189,107 @@
 			flex-shrink 0
 			.icon
 				flex-shrink 0
+		&.btn--white
+			position inherit
+		&.btn--color1
+			textShadow()
+			color $light
+			background-color $logo1
+			border-color $logo1
+			&:disabled
+				&:hover
+					background-color $logo1
+		&.btn--color2
+			textShadow()
+			color $light
+			background-color $logo2
+			border-color $logo2
+			&:disabled
+				&:hover
+					background-color $logo2
+
+		&.btn--color3
+			textShadow()
+			color $light
+			background-color $logo3
+			border-color $logo3
+			&:disabled
+				&:hover
+					background-color $logo3
+
+		&.btn--color4
+			textShadow()
+			color $light
+			background-color $logo4
+			border-color $logo4
+			&:disabled
+				&:hover
+					background-color $logo4
+
+		&.btn--color5
+			textShadow()
+			color $light
+			background-color $logo5
+			border-color $logo5
+			&:disabled
+				&:hover
+					background-color $logo5
+
+		&.btn--color6
+			textShadow()
+			color $light
+			background-color $logo6
+			border-color $logo6
+			&:disabled
+				&:hover
+					background-color $logo6
+
+		&.btn--color7
+			textShadow()
+			color $light
+			background-color $logo7
+			border-color $logo7
+			&:disabled
+				&:hover
+					background-color $logo7
+
+		&.btn--color8
+			textShadow()
+			color $light
+			background-color $logo8
+			border-color $logo8
+			&:disabled
+				&:hover
+					background-color $logo8
+			&:hover
+				background-color $success2
+		.section--dark .article &
+		.section--light .article &
+		.section--white .article &
+		.section--dark .for-colored-cta &
+		.section--light .for-colored-cta &
+		.section--white .for-colored-cta &
+			color $secondary
+			background-color $light
+			border .1rem solid $inputBorderColor
+			text-shadow unset
+			.icon
+				fill $secondary
+			&:disabled
+				&:hover
+					color $secondary
+					background-color $light
+					border .1rem solid $inputBorderColor
+			&:hover
+				textShadow()
+				color $light
+				border-color $linkColorHover
+				background-color $linkColorHover
+
 		&:hover
 			border-color $linkColorHover
 			background-color $linkColorHover
+
 		&.btn--loading
 			&:hover
 				background-color transparent
@@ -122,14 +301,13 @@
 		&:disabled
 			opacity .4
 			cursor default
-			&:disabled
-				&:hover
-					opacity .4
-						background-color transparent
-						color $secondary
-						border-color $inputBorderColor
-						.icon
-							fill $secondary
+			&:hover
+				opacity .4
+				background-color transparent
+				color $secondary
+				border-color $inputBorderColor
+				.icon
+					fill $secondary
 	&--inverse
 		btn()
 		background-color transparent
@@ -231,7 +409,7 @@
 					rigth -.3rem
 	&--link-flex
 	&--link-flex-info
-		display flex
+		display inline-flex
 		align-items center
 		&.btn--no-label
 			display flex
@@ -255,15 +433,110 @@
 					fill $primary
 	&--link
 	&--link-flex
-		&.btn--light-color
-			color $secondary-medium40
+		.article &
+		.wcard &
+		.paragraph &
+			color $linkColor
+			.icon
+				fill $linkColor
+		
+		&.btn--default
+			position inherit
+
+		&.btn--white
+			color $light
+			text-decoration underline
+			.icon
+				fill $light
+			&:disabled
+				&:hover
+					color $light
+
+		&.btn--color1
+			color $logo1
+			.icon
+				fill $logo1
+			&:disabled
+				&:hover
+					color $logo1
+
+		&.btn--color2
+			color $logo2
+			.icon
+				fill $logo2
+			&:disabled
+				&:hover
+					color $logo2
+
+		&.btn--color3
+			color $logo3
+			.icon
+				fill $logo3
+			&:disabled
+				&:hover
+					color $logo3
+
+		&.btn--color4
+			color $logo4
+			.icon
+				fill $logo4
+			&:disabled
+				&:hover
+					color $logo4
+
+		&.btn--color5
+			color $logo5
+			.icon
+				fill $logo5
+			&:disabled
+				&:hover
+					color $logo5
+
+		&.btn--color6
+			color $logo6
 			.icon
-				trans()
-				fill $secondary-medium40
+				fill $logo6
+			&:disabled
+				&:hover
+					color $logo6
+
+		&.btn--color7
+			color $logo7
+			.icon
+				fill $logo7
+			&:disabled
+				&:hover
+					color $logo7
+
+		&.btn--color8
+			color $logo8
+			.icon
+				fill $logo8
+			&:disabled
+				&:hover
+					color $logo8
 			&:hover
-				color $primary
-				.icon
-					fill $primary
+				color $success2
+
+		.section--dark .article &
+			text-decoration none
+			color $linkColorLight
+			.icon
+				fill $linkColorLight
+
+		.section--light .article &
+		.section--white .article &
+			text-decoration none
+			color $linkColor
+			.icon
+				fill $linkColor
+
+		&:hover
+			text-decoration none
+			color $linkColorHover !important
+			.icon
+				fill $linkColorHover !important
+
 	&--link-primary
 		color $primary
 		.icon

package/src/styles/website/colors.styl

@@ -336,3 +336,7 @@ $mappingDark = #96503A
 $showcases = #68668E
 $showcases10 = rgba($showcases, .1)
 $showcasesDark = #444177
+
+$indoor = #B7B38B
+$indoor10 = rgba($indoor, .1)
+$indoorDark = #77735A