@entur/button - npm Package Compare versions

Comparing version 2.8.3 to 2.9.0

CHANGELOG.md

@@ -6,2 +6,9 @@ # Change Log
 
+# [2.9.0](https://bitbucket.org/enturas/design-system/compare/@entur/button@2.8.3...@entur/button@2.9.0) (2022-06-24)
+
+### Features
+
+- **floating button:** add visual indication for active state ([c794e4f](https://bitbucket.org/enturas/design-system/commits/c794e4f831096da1a9ab4e25e62f4329e25e48ff))
+- **icon button:** add cursor not-allowed to disabled icon button and add aria-label prop descriptio ([d7ab051](https://bitbucket.org/enturas/design-system/commits/d7ab051d9a32a2879e243aee9e4620f3e23cb525))
+
 ## [2.8.3](https://bitbucket.org/enturas/design-system/compare/@entur/button@2.8.2...@entur/button@2.8.3) (2022-06-02)
@@ -8,0 +15,0 @@

dist/button.cjs.development.js

@@ -280,3 +280,3 @@ 'use strict';
   var Element = as || defaultElement;
-  return React__default["default"].createElement(Element, _extends({
+  var iconButtonElement = React__default["default"].createElement(Element, _extends({
     className: classNames__default["default"]('eds-icon-button', className, {
@@ -287,4 +287,13 @@ 'eds-icon-button--disabled': disabled
     "aria-disabled": disabled,
+    "aria-busy": loading,
     ref: ref
   }, rest), loading ? React__default["default"].createElement(loader.LoadingDots, null) : children);
+
+  if (disabled) {
+    return React__default["default"].createElement("div", {
+      className: "eds-icon-button--disabled__wrapper"
+    }, iconButtonElement);
+  }
+
+  return React__default["default"].createElement(React__default["default"].Fragment, null, iconButtonElement);
 });
@@ -291,0 +300,0 @@

dist/button.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@entur/utils"),t=require("react"),a=require("classnames"),r=require("@entur/loader");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(a){if("default"!==a){var r=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,r.get?r:{enumerable:!0,get:function(){return e[a]}})}})),t.default=e,t}var u=s(t),o=n(t),d=n(a);function i(){return i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e},i.apply(this,arguments)}function l(e,t){if(null==e)return{};var a,r,n={},s=Object.keys(e);for(r=0;r<s.length;r++)t.indexOf(a=s[r])>=0||(n[a]=e[a]);return n}var c=["as","variant","size","loading","className","children","disabled","width"],f=u.forwardRef((function(e,t){var a,n=e.as,s=e.variant,o=e.size,f=void 0===o?"medium":o,b=e.loading,m=e.className,v=e.children,g=e.disabled,p=void 0!==g&&g,y=e.width,h=void 0===y?"auto":y,E=l(e,c),N=n||"button",w=u.Children.toArray(v),q=w.length>1&&"string"!=typeof w[0],x=w.length>1&&"string"!=typeof w[w.length-1];return u.createElement(N,i({className:d.default("eds-button",(a={},a["eds-button--variant-"+s]=s,a["eds-button--size-"+f]=f,a["eds-button--width-fluid"]="fluid"===h,a["eds-button--loading"]=b,a["eds-button--leading-icon"]=q,a["eds-button--trailing-icon"]=x,a),m),ref:t,"aria-busy":b,disabled:p,"aria-disabled":p},E),b?u.createElement(r.LoadingDots,{className:"eds-button__loading-dots"}):v)})),b=o.default.forwardRef((function(e,t){return o.default.createElement(f,i({as:e.as||"button"},e,{ref:t,variant:"primary"}))})),m=o.default.forwardRef((function(e,t){return o.default.createElement(f,i({as:e.as||"button"},e,{ref:t,variant:"secondary"}))})),v=o.default.forwardRef((function(e,t){return o.default.createElement(f,i({as:e.as||"button"},e,{ref:t,variant:"success"}))})),g=o.default.forwardRef((function(e,t){return o.default.createElement(f,i({as:e.as||"button"},e,{ref:t,variant:"negative"}))})),p=o.default.forwardRef((function(e,t){return o.default.createElement(f,i({as:e.as||"button"},e,{ref:t,variant:"tertiary"}))})),y=["as","className"],h=["className","children","size"],E=["children","className","variant","disabled","loading","as"],N=u.forwardRef((function(e,t){var a=e.children,n=e.className,s=e.variant,o=e.disabled,c=void 0!==o&&o,f=e.loading,b=void 0!==f&&f,m=e.as,v=l(e,E);return u.createElement(m||"button",i({className:d.default("eds-square-button",{"eds-square-button--success":"success"===s},{"eds-square-button--secondary":"secondary"===s},{"eds-square-button--tertiary":"tertiary"===s},{"eds-square-button--loading":b},n),"aria-busy":b,disabled:c,"aria-disabled":c,ref:t},v),u.Children.map(a,(function(e){return"string"==typeof e?u.createElement("span",{className:"eds-square-button__label"},e):u.createElement("span",{className:"eds-square-button__icon"},b?u.createElement(r.LoadingDots,{className:"eds-square-button__loading-dots"}):e)})))})),w=o.default.forwardRef((function(e,t){return o.default.createElement(N,i({as:e.as||"button",ref:t},e,{variant:"secondary"}))})),q=o.default.forwardRef((function(e,t){return o.default.createElement(N,i({as:e.as||"button",ref:t},e,{variant:"success"}))})),x=o.default.forwardRef((function(e,t){return o.default.createElement(N,i({as:e.as||"button",ref:t},e,{variant:"tertiary"}))})),B=["children","className","disabled","size","as","loading"],_=o.default.forwardRef((function(e,t){var a=e.children,n=e.className,s=e.disabled,u=void 0!==s&&s,c=e.size,f=e.as,b=e.loading,m=l(e,B);return o.default.createElement(f||"button",i({className:d.default("eds-icon-button",n,{"eds-icon-button--disabled":u},"eds-icon-button--size-"+c),disabled:u,"aria-disabled":u,ref:t},m),b?o.default.createElement(r.LoadingDots,null):a)}));e.warnAboutMissingStyles("button"),exports.Button=f,exports.ButtonGroup=function(e){var t=e.as,a=void 0===t?"div":t,r=e.className,n=l(e,y);return o.default.createElement(a,i({className:d.default("eds-button-group",r)},n))},exports.FloatingButton=function(e){var t=e.className,a=e.children,r=e.size,n=void 0===r?"medium":r,s=l(e,h);return o.default.createElement("button",i({className:d.default("eds-floating-button",{"eds-floating-button--extended":o.default.Children.count(a)>1},{"eds-floating-button--small":"small"===n},t),type:"button"},s),function(e){return o.default.Children.map(e,(function(e){return"string"==typeof e?o.default.createElement("span",null,e):e}))}(a))},exports.IconButton=_,exports.NegativeButton=g,exports.PrimaryButton=b,exports.SecondaryButton=m,exports.SecondarySquareButton=w,exports.SuccessButton=v,exports.SuccessSquareButton=q,exports.TertiaryButton=p,exports.TertiarySquareButton=x;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@entur/utils"),t=require("react"),a=require("classnames"),r=require("@entur/loader");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(a){if("default"!==a){var r=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,r.get?r:{enumerable:!0,get:function(){return e[a]}})}})),t.default=e,t}var u=s(t),o=n(t),d=n(a);function i(){return i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e},i.apply(this,arguments)}function l(e,t){if(null==e)return{};var a,r,n={},s=Object.keys(e);for(r=0;r<s.length;r++)t.indexOf(a=s[r])>=0||(n[a]=e[a]);return n}var c=["as","variant","size","loading","className","children","disabled","width"],f=u.forwardRef((function(e,t){var a,n=e.as,s=e.variant,o=e.size,f=void 0===o?"medium":o,b=e.loading,m=e.className,v=e.children,p=e.disabled,g=void 0!==p&&p,y=e.width,h=void 0===y?"auto":y,E=l(e,c),N=n||"button",w=u.Children.toArray(v),q=w.length>1&&"string"!=typeof w[0],x=w.length>1&&"string"!=typeof w[w.length-1];return u.createElement(N,i({className:d.default("eds-button",(a={},a["eds-button--variant-"+s]=s,a["eds-button--size-"+f]=f,a["eds-button--width-fluid"]="fluid"===h,a["eds-button--loading"]=b,a["eds-button--leading-icon"]=q,a["eds-button--trailing-icon"]=x,a),m),ref:t,"aria-busy":b,disabled:g,"aria-disabled":g},E),b?u.createElement(r.LoadingDots,{className:"eds-button__loading-dots"}):v)})),b=o.default.forwardRef((function(e,t){return o.default.createElement(f,i({as:e.as||"button"},e,{ref:t,variant:"primary"}))})),m=o.default.forwardRef((function(e,t){return o.default.createElement(f,i({as:e.as||"button"},e,{ref:t,variant:"secondary"}))})),v=o.default.forwardRef((function(e,t){return o.default.createElement(f,i({as:e.as||"button"},e,{ref:t,variant:"success"}))})),p=o.default.forwardRef((function(e,t){return o.default.createElement(f,i({as:e.as||"button"},e,{ref:t,variant:"negative"}))})),g=o.default.forwardRef((function(e,t){return o.default.createElement(f,i({as:e.as||"button"},e,{ref:t,variant:"tertiary"}))})),y=["as","className"],h=["className","children","size"],E=["children","className","variant","disabled","loading","as"],N=u.forwardRef((function(e,t){var a=e.children,n=e.className,s=e.variant,o=e.disabled,c=void 0!==o&&o,f=e.loading,b=void 0!==f&&f,m=e.as,v=l(e,E);return u.createElement(m||"button",i({className:d.default("eds-square-button",{"eds-square-button--success":"success"===s},{"eds-square-button--secondary":"secondary"===s},{"eds-square-button--tertiary":"tertiary"===s},{"eds-square-button--loading":b},n),"aria-busy":b,disabled:c,"aria-disabled":c,ref:t},v),u.Children.map(a,(function(e){return"string"==typeof e?u.createElement("span",{className:"eds-square-button__label"},e):u.createElement("span",{className:"eds-square-button__icon"},b?u.createElement(r.LoadingDots,{className:"eds-square-button__loading-dots"}):e)})))})),w=o.default.forwardRef((function(e,t){return o.default.createElement(N,i({as:e.as||"button",ref:t},e,{variant:"secondary"}))})),q=o.default.forwardRef((function(e,t){return o.default.createElement(N,i({as:e.as||"button",ref:t},e,{variant:"success"}))})),x=o.default.forwardRef((function(e,t){return o.default.createElement(N,i({as:e.as||"button",ref:t},e,{variant:"tertiary"}))})),_=["children","className","disabled","size","as","loading"],B=o.default.forwardRef((function(e,t){var a=e.children,n=e.className,s=e.disabled,u=void 0!==s&&s,c=e.size,f=e.as,b=e.loading,m=l(e,_),v=o.default.createElement(f||"button",i({className:d.default("eds-icon-button",n,{"eds-icon-button--disabled":u},"eds-icon-button--size-"+c),disabled:u,"aria-disabled":u,"aria-busy":b,ref:t},m),b?o.default.createElement(r.LoadingDots,null):a);return u?o.default.createElement("div",{className:"eds-icon-button--disabled__wrapper"},v):o.default.createElement(o.default.Fragment,null,v)}));e.warnAboutMissingStyles("button"),exports.Button=f,exports.ButtonGroup=function(e){var t=e.as,a=void 0===t?"div":t,r=e.className,n=l(e,y);return o.default.createElement(a,i({className:d.default("eds-button-group",r)},n))},exports.FloatingButton=function(e){var t=e.className,a=e.children,r=e.size,n=void 0===r?"medium":r,s=l(e,h);return o.default.createElement("button",i({className:d.default("eds-floating-button",{"eds-floating-button--extended":o.default.Children.count(a)>1},{"eds-floating-button--small":"small"===n},t),type:"button"},s),function(e){return o.default.Children.map(e,(function(e){return"string"==typeof e?o.default.createElement("span",null,e):e}))}(a))},exports.IconButton=B,exports.NegativeButton=p,exports.PrimaryButton=b,exports.SecondaryButton=m,exports.SecondarySquareButton=w,exports.SuccessButton=v,exports.SuccessSquareButton=q,exports.TertiaryButton=g,exports.TertiarySquareButton=x;
 //# sourceMappingURL=button.cjs.production.min.js.map

dist/button.esm.js

@@ -253,3 +253,3 @@ import { warnAboutMissingStyles } from '@entur/utils';
   var Element = as || defaultElement;
-  return React__default.createElement(Element, _extends({
+  var iconButtonElement = React__default.createElement(Element, _extends({
     className: classNames('eds-icon-button', className, {
@@ -260,4 +260,13 @@ 'eds-icon-button--disabled': disabled
     "aria-disabled": disabled,
+    "aria-busy": loading,
     ref: ref
   }, rest), loading ? React__default.createElement(LoadingDots, null) : children);
+
+  if (disabled) {
+    return React__default.createElement("div", {
+      className: "eds-icon-button--disabled__wrapper"
+    }, iconButtonElement);
+  }
+
+  return React__default.createElement(React__default.Fragment, null, iconButtonElement);
 });
@@ -264,0 +273,0 @@

dist/IconButton.d.ts

@@ -7,2 +7,4 @@ import React from 'react';
     children: React.ReactNode;
+    /** Tekst som forklarer knappens handling. MÅ være satt hvis du ikke har en forklarende tooltip på knappen */
+    'aria-label'?: string;
     /** Ekstra klassenavn */
@@ -9,0 +11,0 @@ className?: string;

package.json

 {
   "name": "@entur/button",
-  "version": "2.8.3",
+  "version": "2.9.0",
   "license": "EUPL-1.2",
@@ -37,3 +37,3 @@ "main": "dist/index.js",
   },
-  "gitHead": "02c1bc4caad8480d21d8560188ba21b972e3370e"
+  "gitHead": "974289b6579ade4460d12aa877a89e454c983d48"
 }

No alert changes

Improved metrics

Total package byte prevSize

173711

increased by1.96%

Lines of code

1363

increased by2.17%

No dependency changes