@entur/button - npm Package Compare versions

Comparing version 2.9.0 to 2.10.0

CHANGELOG.md

@@ -6,2 +6,8 @@ # Change Log
 
+# [2.10.0](https://bitbucket.org/enturas/design-system/compare/@entur/button@2.9.0...@entur/button@2.10.0) (2022-06-28)
+
+### Features
+
+- **button:** add aria-label to button when loading ([50f325b](https://bitbucket.org/enturas/design-system/commits/50f325be55954b2d9411178d5430c202adc078c9))
+
 # [2.9.0](https://bitbucket.org/enturas/design-system/compare/@entur/button@2.8.3...@entur/button@2.9.0) (2022-06-24)
@@ -8,0 +14,0 @@

dist/button.cjs.development.js

@@ -67,3 +67,3 @@ 'use strict';
 
-var _excluded$4 = ["as", "variant", "size", "loading", "className", "children", "disabled", "width"];
+var _excluded$4 = ["as", "variant", "size", "loading", "className", "children", "disabled", "width", "aria-label"];
 var defaultElement$a = 'button';
@@ -84,2 +84,3 @@ var Button = /*#__PURE__*/React__namespace.forwardRef(function (_ref, ref) {
       width = _ref$width === void 0 ? 'auto' : _ref$width,
+      ariaLabel = _ref['aria-label'],
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
@@ -91,2 +92,12 @@
   var hasTrailingIcon = childrenArray.length > 1 && typeof childrenArray[childrenArray.length - 1] !== 'string';
+  var ariaLabelWhenLoading = childrenArray.filter(function (child) {
+    return typeof child === 'string';
+  }).join(' ');
+
+  var ariaLabelValue = function ariaLabelValue() {
+    if (ariaLabel) return ariaLabel;
+    if (loading) return ariaLabelWhenLoading;
+    return undefined;
+  };
+
   return React__namespace.createElement(Element, _extends({
@@ -97,3 +108,4 @@ className: classNames__default["default"]('eds-button', (_cx = {}, _cx["eds-button--variant-" + variant] = variant, _cx["eds-button--size-" + size] = size, _cx['eds-button--width-fluid'] = width === 'fluid', _cx['eds-button--loading'] = loading, _cx['eds-button--leading-icon'] = hasLeadingIcon, _cx['eds-button--trailing-icon'] = hasTrailingIcon, _cx), className),
     disabled: disabled,
-    "aria-disabled": disabled
+    "aria-disabled": disabled,
+    "aria-label": ariaLabelValue()
   }, rest), loading ? React__namespace.createElement(loader.LoadingDots, {
@@ -100,0 +112,0 @@ className: "eds-button__loading-dots"

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,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;
+"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),i=n(a);function l(){return l=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},l.apply(this,arguments)}function d(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","aria-label"],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=e["aria-label"],N=d(e,c),w=n||"button",q=u.Children.toArray(v),x=q.length>1&&"string"!=typeof q[0],_=q.length>1&&"string"!=typeof q[q.length-1],B=q.filter((function(e){return"string"==typeof e})).join(" ");return u.createElement(w,l({className:i.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"]=x,a["eds-button--trailing-icon"]=_,a),m),ref:t,"aria-busy":b,disabled:g,"aria-disabled":g,"aria-label":E||(b?B:void 0)},N),b?u.createElement(r.LoadingDots,{className:"eds-button__loading-dots"}):v)})),b=o.default.forwardRef((function(e,t){return o.default.createElement(f,l({as:e.as||"button"},e,{ref:t,variant:"primary"}))})),m=o.default.forwardRef((function(e,t){return o.default.createElement(f,l({as:e.as||"button"},e,{ref:t,variant:"secondary"}))})),v=o.default.forwardRef((function(e,t){return o.default.createElement(f,l({as:e.as||"button"},e,{ref:t,variant:"success"}))})),p=o.default.forwardRef((function(e,t){return o.default.createElement(f,l({as:e.as||"button"},e,{ref:t,variant:"negative"}))})),g=o.default.forwardRef((function(e,t){return o.default.createElement(f,l({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=d(e,E);return u.createElement(m||"button",l({className:i.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,l({as:e.as||"button",ref:t},e,{variant:"secondary"}))})),q=o.default.forwardRef((function(e,t){return o.default.createElement(N,l({as:e.as||"button",ref:t},e,{variant:"success"}))})),x=o.default.forwardRef((function(e,t){return o.default.createElement(N,l({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=d(e,_),v=o.default.createElement(f||"button",l({className:i.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=d(e,y);return o.default.createElement(a,l({className:i.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=d(e,h);return o.default.createElement("button",l({className:i.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.d.ts

@@ -27,2 +27,6 @@ import * as React from 'react';
     children: React.ReactNode;
+    /**
+     * Tekst som leses opp på skjermleser (nødvendig når knappetekst mangler)
+     */
+    'aria-label'?: string;
 };
@@ -29,0 +33,0 @@ declare const defaultElement = "button";

dist/button.esm.js

@@ -40,3 +40,3 @@ import { warnAboutMissingStyles } from '@entur/utils';
 
-var _excluded$4 = ["as", "variant", "size", "loading", "className", "children", "disabled", "width"];
+var _excluded$4 = ["as", "variant", "size", "loading", "className", "children", "disabled", "width", "aria-label"];
 var defaultElement$a = 'button';
@@ -57,2 +57,3 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       width = _ref$width === void 0 ? 'auto' : _ref$width,
+      ariaLabel = _ref['aria-label'],
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
@@ -64,2 +65,12 @@
   var hasTrailingIcon = childrenArray.length > 1 && typeof childrenArray[childrenArray.length - 1] !== 'string';
+  var ariaLabelWhenLoading = childrenArray.filter(function (child) {
+    return typeof child === 'string';
+  }).join(' ');
+
+  var ariaLabelValue = function ariaLabelValue() {
+    if (ariaLabel) return ariaLabel;
+    if (loading) return ariaLabelWhenLoading;
+    return undefined;
+  };
+
   return React.createElement(Element, _extends({
@@ -70,3 +81,4 @@ className: classNames('eds-button', (_cx = {}, _cx["eds-button--variant-" + variant] = variant, _cx["eds-button--size-" + size] = size, _cx['eds-button--width-fluid'] = width === 'fluid', _cx['eds-button--loading'] = loading, _cx['eds-button--leading-icon'] = hasLeadingIcon, _cx['eds-button--trailing-icon'] = hasTrailingIcon, _cx), className),
     disabled: disabled,
-    "aria-disabled": disabled
+    "aria-disabled": disabled,
+    "aria-label": ariaLabelValue()
   }, rest), loading ? React.createElement(LoadingDots, {
@@ -73,0 +85,0 @@ className: "eds-button__loading-dots"

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

177328

increased by2.08%

Lines of code

1387

increased by1.76%

No dependency changes