@woosmap/ui 4.4.0 → 4.6.0

package/package.json

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

package/src/components/UseCase/UseCase.js

@@ -62,8 +62,16 @@ class UseCase extends Component {
         this.state = { stateSelected: false };
     }
 
+    onClick = () => {
+        const { stateSelected } = this.state;
+        const { isSelectable } = this.props;
+        if (isSelectable) {
+            this.setState({ stateSelected: !stateSelected });
+        }
+    };
+
     render() {
-        const { className, children, testId, ...rest } = this.props;
+        const { className, children, isSelectable, testId, ...rest } = this.props;
         const { stateSelected } = this.state;
         const classes = cl('use-case', stateSelected ? 'use-case--selected' : false, className);
         return (
@@ -71,7 +79,7 @@ class UseCase extends Component {
                 className={classes}
                 role="button"
                 data-testid={testId}
-                onClick={() => this.setState({ stateSelected: !stateSelected })}
+                onClick={this.onClick}
                 onKeyDown={() => {}}
                 tabIndex="-1"
                 {...rest}
@@ -85,6 +93,7 @@ class UseCase extends Component {
 UseCase.defaultProps = {
     testId: 'usecase',
     className: '',
+    isSelectable: false,
     product: PropTypes.oneOf([
         'LOCALITIES',
         'LOCALITIES_ADDRESS_UK',
@@ -108,6 +117,7 @@ UseCase.propTypes = {
     testId: PropTypes.string,
     className: PropTypes.string,
     product: PropTypes.string,
+    isSelectable: PropTypes.bool,
 };
 
 export default Object.assign(UseCase, {

package/src/components/UseCase/UseCase.stories.js

@@ -10,7 +10,7 @@ export default Story;
 
 const Template = () => (
     <div className="mbib flex-column">
-        <UseCase>
+        <UseCase isSelectable>
             <div className="use-case__header">Store Locator</div>
             <div className="use-case__body">Store Locator</div>
             <div className="use-case__footer">

package/src/index.js

@@ -20,6 +20,7 @@ export { default as Icon } from './components/Icon/Icon';
 export { default as InfoMessage } from './components/InfoMessage/InfoMessage';
 export { default as Input } from './components/Input/Input';
 export { default as Label } from './components/Label/Label';
+export { default as UseCase } from './components/UseCase/UseCase';
 export { default as LocalitiesAutocomplete } from './components/Woosmap/LocalitiesAutocomplete';
 export { default as AddressAutocomplete } from './components/Woosmap/AddressAutocomplete';
 export { default as Modal } from './components/Modal/Modal';