@decisiv/ui-components 2.0.1-alpha.155 → 2.0.1-alpha.157

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAGA,OAAc,EAEZ,sBAAsB,EAMvB,MAAM,OAAO,CAAC;AAoBf,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AA2PjD,QAAA,MAAM,aAAa,EAAE,sBAAsB,CACzC,SAAS,EACT,WAAW,CACS,CAAC;AAgCvB,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAGA,OAAc,EAEZ,sBAAsB,EAMvB,MAAM,OAAO,CAAC;AAoBf,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AA8PjD,QAAA,MAAM,aAAa,EAAE,sBAAsB,CACzC,SAAS,EACT,WAAW,CACS,CAAC;AAgCvB,eAAe,aAAa,CAAC"}

package/lib/components/Select/index.js

@@ -72,6 +72,8 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function Select(props, ref) {
   var actions = props.actions,
       clearButtonLabel = props.clearButtonLabel,
+      _props$hideClearButto = props.hideClearButton,
+      hideClearButton = _props$hideClearButto === void 0 ? false : _props$hideClearButto,
       defaultValue = props.defaultValue,
       id = props.id,
       inputContainerRef = props.inputContainerRef,
@@ -246,7 +248,7 @@ function Select(props, ref) {
       "aria-owns": dropdownListId,
       clearButtonLabel: clearButtonLabel,
       disabled: disabled,
-      hasClearButton: Boolean(selectedValue),
+      hasClearButton: hideClearButton ? false : Boolean(selectedValue),
       id: targetId,
       inputFieldLabel: label,
       isPopoverVisible: isPopoverVisible,

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

@@ -187,16 +187,40 @@ describe('Select', function () {
 
       expect(getByText(cat0Opt0.label)).toBeTruthy();
     });
+    describe('when "hideClearButton" is false', function () {
+      it('shows the clear button', function () {
+        var _render7 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+          defaultValue: cat0Opt0.id,
+          hideClearButton: false,
+          clearButtonLabel: "clear selection"
+        }))),
+            getByLabelText = _render7.getByLabelText;
+
+        expect(getByLabelText(/clear selection/i)).toBeInTheDocument();
+      });
+    });
+    describe('when "hideClearButton" is true', function () {
+      it('does not show the clear button', function () {
+        var _render8 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+          defaultValue: cat0Opt0.id,
+          hideClearButton: true,
+          clearButtonLabel: "clear selection"
+        }))),
+            queryByLabelText = _render8.queryByLabelText;
+
+        expect(queryByLabelText(/clear selection/i)).not.toBeInTheDocument();
+      });
+    });
     describe('clicking an option', function () {
       it('calls the onchange handler with the new value', function () {
         var onChange = jest.fn();
 
-        var _render7 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render9 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           onChange: onChange,
           defaultValue: opt1.id
         }))),
-            baseElement = _render7.baseElement,
-            getByText = _render7.getByText;
+            baseElement = _render9.baseElement,
+            getByText = _render9.getByText;
 
         _react2.fireEvent.click(getByText(defaultProps.label));
 
@@ -205,11 +229,11 @@ describe('Select', function () {
         expect(onChange).toHaveBeenCalledWith(cat0Opt0.id);
       });
       it('automatically updates the option label inside the input field', function () {
-        var _render8 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render10 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           defaultValue: opt1.id
         }))),
-            baseElement = _render8.baseElement,
-            getByText = _render8.getByText;
+            baseElement = _render10.baseElement,
+            getByText = _render10.getByText;
 
         _react2.fireEvent.click(getByText(defaultProps.label));
 
@@ -222,32 +246,32 @@ describe('Select', function () {
   });
   describe('when label hidden', function () {
     it('does not display the label element', function () {
-      var _render9 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render11 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         defaultvalue: opt1.id,
         hideLabel: true
       }))),
-          getByText = _render9.getByText;
+          getByText = _render11.getByText;
 
       expect(getByText(defaultProps.label, {
         selector: 'span'
       })).not.toBeVisible();
     });
     it('does display the input related to the label', function () {
-      var _render10 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render12 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         defaultValue: opt1.id,
         hideLabel: true
       }))),
-          getByLabelText = _render10.getByLabelText;
+          getByLabelText = _render12.getByLabelText;
 
       expect(getByLabelText(defaultProps.label)).toBeVisible();
     });
   });
   describe('when component is controlled', function () {
     it('displays the option label matching the value inside the input field', function () {
-      var _render11 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render13 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         value: cat0Opt0.id
       }))),
-          getByText = _render11.getByText;
+          getByText = _render13.getByText;
 
       expect(getByText(cat0Opt0.label)).toBeTruthy();
     });
@@ -255,12 +279,12 @@ describe('Select', function () {
       it('calls the onchange handler with the new value', function () {
         var onChange = jest.fn();
 
-        var _render12 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render14 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           onChange: onChange,
           value: opt1.id
         }))),
-            baseElement = _render12.baseElement,
-            getByText = _render12.getByText;
+            baseElement = _render14.baseElement,
+            getByText = _render14.getByText;
 
         _react2.fireEvent.click(getByText(defaultProps.label));
 
@@ -269,12 +293,12 @@ describe('Select', function () {
         expect(onChange).toHaveBeenCalledWith(cat0Opt0.id);
       });
       it('does NOT automatically update the option label inside the input field', function () {
-        var _render13 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render15 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           value: opt1.id
         }))),
-            baseElement = _render13.baseElement,
-            getByText = _render13.getByText,
-            queryByText = _render13.queryByText;
+            baseElement = _render15.baseElement,
+            getByText = _render15.getByText,
+            queryByText = _render15.queryByText;
 
         _react2.fireEvent.click(getByText(defaultProps.label));
 

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

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Select/schema.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,MAAM,KAAsC,CAAC;AAmEnD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Select/schema.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,MAAM,KAAsC,CAAC;AAwEnD,eAAe,MAAM,CAAC"}

package/lib/components/Select/schema.js

