@entur/button - npm Package Compare versions

Comparing version 1.4.1 to 1.5.0

CHANGELOG.md

@@ -6,2 +6,8 @@ # Change Log
 
+# [1.5.0](https://bitbucket.org/enturas/design-system/compare/@entur/button@1.4.1...@entur/button@1.5.0) (2020-01-06)
+
+### Features
+
+- **FloatingButton:** add new component: FloatingButton ([2f38bc5](https://bitbucket.org/enturas/design-system/commits/2f38bc53cb1b4a357126ca35d6548b7a6e36b3dc))
+
 ## [1.4.1](https://bitbucket.org/enturas/design-system/compare/@entur/button@1.4.0...@entur/button@1.4.1) (2019-12-17)
@@ -8,0 +14,0 @@

dist/button.cjs.development.js

@@ -8,3 +8,3 @@ 'use strict';
 var React = _interopDefault(require('react'));
-var cx = _interopDefault(require('classnames'));
+var classNames = _interopDefault(require('classnames'));
 
@@ -34,3 +34,3 @@ var Button =
   return React.createElement(Element, Object.assign({
-    className: cx('eds-button', (_cx = {}, _defineProperty(_cx, "eds-button--variant-".concat(variant), variant), _defineProperty(_cx, "eds-button--size-".concat(size), size), _defineProperty(_cx, "eds-button--width-".concat(width), width), _defineProperty(_cx, 'eds-button--loading', loading), _defineProperty(_cx, 'eds-button--leading-icon', hasLeadingIcon), _defineProperty(_cx, 'eds-button--trailing-icon', hasTrailingIcon), _cx), className),
+    className: classNames('eds-button', (_cx = {}, _defineProperty(_cx, "eds-button--variant-".concat(variant), variant), _defineProperty(_cx, "eds-button--size-".concat(size), size), _defineProperty(_cx, "eds-button--width-".concat(width), width), _defineProperty(_cx, 'eds-button--loading', loading), _defineProperty(_cx, 'eds-button--leading-icon', hasLeadingIcon), _defineProperty(_cx, 'eds-button--trailing-icon', hasTrailingIcon), _cx), className),
     ref: ref,
@@ -97,8 +97,28 @@ "aria-busy": loading,
   return React.createElement(Element, Object.assign({
-    className: cx('eds-button-group', className)
+    className: classNames('eds-button-group', className)
   }, rest));
 };
 
+var FloatingButton = function FloatingButton(_ref) {
+  var className = _ref.className,
+      children = _ref.children,
+      rest = _objectWithoutProperties(_ref, ["className", "children"]);
+
+  return React.createElement("button", Object.assign({
+    className: classNames('eds-floating-button', {
+      'eds-floating-button--extended': React.Children.count(children) > 1
+    }, className),
+    type: "button"
+  }, rest), wrapStringsInSpans(children));
+};
+
+var wrapStringsInSpans = function wrapStringsInSpans(children) {
+  return React.Children.map(children, function (child) {
+    return typeof child === 'string' ? React.createElement("span", null, child) : child;
+  });
+};
+
 exports.Button = Button;
 exports.ButtonGroup = ButtonGroup;
+exports.FloatingButton = FloatingButton;
 exports.NegativeButton = NegativeButton;
@@ -105,0 +125,0 @@ exports.PrimaryButton = PrimaryButton;

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

dist/button.esm.js

@@ -1,5 +0,5 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import React from 'react';
-import cx from 'classnames';
+import classNames from 'classnames';
 
@@ -29,3 +29,3 @@ var Button =
   return React.createElement(Element, Object.assign({
-    className: cx('eds-button', (_cx = {}, _defineProperty(_cx, "eds-button--variant-".concat(variant), variant), _defineProperty(_cx, "eds-button--size-".concat(size), size), _defineProperty(_cx, "eds-button--width-".concat(width), width), _defineProperty(_cx, 'eds-button--loading', loading), _defineProperty(_cx, 'eds-button--leading-icon', hasLeadingIcon), _defineProperty(_cx, 'eds-button--trailing-icon', hasTrailingIcon), _cx), className),
+    className: classNames('eds-button', (_cx = {}, _defineProperty(_cx, "eds-button--variant-".concat(variant), variant), _defineProperty(_cx, "eds-button--size-".concat(size), size), _defineProperty(_cx, "eds-button--width-".concat(width), width), _defineProperty(_cx, 'eds-button--loading', loading), _defineProperty(_cx, 'eds-button--leading-icon', hasLeadingIcon), _defineProperty(_cx, 'eds-button--trailing-icon', hasTrailingIcon), _cx), className),
     ref: ref,
@@ -92,7 +92,26 @@ "aria-busy": loading,
   return React.createElement(Element, Object.assign({
-    className: cx('eds-button-group', className)
+    className: classNames('eds-button-group', className)
   }, rest));
 };
 
-export { Button, ButtonGroup, NegativeButton, PrimaryButton, SecondaryButton, SuccessButton, TertiaryButton };
+var FloatingButton = function FloatingButton(_ref) {
+  var className = _ref.className,
+      children = _ref.children,
+      rest = _objectWithoutProperties(_ref, ["className", "children"]);
+
+  return React.createElement("button", Object.assign({
+    className: classNames('eds-floating-button', {
+      'eds-floating-button--extended': React.Children.count(children) > 1
+    }, className),
+    type: "button"
+  }, rest), wrapStringsInSpans(children));
+};
+
+var wrapStringsInSpans = function wrapStringsInSpans(children) {
+  return React.Children.map(children, function (child) {
+    return typeof child === 'string' ? React.createElement("span", null, child) : child;
+  });
+};
+
+export { Button, ButtonGroup, FloatingButton, NegativeButton, PrimaryButton, SecondaryButton, SuccessButton, TertiaryButton };
 //# sourceMappingURL=button.esm.js.map

dist/index.d.ts

@@ -0,158 +1,70 @@
+/// <reference types="react" />
 import React from "react";
-declare type ButtonProps = {
-    /** Farge og uttrykk på knappen */
-    variant: 'primary' | 'secondary' | 'success' | 'negative' | 'tertiary';
-    /** Størrelsen på knappen
-     * @default 'medium'
-     */
-    size?: 'medium' | 'large';
-    /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe
-     * @default false
-     */
+type ButtonProps = {
+    variant: "primary" | "secondary" | "success" | "negative" | "tertiary";
+    size?: "medium" | "large";
     loading?: boolean;
-    /** Ekstra klassenavn */
     className?: string;
-    /** Deaktivering av knappen
-     * @default false
-     */
     disabled?: boolean;
-    /** Bredden på knappen. Defaulter til "standard-størrelse" */
-    width?: 'fluid' | 'square';
-    /** Innholdet i knappen */
+    width?: "fluid" | "square";
     children: React.ReactNode;
-    /** HTML-elementet eller React-komponenten som lager knappen
-     * @default 'button'
-     */
-    as?: 'a' | 'button' | React.ElementType;
+    as?: "a" | "button" | React.ElementType;
     [key: string]: any;
 };
 declare const Button: React.RefForwardingComponent<HTMLButtonElement, ButtonProps>;
-declare type PrimaryButtonProps = {
-    /** Størrelsen på knappen
-     * @default 'medium'
-     */
-    size?: 'medium' | 'large';
-    /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe
-     * @default false
-     */
+type PrimaryButtonProps = {
+    size?: "medium" | "large";
     loading?: boolean;
-    /** Ekstra klassenavn */
     className?: string;
-    /** Deaktivering av knappen
-     * @default false
-     */
     disabled?: boolean;
-    /** Bredden på knappen. Defaulter til "standard-størrelse" */
-    width?: 'fluid';
-    /** Innholdet i knappen */
+    width?: "fluid";
     children: React.ReactNode;
-    /** HTML-elementet eller React-komponenten som lager knappen
-     * @default 'button'
-     */
-    as?: 'a' | 'button' | React.ElementType;
+    as?: "a" | "button" | React.ElementType;
     [key: string]: any;
 };
 declare const PrimaryButton: React.RefForwardingComponent<HTMLButtonElement, PrimaryButtonProps>;
-declare type SecondaryButtonProps = {
-    /** Størrelsen på knappen
-     * @default 'medium'
-     */
-    size?: 'medium' | 'large';
-    /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe
-     * @default false
-     */
+type SecondaryButtonProps = {
+    size?: "medium" | "large";
     loading?: boolean;
-    /** Ekstra klassenavn */
     className?: string;
-    /** Deaktivering av knappen
-     * @default false
-     */
     disabled?: boolean;
-    /** Bredden på knappen. Defaulter til "standard-størrelse" */
-    width?: 'fluid' | 'square';
-    /** Innholdet i knappen */
+    width?: "fluid" | "square";
     children: React.ReactNode;
-    /** HTML-elementet eller React-komponenten som lager knappen
-     * @default 'button'
-     */
-    as?: 'a' | 'button' | React.ElementType;
+    as?: "a" | "button" | React.ElementType;
     [key: string]: any;
 };
 declare const SecondaryButton: React.RefForwardingComponent<HTMLButtonElement, SecondaryButtonProps>;
-declare type SuccessButtonProps = {
-    /** Størrelsen på knappen
-     * @default 'medium'
-     */
-    size?: 'medium' | 'large';
-    /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe
-     * @default false
-     */
+type SuccessButtonProps = {
+    size?: "medium" | "large";
     loading?: boolean;
-    /** Ekstra klassenavn */
     className?: string;
-    /** Deaktivering av knappen
-     * @default false
-     */
     disabled?: boolean;
-    /** Bredden på knappen. Defaulter til "standard-størrelse" */
-    width?: 'fluid' | 'square';
-    /** Innholdet i knappen */
+    width?: "fluid" | "square";
     children: React.ReactNode;
-    /** HTML-elementet eller React-komponenten som lager knappen
-     * @default 'button'
-     */
-    as?: 'a' | 'button' | React.ElementType;
+    as?: "a" | "button" | React.ElementType;
     [key: string]: any;
 };
 declare const SuccessButton: React.RefForwardingComponent<HTMLButtonElement, SuccessButtonProps>;
-declare type NegativeButtonProps = {
-    /** Størrelsen på knappen
-     * @default 'medium'
-     */
-    size?: 'medium' | 'large';
-    /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe
-     * @default false
-     */
+type NegativeButtonProps = {
+    size?: "medium" | "large";
     loading?: boolean;
-    /** Ekstra klassenavn */
     className?: string;
-    /** Deaktivering av knappen
-     * @default false
-     */
     disabled?: boolean;
-    /** Bredden på knappen. Defaulter til "standard-størrelse" */
-    width?: 'fluid';
-    /** Innholdet i knappen */
+    width?: "fluid";
     children: React.ReactNode;
-    /** HTML-elementet eller React-komponenten som lager knappen
-     * @default 'button'
-     */
-    as?: 'a' | 'button' | React.ElementType;
+    as?: "a" | "button" | React.ElementType;
     [key: string]: any;
 };
 declare const NegativeButton: React.RefForwardingComponent<HTMLButtonElement, NegativeButtonProps>;
-declare type TertiaryButtonProps = {
-    /** Ekstra klassenavn */
+type TertiaryButtonProps = {
     className?: string;
-    /** Deaktivering av knappen
-     * @default false
-     */
     disabled?: boolean;
-    /** Innholdet i knappen */
     children: React.ReactNode;
-    /** HTML-elementet eller React-komponenten som lager knappen
-     * @default 'button'
-     */
-    as?: 'a' | 'button' | React.ElementType;
+    as?: "a" | "button" | React.ElementType;
     [key: string]: any;
 };
 declare const TertiaryButton: React.RefForwardingComponent<HTMLButtonElement, TertiaryButtonProps>;
-declare type ButtonGroupProps = {
-    /** To eller flere Button-komponenter */
+type ButtonGroupProps = {
     children: React.ReactNode;
-    /** Ekstra klassenavn */
     className?: string;
-    /** HTML-elementet eller React-komponenten som lages
-     * @default "div"
-     */
     as?: string | React.ElementType;
@@ -162,2 +74,10 @@ [key: string]: any;
 declare const ButtonGroup: React.FC<ButtonGroupProps>;
-export { ButtonProps, Button, PrimaryButtonProps, PrimaryButton, SecondaryButtonProps, SecondaryButton, SuccessButtonProps, SuccessButton, NegativeButtonProps, NegativeButton, TertiaryButtonProps, TertiaryButton, ButtonGroupProps, ButtonGroup };
+type FloatingButtonProps = {
+    "aria-label": string;
+    children: React.ReactNode;
+    className?: string;
+    onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    [key: string]: any;
+};
+declare const FloatingButton: React.FC<FloatingButtonProps>;
+export { ButtonProps, Button, PrimaryButtonProps, PrimaryButton, SecondaryButtonProps, SecondaryButton, SuccessButtonProps, SuccessButton, NegativeButtonProps, NegativeButton, TertiaryButtonProps, TertiaryButton, ButtonGroupProps, ButtonGroup, FloatingButtonProps, FloatingButton };

package.json

 {
   "name": "@entur/button",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "license": "EUPL-1.2",
@@ -33,5 +33,5 @@ "main": "dist/index.js",
   "devDependencies": {
-    "@entur/tokens": "^1.1.0"
+    "@entur/tokens": "^1.1.1"
   },
-  "gitHead": "0f15997d0016b44dd292965fb5e19435f3d842fe"
+  "gitHead": "1755d311b4cb5121c90a6abf85c17a9dfc530abe"
 }

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

82050

increased by7.31%

Worsened metrics

Lines of code

578

decreased by-1.03%

No dependency changes