@woosmap/ui 4.172.0 → 4.174.0

package/package.json

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

package/src/components/Button/Button.js

@@ -43,7 +43,7 @@ export default class Button extends Component {
             { 'btn--loading': isLoading },
             { 'btn--no-label': !label },
             { 'btn--custom-icon-size': iconSize && iconSize !== 22 },
-            className,
+            className
         );
         let iconComponent = icon ? <Icon isFill={isFillIcon} size={iconSize} icon={icon} /> : null;
         if (isLoading) {
@@ -113,6 +113,7 @@ Button.propTypes = {
         'tab--pills',
         'tab--disabled',
         'sidebar-link',
+        'toggle',
     ]),
     isLoading: PropTypes.bool,
     active: PropTypes.bool,

package/src/components/PricingSlider/PricingSlider.js

@@ -155,7 +155,7 @@ export default class PricingSlider extends Component {
     };
 
     displayDetails = (displayedPricing) => (
-        <div className='pricing-slider__detailed-price'>
+        <div className="pricing-slider__detailed-price">
             <table>
                 <tr>
                     <td>{tr('Monthly Requests')}</td>
@@ -171,7 +171,6 @@ export default class PricingSlider extends Component {
                     );
                 })}
             </table>
-            <Button label={tr('Close')} onClick={() => this.setState({ displayDetailed: false })} />
         </div>
     );
 
@@ -212,9 +211,11 @@ export default class PricingSlider extends Component {
                         </div>
                         <Button
                             className="pricing-slider__detailed-price-btn"
-                            icon="caret-bottom"
+                            iconRight
+                            type="toggle"
                             label={tr('Detailed Pricing')}
-                            onClick={() => this.setState({ displayDetailed: true })}
+                            icon={displayDetailed ? 'caret-bottom' : 'caret-top'}
+                            onClick={() => this.setState({ displayDetailed: !displayDetailed })}
                         />
                     </div>
                     <ReactSlider
@@ -251,7 +252,7 @@ export default class PricingSlider extends Component {
                     </div>
                     <div className="pricing-slider__price">{displayedAmount}</div>
                 </div>
-                {displayDetailed && this.displayDetails(displayedPricing)}<
+                {displayDetailed && this.displayDetails(displayedPricing)}
             </div>
         );
     }