@@ -23,6 +23,7 @@ var schema = (0, _reactDesc.describe)({
   displayName: 'Select'
 });
 schema.propTypes = _objectSpread({}, (0, _omit.default)(_InputField.schema.makePropTypes(), ['children', 'maxLength', 'onChange', 'showCharacterCount']), {
+  hideClearButton: _reactDesc.PropTypes.bool.description('Whether or not to hide the clear button after selecting an item').defaultValue('false'),
   clearButtonLabel: _reactDesc.PropTypes.string.description("A hidden label value for the clear button. The select component's label is available within the string for clarity.").defaultValue('Clear {label} value'),
   containerSelector: _reactDesc.PropTypes.string.description("A CSS selector to the element where the Select should be rendered in, or \"parent\" to render the Select in-place.").defaultValue('body'),
   defaultValue: _reactDesc.PropTypes.string.description('The ID of the option that should be selected by default.'),

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

@@ -11,6 +11,7 @@ interface BaseSelectProps extends ButtonHTMLAttributes<SelectRef>, Omit<BaseInpu
     onKeyDown?: KeyboardEventHandler;
 }
 export declare type SelectProps = BaseSelectProps & {
+    hideClearButton?: boolean;
     clearButtonLabel?: string;
     defaultValue?: string;
     name: string;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Select/types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,oBAAoB,EACpB,iBAAiB,EAClB,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,oBAAY,SAAS,GAAG,iBAAiB,CAAC;AAE1C,UAAU,eACR,SAAQ,oBAAoB,CAAC,SAAS,CAAC,EACrC,IAAI,CACF,mBAAmB,EACnB,UAAU,GAAG,WAAW,GAAG,UAAU,GAAG,oBAAoB,GAAG,OAAO,CACvE,EACD,IAAI,CAAC,gBAAgB,EAAE,SAAS,GAAG,mBAAmB,CAAC;IACzD,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,SAAS,CAAC,EAAE,oBAAoB,CAAC;CAClC;AAED,oBAAY,WAAW,GAAG,eAAe,GAAG;IAC1C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,KAAK,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAChC,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,MAAM,WAAW,WACf,SAAQ,oBAAoB,CAAC,SAAS,CAAC,EACrC,IAAI,CACF,mBAAmB,EACnB,UAAU,GAAG,IAAI,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,GAAG,KAAK,GAAG,OAAO,CACxE;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,MAAM,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACtC,OAAO,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC3C,OAAO,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;CACzC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Select/types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,oBAAoB,EACpB,iBAAiB,EAClB,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,oBAAY,SAAS,GAAG,iBAAiB,CAAC;AAE1C,UAAU,eACR,SAAQ,oBAAoB,CAAC,SAAS,CAAC,EACrC,IAAI,CACF,mBAAmB,EACnB,UAAU,GAAG,WAAW,GAAG,UAAU,GAAG,oBAAoB,GAAG,OAAO,CACvE,EACD,IAAI,CAAC,gBAAgB,EAAE,SAAS,GAAG,mBAAmB,CAAC;IACzD,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,SAAS,CAAC,EAAE,oBAAoB,CAAC;CAClC;AAED,oBAAY,WAAW,GAAG,eAAe,GAAG;IAC1C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,KAAK,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAChC,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,MAAM,WAAW,WACf,SAAQ,oBAAoB,CAAC,SAAS,CAAC,EACrC,IAAI,CACF,mBAAmB,EACnB,UAAU,GAAG,IAAI,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,GAAG,KAAK,GAAG,OAAO,CACxE;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,MAAM,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACtC,OAAO,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC3C,OAAO,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;CACzC"}

package/lib/components/Tag/Action.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Action.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/Action.tsx"],"names":[],"mappings":"AAgBA,QAAA,MAAM,MAAM,oEAcX,CAAC;AAEF,eAAO,MAAM,eAAe,oEAO3B,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Action.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/Action.tsx"],"names":[],"mappings":"AAgBA,QAAA,MAAM,MAAM,oEAYX,CAAC;AAEF,eAAO,MAAM,eAAe,oEAK3B,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/Tag/Action.js

@@ -27,12 +27,12 @@ var borderRadius = (0, _styledComponents.css)(["border-radius:0 ", " ", " 0;"],
 var Action = _styledComponents.default.div.withConfig({
   displayName: "Action",
   componentId: "sc-53eucd-0"
-})(["align-items:center;appearance:none;background-color:", ";border:0;color:", ";display:flex;height:100%;justify-content:flex-start;padding:0 0 0 ", ";width:", ";outline:none;", ""], (0, _toColorString.default)(baseColors.snowWhite), (0, _toColorString.default)(interactionColors.pacificOcean), (0, _rem.default)(4), (0, _rem.default)(_constants.ACTION_WIDTH), borderRadius);
+})(["align-items:center;justify-content:center;border:0;color:", ";display:flex;height:100%;width:", ";padding-right:", ";outline:none;", ""], (0, _toColorString.default)(interactionColors.pacificOcean), (0, _rem.default)(_constants.ACTION_WIDTH), (0, _rem.default)(1), borderRadius);
 
 var ActionContainer = _styledComponents.default.div.withConfig({
   displayName: "Action__ActionContainer",
   componentId: "sc-53eucd-1"
-})(["height:", ";margin-right:2px;background-color:", ";box-shadow:", " 0 0 0 ", ";", ";"], (0, _rem.default)(18), (0, _toColorString.default)(baseColors.snowWhite), (0, _rem.default)(2), (0, _toColorString.default)(baseColors.snowWhite), borderRadius);
+})(["height:100%;background-color:", ";", ";"], (0, _toColorString.default)(baseColors.snowWhite), borderRadius);
 
 exports.ActionContainer = ActionContainer;
 var _default = Action;

package/lib/components/Tag/constants.d.ts

@@ -1,5 +1,5 @@
-export declare const ACTION_WIDTH = 20;
-export declare const CONTAINER_X_PADDING = 14;
+export declare const ACTION_WIDTH = 22;
+export declare const CONTAINER_X_PADDING = 8;
 export declare const ICON_CONTENT_MARGIN = 5;
 export declare const MAX_CONTAINER_WIDTH = 300;
 //# sourceMappingURL=constants.d.ts.map

package/lib/components/Tag/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,KAAK,CAAC;AAC/B,eAAO,MAAM,mBAAmB,KAAK,CAAC;AACtC,eAAO,MAAM,mBAAmB,IAAI,CAAC;AACrC,eAAO,MAAM,mBAAmB,MAAM,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,KAAK,CAAC;AAC/B,eAAO,MAAM,mBAAmB,IAAI,CAAC;AACrC,eAAO,MAAM,mBAAmB,IAAI,CAAC;AACrC,eAAO,MAAM,mBAAmB,MAAM,CAAC"}

package/lib/components/Tag/constants.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MAX_CONTAINER_WIDTH = exports.ICON_CONTENT_MARGIN = exports.CONTAINER_X_PADDING = exports.ACTION_WIDTH = void 0;
-var ACTION_WIDTH = 20;
+var ACTION_WIDTH = 22;
 exports.ACTION_WIDTH = ACTION_WIDTH;
-var CONTAINER_X_PADDING = 14;
+var CONTAINER_X_PADDING = 8;
 exports.CONTAINER_X_PADDING = CONTAINER_X_PADDING;
 var ICON_CONTENT_MARGIN = 5;
 exports.ICON_CONTENT_MARGIN = ICON_CONTENT_MARGIN;

package/lib/components/Tag/index.d.ts

