@decisiv/ui-components 2.0.1-alpha.187 → 2.0.1-alpha.188

package/lib/components/Filter/SimplePrimary/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { SimpleFilterProps } from '../types';
-declare const FilterSimplePrimary: ({ "aria-label": ariaLabel, active, disabled, kind, text, badgeIcon: Icon, badgeColor, count, }: SimpleFilterProps) => JSX.Element;
+declare const FilterSimplePrimary: ({ "aria-label": ariaLabel, active, disabled, text, badgeIcon: Icon, badgeColor, count, }: SimpleFilterProps) => JSX.Element;
 export default FilterSimplePrimary;
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Filter/SimplePrimary/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Filter/SimplePrimary/index.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C,QAAA,MAAM,mBAAmB,oIA4BxB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Filter/SimplePrimary/index.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C,QAAA,MAAM,mBAAmB,8HAgCxB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/lib/components/Filter/SimplePrimary/index.js

@@ -21,7 +21,6 @@ var FilterSimplePrimary = function FilterSimplePrimary(_ref) {
       active = _ref$active === void 0 ? false : _ref$active,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      kind = _ref.kind,
       text = _ref.text,
       Icon = _ref.badgeIcon,
       _ref$badgeColor = _ref.badgeColor,
@@ -37,7 +36,7 @@ var FilterSimplePrimary = function FilterSimplePrimary(_ref) {
     "aria-label": ariaLabel
   })), _react.default.createElement(_StyledLabel.default, {
     active: active,
-    kind: kind,
+    kind: "primary",
     hasBadge: !!Icon,
     marginLeft: 1
   }, buttonText));

package/lib/components/Filter/StyledFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StyledFilter.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/StyledFilter.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AA4D1C,QAAA,MAAM,YAAY,oFAiDjB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"StyledFilter.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/StyledFilter.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAoE1C,QAAA,MAAM,YAAY,oFAiDjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Filter/StyledFilter.js

@@ -35,18 +35,27 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 var activeStyles = (0, _styledComponents.css)(["color:", ";background-color:", ";border:", " solid ", ";svg{color:", ";}"], (0, _toColorString.default)(_color.default.base.snowWhite), (0, _toColorString.default)(_color.default.status.information.medium), (0, _rem.default)(1), (0, _toColorString.default)(_color.default.status.information.medium), (0, _toColorString.default)(_color.default.base.snowWhite));
 var focusStyles = (0, _styledComponents.css)(["border:", " solid ", ";", ";"], (0, _rem.default)(1), (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _focusRingWithColor.default)(_colors.focusRingColors.light.normal.secondary.shadow));
