@decisiv/ui-components 2.0.1-alpha.176 → 2.0.1-alpha.177

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAmB,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAQvE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAA2B,MAAM,SAAS,CAAC;AAExE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC;AAsDhC,QAAA,MAAM,YAAY,EAAE,sBAAsB,CAAC,QAAQ,EAAE,UAAU,CAE9D,CAAC;AAQF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAmB,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAA2B,MAAM,SAAS,CAAC;AAIxE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC;AAWhC,QAAA,MAAM,YAAY,EAAE,sBAAsB,CAAC,QAAQ,EAAE,UAAU,CAE9D,CAAC;AAQF,eAAe,YAAY,CAAC"}

package/lib/components/Badge/index.js

@@ -19,21 +19,9 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _styledComponentsModifiers = require("styled-components-modifiers");
-
-var _color = _interopRequireDefault(require("../../modifiers/color"));
-
-var _constants = require("./constants");
-
-var _commonUIColors = require("../../utils/commonUIColors");
-
-var _utils = require("../../utils");
-
 var _types = require("./types");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _styles = require("./styles");
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
@@ -43,57 +31,13 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-var colorModifiers = (0, _utils.applyDynamicModifiers)('color', function (_ref) {
-  var color = _ref.color;
-  return (0, _styledComponents.css)(["", ""], color && color in _commonUIColors.commonUIColors && (0, _color.default)(_commonUIColors.commonUIColors[color]));
-});
-
-var getSizeStyles = function getSizeStyles(key) {
-  return (0, _styledComponents.css)(_constants.sizeStyles[key] || '');
-};
-
-var sizeModifiers = (0, _styledComponentsModifiers.applyStyleModifiers)({
-  small: function small(_ref2) {
-    var v = _ref2.variant;
-    return getSizeStyles("small.".concat(v));
-  },
-  medium: function medium(_ref3) {
-    var v = _ref3.variant;
-    return getSizeStyles("medium.".concat(v));
-  },
-  large: function large(_ref4) {
-    var v = _ref4.variant;
-    return getSizeStyles("large.".concat(v));
-  }
-}, 'size');
-var variantModifiers = (0, _styledComponentsModifiers.applyStyleModifiers)({
-  round: function round() {
-    return (0, _styledComponents.css)({
-      borderRadius: '50%'
-    });
-  },
-  square: function square() {
-    return (0, _styledComponents.css)({
-      borderRadius: '2px'
-    });
-  }
-}, 'variant'); // The default coloring is explicitly set instead of relying on the
-// `visualInterest.licoriceMousse.medium` colors. The "default" badge is
-// intended to be used in “empty” and/or “no results” messages, the snowWhite
-// fg color and lower contrast help convey “emptiness”.
-
-var BadgeContainer = _styledComponents.default.div.withConfig({
-  displayName: "Badge__BadgeContainer",
-  componentId: "sc-1y6oxgp-0"
-})(["align-items:center;display:inline-flex;justify-content:center;", ";", ";", ";", ";"], (0, _color.default)(_commonUIColors.commonUIColors.information), colorModifiers, sizeModifiers, variantModifiers);
-
 function Badge(props, containerRef) {
   var ariaLabel = props['aria-label'],
       Icon = props.icon,
       size = props.size,
       rest = _objectWithoutProperties(props, ["aria-label", "icon", "size"]);
 
-  return _react.default.createElement(BadgeContainer, _extends({
+  return _react.default.createElement(_styles.BadgeContainer, _extends({
     ref: containerRef,
     size: size
   }, rest), _react.default.createElement(Icon, {

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

@@ -55,12 +55,23 @@ describe('Badge', function () {
       expect(container).toMatchSnapshot();
     });
   });
+  ['bright', 'pastel'].forEach(function (palette) {
+    it("renders correctly with palette=\"".concat(palette, "\""), function () {
+      var _renderBadge3 = renderBadge({
+        palette: palette,
+        color: 'carrotCake'
+      }),
+          container = _renderBadge3.container;
+
+      expect(container).toMatchSnapshot();
+    });
+  });
   it("renders correctly with size=\"small\" and variant=\"square\"", function () {
-    var _renderBadge3 = renderBadge({
+    var _renderBadge4 = renderBadge({
       size: 'small',
       variant: 'square'
     }),
-        container = _renderBadge3.container;
+        container = _renderBadge4.container;
 
     expect(container).toMatchSnapshot();
   });
@@ -70,10 +81,10 @@ describe('Badge', function () {
           key = _ref2[0],
           value = _ref2[1];
 
-      var _renderBadge4 = renderBadge({
+      var _renderBadge5 = renderBadge({
         color: key
       }),
-          container = _renderBadge4.container;
+          container = _renderBadge5.container;
 
       expect(container.firstChild).toHaveStyleRule('background-color', (0, _toColorString.default)(value));
     });

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

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAAqC,CAAC;AAwBlD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAAqC,CAAC;AA4BlD,eAAe,MAAM,CAAC"}

package/lib/components/Badge/schema.js

@@ -15,6 +15,7 @@ schema.propTypes = {
   'aria-label': _reactDesc.PropTypes.string.description('Descriptive text for accessibility purposes').isRequired,
   color: _reactDesc.PropTypes.string.description('(See note) Sets the color for the background and the icon').defaultValue('information'),
   icon: _reactDesc.PropTypes.element.description('Must be an icon component from `@decisiv/iconix`').isRequired,
+  palette: _reactDesc.PropTypes.oneOf(['bright', 'pastel']).description('What color variant to render').defaultValue('bright'),
   size: _reactDesc.PropTypes.oneOf(['small', 'medium', 'large']).description('(See note) Sets the size of the badge').defaultValue('medium'),
   variant: _reactDesc.PropTypes.oneOf(['round', 'square']).description('(See note) Controls primary style variations of the badge').defaultValue('round')
 };

package/lib/components/Badge/styles.d.ts

@@ -0,0 +1,3 @@
+import { BadgeProps } from './types';
+export declare const BadgeContainer: import("styled-components").StyledComponent<"div", any, Pick<BadgeProps, "variant" | "size" | "color" | "palette">, never>;
+//# sourceMappingURL=styles.d.ts.map

package/lib/components/Badge/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/styles.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AA+DrC,eAAO,MAAM,cAAc,4HAQ1B,CAAC"}

package/lib/components/Badge/styles.js

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BadgeContainer = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _styledComponentsModifiers = require("styled-components-modifiers");
+
+var _designTokens = require("@decisiv/design-tokens");
+
+var _color = _interopRequireDefault(require("../../modifiers/color"));
+
+var _constants = require("./constants");
+
+var _commonUIColors = require("../../utils/commonUIColors");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var FG_COLOR = {
+  pastel: 'dark'
+};
+var PALETTE_MAPPER = {
+  pastel: 'light',
+  bright: 'medium'
+};
+
+var colorModifiers = function colorModifiers(props) {
+  var _props$palette = props.palette,
+      palette = _props$palette === void 0 ? 'bright' : _props$palette,
+      color = props.color;
+
+  if (color && color in _commonUIColors.commonUIColors) {
+    var baseColor = _commonUIColors.commonUIThreeShadeColors[color];
+    var fgColor = palette === 'bright' ? _designTokens.color.base.snowWhite : baseColor[FG_COLOR[palette]];
+    var bgColor = baseColor[PALETTE_MAPPER[palette]];
+    var colorPalette = palette === 'bright' ? bgColor : _objectSpread({}, bgColor, {
+      fg: fgColor
+    });
+    return (0, _styledComponents.css)(["", ""], (0, _color.default)(colorPalette));
+  }
+
+  return null;
+};
+
+var getSizeStyles = function getSizeStyles(key) {
+  return (0, _styledComponents.css)(_constants.sizeStyles[key] || '');
+};
+
+var sizeModifiers = (0, _styledComponentsModifiers.applyStyleModifiers)({
+  small: function small(_ref) {
+    var v = _ref.variant;
+    return getSizeStyles("small.".concat(v));
+  },
+  medium: function medium(_ref2) {
+    var v = _ref2.variant;
+    return getSizeStyles("medium.".concat(v));
+  },
+  large: function large(_ref3) {
+    var v = _ref3.variant;
+    return getSizeStyles("large.".concat(v));
+  }
+}, 'size');
+var variantModifiers = (0, _styledComponentsModifiers.applyStyleModifiers)({
+  round: function round() {
+    return (0, _styledComponents.css)({
+      borderRadius: '50%'
+    });
+  },
+  square: function square() {
+    return (0, _styledComponents.css)({
+      borderRadius: '2px'
+    });
+  }
+}, 'variant'); // The default coloring is explicitly set instead of relying on the
+// `visualInterest.licoriceMousse.medium` colors. The "default" badge is
+// intended to be used in “empty” and/or “no results” messages, the snowWhite
+// fg color and lower contrast help convey “emptiness”.
+// eslint-disable-next-line import/prefer-default-export
+
+var BadgeContainer = _styledComponents.default.div.withConfig({
+  displayName: "styles__BadgeContainer",
+  componentId: "sc-1lruwqa-0"
+})(["align-items:center;display:inline-flex;justify-content:center;", ";", ";", ";"], colorModifiers, sizeModifiers, variantModifiers);
+
+exports.BadgeContainer = BadgeContainer;

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

@@ -8,6 +8,7 @@ export interface BadgeProps {
     'aria-label': string;
     color?: CommonUIColorKeys;
     icon: IconComponent;
+    palette?: 'pastel' | 'bright';
     size?: 'small' | 'medium' | 'large';
     variant?: 'round' | 'square';
 }

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/types.ts"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EACL,iBAAiB,EAElB,MAAM,4BAA4B,CAAC;AAIpC,aAAK,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAEvD,oBAAY,QAAQ,GAAG,cAAc,CAAC;AAItC,MAAM,WAAW,UAAU;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC9B;AAED,iBAAS,gBAAgB,CACvB,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,SAAS,EACnB,aAAa,EAAE,OAAO,GACrB,KAAK,GAAG,IAAI,CAqBd;AAED,eAAO,MAAM,SAAS;;;;;CAKrB,CAAC;AAEF,eAAO,MAAM,YAAY;;;CAGxB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/types.ts"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EACL,iBAAiB,EAElB,MAAM,4BAA4B,CAAC;AAIpC,aAAK,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAEvD,oBAAY,QAAQ,GAAG,cAAc,CAAC;AAItC,MAAM,WAAW,UAAU;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,IAAI,EAAE,aAAa,CAAC;IACpB,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC9B;AAED,iBAAS,gBAAgB,CACvB,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,SAAS,EACnB,aAAa,EAAE,OAAO,GACrB,KAAK,GAAG,IAAI,CAqBd;AAED,eAAO,MAAM,SAAS;;;;;CAKrB,CAAC;AAEF,eAAO,MAAM,YAAY;;;CAGxB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decisiv/ui-components",
-  "version": "2.0.1-alpha.176+0ca8bda",
+  "version": "2.0.1-alpha.177+205e39a",
   "description": "Decisiv's design system React components",
   "author": "Decisiv UI Development Team",
   "license": "MIT",
@@ -16,8 +16,8 @@
   },
   "dependencies": {
     "@decisiv/breakpoint-observer": "^1.8.8",
-    "@decisiv/design-tokens": "^1.8.9-alpha.294+0ca8bda",
-    "@decisiv/iconix": "^2.0.1-alpha.176+0ca8bda",
+    "@decisiv/design-tokens": "^1.8.8",
+    "@decisiv/iconix": "^2.0.0",
     "@decisiv/prop-types": "^1.6.9",
     "@seznam/compose-react-refs": "^1.0.2",
     "csstype": "^2.6.5",
@@ -71,5 +71,5 @@
     "access": "public"
   },
   "private": false,
-  "gitHead": "0ca8bda2fe88c901881b6fb2262f99c143da7075"
+  "gitHead": "205e39a7485f904df27a6656ff9f1f15eeeef354"
 }