@@ -1,8 +1,6 @@
 import { RefForwardingComponent } from 'react';
-import { CommonUIColors } from '../../utils/commonUIColors';
 import { TagProps, TagRef } from './types';
-export { TagProps, TagRef, TagActionRef as TagActionButtonRef } from './types';
-export declare type ColorKeys = keyof CommonUIColors;
 declare const TagWithRef: RefForwardingComponent<TagRef, TagProps>;
+export { TagProps, TagRef, TagActionRef as TagActionButtonRef, IconComponent, } from './types';
 export default TagWithRef;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/index.tsx"],"names":[],"mappings":"AAEA,OAAc,EAIZ,sBAAsB,EAIvB,MAAM,OAAO,CAAC;AAQf,OAAO,EAGL,cAAc,EACf,MAAM,4BAA4B,CAAC;AAapC,OAAO,EAGL,QAAQ,EACR,MAAM,EAEP,MAAM,SAAS,CAAC;AAQjB,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,IAAI,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE/E,oBAAY,SAAS,GAAG,MAAM,cAAc,CAAC;AAkT7C,QAAA,MAAM,UAAU,EAAE,sBAAsB,CAAC,MAAM,EAAE,QAAQ,CAAmB,CAAC;AAS7E,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAIZ,sBAAsB,EAIvB,MAAM,OAAO,CAAC;AAQf,OAAO,EAAiB,QAAQ,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAqG1D,QAAA,MAAM,UAAU,EAAE,sBAAsB,CAAC,MAAM,EAAE,QAAQ,CAAmB,CAAC;AAS7E,OAAO,EACL,QAAQ,EACR,MAAM,EACN,YAAY,IAAI,kBAAkB,EAClC,aAAa,GACd,MAAM,SAAS,CAAC;AAEjB,eAAe,UAAU,CAAC"}

package/lib/components/Tag/index.js

@@ -21,42 +21,28 @@ Object.defineProperty(exports, "TagActionButtonRef", {
     return _types.TagActionRef;
   }
 });
+Object.defineProperty(exports, "IconComponent", {
+  enumerable: true,
+  get: function get() {
+    return _types.IconComponent;
+  }
+});
 exports.default = void 0;
 
-var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
-
-var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
-
 var _react = _interopRequireWildcard(require("react"));
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _designTokens = _interopRequireWildcard(require("@decisiv/design-tokens"));
-
-var _color = _interopRequireDefault(require("../../modifiers/color"));
-
-var _focusRingWithColor = _interopRequireDefault(require("../../utils/focusRingWithColor"));
-
-var _commonUIColors = require("../../utils/commonUIColors");
-
 var _Typography = require("../Typography");
 
 var _Action = _interopRequireWildcard(require("./Action"));
 
-var _constants = require("./constants");
-
 var _propTypes = require("./propTypes");
 
-var _types = require("./types");
+var _styles = require("./styles");
 
-var _BaseButton = _interopRequireDefault(require("../../atoms/BaseButton"));
-
-var _styleModifiers = require("../../utils/styleModifiers");
+var _types = require("./types");
 
 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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
@@ -71,130 +57,6 @@ 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; }
 
