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

package/package.json

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

package/src/components/Button/Button.js

@@ -15,6 +15,7 @@ export default class Button extends Component {
             size,
             type,
             icon,
+            isFillIcon,
             iconSize,
             isBtnIcon,
             className,
@@ -40,10 +41,10 @@ export default class Button extends Component {
             isNotification ? 'btn--notification' : null,
             { 'btn--loading': isLoading },
             { 'btn--no-label': !label },
-            { 'btn--custom-icon-size': iconSize && iconSize !== 24 },
+            { 'btn--custom-icon-size': iconSize && iconSize !== 22 },
             className
         );
-        let iconComponent = icon ? <Icon size={iconSize} icon={icon} /> : null;
+        let iconComponent = icon ? <Icon isFill={isFillIcon} size={iconSize} icon={icon} /> : null;
         if (isLoading) {
             iconComponent = <Icon icon="load" />;
         }
@@ -77,12 +78,13 @@ Button.defaultProps = {
     className: '',
     label: '',
     icon: null,
-    iconSize: 24,
+    iconSize: 22,
     isLoading: false,
     active: false,
     onClick: null,
     iconRight: false,
     isNotification: false,
+    isFillIcon: false,
 };
 
 Button.propTypes = {
@@ -119,4 +121,5 @@ Button.propTypes = {
     children: PropTypes.node,
     iconRight: PropTypes.bool,
     isNotification: PropTypes.bool,
+    isFillIcon: PropTypes.bool,
 };

package/src/components/Button/ButtonSwitch.js

@@ -20,7 +20,7 @@ ButtonSwitch.defaultProps = {
     label: '',
     icon: null,
     activeIcon: null,
-    iconSize: 24,
+    iconSize: 22,
     isLoading: false,
     active: false,
     onClick: null,

package/src/components/Card/Card.js

@@ -280,7 +280,7 @@ Card.defaultProps = {
     active: false,
     onClick: null,
     product: null,
-    iconSize: 38,
+    iconSize: 36,
     isClickable: false,
     noBorder: false,
     isNew: false,

package/src/components/Card/SimpleCard.js

@@ -43,6 +43,8 @@ class SimpleCard extends Component {
                         className="simplecard__favorite"
                         title={tr('Favorite Project')}
                         icon="star-filled"
+                        isFill
+                        size={18}
                         data-testid={`${testId}-icon`}
                     />
                 )}

package/src/components/Card/SimpleCard.styl

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

package/src/components/Dropdown/Dropdown.js

@@ -426,7 +426,7 @@ Dropdown.defaultProps = {
     openOnMouseEnter: false,
     btnFace: 'link-flex',
     btnFaceIcon: 'caret-bottom',
-    btnFaceIconSize: 24,
+    btnFaceIconSize: 22,
     btnTooltipText: null,
     btnTooltipDirection: null,
     testId: 'dropdown',

package/src/components/Flash/Flash.js

@@ -6,7 +6,7 @@ import Icon from '../Icon/Icon';
 export default class Flash extends Component {
     render() {
         const { children, icon, inverse, fill, type, shadowed, testId, ...rest } = this.props;
-        const iconComponent = icon ? <Icon size={24} icon={icon} /> : null;
+        const iconComponent = icon ? <Icon icon={icon} /> : null;
         return (
             <div
                 className={cl(

package/src/components/Icon/Icon.js

@@ -120,6 +120,7 @@ import { ReactComponent as AdminKey } from '../../icons/admin-key.svg';
 import { ReactComponent as AdminTool } from '../../icons/admin-tool.svg';
 import { ReactComponent as Agenda } from '../../icons/agenda.svg';
 import { ReactComponent as AlphabeticalOrder } from '../../icons/alphabetical-order.svg';
+import { ReactComponent as AlphabeticalOrderReversed } from '../../icons/alphabetical-order-reversed.svg';
 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';
@@ -134,6 +135,7 @@ import { ReactComponent as CaretTop } from '../../icons/caret-top.svg';
 import { ReactComponent as Charts } from '../../icons/charts.svg';
 import { ReactComponent as Check } from '../../icons/check.svg';
 import { ReactComponent as Clock } from '../../icons/clock.svg';
+import { ReactComponent as ClockReversed } from '../../icons/clock-reversed.svg';
 import { ReactComponent as Close } from '../../icons/close.svg';
 import { ReactComponent as Code } from '../../icons/code.svg';
 import { ReactComponent as Company } from '../../icons/company.svg';
@@ -143,6 +145,7 @@ import { ReactComponent as Dashboard } from '../../icons/dashboard.svg';
 import { ReactComponent as Delete } from '../../icons/delete.svg';
 import { ReactComponent as Documentation } from '../../icons/documentation.svg';
 import { ReactComponent as Dollar } from '../../icons/dollar.svg';
+import { ReactComponent as Dot } from '../../icons/dot.svg';
 import { ReactComponent as DotFill } from '../../icons/dot-fill.svg';
 import { ReactComponent as Edit } from '../../icons/edit.svg';
 import { ReactComponent as Email } from '../../icons/email.svg';
@@ -152,7 +155,6 @@ import { ReactComponent as Expand } from '../../icons/expand.svg';
 import { ReactComponent as Export } from '../../icons/export.svg';
 import { ReactComponent as Flag } from '../../icons/flag.svg';
 import { ReactComponent as Forbidden } from '../../icons/forbidden.svg';
-
 import { ReactComponent as Globe } from '../../icons/globe.svg';
 import { ReactComponent as Hourglass } from '../../icons/hourglass.svg';
 import { ReactComponent as Import } from '../../icons/import.svg';
@@ -181,7 +183,10 @@ import { ReactComponent as StarFilled } from '../../icons/star-filled.svg';
 import { ReactComponent as Support } from '../../icons/support.svg';
 import { ReactComponent as Switch } from '../../icons/switch.svg';
 import { ReactComponent as Team } from '../../icons/team.svg';
+import { ReactComponent as Time } from '../../icons/time.svg';
 import { ReactComponent as User } from '../../icons/user.svg';
+import { ReactComponent as ViewCard } from '../../icons/view-card.svg';
+import { ReactComponent as ViewList } from '../../icons/view-list.svg';
 import { ReactComponent as Warning } from '../../icons/warning.svg';
 import { ReactComponent as Woosmap } from '../../icons/woosmap.svg';
 import { ReactComponent as Address } from '../../icons/address.svg';
@@ -189,6 +194,7 @@ import { ReactComponent as Distance } from '../../icons/distance.svg';
 import { ReactComponent as Geolocation } from '../../icons/geolocation.svg';
 import { ReactComponent as Localities } from '../../icons/localities.svg';
 import { ReactComponent as Map } from '../../icons/map.svg';
+
 import { ReactComponent as Merchant } from '../../icons/merchant.svg';
 import { ReactComponent as Stores } from '../../icons/stores.svg';
 import { ReactComponent as Traffic } from '../../icons/traffic.svg';
@@ -428,6 +434,7 @@ const ConsoleIcons = {
     'administration-tool': AdministrationTool,
     agenda: Agenda,
     'alphabetical-order': AlphabeticalOrder,
+    'alphabetical-order-reversed': AlphabeticalOrdedReversef,
     'arrow-bottom': ArrowBotton,
     'arrow-left': ArrowLeft,
     'arrow-right': ArrowRight,
@@ -442,6 +449,7 @@ const ConsoleIcons = {
     charts: Charts,
     check: Check,
     clock: Clock,
+    'clock-reversed': ClockReversed,
     close: Close,
     code: Code,
     company: Company,
@@ -451,6 +459,7 @@ const ConsoleIcons = {
     delete: Delete,
     documentation: Documentation,
     dollar: Dollar,
+    dot: Dot,
     'dot-fill': DotFill,
     edit: Edit,
     email: Email,
@@ -493,7 +502,10 @@ const ConsoleIcons = {
     support: Support,
     switch: Switch,
     team: Team,
+    time: Time,
     user: User,
+    'view-card': ViewCard,
+    'view-list': ViewList,
     warning: Warning,
     woosmap: Woosmap,
 
@@ -626,7 +638,7 @@ class Icon extends Component {
     render() {
         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);
+        const classes = cl('icon', { 'icon--fill': isFill }, className);
         return (
             <IconComponent
                 className={classes}

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

@@ -22,8 +22,9 @@
 			stroke $secondary
 			stroke-linecap round
 			stroke-linejoin round
+			&:not(.icon--fill)
+				fill none
 			&--fill
 				stroke-width: 0
 				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/Input/Input.js

@@ -52,16 +52,16 @@ export default class Input extends Component {
 
         switch (iconSize) {
             case 'normal':
-                iconSize = 24;
+                iconSize = 22;
                 break;
             case 'large':
-                iconSize = 26;
+                iconSize = 24;
                 break;
             case 'small':
-                iconSize = 22;
+                iconSize = 20;
                 break;
             default:
-                iconSize = 24;
+                iconSize = 22;
         }
         return (
             <div className="input__container">

package/src/components/Label/Label.js

@@ -41,7 +41,14 @@ export default class Label extends Component {
                     </span>
                 )}
                 {closable && (
-                    <Button type="link-flex" iconSize={12} icon="close" onClick={closeCb} testId={`${testId}-button`} />
+                    <Button
+                        type="link-flex"
+                        className="icon--thicker"
+                        iconSize={10}
+                        icon="close"
+                        onClick={closeCb}
+                        testId={`${testId}-button`}
+                    />
                 )}
             </span>
         );

package/src/icons/alphabetical-order-reversed.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><line x1="16.744" y1="17.315" x2="16.744" y2="6.54"/><polyline points="20.382 14.949 16.781 18.55 13.17 14.94"/><polyline points="3.62 19.289 6.202 12.924 8.706 19.289"/><line x1="4.267" y1="17.694" x2="8.079" y2="17.694"/><polyline points="3.62 4.711 8.706 4.711 3.618 9.799 8.684 9.799"/></svg>

package/src/icons/clock-reversed.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polyline points="16.137 10.357 12.037 13.103 7.54 8.557"/><polyline points="14.678 17.975 19.248 17.975 19.248 22.431"/><path d="m21.177,13.911c.128-.617.195-1.256.195-1.911,0-5.176-4.196-9.372-9.372-9.372S2.628,6.824,2.628,12s4.196,9.372,9.372,9.372c2.911,0,5.513-1.328,7.232-3.41"/></svg>

package/src/icons/clock.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polyline points="16.137 10.357 12.037 13.103 7.54 8.557"/><circle cx="12" cy="12" r="9.372"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polyline points="9.322 17.975 4.752 17.975 4.752 22.431"/><polyline points="16.137 10.357 12.037 13.103 7.54 8.557"/><path d="m2.823,13.911c-.128-.617-.195-1.256-.195-1.911C2.628,6.824,6.824,2.628,12,2.628s9.372,4.196,9.372,9.372-4.196,9.372-9.372,9.372c-2.911,0-5.513-1.328-7.232-3.41"/></svg>

package/src/icons/dot.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12.174" cy="12" r="3.231"/></svg>

package/src/icons/time.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polyline points="16.137 10.357 12.037 13.103 7.54 8.557"/><circle cx="12" cy="12" r="9.372"/></svg>

package/src/icons/view-card.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="2" y="4.841" width="20" height="14.318" rx="3.771" ry="3.771"/><line x1="5.914" y1="8.57" x2="18.449" y2="8.57"/><line x1="5.914" y1="11.64" x2="14.949" y2="11.64"/><circle cx="6.592" cy="15.049" r=".339"/><circle cx="9.192" cy="15.049" r=".339"/><circle cx="11.793" cy="15.049" r=".339"/></svg>

package/src/icons/view-list.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="2" y="6.047" width="19.389" height="4.527" rx="2.263" ry="2.263"/><rect x="2" y="13.103" width="19.389" height="4.527" rx="2.263" ry="2.263"/><line x1="16.315" y1="8.31" x2="4.573" y2="8.31"/><line x1="4.573" y1="15.366" x2="10.056" y2="15.366"/></svg>

package/src/styles/console/button.styl

@@ -21,7 +21,7 @@
 			&.btn--loading
 				padding 0
 				.icon
-					sq(2.4)
+					sq(2.2)
 			&.btn--small
 				buttonSmall()
 				width $buttonHeightSmall
@@ -72,7 +72,7 @@
 			disableHoverEffect()
 			.icon
 				margin-right .3rem
-				sq(2.2)
+				sq(2)
 		&.btn--has-icon
 			&:not(.btn--mini):not(.btn--small):not(.btn--large)
 				mbi(.4)
@@ -373,7 +373,7 @@
 				&.btn--important
 					background-color $error
 		.icon
-			sq(2.2)
+			sq(2)
 	&--switch
 		btn()
 		color $secondary-medium
@@ -665,7 +665,7 @@
 		buttonLarge()
 		&:not(.btn--custom-icon-size)
 			.icon
-				sq(3.2)
+				sq(3)
 		&:not(.btn--icon)
 			.icon
 				margin-right .6rem
@@ -675,7 +675,10 @@
 					padding-left $padding
 					disableHoverEffect()
 					.icon
-						sq(3.2)
+						sq(3)
+	.icon--thicker
+		.icon
+			stroke-width .16rem
 @media screen and (max-width 720px)
 	.btn
 		&--tab

package/src/styles/console/select.styl

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

package/.idea/encodings.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="Encoding">
-    <file url="PROJECT" charset="UTF-8" />
-  </component>
-</project>

package/.idea/inspectionProfiles/Project_Default.xml

@@ -1,18 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
-    <inspection_tool class="PyPackageRequirementsInspection" enabled="true" level="WARNING" enabled_by_default="true">
-      <option name="ignoredPackages">
-        <value>
-          <list size="4">
-            <item index="0" class="java.lang.String" itemvalue="Fabric" />
-            <item index="1" class="java.lang.String" itemvalue="PyYAML" />
-            <item index="2" class="java.lang.String" itemvalue="Jinja2" />
-            <item index="3" class="java.lang.String" itemvalue="github3.py" />
-          </list>
-        </value>
-      </option>
-    </inspection_tool>
-  </profile>
-</component>

package/.idea/inspectionProfiles/profiles_settings.xml

@@ -1,6 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <settings>
-    <option name="USE_PROJECT_PROFILE" value="false" />
-    <version value="1.0" />
-  </settings>
-</component>

package/.idea/misc.xml

@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectRootManager" version="2" project-jdk-name="Python 3.9" project-jdk-type="Python SDK" />
-</project>

package/.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/ui.iml" filepath="$PROJECT_DIR$/.idea/ui.iml" />
-    </modules>
-  </component>
-</project>

package/.idea/prettier.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="PrettierConfiguration">
-    <option name="myRunOnReformat" value="true" />
-  </component>
-</project>

package/.idea/ui.iml

@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="PYTHON_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$" />
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-  <component name="TemplatesService">
-    <option name="TEMPLATE_FOLDERS">
-      <list>
-        <option value="$MODULE_DIR$/node_modules/@storybook/core/dist/server/templates" />
-      </list>
-    </option>
-  </component>
-</module>

package/.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$" vcs="Git" />
-  </component>
-</project>