@woosmap/ui 3.14.0 → 3.18.0

package/package.json

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

package/src/components/Button/ButtonGroup.js

@@ -4,17 +4,15 @@ import PropTypes from 'prop-types';
 
 export default class ButtonGroup extends Component {
     render() {
-        const { children, isLight, isTooltipBtn, testId, ...rest } = this.props;
+        const { children, isLight, isTooltipBtn, testId, className, ...rest } = this.props;
+        const classes = cl(
+            'btn--group-container',
+            { 'btn--group-container--light': isLight },
+            { 'btn--group-container--btn-tooltip': isTooltipBtn },
+            className
+        );
         return (
-            <div
-                className={cl(
-                    'btn--group-container',
-                    { 'btn--group-container--light': isLight },
-                    { 'btn--group-container--btn-tooltip': isTooltipBtn }
-                )}
-                {...rest}
-                data-testid={testId}
-            >
+            <div className={classes} {...rest} data-testid={testId}>
                 {children}
             </div>
         );
@@ -26,6 +24,7 @@ ButtonGroup.defaultProps = {
     children: null,
     isLight: false,
     isTooltipBtn: false,
+    className: '',
 };
 
 ButtonGroup.propTypes = {
@@ -33,4 +32,5 @@ ButtonGroup.propTypes = {
     children: PropTypes.array,
     isLight: PropTypes.bool,
     isTooltipBtn: PropTypes.bool,
+    className: PropTypes.string,
 };

package/src/components/Demo/AddressDemo.js

@@ -259,9 +259,10 @@ export default class AddressDemo extends Component {
             ),
         };
         const filterGeometry = {
-            label: tr('Geometry only'),
+            label: false,
             component: (
                 <Input
+                    label={tr('Geometry only')}
                     type="checkbox"
                     key="geometry"
                     checked={geometry}
@@ -275,7 +276,7 @@ export default class AddressDemo extends Component {
         const filterCountries = {
             label: tr('Language'),
             component: (
-                <ButtonGroup isLight key="language">
+                <ButtonGroup className="language" isLight key="language">
                     {languages.map((item) => (
                         <Button
                             type="group"

package/src/components/Demo/DistanceDemo.js

@@ -262,7 +262,7 @@ export default class DistanceDemo extends Component {
         const filterTravelMode = {
             key: 'travelmode',
             component: (
-                <ButtonGroup isLight>
+                <ButtonGroup className="transportation" isLight>
                     {travelModes.map((item) => (
                         <Button
                             type="group"
@@ -300,7 +300,7 @@ export default class DistanceDemo extends Component {
         const filterLanguage = {
             label: tr('Language'),
             component: (
-                <ButtonGroup isLight>
+                <ButtonGroup className="language" isLight>
                     {languages.map((item) => (
                         <Button
                             type="group"
@@ -319,9 +319,10 @@ export default class DistanceDemo extends Component {
         };
 
         const filterAlternatives = {
-            label: tr('Alternative routes'),
+            label: '',
             component: (
                 <Input
+                    label={tr('Alternative routes')}
                     type="checkbox"
                     checked={alternatives}
                     onChange={(e) => {
@@ -331,7 +332,7 @@ export default class DistanceDemo extends Component {
             ),
         };
 
-        return [filterTravelMode, filterUnit, filterLanguage, filterAlternatives];
+        return [filterAlternatives, filterTravelMode, filterUnit, filterLanguage];
     };
 
     render() {

package/src/components/Demo/GeolocationDemo.js

@@ -116,9 +116,10 @@ export default class GeolocationDemo extends Component {
         }
 
         const filterStores = {
-            label: tr('Display Geolocation POIs'),
+            label: '',
             component: (
                 <Input
+                    label={tr('Display Geolocation POIs')}
                     type="checkbox"
                     key="stores"
                     checked={showStores}

package/src/components/Demo/LocalitiesAddressDemo.js

@@ -208,9 +208,10 @@ export default class LocalitiesAddressDemo extends Component {
             ),
         };
         const filterGeometry = {
-            label: tr('Geometry only'),
+            label: '',
             component: (
                 <Input
+                    label={tr('Geometry only')}
                     type="checkbox"
                     key="geometry"
                     checked={geometry}

package/src/components/Demo/LocalitiesDemo.js

@@ -224,28 +224,26 @@ export default class LocalitiesDemo extends Component {
         const filterTypes = {
             label: tr('Filter by'),
             component: (
-                <div className="demo__input-container--inline">
+                <>
                     <CountrySelect
                         isMulti
-                        size="small"
                         placeholder={tr('Country')}
                         filter={['fr', 'gb', 'sp', 'it', 'de', 'nl']}
                         onChange={(items) => this.setState({ countries: items }, this.requestLocalities)}
                     />
                     <Select
-                        size="small"
                         placeholder={tr('Point of interest')}
                         options={this.types}
                         isMulti
                         onChange={(items) => this.setState({ localitiesTypes: items }, this.requestLocalities)}
                     />
-                </div>
+                </>
             ),
         };
         const filterCountries = {
             label: tr('Language'),
             component: (
-                <ButtonGroup isLight>
+                <ButtonGroup className="language" isLight>
                     {languages.map((item) => (
                         <Button
                             size="small"

package/src/components/Demo/MapDemo.js

@@ -145,9 +145,10 @@ storesOverlay.setMap(map);
     renderFooterFilters = () => {
         const { hasStores, hasPois } = this.state;
         const filterPois = {
-            label: tr('Display Map POIs'),
+            label: '',
             component: (
                 <Input
+                    label={tr('Display Map POIs')}
                     type="checkbox"
                     key="pois"
                     checked={hasPois}
@@ -159,9 +160,10 @@ storesOverlay.setMap(map);
         };
 
         const filterStores = {
-            label: tr('Display Woosmap Stores overlay'),
+            label: '',
             component: (
                 <Input
+                    label={tr('Display Woosmap Stores overlay')}
                     type="checkbox"
                     key="stores"
                     checked={hasStores}

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

@@ -148,37 +148,46 @@ export default class SkeletonDemo extends Component {
             return null;
         }
         return (
-            <div className="demo__content-footer">
+            <>
                 {footerFilters.map((filter) => (
                     <div className="demo__input-container" key={filter.label || filter.key}>
-                        {filter.label ? <p className="demo__label--filter">{filter.label}</p> : false}
+                        {filter.label ? <p className="demo__label demo__label--filter">{filter.label}</p> : false}
                         {filter.component}
                     </div>
                 ))}
-            </div>
+            </>
         );
     };
 
     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/Icon/Icon.js

@@ -52,6 +52,7 @@ import { ReactComponent as CaretTop } from '../../icons/caret-top.svg';
 import { ReactComponent as Charts } from '../../icons/charts.svg';
 import { ReactComponent as Chat } from '../../icons/chat.svg';
 import { ReactComponent as Check } from '../../icons/check.svg';
+import { ReactComponent as Checked } from '../../icons/checked.svg';
 import { ReactComponent as CheckCircle } from '../../icons/check-circle.svg';
 import { ReactComponent as Clock } from '../../icons/clock.svg';
 import { ReactComponent as ClockReversed } from '../../icons/clock-reversed.svg';
@@ -197,6 +198,7 @@ const Icons = {
     charts: Charts,
     chat: Chat,
     check: Check,
+    checked: Checked,
     'check-circle': CheckCircle,
     clock: Clock,
     'clock-reversed': ClockReversed,

package/src/icons/checked.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10.972 15.447a.789.789 0 0 1-.559-.231L7.156 11.96a.791.791 0 0 1 1.117-1.119l2.7 2.7 4.755-4.753A.79.79 0 1 1 16.844 9.9l-5.314 5.315a.784.784 0 0 1-.558.232Z"/><path d="M12 21.487A9.487 9.487 0 1 1 21.487 12 9.5 9.5 0 0 1 12 21.487ZM12 4.1a7.905 7.905 0 1 0 7.905 7.9A7.914 7.914 0 0 0 12 4.1Z"/></svg>

package/src/styles/console/variables.styl

@@ -1,24 +1,66 @@
-$fontFamily = "Lato", arial, sans-serif
-$fontSize = 1.4rem
+$fontFamily = "Poppins", arial, sans-serif
+$fontSize = 1.8rem
+$lineHeight = $fontSize * 2 - .8
 $fontSizeSmall = $fontSize - .2
 $fontSizeMini  = $fontSize - .4
+$fontSizeNano  = $fontSize - .6
 $fontWeight = 400
+$fontSizeHeader = 1.3rem
+$fontSizeFooter = 1.6rem
 
 
-$title = $fontSize + .6
-$title2 = $fontSize + .4
-$title3 = $fontSize + .3
-$title4 = $fontSize + .2
-$title5 = $fontSize + .1
-$title6 = $fontSize
+$title = 4.6rem
+$title2 = 4rem
+$title3 = 3.6rem
+$title4 = 3rem
+$title5 = 2.6rem
+$title6 = 2rem
 
 $borderRadius = .6rem
 
+
+// Layout
+$wrapperWidth = 125rem
+$wrapperReducedWidth = 96rem
+$headerHeight = 6.7rem
+$headerBannerHeight = 5.2rem
+$sectionPadding = 18.5rem
+$topRainbowHeight = 3.8rem
+$gutter2c = 3rem
+$quoteIcon = 44rem
+$quoteIconPosition = ( - $quoteIcon / 2 - $sectionPadding + 1 )
+
+$col2 = 58rem
+$col3 = 31.5rem
+$col4 = 22rem
+
+// card articles
+$cardHeaderHeight = 21rem
+$cardFontSize = 1.6rem
+$cardTitle = 1.8rem
+$cardTitleLineHeight = 2.6rem
+$cardLineHeight = $cardFontSize * 2 - 1
+$cardPadding = 2rem
+
+// card pricing
+$pricingCardWidth = 30.2rem
+$pricingCardpadding = 3.4rem
+$pricingCardHeaderHeight = 6.2rem
+$pricingCardCtaHeight = 5.2rem
+$pricingCardTitleSize = $title6
+$pricingCardAmountSize = $title2 * 2
+$pricingCardUnitSize = $title6
+$pricingCardPeriodSize = $fontSizeSmall
+$pricingCardPriceSize = $title2
+$pricingCardPriceUnitSize = $fontSizeSmall
+
 // Buttons & Inputs
 
-$padding = 1.2rem
+$padding = 2rem
 $contentPadding = 2.8rem
 
+
+
 $sidebarButtonSize = 5rem
 
 $buttonHeight = 3.8rem
@@ -41,9 +83,9 @@ $buttonPaddingNano = 0 $padding - .4 0 $padding - .4
 $buttonFontSizeNano = $fontSize  - .3
 $buttonLineHeightNano = $buttonFontSizeNano * 2
 
-$buttonHeightLarge = $buttonHeight  + .8
-$buttonPaddingLarge = 0 $padding + .4 0 $padding + .4
-$buttonFontSizeLarge = $fontSize + .1
+$buttonHeightLarge = $buttonHeight  + 1.2
+$buttonPaddingLarge = 0 $padding + .6 0 $padding + .6
+$buttonFontSizeLarge = $fontSize - .2
 $buttonLineHeightLarge = $buttonFontSizeLarge * 2
 
 

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/button.styl

@@ -340,4 +340,77 @@
 					padding-left $padding
 					disableHoverEffect()
 					.icon
-						sq(3.2)
+						sq(3.2)
+	&--group
+		btn()
+		color $secondary-medium40
+		background-color $light
+		border .1rem solid $inputBorderColor
+		&.btn--has-icon
+			&:not(.btn--mini):not(.btn--small):not(.btn--large)
+				mbi(.4)
+		&.btn--icon
+			flex-shrink 0
+			.icon
+				flex-shrink 0
+		&:hover
+			color $secondary
+			background-color $primary10
+		&.active
+			color $light
+			border-color $secondary
+			background-color $secondary
+			.icon
+				fill $light
+			&:hover
+				background-color $secondary
+			&:disabled
+				background-color $secondary60
+				border-color $secondary-medium15
+				color $light70
+				.icon
+					fill $light70
+		&:disabled:not(.active)
+			color $secondary30
+			cursor default
+			.icon
+				fill $secondary30
+			&:hover
+				border-color $inputBorderColor
+				color $secondary30
+				background-color transparent
+				.icon
+					fill $secondary30
+		&-container
+			flexMiddle()
+			.btn
+				&:first-child
+					border-radius $borderRadius 0 0 $borderRadius
+					border-width .1rem 0 .1rem .1rem
+				&:not(:first-child):not(:last-child)
+					border-width .1rem 0 .1rem .1rem
+					border-radius 0
+				&:last-child
+					border-radius 0 $borderRadius $borderRadius 0
+					border-width .1rem
+			&--light
+				.btn
+					&.active
+						border-color $inputBorderColor
+						background-color $primary20
+						color $secondary
+						&:hover
+							background-color $primary20
+			&--btn-tooltip
+				.tooltip
+					&:first-child
+						.btn
+							border-radius $borderRadius 0 0 $borderRadius
+					&:not(:first-child):not(:last-child)
+						.btn
+							border-width .1rem .1rem .1rem 0
+							border-radius 0
+					&:last-child
+						.btn
+							border-radius 0 $borderRadius $borderRadius 0
+							border-width .1rem .1rem .1rem 0

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

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

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

@@ -1,56 +1,73 @@
-$demoResultHeaders = 6rem
-$demofilterWidth = 27.4rem
+
 .demo
 	fullwh()
 	margin 6rem auto
 	.title
 		font-size $title3
+	pre
+	code
+		font-size $fontSizeDemo - .1
 	&__header
 		fullw()
 		position relative
 	&__content
 		fullw()
 		br()
+		font-size $fontSizeDemo
 		overflow hidden
 		position relative
-		box-shadow 0 0 3rem rgba($logo2, .15)
-		color #fff
+		// box-shadow 0 0 3rem rgba($logo2, .15)
+		box-shadow 0 .3rem 1rem rgba($secondary, .15)
 	&__showcase
 	&__data
 		display flex
 	&__filters
-		font-size 1.5rem
-		font-weight 700
-		padding 3.2rem 2.6rem
+		border-right .1rem solid rgba($secondary, .1)
+		padding $demoPadding + .4 $demoPadding
 		width $demofilterWidth
-		min-height 71rem
-		background-color rgba($logo2, .82)
+		background-color $light// rgba($logo2, .82)
+		padding-bottom 2.6rem
+		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 $logo2
+		background-color $light
+		.map
+			width 100%
+			height 100%
 	&__results
-		font-size 1.5rem
-		font-weight 700
 		width $demofilterWidth
 		display flex
 		flex-direction column
+		border-right .1rem solid rgba($secondary, .1)
+		flex-shrink 0
 		&__header
 			display flex
 			align-items center
 			flex-shrink 0
-			padding 0 2.6rem
-			height $demoResultHeaders
-			background-color $logo2
+			font-size $fontSizeDemo - .1
+			padding 0 $demoPadding
+			height $footerDemoHeight
+			background-color $inputBgColor
+			font-weight 600
 		&__content
 			font-weight 400
 			color $textColor
-			padding 3.2rem 2.6rem
-			min-height $demofilterWidth
-			background-color #eff3ff
+			padding $demoPadding
+			
+			background-color $light
+			overflow-y auto
 	&__code
-		flex-grow 1
-		display flex
-		flex-direction column
+		font()
+		width 100%
 		&__header
 			display flex
 			align-items center
@@ -62,4 +79,165 @@ $demofilterWidth = 27.4rem
 			padding 2.6rem
 			background-color #fff
 			height 100%
+			
+	&__input-container
+		mbib(.6)
+	&__label
+		font-weight 500
+		margin-bottom .6rem
 
+	input
+		&:not([type=button]):not([type=checkbox]):not([type=radio]):not([type=textarea])
+			inputFont()
+			br($demoBr)
+			background-color $inputBgColor !important
+			border-color $inputBorderColor
+			font-size $inputFontSizeDemo
+			height $inputDemoHeight
+			padding 0 1rem 0 1rem
+	.mbi
+		mbi(.6)
+	.input
+		&__label
+			inputFont()
+			font-size $inputFontSizeDemo
+	.select
+	.asyncselect
+		inputFont()
+		font-size $inputFontSizeDemo
+		&__control
+			border-radius $demoBr !important
+			background-color $inputBgColor !important
+			min-height 2.4rem !important
+			height auto !important
+			&:not(.select__control--is-focused):not(.asyncselect__control--is-focused)
+				border-color $inputBorderColor !important
+		.css-g1d714-ValueContainer
+		.css-tlfecz-indicatorContainer
+			padding 0
+		.css-g1d714-ValueContainer
+			height 100%
+		.css-tlfecz-indicatorContainer
+			cursor pointer
+		&__input
+			input
+				height auto !important
+		&__placeholder
+			color $inputPlaceholderColor
+		&__dropdown-indicator
+		&__clear-indicator
+			padding 0
+		&__value-container
+			padding-left .6rem !important
+		&__indicator
+			padding-left .5rem !important
+			padding-right .5rem !important
+			svg
+				fill $activeColor
+		&__indicator-separator
+			background-color $activeColor
+		&__multi-value
+			background-color $activeColorDark !important
+			&__label
+				inputFont() !important
+				height 2.1rem
+				line-height 1.1rem
+				font-size $inputFontSizeDemo - .1 !important
+			&__remove
+				padding .2rem !important
+				
+			.flag
+				width 1.6rem
+				height 1.1rem
+		&__option
+			padding .6rem
+			.flag
+				margin 0 .6rem 0 0
+	&__filters
+		.btn
+			br(.2)
+			font-size $inputFontSizeDemo
+			line-height 2.2rem
+			padding 0 .8rem
+			height $inputDemoHeight
+			inputFont()
+			border-color $inputBorderColor
+			.active
+			&--primary
+				background-color $activeColor
+				border-color $activeColor
+			&--group
+				height 2.8rem
+				&-container
+					color $inputBgColor
+					.btn
+						&:first-child
+							border-radius 2rem 0 0 2rem
+						&:last-child
+							border-radius 0 2rem 2rem 0
+					&--light
+						.btn.active
+							background-color $activeColorDark
+							border-color $activeColorDark
+							color $inputBgColor
+					&.language
+					&.transportation
+						mbi(.4)
+						.btn
+							br(.3)
+							border 0
+							height 1.9rem
+							padding .2rem
+							&.active
+								background-color $light
+								box-shadow 0 0 .1rem .1rem $activeColorDark
+						.flag
+							width 2.2rem
+							height 1.5rem
+						&.transportation
+							.btn
+								height 2.8rem
+							img
+								max-width 2.4rem
+	&__code
+		.tab
+			&__header
+				height $footerDemoHeight
+				background-color $inputBgColor
+			&__content
+				padding $demoPadding
+				overflow auto
+				max-height 40rem
+		.btn
+			font-size $fontSizeDemo
+			&--tab
+				position relative
+				font-size $fontSizeDemo - .1
+				color rgba($secondary, .4)
+				&.active
+					font-weight 600
+					color $secondary
+				&--action
+					br(2)
+					inputFont()
+					padding 0 1rem
+					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/font.styl

@@ -1 +1 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,900;1,400;0,500;1,600;1,700;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,900;1,400;0,500;1,600;1,700;1,900&family=Roboto+Mono&display=swap');

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/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"