@woosmap/ui 3.29.0 → 3.33.0

package/.storybook/preview.js

@@ -36,12 +36,12 @@ let isConsoleStyle = false;
 
 
 if (mode === 'prod') {
-  import('../src/styles/style-next-website.styl');
+  import('../src/styles/style-website.styl');
   import('../src/styles/style-stories.styl');
 } else {
  import('../src/styles/style-stories.styl').then((storiesStyl) => {
    import('../src/styles/style-console.styl').then((consoleStylLoaded) => {
-     import('../src/styles/style-next-website.styl').then((websiteStylLoaded) => {
+     import('../src/styles/style-website.styl').then((websiteStylLoaded) => {
       const storeGlobals = sessionStorage.getItem('@storybook/preview/store');
       const globalTheme = storeGlobals ? JSON.parse(storeGlobals).globals.theme : null;
       const defaultStyle = urlParams.get('theme')|| globalTheme || "Website theme";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@woosmap/ui",
-  "version": "3.29.0",
+  "version": "3.33.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/WebGeoServices/ui.git"
@@ -28,7 +28,7 @@
   "scripts": {
     "start": "yarn storybook:dev",
     "build": "rimraf dist && NODE_ENV=production babel src --out-dir dist --copy-files --no-copy-ignored --ignore '**/*.stories.js,**/*.test.js,**/*.styl' && yarn build-css",
-    "build-css": "stylus ./src/styles/style-next-website.styl -o dist && stylus ./src/styles/style-console.styl -o dist && stylus ./src/styles/style-stories.styl -o dist",
+    "build-css": "stylus ./src/styles/style-website.styl -o dist && stylus ./src/styles/style-console.styl -o dist && stylus ./src/styles/style-stories.styl -o dist",
     "test": "react-scripts test",
     "test:generate-output": "react-scripts test --json --outputFile=./.storybook/jest-test-results.json --silent",
     "prestorybook:dev": "clear && echo \"DOING FIRST TEST RUN\" && CI=true npm run test:generate-output",

package/src/components/Dropdown/Dropdown.js

@@ -131,7 +131,7 @@ DropdownMenuSection.defaultProps = {
 
 DropdownMenuSection.propTypes = {
     children: PropTypes.node.isRequired,
-    title: PropTypes.string,
+    title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
     closeCb: PropTypes.func,
 };
 

package/src/components/Icon/Icon.js

@@ -4,7 +4,9 @@ import PropTypes from 'prop-types';
 import { ReactComponent as Autocomplete } from '../../icons/autocomplete.svg';
 import { ReactComponent as Buildings } from '../../icons/buildings.svg';
 import { ReactComponent as Battery } from '../../icons/battery.svg';
+import { ReactComponent as Care } from '../../icons/care.svg';
 import { ReactComponent as Cars } from '../../icons/cars.svg';
+import { ReactComponent as Elephant } from '../../icons/elephant.svg';
 import { ReactComponent as Github } from '../../icons/github.svg';
 import { ReactComponent as Green } from '../../icons/green.svg';
 import { ReactComponent as Integrations } from '../../icons/integrations.svg';
@@ -18,6 +20,7 @@ import { ReactComponent as PuzzleStar } from '../../icons/puzzle-star.svg';
 import { ReactComponent as SaveMoney } from '../../icons/save-money.svg';
 import { ReactComponent as Schedule } from '../../icons/schedule.svg';
 import { ReactComponent as Security } from '../../icons/security.svg';
+import { ReactComponent as Speed } from '../../icons/speed.svg';
 import { ReactComponent as World } from '../../icons/world.svg';
 import { ReactComponent as Zoom } from '../../icons/zoom.svg';
 
@@ -151,6 +154,8 @@ const Icons = {
     battery: Battery,
     buildings: Buildings,
     cars: Cars,
+    care: Care,
+    elephant: Elephant,
     github: Github,
     green: Green,
     integrations: Integrations,
@@ -164,6 +169,7 @@ const Icons = {
     'save-money': SaveMoney,
     schedule: Schedule,
     security: Security,
+    speed: Speed,
     world: World,
     zoom: Zoom,
 

package/src/icons/care.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 6.565A43.435 43.435 0 1 0 93.435 50 43.484 43.484 0 0 0 50 6.565ZM69.719 59.7a21.92 21.92 0 0 0 0-19.4l16.556-8.14a40.333 40.333 0 0 1 0 35.68Zm-38.7-9.7A18.981 18.981 0 1 1 50 68.981 19 19 0 0 1 31.019 50ZM69.8 14.763l-9.039 16.081a21.906 21.906 0 0 0-21.523 0L30.2 14.763a40.294 40.294 0 0 1 39.592 0ZM13.725 32.16l16.556 8.14a21.92 21.92 0 0 0 0 19.4l-16.556 8.14a40.333 40.333 0 0 1 0-35.68ZM30.2 85.237l9.035-16.082a21.9 21.9 0 0 0 21.524 0L69.8 85.237a40.3 40.3 0 0 1-39.594 0Z"/></svg>

package/src/icons/elephant.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="m95.025 68.21-2.86-16.245a30.086 30.086 0 0 0-29.322-29.9 17.218 17.218 0 0 0-21.149-4.613 21.861 21.861 0 0 0-21.348 21.824v20.262a14.162 14.162 0 0 1-3.162-1.96 1.5 1.5 0 1 0-1.908 2.315 17.148 17.148 0 0 0 5.07 2.9v6.3a2.086 2.086 0 1 1-4.171 0 1.5 1.5 0 0 0-1.732-1.482L6.219 68.9c-.011 0-.022.006-.033.008a1.429 1.429 0 0 0-.159.042c-.043.013-.087.023-.129.04s-.092.044-.137.067-.084.042-.123.067a1.426 1.426 0 0 0-.116.089 1.349 1.349 0 0 0-.11.09c-.035.034-.065.073-.1.11s-.062.069-.089.107-.051.085-.076.129a1.3 1.3 0 0 0-.066.122 1.357 1.357 0 0 0-.048.135 1.5 1.5 0 0 0-.045.144c-.01.043-.013.089-.019.134a1.265 1.265 0 0 0-.017.164v.033A12.844 12.844 0 0 0 17.8 83.2a14.776 14.776 0 0 0 14.54-14.721v-5.85a16.935 16.935 0 0 0 4.02-2.229v22.48a1.5 1.5 0 0 0 1.5 1.5h13.152a1.5 1.5 0 0 0 1.464-1.18h3.917a1.5 1.5 0 0 0 1.5-1.5v-9.764a25.678 25.678 0 0 0 6.49-.07V81.7a1.5 1.5 0 0 0 1.5 1.5h3.3a1.5 1.5 0 0 0 1.463 1.177h14.522a1.5 1.5 0 0 0 1.477-1.236l4.01-22.456 1.416 8.043a1.5 1.5 0 0 0 1.475 1.24 1.567 1.567 0 0 0 .263-.023 1.5 1.5 0 0 0 1.216-1.735Zm-65.69.272A11.76 11.76 0 0 1 17.777 80.2a9.834 9.834 0 0 1-9.734-8.557l5.427-.843a5.086 5.086 0 0 0 9.876-1.708v-5.52a17.018 17.018 0 0 0 5.989-.077ZM39.36 80.321h10.152v1.059H39.36Zm15.533-.121h-2.381v-9.469c.783.272 1.579.491 2.381.683Zm12.49-8.929c.591-.156 1.18-.323 1.759-.522V80.2h-1.759Zm4.759 10.109v-1.059H84.1l-.189 1.059Zm12.49-4.026a1.531 1.531 0 0 0-.313-.033H72.142V68.55a1.5 1.5 0 0 0-2.113-1.369 22.57 22.57 0 0 1-17.43.384l-1.035-.409a1.5 1.5 0 0 0-2.052 1.394v8.771H39.36V56.969a1.5 1.5 0 0 0-2.617-1l-.123.136a14.036 14.036 0 0 1-13.274 4.415V39.276A18.87 18.87 0 0 1 36.69 21.258a17.33 17.33 0 0 0-3.271 5.288 1.5 1.5 0 0 0 2.793 1.095 14.147 14.147 0 0 1 6.361-7.262 1.492 1.492 0 0 0 .586-.31 14.21 14.21 0 1 1 6.282 26.959 1.5 1.5 0 0 0 0 3 17.167 17.167 0 0 0 15.39-24.849 27.092 27.092 0 0 1 24.331 26.8Z"/><path d="M31.875 42.808a3 3 0 1 0 3 3 3 3 0 0 0-3-3Z"/></svg>

package/src/icons/speed.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M63.031 16.37A33.518 33.518 0 0 0 34.7 31.87a1.5 1.5 0 0 0 2.526 1.619 30.63 30.63 0 1 1 .4 33.636 1.5 1.5 0 1 0-2.48 1.675 33.632 33.632 0 1 0 27.885-52.43ZM26.686 31.182h-7a1.5 1.5 0 0 0 0 3h7a1.5 1.5 0 0 0 0-3ZM12.26 42.841h9.477a1.5 1.5 0 1 0 0-3H12.26a1.5 1.5 0 1 0 0 3ZM19.526 50a1.5 1.5 0 0 0-1.5-1.5H4.838a1.5 1.5 0 0 0 0 3h13.188a1.5 1.5 0 0 0 1.5-1.5Zm3.711 8.659a1.5 1.5 0 0 0-1.5-1.5H12.26a1.5 1.5 0 1 0 0 3h9.477a1.5 1.5 0 0 0 1.5-1.5Zm3.449 7.159h-7a1.5 1.5 0 0 0 0 3h7a1.5 1.5 0 0 0 0-3Z"/><path d="M65.194 60.851a1.5 1.5 0 0 0 2.121 2.121l11.912-11.911a1.5 1.5 0 0 0 0-2.122L67.315 37.028a1.5 1.5 0 0 0-2.121 2.121l9.351 9.351H30.9a1.5 1.5 0 1 0 0 3h43.645Z"/></svg>

package/src/styles/console/variables.styl

@@ -1,66 +1,24 @@
-$fontFamily = "Poppins", arial, sans-serif
-$fontSize = 1.8rem
-$lineHeight = $fontSize * 2 - .8
+$fontFamily = "Lato", arial, sans-serif
+$fontSize = 1.4rem
 $fontSizeSmall = $fontSize - .2
 $fontSizeMini  = $fontSize - .4
-$fontSizeNano  = $fontSize - .6
 $fontWeight = 400
-$fontSizeHeader = 1.3rem
-$fontSizeFooter = 1.6rem
 
 
-$title = 4.6rem
-$title2 = 4rem
-$title3 = 3.6rem
-$title4 = 3rem
-$title5 = 2.6rem
-$title6 = 2rem
+$title = $fontSize + .6
+$title2 = $fontSize + .4
+$title3 = $fontSize + .3
+$title4 = $fontSize + .2
+$title5 = $fontSize + .1
+$title6 = $fontSize
 
 $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 = 2rem
+$padding = 1.2rem
 $contentPadding = 2.8rem
 
-
-
 $sidebarButtonSize = 5rem
 
 $buttonHeight = 3.8rem
@@ -83,9 +41,9 @@ $buttonPaddingNano = 0 $padding - .4 0 $padding - .4
 $buttonFontSizeNano = $fontSize  - .3
 $buttonLineHeightNano = $buttonFontSizeNano * 2
 
-$buttonHeightLarge = $buttonHeight  + 1.2
-$buttonPaddingLarge = 0 $padding + .6 0 $padding + .6
-$buttonFontSizeLarge = $fontSize - .2
+$buttonHeightLarge = $buttonHeight  + .8
+$buttonPaddingLarge = 0 $padding + .4 0 $padding + .4
+$buttonFontSizeLarge = $fontSize + .1
 $buttonLineHeightLarge = $buttonFontSizeLarge * 2
 
 

package/src/styles/style-console.styl

@@ -9,12 +9,7 @@
 
 @import "./commons/__all.styl"
 @import "./commons/flags.styl"
-
 @import "./console/icon.styl"
-@import "./console/button.styl"
-@import "./console/input.styl"
-@import "./console/select.styl"
-@import "./console/tab.styl"
 
 //demos
 @import "./console/MerchantDemo.styl"
@@ -22,4 +17,10 @@
 
 
 // Style of all components
-@import "../components/**/*.styl"
+@import "../components/**/*.styl"
+
+// Console override
+@import "./console/button.styl"
+@import "./console/input.styl"
+@import "./console/select.styl"
+@import "./console/tab.styl"

package/src/styles/style-website.styl

@@ -10,16 +10,20 @@
 @import "./commons/__all.styl"
 @import "./commons/flags.styl"
 
+
+// Style of all components
+@import "../components/**/*.styl"
+
+
+//Website style override
+
+@import "./website/skeletonDemo.styl"
+@import "./website/MerchantDemo.styl"
+
 @import "./website/button.styl"
 @import "./website/input.styl"
 @import "./website/select.styl"
 @import "./website/tab.styl"
-
-//demos
-@import "./website/MerchantDemo.styl"
-@import "./website/skeletonDemo.styl"
-
-@import "./website/style.styl"
-
-// Style of all components
-@import "../components/**/*.styl"
+@import "./website/dropdown.styl"
+@import "./website/popover.styl"
+@import "./website/card.styl"

package/src/styles/website/MerchantDemo.styl

@@ -1,25 +1,35 @@
 .merchant
+	&__wrapper
+		trans()
+		display flex
+		justify-content center
+		align-items center
+		height 100%
+		width 100%
+		zoom .9
+		padding 2rem
+		background-color #d5eaff
 	&__mobilewrapper
+		trans()
 		position relative
-		height 58.2rem
-		overflow hidden
-		flex-grow 1
+		margin 3rem
 	&__mobilecontainer
 		position relative
-		height 100%
+		height 51.9rem
 		width 28rem
 		margin auto
+		box-shadow 0 0 .4rem .1rem rgba($secondary, .1)
+		br(1)
 		&__title
 			text-align center
-			color $light
-			font-size 1.7rem
+			font-size 1.2rem
 			font-weight 600
-			margin 1rem 0 2rem 0
+			margin 0 0 1rem 0
 	&__mobile
+		br(1)
+		font-size 1.3rem
 		width 100%
-		height 52.9rem
 		background-color $light
-		br(2)
 		overflow hidden
 		&--dirty
 		&--details--dirty
@@ -30,63 +40,69 @@
 			.merchant__mobile__header
 				background #4F70FF
 		&--details
-			height 52.9rem
+			position relative
 		&__header
-			padding 1.6rem
+			padding 1.1rem
 			color #fff
 			text-transform uppercase
-			font-size 1.7rem
 			font-weight 600
 			&__nav
 			&__icons
 				flexSpread()
 			&__icons
 				img
-					max-height 1.2rem
+					max-height .8rem
 			&__nav
-				margin-top 2rem
+				font-weight 700
+				margin-top 1.4rem
 				position relative
 				.merchant__mobile--details &
 				.merchant__mobile--details--dirty &
 					flexAxis()
 				&__avatar
-					max-width 3.2rem
+					max-width 2.4rem
 				&__back
-					max-width 1.4rem
+					max-width 1rem
 					opacity 0
 					.merchant__mobile--details &
 					.merchant__mobile--details--dirty &
 						opacity 1
 				&__button
+					sq(3)
 					position absolute
 					background-color transparent
-					left -1.2rem
+					left -.6rem
+					padding 0
+					display flex
+					align-items center
+					justify-content center
+					flex-shrink 0
 					&:hover
 						background-color $dark30
 
 		&__section
-			font-size 1.5rem
 			padding 1.4rem 2rem
-			height 100%
-			overflow auto
+			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 &
-				border .1rem solid $dark20
-				background-color $dark3
-				margin 2rem
-				br(1)
-				height auto
-				overflow hidden
+				background-color $light
+				padding 2rem
 			&__map
 				overflow hidden
 				height 20rem
 			&__no-map
 				height 6rem
 			&__date
-				color #C8C8C7
-				font-size 1.4rem
-				margin-bottom 1.6rem
+				color #b7b7b7
+				margin-bottom .6rem
+				.merchant__mobile--clean &
+					color #8697b1
 				.merchant__mobile--details &
 				.merchant__mobile--details--dirty &
 					text-align center
@@ -95,16 +111,19 @@
 					margin 0 0 2rem 0
 			&__transaction
 				flexSpread()
-				br(1)
+				br(.6)
 				trans()
+				background-color $light
+				font-size 1.3rem
 				cursor pointer
-				height 6.2rem
-				padding .8rem
-				box-shadow 0 0 1rem $dark10
+				height 4.8rem
+				padding 0 .8rem
+				box-shadow 0 0 .3rem .1rem $dark10
 				width 100%
-				margin-bottom 1.2rem
+				margin-bottom .8rem
 				&:hover
 					background-color #666767
+					transform translateX(.5rem)
 					.merchant__mobile--clean &
 						background-color #4F70FF
 					.merchant__mobile__section__transaction
@@ -135,7 +154,7 @@
 						color#999
 						text-align center
 					&__logo
-						sq(4.6)
+						sq(3)
 						br(50)
 						position relative
 						margin-right 1.2rem
@@ -146,7 +165,7 @@
 						img
 							ellipsis()
 							br(50)
-							sq(4.6)
+							sq(3)
 							background #fff
 							border .1rem solid #f1f1f1
 							box-shadow 0 0 .6rem $dark10
@@ -161,15 +180,19 @@
 					&__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 #7E7F7F
+						color #a1a1a1
 						font-size 1.2rem
+						line-height 1.4rem
 				&__price
-					font-weight 600
+					font-weight 700
+					font-size 1.5rem
 					.merchant__mobile--details &
 					.merchant__mobile--details--dirty &
 						margin-top 1rem
@@ -180,24 +203,20 @@
 					.merchant__mobile--details--dirty &
 						font-size 3.5rem
 
-@media screen and (max-width 660px)
+@media screen and (max-width 760px)
 	.merchant
 		&__mobilewrapper
-			margin-right 0 !important
-@media screen and (max-width 370px)
+			margin 0 1rem
+@media screen and (max-width 660px)
 	.merchant
-		&__mobilewrapper
-			width 100%
-		&__mobilecontainer
-			width 100%
-			&__title
-				color #454545
-		&__mobile__section__transaction
-			font-size 85%
-@media screen and (max-width 350px)
+		&__wrapper
+			zoom .7
+@media screen and (max-width 469px)
+	.merchant
+		&__wrapper
+			zoom .6
+@media screen and (max-width 400px)
 	.merchant
-		&__mobile__section__transaction__info__logo
-		&__mobile__section__transaction__info__logo img
-			sq(3.6)
-		
+		&__wrapper
+			zoom .45