@decisiv/ui-components 2.0.1-alpha.144 → 2.0.1-alpha.148

package/lib/components/Button/StyledButton.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
 import { Size, Kind, Intent, Variant } from './types';
 export interface StyledButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    kind?: Kind;
     intent?: Intent;
-    variant?: Variant;
+    kind?: Kind;
+    minWidth?: string;
     size: Size;
+    variant?: Variant;
 }
 declare const StyledButton: import("styled-components").StyledComponent<"button", any, StyledButtonProps, never>;
 export default StyledButton;

package/lib/components/Button/StyledButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StyledButton.d.ts","sourceRoot":"","sources":["../../../src/components/Button/StyledButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAsB1B,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAe,MAAM,SAAS,CAAC;AA0JnE,MAAM,WAAW,iBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,IAAI,CAAC;CACZ;AAED,QAAA,MAAM,YAAY,sFAkBjB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"StyledButton.d.ts","sourceRoot":"","sources":["../../../src/components/Button/StyledButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAuB1B,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAe,MAAM,SAAS,CAAC;AAuKnE,MAAM,WAAW,iBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,YAAY,sFAkBjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Button/StyledButton.js

@@ -17,6 +17,8 @@ var _designTokens = _interopRequireWildcard(require("@decisiv/design-tokens"));
 
 var _ConfigProvider = require("../../providers/ConfigProvider");
 
+var _dynamicModifiers = require("../../utils/dynamicModifiers");
+
 var _focusRingWithColor = _interopRequireDefault(require("../../utils/focusRingWithColor"));
 
 var _BaseButton = _interopRequireDefault(require("../../atoms/BaseButton"));
@@ -49,23 +51,35 @@ var color = _styledTheming.default.variants(_ConfigProvider.themeKeys.mode, 'var
     dark: (0, _styledComponents.css)(["background-color:transparent;color:", ";padding:0;&:focus:not(:active){border-color:", ";", "}&:hover:not(:active){color:", ";}&:disabled:disabled{background-color:transparent;color:", ";}"], _colors.interactionPrimaryDark, _colors.focusRingColors.dark.ghost.border, (0, _focusRingWithColor.default)(_colors.focusRingColors.dark.ghost.shadow), _colors.interactionSecondaryLight, (0, _toColorString.default)(opacityColors.charcoal40))
   }
 });
