@woosmap/ui 2.48.0 → 2.49.0

package/package.json

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

package/src/components/Button/Button.js

@@ -25,12 +25,14 @@ export default class Button extends Component {
             active,
             children,
             testId,
+            iconRight,
             ...rest
         } = this.props;
         const classes = cl(
             'btn',
             { 'btn--has-icon': icon || isLoading },
             { 'btn--icon': isBtnIcon || (icon && !label) },
+            { 'btn--icon-right': iconRight },
             size ? `btn--${size}` : null,
             type ? `btn--${type}` : null,
             { active },
@@ -54,8 +56,9 @@ export default class Button extends Component {
                 className={classes}
                 data-testid={testId}
             >
-                {iconComponent}
+                {!iconRight ? iconComponent : null}
                 {label && <span className="btn__label">{isLoading ? tr('Loading...') : label}</span>}
+                {iconRight ? iconComponent : null}
                 {children}
             </button>
         );
@@ -76,6 +79,7 @@ Button.defaultProps = {
     isLoading: false,
     active: false,
     onClick: null,
+    iconRight: false,
 };
 
 Button.propTypes = {
@@ -104,10 +108,11 @@ Button.propTypes = {
     ]),
     isLoading: PropTypes.bool,
     active: PropTypes.bool,
-    label: PropTypes.oneOfType(PropTypes.string, PropTypes.node),
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
     icon: PropTypes.string,
     iconSize: PropTypes.number,
     className: PropTypes.string,
     onClick: PropTypes.func,
     children: PropTypes.node,
+    iconRight: PropTypes.bool,
 };

package/src/components/Button/Button.stories.js

@@ -23,7 +23,7 @@ const Template = (args) => {
             <div className="flex mbi">
                 <Button icon="add" />
                 <Button label={label} />
-                <Button label={label} icon="marker" />
+                <Button label={label} icon="marker" iconRight />
                 <Button label={label} isLoading />
                 <Button label={label} disabled />
             </div>
@@ -82,7 +82,7 @@ const Template = (args) => {
                 </span>
                 <span>
                     There is a labeled and iconed button link here : &nbsp;
-                    <Button label={label} icon="marker" type="link" />
+                    <Button label={label} icon="marker" iconRight type="link" />
                 </span>
                 <span>
                     There is a iconed button link here : &nbsp; <Button label={label} icon="clock" type="link" />

package/src/components/Dropdown/Dropdown.js

@@ -396,7 +396,7 @@ Dropdown.propTypes = {
     disabled: PropTypes.bool,
     disableCloseOutside: PropTypes.bool,
     openOnMouseEnter: PropTypes.bool,
-    label: PropTypes.oneOfType(PropTypes.string, PropTypes.node),
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
     testId: PropTypes.string,
     children: PropTypes.node.isRequired,
     className: PropTypes.string,

package/src/components/Icon/Icon.js

@@ -16,6 +16,7 @@ import { ReactComponent as ArrowBotton } from '../../icons/arrow-bottom.svg';
 import { ReactComponent as ArrowLeft } from '../../icons/arrow-left.svg';
 import { ReactComponent as ArrowRight } from '../../icons/arrow-right.svg';
 import { ReactComponent as ArrowTop } from '../../icons/arrow-top.svg';
+import { ReactComponent as ArrowLink } from '../../icons/arrow-link.svg';
 import { ReactComponent as Asset } from '../../icons/asset.svg';
 import { ReactComponent as AssetAddFile } from '../../icons/asset-add-file.svg';
 import { ReactComponent as AssetAdd } from '../../icons/asset-add.svg';
@@ -134,6 +135,7 @@ const Icons = {
     'arrow-left': ArrowLeft,
     'arrow-right': ArrowRight,
     'arrow-top': ArrowTop,
+    'arrow-link': ArrowLink,
     asset: Asset,
     'asset-add-file': AssetAddFile,
     'asset-add': AssetAdd,

package/src/icons/arrow-link.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m20.217 11.6-4.708-4.7a.56.56 0 1 0-.792.792l3.753 3.748H4.179a.56.56 0 1 0 0 1.12H18.47l-3.753 3.752a.56.56 0 0 0 .792.792l4.708-4.704a.559.559 0 0 0 0-.8Z"/></svg>

package/src/styles/console/button.styl

@@ -256,8 +256,12 @@
 			padding 0
 			text-decoration none
 		&.btn--has-icon
-			.icon
-				margin-right .3rem
+			&:not(.btn--icon-right)
+				.icon
+					margin-right .3rem
+			&.btn--icon-right
+				.icon
+					margin-left .3rem
 	&--link
 	&--link-primary
 	&--link-info
@@ -265,15 +269,28 @@
 			trans()
 			position relative
 			top .7rem
-			left -.3rem
-		&.btn--small
+		&:not(.btn--icon-right)
 			.icon
-				top .5rem
 				left -.3rem
-		&.btn--large
+			&.btn--small
+				.icon
+					top .5rem
+					left -.3rem
+			&.btn--large
+				.icon
+					top 1.2rem
+					left -.3rem
+		&.btn--icon-right
 			.icon
-				top 1.2rem
-				left -.3rem
+				right -.3rem
+			&.btn--small
+				.icon
+					top .5rem
+					rigth -.3rem
+			&.btn--large
+				.icon
+					top 1.2rem
+					rigth -.3rem
 	&--link-flex
 	&--link-flex-info
 		display flex
@@ -340,8 +357,11 @@
 			trans()
 
 	&--has-icon
-		&:not(.btn--icon):not(.btn--link):not(.btn--link-primary):not(.btn--link-info):not(.btn--link-flex):not(.btn--link-flex-info):not(.btn--loading):not(.btn--mini):not(.btn--small):not(.btn--large):not(.btn--dropdown-item):not(.btn--tab):not(.btn--sidebar-link)
+		&:not(.btn--icon):not(.btn--link):not(.btn--link-primary):not(.btn--link-info):not(.btn--link-flex):not(.btn--link-flex-info):not(.btn--loading):not(.btn--mini):not(.btn--small):not(.btn--large):not(.btn--dropdown-item):not(.btn--tab):not(.btn--sidebar-link):not(.btn--icon-right)
 			padding 0 $padding 0 $padding - .6
+		&:not(.btn--icon):not(.btn--link):not(.btn--link-primary):not(.btn--link-info):not(.btn--link-flex):not(.btn--link-flex-info):not(.btn--loading):not(.btn--mini):not(.btn--small):not(.btn--large):not(.btn--dropdown-item):not(.btn--tab):not(.btn--sidebar-link)
+			&.btn--icon-right
+				padding 0 $padding - .6 0 $padding
 	&--loading
 		&:not(.btn--icon):not(.btn--mini):not(.btn--small):not(.btn--large):not(.btn--sidebar-link)
 			padding-left $padding - .4