@woosmap/ui 3.32.0 → 3.36.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.32.0",
+  "version": "3.36.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/{styles/next-website/demo.styl → components/Demo/skeletondemo.styl}

@@ -3,6 +3,7 @@
 	fullwh()
 	margin auto
 	color $secondary
+	line-height 2.2rem
 	.title
 		font-size $title3
 	pre
@@ -22,6 +23,7 @@
 	&__showcase
 	&__data
 		display flex
+		background-color $light
 	&__filters
 		border-right .1rem solid rgba($secondary, .1)
 		padding $demoPadding + .4 $demoPadding
@@ -46,6 +48,7 @@
 			height 100%
 			background-color $inputDemoBgColor
 	&__results
+		inputFont()
 		width $demofilterWidth
 		display flex
 		flex-direction column
@@ -64,28 +67,17 @@
 			font-weight 400
 			color $textColor
 			padding $demoPadding
-			
 			background-color $light
 			overflow-y auto
 	&__code
-		font()
+		inputFont()
 		width 100%
-		&__header
-			display flex
-			align-items center
-			flex-shrink 0
-			padding 0 2.6rem
-			height $demoResultHeaders
-			background-color rgba($logo2, .82)
-		&__content
-			padding 2.6rem
-			background-color #fff
-			height 100%
-			
 	&__input-container
 		mbib(.6)
 	&__label
-		font-weight 500
+		inputFont()
+		font-size $inputFontSizeDemo
+		font-weight 600
 		margin-bottom .6rem
 
 	input
@@ -183,6 +175,7 @@
 				&-container
 					color $inputDemoBgColor
 					.btn
+						padding 0 1.1rem
 						&:first-child
 							border-radius 2rem 0 0 2rem
 						&:last-child
@@ -196,7 +189,7 @@
 					&.transportation
 						mbi(.6)
 						.btn
-							br(.3)
+							border-radius .3rem !important
 							border 0
 							height 2.2rem
 							padding .4rem
@@ -220,29 +213,13 @@
 				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 !important
-					border .1rem solid $activeColor
-					color darken($activeColor, 20%)
 	&--address
 		&__formcontainer
-			mbib(.9)
 			.input
 				&__label
-					margin-bottom .2rem
-
+					margin-bottom .4rem
+				&__line
+					margin-bottom 1rem
 @media screen and (max-width 769px)
 	.demo__showcase
 		max-height 100%

package/src/styles/console/button.styl

@@ -559,21 +559,13 @@
 					color $secondary
 					background-image url('../../images/texture.png')
 		&--action
-			br()
+			br(2)
+			inputFont()
 			trans()
-			flexBtn()
-			height auto
-			font-size 1.1rem
-			letter-spacing 0.1rem
-			line-height 1
-			margin-left auto
-			background-color $light
-			border 0.1rem solid $secondary-light
 			padding 0 1rem
-			height 2.4rem
-			color $secondary
-			transition 0.3s all
-			text-transform uppercase
+			font-size $inputFontSizeDemo !important
+			border .1rem solid $activeColor
+			color darken($activeColor, 20%)
 			&:hover
 			&.copied
 				background-color $success

package/src/styles/console/colors.styl

@@ -1,6 +1,16 @@
 // Texts & Components
 $textColor = $secondary
 
+
+$activeColor = #7f98b3
+$activeColorDark = #4c657e
+
+//new version of demos
+$inputDemoBgColor = #f6f7f8
+$inputDemoBorderColor = #bcc4d7
+$inputDemoPlaceholderColor = #818ca5
+
+
 // Main colors
 
 $primary = rgba(85, 134, 255, 1) // 5586F8
@@ -272,56 +282,43 @@ $light1 = rgba(255, 255, 255, .01)
 
 // Products
 
-$localitiesDark = rgba(0, 152, 220, 1) // #00b0ff
-$localities = rgba(0, 176, 255, 1) // #00B0FF
-$localities10 = rgba(0, 176, 255, .1)
+$search = #388aff
+$search10 = rgba($search, .1)
+$searchDark = #0D63DD
 
-$geolocationDark = rgba(1, 175, 73, 1) // #01af49
-$geolocation = rgba(0, 200, 83, 1) // #00c853
-$geolocation10 = rgba(0, 200, 83, .1)
-
-$distanceDark = rgba(255, 115, 0, 1) // #FF7300
-$distance = rgba(255, 145, 0, 1) // #FF9100
-$distance10 = rgba(255, 145, 0, .1)
-
-$storesDark = rgba(37, 109, 212, 1) // #256dd4
-$stores = rgba(56, 138, 255, 1) // #388aff
-$stores10 = rgba(56, 138, 255, .1)
-
-$addressDark = rgba(59, 179, 195, 1) // #38b3c3
-$address = rgba(77, 208, 255, 1) //  #4dd0ff
-$address10 = rgba(77, 208, 255, .1)
+$localities = #009DFF
+$localities10 = rgba($localities, .1)
+$localitiesDark = #0085D8
 
-$mapDark = rgba(134,  106, 96, 1) // #866a60
-$map = rgba(161, 136, 127, 1) // #A1887F
-$map10 = rgba(161, 136, 127, .1)
+$address = #4AC6F2
+$address10 = rgba($address, .1)
+$addressDark = #0D9ED1
 
