@woosmap/ui 2.13.0 → 2.17.0

package/package.json

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

package/src/components/Button/Button.js

@@ -94,6 +94,7 @@ Button.propTypes = {
         'tab',
         'tab--action',
         'tab--pills',
+        'sidebar-link',
     ]),
     isLoading: PropTypes.bool,
     active: PropTypes.bool,

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

@@ -15,6 +15,9 @@ const Template = (args) => {
     return (
         <div className="flex-column mbib">
             <Button label={label} isLoading={isLoading} active={loading} />
+            <div className="flex mbi">
+                <Button active type="sidebar-link" icon="add" />
+            </div>
             <div className="flex mbi">
                 <Button icon="add" />
                 <Button label={label} />

package/src/components/Icon/Icon.js

@@ -75,6 +75,7 @@ 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 Receipt } from '../../icons/receipt.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';
@@ -174,6 +175,7 @@ const Icons = {
     products: Products,
     projects: Projects,
     puzzle: Puzzle,
+    receipt: Receipt,
     question: Question,
     search: Search,
     'see-page': SeePage,

package/src/components/Tab/Tab.js

@@ -86,11 +86,11 @@ export default class Tab extends Component {
     }
 
     render() {
-        const { children, type } = this.props;
+        const { children, type, separator } = this.props;
         const classes = cl('tab', `tab--${type}`);
         return (
             <div className={classes}>
-                <div className="tab__header">
+                <div className={cl('tab__header', { 'tab__header--separator': separator })}>
                     <ul className="tab__header__buttons">{this.renderHeader(children)}</ul>
                     <div>{this.renderActions(children)}</div>
                 </div>
@@ -107,6 +107,7 @@ Tab.defaultProps = {
     defaultSelect: null,
     icon: null,
     iconSize: null,
+    separator: false,
 };
 
 Tab.propTypes = {
@@ -115,6 +116,7 @@ Tab.propTypes = {
     children: PropTypes.node.isRequired,
     actions: PropTypes.array,
     type: PropTypes.oneOf(['pills', undefined]),
+    separator: PropTypes.bool,
     icon: PropTypes.string,
     iconSize: PropTypes.number,
 };

package/src/components/Tab/Tab.stories.js

@@ -10,6 +10,7 @@ export default Story;
 
 const Template = () => (
     <Tab
+        separator
         defaultSelect="Tab 2"
         selectCb={(title) => console.log(`Title selected: ${title}`)}
         actions={[

package/src/icons/chat.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3.884 16.583a.553.553 0 0 1-.262-.065.559.559 0 0 1-.3-.5V5.338a.559.559 0 0 1 .462-.551 36.967 36.967 0 0 1 12.44-.007.594.594 0 0 1 .5.558v8.371a.56.56 0 0 1-.56.561H8.33a2.814 2.814 0 0 0-1.583.486L4.2 16.486a.559.559 0 0 1-.316.097zm.559-10.77v9.153l1.675-1.137a3.926 3.926 0 0 1 2.212-.68h7.27V5.814a35.811 35.811 0 0 0-11.157-.001z"/><path d="M20.116 19.743a.559.559 0 0 1-.314-.1l-1.75-1.188a1.75 1.75 0 0 0-.988-.3h-5.376a.56.56 0 0 1-.559-.56v-1.819a.56.56 0 1 1 1.119 0v1.258h4.816a2.867 2.867 0 0 1 1.617.5l.876.6v-5.8c-.4-.06-.789-.109-1.18-.149a.56.56 0 0 1 .113-1.114q.854.087 1.7.23a.582.582 0 0 1 .486.556v7.335a.558.558 0 0 1-.3.5.553.553 0 0 1-.26.051zM13.519 8.2a.6.6 0 0 1-.1-.008 20.027 20.027 0 0 0-6.742 0 .56.56 0 0 1-.188-1.1 21.2 21.2 0 0 1 7.117 0 .561.561 0 0 1-.087 1.108zM6.587 10.848a.561.561 0 0 1-.093-1.113 21.345 21.345 0 0 1 5.343-.225.56.56 0 0 1 .511.606.578.578 0 0 1-.605.51 20.1 20.1 0 0 0-5.061.214.619.619 0 0 1-.095.008z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3.884 16.583a.553.553 0 0 1-.262-.065.559.559 0 0 1-.3-.5V5.338a.559.559 0 0 1 .462-.551 36.967 36.967 0 0 1 12.44-.007.594.594 0 0 1 .5.558v8.371a.56.56 0 0 1-.56.561H8.33a2.814 2.814 0 0 0-1.583.486L4.2 16.486a.559.559 0 0 1-.316.097zm.559-10.77v9.153l1.675-1.137a3.926 3.926 0 0 1 2.212-.68h7.27V5.814a35.811 35.811 0 0 0-11.157-.001z"/><path d="M20.116 19.743a.559.559 0 0 1-.314-.1l-1.75-1.188a1.75 1.75 0 0 0-.988-.3h-5.376a.56.56 0 0 1-.559-.56v-1.819a.56.56 0 1 1 1.119 0v1.258h4.816a2.867 2.867 0 0 1 1.617.5l.876.6v-5.8c-.4-.06-.789-.109-1.18-.149a.56.56 0 0 1 .113-1.114q.854.087 1.7.23a.582.582 0 0 1 .486.556v7.335a.558.558 0 0 1-.3.5.553.553 0 0 1-.26.051zM13.519 8.2a.6.6 0 0 1-.1-.008 20.027 20.027 0 0 0-6.742 0 .56.56 0 0 1-.188-1.1 21.2 21.2 0 0 1 7.117 0 .561.561 0 0 1-.087 1.108zm-6.932 2.648a.561.561 0 0 1-.093-1.113 21.345 21.345 0 0 1 5.343-.225.56.56 0 0 1 .511.606.578.578 0 0 1-.605.51 20.1 20.1 0 0 0-5.061.214.619.619 0 0 1-.095.008z"/></svg>

package/src/icons/receipt.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.073 12.925a.465.465 0 0 0-.465.465v3.9a.465.465 0 0 0 .93 0v-3.9a.465.465 0 0 0-.465-.465zM15.172 12.925a.465.465 0 0 0-.464.465v3.9a.465.465 0 1 0 .929 0v-3.9a.465.465 0 0 0-.465-.465zM16.927 12.925a.465.465 0 0 0-.465.465v3.9a.465.465 0 0 0 .93 0v-3.9a.465.465 0 0 0-.465-.465z"/><rect x="8.398" y="12.925" width="1.48" height="4.834" rx=".465"/><rect x="10.728" y="12.925" width="3.119" height="4.834" rx=".465"/><path d="M6.608 8.361h5.679a.56.56 0 0 0 0-1.12H6.608a.56.56 0 0 0 0 1.12zM15.638 9.632h-9.03a.56.56 0 0 0 0 1.12h9.03a.56.56 0 0 0 0-1.12z"/><path d="M20.126 3.845a.56.56 0 0 0-.56-.56 2.347 2.347 0 0 0-1.61.62 1.294 1.294 0 0 1-1.831 0 2.4 2.4 0 0 0-3.219 0 1.289 1.289 0 0 1-1.826 0 2.392 2.392 0 0 0-3.216 0 1.286 1.286 0 0 1-1.823 0 2.334 2.334 0 0 0-1.607-.621.56.56 0 0 0-.56.56v14.172a2.294 2.294 0 0 0 1.979 2.265 45.33 45.33 0 0 0 6.1.412 45.451 45.451 0 0 0 5.8-.372l.372-.048a2.291 2.291 0 0 0 1.994-2.267V3.856zm-2.137 15.317-.372.048A44.315 44.315 0 0 1 6 19.172a1.172 1.172 0 0 1-1.01-1.156V4.538a2.5 2.5 0 0 1 .351.245 2.391 2.391 0 0 0 3.216 0 1.289 1.289 0 0 1 1.825 0 2.392 2.392 0 0 0 3.217 0 1.292 1.292 0 0 1 1.828 0 2.4 2.4 0 0 0 3.221 0 2.475 2.475 0 0 1 .356-.247v13.47a1.169 1.169 0 0 1-1.015 1.156z"/></svg>

package/src/icons/star.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16.765 20.879a1.553 1.553 0 0 1-.722-.18L12 18.574 7.957 20.7a1.548 1.548 0 0 1-2.246-1.632l.772-4.5-3.272-3.192a1.548 1.548 0 0 1 .859-2.639l4.52-.657 2.022-4.1a1.548 1.548 0 0 1 2.776 0l2.022 4.1 4.52.657a1.547 1.547 0 0 1 .858 2.639l-3.271 3.189.772 4.5a1.551 1.551 0 0 1-1.524 1.812zM12 4.241a.416.416 0 0 0-.383.238L9.464 8.84a.558.558 0 0 1-.421.306l-4.812.7a.428.428 0 0 0-.237.73l3.482 3.394a.561.561 0 0 1 .161.5l-.822 4.792a.428.428 0 0 0 .621.451l4.3-2.263a.56.56 0 0 1 .522 0l4.3 2.263a.428.428 0 0 0 .62-.451l-.822-4.792a.561.561 0 0 1 .161-.5l3.482-3.394a.427.427 0 0 0-.237-.73l-4.812-.7a.558.558 0 0 1-.421-.306l-2.145-4.361A.418.418 0 0 0 12 4.241z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.617 20.212a1.471 1.471 0 0 1-1.446-1.718l.706-4.119-2.993-2.917a1.468 1.468 0 0 1 .815-2.5l4.135-.6 1.849-3.747A1.459 1.459 0 0 1 12 3.787a1.46 1.46 0 0 1 1.317.819l1.85 3.747 4.135.6a1.468 1.468 0 0 1 .813 2.5l-2.992 2.917.706 4.119a1.468 1.468 0 0 1-2.13 1.548L12 18.1l-3.7 1.942a1.471 1.471 0 0 1-.683.17zM12 4.907a.338.338 0 0 0-.312.2l-1.98 4.01a.558.558 0 0 1-.421.307l-4.427.643a.348.348 0 0 0-.194.594l3.2 3.123a.56.56 0 0 1 .16.5l-.756 4.408a.35.35 0 0 0 .506.368l3.959-2.081a.56.56 0 0 1 .522 0l3.959 2.081a.349.349 0 0 0 .506-.368l-.757-4.408a.561.561 0 0 1 .161-.5l3.2-3.122a.348.348 0 0 0-.192-.6l-4.427-.643a.561.561 0 0 1-.422-.306L12.313 5.1A.341.341 0 0 0 12 4.907z"/></svg>

package/src/styles/console/button.styl

@@ -6,7 +6,7 @@
 	&.active
 		cursor default
 	&--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--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
@@ -147,7 +147,6 @@
 					color $light
 					.icon
 						fill $light
-
 	&--dropdown-item
 		flexBtn()
 		ellipsis()
@@ -301,10 +300,10 @@
 
 
 	&--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--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)
 			padding 0 $padding 0 $padding - .6
 	&--loading
-		&:not(.btn--icon):not(.btn--mini):not(.btn--small):not(.btn--large)
+		&:not(.btn--icon):not(.btn--mini):not(.btn--small):not(.btn--large):not(.btn--sidebar-link)
 			padding-left $padding - .4
 			&:hover
 			&.btn--important
@@ -469,6 +468,23 @@
 			.btn
 				border-radius 0 $borderRadius $borderRadius 0 !important
 				border-left .1rem solid $light30 !important
+	&--sidebar-link
+		trans()
+		flexAxis()
+		sq($sidebarButtonSize)
+		.icon
+			fill $light
+		&:hover
+			background-color $dark15
+			.icon
+				fill $light
+		&.active
+			cursor default
+			background-color $dark20
+			&:hover
+				background-color $dark20
+				.icon
+					fill $light
 	&--small
 		buttonSmall()
 		&.btn--group

package/src/styles/console/select.styl

@@ -24,6 +24,10 @@
 		&--is-focused
 			border-color $secondary !important
 			box-shadow none !important
+			.select__indicator
+			.asyncselect__indicator
+				svg
+					fill $secondary
 	&__value-container
 		padding-left 1rem !important
 	&__single-value
@@ -31,8 +35,13 @@
 	&__indicator
 		padding-left 1rem !important
 		padding-right 1rem !important
+		&-separator
+			background-color $secondary-medium25
+		svg
+			fill $secondary-medium25
 	&__placeholder
 		white-space nowrap
+		color $secondary-medium60
 	&__option
 	&__multi-value
 		.flag

package/src/styles/console/tab.styl

@@ -17,9 +17,10 @@
 		margin-top 3rem
 		display none
 		&.active
-			display flex
-	&:not(.tab--pills)
-		&__header
+			display block
+	&__header
+		&--separator
+			position relative
 			&:before
 				content ''
 				position absolute

package/src/styles/console/variables.styl

@@ -4,6 +4,7 @@ $fontSizeSmall = $fontSize - .2
 $fontSizeMini  = $fontSize - .4
 $fontWeight = 400
 
+
 $title = $fontSize + .6
 $title2 = $fontSize + .4
 $title3 = $fontSize + .3
@@ -17,6 +18,8 @@ $borderRadius = .6rem
 
 $padding = 1.2rem
 
+$sidebarButtonSize = 5rem
+
 $buttonHeight = 3.8rem
 $buttonPadding = 0 $padding 0 $padding
 $buttonFontSize = $fontSize
@@ -71,7 +74,6 @@ $panelWidth = 36rem
 $panelpadding = 2.4rem
 $panelHeaderHeight = $contentHeaderHeight
 
-
 // modal
 $modalWidth = 70rem
 $modalPadding = 2.4rem