@woosmap/ui 3.17.0 → 3.21.0

package/package.json

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

package/src/components/Demo/MerchantDemo.js

@@ -7,7 +7,6 @@ import Marker from '../Map/Marker';
 import Button from '../Button/Button';
 import { viewport, boundsFromViewport } from '../Map/drawOnMap';
 import Constants from '../../Constants';
-import geolocationSuccessImg from '../../images/geolocation-success.png';
 import { tr } from '../utils/locale';
 import IphoneTime from '../../images/iphone-time.png';
 import IphoneIcons from '../../images/iphone-right-icons.png';
@@ -576,7 +575,7 @@ export default class MerchantDemo extends Component {
     renderResult = () => {
         const { transaction } = this.state;
         return (
-            <div className="demo__results">
+            <div className="merchant__wrapper">
                 <div className="merchant__mobilewrapper">
                     <div className="merchant__mobilecontainer__title">Transactions</div>
                     <div className="merchant__mobilecontainer" style={{ zIndex: 2 }}>
@@ -599,12 +598,6 @@ export default class MerchantDemo extends Component {
 
     render() {
         const { noheader } = this.props;
-        const headerTagline = (
-            <>
-                <img alt="Success" src={geolocationSuccessImg} />
-                <span>{tr("Look at some transactions we've cleaned for you!")}</span>
-            </>
-        );
         const headerLabels = {
             title: tr('Merchant API'),
             desc: tr(
@@ -617,14 +610,13 @@ export default class MerchantDemo extends Component {
                 className="demo--merchant"
                 id="merchant-demo"
                 docLink="https://developers.woosmap.com/products/merchant-api/get-started/"
-                headerTagline={headerTagline}
                 header={headerLabels}
                 request={this.getRequestUrl()}
                 params={this.getRequestparams()}
                 body={this.getRequestBody()}
                 method="POST"
                 response={this.getResponse()}
-                leftContent={this.renderResult()}
+                mainContent={this.renderResult()}
             />
         );
     }

package/src/components/Demo/SkeletonDemo.js

@@ -160,25 +160,34 @@ export default class SkeletonDemo extends Component {
     };
 
     render() {
-        const { result, request, response, renderCode } = this.props;
+        const { result, request, response, renderCode, withMap, mainContent } = this.props;
         const { copied } = this.state;
+        const filters = this.renderHeaderFilters();
+        const filters2 = this.renderFooterFilters();
+        const tagLine = this.renderHeaderTagline();
         return (
             <article className="demo">
                 <div className="demo__content">
                     <div className="demo__showcase">
-                        <div className="demo__filters">
-                            {this.renderHeaderFilters()}
-                            {this.renderFooterFilters()}
-                        </div>
+                        {(tagLine || filters || filters2) && (
+                            <div className="demo__filters">
+                                {tagLine}
+                                {filters}
+                                {filters2}
+                            </div>
+                        )}
                         <div className="demo__map">
-                            <div className="map" ref={this.mapDivRef} />
+                            {withMap && <div className="map" ref={this.mapDivRef} />}
+                            {mainContent}
                         </div>
                     </div>
                     <div className="demo__data">
-                        <div className="demo__results">
-                            <div className="demo__results__header">{tr('Results')}</div>
-                            <div className="demo__results__content">{result}</div>
-                        </div>
+                        {result && (
+                            <div className="demo__results">
+                                <div className="demo__results__header">{tr('Results')}</div>
+                                <div className="demo__results__content">{result}</div>
+                            </div>
+                        )}
                         <div className="demo__code">
                             <Tab
                                 actions={[
@@ -229,6 +238,7 @@ SkeletonDemo.contextType = TrackEventContext;
 SkeletonDemo.defaultProps = {
     renderCode: null,
     headerFilters: null,
+    mainContent: null,
     headerTagline: null,
     footerFilters: null,
     result: null,
@@ -238,6 +248,7 @@ SkeletonDemo.defaultProps = {
     referer: '',
     body: '',
     method: '',
+    withMap: false,
 };
 SkeletonDemo.propTypes = {
     renderCode: PropTypes.func,
@@ -246,8 +257,10 @@ SkeletonDemo.propTypes = {
     headerFilters: PropTypes.array,
     footerFilters: PropTypes.array,
     result: PropTypes.node,
+    mainContent: PropTypes.node,
     request: PropTypes.string,
     referer: PropTypes.string,
+    withMap: PropTypes.bool,
     body: PropTypes.string,
     method: PropTypes.string,
     response: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),

package/src/components/Dropdown/Dropdown.js

@@ -10,13 +10,17 @@ function mapChildrenWithProps(children, childrenRefs, closeCb) {
     if (children) {
         return React.Children.map(children, (child, index) => {
             if (React.isValidElement(child)) {
+                // only add ref to non functional components
                 return React.cloneElement(child, {
                     ...child.props,
                     closeCb,
-                    ref: (elem) => {
-                        // eslint-disable-next-line no-param-reassign
-                        childrenRefs[index] = elem;
-                    },
+                    ref:
+                        !child.type.prototype || (child.type.prototype && child.type.prototype.render)
+                            ? (elem) => {
+                                  // eslint-disable-next-line no-param-reassign
+                                  childrenRefs[index] = elem;
+                              }
+                            : undefined,
                 });
             }
             return child;
@@ -351,7 +355,7 @@ class Dropdown extends Component {
 
         return (
             <div
-                ref={this.clickOutsideRef}
+                ref={openOnMouseEnter ? null : this.clickOutsideRef}
                 className={cl('dropdown', { open }, `dropdown--${size}`, className)}
                 {...rest}
                 onMouseEnter={this.onMouseEnter}

package/src/icons/showcases.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70"><path d="M16.605 64.135A7.847 7.847 0 0 1 8.787 56.3L8.8 13.7a7.825 7.825 0 0 1 11.561-6.868l39.116 21.289a7.822 7.822 0 0 1 0 13.741l-39.13 21.31a7.813 7.813 0 0 1-3.742.963ZM10.787 56.3a5.821 5.821 0 0 0 8.6 5.114l39.131-21.31a5.824 5.824 0 0 0 0-10.229L19.405 8.588A5.825 5.825 0 0 0 10.8 13.7Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70"><path d="M35 65.733a2.754 2.754 0 0 1-2.965-2.714c0-6.377-4.342-11.5-8.939-16.924-4.932-5.821-10.033-11.838-10.033-19.895a21.937 21.937 0 0 1 43.874 0c0 8.054-5.1 14.071-10.033 19.892-4.6 5.424-8.939 10.547-8.939 16.924A2.754 2.754 0 0 1 35 65.733Zm0-59.466A19.959 19.959 0 0 0 15.063 26.2c0 7.319 4.859 13.054 9.559 18.6 4.628 5.46 9.413 11.106 9.413 18.217 0 .645.675.714.965.714.161 0 .965-.034.965-.714 0-7.111 4.785-12.757 9.413-18.217 4.7-5.545 9.559-11.28 9.559-18.6A19.959 19.959 0 0 0 35 6.267Z"/><path d="M29.232 37.683a3.456 3.456 0 0 1-3.442-3.45V18.967a3.446 3.446 0 0 1 5.093-3.026L44.9 23.57a3.445 3.445 0 0 1 0 6.052l-14.019 7.636a3.444 3.444 0 0 1-1.649.425Zm0-20.166a1.427 1.427 0 0 0-.737.208 1.412 1.412 0 0 0-.708 1.242v15.266a1.443 1.443 0 0 0 2.137 1.267l14.024-7.636a1.446 1.446 0 0 0 0-2.54L29.929 17.7a1.446 1.446 0 0 0-.692-.183ZM26.79 34.233Z"/></svg>

package/src/styles/next-website/MerchantDemo.styl

@@ -0,0 +1,221 @@
+.merchant
+	&__wrapper
+		trans()
+		display flex
+		justify-content center
+		width 100%
+		zoom .9
+		padding 2rem
+		background-color #d5eaff
+	&__mobilewrapper
+		trans()
+		position relative
+		height 100%
+		margin 3rem
+	&__mobilecontainer
+		position relative
+		height 51.9rem
+		width 28rem
+		margin auto
+		box-shadow 0 0 .4rem .1rem rgba($secondary, .1)
+		br(1)
+		&__title
+			text-align center
+			font-size 1.2rem
+			font-weight 600
+			margin 0 0 1rem 0
+	&__mobile
+		br(1)
+		font-size 1.3rem
+		width 100%
+		background-color $light
+		overflow hidden
+		&--dirty
+		&--details--dirty
+			.merchant__mobile__header
+				background #666767
+		&--clean
+		&--details
+			.merchant__mobile__header
+				background #4F70FF
+		&--details
+			position relative
+		&__header
+			padding 1.1rem
+			color #fff
+			text-transform uppercase
+			font-weight 600
+			&__nav
+			&__icons
+				flexSpread()
+			&__icons
+				img
+					max-height .8rem
+			&__nav
+				font-weight 700
+				margin-top 1.4rem
+				position relative
+				.merchant__mobile--details &
+				.merchant__mobile--details--dirty &
+					flexAxis()
+				&__avatar
+					max-width 2.4rem
+				&__back
+					max-width 1rem
+					opacity 0
+					.merchant__mobile--details &
+					.merchant__mobile--details--dirty &
+						opacity 1
+				&__button
+					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
+			background-color #f5f5f5
+			border-radius 0 0 1rem 1rem
+			height 45rem
+			.merchant__mobile--clean  &
+				background-color #f3f7ff
+			.merchant__mobile--details &
+				background-color $light
+				padding 0
+			.merchant__mobile--details--dirty &
+				background-color $light
+				padding 2rem
+			&__map
+				overflow hidden
+				height 20rem
+			&__no-map
+				height 6rem
+			&__date
+				color #b7b7b7
+				margin-bottom .6rem
+				.merchant__mobile--clean &
+					color #8697b1
+				.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(.6)
+				trans()
+				background-color $light
+				font-size 1.3rem
+				cursor pointer
+				height 4.8rem
+				padding 0 .8rem
+				box-shadow 0 0 .3rem .1rem $dark10
+				width 100%
+				margin-bottom .8rem
+				&:hover
+					background-color #666767
+					transform translateX(.5rem)
+					.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(3)
+						br(50)
+						position relative
+						margin-right 1.2rem
+						flex-shrink 0
+						.merchant__mobile--details &
+							width 100%
+							height 5rem
+						img
+							ellipsis()
+							br(50)
+							sq(3)
+							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
+						line-height 1.6rem
+						margin-bottom .3rem
+						.merchant__mobile--details &
+						.merchant__mobile--details--dirty &
+							text-align center
+							font-size 2rem
+					&__date
+						color #a1a1a1
+						font-size 1.2rem
+						line-height 1.4rem
+				&__price
+					font-weight 700
+					font-size 1.5rem
+					.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 760px)
+	.merchant
+		&__mobilewrapper
+			margin 0 1rem
+@media screen and (max-width 660px)
+	.merchant
+		&__wrapper
+			zoom .7
+@media screen and (max-width 469px)
+	.merchant
+		&__wrapper
+			zoom .6
+@media screen and (max-width 400px)
+	.merchant
+		&__wrapper
+			zoom .45
+

package/src/styles/next-website/colors.styl

@@ -71,6 +71,14 @@ $favorite = #ffc200
 
 $modalBg = rgba(0, 11, 31, .85)
 
+//new version of demos
+$inputDemoBgColor = #f6f7f8
+$inputDemoBorderColor = #bcc4d7
+$inputDemoPlaceholderColor = #818ca5
+
+$activeColor = #7f98b3
+$activeColorDark = #4c657e
+
 // Labels
 $labelBlue = #52a6e2
 $labelMauve = #7d74c7

package/src/styles/next-website/demo.styl

@@ -1,23 +1,8 @@
-$demofilterWidth = 27.4rem
-$fontSizeDemo = 1.3rem
-$demoPadding = 1.6rem
-$demoBr = .3rem
-$inputFontSizeDemo = 1.1rem
-$inputDemoHeight = 3rem
-$inputBgColor = #f6f7f8
-$inputBorderColor = #bcc4d7
-$inputPlaceholderColor = #818ca5
-
-$activeColor = #7f98b3
-$activeColorDark = #4c657e
-$footerHeight = 4rem
-
-inputFont()
-	font-family 'Roboto Mono', monospace
 
 .demo
 	fullwh()
 	margin 6rem auto
+	color $secondary
 	.title
 		font-size $title3
 	pre
@@ -46,12 +31,19 @@ inputFont()
 		mbib(1.6)
 	&__data
 		max-height 45rem
+		border-top .1rem solid rgba($secondary, .1)
 	&__showcase
 		min-height 50rem
 		max-height 71rem
 	&__map
+		display flex
+		align-items center
+		justify-content center
 		flex-grow 1
 		background-color $light
+		.map
+			width 100%
+			height 100%
 	&__results
 		width $demofilterWidth
 		display flex
@@ -64,8 +56,8 @@ inputFont()
 			flex-shrink 0
 			font-size $fontSizeDemo - .1
 			padding 0 $demoPadding
-			height $footerHeight
-			background-color rgba($secondary, .05)
+			height $footerDemoHeight
+			background-color $inputDemoBgColor
 			font-weight 600
 		&__content
 			font-weight 400
@@ -99,8 +91,8 @@ inputFont()
 		&:not([type=button]):not([type=checkbox]):not([type=radio]):not([type=textarea])
 			inputFont()
 			br($demoBr)
-			background-color $inputBgColor !important
-			border-color $inputBorderColor
+			background-color $inputDemoBgColor !important
+			border-color $inputDemoBorderColor
 			font-size $inputFontSizeDemo
 			height $inputDemoHeight
 			padding 0 1rem 0 1rem
@@ -116,11 +108,11 @@ inputFont()
 		font-size $inputFontSizeDemo
 		&__control
 			border-radius $demoBr !important
-			background-color $inputBgColor !important
+			background-color $inputDemoBgColor !important
 			min-height 2.4rem !important
 			height auto !important
 			&:not(.select__control--is-focused):not(.asyncselect__control--is-focused)
-				border-color $inputBorderColor !important
+				border-color $inputDemoBorderColor !important
 		.css-g1d714-ValueContainer
 		.css-tlfecz-indicatorContainer
 			padding 0
@@ -132,7 +124,7 @@ inputFont()
 			input
 				height auto !important
 		&__placeholder
-			color $inputPlaceholderColor
+			color $inputDemoPlaceholderColor
 		&__dropdown-indicator
 		&__clear-indicator
 			padding 0
@@ -162,6 +154,16 @@ inputFont()
 			padding .6rem
 			.flag
 				margin 0 .6rem 0 0
+			&--is-selected
+				color $light !important
+				background-color #819cb9 !important
+				&.select__option--is-focused
+					color $light !important
+					background-color #819cb9 !important
+			&--is-focused:not(.select__option--is-selected)
+				background-color #cddbeb !important
+				color $secondary !important
+			
 	&__filters
 		.btn
 			br(.2)
@@ -170,7 +172,7 @@ inputFont()
 			padding 0 .8rem
 			height $inputDemoHeight
 			inputFont()
-			border-color $inputBorderColor
+			border-color $inputDemoBorderColor
 			.active
 			&--primary
 				background-color $activeColor
@@ -178,7 +180,7 @@ inputFont()
 			&--group
 				height 2.8rem
 				&-container
-					color $inputBgColor
+					color $inputDemoBgColor
 					.btn
 						&:first-child
 							border-radius 2rem 0 0 2rem
@@ -188,7 +190,7 @@ inputFont()
 						.btn.active
 							background-color $activeColorDark
 							border-color $activeColorDark
-							color $inputBgColor
+							color $inputDemoBgColor
 					&.language
 					&.transportation
 						mbi(.4)
@@ -211,8 +213,8 @@ inputFont()
 	&__code
 		.tab
 			&__header
-				height $footerHeight
-				background-color rgba($secondary, .05)
+				height $footerDemoHeight
+				background-color $inputDemoBgColor
 			&__content
 				padding $demoPadding
 				overflow auto
@@ -233,3 +235,20 @@ inputFont()
 					font-size $inputFontSizeDemo
 					border .1rem solid $activeColor
 					color darken($activeColor, 20%)
+@media screen and (max-width 769px)
+	.demo__showcase
+		max-height 100%
+		min-height auto
+@media screen and (max-width 696px)
+	.demo
+		&__data
+		&__showcase
+			flex-direction column
+			max-height 100%
+		&__results
+		&__filters
+			width auto
+			border-bottom .1rem solid rgba($secondary, .1)
+			border-right 0
+		&__map
+			height 32rem

package/src/styles/next-website/mixins.styl

@@ -46,6 +46,8 @@ focus()
 trans()
 	transition all .3s
 
+inputFont()
+	font-family 'Roboto Mono', monospace
 btn()
 	br()
 	flexBtn()

package/src/styles/next-website/select.styl

@@ -22,7 +22,7 @@
 			.error > &
 				border-color $error !important
 		&--is-focused
-			border-color $secondary !important
+			border-color $inputBorderColor !important
 			box-shadow none !important
 			.select__indicator
 			.asyncselect__indicator

package/src/styles/next-website/variables.styl

@@ -8,6 +8,15 @@ $fontWeight = 400
 $fontSizeHeader = 1.3rem
 $fontSizeFooter = 1.6rem
 
+//new version of demos
+$demofilterWidth = 27.4rem
+$fontSizeDemo = 1.3rem
+$demoPadding = 1.6rem
+$demoBr = .3rem
+$inputFontSizeDemo = 1.1rem
+$inputDemoHeight = 3rem
+$footerDemoHeight = 4rem
+
 
 $title = 4.6rem
 $title2 = 4rem

package/src/styles/style-next-website.styl

@@ -21,5 +21,6 @@
 @import "../components/**/*.styl"
 
 // Additional style for UI components
+@import "./next-website/MerchantDemo.styl"
 @import "./next-website/demo.styl"
 @import "./next-website/dropdown.styl"