-$merchantDark = rgba(81, 107, 119, 1) // #516b77
-$merchant = rgba(120, 144, 156, 1) // #78909C
-$merchant10 = rgba(120, 144, 156, .1)
+$multiSearch = #688FCE
+$multiSearch10 = rgba($multiSearch, .1)
+$multiSearchDark = #3A68B2
 
-$trafficDark = rgba(2165, 46, 111, 1)// #D82E6F
-$traffic = rgba(255, 124, 129, 1) // #ff7c81
-$traffic10 = rgba(255, 124, 129, .1)
+$geolocation = #506BDE
+$geolocation10 = rgba($geolocation, .1)
+$geolocationDark = #1F40CC
 
 
-// Products
+$merchant = #7F8A98
+$merchant10 = rgba($merchant, .1)
+$merchantDark = #4F5D6E
 
-$stores = #388aff
-$stores10 = rgba($stores, .1)
-$storesDark = #0D63DD
+$storeLocator = #82A1A7
+$storeLocator10 = rgba($storeLocator, .1)
+$storeLocatorDark = #546D72
 
-$localities = #009DFF
-$localities10 = rgba($localities, .1)
-$localitiesDark = #0085D8
+$geofencing = #939AB1
+$geofencing10 = rgba($geofencing, .1)
+$geofencingDark = #59617C
 
-$geolocation = #506BDE
-$geolocation10 = rgba($geolocation, .1)
-$geolocationDark = #1F40CC
+$connectors = #A193BC
+$connectors10 = rgba($connectors, .1)
+$connectorsDark = #6C5E88
 
-$address = #4AC6F2
-$address10 = rgba($address, .1)
-$addressDark = #0D9ED1
 
 $distance = #FF8A65
 $distance10 = rgba($distance, .1)
@@ -331,12 +328,16 @@ $traffic = #FF6565
 $traffic10 = rgba($traffic, .1)
 $trafficDark = #E04B4B
 
+
 $map = #A1887F
 $map10 = rgba($map, .1)
 $mapDark = #906455
 
-$merchant = #08A278
-$merchant10 = rgba($merchant, .1)
-$merchantDark = #008863
+$mapping = #B9715A
+$mapping10 = rgba($mapping, .1)
+$mappingDark = #96503A
 
 
+$showcases = #68668E
+$showcases10 = rgba($showcases, .1)
+$showcasesDark = #444177

package/src/styles/console/fonts.styl

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

package/src/styles/console/mixins.styl

@@ -25,6 +25,9 @@ br($a = $borderRadius)
 	}
 	border-radius $a
 
+inputFont()
+	font-family $fontFamily2
+
 // Border and shadow style of dropdowns
 box()
 	br()

package/src/styles/console/tab.styl

@@ -39,9 +39,59 @@
 		.tab__content
 			padding $buttonPadding
 			margin-top $buttonPadding
+
+
+.demo__code
+	$tabPadding = 2rem
+	.tab
+		height 100%
+		pre
+		code
+			margin 0 !important
+			padding 0  !important
+			background-color transparent !important
+			width 100%
+		&__header
+			padding 0 $tabPadding
+			flex-shrink 0
+			display flex
+			align-items center
+			justify-content space-between
+			&__buttons
+				display flex
+				align-items center
+				mbi(3)
+				fullw()
+				position relative
+				li
+					min-width 0
+				.btn--tab
+					height auto
+					font-size $fontSizeDemo - .1
+					&:after
+						top 2.7rem
+		&__content
+			line-height 1.2
+			margin 0
+			padding 1.6rem
+			overflow auto
+			max-height 40rem
+			&.active
+				display flex
+				height 100%
 @media screen and (max-width 720px)
 	.tab
 		&__header
 			&__buttons
 				mbi(0)
-		
+@media screen and (max-width 670px)
+	.demo__code
+		.tab
+			&__header
+				padding 0 1.2rem
+				&__buttons
+					mbi(1)
+					.btn
+						font-size 70%
+			&__content
+				padding $tabPadding - .5

package/src/styles/console/variables.styl

@@ -1,4 +1,6 @@
 $fontFamily = "Lato", arial, sans-serif
+$fontFamily2 = 'Roboto Mono', monospace
+
 $fontSize = 1.4rem
 $fontSizeSmall = $fontSize - .2
 $fontSizeMini  = $fontSize - .4
@@ -14,6 +16,16 @@ $title6 = $fontSize
 
 $borderRadius = .6rem
 
+
+//new version of demos
+$demofilterWidth = 27.4rem
+$fontSizeDemo = 1.3rem
+$demoPadding = 1.6rem
+$demoBr = .3rem
+$inputFontSizeDemo = 1.1rem
+$inputDemoHeight = 3rem
+$footerDemoHeight = 4rem
+
 // Buttons & Inputs
 
 $padding = 1.2rem

package/src/styles/style-console.styl

@@ -9,17 +9,14 @@
 
 @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"
-@import "./console/skeletondemo.styl"
 
 
 // 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,15 @@
 @import "./commons/__all.styl"
 @import "./commons/flags.styl"
 
+
+// Style of all components
+@import "../components/**/*.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"