@woosmap/ui 2.58.0 → 3.1.0

package/.storybook/preview.js

@@ -36,12 +36,12 @@ let isConsoleStyle = false;
 
 
 if (mode === 'prod') {
-  import('../src/styles/style-website.styl');
+  import('../src/styles/style-next-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-website.styl').then((websiteStylLoaded) => {
+     import('../src/styles/style-next-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": "2.58.0",
+  "version": "3.1.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-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-next-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/Demo/SkeletonDemo.js

@@ -160,78 +160,26 @@ export default class SkeletonDemo extends Component {
     };
 
     render() {
-        const {
-            noheader,
-            header,
-            id,
-            result,
-            withMap,
-            request,
-            response,
-            className,
-            leftContent,
-            docLink,
-            docLabel,
-            renderCode,
-            subHeader,
-        } = this.props;
+        const { result, request, response, renderCode } = this.props;
         const { copied } = this.state;
         return (
-            <div className={cl('demo', className)} id={id}>
-                <div className="demo__header">
-                    {!noheader && (
-                        <div className="demo__presentation">
-                            <div className="demo__title">
-                                <h1>{header.title}</h1>
-                            </div>
-                            <p className="demo__desc">
-                                {header.desc} &nbsp;
-                                <a
-                                    rel="noreferrer"
-                                    href={docLink || tr('http://developers.woosmap.com')}
-                                    target="_blank"
-                                    onClick={() => {
-                                        const { trackEvent } = this.context;
-                                        if (trackEvent) {
-                                            trackEvent(
-                                                'Showcase',
-                                                "Developer's Documentation",
-                                                `User went to the ${header.title} documentation`
-                                            );
-                                        }
-                                    }}
-                                >
-                                    {docLabel || tr('Go to documentation')}
-                                </a>
-                            </p>
-                            <div className="demo__desc">{subHeader}</div>
+            <article className="demo">
+                <div className="demo__content">
+                    <div className="demo__showcase">
+                        <div className="demo__filters">
+                            {this.renderHeaderFilters()}
+                            {this.renderFooterFilters()}
+                        </div>
+                        <div className="demo__map">
+                            <div className="map" ref={this.mapDivRef} />
                         </div>
-                    )}
-                </div>
-                <div className="demo__content-wrapper">
-                    <div className="demo__content-header">
-                        {this.renderHeaderTagline()}
-                        {this.renderHeaderFilters()}
                     </div>
-                    {this.renderFooterFilters()}
-                    <div className="demo__content">
-                        <div className="demo__results__leftcontent">{leftContent}</div>
-                        {result ? (
-                            <div className="demo__results">
-                                <div className="demo__results__header">{tr('Results')}</div>
-                                <div className="demo__results__content">{result}</div>
-                            </div>
-                        ) : null}
-                        {withMap ? (
-                            <div
-                                className={cl('demo__map', {
-                                    'demo__map--small': result,
-                                })}
-                            >
-                                <div className="map" ref={this.mapDivRef} />
-                            </div>
-                        ) : null}
-                        <div className="demo__api">
+                    <div className="demo__data">
+                        <div className="demo__results">
+                            <div className="demo__results__header">{tr('Results')}</div>
+                            <div className="demo__results__content">{result}</div>
+                        </div>
+                        <div className="demo__code">
                             <Tab
                                 actions={[
                                     {
@@ -271,7 +219,7 @@ export default class SkeletonDemo extends Component {
                         </div>
                     </div>
                 </div>
-            </div>
+            </article>
         );
     }
 }
@@ -279,46 +227,28 @@ export default class SkeletonDemo extends Component {
 SkeletonDemo.contextType = TrackEventContext;
 
 SkeletonDemo.defaultProps = {
-    id: '',
-    docLink: null,
-    docLabel: null,
     renderCode: null,
     headerFilters: null,
     headerTagline: null,
     footerFilters: null,
-    leftContent: null,
-    className: '',
     result: null,
-    withMap: false,
     request: null,
     response: {},
     params: {},
-    noheader: false,
     referer: '',
     body: '',
     method: '',
-    header: null,
-    subHeader: null,
 };
 SkeletonDemo.propTypes = {
-    id: PropTypes.string,
-    docLink: PropTypes.string,
     renderCode: PropTypes.func,
-    docLabel: PropTypes.string,
     params: PropTypes.object,
-    noheader: PropTypes.bool,
-    header: PropTypes.object,
     headerTagline: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    className: PropTypes.string,
     headerFilters: PropTypes.array,
     footerFilters: PropTypes.array,
     result: PropTypes.node,
-    withMap: PropTypes.bool,
-    leftContent: PropTypes.node,
     request: PropTypes.string,
     referer: PropTypes.string,
     body: PropTypes.string,
     method: PropTypes.string,
-    subHeader: PropTypes.object,
     response: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
 };

package/src/components/Icon/Icon.js

@@ -1,23 +1,6 @@
 import React, { Component } from 'react';
 import cl from 'classnames';
 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 Cars } from '../../icons/cars.svg';
-import { ReactComponent as Github } from '../../icons/github.svg';
-import { ReactComponent as Green } from '../../icons/green.svg';
-import { ReactComponent as MapHd } from '../../icons/map-hd.svg';
-import { ReactComponent as Markers } from '../../icons/markers.svg';
-import { ReactComponent as Notification } from '../../icons/notification.svg';
-import { ReactComponent as Quote } from '../../icons/quote.svg';
-import { ReactComponent as Position } from '../../icons/position.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 World } from '../../icons/world.svg';
-import { ReactComponent as Zoom } from '../../icons/zoom.svg';
-
 import { ReactComponent as Access } from '../../icons/access.svg';
 import { ReactComponent as Add } from '../../icons/add.svg';
 import { ReactComponent as AddCircle } from '../../icons/add-circle.svg';
@@ -37,10 +20,12 @@ 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';
+import { ReactComponent as Autocomplete } from '../../icons/autocomplete.svg';
 import { ReactComponent as Bank } from '../../icons/bank.svg';
 import { ReactComponent as Beaker } from '../../icons/beaker.svg';
 import { ReactComponent as Bell } from '../../icons/bell.svg';
 import { ReactComponent as Bookmark } from '../../icons/bookmark.svg';
+import { ReactComponent as Buildings } from '../../icons/buildings.svg';
 import { ReactComponent as Bulb } from '../../icons/bulb.svg';
 import { ReactComponent as CaretBotton } from '../../icons/caret-bottom.svg';
 import { ReactComponent as CaretLeft } from '../../icons/caret-left.svg';
@@ -72,6 +57,7 @@ import { ReactComponent as Exchange } from '../../icons/exchange.svg';
 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 Github } from '../../icons/github.svg';
 import { ReactComponent as Globe } from '../../icons/globe.svg';
 import { ReactComponent as Home } from '../../icons/home.svg';
 import { ReactComponent as HomeUser } from '../../icons/home-user.svg';
@@ -93,19 +79,23 @@ import { ReactComponent as Organization } from '../../icons/organization.svg';
 import { ReactComponent as Organizations } from '../../icons/organizations.svg';
 import { ReactComponent as Phone } from '../../icons/phone.svg';
 import { ReactComponent as Platform } from '../../icons/platform.svg';
+import { ReactComponent as Position } from '../../icons/position.svg';
 import { ReactComponent as ProductActivated } from '../../icons/product-activated.svg';
 import { ReactComponent as ProductAdd } from '../../icons/product-add.svg';
 import { ReactComponent as Products } from '../../icons/products.svg';
 import { ReactComponent as Projects } from '../../icons/projects.svg';
 import { ReactComponent as Puzzle } from '../../icons/puzzle.svg';
 import { ReactComponent as Question } from '../../icons/question.svg';
+import { ReactComponent as Quote } from '../../icons/quote.svg';
 import { ReactComponent as Receipt } from '../../icons/receipt.svg';
+import { ReactComponent as SaveMoney } from '../../icons/save-money.svg';
 import { ReactComponent as Search } from '../../icons/search.svg';
 import { ReactComponent as SeePage } from '../../icons/see-page.svg';
 import { ReactComponent as Settings } from '../../icons/settings.svg';
 import { ReactComponent as Shield } from '../../icons/shield.svg';
 import { ReactComponent as Star } from '../../icons/star.svg';
 import { ReactComponent as StarFilled } from '../../icons/star-filled.svg';
+import { ReactComponent as Stores } from '../../icons/stores.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';
@@ -117,36 +107,19 @@ import { ReactComponent as ViewList } from '../../icons/view-list.svg';
 import { ReactComponent as ViewMiniCard } from '../../icons/view-mini-card.svg';
 import { ReactComponent as Warning } from '../../icons/warning.svg';
 import { ReactComponent as Woosmap } from '../../icons/woosmap.svg';
+import { ReactComponent as World } from '../../icons/world.svg';
 import { ReactComponent as Address } from '../../icons/address.svg';
 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';
 import { ReactComponent as SocialFacebook } from '../../icons/social-facebook.svg';
 import { ReactComponent as SocialLinkedin } from '../../icons/social-linkedin.svg';
 import { ReactComponent as SocialTwitter } from '../../icons/social-twitter.svg';
 
 const Icons = {
-    autocomplete: Autocomplete,
-    battery: Battery,
-    buildings: Buildings,
-    cars: Cars,
-    github: Github,
-    green: Green,
-    'map-hd': MapHd,
-    markers: Markers,
-    notification: Notification,
-    position: Position,
-    quote: Quote,
-    'save-money': SaveMoney,
-    schedule: Schedule,
-    security: Security,
-    world: World,
-    zoom: Zoom,
-
     access: Access,
     add: Add,
     'add-circle': AddCircle,
@@ -166,10 +139,12 @@ const Icons = {
     asset: Asset,
     'asset-add-file': AssetAddFile,
     'asset-add': AssetAdd,
+    autocomplete: Autocomplete,
     bank: Bank,
     beaker: Beaker,
     bell: Bell,
     bookmark: Bookmark,
+    buildings: Buildings,
     bulb: Bulb,
     'caret-bottom': CaretBotton,
     'caret-left': CaretLeft,
@@ -202,6 +177,7 @@ const Icons = {
     export: Export,
     flag: Flag,
     globe: Globe,
+    github: Github,
     home: Home,
     'home-user': HomeUser,
     import: Import,
@@ -222,13 +198,16 @@ const Icons = {
     organizations: Organizations,
     phone: Phone,
     platform: Platform,
+    position: Position,
     'product-activated': ProductActivated,
     'product-add': ProductAdd,
     products: Products,
     projects: Projects,
     puzzle: Puzzle,
     question: Question,
+    quote: Quote,
     receipt: Receipt,
+    'save-money': SaveMoney,
     search: Search,
     'see-page': SeePage,
     settings: Settings,
@@ -247,6 +226,7 @@ const Icons = {
     'view-mini-card': ViewMiniCard,
     warning: Warning,
     woosmap: Woosmap,
+    world: World,
     address: Address,
     distance: Distance,
     geolocation: Geolocation,

package/src/styles/next-website/button.styl

@@ -0,0 +1,343 @@
+.btn
+	cursor pointer
+	text-decoration none
+	.icon
+		flex-shrink 0
+	&.active
+		cursor default
+	&:disabled
+		&:not(.btn--group)
+			cursor default
+			opacity .3
+			box-shadow none
+			&:hover
+				opacity .3
+	&--icon
+		&:not(.btn--link):not(.btn--link-primary):not(.btn--link-info):not(.btn--link-flex):not(.btn--link-flex-info):not(.btn--group):not(.btn--sidebar-link)
+			sq()
+			btn()
+			justify-content center
+			padding 0
+			&.btn--loading
+				padding 0
+				.icon
+					sq(2.4)
+			&.btn--small
+				buttonSmall()
+				width $buttonHeightSmall
+			&.btn--mini
+				buttonMini()
+				width $buttonHeightMini
+			&.btn--large
+				buttonLarge()
+				width $buttonHeightLarge
+			&.btn--primary
+				&:disabled
+					&:hover
+						background-color $primary
+						.icon
+							fill $light
+				&.btn--loading
+					&:hover
+						background-color $primary
+			&.btn--secondary
+				&:disabled
+					&:hover
+						background-color transparent
+						border-color $inputBorderColor
+						.icon
+							fill $secondary
+			&.btn--important
+				&:disabled
+					&:hover
+						background-color $error
+						.icon
+							fill $light
+			&.btn--has-icon
+				&:not(.btn--small):not(.btn--large)
+					mbi(.4)
+			&.btn--icon
+				flex-shrink 0
+				.icon
+					flex-shrink 0
+	&--primary
+	&--important
+		btn()
+		textShadow()
+		color $light
+		.icon
+			fill $light
+			trans()
+		&.btn--loading:not(.btn--small):not(.btn--large)
+			disableHoverEffect()
+			.icon
+				margin-right .3rem
+				sq(2.2)
+		&.btn--has-icon
+			&:not(.btn--small):not(.btn--large)
+				mbi(.4)
+		&.btn--icon
+			flex-shrink 0
+			.icon
+				flex-shrink 0
+	&--primary
+		background-color $primary
+		&:disabled
+			&:hover
+				background-color $primary
+	&--important
+		background-color $error
+		&:disabled
+			&:hover
+				background-color $error
+	&--secondary
+		btn()
+		color $secondary
+		background-color $light
+		border .1rem solid $inputBorderColor
+		.icon
+			fill $secondary
+			trans()
+		&.btn--has-icon
+			mbi(.4)
+		&.btn--icon
+			flex-shrink 0
+			.icon
+				flex-shrink 0
+		&:hover
+			border-color $success
+		&.btn--loading
+			&:hover
+				background-color transparent
+				color $secondary
+					cursor default
+					border-color $inputBorderColor
+					.icon
+						fill $secondary
+		&:disabled
+			opacity .4
+			cursor default
+			&:disabled
+				&:hover
+					opacity .4
+						background-color transparent
+						color $secondary
+						border-color $inputBorderColor
+						.icon
+							fill $secondary
+	&--inverse
+		btn()
+		background-color transparent
+		border .1rem solid $light
+		color $light
+		.icon
+			fill $light
+		&.btn--has-icon
+			mbi(.4)
+		&.btn--icon
+			flex-shrink 0
+			.icon
+				flex-shrink 0
+		&:hover
+			border-color $success
+			color $light
+			.icon
+				fill $light
+		&:disabled
+			opacity .3
+			&:hover
+				cursor default
+				border-color $success
+				color $light
+				.icon
+					fill $light
+	&--link-flex
+	&--link-flex-info
+	&--link
+	&--link-primary
+	&--link-info
+		focus()
+		trans()
+		height auto
+		padding 0
+		line-height $fontSize
+		color $secondary
+		vertical-align baseline
+		position relative
+		.btn__label
+			line-height $fontSize
+			vertical-align baseline
+		&:hover
+			text-decoration underline
+			color $primary
+			.icon
+				fill $primary
+		&:disabled
+			cursor default
+			opacity .3
+			&:hover
+				color inherit
+				opacity .3
+				text-decoration underline
+				.icon
+					fill inherit
+		.label &
+			&:hover
+				.icon
+					fill $light
+		&.btn--icon
+			padding 0
+			text-decoration none
+		&.btn--has-icon
+			&:not(.btn--icon-right)
+				.icon
+					margin-right .3rem
+			&.btn--icon-right
+				.icon
+					margin-left .3rem
+	&--link
+	&--link-primary
+	&--link-info
+		.icon
+			trans()
+			position relative
+			top .7rem
+		&:not(.btn--icon-right)
+			.icon
+				left -.3rem
+			&.btn--small
+				.icon
+					top .5rem
+					left -.3rem
+			&.btn--large
+				.icon
+					top 1.2rem
+					left -.3rem
+		&.btn--icon-right
+			.icon
+				right -.3rem
+			&.btn--small
+				.icon
+					top .5rem
+					rigth -.3rem
+			&.btn--large
+				.icon
+					top 1.2rem
+					rigth -.3rem
+	&--link-flex
+	&--link-flex-info
+		display flex
+		align-items center
+		&.btn--no-label
+			display flex
+			align-items center
+			justify-content center
+		&.btn--large
+		&.btn--small
+			height auto
+			padding 0 !important
+	&--link-flex-info
+		&:hover
+			color $primary
+			text-decoration none
+			.icon
+				fill $primary
+		&:disabled
+			&:hover
+				color $primary
+				text-decoration none
+				.icon
+					fill $primary
+	&--link
+	&--link-flex
+		&.btn--light-color
+			color $secondary-medium40
+			.icon
+				trans()
+				fill $secondary-medium40
+			&:hover
+				color $primary
+				.icon
+					fill $primary
+	&--link-primary
+		color $primary
+		.icon
+			fill $primary
+		&:disabled
+			&:hover
+				color $primary
+				text-decoration none
+				.icon
+					fill $primary
+	&--link-info
+	&--link-flex-info
+		color $info
+		.icon
+			fill $info
+		&:hover
+			color $primary
+			text-decoration underline
+			.icon
+				fill $primary
+	&--link-info
+	&--link-flex-info
+	&--link-flex
+		transition none
+		.icon
+			trans()
+		.btn__label
+			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-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--small):not(.btn--large):not(.btn--sidebar-link)
+			padding-left $padding - .4
+			&:hover
+				&.btn--important
+					background-color $error
+		.icon
+			sq(2.2)
+
+
+	&--small
+		buttonSmall()
+		&.btn--group
+		&.btn--switch
+			buttonSmall()
+			&.btn--icon
+				width auto
+				img
+					max-width 2.2rem
+		&:not(.btn--custom-icon-size)
+			.icon
+				sq(1.8)
+		&:not(.btn--icon)
+			.icon
+				margin-right .4rem
+			&.btn--has-icon
+				padding-left $padding - .5
+				&.btn--loading
+					padding-left $padding - .4
+					disableHoverEffect()
+					.icon
+						sq(1.8)
+	&--large
+		buttonLarge()
+		&:not(.btn--custom-icon-size)
+			.icon
+				sq(3.2)
+		&:not(.btn--icon)
+			.icon
+				margin-right .6rem
+			&.btn--has-icon
+				padding-left $padding - .4
+				&.btn--loading
+					padding-left $padding
+					disableHoverEffect()
+					.icon
+						sq(3.2)