@woosmap/ui 4.34.0-beta.0 → 4.34.0-beta.1

package/package.json

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

package/src/components/Card/Card.styl

@@ -191,7 +191,7 @@
 						font-size $fontSizeSmall - .1
 						margin-top -.5rem
 						.icon
-							fill $logo5
+							stroke $logo5
 		&__footer
 			color $dark40
 		&--small
@@ -272,7 +272,7 @@
 		.card--traffic &
 			background $traffic
 		.icon
-			fill $light
+			stroke $light
 	&__image
 		flex-grow 1
 		flex-shrink 0

package/src/components/Card/SimpleCard.styl

@@ -61,7 +61,7 @@
 		position absolute
 		right 1rem
 		top 1.3rem
-		fill $favorite
+		stroke $favorite
 		.inline &
 			sq(1.8)
 			position unset

package/src/components/Demo/skeletondemo.styl

@@ -155,7 +155,7 @@
             padding-left .5rem !important
             padding-right .5rem !important
             svg
-                fill $activeColor
+                stroke $activeColor
         &__indicator-separator
             background-color $activeColor
         &__multi-value

package/src/components/Flash/Flash.styl

@@ -11,7 +11,7 @@
 		min-height $buttonHeight
 		padding .9rem $padding
 	.icon
-		fill $secondary
+		stroke $secondary
 		flex-shrink 0
 	&--shadowed
 		box-shadow 0 0 1rem $dark8
@@ -30,7 +30,7 @@
 		&.flash--inverse
 			color $flashSuccess
 			.icon
-				fill $flashSuccess
+				stroke $flashSuccess
 
 	&--tip
 		&:not(.flash--inverse)
@@ -39,7 +39,7 @@
 		&.flash--inverse
 			color $flashTipInverse
 			.icon
-				fill $flashTipInverse
+				stroke $flashTipInverse
 	
 	&--howto
 		&:not(.flash--inverse)
@@ -48,7 +48,7 @@
 		&.flash--inverse
 			color $flashHowto
 			.icon
-				fill $flashHowto
+				stroke $flashHowto
 
 	&--warning
 		&:not(.flash--inverse)
@@ -57,7 +57,7 @@
 		&.flash--inverse
 			color $flashWarning
 			.icon
-				fill $flashWarning
+				stroke $flashWarning
 
 	&--error
 		&:not(.flash--inverse)
@@ -66,7 +66,7 @@
 		&.flash--inverse
 			color $flashError
 			.icon
-				fill $flashError
+				stroke $flashError
 
 	&--info
 		&:not(.flash--inverse)
@@ -75,4 +75,4 @@
 		&.flash--inverse
 			color $flashInfo
 			.icon
-				fill $flashInfo
+				stroke $flashInfo

package/src/components/Icon/Icon.js

