@woosmap/ui 2.55.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.55.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/Dropdown/Dropdown.js

@@ -10,17 +10,13 @@ function mapChildrenWithProps(children, childrenRefs, closeCb) {
     if (children) {
         return React.Children.map(children, (child, index) => {
             if (React.isValidElement(child)) {
-                // only add ref to non functional components
                 return React.cloneElement(child, {
                     ...child.props,
                     closeCb,
-                    ref:
-                        !child.type.prototype || (child.type.prototype && child.type.prototype.render)
-                            ? (elem) => {
-                                  // eslint-disable-next-line no-param-reassign
-                                  childrenRefs[index] = elem;
-                              }
-                            : undefined,
+                    ref: (elem) => {
+                        // eslint-disable-next-line no-param-reassign
+                        childrenRefs[index] = elem;
+                    },
                 });
             }
             return child;
@@ -53,13 +49,15 @@ class DropdownMenu extends Component {
         const childrenWithProps = mapChildrenWithProps(children, this.childrenRefs, closeCb);
         if (isSection) {
             return (
-                <div
-                    role="menu"
-                    className={cl('dropdown__menu', direction, 'dropdown__menu--section')}
-                    data-testid={testId}
-                    {...rest}
-                >
-                    {childrenWithProps}
+                <div className="dropdown__container">
+                    <div
+                        role="menu"
+                        className={cl('dropdown__menu', direction, 'dropdown__menu--section')}
+                        data-testid={testId}
+                        {...rest}
+                    >
+                        {childrenWithProps}
+                    </div>
                 </div>
             );
         }
@@ -101,7 +99,7 @@ class DropdownMenuSection extends Component {
         const childrenWithProps = mapChildrenWithProps(children, this.childrenRefs, closeCb);
         return (
             <div className="dropdown__menu__section">
-                {title && <div className="dropdown__menu__section__title">{title}</div>}
+                {title && <div className="dropdown__menu__item dropdown__menu__item__title">{title}</div>}
                 <ul {...rest}>{childrenWithProps}</ul>
             </div>
         );
@@ -138,7 +136,7 @@ class DropdownItem extends Component {
     render() {
         const { children, closeCb, testId, ...rest } = this.props;
         return (
-            <li className={cl('dropdown__item')} data-testid={testId} {...rest}>
+            <li className={cl('dropdown__menu__item')} data-testid={testId} {...rest}>
                 {children}
             </li>
         );
@@ -170,7 +168,7 @@ class DropdownButtonItem extends Component {
     render() {
         const { onClick, btnIcon, btnLabel, isImportant, closeCb, ...rest } = this.props;
         return (
-            <li className={cl('dropdown__item')}>
+            <li className={cl('dropdown__menu__item')}>
                 <Button
                     className={cl({ 'btn--dropdown-item--important': isImportant })}
                     type="dropdown-item"
@@ -224,7 +222,7 @@ class DropdownConfirmButtonItem extends Component {
         const { onConfirm, btnIcon, btnLabel, closeCb, confirmLabel, isImportant, placement, ...rest } = this.props;
         // onConfirm and closeCb are put in this list to remove them from ...rest.
         return (
-            <li className={cl('dropdown__item')}>
+            <li className={cl('dropdown__menu__item')}>
                 <ConfirmationPopover
                     ref={this.confirmRef}
                     text={confirmLabel}
@@ -353,7 +351,7 @@ class Dropdown extends Component {
 
         return (
             <div
-                ref={openOnMouseEnter ? null : this.clickOutsideRef}
+                ref={this.clickOutsideRef}
                 className={cl('dropdown', { open }, `dropdown--${size}`, className)}
                 {...rest}
                 onMouseEnter={this.onMouseEnter}

package/src/components/Dropdown/Dropdown.styl

@@ -3,7 +3,7 @@
 	display inline-block
 	&__separator
 		width 100%
-		border-bottom .1rem solid $secondary-light
+		border-bottom .1rem solid $borderColor
 	&__menu
 		box()
 		display none
@@ -51,30 +51,31 @@
 			left auto
 
 
+		&__item
+			flexMiddle()
+			ellipsis()
+			height $buttonHeight + .6rem
+			.popover__child
+				width 100%
+			> :not(.btn):not(.popover__child)
+				flexMiddle()
+				ellipsis()
+				height $buttonHeight + .6rem
+				padding 0 $padding
+				width 100%
+				cursor default
+				&:hover
+					background-color $primary10
+			&:first-child
+				> *
+					border-radius $borderRadius $borderRadius 0 0
+			&:last-child
+				> *
+					border-radius 0 0 $borderRadius $borderRadius
+			&__title
+				padding 0 $padding 0 $padding
 	&.open
 		.dropdown__menu
 			display block
 			&--section
-				display flex
-
-	&__item
-		flexMiddle()
-		ellipsis()
-		height $buttonHeight + .6rem
-		.popover__child
-			width 100%
-		> :not(.btn):not(.popover__child)
-			flexMiddle()
-			ellipsis()
-			height $buttonHeight + .6rem
-			padding 0 $padding
-			width 100%
-			cursor default
-			&:hover
-				background-color $primary10
-		&:first-child
-			> *
-				border-radius $borderRadius $borderRadius 0 0
-		&:last-child
-			> *
-				border-radius 0 0 $borderRadius $borderRadius
+				display flex

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)