@entur/button - npm Package Compare versions

Comparing version 1.6.1 to 2.0.0

CHANGELOG.md

@@ -6,2 +6,18 @@ # Change Log
 
+# [2.0.0](https://bitbucket.org/enturas/design-system/compare/@entur/button@1.6.1...@entur/button@2.0.0) (2020-01-28)
+
+### Code Refactoring
+
+- **Button:** remove size="square" as a valid prop from regular buttons ([7fb1f95](https://bitbucket.org/enturas/design-system/commits/7fb1f95c9dfa56155be762258d59eba7210e6dbc))
+
+### Features
+
+- **square buttons:** new components \`SecondarySquareButton\`, \`SuccessSquareButton\` ([2e92897](https://bitbucket.org/enturas/design-system/commits/2e92897f22acacdc649e03dc145db6b589751454))
+
+### BREAKING CHANGES
+
+- **Button:** Square buttons are now their own components.
+
+ISSUES CLOSED: DS-179
+
 ## [1.6.1](https://bitbucket.org/enturas/design-system/compare/@entur/button@1.6.0...@entur/button@1.6.1) (2020-01-27)
@@ -8,0 +24,0 @@

dist/button.cjs.development.js

@@ -39,3 +39,4 @@ 'use strict';
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      width = _ref.width,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? 'auto' : _ref$width,
       _ref$as = _ref.as,
@@ -50,3 +51,3 @@ as = _ref$as === void 0 ? 'button' : _ref$as,
   return React.createElement(Element, Object.assign({
-    className: classNames('eds-button', (_cx = {}, _cx["eds-button--variant-" + variant] = variant, _cx["eds-button--size-" + size] = size, _cx["eds-button--width-" + width] = width, _cx['eds-button--loading'] = loading, _cx['eds-button--leading-icon'] = hasLeadingIcon, _cx['eds-button--trailing-icon'] = hasTrailingIcon, _cx), className),
+    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),
     ref: ref,
@@ -140,2 +141,39 @@ "aria-busy": loading,
 
+var BaseSquareButton = function BaseSquareButton(_ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      variant = _ref.variant,
+      rest = _objectWithoutPropertiesLoose(_ref, ["children", "className", "variant"]);
+
+  return React.createElement("button", Object.assign({
+    className: classNames('eds-square-button', {
+      'eds-square-button--success': variant === 'success'
+    }, {
+      'eds-square-button--secondary': variant === 'secondary'
+    }, className)
+  }, rest), React.Children.map(children, function (child) {
+    if (typeof child === 'string') {
+      return React.createElement("span", {
+        className: "eds-square-button__label"
+      }, child);
+    }
+
+    return React.createElement("span", {
+      className: "eds-square-button__icon"
+    }, child);
+  }));
+};
+
+var SecondarySquareButton = function SecondarySquareButton(props) {
+  return React.createElement(BaseSquareButton, Object.assign({}, props, {
+    variant: "secondary"
+  }));
+};
+
+var SuccessSquareButton = function SuccessSquareButton(props) {
+  return React.createElement(BaseSquareButton, Object.assign({}, props, {
+    variant: "success"
+  }));
+};
+
 utils.warnAboutMissingStyles('button');
@@ -149,4 +187,6 @@
 exports.SecondaryButton = SecondaryButton;
+exports.SecondarySquareButton = SecondarySquareButton;
 exports.SuccessButton = SuccessButton;
+exports.SuccessSquareButton = SuccessSquareButton;
 exports.TertiaryButton = TertiaryButton;
 //# sourceMappingURL=button.cjs.development.js.map

dist/button.cjs.production.min.js

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

dist/Button.d.ts

@@ -20,4 +20,6 @@ import React from 'react';
     disabled?: boolean;
-    /** Bredden på knappen. Defaulter til "standard-størrelse" */
-    width?: 'fluid' | 'square';
+    /** Bredden på knappen.
+     * @default 'auto'
+     */
+    width?: 'fluid' | 'auto';
     /** Innholdet i knappen */
@@ -24,0 +26,0 @@ children: React.ReactNode;

dist/button.esm.js

@@ -33,3 +33,4 @@ import { warnAboutMissingStyles } from '@entur/utils';
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      width = _ref.width,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? 'auto' : _ref$width,
       _ref$as = _ref.as,
@@ -44,3 +45,3 @@ as = _ref$as === void 0 ? 'button' : _ref$as,
   return React.createElement(Element, Object.assign({
-    className: classNames('eds-button', (_cx = {}, _cx["eds-button--variant-" + variant] = variant, _cx["eds-button--size-" + size] = size, _cx["eds-button--width-" + width] = width, _cx['eds-button--loading'] = loading, _cx['eds-button--leading-icon'] = hasLeadingIcon, _cx['eds-button--trailing-icon'] = hasTrailingIcon, _cx), className),
+    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),
     ref: ref,
@@ -134,5 +135,42 @@ "aria-busy": loading,
 
+var BaseSquareButton = function BaseSquareButton(_ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      variant = _ref.variant,
+      rest = _objectWithoutPropertiesLoose(_ref, ["children", "className", "variant"]);
+
+  return React.createElement("button", Object.assign({
+    className: classNames('eds-square-button', {
+      'eds-square-button--success': variant === 'success'
+    }, {
+      'eds-square-button--secondary': variant === 'secondary'
+    }, className)
+  }, rest), React.Children.map(children, function (child) {
+    if (typeof child === 'string') {
+      return React.createElement("span", {
+        className: "eds-square-button__label"
+      }, child);
+    }
+
+    return React.createElement("span", {
+      className: "eds-square-button__icon"
+    }, child);
+  }));
+};
+
+var SecondarySquareButton = function SecondarySquareButton(props) {
+  return React.createElement(BaseSquareButton, Object.assign({}, props, {
+    variant: "secondary"
+  }));
+};
+
+var SuccessSquareButton = function SuccessSquareButton(props) {
+  return React.createElement(BaseSquareButton, Object.assign({}, props, {
+    variant: "success"
+  }));
+};
+
 warnAboutMissingStyles('button');
 
-export { Button, ButtonGroup, FloatingButton, NegativeButton, PrimaryButton, SecondaryButton, SuccessButton, TertiaryButton };
+export { Button, ButtonGroup, FloatingButton, NegativeButton, PrimaryButton, SecondaryButton, SecondarySquareButton, SuccessButton, SuccessSquareButton, TertiaryButton };
 //# sourceMappingURL=button.esm.js.map

dist/index.d.ts

@@ -10,1 +10,3 @@ import './index.scss';
 export * from './FloatingButton';
+export * from './SecondarySquareButton';
+export * from './SuccessSquareButton';

dist/NegativeButton.d.ts

@@ -17,4 +17,6 @@ import React from 'react';
     disabled?: boolean;
-    /** Bredden på knappen. Defaulter til "standard-størrelse" */
-    width?: 'fluid';
+    /** Bredden på knappen.
+     * @default 'auto'
+     */
+    width?: 'fluid' | 'auto';
     /** Innholdet i knappen */
@@ -21,0 +23,0 @@ children: React.ReactNode;

dist/PrimaryButton.d.ts

@@ -17,4 +17,6 @@ import React from 'react';
     disabled?: boolean;
-    /** Bredden på knappen. Defaulter til "standard-størrelse" */
-    width?: 'fluid';
+    /** Bredden på knappen.
+     * @default 'auto'
+     */
+    width?: 'fluid' | 'auto';
     /** Innholdet i knappen */
@@ -21,0 +23,0 @@ children: React.ReactNode;

dist/SecondaryButton.d.ts

@@ -17,4 +17,6 @@ import React from 'react';
     disabled?: boolean;
-    /** Bredden på knappen. Defaulter til "standard-størrelse" */
-    width?: 'fluid' | 'square';
+    /** Bredden på knappen
+     * @default 'auto'
+     */
+    width?: 'fluid' | 'auto';
     /** Innholdet i knappen */
@@ -21,0 +23,0 @@ children: React.ReactNode;

dist/SuccessButton.d.ts

@@ -17,4 +17,6 @@ import React from 'react';
     disabled?: boolean;
-    /** Bredden på knappen. Defaulter til "standard-størrelse" */
-    width?: 'fluid' | 'square';
+    /** Bredden på knappen
+     * @default 'auto'
+     */
+    width?: 'fluid' | 'auto';
     /** Innholdet i knappen */
@@ -21,0 +23,0 @@ children: React.ReactNode;

package.json

 {
   "name": "@entur/button",
-  "version": "1.6.1",
+  "version": "2.0.0",
   "license": "EUPL-1.2",
@@ -34,5 +34,5 @@ "main": "dist/index.js",
   "devDependencies": {
-    "@entur/tokens": "^1.1.3"
+    "@entur/tokens": "^1.1.4"
   },
-  "gitHead": "a0c928bf8497bee3271fa0ee886fb7c311777b0e"
+  "gitHead": "618617acaf1300290f805dd5773be22c0e62afad"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

105137

increased by16.86%

Number of package files

26

increased by18.18%

Lines of code

929

increased by24.2%

No dependency changes