-var actionVariantStyles = (0, _styledComponents.css)(["border:", " solid transparent;background:transparent;svg{color:", ";}&:hover{border:", " solid transparent;color:", ";background:transparent;svg{color:inherit;}}&:disabled:disabled{border:none;background:transparent;}"], (0, _rem.default)(1), (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _rem.default)(1), (0, _toColorString.default)(_color.default.interaction.indianOcean));
-
-var variant = _styledTheming.default.variants(_ConfigProvider.themeKeys.mode, 'variant', {
-  simple: {
-    light: '',
-    dark: ''
-  },
-  action: {
-    light: actionVariantStyles,
-    dark: actionVariantStyles
-  }
-});
+var altActionVariantStyles = (0, _styledComponents.css)(["border:", " solid transparent;background:transparent;svg{color:", ";}&:hover{border:", " solid transparent;color:", ";background:transparent;svg{color:inherit;}}&:disabled:disabled{border:none;background:transparent;}"], (0, _rem.default)(1), (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _rem.default)(1), (0, _toColorString.default)(_color.default.interaction.indianOcean));
+var variantKindMapper = {
+  primary: '',
+  primaryAlt: altActionVariantStyles,
+  secondary: altActionVariantStyles
+};
+
+var variant = function variant(_ref) {
+  var _ref$kind = _ref.kind,
+      kindProp = _ref$kind === void 0 ? 'primary' : _ref$kind;
+  return _styledTheming.default.variants(_ConfigProvider.themeKeys.mode, 'variant', {
+    simple: {
+      light: '',
+      dark: ''
+    },
+    action: {
+      light: variantKindMapper[kindProp],
+      dark: variantKindMapper[kindProp]
+    }
+  });
+};
 
 var StyledFilter = _styledComponents.default.button.withConfig({
   displayName: "StyledFilter",

package/lib/components/Filter/StyledLabel/index.js

@@ -21,7 +21,7 @@ var StyledLabel = _styledComponents.default.span.withConfig({
 })(["font-size:", ";margin-right:", ";margin-left:", ";"], function (_ref) {
   var _ref$kind = _ref.kind,
       kind = _ref$kind === void 0 ? 'primary' : _ref$kind;
-  return kind === 'primary' ? (0, _rem.default)(_designTokens.typography.size.alias.default) : (0, _rem.default)(_designTokens.typography.size.alias.paragraph2);
+  return kind === 'secondary' ? (0, _rem.default)(_designTokens.typography.size.alias.paragraph2) : (0, _rem.default)(_designTokens.typography.size.alias.default);
 }, function (_ref2) {
   var _ref2$hasBadge = _ref2.hasBadge,
       hasBadge = _ref2$hasBadge === void 0 ? false : _ref2$hasBadge,

package/lib/components/Filter/index.js

@@ -72,7 +72,7 @@ var Filter = (0, _react.forwardRef)(function (props, ref) {
   }, [onClick, toggleStatus]);
   return _react.default.createElement(_StyledFilter.default, _extends({
     ref: ref,
-    kind: kind,
+    kind: variant === 'simple' ? 'primary' : kind,
     variant: variant,
     tabIndex: 0,
     active: filterActive || active,

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

@@ -53,4 +53,18 @@ describe('Filter', function () {
       expect(onClick).not.toHaveBeenCalled();
     });
   });
+  describe('kind', function () {
+    ['primary', 'primaryAlt', 'secondary'].forEach(function (kind) {
+      it("Renders ".concat(kind, " kind as expected"), function () {
+        var _render4 = (0, _react2.render)(_react.default.createElement(_.default, {
+          variant: "action",
+          text: "text sample",
+          kind: kind
+        })),
+            container = _render4.container;
+
+        expect(container).toMatchSnapshot();
+      });
+    });
+  });
 });

package/lib/components/Filter/kind.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"kind.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/kind.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,gBAAgB,CAAC;AAInC,eAAO,MAAM,WAAW,wDAQvB,CAAC;AAEF,eAAO,MAAM,YAAY,wDAWxB,CAAC;AAEF,eAAO,MAAM,cAAc,wDAI1B,CAAC;AAEF,QAAA,MAAM,UAAU,kBAUd,CAAC;AAEH,eAAe,UAAU,CAAC"}
+{"version":3,"file":"kind.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/kind.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,gBAAgB,CAAC;AAInC,eAAO,MAAM,WAAW,wDAQvB,CAAC;AAEF,eAAO,MAAM,YAAY,wDAWxB,CAAC;AAEF,eAAO,MAAM,cAAc,wDAE1B,CAAC;AAEF,QAAA,MAAM,UAAU,kBAUd,CAAC;AAEH,eAAe,UAAU,CAAC"}

package/lib/components/Filter/kind.js

@@ -25,7 +25,7 @@ var hoverStyles = (0, _styledComponents.css)(["color:", ";background-color:", ";
 exports.hoverStyles = hoverStyles;
 var primaryStyle = (0, _styledComponents.css)(["border:", " solid ", ";&:hover{", ";}&:disabled:disabled{background-color:transparent;color:", ";}"], (0, _rem.default)(1), (0, _toColorString.default)(_color.default.base.quarterMoon), hoverStyles, (0, _toColorString.default)(_color.default.opacity.charcoal40));
 exports.primaryStyle = primaryStyle;
-var secondaryStyle = (0, _styledComponents.css)(["height:", ";font-size:", ";"], (0, _rem.default)(_designTokens.spacing.base * 2.4), (0, _rem.default)(_designTokens.typography.size.alias.paragraph2));
+var secondaryStyle = (0, _styledComponents.css)(["height:", ";"], (0, _rem.default)(_designTokens.spacing.base * 2.4));
 exports.secondaryStyle = secondaryStyle;
 
 var kindStyles = _styledTheming.default.variants(_ConfigProvider.themeKeys.mode, 'kind', {

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

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

package/lib/components/Filter/schema.js

@@ -21,7 +21,7 @@ var makeFilterSchemaPropTypes = function makeFilterSchemaPropTypes(extensions) {
     badgeColor: _reactDesc.PropTypes.string.description('Which color to use as background for the icon. It always displays when an icon is provided. Only usable with the "simple" variant').defaultValue('information'),
     count: _reactDesc.PropTypes.number.description("The Filter's count, displayed to the left of the text. When not provided, no count is rendered."),
     disabled: _reactDesc.PropTypes.bool.description("The Filter's displayed status of disabled or enabled.").defaultValue('false'),
-    kind: _reactDesc.PropTypes.oneOf(['primary', 'secondary']).defaultValue('primary'),
+    kind: _reactDesc.PropTypes.oneOf(['primary', 'primaryAlt', 'secondary']).defaultValue('primary'),
     variant: _reactDesc.PropTypes.oneOf(['simple', 'action']).description('Use the variant to define the type of filter that you want to use').defaultValue('simple'),
     startIcon: _reactDesc.PropTypes.element.description('Which `iconix` icon to render before the filter text, only usable with the "action" variant'),
     endIcon: _reactDesc.PropTypes.element.description('Which `iconix` icon to render after the filter text, only usable with the "action" variant')

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

@@ -3,7 +3,7 @@ import { IconProps } from '@decisiv/iconix';
 import { CommonUIColorKeys } from '../../utils/commonUIColors';
 import { TranslatedText } from '../../utils/useTranslations';
 export declare type Variant = 'simple' | 'action';
-export declare type Kind = 'primary' | 'secondary';
+export declare type Kind = 'primary' | 'primaryAlt' | 'secondary';
 export declare type IconComponent = (props: IconProps) => JSX.Element;
 export interface BaseFilterProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     kind?: Kind;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/types.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAE7D,oBAAY,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAC1C,oBAAY,IAAI,GAAG,SAAS,GAAG,WAAW,CAAC;AAC3C,oBAAY,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAE9D,MAAM,WAAW,eACf,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC/C,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,OAAO,EAAE,QAAQ,CAAC;IAClB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,OAAO,EAAE,QAAQ,CAAC;IAClB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB;AAED,oBAAY,WAAW,GAAG,iBAAiB,GAAG,iBAAiB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/types.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAE7D,oBAAY,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAC1C,oBAAY,IAAI,GAAG,SAAS,GAAG,YAAY,GAAG,WAAW,CAAC;AAC1D,oBAAY,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAE9D,MAAM,WAAW,eACf,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC/C,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,OAAO,EAAE,QAAQ,CAAC;IAClB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,OAAO,EAAE,QAAQ,CAAC;IAClB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB;AAED,oBAAY,WAAW,GAAG,iBAAiB,GAAG,iBAAiB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decisiv/ui-components",
-  "version": "2.0.1-alpha.187+51055fc",
+  "version": "2.0.1-alpha.188+da2dc11",
   "description": "Decisiv's design system React components",
   "author": "Decisiv UI Development Team",
   "license": "MIT",
@@ -71,5 +71,5 @@
     "access": "public"
   },
   "private": false,
-  "gitHead": "51055fc7980524888cf746251ca1c781216d40d6"
+  "gitHead": "da2dc11cc3917992124922b33ee4083e13a92e08"
 }