@@ -624,12 +624,12 @@ const Icons = {
 
 class Icon extends Component {
     render() {
-        const { icon, size, className, title, testId } = this.props;
+        const { icon, size, className, isFill, title, testId } = this.props;
         const IconComponent = Object.keys(Icons).includes(icon) ? Icons[icon] : Woosmap;
-
+        const classes = cl('icon', { 'btn--fill': isFill }, className);
         return (
             <IconComponent
-                className={cl('icon', className)}
+                className={classes}
                 data-testid={`${testId}-${icon}`}
                 width={size}
                 height={size}
@@ -640,16 +640,18 @@ class Icon extends Component {
 }
 
 Icon.defaultProps = {
-    size: 24,
+    size: 22,
     className: null,
     title: null,
     testId: 'icon',
+    isFill: false,
 };
 
 Icon.propTypes = {
     size: PropTypes.number,
     className: PropTypes.string,
     icon: PropTypes.string.isRequired,
+    isFill: PropTypes.bool,
     title: PropTypes.string,
     testId: PropTypes.string,
 };

package/src/components/Icon/icon-story.styl

@@ -24,6 +24,6 @@
 			stroke-linejoin round
 			&--fill
 				stroke-width: 0
-				fill $secondary
+				stroke $secondary
 			&:not(.icon--social-github):not(.icon--social-linkedin):not(.icon--social-facefook):not(.icon--big-commerce):not(.icon--fill)
 				fill: none

package/src/components/Label/Label.styl

@@ -12,7 +12,7 @@
 	margin .2rem 0
 	word-break break-all
 	.icon
-		fill $light
+		stroke $light
 	&--round
 		br(50)
 		sq($buttonHeight)
@@ -134,10 +134,10 @@
 		text-shadow none
 		.btn
 			.icon
-				fill $secondary70
+				stroke $secondary70
 			&:hover
 				.icon
-					fill $secondary70 !important
+					stroke $secondary70 !important
 	&--white
 		background-color $light
 		color $secondary
@@ -145,7 +145,7 @@
 		border .1rem solid $borderColor
 		.btn
 			.icon
-				fill $secondary40
+				stroke $secondary40
 			&:hover
 				.icon
-					fill $secondary40 !important
+					stroke $secondary40 !important

package/src/components/Modal/Modal.styl

@@ -57,7 +57,7 @@
 			right 2rem
 			cursor pointer
 			.icon
-				fill $light
+				stroke $light
 	&__footer
 	&__header
 		padding 1.8rem 2.4rem

package/src/components/ServiceMessage/ServiceMessage.styl

@@ -20,10 +20,10 @@
 		background-color $info
 	.btn
 		.icon
-			fill $light
+			stroke $light
 		&:hover
 			.icon
-				fill $success2
+				stroke $success2
 	&__text
 		textShadow()
 		font-size $fontSize + .1

package/src/components/SnackBar/SnackBar.styl

@@ -22,7 +22,7 @@
 	&--info
 		background-color $info
 	.icon
-		fill $light
+		stroke $light
 	&__text
 		textShadow()
 		font-size $fontSize + .1

package/src/components/Stepper/Stepper.styl

@@ -1,5 +1,5 @@
 .stepper
 	flexMiddle()
 	&--current
-		fill $primary
+		stroke $primary
 

package/src/styles/console/button.styl

@@ -36,7 +36,7 @@
 					&:hover
 						background-color $primary
 						.icon
-							fill $light
+							stroke $light
 				&.btn--loading
 					&:hover
 						background-color $primary
@@ -46,13 +46,13 @@
 						background-color transparent
 						border-color $inputBorderColor
 						.icon
-							fill $secondary
+							stroke $secondary
 			&.btn--important
 				&:disabled
 					&:hover
 						background-color $error
 						.icon
-							fill $light
+							stroke $light
 			&.btn--has-icon
 				&:not(.btn--mini):not(.btn--small):not(.btn--large)
 					mbi(.4)
@@ -66,7 +66,7 @@
 		textShadow()
 		color $light
 		.icon
-			fill $light
+			stroke $light
 			trans()
 		&.btn--loading:not(.btn--mini):not(.btn--small):not(.btn--large)
 			disableHoverEffect()
@@ -98,7 +98,7 @@
 		background-color $light
 		border .1rem solid $inputBorderColor
 		.icon
-			fill $secondary
+			stroke $secondary
 			trans()
 		&.btn--has-icon
 			&:not(.btn--mini):not(.btn--small):not(.btn--large)
@@ -117,7 +117,7 @@
 					cursor default
 					border-color $inputBorderColor
 					.icon
-						fill $secondary
+						stroke $secondary
 		&:disabled
 			opacity .4
 			cursor default
@@ -129,7 +129,7 @@
 						color $secondary
 						border-color $inputBorderColor
 						.icon
-							fill $secondary
+							stroke $secondary
 	&--transparent
 		btn()
 		background-color transparent
@@ -148,11 +148,11 @@
 				flex-shrink 0
 			&:hover
 				.icon
-					fill $light
+					stroke $light
 		&:hover
 			color $secondary
 			.icon
-				fill $light
+				stroke $light
 		&:disabled
 			opacity .3
 			&:hover
@@ -160,14 +160,14 @@
 				color $secondary
 				background-color transparent
 				.icon
-					fill $secondary
+					stroke $secondary
 	&--inverse
 		btn()
 		background-color transparent
 		border .1rem solid $light
 		color $light
 		.icon
-			fill $light
+			stroke $light
 		&.btn--has-icon
 			&:not(.btn--mini):not(.btn--small):not(.btn--large)
 				mbi(.4)
@@ -179,7 +179,7 @@
 			border-color $success
 			color $light
 			.icon
-				fill $light
+				stroke $light
 		&:disabled
 			opacity .3
 			&:hover
@@ -187,7 +187,7 @@
 				border-color $success
 				color $light
 				.icon
-					fill $light
+					stroke $light
 	&--dropdown-item
 		flexBtn()
 		ellipsis()
@@ -209,12 +209,12 @@
 		&--important
 			color $error
 			.icon
-				fill $error
+				stroke $error
 		&:disabled
 			color $secondary40
 			cursor default
 			.icon
-				fill $secondary40
+				stroke $secondary40
 			&:hover
 				background-color transparent
 				cursor default
@@ -238,7 +238,7 @@
 			text-decoration underline
 			color $primary
 			.icon
-				fill $primary
+				stroke $primary
 		&:disabled
 			cursor default
 			opacity .3
@@ -247,15 +247,15 @@
 				opacity .3
 				text-decoration underline
 				.icon
-					fill inherit
+					stroke inherit
 		.label &
 			&:hover
 				.icon
-					fill $light
+					stroke $light
 		.label.label--white &
 			&:hover
 				.icon
-					fill $secondary
+					stroke $secondary
 		&.btn--icon
 			padding 0
 			text-decoration none
@@ -312,13 +312,13 @@
 			color $primary
 			text-decoration none
 			.icon
-				fill $primary
+				stroke $primary
 		&:disabled
 			&:hover
 				color $primary
 				text-decoration none
 				.icon
-					fill $primary
+					stroke $primary
 	&--link
 	&--link-flex
 		text-decoration underline
@@ -326,31 +326,31 @@
 			color $secondary-medium40
 			.icon
 				trans()
-				fill $secondary-medium40
+				stroke $secondary-medium40
 			&:hover
 				color $primary
 				.icon
-					fill $primary
+					stroke $primary
 	&--link-primary
 		color $primary
 		.icon
-			fill $primary
+			stroke $primary
 		&:disabled
 			&:hover
 				color $primary
 				text-decoration none
 				.icon
-					fill $primary
+					stroke $primary
 	&--link-info
 	&--link-flex-info
 		color $info
 		.icon
-			fill $info
+			stroke $info
 		&:hover
 			color $primary
 			text-decoration underline
 			.icon
-				fill $primary
+				stroke $primary
 	&--link-info
 	&--link-flex-info
 	&--link-flex
@@ -394,7 +394,7 @@
 			border-color $secondary
 			background-color $secondary
 			.icon
-				fill $light
+				stroke $light
 			&:hover
 				background-color $secondary
 	&--group
@@ -417,7 +417,7 @@
 			border-color $secondary
 			background-color $secondary
 			.icon
-				fill $light
+				stroke $light
 			&:hover
 				background-color $secondary
 			&:disabled
@@ -425,18 +425,18 @@
 				border-color $secondary-medium15
 				color $light70
 				.icon
-					fill $light70
+					stroke $light70
 		&:disabled:not(.active)
 			color $secondary30
 			cursor default
 			.icon
-				fill $secondary30
+				stroke $secondary30
 			&:hover
 				border-color $inputBorderColor
 				color $secondary30
 				background-color transparent
 				.icon
-					fill $secondary30
+					stroke $secondary30
 		&-container
 			flexMiddle()
 			.btn
@@ -482,7 +482,7 @@
 		position relative
 		.icon
 			flex-shrink 0
-			fill $secondary-medium60
+			stroke $secondary-medium60
 			display none
 		.btn__label
 			ellipsis()
@@ -510,7 +510,7 @@
 			font-weight 700
 			color $tabBtnActive
 			.icon
-				fill $secondary
+				stroke $secondary
 			&:after
 				width 100%
 			&:hover
@@ -520,7 +520,7 @@
 			color $error
 			position relative
 			.icon
-				fill $error
+				stroke $error
 			&:before
 				content ''
 				position absolute
@@ -592,18 +592,18 @@
 		flexAxis()
 		sq($sidebarButtonSize)
 		.icon
-			fill $light
+			stroke $light
 		&:hover
 			background-color $dark15
 			.icon
-				fill $light
+				stroke $light
 		&.active
 			cursor default
 			background-color $dark20
 			&:hover
 				background-color $dark20
 				.icon
-					fill $light
+					stroke $light
 	&--notification
 		position relative
 		padding 0 .6rem !important

package/src/styles/console/icon.styl

@@ -3,8 +3,10 @@
 	stroke $secondary
 	stroke-linecap round
 	stroke-linejoin round
+	stroke-width .12rem
+	&:not(.icon--fill)
+		fill: none
 	&--fill
 		stroke-width: 0
 		fill $secondary
-	&:not(.icon--social-github):not(.icon--social-linkedin):not(.icon--social-facefook):not(.icon--big-commerce):not(.icon--fill)
-		fill: none
+	

package/src/styles/console/input.styl

@@ -19,7 +19,7 @@ input
 		margin .5rem 0 .5rem 0
 	&--iconed
 		.icon
-			fill $inputBorderColor
+			stroke $inputBorderColor
 			position absolute
 			left 1rem
 			top .7rem

package/src/styles/console/mixins.styl

@@ -51,7 +51,7 @@ hover()
 			background-color $buttonHover
 			color $light
 			.icon
-				fill $light
+				stroke $light
 disableHoverEffect()
 	&:hover
 		background-color $primary

package/src/styles/console/select.styl

@@ -29,7 +29,7 @@ select
 			.select__indicator
 			.asyncselect__indicator
 				svg
-					fill $secondary
+					stroke $secondary
 	&__value-container
 		padding-left 1rem !important
 	&__single-value
@@ -40,7 +40,7 @@ select
 		&-separator
 			background-color $secondary-medium25
 		svg
-			fill $secondary-medium25
+			stroke $secondary-medium25
 	&__placeholder
 		white-space nowrap
 		color $secondary-medium60
@@ -97,7 +97,7 @@ select
 		&__remove
 			cursor pointer
 		svg
-			fill $light !important
+			stroke $light !important
 	&--small
 		.select
 		.asyncselect