-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 _designTokens$color = _designTokens.default.color,
-    interactionColors = _designTokens$color.interaction,
-    statusColors = _designTokens$color.status;
-
-var getContentMaxWidth = function getContentMaxWidth(props) {
-  var isSingleChild = props.isSingleChild,
-      hasIcon = props.hasIcon;
-  var iconWidth = 12;
-  var actionBorder = 1;
-  var containerBorder = 2;
-  var baseWidth = _constants.MAX_CONTAINER_WIDTH - _constants.CONTAINER_X_PADDING - containerBorder;
-  var valuesToSubtract = [];
-  !isSingleChild && valuesToSubtract.push(_constants.ACTION_WIDTH, actionBorder);
-  hasIcon && valuesToSubtract.push(iconWidth, _constants.ICON_CONTENT_MARGIN);
-  return (0, _rem.default)(valuesToSubtract.reduce(function (r, v) {
-    return r - v;
-  }, baseWidth));
-};
-
-var PALETTE_MAPPER = {
-  pastel: 'light',
-  bright: 'medium',
-  dark: 'dark'
-};
-var FG_COLOR = {
-  pastel: _objectSpread({}, _designTokens.color.base.charcoal, {
-    alpha: 0.8
-  }),
-  bright: _designTokens.color.base.snowWhite,
-  dark: _designTokens.color.base.snowWhite
-};
-var BORDER_OPACITY = {
-  pastel: 0.1,
-  bright: 0.15,
-  dark: 0.3
-};
-
-var Content = _styledComponents.default.div.withConfig({
-  displayName: "Tag__Content",
-  componentId: "nifm8a-0"
-})(["color:inherit;align-items:center;border:0;display:flex;padding:0 ", ";border-right:1px solid ", ";", ";> svg{flex:1 0 auto;}* + *{margin-left:", ";}span{max-width:", ";}"], (0, _rem.default)(_constants.CONTAINER_X_PADDING / 2), function (_ref) {
-  var _ref$palette = _ref.palette,
-      palette = _ref$palette === void 0 ? 'bright' : _ref$palette;
-  return (0, _toColorString.default)(_objectSpread({}, _designTokens.color.base.charcoal, {
-    alpha: BORDER_OPACITY[palette]
-  }));
-}, function (_ref2) {
-  var isSingleChild = _ref2.isSingleChild;
-  return (0, _styledComponents.css)(["max-width:", ";border-width:", ";"], isSingleChild ? '100%' : "calc(100% - ".concat(_constants.ACTION_WIDTH, "px)"), isSingleChild ? '0' : '1px');
-}, (0, _rem.default)(_constants.ICON_CONTENT_MARGIN), getContentMaxWidth);
-
-var contentSVGColor = function contentSVGColor(_ref3) {
-  var variant = _ref3.variant,
-      colorProp = _ref3.color;
-
-  if (variant === 'outline' && colorProp && colorProp in _commonUIColors.commonUIColors) {
-    return (0, _styledComponents.css)(["", " svg{color:", ";}"], Content, (0, _toColorString.default)(_commonUIColors.commonUIColors[colorProp]));
-  }
-
-  return null;
-};
-
-var getColorByProps = function getColorByProps(_ref4) {
-  var variant = _ref4.variant,
-      colorProp = _ref4.color,
-      _ref4$palette = _ref4.palette,
-      palette = _ref4$palette === void 0 ? 'bright' : _ref4$palette;
-  if (variant === 'outline') return _objectSpread({}, _designTokens.color.base.snowWhite, {
-    fg: _designTokens.color.base.alaskanHusky
-  });
-
-  if (colorProp && colorProp in _commonUIColors.commonUIThreeShadeColors) {
-    var baseColor = _commonUIColors.commonUIThreeShadeColors[colorProp];
-    var fgColor = FG_COLOR[palette];
-    var bgColor = baseColor[PALETTE_MAPPER[palette]];
-    return palette === 'bright' ? bgColor : _objectSpread({}, bgColor, {
-      fg: fgColor
-    });
-  }
-
-  return _commonUIColors.commonUIColors.licoriceMousse;
-};
-
-var colorModifiers = function colorModifiers(props) {
-  var _props$palette = props.palette,
-      palette = _props$palette === void 0 ? 'bright' : _props$palette;
-
-  var borderColor = _objectSpread({}, _designTokens.color.base.charcoal, {
-    alpha: BORDER_OPACITY[palette]
-  });
-
-  return (0, _styledComponents.css)(["", ";border:1px solid ", ";", ""], (0, _color.default)(getColorByProps(props)), (0, _toColorString.default)(borderColor), (0, _styleModifiers.when)('isSingleChild', false, (0, _styledComponents.css)(["&:hover{box-shadow:inset 0 0 0 ", " ", ";", "{border-color:transparent;}}"], (0, _rem.default)(100), (0, _toColorString.default)(borderColor), Content)));
-};
-
-var variantModifiers = function variantModifiers(props) {
-  var _props$variant = props.variant,
-      variant = _props$variant === void 0 ? 'normal' : _props$variant;
-  if (variant === 'normal') return undefined;
-  return (0, _styledComponents.css)(["border:1px solid ", ";", " &:focus{border:1px solid ", ";", ";}"], (0, _toColorString.default)(_designTokens.color.opacity.charcoal15), (0, _styleModifiers.when)('isSingleChild', false, (0, _styledComponents.css)(["&:hover{box-shadow:none;background-color:", ";}"], (0, _toColorString.default)(_objectSpread({}, _designTokens.color.base.charcoal, {
-    alpha: 0.07
-  })))), (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), (0, _focusRingWithColor.default)(_designTokens.color.interaction.pacificOcean40));
-};
-
-var actionColors = {
-  normal: (0, _toColorString.default)(interactionColors.indianOcean),
-  danger: (0, _toColorString.default)(statusColors.danger.medium)
-};
-
-var actionColor = function actionColor(_ref5) {
-  var actionIntent = _ref5.actionIntent;
-  return actionColors[actionIntent !== 'danger' ? 'normal' : 'danger'];
-};
-
-var Container = (0, _styledComponents.default)(_BaseButton.default).withConfig({
-  displayName: "Tag__Container",
-  componentId: "nifm8a-1"
-})(["font-family:", ";font-size:", ";font-weight:", ";align-items:center;border-radius:", ";display:inline-flex;height:", ";max-width:100%;min-width:", ";padding:0;background-color:transparent;&:focus{border:1px solid ", ";", ";", "{height:", ";box-shadow:none;}}&:focus-visible{outline:none;}&:hover{", "{color:", ";}}", ";", ";", ";"], _designTokens.typography.typeface.default, (0, _rem.default)(_designTokens.typography.size.alias.default), _designTokens.typography.weight.alias.default, (0, _rem.default)(10), (0, _rem.default)(20), (0, _rem.default)(26), (0, _toColorString.default)(_designTokens.color.base.blackSheep), (0, _focusRingWithColor.default)(_designTokens.color.opacity.charcoal40), _Action.ActionContainer, (0, _rem.default)(14), _Action.default, actionColor, colorModifiers, variantModifiers, contentSVGColor);
-
 function Tag(props, containerRef) {
   var action = props.action,
       actionAttributes = props.actionAttributes,
@@ -204,7 +66,9 @@ function Tag(props, containerRef) {
       Icon = props.icon,
       text = props.text,
       palette = props.palette,
-      rest = _objectWithoutProperties(props, ["action", "actionAttributes", "actionIcon", "actionIntent", "actionRef", "icon", "text", "palette"]);
+      _props$size = props.size,
+      size = _props$size === void 0 ? 'small' : _props$size,
+      rest = _objectWithoutProperties(props, ["action", "actionAttributes", "actionIcon", "actionIntent", "actionRef", "icon", "text", "palette", "size"]);
 
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -212,19 +76,19 @@ function Tag(props, containerRef) {
       setIsFocused = _useState2[1];
 
   var onTagFocus = (0, _react.useCallback)(function (e) {
-    var _ref6 = actionAttributes || {
+    var _ref = actionAttributes || {
       onFocus: undefined
     },
-        onFocus = _ref6.onFocus;
+        onFocus = _ref.onFocus;
 
     setIsFocused(true);
     onFocus && onFocus(e);
   }, [actionAttributes]);
   var onTagBlur = (0, _react.useCallback)(function (e) {
-    var _ref7 = actionAttributes || {
+    var _ref2 = actionAttributes || {
       onBlur: undefined
     },
-        onBlur = _ref7.onBlur;
+        onBlur = _ref2.onBlur;
 
     setIsFocused(false);
     onBlur && onBlur(e);
@@ -251,7 +115,9 @@ function Tag(props, containerRef) {
    * seconds content component, and calculate the max width of the container.
    */
 
-  return _react.default.createElement(Container, _extends({}, rest, actionAttributes, {
+  return _react.default.createElement(_styles.Container, _extends({}, rest, actionAttributes, {
+    tabIndex: 0,
+    size: size,
     isSingleChild: contentIsSingleChild,
     palette: palette,
     ref: containerRef,
@@ -260,7 +126,7 @@ function Tag(props, containerRef) {
     onFocus: onTagFocus,
     isFocused: isFocused,
     actionIntent: actionIntent
-  }), _react.default.createElement(Content, {
+  }), _react.default.createElement(_styles.Content, {
     palette: palette,
     hasIcon: !!Icon,
     isSingleChild: contentIsSingleChild
@@ -269,7 +135,7 @@ function Tag(props, containerRef) {
   }), text && _react.default.createElement(_Typography.P, {
     as: "span",
     color: "inherit",
-    size: "small",
+    size: size === 'small' ? 'small' : undefined,
     truncate: true
   }, text)), ActionElement);
 }

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

@@ -2,6 +2,8 @@
 
 var _react = _interopRequireDefault(require("react"));
 
+require("jest-styled-components");
+
 var _react2 = require("@testing-library/react");
 
 var _Home = _interopRequireDefault(require("@decisiv/iconix/lib/components/Home"));
@@ -17,6 +19,7 @@ describe('Tag', function () {
     var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     var variant = arguments.length > 1 ? arguments[1] : undefined;
     return (0, _react2.render)(_react.default.createElement(_.default, _extends({
+      "data-testid": "tag",
       text: "text"
     }, props, {
       variant: variant
@@ -83,39 +86,90 @@ describe('Tag', function () {
   describe('Outline variant', function () {
     TestVariant('outline');
   });
+  describe('Size Props', function () {
+    describe('when the size is "small"', function () {
+      it('renders with a height of 1.25rem', function () {
+        var _render = (0, _react2.render)(_react.default.createElement(_.default, {
+          "data-testid": "small-tag",
+          text: "text",
+          size: "small"
+        })),
+            getByTestId = _render.getByTestId;
+
+        expect(getByTestId('small-tag')).toHaveStyleRule('height', '1.25rem');
+      });
+      it('renders with a font-size of 0.75rem', function () {
+        var _render2 = (0, _react2.render)(_react.default.createElement(_.default, {
+          "data-testid": "small-tag",
+          text: "text",
+          size: "small"
+        })),
+            getByText = _render2.getByText;
+
+        expect(getByText(/text/i, {
+          selector: 'span'
+        })).toHaveStyleRule('font-size', '0.75rem');
+      });
+    });
+    describe('when the size is "medium"', function () {
+      it('renders with a height of 1.5625rem', function () {
+        var _render3 = (0, _react2.render)(_react.default.createElement(_.default, {
+          "data-testid": "medium-tag",
+          text: "text",
+          size: "medium"
+        })),
+            getByTestId = _render3.getByTestId;
+
+        expect(getByTestId('medium-tag')).toHaveStyleRule('height', '1.5625rem');
+      });
+      it('renders with a font-size of 0.875rem', function () {
+        var _render4 = (0, _react2.render)(_react.default.createElement(_.default, {
+          "data-testid": "small-tag",
+          text: "text",
+          size: "medium"
+        })),
+            getByText = _render4.getByText;
+
+        expect(getByText(/text/i, {
+          selector: 'span'
+        })).toHaveStyleRule('font-size', '0.875rem');
+      });
+    });
+  });
   describe('Palette variants', function () {
     describe('bright', function () {
       it('renders correctly', function () {
-        var _render = (0, _react2.render)(_react.default.createElement(_.default, {
+        var _render5 = (0, _react2.render)(_react.default.createElement(_.default, {
           text: "text",
           palette: "bright"
         })),
-            container = _render.container;
+            container = _render5.container;
 
         expect(container).toMatchSnapshot();
       });
       it('renders correctly with an Icon', function () {
-        var _render2 = (0, _react2.render)(_react.default.createElement(_.default, {
+        var _render6 = (0, _react2.render)(_react.default.createElement(_.default, {
           text: "text",
           palette: "bright",
           icon: _Home.default
         })),
-            container = _render2.container;
+            container = _render6.container;
 
         expect(container).toMatchSnapshot();
       });
       it('renders correctly with different colors', function () {
-        var _render3 = (0, _react2.render)(_react.default.createElement(_.default, {
+        var _render7 = (0, _react2.render)(_react.default.createElement(_.default, {
           text: "text",
           palette: "bright",
           color: "information"
         })),
-            container = _render3.container;
+            container = _render7.container;
 
         expect(container).toMatchSnapshot();
       });
       it('renders correctly with an action', function () {
-        var _render4 = (0, _react2.render)(_react.default.createElement(_.default, {
+        var _render8 = (0, _react2.render)(_react.default.createElement(_.default, {
+          "data-testid": "action-tag",
           text: "text",
           palette: "bright",
           action: jest.fn(),
@@ -124,12 +178,14 @@ describe('Tag', function () {
           },
           actionIcon: _Home.default
         })),
-            container = _render4.container;
+            container = _render8.container,
+            getByTestId = _render8.getByTestId;
 
+        expect(getByTestId('action-tag')).toHaveStyleRule('cursor', 'pointer');
         expect(container).toMatchSnapshot();
       });
       it('renders the action correctly with the danger intent', function () {
-        var _render5 = (0, _react2.render)(_react.default.createElement(_.default, {
+        var _render9 = (0, _react2.render)(_react.default.createElement(_.default, {
           text: "text",
           palette: "bright",
           action: jest.fn(),
@@ -139,43 +195,43 @@ describe('Tag', function () {
           actionIcon: _Home.default,
           actionIntent: "danger"
         })),
-            container = _render5.container;
+            container = _render9.container;
 
         expect(container).toMatchSnapshot();
       });
     });
     describe('pastel', function () {
       it('renders correctly', function () {
-        var _render6 = (0, _react2.render)(_react.default.createElement(_.default, {
+        var _render10 = (0, _react2.render)(_react.default.createElement(_.default, {
           text: "text",
           palette: "pastel"
         })),
-            container = _render6.container;
+            container = _render10.container;
 
         expect(container).toMatchSnapshot();
       });
       it('renders correctly with an Icon', function () {
-        var _render7 = (0, _react2.render)(_react.default.createElement(_.default, {
+        var _render11 = (0, _react2.render)(_react.default.createElement(_.default, {
           text: "text",
           palette: "pastel",
           icon: _Home.default
         })),
-            container = _render7.container;
+            container = _render11.container;
 
         expect(container).toMatchSnapshot();
       });
       it('renders correctly with different colors', function () {
-        var _render8 = (0, _react2.render)(_react.default.createElement(_.default, {
+        var _render12 = (0, _react2.render)(_react.default.createElement(_.default, {
           text: "text",
           palette: "pastel",
           color: "information"
         })),
-            container = _render8.container;
+            container = _render12.container;
 
         expect(container).toMatchSnapshot();
       });
       it('renders correctly with an action', function () {
-        var _render9 = (0, _react2.render)(_react.default.createElement(_.default, {
+        var _render13 = (0, _react2.render)(_react.default.createElement(_.default, {
           text: "text",
           palette: "pastel",
           action: jest.fn(),
@@ -184,12 +240,12 @@ describe('Tag', function () {
           },
           actionIcon: _Home.default
         })),
-            container = _render9.container;
+            container = _render13.container;
 
         expect(container).toMatchSnapshot();
       });
       it('renders the action correctly with the danger intent', function () {
-        var _render10 = (0, _react2.render)(_react.default.createElement(_.default, {
+        var _render14 = (0, _react2.render)(_react.default.createElement(_.default, {
           text: "text",
           palette: "pastel",
           action: jest.fn(),
@@ -199,43 +255,43 @@ describe('Tag', function () {
           actionIcon: _Home.default,
           actionIntent: "danger"
         })),
-            container = _render10.container;
+            container = _render14.container;
 
         expect(container).toMatchSnapshot();
       });
     });
     describe('dark', function () {
       it('renders correctly', function () {
-        var _render11 = (0, _react2.render)(_react.default.createElement(_.default, {
+        var _render15 = (0, _react2.render)(_react.default.createElement(_.default, {
           text: "text",
           palette: "dark"
         })),
-            container = _render11.container;
+            container = _render15.container;
 
         expect(container).toMatchSnapshot();
       });
       it('renders correctly with an Icon', function () {
-        var _render12 = (0, _react2.render)(_react.default.createElement(_.default, {
+        var _render16 = (0, _react2.render)(_react.default.createElement(_.default, {
           text: "text",
           palette: "dark",
           icon: _Home.default
         })),
-            container = _render12.container;
+            container = _render16.container;
 
         expect(container).toMatchSnapshot();
       });
       it('renders correctly with different colors', function () {
-        var _render13 = (0, _react2.render)(_react.default.createElement(_.default, {
+        var _render17 = (0, _react2.render)(_react.default.createElement(_.default, {
           text: "text",
           palette: "dark",
           color: "information"
         })),
-            container = _render13.container;
+            container = _render17.container;
 
         expect(container).toMatchSnapshot();
       });
       it('renders correctly with an action', function () {
-        var _render14 = (0, _react2.render)(_react.default.createElement(_.default, {
+        var _render18 = (0, _react2.render)(_react.default.createElement(_.default, {
           text: "text",
           palette: "dark",
           action: jest.fn(),
@@ -244,12 +300,12 @@ describe('Tag', function () {
           },
           actionIcon: _Home.default
         })),
-            container = _render14.container;
+            container = _render18.container;
 
         expect(container).toMatchSnapshot();
       });
       it('renders the action correctly with the danger intent', function () {
-        var _render15 = (0, _react2.render)(_react.default.createElement(_.default, {
+        var _render19 = (0, _react2.render)(_react.default.createElement(_.default, {
           text: "text",
           palette: "dark",
           action: jest.fn(),
@@ -259,7 +315,7 @@ describe('Tag', function () {
           actionIcon: _Home.default,
           actionIntent: "danger"
         })),
-            container = _render15.container;
+            container = _render19.container;
 
         expect(container).toMatchSnapshot();
       });

package/lib/components/Tag/propTypes.d.ts

@@ -10,6 +10,7 @@ export declare const propTypes: {
     color: PropTypes.Requireable<import("../../utils/commonUIColors").CommonUIColorKeys>;
     variant: PropTypes.Requireable<string>;
     palette: PropTypes.Requireable<string>;
+    size: PropTypes.Requireable<string>;
 };
 export declare const defaultProps: {
     action: undefined;

package/lib/components/Tag/propTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"propTypes.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/propTypes.ts"],"names":[],"mappings":"AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAYnC,eAAO,MAAM,SAAS;;;;;;;;;;;CA2BrB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;CAWxB,CAAC"}
+{"version":3,"file":"propTypes.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/propTypes.ts"],"names":[],"mappings":"AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAYnC,eAAO,MAAM,SAAS;;;;;;;;;;;;CA4BrB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;CAWxB,CAAC"}

package/lib/components/Tag/propTypes.js

@@ -41,7 +41,8 @@ var propTypes = {
   actionRef: _propTypes.default.any,
   color: _propTypes.default.oneOf(_commonUIColors.commonUIColorKeys),
   variant: _propTypes.default.oneOf(['normal', 'outline']),
-  palette: _propTypes.default.oneOf(['pastel', 'bright', 'dark'])
+  palette: _propTypes.default.oneOf(['pastel', 'bright', 'dark']),
+  size: _propTypes.default.oneOf(['small', 'medium'])
 };
 exports.propTypes = propTypes;
 var defaultProps = {

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

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/schema.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,MAAM,KAAmC,CAAC;AA8ChD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/schema.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,MAAM,KAAmC,CAAC;AAkDhD,eAAe,MAAM,CAAC"}

package/lib/components/Tag/schema.js

@@ -16,6 +16,7 @@ var schema = (0, _reactDesc.describe)({
 schema.propTypes = {
   text: _reactDesc.PropTypes.string.description("The tag's text"),
   icon: _reactDesc.PropTypes.element.description('Which `iconix` icon to render as the main icon'),
+  size: _reactDesc.PropTypes.oneOf(['small', 'medium']).description('The size to use for the Tag').defaultValue('small'),
   color: _reactDesc.PropTypes.oneOf(_commonUIColors.commonUIColorKeys).description('The color to use as the tag background or SVG color when outlined').format('string (see notes below)').defaultValue('licoriceMousse'),
   palette: _reactDesc.PropTypes.oneOf(['bright', 'pastel', 'dark']).description('What color variant to render').defaultValue('bright'),
   variant: _reactDesc.PropTypes.oneOf(['normal', 'outline']).description('What tag variant to render').defaultValue('normal'),

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

@@ -0,0 +1,13 @@
+import { TagProps } from './types';
+interface ContentProps extends Pick<TagProps, 'palette'> {
+    hasIcon: boolean;
+    isSingleChild: boolean;
+}
+declare type ContainerProps = TagProps & {
+    isFocused: boolean;
+    isSingleChild: boolean;
+};
+export declare const Content: import("styled-components").StyledComponent<"div", any, ContentProps, never>;
+export declare const Container: import("styled-components").StyledComponent<"div", any, ContainerProps, never>;
+export {};
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/styles.ts"],"names":[],"mappings":"AAsBA,OAAO,EAAa,QAAQ,EAAoB,MAAM,SAAS,CAAC;AAahE,UAAU,YAAa,SAAQ,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC;IACtD,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,aAAK,cAAc,GAAG,QAAQ,GAAG;IAAE,SAAS,EAAE,OAAO,CAAC;IAAC,aAAa,EAAE,OAAO,CAAA;CAAE,CAAC;AAoChF,eAAO,MAAM,OAAO,8EAkCnB,CAAC;AAmIF,eAAO,MAAM,SAAS,gFAqDrB,CAAC"}

package/lib/components/Tag/styles.js

@@ -0,0 +1,167 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = exports.Content = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
+
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
+var _designTokens = _interopRequireWildcard(require("@decisiv/design-tokens"));
+
+var _commonUIColors = require("../../utils/commonUIColors");
+
+var _color = _interopRequireDefault(require("../../modifiers/color"));
+
+var _focusRingWithColor = _interopRequireDefault(require("../../utils/focusRingWithColor"));
+
+var _styleModifiers = require("../../utils/styleModifiers");
+
+var _Action = _interopRequireWildcard(require("./Action"));
+
+var _constants = require("./constants");
+
+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 _designTokens$color = _designTokens.default.color,
+    interactionColors = _designTokens$color.interaction,
+    statusColors = _designTokens$color.status;
+var PALETTE_MAPPER = {
+  pastel: 'light',
+  bright: 'medium',
+  dark: 'dark'
+};
+var FG_COLOR = {
+  pastel: _objectSpread({}, _designTokens.color.base.charcoal, {
+    alpha: 0.8
+  }),
+  bright: _designTokens.color.base.snowWhite,
+  dark: _designTokens.color.base.snowWhite
+};
+var BORDER_OPACITY = {
+  pastel: 0.1,
+  bright: 0.15,
+  dark: 0.3
+};
+
+var getContentMaxWidth = function getContentMaxWidth(props) {
+  var isSingleChild = props.isSingleChild,
+      hasIcon = props.hasIcon;
+  var iconWidth = 12;
+  var actionBorder = 1;
+  var containerBorder = 2;
+  var baseWidth = _constants.MAX_CONTAINER_WIDTH - _constants.CONTAINER_X_PADDING - containerBorder;
+  var valuesToSubtract = [];
+  !isSingleChild && valuesToSubtract.push(_constants.ACTION_WIDTH, actionBorder);
+  hasIcon && valuesToSubtract.push(iconWidth, _constants.ICON_CONTENT_MARGIN);
+  return (0, _rem.default)(valuesToSubtract.reduce(function (r, v) {
+    return r - v;
+  }, baseWidth));
+};
+
+var Content = _styledComponents.default.div.withConfig({
+  displayName: "styles__Content",
+  componentId: "sc-1sm93ik-0"
+})(["height:100%;color:inherit;align-items:center;border:0;display:flex;padding:0 ", ";border-right:1px solid ", ";", ";> svg{flex:1 0 auto;}* + *{margin-left:", ";}span{max-width:", ";}"], (0, _rem.default)(_constants.CONTAINER_X_PADDING), function (_ref) {
+  var _ref$palette = _ref.palette,
+      palette = _ref$palette === void 0 ? 'bright' : _ref$palette;
+  return (0, _toColorString.default)(_objectSpread({}, _designTokens.color.base.charcoal, {
+    alpha: BORDER_OPACITY[palette]
+  }));
+}, function (_ref2) {
+  var isSingleChild = _ref2.isSingleChild;
+  return (0, _styledComponents.css)(["max-width:", ";border-width:", ";"], isSingleChild ? '100%' : "calc(100% - ".concat(_constants.ACTION_WIDTH, "px)"), isSingleChild ? '0' : '1px');
+}, (0, _rem.default)(_constants.ICON_CONTENT_MARGIN), getContentMaxWidth);
+
+exports.Content = Content;
+
+var contentSVGColor = function contentSVGColor(_ref3) {
+  var variant = _ref3.variant,
+      colorProp = _ref3.color;
+
+  if (variant === 'outline' && colorProp && colorProp in _commonUIColors.commonUIColors) {
+    return (0, _styledComponents.css)(["", " svg{color:", ";}"], Content, (0, _toColorString.default)(_commonUIColors.commonUIColors[colorProp]));
+  }
+
+  return null;
+};
+
+var getColorByProps = function getColorByProps(_ref4) {
+  var variant = _ref4.variant,
+      colorProp = _ref4.color,
+      _ref4$palette = _ref4.palette,
+      palette = _ref4$palette === void 0 ? 'bright' : _ref4$palette;
+  if (variant === 'outline') return _objectSpread({}, _designTokens.color.base.snowWhite, {
+    fg: _designTokens.color.base.alaskanHusky
+  });
+
+  if (colorProp && colorProp in _commonUIColors.commonUIThreeShadeColors) {
+    var baseColor = _commonUIColors.commonUIThreeShadeColors[colorProp];
+    var fgColor = FG_COLOR[palette];
+    var bgColor = baseColor[PALETTE_MAPPER[palette]];
+    return palette === 'bright' ? bgColor : _objectSpread({}, bgColor, {
+      fg: fgColor
+    });
+  }
+
+  return _commonUIColors.commonUIColors.licoriceMousse;
+};
+
+var actionColors = {
+  normal: (0, _toColorString.default)(interactionColors.indianOcean),
+  danger: (0, _toColorString.default)(statusColors.danger.medium)
+};
+
+var actionColor = function actionColor(_ref5) {
+  var actionIntent = _ref5.actionIntent;
+  return actionColors[actionIntent !== 'danger' ? 'normal' : 'danger'];
+};
+
+var colorModifiers = function colorModifiers(props) {
+  var _props$palette = props.palette,
+      palette = _props$palette === void 0 ? 'bright' : _props$palette;
+
+  var borderColor = _objectSpread({}, _designTokens.color.base.charcoal, {
+    alpha: BORDER_OPACITY[palette]
+  });
+
+  return (0, _styledComponents.css)(["", ";border:1px solid ", ";", ""], (0, _color.default)(getColorByProps(props)), (0, _toColorString.default)(borderColor), (0, _styleModifiers.when)('isSingleChild', false, (0, _styledComponents.css)(["&:hover{box-shadow:inset 0 0 0 ", " ", ";", "{border-color:transparent;}}"], (0, _rem.default)(100), (0, _toColorString.default)(borderColor), Content)));
+};
+
+var variantModifiers = function variantModifiers(props) {
+  var _props$variant = props.variant,
+      variant = _props$variant === void 0 ? 'normal' : _props$variant;
+  if (variant === 'normal') return undefined;
+  return (0, _styledComponents.css)(["border:1px solid ", ";", " &:focus{border:1px solid ", ";::before{", ";}}"], (0, _toColorString.default)(_designTokens.color.opacity.charcoal15), (0, _styleModifiers.when)('isSingleChild', false, (0, _styledComponents.css)(["&:hover{background-color:", ";}"], (0, _toColorString.default)(_objectSpread({}, _designTokens.color.base.charcoal, {
+    alpha: 0.07
+  })))), (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), (0, _focusRingWithColor.default)(_designTokens.color.interaction.pacificOcean40));
+};
+
+var sizeModifiers = function sizeModifiers(props) {
+  var _props$size = props.size,
+      size = _props$size === void 0 ? 'small' : _props$size;
+  if (size === 'small') return undefined;
+  var mediumHeight = (0, _rem.default)(25);
+  var mediumRadius = (0, _rem.default)(15);
+  var mediumBorderRadius = "0 ".concat(mediumRadius, " ").concat(mediumRadius, " 0");
+  return (0, _styledComponents.css)(["height:", ";border-radius:", ";&:focus{::before{border-radius:", ";}}", "{padding-right:", ";}", ",", "{border-radius:", ";}"], mediumHeight, mediumRadius, mediumRadius, _Action.default, (0, _rem.default)(2), _Action.default, _Action.ActionContainer, mediumBorderRadius);
+};
+
+var Container = _styledComponents.default.div.withConfig({
+  displayName: "styles__Container",
+  componentId: "sc-1sm93ik-1"
+})(["position:relative;font-family:", ";font-size:", ";font-weight:", ";align-items:center;justify-content:center;border-radius:", ";display:inline-flex;height:", ";max-width:100%;min-width:", ";background-color:transparent;padding:0;", " &:focus{border:1px solid ", ";&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:'';border-radius:", ";", ";}}&:focus-visible{outline:none;}&:hover{", "{color:", ";}}", ";", ";", ";", ";"], _designTokens.typography.typeface.default, (0, _rem.default)(_designTokens.typography.size.alias.default), _designTokens.typography.weight.alias.default, (0, _rem.default)(10), (0, _rem.default)(20), (0, _rem.default)(26), (0, _styleModifiers.when)('isSingleChild', false, (0, _styledComponents.css)(["cursor:pointer;"])), (0, _toColorString.default)(_designTokens.color.base.blackSheep), (0, _rem.default)(10), (0, _focusRingWithColor.default)(_designTokens.color.opacity.charcoal40), _Action.default, actionColor, sizeModifiers, colorModifiers, variantModifiers, contentSVGColor);
+
+exports.Container = Container;

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

@@ -2,12 +2,13 @@ import React, { Ref, RefAttributes, AriaAttributes, DOMAttributes } from 'react'
 import { CSSObject } from 'styled-components';
 import { IconProps } from '@decisiv/iconix';
 import { CommonUIColorKeys } from '../../utils/commonUIColors';
-export declare type TagRef = HTMLButtonElement;
+export declare type TagRef = HTMLDivElement;
 export declare type TagActionRef = HTMLDivElement;
 export declare type IconComponent = (props: IconProps) => JSX.Element;
-export declare type ActionHandler = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => unknown;
+export declare type ActionHandler = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => unknown;
 export declare type BaseProps = {
     color?: CommonUIColorKeys;
+    size?: 'medium' | 'small';
     palette?: 'pastel' | 'bright' | 'dark';
     variant?: 'normal' | 'outline';
     style?: CSSObject;
@@ -38,7 +39,7 @@ declare type ConditionalProps = Text & {
 export declare type ActionExtraProps = {
     actionRef?: Ref<TagActionRef>;
     actionIntent?: 'normal' | 'danger';
-    actionAttributes?: AriaAttributes & DOMAttributes<HTMLButtonElement>;
+    actionAttributes?: AriaAttributes & DOMAttributes<HTMLDivElement>;
 };
 export declare type TagProps = RefAttributes<TagRef> & BaseProps & ContentProps & ConditionalProps & ActionExtraProps;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/types.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EACZ,GAAG,EACH,aAAa,EACb,cAAc,EACd,aAAa,EACd,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAE9C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,oBAAY,MAAM,GAAG,iBAAiB,CAAC;AACvC,oBAAY,YAAY,GAAG,cAAc,CAAC;AAC1C,oBAAY,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAE9D,oBAAY,aAAa,GAAG,CAC1B,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KACnD,OAAO,CAAC;AAEb,oBAAY,SAAS,GAAG;IACtB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;IACvC,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,aAAK,YAAY,GAAG;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,UAAU,CAAC,EAAE,aAAa,CAAC;CAC5B,CAAC;AAEF,aAAK,IAAI,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAC7B,aAAK,IAAI,GAAG;IAAE,IAAI,EAAE,aAAa,CAAA;CAAE,CAAC;AACpC,aAAK,MAAM,GAAG;IAAE,MAAM,EAAE,aAAa,CAAA;CAAE,CAAC;AACxC,aAAK,UAAU,GAAG;IAAE,UAAU,EAAE,aAAa,CAAA;CAAE,CAAC;AAEhD,aAAK,gBAAgB,GACjB,IAAI,GAAG;IAAE,MAAM,CAAC,EAAE,aAAa,CAAA;CAAE,GACjC,IAAI,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,CAAA;CAAE,GACzB,IAAI,GAAG,IAAI,GACX,IAAI,GAAG,MAAM,GAAG,UAAU,GAC1B,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,UAAU,CAAC;AAEtC,oBAAY,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,GAAG,CAAC,YAAY,CAAC,CAAC;IAC9B,YAAY,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACnC,gBAAgB,CAAC,EAAE,cAAc,GAAG,aAAa,CAAC,iBAAiB,CAAC,CAAC;CACtE,CAAC;AAEF,oBAAY,QAAQ,GAAG,aAAa,CAAC,MAAM,CAAC,GAC1C,SAAS,GACT,YAAY,GACZ,gBAAgB,GAChB,gBAAgB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/types.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EACZ,GAAG,EACH,aAAa,EACb,cAAc,EACd,aAAa,EACd,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAE9C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,oBAAY,MAAM,GAAG,cAAc,CAAC;AACpC,oBAAY,YAAY,GAAG,cAAc,CAAC;AAC1C,oBAAY,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAE9D,oBAAY,aAAa,GAAG,CAC1B,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAChD,OAAO,CAAC;AAEb,oBAAY,SAAS,GAAG;IACtB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;IACvC,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,aAAK,YAAY,GAAG;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,UAAU,CAAC,EAAE,aAAa,CAAC;CAC5B,CAAC;AAEF,aAAK,IAAI,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAC7B,aAAK,IAAI,GAAG;IAAE,IAAI,EAAE,aAAa,CAAA;CAAE,CAAC;AACpC,aAAK,MAAM,GAAG;IAAE,MAAM,EAAE,aAAa,CAAA;CAAE,CAAC;AACxC,aAAK,UAAU,GAAG;IAAE,UAAU,EAAE,aAAa,CAAA;CAAE,CAAC;AAEhD,aAAK,gBAAgB,GACjB,IAAI,GAAG;IAAE,MAAM,CAAC,EAAE,aAAa,CAAA;CAAE,GACjC,IAAI,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,CAAA;CAAE,GACzB,IAAI,GAAG,IAAI,GACX,IAAI,GAAG,MAAM,GAAG,UAAU,GAC1B,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,UAAU,CAAC;AAEtC,oBAAY,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,GAAG,CAAC,YAAY,CAAC,CAAC;IAC9B,YAAY,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACnC,gBAAgB,CAAC,EAAE,cAAc,GAAG,aAAa,CAAC,cAAc,CAAC,CAAC;CACnE,CAAC;AAEF,oBAAY,QAAQ,GAAG,aAAa,CAAC,MAAM,CAAC,GAC1C,SAAS,GACT,YAAY,GACZ,gBAAgB,GAChB,gBAAgB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decisiv/ui-components",
-  "version": "2.0.1-alpha.155+2a55911",
+  "version": "2.0.1-alpha.157+be9b5ed",
   "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.273+2a55911",
-    "@decisiv/iconix": "^2.0.1-alpha.155+2a55911",
+    "@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": "2a55911af990f81d5504d2f61475dc8968227879"
+  "gitHead": "be9b5edd78ae3dbcd629363868f410d13e7eafe8"
 }