-/** map the Button size values to the matching font size values */
+/** map the Button size values to the matching font size scalar values */
 
 
-var sizeToFontSize = {
-  medium: 'default',
-  small: 'paragraph2'
+var sizeToScalarSize = {
+  medium: fontSizes.default,
+  small: fontSizes.paragraph2,
+  large: fontSizes.header4,
+  extraLarge: 18
 };
 /** map the Button size values to the matching heights, in rem */
 
 var sizeToHeight = {
   medium: (0, _rem.default)(32),
-  small: (0, _rem.default)(24)
+  small: (0, _rem.default)(24),
+  large: (0, _rem.default)(44),
+  extraLarge: (0, _rem.default)(50)
+};
+/** map the Button size values to the matching X padding, in rem */
+
+var sizeToPaddingX = {
+  medium: (0, _rem.default)(base),
+  small: (0, _rem.default)(base),
+  large: (0, _rem.default)(base * 1.5),
+  extraLarge: (0, _rem.default)(base * 1.5)
 };
 
 var buttonSizeModifier = function buttonSizeModifier(_ref) {
   var size = _ref.size;
-  return (0, _styledComponents.css)(["font-size:", ";height:", ";"], (0, _rem.default)(fontSizes[sizeToFontSize[size]]), sizeToHeight[size]);
+  return (0, _styledComponents.css)(["font-size:", ";height:", ";padding:0 ", ";"], (0, _rem.default)(sizeToScalarSize[size]), sizeToHeight[size], sizeToPaddingX[size]);
 };
 
 var disabledStyles = function disabledStyles(_ref2) {
@@ -81,6 +95,6 @@ var disabledStyles = function disabledStyles(_ref2) {
 var StyledButton = (0, _styledComponents.default)(_BaseButton.default).withConfig({
   displayName: "StyledButton",
   componentId: "sc-1khcx6y-0"
-})(["align-items:center;border-radius:", ";border:1px solid transparent;display:flex;font-weight:", ";justify-content:center;line-height:1;outline:none;padding:0 ", ";text-transform:uppercase;white-space:nowrap;", ";", ";", ";", ";", ";"], (0, _rem.default)(2), _designTokens.typography.weight.alias.default, (0, _rem.default)(base), color, _kind.default, _intent.default, buttonSizeModifier, disabledStyles);
+})(["align-items:center;border-radius:", ";border:1px solid transparent;display:flex;font-weight:", ";justify-content:center;line-height:1;outline:none;text-transform:uppercase;white-space:nowrap;", ";", ";", ";", ";", ";", ";"], (0, _rem.default)(2), _designTokens.typography.weight.alias.default, color, _kind.default, _intent.default, buttonSizeModifier, (0, _dynamicModifiers.applyDynamicModifiers)('minWidth', 'min-width'), disabledStyles);
 var _default = StyledButton;
 exports.default = _default;

package/lib/components/Button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAIA,OAAc,EAA4B,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAMhF,OAAO,EACL,WAAW,EACX,SAAS,EAOV,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC;AAuFrD,QAAA,MAAM,aAAa,EAAE,sBAAsB,CACzC,SAAS,EACT,WAAW,CACS,CAAC;AASvB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAIA,OAAc,EAA4B,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAMhF,OAAO,EACL,WAAW,EACX,SAAS,EAOV,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC;AAkGrD,QAAA,MAAM,aAAa,EAAE,sBAAsB,CACzC,SAAS,EACT,WAAW,CACS,CAAC;AASvB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,eAAe,aAAa,CAAC"}

package/lib/components/Button/index.js

@@ -72,6 +72,12 @@ var iconMarginProp = {
   left: 'margin-right',
   right: 'margin-left'
 };
+var sizeToIconSize = {
+  small: 'small',
+  medium: 'medium',
+  large: 'medium',
+  extraLarge: 'medium'
+};
 
 var iconMargin = function iconMargin(props) {
   return !props.iconOnly && "".concat(iconMarginProp[props.position], ": ").concat((0, _rem.default)(5));
@@ -83,16 +89,17 @@ var IconContainer = _styledComponents.default.span.withConfig({
 })(["line-height:0;", ";"], iconMargin);
 
 var Button = function Button(props, ref) {
-  var text = props.text,
-      disabled = props.disabled,
+  var disabled = props.disabled,
       icon = props.icon,
       iconPosition = props.iconPosition,
       intent = props.intent,
-      onClick = props.onClick,
       kind = props.kind,
+      minWidth = props.minWidth,
+      onClick = props.onClick,
       size = props.size,
+      text = props.text,
       variant = props.variant,
-      rest = _objectWithoutProperties(props, ["text", "disabled", "icon", "iconPosition", "intent", "onClick", "kind", "size", "variant"]);
+      rest = _objectWithoutProperties(props, ["disabled", "icon", "iconPosition", "intent", "kind", "minWidth", "onClick", "size", "text", "variant"]);
 
   var ButtonIcon = (0, _react.useMemo)(function () {
     var Icon = icon;
@@ -100,15 +107,16 @@ var Button = function Button(props, ref) {
       position: iconPosition,
       iconOnly: !text
     }, _react.default.createElement(Icon, {
-      size: size
+      size: sizeToIconSize[size]
     }));
   }, [icon, iconPosition, size, text]);
   return _react.default.createElement(_StyledButton.default, _extends({
-    ref: ref,
     disabled: disabled,
-    kind: kind,
     intent: intent,
+    kind: kind,
+    minWidth: minWidth,
     onClick: disabled ? _noop.default : onClick,
+    ref: ref,
     size: size,
     type: "button",
     variant: variant
@@ -121,12 +129,13 @@ var propTypes = {
     return (0, _isEmpty.default)(text);
   }),
   disabled: _propTypes.default.bool,
-  text: _propTypes.default.string,
-  size: _propTypes.default.oneOf(['small', 'medium']),
   icon: _propTypes.default.elementType,
   iconPosition: _propTypes.default.oneOf(['left', 'right']),
   intent: _propTypes.default.oneOf(['success', 'danger']),
   kind: _propTypes.default.oneOf(['primary', 'secondary']),
+  minWidth: _propTypes.default.string,
+  size: _propTypes.default.oneOf(['small', 'medium', 'large', 'extraLarge']),
+  text: _propTypes.default.string,
   variant: _propTypes.default.oneOf(['normal', 'inverted', 'ghost'])
 };
 var defaultProps = {
@@ -135,6 +144,7 @@ var defaultProps = {
   iconPosition: 'left',
   intent: undefined,
   kind: undefined,
+  minWidth: undefined,
   size: 'medium',
   text: undefined,
   variant: 'normal'

package/lib/components/Button/index.test.js

@@ -101,39 +101,55 @@ describe('Button', function () {
 
     expect(container).toMatchSnapshot();
   });
+  it('renders correctly the large size', function () {
+    var _renderButton3 = renderButton({
+      size: 'large'
+    }),
+        container = _renderButton3.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('renders correctly the extraLarge size', function () {
+    var _renderButton4 = renderButton({
+      size: 'extraLarge'
+    }),
+        container = _renderButton4.container;
+
+    expect(container).toMatchSnapshot();
+  });
   describe('kind=secondary', function () {
     it('renders correctly with the light theme', function () {
-      var _renderButton3 = renderButton({
+      var _renderButton5 = renderButton({
         kind: 'secondary'
       }),
-          container = _renderButton3.container;
+          container = _renderButton5.container;
 
       expect(container).toMatchSnapshot();
     });
     it('renders correctly with the dark theme', function () {
-      var _renderButton4 = renderButton({
+      var _renderButton6 = renderButton({
         kind: 'secondary'
       }, 'dark'),
-          container = _renderButton4.container;
+          container = _renderButton6.container;
 
       expect(container).toMatchSnapshot();
     });
     describe('inverted', function () {
       it('renders correctly with the light theme', function () {
-        var _renderButton5 = renderButton({
+        var _renderButton7 = renderButton({
           kind: 'secondary',
           variant: 'inverted'
         }),
-            container = _renderButton5.container;
+            container = _renderButton7.container;
 
         expect(container).toMatchSnapshot();
       });
       it('renders correctly with the dark theme', function () {
-        var _renderButton6 = renderButton({
+        var _renderButton8 = renderButton({
           kind: 'secondary',
           variant: 'inverted'
         }, 'dark'),
-            container = _renderButton6.container;
+            container = _renderButton8.container;
 
         expect(container).toMatchSnapshot();
       });

package/lib/components/Button/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Button/schema.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvC,eAAO,MAAM,yBAAyB;;;;CAiCpC,CAAC;AAEH,QAAA,MAAM,MAAM,KAAsC,CAAC;AAInD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Button/schema.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvC,eAAO,MAAM,yBAAyB;;;;CAqCpC,CAAC;AAEH,QAAA,MAAM,MAAM,KAAsC,CAAC;AAInD,eAAe,MAAM,CAAC"}

package/lib/components/Button/schema.js

@@ -17,11 +17,12 @@ var makeButtonSchemaPropTypes = function makeButtonSchemaPropTypes(extensions) {
   return _objectSpread({
     text: _reactDesc.PropTypes.string.description("The button's text"),
     disabled: _reactDesc.PropTypes.bool.description('Defines if the button will be disabled').defaultValue('false'),
-    size: _reactDesc.PropTypes.oneOf(['small', 'medium']).description('Defines the size of the button').defaultValue('medium'),
+    size: _reactDesc.PropTypes.oneOf(['small', 'medium', 'large', 'extraLarge']).description('Defines the size of the button').defaultValue('medium'),
     icon: _reactDesc.PropTypes.element.description('Which `iconix` icon to render'),
     iconPosition: _reactDesc.PropTypes.oneOf(['left', 'right']).description('In which side of the text the icon should be rendered').defaultValue('left'),
     intent: _reactDesc.PropTypes.oneOf(['success', 'danger']).description('Applies desired hover state of button'),
     kind: _reactDesc.PropTypes.oneOf(['primary', 'secondary']).description('Applies inverted button styles'),
+    minWidth: _reactDesc.PropTypes.string.description('A pass-through CSS value for the min-width attribute'),
     variant: _reactDesc.PropTypes.oneOf(['normal', 'inverted']).description('Applies secondary button styles')
   }, extensions);
 };

package/lib/components/Button/types.d.ts

@@ -2,7 +2,7 @@ import { ButtonHTMLAttributes, Ref } from 'react';
 import { IconProps } from '@decisiv/iconix';
 import { TranslatedText } from '../../utils/useTranslations';
 export declare type ButtonRef = HTMLButtonElement;
-export declare type Size = 'medium' | 'small';
+export declare type Size = 'small' | 'medium' | 'large' | 'extraLarge';
 export declare type IconPosition = 'left' | 'right';
 export declare type Intent = 'danger' | 'success';
 export declare type Variant = 'normal' | 'inverted' | 'ghost';
@@ -14,6 +14,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     iconPosition?: IconPosition;
     intent?: Intent;
     kind?: Kind;
+    minWidth?: string;
     ref?: Ref<ButtonRef>;
     size?: Size;
     text?: TranslatedText;

package/lib/components/Button/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/types.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAE7D,oBAAY,SAAS,GAAG,iBAAiB,CAAC;AAC1C,oBAAY,IAAI,GAAG,QAAQ,GAAG,OAAO,CAAC;AACtC,oBAAY,YAAY,GAAG,MAAM,GAAG,OAAO,CAAC;AAC5C,oBAAY,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;AAC1C,oBAAY,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;AACtD,oBAAY,IAAI,GAAG,SAAS,GAAG,WAAW,CAAC;AAC3C,oBAAY,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAE9D,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,GAAG,CAAC,EAAE,GAAG,CAAC,SAAS,CAAC,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/types.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAE7D,oBAAY,SAAS,GAAG,iBAAiB,CAAC;AAC1C,oBAAY,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,YAAY,CAAC;AAC/D,oBAAY,YAAY,GAAG,MAAM,GAAG,OAAO,CAAC;AAC5C,oBAAY,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;AAC1C,oBAAY,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;AACtD,oBAAY,IAAI,GAAG,SAAS,GAAG,WAAW,CAAC;AAC3C,oBAAY,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAE9D,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,GAAG,CAAC,EAAE,GAAG,CAAC,SAAS,CAAC,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decisiv/ui-components",
-  "version": "2.0.1-alpha.144+5fb644e",
+  "version": "2.0.1-alpha.148+848f308",
   "description": "Decisiv's design system React components",
   "author": "Decisiv UI Development Team",
   "license": "MIT",
@@ -71,5 +71,5 @@
     "access": "public"
   },
   "private": false,
-  "gitHead": "5fb644e81efa4fc03869b1c9814a4b51c33af164"
+  "gitHead": "848f3088dfd484a3822653ed13e77adff76fca92"
 }